/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
TAGS
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
body {
background-color: #B69E7F;
margin: 0;
padding: 0;
background-image: url(../images/body_bg.jpg);
background-repeat: no-repeat;
background-position: 50% 200px;
font-size: 100%; /* 16px */
}
#mother {
font-size: .75em; /* 16*.75=12px */
}
td, pre, input, textarea, select {
font-size: 1em; /* 12*1=12px */
}
body, td, pre, input, textarea, select {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #345C64;
}
a:link {
color: #05478e;
}
a:visited {
color: #05478e;
}
a:hover {
text-decoration: none;
color: #002e5e;
}
a:active {
color: #05478e;
}
a img {
border: 0 none;
}
code {
color: #f09;
}
p, li, pre {
line-height: 1.3;
}
h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre {
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
}
h3, h4, h5, h6, p, ol, ul, pre {
margin-bottom: 12px;
}
h1 {
color: #345C64;
font-size: 1.17em; /* 12*1.17=14px */
margin: 0 0 15px 15px;
}
h2 {
font-size: 1.09em; /* 11*1.09=12px */
margin: 0 0 10px 0;
color: #345C64;
}
h3 {
font-size: 1.5em; /* 12*1.5=18px */
margin: 0 0 18px 0;
}
ul {
list-style-type: square;
margin-left: 0;
padding-left: 20px;
}
li {
margin-bottom: 6px;
}
li ol,
li ul {
margin-top: 4px;
}
ol ol {
list-style-type: lower-alpha;
}
th {
text-align: left;
}
object, embed {
margin: 0;
padding: 0;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
MAIN DIVISIONS
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
#main {
padding: 0 0 68px 0;
width: 100%;
}
html>body #main {
background-image: url(../images/page_bg.png);
background-repeat: no-repeat;
background-position: center bottom;
}
#mother {
width: 864px;
margin: 0 auto;
background-image: url(../images/mother_bg.jpg);
background-position: left bottom;
background-repeat: no-repeat;
border: 1px solid #967447;
background-color: #fff;
}
#banner {
background-image: url(../images/banner_bg.jpg);
background-repeat: repeat-x;
background-position: right top;
position: relative;
width: 864px;
}
#bannerHeader {
color: #345C64;
font-size: 1.17em; /* 12*1.17=14px */
position: absolute;
right: 2px;
bottom: 0;
padding: 0 20px 20px 0px;
width: 471px;
height: 54px;
}
#bannerHeader p {
margin: 0 25px 10px 17px;
font-size: .92em;
line-height: 1.5em;
}
html>body #bannerHeader {
height: auto;
min-height: 54px;
}
#homePage #bannerHeader {
color: #8F6B3C;
}
#tagLine {
margin: 0 0 50px 0;
}
#footer {
margin: 30px 0 0 0;
padding: 64px 0 20px 377px;
clear: both;
color: #666;
color: #967447;
font-size: .83em; /* 12*.83=10px */
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
CONTENT
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
#content {
padding: 0 40px 20px 42px;
float: left;
width: 439px;
font-size: 0.92em; /* 12*.92=11px */
min-height: 280px;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
MENU
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
#menu {
float: left;
width: 343px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.17em; /* 12*1.17=14px */
}
/* :::::::::::::::::::::::::::::::::
MAIN MENUS
NOTE: The dotted lines that lead from a Main Menu Item to a Sub Menu are controlled by the id in the page's tag
and the .selected class in the Main Menu Item's tag (the id in the tag should somewhat match the Main Menu Item for that page)
:::::::::::::::::::::::::::::::::::: */
#menu ul {
list-style-type: none;
padding: 0 0 48px 0;
margin: 0 0 0 143px;
background-image: url(../images/menu_bg.gif);
background-position: right bottom;
background-repeat: no-repeat;
width: 200px
}
#menu li {
background-image: none;
padding: 0;
margin: 0 0 8px 100px;
text-align: right;
line-height: normal;
}
/* NOTE: If a main menu item has a sub menu, add
its id (from the tag) to the following rule so
that a dotted line will lead from the main menu item to the sub menu: */
#benefitsPage #menu .selected,
#contactUsPage #menu .selected,
#insurancePage #menu .selected {
background-image: url(../images/dashed_horiz_long.gif);
background-repeat: no-repeat;
background-position: 0 7px;
margin-left: 0;
position: relative;
width: 200px
}
/* END NOTE */
#menu a:link,
#menu a:visited,
#menu a:active,
#menu .selected ul a:link,
#menu .selected ul a:visited,
#menu .selected ul a:active {
color: #82A7B5;
text-decoration: none;
}
#menu a:hover,
#menu .selected ul a:hover {
color: #4C787F;
}
#menu .selected a:link,
#menu .selected a:visited,
#menu .selected a:active {
color: #957248;
}
/* END MAIN MENU */
/* :::::::::::::::::::::::::::::::::
SUB MENUS
NOTE: If a Sub Menu Item has a Sub Menu, the dotted vertical line that lead from a Sub Menu Item
to a Sub Sub Menu is controlled by a class name in the page's tag (the class name in the tag should somewhat match the Sub Menu Item for that page)
:::::::::::::::::::::::::::::::::::: */
#menu ul ul {
padding: 0 0 40px 0;
margin: 0;
position: absolute;
width: 100px;
left: 0;
top: 18px;
background-image: none;
}
/* NOTE: If a sub menu item has a sub menu, you will need to add and adjust the right vertical dotted line on the sub menu
1) duplicate one of the following rules
2) change the class name to match the class name on your pages's tag (you may have to insert this class name)
3) change the second value in the background-position style so the dotted vertical line is aligned properly */
.services #menu ul ul {
background-image: url(../images/dashed_vertical.gif);
background-repeat: no-repeat;
background-position: 100% 38px;
}
.directions #menu ul ul {
background-image: url(../images/dashed_vertical.gif);
background-repeat: no-repeat;
background-position: 100% 16px;
}
.insProducts #menu ul ul {
background-image: url(../images/dashed_vertical.gif);
background-repeat: no-repeat;
background-position: 100% 16px;
}
/* END NOTE */
#menu ul ul li {
position: static;
margin: 0;
padding: 5px 0 0 20px;
background-image: url(../images/dashed_horiz.gif);
background-repeat: no-repeat;
background-position: 0 60%;
border-left: 1px dashed #9AAEB2;
}
/* You must put the following class ("bottomItem") on the last of a sub menu */
#menu ul ul li.bottomItem {
background-image: url(../images/dashed_left_corner.gif);
background-position: 0 48%;
border-left: 0 none;
margin: 0;
height: 1%;
}
html>body #menu ul ul li.bottomItem {
height: auto;
}
#menu ul ul li a {
display: block;
padding: 0 20px 0 0;
height: 1%;
}
html>body #menu ul ul li a {
height: auto;
}
/* Use the folowing class ("current") on an to highlight a sub menu item */
#menu ul ul li.current a {
background-image: url(../images/dashed_horiz.gif);
background-repeat: no-repeat;
background-position: 100% 50%;
}
/* NOTE: To set up for submenu items that do not contain a sub sub */
.products #menu ul ul li.current a {
background-image: none;
}
/* END NOTE */
#menu ul ul li.current a:link,
#menu ul ul li.current a:visited,
#menu ul ul li.current a:active,
#menu ul ul li.current li.current a:link,
#menu ul ul li.current li.current a:visited,
#menu ul ul li.current li.current a:active {
color: #957248;
}
#menu ul ul li.current li a:link,
#menu ul ul li.current li a:visited,
#menu ul ul li.current li a:active {
color: #82A7B5;
}
#menu ul ul li.current li a:hover,
#menu ul ul li.current li.current a:hover {
color: #4C787F;
}
/* END SUB MENUS */
/* :::::::::::::::::::::::::::::::::
SUB SUB MENUS
:::::::::::::::::::::::::::::::::::: */
#menu ul ul ul {
width: 250px;
left: -150px;
top: 100%;
padding: 0;
}
/* If a page has a SUb Sub Menu, add the class name in the page's tag to the following rule */
.services #menu ul ul ul,
.directions #menu ul ul ul,
.insProducts #menu ul ul ul {
background-position: 100% 100%;
}
/* END NOTE */
#menu ul ul ul li {
padding: 0 20px 4px 2px;
background-image: url(../images/dashed_horiz.gif);
background-repeat: no-repeat;
background-position: 100% 50%;
border-left: 0 none;
}
/* Use the folowing class ("current") on an to highlight a sub sub menu item */
#menu ul ul li.current ul a {
display: inline;
background-image: none;
padding: 0;
}
/* END SUB SUB MENUS */
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
FORMS
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
form {
margin: 0;
}
fieldset {
padding: 0 10px 10px 10px;
margin: 0 0 10px 0;
}
legend {
font-size: 14px;
font-weight: bold;
margin: 0 0 30px 0;
padding: 3px 10px 3px 10px;
color: #333;
}
.columnize label {
display: block;
width: 80px;
float: left;
margin-bottom: 20px;
font-weight: bold;
text-align: right;
padding: 2px 10px 0 0;
}
.columnize input,
.columnize select,
.columnize textarea {
display: block;
width: 290px;
float: left;
margin-bottom: 20px;
}
.columnize br {
clear: left;
}
.columnize p label,
.columnize p input,
.columnize p select,
.columnize p textarea {
margin-bottom: 0;
}
.columnize p em {
display: block;
margin: 0 0 20px 80px;
font-size: .83em; /* 12*.83=10px */
}
p.submitButton {
text-align: center;
clear: left;
padding-top: 1.0em;
padding: 0;
}
p.submitButton input {
background-color: #7796b1;
color: #fff;
font-weight: bold;
border: 0 none;
padding: 3px 12px 4px 12px;
margin: 0;
cursor: pointer;
}
/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
UTILTY CLASSES/MISC
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
.photo,
.picMiddle img,
.picRight,
.picLeft {
padding: 6px;
background-color: #fff;
border: 1px solid #82776b;
}
.picRight {
margin: 0 0 15px 15px;
float: right;
}
.picLeft {
margin: 0 15px 15px 0;
float: left;
}
.picMiddle {
text-align: center;
}
.unbulleted {
margin-left: 0;
padding-left: 0;
list-style-type: none;
}
.unbulleted li {
background-image: none;
padding: 0;
}
.cl {
clear: both;
}
.note {
font-size: 90%;
color: #666;
}
ul.note {
padding: 0;
margin-left: 0;
}
ul.note li {
padding: 0;
margin: 0;
background-image: none;
}
/* COLUMNS */
.col1, .col2, .col3 {
float: left;
margin: 0 0 0 10px;
}
/* TWO COLUMN */
.twoColumn {
clear: both;
margin: 0 0 30px 0;
}
.twoColumn .col1 {
width: 280px;
margin: 0;
}
.twoColumn .col2 {
width: 280px;
}
/* THREE COLUMN */
.threeColumn .col1 {
clear: both;
}
.threeColumn .col1 {
width: 180px;
margin: 0;
}
.threeColumn .col2 {
width: 180px;
}
.threeColumn .col3 {
width: 180px;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
line-height: 0;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
.fontSizesInEmsForBase-12 {
font-size: .83em; /* 12*.83=10px */
font-size: .92em; /* 12*.92=11px */
font-size: 1em; /* 12*1=12px */
font-size: 1.17em; /* 12*1.17=14px */
font-size: 1.33em; /* 12*1.33=16px */
font-size: 1.5em; /* 12*1.5=18px */
font-size: 1.67em; /* 12*1.67=20px */
font-size: 2em; /* 12*2=24px */
font-size: 2.67em; /* 12*2.67=32px */
}