@charset "utf-8";
/* CSS Document */

@font-face {font-family: futuramedium_font;
	src: url('fonts/FuturaBT-Medium.eot'); /* for IE6 and before */
    src: url('fonts/FuturaBT-Medium.eot?#iefix') format('embedded-opentype'), /* for IE7 and IE8 */
         url('fonts/FuturaBT-Medium.woff') format('woff'), /* for every decent browser (yes, IE9 included) */
         url('fonts/FuturaBT-Medium.otf') format('opentype'), /* for every decent browser but in older versions (FF3, Chrome4, etc.) */
         url('fonts/FuturaBT-Medium.svg') format('svg'); /* for iOS */}
@font-face {font-family: regsans_font;
	src: url('fonts/LeagueGothic-Regular.eot'); /* for IE6 and before */
    src: url('fonts/LeagueGothic-Regular.eot?#iefix') format('embedded-opentype'), /* for IE7 and IE8 */
         url('fonts/LeagueGothic-Regular.woff') format('woff'), /* for every decent browser (yes, IE9 included) */
         url('fonts/LeagueGothic-Regular.otf') format('opentype'), /* for every decent browser but in older versions (FF3, Chrome4, etc.) */
         url('fonts/LeagueGothic-Regular.svg') format('svg'); /* for iOS */}

