/*  
Theme Name: cribble.net 2010
Theme URI: http://cribble.net
Description: cribble is now sooo 2010!
Version: v3.0
Author: Scott Coello
Author URI: http://cribble.net
Tags: cribble, scott, coello, animation, web, design, 2D, YAY

960px wide = 12 col
10px left/right margin
20px gutter
1 col = 60px   |  2 col = 140px
3 col = 220px  |  4 col = 300px
5 col = 380px  |  6 col = 460px
7 col = 540px  |  8 col = 620px
9 col = 700px  |  10 col = 780px
11 col = 860px |  12 col = 940px

PINK! #F3C

HEY HOT STUFF.

*/

/* 	---------------
	TYPOGRAPH-FLIES 
	---------------	*/

/* serif sheriff */
dt, .commentquotesr, .commentquotesl, #updates .small, #updates .meta, h2, h3, body, .single ol {font-family:  Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;}

/* sans-serif */
textarea, input, #updates p, .news p, .tweets, #commentform textarea, #commentformid, .static, .single, .single ol li span {font-family: Verdana, Arial, sans-serif;}

/* smalleriser */
.small {font-size: 85%;}


/* 	---- -------
	HTML FAGTAGS 
	---- -------	*/

html {
	margin: 0 auto;
	text-align: center;
	background: url('images/bg_paper.jpg') no-repeat #fff;

}
body {
	text-align: left;
	margin: 0 auto;
	line-height: 1.5em;
	color: #606;
}

h1, h5 {text-indent: -9999px; z-index: -22; display: block;}
h2 {
	font-size: 2.3em;
	margin: 40px 0 20px 0;
	text-transform: lowercase;
	line-height: 1.1em;
	font-size-adjust: .51;
}
h3 {
	font-size: 2em;
	margin: 30px 0 20px;
	text-transform: lowercase;
}
h4 {
	font-size: 1.25em;
	margin: 0 0 10px;
	border-bottom: 1px solid #606;
}
h3 a {color: #f3c; border-bottom: 0.1em dashed #f3c;}
h3 a:hover {color: #909; border-bottom: 0.1em dotted #909; background: none;}
a {color: #F3C; text-decoration: none;}
a:hover {color: #fff; background: #f3c;}
input, textarea {
	padding: 8px 5px;
	margin: 10px 0;
	border: none 0;
	color: #606;
	background: #fcf;
	border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
}
input[type="submit"]:hover {cursor: hand; cursor: pointer; color: #fff; background: #606;}

input[type="submit"].shopbutton { 
	font-size: 4em;
	width: 940px;
	text-align: center;
	display: block;
	padding: 8px 5px;
	margin: 10px 0;
	border: none 0;
	color: #606;
	background: #fcf;
	border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;}
input[type="submit"]:hover.shopbutton {cursor: hand; cursor: pointer; color: #fff; background: #606;}
input[type="submit"].shopbuttonsmall { 
	font-size: .9em;
	padding: 8px 5px;
	margin: 0 0;
	border: none 0;
	color: #606;
	background: #fcf;
	border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;}
input[type="submit"]:hover.shopbuttonsmall {cursor: hand; cursor: pointer; color: #fff; background: #606;}


.page {width: 960px; margin: 0 auto; text-align: center;}

dl {float: left; margin: 10px 10px 10px 0;}
dt {
	font-weight: bold;
	font-style: italic;
	font-size: 120%;
	margin-bottom: 14px;
	width: 300px;
	height: 50px;
}

dd {clear:both;}

dd.productimage {
	width: 300px;
	height: 300px;
	overflow: hidden;
	background: #fff;
	border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;
	border: .3em dotted #fcf;
	display: block;
}

dd.productimage img {
	margin:0 auto;
	text-align: center;
	width: 300px;
	height: 300px;
}

dd.productimage:hover {text-indent: -300px;}
dd.productimage a {width: 300px; height: 300px; display: block;}
dd.productimage a:hover {text-indent: -600px;}

/* 	---- ----
	GIVE HEAD 
	---- ----	*/

#head {
	position: relative;
	height: 100px;
	margin-bottom: 80px;
	padding: 0 0 0 10px;
	border-bottom: #f3c dashed 0.1em;
}

#head h1 a {
	background: url('images/cribble_2col.png') no-repeat;
	width: 140px;
	height: 71px;
	float: left;
	margin: 10px 0 0;
}

#head ul {
	clear: both;
	margin: 19px 0 0;
	float: left;	
}

#head li {
	float: left;
	background: #f3c;
	border-bottom-left-radius: 22px;
	border-bottom-right-radius: 22px;
	-moz-border-radius-bottomleft: 22px;
	-moz-border-radius-bottomright: 22px;
	-webkit-border-bottom-left-radius: 22px;
	-webkit-border-bottom-right-radius: 22px;
	margin: 0 10px 0 0;
}

#head ul li ul {
	display: none;
	position: absolute;
	bottom: 0;
	left: 10px;
	margin: 0;
	padding: 0 0 0 10px;
	background: #f3c;
	border-top-left-radius: 22px;
	border-top-right-radius: 22px;
	-moz-border-radius-topleft: 22px;
	-moz-border-radius-topright: 22px;
	-webkit-border-top-left-radius: 22px;
	-webkit-border-top-right-radius: 22px;
	z-index: 100;
	background: #606;
	width: 325px;

}

#head ul li ul li {
	font-size: 1em;
	float: left;
	position: none;
	margin: 0;
	padding: 1px;
	background: none;
}
#head li a {
	padding: 10px 15px 15px;
	display: block;
	color: #fff; 
	font-size: 2em;
}
#head li a:hover {color: #fff; font-size: 2em; background: none;}
#head li:hover {color: #fff; background: #909;}
#head ul li ul li a {color: #fff; font-size: 1em; padding: 5px 10px;}
#head ul li ul li a:hover {color: #fff; font-size: 1em; background: #303; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;}
#head ul li ul li:hover {color: #606; background: none;}

