/* 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 and ingame display 

   #rulesContainer #rules: ingame rules display only 

   #sidebarPanel #rules: ingame rules display on right side only 

   #sidebarBottom #rules: ingame rules display at bottom only 

   .ui-popup .rules: popup with rules extract only */

   

/* fonts */

/* sorts-mill-goudy-regular - latin-ext_latin */

@font-face {

  font-family: 'Sorts Mill Goudy';

  font-style: normal;

  font-weight: 400;

  src: url('/game-plugins/lagranjanosiesta/1.0.0/fonts/SortsMillGoudy-Regular.ttf'); 

  src: local('Sorts Mill Goudy Regular'), local('SortsMillGoudy-Regular'),

       url('/game-plugins/lagranjanosiesta/1.0.0/fonts/SortsMillGoudy-Regular.ttf') format('truetype'); 

}



/* sorts-mill-goudy-italic - latin-ext_latin */

@font-face {

  font-family: 'Sorts Mill Goudy';

  font-style: italic;

  font-weight: 400;

  src: url('/game-plugins/lagranjanosiesta/1.0.0/fonts/SortsMillGoudy-Italic.ttf'); 

  src: local('Sorts Mill Goudy Italic'), local('SortsMillGoudy-Italic'),

       url('/game-plugins/lagranjanosiesta/1.0.0/fonts/SortsMillGoudy-Italic.ttf') format('truetype'); 

}



/* Fonts Ende */



/* rules colors: */

#rules .red { color:#CD1719; }

#rules .green  { color:#267D38; } 

#rules .brown  { color:#907752; }

#rules .lightbrown  { color:#917A36; }

#rules .background  { color:#E9DDAF; }





#rules a:link {color: #267D38; font-weight:bold;} 

#rules a:visited {color: #907752; font-weight:bold;}

#rules a:active {color: #267D38; font-weight:bold;}



#rules strong { color: #B74047; }

#rules p {margin-bottom: 0.6em}

#rules .lagranjafontgreen { font-family: 'Sorts Mill Goudy', serif; color:#267D38; }



#rules .deviation {border-color: #B74047; background-color: #FFFFD6;}



/* headers */

#rules .chapter .title {

  background-image: url('/game-plugins/lagranjanosiesta/1.0.0/images/Rules/header_background.jpg');
  background-position: center;

  background-size: 100% 100%;

  color: #CD1719;

  padding: 0px;

  font-size: 2em;

  text-align: center;

  clear:both;

  margin-top: 1em;

  margin-bottom: 0.5em;

  font-family: 'Sorts Mill Goudy',serif;

  text-transform: uppercase;

  border: 1px solid #907752;

}

   

#rules h1 {

  color: #CD1719;

  text-align: left;

  padding: 0px;

  font-size: 2em;

  font-family: 'Sorts Mill Goudy', serif; 

  text-transform: uppercase;

  min-height: 2em;

  line-height: 2em;

  margin-bottom: 0.2em;

  margin-top: 0.8em;

  border: none;

}



#rules h2 {

  color: #917A36;

  font-size: 2em;

  margin-top: 1em;

  margin-bottom: 0em;

  clear: left;

  font-family: 'Sorts Mill Goudy',serif;

  text-align: left;

}



#rules h3 {

  color: #917A36;

  font-size: 1.5em;

  clear: left;

  font-family: 'Sorts Mill Goudy',serif;

  margin-top: 0.5em;

  margin-bottom: 0.5em;

  text-align: left;

}



#rules h4 {

  color: #B74047;

  font-size: 1.25em;

  font-family: 'Sorts Mill Goudy',serif;

  text-align: left;

}



/* split content */

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

#rulesContainer #rules .content { width: 95%; }

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



/* two columns in main rules*/

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

#rulesContainer #rules .twocolumn { width: 95%; }







/* lists */

#rules ul {

  margin:1em 0em 1em 2em; 

  list-style-image: url('/game-plugins/lagranjanosiesta/1.0.0/images/Rules/list_symbol.png');

}

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

#rules ol {margin:1em 0em 1em 2em; }

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

#rules .clearleft { clear: left; }

#rules .referback {float:right; font-size:1.5em; font-weight:bold; margin-right:1em; color: #267D38; }



