/*

	gregorywood.co.uk by Gregory Wood
	VERSION 1.0
	
	CONTENTS ----------
	
		1.BODY
		2.DEFAULT STYLING
		3.HEADINGS
		4.LINKS
		5.LAYOUT
		    5.1 TOP BAR
		6.JOURNAL
			6.1 FULL SCREEN BG IMAGE
			6.2 COMMENTS
				6.2.1 COMMENT LISTING
				6.2.2 COMMENT FORM
		7.ABOUT
		8.404

    -------------------
	
*/



@import url(reset.css); /* RESET CSS */



/* 1.BODY
---------------------------------------------------------------------- */

body { background:#fff; color:#000; font-family:Georgia,serif; font-size:18px; line-height:24px; position:relative; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }

ul#nav_access { position:absolute; top:-9999px; left:-9999px; }



/* 2.DEFAULT STYLING
---------------------------------------------------------------------- */

p,ul,dl,ol { margin-bottom:1em; }

ul { list-style:square; }
ol { list-style:decimal; }

hr { height:0; border:none; border-top:2px dotted #ccc; }

blockquote { margin-bottom:0.7em; font-style:italic; color:#999; font-size:1.2em; line-height:1.3em; border-top:2px solid #ddd; border-bottom:2px solid #ddd; padding:2em 2em 2px 2em; }
blockquote p { margin-bottom:1.6em; } 
blockquote cite { font-style:normal; text-transform:uppercase; letter-spacing:1px; font-size:12px; color:#999; }

abbr { border-bottom:1px dotted; cursor:help; }
abbr:hover { border-bottom-style:solid; }
del { color:#666; }
strong { font-weight:bold; }
em { font-style:italic; }
sup { font-size:0.7em; line-height:1em; position:relative; top:-0.5em; }



/* 3.HEADINGS
---------------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { line-height:1em; }

h1 {  }
h2 { font-size:3em; margin-bottom:0.5em; }
h3 { font-family:Helvetica,Arial,sans-serif; font-weight:bold; font-size:1.2em; margin-bottom:0.7em; padding-top:0.7em; }
h4 { font-family:Helvetica,Arial,sans-serif; font-weight:bold; font-size:1em; margin-bottom:0.7em; padding-top:0.7em; color:#666; }
h6 { font-size:12px; margin-bottom:10px; color:#333; }



/* 4.LINKS
---------------------------------------------------------------------- */

a { color:#666; }
a:hover,
a:focus { color:#333; }



/* 5.LAYOUT
---------------------------------------------------------------------- */

/* 5.1 TOP BAR --------*/

	div#branding { position:absolute; top:0; left:0; background:#000; color:#fff; width:100%; height:30px; z-index:800; }

	div#branding h1 { display:none; }

	div#branding ul { list-style:none; margin:0; height:30px; }
	div#branding ul li { float:left; }
	div#branding ul li a { display:block; text-indent:-9999px; height:30px; background-repeat:no-repeat; background-image:url(../images/site/nav/nav_bg_000.png); background-color:#fff; }
	div#branding ul li a:hover,
	div#branding ul li a:focus { background-color:#ffff00; }

	div#branding ul li#nav_home a { width:177px; background-position:0 0; }
	div#branding ul li#nav_about a { width:22px; background-position:-177px 0; }
	div#branding ul li#nav_rss a { width:23px; background-position:-200px 0; }
	div#branding ul li#nav_contact a { width:22px; background-position:-223px 0; }

	div#post_info { position:absolute; z-index:801; top:0; right:0; height:30px; overflow:hidden; }
	div#post_info h2 { float:left; color:#fff; font-style:italic; font-size:13px; line-height:29px; text-align:right; -webkit-font-smoothing:subpixel-antialiased; }
	div#post_info p { float:left; margin:1px 10px 0 15px; font-family:Verdana,sans-serif; font-size:9px; line-height:29px; font-weight:bold; text-transform:uppercase; }
	div#post_info p a { text-decoration:none; color:#fff; opacity:0.3; -webkit-transition:opacity linear 0.1s; }
	div#post_info p a:hover,
	div#post_info p a:focus { opacity:0.6; }

	div#post_info ul { list-style:none; margin:0; float:left; margin-right:5px; width:44px; height:30px; background:#444 url(../images/site/nav/nav_bg_000.png) no-repeat -246px 0; }
	div#post_info ul li { float:left; }
	div#post_info ul li#nav_next { float:right; }
	div#post_info ul li a { display:block; text-indent:-9999px; width:22px; height:30px; background-repeat:no-repeat; background-image:url(../images/site/nav/nav_bg_000.png); background-color:#fff; }
	div#post_info ul li a:hover,
	div#post_info ul li a:focus { background-color:#ffff00; }

	div#post_info ul li#nav_prev a { background-position:-246px 0; }
	div#post_info ul li#nav_next a { background-position:-268px 0; }
	
	/* 5.1 SHORTURL POPUP --------*/
	
		div#shorturl_popup { background:url(../images/site/shorturl_popup_bg.png) no-repeat 0 0; width:278px; height:66px; position:absolute; right:16px; top:33px; display:none; z-index:9999; }
		div#shorturl_popup.show { display:block; }
		div#shorturl_popup input[type="text"] { font-family:Verdana,sans-serif; font-size:11px; border:1px solid #ccc; padding:4px; width:182px; margin:26px 0 0 19px; }
		div#shorturl_popup input[type="submit"] { margin:25px 0 0 0; }



/* 6.JOURNAL
---------------------------------------------------------------------- */

/* 6.1 FULL SCREEN BG IMAGE --------*/
    
    .fsbg.js-enabled { overflow:hidden; background:url(../images/site/loading_indicator_ccc.gif) no-repeat center center; }
    
	.js-disabled div#bg img { width:100%; }

/* 6.2 COMMENTS --------*/

	div#comments_wrapper { background:rgba(0,0,0,0.8); border-top:2px solid rgba(0,0,0,0.5); clear:both; padding:60px; }
	
	div#journal_comments { width:550px; padding:30px; margin:0 auto; position:relative; background:rgba(255,255,255,0.9); font-family:Georgia,serif; }
	
	div#journal_comments h3 { font-family:Verdana,sans-serif; font-weight:bold; font-size:9px; color:#666; text-transform:uppercase; }
	div#journal_comments h3 strong { font-family:Georgia,serif; font-weight:normal; font-style:italic; color:#000; background:#ffff00; font-size:38px; line-height:38px; width:45px; height:45px; padding:0 3px 2px 3px; text-align:center; border:1px solid #666; float:left; margin:-7px 10px 0 -15px; position:relative; z-index:903; }
	
	div#journal_comments h2 { font-size:20px; font-style:italic; margin-bottom:36px; width:450px; }
	div#journal_comments h2 a { color:#000; text-decoration:none; border-bottom:1px dotted #888; }
	div#journal_comments h2 a:hover,
	div#journal_comments h2 a:focus { border-bottom:1px solid #444; }
	
	div#comment_leave { position:absolute; right:15px; top:48px; }
	div#comment_leave a { text-decoration:none; background:rgba(0,0,0,0.6); padding:5px; border-radius:5px 7px; -webkit-border-radius:5px; -moz-border-radius:5px; color:#fff; font-size:15px; }
	div#comment_leave a:hover,
	div#comment_leave a:focus { background:rgba(0,0,0,0.8); }
	
	/* 6.2.1 COMMENT LISTING --------*/
	
		div#journal_comments ol { list-style:none; font-size:14px; line-height:1.45em; border-top:2px dotted #aaa; margin-bottom:40px; }
		div#journal_comments ol li { padding:20px 95px 20px 20px; border-bottom:2px dotted #aaa; position:relative; }
		div#journal_comments ol li.gregcomment { background:rgba(255,255,204,0.7); }
	
		div#journal_comments ol li p.meta { margin:0; font-family:Verdana,sans-serif; font-weight:bold; color:#999; font-size:9px; text-transform:uppercase; }
		div#journal_comments ol li p.meta a { text-decoration:none; border-bottom:1px dotted #ccc; color:#999; }
		div#journal_comments ol li p.meta a:hover,
		div#journal_comments ol li p.meta a:focus { color:#333; border-bottom:1px solid #666; }
		div#journal_comments ol li p.meta img.avatar { display:inline; position:absolute; right:18px; top:20px; border:3px solid #ccc; }
		div#journal_comments ol li p.meta a:hover img.avatar,
		div#journal_comments ol li p.meta a:focus img.avatar { border:4px solid #bbb; top:19px; right:17px; }
	
	/* 6.2.2 COMMENT FORM --------*/

		form#comment_form label { display:block; height:20px; text-indent:-9999px; background-position:0 0; background-repeat:no-repeat; }
		form#comment_form label[for="comment_comment"] { background-image:url(../images/site/comment_label_comment.png); }
		form#comment_form label[for="comment_name"] { background-image:url(../images/site/comment_label_name.png); }
		form#comment_form label[for="comment_email"] { background-image:url(../images/site/comment_label_email.png); }
		form#comment_form label[for="comment_url"] { background-image:url(../images/site/comment_label_url.png); }
	
		form#comment_form div { width:210px; margin:0 0 15px 340px; }
		form#comment_form div.comment { float:left; width:310px; margin:0; }
	
		form#comment_form textarea { border:2px solid #ccc; padding:3px; width:300px; height:150px; font-family:Georgia,serif; color:#999; font-size:14px; }
		form#comment_form input[type="text"] { border:2px solid #ccc; padding:3px; width:200px; height:20px; font-family:Georgia,serif; color:#999; font-size:14px; }
	
		form#comment_form textarea:focus,
		form#comment_form input[type="text"]:focus { border-color:#999; color:#555; }
		
		form#comment_form div#comment_options { width:530px; padding:10px; margin:25px 0 0 0; clear:both; background:rgba(0,0,0,0.1); border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; overflow:hidden; }
		form#comment_form div#comment_options input[type="checkbox"] { float:left; margin:3px 10px 0 0; }
		form#comment_form div#comment_options label { display:block; width:319px; height:15px; background-image:url(../images/site/comment_label_notify.png); float:left; margin:3px 0 0 0; }
		form#comment_form div#comment_options input[type="submit"] { float:right; }
		


/* 7.ABOUT
---------------------------------------------------------------------- */

.about { background:#000; font-size:16px; line-height:24px; }
.about div#content_wrapper { background:#ffff00 url(../images/site/about_bg.jpg) no-repeat right bottom; min-width:970px; padding:30px 130px 0 0; overflow:hidden; }

.about div#branding { background:#000 url(../images/site/about_branding_bg.gif) no-repeat 266px bottom; }

.about div#content_pri { float:left; width:62%; }
.about div#content_pri h1 { width:584px; height:157px; text-indent:-9999px; background:url(../images/site/about_h1.png) no-repeat 0 0; margin:0 0 40px 0; }
.about div#content_pri h2 { height:22px; text-indent:-9999px; background:url(../images/site/about_pri_h2.png) no-repeat 40px 0; margin:0 0 30px; }
.about div#content_pri p { margin:0 40px 1em 40px; text-align:justify; }
.about div#content_pri a { color:#000; text-decoration:none; border-bottom:1px dotted #000; }
.about div#content_pri a:hover,
.about div#content_pri a:focus { border-style:solid; color:#fff; background:#000; }

.about div#content_sec { float:left; width:38%; background:#fff; padding:197px 0 27px 0; }
.about div#content_sec h2 { height:22px; text-indent:-9999px; background:url(../images/site/about_sec_h2.png) no-repeat center 0; margin:0 0 30px; }
.about div#content_sec p { margin:0 40px 43px 40px; font-size:15px; line-height:24px; text-align:justify; font-style:italic; color:#333; }
.about div#content_sec h6 { margin:0 40px 10px 40px; }

div.app_output { background:#ffffb2; padding:5px; font-family:"Courier New",Courier,monospace; font-size:11px; line-height:1.2em; margin:0 40px 18px 40px; }
div.app_output a { text-decoration:none; border-bottom:1px dotted #666647; }
div.app_output a:hover,
div.app_output a:focus { color:#000; border-bottom:1px solid #666; }

div#flickr_output { margin:0 40px 20px 31px; overflow:hidden; height:50px; }
div#flickr_output div { float:left; margin:0 0 0 9px; width:50px; height:50px; overflow:hidden; text-align:center; }
div#flickr_output div img { display:inline; }



/* 8.404
---------------------------------------------------------------------- */

.fourzerofour { background:#000 url(../images/site/404_girl1.png) no-repeat right top; }

.fourzerofour div#branding { background:#000 url(../images/site/404_branding_bg.png) no-repeat right top; }
.fourzerofour div#branding ul li a:hover,
.fourzerofour div#branding ul li a:focus,
.fourzerofour div#post_info ul li a:hover,
.fourzerofour div#post_info ul li a:focus { background-color:#fcff83; }

.fourzerofour div#page { background:#3c2e21 url(../images/site/404_bg.jpg); position:relative; }

.fourzerofour div#content_wrapper { background:url(../images/site/404_wrapper_bg.png) no-repeat 0 306px; }

.fourzerofour div#content_pri { background:url(../images/site/404_girl1.png) no-repeat right top; }

.fourzerofour div#content_wrapper h1 { width:637px; height:177px; text-indent:-9999px; background:url(../images/site/404_h1.png) no-repeat 0 bottom; margin:0 0 30px 35px; padding-top:135px; }

.fourzerofour div#content_wrapper h2 { width:526px; height:109px; text-indent:-9999px; background:url(../images/site/404_h2.png) no-repeat 0 0; margin:0 0 160px 80px; }

.fourzerofour div#content_wrapper img { position:absolute; right:0; top:0; z-index:801; }

.fourzerofour div#content_wrapper p { width:80%; height:10px; padding:10px 0 10px 34px; margin:0; background:url(../images/site/404_p_bg.png) no-repeat 10px center; font-size:12px; line-height:12px; font-style:italic; color:#ccc; position:relative; bottom:-30px; }
.fourzerofour div#content_wrapper p strong { display:none; }
.fourzerofour div#content_wrapper p a { color:#fcff83; }
.fourzerofour div#content_wrapper p a:hover,
.fourzerofour div#content_wrapper p a:focus { color:#fff; }