/* STYLE.CSS */

/*
 Entirely revised by [FH]Remdul, 2014-07-05
 > fixed banner causing seams in modern browsers
 > nicer text styles on news page
 > more spacing between news posts
 > add proper fonts, removed some ancient CSS font stuff
 > cleaned up HTML and added class names in /content/news.php
 > fixed list tags (see /content/news.php)
 
 Small tweaks by [FH]Remdul, 2015-07-04
 > fixed page background repeat on widescreen displays
 > removed dropshadow on non-screenshot images
 > image-of-the-week is now displayed nicer
*/

@font-face {
 font-family: Gunplay;
 src: url(gunplay.ttf);
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
 
	font-size: 12px;
	color: #C0C0C0;
	font-family: Verdana, sans-serif;
}

body {
	background-color: #3A3932;
	background-attachment: fixed;
	background-size: cover;
}

/* main page layout */
div.frame-wrapper {
 width: 950px;
 margin-left: auto;
 margin-right: auto;
 box-shadow: 0px 0px 20px #000;
}

/* speeds up rendering, prevents breakage */
table.frame-head,
table.frame-title,
table.frame-columns,
table.frame-nav-inner {
 border-spacing: 0;
 border-collapse: collapse;
 table-layout: fixed;
 height: 100%;
}

/* prevents space between table rows/cells */
table.frame-head td,
table.frame-title td,
table.frame-columns td,
table.frame-nav-inner td {
 padding: 0;
}

/* prevents phantom spacing between rows with HTML5 */
/* TODO: ideally, the fixed size should be set on td, and images loaded as background */
table.frame-head td > img,
table.frame-title td > img,
table.frame-columns > tr td > img,
table.frame-nav-inner td > img {
 display: block;
 border: 0;
}

/* left and right navbars */
table.frame-nav-inner {
 width: 200px;
 height: 100%;
 border-spacing: 0;
 border-collapse: collapse;
}


font {
 font-size: 8px;
 color: #B7B7B7;
}
table, td, tr, input, textarea {
 font-size: 12px;
 color: #B7B7B7;
}

a {
 text-decoration: none;
 color: #FFF;
}
a:hover {
 text-decoration: underline;
 color: #FFF;
}
a:visited {
 color: #DDD;
}

