/* ------------------------------------------------------------------------------------
CSS MEDIA SCREEN : global.css
PROJET :  Aspix Media
CREATION : 19.08.2009
AUTEUR : ASPIX MEDIA - www.aspixmedia.com / -tim
----------------------------------------------------------------------------------- */


/* ------------------------------------------------------------------------- */
/* ----- RESET ------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,th {font-size:13px;font-weight:normal;font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

body {
	background:#333333 url(../images/bg_body.jpg) repeat-x;
	color:#6f6f6f;
  font-family:"Trebuchet MS", Arial, sans-serif;
}
p, table, div, body {
  font-size:13px;
  line-height:19px;
}
a {
	color:#8BB900;
	text-decoration:none;
}
a:hover {
  color:#c4ff0f;
}
a.kw {
  color:#818181;
  font-style:oblique;
  text-decoration:none;
}
a:hover.kw {
  border-bottom:1px dotted #8bb900;
  color:#8bb900;
}
.print {
	display:none;
}
.clear, .clearAll {
	clear:both;
}
html, body, form {
	height: 100%;
}
#conteneur {
	position: relative;
	width: 910px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -275px; /* footer */
}
h1, .erreur404 h1 { /* titres pages */
  color:#666666;
  font-size:24px;
  margin-top:30px;
}
h3.complement {
  background-color:#f4f4f4;
  color:#666666;
  font-size:13px;
  font-weight:bold;
  letter-spacing:1px;
  margin-top:30px;
  padding:5px;
  text-transform:uppercase;
}
h5.titreForm {
  color:#a3d900;
  font-size:16px;
  font-weight:normal;
  letter-spacing:2px;
 margin-top:30px;
 margin-bottom:20px;
 text-transform:uppercase;
}

#page {
  background:transparent url(../images/bg_page2.png) no-repeat;
  padding:0 15px 0;
  width:880px;
}
#page .background {
  background-color:#ffffff;
  padding:0 0 20px;
  width:880px;
}
.insertion {
  color:#a3d900;
}
.nouvellesBref img {
  border:1px solid #cccccc;
  padding:4px;
}


/* ------------------------------------------------------------------------- */
/* ----- En-tête / Navigation ---------------------------------------------- */
/* ------------------------------------------------------------------------- */

#header {
  background:transparent url(../images/bg_header_fr.png) no-repeat;
	height:124px;
	width:100%;
  }
#headerG {
  float:left;
  height:124px;
  width:314px;
  }
#headerD {
  float:left;
  height:124px;
  padding-right:20px;
  width:576px;
  }
#headerG img {
  height:63px;
  left:50px;
  position:absolute;
  top:20px;
  width:210px;
  }
ul.menuHaut {
  margin-top:10px;
  text-align:right;
  }
ul.menuHaut li {
  display:inline;
  font-size:11px;
  letter-spacing:1px;
  list-style:none;
  padding:10px;
  text-transform:uppercase;
  }
ul.menuHaut li a {
  color:#333333;
  font-weight:bold;
  text-decoration:none;
  }
ul.menuHaut li a:hover {
  color:#818181;
  }
#menu {
  list-style:none;
  padding-top:40px;
  margin:0;
  height:24px;
  display:inline;
  }
.menu {
  margin-top:30px;
  }
.menu td {
  padding:5px;
  }
.btnSolutions {
  background:url(../images/btn_solutions_fr.png) no-repeat;
  height:31px;
  width:120px;
  display:block;
  }
.btnSolutions img {
  height:31px;
  width:120px;
  }
.btnRealisations {
  background:url(../images/btn_realisations_fr.png) no-repeat;
  height:31px;
  width:149px;
  display:block;
  }
.btnRealisations img {
  height:31px;
  width:149px;
  }
.btnEntreprise {
  background:url(../images/btn_entreprise_fr.png) no-repeat;
  height:31px;
  width:136px;
  display:block;
  }
.btnEntreprise  img{
  height:31px;
  width:136px;
  }
.btnContact {
  background:url(../images/btn_contact_fr.png) no-repeat;
  height:31px;
  width:104px;
  display:block;
  }
.btnContact img {
  height:31px;
  width:104px;
  }
.btnSolutions:hover, .btnRealisations:hover, .btnEntreprise:hover, .btnContact:hover   { 
  background-position: 0 -31px;
  }
.btnSolutions span, .btnRealisations span, .btnEntreprise span, .btnContact span {
  display:none;
  }

