/*--- reset ---*/
*{
    margin:0;
    padding:0;
}
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;
    text-decoration: none;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
:focus {
    outline: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*--- base rules ---*/
html {
    height: 100%;
}
body {
    font: 0.75em Helvetica, Verdana, sans-serif;
    height: 100%;
    color: #555;
}
pre {
    font: 1em Helvetica, Verdana, sans-serif;
}
a {
    color:#829499;;
}
a:hover {
    color: #665D4C;
}
.hidden { display: none; }

input.radio, input.checkbox{
    margin-right:5px;
}

/*--- container ---*/
    #container {
        width: 970px;
        min-height: 100%;
        margin: 0 auto;
        text-align: left;
        padding: 0 0 0 50px;
        background: url('imgs/logo-perso.gif') no-repeat 0 50px;
    }


/*--- HEADER ---*/
    #header {
        overflow: hidden;
        height: 80px;
        background: url('imgs/header.gif') repeat-x 0 75px;
    }
    #header h1 {
        float: left;
        background: url('imgs/logo.gif') no-repeat right bottom;
    }
    #header h1 a {
        display: block;
        width: 160px;
        height: 80px;
        text-indent: -5000px;
        overflow: hidden;
    }
    #header p {
        width: 160px;
        height: 75px;
        float: right;
        border-bottom: 5px solid #aabbbf;
    }
    #header h2 {
        font-family: georgia, times, serif;
        width: 320px;
        padding-top: 50px;
        height: 25px;
        float: right;
        font-weight: normal;
        font-style: italic;
        border-bottom: 5px solid #aabbbf;
        font-size: 1.5em;
        text-transform: uppercase;
        letter-spacing: 0.055em;
    }
    #header h2.high {
        padding-top:30px;
        height:45px;
    }
    
/*--- TOP MENU ---*/
    ul#top-menu {
        display: block;
        height: 60px;
        width: 970px;
        overflow: hidden;
    }
    ul#top-menu li {
        float: left;
        overflow: hidden;
    }
    ul#top-menu li a {
        display: block;
        width: 160px;
        height: 60px;
        text-indent: -5000px;
        background: #48433a;
        background: url('imgs/top-menu.gif') no-repeat;
    }
    ul#top-menu li a.home {
        background-position: 0 0;
    }
    ul#top-menu li a.home:hover {
        background-position: 0 -60px;
    }
    ul#top-menu li.active a.home {
        background-position: 0 -120px;
    }
    ul#top-menu li a.refs {
        background-position: -160px 0;
    }
    ul#top-menu li a.refs:hover {
        background-position: -160px -60px;
    }
    ul#top-menu li.active a.refs {
        background-position: -160px -120px;
    }
    ul#top-menu li a.portfolio {
        background-position: -320px 0;
    }
    ul#top-menu li a.portfolio:hover {
        background-position: -320px -60px;
    }
    ul#top-menu li.active a.portfolio {
        background-position: -320px -120px;
    }
    ul#top-menu li a.contact {
        background-position: -480px 0;
    }
    ul#top-menu li a.contact:hover {
        background-position: -480px -60px;
    }
    ul#top-menu li.active a.contact {
        background-position: -480px -120px;
    }
    ul#top-menu li a.extras {
        background-position: -640px 0;
    }
    ul#top-menu li a.extras:hover {
        background-position: -640px -60px;
    }
    ul#top-menu li.active a.extras {
        background-position: -640px -120px;
    }
    ul#top-menu li a.blog {
        background-position: -800px 0;
        width: 170px;
    }
    ul#top-menu li a.blog:hover {
        background-position: -800px -60px;
    }
    ul#top-menu li.active a.blog {
        background-position: -800px -120px;
    }


/*////////////// page ///////////////*/
.page {
    clear: both;
    overflow: hidden;
}
.ie6root .page {
    height: 500px;
    overflow: visible;
}

