@charset "UTF-8";
html, body { 
    height: 100%;
}
#pagecontainer,
#pagecontainer_inside,
#contentcontainer { 
    height:100%;
}
body {
    padding: 0px;
    margin: 0px;
    background: #fff url(/structural-images/bg_dropshadow.jpg) top center repeat-y;
}
#pagecontainer {
    background: url(/structural-images/bg_gradient_green.jpg) top left repeat-x;
    width: 100%;
}
#pagecontainer_inside {
    background: url(/structural-images/bg_dropshadow_gradient.jpg) top center no-repeat;
}
    
#contentcontainer {
    position: relative;
    margin: 0px auto;
    padding: 0px 20px;
    width: 940px;
}
#content  {
    position: relative;
    margin: 0px auto;
    width: 900px;
}
h2 {
    margin: 0px 0px 10px 0px;
    font: normal 20px/16px Arial, Helvetica, sans-serif;
    color: #ff6600;
}
h3 {
    font: bold 13px/16px Arial, Helvetica, sans-serif;
    color: #56b146;
    margin: 0px 0px 10px 0px;
    padding: 0px;
}
h4 {
    font: normal 11px/15px Arial, Helvetica, sans-serif;
    color: #008cd2;
    margin: 0px;
    padding: 0px;
}
h5 {
    font: bold 11px/15px Arial, Helvetica, sans-serif;
    color: #56b146;
    margin: 0px 0px 5px 0px;
    padding: 0px;
}
h6 {
    font: bold 11px/15px Arial, Helvetica, sans-serif;
    color: #008CD2;
    margin: 0px;
    padding: 0px;
}
/*******************************************************
    h6 is used when a title is a link, too
*******************************************************/
p {
    font: normal 11px/15px Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0px 0px 10px 0px;
}
table {
    font: normal 11px/15px Arial, Helvetica, sans-serif;
}
/*******************************************************
    This item is used on the iCare page to give the
    image some margin.
*******************************************************/
img.left {
    margin-right: 10px;
}
a {
    color: #008cd2;
    text-decoration: none;
    
}
a:hover {
    color: #ff6600;
}
hr {
    border: 0px;
    border-bottom: 1px solid #ccc;
    margin: 20px 0px;
    clear: both;
}
/*******************************************************
    since there are two diffent hr styles this was
    necessary.
*******************************************************/
hr.dotted {
    border: none;
    border-bottom: 2px dotted #ccc;
    margin: 20px 0px 14px 0px;
    clear: both;
}
#header {
    position: relative;
    height: 100px;
    clear: both;
}
/*******************************************************
    using CSS to display the sysco logo.  this can easily
    be changes to make the sysco logo a foreground image
    see the OPCO stylesheet for an example
*******************************************************/
h1#logo {
    /*background: #fff url(/structural-images/logo.png) top left no-repeat;*/
    position:absolute;
    top: 20px;
    left: 115px;
    width: 120px;
    height: 60px;
    padding: 0px;
    margin: 0px;
}
    
h1#logo span {
    display: none;
}
    
ul {
    list-style: disc;
    margin: 10px;
    padding-left: 10px;
    font: 11px/15px Arial, Helvetica, sans-serif;
}
ol {
    font: 11px/15px Arial, Helvetica, sans-serif;
}
ul ul {
    margin: 0px 0px 0px 20px;
    padding: 0px;
}
/*******************************************************
    needed a differnt ID to call because of different
    width and margins
*******************************************************/
#content_area_home {
    float: left;
    margin-left: 15px;
    width: 670px;
}
#content_area {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    width: 445px;
}
#content_area a {
    color: #008cd2;
    text-decoration: none;
    font-weight: bold;
}
#content_area_wide {
    float: left;
    margin-right: 15px;
    width: 670px;
}
#content_area_full {
    float: left;
    margin-right: 5px;
    width: 880px;
}
#content_area_wideright {
    float: left;
    margin-left: 15px;
    width: 670px;
}
#content_area select {
    font: normal 11px/15px Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0px 0px 10px 0px;
}
/*******************************************************
    larger orange text used through out site.  applied
    to paragraph tag
*******************************************************/
.introtext {
    font: normal 13px/16px Arial, Helvetica, sans-serif;
    color: #ff6600;
}
.date {
    font: normal 10px/14px Arial, Helvetica, sans-serif;
    color: #333;
}
/*******************************************************
    This item is used on the first <li> of the
    accordian menus.  It's here so that it can be
    used for other similar styles.
*******************************************************/
.menutitle {
    font: normal 13px/35px Arial, Helvetica, sans-serif;
    color: #333;
    margin: 0px;
}
/*******************************************************
    navigation - persistent top
    
    These are the three nav items at the very top of
    the page. The login item has a seperate class
    because it has different properties.
*******************************************************/
ul#persistent_top {
    float: right;
    position: relative;
    top: 0px;
    right: 15px;
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 215px;
}
    
