/**** 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;" and then insert an inner div, at 90 percent width (100 if needed), 
centered or floated, and a little pad to the inner div, if needed, .  The inner gets all 
styles, border, color, whatever.  This provides a fake or faux left/right pad/margin, as 
needed, by adjusting width percentage. You could also float the outer left, and the inner 
right, to give you the same outcome, as I did in my A12 template's left column.  *******/    



/*************** CSS Document *******************/

/***** CSS Document ******/
/***********  default font-size:12px, use 100% for that  ********/
/*****  90%=11px, 80% in forms, 85% otherwise roughs 10 to 10.5px, a minimum  *****/
/******  NOTEs: DW wont view all docs properly, try browsers first, before modification  *******/
/****  divs must float left for dw to view border, most pages must be 100% wide to view proper ********/
/*********  to center page is confusing, when float left is necessary  ************/
/**** trick for "center with float left" is float left 100% wide w/body margin sides 5% or more *****/
/**** Above not a 100% fix for dw view, borders still flakey *****/
/*****  another trick to keep position going, is only float what needs floating  *********/
/*****  try add or remove <br> in end of empty divs, or remove float, make dw view properly *******/
/*****  NOTE: The <strong> tag &/or no clear float at base, made link repeat at base of page  *****/
/**** The trick hack to stop hover jumpy links, is to put every section into a div, classed seperate  ****/
/******  any div that has a specified margin/pad can't have links without containers  *****/
/******  another hack, is to classify all links, so that they don't margin/pad jumpy  *****/
/*****  the divs containing links can't have set width and margin/pad alterations, or theyll be jumpy  *******/
/**** Hack: Removed width to stop jumpy hover-links, setting pad-margin made it width:auto  *****/
/**** Jumpy Links solved with px instead of % on pad/margin  ****/
/****  Rows of divs must be in wrappers, to wrap correctly, so they don't hang when wrapping"  ***/




/***  Height to "li a" works to allow full width 
         links when width:100% is not an option; 
		 and seems to force divs to hold contents, 
		 when float is not an option.  Height needs 
		 accuracy, or problematic with Firefox ****/
/****  FLOAT:LEFT WAS NEVER USED IN MANY HORIZONTAL ULs  *****/

/********  Not Blocked/Floated  **********/
/****  Appears that inner divs go against prior divs, but which ones?  *********/
/****  Deleting all unnecessary div borders resolved doublewide dw blowout  *****/
/*****  divs out of order, caused absolute columns to vanish  ******/
/***  absolute positioning, use left (never right dimension) fixes layering problem ******/
/**** bodycontainer floated left caused doublewide blowout  ******/


/****   VERY IMPORTANT NOTE  ****/
/****   
   KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE CANVAS_WRAP DIV, TO 
   KEEP ALL ABSOLUTE POSITIONED WORK BOXES VISIBLE IN Nvu and Dreamweaver 
   Editors.  IT's JUST A Z-INDEX RELATED FIX FOR WYSIWYG HTML EDITORS.
   VERY IMPORTANT NOTE  ****/

/***  Colors Used In the Original Template:
#92847B: Taupe Body Background 
#5c5c5c: Canvas Left Column Dark Gray: 
#FFFFFF: White Center/Right Canvas 
#372F2C: Darkest Black Rose Left Header
#736B68: Lighter Taupe Rose, Right Header
#7F7F7F: Medium Gray, Left Nav Hover and Header Title Gray
#336699: Blue Links, Center Column
#B48181: Mauve Links and Mauve H2 Margin
#A99D61: Gold, Header Text and left/top/base Links
****/


* {
}

