/*
	Name: Gist Create
	Date: September 2009
	Version: 1.0
	Author: Jon Livingston
	Website URI: http://gistcreate.com
*/

/* Imports */

@import url("/css/typography.css");
@import url("/css/reset.css");
@import url("/css/easySlider.css");


/***** Global *****/

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

/* Body */
body {
	background: #fff url(/images/presentation/bg.jpg) repeat-x 0 0;
	color: #333;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* 
	Headings 
*****************/
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}		/* 14px */

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}
	
/* 
	Anchors 
*****************/

a{outline: 0;}


a:link, a:visited {
	color: #990000;
	text-decoration: none;
}

a:hover, div.small-frame p a:hover, div.small-frame h4 a:hover, div.small-frame-blog h3 a:hover {
	color: #000;
	border-bottom:2px solid #990000;
}

.small-frame-featured a:hover, .large-frame-featured a:hover, div.small-frame a:hover, div.small-frame-copy a:hover, div.small-frame-blog a:hover, ul.nav a:hover {
	border-bottom: none;
}

ul.nav a {
	line-height: 25px;
}

ul.nav a:link, ul.nav a:visited {
	color: #000;
	text-decoration: none;
}

ul.nav a:hover {
	color: #990000;
}

ul.nav a.active {
	color: #990000;

	padding-top:4px;

}

/*
	Container
*****************/

div.wrapper {
	margin:0 auto;
	padding:10px 0 0;
	width:960px;
	text-align: left;
}

div.wrap {
	margin:0 auto;
	padding:10px 0 0;
	width:960px;
	text-align: left;
}

/*
	Header
*****************/

#header {
	width: 960px;
	margin:20px auto 20px auto;	
}

h1.logo {
	position:relative;
	height:44px;
	left:90px;
	top:0;
	width:165px;
}

h1.logo a {
	float: left;
	width: 208px;
	height: 44px;
	overflow: hidden;
	background: url(/images/presentation/gist-create.gif) no-repeat 0 0;
	text-indent: -1000em;
    margin-top:15px;
}

h1.logo a:hover {border:none;}

ul.nav {
	font-family: "museo-1","museo-2", sans-serif, Helvetica, Arial;
	right:30px;
	padding:28px 0 0 0;
	position:absolute;
	top:0;
	text-align: right;
}

ul.nav li {
display:inline;
margin:0 0 0 30px;
}

/*
	Slogan
*****************/

div.slogan {
	clear: both;
	margin: 20px 0 40px 90px;
}


/*
	Featured
*****************/

div.hr {
	height: 6px;
	background:transparent url(/images/presentation/hr-1.png) no-repeat scroll center;
	padding: 30px 0;
	clear:both;
}

div.hr-plain {
	height: 6px;
	background:transparent url(/images/presentation/hr-1.png) no-repeat scroll 5px;
	width:960px;

}

div.hr-footer {
	height: 20px;
	background:transparent url(/images/presentation/hr-1.png) no-repeat scroll center;
	padding: 10px 0 20px 0;
	clear:both;
}

div.hr hr, div.hr-footer hr, div.hr-plain hr {display: none;}


#featured-projects {
	width: 960px;
}
#featured {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px;
	width: 960px;
}

div.featured-nav {
	float:left;
	margin-top: 20px;
	background: transparent url(/images/presentation/hr-featured.png) no-repeat scroll center 5px;
	width:960px;
	clear:left.
}

div.featured-nav h3 {
	margin-left:90px;
	font-size:18px;
	color: #990000;
	text-shadow: 0 1px 0 #fff;
}

div.featured-nav-below {
	float:left;
	margin:30px 0;
	background: transparent url(/images/presentation/hr-featured.png) no-repeat scroll center 5px;
	width:960px;
}

div.featured-nav-below h3 {
	margin-left:90px;
	font-size:18px;
	color: #990000;
}

#featured figure {
	border: 2px solid #eee;
	float: right;
	margin: 0.786em 2em 0 5em;
	width: 248px;
}

#featured-left {
	float:left;
	width: 615px;
	margin:20px 0 0 0;
}

#featured-left img {
	border: 1px solid #C9C0B2;
	padding:12px;
	background-color: #EFEFE5;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

#featured-right {
	float:right;
	width: 300px;
	margin: 20px 0 0 0;
}

#featured-right img {
	border: 1px solid #C9C0B2;
	padding:8px;
	background-color: #EFEFE5;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
