/*   
Theme Name: Wallofscribbles Theme
Theme URI: http://wallofscribbles.com
Description: Website layout for wallofscribbles.com
Author: Corey Dutson
Author URI: http://walofscribbles.com
Version: 1
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


* { margin: 0; padding: 0; }
body { background: white; font: 62.5%/1.4 Georgia, Serif; }
.screen-reader-text { position: absolute; left: -9999px; top: -9999px; }
.clear { clear: both; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .group, *:first-child+html .group { zoom: 1; } /* First selector = IE6, Second Selector = IE 7 */


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* FONT STUFF */
body #respond input, textarea, input {font-family:Georgia, Times, Serif; color:#333333;}
#header .siteTitle, .clicker, .dateHolder, #footer h3, h2, #respond input#submit, .content h2, .content h3, .content h4, .content h5, .content h6, #post-list h1, #page-wrapper .content #goBack {font-family:'Lobster', Arial;}
.description, h1, h3, h4, h5, h6, #respond label,
ol.commentlist li.comment div.comment-author     {font-family: 'Josefin Sans', georgia, serif;}

/* COLOURS */
/* yellow           #E4E430
/* grey             #333333
/***********/

h1, h2, h3 { font-weight: normal; margin: 0 0 10px 0; }
h1 { font-size:300%; line-height:100%;}
h2 { font-size:300%; line-height:100%;}
h3 { font-size:300%; line-height:100%;}

