/* POSITIONING
--------------------------------------------------*/
html, body {
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
	background: url(/static/images/body-bg.gif) #0E0E0E;
	margin: 0;
	padding: 0;
	color: #696969;
}
body { height: 100%; }
#container { 
	margin: 0;
	padding: 0;
	min-height: 450px;
}
#gameist {
	margin: 0px auto;
	width: 980px;
}


/* MISC
--------------------------------------------------*/
a { font-weight: bold; color: #B23A15; text-decoration: none; }
a:hover { color: #7E9A94 } 


/* HEADER
--------------------------------------------------*/
#header { background: url(/static/images/header-bg.gif); width: 980px; height: 98px; position: relative }
#logo { display: block; text-indent: -9999px; width: 306px; height: 64px; background: url(/static/images/logo-gameist.png); position: relative; top: 15px; left: -80px; }
#top-leaderboard-ad { width: 728px; height: 90px; position: absolute; top: 2px; right: 5px; background: #000; }


/* NAVIGATION
--------------------------------------------------*/
#nav { 
	background: url(/static/images/nav-bg.gif); 
	width: 980px; 
	height: 48px; 
	margin: 8px 0 8px 0; 
	position: relative 
}
#nav ul#nav-buttons { 
	position: absolute; 
	top: 11px; 
	left: 15px; 
	list-style-type: none; 
}
#nav ul#nav-buttons li { 
	float: left; 
	margin-right: 15px; 
}
#nav ul#nav-buttons li a { 
	background: url(/static/images/nav-link-bg-a.png) no-repeat scroll top right; 
	display: block; 
	color: #FFFFC9; 
	float: left; 
	height: 26px; 
	padding-right: 11px
}
#nav ul#nav-buttons li a span { 
	font-family: Arial; 
	font-size: 14px; 
	line-height: 16px; 
	font-weight: bold; 
	background: url(/static/images/nav-link-bg-span.png) no-repeat; 
	display: block; 
	padding: 5px 0 5px 13px;
}

/* Normal State */
#nav ul#nav-buttons li a { background-position: 100% 0; } 
#nav ul#nav-buttons li a span { background-position: 0 0; }

/* Hover State */
#nav ul#nav-buttons li a:hover { background-position: 100% -27px; }
#nav ul#nav-buttons li a:hover span { background-position: 0 -27px; }

/* Active State */
#nav ul#nav-buttons li a:active { background-position: 100% -54px; }
#nav ul#nav-buttons li a:active span { background-position: 0 -54px; }

/* Selected State */
#nav ul#nav-buttons li a.selected { background-position: 100% -81px; }
#nav ul#nav-buttons li a.selected span { background-position: 0 -81px; }

/* Subscribe */
#subscribe {
	position: absolute;
	top: 18px;
	left: 445px;
}
#subscribe li {
	float: left;
	margin-right: 5px;
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
}
#subscribe li.divider {
	color: #999;
}
#subscribe li a {
	color: gold;
}
#subscribe li a:hover {
	text-decoration: underline;
}

/* Search Form */
#nav form#search { 
	position: absolute; 
	background: url(/static/images/search-bg.gif); 
	width: 295px; 
	height: 32px; 
	top: 8px; 
	right: 10px; 
}
#nav form#search input#search-input { 
	width: 200px; 
	border: none; 
	background: #FFF; 
	margin-top: 5px; 
	margin-left: 2px; 
	padding-left: 5px; 
	height: 20px; 
	font-size: 14px; 
}
#nav form#search button#search-submit { 
	position: absolute; 
	top: 2px; 
	left: 213px; 
}


/* MAIN AREA
--------------------------------------------------*/
#main {
	position: relative;
}


/* CONTENT
--------------------------------------------------*/
#content {
	float: left;
	width: 665px;
	margin-right: 7px;
}
#content .bd { padding: 10px }

/* Text Styles */
#content p { margin: 10px 0 10px 0; }


