/**** Ok, as far as notes, the background is beige, and the header was fully 

assembled and absolute positioned,  The same with the three columns, contain 

everything,  stacked from top to bottom, absolute positioned.  The template 

title is absolute positioned, seperately, so I could overlay across the page 

columns.  Drop me an email for minor bugs.  Tested in free Editor Nvu and in 

DW, in IE and in Firefox. Validates xhtml and Css.  ******/



/*****   IMPORTANT NOTE: The basics are here, the canvas, images, colors, coding.  

Still may want or need to recode some of it, to fit your own technique.  Due to cross-

browser compatibility issues with liquid designs; which are somewhat different to work 

wit, I use no left or right pad/margin, at all, on outer divs, but instead nest two divs, 

like sticking a 3 inch box into a 4 inch box, to give you a 1/2 inch margin.  The outer 

at nearly full width, leave a few percent for play, style content centered, "margin:0 auto; and 

text-align:center;"* {



}





body {

margin:0 auto;

padding: 0; 

background-color: #92847B;

font-size:.70em;

font-family:verdana, arial, helvetica, sans-serif;

text-align:center;

}

.wrap {

margin:2px auto;

padding: 0;

width:90%;

text-align:center;

}

  

/* The background-image's for the .wrap below are for preloading 

all the page's images, just add your own images to the pattern */  

/***  Preload media  ***/

.wrap {

	background-image: url("media/arrowwhite_left.gif");

	background-image: url("media/arrowblack_left.gif");

	background-image: url("media/dualarrowgold.gif");

	background-image: url("media/brush.gif");

	background-image: url("media/distribution.jpg");

	background-image: url("media/climatisation.jpg");

	background-image: url("media/voiture_revisee.jpg");

	background-image: url("media/ebay.gif");

	background-image: url("media/shadow_leftontaupe.jpg");

	background-image: url("media/shadow_rightontaupe.jpg");

	background-repeat: no-repeat;

	background-position: -5000px -5000px;}

/**** end preload images ****/



/***  Here's another CSS image preload trick: 

/***  PRELOAD IMAGES AGAIN, BY PUTTING IMAGES 

IN THIS CLASS,  AT THE BASE OF THE HTML  *******/

.hiddenpic {display:none;}

/**** end preload images ****/







img {

margin: 0; 

padding: 0; 

border:0;}



p {}



/*****  canvas IS FOR THE dark gray canvas and the shadow_leftontaupe.jpg background image  *****/



.canvas {

display:block;

float:left;

margin: 0; 

padding: 0; 

padding-left:9px;

width:100%;

height:auto;

background: #5C5C5C url("media/shadow_leftontaupe.jpg") repeat-y;

text-align:left;

}





/*****  canvas_inner IS FOR THE shadow_rightontaupe.jpg background image ONLY  *****/

.canvas_inner {

display:block;

float:left;

margin: 0; 

padding: 0; 

width:100%;

height:auto;

background: #5C5C5C url("media/shadow_rightontaupe.jpg") repeat-y right top;

border: 0px solid #990000;

text-align:left;

}









/****   VERY IMPORTANT NOTE  ****/

/****   

   KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE MAIN WRAP DIV, AND BE 

   SURE TO SET THE Z-INDEX STACK ORDER; TO KEEP ALL ABSOLUTE POSITIONED 

   WORK BOXES VISIBLE IN Nvu and Dreamweaver Editors.  IT's JUST A FIX 

   FOR WYSIWYG HTML EDITORS.

 

   VERY IMPORTANT NOTE  ****/

   

/******  This is the title text, absolute positioned over the entire 

Template:  Positioned Text box, basically.  Just keep all absolute divs

inside of the wrapper and use css's z-index if necessary.  *****/



.absolute_title {

margin: 0; 

padding: 0; 

position:absolute;

top:40px;

left:5%;

height:auto;

width:90%;

background-color:transparent;

border:0px solid #FFFFFF;

color:#FFFFFF;

font-weight:bold;

font-size:3em;

text-indent:17.8%;

text-align:left;

z-index:1000;



}





.left_column {

display:block;

float:left;

margin: 0; 

padding: 0; 

width:22%;

border:0px solid #eaeaea;

text-align:center;

}



.header_left {

display:block;

margin-top:10px;

padding: 0; 

width:auto;

height:auto;

text-align:left;

color:#FFFFFF;

}



.header_leftrowone {

display:block;

margin: 0; 

padding: 0; 

width:100%;

height:5px;

background-color: #372F2C;

text-align:center;

color:#FFFFFF;

line-height:3px;

font-size:3px;

}

