@import "style/css/reset.css";

/* Font-Face! */

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
/*@font-face {
	font-family:'DeliciousBold';
	src: url(fonts/Delicious-Bold.eot);
	src:
		local(Delicious-Bold),
		url(fonts/Delicious-Bold.otf) format("opentype");
}*/
@font-face {
	font-family:'DeliciousRoman';
	src:
		local(Delicious-Roman),
		url(/typefaces/Delicious/Delicious-Roman.otf) format('opentype');
}

@font-face {
	font-family:'DeliciousBold';
	src:
		local(Delicious-Bold),
		url(/typefaces/Delicious/Delicious-Bold.otf) format('opentype');
}

/* LAYOUT */
/* ----------------------------------------- */

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; padding:10px }

/* You might find the following useful */
/* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them */

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.no-display {display: none;}
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */

/*	====================================================================== */
/*	STRUCTURE	*/
/*	====================================================================== */
body {font-family: Georgia, Times,'Times New Roman', serif; font-size: 62.5%; color: #272727; }

#content-wrapper {min-width:960px;}
#content-above-footer {min-width:960px;}
#footer-wrapper {min-width:960px;}
#content {width: 960px; margin: 0px auto !important;}
#article-wrapper {width: 600px; float: left;}
#aside-wrapper {width: 360px; float: right;}

/* STICKY FOOTER	*/
html, body, #canvas-wrapper, #canvas {height: 100%;}
#canvas > #content-above-footer {height: auto; min-height: 100%;}
#content-wrapper {padding-bottom: 200px;}  /* must be same height as the footer */
#footer-wrapper {position: relative; margin-top: -200px; height:200px; clear:both;}
#footer {height:200px; overflow-y:hidden;}

/*
	TYPGROGRAPHY
*/
h1 {font-size:3em}  /* displayed at 36px */
h2 {font-size:2em}  /* displayed at 24px */
h3 {font-size:1.5em}  /* displayed at 18px */
h4 {font-size:1.25em}  /* displayed at 15px */
input, select, th, td {font-size:1em} /* displayed at 12px */
li li, li p, blockquote p {font-size:1em;} /* ensures that size does not keep shrinking */
a:link, a:visited { text-decoration:none; color: #3399ff; }
a:hover { color:#003366; text-shadow: 0px 0px 2px #3399ff; }
blockquote {background:#dedede; padding:10px; float: right; width: 300px; font-size: 1em; line-height:.25em !important; font-weight:bold; font-family: baskerville,'palatino linotype','times new roman',serif;}

body { background: #efefef url('/images/FancyRatStudiosLight/header-mid.png') no-repeat top center; }
	
/*	====================================================================== */
/*	PRESENTATION	*/
/*	====================================================================== */
/* HEADER STYLE */
#header {padding:97px 0px 45px 0px; background: url('/images/FancyRatStudiosLight/header.png') no-repeat bottom center;}
#header .title {width: 431px; height:208px; margin: 0px auto !important; background: url('/images/FancyRatStudiosLight/company-logo-l.png') no-repeat center center;}
#header .title a{display: none;}

/* HAT STRUCTURE */
#content-wrapper {background: url('/images/FancyRatStudiosLight/content-mid.png') no-repeat top center;}
#footer-wrapper {background:url('/images/FancyRatStudiosLight/footer-mid.png') repeat-x bottom center;}
#footer {background:url('/images/FancyRatStudiosLight/brim.png') no-repeat bottom center;}


/* MAIN NAVIGATION STYLE */
#main-navigation-wrapper {padding-left:84px; padding-right:84px; position:absolute; top:0px; right:0px;}
#main-navigation-wrapper ul {background: url('/images/FancyRatStudiosLight/main-navigation-mid.png') repeat-x -84px 0px;}
#main-navigation li {float:left;}
#main-navigation li.home {margin-left:-84px;}
#main-navigation li.about {margin-right:-84px;}
#main-navigation li.home a {display:block; width:84px; height:84px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat 0px -352px;}
#main-navigation li.about a {display:block; width:84px; height:84px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat -168px -352px;}
#main-navigation li.blog a {display:block; width:84px; height:84px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat -336px -352px;}
#main-navigation li.games a {display:block; width:84px; height:84px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat -504px -352px;}

#main-navigation li.home a:hover {display:block; width:84px; height:84px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat -84px -352px;}
#main-navigation li.about a:hover {display:block; width:84px; height:84px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat -252px -352px;}
#main-navigation li.blog a:hover {display:block; width:84px; height:84px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat -420px -352px;}
#main-navigation li.games a:hover {display:block; width:84px; height:84px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat -588px -352px;}

/* GAMES PAGE STYLE */
#game-list ul {width:100%;}
#game-list li {position:relative;}
#game-list li.pirates-vs-ninjas a {display:block; width:512px; height:207px; background:url('/images/games-buttons-spritesheet.png') no-repeat 0px 0px; }
#game-list li.pirates-vs-ninjas a:hover {display:block; width:512px; height:207px; background:url('/images/games-buttons-spritesheet.png') no-repeat -512px 0px;}
#game-list li.pixel-pile a {display:block; width:512px; height:207px; background:url('/images/games-buttons-spritesheet.png') no-repeat 0px -207px; }
#game-list li.pixel-pile a:hover {display:block; width:512px; height:207px; background:url('/images/games-buttons-spritesheet.png') no-repeat -512px -207px;}
#game-list li a.app-store-free {position:absolute; top:20px; right:100px; margin-left:-10px;}
#game-list li.on-silhouettes a {display:block; width:512px; height:207px; background:url('/images/games-buttons-spritesheet-2.png') no-repeat 0px 0px; }
#game-list li.on-silhouettes a:hover {display:block; width:512px; height:207px; background:url('/images/games-buttons-spritesheet-2.png') no-repeat -512px 0px;}
#game-list li a.app-store-free {position:absolute; top:20px; right:100px; margin-left:-10px;}
a.app-store-free {display:block; width:336px !important; height:138px !important; background:url('/images/app-store-button-spritesheet.png') no-repeat 0px 0px !important;}
a.app-store-free:hover {display:block; width:336px !important; height:138px !important; background:url('/images/app-store-button-spritesheet.png') no-repeat -336px 0px !important;}
#game-list li a.app-store-99 {position:absolute; top:20px; right:100px; margin-left:-10px;}
a.app-store-99 {display:block; width:336px !important; height:138px !important; background:url('/images/app-store-button-spritesheet.png') no-repeat 0px -138px !important;}
a.app-store-99:hover {display:block; width:336px !important; height:138px !important; background:url('/images/app-store-button-spritesheet.png') no-repeat -336px -138px !important;}


/* POST STYLE */
#article-wrapper .article  {padding:0px 30px 1em 30px; font-size: 1.4em; line-height: 2em; color: #272727;}
.article ul, .article ul li {list-style-type: circle; list-style-position: outside;}
.article ol, .article ol li {list-style-type: decimal; list-style-position: outside;}
.article ul, .article ol {padding-left:2em;}
.article h2, .article h3 {padding:1em 0px 0px 0px; font-family: "DeliciousBold", "Helvetica Neue", Helvetica, Arial, sans-serif;}

#article-wrapper .article .hentry {margin:0px -30px 0px -40px; padding-bottom:2em; background: url('/images/FancyRatStudiosLight/post-header.png') no-repeat top left;}
#article-wrapper .article .header	{padding-bottom:1em;}
#article-wrapper .article blockquote {background:#dedede; padding:10px; float: right; width: 300px; font-style:italic; font-family: baskerville,'palatino linotype','times new roman',serif;}
#article-wrapper .article blockquote p { font-size: 1.25em; line-height:1.5em; padding: 0px;}
#article-wrapper .article ul li {list-style: disc inside none;}
/* Video Embedded */
.video-embedded object  {display:block; margin:0 auto;}

/*	Datetime font-size are pixel values so that they don't change when zooming on a page */
#article-wrapper .article .header .datetime { width: 40px; float: left; padding: 12px; text-align: center; color: #666666; font-family: Georgia, serif; }
#article-wrapper .article .header .day { font-size: 24px; line-height:24px; font-weight: bold; margin: 0;}
#article-wrapper .article .header .month { font-size: 14px; line-height:16px; font-weight: bold; text-transform: uppercase; margin: 0; }
#article-wrapper .article .header .year { font-size: 12px; line-height:14px; font-weight: bold; margin: 0;}

#article-wrapper .article .header {text-shadow: 0px 0px 2px #999;}

#article-wrapper .article .header h2	{padding:12px 0px 0px 64px; font-family: "DeliciousBold", "Helvetica Neue", Helvetica, Arial, sans-serif;}
#article-wrapper .article .header h2	a {color: #272727;}
#article-wrapper .article .header h2	a:hover {color: white;}

.article p {padding-bottom:1em;}
#article-wrapper .article .header .author {padding:0px 0px 0px 64px; color: #272727; font-size: 1.1666em; line-height:1.25em;}
/* Drop cap */
#article-wrapper .article .hentry .body > p:first-child:first-letter {margin-right:.1em; font-size : 6em; font-family: Baskerville,'palatino linotype','times new roman',serif; float : left; color : #aaa;}

#article-wrapper .article .body {margin:0px 0px 0px 30px;}	
#article-wrapper .article .tag {padding:0px 30px; color: #666; font-size:.785em; line-height:1.5em; background:#ccc; padding: .5em 1em; border-radius:1em; -moz-border-radius:1em; -webkit-border-radius: 1em;}
#article-wrapper .article img {max-width: 544px;}
#article-wrapper .article .nav-links {padding:1em 0px;}
#article-wrapper .article .nav-links a {background: #333; padding:.5em 1em;  border-radius:1em; -moz-border-radius:1em; -webkit-border-radius: 1em;}

body.single #article-wrapper,
body.page-template-page-games-php #article-wrapper {width:auto;}
body.single #article-wrapper .article,
body.page-template-page-games-php #article-wrapper .article {padding:0px 60px;}
body.single #article-wrapper .article .header,
body.page-template-page-games-php #article-wrapper .article .header {color: #272727; text-shadow: 0px 0px 2px #999; padding: 0px 0px 2em 0px;}
body.single #article-wrapper .article .hentry,
body.page-template-page-games-php #article-wrapper .article .hentry {margin:0px -70px; background: url('/images/FancyRatStudiosLight/post-header-single.png') no-repeat top center;}
body.single #article-wrapper .article .hentry .body,
body.page-template-page-games-php #article-wrapper .article .hentry .body {margin:0px 70px;}
body.single #article-wrapper .article .comments,
body.page-template-page-games-php #article-wrapper .article .comments {padding:0px;}
body.single #article-wrapper .article .comments .comment-author,
body.page-template-page-games-php #article-wrapper .article .comments .comment-author {font-size: 1.5em; line-height:1.5em;}
body.single #article-wrapper .article img,
body.page-template-page-games-php #article-wrapper .article img {max-width: 840px;}

/* Our Games Page */
body.page-template-page-games-php #article-wrapper .hentry {width: 980px;margin:0px -30px; background: url('/images/FancyRatStudiosLight/post-header-single.png') no-repeat top center;}


/* COMMENT FORM STYLE */
#respond p {font-size: 1em; padding:1px 0px !important;}
#respond textarea {max-width:800px; padding:4px; background: #fff; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px;}
#respond input {padding:4px; background: #fff; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px;}
#respond input#submit {color:#3399ff; background:#333; padding: .5em 1em; border:none; text-shadow: 0px 0px 6px #00264d; border-radius:1em; -moz-border-radius:1em; -webkit-border-radius: 1em;}
#respond input#submit:hover {color:white; background:#333; text-shadow: 0px 0px 6px #99ccff;}
#respond p.submit-wrapper {padding: 1em 0px !important;}

#aside-wrapper .aside {padding:0px 30px; color: #3b3b3b;}
#aside-wrapper .aside > li {font-size: 1.4em; line-height:1.4em;}
#aside-wrapper .aside .searchform {position: relative; padding:4px 0px 2em 0px; color: white;}
#aside-wrapper .aside .searchform .input-text{display:block; float:left; width: 272px; background: #1a1a1a; color: white; border: 1px solid #333; padding: 6px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px;}
#aside-wrapper .aside .searchform .input-button {border-style:none; position:absolute; top:-4px; right:4px;  background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat 0px -436px; width: 33px; height: 33px;}
#aside-wrapper .aside .searchform .input-button:hover {border-style:none; position:absolute; top:-4px; right:4px; background: url('/images/FancyRatStudiosLight/spritesheet.png') no-repeat -33px -436px; width: 33px; height: 33px; cursor: pointer;}

/* SEARCH INDEX STYLE */
/* we drop caps for the first paragraph but that looks odd in a search index so we remove all drop caps style */
body.search #article-wrapper .article .body > p:first-child:first-letter {margin-right:inherit; font-size : inherit; font-family: inherit; float : inherit; color : inherit;}
body.search #article-wrapper .article .header h3	{padding:12px 0px 0px 64px;}
body.search #article-wrapper .article .header h3:first-letter {margin-top:-.2em; font-size:4em; font-family: Baskerville, serif; color: #666;}
body.search #article-wrapper .article .header h3	a {color: #272727;}
body.search #article-wrapper .article .header h3	a:hover {color: white;}
body.search #article-wrapper .article .header .author {clear:both;}

#aside-wrapper .aside .archives, #aside-wrapper .aside .categories {padding:0px 0px 2em 0px;}
/* WIDGET STYLES */
#aside-wrapper .aside .widget {padding:0px 0px 1em 0px;}
#aside-wrapper .aside .widget h2{padding:0px 0px .5em 0px;}
#aside-wrapper .aside .widget li{padding:0px 0px 0px 1em;}
#aside-wrapper .aside .widget_twitter {position:relative; margin:0px -45px 0px -30px; padding:80px 45px 0px 30px; background: url('/images/FancyRatStudiosLight/widget-twitter-bg.png') no-repeat top right;}
#aside-wrapper .aside .widget_twitter h2 {font-size:1em; font-weight:bold;}

/* INDEX STYLE */
body.blog #article-wrapper .article .title {height:80px;}
body.blog #article-wrapper .article .title span{display:none;}
body.blog #article-wrapper .article .title{position:relative;z-index:1;}
body.blog #article-wrapper .article .post{position:relative;z-index:1;}
body.blog #article-wrapper .article {position: relative;}
body.blog #article-wrapper .article .extra {position: absolute;top: -100px;left: -256px;width: 549px; height:316px; background: url('/images/FancyRatStudiosLight/inkwell.png') center center;z-index:0;
}

/* 404 STYLE */
body.error404 #article-wrapper {position:relative;}
body.error404 #article-wrapper .article h1 {font-size:3em; padding:80px 0px 20px 0px; width:237px; height:44px;background:url('/images/FancyRatStudiosLight/article-error404.png') no-repeat center center;}
body.error404 #article-wrapper .article h1 span{display:none;}

body.error404 #article-wrapper .teaspill {z-index:1; position:absolute; top:-120px; left:-20px; background:url('/images/FancyRatStudiosLight/teaspill.png') no-repeat top center; width:628px; height:183px;}
body.error404 #main-navigation-wrapper {position:absolute; top:0px; -webkit-transform: rotate(-22deg); -moz-transform: rotate(-22deg);}

body.error404 #header {padding:184px 0px 58px 0px; }
body.error404 #header .title {width: 219px; height:108px; margin: 0px auto !important; background: url('/images/FancyRatStudiosLight/company-logo-m.png') no-repeat center center;}
body.error404 #header .title a{display: none;}

/* FOOTER STYLES */
#footer {color: #666; font-size:1em; font-family:Helvetica, Arial, sans-serif;}
#footer p {width:940px; margin:0px auto;}
#footer .links {width:960px; margin:0px auto; padding:10px 0px 10px 0px;}
#footer .links a:hover {color: white;}
#footer .links .col-one,
#footer .links .col-two,
#footer .links .col-three {width:300px; float: left; padding: 10px;}
#footer .footer-nav li img.icon {vertical-align: middle; padding:0px 2px 0px;}

#footer .footer-nav li {border: 1px dotted #333; border-width:1px 0px 0px 0px; padding: 5px 0px;}

.xcode-download-icon {position: absolute; top:0px; display:block; width:139px; height:131px; background: url('/images/xcode-download-icon.png') no-repeat top left;}
.xcode-download-icon:hover {display:block; width:139px; height:131px; background: url('/images/xcode-download-icon.png') no-repeat top right;}
.download {background:#333; padding:0.5em 1em; padding-left:200px; border-radius:1em; -moz-border-radius:1em; -webkit-border-radius: 1em;}
.download-wrapper {position:relative; padding: 30px 0px 30px 0px;}

/* IPHONE SCREENSHOTS */
.iphone-vertical-screenshots {background: url('/images/Apple/iphone-231x403.png') no-repeat top left; width:159px; height:240px; padding:60px 36px 103px 36px; overflow: hidden;}
.iphone-vertical-screenshots .panel {overflow: hidden; }
.iphone-vertical-screenshots .screen {float: left; }