ul#persistent_top li {
    display: block;
    float: left;
     margin: 0px;
    padding: 0px;
    margin-left: 5px;
    -moz-box-shadow: 1px 1px 3px #969696;
    -webkit-box-shadow: 1px 1px 3px #969696;
    box-shadow: 1px 1px 3px #969696;
/* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
    
ul#persistent_top li a {
    display: block;
    background: url(/structural-images/bg_topnav_off.jpg) top left repeat-x;
    width: 87px;
    height: 37px;
    font: 11px/11px Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
    padding: 7px 0px 0px 8px;
}
ul#persistent_top li a:hover {
    background: url(/structural-images/bg_topnav_on.jpg) top left repeat-x;
    color: #fff;
    height: 91px;
}
ul#persistent_top li a span {
    font: 11px/11px Arial, Helvetica, sans-serif;
    display: block;
}
    
ul#persistent_top li a span.big,
ul#persistent_top li a:hover span.big {
    font: normal 18px/16px Arial, Helvetica, sans-serif;
    display: block;
    padding-bottom: 4px;
}
ul#persistent_top li a div.more {
    display: none;
    cursor: default;
}
ul#persistent_top li a:hover div.more {
    display: block;
    background: url(/structural-images/top_nav_icon.gif) center right no-repeat;
    cursor: pointer;
    width: 57px;
    height: 55px;
    padding-right: 20px;
}
/*******************************************************
    specific styles for login button, because it doesnt
    expand like the others
*******************************************************/
ul#persistent_top li.login a, ul#persistent_top li.login a:hover {
    height: 37px;
}
/*******************************************************
    navigation - main
*******************************************************/
ul#mainnav {
    float: left;
    list-style: none;
    margin: 0px auto;
    padding: 0px;
    width: auto;
    clear: both;
    
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
ul#mainnav_home {
    float: left;
    list-style: none;
    margin: 0px auto 15px auto;
    padding: 0px;
    width: auto;
    clear: both;
    
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
ul#mainnav li,
ul#mainnav_home li {
    display: block;
    float: left;
    margin: 0px;
    border-right: 1px solid #008cd2;
}
/*******************************************************
    widths had to be specified to reach correct widths
    for entire navigation.
*******************************************************/
ul#mainnav li#item1,
ul#mainnav_home li#item1 {
    width: 169px;
}
ul#mainnav li#item2,
ul#mainnav_home li#item2 {
    width: 196px;
}
ul#mainnav li#item3,
ul#mainnav_home li#item3 {
    width: 148px;
}
ul#mainnav li#item4,
ul#mainnav_home li#item4 {
    width: 141px;
}
ul#mainnav li#item5,
ul#mainnav_home li#item5 {
    width: 122px;
}
ul#mainnav li#item6,
ul#mainnav_home li#item6 {
    width: 113px;
}
ul#mainnav li#item7,
ul#mainnav_home li#item7 {
    width: 104px;
    border-right: none;
}
ul#mainnav li#item1 a,
ul#mainnav_home li#item1 a {
    background: url(/structural-images/bg_mainmenu_left.jpg) top left no-repeat;
}
ul#mainnav li#item1 a:hover,
ul#mainnav_home li#item1 a:hover,
ul#mainnav li#item1 a.active,
ul#mainnav_home li#item1 a.active{
    background: url(/structural-images/bg_mainmenu_left_on.jpg) top left no-repeat;
}
ul#mainnav li#item7 a,
ul#mainnav_home li#item7 a {
    background: url(/structural-images/bg_mainmenu_right.jpg) top right no-repeat;
}
ul#mainnav li#item7 a:hover,
ul#mainnav_home li#item7 a:hover,
ul#mainnav li#item7 a.active,
ul#mainnav_home li#item7 a.active {
    background: url(/structural-images/bg_mainmenu_right_on.jpg) top right no-repeat;
}
ul#mainnav li a,
ul#mainnav_home li a {
    display: block;
    background: url(/structural-images/bg_mainmenu.jpg) top left repeat-x;
    height: 30px;
    width: 100%;
    text-align: center;
    color: #fff;
    font: normal 13px/30px Arial, Helvetica, sans-serif;
    text-decoration: none;
    letter-spacing: .3px;
}
ul#mainnav li a:hover,
ul#mainnav_home li a:hover,
ul#mainnav li a.active,
ul#mainnav_home li a.active {
    background: url(/structural-images/bg_mainmenu_on.jpg) top left repeat-x;
}
/*******************************************************
    sidebar left (left column)
*******************************************************/
#sidebar_left {
    width: 210px;
    float: left;
}
/*******************************************************
    subnav:
    main accordian menu
*******************************************************/
#subnav {
    background: #999;
    width: 210px;
    float: left;
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    border-top: 1px solid #dadada;
    border-left: 1px solid #dadada;
    
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
#subnav li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
#subnav li.menutitle {
    background: #fefefe url(/structural-images/bg_subnav_top.gif) top left repeat-x;
    height: 35px;
    font: normal 13px/35px Arial, Helvetica, sans-serif;
    padding-left: 10px;
    color: #333;
    border-bottom: 1px solid #ccc;
}
#subnav li a {
    display: block;
    height: 24px;
    background: url(/structural-images/bg_subnav_off.gif) top left repeat-x;
    font: bold 10px/24px Arial, Helvetica, sans-serif;
    color: #008cd2;
    text-decoration: none;
    padding-left: 10px;
}
#subnav li a:hover {
    background: url(/structural-images/bg_subnav_on.gif) top left repeat-x;
    color: #fff;
}
#subnav li.active a {
    background: url(/structural-images/bg_subnav_on.gif) top left repeat-x;
    color: #fff;
}
#subnav ul {
    background: #676767;
    margin: 0px 0px;
    padding: 10px 10px 10px 0px;
}
#subnav ul ul {
    background: none;
    margin: 0px 0px 0px 10px;
    padding: 0px 10px 0px 0px;
}
#subnav li ul li a, #subnav li.active ul li a {
    font: normal 10px/18px Arial, Helvetica, sans-serif;
    height: auto;
    color: #fff;
    padding-left: 10px;
    margin-left: 10px;
    background: url(/structural-images/arrow_subnav.png) no-repeat;
    background-position: 0px 5px;
    border: none;
}
#subnav li ul li a:hover, #subnav li.active ul li a:hover, #subnav li ul li.active a {
    color: #ffdf75;
    background: url(/structural-images/arrow_subnav_on.png) no-repeat;
    background-position: 0px 5px;
}
#subnav li ul li ul li a, #subnav li.active ul li ul li a {
    font: normal 10px/18px Arial, Helvetica, sans-serif;
    color: #fff;
    padding-left: 10px;
    margin-left: 10px;
    background: url(/structural-images/arrow_subsubnav.png) no-repeat;
    background-position: 0px 5px;
    border: none;
}
#subnav li ul li ul li a:hover, #subnav li.active ul li ul li a:hover, #subnav li ul li ul li.active a {
    color: #ffdf75;
    background: url(/structural-images/arrow_subsubnav_on.png) no-repeat;
    background-position: 0px 5px;
}
/*******************************************************
    toolkit:
    accorian on right of interior pages
*******************************************************/
#toolkit {
    background: #999;
    width: 210px;
    float: left;
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    border-top: 1px solid #dadada;
    border-left: 1px solid #dadada;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
