From 61d3fc2bd7b80c65174fefd9239270bb3d7b0567 Mon Sep 17 00:00:00 2001
From: StuffedAnon <stuffedgame@gmail.com>
Date: Thu, 14 Mar 2019 22:36:57 +0900
Subject: [PATCH] Add CSS to style the options and port across the rest of the
 introSummary

---
 sanityCheck                      |   2 +-
 src/events/intro/introSummary.tw | 374 +++++++++++++++----------------
 src/gui/css/optionsMacro.tw      |  20 +-
 src/js/optionsMacro.js           |  14 +-
 4 files changed, 212 insertions(+), 198 deletions(-)

diff --git a/sanityCheck b/sanityCheck
index a9540854dbd..dc0328cde62 100755
--- a/sanityCheck
+++ b/sanityCheck
@@ -57,7 +57,7 @@ $GREP "\$slave\[" -- 'src/*' | myprint "ShouldBeSlaves"
 # Check for strange spaces e.g.  $slaves[$i]. lips
 $GREP "\$slaves\[\$i\]\. " -- 'src/*' | myprint "MissingPropertyAfterSlaves"
 # Check using refreshmentType instead of refreshment
-$GREP "\$PC.refreshmentType[^ =]" -- 'src/*' | myprint "ShouldBeRefreshment"
+$GREP "\$PC.refreshmentType[^ =]" -- 'src/*' | grep -v src/events/intro/introSummary.tw | myprint "ShouldBeRefreshment"
 # Check, e.g., <<//if>>
 $GREP "<</[a-zA-Z]*[^a-zA-Z<>]\+[a-zA-Z]*>>" -- 'src/*' | myprint "DoubleSlash"
 # Check, e.g.  <<else $foo==4
diff --git a/src/events/intro/introSummary.tw b/src/events/intro/introSummary.tw
index ea48f6516a5..a61bb5f266d 100644
--- a/src/events/intro/introSummary.tw
+++ b/src/events/intro/introSummary.tw
@@ -25,11 +25,11 @@ __''World Settings''__
 <br>
 <<set $localEcon = $economy>>
 <<options $economy>>
-  Economic climate:
+	Economic climate:
 	<<option 200 "Very Easy">>
 		''not truly dire. Not yet.'' //Very Easy//
 	<<option 125 "Easy">>
-	  ''getting a touch dire.'' //Easy//
+		''getting a touch dire.'' //Easy//
 	<<option 100 "Default Difficulty">>
 		''serious risks.'' //Default Difficulty//
 	<<option 80 "Hard">>
@@ -44,11 +44,11 @@ __''World Settings''__
 Economic forecast:
 	<<option 0 "Vanilla" "$difficultySwitch = 0">>
 	''no change.'' //Vanilla -- Some economic content requires this to be set to harder than vanilla//
-  <<option 1 "Easy" "$difficultySwitch = 1">>
+	<<option 1 "Easy" "$difficultySwitch = 1">>
 	''slow decline''. //Easy//
-  <<option 2 "Default" "$difficultySwitch = 1">>
+	<<option 2 "Default" "$difficultySwitch = 1">>
 	''noticeable deterioration'' //Default Difficulty//
-  <<option 4 "Hard" "$difficultySwitch = 1">>
+	<<option 4 "Hard" "$difficultySwitch = 1">>
 	''going to hell in a handbasket''. //Hard//
 <</options>>
 
@@ -81,28 +81,28 @@ Economic forecast:
 
 <<if ndef $customVariety>>
 <<options>>
-  You are using standardized slave trading channels.
-  <<option>>
+	You are using standardized slave trading channels.
+	<<option>>
 		[[Customize the slave trade...|Customize Slave Trade][$customVariety = 1,
 $customWA = 0]]
 <</options>>
 <br>
 	<<options $internationalTrade>>
-	  <<option 0 "Restrict the trade to continental">>
+		<<option 0 "Restrict the trade to continental">>
 		The slave trade is ''continental,'' so a narrower variety of slaves will be available.
-	  <<option 1 "Allow intercontinental trade">>
+		<<option 1 "Allow intercontinental trade">>
 		The slave trade is ''international,'' so a wider variety of slaves will be available.
 	<</options>>
 	<br>
 
 	<<if $internationalTrade == 1>>
-	  <<options $internationalVariety>>
+		<<options $internationalVariety>>
 			International slave variety is
 		<<option 0 "Semi-realistic national variety">>
 			''semi-realistic,'' so more populous nations will be more common.
 		<<option 1 "Normalized national variety">>
 			''normalized,'' so small nations will appear nearly as much as large  ones.
-	  <</options>>
+		<</options>>
 	<</if>>
 	<br>
 <<else>>
@@ -141,9 +141,9 @@ $customWA = 0]]
 
 <<options $plot>>
 	<<option 0 "Disable non-erotic events">>
