/******************************
Description...:Screen CSS
Author........:lewis@fointypinger.co.uk
Last Changed..:22-06-2014
Notes.........:
/******************/
* {margin:0;padding:0;border:0;}
@font-face {
font-family:'puritan';
src:url('../data/fonts/puritan-regular.ttf');
}
body {
font-family:'puritan','trebuchet ms','lucida sans unicode','lucida grande','lucida sans',arial,sans-serif;
text-align:center;
cursor:default;
background:#000 url(../img/kale-salad.png);
}
#container {
position:relative;
width:980px;
margin:0 auto;
text-align:left;
}
/******************
Header**/
.masthead {
width:100%;height:150px;
background:#000 url(../img/fp.gif) center no-repeat;
}
.masthead h1 span {position:absolute;left:-9999px;}

/*skippy*/
a.skip {position:absolute;left:-9999px;}
a.skip:focus, a.skip:active {
top:0;left:0;
width:100%;
z-index:999;
color:#fff;
font-size:0.9em;
padding:10px 0;
background:#000;
}

/******************
Navigation system**/
#system {
width:100%;
text-align:left;
font-size:1.3em;
margin:0 auto 20px;
background:#021f1f;
border-top:3px solid #333;
border-bottom:3px solid #333;
}
.dhtml {
letter-spacing:-1px;
text-transform:lowercase;
}
.dhtml ul {
width:190px;
list-style:none;
background:#333;
border:3px solid #555;
}
.dhtml li {
position:relative;
display:block;
z-index:9;
padding:8px 0;
}
.dhtml a {
display:block;
color:#fff;
text-decoration:none;
}
.dhtml ul#navtop {
width:960px;
border:0;margin:0 auto;
background:#021f1f;
}
.dhtml li.navtoplevel {
float:left;
margin:0 10px;
}
.dhtml li.navtoplevel:hover {background:#294c6f;}
.dhtml li.navtoplevel a:hover {color:#fff;}
.dhtml a.navtoplink {
display:inline;
color:#fff;
font-weight:bold;
text-decoration:none;
padding:8px 15px;

-moz-transition:background 300ms ease-in;
-webkit-transition:background 300ms ease-in;
-o-transition:background 300ms ease-in;
transition:background 300ms ease-in;
}
.dhtml a.navtoplink:visited {color:#fff;}
.dhtml a.navtoplink:hover, .dhtml a.selected {
color:#fff;
text-decoration:none;
background:#45678f;
}
.dhtml ul ul {
display:none;
position:absolute;
top:-3px;right:-146px;
border-radius:4px;
}
.dhtml li:hover ul ul {display:none;}
.dhtml li:hover ul, .dhtml li:hover li:hover ul {display:block;}
.dhtml ul.menu {
position:absolute;
left:-3px;top:100%;
}
.dhtml ul.menu li {
padding:6px 17px 6px 6px;
font-weight:normal;

-moz-transition:background 200ms ease-out;
-webkit-transition:background 200ms ease-out;
-o-transition:background 200ms ease-out;
transition:background 200ms ease-out;
}
.dhtml li.navtoplevel ul.menu li:hover {background-color:#c2652e;}
.dhtml li.folder {background:url(../img/arr_mid.gif) no-repeat 98% 50%;}
.dhtml li.folder:hover {background:#c2652e url(../img/arr_mid.gif) no-repeat 98% 50%;}
.dhtml li.folder ul li:hover {background-color:#c2652e;}
.dhtml li.folder ul li.new, .dhtml li ul li.new {background:url(../img/icon-new.gif) no-repeat 99% 50%;}
.dhtml ul.menu li.folder:hover {background: url(../img/arr_mid.gif) no-repeat 98% 50%;}

.dhtml li.navtoplevel a:focus {background:#333;}

/******************
Moo move**/
#box {
position:absolute;
right:20px;top:-48px;
width:16px;height:16px;
}
#boo {
position:absolute;
left:0;top:0;
cursor:help;
z-index:999;
width:32px;height:32px;
background:url(../img/boo-show.gif);

-webkit-animation-name:drift;
-webkit-animation-duration:30s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-delay:5s;
-webkit-animation-fill-mode:both;

animation-name:drift;
animation-duration:30s;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-delay:5s;
animation-fill-mode:both;
}
#boo:hover {
background-position:bottom;

-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@-webkit-keyframes drift {
	0% {-webkit-transform:translateX(0);opacity:0;}
	20% {-webkit-transform:translate(-100px, 20px);opacity:0.8;}
	40% {-webkit-transform:translate(-200px, -20px);opacity:1;}
	60% {-webkit-transform:translate(-300px, 30px);opacity:1;}
	80% {-webkit-transform:translate(-400px, 10px);opacity:1;}
	100% {-webkit-transform:translate(-500px, -10px);opacity:0;}
}
@keyframes drift {
	0% {transform:translateX(0);opacity:0;}
	20% {transform:translateX(-100px) translateY(20px);opacity:0.8;}
	40% {transform:translateX(-200px) translateY(-20px);opacity:1;}
	60% {transform:translateX(-300px) translateY(30px);opacity:1;}
	80% {transform:translateX(-400px) translateY(10px);opacity:1;}
	100% {transform:translateX(-500px) translateY(-10px);opacity:0;}
}

/******************
Options**/
#options {
position:absolute;
top:-194px;right:4px;
width:230px;
}
.options-btn {
float:right;
width:24px;height:24px;
cursor:pointer;
opacity:0.5;
background:url(../img/icon-help.gif) no-repeat right top;
}
.options-btn:hover {opacity:1;}
.options-btn p {text-align:center;}
#optionsClosed {
display:none;
width:200px;height:70px;
padding:40px 0 0;margin-right:5px;
background:url(../img/options_bg.png) no-repeat;
}
#optionsClosed span {position:absolute;left:-9999px;}
#optionsClosed a {
float:left;
width:16px;height:16px;
margin:2px -45px 0 62px;
}
#optionsClosed a.rss {padding:0;background:none;}

/******************
Search**/
#search {
float:left;
clear:left;
margin:10px 0 0 32px;
}
#search input {
vertical-align:top;
color:#fff;
background:#29614a;
}
#search input.query {
width:110px;
font-size:0.75em;
padding:2px 4px 4px;
border:1px solid #4a3018;
}
#search input.search {
cursor:pointer;
width:16px;height:16px;
padding:0;margin:4px 0 0 4px;
background:url(../img/icon-search.gif);
}

