* { margin: 0; padding: 0; }

html { overflow-y: scroll; }

h1, h2, h3, h4, h5, h6 { color: #323a3d; }

body { background: #ededed; font-size: 62.5%; font-family: arial, hlevetica, verdana, sans-serif; color: #5e5e67; }

ul, ol { list-style: none;}

a:link, a:visited, a:hover, a:active { color: #323a3d; text-decoration: underline; }
	a:hover { text-decoration: none; background: #323a3d; color: #ededed; }

@font-face {
	font-family: 'headthinker';
	src: url('../fonts/headthinker_1.001.eot');
	src: local('headthinker'), local('../fonts/headthinker'), url('../fonts/headthinker_1.001.woff') format('woff'), url('../fonts/headthinker_1.001.ttf') format('truetype');
}

img { border: none; }

input, select, textarea { font-size: 1.4em; font-family: arial, helvetica, verdana, sans-serif; }

.hidden { display: none; }

#accessible { display: none;  }
#wrapper { width: 980px; margin: 0 auto; padding: 15px 0 40px 0; }

#header { width: 950px; float: left; margin-bottom: 10px; }
#header h1 { display: block; float: left; }

#header h1 a { display: block; float: left; width: 553px; height: 175px; text-indent: -999999em; background: url(../images/layout/logo.gif) 0 0 no-repeat; }

#header #globalNav { width: 300px; float: right; overflow: hidden; margin-top: 45px; }

#globalNav li { float: right; position: relative; overflow: hidden; text-transform: uppercase; }
#globalNav li a { color: white; text-decoration: none; float: left; font-size: 1.8em; background: #323a3d; padding: 10px; }
#globalNav li a:hover { background: #292929; }

/* if JS */

#globalNav li a span { display: block; background: #fff; color: #323a3d; padding: 10px; position: relative; }
#globalNav li a span:first-child { background: #323a3d; color: #ffffff; }

#content { width: 950px; float: left; padding: 0 15px 30px 15px; position: relative; }

#content #featured, #info #postImage { width: 950px; float: left; position: relative; margin-bottom: 40px; -moz-box-shadow: #323a3d 0 5px 5px; -webkit-box-shadow: #323a3d 0 5px 5px; box-shadow: #323a3d 0 5px 5px; }
#content #featured img { /* position: absolute; top: 0; left: 0; */ }
#content #featured #featuredInfo { width: 930px; float: left; background: url(../images/layout/bg_semi-transparent.png); position: absolute; bottom: 0; padding: 10px; }
#content #featured #featuredInfo h3 { color: #fff; font-size: 6em; font-weight: normal; font-family: headthinker;}

#content #featured #featuredInfo h3 a { color: #fff;}
#content #featured #featuredInfo h3 a:hover { color: #fff; text-decoration: none;}

#content #featured #featuredInfo p { color: #ccc; font-size: 1.2em; }
	#content #featured #featuredInfo p a { color: #fff; }
	
#content #container { width: 950px; float: left; }

#content #container .infoBox { width: 431px; float: left; }
#content #container .infoBox h2 { font-size: 4em; font-weight: normal; font-family: headthinker; color: #323a3d; }

	#content #container #randomStuff.infoBox { float: right; }
	
	#content #container .infoBox ul { width: 431px; float: left; }
	#content #container .infoBox ul li { width: 431px; float: left; background: url(../images/layout/line_break.gif) bottom left repeat-x; padding: 26px 0 28px 0; position: relative;}
	#content #container .infoBox ul li:first-child { padding-top: 0; }

#recentPosts .articleList img { float: left; border: 1px solid #323a3d; }
#recentPosts .articleList h3, #recentPosts .articleList p { margin-left: 80px; position: relative; z-index: 1000; margin-bottom: 10px;}
#recentPosts .articleList h3 { font-size: 1.5em; font-weight: normal; }
#recentPosts .articleList p { font-size: 1.2em; }
#recentPosts .articleList p.date { font-style: italic; }

/* home page "stuff" */
#randomStuff h3 { display: none; }
#randomStuff li { position: relative; }
#randomStuff img.stuffIcon { position: absolute; bottom: 28px; right: 0; z-index: -1;} 
#randomStuff #avfc img.stuffIcon, #randomStuff #worldCup img.stuffIcon { bottom: 10px }
#content #container #randomStuff .articleList li ul li { padding: 0; background: transparent; }

#content #container #randomStuff #twitterFeed p { margin: 0 134px 0 0; font-size: 1.4em; line-height: 20px;  }
#content #container #randomStuff #twitterFeed p a { padding: 0 10px 0 10px; color: #323a3d; }
#content #container #randomStuff #twitterFeed p a:hover { color: #ededed; }
#content #container #randomStuff #twitterFeed p:before { content: url(../images/layout/quote_open.gif); }
#content #container #randomStuff #twitterFeed p:after { content: url(../images/layout/quote_close.gif); }

#content #container #randomStuff #lastFM ul li { display: block; float: left; width: 96px; margin-right: 5px; }
#content #container #randomStuff #lastFM ul li .songInfo { position: absolute; top: 0; left: 0; background: url(../images/layout/bg_semi-transparent.png); width: 84px; height: 84px; padding: 6px; color: #fff; }
#content #container #randomStuff #lastFM ul li .songInfo h4 { color: #fff; font-size: 1.1em; }
#content #container #randomStuff #lastFM ul li .songInfo p { font-size: 1em; }

#content #container #randomStuff #flickr ul li { display: block; float: left; margin-right: 5px; width: auto; }



#content #container #randomStuff #avfc h4, #content #container #randomStuff #worldCup h4 { font-size: 1.4em; }
#content #container #randomStuff #avfc p, #content #container #randomStuff #worldCup p { font-size: 1.2em; margin-bottom: 20px; }
#content #container #randomStuff #avfc li, #content #container #randomStuff #worldCup li { width: 150px; float: left;  }

#loadPosts { border: 1px solid #323a3d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; width: 950px; float: left; text-align: center; -moz-box-shadow:0 0 30px #999 inset; -webkit-box-shadow:0 0 30px #999 inset; box-shadow:0 0 30px #999 inset; margin-bottom: 15px; }
#loadPosts a { text-decoration: none; font-size: 1.4em; text-transform: uppercase; padding: 10px 0; display: block; }

h2 { font-size: 6em; font-weight: normal; font-family: headthinker; color: #323a3d; margin-bottom: 10px; }


#main {width: 750px; float: left;}
#main p { font-size: 1.3em; margin-bottom: 20px; line-height: 20px; }

/* MAIN BLOGROLL */
#info { width: 950px; float: left; }
#info .articleList ul, #info .articleList li { width: 950px; float: left; }
	#info .articleList li { background: url(../images/layout/line_break.gif) bottom left repeat-x; padding: 30px 0; }
	#info .articleList li:first-child { padding-top: 0; }
	#info .articleList img { float: left; border: 1px solid #323a3d; }
	#info .articleList h3, #info .articleList p { margin-left: 140px;}
	#info .articleList h3 { font-size: 4.5em; font-weight: normal; font-family: headthinker; }
	#info .articleList p { font-size: 1.2em;  }

#info h4 { font-size: 2em; }

.lastComment { display: none; }

#sub { width: 150px; float: right; }

#sub .shareLinks { width: 150px; float: left; }
#sub .shareLinks li { display: block; float: left; margin-right: 10px; }

#extra { width: 950px; float: left;}
#extra h3 { font-size: 4em; font-weight: normal; font-family: headthinker; color: #323a3d; }
#extra #commentList { float: left; width: 431px; }
#extra #commentList li { width: 431px; float: left; padding: 26px 0 28px 0; background: url(../images/layout/line_break.gif) bottom left repeat-x; }
#extra #comments.noComments li p { margin-left: 0; }
#extra #commentList li:first-child { padding-top: 0; }
#extra #commentList li h4 { font-size: 1.3em; margin-bottom: 10px; }
#extra #commentList li p { font-size: 1.2em; margin-bottom: 10px;}
#extra #commentList li p:last-child { margin-bottom: 0; }

#extra #commentList .avatar { width: 50px; float: left; background: url(../images/layout/bg_avatar.png) 0 0 no-repeat; padding: 8px 20px 10px 8px;}
#extra #commentList h4, #extra #commentList p { margin-left: 90px; }

#extra #addComment { float: right; width: 431px; }
	#extra #addComment input[type=text], #extra #addComment textarea, #footer input[type=text], #footer textarea { width: 431px; float: left; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px; border: 5px solid #d4d3d3; background: #d4d3d3; outline: none;}
	#extra #addComment input[type=submit], #footer input[type=submit] { background: #323a3d; color: #323a3d;  -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px; border: 5px solid #d4d3d3; background: #d4d3d3; cursor: pointer;}
	
	#extra #addComment li { width: 431px; float: left; margin-bottom: 15px;}
	#extra #addComment li label { font-size: 1.4em; }
	#extra #addComment li label.error { color: #cc0000; }

#portfolio { width: 950px; float: left;  }
#portfolio ul { width: 690px; float: right; }
#portfolio ul li { width: 189px; float: left; margin: 0 0 40px 40px;  }
#portfolio p { font-size: 1.3em; line-height: 20px; margin-bottom: 20px; }
#portfolio #projectInfo { width: 240px; float: left; }
#portfolio #projectInfo h3 { font-size: 1.4em; text-transform: uppercase; margin-bottom: 10px;}
#portfolio #projectInfo p { font-size: 1.2em; line-height: 15px; margin-bottom: 15px; }

#topButton { position: absolute; bottom: -26px; right: 0; }

#footer { border-top: 3px solid #323a3d; background: #d4d3d3; clear: both; }
#footerWrap { width: 950px; margin: 0 auto; position: relative; overflow: hidden; padding: 40px 0 40px 0; }

#footer input[type=text], #footer textarea { border: 5px solid #ededed; background: #ededed; }

#footer input[type=submit] { border: 5px solid #ededed; background: #ededed;}

#footer #contact { width: 431px; float: right; }
	#footer #contact ol { width: 431px; float: left; }
	#footer #contact ol li { width: 431px; float: left; margin-bottom: 10px;  }
	#footer #contact ol li input.formbox, #footer #contact ol li textarea.formbox  { width: 421px; }
	#footer label.error { color: #c00; font-size: 1.2em; width: 431px; float: left; margin-top: 4px; }
	#footer p { font-size: 1.3em; margin-bottom: 5px; }
	
#footer #sitemap { width: 431px; float: left;  }

#footer h3 { font-size: 3em; font-weight: normal; font-family: headthinker; color: #323a3d; }

#footer #footerNav { font-size: 1.2em; width: 100px; float: left; }
#footer #footerNav li { margin-bottom: 10px; width: 100px; float: left; }
#footer #sitemapImages { width: 330px; float: left; }

#footer p.copyright { clear: both; text-align: right; font-size: 1.1em; }


#stage{
	/* The stage contains the individual divs that comprise the halftone icon: */
	height:300px;
	position:absolute;
	left:80px;
	top:20px;
	width:400px;
}

.dot{
	/* The stage contains 192 .dot divs: */
	float:left;
	height:25px;
	width:25px;
}

.dot.active{
	/* When assigned the active class, the div shows a background image of a dot: */
	background:url(../images/icons/dot.png) no-repeat center center;
}

#bunting { display: block; width: 100%; height: 56px; position: absolute; top: 0; left: 0; background: url(../images/layout/bunting.png) 0 0 repeat-x; }