/*
Theme Name: ScroobyOnline
Theme URI: http://www.scroobyonline.co.uk/
Description: The 2010 theme for ScroobyOnline.
Author: Scrooby
Author URI: http://www.scroobyonline.co.uk/
Version: 3.0
Tags: black, grey, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments
*/

/* Global */

* {border: 0;}

body {
	background: #FFF;
	background-position: top center;
	color: #FFF; 
	margin: 0; 
	padding: 0; 
	text-align: center; 
	font-family: Calibri, Arial, Helvetica, sans-serif;
	font-size: 62.5%;}
	
h1, h2, h3, h4 {
	padding: 0;
	margin: 0;
	font-weight: normal;}

p {
	font-size: 1.4em;
	margin: 0;
	padding: 0;}

ol {
	font-size: 1.2em;}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 1.4em;}
	
textarea {font-family: Calibri, Arial, Helvetica, sans-serif;}
	
img {vertical-align: bottom;}

a, a:link, a:visited {text-decoration: none; color: #2e3239;}

/* Structure */

#siteWrapper {
	width: 908px;
	margin: 0 auto; 
	padding: 0;}
	
#siteHeader {
	width: 100%;
	height: 108px;
	background: url('graphics/header-background.png') no-repeat bottom left;}
	
#siteContent {
	width: 100%;
	text-align: left;
	background: url('graphics/content-background.png') repeat-y;
	float: left;}
	
	#siteLeftContent {
		width: 580px;
		float: left;
		padding: 0 12px;
		color: #2e3239;}
		
	#siteRightContent {
		width: 304px;
		float: right;}

#siteFooter {
	clear: both;
	width: 100%;
	height: 90px;
	padding: 10px 0;
	background: url('graphics/footer-background.png') no-repeat top left;}
	
/* Header */

#siteHeader h1 {
	width: 300px;
	height: 42px;
	float: left;
	margin-top: 26px;
	overflow: hidden;
	position: relative;
	background: url('graphics/site-logo.png') no-repeat;}
	
#siteHeader h1 span {
	width: 300px;
	height: 0;
	float: left;
	padding-top: 42px;
	overflow: hidden;
	background: url('graphics/site-logo.png') 0px -42px no-repeat;
	position: absolute;
	left: 0;
	top: 0;
	display: none;}
	
#siteHeader ul {
	padding-top: 30px;
	float: right;}
#siteHeader ul li {
	margin-left: 10px;
	float: left;}
#siteHeader ul li a {
	float: left;
	height: 0;
	padding-top: 30px;
	overflow: hidden;
	background-repeat: no-repeat;}
#siteHeader ul li a span {
	height: 0;
	padding-top: 30px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	display: none;}	
	
#siteHeader ul li a#linkHome {width: 70px; background: url('graphics/navigation-home.png'); position: relative;}
#siteHeader ul li a#linkNews {width: 70px; background: url('graphics/navigation-news.png'); position: relative;}
#siteHeader ul li a#linkReviews {width: 85px; background: url('graphics/navigation-reviews.png'); position: relative;}
#siteHeader ul li a#linkRatings {width: 85px; background: url('graphics/navigation-ratings.png'); position: relative;}

#siteHeader ul li a#linkHome span {width: 70px; background: url('graphics/navigation-home.png') no-repeat 0px -30px;}
#siteHeader ul li a#linkNews span {width: 70px; background: url('graphics/navigation-news.png') no-repeat 0px -30px;}
#siteHeader ul li a#linkReviews span {width: 85px; background: url('graphics/navigation-reviews.png') no-repeat 0px -30px;}
#siteHeader ul li a#linkRatings span {width: 85px; background: url('graphics/navigation-ratings.png') no-repeat 0px -30px;}

.home #siteHeader ul li a#linkHome {background-position: 0px -30px;}
.category-video-game-news #siteHeader ul li a#linkNews {background-position: 0px -30px;}
.category-video-game-reviews #siteHeader ul li a#linkReviews {background-position: 0px -30px;}
.page-id-880 #siteHeader ul li a#linkRatings {background-position: 0px -30px;}
	
