/* 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 .introduction { font-style:italic; margin-top: 20px; margin-bottom: 20px; color: midnightblue }
.rules p { text-indent: 1px; margin-left: 10px; margin-bottom: 5px }
.rules a { font-weight: bold }
.rules ul li { margin-left: 10px; list-style-type:square; margin-bottom: 3px }
.rules .text { margin-bottom: 20px; color: #272520 }
.rules .emph { font-weight: bold }
.rules .example { font-style: italic }
.rules .title0 { text-transform: uppercase; font-size: 2em; font-weight: bold; margin-top: 20px; margin-bottom: 5px; padding: 10px;
                 background-color: rebeccapurple; color: antiquewhite; text-align: center; border: 5px #943171 solid }
.rules .title1 { text-transform: uppercase; color: rebeccapurple; font-size: 1.5em; font-weight: bold; margin-top: 10px; margin-bottom: 5px }
.rules .title2 { text-transform: capitalize; color: rebeccapurple; font-size: 1.2em; font-weight: bold; margin-top: 10px; margin-bottom: 5px }

.rules .smallerImage { width:8%; float: right; clear: both }
.rules .smallImage { width:20%; float: right; clear: both }
.rules .verysmallImage { width:10%; float: right; clear: both }
.rules .normalImage { width:40%; float: right; clear: both }
.rules .largeImage { width:100% }

.rules .tableLine { border-bottom: 1px dashed #7e2b39}
.rules .tableRow { width:60% }