.header_leftrowtwo {

display:block;

margin: 0; 

padding: 0; 

width:100%;

height:80px;

background-color: #000000;

text-align:center;

color:#FFFFFF;

}

.header_leftrowthree {

display:block;

margin: 0; 

padding: 0; 

width:100%;

height:15px;

background-color: #372F2C;

text-align:center;

color:#FFFFFF;

}



.center_column {

display:block;

margin: 0; 

padding: 0; 

float:left;

height: 100%;

width:55%;

background-color: #FFFFFF;

text-align:center;

}



.header_center {

display:block;

margin: 0; 

margin-top:10px;

padding: 0;

width:auto;

height:auto;

text-align:center;

}



.header_centerrowone {

display:block;

margin: 0; 

padding: 0;

width:100%;

height:5px;

background-color: #736B68;

text-align:center;

color:#A99D61;

line-height:3px;

font-size:3px;

}

.header_centerrowtwo {

display:block;

margin: 0; 

padding: 0;

width:100%;

height:80px;

background: #7f7f7f url("media/brush.gif") repeat-x;

text-align:center;

color:#ffffff;

}

.header_centerrowthree {

display:block;

margin: 0; 

padding: 0;

width:100%;

height:15px;

background-color: #736B68;

text-align:center;

color:#ffffff;

font-weight:normal;

}





/***** Adding overflow:auto to these content_right boxes 

will auto scrollbar if needed.  ******/



/**** To fix jumpy hover links, had to remove padding percentage, 

and used pixels of padding instead.   *********/



/***** Adding overflow:auto to div boxes 

will add auto scrollbar functionality if needed.  ******/



.main_content {

display:block;

margin:0 auto;

margin-top:20px;

margin-bottom:5px;

padding: 0;

padding-left:5px;

width:90%;

color:#000000;

text-align:left;

}





.bodylinks_menu {

display:block;

float:left;

margin:4px 0px; 

padding:4px 0px;

width:100%;

border: 0px dashed #ffcc33;

}



#footer{

	clear:both;

	width:auto;

	text-align:center;

	height:21px;

	background:#666666;

	padding-left:0.4em;

	padding-top:0.2em;

	font-weight:bold;

	color:#FFF

}

	#footer ul { margin-right:1em; display:inline; border-right:2px solid #FFFFFF}

	#footer ul li {border-left:2px solid #FFFFFF; display:inline; padding-right:0.6em; padding-left:1em}

	#footer A {color:#FFFFFF}

	#footer A:hover {color:#FF6600}

.right_column {

display:block;

margin: 0; 

padding: 0 0px 0 0;

float:left;

width:22.1%;

border:0px solid #eaeaea;

text-align:center;

}



.header_right {

display:block;

margin: 0; 

margin-top:10px;

padding: 0;

width:auto;

height:auto;

text-align:left;

color:#FFFFFF;

}



.header_rightrowone {

display:block;

margin: 0; 

padding: 0;

width:100%;

height:5px;

background-color: #372F2C;

text-align:center;

color:#FFFFFF;

line-height:3px;

font-size:3px;

}

.header_rightrowtwo {

display:block;

margin: 0; 

padding: 0;

width:100%;

height:80px;

background-color: #000000;

text-align:center;

color:#FFFFFF;

}

.header_rightrowthree {

display:block;

margin: 0; 

padding: 0;

width:100%;

height:15px;

background-color: #372F2C;

text-align:center;

color:#FFFFFF;

}



.headlines {

display:block;

margin: 0 auto;

padding: 0;

text-align:left;

color:#A99D61;

}



