/* 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('/Games/LaGranja/fonts/SortsMillGoudy-Regular.ttf'); 
  src: local('Sorts Mill Goudy Regular'), local('SortsMillGoudy-Regular'),
       url('/Games/LaGranja/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('/Games/LaGranja/fonts/SortsMillGoudy-Italic.ttf'); 
  src: local('Sorts Mill Goudy Italic'), local('SortsMillGoudy-Italic'),
       url('/Games/LaGranja/fonts/SortsMillGoudy-Italic.ttf') format('truetype'); 
}

/* Fonts Ende */

/* rules colors: */
#rules .red { color:#B74047; }
#rules .green  { color:#267D38; } 
#rules .grey  { color:#6D707F; }
#rules .blue  { color:#0073B4; }
#rules .brown  { color:#907752; }
#rules .background  { color:#E9DDAF; }


#rules a:link {color: #907752; font-weight:bold;} 
#rules a:visited {color: #876E4D; font-weight:bold;}
#rules a:active {color: #907752; 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;}

#rules .chapter .title {
  background-image: url(/Games/LaGranja/images/rules/header_background.jpg);
  background-position: center;
  background-size: cover;
  color: #267D38;
  text-align: center;
  padding: 0px;
  font-size: 2em;
  font-family: 'Sorts Mill Goudy', serif; 
  text-transform: uppercase;
  min-height: 2em;
  line-height: 2em;
   border: 1px solid #907752;
}

#rules h1 {
  background-image: url(/Games/LaGranja/images/rules/header_background.jpg);
  background-position: center;
  background-size: cover;
  color: #267D38;
  padding: 0px;
  font-size: 1.75em;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  min-height: 2em;
  line-height: 2em;
  font-family: 'Sorts Mill Goudy',serif;
  text-transform: uppercase;
  border: 1px solid #907752;
}
   
#rules h2 {
  color: #267D38;
  font-size: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  clear: left;
  font-family: 'Sorts Mill Goudy',serif;
  text-align: left;
  border-bottom: 2px #267D38 solid;
}

#rules h3 {
  color: #267D38;
  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;
}

#rules h5 {
  font-size: 1.2em;
  border-bottom: 1px solid black;
  font-weight: normal;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

#rules ul {
  margin:1em 0em 1em 2em; 
  list-style-image: url('/Games/LaGranja/images/rules/list_symbol.png');
}
#rules li { margin-bottom: 0.2em; }
#rules ol {margin:1em 0em 1em 2em; }
span.clear { clear: left; display: block; }
#rules .referback {float:right; font-size:1.5em; font-weight:bold; margin-right:1em; color: #267D38; }

/* some 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;}

/* picture boxes */
#rules .picturebox { margin-left: 0.5em; margin-right: 1em; border: 2px solid #267D38; width: 30%; float: right;  
  background-image: url(/Games/LaGranja/images/rules/picture_background.jpg);
  background-position: center;
  background-size: cover; 
  font-size:0.75em;}
#rules .picturebox.right { margin-left: 0.5em; margin-right: 1em; float: right; }
#rules .picturebox.left { margin-right: 1em; margin-left: 1em; float: left; }

#rules .picturebox.dicebox { width: 10em; height: 6.5em; }
#rules .picturebox.dicebox .firstdie { float:left; width:4em; margin-left:1em; margin-top:0.5em; border-radius: 11%; overflow: hidden; box-shadow: 5px 5px 2px #3F1900; }
#rules .picturebox.dicebox .seconddie { float:left; width:4em; margin-left:-1.5em; margin-top:1.5em; border-radius: 11%; overflow: hidden; box-shadow: 5px 5px 2px #3F1900; }

#rules .picturebox.coinbox { width: 10em; height: 6.5em; }
#rules .picturebox.coinbox .firstcoin { float:left; width:4em; margin-left:4em; margin-top:0.5em;border-radius: 50%;box-shadow: 5px 5px 2px #3F1900; }
#rules .picturebox.coinbox .secondcoin { float:left; width:4em; margin-left:-7em; margin-top:1.5em;border-radius: 50%;box-shadow: 5px 5px 2px #3F1900; }

#rules .picturebox.twomarkerbox { width: 13em; height: 8.5em; }

