/* CSS Marjorie Lazaro 2010 */
/* reset */
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, formulaire, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 100%;
	vertical-align: baseline	
}
body { line-height: 1; background-color: #000; color: #fff }
ol, ul { list-style: none }

:focus { outline: 0 }
a img, img { border: none !important;}
table { border-collapse: collapse; border-spacing: 0 }

/* tags */
h1 { position: relative; float: left; font-size: 14px; font-weight: normal; color: #4f524e }
h2 { float: left; font-size: 11px; color: #b4bb69 }
p, ul { font-size: 13px; line-height: 18px }
a:link, a:visited, a:hover, a:active { color: #fff }

/* basics */
.float-right { float: right }
.float-left { float: left }
.clear-both { clear: both }
.clear-left { clear: left }
.clear-right { clear: right }
.sep-1 { height: 1px }
.sep-15 { height: 15px }
.marginL-20 { margin-left: 20px }
.text-underline { text-decoration: underline; background: transparent }


/* Layout */
.wrapper { min-width: 960px }
.content { float: left; z-index: 200; clear: both; width: 636px; position: absolute; top: 55px; left: 70px; padding: 7px 12px 20px 12px; background: transparent url(../images/bg-light.png) 0 0 repeat }
.sidebar { z-index: 200; width: 210px; float: right; position: relative; top: 55px }

/* menu */
.sidebar img { float: left; margin-bottom: 12px }
ul.navigation { margin: 0; padding: 0 }
ul.navigation li { list-style-type: none; text-align: right; margin: 0; padding: 0 }
ul.navigation li a { display: block; float: right; clear: both; height: 26px; font-size: 14px; text-transform: uppercase; text-decoration: none; line-height: 23px; padding: 0 20px 0 10px; background: transparent url(../images/bg-nav.png) 0 0 no-repeat }
ul.navigation li a:hover, ul.navigation li a.current { text-decoration: none; background: transparent url(../images/bg-nav-current.png) 0 0 no-repeat }

.header { z-index: 200; position: relative; top: 0; left: 0 }
.header ul li { float: left; display: inline; list-style-type: none; margin: 10px 0 0 5px; padding-right: 5px; border-right: 1px solid #FFFFFF; font-weight: bold; }
.header ul li.last { border: 0; width: 100px }
.header ul li a { font-size: 9px; text-decoration: none; text-transform: uppercase; }
.header ul li:hover { text-decoration:underline}

/* home */
.home .sidebar { top: 81px }

/* portfolio: liste projets */
.portfolio .content { top: 81px; left: 70px; background:url(../images/bg-dark.png); }
.portfolio .sidebar { top: 81px }
.portfolio .title h1 { position: relative; float: left; height: 12px; font-size: 14px; color: #fff; margin-top: -7px; padding: 10px 12px; background: transparent url(../images/bg-dark.png) 0 0 repeat; border-right: 1px solid #5a5e57 }
.portfolio .title h1.first { background-color: #b4bb69; background-image: none; border: 0; margin-left: -12px;  } 
.portfolio .title h1.second { background-image: none; border: 0; margin-left: -12px; color:#FFFFFF;  } 
.info-client h1.second { background-image: none; border: 0;  color:#FFFFFF;  } 
.portfolio .title h1.first a{ text-decoration: none; } 
.portfolio .title h1 img { position: relative; top: 1px }
.content .title { height: 25px }
ul.paging { float: right }
ul.paging li { display: inline; float: left }
ul.paging li a { position: relative; font-size: 11px; text-decoration: none; font-weight: normal; color: #fff; padding-left: 4px }
ul.paging li a.current, ul.paging li a:hover { color: #b4bb69 }
.filter { clear: both; background: transparent url(../images/bg-light.png) 0 0 repeat; height: auto; padding: 7px; margin: 0 -12px; line-height: 13px; float: left; }
.filter h2 { line-height: 15px; margin-right: 5px }
.filter a { padding: 1px; text-decoration: none; font-size: 11px; float: left; }
.filter a.active { background-color: #b4bb69 }
.filter a:hover { background-color: #b4bb69 }
.projetcs a img {  border: 1px solid #ccc !important;  margin: 2px;}
.projetcs a:hover img { border: 1px solid #B4BB69 !important;  }

/* portfolio: detail project */
.project-detail .sidebar { top: 51px }
.project { float: left; z-index: 200; clear: both; position: absolute; top: 36px; left: 65px; width: 705px; height: 300px; padding: 15px;}
.info-client  {text-align: right;}
.info-client , .info-client-light { margin: 0 -10px; padding: 4px 12px; height: 17px; font-size: 11px; line-height: 17px; background: transparent url(../images/bg-dark.png) 0 0 repeat;  }
.info-client-light { background: transparent url(../images/bg-light2.png) repeat; }
.info-client  h2, .info-client-light h2 { float: left; clear: left; padding-right: 5px }
.info-client-light a.back{ float: right; color: #b4bb69; text-transform: uppercase; text-decoration: none; font-weight: bold }
.project-images { width: 725px; margin: 0 -10px 0 -10px; height: 450px; background: url(../images/bg-dark.png); }
.project-images .projetcs { float: left; margin: 0 4px; width: 84px }
.project-images .projetcs a img.first { margin-top: -51px }
.project-images .projetcs a img { margin-bottom: 6px; }
img.image-projet { float: left; margin-top: -54px }
.project-images .previous { position: relative; top: 220px; left: -30px; width: 30px }
.project-images .next { position: relative; top: 193px; left: 735px; width: 30px }
.share { float: left; z-index: 200; clear: both; width: 699px; height: 15px; padding: 5px 13px; margin: 0 0 0 -10px; font-size: 11px; background: transparent url(../images/bg-dark.png) 0 0 repeat }
#credit {float: right; height: 15px; margin: 0 0 0 0; font-size: 11px; text-align: right; }
/* contact */
.contact { float: left; z-index: 200; clear: both; position: relative; top: 51px; left: 69px; width: 631px; height: 300px; padding: 15px; background: transparent url(../images/bg-dark.png) 0 0 repeat }
.contact p { clear: left; margin-top: 25px; font-size: 13px; line-height: 18px; font-weight: normal }
.contact h2 { float: none; text-transform: uppercase; font-size: 14px }
.contactmenu .sidebar { top: 51px }

/* services */
.services .content { float: left; z-index: 200; position: relative; top: 51px; left: 69px; height: 530px; padding: 0 9px 0 0; margin: 0; background-image: none }
.services .sidebar { top: 51px }
.services  .content  p, .services  .content ul { clear: left; margin-top: 25px; padding-right: 25px }
.services h2 { float: none; text-transform: uppercase; font-size: 14px }
/* scrollbar */
div#pane1 { z-index: 200; clear: both; position: absolute; margin: 0; padding: 20px 0 20px 20px; background: transparent url(../images/bg-dark.png) 0 0 repeat; border: 0; width: 641px; height: 490px; overflow: auto }
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 1 }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: transparent url(../images/bg-dark.png) 0 0 repeat }
.jScrollPaneDrag { position: absolute; background: #b4bb69; cursor: pointer; overflow: hidden }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden }
a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 6px }
a.jScrollArrowDown { display: block;	position: absolute;	z-index: 1;	bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; height: 6px }


/* full window size rotating BG */
#page { z-index: 2; position: relative; margin: 0; width: 100%; }
.bgstretcher { background: #000; overflow: hidden; width: 100%;	position: fixed !important; z-index: 1 }
.bgstretcher, .bgstretcher ul, .bgstretcher ul li { position: absolute; top: 0; right: 0; left: 0; bottom: 0 }
.bgstretcher ul, .bgstretcher ul li { margin: 0;	padding: 0;	list-style: none }

/* galleria */
/* general styling for this example */
/* begin gallery styling */
#jgal { list-style: none; width: 720px; position: absolute; top: 91px; left: 6px; }
#jgal li { opacity: .5; float: right; display: block; width: 100px; height: 75px; cursor: pointer; border: 1px solid #fff; margin-top: 0; margin-bottom: 16px; margin-left: 560px; margin-right: 7px}
#jgal li img { position: absolute; top: 0;  left: 0; display: none; }
#jgal li.active img { display: block; width: 600px; height: 450px; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99; /* safari bug */ border: 1px solid #b4bb69;}

#logo { position: absolute; top: 476px; left: 499px; z-index: 9;}
#gallery2 { position: absolute; top: 89px; left: 615px;}
#gallery2 li img { width: 100px; height: 75px;}
#gallery2 li {margin-bottom: 16px;}

#flash { position: absolute; top: 91px; z-index:1;}
.tooltip{width: 640px; margin: 0; padding: 10px; font-size: 11px; color: #666; background: #fff;}
.tooltip p{margin:0;text-align:justify;}
#tooltip_3{background:#fff; display: none;}
#tooltip_3 p { font-size: 11px;}
.delay {float: right; text-decoration: none; font-size: 12px; margin: 2px 0 3px 10px;}

#zoomProject { height:100%; width:100%; background:black; overflow:hidden; max-height:100%; position: absolute; display:none; z-index: 999; cursor: pointer;}

#loupe:hover { cursor: pointer;}

.play { position: absolute; width: 100px; height: 75px; margin: 2px;}

.vScroll { overflow-y:scroll; }


#splashVideo { position:absolute; top:100px;}