/* Left Content */

	/* BOF: Featured Slider */
	
	#featuredContainer {
		position: relative;}
	
	#featuredPostTag {
		width: 130px;
		height: 100px;
		position: absolute;
		top: 0;
		right: 0;
		background: url('graphics/featured-post-tag.png') no-repeat;
		z-index: 180;}
	
	#featuredPostCover {
		width: 580px;
		height: 280px;
		position: absolute;
		top: 0;
		left: 0;
		background: url('graphics/featured-post-cover.png') no-repeat;}
		
	#carouselNav {
		position: absolute;
		bottom: 10px;
		right: 8px;
		z-index: 200;
		height: 16px;}
	
	#carouselNav a, #carouselNav a.activeSlide {
		width: 16px;
		height: 0;
		padding-top: 16px;
		overflow: hidden;
		display: block;
		margin-right: 3px;
		float: left;
		background: url('graphics/carousel-links.png') no-repeat -16px 0;}
		
	#carouselNav a.activeSlide {background-position: 0 0;}
	
	#featuredPost {
		width: 580px;
		height: 280px;
		position: relative;
		overflow: hidden;}
			
		.featuredPostInfo {
			width: 384px;
			height: 100px;
			padding: 5px 8px;
			color: #FFF;
			background: url('graphics/featured-post-info-background.png');
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			position: absolute;
			top: 155px;
			left: 15px;}
		.featuredPostInfo a, #featuredPostInfo h2 {color: #FFF; font-size: 1.4em;}
		.featuredPostInfo p {padding-top: 2px; font-size: 1.2em;}
		.featuredPostInfo #moreLink {
			width: 76px;
			height: 0;
			padding-top: 31px;
			position: absolute;
			right: 6px;
			top: 64px;
			overflow: hidden;
			background: url('graphics/featured-post-button.png') no-repeat;}
			
	/* EOF: Featured Slider */
		
#categoryInfo, #authorInfo {
	padding-bottom: 12px;
	background: url('graphics/category-divider.png') no-repeat bottom left;}	
#categoryInfo h1, #authorInfo h1 {font-style: italic;}
#categoryInfo h1 span, #authorInfo h1 span {font-weight: bold;}
#categoryInfo p, #authorInfo p {padding-top: 8px;}

#authorInfo #author-avatar {padding-left: 10px; float: right;}
	
.page #siteContent h1 {
	font-weight: bold; 
	font-style: italic;
	padding-bottom: 10px;
	background: url('graphics/category-divider.png') no-repeat bottom left;}
.page .entry-content {padding-top: 10px;}
.page .entry-content p {padding-bottom: 10px;}
.page .entry-content .ratings {
	width: 100%;
	font-size: 1.2em;}
.page .entry-content .ratings tr {
	background: url('graphics/category-divider.png') no-repeat bottom left;}
.page .entry-content .ratings td {padding: 5px 0;}

/* Short Post */

.shortPost {
	width: 580px;
	margin-top: 10px;
	padding: 0 0 20px 0;
	position: relative;
	float: left;
	clear: both;}
	
.shortPost .shortPostDate,
#postDetails .postDate {
	width: 52px;
	height: 51px;
	padding: 9px 0 0 0;
	color: #FFF;
	font-weight: bold;
	font-size: 2em;
	text-transform: uppercase;
	text-align: center;
	line-height: 20px;
	background: url('graphics/post-date-background.png') no-repeat;
	position: absolute;
	left: -60px;
	top: 6px;}
.shortPost .shortPostDate span, 
#postDetails .postDate span {font-size: 1.4em;}
	
.shortPost h2 {
	font-size: 2.5em;
	font-weight: normal;
	line-height: 1.1em;}
	
.shortPost p {
	font-size: 1.4em;
	padding-top: 5px;}
	
.shortPost small {
	font-size: 1.2em;
	display: block;}
	
