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

/*Generic Styles*/
body{
background:#e2e1e9 url(../images/bg.jpg) repeat-x;
text-align:center;
font-family: helvetica, Arial, sans-serif;
line-height: 25px;
}

/*h1, h2, h3, h4, h5 {
margin:25px 0;
}*/
h2{
font-size:46px;
color:#F0D46B;
padding-bottom:25px;
margin-top:45px;
margin:25px 0;
border-bottom: 1px solid #a5acbf;
}
h3{
font-size:30px;
color: #745459;
line-height:33px;
margin:25px 0
}
p{
color:#30323B; 
font-size:14px;
line-height:20px;
font-family:arial;
}
a{
text-decoration:none;
color:black;
}
a:hover{
color:#f0d46b;
text-decoration:underline;
}
#container #main li{
color:#30323B;
font-size:13px;
margin-bottom:27px;
}
blockquote{
background:#E2E1E9;
color:#8c776c;
font:italic 20px/27px Georgia;
padding:23px;
}
blockquote p{
font-size:20px; 
color:#5F6273;
font-family:georgia;
line-height:27px;
}
.arrow {
width: 0;
height: 0;
line-height: 0;
border-top: 30px solid #E2E1E9;
border-left: 30px solid #f7f5f4;
/*border-right: 10px solid #f7f5f4; I DON'T WANT THE BORDER RIGHT*/
position: absolute;
right: 36px;		
}
/* HEADER */
header{
border-left:1px solid #f0d46b;
border-right:1px solid #f0d46b;
display:block;
}
header h1{
margin-top:0;
}
/* END HEADER */ 
/* NAVIGATION */
#container nav ul{
float: right;
margin:0;
margin-top:-13px;
height:111px;
margin-bottom:0;
}
#container nav ul li{  	
float:left;
list-style-type:none;
width:112px;
height:111px;
margin: 20px;
font-family:arial;
font-size:11px;
text-align:center;
}
#container nav ul li a{
color:#3ab42;
display:block;/*The element will generate a block box (a line break before and after the element)*/
text-transform:uppercase;
padding-top:70px;
height: 45px;
text-align:center;
padding-left:0px;
font-weight:bold;
}
/* END NAVIGATION */
/*CONTAINER*/
#container{
width:1002px; 
margin: 0 auto;
text-align:left;
position:relative;
background:#f7f5f4 url(../images/containerBG.jpg) repeat-x;
}
/*END CONTAINER*/
/*  ICONS FOR THE NAVIGATION */
#container nav ul #li_home{
background:url(../icons/home.png) no-repeat 38px 30px;
}
#container nav ul #li_work{
background:url(../icons/work.png) no-repeat 38px 30px;
}
#container nav ul #li_about{
background:url(../icons/about.png) no-repeat 38px 30px;
}
#container nav ul #li_contact{
background:url(../icons/contact.png) no-repeat 38px 30px;
}
/*end icons fo navigation*/
/*THE LOGO*/
#slogan{
height:168px;
clear:both;
}
#slogan h1{
margin:-27px 200px 0 149px;
padding-left:30px;
font-size:44px;
color:white;
/*border-left:1px solid white;*/
text-transform:uppercase;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-shadow:2px 2px #5f6273;
padding-top: 52px;
}
#slogan img{
position:absolute;
top:-107px;
left:-40px; 
}
#slogan p{
margin:-27px 200px 0 149px;
padding-left:30px;
font-size:30px;
color:white;
/*border-left:1px solid white;*/
text-transform:uppercase;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-shadow:2px 2px #5f6273;
}
#slogan #text2 p{
font-size:28px;
text-transform:none;
color:#3A3B42;
margin-top:10px;
border-left:none;
font-style:italic;
text-shadow:none;
line-height:24px;
}
#slogan a{
color:white;
}
/*END LOGO*/
/*MAIN*/
#main{
padding: 0 36px 100px 152px;
overflow:hidden;
border-left:1px solid white;
border-right:1px solid white;
}
#main #primaryContent{
float:left;
width:400px;; /*important try to see what happen if you don't declare the width */
}
#main #primaryContent ul h3{
text-indent:-99999px;/*put the text off the page*/
height:34px;/*always take this values from the home.psd*/
margin-bottom:13px;
}
#first p, #second p, #third p{
padding-left:0px;
}
#main #secondaryContent {
float: right;
width: 249px;
padding-top: 45px;
position: relative;
}
#main #secondaryContent cite{
color:#2f231e;
font-weight:bold;
font-size:15px;
float:right;
padding-top:35px;
padding-right:20px;	
}
#main #secondaryContent cite span{
color:#5f6273;
font-size:12px;
display:block;
line-height:10px;
font-style:italic;
}
/*RECENT PORTFOLIO AREAAAA*/
#main #recentWork{
clear:both;
border-top:1px solid #a5acbf;
position:relative;
}
#main #recentWork h2{
border-bottom:none;
margin-bottom:0;
}
#main #recentWork ol{
position:absolute;
right:0;/*if you are confused see the home.psd where are the numbers? I have put position relative to the #main #recentWork*/
top:40px;
}
#main #recentWork ol li{
display:inline;
width:16px;
height:16px;
}
#main #recentWork ol li a{
color:white;
background:#5F6273;
width:100%;
height:100%;
padding:5px 10px;
-moz-border-radius:100px;
-webkit-border-radius:100px;/* If you don't put this info on Safari and Chromo you see squared background */
}
#main #recentWork ol li.chosen a{
background:#a5acbf;
}
#main #recentWork ol a:hover{
background:#a5acbf;
text-decoration:none;
}
#main #recentWork p{
font-style:italic;
text-align:right;
color:#5F6273;
font-size:13px;
margin-top:5px;
margin-right:0;/*home.psd with rule*/
}
.image_display{
	padding:15px;
	border:1px solid #E2E1E9;
	background:white;
	margin-left: 144px;
    width: 386px;
}
.image_display img{
border:1px solid #E2E1E9;
}
/*   FOOTER   */
#footerWrap{
background:#5f6273;
border-top:1px solid #f0d46b;
}

footer{
width: 1000px;
margin: auto;
text-align: left;
line-height: 17px;
padding-top: 35px;
text-transform: uppercase;
border-right:1px solid #F0D46B; /* CHECK THIS */
border-left:1px solid #F0D46B;
overflow:hidden;/*see how it works with overflow visible—VERY IMPORTANT after the css of the footerLogo*/
display:block;
}
footer p{
font-size:12px;
color:white;
}
#footerLogo{
float: left;
background: #a5acbf;
width: 152px;
text-align: center;/*works like text to center the images*/
padding-top: 25px;
padding-bottom: 30px;
margin-right: 32px;
margin-top: -35px;
border-right: 1px solid #f0d46b;
}
footer p#footerInfo{
float:right;
padding-right:35px;
margin-top: -55px;
}
/*ABOUT PAGE CSS*/
#mainabout{
	width:600px;
	border-left:1px solid white;
	border-right:1px solid white;
	padding: 5px 36px 100px 364px;
	overflow:visible;
}
#mainabout #primaryContent{
width:600px;
}
.bold{
	font-weight:bold;
}
.em{
	font-style:italic;
}
#mainabout img{
    border: 10px solid #a5acbf;
    margin-left: -400px;
}
#box{
    float: right;
	width:600px;
	margin-top:0px;
	padding-right:0px;
}
#box p{
font-size: 16px;
}
.current{
color:#f0d46b;
text-decoration:underline;
}