.small-frame-featured {
	padding-bottom:25px;
	background:transparent url(/images/presentation/shadow-sm.png) no-repeat scroll center bottom;
}
.large-frame-featured {
	margin-left:15px;
	padding-bottom:34px;
	background:transparent url(/images/presentation/shadow-lg.png) no-repeat scroll center bottom;
}


#about-gist {
	float:left;
	margin-left: 15px;
	width:440px;

}
#about-gist p {
	font-size: 15px;
	padding-right: 20px;
	line-height: 1.5em;
}
#twitter {
	float:left;
	margin:0 0 20px 15px;

}

#newsletter {
	float:left;
	margin-left:15px;
	width:460px;
}

#let-us-help {
	float:left;
	margin-left:15px;
	width:460px;
}

div.list {
		width: 230px;
		float: left;
		padding: 0 0 15px 0px;
}

div.list p {
	margin-top:15px;
}

div.highlights {
	width:500px;
	margin:20px 0 0 80px;
	padding: 30px 0 40px 0px;
}
div.highlights-body {
	width:290px;
	margin:10px 0 0 0;
	padding: 0 0 40px 0px;
}
#project-details .highlights h3 {
	font-size: 20px;
}
div.list ul li, div.highlights ul li, div.highlights-body ul li {
	font-size:15px;
	padding: 2px 10px 2px 30px;
	background: transparent url("/images/presentation/bullet-check.png") no-repeat 0 50%;
	background-position:1px 6px;
	line-height: 160%;
}

/*
	Services
*****************/


div.service img {
	float: left;
	margin-right: 20px;
	border: 1px solid #C9C0B2;
	padding:8px;
	background-color: #EFEFE5;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}


div.service h3 {
	background:transparent url(/images/presentation/shadow-sm.png) no-repeat scroll center -10px;
	line-height: 36px;
	text-align: center;
	padding-top:10px;
	font-size: 18px;
}
/*
	Projects
*****************/

div.three-wide {
	float:left;
	margin-top:20px;
	width:960px;
}

div.small-frame {
	float:left;
	padding:0 5px 30px 15px;

}
div.small-frame-copy {
	float:left;
	padding:0 5px 30px 15px;
	height:350px;
}

div.small-frame-copy-lg {
	float:left;
	padding:0 5px 30px 15px;
	height:375px;
}
div.small-frame img, div.small-frame-copy img, div.small-frame-copy-lg img {
	border: 1px solid #C9C0B2;
	padding:8px;
	background-color: #EFEFE5;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
div.small-frame-copy h3, div.small-frame-copy-lg h3 {
	font-size:18px;
	width:300px;
}
div.small-frame-copy-lg h3 span {
	font-size: 13px;
	color: #333;
}
div.small-frame h4 {
	background:transparent url(/images/presentation/shadow-sm.png) no-repeat scroll center -10px;
	line-height: 36px;
	text-align: center;
	padding-top:10px;
	font-size: 18px;
	text-shadow: 0 1px 0 #fff;
}
div.small-frame p {
	margin-top: -15px;
	line-height: 16px;
	text-align: center;
	font-size: 13px;
}
div.small-frame-copy p, div.small-frame-copy-lg p {
	background:transparent url(/images/presentation/shadow-sm.png) no-repeat scroll center -10px;
	line-height: 24px;
	text-align: left;
	padding-top:20px;
	font-size: 15px;
	width:300px;
}




div.small-frame-blog {
	float:left;
	padding:0 5px 30px 15px;
	height: 400px;
	
}
div.small-frame-blog img {
	border: 1px solid #C9C0B2;
	padding:8px;
	background-color: #EFEFE5;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
div.small-frame-blog h3 {
	background:transparent url(/images/presentation/shadow-sm.png) no-repeat scroll center -10px;
	line-height: 22px;
	text-align: left;
	padding-top:20px;
	font-size:18px;
	width:300px;
}
	
div.small-frame-blog p {
	
	font-size: 14px;
	width:300px;
	margin-bottom:1em;
}

div.small-frame-blog p.comments  {
	background:transparent url(/images/presentation/comment-bar.png) no-repeat scroll center 0;
	padding:9px 0;
	height:38px;
	 }
div.small-frame-blog p.comments a:hover { color:#000; }
div.small-frame-blog p.comments span {

padding:0 8px;
color:#C9C0B2;
}
.comments .leave-comment  {
	background: transparent url("/images/presentation/comment-icon.png") no-repeat 0 2px;
	padding-left:30px;
}
/*
	Clients
*****************/
.clients {
	margin:0 0 20px 15px;
	width:945px;
	clear: both;
}
.clients ul {
	float:left;
	margin-bottom: 30px;

}
.clients ul li {
	float:left;
	font-size:15px;

	margin-right:10px;
	padding: 2px 10px 2px 30px;
	background: transparent url("/images/presentation/bullet-check.png") no-repeat 0 50%;
	background-position:1px 6px;
	line-height: 160%;
	width:265px;}
/*
	Case Studies
*****************/
#project-details {
	margin: 20px 0 25px 15px;
	width:945px;
}

#project-details h3 {
	font-size: 18px;
	font-weight: 50000;
	color: #000;
}
#project-details p.intro-copy {
	font-size:18px;
	line-height:1.4em;
	margin-bottom: 30px;
	padding-right:20px;
	
}
#project-details p {
	font-size:16px;
	line-height:24px;
	margin:0 0 1.5em 0;
}