.shortPost p a, .shortPost p a:visited,
.shortPost small a, .shortPost small a:visited{color: #E48E06;}
	
.shortPostLeft {
	float: left;
	padding-top: 10px;
	width: 110px;}

.shortPostRight {
	float: left;
	margin-left: 10px;
	width: 460px;}
	
.shortPost .postCategory a {
	background: #2E3239; 
	color: #FFF;
	clear: both;
	font-size: 1.1em;
	float: left;
	margin: 3px 0 0 0;
	text-align: center;
	padding: 4px 0;
	width: 110px; 
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;}
	
.shortPostImage {
	float: left;
	height: 110px;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 110px;}
	
.shortPostCover {
	width: 110px;
	height: 110px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('graphics/short-post-cover.png') no-repeat;}
			
.shortPostRetweet {
	width: 50px;
	height: 20px;
	float: right;
	margin: 0 0 5px 10px;}
	
.tweetmeme_button {
	position: absolute;
	top: 0;
	right: 0;
	float: right;}
		
/* Pagination */
		
.wp-pagenavi {clear: both; padding-top: 10px;}
.wp-pagenavi span, .wp-pagenavi a {
	padding: 3px 5px; 
	margin-right: 3px;
	border: 1px solid #CFCECE;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;}
.wp-pagenavi a {background: #E2E1E1;}

/* Latest Videos */

#latestVideos {
	width: 560px;
	height: 180px;
	margin-top: 11px;
	padding: 10px;
	background: url('graphics/video-background.png') no-repeat;}
#latestVideos #currentVideo {width: 270px; height: 180px; float: left;}
#latestVideos #currentVideoInfo {width: 260px; height: 120px; padding: 50px 10px 10px; float: right;}
#latestVideos #currentVideoInfo #currentVideoLink {display: block; font-weight: bold; font-size: 1.2em; padding-top: 2px;}
#latestVideos #currentVideoInfo ul {padding-top: 3px;}
#latestVideos #currentVideoInfo ul li {margin-top: 5px; float: left;}
#latestVideos #currentVideoInfo ul li a {
	width: 244px;
	padding: 5px 8px;
	font-size: 0.9em;
	float: left;
	background: #DBDBDB;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;}
	
/* Single Post */
	
#postDetails {
	width: 580px;
	float: left;
	padding-bottom: 12px;
	position: relative;
	background: url('graphics/category-divider.png') no-repeat bottom left;}	
#postDetails #singlePostImage {
	width: 65px;
	height: 65px;
	overflow: hidden;
	float: left;
	position: relative;
	margin-right: 10px;}
#postDetails #singlePostCover {
	width: 65px;
	height: 65px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('graphics/single-post-cover.png') no-repeat;}

#postDetails #postInfo {
	float: left;
	width: 500px;}
#postDetails #postInfo #postTweet {
	float: right;}
#postDetails #postInfo h1 {font-size: 2.5em; font-weight: bold; font-style: italic; line-height: 1em; margin-bottom: 5px;}
#postDetails #postInfo p {font-size: 1.1em; font-style: italic;}
	
#postContent {clear: both;}
#postContent a {font-weight: bold;}
#postContent ul {
	list-style-type: disc;
	margin: 0 0 0 30px;
	font-size: 1.2em;}
#postContent p {
	font-size: 1.4em;
	padding: 6px 0;}
#postContent h2,
#postContent h3 {
	font-size: 2em;
	font-style: italic;
	font-weight: bold;}
#postContent h3 {font-size: 1.6em;}
#postContent blockquote {
	background: url('graphics/block-quotes.png') no-repeat 5px 5px #FFF;
	padding: 5px 0px 5px 40px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;}
	
/* BOF: YouTube Videos */

#postContent .youtube-video {
	width: 480px;
	margin: 0 auto;}

/* EOF: YouTube Videos */

/* BOF: Single Post Details */

#nav-below {width: 100%; float: left; padding: 6px 0; font-size: 1.2em; font-style: italic; font-weight: bold;}
.nav-previous {width: 49%; float: left;}	
.nav-next {width: 49%; float: right; text-align: right;}

.nav-previous a,
.nav-next a {
	background: #FFF; 
	padding: 8px 10px; 
	float: left; 
	border: 1px solid #DFDFDF; 
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;}
.nav-next a {float: right;}

#about_the_author {clear: both;}
#related_posts {padding-top: 10px; clear: both;}

#about_the_author h2,
#related_posts h2 {
	font-style: italic;
	font-size: 2em;
	background: url('graphics/category-divider.png') no-repeat bottom left;
	padding-bottom: 6px;
	margin-bottom: 6px;}
	
#about_the_author_image {
	width: 90px;
	float: left;}

#about_the_author_info {
	width: 480px;
	float: left;}
	
#about_the_author_info h3 {
	font-size: 2em;
	font-weight: bold;
	font-style: italic;}
	
#about_the_author_info p {
	padding: 5px 0;}
	
#about_the_author_info span#authorTwitter {
	font-size: 1.5em;
	font-style: italic;}
	
#about_the_author_info span#authorTwitter a {
	font-weight: bold;}
	
#related_posts ul {
	float: left;
	width: 400px;
	margin-left: 25px;
	padding-top: 5px;
	list-style-type: circle;}
#related_posts ul li {
	padding-bottom: 5px;}
	
#related_posts #related_posts_ads {
	float: right;
	padding: 10px;
	background: #E7E6E6;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;}
	
/* EOF: Single Post Details */
	
/* Post Comments */
	
#postComments {
	clear: both;
	padding-top: 8px;}