#toolkit li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}
#toolkit li.menutitle {
    background: #fefefe url(/structural-images/bg_subnav_top.gif) top left repeat-x;
    height: 35px;
    font: normal 13px/35px Arial, Helvetica, sans-serif;
    padding-left: 10px;
    color: #333;
}
#toolkit li a {
    display: block;
    height: 24px;
    background: url(/structural-images/bg_subnav_off.gif) top left repeat-x;
    font: bold 10px/24px Arial, Helvetica, sans-serif;
    color: #008cd2;
    text-decoration: none;
    padding-left: 10px;
    border-top: 1px solid #ccc;
}
#toolkit li a:hover {
    background: url(/structural-images/bg_subnav_on.gif) top left repeat-x;
    color: #fff;
}
#toolkit ul {
    background: #676767 url(/structural-images/bg_subnav_3rdlevel.gif) top left repeat-x ;
    margin: 0px 0px;
    padding: 10px 10px 10px 0px;
}
#toolkit ul ul {
    background: none;
    margin: 0px 0px 0px 10px;
    padding: 0px 10px 0px 0px;
}
#toolkit li ul li a {
    font: normal 10px/18px Arial, Helvetica, sans-serif;
    height: 18px;
    color: #fff;
    padding-left: 10px;
    margin-left: 10px;
    background: url(/structural-images/arrow_subnav.png) center left no-repeat;
    border: none;
}
#toolkit li ul li a:hover {
    color: #fff;
    text-decoration: underline;
    background: url(/structural-images/arrow_subnav.png) center left no-repeat;
}
/*******************************************************
    toolkit_body:
    accorian on center of pages
*******************************************************/
#toolkit_body {
    width: 100%;
    float: left;
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    border-top: 1px solid #dadada;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
}
#toolkit_body li {
    list-style: none;
}
#toolkit_body li a {
    display: block;
    height: 24px;
    background: url(/structural-images/bg_subnav_off.gif) top left repeat-x;
    font: bold 10px/24px Arial, Helvetica, sans-serif;
    color: #008cd2;
    text-decoration: none;
    padding-left: 10px;
    border-top: 1px solid #ccc;
}
#toolkit_body li ul li a {
    display: inline;
    height: 0px;
    background: none;
    font: bold 11px/15px Arial, Helvetica, sans-serif;
    color:#008CD2;
    text-decoration:none;
    border-top: 0px;
    padding-left: 0px;
}
#toolkit_body li a:hover {
    background: url(/structural-images/bg_subnav_on.gif) top left repeat-x;
    color: #fff;
}
#toolkit_body li.active a {
    background: url(/structural-images/bg_subnav_on.gif) top left repeat-x;
    color: #fff;
}
#toolkit_body li.active ul li a {
    background: none;
    color:#008CD2;
}
#toolkit_body ul {
    margin: 0px 0px;
    padding: 10px 10px 10px 10px;
}
/*******************************************************
    breadcrumb navigation
*******************************************************/
#breadcrumbs {
    position: relative;
    height: 40px;
    font: 10px/40px Arial, Helvetica, sans-serif;
}
#breadcrumbs a {
    color: #008cd2;
    text-decoration: none;
}
#breadcrumbs a:hover {
    color: #000;
}
#breadcrumbs a.print {
    position: absolute;
    width: auto;
    top: 0px;
    right: 176px;
    padding-right: 17px;
    background: url(/structural-images/icon_print.gif) center right no-repeat;
    color: #000;
    height: 40px;
    font: 10px/40px Arial, Helvetica, sans-serif;
}
#breadcrumbs a.print:hover {
    color: #008cd2;
}
#breadcrumbs a.share {
    position: absolute;
    width: auto;
    top: 0px;
    right: 106px;
    padding-right: 17px;
    background: url(/structural-images/icon_addthis.gif) center right no-repeat;
    color: #000;
    height: 40px;
    font: 10px/40px Arial, Helvetica, sans-serif;
}
#breadcrumbs a.share img {
}
#breadcrumbs a.share:hover {
    color: #008cd2;
}
/*******************************************************
    sidebar right:
    right hand column on interior pages
*******************************************************/
#sidebar_right {
    width: 210px;
    float: left;
}
#search_container { 
    float: left;
    width: 210px;
}
/*******************************************************
    search:
    search box styles
*******************************************************/
#search {
    width: 200px;
    background: #e6e6e6 url(/structural-images/bg_search.jpg) top left no-repeat;
    padding: 1px 0px 10px 10px;
    clear: both;
    margin-bottom: 10px;
    border-top: 1px solid #dadada;
    border-left: 1px solid #dadada;
    
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
#search div.searchbutton {
    width: auto;
    height: auto;
    float: left;
}
#search div.searchtextbox {
    width: 162px;
    height: auto;
    float: left;
    margin-right: 4px;
}
#search input {
    display:inline-block;
    font: 11px Arial, Helvetica, sans-serif;
    width: 159px;
    height: 27px;
    margin: 0px;
    border: transparent;
    background: url(/structural-images/textbox_search.png) center left no-repeat;
    padding: 0px 0px 0px 3px;
    line-height: 27px;
}
#search input.radiobutton {
    display:inline-block;
    line-height: 15px;
    width: auto;
    height: auto;
    margin: 0px 2px 10px 0px;
    border: transparent;
    background:  none;
    padding: 0px 3px;
}
#search #syscosite {
    margin-left: 8px;
}
#search label {
    display:inline-block;
    font: normal 11px/15px Arial, Helvetica, sans-serif;
    margin: 0px 0px 10px 0px;
    color: #000;
}
/*******************************************************
    custom submit button and roller state
*******************************************************/
#search input.button{
    display:inline-block;
    width: 27px;
    height: 27px;
