/* couleurs :
#ededed		gris clair (fond page)
#959595		gris 1
#777777		gris 2 (texte par défaut)
#bebebe		gris (bordures blocs)
#b22a2d		rouge bordeau
#f7d0d3		rouge clair (bg pour menu actif)
*/

* {margin: 0; padding: 0;}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	color: #777777;
	background: #ededed;
	overflow-y: scroll;
}

ul {list-style: none;}

a {color: #959595; text-decoration: underline; font-weight: bold;}
a:visited {color: #959595; font-weight: normal;}
a:hover {color: #b22a2d; text-decoration: none;}

#page {
	position: relative;
	width: 781px;
	min-height: 643px;
	margin: 25px auto;
	padding: 35px 26px 0 27px;
	background: transparent url(../img/main_bg.gif) no-repeat center top scroll;
}

/* bloc HEADER contenant le logo hsolutions et le menu du site */
#header {width: 200px; position: absolute; left: 27px; top: 0; z-index: 5;}
#header img {margin: 0 50px 20px; border: none;}

#lang {text-align: center; margin-bottom: 17px; padding-top: 15px; border-top: 1px solid #b22a2d;}
#lang li {display: inline;}
#lang li a {text-decoration: none; color: #959595; font-weight: normal;}
#lang li a.active {text-decoration: underline; font-weight: bold;}
#lang li a:hover {text-decoration: none; color: #b22a2d;}
#lang {display: none;}

#menu {font-weight: bold; margin-bottom: 50px; z-index: 5; margin-top: 17px;}
#menu li {position: relative;}
#menu a {
	display: block;
	width: 180px;
	margin: 0;
	padding: 5px 10px;
	color: #777;
	text-decoration: none;
	text-shadow: 0 1px 0 #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #dbdbdb;
	background: #ededed url(../img/menu_arrow.png) no-repeat right 8px scroll;
	background-image: none;
}
#menu>li>a {outline: none;}
#menu li:first-child a {border-top: none;}
#menu li:last-child a {border-bottom: none;}
#menu a:visited {font-weight: bold;}
#menu a.active {color: #b22a2d !important;}
#menu li:hover>a {color: #000;}
#menu a:hover {color: #000;}
#menu a.nosub {background-image: none;}
#menu a.nosub:hover {background-image: none;}
#menu .sub {
	background: 	#f9f9f9;
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
		background: -moz-linear-gradient(top, #fff, #f3f3f3);
		-moz-box-shadow: 	inset 0 2px 8px -2px #bbb;
		-webkit-box-shadow: inset 0 2px 8px -2px #bbb;
		-o-box-shadow: 		inset 0 2px 8px -2px #bbb;
	box-shadow: 			inset 0 2px 8px -2px #bbb;
}
#menu .sub a {
	color: #888;
	width: 180px;
	margin: 0;
	padding: 2px 5px 2px 15px;
	font-weight: normal;
	border: none;
	border-bottom: 1px dotted rgba(0, 0, 0, .07);
	background-color: transparent;
}
#menu .sub li:first-child a {padding-top: 10px;}
#menu .sub li:last-child a {padding-bottom: 10px;}
#menu .sub a:hover {color: #000; background-color: transparent;}
#menu .sub a span {color: #000; font-weight: normal; font-style: italic; display: block;}
#menu .sub a:hover span {display: block;}
#menu li:hover .sub {display: block;}

#infos {position: relative; padding: 3px 5px; background: #fff; border: 1px solid #bebebe; border-bottom-width: 3px; z-index: 3; display: none;}
#infos h2 {font-size: 1.5em; color:#b22a2d; text-align: right; margin: -17px -13px -10px 0;}
#infos p {margin: 0 0 5px;}
#infos strong {color: #b22a2d;}
#infos ul li {list-style: square inside;}

/* bloc MAIN contenant la bannière, la navigation, le bloc principal (qui contient la toolbox) */
#main {
	width: 580px;
	margin-left: 200px;
	z-index: 2;
}

