@import url('https://fonts.googleapis.com/css?family=Caudex|Cinzel|Lora|Open+Sans|Raleway');

html {
  font-family: Lora, Arial, Helvetica, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0px; padding: 0px; }
A {
  color: #22AA55;
}

.center  { text-align: center }
.left    { text-align: left; }
.right   { text-align: right; }
.justify { text-align: justify; }


NAV#menu { z-index: 100; }

div.navbg {
  height: 100px; background-color: rgba(34, 102, 51, 0.9); margin-bottom: 0px; width: 100%;  transition: transition: all 0.5s ease-in-out;
}

DIV#error {
  font-family: 'Open Sans', sans-serif;
  background-color: #994444;
  color: #FFFFFF;
  font-size: 8pt;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  border: 1px solid #990000;
}


@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

TABLE#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; transition: all 0.5s ease-in-out; }
TABLE#header TD { padding: 10px 20px; text-align: center; border: none; 
                                                                                        background: rgba(0,0,0,0);
                                   background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%,               rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0)));
                                background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,               rgba(0,0,0,0) 100%);
                                     background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,               rgba(0,0,0,0) 100%);
                                    background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,               rgba(0,0,0,0) 100%);
                                  background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,               rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(        startColorstr='rgba(0,0,0,0.2)',    endColorstr='rgba(0,0,0,0)', GradientType=0 );
}
TABLE#header TD.navicon { background-color: transparent; transition: all 0.5s ease-in-out; padding-top: 20px; }
TABLE#header TD.navicon A { font-size: 20pt; text-decoration: none; color: #FFFFFF; text-shadow: 1px 1px 2px #000000; }
TABLE#header TD.navicon.small { background-color: transparent; transition: all 0.5s ease-in-out; padding-top: 10px; }
TABLE#header TD.navicon.small A { font-size: 20pt; text-decoration: none; color: #FFFFFF; text-shadow: 1px 1px 2px #000000; }


TABLE#header.show TD { padding: 0px 20px; text-align: center; border: none;  }
TABLE#header.show { background-color: rgba(0,0,0,0.8); transition: all 0.5s ease-in-out;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.8);
}

TABLE#header TD.topnav A { padding: 5px 10px; font-size: 1em; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.6); text-decoration: none; }
TABLE#header TD.topnav.dark A { padding: 5px 10px; font-size: 1em; color: #FFFFFF; text-decoration: none; }
TABLE#header TD.topnav.dark A:hover { padding: 5px 10px; font-size: 1em; color: #EEEEAA; }

