.floatRight
{
	float:right;
	margin-left:10px;
}

.quote
{
	font-style:italic;
	margin-left:20px;
	margin-bottom:10px;
}
.quoteCite
{
	font-size:0.8em;
	font-style:normal;
}

img.thinFrame
{
	border:1px solid #000000;
}

table.mainMenu a { display: block; text-align:center }
td.mainMenu { border-right:2px #000000 solid; padding-left:8px; padding-right:10px }
div.mainMenu a {
color: #565A81; 
background: #ffffff; 
text-decoration:none; 
/* We can't use font-size 1.1em because smf's sets body font-size: small (so our font ends up
1.1x larger than small instead of medium).  So I tried using font-size: medium , which was fine
until I found (after much painful experimenting) that "medium" means a larger font if 
<!DOCTYPE is set to HTML 4.01 instead of XHTML 1.0, as it is on all the oscommerce pages.
So I'm giving up and using an absolute size of 16px even though I don't like messing things
up for those who want to set larger/smaller fonts.  Presumably the newer browsers allow the
user to override things like absolute sizes or just zoom the whole page. */
font-size:16px;
font-weight:bold;
line-height:36px; 
font-family: Tahoma, verdana, sans-serif;
padding: 2px 5px;
}
div.mainMenu a:link { color: #565A81; background: #ffffff; text-decoration:none }
div.mainMenu a:active { color: #000000; background: #ffffff; text-decoration:none }
div.mainMenu a:visited { color: #565A81; background: #ffffff; text-decoration:none }
div.mainMenu a:hover { color: #eeeeee; background: #565A81; text-decoration:none }

div.defaultBody {
	/* Don't use font-size: 0.9em or the default text gets very small on IE6 */
  font-family: Arial, Helvetica, sans-serif;
}

.siteFooter {
	font-size:0.8em;
	color:#666;
	margin-top:15px;
}
.siteFooter a {
	text-decoration:none;
	color:#8F6618;
}
.siteFooter a:hover {
	text-decoration:underline;
}

div.boxed {
	background-color: #EFECE2;
	border: 1px solid #777;
	padding: 0.5em;
	white-space: normal;
	margin-left: 2em;
	margin-right: 2em;
	margin-top:1em;
	margin-bottom:1em;
	/* Can't put hanging indent here because it affects lines after <br /> */
}
.indented {
	display:block;
	margin-left: 2em;
}

.singleSpacedParagraph {
	margin-top: 0px;
	margin-bottom: 0px;
}
.featureTitle {
	color: #565A81; font-family:Verdana, Geneva, sans-serif; font-size:1.5em; font-weight:bold;
}

.featureSection {
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:1.3em;
	color:#8C7351;
	margin-top:15px;
	margin-bottom:15px;
}


table.itemList a { display: block; text-align:center; padding:0px; margin:0px }
td.itemList {
	/* Padding creates white space between each td cell.  Margin seems to have no effect. */
	padding-top:3px; padding-bottom:3px; margin:0px 
}
div.itemList a {
	padding:8px; /* Adds extra colored space around the text */
	color: #333333; 
	background: #ffffff; 
	text-decoration:none; 
	font-family: Tahoma, verdana, sans-serif;
}
span.itemListTitle {
	font-weight: bold;
}
div.itemList a:link { color: #333333; background: #C4C7EC; text-decoration:none }
div.itemList a:active { color: #000000; background: #C4C7EC; text-decoration:none }
div.itemList a:visited { color: #333333; background: #C4C7EC; text-decoration:none }
div.itemList a:hover { color: #000000; background: #E4E7FF; text-decoration:none }

/* Code below is for creating rounded corners without images */
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh{font-size:1px; overflow:hidden; display:block;}
.b1h {height:1px; background:#C5C6D8; margin:0 5px;}
.b2h, .b2bh {height:1px; background:#FFFFFF; border-right:2px solid #C5C6D8; border-left:2px solid #7777DF; margin:0 3px;}
.b3h, .b3bh {height:1px; background:#FFFFFF; border-right:1px solid #C5C6D8; border-left:1px solid #7777DF; margin:0 2px;}
.b4h, .b4bh {height:2px; background:#FFFFFF; border-right:1px solid #C5C6D8; border-left:1px solid #7777DF; margin:0 1px;}
.b2bh, .b3bh, .b4bh {background: #FFFFFF;}

.roundRectTitleL{ background-image: url(../images/template/titleBarL2.gif); background-position:0 0; background-repeat:no-repeat;
  height:32px; width:15px; border-bottom:1px solid #C5C6D8; padding:0px; margin:0px}
.roundRectTitleM{ background-image: url(../images/template/titleBarM2.gif); background-position:0 0; background-repeat:repeat-x;
  height:32px; /* decrease height to allow for padding */
  border-bottom:1px solid #C5C6D8;
color:#565A81; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:15px;
padding-left:0px; padding-right:0px; padding-bottom:0px; padding-top:0px; overflow:hidden; margin:0px}
.roundRectTitleR{ background-image: url(../images/template/titleBarR2.gif); background-position:0 0; background-repeat:no-repeat; 
  height:32px; width:15px; border-bottom:1px solid #C5C6D8; padding:0px; margin:0px}
/*.roundRectHead {background: #94ADD8; border-right:1px solid #000000; border-left:1px solid #000000; border-bottom:1px solid #000000; 
color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:1.1em;
padding-left:6px; padding-right:6px; padding-bottom:3px}*/
.roundRectContentL {padding-left:12px; padding-right:5px; padding-top:12px; padding-bottom:12px; vertical-align:text-top; border-left:1px solid #C5C6D8; color:#303247; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:0.95em; text-align:right;}
.roundRectContentR {padding-right:12px; padding-top:12px; padding-bottom:12px; border-right:1px solid #C5C6D8; color:#303247; font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:normal; font-size:0.95em; text-align:left}
.roundRectContent1 {background: #ffffff;}
.roundRectContent2 {background: #EDF3FE;}

.expandToFit {
	/* Expand to fit anything floating inside this container.
	width:100% needed for IE6 */
	overflow:auto;
	width: 100%;
}

div.WindowBorder {
	display:block;
	position:relative;
	width:100%; /* Without this, ie6 won't display the right border image.  It isn't shown anywhere.  Width:100% doesn't seem to be needed in other elements, but adding it just in case. */
	padding:0px;
	margin:0px;
	float:left; /* float: left makes all these nested divs expand vertically to the same height.  We could probably also use the trick used in the expandToFit style */
}
div.WindowContent {
	/* float:left; Don't float or the width is collapsed to the width of the longest line of text.  Instead, use overflow:auto to prevent collapsing shorter than floated elements. Don't use width:100% or IE6 pushes the box too big due to padding. */
	overflow:auto;
	color:#565A81;
	padding-top:0px;
	padding-right:20px;
	padding-bottom:20px;
	padding-left:20px;
	margin:0px;
	font-size:16px;
}
div.WindowTitle {
  font-weight:bold; font-size:16px;
	height:34px;
	line-height:34px;
	margin:0px; margin-bottom:12px;
	padding:0px;
	text-align:center;
}

/* White window with title, rounded corners, and drop shadow */
div.WhiteWindowBorderTop { background:url(/images/backgrounds/WhiteWindow/Top.png) no-repeat left top; }
div.WhiteWindowBorderTopRight { background:url(/images/backgrounds/WhiteWindow/TopRight.png) no-repeat right top; }
div.WhiteWindowBorderLeft {	background:#fff url(/images/backgrounds/WhiteWindow/Left.png) repeat-y left top; }
div.WhiteWindowBorderRight { background:url(/images/backgrounds/WhiteWindow/Right.png) repeat-y right top; }
div.WhiteWindowBorderBottom {	background:url(/images/backgrounds/WhiteWindow/Bottom.png) no-repeat left bottom; }
div.WhiteWindowBorderBottomRight { background:url(/images/backgrounds/WhiteWindow/BottomRight.png) no-repeat right bottom; }
div.WhiteWindowContent { }
div.WhiteWindowTitle { }

div.ShortSilverPanelBorderTop { background:url(/images/backgrounds/ShortSilverPanel/Top.png) no-repeat left top; }
div.ShortSilverPanelBorderTopRight { background:url(/images/backgrounds/ShortSilverPanel/TopRight.png) no-repeat right top; }
div.ShortSilverPanelBorderLeft {	background:#fff url(/images/backgrounds/ShortSilverPanel/Left.png) repeat-y left top; }
div.ShortSilverPanelBorderRight { background:url(/images/backgrounds/ShortSilverPanel/Right.png) repeat-y right top; }
div.ShortSilverPanelBorderBottom {	background:url(/images/backgrounds/ShortSilverPanel/Bottom.png) no-repeat left bottom; }
div.ShortSilverPanelBorderBottomRight { background:url(/images/backgrounds/ShortSilverPanel/BottomRight.png) no-repeat right bottom; }
div.ShortSilverPanelContent { }
div.ShortSilverPanelTitle {
	font-size:18px;
	line-height:auto;
	padding-left:17px; padding-right:17px;
	text-align:left;
	margin-top:4px; margin-bottom:0px; margin-left:0px; margin-right:0px;
}

/* Silver panel with rounded corners and drop shadow */
div.SilverPanelBorderTop { background:url(/images/backgrounds/SilverPanel/Top.png) no-repeat left top; }
div.SilverPanelBorderTopRight {	background:url(/images/backgrounds/SilverPanel/TopRight.png) no-repeat right top; }
div.SilverPanelBorderLeft {	background:#fff url(/images/backgrounds/SilverPanel/Left.png) repeat-y left top; }
div.SilverPanelBorderRight { background:url(/images/backgrounds/SilverPanel/Right.png) repeat-y right top; }
div.SilverPanelBorderBottom {	background:url(/images/backgrounds/SilverPanel/Bottom.png) no-repeat left bottom; }
div.SilverPanelBorderBottomRight { background:url(/images/backgrounds/SilverPanel/BottomRight.png) no-repeat right bottom; }
div.SilverPanelContent {
	/*padding-bottom:10px;*/
}
div.SilverPanelTitle {
  font-size:18px;
	line-height:auto;
	width:100%; margin-top:4px; margin-bottom:8px; margin-left:0px; margin-right:0px;
}

div.SilverPanelLearnMoreSandbag {
	margin:0px; height:36px; width:100%;
}
div.SilverPanelLearnMore {
	position:absolute; left:12px; bottom:13px; height:26px;
}

/* One-line silver horizontal bar */
div.SilverBarHorizLeft {
	background:url(/images/backgrounds/SilverBarHoriz/Left.png) no-repeat left top; height:41px
}
div.SilverBarHorizMiddle {
	background:url(/images/backgrounds/SilverBarHoriz/Middle.png) repeat-x right top; height:41px
}
div.SilverBarHorizRight {
	background:url(/images/backgrounds/SilverBarHoriz/Right.png) no-repeat right top; height:41px
}

.newsticker {
	list-style-type: none;
	float:left;
	/*border: 1px dashed #fff;*/
	height:14px;
	line-height:14px;
	font-size:14px;
	background: #fafbfd;
	padding: 0px;
	margin: 0px;
}
.newsticker a {
	text-decoration:none;
	color:#565A81;
}

.infoBoxHead {
	font-weight:bold;
}
ul.infoBoxBody {
	font-size:0.9em;
	margin-top:5px;
	padding-left: 17px;
	margin-left: 0px;
	margin-bottom:0px;
}
ul.infoBoxBody li {
	margin-top:8px;
	list-style: none; 
	list-style-image: none; /* Required by IE6 - other browsers need only list-style: none.  Don't use list-style-image because each browser puts the image in a different place. */
	display:block;
	position:relative;
}
ul.infoBoxBody li .bullet {
	display:block;
	position:absolute;
	left: -20px;
	width:16px;
	height:16px;
	background: url(/images/products/2empowerFM/li2.gif) center left no-repeat;
}



/* ######### Rounded page borders ######### */
/* http://www.alistapart.com/articles/customcorners2/ shows how this could be done with transparent PNG files, but this would not work in IE6 even with the transparent PNG hack due to using a repeating background.  Instead, I overlay two images (pageBorderLeftTop and pageBorderRightTop) rendered to fit with the background gradient. */

body.toEmpowerFM {
	background:#E7E8F0 url(/images/backgrounds/RoundedPage/Background.png) repeat-x left top;
}

div.PageContentMiddle {
	width:640px; margin-top:10px; margin-bottom:0px; margin-left:auto; margin-right:auto; padding:0px;
	overflow:auto; /* Expand to fit floating elements inside */
}

div.pageBorderLeft {
	width:720px;
	margin:0px auto;
	background:#fff url(/images/backgrounds/RoundedPage/Left.gif) repeat-y left top;
	padding:0px;
}
div.pageBorderTop {
	width:100%;
	height:20px;
	background:url(/images/backgrounds/RoundedPage/Top.gif) no-repeat left top;
	padding:0px;
	margin:0px;
}
div.pageBorderTop span {
	display:block;
	position:relative;
	height:20px;
	background:url(/images/backgrounds/RoundedPage/TopRight.gif) no-repeat right top;
	padding:0px;
	margin:0px;
}

div.pageBorderRight {
	background:url(/images/backgrounds/RoundedPage/Right.gif) repeat-y right top;
}
div.pageBorderLeftTop {
	background:url(/images/backgrounds/RoundedPage/LeftTop.gif) no-repeat left top;
}
div.pageBorderRightTop {
	background:url(/images/backgrounds/RoundedPage/RightTop.gif) no-repeat right top;
	padding-top:1px;
	padding-right:36px;
	padding-bottom:1px;
	padding-left:30px;
	margin-top:-1px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
}

div.pageBorderBottom {
	width:100%;
	height:28px;
	background:url(/images/backgrounds/RoundedPage/Bottom.gif) no-repeat left bottom;
}
div.pageBorderBottom span {
	display:block;
	position:relative;
	height:28px;
	background:url(/images/backgrounds/RoundedPage/BottomRight.gif) no-repeat right top;
}

/* ######### Styling for Drop Down Menus ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #CA8E22; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #FEF0B1;
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #CA8E22; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}