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

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

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


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

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


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

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




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

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

	/* — À 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 }

	
	
/* //////////////////////////////////////////////////////////////////////////////////////////////////////// Block */
.article{ float:left; width:700px; background:url(img/article.png); padding:10px; margin:17px 0 45px;}
    .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 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;
        }
	

.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: transparent; margin:-22px 0 45px; padding:0; width:235px; }
#home .section { padding:  0; }
#home .section p {	width: auto; }

.webmail, .section .webmail {
	background:url(img/c.png) no-repeat 0 0px;
	padding-top:20px; 
	margin-top:20px;
	clear:both;
	font-size:11px;
    }
	.webmail a { border-bottom:1px dotted #aaa; text-decoration:none;}
    
/*//////////////////////////////////////////////////////////////////////////////////////////////////////// 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:-28px; position:relative;}
	.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,
		
		#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 }
	.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;
    }