.sidebox_a, .sidebox_b,.sidebox_c,.sidebox_d,.sidebox_e,.sidebox_f,.sidebox_g{

display:block; margin:0 auto; margin-top:15px; padding:0; height:70px; width:75%;

border:1px solid #7f7f7f; color:#A99D61;}



.sidebox_h {

display:block; margin:0 auto; margin-top:15px; padding:0; height:180px; width:75%;

border:1px solid #7f7f7f; color:#A99D61;}

.sidebox_h ul {}
.sidebox_h li {float:left;
margin:2px;
width:auto;}
#tagcloud li {
float:left;
margin:2px;
width:auto;
}
.cloud1 a {
color:#666666;
font-size:1.3em;
}
.cloud2 a {
color:#32CD32;
font-size:1.6em;
}
.cloud3 a {
color:#C71585;
font-size:1.9em;
}
.cloud4 a {
color:#4169E1;
font-size:2.2em;
font-weight:bold;
}
.cloud5 a {
color:#663300;
font-size:2.5em;
font-weight:bold;
}
div.mdoss1 {
padding-bottom:50px;
padding-top:1em;
}


.sidebox_a {background: transparent url("media/promo_autoprimo.jpg") no-repeat center;}

.sidebox_b {background: transparent url("media/distribution.jpg") no-repeat center;}

.sidebox_c {

	background: transparent no-repeat center;

	height: 100px;

}

.sidebox_d {

	background: transparent no-repeat center;

	vertical-align: middle;

	color: #FFFFFF;

	height: 100px;

}

.sidebox_e {background-color: #7F7F7F; border:1px solid black; width:75%;}

.a sidebox_e  {

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 14px;

	font-weight: bold;

	color: #999900;

}





.sidebox_f {height:600px;width:75%;background: transparent no-repeat center;} 

.sidebox_g {background: transparent no-repeat center;}

.sidebox_h {background: transparent no-repeat center; width:75%;}



/*****  Start Menu Styles  *******/

/****  IMPORTANT NOTE ON LINKS:  ******/

/****  TO SAVE TIME AND ENERGY, THE LEFT TOP NAV MENU WILL BE WHITE,

ALL LINKS ON WHITE BACKGROUND AREA WILL BE BLUE, AND EVERYTHING ESLE GOLD 

#FFFFFF: White Center/Right Canvas 

#336699: Blue Links, Center Column

#B48181: Mauve Links and Mauve H2 Margin

#A99D61: Gold, Header Text and left/top/base Links  *****/



/****  Page Link Styles (NOT MENU LINKS)  *****/

a:link, a:visited {color:#336699; font-weight:normal;}

a:hover, a:active {color:#B48181; background-color:#eaeaea;font-weight:normal;}



/****  "topmenu" HORIZONTAL  ****/

.topmenu {margin:0 auto; padding:0; width:100%; text-align:center;}

ul.topmenu {margin: 0; padding: 0; padding-bottom:2px; list-style: disc inside;text-align: center;}

ul.topmenu li {margin:0; padding: 0; display:inline; width:25%;}

/****  "topmenu" horizontal menu link styles  ****/

ul.topmenu li a:link, ul.topmenu a:visited { color:#A99D61;  font-weight:normal;width:100%; text-decoration:underline; }

ul.topmenu li a:hover, ul.topmenu a:active  {color:#FFFFFF;  font-weight:normal; width:100%; background-color: #7f7f7f; text-decoration:none; }



/***  leftnavs VERTICAL  ***/

.leftnav {display:block;clear:both;margin:0 auto; margin-top:20px;padding: 0;padding-left:9px; width:95%; text-align:center;text-indent:0px;}

.leftnav ul{display:block;clear:both;margin:0 auto; padding:0;text-align:left;text-indent:0px;}

.leftnav ul li {display:block;margin:0; padding: 0; width:100%; list-style: none; border-bottom:1px solid #7f7f7f;text-indent:0px;}



/****  Side menu link styles  ****/

.leftnav ul li a:link, .leftnav ul li a:visited {color:#FFFFFF; font-weight:normal; display:block; width:100%;padding: 4px 0px;text-decoration:none;}

.leftnav ul li a:hover, .leftnav ul li a:active {color:#FFFFFF; font-weight:normal; display:block; width:100%;padding: 4px 0px;text-decoration:underline; background: #666666 url("media/arrowwhite_left.gif") no-repeat right center;}



/* the following 3 rules are for the submenu, if you removed the submenu remove these rules as well */

.leftnav ul ul li {line-height: 10px;	border-bottom: none}

.leftnav ul ul li a:link,  .leftnav ul ul li a:visited {color:#cccccc; text-indent:10px;}

.leftnav ul ul li a:hover, .leftnav ul ul li a:active, .current_page {

background: transparent url("media/arrowblack_left.gif") no-repeat right center;}



/***  bodylinks_column: Body columned menus  ***/

.center {float:left; margin:0 auto;  padding:0; width:100%; text-align:center;}

.bodylinks_column {display:block;float:left; margin:0 auto;  padding:0; width:100%; text-align:center;}

ul.bodylinks_column {display:block; float:left; margin:0; padding:0; display:block; width:49.5%;}

ul.bodylinks_column li {margin:0; padding:0; list-style: none;}

/****  bodylinks_column Link/hover Styles  ****/

ul.bodylinks_column a:link, .bodylinks_column a:visited {color:#336699;font-weight:normal; text-decoration:underline;background: url("media/dualarrowgold.gif") no-repeat top left; padding-left: 15px;}

ul.bodylinks_column a:hover, .bodylinks_column a:active {color:#B48181;font-weight:normal;text-decoration:underline;background: transparent url("media/dualarrowgold.gif") bottom left no-repeat;}







/****  rightnav Vertical  ****/

.rightnav {display:block;margin:0 auto; margin-top:20px; padding: 0; width:90%; text-align:left;}

/****  Side menu link styles  ****/

.rightnav a:link, .rightnav a:visited {color:#FFFFFF;  font-weight:normal;width:100%; text-decoration:none}

.rightnav a:hover, .rightnav a:active {color:#FFFFFF; font-weight:normal; width:100%; background-color: #666666;text-decoration:underline;}



/****  SIDEBOXES: LINK STYLES: *****/

.sidebox_a a:link, .sidebox_a a:visited,.sidebox_b a:link, .sidebox_b a:visited,

.sidebox_c a:link, .sidebox_c a:visited,.sidebox_d a:link, .sidebox_d a:visited,

.sidebox_e a:link, .sidebox_e a:visited, .sidebox_f a:link, .sidebox_f a:visited, 

{

	color:#ffffff;

	font-weight:normal;

	text-decoration:underline;

	background-color: #FF6600;

}



.sidebox_a a:hover, .sidebox_a a:active,.sidebox_b a:hover, .sidebox_b a:active,

.sidebox_c a:hover, .sidebox_c a:active,.sidebox_d a:hover, .sidebox_d a:active,

.sidebox_e a:hover, .sidebox_e a:active, .sidebox_f a:hover, .sidebox_f a:active,

.sidebox_g a:hover, .sidebox_g a:active {

color:#ffffff;font-weight:normal;background-color:#666666;font-weight:normal; text-decoration:none;}





.sidebox_h h4{

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 1.8em;

	color: #FFFFFF;

	margin-top: 2px;

	margin-bottom: 2px;

}

.sidebox_h a:link, .sidebox_h a:visited {color:#FCC710;}

.sidebox_h a:hover, .sidebox_h a:active {color:#FCC710;}

.sidebox_h img{

	margin: 2px;

	float: left;



}



/****  "basemenu" HORIZONTAL   ****/

.basemenu {display:block; margin:0 auto; padding: 0; width:auto; text-align:center;}

ul.basemenu {display:block; margin:0; padding: 0; padding-bottom:2px; list-style: none inside; text-align: center;}

ul.basemenu li {margin:0; padding: 0; display:inline; width:25%;}

/****  "basemenu" menu link styles   ****/

ul.basemenu li a:link, ul.basemenu li a:visited {color:#336699;font-weight:normal;}

ul.basemenu li a:hover, ul.basemenu li a:active  {color:#B48181;font-weight:normal;background-color: #eaeaea;font-weight:normal;}





h1 {

	margin:0; 

	padding:0 10 0 0;

	border-bottom: 1px solid #CCCCCC;

	border-top: 1px solid #CCCCCC;

	border-right: 20px solid #B48181;

	color: #336699;

	font-size: 1.5em;

	font-weight:normal;

}

	

h2 {

	margin:0; 

	padding:0 10px 0 0;

	border-bottom: 1px solid #CCCCCC;

	border-top: 1px solid #CCCCCC;

	border-right: 20px solid #B48181;

	color: #A99D61;

	font-size: 1.5em;

	font-weight:normal;

}	



h3 {

	margin:0; 

	padding:0;

	color: #336699;

	font-size: 1.5em;

	font-weight:normal;

}



/* menu dossiers colonne1*/

	.mdoss col1 {

	padding-top:1em;

	width: 50%;

	

	

}

	.mdoss img {float:left; padding-right:0.2em}

	DIV.mdoss a {font-size: 1.1em; font-weight:bold; color:red}

	DIV.mdoss span {color:#FF6600;}

	DIV.h2 {color:#FF6600;}



/* menu dossiers colonne2*/

	.mdoss col2 {

	padding-top:1em;

	width: 50%;

	

}

	DIV.mdoss img {float:left; padding-right:0.2em}

	DIV.mdoss a {font-size: 1.1em; font-weight:bold; color:red}

	DIV.mdoss span {color:#FF6600;}

	DIV.h2 {color:#FF6600;}

	

#tagcloud  { 

font-weight:bold; 

 text-align: center;  

float: left; 

margin-left: 1px; 

display:block; 

}







#tagcloud li {

float: left; 

display:inline; 

margin: 0 .15em; 

}



 #tagcloud li.cloud1 { font-size: 1em; } 

#tagcloud li.cloud2 { font-size: 1.5em; }

#tagcloud li.cloud3 {font-size: 1.8em;}

#tagcloud li.cloud4 { font-size: 2em; }

#tagcloud li.cloud5 { font-size: 2.5em; }

	

#xiti-logo{

	margin: 5px;

}