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

/* Inika for headers*/
@font-face {
	font-family: 'Inika';
	src: local('Inika'), local('Nereus header'),
			 url('/game-plugins/nereus/1.0.1/fonts/Inika-Bold.ttf') format('truetype');
}   
/* Gentium for examples */
@font-face {
	font-family: 'Gentium';
	src: local('Gentium'), local('Nereus examples'),
			 url('/game-plugins/nereus/1.0.1/fonts/Gentium-Italic.TTF') format('truetype');
}   

   
.rules {
    padding: 0.5em;
    text-shadow: none;
}

.rules p {
    margin-bottom: 0.5em;
}

.rules h1 {
    border: none;
    font-family: 'Inika', serif;
    padding: 5px;
    font-size: 2.5em;
    text-align: left;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}
#sidebarPanel #rules h1 {
    font-size: 1.5em;
}

.rules h2 {
    font-family: 'Inika', serif;
    margin-top: 0.5em;
    margin-bottom: 0.6em;
}

.rules .h1_mod,.h2_mod {
    padding: 0.02em 1em 0.01em 1em;
    background-color: #2E1617;
    color: #EAC943;
    font-weight: normal;
    padding: 0.2em 1em 0.2em 1em;
    text-shadow:
      2px 2px 3px #BF711F,
      3px 3px 5px #EAC943,
      -1px -1px 3px #EAC943;
    border-radius: 0 0.5em 0.5em 0;
    box-shadow: 2px 0px 3px #EAC943,
       4px 0px 4px #BF711F,
       5px 0px 5px #2E1617;
    margin-left: -0.3em;
}

.rules h3 {
    font-family: 'Inika',serif;
    color: #2E1617;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.rules h4 {
    font-family: 'Inika',serif;
    color: #2E1617;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

/* two columns in main rules - one in sidebar */
.rules .twocol {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
}

#sidebarPanel #rules .twocol {
    column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
}


#rules .cover {
    width: 60%;
    margin-left: 20%;
}
#sidebarPanel #rules .cover {
    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;
}

/* unordered lists */
.rules ul {
    margin: 1em 0em 1em 2em;
    list-style-image: url('/game-plugins/nereus/1.0.1/images/rules/list_icon_u.gif');
}

.rules .content ul {
    margin: 1em 0em 1em 1em;
    list-style-type: none;
    list-style-image: none;
}

.rules .phases ul {
    margin: 1em 0em 1em 1em;
    list-style-type: none;
    list-style-image: none;
}

.rules .treasures ul {
    margin: 1em 0em 1em 1em;
    list-style-type: none;
    list-style-image: none;
}

/* customized list - grey shaded numbers*/
.rules ol.custlist { list-style: none; counter-reset: li; }
.rules ol.custlist>li::before {
	content: counter(li)'.';
	font-family: 'Inika', serif; color: #C0C4C0; font-weight: normal; text-align: center; font-size: 1.5em;
	text-shadow:
      1px 1px 2px #352E2D,
      -1px -1px 1px #352E2D,
      -1px 1px 1px #352E2D,
      1px -1px 1px #352E2D,
      2px 2px 3px #534746;
  padding: 2px;
}
.rules ol.custlist>li { counter-increment: li; }

/* link colors */
.rules a:link {
    color: #84482A;
    font-weight: bold;
}

.rules a:visited {
    color: #84482A;
    font-weight: bold;
}

.rules a:hover {
    color: #84482A;
    font-weight: bold;
}

.rules a:active {
    color: #84482A;
    font-weight: bold;
}


.rules .componentsTable table, .componentsTable td, .componentsTable tr {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}
.rules .componentsTable { width: 100%; }


.rules .components {
    float: left;
    width: 100%;
    margin-right: 0em;
    margin-bottom: 1em;
}

.rules .setup {
    float: left;
    width: 65%;
    margin-right: 1em;
    margin-bottom: 1em;
}

.rules .cabinExampleTable table, .cabinExampleTable td, .cabinExampleTable tr {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
}

.rules .cabinExampleTable {
    width: 100%;
}

.rules .cabinExample {
    float: left;
    width: 100%;
    margin-right: 0 /*2%*/;
    margin-bottom: 1em;
}