/*--- HOME PAGE ---*/
    #home {
    }
    #home div.two-cols {
        margin-top: 0.833em;
        overflow: hidden;
        background: #f2f5f5 url('imgs/home-two-cols.gif') repeat-y top left;
    }
    #home div.two-cols h3 {
        display: none;
    }
    #home div.two-cols div {
        width: 460px;
        float: left;
        padding: 10px;
        margin-left: 10px;
    }
    #home div.two-cols div.first {
        margin-left: 0;
    }
    #home div.two-cols div.second {
        background: url('imgs/home-entre-nous.gif') 10px 10px no-repeat;
        width:435px;
        padding-left:35px;
    }
    #home p {
        line-height: 1.384em;
        margin-bottom: 0.666em;
    }
    #home .highlight {
        color: #29869f;
    }
    
    #home div.three-cols {
        margin: 0.833em 0;
        background: url('imgs/home-three-cols.gif') repeat-y top left;
        overflow: hidden;
    }
    #home div.three-cols .bloc {
        width: 275px;
        padding: 10px 10px 10px 35px;
        float: left;
        margin-left: 10px;
        overflow: hidden;
    }
    #home div.three-cols h3 {
        display: none;
    }
    #home div.three-cols p {
        margin: 0 0 0.384em 0;
    }
    #home div.three-cols .first {
        margin-left: 0;
        background: url('imgs/home-polyvalence.gif') 10px 10px no-repeat;
    }
    #home div.three-cols .second {
        width: 265px;
        background: url('imgs/home-expertise.gif') 10px 10px no-repeat;
    }
    #home div.three-cols .third {
        background: url('imgs/home-pertinence.gif') 10px 10px no-repeat;
        margin-right: 0;
    }
    #home ul{
    }
    #home li{
        background:url('imgs/grey-square.gif') no-repeat 7px 7px;
        text-indent:15px;
        margin-top:5px;
    }
    #home .highlight li{
        background-image:url('imgs/blue-square.gif');
    }
    #home .more{
        padding:5px;
        text-align:right;
    }
    #home .more li{
        background:none;
    }
    #home .more p{
        text-transform:uppercase;
    }
    #home .more .highlight{
        color:#8B7F62;
    }
    
    
/*--- REFERENCES ---*/
    #references {
        background: url('imgs/references-col.gif') repeat-y top right;
        padding: 20px 0;
    }
    #references .text {
        float: right;
        padding: 0 10px;
        width: 300px;
    }
    #references .text p {
        line-height: 1.333em;
    }
    #references .text p.highlighted {
        color: #29869f;
        font-size: 1.083em;
        line-height: 1.384em;
        margin-bottom: 1.153em;
    }
    #references ul.logos {
        float: left;
        width: 640px;
        overflow: hidden;
    }
    #references ul.logos li {
        float: left;
        width: 160px;
        min-height: 140px;
        height: 11.666em;
        text-align: center;
        overflow: hidden;
    }
    #references ul.ref_logos li span {
        display:block;
        width:100px;
        color:#829499;
    }