/* ------------------------------------------------------------------------- */
/* --| Formulaires |-------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

.y:after {
  content:" *";
  color:#a3d900;
  }
.yerr:before {
  content:url(../images/ico_fleche.gif)" ";
  }
.yerr {
  color:#cc0000;
  }
.msgConfirmation {
  color:#a3d900;
  font-weight:bold;
  margin:50px 0;
  }
.msgEchec {
  color:#cc0000;
  font-weight:bold;
  margin:50px 0;
  }
input[type="text"], input[type="file"], textarea {
	border:inset 1px #cccccc;
	color:#333333;
  font:normal 11px Verdana, Helvetica, sans-serif;
	padding:3px;
  }
input[type="text"]:focus, textarea:focus {
	background-color:#eeeeee;
  }

/* ------------------------------------------------------------------------- */
/* --| Contact / Emplois |-------------------------------------------------- */
/* ------------------------------------------------------------------------- */

#contactG {
  background:#ffffff url(../images/bg_contact.gif) no-repeat;
  float:left;
  height:400px;
  margin-top:20px;
  padding-top:60px;
  text-align:right;
  width:280px;
  }
#contactD { 
  float:left;
  padding-left:40px;
  width:520px;
  }
#emploiG {
  float:left;
  margin-left:20px;
  margin-top:30px;
  width:280px;
  }
#emploiD { 
  float:left;
  padding-left:40px;
  width:520px;
  }
.frmContact, .frmEmploi {
  border-collapse:separate;
  width:500px;
  }
.frmContact td, .frmEmploi td {
  padding:2px 0;
  }
.frmContact .background, .frmEmploi .background {
  background-color:#eeeeee;
  }
#coordonnees {
  padding-right:30px;
  }
#coordonnees span {
  font-size:16px;
  font-weight:bold;
  }
.frmContact .pad {
  padding-left:10px;
  } 

/* ------------------------------------------------------------------------- */
/* ----- Hébergement web --------------------------------------------------- */
/* ------------------------------------------------------------------------- */

#hebergementG {
  float:left;
  margin-left:20px;
  width:600px;
}
#hebergementD p {
  margin-bottom:50px;
  padding-right:20px;
}
.hebDescription {
  float:left;
  margin-left:20px;
  margin-bottom:40px;
}

/* ----- Onglets ----------------------------------------------------------- */

.planHebergement {
  width:580px;
  }
.planHebergement .ajax__tab_header {
  background:url(../images/pix_cccccc.gif) repeat-x bottom;
  font:normal 16px "Trebuchet MS", Arial, sans-serif;
 }
.planHebergement .ajax__tab_outer {
  background:url(../images/bg_onglet_droit.gif) no-repeat right;
  height:34px;
  padding-right:1px;
  }
.planHebergement .ajax__tab_inner {
  background:url(../images/bg_onglet_gauche.gif) no-repeat;
  padding-left:10px;
  }
.planHebergement .ajax__tab_tab {
  background:url(../images/bg_onglet_centre.gif) repeat-x;
  color:#A3D900;
  height:14px;
  margin:0;
  padding:10px;
  width:253px;
  }
.planHebergement .ajax__tab_active .ajax__tab_outer {
  background:url(../images/bg_onglet_droit_active.gif) no-repeat right;
  }
.planHebergement .ajax__tab_active .ajax__tab_inner {
  background:url(../images/bg_onglet_gauche_active.gif) no-repeat;
  }
.planHebergement .ajax__tab_active .ajax__tab_tab {
  background:url(../images/bg_onglet_centre_active.gif) repeat-x;
  color:#333333;
  }
.planHebergement .ajax__tab_body {
  background-color:#ffffff;
  border:1px solid #cccccc;
  border-top:0;
  font-size:12px;
  padding:0;
  }
  
/* ----- Specifications ---------------------------------------------------- */

.tabloPc, .tabloPr {
  width:100%;
}
.tabloPc td, .tabloPr td {
  border-bottom:1px solid #cccccc;
  padding:1px 0;
}
.tabloPc td.limite, .tabloPr td.limite {
  font-size:12px;
  text-align:center;
  width:50px;
}
.tabloPc td.service, .tabloPr td.service {
  font-size:12px;
}
.prix {
  background:#e0e0e0 url(../images/bg_prix.jpg) repeat-x;
  border-bottom:1px solid #cccccc;
  font-size:16px;
  font-weight:normal;
  padding:5px 10px 5px;
}
h1.typeService {
  border-bottom:6px solid #cccccc;
  color:#ec5f00;
  font-size:12px;
  font-weight:bold;
  letter-spacing:2px;
  margin:10px 0 0;
  text-transform:uppercase;
}
.tabloPr td.couleur1 {
  color:#ec5f00;
}
.hebNotes {
  background-color:#f5f5f5;
  border:1px dotted #999999;
  margin-top:30px;
  padding:10px;
}
.hebNotes p {
  font-size:11px;
  line-height:normal;
}

