/*////////////////////////////SITE WIDE*/
header, footer, nav, section, article { 
 display:block; 
}
a{
	color: #000;
	text-decoration: none;
	border: none;
	outline:none
	
}
a:active{
	outline:none;
}
img {
	border: none;
}

a:hover{
}
a:active{
	position: relative;
	top:1.5px;
}
body{
	width: 980px;
	margin: 0 auto;
	background-color: #ef5626;
}
#wrapper{
	clear: both;
	min-height: 600px;
	overflow: hidden;
	position: relative;
}

body, p{
	  font-family: "proxima-nova-1","proxima-nova-2", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	  color:#353535;
	
}
h1 {
  font-family: "proxima-nova-1","proxima-nova-2", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
  font-size: 34px;
  
}
h2{
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2",serif;
}
h3{
  font-family: "proxima-nova-condensed-1","proxima-nova-condensed-2", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
}

/*////////////////////////////NAVIGATION*/
nav {
	overflow: hidden;
	height:90px;
	background-image: url(../img/stripe-top.png);
	background-repeat: repeat-x;
	background-position: bottom;
	margin: 0 10px;
	width: 960px;
}
a#logo {
	height:30px;
	font-size: 28px;
	letter-spacing: -.05em;
	position: relative;
	top: 25px;
	font-weight: 400;
	color:#353535;
	font-family: "proxima-nova-condensed-1","proxima-nova-condensed-2", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	display: block;
	float: left;
}
a#logo img{
	margin: -2px 12px 0 0;
	float: left;
}
a#logo:active{
	position: relative;
	top:26px;
}
ul#navMenu{
	float: right;
	list-style: none;
	margin-top: 29px;
}
ul#navMenu li{
	display: inline;
	padding: 4px;
}
.lnk1{
  color: #2a2a2a;
  background-color: #d74d22;
}
.lnk2{
	color:#ffffff;
	background-color: #a73c1b;
}
ul#navMenu li a{
  font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
  font-size: 16px;
  padding: 6px 18px 8px 48px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  	background-image: url(../img/spritemap.png);
  	margin-top: 14px;
}
ul#navMenu li a:hover{
	color:#ffffff;
	background-color: #a73c1b
}
#portfolioBtn { background-position: -592px 5px; }
#aboutBtn { background-position: -592px -25px; }
#contactBtn { background-position: -591px -56px; }


/*////////////////////////////FOOTER*/
footer{
	width: 960px;
	margin: 65px 10px 40px 10px;
	height: 34px;
	background-color: #d74d22;
	/*padding: 10px 0 0 10px;*/
	color: #ef5626;
	position: relative;
	z-index: 1;
}
footer:hover{
	color: #ef5626;
	background-color: #a73c1b;
	height:180px;
}

footer span{
	margin: 0;
	padding: 0;
	font-size: 12px;
	letter-spacing: 0;
	display: block;
	position: absolute;
	top: 10px;
	left: 14px
}
div#footerIcon{
	width: 30px; height: 30px;
	position: absolute;
	top: 3px;
	right: 10px;
  	background-image: url(../img/spritemap.png);
	background-position: -596px -106px; 
}
#footerLinks{
	display:none;
	position: absolute;
	top: 10px;

	
}
#footerLinks h2{
	font-size: 16px;
	color:#fff;
	font-weight: 400;
	margin: 20px 0 0 0;
	text-align: center;
}
#footerLinks ul{
	list-style-type: none;
	padding: 0;
	position: relative;
	top:10px;
	left:50px;
}
#footerLinks ul li{
	float: left;
	width: 180px;
	margin-bottom: 3px;
}

#footerLinks ul li a{
	color: #ef5626;
	font-size: 14px;
	
}
#footerLinks ul li a:hover{
	color:#fff;
}
/*////////////////////////////HOME*/
#masthead{
	overflow: hidden;
	position: relative;
	height: 185px;
	background-image: url(../img/stripe-bottom.png);
	background-repeat: repeat-x;
	background-position: bottom;
		margin: 0 10px;
	width: 960px;
}
#masthead h1 {
	font-weight:400;

}
#masthead .text{
	position: relative;
	top: 45px;
	letter-spacing: -.05em;
	display: inline-block;
	float: left;
}
#masthead .illustration{
	position: relative;
	top: 38px;
	width: 90px;
	height: 22px;
	padding: 67px 0 0 0;
	background-image: url(../img/spritemap.png);
	text-align: center;
	display: block;
	float: left;
	margin: 0 14px;
}
#masthead h1#two{
/*	left: 495px;*/
}
#masthead h1#three{
/*	left: 772px;*/
}
#masthead h3{
	font-weight:400;
	font-size: 19px;
	letter-spacing: -.05em;
	color:#fff;
}

