@charset "UTF-8";
/* CSS Document */

/*
-- Sujet : CSS Structure
-- Historique : Création le 15 juillet 2008
-- Author : Cynthia Roy
-- Praxis Stratégie Communication
*/

/* Couleurs */
/*
		Noir: #000000
		Rouge: #A50000
		Rouge flash: #BE202E
		Vert turquoise: #CCDEE1
		Gris foncé: #535353
		Gris moyen: #B5B5B5
		Gris pâle: #E6E6E6
*/


/******************** Container ********************/
BODY {
	background-color: #535353;
	margin: 20px 10px;
}

#container {
	position: relative;
	background: #FFFFFF url(../images/container-left.gif) repeat-y 0 0;
}

#siteborder {
	position: relative;
	background: #FFFFFF url(../images/container-right.gif) repeat-y 100% 0;
	margin-left: 3px; padding-right: 3px;
}
/***************************************************/

/********************* Header **********************/
#header {
	position: relative; z-index: 5;
	border-top: 1px solid #303030;
	background: url(../images/header_bg.jpg) repeat-x 0 0;
}

#header DIV.logo {
	position: relative; z-index: 5;
	margin: 0 0 13px 0;
}

#header DIV.home {
	position: absolute; top: -18px; left: 0; z-index: 10;
	font-size: 80%; text-transform: uppercase; letter-spacing: -0.5px;
}
#header DIV.home A { float: left; color: #E6E6E6; background-color: #404040; text-decoration: none; height: 15px; line-height: 150%; }
#header DIV.home A .text { display: block; padding: 0 8px; }
#header DIV.home A .left { position: absolute; top: 0; left: 0; background: url(../images/utilz_li-left.gif) no-repeat 0 0; width: 5px; height: 15px; }
#header DIV.home A .right { position: absolute; top: 0; right: 0; background: url(../images/utilz_li-right.gif) no-repeat 0 0; width: 5px; height: 15px; }
#header DIV.home A:hover { color: #404040; background-color: #B5B5B5; }


#header DIV.menu {
	clear: both; position: relative; z-index: 10; height: 21px;
	font-size: 90%; font-weight: bold; text-transform: uppercase;
	background: #CCDEE1 url(../images/menutop_bottomshadow.gif) repeat-x 0 100%;
	margin-left: 136px;
}

#header DIV.menu UL {
	list-style-type: none;
	margin: 0; padding: 0 8px;
}

#header DIV.menu UL.contact {
	float: right;
}

#header DIV.menu LI {
	position: relative; float: left;
	margin: 0; padding: 0;
}

#header DIV.menu LI A { float: left; color: #000000; text-decoration: none; padding: 0 10px; }
#header DIV.menu LI A .text { display: block; padding: 2px 0; }
#header DIV.menu LI A:hover { color: #BE202E; }
#header DIV.menu LI.actif A { color: #BE202E; background-color: #FFFFFF; border-top: 1px solid #AFAFAF; margin-top: -6px; height: 27px; }
#header DIV.menu LI.actif A .text { padding-top: 6px; }
#header DIV.menu LI.actif A .left, #header DIV.menu LI.actif A .right { position: absolute; top: -6px; width: 6px; height: 50px;  }
#header DIV.menu LI.actif A .left { left: 0; background: url(../images/menutop_li-actif-left.gif) no-repeat 0 0; }
#header DIV.menu LI.actif A .right { right: 0; background: url(../images/menutop_li-actif-right.gif) no-repeat 0 0; }

#header DIV.menu .menu-left, #header DIV.menu .menu-right { position: absolute; top: 0; width: 8px; height: 22px; }
#header DIV.menu .menu-left { left: 0; background: url(../images/menutop-left.gif) no-repeat 0 0; }
#header DIV.menu .menu-right { right: -8px; background: #CCDEE1 url(../images/menutop-right.gif) no-repeat 0 0; }

#header DIV.utilz {
	position: absolute; top: -18px; right: 0; z-index: 10;
	font-size: 80%; text-transform: uppercase; letter-spacing: -0.5px;
}