/* HOMEPAGE
--------------------------------------------------*/
/* Newest */
h3#new-on-gameist { background: url(/static/images/text-new-on-gameist.gif) no-repeat; text-indent: -9999px; border-bottom: 4px solid #FFCC00; padding-bottom: 5px; margin-bottom: 10px }
#newest { margin-bottom: 10px; }
#newest div#featured-big { 
	float: left;
	width: 310px;
	height: 197px;
	border: 3px solid #FFCC00;
	position: relative;
}
#newest div#featured-big a span {
	display: block;
	background: transparent url(/static/images/article-title-overlay.png);
	left: 0;
	bottom: 0;
	margin: 5px;
	padding: 5px 10px 5px 10px;
	position: absolute;
	color: #F2C102;
	font-size: 16px;
	width: 277px;
	overflow: hidden;
}
#newest div#featured-big a:hover span { background: #111 }
#newest ul {
	margin-left: 10px;
	float: left;
	width: 308px; 
}
#newest ul li { width: 308px; height: 46px; background: #FEF5CC; margin-bottom: 6px; display: block; float: left }
#newest ul li div.featured-thumb { float: left; margin-right: 5px }
#newest ul li div.featured-info { float: left; height: 46px; }
#newest ul li div.featured-info a { display: block; background: #FFF; padding: 3px; max-width: 215px; height: 15px; overflow: hidden }
#newest ul li div.featured-info a, #newest ul li div.featured-info span { display: block; margin: 3px; }
#newest ul li div.featured-info span { font-size: 11px }

/* Popular*/
#popular-on-gameist { list-style-type: none; margin-top: 10px; }
#popular-on-gameist li { display: block; float:left; width: 153px; height: 130px; overflow: hidden; margin-right: 8px; margin-bottom: 25px; }
#popular-on-gameist li.fourth { margin-right: 0 }
#popular-on-gameist li.last-row { margin-bottom: 0 }
#popular-on-gameist li a img, #popular-on-gameist li a span { display: block; } 
#popular-on-gameist li a span { margin-top: 3px }

/* News */
#news-container div.newsbox { margin: 30px 0 30px 0 }
#news-container div.newsbox a.news-title { display: block; font-size: 20px; }
#news-container div.newsbox span.news-meta { display: block; margin: 10px 0 15px 0; font-size: 16px; color: #999 }
#news-container div.newsbox div.news-body { line-height: 165%; }
#news-container div.newsbox div.news-body div.news-thumb {
	float: right;
}
#news-container div.newsbox div.news-footer { 
	display: block; 
	text-align: right; 
	margin: 15px 0 0 0; 
	padding: 8px 15px 8px 15px;
	border-top: 1px solid #CDCDCD;
	border-bottom: 1px solid #CDCDCD;
	background: #EFEFEF; 
}
#news-container div.newsbox div.news-footer a {
	margin: 0 0 0 30px;
	text-transform: uppercase;
	font-size: 11px;
}
#news-pagination {
	text-align: center;
}

/* SIDEBAR
--------------------------------------------------*/
#sidebar {
	float: left;
	width: 308px;
}
#sidebar .pod { margin-bottom: 8px; }
#sidebar .last { margin-bottom: 0 }
#sidebar div#side-box-ad { }

/* Medium Bubble */
#sidebar ul.m-bubble { }
#sidebar ul.m-bubble li { display: block; height: 80px; margin: 5px 0 5px 0 }
#sidebar ul.m-bubble li.last { margin-bottom: 0 }
#sidebar ul.m-bubble li div.m-bubble-image { width: 78px; height: 78px; float: left; border: 1px solid #C7C7C7; border-right: none }
#sidebar ul.m-bubble li div.m-bubble-info { width: 220px; height: 80px; background: url(/static/images/sidebar-bg-med.gif) no-repeat; float: left; }
#sidebar ul.m-bubble li div.m-bubble-info a { display: block; margin: 10px 10px 5px 10px }
#sidebar ul.authors li div.m-bubble-info a{ font-size: 16px; background: url(/static/images/icon-user.gif) no-repeat 0 2px; padding-left: 15px }
#sidebar ul.m-bubble li div.m-bubble-info span { display: block; margin: 0 10px 10px 10px}

/* Small Bubble*/
#sidebar ul.s-bubble { }
#sidebar ul.s-bubble li { display: block; height: 64px; margin: 5px 0 5px 0; background: url(/static/images/sidebar-bg-short.gif) no-repeat; position: relative  }
#sidebar ul.s-bubble li.last { margin-bottom: 0 }
#sidebar ul.s-bubble li div.s-bubble-image { width: 78px; height: 64px; position: absolute; top: 10px; left: 10px; }
#sidebar ul.s-bubble li div.s-bubble-info { width: 200px; height: 64px; position: absolute; top: 7px; left: 95px; }
#sidebar ul.s-bubble li div.s-bubble-info a { display: block; height: 18px; overflow: hidden; }
#sidebar ul.s-bubble li div.s-bubble-info span { display: block; font-size: 11px; width: 195px; height: 30px; overflow: hidden; }

/* Bottom Link */
a.sidebar-bottom-link {
	display: block;
	margin: 5px 0 0 0;
	padding: 3px 6px 3px 6px;
	text-align: center;
}


