/*//////////////////////////////////////////////////////////////////////////////////////////////////////// oxys.net */


body {
    margin:105px 20px 20px 45px;
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Helvetica Neue", Helvetica, Arial,  Helvetica, sans-serif;
    font-size:11px;
    background-attachment:fixed !important;
    color:#666;
}

a{color:#666; cursor:pointer; outline:none}
a:hover { color:#313131}

em { font-style:italic;}
ul{ list-style-type:none;}
p { font-weight:400; font-size: 16px; line-height: 24px;  }

.invisible{ visibility:hidden; }

.pilcrow { color:#ccc}
#top { position:absolute; top: 0}

#applications abbr{ border-bottom:1px  dashed #aaa; font-variant: small-caps;   cursor:help;}

.hr hr { display:none}
.hr { border-bottom:1px solid #aaa; margin:3em 0}



::selection { background: #333; color:#fff }
::-moz-selection { background: #333; color:#fff }

/*//////////////////////////////////////////////////////////////////////////////////////////////////////// Body */

/* — À propos */
#apropos            { background:url(img/apropos/apropos2.png)        no-repeat fixed 436px 0; }
/* — Services */
#communication      { background:url(img/services/communication.png)  no-repeat fixed 512px 0; }
#design             { background:url(img/services/design.png)         no-repeat fixed 351px 0; }
#seo                { background:url(img/services/seo.png)            no-repeat fixed 529px 0; }
#applications       { background:url(img/services/applications.png)   no-repeat fixed 382px 0; }
#hebergement        { background:url(img/services/hebergement.png)    no-repeat fixed 611px 0; }
/* — Clients */
#cafebabel          { background:url(img/clients/cafebabel.png)       no-repeat fixed 662px 0; }
#supertoinette      { background:url(img/clients/supertoinette.png)   no-repeat fixed 521px 0; }
#quiksilver         { background:url(img/clients/quiksilver.jpg)      no-repeat fixed 460px 0; }
#image              { background:url(img/clients/image.jpg)           no-repeat fixed 613px 0; }
#parlorama          { background:url(img/clients/parlorama.png)       no-repeat fixed 561px 0; }
#plus               { background:url(img/clients/plus.png)            no-repeat fixed 638px 0; }

/* — Outils */
#gfactory           { background:url(img/outils/gfactory.png)   no-repeat fixed 522px 0; }
#contentmanager     { background:url(img/outils/contentmanager.png)     no-repeat fixed 668px 0; }
#sava               { background:url(img/outils/sava.png)   no-repeat fixed 535px 0; }
#oxmail             { background:url(img/outils/oxmail.png)     no-repeat fixed 469px 0; } 
#oxnl               { background:url(img/outils/oxnl.png)   no-repeat fixed 573px 0; }

/* — Art */
#art                { background:url(img/art/art.png) no-repeat fixed 607px 0; }


/* — Contact */
#contact            { background:url(img/contact/contact.png)   no-repeat fixed 357px 0; }

/* — home */
#home               { background:url(img/home/home.png)     no-repeat fixed 276px 0; }


/*//////////////////////////////////////////////////////////////////////////////////////////////////////// Round */

.article,
.caption        {-moz-border-radius:3px;  -webkit-border-radius:3px;  border-radius:3px;}




/*//////////////////////////////////////////////////////////////////////////////////////////////////////// Header */

#header { clear:both; height:76px; margin:0 0 0 180px}
#header h2 { margin-top:41px; height:35px; margin-right:6px}
#header h1 { margin-top:24px; height:28px }
#header h2, #header h1 { float:left; display:block; background:url("img/nav.png") no-repeat; text-indent:-999em; }

    /* — À propos */
    #apropos h2             { background-position:0 -35px; width:115px }

    /* — Services */
    #communication h2,
    #design h2,
    #seo h2,
    #applications h2,
    #hebergement h2         { background-position:0 -70px;  width:102px }
    #communication h1       { background-position:0 -105px; width:355px }
    #design h1              { background-position:0 -140px; width:348px }
    #seo h1                 { background-position:0 -175px; width:316px }   
    #applications h1        { background-position:0 -210px; width:330px }   
    #hebergement h1         { background-position:0 -245px; width:330px }   
    
    /* — Clients */
    #cafebabel h2,
    #supertoinette h2,
    #quiksilver h2,
    #image h2, 
    #plus h2, 
    #parlorama h2           { background-position:0 -280px; width:89px  }
    #cafebabel h1           { background-position:0 -350px; width:92px  }
    #supertoinette h1       { background-position:0 -315px; width:124px  }
    #quiksilver h1          { background-position:0 -385px; width:92px  }
    #image h1               { background-position:0 -420px; width:122px  }  
    #parlorama h1           { background-position:0 -455px; width:122px  }  
    #plus h1                { background-position:0 -770px; width:48px  }   

    /* —  Outils */
    #gfactory h2,
    #contentmanager h2,
    #sava h2,
    #oxmail h2,
    #oxnl h2                { background-position:0 -490px;  width:76px }

    #gfactory h1            { background-position:0 -525px;  width:87px }
    #contentmanager h1      { background-position:0 -560px;  width:148px }    
    #sava h1                { background-position:0 -665px;  width:62px }    
    #oxmail h1              { background-position:0 -595px;  width:71px }    
    #oxnl h1                { background-position:0 -630px;  width:52px }    

    /* — Contact */
    #contact h1             { background-position:0 -700px; width:116px; margin-top:41px; height:35px; margin-right:6px  }
    
    /* — Home */
    #home  h1               { background-position:0 -875px; width:255px; margin-top:41px; height:35px; margin-right:6px  }
    
    #art h1                 { background-position:0 -910px; width:116px; margin-top:41px; height:35px; margin-right:6px }
    

    h3 {
        margin:25px 0 0 0;
        font-weight:700; font-size: 16px; line-height: 24px; 
        }
    h4 {
        margin:15px 0 0 0;
        font-weight:400; font-size: 16px; line-height: 24px; 
        }
        h3 + h4 { margin:0 }
    
    h5 {
        margin:5px 0 0 0;
        font-weight:400; font-size: 13px; color:#444 
        }
    
    
/* //////////////////////////////////////////////////////////////////////////////////////////////////////// Block */
.article{ float:left; width:700px; background:url(img/article.png); padding:10px; margin:17px 0 20px 180px}
    .section {padding:20px;  background:#fff}
    .section + .section { margin-top:10px}
    .section p, .section ul { margin:15px 0 0 0; position:relative; }
        .text,
        .info { width:510px; }
        .text strong { font-weight:400; color:#000; }
        .section p.info + p.info {
            margin: 0; 
            }
        .section ul{ list-style-type: disc; list-style-position: inside ;}
    
        #gfactory .info{ width:375px; }
            
/* //////////////////////////////////////////////////////////////////////////////////////////////////////// Content */

.caption {
    background:#31A2CB none repeat scroll 0 0;
    color:#FFFFFF;
    background-color:#eee;
    color:#999;
    text-shadow: #fff 0px 1px 1px;
    font-size:11px;
    font-family: Helvetica, Arial, sans-serif;
    font-style:italic;
    line-height:1.5em;
    margin:0 0 2em;
    padding:8px 7px 8px 10px;
    width:187px;
    float:right;
    }
    .caption-3rdcol { width:165px; margin-right:94px}
    .caption em { font-style:normal;}
    .caption strong { font-weight: bold; color:inherit}
    
    .absolute-caption{    position: absolute; right: 0;}
    
    p.legend {
        background:#31A2CB none repeat scroll 0 0;
        color:#FFFFFF;
        text-shadow: none;
        margin: 35px 60px 0 0;
        }
    
    .section .img-caption { font-size:11px; color:#999; margin-top:50px }
    .img-caption span { display:block; clear:left;} 

.info,
.adr,
.contact,
.geo { font-size:13px; line-height:22px; clear:left; }
.info a,
.contact a,
.geo a{ color:inherit; text-decoration:none; border-bottom:1px dotted #aaa}
.info a:hover,
.contact a:hover,
.geo a:hover { border-color:#313131}


/*//////////////////////////////////////////////////////////////////////////////////////////////////////// Home */

#home h1 { display: none; }
#home .article { background: url(img/home-article-bg.png); margin-top:-12px; padding:0; width:550px }
#home .section { padding:  0; width:235px; float:left; margin:0 40px 0 0;  }
#home .section p {  width: auto; }

.plus, .section .plus {
    background:url(img/c.png) no-repeat 0 0px;
    padding-top:20px; 
    margin-top:20px;
    clear:both;
    font-size:11px;
    }
    .plus a { border-bottom:1px dotted #aaa; text-decoration:none;}
    
    .news { float:left; }
    .news h4, .news div{ margin-bottom:20px}
    .news p,
    #plus .section div p{ font-size:11px; color:#8e8e8e; line-height:1.1; margin-top:0}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////// Plus  */
#plus .section div { float:left; margin:0 20px 20px 0; width:206px}
#plus .section div.last { margin-right:0}  
    
/*//////////////////////////////////////////////////////////////////////////////////////////////////////// Art  */       
    
    #art h3, #art h4 { float:left; line-height:22px; margin:0 10px 0 0; width:150px; text-align:right; }
    #art .text,
    #art .info{ clear:none;  margin:0 0 20px 170px; width:470px}
    #art .section p:first-child{ margin-top:15px}
    #art .text strong,
    #art .info strong { font-weight:400; color:#fc4e1c; }
    
    
/*//////////////////////////////////////////////////////////////////////////////////////////////////////// Art black *     
    #art { background:#222; }
    #art h1 { background-position:0 -945px;}
    
    #art #header a { background-position:0 -15px}
    
    #art h3, #art h4 { color:#fff; }
   
    
    #art .article { background:#333 }
    #art .section { background:transparent ; color:#bbb }
        
    #art a{color:#bbb; cursor:pointer; outline:none}
    #art a:hover { color:#eee}
    
    /* */
    
/*//////////////////////////////////////////////////////////////////////////////////////////////////////// Swap z index */

.z-swap { z-index:4; position:absolute; }
.z-right { left:208px; top: 90px; z-index: 5; }

/* //////////////////////////////////////////////////////////////////////////////////////////////////////// Contact */
.street-address, .country-name {
    display: block;
    }
.vcard em{
    display: block;
    width: 45px; 
    float: left;
    }
    .contact > span,
    .geo abbr{
        display: block;
        clear: left;
        }
/* //////////////////////////////////////////////////////////////////////////////////////////////////////// Nav */

#nav { clear:left; width:180px; margin:0; float:left; top:105px; position:fixed; }

#nav p { float:left; width:180px; margin-bottom:33px}
#nav p a { display:block; width:121px; height:15px; background:url("img/oxys.net.png") no-repeat; text-indent:-999em}
.menu { clear:left }

    .menu ul{ margin:0 20px; display:none; line-height:14px;}

    .menu a{ display:block; padding-bottom:16px; color:#999; text-decoration:none; }
        .menu a:hover { color:#444 }
        
        #apropos .li-apropos,
        #contact .li-contact,
        
        #communication .li-services,
        #design .li-services,
        #seo .li-services,
        #applications .li-services,
        #hebergement .li-services,
        
        #cafebabel .li-clients,
        #supertoinette  .li-clients,
        #quiksilver  .li-clients,
        #image .li-clients, 
        #parlorama .li-clients,
        
        .clients .li-clients,
        
        #gfactory .li-outils,
        #contentmanager .li-outils,
        #oxmail .li-outils,
        #oxnl .li-outils,
        #sava .li-outils,
        
        #art .li-art,
        
        .current { background:url(img/c.png) no-repeat 0 24px; }
        
        #communication .li-services ul,
        #design .li-services ul,
        #seo .li-services ul,
        #applications .li-services ul,
        #hebergement .li-services ul,
        
        #cafebabel .li-clients ul,
        #supertoinette  .li-clients ul,
        #quiksilver  .li-clients ul,
        #image .li-clients ul, 
        #parlorama .li-clients ul,
        #plus .li-clients ul,
        
        
        
        #gfactory .li-outils ul,
        #contentmanager .li-outils ul,
        #oxmail .li-outils ul,
        #oxnl .li-outils ul,
        #sava .li-outils ul,
        
        .current ul{ display:block;}
    
.more, .top  { display:block; float:left; background:url(img/btn.png) no-repeat; text-indent:-999em; width:80px; height:25px;}
.more:hover  { background-position:0 -25px;} 
.top         { background-position:0 -50px;}
.top:hover   { background-position:0 -75px;}


/* //////////////////////////////////////////////////////////////////////////////////////////////////////// Folio */


.folio { float:right; width:90px; margin:15px 0 0 }
#plus .section div.folio { float:right; width:54px; margin:15px 0 0 }
    .folio a, .folio span { text-indent:-999em; display:block; float:left; height:20px; margin-left:1px; background:url(img/folio.png); width:8px}
    .folio p { margin:0; }
    a.fnext{ float:right; background-position:0 -20px; width:21px}
        a.fnext:hover {  background-position:0 -60px; }
    a.fprev{ background-position:0 0; width:21px; margin-right:10px}
        a.fprev:hover {  background-position:0 -40px; }
        
    span.fslash { background-position:0 -80px; }
    span.f1 { background-position:0 -100px; width:5px }
    span.f2 { background-position:0 -120px; }
    span.f3 { background-position:0 -140px; }
    span.f4 { background-position:0 -160px; }
    span.f5 { background-position:0 -180px; }
    span.f6 { background-position:0 -200px; }
    span.f7 { background-position:0 -220px; }
    span.f8 { background-position:0 -240px; }
    span.f9 { background-position:0 -260px; }
    span.f0 { background-position:0 -280px; }
    
    
        
    
/* //////////////////////////////////////////////////////////////////////////////////////////////////////// Pie clear */

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.ie .clear {
    zoom: 1;     
    display: block;
    }