/* ********** Css Portfolio  **********
   * http://www.remi.taieb.fr   *
   * Date : 2010                      *
   * Author : TAIEB Rémi              *
   ********************************** */

/* Imports */
@import url("reset.css");

/***** Global *****/
body {
	background:#1e4a6e url(../images/bg_folio.jpg) repeat-x center top;
	color:#FFFFFF;
	font:12px Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	width:auto;
}
strong { font-weight:bold; }
img { border:0; }
                                           
.imgGauche { float:left; }
.imgDroite { float:right; }
.center{ display:block; text-align:center; }
.clearboth { clear:both; }

#portfolio { 
	background:url("../images/bg_light.jpg") no-repeat scroll center top transparent;
	margin:auto; 
	padding:0;
	width:100%;
}
#headerContent { position:relative; }
#myDeco { 
	position:absolute;
	right:-230px;
	top:0; 
}

#header, #content, #footer { 
	margin:auto;
	width:974px;
}

/* ********** HEADER ********** */
#headerContent { 
	margin:auto;
	padding-top:30px; 
	height:110px; 
	width:365px;
}

#header h1 { 
	font-size:30px; 
	font-weight:normal; 
	line-height:26px;
	margin-top:10px;
	_margin-top:40px;
	!margin-top:40px;
	text-decoration:none
}
#header h1 span { font-size:20px; }
#header a { color:#FFF; text-decoration:none }
#header a:hover { color:#c2cfd9; }
#header a img { 
	float:left;
	margin-right:30px;
	margin-left:27px;
}

#header ul#menu { 
	margin-left:18px;
	margin-top:16px;
}
#header li { 
	float:left;
	font:13px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	height:14px;
	padding:4px 9px 5px;
}
#header li.bull { 
	font-size:14px;
	padding:4px 8px;
}

#header li a { text-decoration:none; } 
#header li a:hover { color:#FFF  } 
#header li.on,#header li:hover { background:url(../images/bg_menu.png) no-repeat; }
#header li.bull:hover { background:none; }

#header li#actifHome, #header li#actifWork, #header li#actifResume, #header li#actifContact { 
	text-align:center;
}
#header li#actifHome { 
	background-position: 0 0; 
	width:39px;
}
#header li#actifWork { 
	background-position:0 -39px;
	width:47px;
}
#header li#actifResume { 
	background-position:0 -79px;
	width:55px;
}
#header li#actifContact { 
	background-position:2px -118px;
	width:63px;
}

/* Page home */
.home #content p { 
	font:19px Arial, Helvetica, sans-serif; 
	width:495px; 
	margin-top:84px;
	float:left;
}
.home #content #imgWork { float:right; margin-bottom:-10px; }
.home #content #aboutMe { margin-top:100px; }

/* Page Work */
#content ul#menuWork { 
	margin-top:35px; 
	margin-right:2px;
	float:right;
}
#content ul#menuWork li { 
	float:left;
	font:11px Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	margin-left:13px;
}
#content ul#menuWork li a {
	color:#FFF;
	text-decoration:none;
}
#content ul#menuWork li a:hover {
	text-decoration:underline;
}
#content ul#menuWork li#active a {
	text-decoration:underline;
}

#content #contentWork {
	background:transparent url(../images/bg_work.png) repeat scroll 0 0;
	margin-bottom:20px;
	min-height:142px;
	width:972px;
}
#content #contentWork .myWork {
	float:left;
	height:140px;
	padding-left:1px;
	padding-top:1px;
	position:relative;
}

#content #contentWork .typeWork {
	position:absolute;
	right:4px;
	top:4px;
	text-align:right;
}
#content #contentWork .typeWork span{
	background-color:#121B24;
	padding:2px 4px;
	text-transform:uppercase;
	color:#FFFFFF;
	font-size:10px;
	font-weight:bold;
	text-align:right;
}