/*    float: right; */
    border: none;
    padding: 0px;
    margin: 0px;
    background: url(/structural-images/button_blue.png) bottom left no-repeat;
    line-height: 27px;
}
#search input.button:hover{
    background: url(/structural-images/button_blue_on.png) bottom left no-repeat;
}
/*******************************************************
    stock infomation:
    may have to be edited to reflect available hooks
    in feed if using service.
*******************************************************/
#stock_container { 
    float: left;
    width: 210px;
}
#stock {
    width: 200px;
    background: #e6e6e6 url(/structural-images/bg_search.jpg) top left no-repeat;
    padding: 1px 0px 10px 10px;
    clear: both;
    margin-bottom: 10px;
    border-top: 1px solid #dadada;
    border-left: 1px solid #dadada;
    
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
#stock .stock_price {
    color: #f60;
    font: bold 13px Arial, Helvetica, sans-serif;
    padding: 0px;
    margin:0px;
}
#stock .stock_change {
    color: #56b146;
    font: bold 13px Arial, Helvetica, sans-serif;
    padding: 0px;
    margin:0px;
    margin-left: 10px;
}
#stock .stock_symbol {
    clear: both;
    font: normal 9px/14px Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0px;
    margin:0px;
}
#stock .stock_date {
    clear: both;
    font: normal 9px/14px Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0px;
    margin:0px;
}
/*******************************************************
    customer solutions feature
    these styles are for the large feature at the top
    of the customer solutions page. large person photo
    is foreground element so it should be pretty simple
    to edit
*******************************************************/
#customer_solutions_feature {
    margin-top: -24px;
    position: relative;
    width: 440px;
    height: 365px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
}
/*******************************************************
    small black text
*******************************************************/
#customer_solutions_feature p.text1 {
    position: absolute;
    top: 220px;
    left: 230px;
    width: 210px;
}
/*******************************************************
    large orange text
*******************************************************/
#customer_solutions_feature h2 {
    position: absolute;
    top: 240px;
    left: 230px;
    width: 210px;
}
/*******************************************************
    smaller orange text
*******************************************************/
#customer_solutions_feature p.introtext {
    position: absolute;
    top: 265px;
    left: 230px;
    width: 200px;
    font: normal 11px/15px Arial, Helvetica, sans-serif;
}
/*******************************************************
    the blue buttons in the large feature
*******************************************************/
#customer_solutions_feature #button1,
#customer_solutions_feature #button2,
#customer_solutions_feature #button3,
#customer_solutions_feature #button4 {
    position: absolute;
    width: 105px;
    height: 65px;
    color: #fff;
}
/*******************************************************
    blue gradients and rollover states are handled here
*******************************************************/
#customer_solutions_feature #button1 a,
#customer_solutions_feature #button2 a,
#customer_solutions_feature #button3 a,
#customer_solutions_feature #button4 a {
    background: url(/structural-images/bg_customersolutions_button.png) top left repeat-x;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #ccc;
    font: normal 15px/15px Arial, Helvetica, sans-serif;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
