@import url("lib.css");

html, body {
	height: 100%;
}
body {
	margin:0;
	padding: 0;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size:11pt;
	background: url(../img/bg_2010.jpg) repeat-x !important;
}
ul, li {
	margin:0;
	padding: 0;
	list-style-type: none;
}
a {
	color: #fff;
	text-decoration: none;
	outline: none;
	font-weight: bold;
}
:focus{-moz-outline-style: none;}
a:hover {
	text-decoration: underline;
}
input, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
	font-size:10pt;
}
h1 {
	font-size: 20pt;
	margin:0;
	text-transform: uppercase;
}
#main {
	width: 960px;
	margin:auto;
	padding-bottom: 480px;  /* must be same height as the footer */
}
#header {
	text-align: left;
	width: 960px;
	background: url(../img/bg-ombre.png) no-repeat top left !important;
	background: none;
	height: 201px;
	position:relative;
}
#logo {
	z-index:10;
	position: relative;
	top:-30px;
}
#parallax {
	position:relative; overflow:hidden; width:100%; height:220px; z-index: 11;
}
#footer {
	text-align:right;
	background: url(../img/bg-footer.png) repeat-x top left;
	/*border-top: 1px solid #8b7762;*/
	padding-top: 10px;
	margin-top: 20px;
	height: 480px;
	position: relative;
	margin-top: -430px; /* negative value of footer height */
	clear:both;
}
.navFooter {
	text-align:center;
	font-size:10px;
	color: #563e18;
}
.navFooter a {
	font-weight: normal;
	font-size:10px;
}
.navFooter a.reseau {
		color: #563e18;
}
/* éléments du menu */
.nav {
	width: 430px;
	height: 30px;
	background: url(../img/sprite.png) no-repeat bottom left !important;
	background: url(../img/sprite2.png) no-repeat bottom left;
	position: absolute;
	bottom:0;
	right:0;
}
.nav li {
	display: inline;
}
.nav li a:link, .nav li a:visited {
	position: absolute;
	top: 0;
	height: 40px;
	text-indent: -9000px;
	overflow: hidden;
	z-index: 10;
}

	.nav .index a:link, .nav .index a:visited, .nav .webdesign a:link, .nav .webdesign a:visited {
		left: 0px;
		width: 100px;
	}
	.nav .index a:hover, .nav .index a:focus, .nav .webdesign a:hover, .nav .webdesign a:focus {
		background: url(../img/sprite.png) no-repeat -40px -110px !important;
		background: url(../img/sprite2.png) no-repeat -40px -110px;
	}
	.nav .index a:active, .nav .webdesign a:active {
		background: url(../img/sprite.png) no-repeat -0px -80px !important;
		background: url(../img/sprite2.png) no-repeat -0px -80px;
	}
	.current-index .index a:link, .current-index .index a:visited, .current-webdesign .webdesign a:link {
		background: url(../img/sprite.png) no-repeat -0px 0 !important;
		background: url(../img/sprite2.png) no-repeat -0px 0;
		cursor: default;
	}
	.nav-index, .nav-index-click, .nav-webdesign, .nav-webdesign-click {
		position: absolute;
		top: 0;
		left: 0px;
		width: 100px;
		height: 40px;
		background: url(../img/sprite.png) no-repeat -0px -40px !important;
		background: url(../img/sprite2.png) no-repeat -0px -40px;
	}
	.nav-index-click {
		background: url(../img/sprite.png) no-repeat -0px -80px !important;
		background: url(../img/sprite2.png) no-repeat -0px -80px;
	}


	.nav .services a:link, .nav .services a:visited, .nav .webdesign a:link, .nav .webdesign a:visited {
		left: 110px;
		width: 100px;
	}
	.nav .services a:hover, .nav .services a:focus, .nav .webdesign a:hover, .nav .webdesign a:focus {
		background: url(../img/sprite.png) no-repeat -40px -110px !important;
		background: url(../img/sprite2.png) no-repeat -40px -110px;
	}
	.nav .services a:active, .nav .current-webdesign .services a.active {
		background: url(../img/sprite.png) no-repeat -110px -80px !important;
		background: url(../img/sprite2.png) no-repeat -110px -80px;
	}
	.current-services .services a:link, .current-services .services a:visited, .current-webdesign .services a:link {
		background: url(../img/sprite.png) no-repeat -110px 0 !important;
		background: url(../img/sprite2.png) no-repeat -110px 0;
		cursor: default;
	}
	.nav-services, .nav-services-click, .nav-webdesign, .nav-webdesign-click {
		position: absolute;
		top: 0;
		left: 110px;
		width: 100px;
		height: 40px;
		background: url(../img/sprite.png) no-repeat -110px -40px !important;
		background: url(../img/sprite2.png) no-repeat -110px -40px;
	}
	.nav-services-click {
		background: url(../img/sprite.png) no-repeat -110px -80px !important;
		background: url(../img/sprite2.png) no-repeat -110px -80px;
	}


	.nav .portfolio a:link, .nav .portfolio a:visited, .nav .webdesign a:link, .nav .webdesign a:visited {
		left: 220px;
		width: 100px;
	}
	.nav .portfolio a:hover, .nav .portfolio a:focus, .nav .webdesign a:hover, .nav .webdesign a:focus {
		background: url(../img/sprite.png) no-repeat -40px -220px !important;
		background: url(../img/sprite2.png) no-repeat -40px -220px;
	}
	.nav .portfolio a:active, .nav .webdesign a:active {
		background: url(../img/sprite.png) no-repeat -220px -80px !important;
		background: url(../img/sprite2.png) no-repeat -220px -80px;
	}
	.current-portfolio .portfolio a:link, .current-portfolio .portfolio a:visited, .current-webdesign .webdesign a:link {
		background: url(../img/sprite.png) no-repeat -220px 0 !important;
		background: url(../img/sprite2.png) no-repeat -220px 0;
		cursor: default;
	}
	.nav-portfolio, .nav-portfolio-click, .nav-webdesign, .nav-webdesign-click {
		position: absolute;
		top: 0;
		left: 220px;
		width: 100px;
		height: 40px;
		background: url(../img/sprite.png) no-repeat -220px -40px !important;
		background: url(../img/sprite2.png) no-repeat -220px -40px;
	}
	.nav-portfolio-click {
		background: url(../img/sprite.png) no-repeat -220px -80px !important;
		background: url(../img/sprite2.png) no-repeat -220px -80px;
	}

	.nav .contact a:link, .nav .contact a:visited, .nav .webdesign a:link, .nav .webdesign a:visited {
		left: 330px;
		width: 100px;
	}
	.nav .contact a:hover, .nav .contact a:focus, .nav .webdesign a:hover, .nav .webdesign a:focus {
		background: url(../img/sprite.png) no-repeat -40px -330px !important;
		background: url(../img/sprite2.png) no-repeat -40px -330px;
	}
	.nav .contact a:active, .nav .webdesign a:active {
		background: url(../img/sprite.png) no-repeat -330px -80px !important;
		background: url(../img/sprite2.png) no-repeat -330px -80px;
	}
	.current-contact .contact a:link, .current-contact .contact a:visited, .current-webdesign .webdesign a:link {
		background: url(../img/sprite.png) no-repeat -330px 0 !important;
		background: url(../img/sprite2.png) no-repeat -330px 0;
		cursor: default;
	}
	.nav-contact, .nav-contact-click, .nav-webdesign, .nav-webdesign-click {
		position: absolute;
		top: 0;
		left: 330px;
		width: 100px;
		height: 40px;
		background: url(../img/sprite.png) no-repeat -330px -40px !important;
		background: url(../img/sprite2.png) no-repeat -330px -40px;
	}
	.nav-contact-click {
		background: url(../img/sprite.png) no-repeat -330px -80px !important;
		background: url(../img/sprite2.png) no-repeat -330px -80px;
	}
	