#rules .picturebox.twomarkerbox .firstcraftmarker { float:left; width:5.5em; margin-left:1.5em; margin-top:1.7em; box-shadow: 5px 5px 2px #3F1900; }
#rules .picturebox.twomarkerbox .secondcraftmarker { float:left; width:5.5em; margin-right:0em; margin-left:-1.2em; margin-top:0.9em; box-shadow: 5px 5px 2px #3F1900; }

#rules .picturebox.twomarkerbox .firstroofmarker { float:left; width:4.5em; margin-left:5em; margin-top:0.7em; box-shadow: 5px 5px 2px #3F1900;}
#rules .picturebox.twomarkerbox .secondroofmarker { float:left; width:4.5em; margin-right:0em; margin-left:-7.5em; margin-top:0.3em; box-shadow: 5px 5px 2px #3F1900; }

#rules .picturebox.twomarkerbox .firstturnmarker { float:left; width:5.5em; margin-left:2em; margin-top:1em; border-radius:0.5em; box-shadow: 5px 5px 2px #3F1900;}
#rules .picturebox.twomarkerbox .secondturnmarker { float:left; width:5.5em; margin-right:0em; margin-left:-2em; margin-top:1.5em; border-radius:0.5em; box-shadow: 5px 5px 2px #3F1900;}
                
#rules .picturebox.onemarkerbox { width: 7.5em; height: 7.5em; }
#rules .picturebox.onemarkerbox .unavailablemarker { float:left; width:5.3em; margin-left:1em; margin-top:1em; border-radius:0.5em; box-shadow: 5px 5px 2px #3F1900; }

/* boxes with text */
#rules .picturebox .text {color: #B74047; font-weight:bold}

#rules .picturebox.example_trade_commodity {height:12em; width:28em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_trade_commodity.jpg);}
#rules .picturebox.example_trade_commodity .text {float:left; height:2em; width:8em; margin-left:17.6em; margin-top:4.7em;}
#rules .picturebox.example_trade_commodity .text.de {margin-top:5.3em;}

#rules .picturebox.example_farm {height:32em; width:33em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_farm.jpg);}
#rules .picturebox.example_farm .text {float:right; height:2em; width:14em; margin-right:1.3em; margin-top:28em;}

#rules .picturebox.example_2-3p_blocked {height:13em; width:20em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_2-3p_blocked.jpg);}
#rules .picturebox.example_2-3p_blocked .text {float:left; height:2em; width:13em; margin-left:2.1em; margin-top:9.2em;}

#rules .picturebox.example_own_trade_commodity {height:10.5em; width:30.5em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_own_trade_commodity.jpg);}
#rules .picturebox.example_own_trade_commodity .text {float:left; height:2em; width:13em; margin-left:11em; margin-top:1.3em;}

#rules .picturebox.example_buy_and_sell {height:22.7em; width:28em; background-image: url(/Games/LaGranja/images/rules/example_buy_and_sell.jpg);}
#rules .picturebox.example_buy_and_sell.de {height:25em;}
#rules .picturebox.example_buy_and_sell .text {float:left; height:2em; width:20em; margin-left:5em; margin-top:1.9em;}
#rules .picturebox.example_buy_and_sell.de .text {width:22em; margin-left:4em; margin-top:1.8em;}

#rules .picturebox.example_upgrading {height:21em; width:34em; background-image: url(/Games/LaGranja/images/rules/example_upgrading.jpg);}
#rules .picturebox.example_upgrading .text {float:left; height:15em; width:9em; margin-left:1.8em; margin-top:2.2em; }

#rules .picturebox.example_costoverview {height:14.5em; width:29em; background-image: url(/Games/LaGranja/images/rules/example_costoverview.jpg);}
#rules .picturebox.example_costoverview .text {float:left; height:15em; width:10em; margin-left:2.1em; margin-top:1.7em; }
#rules .picturebox.example_costoverview .text.de {margin-left:2.5em; margin-top:1.5em; }

