* { margin: 0; }

html { height: 100% }

body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #171717 url(http://terenceflowers.net/img/bkg.jpg) no-repeat center top;	
}

body.underhood { background: #171717 url(http://terenceflowers.net/img/bkg-underhood.jpg) no-repeat center top; }

body.expressionengine { background: #171717 url(http://terenceflowers.net/img/ee-bkg.jpg) no-repeat center top; }

.container_12 {
	/* background: #fff url(http://terenceflowers.net/img/12_col.gif) repeat-y !important; 
	margin-bottom: 20px;*/
}

#masthead { 
	height: 140px;
	margin-bottom: 20px;
	background: url(http://terenceflowers.net/img/seperator.gif) repeat-x center bottom;
}

#logo h1 { 
	position: relative;
	top: 15px;
	left: 95px;
}

#overhead { position: relative }

#overhead-items { 
	position:absolute;
	right:25px;
	top:15px;
	width:536px;
	z-index:99;
}

#topbar {
	float: left;
	width: 400px;
}

#topbar ul { 
	list-style: none; 
	margin: 0; 
	padding: 0;
	/* width: 400px; */
	}

#topbar ul li {
	float: left;
	padding-left: 10px ; 
	background:url(http://terenceflowers.net/img/topbar-arrow.gif) no-repeat left center;
	font-size: 12px;
	width: 150px;
	margin: 0 10px 0 0;
	border-right: 1px solid #494949
}

#freelance-sign {
	float: left;
	width: 136px;
}

#tagline p, #sell p { color: #fff; padding-right: 40px }

#who img.bigpic { margin-bottom: 10px }

#screenshot { background: url(http://terenceflowers.net/img/front-screenshot.png) no-repeat; height: 325px; width: 560px !important; margin-left: -10px }

#screenshot .bar { 
	background: url(http://terenceflowers.net/img/screenshot-button.png) no-repeat 0 0;
	width: 216px;
	height: 35px;
	position: relative;
	left: 337px;
	top: 2px;
}

#screenshot .bar ul { 
	list-style: none; 
	padding: 8px 0 0 12px;
}

#screenshot .bar ul li { 
	float: left;
	font-size: 12px;
	width: 100px;
	margin: 0;
} 

#more-info {
	background: url(http://terenceflowers.net/img/more-info-top.gif) no-repeat center top;
	margin-top: 15px;
}

#what-i-can-do .text { width: 195px; margin: 0 auto; }

#what-i-can-do ul { list-style: none; margin: 10px 0 0; padding: 0 }

#what-i-can-do ul li { 
	float: left;
	padding-left: 25px ; 
	background:url(http://terenceflowers.net/img/check.gif) no-repeat left center;
	font-size: 12px;
	width: 195px;
	margin: 0 0 7px 10px;
}

#logo { padding-top: 20px }

#feeds p { padding-right: 55px; background:url(http://terenceflowers.net/img/rss.gif) no-repeat center right }

#icons ul { list-style: none; margin: 10px 0 0 -30px; padding: 0 }

#icons ul li { float: left; font-size: 12px }

#icons ul li.twitter { padding-left: 25px; background:url(http://terenceflowers.net/img/twitter-icon.gif) no-repeat center left; height: 20px; display: block }

#icons ul li.facebook { padding-left: 25px; background:url(http://terenceflowers.net/img/facebook-icon.gif) no-repeat center left; height: 20px; display: block } 

#footer { 
	height: 80px;
	background: url(http://terenceflowers.net/img/seperator.gif) repeat-x center top;
	padding-top: 20px;
	font-size: 11px;
	margin-top: 20px
}

/* ****************  Navigation Menu ******************** */

#main_nav { position: relative ; z-index: 100 }

#main_nav ul {
	list-style: none;
	margin: 0 0 0 125px
}

#main_nav ul li {
	float: left;
	margin: 0;
}

#main_nav ul li a {
	height: 50px;
	display: block;
	background: url("http://terenceflowers.net/img/navigation.png") no-repeat scroll 0 0; 
	text-indent: -999em;
	width: 110px;
}

#main_nav ul li.home a { background-position: 0 0; }
#main_nav ul li.home a.current { background-position: 0 -100px; }
#main_nav ul li.home a:hover { background-position: 0 -50px; }

#main_nav ul li.about a { background-position: -110px 0; }
#main_nav ul li.about a.current { background-position: -110px -100px; }
#main_nav ul li.about a:hover { background-position: -110px -50px; }

#main_nav ul li.work a { background-position: -220px 0; }
#main_nav ul li.work a.current { background-position: -220px -100px; }
#main_nav ul li.work a:hover { background-position: -220px -50px; }

#main_nav ul li.blog a { background-position: -330px 0; }
#main_nav ul li.blog a.current { background-position: -330px -100px; }
#main_nav ul li.blog a:hover { background-position: -330px -50px; }

#main_nav ul li.contact a { background-position: -440px 0; }
#main_nav ul li.contact a.current { background-position: -440px -100px; }
#main_nav ul li.contact a:hover { background-position: -440px -50px; }