h2.description {float: left; margin: 28px 0 0 20px; font-size: 2em; font-style: italic; font-size-adjust: .5;}

ul#subnavnav {
	float: right;
	font-size: .5em;
	padding: 0;
	margin: 19px 0 0;
	clear: none;
}
ul#subnavnav li a {
	padding: 5px;
}


/* 	- -- -------
	I <3 CONTENT 
	- -- -------	*/

#content {clear: both; text-align: left; margin: 0 0 50px;}

.static {padding: 230px 0 0;}

.alignright {float: right; text-align: right;}
.alignleft {float: left; text-align: left;}
.aligncenter {display: block; margin: 0 auto; text-align: center;}
/* for those single people... I mean pages */
.single {padding: 0 10px;}
.single .meta {padding: 10px 0 10px;}
.single h2 {margin: 60px 0 20px; text-transform: lowercase;}
.single ol {
	list-style: inside decimal;
	font-size: 1.5em;
	margin: 0 0 20px;
	font-style: italic;
	letter-spacing: 0.05em;
}
.single ol li {
	list-style: inside decimal;
	margin: 0 0 10px;
}
.single ol li span {font-size: 1em;}

.sketchbook li {
	float: left;
	padding: 10px;
}

.single img.size-full {
	width: 100%;
	height: auto;
}

h4.otherthings {
	height: 1em;
	margin: 10px 0 20px;
	border-bottom: 0 none; 
}
#singleworkthumbs {
	width: 940px;
	height: 60px;
	overflow: hidden;
	padding: 0 0 20px;
	border-bottom: 0.1em dashed #F3C;
}

#singleworkthumbs li {
	float: left;
	width: 60px;
	height: 60px;
	margin: 0 20px 0 0;
}

#singleworkthumbs li:last-child {margin: 0 0 0 0;}
#singleworkthumbs li img {width: 60px; height: auto;}

/* homepage work selection */

ul#content li {
	float: left;
	margin: 0 10px 20px;
	position: relative;
	z-index: 24;
	width: 300px;
	height: 300px;
	overflow: hidden;
	background: url('images/bg_paper.jpg') no-repeat #fff -300px 0;
	display: block;
}

ul#content li img {
	width: 100%;
	height: 100%;
}
ul#content li:hover {z-index: 25;}
ul#content li h2 {display: none;}
ul#content li:hover h2 {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	font-size: 1.5em;
	line-height: 1.6em;
	width: 100%;
	background: #f3c;
}
ul#content li:hover.music h2 {text-indent: 20px; background: url('images/cat_music.gif') no-repeat 8px 20px #f3c;}
ul#content li:hover.animation h2 {text-indent: 22px; background: url('images/cat_anim.gif') no-repeat 8px 18px #f3c;}
ul#content li:hover.web h2 {text-indent: 24px; background: url('images/cat_web.gif') no-repeat 8px 18px #f3c;}
ul#content li:hover.misc h2 {text-indent: 18px; background: url('images/cat_misc.gif') no-repeat 8px 20px #f3c;}
ul#content li h2 a {color: #fff; padding: 10px; display: block; background: none;}
ul#content li a:hover {background: none;}


/* PLZ CONTACT ME */