/******************
Main Content**/
#content-holder {
float:left;
position:relative;
width:740px;
background:#4b2a31;
border-radius:8px;
box-shadow:0 0 16px rgba(0,0,0,0.8);
}
.content {
float:left;
width:740px;min-height:450px;
margin-bottom:10px;
background:#634049 url(../img/content_bg.png) no-repeat;
border-radius:8px;
}
.content h2 {
position:relative;
clear:right;
font:bold 1.4em cambria,georgia,palatino,'palatino linotype',times,'times new roman',serif;
letter-spacing:-1px;
color:#eab066;
margin:10px 0;padding:4px 10px 6px;
background:#613d42;
border-top:2px solid #522c32;
border-bottom:2px solid #522c32;
text-shadow:0 1px 2px #222;
}
.content h2 span {
position:absolute;
top:9px;right:10px;
font:bold 0.65em georgia,'times new roman',times,serif;
color:rgba(149,110,61,0.5);
text-shadow:none;
-moz-transition:color 500ms ease-in;
-webkit-transition:color 500ms ease-in;
-o-transition:color 500ms ease-in;
transition:color 500ms ease-in;
}
.content h2 span:before { content:": Posted: ";}
.content h2 span strong {color:#956e3d;}
.content h2:hover span {color:rgba(149,110,61,1);}
.content h3 {
clear:right;
color:#af844c;
font-size:1.2em;
font-weight:normal;
letter-spacing:-1px;
padding:6px 10px;
background:#4f272e;
border-top:1px solid #3a1c21;
border-bottom:1px solid #3a1c21;
}
.content h4 {
clear:right;
color:#af844c;
font-size:1.2em;
font-weight:normal;
padding:10px 16px 0;
}
.content p {
color:#fff;
font-size:1.1em;
line-height:1.25em;
margin:10px 16px 20px;
text-shadow:0 1px 1px #111;
}
.content p.usa {
padding-left:24px;margin-top:40px;
background:url(../img/icon-eu.gif) 0 5px no-repeat;
}
.content p.jap {
padding-left:24px;margin-top:40px;
background:url(../img/icon-japan.gif) 0 5px no-repeat;
}
.content p.usa strong, .content p.jap strong {color:#d3d800;}
.content img {
float:right;
margin:10px 16px;
border:3px solid #795;

-o-box-shadow:0 0 6px #333;
-moz-box-shadow:0 0 6px #333;
-webkit-box-shadow:0 0 6px #333;
box-shadow:0 0 6px #333;
border-radius:2px;
}
.content img:hover {
border:3px solid #900;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.content ul {margin:8px 0 20px;}
.content ul li {
color:#fff;
list-style:none;
font-size:1.1em;
line-height:1.2em;
margin:0 16px 16px 30px;
padding-left:18px;
background:url(../img/icon-list.gif) 0 4px no-repeat;
}
.content pre {
padding:10px 20px;margin:10px 16px 20px;
background:#4f272e;
border:1px solid #3a1c21;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
border-radius:2px;
}
	.content pre code {
	color:#eab066;
	font-family:"Courier New",Courier,monospace;
	font-size:1.15em;
	letter-spacing:0;
	}
		.content pre code strong {
		font-size:1.1em;
		color:#ff537f;
		}
.content a:link, .content a:visited {
color:#eab066;
font-weight:bold;
text-decoration:none;
border-bottom:1px dotted #795;
}
.content a:hover {
color:#c59961;
border-bottom:0;
padding-bottom:1px;
}
.content a:focus, .content a:active {border:1px dotted #795;}
.content span.share {float:right;margin:17px 0 0;}

	/******************
	Type**/
	h3.type-gme {background:#4f272e url(../img/icon-type01.gif) no-repeat 98% 50%;}
	h3.type-msc {background:#4f272e url(../img/icon-type02.png) no-repeat 98% 50%;}
	h3.type-fet {background:#4f272e url(../img/icon-type03.png) no-repeat 98% 50%;}

	/******************
	Reviews**/
	.review p.score {
	display:inline;
	color:#eab066;
	font-size:1.1em;
	letter-spacing:-1px;
	padding:8px 10px;
	background:#4f272e;
	border-radius:8px;
	}
	.review p.score strong {color:#795;}

	/******************
	Image tags**/
	.tagimage {
	float:right;
	clear:right;
	width:145px;
	margin:0 0 10px 10px;
	border:2px solid #3a1c21;
	border-right:0;
	}
	.tagimage cite {
	float:right;
	clear:right;
	width:114px;
	font-size:0.8em;
	font-weight:normal;
	color:#fff;
	line-height:12px;
	margin:-7px 10px 10px 0;padding:5px;
	background:#4f3137;
	border:1px solid #3a1c21;
	}
	.tagimage img, .tagimage_large img {margin:10px;}
	.tagimage_large {
	float:right;
	width:175px;
	margin:0 0 10px 10px;
	border:2px solid #3a1c21;
	border-right:0;
	}
	.tagimage_large cite {
	float:right;
	clear:right;
	width:144px;
	font-size:0.8em;
	font-weight:normal;
	color:#fff;
	line-height:12px;
	margin:-5px 10px 10px 0;padding:5px;
	background:#4f3137;
	border:1px solid #3a1c21;
	}
	.tagimage_large ul.numeric {
	float:right;
	width:142px;
	font-style:italic;
	margin:-7px 10px 0 0;padding:5px;
	background:#edebd5;
	border:1px solid #795;
	}
	.tagimage_large ul.numeric li {
	color:#000;
	font-size:0.6em;
	line-height:12px;
	font-style:italic;
	margin:-7px 2px 0 20px;padding:5px;
	}

	/******************
	N64 feature**/
	.spread_image {
	float:right;
	padding:0 16px 12px 46px;margin-top:-20px;
	}
	.spread_image img {
	float:left;
	margin:0 0 0 -36px;
	-webkit-transition:all 0.2s ease-out;
	-moz-transition:all 0.2s ease-out;
	-ms-transition:all 0.2s ease-out;
	-o-transition:all 0.2s ease-out;
	transition:all 0.2s ease-out;
	}
	.spread_image img:hover {
	position:relative;
	-webkit-transform:rotate(-2deg);
	transform:rotate(-2deg);
	}
	.spread_image img.alt {margin-top:-8px;}
	.spread_image img:nth-child(odd):hover {
	-webkit-transform:rotate(2deg);
	transform:rotate(2deg);
	}

	/******************
	BoxOuts**/
	.boxout {
	float:left;
	width:180px;
	margin:4px 16px 10px 16px;
	border:3px solid #795;
	background:#3a1c21;
	border-radius:4px;
	}
	.boxout:hover {border:3px solid #900;}
	.boxout h3 {
	color:#eab066;
	font-size:1em;
	margin:4px;padding:6px;
	border:0;
	}
	.boxout p {
	clear:left;
	color:#795;
	font-size:0.85em;
	line-height:1.1em;
	margin:10px 6px;
	}

	/******************
	Gallery**/
	#gallery {
	display:none;
	padding:10px 0 20px 45px;
	}
	#gallery ol li {
	float:left;
	position:relative;
	width:156px;
	list-style:none;
	color:#fff;
	font-size:0.8em;
	text-align:center;
	background:#522c32;
	padding:0 0 5px 0;margin:10px 10px 0 0;/*reset*/

	-moz-border-radius-bottomright:8px;
	-webkit-border-bottom-right-radius:8px;
	-moz-border-radius-bottomleft:8px;
	-webkit-border-bottom-left-radius:8px;
	}
	#gallery ol li img {
	float:left;
	margin:0 0 5px 0;
	}
	#gallery ol li span {
	position:absolute;
	top:-6px;left:-3px;
	color:#fff;
	font-size:2.2em;
	line-height:0.8em;
	padding:4px 6px;
	background:#23364c;
	border-radius:8px;
	}
	#gallery ol li strong {display:block;color:#eab066;}


	/******************
	2010 Decade LPs**/
	.decade #gallery {
	display:block !important;
	padding:20px;
	}
	.decade #gallery ol {
	display:flex;
	align-items:normal;
	flex-wrap:wrap;
	justify-content:space-evenly;
	width:100%;
	}
	.decade #gallery ol li {
	width:46%;
	width:29.333%;
	font-size:1em;
	padding:0 0 10px;margin:2%;
	}
	.decade #gallery ol li img {
	max-width:100%;
	margin:0 0 10px;
	box-sizing:border-box;
	}
	.decade #gallery ol li date {
	display:block;
	font-size:0.8em;
	}

	/******************
	COMMENTS**/
	#disqus_thread {
	font-family:"trebuchet ms","lucida sans unicode","lucida grande","lucida sans",arial,sans-serif;
	padding:10px 16px;
	}

	#disqus_thread li {background:none;}
	#disqus_thread img {margin:0;border:0;}
	#disqus_thread a {border:0;}

	#dsq-content #dsq-global-toolbar {margin:0 !important;}

	.dsq-reply {margin:0 !important;}

	#dsq-account-dropdown {font-size:0.8em;margin:2px 0 10px !important;}

	.dsq-textarea-background {
	background:#4f272e none !important;
	border:1px solid #3a1c21 !important;
	}
	.dsq-textarea-wrapper, div#comment.placeholder, textarea.placeholder {color:#fff !important;}
	.dsq-textarea-background textarea {}

	.dsq-post-tools ul {margin:0 !important;}

	#dsq-sort-by {margin:-20px 0 10px !important;}
	#dsq-sort-by select {font-size:0.7em;padding:2px;}

	textarea {color:#fff !important;}

	#comments {
	float:left;
	width:750px;
	margin:10px 0;
	}
	#comments h4 {
	font-weight:bold;
	font-size:0.9em;padding:0;margin:0;/*overwrites*/
	}
	#comments p {margin:0 0 5px;}
	#comments p.comment-poster a {font-size:0.8em;}
	#comments p .date {font-size:0.8em;opacity:0.7;}
	#comments p.comment {font-style:italic;}
	#comments p.comment-show {margin:10px 15px 0;}

	.content span.share {float:right;margin:17px 15px 0;}

	#comments ul {margin:0;}
	#comments ul li.comment {
	margin:20px 30px 20px 20px;
	}

	#comments table {
	float:left;
	width:620px;
	color:#eab066;
	margin:8px 20px;padding:15px 0;
	}
	#comments table td {
	font-size:0.8em;
	padding:3px 15px;
	/*border:1px solid #ddd;*/
	}
	#comments table td.label {
	width:170px;
	text-align:right;
	vertical-align:top;
	font-weight:bold;
	padding:8px 0 0;
	}
	/*FORM*/
	#comments input {
	width:200px;
	color:#fff;
	font-size:1em;
	padding:4px 5px;
	background:#4f272e;
	border:1px solid #3a1c21;
	}
	#comments input:focus {border-color:#8cc541;}
	#comments input.cms_submit {
	font-weight:bold;
	cursor:pointer;
	color:#fff;
	width:auto;
	font-size:1em;
	padding:3px 6px;
	background:#4f272e;

	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	}
	#comments input.cms_submit:hover {background:#17283a;}
	#comments table td.checky input {width:15px;}
	#comments textarea {
	font-family:"trebuchet ms","lucida sans unicode","lucida grande","lucida sans",arial,sans-serif;
	width:380px;height:170px;
	color:#fff;
	font-size:1em;
	padding:4px 5px;
	background:#4f272e;
	border:1px solid #3a1c21;
	}
	#comments textarea:focus {border-color:#8cc541;}