/* ******************************************** About Page **************************************** */
	
#quickinfo { 
	background:url(http://terenceflowers.net/img/small-panel-bkg.png) no-repeat;
	height: 312px;
	margin-bottom: 20px;
	color: #666;
}

#quickinfo ul { list-style: none; padding: 0; margin: 0 }

#quickinfo ul li { 
	float: left;
	background: url(http://terenceflowers.net/img/small-star.gif) no-repeat left center;
	padding-left: 15px;
	font-size: 12px;
	margin-left: 10px;	
}

#quickinfo ul li.interest { background-position: left 4px; }

#quickinfo ul li ul li { background: none; width: 150px; margin-left: -5px }

#timeline, #skills { margin-bottom: 20px }

#show-timeline { 
	background: transparent url(http://terenceflowers.net/img/timeline-bkg.png) no-repeat center center;
	float: left; 
	width: 700px; 
	height: 142px;
	margin-bottom: 20px
}

#show-timeline .buttons {
	width: 660px;
	margin: 20px auto;
}

#show-timeline .buttons #view-resume, #show-timeline .buttons #view-time {
	width: 330px;
    float: left;
} 

#timeline input { border: none !important }

/* ******************************************** Blog Page **************************************** */

#blog-categories { margin-bottom: 20px }

#blog-categories ul { list-style: none }

#blog-categories ul li { margin: 0 0 10px 15px; padding: 0 0 5px 0; border-bottom: 1px dotted #303030 }

.entry-info { border-right: 5px solid #303030 }

.entry-info .date_1 { float: left; width: 50%; font-size: 36px }

.entry-info .date_1 span { position: relative; top: 10px; left: 20px }

.entry-info .date_2 { float: left; width: 50% }

.entry-info .date_2 .month { height: 15px; padding-top: 10px; }

.entry-info .more-info { float:right; margin-top:10px; width:120px; }

.entry-text, .read-comments { margin-bottom: 20px }

.pages { float: left } 

.pagination { float: right }

#comment-form { background:#fff }

.back-to-top img { float: right }

.blog_info { margin-bottom: 20px }

.blog_info-bkg { display: block; background: #101010; padding: 10px 10px 5px 10px; }

.blog_info .category, .relative_posted { margin-bottom: -10px }

.seperator { background: url("http://terenceflowers.net/img/seperator.gif") repeat-x scroll center top; height: 20px; margin: 10px 0 }

#recommended .entry .pic {
	/* background: #999; */
	height: 60px
}

.comment-entry .pic { 
	background:url("http://terenceflowers.net/img/cloud.gif") no-repeat scroll left top transparent;
	float:left;
	height:30px;
	width:20px;
}

.comment-entry p { margin-bottom: 0 }

.comment-entry .posted { font-size: 11px; font-weight: bold }

.comment-entry .date { 
	float:left;
	padding-left:5px;
	width:35px;
}

#comment-form { 
	float:left;
	margin:5px 0 0;
	padding:20px 0;
	width:540px;
}

#comment-form ul { list-style:none; padding:0; margin: 0 }		

#comment-form ul li { 
	float: left; 
	width: 520px; 
	margin: 0 0 10px 10px; 
	padding: 0 
}

#comment-form ul li label { float: left; width:100px; }

#comment-form ul li label span { 
	display: block; 
	margin-right: 15px; 
	text-align: right; 
	color:#333; 
	font-weight: bold 
}

#comment-form ul li input { float: left; }

#comment-form ul li input.single { width: 250px; }

#comment-form ul li input.submit { margin-left: 100px }

ul.design-inspiration { list-style: none }

ul.design-inspiration li { width: 540px; margin-bottom: 20px }

ul.design-inspiration li span a { font-size: 14px; font-weight: bold; margin-bottom: 10px; display: block }

#footnotes { font-size: 10px; padding: 15px; border-top: 1px dashed #999 }

.permalink { margin-bottom: 10px }

/* ******************************************** Work Page **************************************** */

#work_nav { background: url(http://terenceflowers.net/img/portfolio-bar-bkg.png) no-repeat; height: 60px; margin-bottom: 10px }

#project-stage { margin-bottom: 20px; background: url(http://terenceflowers.net/img/portfolio-bkg.gif); /* height: 1100px; */ }

.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

div#container { margin: 30px auto 0; padding-left: 45px; overflow: hidden; width: 900px; }

ul#filter { list-style: none; margin: 0 auto; width: 600px; padding: 0}

ul#filter li { margin: 0 }

ul#filter li a { 
	background: url(http://terenceflowers.net/img/work-nav.gif) no-repeat center center;
	float: left;
        width: 100px; 
        height: 40px; 
        text-indent: -999em;
        display: block;
}

ul#filter li#showall a { background-position: 0 0 }
ul#filter li#showall.current a, ul#filter li#showall.current a:hover { background-position: 0 -40px }

ul#filter li#web a { background-position: -100px 0 }
ul#filter li#web.current a, ul#filter li#web.current a:hover { background-position: -100px -40px }