/* FOOTER
--------------------------------------------------*/
#footer {
	border-top: 4px solid #FFCC00;
	margin-top: 10px;
}
#footer div.bd { padding: 5px; margin: 0; }

/* Recent Comments */
#footer div#recent-comments {
	float: left;
	width: 660px;
	margin-right: 5px;
}
#footer div#recent-comments table { width: 100%; }
#footer div#recent-comments table tr.even { background: #FFFFC9 }
#footer div#recent-comments table tr.odd { }
#footer div#recent-comments table tr th, #footer div#recent-comments table tr td { text-align: left; font-weight: normal; }
#footer div#recent-comments table tr th { padding: 8px 8px 8px 25px; }
#footer div#recent-comments table tr td { padding: 8px 8px 8px 5px; text-align: right }
#footer div#recent-comments table tr th a { background: url(/static/images/bullet.gif) no-repeat 0 50%; padding-left: 10px; margin-right: 5px; }
#footer div#recent-comments table tr th em { color: #444; font-size: 11px; }

/* Popular */
#footer div#popular {
	float: left;
	width: 301px;
}
#footer div#popular ul { list-style-type: none }
#footer div#popular ul li { display: block; height: 46px; position: relative; margin: 5px 0 5px 0; }
#footer div#popular ul li div { float: left; height: 46px; }
#footer div#popular ul li div.popular-thumb { width: 76px; }
#footer div#popular ul li div.popular-info { width: 223px; background: #FFFFC9 }
#footer div#popular ul li div.popular-info a, #footer div#popular ul li div.popular-info span { display: block; margin: 3px; }
#footer div#popular ul li div.popular-info a { background: #FFF; padding: 3px; overflow: hidden; height: 15px; }
#footer div#popular ul li div.popular-info span { font-size: 11px; text-align: left }


/* COPYRIGHT
--------------------------------------------------*/
#copyright { margin: 15px 0 15px 0 }
#copyright li { float: left; margin-right: 25px; font-size: 11px }
#copyright li a { color: gold }
#copyright li a:hover { text-decoration: underline }


/* HEADER STYLES
--------------------------------------------------*/
div.section-header { position: relative }
div.section-header a { position: absolute; top: 8px; right: 10px; }
h1, h2 {
	height: 43px;
	background: url(/static/images/heading-tag.jpg) no-repeat scroll top right; 
	display: block;
	padding-right: 9px;
	color: #444;
	font-weight: normal;
}
h1 span, h2 span {
	font-size: 18px; 
	background: url(/static/images/heading-span.jpg) no-repeat; 
	display: block; 
	padding: 4px 0 5px 13px; 
	line-height: 34px;
}
h1.heart b, h2.heart b { background: url(/static/images/icon-popular.gif); width: 19px; height: 17px; display: block; float: left; margin: 13px 8px 0 10px; }
h1.bubble b, h2.bubble b { background: url(/static/images/icon-comment.gif); width: 19px; height: 17px; display: block; float: left; margin: 13px 8px 0 10px; }


/* ARTICLE CONTENT
--------------------------------------------------*/
#article-info { font-size: 11px; border: 1px solid #E2E2E2; background: #EEEEEE; border-left: none; border-right: none; padding: 5px 0 5px 10px; color: #888 }
#article-content { font-size: 12px; line-height: 140%; color: #444 }
#article-content h2 { 
	background: none; 
	margin: 20px 0 0 0; 
	padding: 0; 
	height: auto; 
	font-size: 18px; 
	font-weight: bold 
}
#article-content p { margin: 15px 0 15px 0; }
#article-content img { max-width: 630px; border: 1px solid #CCC; padding: 2px; }
#article-content ol, #article-content ul { margin: 0 0 0 20px; }
#article-content ol { list-style-type: decimal }
#article-content ul { list-style: disc }
#article-content blockquote { 
	margin: 10px 0 10px 0; 
	background: url(/static/images/blockquote.png) no-repeat 15px 0; 
	padding: 3px 55px 10px 55px; 
	background-color: #EFEFEF 
}