.project-highlights {
	float: right;
	margin-left: 25px;
	width: 626px;
	background:transparent url(/images/presentation/viewer-bg.png) no-repeat scroll 0 0;

}
.project-viewer {
	margin: 13px 0 0 13px;
	width: 600px;

}
.project-highlights img {
	background-color:#EFEFE5;
	height: 567px;



}



/*
	Process
*****************/
div.process {
	margin-left:15px;
}
div.process img {
	float:left;
	margin:30px 55px 150px 0;
}
div.process h4 {
	font-size: 20px;
	font-weight: normal;
	margin:10px 0;
}
/*
	Blog
*****************/
div.paging {
	float:right;
	margin:0 15px 20px 0;
}
#blog-body {
	float: left;
	width: 610px;
	margin:0 15px 40px 0;
}
#blog-body p {
	margin: 0 30px 1em 15px;
	
}
#blog-side {
	float: left;
	width: 320px;
	margin-bottom:40px;
}
#blog-side ul {
	margin-bottom:2em;
}
#blog-side h3 {
	font-size: 18px;
	font-weight: normal;
}
#blog-side blockquote {
	font-size:16px;
	color: #533517;
	font-style: italic;
}

#blog-body cite {
	margin: 0 0 20px 110px;
	font-size:14px;
	line-height: 50px;
}

#blog-body p.attr {
	color:#333;
	font-weight:normal;
	margin:0 0 20px 100px;
	text-align:left;
}

.blog-image {
	float:right;
	margin:0 30px 10px 20px;

}

.blog-image img {
	background-color:#EFEFE5;
	border:1px solid #C9C0B2;
	padding:12px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

.twitter-side {
	margin-bottom:2em;
}
.twitter-side blockquote { margin-bottom: 1em;}
.twitter-side cite { font-size: 14px;}
.twitter-side p {
	margin-top:20px;
}
#blog-side span {
padding:0 4px;
color:#333;
font-weight: normal;
}

#blog-side apan.light {
font-weight: normal;
margin:0;
padding:0;
}

/*
	Blog Comments
*****************/
#comments {
	width:940px;
	margin-left:15px;
	font-size:14px;
	clear:both;
}
#comments ol.comment-list li {
	margin-bottom:40px;
}
div.comment-author {
	float:left;

}
div.comment-text h4{
	font-size:18px;
}
div.comment-text {
	margin: 0 10px 0 145px;
}
div.comment-text span {
	font-size:14px;
}
#gravatar-container {
	float:left;
	margin:0;

}
div.gravatar {
	background:transparent url(/images/presentation/shadow-tn.png) no-repeat scroll center bottom;
	padding-bottom: 37px;
	width:88px;
}

.gravatar img {
	background-color:#EFEFE5;
	border:1px solid #C9C0B2;
	padding:4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
form#comment_form {
	width:940px;
}
form#comment_form h3 { margin-top:5px;}
form#comment_form label {
	clear:both;
	display:block;
	float:left;
	margin:12px 0 0 15px;
	font-size:16px;
	width: 140px;
}