/*--- PORTFOLIO ---*/
    #portfolio {
    }
    #portfolio .menus {
        float: left;
        width: 160px;
        overflow: hidden;
    }
    #portfolio .menus ul {
        overflow: hidden;
        padding: 10px;
        background: #eef1f2;
        border-bottom: 1px solid #aabbbf;
    }
    #portfolio .menus h4 {
        margin-top: 1.25em;
        font-family: georgia, times, serif;
        font-size: 1.333em;
        padding-bottom: 0.187em;
        font-weight: normal;
        font-style: italic;
        color: #25738c;
        border-bottom: 1px solid #aabbbf;
    }
    #portfolio .menus li {
        padding-bottom: 7px;
        margin-bottom: 8px;
    }
    #portfolio .menus li.active {
        padding-bottom: 4px;
        border-bottom: 3px solid #aabbbf;
    }
    #portfolio .menus li.related {
        padding-bottom: 4px;
        border-bottom: 3px solid #ccdddf;
    }
    #portfolio .menus li a {
        display: block;
        color: #555;
    }
    #portfolio .menus li a:hover {
        color: #25738c;
    }
    #portfolio .menus li.active a {
        color: #25738c;
    }
    #portfolio .menus li a span {
        float: right;
        color: #999;
        display: block;
    }
    #portfolio .menus li.active a span {
        color: #555;
    }

    #portfolio .content {
        float: left;
        padding-top: 40px;
        width: 800px;
        margin-left: 10px;
    }

    #portfolio h3.page-path {
        font-weight: normal;
        font-size: 1.166em;
        padding-left: 485px;
        margin-bottom: 5px;
        letter-spacing: 0.083em;
    }
    #portfolio h3.page-path span {
        font-weight: bold;
        color: #25738c;
    }
    #portfolio div.selector {
        float:left;
        height:113px;
        width:680px;
        padding-left:5px;
        border:solid 1px #f0f2f3;
        background:#cdd3d4;
        overflow:hidden;
        /* ie56fix */
        display:inline;
    }
    
    /*- electrons 'grid' -*/
    #portfolio div.mini-electrons-row {
        overflow: hidden;
        margin-bottom: 10px;
    }
    #portfolio div.mini-electron {
        float: left;
        width: 130px;
        /*border: 1px solid #aabbbf;*/
        padding: 10px;
        margin-left: 10px;
        background: #e1e7e9;
        text-align: center;
    }
    #portfolio div.mini-electrons-row .first {
        margin-left: 0;
    }
    #portfolio div.mini-electron img {
        width: 130px;
        height: 80px;
        display: block;
    }
    #portfolio div.mini-electron a span {
        display: block;
        padding: 0.5em;
        font-size: 0.833em;
        background: #fff;
    }
    
    /*--- ELECTRONS SLIDER ---*/
    #portfolio div.electrons-slider {
        overflow: hidden;
        margin-bottom: 1.666em;
        border: 1px solid #aaa;
    } 
    #portfolio div.electrons-slider li {
        float: left;
        overflow: hidden;
    }
    .oui-slide-backward,
    .oui-slide-forward {
        cursor: pointer;
        width: 18px;
        height: 80px;
        background: url('imgs/slider-btns.gif') no-repeat;
        display: block;
        overflow: hidden;
        text-indent: -5000px;
    }
    .oui-slide-backward {
        border-right: 1px solid #aaa;
        float: left;
    }
    .oui-slide-forward {
        border-left: 1px solid #aaa;
        float: right;
        background-position: top right;
    }
    .oui-slide-backward:hover {
        background-position: center left;
    }
    .oui-slide-forward:hover {
        background-position: center right;
    }
	.oui-slide-backward-disabled {
        background-position: bottom left !important;
    }
	.oui-slide-forward-disabled {
        background-position: bottom right !important;
    }
    .oui-slide-mask {
        width: 760px;
        float: right;
    }
    #portfolio div.electrons-slider li a {
        display: block;
        overflow: hidden;
        width: 130px;
    }
    #portfolio div.electrons-slider li a.active {
    }
    #portfolio div.electrons-slider li a img {
        float: left;
        height: 80px;
        width: 130px;
    }
    #portfolio div.electrons-slider li a:hover {
    }
    #portfolio div.electrons-slider li.active a {
    }
    #portfolio div.leftscroll{
        width:43px;
        height:13px;
        float:left;
        margin-right:300px;
        margin-top: 5px;
        visibility:hidden;
        background:url('imgs/left.gif') no-repeat left;
    }
    #portfolio div.rightscroll{
        width:43px;
        height:13px;
        float:left;
        margin-left:300px;
        margin-top: 5px;
        visibility:hidden;
        background:url('imgs/right.gif') no-repeat right;
    }