/* Comments */
#article-comments { margin-top: 30px }
#comment-form div.form-row { margin: 15px 0 15px 0 }
#comment-form div.form-row label { color: #B84624; font-weight: bold; display: block; margin-bottom: 5px }
#comment-form div.form-row .text-input { 
	padding: 5px; 
	border: 1px solid #CCC; 
	width: 500px; 
	background-color: #FFFFCB;
	font-family: "lucida grande", tahoma, verdana, arial, sans-serif; 
	font-size: 11px;
	color: #555; 
}
#comment-form div.form-row textarea { height: 100px; }
#comments-list div.comment { margin: 15px 0 15px 0; border: 1px solid #EFEFEF; padding: 10px 20px 10px 20px; line-height: 150% }
#comments-list div.author_comment { background: #F0FFDF; }
#comments-list div.comment p { margin: 5px 0 5px 0 }
#comments-list div.comment p.comment-info {}
#comments-list div.comment a.author { background: url(/static/images/icon-user.gif) no-repeat 0 2px; padding-left: 15px }
#comments-list div.comment strong { background: url(/static/images/icon-user.gif) no-repeat 0 2px; padding-left: 15px }
#comments-list div.comment span.time { margin-left: 5px; font-size: 10px; color: #888 }

/* Digg */
#digg-it { float: right; padding: 0 0 10px 10px; }


/* ARTICLES HOME
--------------------------------------------------*/
#articles-list li {
	width: 635px;
	margin: 20px 0 20px 0;
	padding-bottom: 20px;
	border-bottom: 1px solid #CCC;
	position: relative;
}
#articles-list li span {
	position: absolute;
	top: 0;
	right: 0;
	color: #888;
	font-size: 11px;
}
#articles-list li a.article-title {
	font-size: 20px;
	display: block;
	margin-bottom: 10px;
}
#articles-list li a.article-image { 
	display: block;
	width: 75px;
	height: 46px;
	border: 3px solid #FFCC00;
	position: relative;
	float: right;
}
#articles-list li p { 
	float: left;
	width: 540px;
	height: 50px;
	overflow: hidden;
	margin: 0 10px 0 0;
}


/* AUTHORS HOME
--------------------------------------------------*/
#authors-list li {
	width: 635px;
	margin: 20px 0 20px 0;
	padding-bottom: 20px;
	border-bottom: 1px solid #CCC;
	position: relative;
}
#authors-list li a.author-image {
	float: left; 
	display: block;
	width: 78px;
	height: 77px;
	border: 3px solid #FFCC00;
	margin-right: 10px;
}
#authors-list li div.author-info {
	width: 540px;
	height: 82px;
	overflow: hidden;
}
#authors-list li a.author-name {
	display: block;
	font-size: 16px;
	margin-bottom: 5px;
}


/* BUTTONS
--------------------------------------------------*/
a.btn, button.btn { display: block; border: none; padding: 0px; background: none; color: #fff; font-size: 14px; font-weight: bold; }
button.btn { position: relative; left: -4px; cursor: pointer; }
a.btn span, button.btn span { display: block; background: url(/static/images/button-bg.png) no-repeat; float: left; padding: 4px 0 6px 16px; font-family: Arial; line-height: 16px; }
a.btn span.icon, button.btn span.icon { float: left; right: 0; display: block; padding: 0 0 0 4px; width: 10px; height: 26px; background: url(/static/images/button-bg.png) no-repeat; }
a.btn span, button.btn span { background-position: 0 0; }
a.btn span.icon, button.btn span.icon { background-position: 100% 0; }


/* PODS (ROUNDED CORNERS)
--------------------------------------------------*/
.pod {
	position: relative;
	background: #fff;
}
.pod .hd {
	padding: 7px 5px 0;
	position: relative;
}
.pod .hd .tl {
	position: absolute;
	top: 0;
	left: 0px;
	width: 6px;
	height: 6px;
	background: url(/static/images/rounded-corners.png) 0% 0px no-repeat;
	overflow: hidden;
}
.pod .hd .tr {
	position: absolute;
	top: 0;
	right: 0px;
	width: 6px;
	height: 6px;
	background: url(/static/images/rounded-corners.png) 100% 0px no-repeat;
	overflow: hidden;
}
.pod .bd {
	margin: 0 4px;
	font-size: 12px;
	line-height: 1.3em;
}
.pod .ft {
	position: relative;
	margin: 0px 0px 0px;
	padding: 0px 5px 7px 0;
}
.pod .ft .bl {
	position: absolute;
	bottom: 0;
	left: 0px;
	width: 6px;
	height: 6px;
	background: url(/static/images/rounded-corners.png) 0% -6px no-repeat;
	overflow: hidden;
}
.pod .ft .br {
	position: absolute;
	bottom: 0;
	right: 0px;
	width: 6px;
	height: 6px;
	background: url(/static/images/rounded-corners.png) 100% -6px no-repeat;
	overflow: hidden;
}
.pod .hd .tl, .pod .hd .tr, .pod .ft .bl, .pod .ft .br { background-color: #000 }