@font-face {
    font-family: Cuprum;
    src: url('Cuprum.otf');
}

html,
body {
    margin:0px;
    padding:0px;
    width:100%;
}

body {
    background:url(../image/background.jpg) 50% 0px repeat-y;
    background-size:100%;
}

h1 {
    lettter-spacing:-50px;
}

h2 {
    text-align:center;
    font-weight:normal;
    text-transform:uppercase;
    font-family:Arial;
    font-size:14px;
    color:#b72f1c;
}

img {
    border:0px;
}

.loader {
    margin-left:auto;
    margin-right:auto;
    width:59px;
    height:45px;
    background:url(../image/109.gif);
}

#global {
    width:980px;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;    
}

/* Header */

#header {
    position:fixed;
    width:100%;    
    border-top:0px solid #b72f1c;
    height:80px;
    top:0px;
    z-index:10;    
}

#header a.link {
    
}

#header a {
    color:#000;
    text-decoration:none;
    font-weight:500;
    text-transform:uppercase;
    font-family:Cuprum;
    font-size:14px;
    letter-spacing:1px;
    __text-shadow:0px 1px 1px #FFF;
}

#header a.last {

}

#header ul {
    margin:0px;
    padding:0px;
    margin-top:10px;
    margin-right:10px;
}

#header li {
    list-style:none;
    float:left;
    margin-right:30px;
}

#header .logo {
    float:left;
    margin-top:10px;
    margin-left:15px;
}

#header nav {
    float:right;
}

/* Page */

.page {
    width:100%;
}

/* Footer */

#footer {
    height:20px;    
    text-align:center;
    padding-top:20px;
    padding-bottom:100px;
    width:200px;
    margin-left:auto;
    margin-right:auto;
}

#footer a {
    color:white;
    text-transform:uppercase;
    font-family:Arial;
    font-size:9px;
    color:#222;
    text-decoration:none;
}

.arrow-bottom {
    z-index:1000;
    position:absolute;
    left:50%;
    top:100%;
    margin-top:-50px;
    margin-left:-20px;
}

/* --- Pages --- */

/* Homepage */

#homepage {
    position:absolute;
    overflow:hidden;
    top:0px;
    left:0px;
    z-index:1;
}

#homepage h1 {
    margin:0px;
}

/* Realisations */

#realisations {
    _background:url(../image/background.jpg) 50% 0px;
    float:left;
}

#realisations h1 {
    background:url(../image/portfolio.png) 0px 50% no-repeat;
    width:786px;
    height:156px;
    font-size:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
    margin-bottom:50px;
}

#realisations h2 {
    text-align:left;
}

#realisations .references {
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
}

#realisations .reference {
    float:left;
    margin-left:5px;
    margin-right:5px;
    margin-top:5px;
    margin-bottom:5px;
}

#realisations .sep {
    width:100%;
    height:50px;
    float:left;
}

#realisations .reference-detail {
    position:absolute;
    background:white;
    height:240px;
    width:401px;
    opacity:0.9;
}

#realisations .reference-detail h2 {
    margin-left:25px;
    margin-top:20px;
    color:#454545;
    font-size:22px;
    text-transform:uppercase;
    font-family:Arial;
    font-weight:normal;
    border-left:1px solid #6e6e6e;
    padding-left:15px;
    margin-bottom:0px;
    text-shadow:0 1px 0px #FFF;
    letter-spacing:0.5px;
}


#realisations .reference-detail p {
    margin-left:25px;
    margin-top:0px;
    color:#454545;
    font-size:12px;
    font-family:Arial;
    font-weight:normal;
    border-left:1px solid #6e6e6e;
    padding-left:15px;
    padding-top:0px;
    padding-right:20px;
    letter-spacing:0.5px;
    line-height:16px;
}

#realisations .reference-detail p.line1 {
    border-left:1px solid #B72F1C;
    color:#B72F1C;
}

#realisations .reference-detail .techno img {
    position:relative;
    top:15px;
}

#realisations .reference-detail a {
    text-decoration:none;
    color:#454545;
    font-size:12px;
    letter-spacing:0.5px;
}

#realisations .reference-detail a:hover {
    text-decoration:underline;
}

#realisations .reference .image {
    display:none;
}

#realisations .reference .first {
    display:inline;
    position:absolute;
    height:30px;
    width:30px;
    text-decoration:none;
    background:#CCC;
    margin-left:370px;
    margin-top:209px;
    font-size:26px;
    font-weight:bold;
    text-align:center;
}

