/* 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 */
/* Matura Script - for Headers */
@font-face {
  font-family: 'Matura Script';
  font-style: normal;
  font-weight: 400;
  src: url('/game-plugins/grandaustria/1.0.1/fonts/MaturaScript.ttf'); 
  src: local('Matura Script'),local('MaturaScript'), 
       url('/game-plugins/grandaustria/1.0.1/fonts/MaturaScript.ttf') format('truetype'); 
}
/* Nothing You Could Do - Leopold talking. The exact font would be commercial */
@font-face {
  font-family: 'Nothing You Could Do';
  font-style: normal;
  font-weight: 400;
  src: url('/game-plugins/grandaustria/1.0.1/fonts/NothingYouCouldDo-Regular.ttf'); 
  src: local('NothingYouCouldDo-Regular'),local('NothingYouCouldDo'),local('Nothing You Could Do'), 
       url('/game-plugins/grandaustria/1.0.1/fonts/NothingYouCouldDo-Regular.ttf') format('truetype'); 
}
   
#rules .leopoldfont {font-family: 'Nothing Cou Could Do', serif; font-size: 1.3em;  }

#rules .chapter .title {
    color: #6A2A1F;
    background-image: url('/game-plugins/grandaustria/1.0.1/images/rules/header_background.jpg');
    background-color: #DDC096;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 7px;
    font-size: 3em;
    font-family: 'Matura Script', serif;
    font-weight: bold;
    min-height: 1em;
    line-height: 1em;
    border: none;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

.rules h1 {
    background-image: url('/game-plugins/grandaustria/1.0.1/images/rules/header_background.jpg');
    background-color: #DDC096;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #6A2A1F;
    padding: 7px;
    font-size: 3em;
    font-family: 'Matura Script', serif;
    font-weight: bold;
    min-height: 1em;
    line-height: 1em;
    border: none;
    margin-top: 0em;
    margin-bottom: 0.5em;
}


.rules h2 {
  padding: 2px;
  font-family: 'Matura Script', serif;
  font-weight: bold;
  font-size: 2.5em;
  color: #6A2A1F;
  margin-bottom: 0.1em;
  margin-top: 0.1em;
}

#rules h3 {
  padding: 2px;
  font-family: 'Matura Script', serif;
  font-weight: bold;
  font-size: 2em;
  color: #8F6126;
  clear: left;
}

#rules h4 {
  padding: 2px;
  margin-top: 0.2em;
  font-family: 'Matura Script', serif;
  font-weight: bold;
  font-size: 1.5em;
}

#rules ul {
  list-style-image: url('/game-plugins/grandaustria/1.0.1/images/rules/list_symbol.jpg');
}

/* if you want to add arrow-ups to hop back to rules start*/
#rules .referback {float:right; font-size:1.5em; font-weight:bold; margin-right:1em; color: #6A2A1F; }


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


/* this is Leopold talking */
#rules .leopold {
  background-image: url('/game-plugins/grandaustria/1.0.1/images/rules/leopold_background.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 12em;
  height: auto;
  padding: 1em;
  color: #6A2A1F;
  font-size:1.3em;
  font-family: 'Nothing You Could Do'
}
#rules .plus {
  background-image: url('/game-plugins/grandaustria/1.0.1/images/rules/leopold_background.jpg');
}
#rules .wide {
  background-image: url('/game-plugins/grandaustria/1.0.1/images/rules/leopold_wide_background.jpg');
}
#rules .extrawide {
  background-image: url('/game-plugins/grandaustria/1.0.1/images/rules/leopold_extrawide_background.jpg');
}
#rules .l20 {width: 20em;}
#rules .l30 {width: 30em;}

#rules .leopold_comment {float:right; height:6em; margin-bottom: -1.5em; margin-top:-0em;}
#rules .leopold_top_comment {float:right; height:6em; margin-top: -2.5em;}
#rules .leopold_action1_comment {float:right; height:7em; margin-top: 4em; margin-right: -2em;}
#rules .leopold_staffcomment {float:right; height:6em; margin-left:-5em; margin-top:-5em;}


/* some shortcut classes for right floating boxes different width */
#rules .w60 { width: 60%; float: right; margin-left: 0.5em; }
#rules .w55 { width: 55%; float: right; margin-left: 0.5em; }
#rules .w50 { width: 50%; float: right; margin-left: 0.5em; }
#rules .w45 { width: 45%; float: right; margin-left: 0.5em; }
#rules .w40 { width: 40%; float: right; margin-left: 0.5em; }
#rules .w35 { width: 35%; float: right; margin-left: 0.5em; }
#rules .w30 { width: 30%; float: right; margin-left: 0.5em; }
#rules .w20 { width: 20%; float: right; margin-left: 0.5em; }
#rules .w15 { width: 15%; float: right; margin-left: 0.5em; }

#rules .w90 { width: 90%; margin-left: 0.5em; clear:both; }


#rules .outlined {
  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}    
#rules .outlined_reverse {
  color: black;
  text-shadow:
   -1px -1px 0 #FFF,  
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
     1px 1px 0 #FFF;
}     

/* don't display examples in the sidebar */
#rules .example { font-style: italic; font-weight: normal;}
#sidebarPanel #rules .example { display:none; }

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

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

/* die actions */
#rules .dieaction { clear:both; }
#rules .dieaction .dieactionimage { float: left; margin-right:1em; width: 8em; margin-bottom:0.5em;}
#rules .dieaction ul { margin-left: 9.5em; }
#sidebarPanel #rules .dieaction ul { margin-left: 0.5em; }

/* some image definitions */
#rules .imageleft img { width: 8em; float: left; margin-right: 1em; }
#rules .imageleft10 img { width: 10em; float: left; margin-right: 1em; }
#rules .imageleft16 img { width: 16em; float: left; margin-right: 1em; margin-bottom: 2em; }
#rules .imageleft24 img { width: 24em; float: left; margin-right: 1em; margin-bottom: 2em; }
#rules .imageleft50percent img { width: 50%; float: left; margin-right: 1em; margin-bottom: 2em; }
#rules .imageleft67percent img { width: 67%; float: left; margin-right: 1em; margin-bottom: 2em; }
#rules .imageFullWidth img { width: 95%; margin-left: 1em; margin-bottom: 1em; clear:both; }

#rules .image6em img { width: 6em; }
#rules .inline { display: inline; }

#rules .paragraph.staff { width: 48%; float: left; margin-right: 1em; margin-top: 0.5em; }
#rulesContainer #rules .paragraph.staff { width: 95%; }

#rules .paragraph.politics { width: 31%; float: left; margin-right: 1em; margin-top: 0.5em; }
#rulesContainer #rules .paragraph.politics { width: 95%; }