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

   reset.css
   * 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;
}

body {
  line-height: 1.5;
}

/* 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; }

.clear { clear: both; }

/*
Styles généraux
-----------------------------------------------------------------*/
body { margin: 0; font-family: Arial, "Trebuchet MS", Trebuchet, Verdana, Helvetica,  sans-serif; font-size: 14px; background-color: #fff; }
body.accueil,
body.webdesign,
body.developpement,
body.referencement,
body.hebergement { background: url(/images/tissus_bleu.jpg) repeat; }
body.portfolio { background: url(/images/tissus_orange.jpg) repeat; }
body.equipe,
body.mentionslegales { background: url(/images/tissus_vert2.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.accueil #portfolio,
body.accueil #equipe,
body.accueil #webdesign,
body.accueil #developpement,
body.accueil #referencement,
body.accueil #hebergement,
body.accueil #mentionslegales,
body.accueil #bg_bleu,
body.accueil #bg_orange,
body.accueil #bg_vert { display: none; }


#bg_bleu { position: absolute; top: 0; z-index: -8; background: url(/images/tissus_bleu.jpg) repeat; width:1500px; height:1500px; }
#bg_orange { position: absolute; top: 0; left: 1550px; z-index: -10; background: url(/images/tissus_orange.jpg) repeat; width:1500px; height:1500px; }
#bg_vert { position: absolute; top: 0; left: 3100px; z-index: -10; background: url(/images/tissus_vert2.jpg) repeat; width:1500px; height:1500px; }


/* Header */
header.main { z-index: 10; position: absolute; display: block; top: 0; width: 100%; height: 30px; background-color: #000; }
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; }


/* Footer */
	 footer.main { z-index: 10; position: absolute; display: block; bottom: 0px; width: 100%; height: 60px; background-color:#000; }
#IE6 footer.main { bottom: -1px; }
	 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.diapo { /* width: 880px; */ width: 964px; height: 591px; 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: 790px; height: 531px; padding: 10px 20px 0 20px; background: url(/images/diapo.png) no-repeat; }


/* 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 */
	 #accueil section h3 { float: left; width: 215px; height: 110px; background: url(/images/logo-go_on_web.png) no-repeat; margin: 6px 15px 0 15px; }
	 #accueil section h3 span { display: none; }
	 #accueil section address { float: right; text-align: right; color: #666; margin: 10px 10px 0 0; }

	 #accueil 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 #accueil article.services { margin-left: 20px; }
	 #accueil article.services h4 { color: #333;float:left; }
	 #accueil article.services ul { padding: 0; margin: 0 0 0 10px; clear: both; }
#IE7 #accueil article.services ul { margin-top:-20px; }
#IE6 #accueil article.services ul { margin-top:-20px; }
	 #accueil article.services li { list-style: none; color: #666; line-height: 1.4em; }
	 #accueil article.services header a { float:right; margin-right:20px; text-decoration:none; color:#555; }
	 #accueil 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;}

/* 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; }