﻿/* --------------------------------------------------------------

   Powered by Fxture Team
   * Resets default browser CSS.

-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
*{
	margin:0 auto; 
	padding:0;
}
body {
  line-height: 1.5;
}

@font-face {
	font-family: 'GabriolaRegular';
	src: url('../font/Gabriola.eot');
	src: local('Gabriola'), local('Gabriola'), url('../font/Gabriola.woff') format('woff'), url('../font/Gabriola.ttf') format('truetype');
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }


/*
Styles généraux
-----------------------------------------------------------------*/
body { margin: 0; font-family: Arial, "Trebuchet MS", Trebuchet, Verdana, Helvetica,  sans-serif; font-size: 14px; background-color: #fff; }
body.fxture{ background:#d8e7f1;}
body.webdesign,
body.referencement,
body.hebergement { background:#d8e7f1;}
body.portfolio { background: url(../images/tissus_orange.jpg) repeat; }
body.aboutus { background: url(../images/tissus_orange.jpg) repeat; }
body.equipe, body.aboutus,
body.mentionslegales { background: url(../images/tissus_vert2.jpg) repeat; }
body.pants{ background: url(../images/bg4.jpg) repeat;}

h1 { margin: 0; padding: 0; font-weight: normal; font-size: 14px; }
h2 { margin: 0; padding: 0; font-weight: normal; font-size: 14px; }
h3 { float: left; margin: 10px 0 0 10px; padding: 0; font-weight: normal; font-size: 18px; text-transform: uppercase; color: #555; }
h4 { font-size: 18px; }

hr.spacer { margin: 0; padding: 0; border: 0; clear: both; visibility: hidden; height: 0; }

article, header, footer, address, section, hgroup, nav { display: block; }


/*
Design
-----------------------------------------------------------------*/

body.fxture #portfolio,
body.fxture #expertise,
body.fxture #aboutus,
body.fxture #clients,
body.fxture #contact,
body.fxture #equipe,
body.fxture #webdesign,
body.fxture #pants,
body.fxture #referencement,
body.fxture #hebergement,
body.fxture #mentionslegales,
body.fxture #bg_bleu,
body.fxture #bg_orange,
body.fxture #bg_pants,
body.fxture #bg_vert { display: none; }


#bg_bleu { position: absolute; top: 0; z-index: -8; background: #d8e7f1 url(../images/bg_01.jpg) no-repeat 0 42%; width:1500px; height:1500px; }

#aboutus {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -14;
	width:1700px;
	height:1200px;
	background-color:#fff;
	background-image: url(../images/aboutus_bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}
#expertise {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -14;
	width:1700px;
	height:1200px;
	background-color:#fff;
	background-image: url(../images/expertise_bg.jpg);
	background-repeat: repeat-x;
	background-position: center top;
}
#portfolio {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -14;
	width:1900px;
	height:1200px;
	background-color:#000;
	background-image: url(../images/portfolio_bg.jpg);
	background-repeat: repeat;
	background-position: center top;
}
#contact {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -14;
	width:1600px;
	height:1200px;
	background-image: url(../images/contact_content.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin-top:150px;
}
#clients {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -14;
	width:1600px;
	height:1200px;
	background-image: url(../images/clients_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	margin-top:150px;
}



/* Header */
header.main {
	z-index: 10;
	position: absolute;
	display: block;
	left: 0px;
	top: 0;
	width: 100%;
	height: 117px;
	border-bottom:3px solid #82c9ef;
	background-color: #0c1622;
	background-image: url(../images/head.jpg);
	background-repeat: repeat-x;
	background-position: top;
}
header.fxture_bord{border-bottom:3px solid #82c9ef; opacity:0.4;filter:alpha(opacity=40); margin-top:12px;}
header.main h1 { float: left; margin-top: 5px; }
header.main h1 a { color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; }
header.main h1 a:hover { color: #ee7f07; }
header.main h2 { float: right; color: #fff; text-transform: uppercase; letter-spacing: 3px; margin-top: 5px; }
header.main h2 a { color: #fff; text-decoration: none; }
header.main h2 a:hover { color: #ee7f07; }
.logo{
	width:970px;
}
#home_01 header{ height:187px;}
#folio_01 header{
	height:330px;
	position: fixed;
	top: 75px;
}
.home_txt p{
	font-size: 48px;
	line-height:50px;
	color:#1e3552;
	font-weight: normal;
	font-family: GabriolaRegular, sans-serif;
	text-align:right;
}
.home_txt a{
	color:#285B82;
	text-decoration: none;
}
.line_fot{
	background:url(../images/line.gif) repeat-x bottom;
	padding-bottom:10px;
	cursor: default;
}
.aboutus_text{
	font-size: 36px;
	line-height:55px;
	color:#1e3552;
	font-weight: normal;
	font-family: GabriolaRegular, sans-serif;
	}
.clients_text{
	font-size: 40px;
	color:#000;
	font-family: GabriolaRegular, sans-serif;
	background-image: url(../images/clients_content.png);
	background-repeat: no-repeat;
	height: 1000px;
	width: 1000px;
	z-index: -18;
	background-position: top;
	margin-top: 0px;
	padding-top: 0px;
	}
		
.contact_text{
	font-size: 40px;
	line-height:55px;
	color:#fff;
	font-family: GabriolaRegular, sans-serif;
	background-image: url(../images/contact_content.png);
	background-repeat: no-repeat;
	height: 1000px;
	width: 1000px;
	z-index: -16;
	background-position: top;
	margin-top: 0px;
	padding-top: 0px;
	}
.exp_left{
	float:left;
	margin-top: 0px;
	padding-top: 0px;
	}	
.exp_right {
	float:right;
	font-size: 40px;
	line-height:48px;
	color:#264d8a;
	font-family: GabriolaRegular, sans-serif;
	text-align: right;
	vertical-align: top;
	}		
.exp_right a {
	color:#264D8A;
	}		
.contact_inner{
	margin-left:410px;
	padding-top:150px;
	}
.clients_inner{
	padding-top:250px;
	margin-left:80px;

	}
.contacttextfield, .contacttextarea  {
	background-color:transparent;
	font-family: GabriolaRegular, sans-serif;
	font-size: 32px;
	width: 380px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #fff;
	height: 36px;
	margin-left: 50px;
	}
.contacttxtaddress{
	background-color:transparent;
	font-family: GabriolaRegular, sans-serif;
	font-size: 32px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #fff;
	height: 36px;
	width: 373px;
	margin-left: 24px;
}
	
.contacttextarea {
	height:160px;
	width:330px;
	background-color: transparent;
	border: none;
	filter: Alpha(Opacity=20);
	margin-top: 25px;
	overflow: hidden;
	line-height: 32px;
	margin-left:20px;
	vertical-align: top;
	}
.portfolio{ text-align:right; background:url(../images/fot_01.png) no-repeat left bottom;}

/* Footer */
	footer.main {
	z-index: 10;
	position: absolute;
	display: block;
	bottom: 0px;
	width: 100%;
	height: auto;
	background:url(../images/footer.png) repeat-x;
	left: 0px;
	padding-bottom: 10px;
}
#IE6 footer.main { bottom: -1px; height: 140px; position: absolute;
	display: block; }
	 footer.main p { color: #fff; text-align: center; letter-spacing: 3px; margin: 7px 0 0 0; }
	 footer.main p.copyright { font-size: 12px; }
	 footer a { color: #fff; text-decoration: none; }
	 footer a:hover { color: #ee7f07; }


/* Sections */
#content div.fxture_scn { /* width: 880px; */
	width: 964px;
	height:600px;
	position: absolute;
	left:50%;/*  margin-left:-460px; */
	;
	margin-left:-482px;
	top:50%;
	margin-top:-311px;
}
#content div#staff { margin: 0; }
#content section.screen section {
	float: left;
	width: 820px;
	height: auto;
	padding-top: 30px;
	padding-right: 40px;
	padding-bottom: 10px;
	padding-left: 40px;
}



/* Navigation */
nav.left, nav.right { float: left; width: 67px; }
nav a { display: block; width: 67px; height: 67px; margin-top: 230px; background: url(../images/control.png) no-repeat; }
nav.left a { background-position: 0px 0px; }
nav.left a.blink,
nav.left a:hover { background-position: -67px 0px; }
nav.right a { background-position: 0px -67px; }
nav.right a.blink,
nav.right a:hover { background-position: -67px -67px; }

/*
nav.left, nav.right { float: left; width: 25px; }
nav a { display: block; width: 25px; height: 110px; margin-top: 210px; background: url(../images/control.png) no-repeat; }
nav.left a { background-position: 0px -254px; }
nav.left a.blink,
nav.left a:hover { background-position: -25px -254px; }
nav.right a { background-position: -50px -254px; }
nav.right a.blink,
nav.right a:hover { background-position: -75px -254px; }
*/

nav.up { position: relative; top:6px; width: 964px; height: 30px; }
nav.up a { height: 30px; width: 134px; margin: 0 0 0 375px; background-position: 0px -135px; }
nav.up a.blink,
nav.up a:hover { background-position: 0px -165px; }

nav.down { float: left; position: relative; top:-13px; width: 964px; height: 30px; }
nav.down a { height: 30px; width: 134px; margin: 0 0 0 375px; background-position: 0px -194px; }
nav.down a.blink,
nav.down a:hover { background-position: 0px -224px; }

	 a.hidden { visibility: hidden; }
#IE6 a.hidden { display: none; }



/*
Styles des pages
-----------------------------------------------------------------*/
/* Accueil */
	 #fxture section h3 { float: left; width: 215px; height: 110px; background: url(../images/logo-go_on_web.png) no-repeat; margin: 6px 15px 0 15px; }
	 #fxture section h3 span { display: none; }
	 #fxture section address { float: right; text-align: right; color: #666; margin: 10px 10px 0 0; }

	 #fxture article.services { float: left; width: 330px; height: 148px; padding: 20px 0 0 20px; margin: 20px 0 0 30px; background: url(../images/services4.png) no-repeat; }
#IE6 #fxture article.services { margin-left: 20px; }
	 #fxture article.services h4 { color: #333;float:left; }
	 #fxture article.services ul { padding: 0; margin: 0 0 0 10px; clear: both; }
#IE7 #fxture article.services ul { margin-top:-20px; }
#IE6 #fxture article.services ul { margin-top:-20px; }
	 #fxture article.services li { list-style: none; color: #666; line-height: 1.4em; }
	 #fxture article.services header a { float:right; margin-right:20px; text-decoration:none; color:#555; }
	 #fxture article.services header a:hover { color: #ee7f07; }
	 a.back_home { float: right; }


/* Portfolio */
	 #portfolio article { float: left; width: 175px; height:120px; margin: 10px; border: 1px solid #ddd; margin-top: 20px; }
#IE6 #portfolio article { margin-left: 8px; margin-right: 8px;}

/* About Us */
	 #aboutus article { float: left; width: 175px; height:120px; margin: 10px; border: 1px solid #ddd; margin-top: 20px; }
#IE6 #aboutus article { margin-left: 8px; margin-right: 8px;}

/* Equipe */
	 #equipe article { float: left; width: 300px; height: 310px; margin: 70px 0 0 60px; padding-top: 10px; border: 1px solid #ddd; }
#IE6 #equipe article { margin-left: 40px; margin-top: 40px; }
#IE7 #equipe article { margin-top: 40px; }
	 #equipe h4 { text-align: center; color: #555; margin-bottom: 10px; }
	 #equipe h4 span { text-transform: uppercase; }
	 #equipe p { text-align: center; color: #888; margin-top: 20px; font-size: 16px; }
	 #equipe img { margin-left: 40px; }

/* Sitemap */
	 #sitemap_access { display: block; width: 80px; height: 45px; background: url(../images/sitemap.png) no-repeat 0 0px; position: absolute; z-index: 30; bottom:68px; right:8px; }
	 #sitemap_access:hover,
	 #sitemap_access.blink { background-position: 0px -45px; }
	 #sitemap { display: none; z-index: 15; position: absolute; width: 100%; height: 100%; opacity:0.85; background-color: #000; }
	 #sitemap .center { position: absolute; -webkit-box-shadow: 0px 0px 20px 2px #ffffff; background-color: #111; left:50%; width:900px; margin-left: -450px; top:50%; height:600px; margin-top: -315px; border: 1px solid #111; -webkit-border-radius: 10px; }
	 #sitemap h3 { color: #fff; }
	 #sitemap a.page { color: #fff; text-align: center; display: block; width: 150px; height: 30px; padding-top: 10px; float: left; margin-left: 110px; margin-top: 63px; -webkit-border-radius: 10px; }
	 #sitemap .col1 { border: 1px solid #78A6D4; -webkit-box-shadow: 0px 0px 20px 2px #78A6D4; }
	 #sitemap .col2 { border: 1px solid #F4B12C; -webkit-box-shadow: 0px 0px 20px 2px #F4B12C; }
	 #sitemap .col3 { border: 1px solid #4DB252; -webkit-box-shadow: 0px 0px 20px 2px #4DB252;}
	 #sitemap .col1:hover { cursor:pointer; background-color: #78A6D4; }
	 #sitemap .col2:hover { cursor:pointer; background-color: #F4B12C; }
	 #sitemap .col3:hover { cursor:pointer; background-color: #4DB252;}
	 #sitemap .hidden { visibility: hidden; }



/*
Jquery tools
-----------------------------------------------------------------*/

/* Tooltip */
	 div.tooltip { background:transparent url(../images/tooltip.png) no-repeat scroll 0 0; font-size:14px; height:153px; padding:30px; width:310px; font-size:14px; display:none; color:#fff; }
#IE8 div.tooltip,
#IE7 div.tooltip,
#IE6 div.tooltip { background:transparent url(../images/tooltip_ie.png) no-repeat scroll 0 0; }
	 div.tooltip h4 { margin:0; font-size:16px; color:#fff; text-transform: uppercase; }
	 div.tooltip ul { padding:0; }
	 div.tooltip li { font-size: 12px; list-style: none; line-height: 1.2em; }
	 div.tooltip a { color:#fff; text-decoration: none; }
	 div.tooltip a:hover { color:#ee7f07; }

	 div.tooltip_top { background:transparent url(../images/tooltip_top.png) no-repeat scroll 0 0; font-size:14px; height:128px; padding:55px 30px 30px 30px; width:310px; font-size:14px; display:none; color:#fff; }
#IE8 div.tooltip_top,
#IE7 div.tooltip_top,
#IE6 div.tooltip_top { background:transparent url(../images/tooltip_ie_top.png) no-repeat scroll 0 0; }
	 div.tooltip_top h4 { margin:0; font-size:16px; color:#fff; text-transform: uppercase; }
	 div.tooltip_top ul { padding:0; }
	 div.tooltip_top li { font-size: 12px; list-style: none; line-height: 1.2em; }
	 div.tooltip_top a { color:#fff; text-decoration: none; }
	 div.tooltip_top a:hover { color:#ee7f07; }
.foot {
	width:900px;
	margin-top:20px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	color: #f0eee6;
}
.foot_home {
	float: left;
	width: auto;
}
.foot_home ul{
	padding-left: 11px;
}
.foot_home a:hover{
	color: #f0eee6;}

.foot_findus {
	float: left;
	width: 155px;
}
.sep {
	float: left;
	width: 10px;
	margin-right: 30px;
	padding-top: 5px;
	margin-left: 30px;
}
.clear {
	clear: both;
}
.pf {
	width: 900px;
	padding-top: 320px;
	padding-left: 20px;
}
.pf2, .pf3d, .pfflash, .pfprint, .pfphp, .pflogos  {
	width: 930px;
	padding-left: 0px;
	background-image: url(../images/web_folio_bg.png);
	background-repeat: no-repeat;
	position: absolute;
	top: 100px;
	padding-top: 80px;
}
.pf3d {
	background-image: url(../images/3d_folio_bg.png);
}
.pfflash {
	background-image: url(../images/flash_folio.png);
}
.pfprint {
	background-image: url(../images/print_folio.png);
}
.pfphp {
	background-image: url(../images/php_folio.png);
}
.pflogos {
	background-image: url(../images/logos_folio_bg.png);
}
.right
{
	float:right;
	padding-top: 10px;
	padding-right: 20px;
}

.left
{
	float:left;
	padding-top: 10px;
	padding-left: 20px;
}
.thumb
{
	margin-bottom:20px;
	margin-left:15px;
	margin-right:15px;}

