/* add all special styles used for displaying the rules */



/* .rules: used for all elements loading rules (rules at main site, rules ingame, popup with rules extract

	 #rules: div with complete rules used at main site

	 #rulesPage: ingame rules page display

	 #panelRules: ingame rules sidepanel display

	 #popup.rules: popup with rules extract only */





/* don't display berlin specific stuff yet: set the below to none+inline. With Berlin, set the below to inline+none. This takes care of some rephrasing*/

.rules .berlin_only {display: none;} .rules .without_berlin {display: inline;}

/*

.rules .berlin_only {display: inline;} .rules .without_berlin {display: none;}

*/







/* tajawal regular for headers*/

@font-face {

	font-family: 'OtU Header';

	src: local('OtU Header'), local('Tajawal'),

			 url('/game-plugins/ontheunderground/3.1.13/fonts/Tajawal-Regular.ttf') format('truetype');

}



/* tajawal bold for headers*/

@font-face {

	font-family: 'OtU Header bold';

	font-weight: bold;

	src: local('OtU Header bold'), local('Tajawal bold'),

			 url('/game-plugins/ontheunderground/3.1.13/fonts/Tajawal-Bold.ttf') format('truetype');

}





.rules h1, h2, h3, h4, .chapter .title {

	font-family: 'OtU Header bold', sans-serif;

	font-weight: bold;

	text-align: left;

	border: none;

	margin-top: 0.5em;

	margin-bottom: 0.5em;

	color: black;

}



.rules h1, .chapter .title {

	padding: 4px;

	font-size: 3em;

}

#panelRules h1, .chapter .title {

	padding: 2px;

	font-size: 2em;

}



.rules h2 {

	padding: 4px;

	font-size: 2em;

}

#panelRules h2 {

	padding: 2px;

	font-size: 1.75em;

}



.rules h3 {

	font-size: 1.75em;

	margin-top: 0em;

	margin-bottom: 0em;

}



.rules h4 {

	font-size: 1.5em;

	margin-top: 0em;

	margin-bottom: 0em;

}





/* rainbow text - in Firefox it's rendered as background */

/* for some reason it doesn't work in Chrome side panel and leaves only a vague outline, so keep it plain black in the side panel by using #rules instead of .rules here*/

#rules span.rainbowtext {

	background-color: #f3ec78;

	color: white;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/header_background.jpg);

	background-size: 100% 100%;

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	padding-left: 0.5em;

	padding-right: 0.5em;

}

#rulesPage #rules span.rainbowtext {

	-webkit-background-clip: initial;

}





/* Berlin */