form#comment_form input {
	float: left;
	border: 1px solid #C9C0B2;
	background:rgba(201, 192, 178, 0.2) none repeat scroll 0 0;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	margin-bottom:30px;
	width: 440px;
}
form#comment_form textarea {
	float: left;
	border: 1px solid #C9C0B2;
	background:rgba(201, 192, 178, 0.2) none repeat scroll 0 0;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	margin-bottom:30px;
	width: 440px;
}
form#comment_form input, form#comment_form textarea {padding:12px;}
form#comment_form textarea {
	font-family:GraublauWeb,'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;
}
form#comment_form input:focus, form#comment_form textarea:focus {
	border: 1px solid #C9C0B2;
	background:rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
}

form#comment_form input.submit {
	clear:left;
	margin-left: 155px;
	width:200px;
	background:rgba(255, 248, 220, 1.0) none repeat scroll 0 0;
}

form#comment_form input.submit:focus {
	border: 1px solid #C9C0B2;
	background:rgba(255, 255, 153, 0.9) none repeat scroll 0 0;
}
form#comment_form p {
	float:left;
	margin: -5px 0 0 10px;
}
form#comment_form input.comment-options {
	clear:both;
	float:left;
	margin-left:155px;
	padding:0;
	width:20px;
}
#blog-body ul {
	margin: 0 0 1em 0;
}
#blog-body ul li {
	font-size:16px;
	margin-left: 30px;
	padding: 2px 10px 2px 30px;
	width: 530px;
	background: transparent url("/images/presentation/bullet-check.png") no-repeat 0 50%;
	background-position:1px 6px;
	line-height: 160%;
}
/*
	Contact
*****************/
#contact-form {
	margin-left: 15px;

}
#contact-form h3 { margin-top:5px;}
#contact-form label {
	clear:both;
	display:block;
	float:left;
	margin:12px 0 0 0;
	font-size:16px;
	width: 140px;
}

#contact-form input {
	float: left;
	border: 1px solid #C9C0B2;
	background:rgba(201, 192, 178, 0.2) none repeat scroll 0 0;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	margin-bottom:30px;
	width: 380px;
}
#contact-form textarea {
	float: left;
	border: 1px solid #C9C0B2;
	background:rgba(201, 192, 178, 0.2) none repeat scroll 0 0;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	font-size:16px;
	margin-bottom:30px;
	width: 380px;
}
#contact-form input, #contact-form textarea {padding:12px;}
#contact-form textarea {
	font-family:GraublauWeb,'Lucida Sans','Lucida Grande','Lucida Sans Unicode',sans-serif;
}
#contact-form input:focus, #contact-form textarea:focus {
	border: 1px solid #C9C0B2;
	background:rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
}

#contact-form input.submit {
	clear:left;
	margin-left: 140px;
	width:200px;
	background:rgba(255, 248, 220, 1.0) none repeat scroll 0 0;
}

#contact-form input.submit:focus {
	border: 1px solid #C9C0B2;
	background:rgba(255, 255, 153, 0.9) none repeat scroll 0 0;
}
#contact-form p {
	float:left;
	margin: -5px 0 0 10px;
}

#contact-form input.comment-options {
	clear:both;
	float:left;
	margin-left:155px;
	padding:0;
	width:20px;
}

/*
	Footer
*****************/

#footer {
	margin: 0 0 80px 0px;
}

span.small {
	margin: 40px 0 0 15px;
	font-size: 14px;
}
#footer-left {
	float: left;
	background: transparent url("/images/presentation/project-guide.png") no-repeat 0 0;
	margin-left:15px;
	padding: 0 0 0 60px;
	width: 258px;
}
#footer-left p {
	margin: -10px 0 0 0;
	font-size: 12px;
	color: #000;
}
#footer-left h3 {
	line-height: 1.1em;
	display:block;
}
#footer-right {

	margin: 0 0 0 240px;

}
#footer-right p {
	font-size: 18px;
	line-height: 1.4em;

}
#footer div.vcard {
	margin-left:15px;
	font-size:14px;
}
#footer div.vcard span.type, #footer div.vcard span.country-name { display: none;}

#blog-side div.vcard {
	margin-top: 20px;
	line-height:1.5em;
}
#blog-side div.vcard .org {
	margin-bottom:0;
	font-weight: bold;
	font-size:20px;
}
#blog-side div.vcard span.locality, #blog-side div.vcard span.value, #blog-side div.vcard span.type {
	padding:0;
	color:#000;	
}
#blog-side div.vcard span.value {
	margin-top:20px;
	font-size:20px;
}
#blog-side div.adr, #blog-side div.email {
	margin-bottom:20px;
}
#blog-side p.email-address {margin-top:20px;}