#realisations .reference .first:hover {
    text-decoration:none;
}

/* Savoir-faire */

#savoir-faire {
    _background:url(../image/background.jpg);
    float:left;
}

#savoir-faire h1 {

}
 
#savoir-faire .items {
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
}

#savoir-faire .item {
    float:left;
    margin-left:20px;
    margin-right:20px;
    margin-top:30px;
    margin-bottom:30px;
    width:390px;
}

#savoir-faire .item p {
    margin-top:0px;
    font-size:12px;
    font-family:Arial;
    font-weight:normal;
    padding-left:15px;
    padding-top:10px;
    color:#282828;
    padding:0px;
    margin:0px;
    line-height:18px;        
    background:white;
    padding:10px;
    opacity:0.5;
    -moz-border-radius: 5px;
    box-shadow: 1px 1px 20px #ccc;  
}

#savoir-faire .item-detail {
    -moz-border-radius: 5px;
    position:absolute;
    z-index:1000;
    color:white;
    font-size:12px;
    font-family:Arial;
    font-weight:normal;
    border-left:1px solid #6e6e6e;
    background:#464646;
    width:370px;
    padding:10px;
    cursor:pointer;
}

/* References */

#references {
    _background:url(../image/background.jpg);
    float:left;
}

#references h1 {
    background:url(../image/references.png) 0px 50% no-repeat;
    width:703px;
    height:156px;
    font-size:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
    margin-bottom:30px;
}

#references .logos {
    width:1100px;
    margin-left:auto;
    margin-right:auto;
}

#references .logo a {
    float:left;
    margin-top:10px;
    padding:5px 10px;
    width:160px;
    text-align:center;
    display:block;
}

#references .logo a:hover {
    background:url(../image/back-over-logos.png);
    box-shadow:-1px 1.5px 5px #6c6c6c inset, 0px 1px 1px #FFF;
    __opacity:0.7;
    border-radius:10px;
}


/* Partenaires */

#partenaires {
    _background:url(../image/background.jpg);
    float:left;
}

#partenaires h1 {
    background:url(../image/partenaires.png) 0px 50% no-repeat;
    width:755px;
    height:156px;
    font-size:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
    margin-bottom:30px;
}

#partenaires .logos {
    width:1100px;
    margin-left:auto;
    margin-right:auto;
}

#partenaires .logo a {
    float:left;
    margin-top:10px;
    padding:5px 10px;
    width:160px;
    text-align:center;
    display:block;
}

#partenaires .logo a:hover {
    background:url(../image/back-over-logos.png);
    box-shadow:-1px 1.5px 5px #6c6c6c inset, 0px 1px 1px #FFF;
    __opacity:0.7;
    border-radius:10px;
}


/* Vous */

#vous {
    _background:url(../image/background.jpg);
    float:left;
}

#vous h1 {
    background:url(../image/vous.png) 0px 50% no-repeat;
    width:306px;
    height:125px;
    font-size:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
    margin-bottom:30px;
}

#vous .message {
    width:700px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    left:50px;
    margin-top:70px;
}

/* Nous */

#nous {
    _background:url(../image/background.jpg);
    float:left;
}

#nous h1 {
    background:url(../image/nous.png) 0px 50% no-repeat;
    width:306px;
    height:125px;
    font-size:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
    margin-bottom:30px;
}

#nous .message {
    width:700px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    margin-top:70px;
}

/* Société */

#societe {
    height:700px;
    background:blue;
}

/* Contact */

#contact {
    _background:url(../image/background.jpg);
    float:left;
}

#contact h1 {
    background:url(../image/contacts.png) 0px 50% no-repeat;
    width:565px;
    height:125px;
    font-size:0px;
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
    margin-bottom:50px;
}


#contact .googlemap {
    background:url(../image/maps-background.png) repeat-x;
    padding-top:6px;
    float:left;
    width:100%;
    margin-top:30px;
}

#contact .address {
    float:left;
    width:100%;
    background:#000;
    height:140px;
    position:relative;
    top:-5px;
}

#contact .adress-wrapper {
    margin-left:50px;
    margin-top:10px;
}

#contact .adress-wrapper p {
    width:100px;
    float:left;
    color:#b1b1b1;
    font-family:Arial;
    font-size:12px;
    height:100px;
    line-height:20px;
}

#contact .adress-wrapper p a {
    color:#b1b1b1;
    font-size:12px;
    text-decoration:none;
}

#contact .adress-wrapper .line {
    padding-left:20px;
    border-left:1px solid #4d4d4d;
    width:170px;
}