ul#filter li#print a { background-position: -200px 0 }
ul#filter li#print.current a, ul#filter li#print.current a:hover { background-position: -200px -40px }

ul#filter li#brand a { background-position: -300px 0 }
ul#filter li#brand.current a, ul#filter li#brand.current a:hover { background-position: -300px -40px }

ul#filter li#sketch a { background-position: -400px 0 }
ul#filter li#sketch.current a, ul#filter li#sketch.current a:hover { background-position: -400px -40px }

ul#filter li#other a { background-position: -500px 0 }
ul#filter li#other.current a, ul#filter li#other.current a:hover { background-position: -500px -40px }


ul#portfolio { float: left; list-style: none; margin-left: 0; width: 900px; }

ul#portfolio li { 
	float: left; 
	margin: 0 10px 10px 0; 
	/* padding: 5px; */
	width: 275px;
	height: 250px;
	background: transparent url(http://terenceflowers.net/img/portfolio-entry-bkg.png) no-repeat 0 0;
}

ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }
ul#portfolio li .card { display: block; padding-bottom: 5px; margin: 10px }

ul#portfolio li .card .text .title { color: #333; font-weight: bold }
ul#portfolio li .card .text .date { color: #333 }
ul#portfolio li .card .text .link a { color:#930 }

#top-buttons { display: block; height: 30px; margin-bottom: 20px; background: #232323; padding-top: 10px; text-indent: 20px }

#top-buttons p { margin-right: 20px }

.project_pics .pic { border: 1px solid #333; margin: 50px auto 40px; display: block; width: 700px; padding: 5px 5px 0 }

.project_pics .pic2 { margin: 5px auto; display: block; width: 700px; }

.project_pics .end { margin-bottom: 20px }

.what-i-did { float: left; width: 700px; padding-bottom: 20px }

.what-i-did ul { list-style: none; margin: 0; padding: 0 }

.what-i-did ul li { float: left; height: 30px; margin: 0; text-indent: -999em; }

.what-i-did ul li.design { background: url(http://terenceflowers.net/img/icon_role_design.gif) no-repeat left center; width: 200px }
.what-i-did ul li.director { background: url(http://terenceflowers.net/img/icon_role_direction.gif) no-repeat left center; width: 160px }
.what-i-did ul li.html { background: url(http://terenceflowers.net/img/icon_role_css.gif) no-repeat left center; width: 130px }
.what-i-did ul li.develop { background: url(http://terenceflowers.net/img/icon_role_programming.gif) no-repeat left center; width: 200px }

.project_notes p { width: 180px }

#visit_URL { font-size: 10px }


/* ******************************************** Contact Page **************************************** */

#contact-form  #panel-top { background: url(http://terenceflowers.net/img/contact-form-top.gif) no-repeat; height: 25px }
#contact-form  #panel-mid { background: #fff; }
#contact-form  #panel-bottom { background: url(http://terenceflowers.net/img/contact-form-bottom.gif) no-repeat; height: 25px }

#say-hi { 
	background:url(http://terenceflowers.net/img/quick-contact-bkg.gif) no-repeat;
	height: 312px;
	margin-bottom: 20px;
	color: #333;
}

#contact-form  #panel-mid p { width: 90%; margin-left: 40px; color:#333 }

#contact-form  #panel-mid form { margin-left: 40px }

.form-section { width: 90% }

.form-section  p { margin:0; padding:0;}
.form-section label span a { font-size:.9em; margin-left:10px;}
.form-section .clickgroup label { padding-bottom:10px !important;}

input, textarea, select { border:solid 1px #aacfe4; }
	
label { 
	display: block; 
	float: left; 
	font-weight: bold;
	color: #333;
	text-align: right;
    font-size: 11px;
}
		
label.single, label.checkbox { 
	display: inline-block;
    padding-right: 10px;
    width: 115px; 
}

label.comments  { 
	width: 65px; 
}

.field {
	float:left;
	font-size:11px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	margin:2px 0 10px;
}

.checkbox {
	margin-right: 10px
}
	
textarea.quote {
	width: 420px
}

textarea.comments {
    width: 220px;
}
	
input.button {
	/* text-indent: -999em; */
	display: block;
	width: 155px;
	height: 45px;
	border: none;
	cursor:pointer;
	margin: 20px 0 0 100px;
}
	
input.quote {
	background: url(http://terenceflowers.net/img/submit-button.gif) no-repeat 0 0; text-indent: -999em;
}

fieldset {
	border-top:1px dotted #BDBDB5;
	font-size:11px;
	font-weight:bold;
	margin:36px 0;
}

fieldset ul {
	list-style: none;
    margin: 20px 0;
    padding: 0;
}

fieldset ul li {
	margin: 0 0 15px 0;
    float: left;
    width: 100%;
}

fieldset ul li ul li {
    margin:0 0 0 0;
    padding:0 0 0 130px;
}

fieldset ul li ul li label {
	font-weight:normal;
}

legend { padding: 4px; text-transform:uppercase; }

#contact-info ul { list-style: none }

#contact-info { margin-bottom: 20px }