#rules .picturebox.example_handlimit {height:20.8em; width:17.3em; background-image: url(/Games/LaGranja/images/rules/example_handlimit.jpg);}
#rules .picturebox.example_handlimit .text {float:left; height:5em; width:9em; margin-left:1.7em; margin-top:7.3em; }
#rules .picturebox.example_handlimit .text.de {width:10em;}

#rules .picturebox.example_siesta {height:24em; width:18.5em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_siesta.jpg);}
#rules .picturebox.example_siesta .text {float:left; height:2em; width:10em; margin-left:2em; margin-top:5em;}

#rules .picturebox.example_deliveries {height:28em; width:34.5em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_deliveries.jpg);}
#rules .picturebox.example_deliveries .text {float:left; height:2em; width:13em; margin-left:17.1em; margin-top:17em;}
                
#rules .picturebox.example_unlock_building {height:22.6em; width:26.5em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_unlock_building.jpg);}
#rules .picturebox.example_unlock_building .text {float:left; height:2em; width:13em; margin-left:2em; margin-top:12.5em;}
#rules .picturebox.example_unlock_building .text.de {margin-top:12.2em;}

#rules .picturebox.example_barrow_1 {height:20.5em; width:33em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_barrow_1.jpg);}
#rules .picturebox.example_barrow_1 .text {float:left; height:2em; width:14em; margin-left:1.8em; margin-top:1.3em;}
#rules .picturebox.example_barrow_1 .text.de {width:14.5em; margin-left:1.6em; margin-top:1.6em;}

#rules .picturebox.example_barrow_2 {height:22em; width:33em; margin-right:1em; background-image: url(/Games/LaGranja/images/rules/example_barrow_2.jpg);}
#rules .picturebox.example_barrow_2 .text {float:left; height:2em; width:14.5em; margin-left:18em; margin-top:2.4em;}

/* template
#rules .picturebox. {}
#rules .picturebox. .text {}
*/ 


/* sidebar or not sidebar */ 
#sidebarPanel #rules .nosidebar { display:none; }
.ui-popup .rules .nopopup { display:none; }
#rules .sidebaronly { display:none; }
#sidebarPanel #rules .sidebaronly { display:inherit; }

/* standard box with slightly round corners */
#rules .roundbox {
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-right: 1em;
  font-size: 1em;
  font-weight: bold;
  border-radius: 3px;
}


/* exampleright */
#rules .exampleright { width: 40%; float: right; margin: .3em .5em; padding: .2em .5em; font-style: italic;}
#rules .exampleright .image img { width: 50%; float: left; margin-right: 1em;}

/* examplefull */
#rules .examplefull { width: 95%; float: right; margin: .3em .5em; padding: .2em .5em; font-style: italic;}
#rules .examplefull .image img { width: 20em; float: right; margin-left: 1em;}

#rules .circle {border-radius:50%; text-align: center;}

/* split content */
#rules .content {width:45%; float:left; margin-right:1em;}
#rulesContainer #rules .content { width: 95%; }

/* roof markers */
#rules .roofmarker { width: 45%; float: left; min-height:10em; margin-right: 1%;}
#rules .roofmarker .cardimage img { float: left; width: 4em; margin-right: 0.3em;}
#rulesContainer #rules .roofmarker { width: 95%; }

/* revenue */
#rules .revenue { width: 95%; float: left; min-height:7em; margin-right: 1%;}
#rules .revenue .dicebox { margin-left: 0.5em; margin-right: 1em; border: 2px solid #267D38; width: 5em; height:5em; float: left;  
  background-image: url(/Games/LaGranja/images/rules/revenue_background.jpg);
  background-position: center;
  background-size: cover; }
#rules .revenue .diceimage img { float: left; width: 4em; margin-left: 0.5em; margin-top:0.5em;}
#rulesContainer #rules .revenue { width: 95%; }

/* craft markers */
#rules .craftmarker { width: 45%; float: left; min-height:11em; margin-right: 2%; background-color: #D3DBCB; margin-top:1em; padding-left:1em; padding-right:1em;}
#rules .craftmarker .markerimage img { float: left; width: 5em; margin-right: 1em; margin-left: 0.5em;}
#rules .craftmarker .markerimageright img { float: right; width: 5em; margin-left: 1em; margin-right: 0.5em;}
#rulesContainer #rules .craftmarker { width: 95%; }