p { margin: 0 0 10px 0; line-height:150%;}
p.standAlone {font-size:150%; line-height:150%;}
.standAlone {margin-left:70px; color:#333333;}
.standAlone span {color:white;}
h2.standAlone {color:white; font-size:400%;}
.alignright, .alignleft {clear:both; display:block;}

p a { color: white; text-decoration:none; background:#333333;}
a:hover { background:transparent; color:#333333;} 

blockquote, { padding:10px 20px 0px 20px; margin-bottom:10px; border:1px dotted #333333; border-left:none; border-right:none;}
blockquote p { font-style: italic;}

ul, ol { margin: 0 0 10px 0; }
strong {font-weight:bold;}
em {font-style:italic;}
input {font-size: 150%; line-height:150%;}
pre {width:460px; overflow:auto; font-size:150%; background: #EEEEEE; margin-bottom:20px;padding:10px;}
code {font-family: "Courier New", Courier, monospace; border-bottom:1px dotted #333333;}

#page-wrap { width: 960px; margin: 0px auto; position:relative; }
.home {background:white url('images/yellow-bg.gif') top center repeat-y;}
body.blog.paged #page-wrap, body.single #page-wrap, body.archive #page-wrap, body.search #page-wrap{background:#E4E430 url('images/horn.png') 0px 74px no-repeat;}
.single, .paged, .search, .archive, .error404, .page {background:#E4E430;}
.single.single-portfolioitem,
.single.single-codeitem,
.page.page-template-page-portfolio-php,
.page.page-template-page-code-php {background:white;}
body.single.single-portfolioitem #page-wrap,
body.single.single-codeitem #page-wrap,
body.page-template-page-code-php #page-wrap,
body.page-template-page-portfolio-php #page-wrap {background:white url('images/finger-large.gif') top right no-repeat;}

body.single.single-portfolioitem #page-wrapper .content a,
body.single.single-codeitem #page-wrapper .content a,
body.page-template-page-code-php #page-wrapper .content a,
body.page-template-page-portfolio-php #page-wrapper .content a { color: #333333; text-decoration:none; background:#E4E430;}
body.single.single-portfolioitem #page-wrapper .content a:hover,
body.single.single-codeitem #page-wrapper .content a:hover,
body.page-template-page-code-php #page-wrapper .content a:hover,
body.page-template-page-portfolio-php #page-wrapper .content a:hover { background:#333333; color:white;} 
body.single.single-portfolioitem #header .siteTitle a,
body.single.single-codeitem #header .siteTitle a,
body.page-template-page-portfolio-php #header .siteTitle a,
body.page-template-page-code-php #header .siteTitle a {color:#E4E430;}

#header {position:relative; top:0px; width:940px; height:90px; padding:0px 10px; overflow:hidden; z-index:10;}
#header .siteTitle {font-size:712%; text-decoration:none; position:absolute; top:-28px; z-index:10;}
body #header .siteTitle a {text-decoration:none; color:white;}
#header .description {position:absolute; top:36px; font-size:354%; left: 220px;}
#header .description.blog, #header .description.blog span {color:#333333;}
#header .description.blog span {margin-right:0px;}
#header .description.portfolio {color:#333333;}
#header .description span {margin-right:5px; color:white;}
#header .description.portfolio span {color:#333333; margin-right:0px;}
#header .description span.clicker {margin:0px; color: #E4E430; cursor:pointer; background: white;}
#header .description.blog span.clicker {color:white; background:#e4e430;}
#header .description.portfolio span.clicker {color:#E4E430;}
#contentWrapper {position:relative;}

#leftSide {width:460px; padding: 0px 20px 0px 0px;  position:relative; top:-10px; min-height: 760px;}
    #leftSide h2.pictoHeading { background:transparent url('images/horn.png') 0px 0px no-repeat; height:130px; overflow:hidden; text-indent:-999em;}
    #leftSide .post {padding-bottom:12px;}
    #leftSide .post.first {background: transparent url('images/dot.gif') bottom center no-repeat; margin-bottom:20px;}
.dateHolder{position:absolute; top:0px; left:0px; width:60px; color: white; font-size:320%; line-height:100%;}
.summary {font-size:150%;}

.content p {font-size:150%; line-height:150%; margin-bottom:10px;}
.content blockquote p {font-size:130%;}
.content h2 {font-size:280%; margin-bottom:20px;}
.content h3 {font-size:240%; margin-bottom:20px;}
.content h4 {font-size:220%; margin-bottom:20px;}
.content h5 {font-size:200%; margin-bottom:20px;}
.content h6 {font-size:180%; margin-bottom:20px;}
.content ul {list-style-type:disc;}
.content ol {list-style-type:decimal;}
.content li {margin-left:20px; font-size:150%;}
.meta p {font-size:150%;}

#nav-wrapper {float:right;}
#page-wrapper {width:100%;margin-top:90px;}
#page-wrapper .content {width:480px; margin-left:220px; position:relative;  padding-top:24px;}
#page-wrapper .content #goBack {position:absolute; left:-120px; top:14px; color: #E4E430; font-size:300%; text-decoration:none; display:block; width:80px; height:86px; background:white url('images/goBack.gif') 10px 36px no-repeat; text-align:right;}
#page-wrapper .content #goBack:hover {background-position:0px 36px;}
#page-wrapper .content #goBack,
#page-wrapper #swapContent  {display:none; margin-bottom:100px;}

#page-wrapper .portfolio-list ul {list-style-type:none; padding-bottom:100px; background:white url('images/pick-one.gif') bottom center no-repeat; margin-bottom:50px;}
#page-wrapper .portfolio-list ul li {margin:0px; padding:0px;}
#page-wrapper .portfolio-list ul li a {display:block; height:92px;}


#rightSide {position:absolute; right:0px; top:0px; width:459px; padding: 0px 0px 0px 20px; background: white url('images/right-side-bg.gif') top left no-repeat; min-height: 400px;}
#rightSide h2 {float:right; color:#333333;}
    #rightSide ul {float:right; clear:both; }
    #design-button, #code-button {overflow:hidden; text-indent:-999em; display:block; cursor:pointer;}
    #design-button {background:white url('images/FW-button.gif') 0px 0px no-repeat; height:94px; width:140px; margin:20px 0px  ;}
    .page-template-page-portfolio-php #design-button, .single-portfolioitem #design-button, #design-button:hover {background-position:0px -94px;}
    #code-button {background:white url('images/CODE-button.gif') top left no-repeat; height:111px; width:140px;}
    .page-template-page-code-php #code-button, .single-codeitem #code-button, #code-button:hover {background-position:0px -111px;}

    #blerb {width:300px; clear:both; font-size:140%; position:relative; top:-20px;}
    #design-blerb, #code-blerb {display:none;}
    #design-blerb a {display:block; width:361px; height:358px; overflow:hidden; text-indent:-999em; background:white url('images/attend.gif') top left no-repeat;}
    #code-blerb a {display:block; width:361px; height:423px; overflow:hidden; text-indent:-999em; background:white url('images/code-brilliance.gif') top left no-repeat;}
    #leftSide .archive-link {text-align:center;}


#footer { background:black url('images/footer-bg.png') bottom left no-repeat; text-align:center; width:100%; color: white; padding:30px 0px 0px 0px;}
    #footer .footerStuff {height:270px; width:960px; text-align:left; margin:0px auto; position:relative;}
    #footer h3 {font-size:200%; position:absolute;}
    #footer ol {padding:0px 0px 0px 10px;}
    #footer ol li {text-indent:-999em; overflow:hidden; cursor:pointer;}
    #footer ol li.first {background:black url(images/footer-1.gif) 0px 0px no-repeat; width:440px; height:83px;}
    #footer ol li.first:hover {background-position:0px -83px;}
    #footer ol li.second {background:black url(images/footer-2.gif) 0px 0px no-repeat; width:440px; height:70px;}
    #footer ol li.second:hover {background-position:0px -70px;}
    #footer ol li.third {background:black url(images/footer-3.gif) 0px 0px no-repeat; width:580px; height:91px;}
    #footer ol li.third:hover {background-position:0px -91px;}    
    
    #footer .rightPane {position:absolute; top:0px; right:0px; width:380px;}
    #footer .rightPane .extraList {padding-top:40px;}
    #footer .rightPane .extraList li {float:left;}
    #footer .rightPane .extraList li a {display:block; height:80px; width:80px; overflow:hidden; text-indent:-999em;}
    #footer .rightPane li.twitter a  {background: black url('images/twitter.gif') 0px 0px no-repeat; }
    #footer .rightPane li.twitter a:hover {background-position:0px -80px; }
    #footer .rightPane li.goodreads a {background: black url('images/goodreads.gif') 0px 0px no-repeat; }
    #footer .rightPane li.goodreads a:hover {background-position:0px -80px; }
    #footer .rightPane li.tumblr a {background: black url('images/tumblr.gif') 0px 0px no-repeat;  position:relative; top:-40px; width:70px;}
    #footer .rightPane li.tumblr a:hover {background-position:0px -80px; }
    #footer .rightPane li.flickr a {background: black url('images/flickr.gif') 0px 0px no-repeat; width:120px; position:relative; top:7px; left:-5px;}
    #footer .rightPane li.flickr a:hover {background-position:0px -80px; }
    
    #searchform #s { width:300px; border:0px; height:27px;padding-top:5px;}
    #searchsubmit {background:black url('images/search.gif') 0px 0px no-repeat; font-size:0px; height:63px; width:60px; border:none; vertical-align:top; cursor: pointer;}
    #searchsubmit:hover {background-position:0px -63px;}

#post-list {width:460px; margin:0px auto; padding-top:70px;}
#post-list .post-wrapper {background: transparent url('images/dot.gif') bottom center no-repeat; padding-bottom:20px; margin-bottom:20px;}
#post-list h1 {margin:0px 0px 20px 70px; color:#333333; }

#post-list h1.standingHeader {margin-bottom:10px;}

.archive-link a {display:block; width:148px; height:72px; background:transparent url('images/read-more.gif') 0px 0px no-repeat; overflow:hidden; text-indent:-999em; margin:0px auto;}
    .archive-link a:hover {background-position:0px -72px;}
    
.page-nav {height:72px; width:316px;margin-bottom:20px; margin:0px auto 20px;}
.page-nav .archive-link.old a {display:block; width:148px; height:72px; background:transparent url('images/old-stuff.gif') 0px 0px no-repeat; overflow:hidden; text-indent:-999em; float:left;}
    .archive-link.old a:hover {background-position:0px -72px;}
    
.page-nav .archive-link.new a {display:block; width:148px; height:72px; background:transparent url('images/new-stuff.gif') 0px 0px no-repeat; overflow:hidden; text-indent:-999em; float:right;}
    .archive-link.new a:hover {background-position:0px -72px;}

#post{  padding-top:70px; width:710px;}
#post h3, #portfolio-item h3 {margin-left:0px;}
#post h1 {margin-left:70px;}
.post { position:relative; padding-left:70px;}
div.page{position:relative; padding-left:70px;}
.post-wrapper h3 {margin-left:70px;}
.post-wrapper h3 a, .post h3 a,
.post-wrapper h1 a {color:#333333; text-decoration:none;}
.post-wrapper h3 a:hover, .post h3 a:hover, .post-wrapper h1 a:hover {color:white;}

#comment-holder {float:left; width:230px; margin-top:130px;}
#comment-holder h2 {color:white;}
#post .post-wrapper{float:right;width:460px;}
/*#portfolio-item {width:480px;}*/
#portfolio-item { padding-top:20px; width:710px;}
#portfolio-item h1 {margin-left:220px;}
#portfolio-item .content {padding-top:0px;}

#leave-reply {cursor:pointer;}
#respond label {display:block; font-size:200%; margin-bottom:3px; line-height:100%;}
#respond input { width:230px; border:none;}
#respond input#submit {border:5px solid #333333; color:#333333; background:#E4E430; padding: 5px 0px; margin-top:10px; cursor:pointer;}
#respond input#submit:hover {border:5px solid #333333; color:white; background:#333333;}
#respond input#submit:active {border:5px solid white; color:#333333; background:white;}
#respond textarea {font-size:150%; line-height:150%; width:230px; border:none; height:200px;}

ol.commentlist { list-style: none; font-size:120%;}
.comment-edit-link {display:none;}
ol.commentlist li.comment { margin-bottom:10px; }
ol.commentlist li.comment div.comment-author { font-size:140%;}
ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
ol.commentlist li.comment div.commentmetadata {margin:3px 0px 10px;}
ol.commentlist li.comment div.commentmetadata a { text-decoration:none; color:white; background:#333333;}
ol.commentlist li.comment p { margin-bottom:6px; line-height:140%;}