#content {
		background: url(../img/contentMiddle.png) repeat-y;
}
#contentTop {
		height:30px;
		background: url(../img/contentTop.png) top left no-repeat;
		display: block;
		margin-top:20px;
}
#contentBottom {
		width:960px;
		float:left;
		height:30px;
		background: url(../img/contentBottom.png) bottom left no-repeat;
		display: block;
		margin-bottom:20px;
}

#content p {
}
.clearboth {
	clear:both;
}
#content-footer {
		height: 1px;
		width: 960px;
		z-index:2;
		border-top: 1px solid #8b7762;
}

.col {
		width: 23% !important;
		width:22%;
		float: left;
		margin-right: 1%;
}
/* formulaire */
.contact-form label { float:left; margin:0 10px 0 0; padding:5px 0px 20px 0; text-align:right; width:180px;}
.block { clear:left;}
.field { 	border-left:1px dotted #8b7762; margin:0 0 15px; display:inline; padding:0 0 0 20px; width: 320px; float:left }
.message {display:none;width:460px;padding:10px; color: #fff; margin-bottom: 15px; background: #9a1e1c}
.contact-form {text-align:right; }
.contact-form ul {list-style-type:none;width:390px;}
.contact-form li {list-style-type:none;}
div.special {display:none;}
.contact-form input {width:260px; border:1px solid #8b7762;}
.contact-form fieldset {border:2px solid #8b7762; }
.contact-form input:hover, .contact-form textarea:hover, #newsletter input:hover, #newsletter textarea:hover { background:#eee}
.contact-form textarea {width:260px;width:260px; border:1px solid #8b7762;}
.submitbutton input { width:auto}
.submitbutton {clear:both; text-align: left; margin-left:250px}
.contact-form input.submitImage { border:none}
.contact-form input.submitImage:hover { background:none; border:none}
.contact-form span { float:right; width:40px; display:block; position:relative; left: 10px; font-size:9px; color:#bd720c; font-style:italic}
/*jFlow*/
#myController span{
color:#FFF;
background:#000;
margin-right:10px;
cursor:pointer;
}

#jFlowSlide{
border:1px solid #30441a;
}

#myController span.jFlowSelected {
background:#F00;
}

h3 { padding:0; font-size:14pt; font-weight: normal }

h2 {
	margin:0;font-weight: normal
}
h2.titlePortfolio {
	text-align:left; margin-right:50px;
}
#flashservices, #focus {
	float:right;
	margin-left: 10px;
}
#focusLeft {
	float:left;
	margin-right: 10px;
}
#flashservices {
	border: 1px solid #eee;
}
#focus img {
}
#focus h3 {
	font-weight:bold;
	width: 350px;
	position:relative;
}
.overflowHidden {
	overflow: hidden;
}
.linkSite {
	background: url(../img/link.png) no-repeat top left !important;
	background: url(../img/link.gif) no-repeat top left;
	padding-left:30px;
	height: 35px;
	display:block;
}
.height90 {
	height: 90px;
	border-right: 1px dotted #8b7762;
}
.displayThis {
	position: absolute;
	top:0;
	width:960px;
	z-index:300;
}
#newsletter {
	position: absolute;
	top:10px;
	left:-10px;
	background: url(../img/bg-footer.png) repeat-x bottom left;
	font-size:9pt;
	height: 120px;
}
#newsletter input {width:90%; border:1px solid #8b7762;font-size: 9pt;}
.closesignup { position:absolute;top:0;right:5px}
#newsletter input.submitNews { width:auto;}
#newsletter .special {display:none;}
#newsletter .message {display:none;width:80%;padding:10px; border:1px dotted #8b7762;}
#inscription { margin-top: 20px}
	