a.gross:link { font-size: 14px; color: #FFFFFF; }
a.gross:visited { font-size: 14px; color: #FFFFFF; }
a.gross:active { font-size: 14px; color: #FFFFFF; }
a.gross:hover { font-size: 14px; color: #FFFFFF; }
a.black:link {  color: #000000; }
a.black:visited {   color: #000000; }
a.black:active {   color: #000000; }
a.black:hover {  color: #FFFFFF; }
a.red:link {  color: #FF0000; }
a.red:visited {  color: #FF0000; }
a.red:active {  color: #FF0000; }
a.red:hover {  color: #FFC0C0; }
a.green:link {  color: #008000; }
a.green:visited {  color: #008000; }
a.green:active {  color: #008000; }
a.green:hover {  color: #00FF00; }
a.invisible:link { color: #B7B7B7; }
a.invisible:visited { color: #B7B7B7; }
a.invisible:active { color: #B7B7B7; }
a.invisible:hover { color: #FFFFFF; }
a.invissmall:link { font-size: 10px; color: #B7B7B7; }
a.invissmall:visited { font-size: 10px; color: #B7B7B7; }
a.invissmall:active { font-size: 10px; color: #B7B7B7; }
a.invissmall:hover { font-size: 10px; color: #FFFFFF; }
a.redsmall:link { font-size: 10px; color: #FF0000; }
a.redsmall:visited { font-size: 10px; color: #FF0000; }
a.redsmall:active { font-size: 10px; color: #FF0000; }
a.redsmall:hover { font-size: 10px; color: #FFC0C0; }
a.greensmall:link { font-size: 10px; color: #008000; }
a.greensmall:visited { font-size: 10px; color: #008000; }
a.greensmall:active { font-size: 10px; color: #008000; }
a.greensmall:hover { font-size: 10px; color: #00FF00; }

/* left navigation menu area */
div.nav-left {
 /* holds background image */
 padding-top: 45px;
}

/* navigation menu (left) */
div.nav-menu-left {
 position: relative;
 left: 32px;
}

/* navigation (menu) image header */
img.menu-header {
 width: 130px;
 height: 30px;
 border: 0px;
}

/* navigation (menu) image button links */
a.menu-link {
 width: 132px;
 height: 24px;
 border: 0px;
 display: block;
 box-shadow: 0px 0px 6px #000;
}

a.menu-link + img.menu-header {
 margin-top: 10px;
}

/* FH prizes wrapper (ModDB logo etc, see prizes.php) */
div.prizes {
 margin-top: 20px;
 text-align: center;
}

font.supergross { font-size: 18px; font-weight: bold; }
font.gross { font-size: 14px; font-weight: bold; }
font.small { font-size: 10px; }
font.black { font-size: 12px; color: #000000; }
font.red { font-size: 12px; color: #FF0000; }
font.green { font-size: 12px; color: #008000; }
font.redsmall { font-size: 10px; color: #FF0000; }
font.greensmall { font-size: 10px; color: #008000; }
font.boxtitle {
 margin-left:5px;
 font-size: 12px;
 font-weight: bold;
 vertical-align: middle;
 color: #990808;
}

input,
/*select,*/ /* causes problems in FF, ask [FH]Remdul for details */
textarea {
 font-size: 11px;
 /*font-color: #FFF;*/
 background: #000;
 border: 1px solid #C0C0C0;
}
option.white {
 background-color: #000000;
 color:#C0C0C0;
}
input.checkbox {
 background: #000000;
 border: 0px;
 font-size: 11px;
}

.left {
	width:100%;
	text-align:left;
}

/* bugfix by [FH]Remdul, 2014-07-05 */
/* fixes 5+ year old bug: flash header causing layout seams */
object {
 display: block;
}


a.invisible {
 text-decoration: none;
}

/* horizontal seperator lines */
hr {
 height: 0px;
 background: none;
 border: none;
 border-top: 1px solid #444;
}

div.clock {
 height: 15px;
 margin-top: -10px;
 margin-bottom: 10px;
}
div.clock .time {
 width: 100%;
 text-align: right;
}
div.clock .countdown {
 width: 100%;
 text-align: center;
}

/* wraps around the whole inner content frame */
div.pagecontent {
 width: 90%;
 margin: 0px auto 0px auto;
}

/* news item wrapper */
div.newsitem {
 padding: 10px 0px;
 /*border-top: 2px dashed #888;*/
 /*border-bottom: 1px dashed #888;*/
 margin-bottom: 20px;
}

/* news item header */
div.newshead {
}
div.newsitem h1 {
 color: #DEDEDE;
 font-size: 14pt;
 text-align: center;
 text-shadow: 2px 2px 0px #000;
 font-family: Gunplay;
 font-weight: normal;
 text-transform: uppercase;
}
div.newsitem h1 a {
 text-decoration: none;
 color: inherit;
}
div.newsitem a:hover {
 color: inherit;
}
div.newsauthor {
 font-size: 8pt;
 text-align: center;
}
div.newsdate {
 font-size: 8pt;
 text-align: right;
 clear: both;
}

/* retro-bizarro news paragraph voodoo */
div.newscontent p { text-align: justify; }
div.newscontent p[align=left] { text-align: left; }
div.newscontent p[align=right] { text-align: right; }
div.newscontent p[align=center] { text-align: center; }

/* nicer lists */
div.newscontent ul {
 padding-left: 20px;
}

/* news post image thumbnail */
.newscontent img {
 margin: 4px;
}

/* add dropshadow under news thumbnails only */
.newscontent img[src^="screenshots"] {
 box-shadow: 0px 3px 8px #111;
 background-color: #555;
}

/* seperator between two news items */
div.newsseperator {
 /*
 height: 70px;
 border-bottom: 1px dashed #888;
 border-bottom: 1px solid #444;
 */
 margin: 0px 0px;
 height: 6px;
 background-image: url('newsborder.png');
}

/* bottom of news page, with the link to previous news */
div.frontpagefooter {
 margin-top: 20px;
 padding: 20px 0px;
 text-align: center;
 border-top: 1px solid #444;
}

/* download button wrapper */
div.download-button-wrap {
 position: absolute;
 width: 130px;
 height: 120px;
 margin-left: 38px;
 margin-top: -130px;
}
div.download-button-wrap a {
 width: 130px;
 height: 120px;
}
div.download-button-wrap img {
 width: 130px;
 height: 120px;
}


/* news item facebook/twitter link */
.socialstuff {
 display: table;
 width: 90%;
 height: 30px;
}
.socialstuff div {
 display: table-cell;
 padding: 5px 0px;
 vertical-align: bottom;
}
/* smacks down on anti-social crap trying to break out of their elements */
.social-trapper * {
 /*display: block !important;*/
 max-width: 150px !important;
 max-height: 30px !important;
}

/* image of the week */
#image-of-the-week {
 position: relative;
 top: -372px;
 left: 40px;
 width: 128px;
 height: 82px;
 vertical-align: center;
 text-align: center;
 background-color: #333;
}
#image-of-the-week a {
 text-decoration: none;
 display: block;
 width: inherit;
 height: inherit;
 overflow: hidden;
}
#image-of-the-week a img {
 border: 0px;
 height: inherit;
}

/* --- right navback background fixes --- */

img.switchbutton-background-fh1 {
 width: 200px;
 height: 664px;
 border: 0;
}

img.switchbutton-background-fh2 {
 width: 200px;
 height: 230px;
 border: 0;
}

/* --- new navbar-right social media icons --- */

div.navbar-links::before {
 content: 'Follow Us';
 text-transform: uppercase;
 font-family: Gunplay;
 font-size: 13pt;
 color: #DEDEDE;
 text-shadow: 1px 2px 1px #000;
 margin-left: -20px;
 text-align: center;
 height: 30px;
}

div.navbar-links {
 position: relative;
 top: 20px;
 /*text-align: center;*/
 margin-left: 75px;
 width: 100px;
 /*background-color: red;*/
}

div.navbar-links > a {
 width: 50px;
 height: 50px;
 display: block;
 border: 0;
 margin-bottom: 5px;
}
div.navbar-links img {
 /*
 width: 60px;
 height: 60px;
 */
 display: block;
 border: 0;
 width: inherit;
 height: inherit;
}

div.navbar-links img:hover {
 filter: brightness(110%);
}

/* donate button */

div.donate-header {
 text-transform: uppercase;
 font-family: Gunplay;
 font-size: 13pt;
 color: #DEDEDE;
 text-shadow: 1px 2px 1px #000;
 
 margin-top: 50px;
 margin-bottom: -10px;
 display: block;
 width: 100%;
 text-align: center;
 height: 30px;
}

div.navbar-donate > a {
 display: block;
 width: 128px;
 height: 128px;
 border: 0;
 margin-left: auto;
 margin-right: auto;
}
div.navbar-donate img {
 display: block;
 border: 0;
 width: inherit;
 height: inherit;
}

/* END OF FILE */