#header DIV.utilz UL { 
	float: right;
	list-style-type: none;
	margin: 1px 0 0 0; padding: 0;	
}

#header DIV.utilz LI {
	position: relative; float: left;
	margin: 0 0 0 9px; padding: 0;
} 

#header DIV.utilz LI A { float: left; color: #404040; background-color: #B5B5B5; text-decoration: none; height: 15px; line-height: 150%; }
#header DIV.utilz LI A .text { display: block; padding: 0 8px; }
#header DIV.utilz LI A .left { position: absolute; top: 0; left: 0; background: url(../images/utilz_li-left.gif) no-repeat 0 0; width: 5px; height: 15px; }
#header DIV.utilz LI A .right { position: absolute; top: 0; right: 0; background: url(../images/utilz_li-right.gif) no-repeat 0 0; width: 5px; height: 15px; }
#header DIV.utilz LI A:hover { background-color: #FFFFFF; }

#header DIV.effet {
	position: absolute; z-index: 0; top: 0; right: 0; width: 450px; height: 103px;
	background: url(../images/header_bglogo.jpg) no-repeat 100% 0;
}

#header .site-topleft, #header .site-topright { position: absolute; top: -1px; width: 8px; height: 6px; }
#header .site-topleft { left: -3px; background: url(../images/container-topleft.gif) no-repeat 0 0; }
#header .site-topright { right: -3px; background: url(../images/container-topright.gif) no-repeat 0 0; }
/***************************************************/


/******************* Row middle *******************/
#rowmiddle {
	clear: both; position: relative; z-index: 0;
	margin-top: 25px;
}

#rowmiddle DIV.trail {
	
}

#columncontent {
	position: relative; margin-left: 157px;
}
/***************************************************/

/******************** Content **********************/
#content {
	position: relative; width: 67%;
	margin: 0 0 25px 0; padding: 0 25px 0 0;
	border-right: 1px solid #B5B5B5;
}

#content.fullwidth { width: 95%; border-right: none; }

#content DIV.content {

}

H1 {
	color: #A50000; font-size: 120%; text-transform: uppercase;
}

H2 {
	color: #000000; font-size: 120%;
}

H3 {
	color: #535353; font-size: 110%;
}

H4 {
	color: #000000; font-size: 100%;
}

H5 { color: #535353; font-size: 90%; margin-bottom: 5px; }

.tcol h3,
.tcol h4,
.tcol h5{
	color: #A50000;
}

A { color: #BE202E; }
A:hover { color: #BE202E; }

.split2{
	clear: none !important;
	float: left;
	width: 48%;
	margin-right: 1%;
	margin-bottom: 20px;
}

DIV.logolist IMG {
	margin: 0 20px 25px 0;
}

FORM { width: 100%; }

TABLE.form {
	border: none;
}

TABLE.form TH, TABLE.form TD {
	border: none;
}

DIV.box {
	position: relative;
	background-color: #F5F5F5;
	border: 1px solid #949494;
	margin: 0 0 25px 0;
}

DIV.box .box_top, DIV.box .box_bot { position: relative; }
DIV.box .box_top .box_left, DIV.box .box_top .box_right { top: -1px; }
DIV.box .box_bot .box_left, DIV.box .box_bot .box_right { top: -9px; }
DIV.box .box_left, DIV.box .box_right { position: absolute; width: 10px; height: 10px; background-position: 0 0; background-repeat: no-repeat; }
DIV.box .box_left { left: -1px; }
DIV.box .box_right { right: -2px; }
DIV.box .box_top .box_left { background-image: url(../images/box-topleft.gif); }
DIV.box .box_top .box_right { background-image: url(../images/box-topright.gif); }
DIV.box .box_bot .box_left { background-image: url(../images/box-botleft.gif); }
DIV.box .box_bot .box_right { background-image: url(../images/box-botright.gif); }
DIV.box .box_content { padding: 10px 7px; }

DIV.box A.button {
	float: right; 
}
/***************************************************/

/******************* Column left *******************/
#columnleft {
	position: relative;  z-index: 5; float: left; width: 150px;
}

#columnleft H4 {
	color: #B5B5B5; font-size: 80%; text-transform: uppercase;
	margin: 4px 0 18px 18px; padding: 0;
}

#columnleft DIV.menu {
	position: relative; width: 100%;
	color: #1E1E1E; font-weight: bold;
	background: url(../images/menuleft_bg.jpg) repeat-y -8px 0;
	margin: 0 0 25px -8px;
	border-left: 1px solid #1A1A1A;
}