/* sidebar or not sidebar */ 

#sidebarPanel #rules .nosidebar { display:none; }

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

#rules .sidebaronly { display:none; }

#sidebarPanel #rules .sidebaronly { display:inherit; }



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

#rules .example { font-style: italic; font-weight: normal;}

#sidebarPanel #rules .example { display:none; }



/* 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 .inlinepic { height: 1.2em; margin-left: 0.2em; margin-right: 0.2em;}

#rules .backgroundcircle {border-radius:50%;color: black; width: 2em; float:left; text-align:center; margin-left:2em; margin-right:1em;}

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



/* some specific picture definitions */

#rules .dice { width: 4em;  margin-left: 0.5em; }

#rules .component_playerboard { width: 60%; float: left; margin-right: 1em; }

#rules .component_revenueboard { width: 60%; float: left; margin-right: 1em; }

#rules .component_rooftiles { width: 20em; float: right; margin-left: 1em; }

#rules .component_helpers { width: 16em; float: left; margin-right: 1em; }

#rules .component_siestatrack { width: 30%; float: left; margin-right: 1em; margin-bottom:0.5em; }

#rules .component_markettrack { width: 30%; float: left; margin-right: 1em; }

#rules .component_startplayer { width: 5em; margin-left: 1em; margin-bottom:-1em;}

#rules .virtualrevenue { margin-left: 0.5em; height:3em; margin-bottom:-0.5em;}

#rules .examplepic1 { width: 17em; float: right; margin-left: 1em; }

#rules .examplepic2 { width: 60%; float: right; margin-left: 1em; }

#rules .examplepic3 { width: 60%; float: right; margin-left: 1em; }

#rules .examplepic4a { width: 30%; float: right; margin-left: 1em; margin-right:1em; margin-top:-1em;}

#rules .examplepic4b { width: 60%; margin-top:1em; margin-left:1em}

#rules .examplepic5 { width: 50%; float: right; margin-left: 1em; }

#rules .examplepic6 { width: 60%; float: right; margin-left: 1em; }

#rules .examplepic7 { width: 40%; float: right; margin-left: 1em; margin-top:-1em; }

#rules .discicon { height:4em; float:left; margin-right:0.5em;}

#rules .examplepic8 { width: 40%; float: right; margin-left: 1em; margin-right:3em; }

#rules .endoftrack { height:4em; float:left; margin-right:0.5em;}

#rules .examplepic9 { width: 70%; float: right; margin-left: 1em; }

#rules .examplepic9b { width: 95%; float: right; margin-left: 1em; margin-bottom: 1.5em; }





/* customized list - white capital letters on brown circle*/

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

#rules .custlist li::before {content: counter(li, upper-alpha); color: white; font-weight: bold; display: inline-block; width: 1.3em;  height:1.3em; text-align:center;  background-color: #907752; border-radius: 50%; padding:0.2em; margin-right: 0.5em;}

#rules .custlist li {counter-increment: li}





#rules .custlisticon {

  color: white;

  background-color: #907752;

  font-weight: bold;

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

  border-radius: 50%;

  margin-right: 0.5em;

}





/* gray helpers */

#rules .grayhelper { width: 45%; float: left; margin-right: 1%; margin-top: 0.5em;}

#rules .grayhelper .helperImage { float: left; width: 7em; margin-right: 1em; margin-bottom: 0.3em; }

#rulesContainer #rules .grayhelper { width: 95%; }





/* glossary */



/* roof tiles */

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

#rules .rooftile .roofTileImage { float: left; width: 6em; margin-right: 0.5em;}

#rulesContainer #rules .rooftile { width: 95%; }



/* helpers */

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

#rules .helper .helperImage { float: left; width: 7em; margin-right: 0.5em;}

#rulesContainer #rules .helper { width: 95%; }



/* market board fields */

#rules .marketboard { float: left; width: 30%; margin-right: 0.5em; margin-bottom: 1em;}

#rules .market { width: 65%; float: left; margin-right: 1%; margin-bottom: 0.5em;}

#rules .market .marketfield { float: left; width: 9.5em; margin-right: 0.5em;}

#rulesContainer #rules .market { width: 95%; }