/* 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 */
   
/* butterfly-kids-regular - latin_latin-ext */
@font-face {
  font-family: 'Butterfly Kids';
  font-style: normal;
  font-weight: 400;
  src: url('/game-plugins/chakra/1.0.0/fonts/butterfly-kids-v8-latin_latin-ext-regular.eot'); /* IE9 Compat Modes */
  src: local('Butterfly Kids Regular'), local('ButterflyKids-Regular'),
       url('/game-plugins/chakra/1.0.0/fonts/butterfly-kids-v8-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/game-plugins/chakra/1.0.0/fonts/butterfly-kids-v8-latin_latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/game-plugins/chakra/1.0.0/fonts/butterfly-kids-v8-latin_latin-ext-regular.woff') format('woff'), /* Modern Browsers */
       url('/game-plugins/chakra/1.0.0/fonts/butterfly-kids-v8-latin_latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/game-plugins/chakra/1.0.0/fonts/butterfly-kids-v8-latin_latin-ext-regular.svg#ButterflyKids') format('svg'); /* Legacy iOS */
}

#rules .chapter .title {
  background-color: #774277;
  color: #F7E99A;
  text-align: center;
  padding: 0px;
  font-size: 3em;
  border-top: 4px #F7E99A solid;
  border-bottom: 4px #F7E99A solid;
  font-family: 'Butterfly Kids', cursive;
}

#rules .chapter .subTitle {
    background-color: #F7B4D2;
    color: #A92E86;
    padding: 0px;
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    font-family: 'Butterfly Kids', cursive;
    border-radius: 1em;
    border-left: 4px #8C9B5C solid;
    border-right: 4px #8C9B5C solid;
    margin-bottom: .2em;
}

#rules h1 {
    background-color: #F7B4D2;
    color: #A92E86;
    padding: 0px;
    font-size: 2.25em;
    text-align: center;
    font-family: 'Butterfly Kids', cursive;
    border-radius: 1em;
    border-left: 4px #8C9B5C solid;
    border-right: 4px #8C9B5C solid;
}
#rules h4 {
    text-align: center;
}

.rules #chakras { max-width: 60%; }
.rules .plenitude { background-color: #948c7a; color:white; max-width: 60%; font-weight:bold; border-radius:2em; border: 0.3em solid antiquewhite; }
.rules .plenitude .intro { max-width: 5em; color:antiquewhite; text-align: center; font-family: 'Butterfly Kids', cursive; font-size: 2.25em; }
.rules .plenitude img { max-width: 5em; }

.rules img.example { float: right; padding: 0 0 .5em 1em; max-width: 8em;}
.rules img.floatRight { float: right; padding: 0 0 .5em 1em; max-width: 5em;}
.rules img.floatLeft { float: left; padding: .5em 1em 0 0; max-width: 5em;}
#rules .indent { padding-left: 3.5em; }
#rules .headImage { float: left; padding: .5em .5em 0 0; max-width: 3em; vertical-align: middle; }
#rules .red { color: red; }
#rules .chakraColor { color: #A92E86; }

#sidebarPanel #rules .indent { padding-left: 2.5em; }
#sidebarPanel #rules img { max-width: 4em; }
#sidebarPanel #rules .headImage { max-width: 2em; }
#sidebarPanel #rules table { max-width: 90%; }