@import url("reset.css");

/*
Theme Name: Zhell
Theme URI: http://www.zhell.fr
Description: Zhell Devblog
Version: 1.0
Author: Julien Siwek
Tags: mantle color, variable width, two columns, widgets
*/

/* COMMON
--------------------------------------------------------------------------------------------------------------------------------------*/

html, body{
	height:100%;
}

body{
	color:#555;
	font-size:75%;	/* 1em = 12px */
	background:#fff url(img/bg_body.jpg) center top no-repeat;
}

a{
	color:#888;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

.searchTxt{
	margin-bottom:15px;
}

.searchTxt strong{
	color:#4dad00;
}

.margBtm20{
	margin-bottom:20px;
}

#container{
	min-height:100%;
	height:auto !important;
	height:100%;
	zoom:1;
	background:url(img/bg_bottom.jpg) center bottom no-repeat;
}

#page{
	background:url(img/bg_footer.jpg) left bottom repeat-x;
}

/* HEADER
--------------------------------------------------------------------------------------------------------------------------------------*/

#header{
	width:990px;
	padding-top:48px;
	margin:0 auto;
	position:relative;
}

#header #logo{
	width:412px;
	height:48px;
	font-size:1em;
	font-weight:bold;
	margin-left:29px;
	text-transform:uppercase;
	background:url(img/bg_header.jpg) left top no-repeat;
}

#header #logo strong{
	position:absolute;
	left:-9999em;
}

#header #logo a{
	display:block;
	outline:0;
	height:24px;
	padding-left:135px;
	width:277px;
	padding-top:24px;
	color:#555;
	text-decoration:none;
}

#ajaxLoader{
	width:32px;
	height:32px;
	position:absolute;
	z-index:100;
	left:385px;
	top:61px;
	display:none;
	background:url(img/ajax-loader.gif) left top no-repeat;
}

/* MENU
--------------------------------------------------------------------------------------------------------------------------------------*/

#menu{
	height:308px;
	background:url(img/bg_menu.jpg) left top repeat-x;
}

#menu .content{
	width:999px;
	margin:0 auto;
	position:relative;
}

#dossiers{
	width:960px;
	padding-left:39px;
	margin:0 auto;
	padding-top:31px;
	overflow:hidden;
}

#dossiers li{
	margin-right:57px;
	float:left;
	cursor:pointer;
	width:193px;
	height:175px;
}

#dossiers li a{
	width:100%;
	height:100%;
	display:block;
	outline:0;
	background-position:left top;
	background-repeat:none;
}

#dossiers li span{
	display:block;
	width:100%;
	height:100%;
	border:none;
	cursor:pointer;
	visibility:hidden;
	background-position:left -175px;
	background-repeat:none;
	text-indent:-9999em;
}

#menu .contact{margin:0}

#menu .portfolio a, #menu .portfolio span{background-image:url(img/menu_portfolio.jpg)}
#menu .blog a, #menu .blog span{background-image:url(img/menu_blog.jpg)}
#menu .propos a, #menu .propos span{background-image:url(img/menu_a_propos.jpg)}
#menu .contact a, #menu .contact span{background-image:url(img/menu_contact.jpg)}

#AJAXContent #pageAJAX{
	position:absolute;
	left:-500px;
	height:180px;
	width:480px;
	padding:10px;
	margin-top:15px;
	background-color:#fff;
	overflow:hidden;
	z-index:1000;
	display:none;
}

#AJAXContent .close{
	left:525px;
	top:0px;
	z-index:1200;
	width:29px;
	height:29px;
	cursor:pointer;
	position:absolute;
	background:url(img/btn_close.png) left top no-repeat;
}

#AJAXContent  #sendbutton{
	width:80px !important;
}

/* Contact Form */

#cformsform{
	width:440px;
	margin:0;
	padding:0 20px;
}

#cformsform li{
	background-color:#908b86 !important;
	height:1%;
	margin:0 0 5px 0 !important;
	overflow:hidden;
	padding:5px !important;
}

