/**** 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 REFERENCE CARD
http://www.w3schools.com/css/css_reference.asp  ***/


/**  The main trick to doing liquid width layouts, 
is that you cannot have pad/margin/border on 100%
wide divs.  They must be on width:auto divs.  To do 
this, must 100% it's outer, and style the inner.  **/

/***********  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("/images/arrowwhite_left.gif");
	background-image: url("/images/arrowblack_left.gif");
	background-image: url("/images/dualarrowgold.gif");
	background-image: url("/images/brush.gif");
	background-image: url("/images/shadow_leftontaupe.jpg");
	background-image: url('/images/shadow_rightontaupe.jpg');
	background-repeat: no-repeat;
	background-position:  -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 {
float:left;
margin:0 auto;
padding: 0;
width:100%;
height: 100%;
background: #5C5C5C url("/images/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:20px;
left:1%;
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;

}


.left_column {
margin:0 auto;
padding:0;
float:left;
width:23.8%;
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;
font-family:Palatino;
font-weight:bold;
font-size:2.5em;
text-indent:-8px;
text-align:right; text-valign:middle;
color:#FFFFFF;
}
.header_leftrowthree {
display:block;
margin:0 auto;
padding:0;
width:100%;
height:15px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
}

.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_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:76%;
background: #FFFFFF url("/images/shadow_rightontaupe.jpg") repeat-y right;
text-align:center;
}

/*


.left_column {
margin:0 auto;
padding:0;
float:left;
width:19.8%;
border:0px solid #eaeaea;
text-align:center;
}
*/
.header_right {
margin:0 auto;
padding:0;
margin-top:10px;
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:#736B68;
font-size:2px;
}
/* 7f7f7f */
.header_rightrowtwo {
margin:0;
padding:0;
width:100%;
height:80px;
background: #7f7f7f url("/images/brush.gif") repeat-x; 
font-family:Palatino;
font-weight:bold;
font-size:2.5em;
text-indent:-14px;
text-align:left; text-valign:middle;
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 these content_right boxes 
will auto scrollbar if needed.  ******/

.content_right_a {
display:block;
margin:0% auto;
margin-top:20px;
padding:0;
width:80%;
text-align:left;
font-size:1.1em;
}


/***  This is the sample table 200 height  ****/
.content_right_e {
overflow:auto;
display:block;
margin:0 auto;
margin-top:5px;
padding:0;
width:90%;
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;
}

/****  "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 li a:active { color:#eeeeee;  font-weight:normal;width:100%; }
ul.topmenu li a:visited { color:#e9ed61;  font-weight:normal;width:100%; }
ul.topmenu li a:hover  {color:#336699;  font-weight:normal; width:100%; background-color: #cccccc;  }
*/

ul.topmenu li a:link, 
ul.topmenu li a:visited {
  width:99%;
  font-size:10px;font-family:verdana;text-decoration:none; color:#FFFFFF;
  border-right: 0px ridge #372F2C;font-weight:normal;
}
ul.topmenu li a:hover, 
ul.topmenu li a:active {
  width:99%; background: #cccccc
  font-size:10px;font-family:verdana;text-decoration:underline;color:#336699;
  border-right: 0px ridge #736B68;
}



/***  submain left nav LIST STYLES  ***/
/***  9px padding-left is for spacing away from left dropshadow. Did 
 width:auto, except on nav ul li, which is 100%, to force cross-browser compatibility   ***/
.submain_nav {
  display:block;clear:both;margin:0 auto; margin-top:20px; padding:0; 
  padding-left:9px; width:auto; text-align:center;text-indent:0px;
}
.submain_nav ul {
  display:block;clear:both;margin:0; padding:0;
  width:auto; height:auto;text-align:left;text-indent:0px;
}
.submain_nav ul li {
  display:block; width:100%;margin:0; padding:3px 0px 0px 0px;list-style: none; 
  border-bottom: 1px solid #7f7f7f; text-indent:2px;
  font-size:10px; color:#ffffff;
}
.submain_nav ul li a {/** border-right: 4px ridge #6498ca; **/ 
  width:auto;
}
/****  featuredservices_nav LINK STYLES  ****/
.submain_nav ul li a:link, 
.submain_nav ul li a:visited {
  display:block; width:99%;padding: 3px 0px;
  font-size:10px;font-family:verdana;text-decoration:none; color:#FFFFFF;
  border-right: 0px ridge #372F2C;font-weight:normal;
}
.submain_nav ul li a:hover, 
.submain_nav ul li a:active {
  display:block; width:99%;padding: 3px 0px; 
  background: #666666 url("/images/duoarrowsleft_blackandwhite.gif") no-repeat right 4px; 
  font-size:10px;font-family:verdana;text-decoration:underline;color:#ffffff;
  border-right: 0px ridge #736B68;
}
/* the following 3 rules are for indented submenu items, if applicable  ***/
.submain_nav ul ul li {line-height: 10px;border-bottom: 0px solid #c2bbaf;}
.submain_nav ul ul li a:link,  .submain_nav ul ul li a:visited {
color:#ffffff; text-indent:8px;font-weight:normal; border:0;color:#cccccc;}
.submain_nav ul ul li a:hover, .submain_nav ul ul li a:active {
color:#ffffff; width:100%; text-decoration:underline; }
/***  Rules for active current topic and subtopic  ***/
.current_topic {}
.current_subtopic {background: url("/images/duoarrowsleft_blackandwhite.gif") no-repeat right -16px;}
/***  ************  ***/



/***  bodylinks_column: Body columned menus  ***/
.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("/images/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("/images/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_d a:link, .sidebox_d a:visited,
.sidebox_e a:link, .sidebox_e a:visited {
color:#A99D61;font-weight:normal;
}

.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 #111111;
	color: #336699;
	font-size: 1.5em;
	font-weight:normal;
}	

h3 {
	margin:0; 
	padding:0;
	color: #336699;
	font-size: 1.5em;
	font-weight:normal;
}