#wpcf7-f1-p56-o1 input, #wpcf7-f1-p56-o1 textarea, #wpcf7-f1-p56-o1 .quizbox {font-size: 1em;}
#wpcf7-f1-p56-o1 input {width: 300px;}
#wpcf7-f1-p56-o1 textarea {width: 460px; height: 250px;}
#wpcf7-f1-p56-o1 .quizbox {width: 50px; margin: 0 0 20px;}

/* Commentaramallama */

#commentslisting {float: left;}
#commentform {clear: both;}
.commentlist img {display: block;}
.commentlist {
	width: 460px;
	margin: 0 20px 0 0;
	padding: 0;
	list-style: none;
	float: left;
	overflow: hidden;
}
.commentlist li {
	margin: 10px 0 20px;
	padding: 0;
	list-style: none;
	clear: both;
}
#commentformid {margin: 0 0 0 0; float: left; text-align: left; width: 460px; font-size: 0.9em;}
.commentmetadata {margin: 8px 0; font-size: 0.8em;}
.thecomment {padding: 0 50px 0 68px;}
.commentcontainer {display: block; clear: both;}
.commentquotesl {
	font-size: 6em;
	font-weight: bold;
	float: left;
	padding: 0; margin: 30px 0 0 15px;
}
.commentquotesr {
	font-size: 6em;
	font-weight: bold;
	float: right;
	padding: 0; margin: 20px 0;
}
#commentform input, #commentform textarea {font-size: 1.113em;}
#commentform input {
	float: left;
	clear: left;
	width: 220px;
}
#commentform label {float: left; margin: 10px 0 0 20px; }
#commentform textarea {
	clear: both;
	float: left;
	width: 450px
}
.avatar {float: left; margin: 0 10px 5px 0;}

.errorpad {margin-bottom: 350px;}

/* updates section... because blogs seem pre-historic now */

#updates {
	width: 600px;
	margin: 260px 30px 0 10px;
	float: left;
}
#updates h2 {margin: 0;}

#updates .small {padding-bottom: 20px; margin: 16px 0 20px; border-bottom: 0.15em dashed #f3c;}
#updates .meta {border: 0 none; margin: 0 0 16px;}
.meta {margin: 40px 0 0; border-top: 0.1em #f3c dashed; border-bottom: 0.1em #f3c dashed; }

/* Sidebar cocktail waiter */

#sidebar {
	float: right;
	text-align: left;
	width: 300px;
	padding: 0 10px;
	margin: 240px 0 0;
}

ul.children {
	margin: 0 0 0 10px;
	list-style: disc inside;
}
.categories a {font-size: 1.25em;}

/* paper elements */

.updatesmast {background: url('images/drawing_updates.png') no-repeat top center;}
.about {background: url('images/drawing_about.png') no-repeat top center;}
.contactcribble {background: url('images/drawing_contact.png') no-repeat top center;}
.homerama {background: url('images/drawing_home.png') no-repeat top center;}
.error {background: url('images/drawing_whale.png') no-repeat 250px 100px;}
.eating {background: url('images/drawings_ballseq.gif') no-repeat 700px -200px;}
.shop {background: url('images/drawing_shop.png') no-repeat top center;}
h5.love {
	background: url('images/drawing_love.gif') no-repeat 0 0;
	position: absolute;
	top: 500px;
	right: 100px;
	width: 338px; height: 348px;
	display: block;
}
.ahh {background: url('images/footer_ahh.gif') no-repeat 0 135%;}

/* 	------ -----------
	FOOTER SKIBBIDIDDY 
	------ -----------	*/

#footer {
	clear: both;
	font-size: 1em;
	padding: 0;
	height: 650px;
}
#footer .page {
	text-align: left;
	padding: 20px 0 0;
	border-top: 0.1em #f3c dashed; 
}
#footer h3 {font-size: 1.8em; margin: 0 0 10px;}
#footer h3 a {color: #606; border: 0 none;}
#footer h4 {font-size: 1.5em; border-bottom: 0 none; padding: 0; margin: 0;}

#footer ul {padding: 0;}
#footer li {
	width: 300px;
	padding: 0 10px 40px;
	float: left;
}
#footer ul li ul {
	margin: 20px 0;
	font-size: 1.5em;
	padding: 0;
}
#footer ul li ul li {padding: 0 0 10px;}
.twitter-timestamp {
	font-size: 0.8em;
	font-style: italic;
}
img#wpstats{display:none;}
.date {font-style: italic; font-size: 85%}

#footer .news {
	width: 300px;
	overflow: hidden;
}

#footer .news img {
	width: 100%;
	height: auto;
}

#footer li.tweets {
	width: 280px;
	margin-left: 20px;
}

/* Clearfix (all browsers)-*/
#content:after, #head ul:after, .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} * html .clearfix {height: 1%;} *:first-child+html .clearfix {min-height: 1px;}