#cformsform label{
	color:#fff;
	float:left;
	font-weight:bold;
	width:95px;
	margin:0;
}

#cformsform input{
	background-color:transparent;
	border:none;
	color:#f2f2f2;
	float:left;
	width:300px;
}

#cformsform textarea{
	background-color:transparent;
	border:none;
	color:#f2f2f2;
	height:70px;
	width:310px;
}

#cformsform .reqtxt, #cformsform .emailreqtxt{
	display:none;
}

#cformsform .cf-sb{
	width:100%;
	overflow:hidden;
	margin:0;
}

#cformsform #sendbutton{
	background:#fff url(img/btn_send_com.png) right center no-repeat;
	border:none !important;
	color:#8c8c8c;
	cursor:pointer;
	display:block;
	float:right;
	width:auto;
	margin:0;
	font-size:1em;
	font-weight:bold;
	padding-right:30px;
}

#cformsform .cf-ol .cf_li_err{
	border:none !important;
	background:#ff7f00 !important;
}

#usermessageb{
	position:absolute;
	left:30px;
	top:170px;
	border:none;
	width:300px;
	color:#ff7f00;
	font-weight:bold;
	font-size:0.83em;
	padding:0 !important;
	background:#fff !important;
}

#usermessageb.waiting{
	color:#908b86;
}

#usermessageb.success{
	color:#000;
}

/* CONTENT
--------------------------------------------------------------------------------------------------------------------------------------*/

#content{
	width:924px;
	min-height:500px;
	height:auto !important;
	height:500px;
	margin:-81px auto 0;
	background:url(img/bg_page.png) left top no-repeat;
}

#main{
	position:relative;
	padding:30px 30px 20px;
	margin:0 5px;
	float:left;
	display:inline;
	background-color:#fff;
}

/********** PAGINATION **********/

#content .wp-pagenavi{
	text-align:center;
	margin:5px 0;
}

#content .wp-pagenavi .current{
	background-color:#f2f2f2;
	border:1px solid #aaa;
	color:#555;
}

#content .wp-pagenavi a{
	border:1px solid #555;
	background-color:#6E6861;
	color:#fff;
}

/********** BLOG ***********/

#blogInner, #singleInner, #pageInner, #catInner, #otherInner, #portInner{
	width:470px;
	float:left;
	display:inline;
	margin-right:53px;
}

#pageInner h2, #catInner h2{
	color:#fff;
	padding:4px;
	background-color:#6e6861;
	font-size:1.25em;
	margin-bottom:20px;
}

#blogList{
	margin-bottom:25px;
}

#blogList li{
	padding-bottom:8px;
	margin-bottom:10px;
	background:url(img/bg_latest_post.png) right bottom no-repeat;
}

#blogList .content{
	height:1%;
	overflow:hidden;
	position:relative;
	background-color:#fbfbfb;
	border:1px solid #f2f2f2;
	padding:20px 10px 20px 20px;
}

#blogList .thumbLink{
	float:left;
}

#blogList .thumb{
	display:block;
}

#blogList .desc{
	float:left;
	width:333px;
	display:inline;
	margin-left:5px;
}

#blogList h2{
	font-size:1.25em;
	margin-bottom:2px;
	background-color:#6e6861;
}

#blogList h2 a{
	color:#fff;
	display:block;
	padding:4px;
	text-decoration:none;
}

#blogList p{
	font-size:0.92em;
	text-align:justify;
}

#blogList .meta{
	font-size:0.83em;
	color:#999;
	padding-left:5px;
	text-align:left;
	margin-bottom:10px;
}

#blogList .suite{
	position:absolute;
	right:10px;
	bottom:10px;
	overflow:hidden;
}

#blogList .suite a{
	display:block;
	float:right;
	height:11px;
	color:#5c5b5b;
	font-size:0.83em;
	line-height:1em;
	text-decoration:none;
	padding:4px 25px 4px 0;
	background:url(img/btn_suite.png) right center no-repeat;
}