.gmnoprint span { float: right; font-size: 9px;}
#topmenu { position:absolute; top:300px; right:10px;}
.width240 { width:260px; padding-left:20px;border-left: 1px dotted #8b7762;height:330px;}
.borderBottom { border-bottom: 1px solid #8b7762; padding-top:20px }
#newVersion { position:absolute; top:0; right:0;}

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/


/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}


/* CLEAR FIX*/
.clearfixFooter:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfixFooter {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfixFooter { height: 1%;}
.clearfixFooter {display: block;}
/* End hide from IE-mac */

.lienSite {
    background:url('../img/lienSite-droite.png') no-repeat right top;
    margin:0;
    padding:0;
	text-align:center;
	width: auto;
	float:right;
}
.lienSite a {
	display:block;
    background:url('../img/lienSite-gauche.png') no-repeat left top;
	height:20px;
    padding: 5px 10px;
}
.fontSize10 { font-size:9pt; margin-bottom:10px}

#contact-wrapper {
	padding:20px;
}
#contact-wrapper div {
	clear:both;
	margin:1em 0;
}
#contact-wrapper label {
	display:block;
	float:none;
	font-size:12pt;
	width:auto;
}
form#contactform input {
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
	padding:5px;
	font-size:12pt;
	color:#333;
}
form#contactform textarea, form#contactform input#pj {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12pt;
	padding:0.6em 0.5em 0.7em;
	border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
	border-style:solid;
	border-width:1px;
}
#cable-footer {
	background: url('../img/cables-footer.png') no-repeat bottom left;	
}
label.error { color: #bd721b; font-weight:bold;}
.textAlignCenter { text-align:center}
  
  .rightTitle .sIFR-flash { text-align:right}
.marginBottom20px { margin-bottom:20px}