body {
margin:0 auto;
padding:0;
background-color: #92847B;
font-size:.70em;
font-family:verdana, arial, helvetica, sans-serif;
text-align:center;
}
.wrap {
margin:0 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/camera1.jpg");
	background-image: url("media/camera2.jpg");
	background-image: url("media/camera3.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 ****/


.style4 {color: #93857B}


img {margin: 0; padding: 0; border:0;}

p {}

.canvas {
float:left;
margin:0 auto;
padding: 0;
width:100%;
height: 100%;
background: #5C5C5C url("media/shadow_leftontaupe.jpg") repeat-y;
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 {
position:absolute;
top:42px;
left:5%;
margin:0;
padding:0;
height:auto;
width:90%;
background-color:transparent;
border:0px solid #FFFFFF;
color:#FFFFFF;
font-weight:bold;
font-size:2.5em;
text-indent:19.8%;
text-align:left;
z-index:1000;

}

.absolute_title2 {
position:absolute;
top:20px;
left:25%;
margin:0;
padding:0;
height:auto;
width:90%;
background-color:transparent;
border:0px solid #FFFFFF;
color:#FFFFFF;
font-weight:bold;
text-indent:15.8%
z-index:1000;

}

.absolute_title3 {
position:absolute;
top:15px;
left:80%;
margin:0;
padding:0;
height:auto;
width:90%;
background-color:transparent;
border:0px solid #FFFFFF;
color:#FFFFFF;
font-weight:bold;
text-indent:15.8%
z-index:1000;

}

.left_column {
margin:0 auto;
padding:0;
float:left;
width:17.35%;
border:0px solid #eaeaea;
text-align:center;
}


.header_left {
display:block;
margin:0 auto;
margin-top:10px;
padding:0;
padding-left:9px;
width:auto;
height:auto;
text-align:left;
color:#FFFFFF;
}

.header_leftrowone {
display:block;
margin:0 auto;
padding:0;
width:100%;
height:5px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
font-size:2px;
}
.header_leftrowtwo {
display:block;
margin:0 auto;
padding:0;
width:100%;
height:80px;
background-color: #000000;
text-align:center;
color:#FFFFFF;
}
.header_leftrowthree {
display:block;
margin:0 auto;
padding:0;
width:100%;
height:15px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
}

.sidebox_a,
.sidebox_b,
.sidebox_c,
.sidebox_d,
.sidebox_e {
display:block;
margin:0 auto;
margin-top:15px;
padding:0;
height:70px;
width:75%;
border:1px solid #7f7f7f;
color:#ffffff;}

.sidebox_a {background: transparent url("media/camera1.jpg") no-repeat center;}
.sidebox_b {background: transparent url("media/camera2.jpg") no-repeat center;}
.sidebox_c {background: transparent url("media/camera3.jpg") no-repeat center;}
.sidebox_d {background-color: transparent;}
.sidebox_e {background-color: #7F7F7F; border:1px solid black;}

.right_column {
overflow:auto;
display:block;
float:right;
margin:0 auto;
padding:0;
height: 100%;
width:82.63%;
background: #FFFFFF url("media/shadow_rightontaupe.jpg") repeat-y right;
text-align:center;
}

.header_right {
margin:0 auto;
margin-top:10px;
padding:0;
padding-right:9px;
width:auto;
height:auto;
text-align:center;

}

.header_rightrowone {
margin:0;
padding:0;
width:100%;
height:5px;
background-color: #736B68;
text-align:center;
color:#FFFFFF;
font-size:2px;}

.header_rightrowtwo {
margin:0;
padding:0;
width:100%;
height:80px;
background: #7f7f7f url("media/brush.gif") repeat-x; 
text-align:center;
color:#ffffff;
}
.header_rightrowthree {
margin:0;
padding:0;
width:100%;
height:15px;
background-color: #736B68;
text-align:center;
color:#FFFFFF;
font-weight:normal;
}


/***** Adding overflow:auto to any boxes 
will auto scrollbar if needed.  ******/

.content_wrapper {
display:block;
margin:0% auto;
margin-top:20px;
padding:0;
width:95%;
text-align:center;
}


#picture_left 
{
		float:left;
		width: 130px;
	}

#picture_right
{
		float:right;
		width: 105px;
	}

#picture_right2
{
		float:right;
		width: 160px;
	}

.content_left {
float:left;
margin:0;
padding:0;
width:74%;
text-align:left;
}

.content_center {
float:right;
width:78%;
text-align:left;
}

.content_right {
float:right;
margin:0;
padding:0;
padding-left:5px;
width:22%;
text-align:left;
border-left:1px dashed #999999;
}

/***  This is the sample table 200 height  ****/
.content_right_e {
overflow:auto;
display:block;
margin:0 auto;
margin-top:5px;
padding:0;
width:95%;
height:200px;
text-align:left;
}

.bodylinks_menu {
display:block;
float:left;
margin:4px 0px; 
padding:4px 0px;
width:100%;
border-bottom: 1px dashed #666666;
}


.footer {
	display:block;
	clear:both;
	width:90%;
	margin:0 auto;
	margin-top:20px;
	padding:0;
	border-top:1px solid #cccccc;
	color: #000000;
	text-align:center;
}


.footer2 {
	display:block;
	clear:both;
	width:90%;
	margin:0 auto;
	margin-top:1100px;
	padding:0;
	border-top:1px solid #cccccc;
	color: #000000;
	text-align:center;
}

/****  "topmenu" HORIZONTAL  ****/
.topmenu {margin:0 auto; padding:0;width:95%; 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%; }
ul.topmenu li a:hover, ul.topmenu a:active  {color:#336699;  font-weight:normal; width:100%; background-color: #cccccc;  }

/***  leftnavs VERTICAL  ***/
.leftnav {display:block;clear:both;margin:0 auto; margin-top:20px; padding:0; padding-left:8%; width:92%; 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; width:100%; margin:0; padding:0; 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  ***/
.bodylinks_column {display:block;float:left; margin:0 auto;  padding:0; width:100%; text-align:left;}
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;}


/****  "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;}

/****  LEFT SMALL BOXES: LINK STYLES: GOLD LINKS WITH BLUE ON HOVER  *****/
.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 {
color:#A99D61;font-weight:normal;
}

.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 {
color:#336699;font-weight:normal;background-color: #eaeaea;font-weight:normal;
}

/****  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;}



h1 {
	margin:0; 
	padding: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;
	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 déroulant de la page d'acceuil   ****/

#menu, #menu ul /* Liste */     
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
        font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
        display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intérieure */
        background : #5c5c5c; /* couleur de fond */        
        color : #fff; /* couleur du texte */
        text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
        width : 200px; /* largeur */
}

#menu li /* Elements des listes */      
{ 
        float : left; 
        /* pour IE qui ne reconnaît pas "transparent" */
        border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
        position: absolute; /* Position absolue */
        width: 200px; /* Largeur des sous-listes */
        left: -999em; /* Hop, on envoie loin du champ de vision */
}



/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

	

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul                
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */    
{
        color: #5c5c5c; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}