/********** SINGLE ***********/

.pageSingle h2, h2.decorator, #content h1{
	color:#6e6861;
	padding-bottom:8px;
	font-size:1.08em;
	text-transform:uppercase;
	background:url(img/bg_latest_post.png) right bottom no-repeat;
}

h2.decorator{
	margin-bottom:20px;
}

.pageSingle h2 span, h2.decorator span, #content h1 span{
	display:block;
	padding:10px 5px;
	border:1px solid #f2f2f2;
	background-color:#fbfbfb;
}

#singleInner .meta{
	font-size:0.92em;
	color:#999;
	padding-left:5px;
	text-align:left;
	margin-bottom:20px;
}

#singleInner p{
	margin-bottom:15px;
}

#singleContent img{
	display:block;
	margin:0 auto;
	padding:3px;
	border:1px solid #d7d7d7;
}

#singleContent{
	margin-bottom:60px;
}

#singleContent a{
	color:#4dad00;
}

/********** A PROPOS & CONTACT ***********/

#pageAJAX{
	width:470px;
}

#pageAJAX h2{
	color:#fff;
	padding:4px;
	font-size:1.25em;
	margin-bottom:2px;
	background-color:#6e6861;
	margin-bottom:10px;
}

#pageAJAX h2 span{
	position:absolute;
	left:-9999em;
}

#pageAJAX p{
	margin-bottom:10px;
}

#aPropos{
	width:100%;
	overflow:hidden;
}

#aPropos .desc{
	width:260px;
	float:left;
	padding-right:10px;
	text-align:justify;
	border-right:1px solid #fcfcfc;
}

#aPropos .desc p{
	text-align:justify;
	line-height:1.27em;
}

#aPropos .infos{
	width:188px;
	float:left;
	padding-left:10px;
	border-left:1px solid #eee;
}

#aPropos .infos li{
	margin-bottom:10px;
}

/********** COMMENTS ***********/

#comments{
	text-align:right;
	font-size:1.08em;
	padding-right:27px;
	height:17px;
	padding:5px 27px 5px 0;
	margin-bottom:15px;
	border-bottom:1px solid #ebebeb;
	background:url(img/ico_comments.png) right center no-repeat;
}

/* Comments Form */

#leaveComment{
	padding-bottom:8px;
	background:url(img/bg_latest_post.png) right bottom no-repeat;
}

#leaveComment .content{
	padding:10px 20px;
	border:1px solid #f2f2f2;
	background:#fbfbfb url(img/ico_leave_com.png) 5px 5px no-repeat;
}

#leaveComment h3{
	padding-left:10px;
	font-size:1em;
	color:#8c8c8c;
	margin-bottom:10px;
}

#leaveComment .input{
	background-color:#908b86;
	padding:5px;
	margin-bottom:6px;
	overflow:hidden;
	height:1%;
}

#leaveComment .input label{
	width:95px;
	float:left;
	color:#fff;
	font-weight:bold;
}

#leaveComment .input input{
	width:300px;
	float:left;
	border:none;
	color:#f2f2f2;
	margin-top:2px;
	background-color:transparent;
}

#leaveComment .input textarea{
	width:315px;
	height:70px;
	border:none;
	color:#f2f2f2;
	background-color:transparent;
}

#leaveComment .btnSend{
	margin:0;
	width:100%;
	overflow:hidden;
}

#leaveComment .btnSend input{
	border:none;
	color:#8c8c8c;
	font-weight:bold;
	display:block;
	float:right;
	width:165px;
	cursor:pointer;
	padding-right:30px;
	background:#fbfbfb url(img/btn_send_com.png) right center no-repeat;
}

/* Comments List */

#commentlist{
	margin:0 0 20px 0;
	padding:0;
}

#commentlist li{
	list-style-type:none;
	margin-bottom:15px;
}

#commentlist .comment-author{
	padding-bottom:8px;
	background:url(img/bg_latest_post.png) right bottom no-repeat;
}

