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



body {
margin:2px 0px;
padding:0;
background-color: #f4f4f4;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
font-size: .60em;
color:#000000;
}

/************  BODY AND HEAD  **********/

* {margin:0;padding:0;}

.img {margin:0; margin-right:5px; padding:0; border:0;}

p {}




h1 {
margin:0; padding:0; padding-top:5px; line-height:29px; font-size: 25px; font-weight: bold;color: #FFCC99; 
width:100%;filter:dropshadow(color=#658AB7, offx=1, offy=1, positive=true);text-indent:310px;}

h2 {margin:0; padding:0;padding-top:5px;font-size: 1.35em;font-weight: bold;color: #000000;
width:100%;filter:dropshadow(color=#C2BBAF, offx=2, offy=2, positive=true);}

h3 {	
margin:0; padding:0;background-color:#4C5F8F;border-bottom: 1px solid #000000;
border-top: 1px solid #000000;border-right: 20px double #FFCC99;color: #FFCC99;
font-size: 1.25em;font-weight:normal;}

h4 {margin:0;padding:0;font-size:.8em;font-weight:bold;color: #000000;}


.wrap {
display:block;
margin:0 auto;
padding:0;
width:100%;
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/button-yellow.gif");
	background-image: url("media/doa_left.jpg");
	background-image: url("media/goldbird.jpg");
	background-image: url("media/octarrow_wht.gif");	
	background-image: url("media/octarrow_yel.gif");
	background-image: url("media/tick_blue3.gif");
	background-image: url("media/tickon_blue3.gif");
	background-repeat: no-repeat;
	background-position: -5000px -5000px;}
/**** end preload images ****/


/***  RELOAD IMAGES AGAIN, BY PUTTING IMAGES 
IN THIS CLASS,  AT THE BASE OF THE HTML  *******/
.hiddenpic {display:none;}
/**** end preload images ****/
.hide {
display:none;
}

.headrow_one {
display:block;
float:left;
margin:0;
padding:0;
width:100%;
height:170px;
background: #333366 url("media/top-bg-banner.jpg") no-repeat;
}

.rowone_left {
float:left;
margin:0;
padding:0;
width:77.5%;
height:72px;
text-align:left;
}

.rowone_right {
float:right;
margin:0;
padding:0;
padding-top:25px;
width:22%;
text-align:center;
filter:dropshadow(color=#658AB7, offx=1, offy=1, positive=true);
color:#FFCC99;
}
.headrow_two {
display:block;
float:left;
margin:0;
padding:0;
width:100%;
height:auto;
background-color: #4C5F8F;
border-top:1px solid black;
border-bottom:1px solid black;
}


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


.mainbody {
margin:0;
padding:0;
}

.left {
float:left;
margin:0 auto;
padding:0;
width:22%;
background-color: #333366;
text-align:center;
}

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

/****  "center_content"  ****/
.center_content {
margin:0 auto;padding:0;width:96%;background-color:transparent;text-align:left;}
/****  "center_content" link styles   ****/
.center_content a:link, .center_content a:visited {
color:#336699;text-decoration:none; border-bottom:1px dashed #000000;}
.center_content a:hover, .center_content a:active  {
color:#000000;background-color: #eaeaea;border-bottom:1px dashed #336699;}


.right {
overflow:auto;
float:right;
margin:0;
padding:0;
width:22%;
background-color:#333366;
text-align:center;
}

.footer_top {
display:block;
clear:both;
margin:0px;
padding:0px;
width:100%;
background-color: #4C5F8F;
border-top:1px solid black;
text-align:center;
color:#FFCC99;
}
.footer_bottom {
display:block;
clear:both;
margin:0px;
padding:0px;
width:100%;
background-color: #333366;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:center;
color:#FFCC99;
}

/****************/
/* leftnav The TicMenu */
/****************/

#ticmenu {
margin:0 auto;
margin-top:15px;
width: 90%;
text-align:left;}

#ticmenu ul {	
list-style: none;
width: 100%;
}	

#ticmenu li {
padding-top:4px;
width:auto;
text-indent:15px;
}

#ticmenu li a {
font-weight: bold;
height:15px;
padding-top:3px;
text-decoration: none;
color: #505050;
display: block;
border-left: 4px solid #cccccc;
width:auto;
background: #f4f4f4 url(media/duotickon_blue3.gif) no-repeat 0px 4px;
}	
	
#ticmenu li a:hover {
color: #333366;
border-left: 4px solid #658AB7;
width:auto;
background: #eaeaea url(media/duotickon_blue3.gif) no-repeat 0px -16px;}
/*****************************************/


/****  RightTop FeaturedServices Menu  ****/

.featuredservices_container {
margin:0 auto;
margin-top:15px;
width: 90%;
text-align:left;
}

.featuredservices_nav ul {	
list-style: none;
width: 100%;
}	

.featuredservices_nav li {
margin-top: 4px;
text-indent:15px;
width:auto;
}

.featuredservices_nav li a {
font-weight: bold;
height: 15px;
padding-top:3px;
text-decoration: none;
color: #505050;
display: block;
border-left: 4px solid #cccccc;
width:auto;
background: #f4f4f4 url(media/duoarrowright_lightblu.gif) no-repeat 0px 3px;
}	
	
.featuredservices_nav li a:hover {
color: #333366;
border-left: 4px solid #658AB7;
width:auto;
background: #eaeaea url(media/duoarrowright_lightblu.gif) no-repeat 0px -23px;}
/***  end  ***/




/****  RightBottom Headlines Menu  ****/

.headlines {
margin:0 auto;
margin-top:15px;
width: 90%;
text-align:left;
}

.headlines ul {	
list-style: outside url("media/button-yellow.gif");
width: 100%;
}	

.headlines li {
margin:5px 0px 5px 15px;
width:auto;
}

.headlines li a {
font-weight: normal;
text-decoration: none;
color: #ffffff;
display: block;
width:auto;
height:auto;
}	
	
.headlines li a:hover {
color: #658AB7;
width:auto;}
/***  end  ***/



/****  "basemenu" HORIZONTAL   ****/
.basemenu {display:block; margin:0 auto;  padding:0; width:auto; text-align:center; color:#ffffff;}
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:20%;}
/****  "basemenu" menu link styles   ****/
ul.basemenu li a:link, ul.basemenu li a:visited {color:#FFCC99;text-decoration:none; border-bottom:1px dashed #ffffff;}
ul.basemenu li a:hover, ul.basemenu li a:active  {color:#ffffff;background-color: #4B7CAD;border-bottom:1px dashed #FFCC99;}