#design-icon{
/*	left: 390px;*/
	background-position: 0 3px;
}
#ux-icon{
/*	left: 668px;*/
	background-position: 0 -90px;
}
#code-icon{
/*	left: 839px;*/
	background-position: 0 -181px;
}


section#portfolio-thumbs {
	overflow: hidden;
}
section#portfolio-thumbs ul{
	list-style-type: none;
	padding: 14px 4px 0 4px;
	margin: 0;
	overflow: hidden;
}
section#portfolio-thumbs ul li {
	float: left;
	padding: 0;
	margin: 0px 7px 14px 7px;
}
section#portfolio-thumbs ul a{
	display: block;
	width: 284px;
	height:228px;
	background-color: #f27851;
	padding:13px;
		color:#2a2a2a;
		position: relative;
}
section#portfolio-thumbs ul a:hover{
	background-color: #a73c1b;
	color: #fff;
}
img.thumb-image{
	position: absolute;
	top:13px;
	z-index: 5000;
}
img.thumb-overlay{
	position: absolute;
	top:13px;
	z-index: 6000;
	display:none;
}
div.thumb-icon{
	width:25px; height:30px;
	position: absolute;
	top:220px;
	background-position: -606px -110px; 
	background-image: url(../img/spritemap.png);

}
section#portfolio-thumbs ul a span{
	font-size: 16px;
	position: absolute;
	top:220px;
	left: 40px;
	
}


/*////////////////////////////PROJECT*/

section.projectContent{
		float:left;
		margin: 46px 0 0 10px;
}
section.projectContent{
	background: #f27851;
	padding-bottom: 13px;

}
section.projectContent img{
		margin: 13px 13px 0px 13px;
		display: block;
}
header.projectDetails{
	width:292px;
	float: right;
	margin-right: 10px;
	position: relative;
	margin-top: 40px;
}
section#detailswrapper{

}
div.coda-slider-wrapper{
	float: left;
}
header.projectDetails h1{
	color:#fff;
	font-weight: 400;
	letter-spacing: -.05em;
	line-height: 38px;
	margin: 0 0 0 0;
	padding: 0;
}
header.projectDetails p{
	color: #2a2a2a;
	font-size:15px;

}
header.projectDetails p a{
	text-decoration: underline;
	color: #a73c1b;
}
header.projectDetails p a:hover{
	
		color: #fff;
}
header.projectDetails a.external{
  font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
  font-size: 16px;
  letter-spacing: 0;
  padding: 6px 18px 8px 40px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-image: url(../img/spritemap.png);
  background-position: -598px -160px;
  margin-top: 14px;
  color: #2a2a2a;
  background-color: #d74d22;
  float: left;
}
header.projectDetails a.external:hover{
	color:#ffffff;
	background-color: #a73c1b;
}

#projectNav{
	overflow: hidden;
	position: relative;
	background: none;
	margin-top: 45px;
	width: 292px;
	float: right;
	background-image: url(../img/stripe-bottom.png);
	background-repeat: repeat-x;
	background-position: top;
	padding: 22px 0 0 0 ;
}
#projectNav ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#projectNav ul li{
	display: inline;
}
#projectNav ul li a {
	color: #353535;
	padding: 0 0 0 38px;
	background-image: url(../img/spritemap.png);
	font-family: "proxima-nova-condensed-1","proxima-nova-condensed-2", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	font-size: 19px;
	letter-spacing: -.06em;
	margin: 0 18px 0 0;
}
#projectNav ul li a:hover{
	color: #fff;
}
a.main{
		background-position: -598px -5px;
}
a.previous{
		background-position: -594px -275px;
}
a.next{
		background-position: -594px -245px;
}



/*/////////////////////////////////////////////////ABOUT*/