/* Examples */
.rules .example {
    /* font-style: italic; the font itself is already italic */
    font-size: 1.3em;
    color: #8E4435;
    font-family: 'Gentium', sans-serif;
    background-color: #E0CCA1;
    padding: 0.5em;
    overflow: auto;
}
#sidebarPanel #rules .example {
    display: none;
}

.rules em { color: #8E4435; font-family: 'Gentium', sans-serif; font-size: 1.2em; font-style: normal;}
#sidebarPanel #rules em { display: none;}

.rules .example.discovery {float: right; width: 70%; margin-left: 2em; }
.rules .example.discovery img {float: left; width: 65%; margin-right: 1em;}

.rules .greenExample { text-align: center; }
.rules .greenExample img {  width: 70%; margin-bottom: 0.5em;}
.rules .redExample { text-align: center }
.rules .redExample img { width: 50%; margin-bottom: 0.5em;}
.rules .example.explorerPhaseExample { width: 60% ; float: right; }
.rules .explorerPhaseExample img { width: 50%; float: left; margin-right: 1em; }
.rules .example .boatswainExample { width: 45%; float: left; margin-right: 1em; }
.rules .example .scientistExample { width: 65%; float: left; margin-right: 1em; }
.rules .example .scienceCardExample { width: 30%; float: right ; margin-left: 1em; }
.rules .neutralPlayerExample { overflow: auto; }
.rules .neutralPlayerExample img { width: 50%; float: right; margin-left: 1em; }



/* flex lists basic */
.rules .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
}

.rules .flexbox {    flex: 1 2 48%;}
#sidebarPanel #rules .flexbox {    flex: 1 1 95%;}

.rules .flexsetup {    flex: 2 2 48%;}
.rules .flex1left {    flex: 3 2 60%;}
.rules .flex1right {    flex: 2 2 37%;}

.rules .revisedCabin { overflow: auto; }
.rules .revisedCabin img { float: right; width: 20%; margin-left: 1em; }
.rules .shipNeutral img { height: 1.5em; margin-bottom: -0.2em;}


/* some pics */
.rules .holdRequirements {float: right; width: 30%; margin-left: 1em; margin-top: -2em;}
#sidebarPanel #rules .holdRequirements {display: none;}
.rules .treasureChest {float: right; width: 30%; margin-left: 1em; }
.rules .inlineGem { height: 1.5em; }
.rules .crewActions { width: 40%; float: right; margin-left: 1em; }
#sidebarPanel #rules .crewActions { width: 60%; }
.rules .generalEnhancedAction { width: 15% ; float: right; margin-left: 1em; }
#sidebarPanel #rules .generalEnhancedAction { display: none; }

.rules .picturebox {width: 35%; float: right; margin-left: 1em;}
#sidebarPanel #rules .picturebox {width: 40%; float: right; margin-left: 1em;}
.rules .picturebox.goldAction img {width: 60%;}
#sidebarPanel #rules .picturebox.goldAction img {width: 70%;}
.rules .picturebox.enhancedAction img {width: 95%;}

/* science cards */
.rules .flexsiencecard {
    flex: 1 1 30%;
    background-color: #E5D9B7;
    padding: 0.5em;
}
#sidebarPanel #rules .flexsiencecard {
    flex: 1 1 95%;
}
.rules .flexsiencecard img {
    width: 10em;
    float: left;
    margin-right: 1em;
}

.rules .flexaction { flex: 1 1 21%;
    background-color: #E5D9B7;
    padding: 0.5em;
    text-align: center;
}
#sidebarPanel #rules .flexaction { flex: 1 0 15%; }
.rules .flexaction img {  width: 8em; }
#sidebarPanel #rules .flexaction img {  width: 6em; }


.rules .crewIcon {
    display: inline-block;
    vertical-align: middle;
    height: 3em; width: 3em;
    margin-left: -0.5em;
    margin-right: 1em;
}
#sidebarPanel #rules .crewIcon {width: 2.5em; height: 2.5em; margin-right: 0.5em;} 
.rules .crewActionsTitle {
    display: inline-block;
}