/*_____ projectDesc _____*/
#portfolio .projectDesc{
    float:left;
    width:680px;
}
/*--- electronImg ---*/
    #portfolio .electronImg {
        float:left;
        width:380px;
        margin-top:40px;
        margin-right:30px;
    }
    /*- description -*/
    #portfolio .desc {
        float: right;
        width: 320px;
    }
    #portfolio .desc h3 {
        font-size: 1.833em;
        padding-top: 0.227em;
        color: #25738c;
        font-family: georgia, times, serif;
        font-weight: normal;
        font-style: italic;
        border-top: 1px solid #aabbbf;
    }
    #portfolio .desc h5 {
        font-weight: normal;
        font-size: 120%;
    }
    #portfolio .desc .description {
        margin: 0.833em 0;
        line-height: 1.333em;
    }
    #portfolio .desc p.tags {
        font-size:90%;
        font-style:italic;
    }
    #portfolio ul.quarks {
        width: 470px;
    }
    .ie7root #portfolio ul.quarks {
    }
    #portfolio .quarks li {
        overflow:hidden;
        margin-bottom:20px;
    }
    #portfolio .quarkTitle {
        text-transform:uppercase;
        color: #25738C;
        font-size: 130%;
    }
    #portfolio .flvQuark, #portfolio .swfQuark, #portfolio .imgQuark{
        display: block;
        margin:0 auto;
    }
    #portfolio .quarks .borderit{
        border:solid 1px #E1E7E9;
    }
    #portfolio a.more {
        margin-top: 0.833em;
        padding-top: 0.25em;
        display: block;
        border-top: 1px solid #aabbbf;
    }
    a.toTop {
        clear:both;
        float:right;
        padding-left:20px;
        margin-bottom:10px;
        background:url('imgs/up.gif') no-repeat;
    }
    a.backTo {
        float:right;
        padding-left:20px;
        margin:0 10px 10px;
        background:url('imgs/left.gif') no-repeat;
    }



/*--- CONTACT ---*/
    #contact {
        padding: 20px 0;
        background: url('imgs/references-col.gif') repeat-y top right;
    }
    #contact div.text {
        float: right;
        width: 300px;
        padding: 0 10px;
        overflow: hidden;
    }
    #contact .text p {
        line-height: 1.333em;
    }
    #contact .text p.highlighted {
        color: #29869f;
        font-size: 1.083em;
        line-height: 1.384em;
        margin-bottom: 1.153em;
    }
    #contact .form-container {
        float: left;
        width: 640px;
        overflow: hidden;
    }
    #contact .form-container h3 {
        padding-left: 170px;
        padding-bottom: 3px;
        margin-bottom: 10px;
        color: #25738c;
        font-family: georgia, times, serif;
        font-weight: normal;
        font-style: italic;
        font-size: 1.5em;
        border-bottom: 1px solid #ccc;
    }
    #contact .form-wrapper {
        overflow: hidden;
    }
    #contact .form-row {
        width: 630px;
        padding-left: 10px;
        overflow: hidden;
        margin-bottom: 10px;
    }
    #contact .submit-row {
        overflow: hidden;
        border-top: 1px solid #ccc;
        padding-top: 10px;
    }
    #contact .form-cell,
    #contact .form-cell-right {
        overflow: hidden;
        float: left;
        width:310px;
    }
    #contact .form-cell-right {
        margin-left: 10px;
    }
    #contact label {
        width: 150px;
        margin-right: 10px;
        float: left;
        text-align: right;
        padding-top: 5px;
    }
    #contact label.group-label {
        margin: 0;
    }
    #contact .group-wrapper label {
        padding: 0;
        text-align: left;
        margin: 0;
        margin: 5px 0 0 10px;
    }
    #contact input.text {
        width: 140px;
        padding: 4px;
        float: left;
        border: 1px solid #aabbbf;
        background: #eef1f2;
    }
    #contact textarea,
    #contact #company {
        width: 460px;
        padding: 5px 4px;
        float: left;
        border: 1px solid #aabbbf;
        background: #eef1f2;
    }
    #contact input.submit {
        margin-left: 170px;
        float: left;
        width: 150px;
        text-align: center;
        border: 1px solid #154e60;
        background: #25738c;
        color: #e1e7e9;
        padding: 4px 0;
    }
    
    
    ul.errors, #container label.error{
        font-weight:normal;
        text-align:center;
        color:#d22;
    }
    
/*////////////// extras ///////////////*/
#extras{
    background:url("imgs/references-col.gif") repeat-y right top;
    padding:20px 0;
}
#extras p.text, #extras div.text  {
    float: right;
    padding: 0 10px;
    width: 300px;
}
#extras ul{
    margin-bottom:20px;
    overflow:hidden;
    float:left;
}
#extras ul li{
    background:url('imgs/right2.gif') left center no-repeat;
    padding-left:20px;
    margin-top:20px;
}
#extras ul.errors li{
    text-align:left;
    background:none;
    padding:0;
}
#extras ul li a{
    color:#829499;
    margin-bottom:25px;
    margin-top:5px;
}
#extras ul li a:hover{
    color:#665d4c;
}
#extras form{
    width: 640px;
}
#extras .form-wrapper {
    overflow: hidden;
}
#extras .form-row {
    width: 630px;
    padding-left: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}