#customer_solutions_feature #button1 a:hover,
#customer_solutions_feature #button2 a:hover,
#customer_solutions_feature #button3 a:hover,
#customer_solutions_feature #button4 a:hover {
    background: url(/structural-images/bg_customersolutions_button_on.png) top left repeat-x;
    border: 1px solid #bbb;
}
/*******************************************************
    specific button placement
*******************************************************/
#customer_solutions_feature #button1 {
    top: 23px;
    left: 180px;
}
#customer_solutions_feature #button2 {
    top: 23px;
    left: 315px;
}
#customer_solutions_feature #button3 {
    top: 118px;
    left: 180px;
}
#customer_solutions_feature #button4 {
    top: 118px;
    left: 315px;
}
/*******************************************************
    photo placement
*******************************************************/
#customer_solutions_feature .photo {
    position: absolute;
    z-index: 100;
    bottom: 0px;
    left: -10px;
}
/*******************************************************
    investors feature
    very similar to the customer solutions feature.
    same dimensions even, but different number of buttons
    and placement.  also text content location changes.
    see above for specifics as they are the same.
*******************************************************/
#investors_feature {
    margin-top: -24px;
    margin-bottom: 15px;
    position: relative;
    width: 440px;
    height: 365px;
    border-bottom: 1px solid #ccc;
}
#investors_feature p.text1 {
    position: absolute;
    top: 225px;
    left: 230px;
    width: 210px;
}
#investors_feature h2 {
    position: absolute;
    top: 245px;
    left: 230px;
    width: 210px;
}
#investors_feature p.introtext {
    position: absolute;
    top: 270px;
    left: 230px;
    width: 200px;
    font: normal 11px/15px Arial, Helvetica, sans-serif;
}
#investors_feature #button1,
#investors_feature #button2,
#investors_feature #button3 {
    position: absolute;
    width: 260px;
    height: 53px;
    color: #fff;
}
#investors_feature #button1 a,
#investors_feature #button2 a,
#investors_feature #button3 a {
    background: url(/structural-images/bg_customersolutions_button.png) top left repeat-x;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #ccc;
    font: normal 15px/53px Arial, Helvetica, sans-serif;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
