/*****   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 
with, 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:4px 0px;
padding:0;
background: transparent url("../media/gradient_green.jpg") repeat-x left top;
background-color:#203923;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color:#fff;
}

p {
margin:0;
padding:5px;
font-stretch:semi-expanded;
}

/* 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/osp_smallsolid.jpg);
	background-image: url(./media/duo-arrowdown-navy.gif);
	background-image: url(./media/duo-octarrowright-purple.gif);
	background-image: url(./media/mcmillan.jpg);
	background-image: url(./media/ccoc.jpg);
	background-image: url(./inc/images/PCwood01a.jpg);
	background-image: url();
	background-image: url(./media/gradient_beige.jpg);
	background-image: url(./media/stucco-bigtran.gif);
	background-image: url(./media/PSLogo7.jpg);
	background-repeat: no-repeat;
	background-position: -5000px -5000px;
	}
/**** end preload images ****/

.wrap {
display:block;
margin:0 auto;
padding:0;
width:98%;
background-color:#203923;
text-align:center;
}

/*** Main header ***/
.headrow_one {
display:block;
float:left;
margin:0;
padding:0;
width:100%;
height:186px;
background: transparent url("../media/osp_smallsolid.jpg") left repeat-x top;
}
.rowone_left {
/*float:left;*/
margin:0;
padding-top:110px ;
width:100%;
height:100px;
background: transparent url("../media/PCLogo7.jpg") center no-repeat;
}

.rowone_right {
float:right;
margin:0;
padding:40px;
width:60%;
height:72px;
text-align:left;
color: #cc9966;
font-size: 1em;
font-weight:bold;
}

/*** Main part of page ***/
.mainbody {
margin:0;
padding:0 0 10 0;
}
.mainbody a:link, .mainbody a:visited {
color:#cc9966;
text-decoration:none; 
border-bottom:1px dashed #000000;
}

.mainbody a:hover, .mainbody a:active  {
color:#000000;
background-color: #eaeaea;
border-bottom:1px dashed #203923;
}


.left {
float:left;
margin:0 auto;
padding:0;
width:40%;

background-color: #203923;
text-align:left;
}
.left_content {
margin:0 auto;

padding:0;
width:98%;
text-align:left;
z-index:10;
}
.center {
margin:0 auto;
padding:5px 0 0 0;
width:65%;
text-align:center;
}
.center_content {
float:right;
vertical-align:middle;
margin:0 auto;
padding:25px 15px 0 0;
width:98%;
background-color:#203923;
text-align:left;
z-index:20;
}
.center_content a:link, .center_content a:visited {
color:#cc9966;
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 #203923;
}

.lower {
float:left;
margin:0 auto;
padding:25px 0 0 0;
width:98%;
text-align:center;
}
.lower_content {
margin:0 auto;
padding:0;
width:98%;
background-color:#203923;
text-align:left;
}
.footer_top {
display:block;
clear:both;
margin:0px;
padding:0px;
width:100%;
background-color: #002211;
border-top:1px solid black;
text-align:center;color:#cc9966;
}
.footer_bottom {
display:block;
clear:both;
margin:0px;
padding:0px;
width:100%;
background-color: #203923;
border-top:1px solid black;
border-bottom:1px solid black;
text-align:center;
color:#cc9966;
}

/***  BEGIN FORMS STYLING  ***/
form {
margin:0 auto;
padding:0;
text-align:center;
}

/***  This is for the Google language translation box  ***/
.pullmenus {
padding:0;
margin:0;
background-color: #ffffff;
text-align: left;
color: #000000;
width:95%;
font-size: .65em;
}

/***   Google Search Box  ****/
/**  searchbox_wrap used for margin-top 
fix for table margin-top prob , and 
problem that 100% width does not work, 
borders break layout  **/

.searchbox_wrap {
position:relative;
margin:5px 0 0 20px;
padding:0;
border:0;
width:99%;
float:left;
}
.searchtable {
margin:0 auto;
padding:0;
border:0;
text-align:center;
/*** keeps boxes open  ****/
width:99%;
}
.searchbox1 {
margin:0;
padding:0;
background-color: #E4FFC7;
text-align: left;
color: #000000;
width:auto;
font-size:.80em;
}
.searchbox2 {
margin:0;
padding:0;
background-color: #E4FFC7;
text-align: left;
color: #000000;
width:auto;
font-size:.80em;
}
.searchbutton {
margin:0;
padding:0;
width:auto;
font-size:.80em;
border:1px ridge #ffcc33;
background-color:#5b6332;
color: #ffffff;
}