#aboutWrap {
	width: 960px;height: 1228px;
	position: relative;
	margin: 0 10px; 
}
#aboutWrap span{
	font-weight: 800;
}
header.ethos{
	width:476px; height: 300px;
	background-image: url(../img/stripe-bottom.png);
	background-repeat: repeat-x;
	background-position: bottom;
	position: absolute;
	top: 36px;
}
header.ethos h1{
	color:#fff;
	font-weight: 400;
	letter-spacing: -.05em;
	line-height: 40px;
	margin: 0 0 0 0;
	padding: 0;
}
header.ethos h2{
	font-size: 17px;
	line-height: 24px;
	font-weight: 100;
	color: #2a2a2a;
	margin: 15px 0 0 0;
	padding: 0;
}
figure#infographic{
	width:450px;
	height: 310px;
	background-image: url(../img/spritemap.png);
	background-position:-10px -355px;
	position: absolute;
	right:0px;
	top: 60px;
	margin:0;
}
#infographic legend{
	font-size: 15px;
	width: 372px;
	text-align: center;
	position: absolute;
	right:26px;
	color: #2a2a2a;
}
figure#map{
	height: 780px; width: 960px;
	background-image: url(../img/spritemap.png);
	background-position:0px -685px;
	position: absolute;
	left:0px;
	top: 410px;
	margin: 0;
}
p#cleveland{
	font-size: 15px;
	width: 372px;
	text-align: center;
	position: absolute;
	left:16px;
	top: 348px;
	color: #2a2a2a;
}
p#chicago{
	font-size: 15px;
	width: 372px;
	text-align: center;
	position: absolute;
	right:14px;
	top: 414px;
	color: #2a2a2a;
}
section#education {
	position: absolute;
	left:0px;
	top: 920px;
		
}
section#education p{
	font-size: 15px;
	color: #2a2a2a;
	float: left;
	width: 300px;
}
section#education img{
	float: left;
	margin: 8px 16px 0 0;
}

section#experience {
	position: absolute;
	left:0px;
	top: 1035px;
		
}
section#experience p{
	font-size: 15px;
	color: #2a2a2a;
	float: left;
	width: 365px;
}

section#experience p a{
	color:#2A2A2A;
}
section#experience img{
	
	margin: 24px 0 0 30px;
}

section#resume {
	position: absolute;
	left:0px;
	top: 1140px;
		
}

section#resume a {
  font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
  font-size: 16px;
  padding: 6px 10px 8px 36px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-image: url(../img/spritemap.png);
  margin-top: 14px;
  color: #fff;
  float: left;
}
section#resume a:hover{
	color:#ffffff;
	background-color: #a73c1b
}
#resumeBtn { background-position: -598px -206px; }

section#resume p{
	font-size: 15px;
	color: #2a2a2a;
	float: left;
	width: 410px;
	position: relative;
	top: 11px;
	left: 7px;
}



/*//////////////////////////////////////////////CONTACT*/
div#contactBox{
	width: 400px;
	float: left;
	text-align: center;
}

div#contactForm{
	width: 400px;
	float: left;
}

#contactForm label{
	display: block;
}






#contact_form_holder {    
    width:400px; /* setting a fixed width of the contact form holder will make things easier later (like aligning and such) */  
    background-color: #f27851;
    padding: 25px 16px 18px 16px;
    overflow: hidden;
    margin: 20px 0 0 10px;
    float: left;
    z-index: 5;
    
}  
h1#contactMain{
	color:#fff;
	font-weight: 400;
	letter-spacing: -.05em;
	line-height: 40px;
	margin: 36px 0 0 10px;
	padding: 0;
	overflow: hidden;
}
#titleHolder{
	width: 400px;
}

#contact_form_holder p{
    font-family: "proxima-nova-condensed-1","proxima-nova-condensed-2", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
    color: #2a2a2a;
    font-size: 19px;
	letter-spacing: -.06em;
	margin: 0;
	padding: 0;
}




#email, #subject, #message{
	margin: 5px 0 20px 0;
	border: none;
	-moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #f2c3b4;
    font-family:  "proxima-nova-1","proxima-nova-2", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif; 
    font-weight: 400;
    width:380px; /* make all the inputs and the textarea same size (100% of the div they are into) */  
    font-size: 16px;
    padding:10px; /* and make a custom padding, you can set whatever you like */  
}
#email:focus, #subject:focus, #message:focus{
	background-color: #fff;
	outline-width: 0;
}