#extras .submit-row {
    overflow: hidden;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}
#extras label{
    clear:left;
    float:left;
    margin-top:10px;
    margin-bottom:5px;
    font-weight:bold;
}
#extras .group-wrapper label{
    font-weight:normal;
    margin:0 0 5px;
}
#extras select, #extras textarea, #extras radio, #extras input{
    clear:left;
    float:left;
}

#extras .highlighted{
    color:#29869F;
    font-size:1.083em;
    line-height:1.384em;
    margin-bottom:1.153em;
}

#satisfaction-form .info{
    margin: 40px 0 20px;
}
#satisfaction-form .horiz .group-wrapper{
    clear:left;
}
#satisfaction-form .horiz label{
    clear:none;
    margin-right:35px;
}

/*--- mentions légales ---*/
    #legal {
        padding-top:60px;
        margin: 0 0 40px;
    }
    #legal h2 {
        font-size:1.333em;
        margin-bottom:20px;
    }
    #legal h3 {
        margin-top:20px;
        margin-bottom:10px;
    }
    #legal h4 {
        margin-top:15px;
    }
    #legal li {
        background: url('imgs/right2.gif') 0px 0px no-repeat;
        padding-left:20px;
        margin-left:10px;
        margin-top:10px;
        color:#829499;
    }
    #legal a {
        color:#000;
    }
    #legal a:hover {
        color:#829499;
    }

/*--- FOOTER ---*/
    #footer {
        width: 970px;
        padding: 10px 0;
        border-left: none;
        border-right: none;
        display: block;
        overflow: hidden;
        background: #48433a;/* url('imgs/footer.gif') repeat-y top left;*/
        color: #74694f;
        font-size: 0.916em;
        line-height: 1.454em;
    }
    #footer h4 {
        font-family: georgia, times, serif;
        font-size: 1.09em;
        padding-bottom: 0.083em;
        font-weight: normal;
        font-style: italic;
        border-bottom: 1px solid #3e3a32;
        margin-bottom: 0.25em;
        color: #aabbbf;
    }
    #footer h4.company {
        font-family: Helvetica, Verdana, sans-serif;
        font-style: normal;
        font-size: 1em;
    }
    #footer a {
        color: #74694f;
    }
    #footer a:hover {
        color: #8b7f62;
    }
    #footer a.facebook,
    #footer a.twitter,
    #footer a.behance,
    #footer a.youtube {
        display: block;
        padding-left: 22px;
        height: 16px;
        line-height: 16px;
        margin-bottom: 3px;
    }
    #footer a.facebook {
        background: url('imgs/facebook.gif') no-repeat top left;
    }
    #footer a.twitter {
        background: url('imgs/twitter.gif') no-repeat top left;
    }
    #footer a.behance {
        background: url('imgs/behance.gif') no-repeat top left;
    }
    #footer a.youtube {
        background: url('imgs/youtube.gif') no-repeat top left;
    }
    #footer .col {
        margin-left: 10px;
        width: 150px;
        float: left;
    }
    #footer .col-recent {
        margin-left: 10px;
        width: 310px;
        float: left;
    }
    #footer a.recent-work {
        width: 130px;
        margin-top: 5px;
        display: block;
        padding: 10px;
        background: #3e3a32;
        overflow: hidden;
        float: left;
    }
    #footer a.recent-work img {
        float: left;
        filter: alpha(opacity=35);
        -moz-opacity: 0.35;
        -khtml-opacity: 0.35;
        opacity: 0.35;
    }
    #footer a:hover.recent-work img {
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    }
    #footer a.recent-work-text {
        float: left;
        width: 150px;
        margin-left: 10px;
        padding-top: 10px;
    }
    
    
/*--- erreur 404 ---*/
	#error {
	    height: 300px;
		background: url('imgs/references-col.gif') repeat-y top right;
	    padding: 60px 0 0 170px;
		line-height: 1.333em;
	}