.rules .berlin_text { font-weight: bold; color: #1B3E77; }

.rules .berlinback {

	background-color: #BFC0D6;

	background-image: linear-gradient( to bottom right, #BFC0D6, #807BC4  99% );

	background-color: transparent;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/berlin_background.png);

	background-size: 100% 100%;

	min-height: 2em;

	padding: 1.5em 2em 1.5em 2.5em;

}

.rules .berlinbox { background-color: #284D8F; border-radius: 4px; border: 2px solid white; font-size: 0.8em; color: white; font-weight: bold; padding: 2px 4px 2px 4px; }



/* London */

.rules .london_text { font-weight: bold; color: #B71617; }

.rules .londonback {

	background-color: #E5C9BD;

	background-image: linear-gradient( to bottom right, #E5C9BD, #CC9580  99% );

	background-color: transparent;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/london_background.png);

	background-size: 100% 100%;

	min-height: 2em;

	padding: 1.5em; padding-left: 4em;

}

.rules .londonbox { background-color: #B21214; border-radius: 4px; border: 2px solid white; font-size: 0.8em; color: white; font-weight: bold; padding: 2px 4px 2px 4px; }

/* New York */

.rules .new_york_text { font-weight: bold; color: #000; }

.rules .new_york_back {

	background-color: #E5C9BD;

	background-image: linear-gradient( to bottom right, #E5C9BD, #CC9580  99% );

	background-color: transparent;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/new_york_background.gif);

	background-size: 100% 100%;

	min-height: 2em;

	padding: 4em 4em 1.5em 8em;

}

.rules .new_york_box { background-color: #000; border-radius: 4px; border: 2px solid white; font-size: 0.8em; color: white; font-weight: bold; padding: 2px 4px 2px 4px; }

.rules .new_york_box__icon {

	margin-left: -4em;

}



.rules .at_border { float: left; margin: 0.5em; margin-left: 0em; margin-top: -2.5em; line-height: 1em; }



.rules .remark {

	background-color: #CFDFEB;

	background-image: linear-gradient( to bottom right, #CFDFEB, #89ACC4  99% );

	background-color: transparent;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/remark_background.png);

	background-size: 100% 100%;

	margin: 0.5em;

	padding: 1.5em 2em 1.5em 3.5em;

}



.rules .w60 { width: 60%; }

#panelRules .w60 { width: 95%; }

.rules .w40 { width: 40%; }

#panelRules .w40 { width: 95%; clear: both; }

.rules .r55 { width: 55%; float: right; margin-left: 1%;}

#panelRules .r55 { width: 95%; clear: both;}

.rules .endexample { width: 44%; float: left; margin-right: 0em;}

#panelRules .endexample { width: 95%;}



.rules .firstgame_hint { width: 50%; }

#panelRules .firstgame_hint { width: 95%; }

.rules .deviation_london { width: 50%; }

#panelRules .deviation_london { width: 95%; }

.rules .gameend_hint {  width: 40%; float: left; }

#panelRules .gameend_hint {  width: 95%; float: left; }



/* don't display examples in the sidebar */

#panelRules .example { display: none; }

#rules .example {

	background-color: #D2DAC5;

	background-image: linear-gradient( to bottom right, #D2DAC5 , #A7AD9F 99%);

	background-color: transparent;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/example_background.png);

	background-size: 100% 100%;

	padding: 1.5em 2em 1.5em 3.5em;

}

.rules .example.wide {padding: 1.5em 3.5em 1.5em 5em;}



.rules .rainbow_hint {

	background-color: #f3ec78;

	background-color: transparent;

	color: white;

	font-weight: bold;

	font-style: normal;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/rainbow_background.png);

	background-size: 100% 100%;

	padding: 0.5em 2em 0.5em 3em;

}



.rules .splashed {

	color: white;

	font-size: 2em;

	font-family: 'OtU Header bold', sans-serif;

	font-weight: bold;

	background-color: #CFDFEB;

	background-color: transparent;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/splash_blue.png);

	background-size: 100% 100%;

	padding-left: 0.4em; padding-right: 0.4em; padding-top: 0.15em;

	margin-right: 0.5em;

}

.rules .splashed.small { font-size: 1.5em; margin-right: 0.2em;}



.rules .clearleft { clear: left; }



/* split content */

.rules .content { width: 45%; float: left; margin-right: 1em;}

#panelRules .content { width: 95%; }

.rules .content ul { list-style: none;}



/* two columns in main rules*/

.rules .twocolumn { width: 45%; float: left; margin-right: 1em;}

#panelRules .twocolumn { width: 95%; }



/* sidebar or not sidebar */

#panelRules .nosidebar { display: none; }

.ui-popup .rules .nopopup { display: none; }

.rules .sidebaronly { display: none; }

#panelRules .sidebaronly { display: inherit; }





/* lists */

.rules ul {

	margin: 1em 0em 1em 2em;

	list-style-image: url('/game-plugins/ontheunderground/3.1.13/images/rules/list_symbol.png');

}

.rules li { margin-bottom: 0.2em; }

.rules ol { margin: 1em 0em 1em 0.5em; }

.rules ol.roman { list-style-type: upper-roman; }



/* customized list - white capital numbers on blue splash*/

.rules ol.splashlist { list-style: none; counter-reset: li; }

.rules ol.splashlist>li::before {

	content: counter(li);

	font-family: 'OtU Header bold', sans-serif; color: white; font-weight: bold; text-align: center; font-size: 1.5em;

	width: 2.5em;  height: 1.75em;

	background-color: #CFDFEB;

	background-color: transparent;

	background-image: url(/game-plugins/ontheunderground/3.1.13/images/rules/splash_blue.png);

	background-size: 100% 100%;

	padding: 0.2em 0.5em 0.2em 0.5em;

	margin-right: 0.3em;

}

.rules ol.splashlist>li { counter-increment: li; }



.rules th { text-align: center; font-size: 1em; }

.rules td { border-top: 1px solid black; text-align: center; }



.rules .plusstation {

	color: white;

	background-color: #9E4995;

	font-weight: bold;

	padding-left: 0.2em; padding-right: 0.2em;

	border-radius: 50%;

}

.rules .greenstation {

	color: #8CB92C;

	background-color: #8CB92C;

	font-weight: bold;

	padding-left: 0.2em; padding-right: 0.2em;

	border-radius: 50%;

}





/* some general picture definitions */

.rules .examplepicright { width: 30%; float: right; margin-left: 2em; }

.rules .examplepicleft { width: 30%; float: left; margin-right: 2em; }

.rules .examplepicfull { width: 90%; margin-left: 3%; margin-right: 3%; }

.rules .low { margin-bottom: -1em; }

.rules .inlinepic { height: 1.2em; margin-left: 0.2em; margin-right: 0.2em; }

.rules .biginlinepic { height: 2em; margin-left: 0.2em; margin-right: 0.2em; margin-bottom: -0.4em; }

.rules__inline_icon {

	height: 1.6em;

	vertical-align: middle;

}



/* special pictures */

.rules .passenger { width: 1.5em; float: right; margin-right: 40%; margin-left: 2em; }

.rules .passenger--new_york {

	vertical-align: top;

	width: 1.5em;

}

.rules .meeple { width: 1.5em; float: right; margin-right: 0.3em; }

.rules .meeple--new_york {

	vertical-align: top;

	width: 1.5em;

}

.rules .branchtoken { width: 1.5em; display: inline; margin-left: 4em; margin-top: -2em; }

.rules .branchtoken--new_york {

	vertical-align: top;

	width: 1.5em;

}

.rules .landmarktiles { width: 45%; float: right; margin-right: 2em; margin-top: 1em; }

.rules .setup_board { width: 98%; }

.rules .station { width: 3em; float: left; margin-right: 0.5em; clear: left; }



.rules .examplepic3a { width: 46%; float: left; margin-right: 0.5em; margin-left: 6%; margin-bottom: 3em; }

.rules .examplepic3b { width: 12%; float: left; margin-left: -3%; }

.rules .examplepic3c { width: 15%; float: right; margin-right: 20%; margin-top: -3em; }

.rules .examplepic3d { width: 45%; float: right; margin-left: 1em; margin-top: -3em; }

.rules .examplepic4 { width: 95%; }

.rules .examplepic6 { float: right; width: 90%; margin-top: -3em; margin-right: 5%; }