-	  Game mode: ''one-handed''. No non-erotic events concerning the changing world.
+		Game mode: ''one-handed''. No non-erotic events concerning the changing world.
 	<<option 1 "Enable non-erotic events">>
-	  Game mode: ''two-handed''. Includes non-erotic events concerning the changing world.
+		Game mode: ''two-handed''. Includes non-erotic events concerning the changing world.
 <</options>>
 
 <br><br>
@@ -151,80 +151,80 @@ __''General slave settings''__
 <br>
 <<options $verboseDescriptions>>
 	<<option 0 "Disable">>
-	  Your master suite ''will not'' detail slave changes.
+		Your master suite ''will not'' detail slave changes.
 	<<option 1 "Enable">>
-	  Your master suite ''will'' detail slave changes.
+		Your master suite ''will'' detail slave changes.
 <</options>>
 
 <br>
 <<options $newDescriptions>>
 	<<option 0 "Disable">>
-	  Slaves ''will not'' have alternate titles.
+		Slaves ''will not'' have alternate titles.
 	<<option 1 "Enable">>
-	  Slaves ''will'' have alternate titles.
+		Slaves ''will'' have alternate titles.
 <</options>>
 
 <br>
 <<options $seeRace>>
 	<<option 0 "Disable most mentions of race">>
-	  Ethnicity will ''almost never'' be mentioned.
+		Ethnicity will ''almost never'' be mentioned.
 	<<option 1 "Enable mentions of race">>
-	  Ethnicity will ''occasionally'' be mentioned.
+		Ethnicity will ''occasionally'' be mentioned.
 <</options>>
 
 <br>
 <<options $seeNationality>>
 	<<option 0 "Disable most mentions of nationality">>
-	  Nationality will ''almost never'' be mentioned.
+		Nationality will ''almost never'' be mentioned.
 	<<option 1 "Enable mentions of nationality">>
-	  Nationality will ''occasionally'' be mentioned.
+		Nationality will ''occasionally'' be mentioned.
 <</options>>
 
 <br>
 <<options $allowMaleSlaveNames>>
 	<<option false "Only use female names">>
-	  Slaves will ''always generate with female names'',
+		Slaves will ''always generate with female names'',
 	<<option true "Allow male names">>
-	  Slaves ''can generate with male names''.
+		Slaves ''can generate with male names''.
 		<<comment>>
 			This only affects slave generation and not your ability to name your slaves.
 <</options>>
 
 <br>
 <<options $surnameOrder>>
-  <<option 0 "Allow nationality name order">>
+	<<option 0 "Allow nationality name order">>
 	Order names ''based on country of origin''.
-  <<option 1 "Force name surname">>
+	<<option 1 "Force name surname">>
 	Names will always be ''Name Surname''.
-  <<option 2 "Force surname name">>
+	<<option 2 "Force surname name">>
 	Names will always be ''Surname Name''.
 <</options>>
 
 <br>
 <<options $familyTesting>>
-  <<option 0 "Disable extended families">>
+	<<option 0 "Disable extended families">>
 	Slaves ''cannot'' have extended families, just a single relative. //Vanilla Mode.//
-  <<option 1 "Enable extended families">>
+	<<option 1 "Enable extended families">>
 	Slaves ''can'' have extended families instead of just a single relative.
 	//May cause lag.//
 	<<comment>>
-	  Extended family mode must be on for the incubation facility to be enabled.
+		Extended family mode must be on for the incubation facility to be enabled.
 <</options>>
 
 <<if $familyTesting == 1>>
 	<br>
 	<<options $inbreeding>>
-	  <<option 0 "Disable inbreeding damage">>
+		<<option 0 "Disable inbreeding damage">>
 		Successive breeding ''will not'' result in sub-average slaves.
-	  <<option 1 "Enable inbreeding damage">>
+		<<option 1 "Enable inbreeding damage">>
 		Successive breeding ''will'' result in sub-average slaves.
 	<</options>>
 
 	<br>
 	<<options $allowFamilyTitles>>
-	  <<option 0 "Disable family titles">>
+		<<option 0 "Disable family titles">>
 		Your relatives ''will not'' use family titles.
-	  <<option 1 "Enable family titles">>
+		<<option 1 "Enable family titles">>
 		Your relatives ''will'' use family titles.
 	<</options>>
 <</if>>
@@ -233,18 +233,18 @@ __''General slave settings''__
 
 <<options $weightAffectsAssets>>
 	<<option 0 "Disable">>
-	  Interactions between slaves' weight and asset size are ''disabled''.
+		Interactions between slaves' weight and asset size are ''disabled''.
 	<<option 1 "Enable">>
-	  Interactions between slaves' weight and asset size are ''enabled''.
+		Interactions between slaves' weight and asset size are ''enabled''.
 <</options>>
 
 &nbsp;&nbsp;&nbsp;&nbsp;
 
 <br>
 <<options $curativeSideEffects>>
