@charset "utf-8";
/*
Theme Name:CaramelBiscuit Pro
Theme URI:http://www.caramelbiscuit.com
Description:The 2nd WordPress theme by me for my blog. So there.
Version:2.0
Author:Stuart @ caramelbiscuit ltd dot com
Author URI:http://www.caramelbiscuit.com
*/

/*links*/
#content a, #sidebar a, #headNav li a, .vcard a, .intro a, a.visit{color:#a96b23}
#content a:hover, #sidebar a:hover{text-decoration:underline}
.hidden{position:absolute;top:0;left:0;text-indent:-9000px;visibility:hidden}

body{background:#fffeeb; color:#392200}

#page{position:relative; z-index:2; padding-top:60px}
#logo{position:absolute}
#header{position:relative;display:block}
#headNav{position:absolute;width:480px}
#content, #portfolio, #sidebar{position:relative}
#footer{clear:both; position:relative;display:block}
#copyright{position:relative; clear:both; z-index:2; line-height:2}

/*header styles*/
#headNav li{width:25%;position:relative;float:left;font-size:1.4em; line-height:1.4}
#headNav li a{display:block; position:relative; height:90px; top:-15px; margin-left:-5px; text-align:center; color:#fff}
#headNav li a span{display:block;position:absolute;width:100%;bottom:5px;left:0;text-align:center;font-family:'ChickenScratchRegular'}
#headNav a:hover span{cursor:pointer}
#navBars{display:none}
#workNav{background-color:#74644c}
#aboutNav{background-color:#392200}
#headNav #blogNav{background-color:#eae7e5;color:#74644C}
#btnContact{background-color:#bd6c15}
/*nav on states*/
.home #workNav, .page-id-2 #aboutNav, .blog #blogNav, .single #blogNav, .archive #blogNav, #btnContact.on, .noScript #headNav a:hover{z-index:1;top:0}
#headNav a:hover{text-decoration:none}
/*hovers*/
#workNav:hover{z-index:2}
#aboutNav:hover{z-index:3}
#blogNav:hover{z-index:4}
#btnContact:hover, #btnContact.on{z-index:5}

/*content styles*/
#content h2.pagetitle{font-size:1em; margin-bottom:20px; color:#636629}
.home .post{padding-bottom:20px}
.post{margin-bottom:20px}
.more-link{display:block; width:100%; margin:20px 0; text-align:right; font-family:'ChickenScratchRegular'; font-size:1.6em}
#content a.more-link:hover{text-decoration:none}
.post h2, .post h1, #box1 h3, .portfolio_page h3{position:relative; font-style:italic; font-size:2.0em; color:#a96b23; font-weight:normal; line-height:.9; margin-bottom:0.7em}
.post h2 small, .comment-author .says, .comment-meta{font:normal .7em Arial, Helvetica, sans-serif; text-align:right; color:#74644c}
.post h2 small{display:block;font-size:.3em}
.about_page h2, .portfolio_page h2, #box1 h3, .portfolio_page h3{font-size:1.5em}
.navigation{display:none}
.post p, #box1 p{line-height:1.6; margin-bottom:.7em; font-size:.8em; font-family:Arial, Helvetica, sans-serif}
.post p small{font-family:Arial, Helvetica, sans-serif;font-size:.85em}
.post .postmetadata small{font-size:1em;font-family:Georgia, "Times New Roman", serif}
.post ul{margin-left:13px; font-size:0.8em; margin-bottom:1.2em; list-style-position:inside; list-style-type:disc}
.post ol{margin:0 1.4em 1.2em 1.4em; list-style-type:decimal; list-style-position:inside; font-weight:bold}
.post ol h3{display:inline; font-family:Arial, Helvetica, sans-serif}
.post li{padding-left:13px; line-height:1.5; font-family:Arial, Helvetica, sans-serif}
.post ol li p{font-weight:normal}
.post strong, #box1 strong{color:#000; font-family:Arial, Helvetica, sans-serif}
.post blockquote{margin:0 6px 0 13px; color:#000; font-family:Arial, Helvetica, sans-serif}
.post .postmetadata{font-size:0.7em; padding:10px 10px 20px 10px;width:95%}
.post .postmetadata, .commentlist .comment{-moz-box-shadow:0 2px 0 #eae7e5;-webkit-box-shadow:0 5px 0 #eae7e5;-khtml-box-shadow:0 5px 0 #eae7e5;box-shadow:0 5px 0 #eae7e5}
.entry{margin-bottom:15px; padding:0 30px 0 0}
.even, .alt{padding:12px}
acronym, abbr{font-size:0.9em;letter-spacing:.07em}

/*portfolio page - site list and showcase module shared styles*/
#siteWelcome{padding:0 60px}
p.intro{margin-bottom:1.7em;font-size:1.3em; font-family:georgia, "times new roman", serif}
.intro small{font-size:0.9em}
.portfolio_page #mySites{list-style-type:none; margin:2em 0 0 0; padding:0;font-size:1em}
.portfolio_page #mySites li, #box1{display:block; position:relative; width:720px; clear:both; padding:1.8em 3.8em; margin:1.2em 0}
.portfolio_page #mySites li:after{content:".";visibility:hidden;height:0;display:block;clear:both}
.portfolio_page #mySites img, #box1 img{display:block; margin:0; padding:15px; float:left; background-color:#74644C}
.portfolio_page #mySites li h3, #box1 h3{line-height:1.1;margin-bottom:1.4em}
.portfolio_page #mySites p, #box1 p{width:460px; float:left; padding-left:19px;display:inline; font-size:0.9em}
#box1 p{font-size:0.85em}
.portfolio_page #mySites p strong, #box1 p strong{color:#74644C}
.portfolio_page #mySites a.visit, .hasJS #highlight a.visit{position:absolute;top:25px;left:590px;font-family:"ChickenScratchRegular";font-size:1.3em}
.hasJS #highlight a.visit{-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg)}

/*showcase module unique styles, protected by javascript body class - actual display handled in media queries. keep reading...*/
#showcase{display:none}
.hasJS #box1{margin:0 auto}
.hasJS #highlight div{height:280px}
.hasJS #highlight, .hasJS #c_wrapper{height:280px;overflow:hidden; position:relative;width:100%}
.hasJS #control_bar{width:840px;height:60px;margin:0 auto 20px auto;line-height:2.6;font-size:1.6em;background:url(img/control_bar_bg.png) 0 0 no-repeat}
.hasJS #control_bar a{color:#bd6c15;background-color:#eae7e5}
.hasJS #control_bar a span{padding:0 12px; font-family:'ChickenScratchRegular'}
.hasJS #control_bar a:hover, .hasJS #control_bar a.on{color:#fff;background-color:#74644c;text-decoration:none}
.hasJS #control_bar li{position:relative;display:block;float:left; text-align:center}
.hasJS #control_bar li.prev a span, .hasJS #control_bar li.next a span{background:url(img/sc_arrows.png) 0 0 no-repeat}
.hasJS #control_bar li.prev a span{padding-left:35px;background-position:7px -41px}
.hasJS #control_bar li.next a span{padding-right:35px;background-position:-100px 7px}
.hasJS #control_bar li.prev, .hasJS #control_bar li.next{width:270px}
.hasJS .site_list{width:300px}
.hasJS .site_list ol{text-align:center}
.hasJS .site_list li{display:inline;float:none;background:none}

/*comments*/
#comments, #respond h3, .vcard h3{line-height:2; border-bottom:1px solid #eae7e5; margin:0 0 13px 0; font-style:italic; font-weight:normal; font-size:1.25em}
#respond h3{font-size:1.35em}
#comments{margin:50px 0 23px 0}
#respond{padding-bottom:20px}
.comment-author{font-family:georgia, times new roman, serif; color:#D97200; line-height:1.2}
.commentlist{margin-bottom:60px}
.commentlist .even, .commentlist .alt{border:none}
.comment{margin-bottom:13px}
.commentlist li ul li{font-size:1em}
.commentlist li{font-weight:bold}
.commentlist li .avatar{float:left;margin:2px 5px 0 0;background:#fff}
.commentlist cite, .commentlist cite a{font-style:italic;font-size:1.1em}
.commentlist cite{color:#392200}
.commentlist p{line-height:1.5em; margin:13px 0; font:normal .75em Arial, Helvetica, sans-serif}
.comment-meta{font-weight:normal; text-align:left}
.byuser .comment-author{text-align:right}
.byuser .comment-author img{float:right; margin-left:2px}
.byuser .comment-meta{text-align:right}
#commentform .field{position:relative;width:100%;font-size:1.1em; line-height:1.2; padding:10px 0; font-style:italic; text-transform:lowercase; font-family:Arial, Helvetica, sans-serif}
#commentform .field small{font-size:.7em; font-style:normal; font-family:Arial, Helvetica, sans-serif}
.field .fielderror{position:absolute;top:29px;left:195px;padding:0 0 12px 35px;line-height:1.8;background:url(img/form_error.png) 0 0 no-repeat}
.comment_field .fielderror{top:5px}
.field .errorlabel, .field .errorfield, .field .fielderror{color:#900202}
#commentform p.cs_error_msg{font-size:0.8em;line-height:1.6}
#commentform input{padding:6px 12px;font-style:normal}
#commentform textarea{font-size:1.0em; padding:12px; width:80%;font-style:normal}
#submit{padding:10px; font-weight:bold; color:#f98700; font-size:1.2em; cursor:pointer;font-style:normal}

/*sidebar*/
#sidebar ul{font-size:.85em}
#sidebar ul ul{font-size:1em; padding-left:10%; padding-top:20px}
#sidebar ul li{line-height:2}
#sidebar ul li.widget{font-size:1.3em; text-transform:lowercase; font-style:italic; margin-bottom:20px; color:#392200}
#sidebar ul li.widget li{font-weight:normal; line-height:1.4; font-style:normal; font-size:.7em; margin-bottom:9px}
#sidebar ul li span.rss-date{display:block}

/*sidebar photos*/
#photoStream li{width:75px; float:left; line-height:1; padding-right:6px}
#photoStream li.widget{float:none; line-height:2; padding:0; display:block; width:100%}

/*footer*/
.vcard h3{font-size:1.1em;line-height:1;border:none}
.vcard p{font:normal .85em Arial, Helvetica, sans-serif; line-height:1.3}
.vcard span{font-family:Arial, Helvetica, sans-serif}
.grabVcard{display:block; margin:13px 0}
#copyright p{font-size:.7em; line-height:2.6; text-align:center}
#copyright p a{color:#392200}

/*JS enabled users in modern browsers get this:*/
.hasJS{background:#F8C570 url(img/body_bg.gif) 0 0 fixed repeat-x}
.hasJS #page, .hasJS #box1{background:url(img/content_bg.png) 0 0 repeat}
.hasJS .post .postmetadata, .hasJS .commentlist .comment{-moz-box-shadow:0 2px 0 #74644c;-webkit-box-shadow:0 5px 0 #74644c;-khtml-box-shadow:0 5px 0 #74644c;box-shadow:0 5px 0 #74644c}
.hasJS #footer .vcard{display:none}
.hasJS #respond h3{border:none}
.hasJS img#ajaxLoader{display:block;margin:0 auto;padding-top:30px;border:none;background:none;float:none}
.hasJS #c_wrapper img#ajaxLoader{padding-top:120px}

/*contact panel*/
.hasJS #contactPanel {display:none;position:absolute;top:160px;left:175px;width:576px;height:432px;z-index:99}
#contactPanel, #preload{background:url(img/contact_bg.png) 0 0 no-repeat}
.hasJS #contactPanel .vcard{padding:136px 0 0 114px;display:block}
#closeContact, .hasJS .grabVcard{display:block;width:81px;height:83px;background:url(img/btns_bg.gif) 0 0 no-repeat}
#closeContact{position:absolute;top:74px;right:86px;height:43px;background-position:0 -97px}
.hasJS .grabVcard{margin:0;position:absolute;top:237px;left:391px}
.hasJS .grabVcard span, #closeContact span{display:none}
/*quick hack to cache contact background*/
.hasJS #preload{width:0;height:0;position:absolute;top:0;left:0;visibility:hidden}

/*social & validation links*/
#connect{position:relative;width:840px;height:81px;margin:0 auto;padding-top:20px}
#social{position:relative;float:right}
#valid{position:relative;float:left}
#connect li{display:inline}
#social li, #valid li{display:inline;width:79px;height:81px;margin:0 5px 0 0}
#connect li a{display:block; float:left; width:79px; height:81px; background:url(img/icons_sprite.png) 0 0 no-repeat}
#connect a .hidden{position:absolute;top:0;left:-9000px; display:block; width:0; height:0; visibility:hidden}
.noScript #connect #cnTwitter:hover{background-position:-324px 0}
#connect #cnFLickr{background-position:-79px 0}
.noScript #connect #cnFLickr:hover{background-position:-403px 0}
#connect #cnLinkedin{width:83px;background-position:-158px 0}
.noScript #connect #cnLinkedin:hover{background-position:-482px 0}
#connect #cnMicroformats{clear:left;background-position:0 -89px}
#connect #cnHtml5{background-position: -79px -89px}
#connect #cnValidCss{background-position:-158px -89px}
#connect #cnCss3{width:83px;background-position:-237px -89px}

/*layout media switching*/

@media screen and (min-width: 960px) {
	/* layout for larger screens, mainly desktop browsers, min 960px wide which is intended site width. device independent - same as .media */
	#page{width:960px; margin:0 auto}
	#header{width:960px;height:157px;margin:0 auto 15px auto} 
	#logo{top:10px;left:10px}
	#headNav{top:0;left:420px}
	#content{float:left; width:540px; margin:0 60px 30px 60px}
	#samples{display:none}
	#portfolio{float:left; width:840px; margin:0 60px 30px 60px}
	#sidebar{width:300px; float:left; padding:2px 0 22px 0}
	#footer{width:840px; padding:0 60px}
	#copyright{width:840px; margin:0 auto; padding:24px 60px}

	.hasJS #fancy{background:url(img/page_bg_3.jpg) right 0 fixed no-repeat}
	.hasJS #showcase{display:block;width:960px;margin:0 auto;position:relative;z-index:11}
	.hasJS .zippy{display:block;position:absolute;top:20px;left:20px;width:30px;height:30px;background-position:0 0;background-repeat:no-repeat;z-index:10}
	.hasJS #mySites{display:none}
	/*checker board footer is fixed width so only for large displays*/
	.hasJS #footer{padding:0;width:960px}
	.hasJS #connect #valid, .hasJS #connect #social{float:none;position:absolute;top:0;left:0}
	.hasJS #connect{height:245px;position:relative;width:960px;padding-top:1px;background:url(img/board_bg.png) 0 0 no-repeat}
	.hasJS #connect li{display:inline}
	.hasJS #connect li a{display:block;width:80px;height:80px;position:absolute}
	.hasJS #connect li .blob{position:absolute;display:block;width:80px;height:80px;top:0;left:0;z-index:2}
	.hasJS span.orange{background-color:#A96B23}
	.hasJS span.brown{background-color:#392200}
	.hasJS span.grey{background-color:#EAE7E5}
	.hasJS span.darkgrey{background-color:#74644C}
	.hasJS #cnTwitter{top:164px;left:312px}
	.hasJS #cnFLickr{top:164px;left:476px}
	.hasJS #cnLinkedin{top:164px;left:722px}
	.hasJS #cnMicroformats{top:82px;left:148px}
	.hasJS #cnHtml5{top:82px;left:312px}
	.hasJS #cnValidCss{top:82px;left:558px}
	.hasJS #cnCss3{top:82px;left:640px}
}

@media screen and (max-width: 959px) and (min-width: 490px) {
	/*intermediate fluid layout for displays larger than 490px & upto 959px, device independent. not perfect yet on portfolio page but not bad*/
	#page{width:100%;margin:0}
	#header{width:100%;height:257px;margin-bottom:10px}
	#logo{top:100px;left:10px}
	#headNav{width:100%;top:0;left:0}
	#siteWelcome{padding:0}
	#content{float:left;width:50%; margin:0 10% 20px 10%}
	#portfolio{float:none;width:80%;margin:0 10% 20px 10%}
	.portfolio_page #mySites li{width:90%;padding:10px 5%}
	.portfolio_page #mySites p{width:50%}
	#sidebar{width:30%;float:left}
	#connect{width:90%;margin:20px auto; padding:0 0 20px 0}
	#copyright{width:80%;margin:0 auto}
	.portfolio_page #mySites a.visit{float:left;position:relative;top:0;left:0;padding-left:19px}
}

@media screen and (max-width: 489px) {
	 /*narrow layout for small screen devices, mainly smartphones, max 489px wide,*/  
	.hasJS{background:#fffeeb}
    .hasJS #page{width:470px; margin:0;background:none}
    #fancy{background-image:none}
	#header{width:470px;height:257px; margin-bottom:15px}
	#logo{top:100px;left:10px}
	#headNav{top:0;left:0;width:470px}
	#content{float:none; width:450px; margin:0 10px 20px 10px}
	#siteWelcome{padding:0 10px}
	#portfolio{float:none; width:450px; margin:0 10px 20px 10px}
	.portfolio_page #mySites li{width:400px;padding:10px 20px}
	.portfolio_page #mySites p{width:90%}
	.portfolio_page #mySites img{float:none; margin:0 auto 10px auto}
	.portfolio_page #mySites li h3{float:none}
	#sidebar{float:none; width:95%;padding-left:5%}
	#footer{width:450px;padding:10px;height:240px}
	#footer ul{position:relative;float:none; margin:0 auto; text-align:center}
	#connect{width:460px;height:auto}
    #social, #valid{float:none;position:relative}
	#connect:after{content:".";clear:both;height:0px; visibility:hidden; display:block}
	#copyright{width:450px; margin:0; padding:14px 10px}
	.portfolio_page #mySites a.visit{position:relative;top:0;left:0}
	.hasJS #contactPanel{left:-60px}
}

/*Set 'full res' layout for older versions of FF, Camino - need to append script to cater for all older browsers, exc. IE*/
	.media #page{width:960px; margin:0 auto}
	.media #header{width:960px;height:157px; margin:0 auto 25px auto} 
	.media #logo{top:10px;left:10px}
	.media #headNav{top:0;left:420px}
	.media #content{float:left; width:540px; margin:0 60px 30px 60px}
	.media #samples{display:none}
	.media #portfolio{float:left; width:840px; margin:0 60px 30px 60px}
	.media #sidebar{width:300px; float:left; padding:2px 0 22px 0}
	.media #footer{width:840px; padding:0 60px}
	.media #copyright{width:840px; margin:0 auto; padding:24px 60px}

	.media.hasJS #fancy{background:url(img/page_bg_3.jpg) right 0 fixed no-repeat}
	.media.hasJS #showcase{display:block;width:960px;margin:0 auto;position:relative;z-index:11}
	.media.hasJS .zippy{display:block;position:absolute;top:20px;left:20px;width:30px;height:30px;background-position:0 0;background-repeat:no-repeat;z-index:10}
	.media.hasJS #mySites{display:none}
	/*checker board footer is fixed width so only for large displays*/
	.media.hasJS #footer{padding:0;width:960px}
	.media.hasJS #connect #valid, .media .hasJS #connect #social{float:none;position:absolute;top:0;left:0}
	.media.hasJS #connect{height:245px;position:relative;width:960px;padding-top:1px;background:url(img/board_bg.png) 0 0 no-repeat}
	.media.hasJS #connect li{display:inline}
	.media.hasJS #connect li a{display:block;width:80px;height:80px;position:absolute}
	.media.hasJS #connect li .blob{position:absolute;display:block;width:80px;height:80px;top:0;left:0;z-index:2}
	.media.hasJS span.orange{background-color:#A96B23}
	.media.hasJS span.brown{background-color:#392200}
	.media.hasJS span.grey{background-color:#EAE7E5}
	.media.hasJS span.darkgrey{background-color:#74644C}
	.media.hasJS #cnTwitter{top:164px;left:312px}
	.media.hasJS #cnFLickr{top:164px;left:476px}
	.media.hasJS #cnLinkedin{top:164px;left:722px}
	.media.hasJS #cnMicroformats{top:82px;left:148px}
	.media.hasJS #cnHtml5{top:82px;left:312px}
	.media.hasJS #cnValidCss{top:82px;left:558px}
	.media.hasJS #cnCss3{top:82px;left:640px}

/*end @media craziness*/

/* just to round off... non-essential css3 enhancements: opera 10.* supports border-radius, FF3, Webkit & Konq use vendor specific, ms ie9 put in as afterthought for now and is untested */
#page, .comment, textarea, input, select, .postmetadata, #mySites img, #box1 img, .hasJS #box1, .hasJS .blob, .hasJS #control_bar a{
	-moz-border-radius:12px;
	-khtml-border-radius:12px;
	-webkit-border-radius:12px;
	border-radius:12px;
	-ms-border-radius:12px;
}
#headNav li a{
	-moz-border-radius-bottomleft:12px;
	-moz-border-radius-bottomright:12px;
	-ms-border-radius-bottomleft:12px;
	-ms-border-bottom-right-radius:12px;
	-khtml-border-radius-bottomleft:12px;
	-khtml-border-radius-bottomright:12px;
	-webkit-border-bottom-left-radius:12px;
	-webkit-border-bottom-right-radius:12px;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px
}