/*CSS for Jerome Chadel.com -  January. 2011*/


/*COLORS------------------------*/
/*color1-dark: #2d2d2d*/
/*color2-medium: #CC3212*/
/*color3-light: #315013*/
/*------------------------------*/


/*GLOBAL----------------------------------------*/
html{ font-size:100%; }
body{
	font-size:1em;
	text-align:center;
	}

.clear{clear:both}

/*FONTS----------------------------------------*/

h2.introduction{
	display:block;
	clear:both;
	float:none; 
	margin:42px 0 24px 55px; 
	font-size:19px;  
	line-height:60px; 
	width:890px;
	text-align:center;
	font-weight:bold;
	text-transform: capitalize;
	font-style: italic;
	background: transparent url(../images/underlines.png) repeat-x;
	background-position:  0 39px;
	}
.global-def{font-size: 21px; line-height:30px}

#main{margin-left:20px}

.main h2{width:960px; font-size: 20px; margin:42px 0; font-style: italic;}
.main h2#send_message{font-size:30px}


h3.description {font-size:26px}

.tags{margin-top:42px;}
.tags ul li {
	margin:0;
	font-size:16px;
	line-height: 24px;
	}
.tags ul li a{text-decoration: underline}

#fluo{
	display:none;
	position:absolute;
	width: 89px;
	height: 103px;
	background: url(../images/fluo.png) no-repeat;
	margin-left:911px;
	margin-top:180px;
	}


