/* -------------------------------------------------------------- 
  
   Reset.css
   * Resets default browser CSS styles.
   
   Created by Erik Meyer:
   * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

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

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/* CLEARING */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display:inline-table;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
.nomargin{margin:0;padding:0;}
.clear{clear:both;display:block;}/* -------------------------------------------------------------- 
  
   Grid.css
   * Creates an easy to use grid of 14 columns.
   
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Khoi Vinh         [subtraction.com]
   
   By default, the grid is 960px wide, with columns 
   spanning 50px, and a 20px margin between columns.
   
   If you need fewer or more columns, use this 
   formula to find the new total width: 
   
   Total width = (columns * 70) - 20
  
-------------------------------------------------------------- */

body { 
  text-align: center; /* IE Fix */
  margin:0;
}

/* A conainer should group all your columns. */
#conteneur {
background:#FFF;
  text-align: left;
  position: relative;
  padding: 0;
  margin: 0 auto;   /* Centers layout */
  width: 960px;     /* Total width */
}

/* Clear fix */
#conteneur:after { 
  content:  "."; 
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Use this to create a horizontal ruler across a column.
   BUG: Margins butchered in IE */
hr { 
  background: lightblue; 
  color: lightblue; /* IE Fix */
  clear: both;
  float: left; 
  width: 100%; 
  height: 2px; 
  margin: 8px 0 8px 0; 
  padding: 0; 
  border: none; 
}
.floatleft{float:left;}
.floatright{float:right;}

/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any compsition of columns in a layout.
   Nesting columns works like a charm (remember .first and .last). */
   
.column {
  float: left;
  margin: 0 10px;
  padding: 0;
}


/* Add this class to a column if you want a border on its 
   right hand side. This should be customized to fit your needs. */

.border {
  padding-right: 9px;
  margin-right: 0;
  border-right: 1px solid #eee;
}


/* The first and last elements in a multi-column 
   block needs one of these classes each. */

.first  { margin-left: 0; }
.last   { margin-right: 0; }


/* Use these classes to set how wide a column should be. */
.span-1   { width: 50px; }
.span-2   { width: 120px; }
.span-3   { width: 220px; }
.span-4   { width: 260px; }
.span-5   { width: 330px; }
.span-6   { width: 400px; }
.span-7   { width: 470px; }
.span-8   { width: 540px; }
.span-9   { width: 610px; }
.span-10  { width: 680px; }
.span-11  { width: 730px; }
.span-12  { width: 820px; }
.span-13  { width: 890px; }
.span-14  { width: 960px; margin: 0; }

/* Add these to a column to append empty cols. */
.append-1   { padding-right: 70px; }  
.append-2   { padding-right: 140px; } 
.append-3   { padding-right: 210px; } 
.append-4   { padding-right: 280px; } 
.append-5   { padding-right: 350px; } 
.append-6   { padding-right: 420px; } 
.append-7   { padding-right: 490px; } 
.append-8   { padding-right: 560px; } 
.append-9   { padding-right: 630px; } 
.append-10  { padding-right: 700px; }
.append-11  { padding-right: 770px; }
.append-12  { padding-right: 840px; }
.append-13  { padding-right: 910px; }

/* Add these to a column to prepend empty cols. */
.prepend-1   { padding-left: 70px; }  
.prepend-2   { padding-left: 140px; } 
.prepend-3   { padding-left: 210px; } 
.prepend-4   { padding-left: 280px; } 
.prepend-5   { padding-left: 350px; } 
.prepend-6   { padding-left: 420px; } 
.prepend-7   { padding-left: 490px; } 
.prepend-8   { padding-left: 560px; } 
.prepend-9   { padding-left: 630px; } 
.prepend-10  { padding-left: 700px; }
.prepend-11  { padding-left: 770px; }
.prepend-12  { padding-left: 840px; }
.prepend-13  { padding-left: 910px; }


/* Use a .box to create a padded box inside a column. 
   Sticking to 18px wide gaps since that's the baseline. */ 
   
