body {
margin:4px 0px;
padding:0;
background: transparent url("media/gradient_tan.jpg") repeat-x left top;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
font-size:72%;
color:#000000;
}



p {margin:0;padding:0;}



/* 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/gradient_tan.jpg);
	background-image: url(../media/gradient_beige.jpg);
              background-image: url  (../media/ysfrotated.gif);
               background-image: url (../media/shelly-lg-a.gif);
	background-repeat: no-repeat;
	background-position: -5000px -5000px;}
/**** end preload images ****/

.wrap {
display:block;
margin:0 auto;
padding:0px;
width:90%;
background: #fdeccc url("media/osp_smallsolid.jpg") repeat-x top left; 
border: 1px solid #000000;
text-align:center;
}

.headrowone_outer {
display:block;
margin:0px;
padding:0px;
height:207px;
width:100%;
background: transparent url("media/ysfrotated.gif") no-repeat 95% 45px;
}

.headrowone_center {
display:block;
margin:0px;
padding:0px;
height:207px;
width:100%;
background: transparent url("rotate/rotate.php") no-repeat center bottom;
}

.headrowone_inner {
display:block;
margin:0;
padding:0;
width:100%;
height:207px;

background: transparent url("media/shelly-lg-a.gif") no-repeat 25px bottom;
}

.banner_mainheader {
display:block;
margin:0 auto;
padding:0;
height:72px;
width:auto;
text-align:center;
}


.banner_subheader {
display:block;
margin:0;
padding:0;
width:auto;
height:72px;
text-align:center;
color: #cc9966;
font-weight:bold;
}


.headrow_two {
display:block;
float:left;
margin:0;
padding:0;
width:100%;
background-color: #2B2B4C;
border-top:1px solid black;
border-bottom:1px solid black;
}

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

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

.rowtwo_right {
float:right;
margin:0;
padding:0;
width:23%;
text-align:center;}



.bodywrap, .mainbody {
display:block;
margin:0;
padding:0;
width:100%;
background-color: #7272A4;}



/** LEFT COLUMN OR mainsidenav_column if used on right ***/
.left_column {
display:inline;
float:left;
margin:0 auto;
padding:0;
padding-bottom:2px /** for links **/;
width:22%;
text-align:center;
}


.left_content {
margin:0 auto;
padding:0;
width:96%;
text-align:center;
}


/** THIS TEMPLATE IS TRICKED FOR FULL HEIGHT LEFT BACKGROUND COLOR; 
DONE BY PUTTING THE CENTER AND RIGHT COLUMNS INTO ONE FLOAT:RIGHT BOX  
TO CHANGE FROM 3 TO 2 COLUMNS, EASY, BUT IMPORTANT TO LEAVE CSS SHEET 
ALONE:  INSTEAD, ON YOUR PARTICULAR WEB PAGE, LOOK AT THE RIGHT_COLUMN 
DIV, <div class="right_column">, AND change it to look like this: 
<div style="display:none;" class="right_column"> .  Now, one more change, 
Center Column, change <div class=center3column> to read <div=class="center2column">.
DONE DEAL! ***/

/** THIS IS THE CENTER/RIGHT COLUMN HOLDER, LEAVE THIS AS-IS **/
.center_and_right_column_wrapper {
float:right;
margin:0;
padding:0;
width:77.8%;
background: #ffffff url("../media/gradient_beige.jpg") repeat-x top left; 
border-left:1px solid #000000;
text-align:center;
}

/** THIS IS FOR CENTER MAIN COLUMN OF 3 COLUMN LAYOUT ***/
.center3column  {
float:left;
margin:0;
padding:0;
width:70.3%;
text-align:center;
}


/** center column inner, holds content **/
.center_content {
margin:10px auto;
padding:0;
width:96%;
text-align:left;
}


.center2column {
margin:0 auto;
text-align:center;
 }


/** right column ***/
.right_column {
overflow:hidden;
float:left;
margin:0 auto;
padding:0;
width:28.5%;
text-align:center;}


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




.footer_top {display:block;clear:both;margin:0px;padding:0px;
width:100%;background-color: #2B2B4C;border-top:1px solid black;
text-align:center;color:#cc9966;
}
.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:#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: inherit;
}