#columnleft DIV.menu UL {
	list-style-type: none;
	margin: 0; padding: 5px 0;
}

#columnleft DIV.menu LI {
	margin: 0; padding: 0;
}

#columnleft DIV.menu LI A { display: block; color: #1E1E1E; text-decoration: none; padding: 6px 5px 6px 25px; }
#columnleft DIV.menu LI A:hover { color: #BE202E; }
#columnleft DIV.menu LI.actif A { color: #BE202E; background: url(../images/menuleft_li_bg-actif.jpg) repeat-y 0 0; }


#columnleft DIV.menu .menu-top, #columnleft DIV.menu .menu-bottom { position: absolute; left: -2px; width: 152px; height: 5px; }
#columnleft DIV.menu .menu-top { background: url(../images/menuleft-top.gif) no-repeat 0 0; }
#columnleft DIV.menu .menu-bottom { margin-top: -5px; background: url(../images/menuleft-bottom.gif) no-repeat 0 0; }
/***************************************************/

/****************** Column right *******************/
#columnright {
	position: absolute; top: 0; right: 0; width: 27%; z-index: 5;
}

#columnright H4 {
	color: #B5B5B5; font-size: 80%; text-transform: uppercase;
	margin: 4px 0 18px 0; padding: 0;
}

#columnright DIV.content {
	position: relative; float: right; width: 100%;
	background: url(../images/menuright_content-bg.jpg) repeat-y 100% 0;
	margin: 0 -8px 25px 0;
}

#columnright DIV.content .content-top { display: block; height: 10px; background: url(../images/menuright_content-top.jpg) no-repeat 100% 0; }
#columnright DIV.content .content-bottom { display: block; height: 10px; background: url(../images/menuright_content-bottom.jpg) no-repeat 100% 100%; }

#columnright DIV.content UL {
	margin-bottom: 0; padding-left: 25px; padding-right: 5px;
}

#columnright DIV.content LI {
	margin-bottom: 10px;
}

#columnright DIV.more { font-size: 90%; text-align: right; margin: 0 10px 0 0; }

#columnright DIV.more A {
	background: url(../images/li_fleche.gif) no-repeat 100% 50%;
	padding: 0 10px 0 0;
}

#columnright UL.realisationsgroup { list-style-type: none; padding-left: 15px !important; }
#columnright UL.realisationsgroup LI { position: relative; margin-bottom: 5px; background: url(../images/li_point.gif) no-repeat 0 4px; padding-left: 15px; }
/***************************************************/

/********************* Footer **********************/
#footer {
	position: relative; z-index: 5; clear: both;
	font-size: 80%; color: #535353; text-align: center;
	background: #E6E6E6 url(../images/content_bottomshadow.gif) repeat-x 0 0;
	padding: 10px 10px 25px 10px;
}

#footer DIV.links, #footer DIV.referencement { position: relative; margin-bottom: 2px; }
#footer DIV.links UL, #footer DIV.referencement UL { list-style-type: none; margin: 0; padding: 0; }
#footer DIV.links LI, #footer DIV.referencement LI { display: inline; margin: 0 5px 0 0; padding: 0 0 0 7px; border-left: 1px solid #535353; }
#footer DIV.links LI.first, #footer DIV.referencement LI.first { border: none; }
#footer DIV.links A, #footer DIV.referencement A { color: #535353; }

#footer DIV.copyright, #footer DIV.credits { line-height: 110%; }
#footer DIV.credits { margin-bottom: 5px; }

#footer DIV.credits A { color: #535353; text-decoration: none; }

#footer DIV.referencement LI { margin: 0; padding: 0; }
#footer DIV.referencement A { text-decoration: underline; }
/***************************************************/