.box { 
  padding: 18px; 
  margin-bottom: 18px; 
  background: #f0f0f0; 
}


/* Nudge your elements [subtraction.com/archives/2007/0606_nudge_your_e.php]:
   All block elements (not hr) inside a col should have a 5px padding on each side.
   (Not everyone wants this, but feel free to uncomment if you do.) 

p,ul,ol,dl,h1,h2,h3,h4,h5,h6,
caption,pre,blockquote,input,textarea {
  padding-left: 5px;
  padding-right: 5px;
}
div, table {
  margin-left: 5px;
  margin-right: 5px;
  padding: 0;
} */


/* Images
-------------------------------------------------------------- */

/* Use these classes to make an image flow into the column before 
   or after it. This techique can also be used on other objects. */

.pull-1  { margin-left: -70px; }
.pull-2  { margin-left: -140px; }
.pull-3  { margin-left: -210px; }

.push-1  { margin: 0 -88px 0 18px; float: right; }
.push-2  { margin: 0 -158px 0 18px; float: right; }
.push-3  { margin: 0 -228px 0 18px; float: right; }
/* -------------------------------------------------------------- 
    
   Typography.css
   * Sets some default typography.
  
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Wilson Miner      [wilsonminer.com]
   * Typogrify         [code.google.com/p/typogrify]
   
   The default font size is 12px. The baseline is set to 
   18px. When you're setting heights of elements, always 
   remember to use a multiple of the baseline (18,36,54..).
   
   The height of images shoud also be a multiple of 18.
   
   Read more about using a baseline here:
   * alistapart.com/articles/settingtypeontheweb
  
-------------------------------------------------------------- */   

body,ul,ol,dl,h1,h2,h3,h4,h5,h6,td,th,
caption,pre,p,blockquote,input,textarea {
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: .9em;
  line-height: 1.2em; /* Baseline here at 150%. This is set multiple places. */
  color: #333;
}


/* Headings
-------------------------------------------------------------- */

h2,h3,h4,h5,h6 { 
  font-family: Helvetica, Arial, "Lucida Grande", Verdana, sans-serif;
  color:#111; 
  clear:both; 
}

/* Total height for each heading has to be a multiple of the baseline (18). */
/*h1 { font-size: 3em; line-height: 3em; }*/
h2 { font-size: 1.4em; line-height: 1.7em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1em; }
h5 { font-size: .9em; font-weight:bold; }
h6 { font-size: .9em;}


/* Text elements
-------------------------------------------------------------- */

p           { margin: 0 0 18px 0; text-align:left;}
p.last      { margin-bottom:0; }
p img       { float: left; margin: 18px 18px 18px 0; padding:0;}
p img.top   { margin-top:0; } /* Use this if the image is at the top of the <p>. */

ul, ol      { margin: 18px 0 18px 18px; list-style:none;}
li          { line-height:18px; }
ol          { list-style-type: decimal; }
dl          { margin: 18px 0; }
dl dt       { font-weight: bold; }

