@charset "UTF-8";
/* CSS Document */


/************** Colors *******************/

.green{
	color:#90B386;
}

.blue{
	color:#008fee;
}

.black{
	color:#222222;
}
.dark-blue{
	color:#0085dd;
}

/************** Typography *******************/


@font-face {
  font-family: "Pictos";
  src: url("../type/pictos-web.eot");
  src: local("☺"),
    url("../type/pictos-web.woff") format("woff"),
    url("../type/pictos-web.otf") format("opentype"),
    url("../type/pictos-web.svg#pictos-web") format("svg");
  }


.italic{
	font-style:italic;
}

.bold{
	font-weight:bold;
}

.upper{
	text-transform:uppercase;
}

.serif{
	font-family:"calluna-1","calluna-2",Georgia, "Times New Roman", Times, serif;
}

h1,h2,h3,h4,h5,h6{
	font-weight:normal;
	font-family:"calluna-1","calluna-2",Georgia, "Times New Roman", Times, serif;
	margin-bottom:1em;
	line-height:1.3em;
}


h1,h2{
	font-size:23px;
	margin-bottom:24px;
	
}
h2.client{
	font-style:italic;
	color:#555555;
	font-size:16px;
	margin-bottom:1em;
}

p{
	margin-bottom:1.6em;
}

.center{
	text-align:center;
}

/************** links *******************/



a{
	text-decoration:none;
}



/************** general *******************/


body{
	background:#eeeeee url(../images/chris-obrien-logo-and-web-design-background-pattern.jpg) top left repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#222222;
	line-height:1.3em;
}

#max-container{
	width:800px;
	margin: 50px auto;


/************** header *******************/

}
	
#center-box{
	height:394px;
	padding:50px 40px;
	border:1px solid #bbb;
	border-bottom:1px solid #aaa;
	background:#fff;
	-moz-box-shadow:0 0 10px #bbb;
	-webkit-box-shadow:0 0 10px #bbb;
	box-shadow:0 0 10px #bbb;
	position:relative;
}

#header{
	position:relative;
	
}
#header-nav{
	position:absolute;
	bottom:30px;
	right:0;

}


#header-nav li{
	
	display:inline;

}

#header-nav li a{
	color:#222222;
text-decoration:none;
	padding:5px;
	margin:0 20px 0 0;
	text-transform:uppercase;
	font-size:14px;
	text-shadow:1px 1px 1px #fff;
}

#header-nav li a:hover{
	color:#000;
}

#header-nav li:last-child a{
	margin:0 0 0 20px;
	padding:5px 10px !important;
	color:#fff !important;
	text-shadow: 0 1px 0  #06c;
	
}





#homepage-quote{
	margin-bottom:50px;
}



#homepage-featured{
	float:right;
	margin-left:40px;
	width:266px;
	text-align:center;
}

.testimonial{
	text-align:justify;
}


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


#footer{
	background:url(../images/chris-obrien-logo-and-web-design-background-shadow.png) top center no-repeat;
	height:50px;
	padding:30px 0;
	z-index:-10;
	
}


/************** Portfolio Pages *******************/



ul.questions{
margin-top:25px;
margin-left:25px;
width:175px;
height:99%;
	
}

ul.questions li{
text-transform:uppercase;
margin:15px 0;
color:#90B386;
}

.questions li a{
color:#90B386;
text-decoration:none;
}

.portfolio-nav{
	
	position:absolute;
	bottom:40px;
	right:40px;
	font-size:18px;
	margin-bottom:0px;
}

	
.bullet-title{
	font-size:16px;
	text-transform:uppercase;
	line-height:1.5em;
	font-weight:bold;
	color:#000;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:1px;
	
}

.bullet-title a{
color:#000;
}

.homepage-title{
padding-left:55px;
}


.project{
	margin-bottom:.5em;
}

#question{
	background:url(../images/information.png) top left no-repeat;
	padding-left:55px;
}

#gears{
	background:url(../images/gears.png) top left no-repeat;
	padding-left:55px;
}

#process{
	background:url(../images/logo-identity-and-branding-design-process.png)  top left no-repeat;
	padding-left:55px;
}

#web-block{
	background:url(../images/mouse.png) top left no-repeat;
	padding-left:55px;
}

#deliverables{
	background: url(../images/logo-identity-and-branding-design-deliverables.png) top left no-repeat;
	padding-left:55px;
}




#content-left{
	width:250px;
	margin-right:50px;
	float:left;
	text-align:justify;
}

.left-column{
	float:left;
	height:100%;
	background:#eee;
	width:160px;
}

.work-samples li{
	border:4px solid #ddd;
	background:#eee;
	clear:both;

}



#sketch{
	position:absolute;
	top:0px;
	right:0px;
	
}
.logo-page-1{
	overflow:hidden;
}
	
