/*
Auteur: Jean-François Cossette
Courriel: jf.cossette@gmail.com
URL: http://www.jfcossette.com
Date: 2 février 2009
*/



/* Les Éléments Généraux
original : 
body {
	background: #eee;
	color: #16242e;
	font: 13px/17px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
--------------------------------------------------------------------------------------- */

@import url("reset.css");

body {
	background: #eee;
	color: #16242e;
	font: 13px/17px Helvetica, Arial, sans-serif;
}

a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {color: #ff0000;}

.flt-left {float: left;}
.flt-right {float: right;}
.clear {clear: both;}
.alt {background: #eee;}
.no-border {border: 0;}
.auto {width: auto;}



/* Les Containers
--------------------------------------------------------------------------------------- */

#page {
	margin: 0 auto;
	width: 786px;
}

#main {
	background: #fff url(/images/bg-page.gif) repeat-y;
	overflow: auto;
	width:786px;
}



/* Le Header
--------------------------------------------------------------------------------------- */

#header {
	height: 130px;
	position: relative;
	width: 786px;
}

h1 {
	bottom: 16px;
	font-size: 34px;
	left: 32px;
	letter-spacing: -1px;
	position: absolute;	
	padding-top:5px;
	padding-bottom:5px;
}

h1 a span {
	color: #0478a2;
}

h1 a {
	color: #16242e;
}

#header ul {
	bottom: 8px;
	right: 32px;
	position: absolute;
}

#header li {
	color: #0478a2;
	display: inline;
	font-size: 20px;
}

#header li a {
	color: #16242e;
}

#header li a:hover {
	border-bottom: 4px solid #0478a2;
}

#accueil #header li a#home,
#forfaits #header li a#package,
#questions #header li a#faq,
#joindre #header li a#contact {
	border-bottom: 4px solid #0478a2;
}



/* Le Slogan
--------------------------------------------------------------------------------------- */

#slogan {
	background: #fff url(../images/bg-slogan.jpg) no-repeat;
	clear: left;
	height: 303px;
}

h2 {
	color: #fff;
	font-size: 30px;
	padding: 268px 32px 8px 32px;
}



/* Le Contenu
--------------------------------------------------------------------------------------- */

#content {
	float: left;
	padding: 16px 0 0 0;
	width: 513px;

}

#content h3 {
	font-size: 22px;
	margin: 0 0 15px 29px;
}

#content p {
	margin: 0 0 15px 29px;
	text-align: justify;
}

#content a:link {color: #0478a2;}
#content a:visited {color: #0478a2;}
#content a:hover {color: #16242e;}
#content a:active {color: #ff0000;}

/* Le tableau des forfaits
--------------------------------------- */

.forfaits {width: 19%;}
.features {width: 43%}
#content td.noborder, #content th.noborder {border: none;}

#content table {
	margin: 0 0 0 29px;
	width: 484px;
}
#content th {
	font-weight: bold;
	padding: 5px 3px;
}
#content thead th {
	background: #0478a2 url(../images/bg-th.gif) repeat-x;
	color: #fff;
	font-size: 14px;
}
#content thead th.txt-left {text-align: left;}
#content thead th, #content td {text-align: center;}
#content tbody th, #content tfoot th {border-bottom: 1px solid #d9d9d9;}
#content th.titre {
	background: url(../images/bg-th.gif) repeat-x;
	border: none;
	color: #fff;
}
#content td {
	border-bottom: 1px solid #d9d9d9;
	padding: 3px;
}
#content tfoot td {
	font-weight: bold;
}

/* Les formulaires
--------------------------------------- */
#content form {
	margin: 0 0 0 29px;
	width: 484px;
}

form div {
	border-bottom: 1px solid #d9d9d9;
	float: left; 
	padding: 3px;
	width: 478px;
}

form div div {
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	float: left; 
	padding: 3px;
	width: 478px;
}

#content form h3 {
	background: #0478a2 url(../images/bg-th.gif) repeat-x;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	padding: 5px 6px;
}

label {
	float: left;
	font-weight: bold;
	padding: 2px 0 0 0;
	width: 160px;
}

input {
	border: 1px solid #d9d9d9;
	float: left; 
	font-size: 12px;
	padding: 3px;
	width: 310px;
}

input#dispo {
	clear: both;
	margin: 3px 0 3px 160px;
	width: auto;
}

input#go {
	float:none; 
	clear:both; 
	width:auto; 
	margin: 3px 0 8px 164px;
	color: #16242e;
	cursor: pointer;
	font-weight: bold;
}

textarea {
	border: 1px solid #d9d9d9;
	float: left; 
	font-size: 12px;
	padding: 3px;
	height: 100px; 
	overflow: auto;
	width: 310px;
}

fieldset {
	float: left; 
	width: 484px; 
	border:0;
}

legend {
	background: #0478a2 url(../images/bg-th.gif) repeat-x;
	color: #fff;
	display: block;
	font-size: 14px;
	margin: 0 0 0 -7px;
	padding: 5px 3px;
	width: 484px;
}

/* Les questions de la FAQ
--------------------------------------- */
#content dl {
	margin: 0 0 15px 29px;
}
#content dt {
	font-weight: bold;
}
#content dd {
	margin: 0 0 15px 0;
}




/* Le Sidebar
--------------------------------------------------------------------------------------- */

#sidebar {
	background: #fff url(../images/bg-sidebar.gif) repeat-y;
	float: right;
	margin: 16px 0 0 0;
	width: 257px;
}

#sidetop {
	background: #fff url(../images/sidebar-top.gif) no-repeat;
	height: 16px;
}

#sidebottom {
	background: #fff url(../images/sidebar-bottom.gif) no-repeat;
	height: 16px;
}

#sidebar h3 {
	font-size: 22px;
	margin: 0 0 12px 0;
	padding: 0 16px;
}

#sidebar p, #sidebar form, #sidebar iframe {
	font-size: 11px;
	line-height: 13px;
	margin: 0 41px 10px 16px;
}

#sidebar iframe {
	margin: 0 41px 0 16px;
}

#sidebar input {
	background: #0478a2;
	border: 0;
	color: #fff;
	float: none;
	font: 11px/11px "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 3px 0 5px;
	padding: 5px;
	width: 186px;
}

#sidebar input.btSpec {
	background: none;
	color: #16242e;
	cursor: pointer;
	float: none;
	font-size: 13px;
	font-weight: bold;
	margin: 0 0 10px 0;
	padding: 0;
	width: auto;
}

#sidebar label {
	font-weight: bold;
	display: block;
	margin: 0;
}



/* Le Footer
--------------------------------------------------------------------------------------- */

#footer {
	background: url(../images/bg-footer.gif) no-repeat top;
	clear: both;
	font-size: 11px;
	height: 100px;
	padding: 30px 0 0 0;
	text-align: center;
}

#footer span, #footer a {
	color: #0478a2;
}

#footer a:hover {
	color: #16242e;
}