/* ------------------------------------------------------------------------- */
/* ----- Réalisations ------------------------------------------------------ */
/* ------------------------------------------------------------------------- */

.tabloRealisations {
  margin:30px 20px;
  width:818px;
  }
.tabloRealisations td {
  background:#ffffff url(../images/bg_realisation.jpg) no-repeat;
  height:270px;
  width:409px;
  }
.tabloRealisations h5 {
  color:#666666; 
  font-size:11px;
  font-weight:bold;
  letter-spacing:1px;
  margin-left:20px;
  text-transform:uppercase;
  }
.tabloRealisations p {
  font-size:12px;
  margin:0 0 20px 20px;
  }
.tabloRealisations .ss {
  margin:21px;
  }
h2.realisation {
  font-size:14px;
  letter-spacing:1px;
  margin:0 0 0 20px;
  text-transform:uppercase;
}
/* ==================== */

.etudesG {
  float:left;
  width:300px;
  margin:0px 20px 20px 20px;
}
.etudesG a {
  display:block;
  margin:10px 0;
  border-bottom:1px dotted #cccccc;
}
.etudesD {
  margin:20px 40px 20px 340px;
}
.etudesD h3 {
  color:#666666;
  font-weight:bold;
  margin-top:15px;
  font-size:12px;
  letter-spacing:1px;
}
.etudesG a span {
  color:#999999;
}
.etudeImage {
  background:#ffffff url(../images/bg_realisation2.jpg) no-repeat;
  height:270px;
  width:520px;
}
.etudeImage img {
   margin:21px;
}
.etudeTexte {
   margin-left:15px;
}
.etudeTexte ul {
  list-style-image:url(../images/puce-carre.gif);
  margin-top:10px;
  padding-left:25px;
}

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

.thumbSolution {
  height:200px;
  margin:0 110px;
  width:640px;
}
.thumbSolution p {
  clear:both;
  direction:rtl;
}
.thumbSolution img {
  border:1px solid #cccccc;
  padding:4px;
}
.thumbSolution .image {
  float:left;
  margin-bottom:20px;
}
.thumbSolution .realisations a {
  background:#ffffff url(../images/btn_realisations.gif) no-repeat;
  border:none;
  color:#ffffff;
  display:block;
  font-weight:bold;
  height:40px;
  letter-spacing:1px;
  padding:5px 0 0 10px;
  text-align:left;
  width:444px;
}
.thumbSolution .realisations a:hover {
  color:#c4ff0f;
}

/* == Header UserControl == */

.pageHeader h1 {
  border-bottom:1px solid #cccccc;
  color:#666666;
  font-size:26px;
  font-weight:normal;
  letter-spacing:1px;
  margin:0 20px;
  padding:15px 0;
  }
.pageHeader ul.sousMenu  {
  list-style:none;
  margin-right:20px;
  }
.pageHeader ul.sousMenu li {
  display:inline;
  font-size:11px;
  font-weight:bold;
  letter-spacing:1px;
  text-transform:uppercase;    
  }
.pageHeader ul.sousMenu li a:hover {
  color:#c4ff0f;
  }
.pageHeader {
  padding:0;
  text-align:right;
}

/* == ================ == */

.sectionG {
  float:left;
  margin-bottom:30px;
  margin-left:20px;
  width:460px;
}
.sectionD {
  float:left;
  margin-bottom:30px;
  padding-left:80px;
  width:300px;
  }
.sectionD ul {
  list-style-image:url(../images/puce-carre.gif);
  margin-top:10px;
  padding-left:18px;
  }
.sectionD li {
  padding-bottom:10px;
  }
.sectionG p {
  margin:10px 0;
  }
  
/* == ================ == */

.erreur404 h3 {
  color:#454545;
  font-size:20px;
  font-weight:normal;
  margin-top:30px;
  text-transform:uppercase;
  }
.erreur404 {
  margin-left:20px;
  margin-bottom:30px;
  }

/* ------------------------------------------------------------------------- */
/* ----- NOUVELLES --------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

.nouvelles h3 {
  color:#454545;
  font-size:14px;
  font-weight:bold;
  text-transform:uppercase;
  }
.nouvellesDate {
  background:#ffffff url(../images/bulle_nouvelle.gif) no-repeat 20px 0;
  color:#ffffff;
  float:left;
  font-size:16px;
  font-weight:bold;
  height:45px;
  margin:30px 40px;
  padding-top:4px;
  text-align:center;
  text-transform:uppercase;
  width:110px;
  }
.nouvelles {
  float:left;
  height:auto;
  margin-top:30px;
  width:565px;
  }
.nouvellesLien a {
  margin:10px 0 20px;
  }

/* ------------------------------------------------------------------------- */
/* ----- ACCUEIL ----------------------------------------------------------- */
/* ------------------------------------------------------------------------- */