.left-copy{
	width:340px;
}

.work{
	float:left;
	margin-right:25px;
	border:1px solid #ddd;
}
	


.more{

	font-weight:bold;
	margin-left:5px;

}

.more:hover{
	border-bottom: 2px solid #ddd;
}



/****** Contact Form ************/

#contact-form{
	width:395px;
}

input,textarea{
	background:#fff;
	border:2px solid #ddd;
	width:100%;
	margin:5px 0 20px;
	padding:3px 0;
	font:inherit;
	resize:none;
}
input:focus,textarea:focus{
	border:2px solid #ccc;
}

label{
	color:#008fee;
}

input#send{
	border:0px;
}



#hcard-Chris-OBrien{
	float:right;
	margin-left:40px;
	width:266px;
	text-align:left;
}

#chris-obrien-design-headshot{
	
	padding:2px;
	background:#eee;
	border:1px solid #ddd;
	margin:0 auto 25px;
}

.hidden{
	display:none;
}

#thank-you-page{
	text-align:center;
	margin-top:100px;
	
}


/************** Buttons **********************/


.light-green-button{
	background:#b6cdb0;
	padding:8px 10px;
	color:#fff;	
	display:inline-block;
	text-shadow:0px 1px 0 #55774b;
	text-align:center;
  	white-space: nowrap;
  	cursor: pointer;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
  	-webkit-font-smoothing: antialiased;
  	-moz-outline: none;
  	-webkit-box-shadow: 0 0 0 1px #7da671 inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
	-moz-box-shadow: 0 0 1px 1px #7da671 inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;

}

.light-green-button:hover{
	background:#a3c09b;
}

.light-green-button:active{
	background:#a3c09b;
	-webkit-box-shadow: 0 0 0 1px #7da671 inset, 0 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 -27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
	-moz-box-shadow: 0 0 1px 1px #7da671 inset, 0 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 -27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
}




.green-button{
	background:#90B386;
	display:inline-block;
	padding:8px 10px;
	color:#fff;
	text-shadow:0px 1px 0 #55774b;
	text-align:center;
  	white-space: nowrap;
  	cursor: pointer;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
  	-webkit-font-smoothing: antialiased;
  	-moz-outline: none;
  	-webkit-box-shadow: 0 0 0 1px #7da671 inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
	-moz-box-shadow: 0 0 1px 1px #7da671 inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;

}

.green-button:hover{
	background:#7da671;
}

.green-button:active{
	background:#7da671;
	-webkit-box-shadow: 0 0 0 1px #7da671 inset, 0 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 -27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
	-moz-box-shadow: 0 0 1px 1px #7da671 inset, 0 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 -27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
}
	

.blue-button,input#send{
	background:#0099ff;
	display:inline-block;
	padding:8px 10px;
	color:#fff !important;
	text-shadow:0px 1px 0 #06c;
	text-align:center;
  	white-space: nowrap;
  	cursor: pointer;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
  	-webkit-font-smoothing: antialiased;
  	-moz-outline: none;
  	-webkit-box-shadow: 0 0 0 1px #007acc inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
	-moz-box-shadow: 0 0 1px 1px #007acc inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
}

.blue-button:hover,input#send:hover{
	background:#008fee;
}

.blue-button:active,input#send:active{
	-webkit-box-shadow: 0 0 1px 1px #007acc inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 -27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
	-moz-box-shadow: 0 0 1px 1px #007acc inset, 0 0 0 2px rgba(255, 255, 255, 0.5) inset, 0 -27px 20px -18px rgba(255, 255, 255, 0.3) inset, 0 1px 0 0 #eee;
}




	
	
	
.left-half{
	display:inline-block;
	text-align:center;
	width:104px;
	padding:8px 0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright:0;
	-webkit-border-top-right-radius:0;
	-webkit-border-bottom-right-radius:0;
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}


.left-half:before{


	content:"[";
	font-family:"Pictos";
	color:#739f67;
	font-size:16px;
border:0px;

line-height:0;
margin:0px;
padding:0px;
padding-right:8px;
text-shadow:0 1px 0 #f0f5ee,0 -1px 0 #46623e;

}


.right-half{
	display:inline-block;
	text-align:center;
	width:104px;
	padding:8px 0;
	margin:0px;
	-moz-border-radius-topleft:0;
	-moz-border-radius-bottomleft:0;
	-webkit-border-top-left-radius:0;
	-webkit-border-bottom-left-radius:0;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}


.right-half:after,.see-my-work:after{


	content:"]";
	font-family:"Pictos";
	color:#648c58;
	font-size:16px;
border:0px;

line-height:0;
margin:0px;
padding:0px;
padding-left:8px;
text-shadow:0 1px 0 #c0d4ba,0 -1px 0 #30432a;

}






.see-my-work,.lets-talk{
	padding:8px 20px;
}