/* 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 */
   
.rules .startPlayer { margin-left: -1.2em; }

/* to prevent strange floating around of itemized stuff 
.rules .itemisation .itemcnt { width: 5%; text-align: right; float: left;  clear: left;}
.rules .itemisation .item { margin-left: 5%; width: 90%; text-align: left; float: right; clear: right;}
*/

#rules td { vertical-align: top; }
#rules ul { list-style-type: none; }

#rules img.inlinePic { width: 2em; }
#rules img.inlineSymbol { width: 1em; }
#rules img.examplepic { float: center; padding: 5px; width: 100%; }


#rules h2 { color: #3f70b3; }

#rules .subchapter { margin-top: 2em;  }


#rules .paragraph.advancementleft { width: 49%; float: left; }
#rules .paragraph.advancementright { width: 49%; float: right; }
#rules .paragraph.advancement { width: 98%; background-color: white; float: left; margin: .3em .5em; padding: .2em .5em; }
#rules .paragraph.advancement img.card { width: 200px; float: left; margin: .2em .5em;}
#rules .paragraph.advancement .cardhigh { width: 120px; float: left; margin: .2em .5em; position: relative; }
#rules .paragraph.advancement .basic { width: 100%; }
#rules .paragraph.advancement .cardability { position: absolute; width: 16%; top: .5%; left: 16.5%; }
#rules .paragraph.advancement .slot { position: absolute; top: 2%; left: 0; }
#rules .paragraph.advancement img.inlineSymbol { width: 1em; }
#rules .paragraph.advancement .info { margin-left: 10px; float: left; }


#rules .paragraph.valeleft { width: 49%; float: left; }
#rules .paragraph.valeright { width: 49%; float: right; }
#rules .paragraph.vale { width: 98%; background-color: white; float: left; margin: .3em .5em; padding: .2em .5em; }
#rules .paragraph.vale img.cardhigh { width: 120px; float: left; margin: .2em .5em; }
#rules .paragraph.vale .info { margin-left: 10px; float: left; }
#rules .paragraph.vale img.inlineSymbol { width: 1em; }
#rules .paragraph.vale .info { margin-left: 10px; float: left; }


#rules .paragraph.druids { width: 98%; background-color: white; float: left; margin: .3em .5em; padding: .2em .5em; }
#rules .paragraph.druids img { width: 120px; float: right; margin: .2em .5em; }
#rules .paragraph.druids .info { margin-left: 10px; float: left; }

.clear { clear: both; }
.rules .chapter.listAdv .advancement { width: 24%; padding: 0; box-sizing: border-box; border: 1px solid black; margin: 2px .3%; float: left; }
.rules .chapter.listAdv img.cardability { width: 10%; height: auto; padding: 0; box-sizing: border-box; border: 1px solid black; transform: rotate(90deg); -webkit-transform: rotate(90deg); margin-left: 45%; margin-top: -45%; margin-bottom:-45%; }
.rules .chapter.listVC .valecard { width: 19%; padding: 0; box-sizing: border-box; border: 1px solid black; margin: 2px .3%; float: left; }
.rules .chapter.listVC span { float: left; margin-left: -13%; margin-top: 10%; color: white; font-size: 6em; }
.rules .chapter.listVC  span.black { color: black; }
#sidebar .rules .chapter.listVC span { margin-left: -14%; margin-top: 8%; font-size: 3em; }
#sidebar .rules .chapter.listAdv img.cardability { display: none; }