-  <<option 0 "Disable">>
+	<<option 0 "Disable">>
 	Curative side effects are ''disabled''.
-  <<option 1 "Enable">>
+	<<option 1 "Enable">>
 	Curative side effects are ''enabled''.
 <</options>>
 
@@ -266,14 +266,14 @@ __''Slave age settings''__
 
 <br>
 <<options $seeAge>>
-  <<option 0 "Disable aging">>
+	<<option 0 "Disable aging">>
 	Slaves will ''not age,'' and not experience birthdays.
-  <<option 1 "Enable aging">>
+	<<option 1 "Enable aging">>
 	Slaves will ''age naturally.''
-  <<option 2 "Semi aging">>
+	<<option 2 "Semi aging">>
 	Slaves ''will'' celebrate birthdays, but ''not age.''
 	<<comment>>
-	  This option cannot be changed during the game
+		This option cannot be changed during the game
 <</options>>
 
 <br>
@@ -294,9 +294,9 @@ __''Slave age settings''__
 
 <br>
 <<options $extremeUnderage>>
-  <<option 0 "Deny">>
+	<<option 0 "Deny">>
 	Molestation of slaves younger than $minimumSlaveAge is ''forbidden''.
-  <<option 1 "Allow">>
+	<<option 1 "Allow">>
 	Molestation of slaves younger than $minimumSlaveAge is ''permitted''.
 <</options>>
 <br>
@@ -317,10 +317,10 @@ __''Slave age settings''__
 <</options>>
 <br>
 <<options $pedo_mode>>
-  <<option 0 "Normal mode">>
+	<<option 0 "Normal mode">>
 	Randomly generated slaves will generate normally.
-  <<option 1 "Loli mode" "$minimumSlaveAge = 5">>
-  	Nearly all randomly generated slaves will be under the age of 18, although custom slaves and slaves related to specific events may be older.
+	<<option 1 "Loli mode" "$minimumSlaveAge = 5">>
+		Nearly all randomly generated slaves will be under the age of 18, although custom slaves and slaves related to specific events may be older.
 <</options>>
 
 <br>
@@ -355,129 +355,129 @@ __''Slave age settings''__
 
 <br>
 <<options $precociousPuberty>>
-  <<option 0 "Disable precocious puberty">>
+	<<option 0 "Disable precocious puberty">>
 	Girls ''cannot'' experience precocious puberty. (Unable to become pregnant or inseminate others younger than normal puberty age - $fertilityAge).
-  <<option 1 "Enable precocious puberty">>
-  	Girls ''can'' experience precocious puberty. (Under certain conditions they can become pregnant or inseminate others younger then normal age - $fertilityAge, though they may also experience delayed puberty).
+	<<option 1 "Enable precocious puberty">>
+		Girls ''can'' experience precocious puberty. (Under certain conditions they can become pregnant or inseminate others younger then normal age - $fertilityAge, though they may also experience delayed puberty).
 <</options>>
 
 <br><br>
 __''Slave age effects''__
 <br>
 <<options $AgePenalty>>
-  <<option 0 "Disable age penalties">>
+	<<option 0 "Disable age penalties">>
 	Girls ''will not'' receive job and career penalties due to age.
-  <<option 1 "Enable age penalties">>
-  	Girls ''will'' receive job and career penalties due to age.
+	<<option 1 "Enable age penalties">>
+		Girls ''will'' receive job and career penalties due to age.
 <</options>>
 <br>
 <<options $loliGrow>>
-  <<option 0 "Disable Growth">>
+	<<option 0 "Disable Growth">>
 	Children ''will'' grow as they age.
-  <<option 1 "Enable Growth">>
-  	Children ''will not'' grow as they age.
+	<<option 1 "Enable Growth">>
+		Children ''will not'' grow as they age.
 <</options>>
 
 <br><br>
 __''Content settings''__
 <br>
 <<options $seeDicks>>
-  <<option 0 "None" "" "(0%)">>
+	<<option 0 "None" "" "(0%)">>
 	''None'' of the slave girls will have dicks.
-  <<option 10 "A few" "" "(10%)">>
+	<<option 10 "A few" "" "(10%)">>
 	''A few'' of the slave girls will have dicks.
-  <<option 25 "Some" "" "(25%)">>
+	<<option 25 "Some" "" "(25%)">>
 	''Some'' of the slave girls will have dicks.
-  <<option 50 "Half" "" "(50%)">>
+	<<option 50 "Half" "" "(50%)">>
 	''Half'' of the slave girls will have dicks.
-  <<option 75 "Most" "" "(75%)">>
+	<<option 75 "Most" "" "(75%)">>
 	''Most'' of the slave girls will have dicks.