#accueilG {
  float:left;
  margin:20px 0 0 20px;
  width:590px;
  }
#accueilD {
  background:#ffffff url(../images/bg_nouvelles-bref.jpg) no-repeat;
  float:left;
  height:600px;
  margin-top:20px;
  width:250px;
  }
.nouvellesBref {
  padding:20px 34px 0 20px;
  width:196px;
  }
.nouvellesBref p {
  margin:20px 0;
  }
 .nouvellesBref h3 {
  color:#454545;
  font-size:20px;
  font-weight:normal;
  margin-top:30px;
  text-transform:uppercase;
  }
.solutionsTeaser {
  float:left;
  width:270px;
  }
.solutionsTeaser h3 {
  color:#454545;
  font-size:16px;
  font-weight:bold;
  letter-spacing:1px;
  margin-top:30px;
  text-transform:uppercase;
  }

/* ------------------------------------------------------------------------- */
/* ----- FOOTER ------------------------------------------------------------ */
/* ------------------------------------------------------------------------- */

#push {
	height:275px; /* footer */
  }
#footer {
  background:#212123 url(../images/bg_footer.jpg) repeat-x;
	height:275px; /* footer */
	position:relative;
  }
#menuFooter {
  margin:0 auto;
  padding-top:30px;
  width:880px;
  }
#menuFooter a {
  color:#999999;
  text-decoration:none;
  }
#menuFooter ul li {
  border-bottom:1px solid #333333;
  font-size:12px;
  line-height:30px;
  }
#menuFooter h4 {
  border-bottom:1px solid #333333;
  color:#99ff00;
  font-size:10px;
  letter-spacing:2px;
  line-height:30px;
  text-transform:uppercase;
  }
#menuFooter p span {
  color:#99ff00;
  }
#menuFooter .col1 {
  float:left;
  margin:0;
  width:350px;
  }
#menuFooter .col2 {
  float:left;
  margin:0 20px;
  width:210px;
  }
#menuFooter .col3 {
  float:left;
  width:280px;
  }
#menuFooter .col3 p {
  color:#999999;
  font-size:12px;
  margin:5px 0 15px;
}
#menuFooter .col1 li a, #menuFooter .col2 li a {
	display:block;
	width:100%;
  }
html>body .col1 li a, html>body .col2 li a {
  width:auto;
  }
.col1 li a:hover {
  background:transparent url(../images/bg_footer-col1.png) no-repeat;
  }
.col2 li a:hover {
  background:transparent url(../images/bg_footer-col2.png) no-repeat;
  }
#bottom {
  background-color:#212123;
  height:30px;
  }  
#bottom .element {
  margin:0 auto;
  width:880px;
  }
#bottom .element p {
  color:#6F6F6F;
  font-size:10px;
  font-weight:bold;
  letter-spacing:1px;
  padding:5px 0;
  }
#bottom .element a {
  color:#6F6F6F;
  text-decoration:none;
  }

/* ------------------------------------------------------------------------- */
/* ----- TEASER - SLIDER JQUERY -------------------------------------------- */
/* ------------------------------------------------------------------------- */

.wrap {
  background:url(../images/bg_teaser.jpg) no-repeat;
  height:270px;
  width:590px;
  }
#slide-holder {
  height:270px;
  position:absolute;
  width:590px;
  z-index:40;
  }
#slide-holder img {
  display:none;
  margin:0;
  position:absolute;
  }
#slide-runner {
  height:254px;
  left:7px;
  overflow:hidden;
  position:absolute;
  top:10px;
  width:574px;
  }
#slide-controls {
  bottom:230px;
  height:30px;
  position:absolute;
  width:590px;
  }
#slide-nav {
  display:inline;
  float:right;
  height:15px;
  margin:240px 15px 0 0;
  }
#slide-nav a {
  border:1px solid #8bb900;
  background-color:#ffffff;
  color:#8bb900;
  display:inline;
  float:left;
  font-size:8px;
  height:15px;
  margin:0 2px 0 0;
  text-align:center;
  text-decoration:none;
  width:15px;
  }
#slide-nav a.on {
  background-color:#8bb900;
  border:1px solid #8bb900;
  color:#ffffff;
  }