#send_message{
	margin: 0;
	float: right;
}


#contact_form_holder textarea {  
    height:100px; /* i never liked small textareas, so make it 100px in height */  
}  
#send_message {  
    border:none; /* remove the default border and put a normal black one */  
    cursor:pointer;  
    cursor:hand;  
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
 	font-size: 16px;
    padding: 6px 18px 8px 38px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  	background-image: url(../img/spritemap.png);
  	background-position: -598px -160px;
  	color: #2a2a2a;
    background-color: #d74d22;
    margin-top: 8px;
}  

#send_message:hover{
	color:#ffffff;
	background-color: #a73c1b
}


#cf_submit_p { text-align:left; overflow: hidden;} /* show the submit button aligned with the right side */  
  
/* styling */  
  
.error {  
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
    display: none; /* hide the errors */  
    /* add some styling */  
    padding:6px ;  
    color: #ff0000;  
    font-size:14px;  
    background-color: #fff769;  
    margin: 4px 0 2px 0;
} 

.success {  
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
    display: none; /* hide the sucess div */  
    /* add some styling */  
    padding:14px;  
    color: #044406;  
    font-size:14px;  
    background-color: #B7FBB9;  
    margin: 4px 0 2px 0;
}  
  
#contact_logo { vertical-align: middle; }  
.error img { vertical-align:top; margin-right: 5px;} 
.success img { vertical-align:top; margin-right: 5px;} 

div#formTips{
	float: left;
	width: 174px;
	margin-left: -16px;
	z-index: 200;
	position: relative;
}

div.tip{
	font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2";
	color: #fff;
	line-height: 15px;
	font-size: 13px;
	position: absolute;
	background-image: url(../img/tip.png);
  	background-position: left center;
  	background-repeat: no-repeat;
}
div#emailField{
	top: 76px;
	padding-left: 55px;
	display: none;
}
div#subjectField{
	top: 162px;
	padding-left: 55px;
	display: none;
}

div#messageField{
	top: 279px;
	padding-left: 55px;
	display: none;
}


#workStatus{
	overflow: hidden;
	position: relative;
	height: 135px;
	background-image: url(../img/stripe-bottom.png);
	background-repeat: repeat-x;
	background-position: bottom;
		margin: 0 10px;
	width: 306px;
	float: right;
	
}
#workStatus h1 {
	font-weight:400;
	font-size: 33.5px;
}
#workStatus .text{
	position: relative;
	top: 9px;
	letter-spacing: -.05em;
	display: inline-block;
	float:left;
}
#workStatus h3{
	font-weight:400;
	font-size: 19px;
	letter-spacing: -.05em;
	color:#fff;
}
#workStatus .illustration{
	position:relative;
	top: 0px;
	width: 90px;
	height: 22px;
	padding: 67px 0 0 0;
	background-image: url(../img/spritemap.png);
	text-align: center;
	display: block;
	float:left;
}
#work-icon{
	background-position: 0 -270px;
	margin: 0 10px;
}

#socialLinks{
	overflow: hidden;
	position: relative;
	background: none;
	margin: 33px 10px;
	width: 306px;
	float: right;
}
#socialLinks ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#socialLinks ul li{
	margin-bottom: 20px;
}
#socialLinks ul li a {
	color: #353535;
	padding: 0 0 0 38px;
	background-image: url(../img/spritemap.png);
	font-family: "proxima-nova-condensed-1","proxima-nova-condensed-2", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
	font-size: 19px;
	letter-spacing: -.05em;
	font-weight:400;
}
#socialLinks ul li a:hover{
	color: #fff;
}
a#facebook{
		background-position: -598px -305px;
}
a#facebook:hover{
		background-position: -598px -335px;
}
a#linkedin{
		background-position: -598px -365px;
}
a#linkedin:hover{
		background-position: -598px -394px;
}
a#dribbble{
		background-position: -598px -425px;
}
a#dribbble:hover{
		background-position: -598px -454px;
}
/*////////////////////////////FIXES*/
.clearFix{clear: both;}