/* 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 */

/* Marathon Serial for headers */
@font-face {
  font-family: 'Marathon';
  src: local('Marathon'),
       url('/game-plugins/alibaba/1.0.1/fonts/Marathon-Serial-Regular.ttf') format('truetype'); 
}
   
.rules .chapter .title {
  font-family: 'Marathon', sans-serif;
  font-weight: bold;
  color: #8D1634;
  border: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
  text-transform: uppercase;
  background-color: #EEEEEE;
}

.rules h4 {
  font-weight: bold;
  text-decoration: underline;
  margin-top: 0em;
}

/* bullet list with dark red bullets */
.rules ul {
  list-style: none; /* Remove default bullets */
}
.rules ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #8D1634; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

/* examples */
#rules .example { 
    font-style: italic; font-weight: normal; 
    border: 2px solid #F08D6E; 
    border-radius: 3em;
    padding: 1em 0.5em 1em 2em;
    background-color: #FBEFE9;
    margin:1px;
}
#sidebarPanel #rules .example { display:none; } /* don't display examples in the sidebar */

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


#rules .paragraph { clear: left; margin-top: 1em; margin-bottom: 0.5em; }
#rules .clear { clear: both; }
#rules .inline { display: inline-block; }


/* images */
#rules .imageleft14 img { width: 14em; float: left; margin-right: 1em; margin-bottom: 0.5em; }
#rules .imageleft10 img { width: 10em; float: left; margin-right: 1em; margin-bottom: 0.5em; }
#rules .imageleft10indent img { width: 10em; float: left; margin-right: 1em; margin-bottom: 0.5em; margin-left: 4em;}
#rules .imageleft4 img { width: 4em; float: left; margin-right: 1em; }
#rules .imageright14 img { width: 14em; float: right; margin-left: 1em; margin-right: 0.5em;}

#rules .boardsetup img { width: 18em; float: left; margin-right: 1em; margin-bottom: 0.5em; }

#rules .score { width: 48%; float: left; margin-right: 1em; margin-bottom: 0.5em;}
#rules .score .tileset { width: 11em; float: left; margin-right: 0em; }
#rules .score .tile { width: 4em; float: left; margin-right: 1em; }
#rules .score .tile2left { width: 4em; float: left; margin-right: 1em; margin-left: -3em}

.rules .magic { width:48%; float: left; margin-right: 2%; }
.rules .magic.pic { width:53%; margin-bottom:0.2em;}
.rules .magic.ex { width:43%; margin-right:0em;}
.rules .effectpic { width: 4em; float: left; margin-right: 0.5em;}
.rules .magicexample { width: 9em; float: left; margin-right: 1em; margin-bottom: 0.5em; }

#sidebarPanel #rules .magic { width: 95%; }

/* flex containers align the height of side by side boxes */
.rules .flexcontainer {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}