/******************
Links**/
#slide-zone {
float:right;
position:absolute;
top:0;right:0;bottom:0;
width:220px;
}
#links-holder {
position:relative;
width:220px;
background:#283c56;
border-radius:10px;
box-shadow:0 0 16px rgba(0,0,0,0.8);
}
.links {
float:left;
width:220px;
margin-bottom:10px;
background:#2f3341 url(../img/links_bg.png);
border-radius:10px;
}
.links dl dt {
clear:both;
text-align:right;
font:0.95em georgia,'times new roman',times,serif;
text-transform:uppercase;
color:#cfab81;
padding:4px 10px;margin:10px 0 4px;
background:#31455c;
border-top:1px solid #0a131f;
border-bottom:1px solid #0a131f;
}
.links dl dt:nth-of-type(1) {background:#17283a;}
.links dl dt:nth-of-type(2) {background:#23364c;}
.links dl dd {
font-size:1em;
margin:2px 12px;
}
.links dl dd a {
-webkit-transition:all 0.2s ease-out;
-moz-transition:all 0.2s ease-out;
-ms-transition:all 0.2s ease-out;
-o-transition:all 0.2s ease-out;
transition:all 0.2s ease-out;
}
.links a:link, .links a:visited {color:#8eac6e;}
.links dl dd a:hover, .links dl dd a:active, .links dl dd a:focus {color:#795;margin-left:6px;}
.links img {margin:5px -5px 5px 12px;}

	/******************
	Twatter + subscribe btn**/
	#twitter_div {
	float:left;
	position:relative;
	width:180px;min-height:90px;
	color:#795;
	font-size:0.75em;
	line-height:1.2em;
	letter-spacing:-1px;
	padding:15px 30px 5px 10px;
	background:url(../img/twitter_bg.png) 155px 50% no-repeat;
	}
	.tweet ul {font-family:"lucida sans","lucida sans unicode",lucida,verdana,sans-serif;}
	.tweet ul li {
	list-style:none;
	font-size:1.2em;
	line-height:1.1em;
	margin:0 0 10px 6px;
	}
	.tweet ul li span:before {content:open-quote;}
	.tweet ul li span:after {content:close-quote;}
	.tweet ul li .date {
	font-size:0.75em;
	color:#878787;
	}
	.tweet ul li a:link, .tweet ul li a:visited {color:#d3d800;}
	.tweet ul li a:hover {text-decoration:none;}

	#subby {
	cursor:pointer;
	float:right;
	position:absolute;
	top:-8px;right:-10px;
	width:36px;height:46px;
	opacity:0.3;
	background:url(../img/twitter-gul.gif) right top no-repeat;
	}
	#subby:hover {opacity:1;}
	a#follow {
	display:none;
	position:absolute;
	top:-16px;right:26px;
	color:#ff537f;
	font-size:1.3em;
	padding:6px 20px 8px 8px;
	background:#222 url(../img/icon-twitter.png) no-repeat 94% 50%;
	border-radius:8px;
	}
	a#follow:hover {text-decoration:none;}

/******************
Footer**/
#footer {
float:left;
width:100%;
margin-top:20px;padding:40px 0;
background:rgba(0,0,0,0.8);
border-top:3px solid #795;
}
#footer:hover {background:rgba(0,0,0,1);}
#footer p {
text-align:center;
color:#a6a4af;
font-size:1.1em;
line-height:1.6em;
letter-spacing:-1px;
text-transform:lowercase;
}
#footer em {opacity:0.7;}
#footer a:link, #footer a:active, #footer a:visited {
color:#a6a4af;
text-decoration:underline;
}
#footer a:hover {text-decoration:none;}

	#back-top {
	position:fixed;
	top:50%;left:50%;
	margin:0 0 0 -500px;
	}
	#back-top a {
	display:block;
	width:21px;height:22px;
	background:url(../img/icon-top.gif);
	opacity:0.4;
	}
	#back-top a:hover {opacity:1;}