-  <<option 90 "Almost all" "" "(90%)">>
+	<<option 90 "Almost all" "" "(90%)">>
 	''Almost all'' of the slave girls will have dicks.
-  <<option 100 "All" "" "(100%)">>
+	<<option 100 "All" "" "(100%)">>
 	''All'' of the slave girls will have dicks.
 <</options>>
 <br>
 <<if $seeDicks == 0>>
-Should you be able to surgically attach a penis to your female slaves and starting girls?
-<<options $makeDicks>>
-  <<option 0 "No">>
-  <<option 1 "Yes">>
-<</options>>
+	<<options $makeDicks>>
+		&nbsp;&nbsp;&nbsp;&nbsp;Should you be able to surgically attach a penis to your female slaves and   starting girls?
+	<<option 0 "No">>
+	<<option 1 "Yes">>
+	<</options>>
 <</if>>
 
 <br>
 <<options $seePreg>>
-  <<option 0 "Disable">>
-  	Most pregnancy related content is ''disabled''.
-  <<option 1 "Enable">>
-  	Pregnancy related content is ''enabled''.
+	<<option 0 "Disable">>
+		Most pregnancy related content is ''disabled''.
+	<<option 1 "Enable">>
+		Pregnancy related content is ''enabled''.
 <</options>>
 
 <br>
 <<options $seeDicksAffectsPregnancy>>
-  <<option 0 "No">>
+	<<option 0 "No">>
 	Children born in game do not adhere to dick content settings.
-  <<option 1 "Yes">>
+	<<option 1 "Yes">>
 	Children born in game strictly adhere to dick content settings.
 <</options>>
 
 <<if $seeDicksAffectsPregnancy == 0>>
 	<br>
 	<<options $adamPrinciple>>
-	  <<option 0 "Disable">>
-	  	XX slaves only fathering daughters is ''disabled''.
-	  <<option 1 "Enable">>
-	  	XX slaves only fathering daughters is ''enabled''.
+		<<option 0 "Disable">>
+			XX slaves only fathering daughters is ''disabled''.
+		<<option 1 "Enable">>
+			XX slaves only fathering daughters is ''enabled''.
 	<</options>>
 <</if>>
 
 <br>
 <<options $seeHyperPreg>>
-  <<option 0 "Disable">>
+	<<option 0 "Disable">>
 	Extreme pregnancy content like broodmothers is ''disabled''.
-  <<option 1 "Enable">>
+	<<option 1 "Enable">>
 	Extreme pregnancy content like broodmothers is ''enabled''.
 <</options>>
 
 <br>
 <<options $dangerousPregnancy>>
-  <<option 0 "Disable">>
+	<<option 0 "Disable">>
 	Advanced pregnancy complications such as miscarriage and premature birth are currently ''disabled''.
-  <<option 1 "Enable">>
+	<<option 1 "Enable">>
 	Advanced pregnancy complications such as miscarriage and premature birth are currently ''enabled''.
 <</options>>
 
 <br>
 <<options $seeExtreme>>
-  <<option 0 "Disable">>
+	<<option 0 "Disable">>
 	Extreme content like amputation is ''disabled''.
-  <<option 1 "Enable">>
+	<<option 1 "Enable">>
 	Extreme content like amputation is ''enabled''.
 <</options>>
 
 <br>
 <<options $seeBestiality>>
-  <<option 0 "Disable">>
+	<<option 0 "Disable">>
 	Bestiality content is ''disabled''.
-  <<option 1 "Enable">>
+	<<option 1 "Enable">>
 	Bestiality content is ''enabled''.
 <</options>>
 
 <br>
 <<options $seePee>>
-  <<option 0 "Disable">>
+	<<option 0 "Disable">>
 	Watersports content is ''disabled''.
-  <<option 1 "Enable">>
+	<<option 1 "Enable">>
 	Watersports content is ''enabled''.
 <</options>>
 
 <<if $seeDicks != 0>>
 	<br>
 	<<options $seeCircumcision>>
-	  <<option 0 "Disable">>
+		<<option 0 "Disable">>
 		Circumcision is ''disabled''.
-	  <<option 1 "Enable">>
+		<<option 1 "Enable">>
 		Circumcision is ''enabled''.
 	<</options>>
 <</if>>
@@ -498,11 +498,11 @@ __''The Free City''__
 	<br>
 	<<options $terrain>>
 		The Free City is located on ''$terrain'' terrain.
-	  <<option "urban" "Urban">>
-	  <<option "rural" "Rural">>
-	  <<option "ravine" "Ravine">>
-	  <<option "marine" "Marine">>
-	  <<option "oceanic" "Oceanic">>
+		<<option "urban" "Urban">>
+		<<option "rural" "Rural">>
+		<<option "ravine" "Ravine">>
+		<<option "marine" "Marine">>
+		<<option "oceanic" "Oceanic">>
 	<</options>>
 	<<if $terrain != "oceanic">>
 		<br>