#commentlist .authorContent{
	border:1px solid #f2f2f2;
	background-color:#fbfbfb;
	height:1%;
	padding:2px;
	overflow:hidden;
}

#commentlist .authorContent img{
	padding:0;
	border:0;
	float:left;
	display:inline;
	margin-right:3px;
}

#commentlist .commentInfos{
	color:#6e6861;
	font-size:1em;
	padding-top:3px;
}

#commentlist .commentInfos strong{
	display:block;
	width:215px;
	margin-bottom:2px;
	padding-bottom:2px;
	border-bottom:1px solid #e7e7e7
}

#commentlist .commentText{
	padding-left:45px;
	font-size:0.92em;
}

#commentlist .commentText p{
	margin:0;
}

#commentlist .wp-smiley{
	vertical-align:middle;
}

/********** PORTFOLIO***********/

#portList li{
	width:100%;
	overflow:hidden;
	margin-bottom:20px;
}

#portList .content{
	background:url(img/bg_latest_post.png) right bottom no-repeat;
	padding-bottom:8px;
	width:446px;
	float:left;
}

#portList .inner{
	background-color:#fbfbfb;
	border:3px solid #6e6861;
	height:1%;
	overflow:hidden;
	position:relative;
}

#portList .lightbox{
	width:20px;
	float:right;
}

#portList .lightbox li{
	margin-bottom:3px;
}

#portList .lightbox a{
	display:block;
	padding:2px 5px;
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	background-color:#6e6861;
}

#portList .desc{
	position:absolute;
	left:0px;
	padding:10px;
	width:420px;
	top:115px;
	color:#fff;
	background:url(img/bg_port_desc.png) left top repeat;
}

#portList img{
	display:block;
}

#portList h3{
	font-size:1.17em;
	margin-bottom:10px;
}

#portList .desc p{
	color:#bfb9b9;
	line-height:1.17em;
	font-size:0.92em;
	margin-bottom:5px;
}

#portList .desc .last{
	margin-bottom:0;
}

#portList .desc .link{
	margin-bottom:0;
	margin-top:10px;
}

#portList .desc a{
	color:#fff;
	text-decoration:none;
}

#portList .desc a:hover{
	color:#dad2d2;
}

#fancy_title{
	display:none !important;
}

#portInner h2{
	margin-top:50px;
	margin-bottom:30px;
}

/* Other projects */

#otherProjets{
	margin-bottom:10px;
	padding-bottom:8px;
	background:url(img/bg_latest_post.png) right bottom no-repeat;
}

#otherProjets ul{
	background-color:#fbfbfb;
	border:1px solid #f2f2f2;
	height:1%;
	overflow:hidden;
	padding:14px;
}

#otherProjets li{
	float:left;
	margin:5px;
	width:100px;
	height:100px;
	overflow:hidden;
	position:relative;
}

#otherProjets img{
	display:block;
	position:absolute;
	left:0px;
	top:0px;
}

#otherProjets span{
	display:block;
	position:absolute;
	padding:10px;
	height:80px;
	width:80px;
	top:0px;
	color:#fff;
	left:-100px;
	font-size:0.92em;
	text-align:center;
	z-index:10;
	background:url(img/bg_port_desc.png) left top repeat;
}

#otherProjets ul ul{
	border:0;
	height:auto;
	padding:5px;
	position:absolute;
	bottom:0px;
	left:100px;
	width:90px;
	z-index:20;
	background-color:transparent;
}

#otherProjets ul ul li{
	height:15px;
	width:15px;
	margin:0 3px 0 0;
}

#otherProjets ul ul a{
	height:15px;
	width:15px;
	display:block;
	overflow:hidden;
	color:#fff;
	text-align:center;
	font-weight:bold;
	font-size:0.82em;
	text-decoration:none;
	background-color:#6e6861;
}

/* SIDEBAR
--------------------------------------------------------------------------------------------------------------------------------------*/

#sidebar{
	width:331px;
	float:left;
	position:relative;
	padding-bottom:18px;
	background:url(img/post_it_shadow.jpg) left bottom no-repeat;
}

