/* Makeshift CSS Reset */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
html{background:#FFF;}
body {line-height: 1;color: #FFF;}
body{border-top:5px solid #0087b8;margin: 0 auto;font: 11px/24px Verdana, 'Lucida Grande', 'Lucida Bold', 'Myriad Pro', Myriad, Arial, sans-serif;position: relative;width:100%;height:100%;padding-top:150px;background: url("../images/back.jpg") 50% top no-repeat;}
#bleus{border-bottom:5px solid #0087b8;height:100%;width:100%;position:fixed;bottom:0;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
a{text-decoration: none;color:#0087b8;}
a:hover{text-decoration:underline;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-spacing: 0;}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {display: block;}

section, article{margin: 0 auto;padding: 0 10px;}

p{padding-bottom: 13px;color: #414042;}
span{color: #414042;}

hr{width:185px;height:2px;padding-top:-15px;}
h1{font-size:15px;font-weight:normal;color:#444;padding:5px 10px;}

/* SITE */

#wrapperContent{width:700px;margin: 0 auto;position: relative;z-index:700;}
#wrapper{width: 700px;height:480px;padding-bottom:20px;background:#FFF;margin:0 auto;position:relative;border:1px solid #777;-moz-box-shadow: 0px 2px 5px #444; -webkit-box-shadow: 0px 5px 25px #444; box-shadow: 0px 5px 25px #444;border-radius: 11px 11px 11px 11px;-moz-border-radius: 11px 11px 11px 11px;-webkit-border-radius: 11px 11px 11px 11px;filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;z-index:900;position:relative;}

nav ul{position:absolute;top:-25px;left:11px;}
nav li{display:inline;color:#555;}
nav ul li a{color:#555;font-weight:bold;font-size:13px;}
nav ul li a:hover{color:#0087b8;}
nav .sep{margin-top:5px;}

section{padding-top:90px;float:left;clear:both;}
 
/* twitter */
section aside:first-child{float:left;width:205px;height:393px;background:#FFF;position:relative;top:0;margin-left:10px;border-radius: 0 0 0 11px;-moz-border-radius: 0 0 0 11px;-webkit-border-radius: 0 0 0 11px;-moz-box-shadow: 0px 2px 5px #444; -webkit-box-shadow: 0px 2px 5px #444; box-shadow: 0px 2px 5px #444;}
section aside:first-child img.twit{top:-85px;position:absolute;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
section aside:first-child img.twit:hover{top:-85px;position:absolute;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;-moz-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);}
.twtr-join-conv{font-size:10px!important;}
section aside:first-child p{padding: 3px 10px;font-size:11px;line-height:1.2;}

/* facebook */
section aside:nth-child(2){z-index:9999;width:205px;height:393px;float:left;margin-left:237px;position:absolute;top:90px;border-radius: 0 0 11px 11px;-moz-border-radius: 0 0 11px 11px;-webkit-border-radius: 0 0 11px 11px;}
section aside:nth-child(2) img.twit{top:-85px;position:absolute;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
section aside:nth-child(2) img.twit:hover{top:-85px;position:absolute;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;-moz-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);}

/* facebook contact */
section article#middle{margin:0;padding:0;z-index:9999;width:205px;height:393px;float:left;margin-left:237px;position:absolute;top:90px;border-radius: 0 0 0 0;-moz-border-radius: 0 0 0 0;-webkit-border-radius: 0 0 0 0;-moz-box-shadow: 0px 2px 5px #444; -webkit-box-shadow: 0px 2px 5px #444; box-shadow: 0px 2px 5px #444;}
section article#middle img.twit{top:-85px;position:absolute;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
section article#middle img.twit:hover{top:-85px;position:absolute;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;-moz-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);}
section article#middle p{padding: 3px 10px;font-size:11px;line-height:1.2;}

/* last project */
section article:only-of-type{background:#FFF;width:205px;height:393px;padding:0;margin:0;float:left;margin-left:465px;position:absolute;top:90px;border-radius: 0 0 11px 0;-moz-border-radius: 0 0 11px 0;-webkit-border-radius: 0 0 11px 0;-moz-box-shadow: 0px 2px 5px #444; -webkit-box-shadow: 0px 2px 5px #444; box-shadow: 0px 2px 5px #444;}
section article:only-of-type img.twit{top:-85px;position:absolute;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
section article:only-of-type img.twit:hover{top:-85px;position:absolute;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;-moz-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);}
#geo{padding:0;position:relative;margin:0;top:0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;-moz-transform: rotate(0);-webkit-transform: rotate(0);}
section article:only-of-type p{padding: 3px 10px;font-size:11px;line-height:1.2;}

/* last project contact */
section article#right{background:#FFF;width:205px;height:393px;padding:0;margin:0;float:left;margin-left:465px;position:absolute;top:90px;border-radius: 0 0 11px 0;-moz-border-radius: 0 0 11px 0;-webkit-border-radius: 0 0 11px 0;-moz-box-shadow: 0px 2px 5px #444; -webkit-box-shadow: 0px 2px 5px #444; box-shadow: 0px 2px 5px #444;}
section article#right img.twit{top:-85px;position:absolute;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8;}
section article#right img.twit:hover{top:-85px;position:absolute;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;-moz-transform: rotate(-5deg);-webkit-transform: rotate(-5deg);}
#geo{padding:0;position:relative;margin:0;top:0;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;-moz-transform: rotate(0);-webkit-transform: rotate(0);}
section article#right p{padding: 3px 10px;font-size:11px;line-height:1.2;}

/* footer */
footer{color:#888;font-weight:bold;font-size:10px;position:fixed;right:-100px;bottom:110px;-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg); }

/* Le polaroid */
.offset-by-one-half{margin-left:50px;}
.five{width:280px;position:absolute;right:-100px;top:-150px;-moz-transform: rotate(-10deg);-webkit-transform: rotate(-10deg);}
.column, .columns{display:inline;float:left;margin:0 0 0 20px;}

ul.polaroids{margin: 0 0 18px -30px;}
ul.polaroids li{display:inline;}
#content a{color:#444;font-weight:bold;}
ul.polaroids li.messy a{-webkit-transform:rotate(-5deg);margin-left:160px;margin-top:0;}
ul.polaroids img{display:block;margin-bottom:12px;width:140px;}
ul.polaroids a{-webkit-box-shadow: rgba(0, 0, 0, 0.246094) 0px 3px 6px;-webkit-transform: rotate(-2deg);-webkit-transition: -webkit-transform 0.15s linear;background: white;color: #333;display: inline;float: left;font-family: 'Marker Felt', sans-serif;font-size: 18px;margin: 0px 0px 27px 30px;padding: 10px 10px 15px;text-align: center;text-decoration: none;width: auto;}

ul.polaroids a:after {content: attr(title);}

/* By default, we tilt all our images -2 degrees */
ul.polaroids a{position:relative;-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);margin-top:0px;margin-right:50px;filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;}

/* Rotate all even images 2 degrees */
ul.polaroids a:hover{filter:alpha(opacity=1);-moz-opacity:1;-khtml-opacity: 1;opacity: 1;}
ul.polaroids li:nth-child(even) a {-webkit-transform: rotate(35deg);-moz-transform: rotate(35deg);margin-top:-200px;margin-left:100px;}
ul.polaroids li:nth-child(3) a {-webkit-transform: rotate(55deg);-moz-transform: rotate(55deg);margin-top:-150px;margin-left:130px;}

/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
.five ul.polaroids li:first-child a:hover {-webkit-transform: scale(1.5) rotate(3deg);-moz-transform: scale(1.5) rotate(3deg);position: relative;z-index: 1001;}
.five ul.polaroids li:nth-child(2) a:hover {-webkit-transform: scale(1.5) rotate(35deg);-moz-transform: scale(1.5) rotate(35deg);position: relative;z-index: 1000;}
.five ul.polaroids li:last-child a:hover {-webkit-transform: scale(1.5) rotate(55deg);-moz-transform: scale(1.5) rotate(55deg);position: relative;z-index: 999;}


/* Add drop shadows and smooth out the transition (Safari only) */
ul.polaroids a {-webkit-transition: -webkit-transform .15s linear;-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);}
/* On hover, darken the shadows a bit */
ul.polaroids a {-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);}


/* facebook style */
fbConnectWidgetTopmost{background-color:#ebe9e6!important;}


/*h1{font-size: 20px;background: -webkit-gradient(linear,left top,right top,color-stop(1, rgb(188,189,191)),color-stop(0, rgb(149,150,154)));background: -moz-linear-gradient(left center,rgb(188,189,191) 100%,rgb(149,150,154) 0%);width: 429px;color: #FFF;padding: 4px 0 4px 70px;}
h2{font-size: 20px;background: -webkit-gradient(linear,left top,right top,color-stop(1, rgb(188,189,191)),color-stop(0, rgb(149,150,154)));background: -moz-linear-gradient(left center,rgb(188,189,191) 100%,rgb(149,150,154) 0%);width: 429px;color: #FFF;padding: 4px 0 4px 70px;}
h3{font-size: 16px;line-height: 22px;padding: 10px 0 10px 0;color: #414042;clear:both;}

#top{padding: 0;margin: 0;height: 170px;width: 1028px;}

/* navigation principale */
/*
#nav-principale{left: 0;height: 49px;width: 1028px;background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(243,141,32)),color-stop(0.83, rgb(250,183,60)));background: -moz-linear-gradient(center bottom,rgb(243,141,32) 0%,rgb(250,183,60) 83%); -moz-box-shadow: 0px 2px 5px #444; -webkit-box-shadow: 0px 2px 5px #444; box-shadow: 0px 2px 5px #444; filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#faba3c', endColorstr='#f38d20'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#faba3c', endColorstr='#f38d20')"; z-index: 9998; position: relative;}


#inscrivez-vous{background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(46,173,227)),color-stop(0.83, rgb(133,213,244)));background: -moz-linear-gradient(center bottom,rgb(46,173,227) 0%,rgb(133,213,244) 83%);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#faba3c', endColorstr='#f38d20'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#faba3c', endColorstr='#f38d20')"; -moz-box-shadow: 0px 2px 5px #444;  -webkit-box-shadow: 0px 2px 5px #444;  box-shadow: 0px 2px 5px #444; border-radius: 7px 7px 7px 7px;-moz-border-radius: 7px 7px 7px 7px;-webkit-border-radius: 7px 7px 7px 7px;padding: 9px 10px 5px 10px;text-align: center;width: 180px;float: right;margin-bottom: 20px;color: #FFF;text-decoration: none;font-size: 12px;}
#inscrivez-vous:hover{background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(243,140,30)),color-stop(0.83, rgb(251,185,61)));background: -moz-linear-gradient(center bottom,rgb(243,140,30) 0%,rgb(251,185,61) 83%);filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#85d5f4', endColorstr='#2eade3'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#85d5f4', endColorstr='#2eade3')"; } */