body {background-color:#00F; margin: 0px; height: 100%;}
a:link {text-decoration: none; color: #FF9;} a:visited {text-decoration: none; color: #FF9;} a:hover {text-decoration: none; color: #FF9;} a:active {text-decoration: none; color: #FF9;}
* {box-sizing: border-box;}
.row::after {content: ""; clear: both; display: table;}

div.wrapper {width: 100%; height: 100%; text-align: center;}
div.reviews {background-color: #009; border-color: #000; border-style: solid; border-width:4px;}
  div.cell {width: 100%; color: #FFF; padding: 3px;}
	div.theimg {padding: 5px; text-align:center;}
	div.thetext {padding: 10px; font-size: 16px;}
	  div.label-title {font-family: "regsans_font", Arial Narrow, sans-serif; font-size: 48px; color: #FFF; text-align: center;}
	  div.label-sys {font-family: Arial, Arial Narrow, sans-serif; font-size: 12px; text-align: center; text-transform: uppercase; font-weight: bold;}
	  div.label-crit {font-family: "futuramedium_font", Arial Narrow, sans-serif; font-size: 18px; text-align: left;}
	  .inlink {color: #FF0;}
	  .abbrev {}
	  div.label-rel {font-family: "futuramedium_font", Tahoma, Geneva, sans-serif; font-size: 14px; font-weight: normal; color: #CCC; text-align: right;}
	  div.label-dev {font-family: "futuramedium_font", Tahoma, Geneva, sans-serif; font-size: 14px; font-weight: normal; color: #CCC; text-align: right;}
	  div.label-pub {font-family: "futuramedium_font", Tahoma, Geneva, sans-serif; font-size: 14px; font-weight: normal; color: #CCC; text-align: right;}
	  div.label-revdate {font-family: "futuramedium_font", Tahoma, Geneva, sans-serif; font-size: 12px; font-weight: normal; color: #CCC; text-align: right;}
	  div.label-first {font-family: "futuramedium_font", Tahoma, Geneva, sans-serif; font-size: 12px; font-weight: normal; color: #CCC; text-align: right;}
	  div.label-comp {font-family: "futuramedium_font", Tahoma, Geneva, sans-serif; font-size: 11px; font-weight: normal; color: #0FF; text-align: right;}
	  div.label-link {font-family: "futuramedium_font", Tahoma, Geneva, sans-serif; font-size: 14px; font-weight: normal; color: #CCC; text-align: right;}
div.thelist {background-color: #777; padding: 15px; font-family: "Arial", Arial Narrow, sans-serif; font-size: 18px; color: #FFF; border-color: #000; border-style: solid; border-width:4px; text-align: left;}
  div.topspacer {height: 0px;}
  div.bottomspacer {height: 100px;}
  div.systems {width: 100%; padding: 10px;}
	.btn-on {background-color: #090; padding: 5px; width: 200px;}
	.btn-off {background-color: #900; padding: 5px; width: 200px;}
	.btnimg {width: 95%;}
	div.textbtn {display: none;}
	.aaa-all-show {color: #FFF; width: 200px; font-weight: bold; font-size: 20px;}
	.aaa-all-hide {color: #FFF; width: 200px; font-weight: bold; font-size: 20px;}
  .listsys {font-size: 12px;}
div.abcrow {width: 100%; height: 100px; position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); display: table;
            background-color: #009; border-color: #000; border-style: solid; border-width: 4px; text-align: center; font-family: Tahoma, Geneva, sans-serif; font-size: 18px; font-weight: bold; color: #F00;}
div.abclist {display: table-cell; vertical-align: top;}

@media only screen and (max-width: 1400px) {
	.btn-on {background-color: #090; padding: 5px; width: 150px;}
	.btn-off {background-color: #900; padding: 5px; width: 150px;}
}

@media only screen and (max-width: 1024px) {
	.btn-on {background-color: #090; padding: 5px; width: 125px;}
	.btn-off {background-color: #900; padding: 5px; width: 125px;}
}

@media only screen and (max-width: 768px) {
	.btn-on {background-color: #090; padding: 5px; width: 110px;}
	.btn-off {background-color: #900; padding: 5px; width: 110px;}
}

@media only screen and (orientation:landscape) {
.aaaimg {width: auto;}
div.reviews {position: fixed; width: 50%; left: 0px; transform: translateX(-0%); height: calc(100% - (0px + 100px)); background-color: #090; overflow-y: auto; -webkit-overflow-scrolling: touch;}
  div.theimg {float: none; width: 100%;}
  .gameimg {max-width: 90%; max-height: 400px;}
  div.thetext {float: none; width: 100%;}
div.thelist {position: fixed; width: 50%; top: 0px; height: calc(100% - (0px + 100px)); left: 50%; transform: translateX(-0%); overflow-y: auto; -webkit-overflow-scrolling: touch;}
}

@media only screen and (orientation:portrait) {
.aaaimg {width: 150px;}
div.reviews {position: fixed; width: 95%; height: 55%; top: 0px; left: 50%; transform: translateX(-50%); overflow-y: auto; -webkit-overflow-scrolling: touch;}
  div.theimg {float: none; width: 100%;}
  .gameimg {max-width: 90%; max-height: 400px;}
  div.thetext {float: none; width: 100%;}
/*  div.theimg {width: 45%; float: left;}
  .gameimg {max-width: 97%; border: 0px;}
  div.thetext {width: 55%; float: left;} */
div.thelist {position: fixed; width: 95%; height: calc(100% - (55% + 100px)); top: 55%; left: 50%; transform: translateX(-50%); overflow-y: auto; -webkit-overflow-scrolling: touch;}
  .aaa-all-show {color: #FFF; width: 100px; font-weight: bold; font-size: 14px;}
  .aaa-all-hide {color: #FFF; width: 100px; font-weight: bold; font-size: 14px;}
}

/* MAIN SEGMENTS
@media only screen and (orientation:landscape) {


}
@media only screen and (orientation:portrait) {
div.reviews {width: 100%; height: 300px; background-color: #900;}
div.list {width: 100%; top: 300px; height: calc(100% - (300px + 60px)); 
          font-size: 14px;}
.btn-on {width: 100px;}
.btn-off {width: 100px;}
.aaa-all-show {width: 150px;}
.aaa-all-hide {width: 150px;}
}




/* LIST OF GAME TITLES 

.listsys {font-size: 14px;}
@media only screen and (orientation:portrait) {
div.topspacer {height: 0px;}
div.bottomspacer {height: 100px;}
}



/* REVIEW WINDOW


  




@media only screen and (orientation:portrait) {
div.theimg {padding: 0px;}
.gameimg {max-width: 100%; max-height: 280px;}
div.label-title {font-size: 18px;}
div.label-sys {font-size: 14px;}
div.label-crit {font-size: 12px;}
div.label-rel {font-size: 11px;}
div.label-dev {font-size: 11px;}
div.label-pub {font-size: 11px;}
div.label-revdate {font-size: 11px;}
div.label-first {font-size: 11px;}
div.label-comp {font-size: 11px;}
div.label-link {font-size: 11px;}
}



@media only screen and (orientation:landscape) {




div.abcrow {width: 90%; height: 50px;}
div.theimg {padding: 0px;}
.gameimg {max-width: 95%; max-height: 120px;}
}

*/