/***   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 {
margin:0;
margin-top:15px;
padding:0;
border:0;
width:99%;
}

.searchtable {
margin:0 auto;
padding:0;
border:0;
text-align:center;
/*** keeps boxes open  ****/
width:99%;
}

.searchbox1 {
margin:0;
padding:0;
background-color: #D5DDE8;
text-align: left;
color: #000000;
width:auto;

text-align:left;}

.searchbox2 {
margin:0;
padding:0;
background-color: #D5DDE8;
text-align: left;
color: #000000;
width:auto;

}

.searchbutton {
margin:0;
padding:0;
width:auto;
font-size:inherit;
border:1px ridge #ffcc33;
background-color:#333366;
color: #ffffff;
}



.sideboxes {
margin:15px 0px;padding-bottom:2px;text-align:center;}
.sideboxes img {display:block;margin:15px auto;border-style:none;}



/** OKAY, NOW IT'S TIME TO DO ALL OF THE LINK STYLES **/
/** I WISH THERE WAS A BETTER WAY, JUST THAT ONE HAS TO 
USE HIS HEAD NOT TO LET THESE STYLES INTERFERE WITH THE 
ALREADY STYLED FLYOUT NAV, THE RIGHT HEADLINES AND 
FEATURED SERVICE NAV.  WHAT THIS MEANS IS THAT ONE HAS 
TO BE CAREFUL.  ******/

