/* 06/23/2014 M. Thomas Added background-color: #27b6b8; to the input types of button so works in IE */ /* colors.... 007F82 dark teal 7FBFC0 pale teal -- ASK DOMINIQUE IF THIS IS RIGHT COLOR? 98cbcc pale teal - new one for sectionHeaderBar background 28475D blue DE740D orange (old efa585) 545454 lt gray 393939 dk gray */ /* body will be franklin gothic "Book" which is weight 400, normal; headings will be franklin gothic "Medium" (unbolded) which is weight 500 normal*/ body {width: 100%; margin: 0;} /* Center page without wrapper */ .wrapper {max-width: 960px; margin: 0 auto;} /* Center page without wrapper */ body, p, div, td, span, li, a {font-family: "franklin-gothic-urw",sans-serif; font-weight:400; font-style:normal; font-size:15px; line-height:18px;} .bolded {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal;} .error-msg {color: #DE740D; font-weight:bold} li {line-height:16px;} li>a {line-height:16px;} #content ul {padding:12px; text-indent: -15px; padding-left: 15px; padding-top: 5px; list-style:disc; list-style-type:disc; list-style-position:inside;} #content ul li {list-style:disc; list-style-type:disc; list-style-position:inside; padding:2px;} #content ul li.nobullet {list-style-type:none; line-spacing: 20px;} a {color: #007F82; text-decoration: none;} /*dark teal*/ a:hover {color: #DE740D; text-decoration: none;} /*orange*/ a.calendar {color: #007F82; text-decoration: underline; font-size: 11px} a.calendar:link {color: #007F82;} a.calendar:visited {color: #007F82;} a.calendar:active {color: #007F82;} a.calendar:hover {color: #DE740D;} h1, h2, h3, h4, h5, h6 {font-family: "minion-pro-n6", "minion-pro",serif; font-weight:600; color:#007F82;} /*dark teal*/ h1 {font-size:24px; padding-bottom:0; line-spacing:32px;} /*dark teal*/ h2 {font-size:22px; padding-bottom:0; padding-top: 3px; line-spacing:32px;} /*dark teal*/ h2.primaryContent {font-size:19px; padding-top:8px;} .data-table tr:nth-child(even) {background: #f7f6f0;} .data-table tr:nth-child(odd) {background: #fefefd;} .callout {background-color:#f7f6f0; margin:10px 0 20px 0; font-size:12px;} .calloutHeader {background-color:#98cbcc; padding:2px 2px 2px 5px;} .calloutHeader h2 {font-size:15px; color:#28475D; font-family: "franklin-gothic-urw",sans-serif; font-weight:500;} .calloutItem {font-size:12px; padding:5px; color:#393939; font-family: "franklin-gothic-urw",sans-serif;} .calloutItem a {font-size:12px; color:#007F82; text-decoration: none; font-family: "franklin-gothic-urw",sans-serif;} .calloutItem a:hover {color: #DE740D; text-decoration: none;} h3.calloutsubHeader {font-size:13px; font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; color:#393939; margin-bottom:1px;} /*dark gray*/ .sideBar {padding-bottom:30px;} .sideBar > h2 {font-size:16px; color:#28475D; font-family: "franklin-gothic-urw",sans-serif; font-weight:500;} .sideBar > h3 {font-size:15px; color:#28475D; font-family: "franklin-gothic-urw",sans-serif; font-weight:500; margin-bottom:1px;} h2.faqQuestion {font-size:16px; font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; color:#393939; margin-bottom:1px;} /*dark gray*/ h2.noPad {font-size:16px; font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; color:#393939; margin-bottom:1px;} /*dark gray*/ h3.noPad {font-size:16px; font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; color:#393939; margin-bottom:1px;} /*dark gray*/ h3.subHeader {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; color: #28475D; padding: 3px; font-size:16px;} h2.popup {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; color: #28475D; padding: 3px; font-size:16px;} .smallGray {color:#545454; font-size:12px;} div.detailOrderlink {margin-left:75px; margin-top:-20px; padding-top:1px; padding-right:5px;} div.detailOrderlink p {font-size:14px; } div.oneColFloatRight {margin-left:75px; margin-top:-20px; padding-top:1px; padding-right:5px;} div.oneColFloatRight p {font-size:14px; } div.twoColFloatRight {padding-top:1px; padding-right:5px;} div.twoColFloatRight p {font-size:14px; text-align:right } .hp_sideBar {padding-bottom:10px;} div.hp_sidebar_links {text-align:right; margin-top:8px; padding-top:1px; padding-right:1px;} /* used on Product landing */ /*.sectionHeaderBar {width:100%; font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; background-color: #98cbcc; color:#28475D; padding: 3px 5px 3px 5px; margin-bottom:10px; margin-right:2%;} */ /*light teal bkgd dark blue font*/ /* used on Product Detail in subsections */ /* 3/14/2015 was margin-bottom 10px and no margin-top*/ .subSectionHeaderBar {width:100%; background-color: #98cbcc; padding: 3px; margin-top:6px; margin-bottom:1px;} /*teal with dk blue font*/ .subSectionHeaderBar > h1 {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; color:#28475D; font-style:normal; font-size:15px; padding:0; margin:0;} .subSectionHeaderBar > h2 {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; color:#28475D; font-style:normal; font-size:15px; padding:0; margin:0;} .subSectionHeaderBar > h3 {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; color:#28475D; font-style:normal; font-size:15px; padding:0; margin:0;} .subSectionHeaderBar > h4 {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; color:#28475D; font-style:normal; font-size:15px; padding:0; margin:0;} /* 3/14/2015 was margin-bottom 10px and no margin-top*/ .subSectionHeaderBarDark {width:100%; background-color: #28475D; padding: 5px 3px 5px 3px; margin-top:10px; margin-bottom:1px;} /* dark blue with white font*/ .subSectionHeaderBarDark > h2 {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; color:#fff; font-style:normal; font-size:15px; padding:0; margin:0;} .subSectionHeaderBarDark > h3 {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; color:#fff; font-style:normal; font-size:15px; padding:0; margin:0;} .footnote {font-weight:300; font-style:normal; color:#545454; font-size:13px;} .footnote a {font-weight:300; font-style:normal; color:#007F82; font-size:13px;} input[type=submit].rounded { font-family: "franklin-gothic-urw",sans-serif; font-size:15px; color: #ffffff; padding: 4px 20px; background: -moz-linear-gradient( top, #27b6b8 0%, #008082); background: -webkit-gradient( linear, left top, left bottom, from(#27b6b8), to(#008082)); -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px; border: 1px solid #025f61; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); } a > button[type=button].rounded { font-family: "franklin-gothic-urw",sans-serif; font-size:15px; color: #ffffff; padding: 4px 20px; background-color: #27b6b8; background: -moz-linear-gradient( top, #27b6b8 0%, #008082); background: -webkit-gradient( linear, left top, left bottom, from(#27b6b8), to(#008082)); -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px; border: 1px solid #025f61; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); } input[type=submit].roundedSmall { font-family: "franklin-gothic-urw",sans-serif; font-size:12px; color: #ffffff; padding: 1px 10px 2px 10px; background: -moz-linear-gradient( top, #27b6b8 0%, #008082); background: -webkit-gradient( linear, left top, left bottom, from(#27b6b8), to(#008082)); -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px; border: 1px solid #025f61; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); } input[type=button].roundedSmall { font-family: "franklin-gothic-urw",sans-serif; font-size:12px; color: #ffffff; padding: 1px 10px 2px 10px; background-color: #27b6b8; background: -moz-linear-gradient( top, #27b6b8 0%, #008082); background: -webkit-gradient( linear, left top, left bottom, from(#27b6b8), to(#008082)); -moz-border-radius: 13px; -webkit-border-radius: 13px; border-radius: 13px; border: 1px solid #025f61; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); } hr {margin-top:10px; height:1px; border-width:0; color:#989898; background-color:#989898;} /*light gray*/ .slideshow-quote {color: #ea700d; font-size:24px; font-weight: bold;} .slideshow-quote-attribution {color: #ea700d; font-size:19px; float: right;} .testimonial {color: #DE740D; font-size:13px; line-height:15px;} /*orange*/ .testimonial .featureText {color:#28475D; font-size:16px; font-weight:500;} /*blue*/ .testimonial > h2 {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; color:#28475D; font-size:16px;} /*blue*/ .testimonial .author {color: #28475D; font-size:13px; line-height:15px; font-style:italic; margin-top:-15px;} /*blue*/ .rightColTestimonial {background-color: #7FBFC0; padding:10px 10px 2px 10px; color: #000; font-size:13px; line-height:15px;} /*lt teal bkgd*/ .rightColTestimonial .featureText {color:#28475D; font-size:16px; font-weight:bold;} /*blue*/ .rightColTestimonial h2 {font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; color:#28475D; font-size:16px;} /*blue*/ .rightColTestimonial .author {color: #000; font-size:13px; line-height:15px; font-style:italic; margin-top:-15px;} /*blue*/ .header-container {width:100%; color:#fff; height:80px; top:0; left:0; margin:0; padding:0; background-color:#007f82;} /*dark teal */ .header-logo {float:left; } /*padding-left:10px; padding-top:10px;*/ /*.header-logo img {padding-bottom:5px;}*/ .header-nav-icons {text-align:right; float:right; margin-right:10px; height:25px; width:157px;} .nav-icons {padding-right:10px; padding-top:5px; } .nav-icons img {border:none; float:left; vertical-align:text-bottom; padding:0; margin:0;} .nav-icons a {color: #fff; font-family: "franklin-gothic-urw",sans-serif; font-weight:500; font-style:normal; font-size:13px;} .nav-icons a:hover {color:#DE740D;} .nav-container {width:100%; height:33px; background-color:#007f82; top:0; left:0; margin:0;} .main-nav {display:block; list-style: none outside none; position: relative; z-index: 1000; float: left; height: 35px; line-height: 30px; padding: 0 0 0 80px;} .main-nav>li {margin-left:20px; padding-left: 10px; padding-right: 10px; float: left;} .main-nav>li>a {color:#ffffff;} .main-nav>li>a:hover {color:#80bfc1; text-decoration:none;} .nav-active { background-color: #28475D; } .main-nav>li .first {margin-left:80px;} .breadcrumbs { padding-top: 3px; text-align:left; clear: both; margin: 3px 0 1px 10px; } .breadcrumbs ul li { /*border-left: 1px solid #000000;*/ display: inline-block; list-style-type: none; margin: 0 0 1px 2px; padding: 0 0 0 2px; font-family: "franklin-gothic-urw",sans-serif; font-weight:400; font-style:normal; font-size:13px; color:#DE740D; /*orange (unlinked item)*/ } .breadcrumbs ul li:first-child { border-left: medium none; margin-left: 0; padding-left: 0; } .breadcrumbs ul li > a { font-size:13px; color:#007F82; /*dark teal*/ } .breadcrumbs ul li > a:hover { color:#DE740D; /*orange*/; } .breadcrumbs ul li > a .bullet, { color:#C70909; position:absolute; right:10px; font-size:20px; } .footer-container {height:20px; background-color:#007F82; margin:0; padding:4px;} .footer-container a {font-size:13px; color: #fff;} .footer-container a:hover {color:#DE740D;} /*orange*/ .footer-copyright {float:left; padding-left:10px; font-size:13px; color:#fff;} .footer-contact-info {text-align:right; float:right; padding-right:10px; font-size:13px; color:#fff;} /* Common Break Points: 320 px — Mobile portrait 480 px — Mobile landscape 600 px — Small tablet 768 px — Tablet portrait 1024 px — Tablet landscape/Netbook 1280 px & greater — Desktop */ @media only screen and (max-width: 1024px) { .main-nav {padding: 0; width:100%; } .first {margin-top:9px;} .main-nav>li {float:none; margin-left:0px; background-color:#28475D;} } /* for small tablet down to mobile */ @media only screen and (max-width: 720px) { .header-container { height:90px;} .nav-container { height:200px;} .header-nav-icons {float:none; text-align:left; padding-left:10px; margin-right:1px; vertical-align:bottom;} .footer-container { height:50px; font-size: 10px;} .footer-contact-info {float:none; text-align:left; padding-left:10px; margin-right:1px;} } @media only screen and ( max-width: 480px ) { .header-container { height:130px;} /* green header should shrink again sincemenu hidden now */ .nav-container { height:50px;}