#navi {margin-left: 10px; text-align: right; display: none;}
#navi li {display: inline; position: relative;}
#navi a {color: #959595; text-decoration: underline;}
#navi a:hover {color: #b22a2d; text-decoration: none;}
#navi i {color: #b22a2d; font-style: normal;}
body.home #navi {display: none;}

#content {
	width: 495px;
	margin-left: 66px;
	padding: 10px;
	/*text-shadow: 0 1px 0 #fff;*/
}
#content h1 {font-size: 2em; color:#b22a2d; text-align: right; margin: -30px 10px 50px 0; font-weight: normal;}
body.home #content h1 {display: none;}
#content p {margin: 20px 0; text-indent: 25px; line-height: 140%;}
#content .access {font-weight: bold; color: #b22a2d;}
#content ul {list-style: square outside; margin: 20px 0 20px 38px;}
#content li {color: #b22a2d;}
#content li>span {color: #777;}
#content form ul {list-style: none; margin: 0;}
#content .contactus {margin-top: 25px !important; margin-bottom: 0; text-align: right;}

#content iframe#gmaps {border: 1px solid #000;} /* google maps */

#contact_us li {
	margin: 0 20px;
	padding: 5px 5px;
	position: relative;
}
#contact_us li.error {
	background-color: #fcc;
}
#contact_us .captcha {text-align: right;}
#contact_us .captcha .g-recaptcha {display: inline-block; margin-right: 12px;}
#contact_us label {color: #b22a2d; display: block; position: absolute; left: 5px; top: 5px; width: 150px;}
#contact_us label .mandatory {font-weight: bold;}
#contact_us label:hover span {cursor: pointer; border-bottom: 1px dotted;}
#contact_us input[type=text], 
#contact_us textarea {
	border: 1px solid #959595;
	width: 260px;
	height: 18px;
	margin-left: 160px;
	color: #777;
	padding: 0 4px;
	background: #f9f9f9;
}
#contact_us textarea {height: 150px;}
#contact_us textarea:hover, 
#contact_us input[type=text]:hover 
	{border-color: #b22a2d;}
#contact_us textarea:focus, 
#contact_us input[type=text]:focus {
	color: #000;
	background: #fff;
	border-color: #000;
		-moz-box-shadow: 	0 0 5px #fff;
		-webkit-box-shadow: 0 0 5px #fff;
		-o-box-shadow: 		0 0 5px #fff;
	box-shadow: 			0 0 5px #fff;
}
#contact_us button {padding: 0 10px; float: right; margin-right: 14px;}

.contact #content .form-msg {
	margin: 20px 0;
	padding: 5px 25px;
	color: #fff;
	text-shadow: none;
	background-color: #666;
}
.contact #content .form-msg p {
	margin: 0;
}
.contact #content .form-msg ul {
	margin: 0 0 0 15px;
}
.contact #content .form-msg li {
	color: #fff;
}
.contact #content .form-msg.error {
	background-color: #c00;
}
.contact #content .form-msg.confirm {
	background-color: #09c;
}
.contact #content .form-msg.confirm ul {
	margin-left: 0;
	list-style: none;
}

#content #footer {
	/*position: absolute; */
	/*left: 27px;*/
	/*bottom: -15px;*/
	/*width: 781px;*/
	/*text-align: center;*/
	padding: 15px 0;
	font-size: .8em;
	text-align: right;
	color: #aaa;
}

/* styles propres à certaines pages */

.home #content {margin: 85px 0 0 50px;}
.home #content p {text-shadow: 0 1px 0 #fff;}
.home #content #slideshow_wrapper {position: absolute; left: 285px; top: -26px; display: none;}
.home #content ul#slideshow {margin: 0;}
.home #content ul#slideshow li {list-style: none;}
.home #content ul#slideshow li img {display: block;}

.about #content ul#slideshow {display: none;}