#postComments h2 {
	font-size: 2.5em;
	font-weight: bold;
	font-style: italic;}
#postComments p.nocomments {
	padding: 10px 0;}
	
.commentlist {
	list-style: none;
	margin: 0; 
	padding: 0 0 10px;
	float: left;}
	.commentlist,
	.commentlist a:link,
	.commentlist a:visited {
		color: #FFF;}
.commentlist li {
	float: left;
	margin-top: 10px;
	padding: 0px;}
	
.commentlist li .post-comment-arrow {
	width: 46px;
	height: 22px;
	margin-left: 15px;
	background: url('graphics/comment-arrow.png') no-repeat;}
.commentlist li .post-comment {
	width: 560px;
	background: #2E3239;
	padding: 10px;
	float: left;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;}
.commentlist li .comment-author-avatar {
	width: 80px;
	float: left;}
.commentlist li .comment-author-content {
	width: 480px;
	float: left;}
.commentlist li .comment-author-content .comment-meta {font-size: 1.3em; padding: 0; margin: 0;}
.commentlist li .comment-author-content .comment-body {padding: 5px 20px 10px 0; font-size: 0.8em;}
.commentlist li .comment-author-content .comment-date {float: left; padding: 5px 0 0; margin: 0; color: #646669;}
.commentlist li .comment-author-content .reply {float: right;}
.commentlist li .comment-author-content .reply a {padding: 5px 10px; background: #646669; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.commentlist li ul.children {font-size: 1em;}
.commentlist li ul.children li.depth-2 {margin-left: 20px;}
.commentlist li ul.children .post-comment {width: 540px;}
.commentlist li ul.children .comment-author-content {width: 460px;}

.commentlist li ul.children #respond #commentform .comment-col-right {width: 340px;}
.commentlist li ul.children #respond #commentform #comment {width: 302px;}

#respond, #respond a:link, #respond a:visited {color: #2E3239;}
#respond #reply-title {
	font-size: 2.5em;
	font-weight: bold;
	font-style: italic;}
#respond #reply-title small {
	margin-top: 5px;
	float: right;}
	
#respond #commentform .comment-col-left {
	width: 200px;
	float: left;
	font-size: 10px;}
	#respond #commentform .comment-user-details {
		padding-top: 3px;
		font-size: 1.2em;}
	#respond #commentform #author {background: url('graphics/icons/user.png') no-repeat #FFF;}
	#respond #commentform #email {background: url('graphics/icons/email.png') no-repeat #FFF;}
	#respond #commentform #url {background: url('graphics/icons/link.png') no-repeat #FFF;}
	#respond #commentform #author,
	#respond #commentform #email,
	#respond #commentform #url {
		width: 165px;
		padding: 5px 5px 5px 30px;
		background-position: 6px 6px;
		border: 1px solid #EAEAEB;}
	#respond #commentform #submit {
		width: 76px;
		height: 0;
		padding-top: 31px;
		margin-top: 10px;
		cursor: pointer;
		overflow: hidden;
		background: url('graphics/btn-submit.png') no-repeat;}
	
#respond #commentform .comment-col-right {
	width: 370px;
	float: right;}
	#respond #commentform #comment {
		width: 332px;
		background: url('graphics/icons/pencil.png') no-repeat #FFF;
		background-position: 6px 6px;
		padding: 5px 5px 5px 30px;
		border: 1px solid #EAEAEB;}
	
#respond #commentform label {
	font-size: 15px;}

/* Right Content */

#sideSocialMedia {
	width: 263px;
	height: 39px;
	padding: 7px 23px 0 0;
	background: url('graphics/side-social-background.png') no-repeat;}

	#sideSocialMedia a {width: 32px; height: 0; padding-top: 32px; overflow: hidden; float: right; margin-left: 5px;}
	#sideSocialMedia #rssLink {background: url('graphics/social-rss.png') no-repeat;}
	#sideSocialMedia #twitterLink {background: url('graphics/social-twitter.png') no-repeat;}
	#sideSocialMedia #youtubeLink {background: url('graphics/social-youtube.png') no-repeat;}

.sideItem {
	width: 280px;
	padding: 10px 10px 11px;
	float: left;
	background: url('graphics/side-item-divider.png') no-repeat bottom left;}

.firstSideItem {
	padding-top: 0;}
	
.sideItem h3 {
	height: 0;
	overflow: hidden;}
	