/** FOR THE LINK IN THE HEADER WRAP **/
.headrowone_outer a, .headrowone_outer a:link, .headrowone_outer a:visited
{color: #fdeccc; text-decoration:none; border-bottom:1px dashed #FFFFFF;}
.headrowone_outer a:hover, .headrowone_outer a:active
{color: #ffffff; text-decoration:none; border-bottom:0px dashed #FFFFFF;}

/** FOR THE LINKS IN THE SIDEBOXES **/
.sideboxes a:link, .sideboxes a:visited
{color: #ffcc66; text-decoration:none; border-bottom:0px dashed #FFFFFF;}
.sideboxes a:hover, .sideboxes a:active
{color: #ffffff; text-decoration:none; border-bottom:0px dashed #FFFFFF;}
/** SIDEBOX HAS AN IMAGE, SO LEAVE BORDERS ABOVE TURNED OFF **/
.sideboxes img, .sideboxes a img  {}


/** LINK STYLES FOR CENTER CONTENT AREA, BUT WILL 
HAVE FINE-TUNE ANY OTHER INSTALLED PRESTYLED ITEMS ***/
.center_content a, .center_content a:link, .center_content a:visited
{color: #990000; text-decoration:none; border-bottom:1px dashed #000000;}
.center_content a:hover, .center_content a:active
{color: #e5b555; text-decoration:none; border-bottom:0px dashed #FFFFFF;}
/** TO FIX ODD ITEMS **/
.center_content .featuredservices_nav a,
.center_content .relatedlinks_nav a {border-style:none;}



/****  Featured Services Vertical  ****/
.featuredservices_container {
display:block;margin:0 auto; margin-top:15px; margin-bottom:15px;padding: 0; 
padding-bottom:5px;width:auto; text-align:center;}

/***  featuredservices_nav LIST STYLES  ***/
.featuredservices_nav {
display:block;clear:both;margin:0 auto;padding:0;width:100%;text-align:center;text-indent:0px;}

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

.featuredservices_nav ul li {
display:block; width:100%; margin:0; margin:4px 0px;padding:0;list-style: none; border-bottom: 0px solid #7f7f7f; text-indent:14px; line-height:13px;/*** <<height of image  **/
}

/****  featuredservices_nav LINK STYLES  ****/
.featuredservices_nav ul li a:link, 
.featuredservices_nav ul li a:visited {
display:block; width:100%; 
background: url("../media/duo-octarrowright-purple.gif") no-repeat 0px 0px;
font-weight:normal;font-family:verdana;text-decoration:none; 
color:#000000;
}

.featuredservices_nav ul li a:hover, 
.featuredservices_nav ul li a:active {
display:block; width:100%;
background: url("../media/duo-octarrowright-purple.gif") no-repeat 1px -47px; 
font-weight:normal;font-family:verdana; 
text-decoration:underline;color:#333366;
}
/* the following 3 rules are for a featuredservices_nav indented submenu
in case you decide to add later. See free template called "a bit modern".
  ***/
.featuredservices_nav ul ul li {
line-height: 10px;	border-bottom: none}
.featuredservices_nav ul ul li a:link,  
.featuredservices_nav ul ul li a:visited {
color:#cccccc; text-indent:10px;}
.featuredservices_nav ul ul li a:hover, 
.featuredservices_nav ul ul li a:active {
color:#cccccc; text-indent:10px;}


/****  RELATED LINKS Vertical  ****/
.relatedlinks_container {display:block;margin:0; margin-top:5px; padding: 0; 
padding-bottom:5px;width:auto;text-align:center;}
.relatedlinks_nav {
display:block;clear:both;margin:0 auto;padding:0;width:100%;
text-align:center;text-indent:0px;}
.relatedlinks_nav ul {
display:block;clear:both;margin:0; padding:0; text-align:left;text-indent:0px;}
.relatedlinks_nav ul li {
display:block; width:100%; margin:4px 0px; padding:0;list-style: none; 
border-bottom: 0px solid #7f7f7f; text-indent:14px;
line-height:15px; /*** <<height of image  **/}
/****   RELATED LINKS LINK STYLES  ****/
.relatedlinks_nav ul li a:link, 
.relatedlinks_nav ul li a:visited {
display:block;width:100%;
background: url("../media/duo-arrowdown-navytall.gif") no-repeat 0px 0px;
font-weight:normal;font-family:verdana;text-decoration:none; 
color:#000000;}
.relatedlinks_nav ul li a:hover, 
.relatedlinks_nav ul li a:active {
display:block;width:100%;
background: url("../media/duo-arrowdown-navytall.gif") no-repeat 1px -48px; 
font-weight:normal;font-family:verdana;
text-decoration:underline;color:#333366;}



.bookwinners_nav {margin:0 auto; text-align:center; }
.bookwinners_nav ul {margin:5px 0px 0px;padding:0;list-style:none;text-align:left;}
.bookwinners_nav ul li {margin:4px 0px; font-weight:normal;font-size:95%;}







/** FOOTER STYLING AND LINK STYLES ****/
/****  "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 a:hover, .footer_top ul.basemenu li a:active  {
color:#cc9966;background-color: #333366;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;}



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


h1, h2, h3, h4, h5, h6, h7 {margin:0;padding:0;}

.banner_mainheader h1 {padding-top:25px;}
.banner_subheader h2 {margin:0;padding:0;padding-top:18px;}

h1 {display:block;
margin:0; padding:0; font-size: 2.9em;
font-weight: bold; color: #cc9966;
filter:dropshadow(color=#000000, offx=1, offy=1, positive=true);}

.h1b {display:block;margin:0; padding:0;font-size: 1.2em;
font-weight: bold;	color: #990000;	filter:dropshadow(color=#000000, offx=1, offy=1, positive=true);	text-indent:150px;}


h2 {display:block;margin:0; padding:0;padding-top:5px;font-size: 1.75em;font-weight: normal;
color: #990000;filter:dropshadow(color=#C2BBAF, offx=2, offy=2, positive=true);}


h3 {margin:0 auto;background-color: #7272a4;border:1px solid #c2bbaf;width:auto;
border-right:20px solid #333366;font-size:1.6em;font-weight:bold;color:#000000;}


h4 {background-color: #7272a4;border: 1px solid #333366;
border-left: 10px solid #cc9966;width:auto;font-size: 1.10em;
font-weight:bold;text-align:left;text-indent:5px;color:#ffffff;}

h5{margin:0;padding:0;font-size:1.2em;color: #CC583F;}

h6{margin:0;padding:0;font-size:1.1em;color: ##330033;}

/** any internal css on next line **/

/** Caution: Put position:relative on sfnav wrap div ***/
/** Caution: overflow:hidden causes problems (of coarse) **/
/** Caution: External Script: Wont retract if not linked **/
/** Caution: Clear:left on item after this nav **/
/** sfnav capable/ready for 4 level flyouts, just add the html **/
/** http://www.htmldog.com/articles/suckerfish/dropdowns/ **/
/** height on "li" and "a" will fix width:auto **/


.sfvert #ulone {font-size:inherit;}
.sfvert ul, .sfvert ul li, .sfvert li {margin:0;padding:0;border-style:none;border:0;}
/** Original was Contrary to Liquidity, so .... **/

.sfvert { /** container used to position **/
position:relative;/** wysiwyg dw fix **/
display:block; margin:0 auto;
margin-top:10px;margin-bottom:2px;
WIDTH:96%;text-align:center;/** Changes >> ***/ }

.sfvert #ulone, .sfvert #ulone ul { /* all lists */	
padding:0;margin:0;list-style:none;
float:left;width:auto;text-align:left;
/** Changes >> ***/ }

.sfvert #ulone {width:100%;/** Changes >> ***/ }

.sfvert #ulone li ul { /* second-level lists flyout position */
position:absolute;left:-999em;margin-top:-1.85em;
margin-left:100%;width:auto;background-color:#ffffff;
border:1px solid #000000;/** Changes >> ***/ }

.sfvert #ulone li ul ul { /* third-and-above-level lists */
left:-999em; /** Changes >> ***/ }


.sfvert #ulone li { /* all list items */
/** no side pad/margin due to full width needed on main list **/
position:relative;display:block;
float:left;width:15em;margin:0px;}

.sfvert #ulone .lione { /* fix main li  */
/** no side pad/margin due to full width needed on main list **/
position:relative;/** wysiwyg fix **/
width:100%;/** Changes >> ***/ }


.sfvert #ulone li a {
/** ALL LINKS; WILL FIX MAIN BUTTONS LATER **/
position:relative;/** wysiwyg fix **/
display:block;color:#000000;width:auto;
font-weight:normal;text-decoration:none;
padding:2px;/** Changes >> ***/ }

.sfvert #ulone li a:hover { 
/** ALL LINKS HOVER; WILL FIX MAIN BUTTONS LATER **/
background-color:#eaeaea;color:#000000;
/** Changes >> ***/ }

.sfvert #ulone .aone {/** MAIN BUTTON LINKS ***/
position:relative;/** wysiwyg fix **/
font-weight:bold;padding:4px 0px 4px 2px;color:#ffffff;
/** KILLED Button-Look: 
background-color:#333366;
border:1px ridge #e4a84b;
font-weight:normal; margin:0; **/
/** Changes >> ***/ }

.sfvert #ulone .aone:hover {/** MAIN BUTTONs LINK HOVER ***/
color: #fdeccc;background-color:transparent;
/** KILL BUTTON-LOOK border-bottom:0px solid #990000;
border-right:0px solid #990000;margin-top:1px;margin-left:1px;  **/ }

.sfvert #ulone li:hover ul ul, .sfvert #ulone li:hover ul ul ul, 
.sfvert #ulone li.sfhover ul ul, .sfvert #ulone li.sfhover ul ul ul {
left:-999em;/** Changes >> ***/ }

.sfvert #ulone li:hover ul, .sfvert #ulone li li:hover ul, .sfvert #ulone li li li:hover ul, .sfvert #ulone li.sfhover ul, .sfvert #ulone li li.sfhover ul, .sfvert #ulone li li li.sfhover ul {/* lists nested under hovered list items */ left:auto; /** Changes >> ***/ }
.subscribe_one {/*** MUST CLEAR:LEFT ON ITEM AFTER SFNAV **/  
clear:left; /*** changes >> **/ }
/***  end  ***/







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








/*************  end  *******************/