#situation #content #footer {bottom: -35px;}
#situation #content p {text-indent: 0; margin-left: 25px; margin-right: 25px;}


#home_footer {
	position: relative;
	left: -260px;
	width: 782px;
	min-height: 370px;
	margin-top: 40px;
}
#home_footer .block {
	width: 250px;
	min-height: 370px;
	float: left;
	margin-left: 8px;
	border-top: 10px solid #000;
	background: transparent url(../img/home_blocks_bg.gif) no-repeat left top scroll;
}
#home_footer .temp_margin {margin-left: 266px !important;}
#home_footer #block_comp {border-top-color: #8c2626;}
#home_footer #block_prod {border-top-color: #a65b5b;}
#home_footer #block_refs {border-top-color: #8c8c8c;}
#home_footer #block_comp h2 {color: #8c2626;}
#home_footer #block_prod h2 {color: #a65b5b;}
#home_footer #block_refs h2 {color: #8c8c8c;}
#home_footer #block_prod span {font-size: .85em;}
#home_footer .block h2 {text-align: center; font-weight: normal; color: #000; margin: 10px 0;}
#home_footer .block ul {margin: 10px 10px 10px 13px; text-align: left;}
#home_footer .block ul li {list-style: square outside; margin-left: 10px; padding: 1px 0;}
#home_footer .block ul li a {}
#home_footer .block a.more {
	display: block;
	margin: 10px;
	text-align: center;
	font-weight: normal;
}

#contact #content p, .contact #content p {text-indent: 0; margin-left: 25px; margin-right: 25px;}

body.about #home_footer {display: none;}

#works #content {padding-bottom: 25px;}
#works #content h2 {font-size: 1em;}
#works #content h3 {font-size: 1em; margin: 25px 0 0 0; color: #000;}
#works #content h3 span {color: #b22a2d;}
#works #content p {text-indent: 0; margin: 0 0 0 25px;}

#others #content {padding-bottom: 25px;}
#others #content h2 {font-size: 1em;}
#others #content h3 {font-size: 1em; margin: 25px 0 0 0; color: #000;}
#others #content h3 span {color: #b22a2d;}
#others #content p {text-indent: 0; margin: 0 0 0 25px;}
#others #content ul {margin: 0 0 0 50px;}

#private form {margin-bottom: 25px;}
#private form li {margin: 5px 0; position: relative; height: 25px;}
#private form label {color: #b22a2d;}
#private form input {position: absolute; left: 150px; top: 0; width: 150px; border: 1px solid #959595; padding: 0 4px;}
#private input:focus {background: #eee; border-color: #000;}
#private form button {position: absolute; right: 170px; top: 0; padding: 0 10px;}
/*
#clients #content ul {list-style: none; margin: 20px;}
#clients #content ul li {border-top: 1px solid #dcdcdc; position: relative; min-height: 50px; margin-bottom: 10px;}
#clients #content ul li span {display: block; width: 225px; text-align: right; position: absolute; right: 0; top: 0; color: #b22a2d; font-style: italic; border-right: 1px solid #dcdcdc; padding-right: 4px;}
#clients #content ul li img {border-left: 1px solid #dcdcdc; }
*/
#clients #content ul {list-style: none; margin: 20px 20px 20px 0;}
#clients #content ul li {
	position: relative;
	margin-bottom: 10px;
	padding: 5px 0 0 20px;
	background: #fff;
	border-width: 1px;
	border-style: solid;
	border-color: #ccc #aaa #888;
		-moz-box-shadow: 	0 1px 4px #bbb;
		-webkit-box-shadow: 0 1px 4px #bbb;
		-o-box-shadow: 		0 1px 4px #bbb;
	box-shadow: 			0 1px 4px #bbb;
}
#clients #content ul li span {
	position: absolute;
	top: 5px;
	right: 5px;
	display: block;
	width: 230px;
	padding: 0 5px 0 20px;
	color: #b22a2d;
	text-align: right;
	font-style: italic;
}
#clients #content ul li img {}