#sideRecentPosts h3 {width: 97px; padding-top: 13px; background: url('graphics/side-recent-posts.png') no-repeat;}
#sideCategories h3 {width: 81px; padding-top: 16px; background: url('graphics/side-categories.png') no-repeat;}
#sideAuthors h3 {width: 94px; padding-top: 14px; background: url('graphics/side-the-authors.png') no-repeat;}
#sideTwitter h3 {width: 150px; padding-top: 13px; background: url('graphics/side-latest-twitter.png') no-repeat;}

#sideRecentPosts ul {padding-top: 3px;}
#sideRecentPosts ul li {clear: both; padding-top: 8px;}
#sideRecentPosts .recentPostImage {height: 52px; width: 52px; overflow: hidden; float: left; margin-right: 5px; position: relative;}
#sideRecentPosts .recentPostCover {height: 52px; width: 52px; position: absolute; top: 0; left: 0; background: url('graphics/recent-post-cover.png') no-repeat;}
#sideRecentPosts .recentPostInfo {width: 222px; padding-top: 5px; float: left;}
#sideRecentPosts .recentPostInfo a {color: #FFF; line-height: 12px;}
#sideRecentPosts .recentPostInfo span.recentPostDate {color: #646669; font-size: 0.9em;}
#sideRecentPosts .recentPostInfo span.recentPostComments {color: #4E5054; font-size: 0.9em; line-height: 10px; float: left;}

#sideCategoriesCover {position: relative;}
#sideCategoriesCoverArrow {
	display: none;
	width: 300px;
	height: 9px;
	background: url('graphics/side-categories-arrow.png') no-repeat;
	position: absolute;
	bottom: 0;
	left: 0;}
#sideCategories ul {
	font-size: 1.2em;
	padding-top: 5px;}
#sideCategories ul li {
	margin-right: 4px;}
#sideCategories ul li a {
	width: 262px;
	float: left;
	color: #FFF;
	background: #202429;
	padding: 4px 8px;
	margin-top: 3px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;}
#sideCategories ul li a:hover {}

#sideAuthors ul {
	padding-top: 5px;}
#sideAuthors ul li {
	clear: both;
	padding-top: 5px;}
#sideAuthors ul li img {float: left; margin-right: 5px;}
#sideAuthors ul li .authorInfo {padding-top: 3px; float: left; width: 200px;}
#sideAuthors ul li .authorInfo h4 {height: 0; overflow: hidden; padding-top: 17px;}
#sideAuthors ul li .authorInfo p {padding-top: 1px; font-size: 0.9em; color: #CCC;}
#sideAuthors #scrooby h4 {width: 61px; background: url('graphics/author-name-scrooby.png') no-repeat;}
#sideAuthors #ryanogs h4 {width: 62px; background: url('graphics/author-name-ryanogs.png') no-repeat;}
#sideAuthors #matteo89 h4 {width: 73px; background: url('graphics/author-name-matteo89.png') no-repeat;}

#sideTwitter ul {margin-top: 5px;}
#sideTwitter ul li {
	font-size: 0.9em;
	padding: 5px 0;
	border-top: 1px solid #40444B;
	border-bottom: 1px solid #23262B;}
#sideTwitter ul li a {color: #646669;}
#sideTwitter ul li.first_tweet {border-top: 0 !important;}
#sideTwitter ul li.last_tweet {border-bottom: 0 !important; padding-bottom: 0;}
#sideTwitter ul li span.tweet_date {font-size: 0.9em; color: #646669;}
#sideTwitter ul li span.tweet_date a {margin-left: 2px; color: #646669;}

/* Footer */

#gamesBanner {width: 100%; height: 38px; background: url('graphics/games-banner-background.png') repeat-x #202429; position: fixed; bottom: 0; left: 0; z-index: 10000;}

#siteFooter {
	color: #2e3239;
	padding-top: 22px;}
#siteFooter #footerLinks {	
  font-size: 0.8em;
	float: left; 
	text-align: left; 
	padding-top: 10px;
	width: 450px;}
#siteFooter #footerLinks p {padding-bottom: 5px;}	
#siteFooter #footerCopy {
	width: 300px;
	text-align: right;
	float: right;}
	
/* Default Wordpress Styles */

/* Image Captions */

.wp-caption-text {
	background: #FFF;
	border: 1px solid #EAEAEB;
	text-align: center;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;}

/* Begin Images */
#postContent img {
	padding: 5px;
	background: #FFF;
	border: 1px solid #E7E6E6;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;}

p img {
	padding: 0;
	max-width: 100%;}

img.centered,
img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;}

.alignright {float: right;}
.alignleft {float: left;}
/* End Images */