/* 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 table.campaignPts { border-collapse: collapse; }
.rules table.campaignPts th { text-align: right; }
.rules table.campaignPts td { text-align: center; border: 1px solid black; }

.rules .hints4Handling { padding: .5em .5em .5em 1.5em; }
.rules .deviation { margin-top: 1em; }
#rules .appendix .paragraph { width: 98%; }
#rules .appendix.cards .paragraph { width: 47%; }
#rules .appendix.cards .paragraph img { width: 55%; float: left; margin-right: .5em; }
#rules .appendix.drivers .paragraph img { width: 40%; float: left; margin-right: .5em; }

#rules .cardBasics { padding: 10px 20px; float: left; }
#rules img.carddesc { margin-bottom: -12px; margin-left: -182px; width: 200px; }
#rules .spaceAndSegments { float: left; width: 200px; text-align: center; font-style: italic; font-size: .9em; padding: 1em; }
#rules .spaceAndSegments p { padding: 0; margin: 0; }
#rules .movements img { padding: 1em; }
#rules img.spaceAndSegments { width: auto; padding: 0; }

#rules img.TucsonSpecial { float: right; width: 200px; padding-left: 1em; }
#rules .driverBasics img.carddesc { margin-bottom: 58px; margin-left: -198px; width: 218px; }
#rules .sponsorBasics img.carddesc { margin-bottom: 16px; margin-left: -195px; width: 211px; }
#rules ol.cardBasics { padding-left: 1em; width: 400px; }
#rules ol.cardBasics.driverBasics { padding-left: 1em; width: 250px; }

#rules img.wearChart { width: auto; float: left; padding: 0.5em 2em 1em; }
#rules ul.wearChart { line-height: 3.3em; list-style-type: none;  }

#rules ul { padding-left: 1em; margin-left: 2em; }

#rulesContainer #rules .cardBasics { padding: 10px 20px; float: left; width: 90%; }
#rulesContainer #rules img.carddesc { margin-bottom: -12px; margin-left: -69%; width: 72%; }
#rulesContainer #rules img.wearChart { width: 33%; float: left; padding-left: 0; }
#rulesContainer #rules ul.wearChart { line-height: 1.3em; list-style-type: none; }
#rulesContainer #rules .appendix.cards .paragraph { width: 98%; }