UL.topnav { margin: 0px; padding: 0px; list-style: none; }
UL.topnav LI.logo img { width: 220px;  transition: all .2s ease-in-out; }
UL.topnav LI.logo.small img { transition: all 0.5s ease-in-out; -webkit-transform: scale(.75); -ms-transform: scale(.75); transform: scale(.75); }

  DIV.carousel-cell { min-height: 100vh; background-size: cover; width: 100%; position: relative; background-position: center center; }

 @media screen and (max-width: 768px) { /* MOBILE */
  .navspacer { height: 75px }

  UL.topnav LI.mobilehide { display: none; }
  UL.topnav LI.logo { text-align: center; }

  div.one    { width: calc((100%/12)*4); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.two    { width: calc((100%/12)*6); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.three  { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.four   { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.five   { width: calc((100%/12)*12); height: auto;   display: inline-block; vertical-align: top; margin: 0px auto; }
  div.six    { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.seven  { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.eight  { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.nine   { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.ten    { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.eleven { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.twelve { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div#break { clear: both; }
  div#linebreak { clear: both; border-top: 1px solid #CCCCCC; margin-top: 20px; padding-top: 5px; }

  div.v100 { height: 100vh; }
  div.v90  { height: 90vh; }
  div.v80  { height: 80vh; }
  div.v70  { height: 70vh; }
  div.v60  { height: 60vh; }
  div.v50  { height: 50vh; }
  div.v40  { height: 40vh; }
  div.v30  { height: 30vh; }
  div.v20  { height: 20vh; }
  div.v10  { height: 10vh; }
  
  DIV.artframe {  width: 60%; height: auto; margin: 0px auto; position: absolute; left: 0; bottom: 40px; right: 0; background-color: rgba(0,0,0,0.8); padding: 10px 20px 20px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
  DIV.artframe H2 {  text-align: center; text-wrap: balance; }
  DIV.artframe H2 A { font-family: Raleway, serif; font-size: 16pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-decoration: none; }
  DIV.artframe P.author { font-family: Caudex, Serif; font-size: 10pt; color: #AAAAAA; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-align: center; }
  DIV.artframe P.description { display: none; }
  DIV.artframe div.type { font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-align: center; margin: -23px auto -10px auto; background-color: #226633; padding: 10px; display: block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

h1 { font-size: 1.5em;
  font-family: Cinzel, Serif;
  text-align: center;
  margin-top: 00px;
  margin-bottom: 10px;
  color: #22AA55;
}
}
@media only screen and (min-width: 768px) and (max-width: 1399px) {  /* TABLET */

  .navspacer { height: 75px }
UL.topnav LI.mobilehide { display: none; }
UL.topnav LI.logo { text-align: center; }

  div.one    { width: calc((100%/12)*2); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.two    { width: calc((100%/12)*2); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.three  { width: calc((100%/12)*2); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.four   { width: calc((100%/12)*6); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.five   { width: calc((100%/12)*6); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.six    { width: calc((100%/12)*6); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.seven  { width: calc((100%/12)*9); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.eight  { width: calc((100%/12)*9); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.nine   { width: calc((100%/12)*9); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.ten    { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.eleven { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.twelve { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div#break { clear: both; }
  div#linebreak { clear: both; border-top: 1px solid #CCCCCC; margin-top: 20px; padding-top: 5px; }

  div.fullpage    { height: 100vh; }
  div.halfpage    { height: 50vh; }
  div.quarterpage { height: 25vh; }

  div.v100 { height: 100vh; }
  div.v90  { height: 90vh; }
  div.v80  { height: 80vh; }
  div.v70  { height: 70vh; }
  div.v60  { height: 60vh; }
  div.v50  { height: 50vh; }
  div.v40  { height: 40vh; }
  div.v30  { height: 30vh; }
  div.v20  { height: 20vh; }
  div.v10  { height: 10vh; }

  .artframe { width: 60%;  height: auto; margin: 0px auto; position: absolute; left: 0; bottom: 40px; right: 0; background-color: rgba(0,0,0,0.8); padding: 10px 20px 20px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
  .artframe H2 {  text-align: center; text-wrap: balance; }
  .artframe H2 A { font-family: Raleway, serif; font-size: 18pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-decoration: none; }
  DIV.artframe P.author { font-family: Caudex, Serif; font-size: 10pt; color: #AAAAAA; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-align: center; }
  DIV.artframe P.description { display: none; }
  DIV.artframe div.type { font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-align: center; margin: -23px auto -10px auto; background-color: #226633; padding: 10px; display: block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

  h1 { font-size: 2.25em;
    font-family: Cinzel, Serif;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
    color: #22AA55;
  }
}
  h1 small {
   color: #000000;
   font-size: 12pt;
  }
@media screen and (min-width: 1400px) {  /* DESKTOP */
.navspacer { height: 100px }
UL.topnav LI { display: inline-block; margin: 0px; padding: 5px; min-width: 80px; text-align: center; }
UL.topnav LI.mobilehide { display: inline-block; visibility: visible; }
UL.topnav LI.logo { text-align: center; }

 .mobilehide { visibility: visible; display: block; }
  div.one    { width: calc(100%/12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.two    { width: calc((100%/12)*2); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.three  { width: calc((100%/12)*3); height: auto; display: inline-block; vertical-align: top; margin: 0px auto; }
  div.four   { width: calc((100%/12)*4); height: auto; display: inline-block; vertical-align: top; margin: 0px auto; }
  div.five   { width: calc((100%/12)*5); height: auto; display: inline-block; vertical-align: top; margin: 0px auto; }
  div.six    { width: calc((100%/12)*6); height: auto; display: inline-block; vertical-align: top; margin: 0px auto; }
  div.seven  { width: calc((100%/12)*7); height: auto; display: inline-block; vertical-align: top; margin: 0px auto; }
  div.eight  { width: calc((100%/12)*8); height: auto; display: inline-block; vertical-align: top; margin: 0px auto; }
  div.nine   { width: calc((100%/12)*9); height: auto; display: inline-block; vertical-align: top; margin: 0px auto; }
  div.ten    { width: calc((100%/12)*10); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.eleven { width: calc((100%/12)*11); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div.twelve { width: calc((100%/12)*12); height: auto;  display: inline-block; vertical-align: top; margin: 0px auto; }
  div#break { clear: both; }
  div#linebreak { clear: both; border-top: 1px solid #CCCCCC; margin-top: 20px; padding-top: 5px; }

  div.fullpage    { height: 100vh; }
  div.halfpage    { height: 50vh; }
  div.quarterpage { height: 25vh; }

  div.v100 { height: 100vh; }
  div.v90  { height: 90vh; }
  div.v80  { height: 80vh; }
  div.v70  { height: 70vh; }
  div.v60  { height: 60vh; }
  div.v50  { height: 50vh; }
  div.v40  { height: 40vh; }
  div.v30  { height: 30vh; }
  div.v20  { height: 20vh; }
  div.v10  { height: 10vh; }

  div.flex { padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 10px; }
  div.flexbox1 { grid-column: span 1; grid-row: span 1; }
  div.flexbox2 { grid-column: span 2; grid-row: span 1; }
  div.flexbox3 { grid-column: span 3; grid-row: span 2; }
  div.flexbox4 { grid-row: span 4; }
  div.flexbox5 { grid-row: span 5; }
  div.flexbox6 { grid-row: span 6; }
  
  div.fb { display: flex; flex-wrap: wrap; flex-direction: row; align-items: stretch; align-content: stretch; }

  div.fb1 { flex: 1; min-width: 200px; }
  div.fb2 { flex: 2; min-width: 300px; }
  div.fb3 { flex: 3; }
  div.fb4 { flex: 4; }
  div.fb5 { flex: 5; }

  DIV.artframe { width: 40%; height: auto; margin: 0px auto; position: absolute; left: 0; bottom: 40px; right: 0; background-color: rgba(0,0,0,0.8); padding: 10px 40px 20px 40px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
  DIV.artframe H2 {  text-align: center; text-wrap: balance; }
  DIV.artframe H2 A { font-family: Cinzel, serif; font-size: 20pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-decoration: none; }
  DIV.artframe P.author { font-family: Caudex, Serif; font-size: 10pt; color: #AAAAAA; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-align: center; }
  DIV.artframe P.description { display: block; font-family: Caudex, Serif; font-size: 12pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); -webkit-column-count:2; -moz-column-count:2; column-count:2; text-align: justify;
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px; }
  DIV.artframe div.type { font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-align: center; margin: -23px auto -10px auto; background-color: #226633; padding: 10px; display: block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
 

h1 { font-size: 2.5em;
  font-family: Cinzel, Serif;
  text-align: center;
  margin-top: 00px;
  margin-bottom: 10px;
  color: #22AA55;
}


}

  div.articleframe { background-position: center center; background-size: cover; position: relative; cursor: pointer; }
  DIV.articleframe div.articlebox  { background-color: rgba(0,0,0,0.8); text-align: center; text-wrap: balance; bottom: 10px;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; left:0; right: 0; margin: 0px auto; position: absolute; width: 80%; padding: 5px;   }
  DIV.articleframe div.headline { clear: both; margin: 15px 5px 5px 5px; }
  DIV.articleframe div.headline A { font-family: Caudex, serif; font-size: 12pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-decoration: none; }
  DIV.articleframe div.type { font-family: Caudex, Serif; font-size: 8pt; color: #FFFFFF; text-align: center; margin: -23px auto -10px auto; background-color: #226633; padding: 10px; display: block; width: 150px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }


  div.newsframe { background-position: center center; background-size: cover; position: relative; cursor: pointer; }
  DIV.newsframe div.newsbox  { background-color: rgba(0,0,0,0.8); text-align: center; text-wrap: balance; bottom: 10px;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; left:0; right: 0; margin: 0px auto; position: absolute; width: 80%; padding: 5px;   }
  DIV.newsframe div.headline { clear: both; margin: 15px 5px 5px 5px; }
  DIV.newsframe div.headline A { font-family: Cinzel, serif; font-size: 10pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-decoration: none; }
  DIV.newsframe div.type { text-align: center; margin: -23px auto -10px auto; background-color: #226633; padding: 5px 10px; display: block; width: 130px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
  DIV.newsframe div.type A { font-family: Caudex, Serif; font-size: 7pt; color: #FFFFFF; font-weight: bold; text-decoration: none; }

  div.gameframe { background-position: center center; background-size: cover; position: relative; cursor: pointer; }
  DIV.gameframe div.gamebox  { background-color: rgba(0,0,0,0.8); text-align: center; text-wrap: balance; bottom: 10px;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; left:0; right: 0; margin: 0px auto; position: absolute; width: 80%; padding: 5px;   }
  DIV.gameframe div.headline { clear: both; margin: 5px 5px 5px 5px; }
  DIV.gameframe div.headline A { font-family: Cinzel, serif; font-size: 10pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-decoration: none; }

 

 
.box { margin: 5px; padding: 0px; }
.row { clear: both; }
#divfade, .divfade, .divider, .sectionbreak { 
  clear: both;
  display:block;
  height:1px;
  background: rgba(255,255,255,.1);
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(204,204,204,.3)), color-stop(100%, rgba(255,255,255,0)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.3) 50%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.3) 50%, rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.3) 50%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(204,204,204,.3) 50%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000', GradientType=1 );
  margin: 40px 0px;
}

hr { 
    margin: 25px 0px 0px 0px;
    height: 1px;
    border: 0;
  background: rgba(255,255,255,.1);
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(204,204,204,.5)), color-stop(100%, rgba(255,255,255,0)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.5) 50%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.5) 50%, rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.5) 50%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(204,204,204,.5) 50%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000', GradientType=1 );

}

DIV.navsection { text-transform: uppercase; line-height: 25px; font-size: 16px; background-color: rgba(0,110,10,0.2); color: #FFFFFF; font-weight: bold; padding: 10px 10px; text-align: center; }

SECTION {  clear: both; padding: 20px 0px; margin: 0px; display: block; }

P.subheader {
  text-align: center;
  color: #888888;
  font-family: Caudex, Serif;
}


h3  {
  font-family: Caudex, Serif;
  font-weight: normal;
  font-size: 18pt;
  text-align: justify;
  color: #158443;
  margin: 25px 0px 10px 0px;
}


h2.header  {
  font-family: Cinzel, Serif;
  font-weight: normal;
  font-size: 20pt;
   clear: both;
  line-height: 0.4;
  text-align: center;
  border: none;
  color: #888888;
  padding: 10px 0px 10px 0px;
}
h2.header span {
  display: inline-block;
  position: relative;
}


@media screen and (max-width: 768px) { /* MOBILE */
  h2.header span:before,
  h2.header span:after {
    content: "";
    position: absolute;
    height: 3px;
    border-bottom: 1px solid #AAAAAA;
    border-top: 1px solid #AAAAAA;
    top: 0;
    width: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1399px) {  /* TABLET */
  h2.header span:before,
  h2.header span:after {
    content: "";
    position: absolute;
    height: 3px;
    border-bottom: 1px solid #AAAAAA;
    border-top: 1px solid #AAAAAA;
    top: 0;
    width: 50px;
  }
}
@media screen and (min-width: 1400px) {  /* DESKTOP */
  h2.header span:before,
  h2.header span:after {
    content: "";
    position: absolute;
    height: 3px;
    border-bottom: 1px solid #AAAAAA;
    border-top: 1px solid #AAAAAA;
    top: 0;
    width: 75px;
  }
}


h2.header span:before {
  right: 100%;
  margin-right: 15px;
}
h2.header span:after {
  left: 100%;
  margin-left: 15px;
}



/* Caudex||Lora|Open+Sans|Raleway */
h2.secheader  {
  font-size: 14pt;
  font-family: Cinzel, Serif;
   clear: both;
  line-height: 0.4;
  text-align: center;
  border: none;
  color: #006E0A;
  padding: 5px 0px 5px 0px;
}
h2.secheader span {
  display: inline-block;
  position: relative;
}


@media screen and (max-width: 768px) { /* MOBILE */
  h2.secheader span:before,
  h2.secheader span:after {
    content: "";
    position: absolute;
    height: 3px;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    top: 0;
    width: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1399px) {  /* TABLET */
  h2.secheader span:before,
  h2.secheader span:after {
    content: "";
    position: absolute;
    height: 3px;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    top: 0;
    width: 50px;
  }
}
@media screen and (min-width: 1400px) {  /* DESKTOP */
  h2.secheader span:before,
  h2.secheader span:after {
    content: "";
    position: absolute;
    height: 3px;
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    top: 0;
    width: 75px;
  }
}

h2.secheader span:before {
  right: 100%;
  margin-right: 15px;
}
h2.secheader span:after {
  left: 100%;
  margin-left: 15px;
}

UL.toc { margin: 10px 20px; padding: 0px;list-style: none;  }
UL.toc LI { margin: 0px 0px 5px 10px; text-align: left; text-decoration: none; line-height: 125%; padding: 5px 10px;  }
UL.toc LI::before { content: "»"; color: #006E0A; }
UL.toc LI A { font-family: Caudex, Serif; font-size: 12pt; color: #000000; text-decoration: none;  }
UL LI.features A { font-family: Caudex, Serif; font-size: 12pt; color: #000000; text-decoration: none;  }

.dark h3 { margin: 0px; padding: 0px; color: #AAAAAA; text-transform: uppercase; font-family: Lora, Serif; font-size: 14pt; text-align: center }
h4 { margin: 0px; padding: 0px; color: #888; text-transform: uppercase; font-family: Lora, Serif; font-size: 10pt; }

SECTION.dark { clear: both; background-color: #222222; padding: 20px 0px; }
SECTION.dark h2.header { color: #FFFFFF; }
SECTION.dark h2.header span:before,
SECTION.dark h2.header span:after { border-bottom: 1px solid #666666; border-top: 1px solid #666666; }

SECTION.green { clear: both; background-color: #228855; padding: 20px 0px; }
SECTION.green h2.header { color: #FFFFFF; }
SECTION.green h2.header span:before,
SECTION.green h2.header span:after { border-bottom: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; }

DIV.fixedbg { clear: both; padding: 20px 0px; }
DIV.fixedbg h2.header { color: #FFFFFF; text-shadow: 1px 1px 3px #000000;}
DIV.fixedbg h2.header span:before,
DIV.fixedbg h2.header span:after { border-bottom: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; }

SECTION.light { clear: both; background-color: #F6F6F6; padding: 20px 0px; }
SECTION.light h2.header { color: #AAAAAA; }
SECTION.light h2.header span:before,
SECTION.light h2.header span:after { border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; }

SECTION.medium { clear: both; background-color: #EEEEEE; padding: 20px 0px; }
SECTION.medium h2.header { color: #AAAAAA; }
SECTION.medium h2.header span:before,
SECTION.medium h2.header span:after { border-bottom: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; }

  a.button { font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-align: center; margin: 5px; background-color: #226633; padding: 10px; display: inline-block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #FFFFFF; text-decoration: none;   }
  a.button:hover { font-family: Caudex, Serif; font-size: 10pt; color: #226633; border: 1px solid #226633; text-align: center; margin: 5px; background-color: #FFFFFF; padding: 10px; display: inline-block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; }

  a.twitchbutton { font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-align: center; margin: 5px; background-color: #4C3E7A; padding: 10px; display: inline-block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #FFFFFF; text-decoration: none;   }
  a.twitchbutton:hover { font-family: Caudex, Serif; font-size: 10pt; color: #4C3E7A; border: 1px solid #4C3E7A; text-align: center; margin: 5px; background-color: #FFFFFF; padding: 10px; display: inline-block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none; }

/* LIVESTREAMS */
div.livestream { padding: 10px; clear: both; margin: 0px; }
div.livestream div.art { border: 1px solid #444444; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); background-position: center center; background-size: cover; -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75); min-height: 350px; cursor: pointer; }
div.livestream div.showlogo { width: 100%; text-align: center; min-height: 75px; display: block; }
div.livestream div.art div.showspacer { width: 100%; text-align: center; min-height: 250px; display: block;  }
div.livestream div.art div.gamelogo { width: 100%; text-align: center; min-height: 100px; display: block; }
div.livestream div.art div.gamelogo A { font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-align: center; text-decoration: none; text-shadow: 1px 1px 2px rgba(0,0,0,1); }
div.livestream div.episodehead { font-family: Caudex, Serif; font-size: 11pt; color: #FFFFFF; text-align: center; text-decoration: none; text-shadow: 1px 1px 2px rgba(0,0,0,1); margin-bottom: 5px; }


div.livestream div.datetime {  font-family: Caudex, Serif; font-size: 11pt; color: #FFFFFF; text-align: center; padding: 10px; text-shadow: 1px 1px 2px rgba(0,0,0,1);}
div.contentframe { max-width: 1800px; margin: 40px auto; clear: both; padding: 0px 10px; }

/* LISTS */
ol.toplist { margin: 10px 10px;}
ol.toplist LI { font-family: Caudex, Serif; font-size: 12pt; color: #888888; text-decoration: none; line-height: 125%; padding: 10px; }
ol.toplist LI:first-child { font-family: Caudex, Serif; font-size: 14pt; color: #000000; font-weight: bold; text-decoration: none; line-height: 125%; padding: 10px; }
ol.toplist LI A { color: #226633; text-decoration: none; }

ul.fancylist { margin: 10px 10px; text-align: left; list-style: none; }
ul.fancylist LI { border-top: 1px solid #EEEEEE; font-family: Caudex, Serif; font-size: 10pt; color: #888888; text-decoration: none; line-height: 125%; padding: 5px 10px; text-align: left; }
ul.fancylist LI A { color: #226633; text-decoration: none; }
ul.fancylist LI::before { 
    content: "»"; color: #AAAAAA;
}

UL.browselist { margin: 0px 0px 20px 0px; padding: 0px; list-style: none; text-align: center }
UL.browselist LI { vertical-align: middle; margin: 0px; padding: 0px 5px; display: inline-block; line-height: 12pt; }
UL.browselist LI A { font-size: 10pt; text-decoration: none; }
UL.browselist LI A.s { font-size: 12pt; font-weight: bold; text-decoration: none; }


ul.gamelist { margin: 10px 0px; text-align: left; list-style: none; }
ul.gamelist LI {  display: inline-block; border-top: 1px solid #EEEEEE; font-family: Caudex, Serif; font-size: 1em; color: #888888; text-decoration: none; line-height: 125%; padding: 5px 10px; margin: 0px; text-align: left; }
ul.gamelist LI A { color: #226633; text-decoration: none; }
ul.gamelist LI::before { content: "»"; color: #AAAAAA; }

@media screen and (max-width: 768px) { /* MOBILE */
  ul.gamelist LI {  width: 90%; }
  ul.gamelist LI:nth-child(14n):after {
    content: ' ';
    display: block;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1399px) {  /* TABLET */
  ul.gamelist LI {  width: 21%; }
}
@media screen and (min-width: 1400px) {  /* DESKTOP */
  ul.gamelist LI {  width: 18%; }
}

/* FOOTER SETTINGS */
DIV#footer {
     background-color: #111111;
     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#222222), to(#111111));
     background-image: -webkit-linear-gradient(top, #222222, #111111);
     background-image: -moz-linear-gradient(top, #222222, #111111);
     background-image: -ms-linear-gradient(top, #222222, #111111);
     background-image: -o-linear-gradient(top, #222222, #111111);
     min-height: 250px;
     color: #AAAAAA;
     padding-top: 20px;
     padding-bottom: 20px;
     margin-top: 20px;
}
DIV#footer DIV#footmenu {
  padding: 0px;
       max-width: 1200px;
       margin: 0px auto;
}

DIV#disclaimer {
  clear: both;
  display: block;
  text-align: center;
  font-size: 8pt;
  color: #888888;
  line-height: 125%;
  padding-top: 10px;
}
DIV#footer DIV#footmenu DIV#footdesc {
  font-family: Caudex, serif; 
  float: left;
  display: inline-block;
  text-align: justify;
  font-size: 9pt;
  color: #AAAAAA;
  line-height: 125%;
  margin-left: 20px;
}
DIV#footer DIV#footmenu DIV#footdesc B { font-family: Caudex, serif; font-weight: bold; font-size: 12pt; color: #FFFFFF;
  line-height: 125%; }

DIV#footer DIV#footmenu DIV#footdesc A {
 color: #FFFFFF; text-decoration: none; font-size: 9pt;
}

  
DIV#footer DIV#footmenu DIV#footitem {
  text-align: left;
  float: left;
  display: inline-block;
  margin-left: 10px;
  border-left: 1px solid #444444;
  padding-left: 10px;
  min-height: 200px;
}
DIV#footer DIV#footmenu DIV#footitem A {
 color: #FFFFFF; text-decoration: none; font-family: Caudex, serif; font-weight: bold; font-size: 12pt;
}
DIV#footer DIV#footmenu DIV#footitem UL {
   list-style: none; padding: 0px; margin: 5px 0px 0px 5px;
}
DIV#footer DIV#footmenu DIV#footitem UL LI {
    padding: 0px; margin: 0px; line-height: 9pt; margin-bottom: 5px;
}
DIV#footer DIV#footmenu DIV#footitem UL LI A {
    font-family: 'Open Sans', sans-serif; 
    font-weight: normal; 
    font-size: 9pt; 
    color: #888888;
}
DIV#footer DIV#footmenu DIV#footitem UL LI A:hover { color: #FFFFFF;}

@media screen and (max-width: 598px) { 
    DIV#footer DIV#footmenu DIV#footdesc { width: 100%; border: none; margin: 10px; min-height: 50px; height: auto; }
    DIV#footer DIV#footmenu DIV#footitem { width: 100%; border: none; margin: 10px; min-height: 50px; height: auto; }
}
@media screen and (min-width: 598px) { 
    DIV#footer DIV#footmenu DIV#footdesc { width: 20%; }
    DIV#footer DIV#footmenu DIV#footitem { width: 13%; }
}
@media screen and (min-width: 886px) {
    DIV#footer DIV#footmenu DIV#footdesc { width: 20%; }
    DIV#footer DIV#footmenu DIV#footitem { width: 13%; }
}


/* MISC SETTING */
UL.profilenav { margin: 0px; padding: 0px; list-style-type: none; }
UL.profilenav LI { line-height: 25px; background-color: #333333; border-bottom: 1px solid #444444; padding: 10px 20px;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  text-align: left; }
UL.profilenav LI:hover { background-color: #33AA55;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    transition: all .2s ease; }
UL.profilenav LI.s { background-color: #33AA55; }
UL.profilenav LI A { font-size: 12pt; font-family: Caudex, Verdana, geneva, futura ; color: #FFFFFF; text-decoration: none; font-weight: bold; }
UL.profilenav LI.s A { font-size: 12pt; font-family: Caudex, Verdana, geneva, futura ; color: #FFFFFF; text-decoration: none; font-weight: bold; }
UL.profilenav LI:last-child { border-bottom: none; -webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; }

UL.profilenav LI:first-child {
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

UL.profilenav LI.header {
  background-color: #106232;
  padding: 10px 15px;
  font-family: Caudex, Verdana, geneva, futura !important;
  font-size: 12pt !important;
  text-decoration: none !important;
  font-weight: bold !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid #555555;
  text-align: center;

}

div.privacy {
  padding: 10px;
}

DIV.privacy A {  color: #33AA55; text-decoration: none; }

DIV.privacy > H1 {
  font-family: Lato, 'Open Sans', Sans-Serif; color: #33AA55; font-size: 24pt; line-height: 125%; padding-bottom: 2px; margin: 0px 0px 10px 0px;
}
DIV.privacy > H2 {
  font-family: Lato, 'Open Sans', Sans-Serif; color: #000000; font-size: 20pt; padding-bottom: 2px; margin: 40px 0px 10px 0px; text-transform: uppercase;
}
DIV.privacy > H3 {
  font-family: Lato, 'Open Sans', Sans-Serif; color: #666666; font-size: 16pt; padding-bottom: 2px; margin: 40px 0px 10px 0px; font-weight: bold; text-transform: uppercase;
}
DIV.privacy > H4 {
  font-family: Lato, 'Open Sans', Sans-Serif; color: #888888; font-size: 12pt; padding-bottom: 2px; margin: 20px 0px 10px 0px; font-weight: bold; text-transform: uppercase;
}

DIV.privacy > P, 
DIV.privacy > UL > LI {
    font-family: "Open Sans", Arial, Helvetica, Futura, Sans-Serif;
    font-size: 12pt; color: #111111; line-height: 150%;
}
DIV.privacy > UL > LI {
  margin-bottom: 20px;
}
DIV.privacy > TABLE#data  TD {
    font-family: "Open Sans", Arial, Helvetica, Futura, Sans-Serif;
    font-size: 12pt; color: #111111; line-height: 150%; padding: 10px;
}

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}


#divfade, #divide { 
  display:block;
  height:1px;
  background: rgba(255,255,255,.1);
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(204,204,204,.3)), color-stop(100%, rgba(255,255,255,0)));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.3) 50%, rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.3) 50%, rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(204,204,204,.3) 50%, rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(204,204,204,.3) 50%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000', GradientType=1 );
  margin: 5px 0px;
}

/* pagination */
.pagination { text-align: center; margin-top: 20px; }
.pagination A { font-size: 10pt; font-family: Caudex, Serif; border: 1px solid #DDDDDD; background-color: #F6F6F6; text-decoration: none; color: #222222; padding: 5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.pagination A.s { font-size: 12pt; font-family: Caudex, Serif; border: 1px solid #008833; background-color: #22AA55; text-decoration: none; color: #FFFFFF; padding: 5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-weight: bold; }

/* ARTICLE FORMAT */
.introart { background-position: center center; background-size: cover; background-attachment: fixed; z-index: 0; }
.gamebg { background-position: center center; background-size: cover;  }
.fixedbg { background-position: center center; background-size: cover; z-index: 0; background-attachment: fixed; }

article { text-align: justify; max-width: 900px; margin: 0px auto; }
article P, article LI { margin: 0px 0px 1em 0px; padding: 0px; line-height: 150%; }
article div.type { font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-align: center; margin: -25px auto 20px auto; background-color: #226633; padding: 10px; display: block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 99; }

article p.byline { text-align: center; font-size: .8em; color: #888888; font-family: Caudex, Serif; margin-bottom: 40px; }
article p.byline A { text-align: center; color: #666666; font-family: Caudex, Serif; text-decoration: none; }

  div#footnote, div#footnote > A {
    font-size: 8pt; color: #AAAAAA;
  }
IMG.biophoto { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }
IMG.genericphoto { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #22AA55; }


A.biolink { text-align: center; color: #666666; font-family: Caudex, Serif; text-decoration: none; font-size: 10pt; padding: 10px 0px; }
A.iconlink { text-align: center; color: #666666; font-family: Caudex, Serif; text-decoration: none; font-size: 10pt; padding: 10px 0px; }

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin-bottom: 10px; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

UL.taglist { margin: 0px 0px 10px 0px; padding: 0px; list-style: none; }
UL.taglist LI { margin: 2px 5px 2px 0px; padding: 0px; display: inline-block; font-size: 9pt; text-decoration: none; }
UL.taglist LI A { font-size: 9pt; text-decoration: none; }

UL.storelist { margin: 5px 0px; padding: 0px; list-style: none; }
UL.storelist LI { margin: 0px; padding: 5px; display: inline-block; font-size: 9pt; text-decoration: none;   }
UL.storelist LI A { color: #666666; font-size: 9pt; text-decoration: none; }
UL.storelist LI:hover A { color: #33AA55; }

UL.resourcelist { margin: 5px 0px 10px 0px; padding: 0px; list-style: none; }
UL.resourcelist LI { margin: 2px 5px 2px 0px; padding: 5px; display: inline-block; font-size: 12pt; text-decoration: none; background-color: #EEEEEE; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #E6E6E6; min-width: 24px; min-height: 24px; text-align: center; line-height: 24px; }
UL.resourcelist LI:hover { margin: 2px 5px 2px 0px; padding: 5px; display: inline-block; font-size: 12pt; text-decoration: none; background-color: #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #33AA55;   }
UL.resourcelist LI A { color: #666666; font-size: 12pt; text-decoration: none; }
UL.resourcelist LI:hover A { color: #33AA55; }


UL.social { margin: 0px; padding: 0px; list-style: none; }
UL.social LI { margin: 0px 10px 5px 0px; padding: 0px; display: inline-block; }
UL.social LI A I { font-size: 12pt; text-decoration: none; color: #AAAAAA; }
UL.social LI A:hover I { font-size: 12pt; text-decoration: none; color: #FFFFFF; }

div.videotitle { text-align: center; padding: 5px; height: 40px; }
div.videotitle A { font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-decoration: none;  }

div.videotitle_dark { text-align: center; padding: 5px; height: 40px; }
div.videotitle_dark A { font-family: Caudex, Serif; font-size: 10pt; color: #222222; text-decoration: none;  }

/* FANCY FORMS */
FORM#fncy {
  
}

FORM#fncy input[type=text], FORM#fncy input[type=password], textarea {
  font-family: Caudex, Serif; font-size: 1em;
  background-color: rgba(255,255,255,.2);
  color: #222222;
  width: 100%;
  padding: 10px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.3);

  box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;
  -moz-box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;
  -webkit-box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;
}

FORM#fncy input[type=text]:focus, FORM#fncy input[type=password]:focus, textarea:focus {
  background-color: rgba(17, 255, 33, 0.2);
  color: #222222;
  border: 1px solid rgba(17, 255, 33,.3);
}


FORM#fncy input[type=submit] {
  font-family: Caudex, Serif; font-size: 10pt; color: #FFFFFF; text-align: center; margin: 5px; background-color: #226633; padding: 10px; display: inline-block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #FFFFFF; text-decoration: none;
}
FORM#fncy input[type=submit]:hover {
  font-family: Caudex, Serif; font-size: 10pt; color: #226633; border: 1px solid #226633; text-align: center; margin: 5px; background-color: #FFFFFF; padding: 10px; display: inline-block; width: 200px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-decoration: none;
}


FORM#fncy label {position:relative; }
FORM#fncy label:after { content:'<>'; font: 10pt "Consolas", monospace; color:#888888; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); right:8px; top:0px; padding:0 0 2px; border-bottom:1px solid #888888; position:absolute; pointer-events:none; }
FORM#fncy label:before { content:''; right:6px; top:0px; width:16px; height:16px; background:#FFFFFF; position:absolute; pointer-events:none; display:block; }
FORM#fncy SELECT { font-family: Caudex, Serif; font-size: 1em; 
  padding: 10px 10px; border: 1px solid rgba(255,255,255,.3);
  box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;
  -moz-box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;
  -webkit-box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;  }

A.issuelink { text-decoration: none; color: #000000; text-align: center; font-size: 9pt; }

/* LIVESTREAMS */
.streamframe img { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;  }

TABLE#fancy {
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(75,75,75, 0.3)), to(rgba(25,25,25,0.3)));
   background-image: -webkit-linear-gradient(top, rgba(75,75,75, 0.3), rgba(25,25,25,0.3));
   background-image: -moz-linear-gradient(top, rgba(75,75,75, 0.3), rgba(25,25,25,0.3));
   background-image: -ms-linear-gradient(top, rgba(75,75,75, 0.3), rgba(25,25,25,0.3));
   background-image: -o-linear-gradient(top, rgba(75,75,75, 0.3), rgba(25,25,25,0.3));
   border: 1px solid #EEEEEE !important;
   -webkit-border-radius: 5px !important;
   -moz-border-radius: 5px !important;
   border-radius: 5px !important;
   margin: 10px 0px;
   width: 100%;
}
TABLE#fancy TR TH {
  background-color: rgba(0,50,0, 0.5);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,75,0, 0.5)), to(rgba(0,25,0,0.5)));
  background-image: -webkit-linear-gradient(top, rgba(0,75,0, 0.5), rgba(0,25,0,0.5));
  background-image: -moz-linear-gradient(top, rgba(0,75,0, 0.5), rgba(0,25,0,0.5));
  background-image: -ms-linear-gradient(top, rgba(0,75,0, 0.5), rgba(0,25,0,0.5));
  background-image: -o-linear-gradient(top, rgba(0,75,0, 0.5), rgba(0,25,0,0.5));
  padding: 10px 15px;
  font-family: Caudex, Verdana, geneva, futura !important;
  font-size: 10pt !important;
  text-decoration: none !important;
  font-weight: bold !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid #555555;
  text-align: left
}
TABLE#fancy TR TH A {
  font-family: Caudex, Verdana, geneva, futura !important;
  font-size: 10pt !important;
  text-decoration: none !important;
  font-weight: bold !important;
  color: #FFFFFF !important;

}
TABLE#fancy TR TH:first-child {
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}
TABLE#fancy TR TH:last-child {
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
}

TABLE#fancy TR TH#h {
  background-color: rgba(0,0,0, 0.5);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(25,25,25, 0.5)), to(rgba(0,0,0,0.5)));
  background-image: -webkit-linear-gradient(top, rgba(25,25,25, 0.5), rgba(0,0,0,0.5));
  background-image: -moz-linear-gradient(top, rgba(25,25,25, 0.5), rgba(0,0,0,0.5));
  background-image: -ms-linear-gradient(top, rgba(25,25,25, 0.5), rgba(0,0,0,0.5));
  background-image: -o-linear-gradient(top, rgba(25,25,25, 0.5), rgba(0,0,0,0.5));
  padding: 5px 15px;
  font-family: Caudex, Verdana, geneva, futura !important;
  font-size: 10pt !important;
  text-decoration: none !important;
  font-weight: bold !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.8);
  border-top: 1px solid rgba(255,255,255,0.2);
  text-align: center
  -webkit-border-top-right-radius: 0px;
  -moz-border-radius-topright: 0px;
  border-top-right-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  -moz-border-radius-topleft: 0px;
  border-top-left-radius: 0px;
}

TABLE#fancy tr:nth-child(even) { background-color: #FFFFFF;}
TABLE#fancy tr:nth-child(odd) { background-color: #EFEFEF; }

TABLE#fancy TR TD {
  font-family: Caudex, Verdana, geneva, futura !important;
  font-size: 10pt !important;
  text-decoration: none !important;
  font-weight: bold !important;
  color: #000000 !important;
  padding: 5px 10px;
}
TABLE#fancy TR TD#h {
  font-family: Caudex, Verdana, geneva, futura !important;
  font-size: 10pt !important;
  text-decoration: none !important;
  font-weight: bold !important;
  color: #FFFFFF !important;
  background-color: #222222;
  padding: 5px 10px;
}
TABLE#fancy TR TD A {
  font-size: 12pt; color: #006600; font-weight: bold; text-decoration: none;
}


TABLE#fancy TR TD B {
  font-size: 10pt; color: #006600; font-weight: bold;
}
TABLE#fancy TR TD SMALL {
  font-family: Tahoma, Geneva, Futura; font-size: 7pt; color: #666666; font-weight: normal;
}
TABLE#fancy TR TD#h { color: #006600; font-weight: bold; font-size: 10pt; }


h1#headerrow_twitch {
  margin: 20px 0px;
  font-size: 20pt; background-color: #6441A4; padding: 10px 20px; border-bottom: 5px solid #000000;
}
h1#headerrow_twitch A {
  text-decoration: none; color: #FFFFFF;
}
h1#headerrow_twitch A#tbutton {
   border: 1px solid #000000;
   background-color: #FFFFFF;
   font-size: 12pt;
   color: #6441A4;
   font-weight: bold;
   padding: 5px 15px;
   text-decoration: none;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
h1#headerrow_twitch  A#tbutton:hover {
   border: 1px solid #000000;
   background-color: #FFFFFF;
   font-size: 12pt;
   color: #6441A4;
   font-weight: bold;
   padding: 5px 15px;
   text-decoration: none;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
.gamedivider { clear: both; display: box; margin: 0px; padding: 0px; overflow: hidden; z-index: 10; height: auto; width: 100%;  }
.gamedivider IMG { margin: 0px 0px -4px 0px;   z-index: 10; height: auto; width: 100%;
  box-shadow: rgba(0,0,0, 1) 0px 2px 5px;
  -moz-box-shadow: rgba(0,0,0, 1) 0px 2px 5px;
  -webkit-box-shadow: rgba(0,0,0, 1) 0px 2px 5px;  }
div.fixedbg { display: block;  background-position: center center; background-size: cover; z-index: 0; background-attachment: fixed;  }

@media screen and (max-width: 768px) { /* MOBILE */
 div.nextstreambox { background-position: center center; background-size: cover; position: relative; cursor: pointer; height: 350px; }
}
@media only screen and (min-width: 768px) and (max-width: 1399px) {  /* TABLET */
 div.nextstreambox { background-position: center center; background-size: cover; position: relative; cursor: pointer; height: 400px; }
}
@media screen and (min-width: 1400px) {  /* DESKTOP */
 div.nextstreambox { background-position: center center; background-size: cover; position: relative; cursor: pointer; height: 450px; }
}

  DIV.nextstreambox div.streambox  { background-color: rgba(0,0,0,0.8); text-align: center; text-wrap: balance; bottom: 10px;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; left:0; right: 0; margin: 0px auto; position: absolute; width: 300px; padding: 5px;   }
  DIV.nextstreambox div.eventbox  { text-align: center; text-wrap: balance; bottom: 10px;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; left:0; right: 0; margin: 0px auto; position: absolute; width: 500px; padding: 5px;   }
  DIV.nextstreambox div.headline { clear: both; margin: 15px 5px 5px 5px; }
  DIV.nextstreambox div.headline A { font-family: Cinzel, serif; font-size: 12pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-decoration: none; }
  DIV.nextstreambox div.date { font-family: Cinzel, serif; font-size: 10pt; color: #FFFFFF; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); text-decoration: none; text-align: center }
  DIV.nextstreambox div.type { font-family: Caudex, Serif; font-size: 8pt; color: #FFFFFF; text-align: center; margin: -23px auto -10px auto; background-color: #226633; padding: 10px; display: block; width: 150px; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
  DIV.nextstreambox div.streamlogo { top: 10px; left: 0px; right: 0px; margin: 0px auto; position: absolute; width: 300px; }

.streambg { background-position: center center; background-size: cover; z-index: 0; position: relative; }

/* RETURN TO TOP */
#lockbottom { position: fixed !important; bottom: 10px; right: 10px; z-index: 100; }
#to-top { position: fixed; bottom: 10px; right: 10px; width: 40px; height: 40px; line-height: 40px; background: #22AA44; color: #FFFFFF; text-align: center; cursor: pointer; display: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #to-top A { color: #FFFFFF; text-decoration: none; }

.statbox { margin: 40px auto; }

.statbox > div.title { font-family: Cinzel, serif; font-size: 14pt; color: #FFFFFF; text-align: center; }
.statbox > div.counter { font-family: Cinzel, serif; font-size: 30pt; color: #FFFFFF; text-align: center; }

div.type A { color: #FFFFFF; text-decoration: none; }


div.quote {
  margin: 25px 25px;
  font-size: 12pt;
  font-family: Caudex, Georgia, Serif;
  quotes: "\201C""\201D""\2018""\2019";
  text-align: justify;
  padding: 5px 10px;
  line-height: 125%;
  -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
 
}

div.quote P:first-child:before {
  font-family: "Times New Roman", Times, serif;
  content: open-quote;
  display: inline;
  height: 0;
  line-height: 0;
  left: -10px;
  position: relative;
  top: 5px;
  color: #ccc;
  font-size: 2em;
}
div.quote p:last-child:after {
  font-family: "Times New Roman", Times, serif;
  content: close-quote;
  display: inline;
  height: 0;
  line-height: 0;
  left: 10px;
  position: relative;
  top: 10px;
  color: #ccc;
  font-size: 2em;
}


BLOCKQUOTE {
  margin: 25px 25px;
}

BLOCKQUOTE > P {
  font-size: 12pt;
  font-family: Caudex, Georgia, Serif;
  quotes: "\201C""\201D""\2018""\2019";
  text-align: justify;
  padding: 5px 10px;
  line-height: 125%;
  -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

BLOCKQUOTE > P:first-child:before {
  font-family: "Times New Roman", Times, serif;
  content: open-quote;
  display: inline;
  height: 0;
  line-height: 0;
  left: -10px;
  position: relative;
  top: 5px;
  color: #ccc;
  font-size: 2em;
}
BLOCKQUOTE > P:last-child:after {
  font-family: "Times New Roman", Times, serif;
  content: close-quote;
  display: inline;
  height: 0;
  line-height: 0;
  left: 10px;
  position: relative;
  top: 10px;
  color: #ccc;
  font-size: 2em;
}