@@ -511,26 +511,26 @@ __''The Free City''__
 				The Free City is located in ''$continent''.
 				<<option "North America"   "North America"   "$language = 'English'">>
 				<<option "South America"   "South America"   "$language = 'Spanish'">>
-				<<option "Brazil"		  "Brazil"		  "$language = 'Portuguese'">>
-				<<option "Europe"		  "Europe"		  "$language = 'English'">>
-				<<option "the Middle East" "the Middle East" "$language = 'Arabic'">>
-				<<option "Africa"		  "Africa"		  "$language = 'Arabic'">>
-				<<option "Asia"			"Asia"			"$language = 'Chinese'">>
-				<<option "Australia"	   "Australia"	   "$language = 'English'">>
-				<<option "Japan"		   "Japan"		   "$language = 'Japanese', $PC.race = 'asian', $PC.nationality = 'Japanese', $PC.hColor = 'black', $PC.eyeColor = 'brown'">>
+				<<option "Brazil"          "Brazil"          "$language = 'Portuguese'">>
+				<<option "Europe"          "Europe"          "$language = 'English'">>
+				<<option "the Middle East" "The Middle East" "$language = 'Arabic'">>
+				<<option "Africa"          "Africa"          "$language = 'Arabic'">>
+				<<option "Asia"            "Asia"            "$language = 'Chinese'">>
+				<<option "Australia"       "Australia"       "$language = 'English'">>
+				<<option "Japan"           "Japan"           "$language = 'Japanese', $PC.race = 'asian', $PC.nationality = 'Japanese', $PC.hColor = 'black', $PC.eyeColor = 'brown'">>
 			<</options>>
 		<<else>>
-		  <<options $continent>>
+			<<options $continent>>
 				The Free City is located in ''$continent''.
 				<<option "North America"   "North America"   "$language = 'English'">>
 				<<option "South America"   "South America"   "$language = 'Spanish'">>
-				<<option "Brazil"		  "Brazil"		  "$language = 'Portuguese'">>
-				<<option "Europe"		  "Europe"		  "$language = 'English'">>
-				<<option "the Middle East" "the Middle East" "$language = 'Arabic'">>
-				<<option "Africa"		  "Africa"		  "$language = 'Arabic'">>
-				<<option "Asia"			"Asia"			"$language = 'Chinese'">>
-				<<option "Australia"	   "Australia"	   "$language = 'English'">>
-				<<option "Japan"		   "Japan"		   "$language = 'Japanese'">>
+				<<option "Brazil"          "Brazil"          "$language = 'Portuguese'">>
+				<<option "Europe"          "Europe"          "$language = 'English'">>
+				<<option "the Middle East" "The Middle East" "$language = 'Arabic'">>
+				<<option "Africa"          "Africa"          "$language = 'Arabic'">>
+				<<option "Asia"            "Asia"            "$language = 'Chinese'">>
+				<<option "Australia"       "Australia"       "$language = 'English'">>
+				<<option "Japan"           "Japan"           "$language = 'Japanese'">>
 			<</options>>
 		<</if>>
 	<</if>>
@@ -607,7 +607,7 @@ __''Player Character''__
 	<<else>>
 		<<options $PC.surname>>
 			&nbsp;&nbsp;And your surname is:
-		  <<option>>
+			<<option>>
 				<<textbox "$PC.surname" $PC.surname>>
 			<<option 0 "Go by a single name">>
 		<</options>>
@@ -657,15 +657,15 @@ __''Player Character''__
 			and when lisped it is:
 			<<option>>
 				<<textbox "$PC.customTitleLisp" $PC.customTitleLisp "Intro Summary">>
-			<<custom>>
+			<<comment>>
 				If using a custom title, select Master or Mistress to set the gender of your title.
 				Make sure to replace your "s"s with "th"s to have working lisps in your lisped title.
 		<</options>>
 	<<else>>
 		<<options $PC.customTitle>>
-		  You have no custom title:
+			You have no custom title:
 			<<option "Master" "Set custom title" "$PC.customTitleLisp = 'Mather'">>
-			<<custom>>
+			<<comment>>
 				If using a custom title, select Master or Mistress to set the gender of your title.
 				Make sure to replace your "s"s with "th"s to have working lisps in your lisped title.
 		<</options>>
@@ -681,56 +681,56 @@ __''Player Character''__
 	<br>
 	<<options $PC.race>>
 		Your race is:
-		<<option "white" "White">>
-		<<option "asian" "Asian">>
-		<<option "latina" "Latina">>
-		<<option "middle eastern" "Middle Eastern">>
-		<<option "black" "Black">>
-		<<option "semitic" "Semitic">>
+		<<option "white"             "White">>
+		<<option "asian"             "Asian">>
+		<<option "latina"            "Latina">>
+		<<option "middle eastern"    "Middle Eastern">>
+		<<option "black"             "Black">>
+		<<option "semitic"           "Semitic">>
 		<<option "southern european" "Southern European">>
