/*CSS for Jerome Chadel.com -  Sept. 2009*/


/*GLOBAL----------------------------------------*/
html{ font-size:100%; }
body{
	font-size:1em;
	background:#2D2D2E;
	}



/*FONTS----------------------------------------*/
body, #contentWrapper, #footer, ul{
	font-family:arial, verdana;
}

/*LINKS-----------------------------------------------------*/
a, a:active{
	text-decoration:none;
	color:#2D2D2E;
}
	
.work a{
	background:#2D2D2E;
	color:#ccc;
}
.work a:hover{
	color:#AFDFE5}	

#subNav a{color:#222}
#subNav ul li a:hover{
	color:#C46338;
}

/*GRID LAYOUT----------------------------------------------------*/
/* 960PX - 10 COL -  GUTTER:20PX                                 */
/*---------------------------------------------------------------*/
.fullCol{
	width:940px;
	clear:both}
	

/*LAYOUT----------------------------------------------------*/
/*#wrapper{
	width:100%;
	background:transparent;}*/

#contentWrapper{
	margin:0 auto;
	/*text-align:left;*/
	background:url(images/bodyBG.png) repeat 0 0;
	padding-left:20px;
}

#top{
	height:40px;
	/*width:100%;*/
	background: #3A3A3C;
	padding-left:49px;
	text-align: left;
	padding-left:680px;
}
#top img{
	width:282px;
	height:15px;
	padding-top:13px;
	}

#header{
	width:940px;
	padding:10px 0;
	height:60px;
}
#logo {
	width:352px;
	height:62px;
	display:inline;
	float:left;
}
#logo a{
	display:block;
	width:352px;
	line-height:64px;
	height:62px;
	background:url(images/JC-logo.png) no-repeat;
	opacity:.9;
	text-align:right;
	}
#logo a:hover{
	opacity:1;
}

h1#logo{
	font-size:36px;
}


/*NAV----------------------------------------------------*/
#nav{
	height:80px;
	float:right;}

#nav ul li{
	width:78px;
	height:69px;
	display:inline;
	float:left;
	margin-left: 20px;
}
#nav ul li a{
	display:block;
	width:78px;
	height:69px;
}
#nav ul li a:hover{
}


#workNav, #aboutNav, #workNav.activeNav{
	text-indent: -9999px;}

#workNav a{
	display:block;
	width:177px;
	height:41px;
	background:url(images/nav.png) no-repeat 0 0}
#workNav a:hover{
	background:url(images/nav.png) no-repeat 0 -80px}
#workNav a:active{
	background:url(images/nav.png) no-repeat 0 -160px}

#aboutNav a{
	display:block;
	width:177px;
	height:41px;
	background:url(images/nav.png) no-repeat -100px 0}

#aboutNav a:hover{
	background:url(images/nav.png) no-repeat -100px -80px}
	
#aboutNav a:active{
	background:url(images/nav.png) no-repeat -100px -160px}

#workNav.activeNav a{
	background:url(images/nav.png) no-repeat 0 -160px}

/***CONTENT WORK***/
.work{
	clear:both;
	width:940px;
	/*height:600px;*/
	margin-top:60px;
	display:block;
	}



.workTitle h1{
	font-size:40px;
	margin-bottom:-7px;
	color:#2D2D2E;
	font-weight:bold}

.workImg{
	clear:both;
	border-top:10px solid #9C9CA0;
	border-bottom:10px solid #9C9CA0;
	border-left:1px solid solid #9C9CA0;
	border-right:1px solid solid #9C9CA0;
}
.workImg img{width:940px}

.workDescription{
	/*width:960px;*/
	clear:both;
	display:block;
	height:auto;
	margin-top:20px;
	margin-bottom:20px;
	padding-bottom:20px;
}

.workNotes{
	width:372px;
	display:inline;
	float:left;
	margin-right:20px
}
.workResp{
	width:372px;
	display:inline;
	float:left;
	color:#333;
}
.workLaunch{
	width:175px;
	height:41px;
	display:inline;
	float:right;
	text-indent: -9999px
}
.workLaunch a{
	display:block;
	}
	
.workLaunch.web a{
	display:block;
	width:177px;
	height:41px;
	background: url(images/launch-website.png) no-repeat}