#work_43 { background:#000000 url(../upload/work_43.jpg) no-repeat ; }
#work_44 { background:#000000 url(../upload/work_44.jpg) no-repeat ; }
#work_45 { background:#000000 url(../upload/work_45.jpg) no-repeat ; }
#work_46 { background:#000000 url(../upload/work_46.jpg) no-repeat ; }
#work_47 { background:#000000 url(../upload/work_47.jpg) no-repeat ; }
#work_49 { background:#000000 url(../upload/work_49.jpg) no-repeat ; }
#work_50 { background:#000000 url(../upload/work_50.jpg) no-repeat ; }
#work_51 { background:#000000 url(../upload/work_51.jpg) no-repeat ; }
#work_52 { background:#000000 url(../upload/work_52.jpg) no-repeat ; }
#work_53 { background:#000000 url(../upload/work_53.jpg) no-repeat ; }
#work_54 { background:#000000 url(../upload/work_54.jpg) no-repeat ; }
#work_55 { background:#000000 url(../upload/work_55.jpg) no-repeat ; }
#work_56 { background:#000000 url(../upload/work_56.jpg) no-repeat ; }
#work_57 { background:#000000 url(../upload/work_57.jpg) no-repeat ; }
#work_58 { background:#000000 url(../upload/work_58.jpg) no-repeat ; }
#work_59 { background:#000000 url(../upload/work_59.jpg) no-repeat ; }
#work_60 { background:#000000 url(../upload/work_60.jpg) no-repeat ; }
#work_61 { background:#000000 url(../upload/work_61.jpg) no-repeat ; }
#work_62 { background:#000000 url(../upload/work_62.jpg) no-repeat ; }
#work_63 { background:#000000 url(../upload/work_63.jpg) no-repeat ; }
#work_64 { background:#000000 url(../upload/work_64.jpg) no-repeat ; }
#work_65 { background:#000000 url(../upload/work_65.jpg) no-repeat ; }
#work_66 { background:#000000 url(../upload/work_66.jpg) no-repeat ; }
#work_67 { background:#000000 url(../upload/work_59.jpg) no-repeat ; }

#workDescription { float:left; margin-right:19px; margin-top:21px; width:350px; }
#workDescription h3 { border-bottom:1px double #829EBC;
font-size:19px;
font-weight:normal;
margin-top:47px;
!margin-top:49px;
_margin-top:40px;
padding-bottom:2px;
text-shadow:2px 1px 1px #071D2F;
text-transform:uppercase;
width:350px; }

/* hack Chrome / Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#workDescription h3  { margin-top:51px; }
}

#workDescription h4 { text-transform:uppercase; font-size:11px; margin-top:20px; }
#workDescription p { font-size:13px; margin-top:10px; text-align:justify;
text-shadow:1px 2px 1px #103858;}
#workDescription a { font-size:13px; color:#7f99af; text-align:justify; text-decoration:none; }
#workDescription a:hover { color:#8da8bf; }

#effetWork, #effetWorkVideo { 
	float:right;
	margin-top:36px;
	-moz-box-shadow:0 0 9px #0B1722;
	-webkit-box-shadow:0 0 9px #0B1722;
	box-shadow:0 0 9px #0B1722;
 }
 #effetWorkVideo {
	 width:450px;
	 height:358px;
 }

/* Page resume */
.resume #content #personnage {
	margin-left:115px;
	margin-top:28px;
	float:left;
}
.resume #content { min-height:285px; }
.resume #content #cv {
	background:url(../images/download_cv_on.png) no-repeat 0px 0px;
	float:right;
	margin-right:280px;
	margin-top:109px;
}

/* Page contact */
.contact #content #information { 
	font:14px Arial, Helvetica, sans-serif; 
	margin-left:192px;
	margin-top:30px;
}

.contact #content #information li { line-height:18px; }
.contact #content #information ul#adresse, .contact #content #information ul#adresseOz {
	background:url(../images/adresse.gif) no-repeat 0px 1px;
	padding-left:30px;
	width:160px;
	float:left;
}
.contact #content #information ul#adresseOz #date { font-size:11px; }
.contact #content #information ul#adresseContact { float:left }
.contact #content #information ul#adresseContact li { margin-bottom:10px; }
.contact #content #information ul#adresseContact li#email,.contact #content #information ul#adresseContact li#tel {
	padding-left:30px;
	width:250px;
}
.contact #content #information ul#adresseContact li#email {
	background:url(../images/mail.gif) no-repeat 0px 1px;
}
.contact #content #information ul#adresseContact li#tel { 
	background:url(../images/tel.gif) no-repeat 0px 1px; 
}
.contact #content #information ul#adresseContact li#email a {
	color:#FFF; text-decoration:none;
}
.contact #content #information ul#adresseContact span { font-size:11px; }

