@charset "UTF-8";
/* 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: "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 1em; /* 11px */
	vertical-align: baseline	
}
body { line-height: 1; background-color: #000; color: #fff; overflow-x: hidden }
ol, ul { list-style: none }

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

/* tags */
h1 { display: block; font-size: 118%; color: #fff; background: transparent url(../images/bg-h1-green.png) 0 0 repeat }
h1 .seo { display: none }
h1 img { padding: 10px 10px 10px 0 }
h2 { color: #fff; font-size: 100%; font-weight: bold; margin: 20px 0 10px; padding: 0 50px; height: 35px; line-height: 35px; background: transparent url(../images/bg-dark.png) 0 0 repeat }
h3 { color: #fff; font-size: 95% }
h4 { color: #fff; font-size: 90% }
p { font-size: 85%; line-height: 125%; color: #fff; margin: 0 50px } /* 11px */
a:link, a:visited, a:active { color: #d6f159 }
a:hover { color: #fff; text-decoration: underline }
ul { font-size: 85%; line-height: 110% }
ul li { list-style-type: circle; margin: 0 0 10px 25px }

/* basics */
.hide { display: none }
.show { display: block }
.float-left { float: left }
.float-right { float: right }
.clear-both { clear: both }
.clear-left { clear: left }
.clear-right { clear: right }
.sep-5 { height: 5px }
.sep-10 { height: 10px }
.sep-20 { height: 20px }
.marginT-5 { margin-top: 5px }
.marginT-15 { margin-top: 15px }
.marginL-5 { margin-left: 5px }
.marginL-10 { margin-left: 10px }
.marginL-20 { margin-left: 20px }
.marginR-15 { margin-right: 15px }
.text-right { text-align: right }
.text-underline { text-decoration: underline; background: transparent }

.wrapper { width: 100%; height: 100%; margin: 0; padding: 0 }
.sidebar { position: fixed; top: 0; left: 0; width: 200px; height: 370px; margin: 60px 25px }
.content { float: left; min-height: 600px; height: auto !important; height: 600px; margin: 0 0 0 250px; background: transparent url(../images/bg-dark.png) 0 0 repeat }

ul.navigation { padding: 80px 0 60px; margin: 0; background: transparent url(../images/bg-dark.png) 0 0 repeat }
ul.navigation li { list-style-type: none; margin: 0 }
ul.navigation li a { display: block; width: 175px; padding-left: 25px; font-weight: normal; font-size: 110%; color: #bababa; text-decoration: none; line-height: 1.8em; border-bottom: 1px solid #bababa }
ul.navigation li a:hover, ul.navigation li a.current { color: #fff; background: transparent url(../images/bg-dark.png) 0 0 repeat; border-bottom: 1px solid #fff }

/* home */
.home { width: 100%; height: 100%; margin: 0; padding: 0; background: #000 url(../images/bg-feuille.jpg) top left no-repeat; background-attachment: fixed }
.home .content { width: 725px }
.home .col { float: left; width: 222px; margin-right: 30px }
.home .col-03 { float: left; width: 221px }
.home .col h2, .home .col-03 h2 { border-bottom: 1px solid #667329 }
.home .col ul, .home .col-03 ul { margin-left: 40px }

.home .testimonials { float: left; width: 262px; padding: 0 50px }
.home .testimonials h1 { margin: 0 -50px; padding: 0 50px }
.home .testimonials blockquote { clear: left; color: #fff; width: 262px }
.home .testimonials p { color: #fff; padding: 0 10px 10px; margin: 0 0 0 20px; width: 200px  }
.home .testimonials .testimonial { width: 220px; background: url(../images/quote-close.png) 100% 100% no-repeat; height: auto; float: left }
.home .testimonials .testimonial-author { clear: left; float: right; text-align: right; margin: 15px 0 0; width: 262px }
.quote-open { float: left; width: 26px; height: 23px; background: url(../images/quote-open.png) 0 0 no-repeat }
/* social tools */
.home .socialTools { float: left; width: 263px; padding: 0 50px }
.home .socialTools h1 { margin: 0 -50px; padding: 0 50px }
#twitter_m { width: 263px; padding: 0 }
#twitter_container { min-height: 45px; height: auto !important; height: 40px; padding-bottom: 10px }
#twitter_update_list { width: 263px; padding: 0; overflow: hidden; color: #fff }
#twitter_update_list li { width: 263px; list-style: none; padding-bottom: 3px; margin: 0 0 15px; border-bottom: 1px solid #707e2d }
#twitter_update_list li a { color: #d6f159; text-decoration: none }
#twitter_update_list li a:hover { color: #fff }

/* gen */
.gen .content { width: 800px; min-height: 380px; height: auto !important; height: 380px; padding: 60px 0 0 }
.content h1 { padding-left: 50px }
.gen .content ul  { width: 500px; margin: 0 50px 0 40px; padding: 0; color: #fff }
.gen .content ul.social-networks li { display: block; margin: 0; text-align: left; height: 47px; border-bottom: 1px solid #707e2d; color: #fff }
.gen .content ul.social-networks li a { display: block; height: 22px; line-height: 15px; padding: 10px 10px 15px; text-decoration: none }
.gen .content ul.social-networks li a:hover, .gen .content ul.social-networks li a:focus { color: #fff; background: transparent url(../images/bg-dark.png) 0 0 repeat }
.gen .content ul.social-networks li a:active { padding: 12px 0 3px }
.gen .content ul.social-networks li a img { float: left; margin: 0 10px 10px 0 }
.gen .content ul.social-networks li a b { color: #fff }
.fader { background: transparent url(../images/bg-dark.png) 0 0 repeat; position: absolute; top: 0; left: 0; width: 100%; height: 1px }

/* about */
img.portrait { float: left; margin: 0 20px 0 50px }
p.me { float: left; margin: 0; width: 380px }
.about { width: 100%; height: 100%; margin: 0; padding: 0; background: #000 url(../images/bg-ciel.jpg) top left no-repeat; background-attachment: fixed }
.about .content h1 { background: transparent url(../images/bg-h1-purple.png) 0 0 repeat }
.about .content a { color: #d4a7ff }
.about .content ul.social-networks li { border-bottom: 1px solid #95899c }
/* contact */
.contact { width: 100%; height: 100%; margin: 0; padding: 0; background: #000 url(../images/bg-musee.jpg) top left no-repeat; background-attachment: fixed }
.contact .content h1 { background: transparent url(../images/bg-h1-yellow.png) 0 0 repeat }
.contact .content a { color: #feff21 }
.contact .content ul.social-networks li { border-bottom: 1px solid #c1c19d }

#contact { width: 750px; margin: 0; padding: 0 }
#contact .formblock { display: block; margin-bottom: 11px }
label { float: left; clear: left; margin: 11px 20px 0 0; width: 95px; text-align: right; font-size: 16px; color: #fff }
input {
	float: left; width: 274px; height: 35px; padding: 5px 10px 0px 10px; margin: 0 15px 10px 0;
	background-color: transparent; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px;
	border-color: #000000; color: #fff; font-size: 16px
}
input::-webkit-input-placeholder  { color: #fff; text-shadow: 0px -1px 0px #e4e2e2 }
input:-moz-placeholder { color: #fff; text-shadow: 0px -1px 0px #e4e2e2 }
textarea {
	float: left; width: 274px; height: 170px; padding: 12px 10px 0px 10px; margin: 0 15px 10px 0;
	border-color: #000000; background-color: transparent; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px;
	color: #fff; font-family: sans-serif; font-size: 16px
}
textarea::-webkit-input-placeholder  { color: #fff }
textarea:-moz-placeholder { color: #fff }
input:focus, textarea:focus {	 background: transparent url(../images/bg-dark.png) 0 0 repeat }
button {
	width: 185px; height: 52px; float: left; padding: 10px 15px; margin: 0 15px 0 228px;
	-moz-box-shadow: 0px 0px 5px #e4e2e2;-webkit-box-shadow: 0px 0px 5px #e4e2e2;
	 background: transparent url(../images/bg-dark.png) 0 0 repeat; border: 1px solid #e8e6e6;
	cursor: pointer; color: #fff
}
#contact .error { float: left; font-weight: bold; color: #f8f644; padding-top: 10px }
#contact .info { float: left; color: #f8f644; margin-bottom: 10px}



/* portfolio */
.portfolio .content { width: 80%; min-height: 100%; height: auto !important; height: 100%; padding: 60px 0 0 }
.portfolio { height: 100%; margin: 0; padding: 0; background: #000 url(../images/bg-lights.jpg) top left no-repeat; background-attachment: fixed }
.portfolio .content h1 { width: auto; height: 40px; background: transparent url(../images/bg-h1-white.png) 0 0 repeat }
.portfolio .content a { color: #bababa }
.portfolio .projects-thumbs { padding: 0 0 0 50px }

.filter { float: right; width: 260px; list-style-type: none; padding-top: 15px; margin-right: 20px; font-size: 85%; text-align: right }
.filter a { display: inline; float: right; text-align: right; margin: 0; padding: 0 10px; border-right: 1px solid #bababa; text-decoration: none; font-weight: normal }
.filter a.last { padding-right: 0; border: 0 }
.filter a:hover, .filter a.current { color: #fff }
	
.boxgrid { width: 192px; height: 192px; margin: 20px 20px 0 0; float: left; border: 1px solid #bababa; overflow: hidden; position: relative }
.boxgrid:hover { border-color: #fff }
.boxgrid img { position: absolute; top: 0; left: 0; border: 0 }
.boxgrid h3 { padding: 10px; width: 100% } 
.boxgrid p { clear: left; width: 150px; padding: 0 10px; margin: 10px 0 0; color: #fff; font-weight: normal }
.cover { 
	float: left; position: absolute; 
	height: 100px; width: 100%; 
	background: transparent url(../images/bg-dark.png) 0 0 repeat
}
.caption .cover { top: 160px; left: 0 }

/* projects details */
.project { margin: 20px 20px 0 0; font-weight: normal }
.project p { margin: 0 }
.project h2 {  } 
.project h3 { margin: 0 0 10px 0; color: #d6f159 } 
.project .detail-illus { width: 325px; float: left }
.project .detail-illus img { margin-bottom: 20px; float: left }
.project .detail-text { float: left; width: 350px }