-		<<option "indo-aryan" "Indo-Aryan">>
-		<<option "amerindian" "Amerindian">>
-		<<option "pacific islander" "Pacific Islander">>
-		<<option "malay" "Malay">>
-		<<option "mixed race" "Mixed Race">>
+		<<option "indo-aryan"        "Indo-Aryan">>
+		<<option "amerindian"        "Amerindian">>
+		<<option "pacific islander"  "Pacific Islander">>
+		<<option "malay"             "Malay">>
+		<<option "mixed race"        "Mixed Race">>
 		<<option>>
 			<<textbox "$PC.race" $PC.race "Intro Summary">>
 	<</options>>
 	<br>
 	<<options $PC.skin>>
 		Your skin tone is:
-		<<option "pure white" "Pure White">>
-		<<option "extremely pale" "Extremely Pale">>
-		<<option "pale" "Pale">>
-		<<option "extremely fair" "Extremely Fair">>
-		<<option "very fair" "Very Fair">>
-		<<option "fair" "Fair">>
-		<<option "white" "White">>
-		<<option "light" "Light">>
-		<<option "lightened" "Lightened">>
-		<<option "light olive" "Light Olive">>
-		<<option "olive" "Olive">>
-		<<option "natural" "Natural">>
-		<<option "tanned" "Tanned">>
-		<<option "bronzed" "Bronzed">>
-		<<option "dark olive" "Dark Olive">>
-		<<option "dark" "Dark">>
-		<<option "light brown" "Light Brown">>
-		<<option "brown" "Brown">>
-		<<option "dark brown" "Dark Brown">>
-		<<option "black" "Black">>
-		<<option "ebony" "Ebony">>
-		<<option "pure black" "Pure Black">>
+		<<option "pure white"     "Pure White" >>
+		<<option "extremely pale" "Extremely Pale" >>
+		<<option "pale"           "Pale" >>
+		<<option "extremely fair" "Extremely Fair" >>
+		<<option "very fair"      "Very Fair" >>
+		<<option "fair"           "Fair" >>
+		<<option "white"          "White" >>
+		<<option "light"          "Light" >>
+		<<option "lightened"      "Lightened" >>
+		<<option "light olive"    "Light Olive" >>
+		<<option "olive"          "Olive" >>
+		<<option "natural"        "Natural" >>
+		<<option "tanned"         "Tanned" >>
+		<<option "bronzed"        "Bronzed" >>
+		<<option "dark olive"     "Dark Olive" >>
+		<<option "dark"           "Dark" >>
+		<<option "light brown"    "Light Brown" >>
+		<<option "brown"          "Brown" >>
+		<<option "dark brown"     "Dark Brown" >>
+		<<option "black"          "Black" >>
+		<<option "ebony"          "Ebony" >>
+		<<option "pure black"     "Pure Black" >>
 		<<option>>
-		  <<textbox "$PC.skin" $PC.skin "Intro Summary">>
+			<<textbox "$PC.skin" $PC.skin "Intro Summary">>
 	<</options>>
 	<br>
 	<<options $PC.markings>>
-	  <<option "none" "None">>
+		<<option "none" "None">>
 		Your body ''is clear of blemishes''.
-	  <<option "freckles" "Light">>
+		<<option "freckles" "Light">>
 		Your body ''has light freckling''.
-	  <<option "heavily freckled" "Heavy">>
+		<<option "heavily freckled" "Heavy">>
 		Your body ''has heavy freckling''.
 	<</options>>
 
@@ -749,17 +749,17 @@ __''Player Character''__
 	<br>
 	<<options $PC.faceShape>>
 		<<option "normal" "Normal">>
-		  Your face is ''normal''.
+			Your face is ''normal''.
 		<<option "androgynous" "Androgynous">>
-		  Your face is ''androgynous''.
+			Your face is ''androgynous''.
 		<<option "masculine" "Masculine">>
-		  Your face is ''masculine''.
+			Your face is ''masculine''.
 		<<option "cute" "Cute">>
-		  Your face is ''cute''.
+			Your face is ''cute''.
 		<<option "sensual" "Sensual">>
-		  Your face is ''sensual''.
+			Your face is ''sensual''.
 		<<option "exotic" "Exotic">>
-		  Your face is ''exotic''.
+			Your face is ''exotic''.
 	<</options>>
 	<br>
 	<<options $PC.refreshment>>
@@ -771,21 +771,21 @@ __''Player Character''__
 	<</options>>
 	<br>
 	<<options $PC.refreshmentType>>
-	  Which you
+		Which you
 		<<option 0 "Smoke">>
-		  smoke
+			smoke.
 		<<option 1 "Drink">>
-		  eat
+			drink.
 		<<option 2 "Eat">>