/* Formulaire */
#form {
	position:relative;
	margin-top:20px;
	margin-left:70px;
	height:285px;
}
#form img {
	position:absolute;
	z-index:0;
}
#formulaire{
	left:100px;
	position:absolute;
	top:70px;
	z-index:99;
}
#envoyer {
	font-weight:bold;
	left:180px;
	position:absolute;
	text-transform:uppercase;
	top:200px;
	width:100px;
}
ul.form {
	border:0 none;
	list-style:none outside none;
	margin:0 auto;
	padding:0;
}
ul.form li { height:45px; }
.form_head {
	border-bottom:0 none !important;
	color:#AAAAAA;
	height:20px;
	text-align:center;
	width:400px;
}
ul.form li label {
	display:block;
	float:left;
	font:11px Arial,Helvetica,sans-serif;
	text-transform:uppercase;
	width:180px;
}
.required {
	clear:left;
	color:#000000;
	display:block;
	float:left;
	font-size:9px;
	font-weight:bold;
	margin-top:4px;
	text-transform:uppercase;
	width:160px;
}
ul.form li input, ul.form li select, ul.form li textarea {
	-moz-border-radius:4px 4px 4px 4px;
	-webkit-border-radius:4px 4px 4px 4px;
	border-radius:4px 4px 4px 4px;
	background-color:#fff;
	border:2px solid #fff;
	padding-left:3px;
	width:180px;
}
#comment {
	-moz-border-radius:4px 4px 4px 4px;
	-webkit-border-radius:4px 4px 4px 4px;
	border-radius:4px 4px 4px 4px;
	background-color:#fff;
	border:2px solid #fff;
	width:400px;
}
ul.form li textarea {
	height:90px;
	width:300px;
}
ul.form li.comment .required, ul.form li.comment label { width:120px; }
li.comments { height:130px !important; }
.valid { border:2px solid green !important; }
.invalid { border:2px solid #5D0101 !important; }

/* PAGINATION */

#BlocPagination { float:right; margin-bottom:15px; }
#BlocPagination ul#pagination a { color:#ffffff; font-family:Arial,Verdana,Helvetica,sans-serif; font-size:10px; font-weight:bold; text-decoration:underline; text-transform:uppercase; }
#BlocPagination ul#pagination a:hover { color:#e4e8ec; text-decoration:none; }
#BlocPagination ul li { float:left; height:19px; padding-left:9px; padding-right:9px; }
#BlocPagination ul li.active { height:19px; padding-left:9px; padding-right:9px; }
#pagination .previous-off, #pagination .next-off { font-size:10px;	color:#73869D; display:block; float:left; font-weight:bold;  text-transform:uppercase; margin-top:2px; }
#pagination .next a, #pagination .previous a { font-size:10px; font-weight:bold; text-transform:uppercase;  }

/* tooltip */
#tooltip {
	background-color:#1E1A1A;
	font-weight:normal;
	padding:5px;
	position:absolute;
	text-align:center;
	z-index:3000;
	opacity: 0.85;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	-moz-box-shadow:1px 1px 4px rgba(0, 0, 0, 0.3);
	-webkit-border-radius-bottomleft:3px;
	-webkit-border-radius-bottomright:3px;
	-webkit-border-radius-topleft:3px;
	-webkit-border-radius-topright:3px;
	-webkit-box-shadow:1px 1px 4px rgba(0, 0, 0, 0.3);
	border-radius-bottomleft:3px;
	border-radius-bottomright:3px;
	border-radius-topleft:3px;
	border-radius-topright:3px;
	box-shadow:1px 1px 4px rgba(0, 0, 0, 0.3);
}
#tooltip a { color:#FFFFFF }
#tooltip h3, #tooltip div { margin: 0; }

/* ShareBox */
.shareBox { float:right; margin-top:-3px; }
.shareBox a{ display:block; position:relative; height:20px; width:23px; margin:0 8px; float:left; text-decoration:none!important; }
.tooltipfb,.tooltiptw {
    display:block;
    height:31px;
    left:-33px;
    position:absolute;
    top:-30px;                    
}
.tooltipfb {
    background:url(../images/shareFacebook.png) no-repeat scroll left top;
	width:112px;
}
.tooltiptw {
    background:url(../images/shareTwitter.png) no-repeat scroll left top;
	width:100px;
}

/* Blockquote */
blockquote {
	background: url(../images/LeftQuo.jpg) no-repeat top left;
	margin:0;
	padding-top:4px;
	border:none;
	height:20px;
}

blockquote p {
	background: url(../images/RightQuo.jpg) no-repeat right 2px;
	margin:0 10px 0 0;
	padding: 0px 30px;	
	float:left;
	height:20px;
} 

/* Footer */
#footer h3 {
	color:#C0DAF0;
	font-size:11.2px;
	font-weight:bold;
	letter-spacing:0.5px;
	margin-bottom:5px;
	text-shadow:2px 1px 1px #071D2F;
	text-transform:uppercase;
}
#footer #footerCitation  { 
	background:transparent url(../images/bg_footer.png) no-repeat scroll 0 0;
	color:#C0DAF0;
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	font-size-adjust:none;
	font-weight:bold;
	height:53px;
	letter-spacing:0.5px;
	line-height:normal;
	padding-left:23px;
	padding-top:22px;
	text-shadow:0 2px 2px #071D2F;
	text-transform:uppercase;
}
#footer #footerContent { 
	margin-top:5px; 
	margin-bottom:20px; 
	width:360px;
	float:right;position:relative; 
}
#footer #footerContent span {
	color:#fff;
	font:10px Arial, Helvetica, sans-serif; 
	font-weight:bold;
	text-transform:uppercase;
}

#footer #footerContent img {
	vertical-align:middle;
}