a           { color: #125AA7; text-decoration: none; outline: none; }
a:hover     { color: #000; }

blockquote  { margin: 18px 0 18px 23px; font-size: 0.9em; color: #666; font-style: italic; }
strong      { font-weight: bold; }
em          { font-style: italic; }
pre         { margin-bottom: 18px; line-height:18px; background: #eee; padding:8px; border:1px solid #ddd; }
code        { font:0.9em Monaco, monospace; }


/* Tables
-------------------------------------------------------------- */

table   { margin-bottom: 13px; border-top:1px solid #ddd; border-left:1px solid #ddd; }
th,td   { height:17px; padding:0 8px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; }
th      { font-weight:bold; }


/* Some default classes
-------------------------------------------------------------- */

.small, .small p  { font-size: 10px; }
.large, .large p  { font-size: 14px; }
.quiet, .quiet p  { color: #666; }
.hide             { display: none; }

/* TODO: Implement image captions. */
.caption { }


/* Extra fancy typography
-------------------------------------------------------------- */

/* For great looking ampersands, use this code instead of &amp;: 
   <span class="amp">&amp;</span>  */
  
.amp { 
  color: #666; 
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; 
  font-size: 1.1em;
  line-height:10%; /* Fix to maintain correct baseline */
  font-style: italic;
}

/* For great looking quote marks in titles, replace "asdf" width:
   <span class="dquo">&#8220;</span>asdf&#8221;
   (That is, when the title starts with a quote mark). */  

.dquo { margin-left: -.7em; } 
/* (You may have to change this value depending on your font size). */


/*	Desc: *title* Screen Style Sheet
	Author: *Fabrik numerique*
	Date: *30-10-07*
	+ Colours
	- *#FF9C37* *orange * (header)
	- *#E0E0E2* *gris clair* (bande header)
	- *#EBF4C0* *vert clair* (p actu)
	- *#B4D670* *vert* (footer border)
	- *#1276A2* *bleu* (footer+h2)
=== === === === === === === === === === */
/*=STRUCTURE
=== === === === === === === === === === */
body {
background:url(../img/bg/bg-body.gif) repeat;
color:#333;
}
/*=COMMON
=== === === === === === === === === === */
p,
li {
	line-height: 150%
}
img {
	border: 0
}
a {
	text-decoration:none;
}
/*=MASTHEAD
=== === === === === === === === === === */
#header {
border-top:8px solid #FF9C37;
}
#logo{
float:left;
height:126px;
margin:.5em 1em 0 1.5em;
width:304px;
}
#logo h1 {
	float:left;
	text-indent: -9999px;
}
#bde_grise{
background:#E0E0E2 url(../img/design/speakerine.jpg) no-repeat right top;;
clear:both;
height:178px;
margin:0 0 .5em;
position:relative;
}
a#soluce{
background:url(../img/bg/bg_solution.jpg) no-repeat left top;
color:#FFF;
font-size:1.4em;
height:60px;
margin:.5em 1em 0 1.5em;
padding:4.5em .8em 0 0;
text-align:right;
width:190px;
}
a#soluce strong{
color:#FF9C37;
display:block;
font:.85em "arial black",impact;letter-spacing:1px;
text-transform:uppercase;
}
a:hover#soluce{color:#FF9C37}
a:hover#soluce strong{color:#fff}
a#extranet{
background:url(../img/bg/bg_extranet.jpg) no-repeat left top;
color:#FF9C37;
font-size:1.4em;
height:87px;
margin:1.2em 2em 0 0;
padding:2.5em 0 0 .4em;
width:215px;
}
a#extranet strong{
color:#666;
display:block;
font:.9em "arial black",impact;
text-transform:uppercase;
}
a:hover#extranet{color:#000}
a:hover#extranet strong{color:#FF9C37}
#bulle{
background:url(../img/bg/bg-bulle.jpg) no-repeat left top;
height:94px;
margin:1em 0 0 0;
width:296px;
}
#bulle p{
color:#FFF;
font-size:1.5em;
left:3.5em;
line-height:1.2em;
margin:0;
position:relative;
top:.2em;
}
#bulle p strong{
color:#FF9C37;
display:block;
font-size:1.1em;
}
a#boutique{
background:url(../img/design/caddie.jpg) no-repeat right center;
color:#666;
font-size:1.2em;
height:45px;
left:520px;
padding:10px 55px 0 0;
position:absolute;
text-align:right;
top:6.4em;
width:200px;
}
a#boutique strong{
color:#FF9C37;
display:block;
font-family:"arial black",impact;
}
a:hover#boutique{color:#FF9C37}
a:hover#boutique strong{color:#000}
/*=NAVIGATION
=== === === === === === === === === === */
#nav_rap {
display:none;
/*float:left;
position:relative;
left:-9999px;*/
}
#men{
float:left;
position:relative;
top:-1px;
}
#men ul{
list-style:none;
margin:0;
padding:0;
}
	#men li{float:left;}
	#men li a{display:block;}
	#men li a{text-indent:-9999px;}
	#acc a{
	background:url(../img/menu/menu.jpg) no-repeat left top;
	height:21px;
	margin:1em 0 0 1em;
	width:63px;
	}
	#soc a{
	background:url(../img/menu/menu.jpg) no-repeat -70px top;
	height:21px;
	margin:1em 0 0 1em;	
	width:63px;
	}
	#sol a{
	background:url(../img/menu/menu.jpg) no-repeat -147px top;
	height:21px;
	margin:1em 0 0 1em;	
	width:83px;
	}
	#part a{
	background:url(../img/menu/menu.jpg) no-repeat -241px top;
	height:21px;
	margin:1em 0 0 1em;	
	width:104px;
	}
	#recr a{
	background:url(../img/menu/menu.jpg) no-repeat -354px top;
	height:22px;
	margin:1em 0 0 1em;	
	width:111px;
	}
	#con a{
	background:url(../img/menu/menu.jpg) no-repeat -475px top;
	height:21px;
	margin:1em 0 0 1em;	
	width:70px;
	}
	/* HOVER */
	#acc a:hover,#acc a:focus{
	background:url(../img/menu/menu.jpg) no-repeat left -22px;	
	}
	#soc a:hover,#soc a:focus{
	background:url(../img/menu/menu.jpg) no-repeat -70px -22px;
	}
	#sol a:hover, #sol a:focus{
	background:url(../img/menu/menu.jpg) no-repeat -147px -22px;	
	}
	#part a:hover, #part a:focus{
	background:url(../img/menu/menu.jpg) no-repeat -241px -22px;
	}
	#recr a:hover, #recr a:focus{
	background:url(../img/menu/menu.jpg) no-repeat -354px -22px;
	}
	#con a:hover, #con a:focus{
	background:url(../img/menu/menu.jpg) no-repeat -475px -22px;
	}
	/* SELECTED */
	a#selected{
	height:79px;	
	}
	#acc a#selected{
	background:url(../img/menu/menu-on.jpg) no-repeat left top;	
	margin:1px 0 0;
	width:100px;
	}
	#soc a#selected{
	background:url(../img/menu/menu-on.jpg) no-repeat -98px top;	
	margin:1px 0 0 .5em;	
	width:100px;
	}
	#sol a#selected{
	background:url(../img/menu/menu-on.jpg) no-repeat -201px top;	
	margin:1px 0 0 .5em;	
	width:121px;
	}
	#part a#selected{
	background:url(../img/menu/menu-on.jpg) no-repeat -325px top;	
	margin:1px 0 0 .5em;
	width:144px;
	}
	#recr a#selected{
	background:url(../img/menu/menu-on.jpg) no-repeat -470px top;	
	margin:1px 0 0 .5em;	
	width:150px;
	}
	#con a#selected{
	background:url(../img/menu/menu-on.jpg) no-repeat -620px top;	
	margin:1px 0 0 .5em;	
	width:102px;
	}
#list_men{
left:480px;
position:absolute;
top:6.8em;
width:120px;
}
/*=CONTENT
=== === === === === === === === === === */
#content {
position:relative;
}
#content h2{
background:url(../img/bg/bg_h2.jpg) no-repeat left bottom;
color:#1276A2;
margin:0 0 .5em .5em;
padding:0 0 .5em 1em;
}
/*=FOOTER
=== === === === === === === === === === */
#footer {
border-top:3px dotted #B4D670;
border-bottom:8px solid #1276A2;
clear:both;
font-size:.9em;
}
	#footer p{
	color:#999;
	margin:.4em 0;
	text-align:center;
	}
	#footer em{
	color:#B4D670;
	font-style:normal;
	text-transform:uppercase;
	}
	#footer a{color:#1276A2;}
	#footer p a:hover{color:#F7931D;text-decoration:underline;}