-		  eat
+			eat.
 		<<option 3 "Snort">>
-		  snort
+			snort.
 		<<option 4 "Inject">>
-		  inject
+			inject.
 		<<option 5 "Pop">>
-		  pop
+			pop.
 		<<option 6 "Orally Disolve">>
-		  orally disolve
+			orally disolve.
 	<</options>>
 	<br>&nbsp;&nbsp;&nbsp;&nbsp;
 	<<if ($PC.refreshmentType == 0) && ($PC.refreshmentType != 0) >>//"Smoked" must fit into the following sentence: "I smoked a $PC.refreshment" to fit events properly
@@ -823,27 +823,27 @@ __''Player Character''__
 	<<else>>
 		<<options $PC.career>>
 			Before you came to the Free Cities, you were ''_PCCreationCareer'':
-			<<option "wealth"	 "member of the idle wealthy">>
-			<<option "capitalist" "business leader">>
-			<<option "mercenary"  "mercenary">>
-			<<option "slaver"	 "slaver">>
-			<<option "engineer"   "engineer">>
-			<<option "medicine"   "doctor">>
-			<<option "BlackHat"   "hacker">>
-			<<option "celebrity"  "minor celebrity">>
-			<<option "escort"	 "escort">>
-			<<option "servant"	"servant">>
-			<<option "gang"	   "gang leader">>
+			<<option "wealth"     "Member Of The Idle Wealthy">>
+			<<option "capitalist" "Business Leader">>
+			<<option "mercenary"  "Mercenary">>
+			<<option "slaver"     "Slaver">>
+			<<option "engineer"   "Engineer">>
+			<<option "medicine"   "Doctor">>
+			<<option "BlackHat"   "Hacker">>
+			<<option "celebrity"  "Minor Celebrity">>
+			<<option "escort"     "Escort">>
+			<<option "servant"    "Servant">>
+			<<option "gang"       "Gang Leader">>
 		<</options>>
 	<</if>>
 	<br>
 	<<options $PC.rumor>>
 		It is rumored that you acquired your arcology through ''$PC.rumor'':
-		<<option "wealth"			 "wealth">>
-		<<option "diligence"		  "hard work">>
-		<<option "force"			  "force">>
-		<<option "social engineering" "social engineering">>
-		<<option "luck"			   "blind luck">>
+		<<option "wealth"             "Wealth">>
+		<<option "diligence"          "Hard Work">>
+		<<option "force"              "Force">>
+		<<option "social engineering" "Social Wngineering">>
+		<<option "luck"               "Blind Luck">>
 	<</options>>
 	<br>
 
@@ -871,8 +871,8 @@ __''Player Character''__
 
 		<<if $PC.preg == -1>>
 			<<options $PC.preg>>
-			  You are taking contraceptives. You ''can't'' get pregnant, however there
-			  will be a slight increase to living expenses.
+				You are taking contraceptives. You ''can't'' get pregnant, however there
+				will be a slight increase to living expenses.
 				<<option -1 "Taking contraceptives">>
 				<<option 0 "Do not take contraceptives">>
 			<</options>>
@@ -891,14 +891,14 @@ __''Player Character''__
 			<</options>>
 		<<elseif $PC.preg > 37>>
 			<<options $PC.preg>>
-			  You are ''<<print $PC.preg>> weeks pregnant'' and going to go into labor soon.
-			  <<options 0 "Not pregnant" "$PC.pregType = 0, $PC.labor = 0">>
+				You are ''<<print $PC.preg>> weeks pregnant'' and going to go into labor soon.
+				<<options 0 "Not pregnant" "$PC.pregType = 0, $PC.labor = 0">>
 				<<option 43 "Stuffed to capacity" "$PC.pregType = 8, $PC.labor = 1">>
 			<</options>>
 		<<elseif $PC.preg > 0>>
 			<<options $PC.preg>>
-			  You are ''<<print $PC.preg>> weeks pregnant'' so there is no need to
-			  worry about contraceptives.
+				You are ''<<print $PC.preg>> weeks pregnant'' so there is no need to
+				worry about contraceptives.
 				<<option 0 "Not pregnant" "$PC.pregType = 0">>
 				<<option 40 "Ready to drop">>
 				<<option 43 "Stuffed to capacity" "$PC.pregType = 8, $PC.labor = 1">>
@@ -951,7 +951,7 @@ __''Player Character''__
 			Your breasts are ''_PCCreationBoobSize'' and ''_PCCreationBreast''.
 			<<option -2 "C-cup" "$PC.boobsImplant = 0">>
 			<<option 0  "DD-cup" "$PC.boobsImplant = 0">>