.workLaunch.web a:hover{
	opacity:.5}


.work p{
	color:#333;
	font-size:14px;
	line-height:21px;
	margin-bottom: 5px
}
.h3Title_work{
	color:#fff;
	font-size:20px;
	font-variant:small-caps;
	font-weight: bold;
	}
.title{
	text-indent: -9999px;
	margin:16px 0 10px 0}
.notes{
	background:url(images/notes.png) no-repeat}
.responsabilities{
	background: url(images/responsabilities.png) no-repeat}
	
	
/********  == subNav == *************/
#subNav{
	float:right;
	background:#EEEEEF;
	padding: 5px 0;
	-moz-border-radius: 5px; -webkit-border-radius: 5px;
	padding-left:20px;
	margin-top:10px;
		}

#subNav ul li{
	height:30px;
	display:inline;
	float:left;
	line-height:30px;
}
#subNav ul li a{
	margin-right:20px;
}

#subNav:hover{
	-o-box-shadow: 0 1px 8px rgba(134,37,19,.5);
	-moz-box-shadow: 0 1px 8px rgba(134,37,19,.5);
	-webkit-box-shadow: 0 1px 8px rgba(134,37,19,.4);
	box-shadow: 0 1px 8px rgba(134,37,19,.5);
	}


#webSubnav, #intranetSubnav, #printSubnav, #miscSubnav, #wireframesSubnav, #mockupsSubnav, 
#sebSubnav.activeNav, #intranetSubnav.activeNav, #printSubnav.activeNav, #miscSubnav.activeNav, #wireframesSubnav.activeNav, #mockupsSubnav#wireframesSubnav.activeNav{
	text-indent: -9999px;}



#webSubnav a{
	display:block;
	width:80px;
	height:42px;
	background:url(images/subNav.png) no-repeat 0 0;
	}
#webSubnav a:hover{
	background:url(images/subNav.png) no-repeat 0 -50px}

#subNav li.activesubNav a{	
	color:#BA5022}
	
#webSubnav a:active, #webSubnav.activesubNav a{
	background:url(images/subNav.png) no-repeat 0 -100px}



#intranetSubnav a{
	display:block;
	width:80px;
	height:42px;
	background:url(images/subNav.png) no-repeat -99px 0px}

#intranetSubnav a:hover{
	background:url(images/subNav.png) no-repeat -99px -50px}
	
#intranetSubnav a:active, #intranetSubnav.activesubNav a{
	background:url(images/subNav.png) no-repeat -99px -100px}



#printSubnav a{
	display:block;
	width:80px;
	height:42px;
	background:url(images/subNav.png) no-repeat -295px 0px}

#printSubnav a:hover{
	background:url(images/subNav.png) no-repeat -295px -50px}
	
#printSubnav a:active, #printSubnav.activesubNav a{
	background:url(images/subNav.png) no-repeat -295px -100px}
	
	
	
#miscSubnav a{
	display:block;
	width:80px;
	height:42px;
	background:url(images/subNav.png) no-repeat -492px 0px}

#miscSubnav a:hover{
	background:url(images/subNav.png) no-repeat -492px -50px}
	
#miscSubnav a:active, #miscSubnav.activesubNav a{
	background:url(images/subNav.png) no-repeat -492px -100px}



#wireframesSubnav a{
	display:block;
	width:80px;
	height:42px;
	background:url(images/subNav.png) no-repeat -199px 0px}

#wireframesSubnav a:hover{
	background:url(images/subNav.png) no-repeat -199px -50px}
	
#wireframesSubnav a:active, #wireframesSubnav.activesubNav a{
	background:url(images/subNav.png) no-repeat -199px -100px}
	
	
	
#mockupsSubnav a{
	display:block;
	width:80px;
	height:42px;
	background:url(images/subNav.png) no-repeat -394px 0px}

#mockupsSubnav a:hover{
	background:url(images/subNav.png) no-repeat -394px -50px}
	
#mockupsSubnav a:active, #mockupsSubnav.activesubNav a{
	background:url(images/subNav.png) no-repeat -394px -100px}	
	

/********----------- MISC ----------**************/
.blackBg {
	background:#000}
	
.whiteBg {
	background:#fff}
	
.greyBg {
	background:#595959}