#sidebar .content{
	border:1px solid #e8e8e8;
	border-bottom:none;
	padding-top:15px;
	padding-bottom:10px;
	background:#fcfcfc url(img/bg_post_it.jpg) left bottom no-repeat;
}

#sidebar .last{
	margin-bottom:0px !important;
}

#sidebar h2{
	height:29px;
	border:none;
	color:#fff;
	padding-top:10px;
	padding-left:40px;
	font-size:1.25em;
	font-weight:bold;
	margin-bottom:10px;
	text-transform:uppercase;
	background-position:right top;
	background-repeat:no-repeat;
}

.pageBlog #sidebar h2, .pageSingle #sidebar h2, .pageTemp #sidebar h2, .pageCat #sidebar h2{background-image:url(img/bg_sidebar_green.png)}
.pagePort #sidebar h2{background-image:url(img/bg_sidebar_blue.png)}
.pageOther #sidebar h2{background-image:url(img/bg_sidebar_grey.png)}

#trombonne{
	width:82px;
	height:126px;
	position:absolute;
	right:-50px;
	top:-85px;
	background:url(img/trombonne.png) left top no-repeat;
}

/********** SEARCH FORM **********/

#searchform{
	margin-bottom:30px;
}

#searchform fieldset{
	margin-left:35px;
	width:280px;
	padding:3px 2px 3px 5px;
	background-color:#6e6861;
}

#searchform #s{
	width:255px;
	border:none;
	font-size:1em;
	color:#fff;
	vertical-align:middle;
	background-color:transparent;
}

#searchform .btnSearch{
	vertical-align:middle;
}

/********** LIST CAT **********/

#listCat{
	width:290px;
	margin-left:29px;
}

#listCat li{
	margin-bottom:10px;
	font-size:1.27em;
	display:block;
	height:15px;
	text-align:right;
	padding-right:20px;
	background:url(img/ico_cat.png) right center no-repeat;
}

#listCat a{
	text-decoration:none;
}

#listCat a:hover{
	color:#555;
}

/********** LATEST PROJECTS **********/

#latestProjects{
	width:291px;
	overflow:hidden;
	margin-left:38px;
	margin-bottom:30px;
}

#latestProjects li{
	margin-bottom:3px;
	position:relative;
	overflow:hidden;
	float:left;
}

#latestProjects a{
	display:block;
	width:291px;
	height:56px;
	color:#eee;
	text-decoration:none;
}

#latestProjects img{
	display:block;
}

#latestProjects small{
	color:#bfb9b9;
}

#latestProjects span{
	display:block;
	width:330px;
	height:36px;
	padding:10px;
	position:absolute;
	top:0px;
	left:320px;
	font-size:1.17em;
	cursor:pointer;
	text-align:right;
	background:url(img/project_hover.png) right top no-repeat;
}

#latestProjects strong{
	display:block;
	line-height:1em;
}

/********** LATEST POSTS **********/

#latestPosts{
	width:325px;
	margin:0 auto;
	overflow:hidden;
	margin-bottom:30px;
}

#latestPosts li{
	float:left;
	margin:4px;
	width:100px;
	height:100px;
	overflow:hidden;
	position:relative;
}

#latestPosts img{
	display:block;
	position:absolute;
	left:0px;
	top:0px;
}

#latestPosts span{
	display:block;
	position:absolute;
	padding:10px;
	height:80px;
	width:80px;
	top:0px;
	color:#fff;
	left:-100px;
	font-size:0.92em;
	text-align:center;
	z-index:10;
	background:url(img/bg_port_desc.png) left top repeat;
}

/* FOOTER
--------------------------------------------------------------------------------------------------------------------------------------*/

#footer{
	clear:both;
	color:#aaa;
	width:864px;
	margin:0 auto;
	text-align:right;
	padding:20px 50px 20px 0;
	background:url(img/logo_wp.jpg) right center no-repeat;
}

#footer a{
	color:#ccc;
}