#investors_feature #button1 a:hover,
#investors_feature #button2 a:hover,
#investors_feature #button3 a:hover {
    background: url(/structural-images/bg_customersolutions_button_on.png) top left repeat-x;
    border: 1px solid #bbb;
}
#investors_feature #button1 a span,
#investors_feature #button2 a span {
    margin-left: 31px;
}
#investors_feature #button3 a span {
    margin-left: 61px;
}
#investors_feature #button1 {
    top: 23px;
    right: 0px;
}
#investors_feature #button2 {
    top: 87px;
    right: 0px;
}
#investors_feature #button3 {
    top: 150px;
    right: 0px;
}
#investors_feature .photo {
    position: absolute;
    z-index: 100;
    bottom: 0px;
    left: -10px;
}
/*******************************************************
    feature box 1a = white background
    located on the corp homepage template, it's the left
    most two boxes.  all feature boxes are styled
    unordered lists with an image in the first <li> and
    content in the  second.
*******************************************************/
.featurebox1a {
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    height: 99px;
    width: 206px;
    background: #fff url(/structural-images/bg_featurebox1a.jpg) bottom left repeat-x;
    border: 1px solid #eaeaea;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.featurebox1a li {
    float: left;
    margin: 0px;
    padding: 0px;
}
/*******************************************************
    photo
*******************************************************/
.featurebox1a li.photo {
    width: 95px;
    height: 99px;
    text-align: center;
}
/*******************************************************
    content
*******************************************************/
.featurebox1a li.text {
    width: 101px;
    padding: 5px;
}
.featurebox1a li.text h3 {
    margin: 0px;
    font: bold 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox1a li.text p {
    margin: 0px;
    font: normal 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox1a li.text a {
    display: inline;
    color: #008cd2;
    text-decoration: none;
    font-weight: bold;
}
.featurebox1a li.text a:hover {
    color: #ff6600;
}
/*******************************************************
    feature box 1b = yellow background
    located on the corp homepage template, it's the
    right most box
*******************************************************/
.featurebox1b {
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    height: 99px;
    width: 206px;
    background: #fbefc4 url(/structural-images/bg_featurebox4.jpg) top left repeat-x;
    border: 1px solid #eaeaea;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.featurebox1b li {
    float: left;
    margin: 0px;
    padding: 0px;
}
.featurebox1b li.photo {
    width: 95px;
    height: 99px;
    text-align: center;
}
.featurebox1b li.text {
    width: 101px;
    padding: 5px;
}
.featurebox1b li.text h3 {
    margin: 0px;
    font: bold 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox1b li.text p {
    margin: 0px;
    font: normal 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox1b li.text a {
    color: #008cd2;
    text-decoration: none;
    font-weight: bold;
}
.featurebox1b li.text a:hover {
    color: #ff6600;
}
/*******************************************************
    feature box 1c = white background, no gradient
    located on the corp homepage template, it's the
    right most box
*******************************************************/
.featurebox1c {
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    height: 99px;
    width: 206px;
    background: #fff;
    border: 1px solid #eaeaea;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.featurebox1c li {
    float: left;
    margin: 0px;
    padding: 0px;
}
.featurebox1c li.photo {
    width: 95px;
    height: 99px;
    text-align: center;
}
.featurebox1c li.text {
    width: 101px;
    padding: 5px;
}
.featurebox1c li.text h3 {
    margin: 0px;
    font: bold 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox1c li.text p {
    margin: 0px;
    font: normal 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox1c li.text a {
    color: #008cd2;
    text-decoration: none;
    font-weight: bold;
}
.featurebox1c li.text a:hover {
    color: #ff6600;
}
/*******************************************************
    feature box 2
    
    this feature is located on customer solutions and
    has yellow gradient background and photos that break
    bounds of the the containing box.
    
    I've used .left .right further control placement.
*******************************************************/
.left {
    float: left;
}
.right {
    float: right;
}
.featurebox2 {
    list-style: none;
    margin: 0px 0px 20px 0px;
    padding: 0px;
    height: 100px;
    width: 206px;
    background: #fbefc4 url(/structural-images/bg_featurebox4.jpg) top left repeat-x;
    border: 1px solid #eaeaea;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.featurebox2 li {
    float: left;
    margin: 0px;
    padding: 0px;
}
.featurebox2 li.photo {
    width: 67px;
    height: 110px;
    /*margin-top: -5px;*/
    text-align: center;
}
.featurebox2 li.text {
    width: 107px;
    padding: 6px 12px;
}
.featurebox2 li.text h3 {
    margin: 0px;
    font: bold 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox2 li.text p {
    margin: 0px;
    font: normal 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox2 li.text a {
    color: #008cd2;
    text-decoration: none;
}
/*******************************************************
    feature box 3
    
    this feature is located in the right hand column of
    customer solutions and has a green background
*******************************************************/
.featurebox3 {
    clear: both;
    list-style: none;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    width: 210px;
    background: #ddefda;
    border: 1px solid #eaeaea;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.featurebox3 br { 
    line-height: 1px;
}
.featurebox3 li {
    float: left;
    margin: 0px;
    padding: 0px;
}
.featurebox3 li.photo {
    padding: 2px;
    width: 91px;
}
.featurebox3 li.text {
    width: 93px;
    padding: 6px 10px;
}
.featurebox3 li.text h3 {
    margin: 0px 0px 5px 0px;
    font: bold 11px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox3 li.text p {
    margin: 0px;
    font: normal 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox3 li.text a {
    color: #008cd2;
    text-decoration: none;
    font-weight: bold;
}
/*******************************************************
    feature box 4
    
    this much wider feature box is located on the
    services page.  same basic construction as the others
*******************************************************/
.featurebox4 {
    clear: both;
    list-style: none;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    height: 97px;
    width: 442px;
    background: #fbefc4 url(/structural-images/bg_featurebox4.jpg) top left repeat-x;
    border: 1px solid #eaeaea;
    
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
.featurebox4 li {
    float: left;
    margin: 0px;
    padding: 0px;
}
.featurebox4 li.photo {
    padding: 0px;
    width: 212px;
}
.featurebox4 li.text {
    width: 200px;
    padding: 6px 12px;
}
.featurebox4 li.text h3 {
    margin: 0px 0px 5px 0px;
    font: bold 13px/16px Arial, Helvetica, sans-serif;
    color: #56b146;
}
.featurebox4 li.text p {
    margin: 0px;
    font: normal 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox4 li.text a {
    color: #008cd2;
    text-decoration: none;
}
/*******************************************************
    investors feature box
    
    similar to the other feature boxes in construction
    located on the investors page.
*******************************************************/
.investors_feature_box {
    list-style: none;
    margin: 5px 0px 0px 0px;
    padding: 0px;
    height: 100px;
    width: 215px;
    background: #fbefc4 url(/structural-images/bg_featurebox4.jpg) top left repeat-x;
    border: 1px solid #eaeaea;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.investors_feature_box li {
    float: left;
    margin: 0px;
    padding: 0px;
}
.investors_feature_box li.photo {
    width: 95px;
    height: 100px;
    text-align: center;
}
.investors_feature_box li.text {
    width: 100px;
    padding: 6px 10px;
}
.investors_feature_box li.text h3 {
    margin: 0px;
    font: bold 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.investors_feature_box li.text p {
    margin: 0px;
    font: normal 11px/14px Arial, Helvetica, sans-serif;
    color: #000;
}
.featurebox1a li.text a {
    color: #008cd2;
    text-decoration: none;
}
.featurebox1a li.text a:hover {
    color: #ff6600;
}
/*******************************************************
    feature area home
    
    used to contain the feature boxes on the homepage.
    column 4 is for news and investor headlines.
*******************************************************/
#feature_area_home h3 {
    margin-top: 0px;
}
#feature_area_home .col1,
#feature_area_home .col2,
#feature_area_home .col3,
#feature_area_home .col4 {
    float: left;
    margin: 0px;
}
#feature_area_home .col1 {
    width: auto;
    padding-right: 8px;
    border-right: 2px dotted #ccc;
}
#feature_area_home .col2 {
    width: auto;
    padding: 0px 8px;
    border-right: 2px dotted #ccc;
}
#feature_area_home .col3 {
    width: auto;
    padding: 0px 8px;
    border-right: 2px dotted #ccc;
}
#feature_area_home .col4 {
    width: 208px;
    padding: 0px 0px 0px 8px;
}
#feature_area_home .col4 p {
    margin-bottom: 0px;
}
#feature_area_home a {
    font-weight: bold;
}
/*******************************************************
    recent news
    
    similar to 'feature area home' used to contain news
    headlines on investors page
*******************************************************/
#recentnews a {
    color: #008cd2;
    font-weight: bold;
    text-decoration: none;
}
#recentnews .col1,
#recentnews .col2,
#recentnews .col3 {
    float: left;
    margin: 0px;
    margin-bottom: 20px;
    height: 80px;
}
#recentnews .col1 {
    width: 131px;
    padding-right: 10px;
    border-right: 2px dotted #ccc;
}
#recentnews .col2 {
    width: 134px;
    padding: 0px 10px;
    border-right: 2px dotted #ccc;
}
#recentnews .col3 {
    width: 131px;
    padding: 0px 0px 0px 10px;
    border-right: 0px;
}
#recentnews .col4 p {
    margin-bottom: 0px;
}
/*******************************************************
    footer
    
    this server as a footer and site page.  contains
    multiple columns
*******************************************************/
#footer {
    clear: both;
    position: relative;
    margin-top: 20px;
    padding: 10px;
    background: #fff url(/structural-images/bg_footer.jpg) top left repeat-x;
    height: 290px;
    font: normal 9px/13px Arial, Helvetica, sans-serif;
    color: #444;
}
#footer ul {
    margin: 0;
    margin-bottom: 10px;
    list-style: none;
    padding-left: 0px;
}
#footer p {
    font: normal 10px/13px Arial, Helvetica, sans-serif;
    color: #444;
}
#footer .text{
    width: 185px;
    margin: 0px;
}
#footer li {
    font-weight: bold;
    line-height: 9px;
    margin-bottom: 4px;
}
#footer a {
    font: normal 9px Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #444;
}
#footer a:hover {
    color: #008cd2;
}
#footer .col1, #footer .col2, #footer .col3, #footer .col4, #footer .col5, #footer .col6, #footer .col7  {
    float: left;
    width: 96px;
    margin-right: 15px;
}
#footer .col1 {
    width: 210px;
    margin-right: 20px;
}
#footer .col3 {
    width: 111px;
    margin-right: 20px;
}
/*******************************************************
    navigation - persistent bottom
*******************************************************/
#persistent_bottom {
    position: absolute;
    left: 10px;
    top: 250px;
    clear: both;
}
#persistent_bottom a {
    font-weight: normal;
    text-decoration: none;
    color: #444;
}
#persistent_bottom a:hover {
    color: #008cd2;
}
/*******************************************************
    contact us
    
    this is a show/hide slideout feature that is used
    throughout the site as a contact us form. specific
    form styles are contained here as well.
*******************************************************/
#contactus {
    background: #999;
    width: 210px;
    float: left;
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
#contactus li {
    background: #fefefe url(/structural-images/bg_contactus.jpg) bottom left no-repeat;
    padding: 10px;
    margin: 0px;
    list-style: none;
}
#contactus li.menutitle {
    background: #fefefe url(/structural-images/bg_contactus_closed.png) top left no-repeat;
    height: 35px;
    font: normal 13px/35px Arial, Helvetica, sans-serif;
    padding: 0px 0px 0px 10px;
    color: #333;
    border: 0px;
}
#contactus li.form {
    background: #fefefe url(/structural-images/bg_contactus.jpg) bottom left no-repeat;
    border-top: 1px solid #ccc;
    display: none;
}
#contactus li.form li {
    background: none;
    border-top: 0px;
}
#contactus li.menutitle a,
#contactus li.menutitle a:hover {
    background: none;
    border: none;
    font: normal 13px/35px Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0px;
    margin: 0px;
    width: 190px;
    height: 35px;
}
#contactus li.open {
    background: #fefefe url(/structural-images/bg_contactus_closed.png) top left no-repeat;
}
#contactus li.open a, #contactus li.open a:hover {
    color: #008cd2;
}
#contactus li.close {
    background: #fefefe url(/structural-images/bg_contactus_top.jpg) top left no-repeat;
}
#contactus li.close a, #contactus li.close a:hover {
    color: #333;
}
#contactus li a {
    display: block;
    height: 24px;
    background: url(/structural-images/bg_subnav_off.gif) top left repeat-x;
    font: bold 10px/24px Arial, Helvetica, sans-serif;
    color: #008cd2;
    text-decoration: none;
    padding-left: 10px;
    border-top: 1px solid #ccc;
}
#contactus li a:hover {
    background: url(/structural-images/bg_subnav_on.gif) top left repeat-x;
    color: #fff;
}
#contactus li.form input.textbox {
    background-color: none;
    border: none;
    background: url(/structural-images/textbox_contact.png) bottom left no-repeat;
    width: 192px; height: 27px;
    padding: 0px 5px;
    font: 11px/27px Arial, Helvetica, sans-serif;
    color: #333;
    margin-bottom: 10px;
}
#contactus li.form select {
    background-color: none;
    width: 192px; height: 27px;
    padding: 5px 0px;
    font: 11px/27px Arial, Helvetica, sans-serif;
    color: #333;
    margin-bottom: 10px;
}
#contactus li.form textarea {
    background-color: none;
    border: none;
    background: url(/structural-images/textarea_contact.png) bottom left no-repeat;
    width: 192px; height: 77px;
    padding: 0px 5px;
    font: 11px/27px Arial, Helvetica, sans-serif;
    color: #333;
    margin-bottom: 10px;
}
#contactus li.form .button {
    background-color: none;
    border: none;
    background: url(/structural-images/button_submit.png) bottom left no-repeat;
    width: 93px; height: 28px;
    padding: 0px 5px;
    font: 10px/16px Arial, Helvetica, sans-serif;
    color: #fff;
    margin: 0px 10px 0px 0px; 
    text-transform: uppercase;
}
/*******************************************************
    collapsible
    
    duplicate of the contact us show/hide.  Is used for
    corportate fact sheet on investor page.  could be
    used elsewhere.
*******************************************************/
#collapsible {
    background: #999;
    width: 210px;
    float: left;
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    -moz-box-shadow: 0px 0px 5px #969696;
    -webkit-box-shadow: 0px 0px 5px #969696;
    box-shadow: 0px 0px 5px #969696;
    
    /* ie code */
    zoom: 1;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=2);
}
#collapsible li {
    background: #fefefe url(/structural-images/bg_contactus.jpg) bottom left no-repeat;
    padding: 10px;
    margin: 0px;
    list-style: none;
}
#collapsible li.menutitle {
    background: #fefefe url(/structural-images/bg_contactus_closed.png) top left no-repeat;
    height: 35px;
    font: normal 13px/35px Arial, Helvetica, sans-serif;
    padding: 0px 0px 0px 10px;
    color: #333;
    border: 0px;
}
#collapsible li.content {
    background: #fefefe url(/structural-images/bg_contactus.jpg) bottom left no-repeat;
    border-top: 1px solid #ccc;
    display: none;
}
#collapsible li.form li {
    background: none;
    border-top: 0px;
}
#collapsible li.menutitle a,
#collapsible li.menutitle a:hover
{
    background: none;
    border: none;
    font: normal 13px/35px Arial, Helvetica, sans-serif;
    color: #333;
    padding: 0px;
    margin: 0px;
    width: 190px;
    height: 35px;
}
#collapsible li.open {
    background: #fefefe url(/structural-images/bg_contactus_closed.png) top left no-repeat;
}
#collapsible li.open a, #collapsible li.open a:hover {
    color: #008cd2;
}
#collapsible li.close {
    background: #fefefe url(/structural-images/bg_contactus_top.jpg) top left no-repeat;
}
#collapsible li.close a, #collapsible li.close a:hover {
    color: #333;
}
#collapsible li a {
    display: block;
    height: 24px;
    background: url(/structural-images/bg_subnav_off.gif) top left repeat-x;
    font: bold 10px/24px Arial, Helvetica, sans-serif;
    color: #008cd2;
    text-decoration: none;
    padding-left: 10px;
    border-top: 1px solid #ccc;
}
#collapsible li a:hover {
    background: url(/structural-images/bg_subnav_on.gif) top left repeat-x;
    color: #fff;
}
.errorlabel
{
    color:#F62217;
    font:11px/15px Arial,Helvetica,sans-serif;
}