-			<<option 2  "F-cup" "$PC.boobsImplant = 0">>
+			<<option 1  "F-cup" "$PC.boobsImplant = 0">>
 			<<option 2  "G-cup" "$PC.boobsImplant = 0">>
 			<<option 2  "G-cup implants" "$PC.boobsImplant = 1">>
 			<<option 0  "Remove them" "$PC.boobs = 0, $PC.boobsImplant = 0">>
diff --git a/src/gui/css/optionsMacro.tw b/src/gui/css/optionsMacro.tw
index 89631c9b9f6..4dcd9ca43b7 100644
--- a/src/gui/css/optionsMacro.tw
+++ b/src/gui/css/optionsMacro.tw
@@ -10,6 +10,7 @@
 	width: 500px;
 	margin-right: 10px;
 	line-height: 1.2;
+	text-align: right;
 }
 
 @media only screen and (max-width: 1200px) {
@@ -30,7 +31,9 @@
 	vertical-align: top;
 	background: linear-gradient(transparent,#222);
 	-moz-user-select: none;
-	padding: 4px;
+	min-width: 79px; /* 80px - 1px for border */
+	display: inline-block;
+	text-align: center;
 }
 
 .optionComment {
@@ -51,7 +54,10 @@
 }
 
 .optionMacroOption a {
-	padding: 4px 0;
+	padding: 0 10px;
+	box-sizing: border-box;
+	width: 100%;
+	display: block;
 }
 
 .optionMacroOption:hover {
@@ -60,8 +66,10 @@
 
 .optionMacroSelected {
 	background: linear-gradient(#2F2F2F,#111);
-	padding: 4px;
+	padding: 0 10px;
+	min-width: 80px;
 	cursor: pointer;
+	box-sizing: border-box;
 }
 
 .optionValue input {
@@ -85,9 +93,11 @@
 }
 
 .optionMacroSelected.optionMacroEnable {
-	/*background-image: linear-gradient(rgba(255, 100, 0, 1), rgba(0, 255, 0, 1));*/
+	color: rgb(230,255,230);
+	background-image: linear-gradient(rgba(0, 255,0, 0.12), transparent);
 }
 
 .optionMacroSelected.optionMacroDisable {
-	/*background-image: linear-gradient(rgba(255, 100, 0, 1), rgba(255, 0, 0, 1));*/
+	color: rgb(255,240,240);
+	background-image: linear-gradient(rgba(255, 100, 0, 0.2), transparent);
 }
diff --git a/src/js/optionsMacro.js b/src/js/optionsMacro.js
index 2fbf84995e3..81b7000e34f 100644
--- a/src/js/optionsMacro.js
+++ b/src/js/optionsMacro.js
@@ -1,16 +1,16 @@
 /* Use like:
 	<<options $varname "New Passage (defaults to current passage)">>
 	  A title
-	  <<option "value_to_set_varname_to" "English text to show user" "additional variables to set when clicked" "Extra english text to show, but not as a link">>
+      <<option "value_to_set_varname_to" "English text to show user" "additional variables to set when clicked" "Extra english text to show, but not as a link">>
 		 Text to show if $varname matches this option
 	  <<option ....>>
 	  <<comment>>
-		Some comment to add at the end
+	    Some comment to add at the end
 	<</option>>
   */
 Macro.add('options', {
 	skipArgs : false,
-	tags	 : ['option', 'comment'],
+	tags     : ['option', 'comment'],
 	handler  : function () {
 		try {
 			var currentOption = this.payload[0].args[0];
@@ -67,10 +67,14 @@ Macro.add('options', {
 						output += this.payload[i].contents.trim();
 					} else {
 						var extraComment = args[3] ? (' ' + args[3]) : '';
-						var className = "optionMacroOption " + (args[1].startsWith("Enable") ? "optionMacroEnable" : args[1].startsWith("Disable") ? "optionMacroDisable" : "");
+						// We use a very crude heuristic for styling 'Enable'
+						// and 'Disable' buttons differently.
+						const isEnableOption = args[1].startsWith("Enable") || args[1] === "Yes";
+						const isDisableOption = args[1].startsWith("Disable") || args[1] === "No";
+						var className = "optionMacroOption " + (isEnableOption ? "optionMacroEnable" : isDisableOption ? "optionMacroDisable" : "");
 						if (args[0] !== currentOption || hasMultipleOptionsWithSameValue) {
 							var onClickChange = args[2] ? (', ' + args[2]) : '';
-							output += '<span class="' + className + '">[[' + args[1] + "|" + passageName + "][" + variable + " = " + JSON.stringify(args[0]) + onClickChange + "]]" + extraComment + "</span>";
+							output += '<span class="' + className + '">[[' + args[1] + extraComment + '|' + passageName + "][" + variable + " = " + JSON.stringify(args[0]) + onClickChange + "]]" + "</span>";
 						} else if (showSelectedOption) {
 							output +='<span class="optionMacroSelected ' + className + '">' + args[1] + extraComment + '</span>';
 						}
-- 
GitLab