/*COLORS------------------------------------------------*/

	/***color1-dark: #2d2d2d */
	body {border-top: 1px solid #2d2d2d;}
	.workNotes h2, .workResp h2{color:#2d2d2d}
	.main h2 span{color: #2d2d2d}
	h2.introduction{color: #2d2d2d;}
	h3.description{color:#2d2d2d}
	.definition, .example {color:#2d2d2d}
	#header{border-bottom:5px solid #2d2d2d;}
	#logo a{color:#2d2d2d;}
	.contact a{color:#2d2d2d;}
	#subNav ul li a{background:#2d2d2d;}
	.thumbnail-a, .thumbnail-b{border: 1px solid #2d2d2d;}
	.thumbnail-a, .thumbnail-b{color:#2d2d2d;}
	.sidebar {border-top:5px solid #2d2d2d;}
	.sidebar a:hover{color:#2d2d2d;}
	/*.mosaic h2 {background:#2d2d2d;}*/
	.thumbnail-description{color:#2d2d2d;}
	#footer {border-top:5px solid #2d2d2d;}
	#contact form label{color:#2d2d2d;}
	#contact form input#Name, #contact form input#Email{color:#2d2d2d;}
	#contact form textarea{color:#2d2d2d;}
	h2.global-def{color:#2d2d2d}
	input#send_message_Button{background:#2d2d2d;}
	.box, .box a{color:#2d2d2d;}
	#send_message{color:#2d2d2d;}
	a .thumbnail-description  {color:#2d2d2d}
	h3.title{background: #2d2d2d;}
	p.definition{color:#2d2d2d;}
	ul.elements li {color:#2d2d2d;}
	.box, .box a{background:#2d2d2d}
	.thumbnail{border:6px solid #fff;}
	#footer ul li a:hover{background: #2d2d2d }
	.mosaic h2 {color:#2d2d2d}
	
	
	/***color2-medium: #CC3212 */
	h2.introduction a:hover{background:#CC3212;}
	a:hover .thumbnail-description{color: #315013;}
	h2.introduction a{color:#CC3212}
	div.anythingSlider.activeSlider .anythingWindow {border:9px solid #CC3212}
	h1#logo a:hover span{color: #CC3212;}
	.contact a:hover{background: #CC3212}
	.contact a {color:#CC3212}
	#subNav li.activesubNav a{background: #CC3212;}
	#subNav li.activesubNav a:hover{background: #CC3212;}
	#portfolio .mosaic{border:1px solid #CC3212}
	input#send_message_Button:hover{background:#CC3212}
	.box a:hover{background: #CC3212}
	#footer {background: #CC3212}
	#subNav ul li a:hover{background: #CC3212}
	.thumbnail:hover{border-color:#CC3212}
	
	
	div.anythingSlider.activeSlider .anythingWindow:hover {
	-o-box-shadow: 0 -1px 10px rgba(40,40,40,.4);
	-moz-box-shadow: 0 -1px 10px rgba(40,40,40,.4);
	-webkit-box-shadow: 0 -1px 10px rgba(40,40,40,.4);
	box-shadow: 0 -1px 10px rgba(40,40,40,.4);

	
	}

	
	
	/***color3-light: #EFC1B7 */
	#footer p{color: #EFC1B7}
	.thumbnail-a, .thumbnail-b{background: #EFC1B7}
	#portfolio .mosaic{border:1px solid #EFC1B7}	
	p.definition{background: #EFC1B7;}
	#portfolio .mosaic{border:1px solid #EFC1B7}
		
	
	/***color4: WHITE */
	h2.introduction a:hover{ color:white;}
	a:hover .thumbnail-description{background:white}
	p.definition{background: white}
	#logo a:hover{color:white}
	.contact a:hover{color:white}
	#portfolio .mosaic{background: white}
	.box a{color:white}
	input#send_message_Button{color:white;}
	#footer ul li a{color:white}
	#subNav li.activesubNav a{color:white;}
	h3.title{color:white}
	#subNav ul li a{border-bottom: 2px solid white}

	
	
	/**GRADIENTS*/
	/*body{background:#E6E6E6 url(../images/outside-bg.png) repeat-x;}*/
	body{background:url(../images/BG-01.jpg);}
	
	
	
	#contact form input#Name, #contact form input#Email{
	background: white;
	border:1px solid #CCC;
	}

	#contact form textarea{
	border:1px solid #CCC;
	}

	
	
	
/*TRANSITIONS-----------------------------------------------------*/
.box a, 
#subNav ul li a,
.thumbnail{
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;}


.work {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;}


.work-image2{
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
transition: all 0.8s;
	}

	

/*LINKS-----------------------------------------------------*/
a, a:active{
	text-decoration:none;
}


h2.introduction a:hover{text-decoration: none }



/*GRID LAYOUT----------------------------------------------------*/
/* 960PX - 18 COL of 42px -  GUTTER:12PX                         */
/*---------------------------------------------------------------*/
.fullCol{
	width:960px;
	clear:both}


.big-left{
	width:594;
	display:inline;
	float:left}
	
.small-right{
	width:324px;
	display: inline;
	float:right;
	}

.big-right, .big-right2{
	width:594px;
	display:inline;
	float:right;
	margin-right:20px;}
.big-right2{float:left; margin:0 0 0 41px;}	

.small-left{
	width:324px;
	display: inline;
	float:left;
	}

.halfbox{
	display:inline;
	float:left;
	margin:12px 12px 70px 0;
	border:9px solid #fff;
	-o-box-shadow: 0 0x 1px rgba(40,40,40,.4);
	-moz-box-shadow: 0 0px 1px rgba(40,40,40,.4);
	-webkit-box-shadow: 0 0px 4px rgba(40,40,40,.4);
	box-shadow: 0 0px 1px rgba(40,40,40,.4);
	}
	
.halfbox img{
	width:458px}


.fullbox{
	width:942px;
	border:9px solid #fff;
	-o-box-shadow: 0 0x 1px rgba(40,40,40,.4);
	-moz-box-shadow: 0 0px 1px rgba(40,40,40,.4);
	-webkit-box-shadow: 0 0px 4px rgba(40,40,40,.4);
	box-shadow: 0 0px 1px rgba(40,40,40,.4);
	margin-top:24px;}


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

#contentWrapper{
	width:1000px;
	margin:0 auto;
	margin-top:36px;
	margin-bottom:30px;
	text-align:left;
	background:url(../images/body-bg.jpg) repeat;
	border:5px solid #F5F5F5;
	
	-o-box-shadow: 0 0 20px rgba(40,40,40,.2);
	-moz-box-shadow: 0 0 20px rgba(40,40,40,.2);
	-webkit-box-shadow: 0 0 20px rgba(40,40,40,.2);
	box-shadow: 0 0 20px rgba(40,40,40,.2);
	box-shadow:rgba(40, 40, 40, 0.498039) 0 0 50px;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	}

#top{
	padding-left:49px;
	text-align: left;
	padding-left:680px;
	margin-left:20px;
}
#top img{
	width:282px;
	height:15px;
	padding-top:13px;
	}

#header{
	width:960px;
	padding:14px 0 10px 0;
	height:60px;
	padding-bottom:20px;
	margin-left:20px;
	margin-top:10px;
}
#logo {
	height:69px;
	display:inline;
	float:left;
}
#logo a{
	display:block;
	line-height:64px;
	height:69px;
	background:url(../images/JC-logo.png) no-repeat;
	text-align:right;
	line-height: 69px;
	
	}


h1#logo{
	font-size:45px;
	font-weight:100;

}

h1#logo span{
	margin-left:61px;
	text-align:left;
	padding:0 20px;
}

/*h1#logo a span{
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;}

h1#logo a:hover span{
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	}
*/
.contact{
	text-align:right;
	margin-top:33px;}
.contact a{text-decoration: underline}
.contact a:hover{text-decoration:none}

/*THEME AND main*/

.main{
	clear:both;
	margin-top:42px;
	margin-left:20px;}


/*.contact a{padding:2px 6px;}*/

	
/********  == subNav == *************/
#subNav{
	float:right;
	margin:1px 20px 50px 0;
		}

#subNav ul li{
	height:30px;
	display:inline;
	float:left;
	line-height:40px;
}
#subNav ul li a{
	margin-left:1px;
	color:white;
	text-align:center;
	width:108px;
	height:40px;
	display:block;
}



#subNav li.activesubNav a{	
	opacity:1;
	}
	
#subNav li.activesubNav a:hover{		
	-o-box-shadow: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	opacity:1;
	}






/********----------- MISC ----------**************/

	
/** BOOKSHELF **/
#bookshelf{
	margin:20px 0 40px 100px;}
	
/*PORTFOLIO PAGE*/

#portfolio #main h2{
	font-size:28px;
	margin-top:20px;
	color:#ACA3A3;
	text-shadow: 0 1px 0 #fff}

#portfolio .mosaic{
	clear:left;
	width:960px;
	margin-top:24px;
	height:464px;
	text-align:center;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
	}	


.mosaic h2, .sidebar h2{margin-top:20px; font-size:32px; font-style: italic}
.mosaic h2 {text-align:center; }

.thumb-description{clear:left; margin-top:34px; text-align: center}


/*THEME PAGES*/
.thumbnail-3{
	width:420px;
	float:left;
	margin:0 12px 12px 24px;
	height:200px;
	-o-box-shadow: 0 1px 5px rgba(100,37,19,.5);
	-moz-box-shadow: 0 1px 5px rgba(100,37,19,.5);
	-webkit-box-shadow: 0 1px 5px rgba(100,37,19,.5);
	box-shadow: 0 1px 5px rgba(100,37,19,.5);
	opacity:.9;
	}







h3.description{
	background: url(../images/asterisk.png) no-repeat;
	width:554px;
	padding-left:40px;
	margin:24px 0 12px 0;
	}
	
	
	
	
/***FOOTER**/
#footer {
	clear:both;
	margin-top:24px;
	height:70px;
	}	
	
#footer ul{
	float:right; 
	margin-right: 20px
	}
#footer ul li{
	display:inline;
	float:left;
	margin-top:20px;
	}
#footer ul li a{
	margin:20px 0 200px 12px;
	text-decoration:underline;
	padding:2px 6px;
	}
#footer ul li a:hover{
	text-decoration:none}
	
#footer p{
	clear:both; 
	float:right;
	margin-top:24px;
	margin-right: 20px}


/*CONTACT*/
#contact form{
	margin-top:24px;
	}
#contact form label{
	float:none;
	font-size:20px;
	margin-bottom:12px;
	clear:both;
	}
#contact form input#Name, #contact form input#Email{
	float:none;
	clear:both;
	height:30px;
	width:316px;
	font-size:15px;
	font-family: Arial, sans-serif;
	padding-left:12px;
	margin-top:6px;
	}

#contact form input#Name{
	margin-bottom:21px;}

#contact form textarea{
	width:564px;
	padding:12px;
	font-size:15px;
	margin:6px 0 24px 0;
}

input#send_message_Button{
	-moz-border-radius: 30px; -webkit-border-radius: 30px;
	height:40px;
	width:130px;
	line-height:40px;
	border:0;
	font-family: "sorts-mill-goudy-1";
	font-size:15px;
	float:right;
	margin-right:5px;
	}
	
input#send_message_Button:hover{
	cursor: pointer;
	}
	


#latest-work{margin-top:24px}

.others{margin:20px 0 60px 0}

.box, .box a{
	width:180px;
	height:90px;
	display:block;
	text-align: center;
	float:left;
	margin-right:15px;
	font-size:22px;
	font-style: italic;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
	}
	

.box a h3{margin:15px 0 10px 0}
.box p{font-size:14px}


.thumbnail{
	width:300px;
	height: 183px;
	margin:12px 12px 100px 0;
	display:inline;
	float:left}
	
.thumbnail img{
	width:300px;
	height: 183px;
	margin-bottom: 18px;}

.thumbnail:hover{
	}


#ux .thumbnail, #ux .thumbnail img  {height:400px}

a .thumbnail-description{padding:4px}


.principle{
	clear:left;
	margin-bottom:36px;}

h3.title{
	width:936px;
	font-size:28px;
	text-transform:uppercase;
	height:60px;
	line-height: 60px;
	padding-left:24px;}
	
.titlebg{
	position:absolute;
	z-index:500;
	width:50px;
	height:25px;
	background:url(../images/title.png) no-repeat;
	margin-top:54px;
	}	
	
p.definition{
	font-size:18px;
	line-height: 24px;
	width:936px;
	padding:24px 12px 12px 12px;
	margin-bottom:24px;}
	
	
/*LISTS*/
ul.elements li {
	margin:6px 0;
	list-style: square;
	}
ul.elements {
	margin-left:24px}
	
/*round corners*/
div.anythingSlider.activeSlider .anythingWindow {
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;}



/*NEW STYLES - New Portfolio*/
.work{
	display:inline;
	float:left;
	margin:0 0 12px 0;
	width:292px;
	height:262px;
	border:2px solid #cbcbcb;
	background: #e6e6e6;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	margin-right:12px;
	opacity: .9}


.work:hover{
	-o-box-shadow: 0 1px 15px rgba(100,37,19,.7);
	-moz-box-shadow: 0 1px 15px rgba(100,37,19,.7);
	-webkit-box-shadow: 0 0px 20px rgba(192,37,15,.5);
	box-shadow: 0 1px 12px rgba(100,37,19,.7);
	opacity: 1;
	border:2px solid #CCB0AA;
	}

.work-image1{
	width:272px;
	height:171px;
	border-bottom: 1px solid #EDEDED;
	}

.work-image1 img{
	width:272px;
	height:171px;}

.work-content{
	width:272px;
	height:240px;
	margin:10px 0 0 10px;
	background: #fff;
}
	

.work-comments h3{
	font-size: 22px;
	font-style: italic;
	color: #818181;
	margin:20px 0 0 12px;
	}
#work-page h2{
	font-size:40px;
	margin:12px 0;
	color:#404040;	
	}

#work-page .wrapped-work{
	margin-left:52px}
	
#wrapped-work h3.contact a span{
	width:31px;
	height:30px;
	background: url(../images/contact.png) no-repeat;
	}
#wrapped-work h3.contact a span:hover{display:block}