/******************
Common**/
acronym, abbr {cursor:help;border-bottom:1px solid #9a8e51;}
blockquote {font-size:1.05em;font-weight:bold;}
q {font-style:italic;font-size:0.8em;color:#ddd;margin:10px 10px 0;display:block;}
cite {font-weight:bold;color:#fff;font-size:0.8em;margin:-10px 10px 0;}
strong {color:#9a7;}
.error {text-decoration:line-through;}
.hide {position:absolute;left:-9999px;}
p.tiny {font-size:0.7em;}
a:active, a:focus {outline:none;}
::-moz-selection {background:#ff537f;color:#fff;}/*888f1a*/
::selection {background:#ff537f;color:#fff;}

a.twitter {padding-right:16px;background:url(../img/icon-twitter.png) no-repeat 100% 5px;}
a.rss {padding-right:14px;background:url(../img/icon-rss.gif) no-repeat 100% 5px;}
a.netvibes {padding-right:14px;background:url(../img/icon-netvibes.gif) no-repeat 100% 5px;}

a.xhtml {padding-right:20px;background:url(../img/icon-html.gif) no-repeat 100% 5px;}
a.cmsms {padding-right:14px;background:url(../img/icon-cmsms.png) no-repeat 100% 5px;}

a.more {letter-spacing:-1px;padding-right:14px;background:url(../img/icon-more.gif) no-repeat 100% 3px;}

/******************
ToolTips**/
#tooltip {
position:absolute;
z-index:102;
max-width:115px;
text-align:left;
color:#111;
font:bold 0.6em arial,tahoma,sans-serif;
padding:3px 5px;
background:#fff;
background:rgba(255,255,255,0.85);
border-radius:8px;
-o-box-shadow:1px 1px 2px #555;
-moz-box-shadow:1px 1px 2px #555;
-webkit-box-shadow:1px 1px 2px #555;
box-shadow:1px 1px 2px #555;
}
/******************
Clearfix**/
.clearfix:after {
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}