/**
*	
*	Feuille de styles
*	-----------------
*
*	Client 	La Société de Relations d'Affaires
*		 	www.srahec.qc.ca
*
*	Auteur	Sebastien Rothlisberger
*			www.rothlismedia.com
*
*	-----------------
*
*	Copyright 2008 / RothlisMedia
*
*/

/**
 * General
 */
	* 				{margin:0; padding:0;}
	body 			{background:url("/inc/images/SRA-Background.jpg") repeat-x top center; position:relative; width:900px; margin:0px auto; padding: 0px; font: 12px "Century Gothic", "Helvetica", Verdana, Arial, Helvetica, sans-serif; color: #141414; text-align: left;}
	a 				{text-decoration:underline; color:black;}
	a:hover 		{text-decoration:underline; color:#9f7800;}
	h1				{font: 50px Helvetica; color:#e7e6dc; margin-bottom: 15px;}
	h2				{font: 30px Helvetica; font-style: italic;color:#9f7800;}
	h3				{font-size:18px; color:#666666;}
	h4				{font:25px "Century Gothic"; color:#666666; margin-bottom:15px;}
	h5				{font:18px "Century Gothic"; color:#000000; margin-bottom:15px;}
	h6				{font:bold 20px "Century Gothic"; color:#000000; margin-bottom:15px;}
	.date			{font:bold 15px "Century Gothic"; color:#666666; margin-bottom:15px;}
	#content ul				{list-style-type:square; padding:-5px 0px 15px 30px; margin:5px 0 15px 15px;}
	#content ul li			{margin:5px 0 0 15px; padding:0px 0 0px 5px; background: url() no-repeat 2px 0px;}
	hr, .hr			{border-top:1px solid #cccccc; margin-top:0px; margin-bottom:15px; clear: both;}
	p				{margin-bottom:15px;}
	img				{border:none;}
	blockquote		{padding:15px 0 0 15px; margin:0; font-weight:bold; background: transparent url("") left top no-repeat;}
	blockquote div	{padding:0 15px 15px 0; background: transparent url("") right bottom no-repeat;}
	.clear			{clear: both;}
	td				{padding:10px;}
	.light			{color:#999999;}

/**
 * Layout
 */
 	#wrapper		{background: url("/inc/images/SRA-Header.jpg") no-repeat; position: relative; width: 900px;}
 	#header			{width:900px; height:166px; position: relative;}
 	#logo, #slogan	{text-indent: -3000em;}
 	#menu			{background: url("/inc/images/SRA-Menu-Background.jpg") repeat-x; height: 38px; position: absolute; top:0px; right:0px;}
 	#menu a			{color:#ffffff;}
 	#menu a:hover	{color:#d0d0d0;}
 	#sous-menu		{text-align: right; height:25px; position: relative;}
 	#sous-menu a			{color:#000000;}
 	#sous-menu a:hover	{color:#888888;}
 	#content		{padding:15px 0px 0px 0px;}
 	#content p		{line-height: 18px;}
 	#content-left	{float:left; width: 585px; padding-right:15px;}
 	#content-right	{margin-left:600px;}
  	#content-half-left	{float:left; width: 450px; padding-right:10px;}
 	#content-half-right	{margin-left:460px;}
 	#footer			{clear: both;}
 	#copyright		{clear: both; text-align: right; color:#999999; font-size: 11px; padding-bottom: 15px;}
 	#copyright a	{color:#777777;}
 	#copyright a:hover{color:#444444;}
 	#titre			{position: relative; width: 900px; height:34px; border-bottom:#cccccc 1px solid; overflow: hidden;}
 	h3.titre		{background: url("/inc/images/SRA-Titre-Background.jpg") repeat-x; height: 30px; float:right; font:20px "Century Gothic"; font-weight: normal; color:#ffffff; text-transform: uppercase; padding:4px 15px 0px 15px; margin-left: 10px;}
 	#nouvelles		{text-align: left; height:34px; overflow: hidden;}
 	.nouvelle-date	{color:#999999;}
 	.nouvelle-item	{text-align: left; height:25px; padding:9px 0px 0px 10px;}
 	
 	#banners-big	{width:900px; height:270px; overflow: hidden; display: block;}
 	#banners-small	{width:900px; height:190px; overflow: hidden; display: block; margin-top:3px;}
 	#banners-small-01	{width:298px; height:190px; overflow: hidden; display: block; float:left; margin-right:3px;}
 	#banners-small-02	{width:298px; height:190px; overflow: hidden; display: block; float:left; margin-right:3px;}
 	#banners-small-03	{width:298px; height:190px; overflow: hidden; display: block; float:left;}
 	
 	.banner-medium	{margin-top:-15px; padding-bottom: 10px;}
 	.banner-big	{margin-top:-15px; padding-bottom: 0px; margin-bottom:-4px;}
 	
 	.bulle-right	{float: right; margin-left: 15px;}
 	.bulle-right p	{color:gray;}
 	
 	.eventList		{padding:-5px 0px 15px 30px; margin:5px 0 15px 15px;}
 	.eventList li	{list-style-type:none; border-left:10px solid #ff8b34; margin:5px 0 0 15px; padding:0px 0 0px 5px;}
	
 /**
 * Erreur 404
 */
 	#erreur			{margin:60px 60px;}
 	#erreur h1		{color:black; background:none; font-size:30px; padding: 15px 150px 0px 15px; font-weight: normal;}
 	#erreur h2		{color:black; background:none; font-size:15px; padding: 0px 150px 10px 15px; font-size: 10px;}
 	
 /**
 * CSS Buttons
 * http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
 */
	.clear					{overflow:hidden;  width:100%;}
	a.button				{background:transparent url('/inc/images/bg_button_a.gif') no-repeat scroll top right;  color:#444;  display:block;  float:right;  font:normal 12px arial,sans-serif;  height:24px;  margin-right:6px;  padding-right:18px;  text-decoration:none;}
	a.button span			{background:transparent url('/inc/images/bg_button_span.gif') no-repeat;  display:block;  line-height:14px;  padding:5px 0 5px 18px;}
	a.button:active			{background-position:bottom right;  color:#000;  outline:none;}
	a.button:active span	{background-position:bottom left;  padding:6px 0 4px 18px;}
	.mini-site				{font-weight: bold; }

 /**
 * Formulaire
 */	

.cssform {
	margin-bottom: 25px;
}

.cssform p{
clear: left;
margin: 0;
padding: 5px 0 15px 0;
padding-left: 155px; /*width of left column containing the label elements*/
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 330px;
padding: 2px;
font-size: 15px;
}

.cssform textarea{
width: 300px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

form.cssform label.error, label.error {
	/* remove the next line when you have trouble in IE6 with labels in list */
	color: red;
	font-style: italic;
	background-color: white;
}
div.error { display: none; }
input[type="text"] {	border: 1px solid gray; }
input:focus { border: 1px dotted black; }
input.error { border: 1px dotted red; }
form.cssform .gray * { color: gray; }

form.cssform label.error {
	float:right;
	width: 330px;
}