/**** "basemenu" HORIZONTAL ****/
.footer_top .basemenu {
display:block; 
margin:0 auto;  
padding:0; 
width:auto; 
text-align:center;
}
.footer_top ul.basemenu {
display:block; 
margin:0; 
padding:0; 
padding-bottom:2px; 
list-style: none inside; 
text-align: center;
}
.footer_top ul.basemenu li {
margin:0; 
padding:0; 
display:inline;
width:25%;
color:#cc9966;
}
/****  "basemenu" menu link styles   ****/
.footer_top ul.basemenu li a:link, .footer_top ul.basemenu li a:visited {
color:#ffffff;
text-decoration:none;
border-bottom:1px dashed #cc9966;
}
.footer_top ul.basemenu li.basemenu a:hover, .footer_top ul.basemenu li.basemenu a:active  {
color:#cc9966;
background-color: #203923;
border-bottom:1px dashed #ffffff;
}
/****  "basemenu" menu link styles   ****/
.footer_bottom {padding-bottom:2px}
.footer_bottom a:link, .footer_bottom a:visited {
color:#ffffff;
text-decoration:none; 
border-bottom:1px dashed #cc9966;
}
.footer_bottom a:hover, footer_bottom a:active  {
color:#cc9966;
border-bottom:1px dashed #ffffff;
}

/*** Navigation on left side of page ***/
/*** ntfly-menu from -Home- container below  ****/
/*** ntfly-menu_container to center and pad the menu  ****/
.ntmenu_container {
margin:0 auto;
padding:0;
padding-top:5px;
width:225px;
}

.ntmenu_container LI {
	FLOAT: left;
	padding:10px;
	list-style-type:none;
}

/***  Levels: Styles and Positioning  *****/
.toplevel {
	FONT-SIZE: .90em; 
	WIDTH: 100%; 
	COLOR: #FFFFFF; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

/*****   ITEM STYLES   *****/
/***  Align all text left or center here  ***/
#nav {
	margin:0;
	padding-top:0px; 
	WIDTH: 100%;
}

/***  first level background image button  
      and padding above below buttons ***/
#nav .toplevel  {
padding-top:0px; /*** padding here is above below buttons ***/
padding-bottom:0px; /*** padding here is above below buttons ***/
background-color:#203923;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:.95em;
}

#nav LI {
	FLOAT: left;
	padding:10px;
	list-style-type:none;
}

#nav LI A {
	DISPLAY: block; 
	margin:0; 
	padding:10; 
	TEXT-DECORATION: none;
}

/*** Main List Hover (gold) ****/
#nav LI A:hover {
	COLOR: #cc9966; 
	background-color:#002211;
/** any border here, effects all levels  **/
}

/* Fix IE. Hide from IE Mac \*/
 html #nav li { float:left; height:1%; }
 html #nav li a { height:1%; }
/*** END Navigation on left side of page ***/

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

h1 {
	margin:0; 
	padding:0;
	padding-top:22px;
	font-size: 1.5em;
	font-weight: bold;
	color: #000000;
	width:100%;
	}

h2 {
text-align:center;
	margin:0;
	padding:0;
	padding-top:5px;
	font-size: 1.1em;
	color: #cc9966;
	width:100%;
}

h3 {
	margin:0; 
	padding:0;
	color: #cc9966;
	padding-top:5px;
	font-size: 1.15em;
	width:100%;	
	}

h4 {
	margin:0; 
	padding:0;
	background-color: #59805D;
	border-top: 2px solid #203923;
	border-left: 10px solid #cc9966;
	border-bottom: 2px ridge #203923;
	width:auto;
	color:#ffffff;
	font-size: 1.10em;
	font-weight:bold;
	text-align:left;
	text-indent:5px;
}

img {
border:0;
}

.img {margin-right:5px}
/*************  end  *******************/

002211 dark green

203923 med green

59805D

5b6332

E4FFC7 pale green

CC9966 gold-tan