/* ---------------------
Title: One Pica codebase - blank screen stylesheet
Filename: screen.css
Author: One Pica Inc, Boston MA
Table of Contents:
Searchstring (Section Name) Description
=General (General Styles): Set font sizes, Page backgrounds, link behaviors, etc
=Master (Master #container Styles): Placing, sizing, styling the main container
=Branding (Branding Styles): Logos, taglines, branding info
=Nav (Navigation Styles): The navigation bar; internal and external
=Forms (Form Styles) Set appearance of forms, inputs, buttons, etc
=Multicol (Multi-Column Styles): The cases where the content needs to be in multiple columns
=Headings (Heading Styles): through
=Content (Content Styles): The main content of the page
../...Further style sections go here../...
=Footer (Credit/Footer Styles): The footer
=Uni (Universal Styles): Classes and elements that apply throughout ('clear', 'blue', etc)
Common Color Table:
White: #FFFFFF;
Thanks To:
CSS structure/commenting: http://www.huddletogether.com/2006/02/16/practical-web-development-tips/
Markup structure: http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html
Stylesheet searchstring flags: http://www.stopdesign.com/log/2005/05/03/css-tip-flags.html
---------------------- */
/* =General
----------------------
General Styles applied to 'normalize' things
Notes:
'Em' styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc
100.01% font size from (http://www.communitymx.com/content/article.cfm?page=5&cid=FAF76)
Beginning "global reset" styles, to clear troublesome browser defaults,
are based on (http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/)
Note that most form elements are omitted; style those separately, further down.
---------------------- */
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
}
a img, :link img, :visited img {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ol, ul {
list-style: none;
}
/* Begin Actual Site Styles */
html {
font-size: 100.01%; /* Ensures font consistency across browsers */
height: 100%;
}
body {
font-size: 10px; /* Sets base font-size for browsers that resize text correctly */
line-height: 1.5; /* Sets base leading for lines of text */
background: #FFFFFF url("../../images/bg/body_bg.gif") center top no-repeat;
font-family: Arial, Tahoma, sans-serif;
height: 100%;
padding: 0;
border-top: 1px solid transparent;
}
p {margin-bottom: 1em; line-height: 1.5}
div, span, a {line-height: 1.5}
input, select, th, td {font-size: 1em}
h1 {font-size: 2em} /* 24px */
h2 {font-size: 1.5em} /* 18px */
h3 {font-size: 1.25em} /* 15px */
h4 {font-size: 1em} /* 12px */
h5 {font-size: 1em} /* 12px */
h6 {font-size: 1em} /* 12px */
strong {font-weight: bold}
em {font-style: italic}
sup {font-size: 50%; vertical-align: super;}
/* Basic link styles */
a, a:link {
color: #039;
text-decoration: none;
}
a:visited {
color: #039;
}
a:hover, a:active {
color: #039;
text-decoration: underline;
}
a:focus {
outline: none; /* Removes dotted outline in Firefox */
}
/* =Master
----------------------
Master Container
Notes:
margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag
---------------------- */
#container {
position: relative;
margin: 0px auto;
padding: 0;
width: 990px;
font-size: 1.2em; /* 12px (based on value from body) */
text-align: left; /* Normalize alignment; unfix all browsers from fix in IE stylesheet */
}
/* Skip link: This is the very first link anywhere on the page; by tabbing to it or hitting accesskey 2, a user can skip the header/navigation of a page and go directly to the page content. It is normally 'hidden' by being positioned far, far off the page; bringing it into focus with Tab makes it visible. */
#skiplink a {
position: absolute;
top: -1000px;
left: -2000px;
}
#skiplink a:focus, #skiplink a:active {
position: absolute;
margin: 0;
top: 0;
left: 0;
display: block;
padding: 0;
background: #000;
color: #fff;
font-weight: bold;
}
#skiplink a:hover {
}
/* =Branding
----------------------
Branding styles: Usually the logo and tagline
Notes:
Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)
---------------------- */
#branding {
display: block;
height: 31px;
width: 990px;
background: none;
margin: 0;
padding: 48px 0 0 0;
}
#branding-logo {
cursor: pointer;
width: 229px;
height: 31px; /* Set dimensions once here, and use 100% for all dimensions in both rules below */
margin: 0 0 0 20px;
}
#branding-logo h1 {
/* Uncomment this for Image Replacement -
the following rules set Image Replacement and neutralize h1's default behavior */
text-indent: -5000px;
overflow: hidden;
background: url("../../images/branding/logo.gif") 0px 0px no-repeat;
width: 100%;
height: 100%;
line-height: 1;
padding: 0;
margin: 0; /* Change this */
}
#branding-logo h1 a {
/* Also uncomment this for Image Replacement */
display: block;
width: 100%;
height: 100%;
}
#branding-info {
}
/* =Nav
----------------------
Navigation styles
Notes:
Navigation belongs in an UL tag with as the markup scheme.
Keep each of the below #elements as divs, and put the UL inside them
If there's a Left-Hand navigation, use #nav-section, give it a width & float it left
---------------------- */
#nav {
position: absolute;
left: 0;
top: 0;
}
#nav-main {
display: block;
position: absolute;
right: 0;
top: 0;
height: 27px;
width: 550px;
}
#nav-main ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#nav-main ul li {
position: relative;
list-style-type: none;
height: 21px;
padding: 6px 0 0 0;
margin: 0;
width: auto;
float: left;
display: block;
}
#nav-main ul li.current, #nav-main ul li:hover, #nav-main ul li.hover { background: #195498; }
#nav-main ul li.with-subnav:hover, #nav-main ul li.with-subnav-hover { height: 22px; }
#nav-main ul li.nav-image:hover, #nav-main ul li.nav-image-hover { background: #D7D7D7; }
#nav-main ul li.divider {
width: 1px;
height: 21px;
padding-top: 0;
margin-top: 6px;
background-color: #fff;
font-size: 0;
line-height: 0;
}
#nav-main ul li a {
display: block;
height: 21px;
padding: 0 24px;
text-decoration: none;
font-size: 1.2em;
line-height: 1.2em;
color: #808080;
font-weight: bold;
}
#nav-main ul li.current a, #nav-main ul li:hover a, #nav-main ul li.hover a {
color: #fff;
}
#nav-main ul li div {
position: absolute;
top: 28px;
display: none;
background-repeat: no-repeat;
background-position: 0 bottom;
padding: 15px 1px;
}
div.nav-main-drop-3col {
background-image: url(../../images/nav/nav_main_dropdown_3col_bg.gif);
width: 497px;
left: -188px;
}
div.nav-main-drop-2col {
background-image: url(../../images/nav/nav_main_dropdown_2col_bg.gif);
width: 305px;
left: -95px;
}
div.nav-main-drop-2col-wide {
background-image: url(../../images/nav/nav_main_dropdown_2col_wide_bg.gif);
width: 334px;
left: -237px;
}
#nav-main ul li:hover div.nav-main-drop-3col, #nav-main ul li.hover div.nav-main-drop-3col, #nav-main ul li:hover div.nav-main-drop-2col, #nav-main ul li.hover div.nav-main-drop-2col, #nav-main ul li:hover div.nav-main-drop-2col-wide, #nav-main ul li.hover div.nav-main-drop-2col-wide { display: block; }
#nav-main ul li div ul.column-list {
float: none;
clear: left;
height: auto;
}
#nav-main ul li div li.column {
float: left;
width: 140px;
height: auto;
padding: 0 10px 0 15px;
border-right: 1px solid #fff;
position: static;
}
#nav-main ul li div.nav-main-drop-2col li.column { width: 125px; }
#nav-main ul li div li.no-border { border-right-width: 0px; }
#nav-main ul li div span {
color: #9dbae3;
font-weight: bold;
}
#nav-main ul li div img {
display: block;
margin: 6px 0;
}
#nav-main ul li div ul.column-sub-list {
float: none;
height: auto;
}
#nav-main ul li div ul.column-sub-list li {
display: block;
float: none;
height: auto;
padding: 0;
position: static;
}
#nav-main ul li div ul.column-sub-list a {
border-width: 0px;
color: #fff;
text-decoration: underline;
display: inline;
font-size: 1em;
font-weight: normal;
height: auto;
padding: 0;
line-height: 1.4em;
}
#nav-section {
position: absolute;
left: 20px;
top: 0;
display: block;
height: 25px;
}
#nav-section ul li {
list-style-type: none;
height: 21px;
padding: 0px 0 0 0;
width: auto;
float: left;
display: block;
}
#nav-section ul li a {
display: block;
height: 16px;
padding: 8px 17px 0 17px;
text-decoration: none;
font-size: 0.9em;
line-height: 1em;
color: #5f5f5f;
border-top:3px solid #ddd;
}
#nav-section ul li a:hover {
border-top:3px solid #039;
}
#nav-external {
}
/* =Forms
----------------------
Form styles
Notes:
A
should always enclose every label-input (or label-select) pair.
Widths are in % to start, so that they scale, but they are the attributes most likely to change.
Remember -- the IE stylesheet has different percentage widths to start.
---------------------- */
.frm {
display: block;
margin: 0;
padding: 0;
width: 100%;
}
.frm .frmerror
{
color:Red;
float:right;
margin-right: 20px;
}
.frm .asplabel, #contactform label {
display: inline;
float: left;
width: 35%;
padding: 0 5% 0 0;
margin: 0;
height:20px;
}
fieldset {
border: 0px solid;
padding: 0;
margin: 0 0 1.4em 0;
}
.frm p {
display: block;
clear: both;
margin: 0 0 0.4em 0;
padding: 0;
}
.frm label {
display: inline;
float: left;
width: 35%;
padding: 0 5% 0px 0;
margin: 0;
}
.frm input, .frm select, .frm textarea {
float:left;
margin: 0;
padding: 0;
margin-bottom:16px;
width: 50.2%; /* CLOSE to full width; use pixels for the real thing */
font-size: 1em;
border: solid 1px #999;
border-bottom-color: #ccc;
background-color: #fff;
font-family: Arial, Tahoma, sans-serif;
}
.frm input {height: 1.3em}
.frm select {width: 59.5%; height: 1.5em} /* Selects are not the same as inputs */
.frm textarea {height: 6em}
/* Radio buttons */
.frm input.radio, .frm input.radiobtn {
text-align: left;
width: 1.3em;
margin: 0.3em 0.2em 0 0;
padding: 0;
border: none;
background: none;
}
.frm .radiotext {
margin: 0 1em 0 0;
}
/* Check boxes */
.frm input.ckbx, .frm input.checkbox {
text-align: left;
width: 1.2em;
margin: 0.3em 0.2em 0 0;
padding: 0;
border: none;
background: none;
}
.frm p.indent { /* For buttons or text that need to align with inputs/selects */
margin-left: 40%;
}
.frm p.xspa { /* "extra space after" */
margin-bottom: 2.0em;
}
.frm .req, form .required {
color: red;
}
.frm input.contactsubmit {
background: url("../../images/buttons/go.gif") left top no-repeat;
border:0px;
height:30px;
}
.frm input:focus {
/* however we want the focused field to look */
}
.frm input.submit, button { /* There are lots of default values to fix */
padding: 1px 2px;
background: #f6f6f6;
color: #555;
font-size: 0.9em;
font-weight: bold;
height: auto;
width: auto;
cursor: pointer;
font-family: inherit;
}
.frm input.submit:hover, button:hover { /* IE6 can't see these, too bad */
}
.frm input.submit:active, button:active { /* Button 'feedback' behavior */
}
/* =Headings
----------------------
through styles
---------------------- */
h1 {
color: #1b3881;
font-weight:bold;
margin-bottom:10px;
}
h2 {
font-size:1.75em;
color: #1b3881;
font-weight:bold;
margin-bottom:10px;
}
h3 {
margin: 1em 0 0 0;
font-size: 1.4em;
}
h4 {
color: #1b3881;
color: #666;
font-weight: bold;
font-size: 1.5em;
margin: 0 0 0.5em 0;
}
.green, .green h4 {
color: #769d16;
}
.grey, .grey h4 {
color: #374245;
}
h5 {
color: #5f5f5f;
font-weight: bold;
font-size: 1.1em;
margin-top: 20px;
}
h6 {}
h4.replace {
line-height:0;
text-indent:-5000px;
width:auto;
}
h4.replace-commutercheck {
background: url("../../images/headers/commuter_check.gif") left top no-repeat;
height: 23px;
width: 166px;
margin-bottom: 0.5em;
}
h4.replace-commutercheckoffice {
background: url("../../images/headers/commuter_check_office.gif") left top no-repeat;
height: 32px;
width: 237px;
margin-bottom: 0.5em;
}
h4.replace-commutercheckdirect {
background: url("../../images/headers/commuter_check_direct.gif") left top no-repeat;
height: 32px;
width: 237px;
margin-bottom: 0.5em;
}
h4.replace-commutercheckoffice-small {
background: url("../../images/headers/commuter_check_office-small.gif") left top no-repeat;
height: 32px;
width: 180px;
margin-bottom: 0.5em;
}
h4.replace-commutercheckdirect-small {
background: url("../../images/headers/commuter_check_direct-small.gif") left top no-repeat;
height: 32px;
width: 180px;
margin-bottom: 0.5em;
}
/* =Multicol
----------------------
Multi-Column Content styles
Notes:
These columns should be used for text within #content.
Values are in percentages to start off -- remember that the IE stylesheet has different values.
If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels
---------------------- */
.twoColumnLayout {
float: left;
clear: none;
width: 440px;
padding: 0;
line-height: 1.4em;
color: #5f5f5f;
}
.twoColumnLayout.oneColumn {
padding-left:20px;
width:580px !important;
}
.twoColumnLayout.oneColumn .date {
float:left;
font-size:14px;
font-weight:bold;
width:100px;
}
.twoColumnLayout.oneColumn .news {
float:left;
width:480px;
margin-bottom:18px;
}
.twoColumnLayout.oneColumn .news a {
font-size:14px;
font-weight:bold;
}
.twoColumnHeader {
float:left;
margin-top:20px;
margin-left:20px;
width:580px;
border-bottom:1px solid #ccc;
}
.twoColumnHeader.divider {
padding-top:10px;
border-top:3px solid #ccc;
}
.twoColumnRight {
margin-left: 40px;
}
.twoColumnLayout h3 {
margin-top: 1.4em;
margin-left: 20px;
color: #1b3881;
font-weight: bold;
font-size: 1.4em;
}
.twoColumnLayout .twoColumnLayout {
width: 180px;
margin: 1em 0 0 20px;
padding: 0;
}
.twoColumnLayout .twoColumnLayout p {
font-size: 0.9em;
}
.content-home .twoColumnLayout .twoColumnLayout p { font-size: 1em; }
.twoColumnLayout .twoColumnRight {
margin-left: 40px;
}
.twoColumnRight .twoColumnLayout {
width: 200px;
}
.twoColumnRight .twoColumnLayout h4 {
margin-top: 1em;
}
.twoColumnRight .twoColumnLayout p {
line-height: 1.6em;
width: 175px;
}
.twoColumnRight .twoColumnRight {
margin-left: 20px;
}
.twoColumnLayout.prod-intro {
width:350px !important;
}
.twoColumnLayout.prod-products {
width:200px !important;
}
.twoColumnLayout.prod-products li {
font-size:14px;
}
.twoColumnLayout.prod-products a {
color:#039;
text-decoration:none;
line-height:16px;
}
.threeColumnLayout {
width: 30%;
float: left;
clear: none;
}
.threeColumnLeft {
margin-right: 4%;
}
.threeColumnMiddle {
margin-right: 4%;
}
.threeColumnRight {
margin-right: 0;
}
/* =Content
----------------------
Main Content styles
Notes:
Font-size is inherited, so some math will be necessary to size child elements up or down correctly
---------------------- */
#content {
font-size: 1em; /* Inherits 12px from #container */
padding-left: 44px;
width: 945px;
}
#content-main {
}
#content-news {
}
#content .product-intro {
font-size:14px;
line-height:22px;
/*color:#1b3881;*/
}
.content-home {
background: url("../../images/headers/header_home.jpg") left top no-repeat;
padding-top: 236px;
padding-left: 45px !important;
}
.content-about {
background: url("../../images/headers/header_about.jpg") left top no-repeat;
padding-top: 185px;
}
.content-partners {
background: url("../../images/headers/header_partners.jpg") left top no-repeat;
padding-top: 185px;
}
.content-savegreen {
background: url("../../images/headers/header_savegreen.jpg") left top no-repeat;
padding-top: 185px;
}
.content-news {
background: url("../../images/headers/header_news.jpg") left top no-repeat;
padding-top: 185px;
}
.content-siteinfo {
background: url("../../images/headers/header_siteinfo.jpg") left top no-repeat;
padding-top: 185px;
}
.content-employers {
background: url("../../images/headers/header_employers.jpg") left top no-repeat;
padding-top: 184px;
}
.content-employees {
background: url("../../images/headers/header_employees.jpg") left top no-repeat;
padding-top: 185px;
}
.content-contact {
background: url("../../images/headers/header_contact.jpg") left top no-repeat;
padding-top: 185px;
}
.content-contactWP {
background: url("../../images/headers/header_contactWP.jpg") left top no-repeat;
padding-top: 185px;
}
.content-fed {
background: url("../../images/headers/header_fed.jpg") left top no-repeat;
padding-top: 185px;
}
.content-personalized {
background: url("../../images/headers/header_personalized.jpg") left top no-repeat;
padding-top: 185px;
}
.content-card {
background: url("../../images/headers/header_card.jpg") left top no-repeat;
padding-top: 185px;
}
.content-cccard {
background: url("../../images/headers/header_cccard.jpg") left top no-repeat;
padding-top: 185px;
}
.content-calculator {
background: url("../../images/headers/header_calculator.jpg") left top no-repeat;
padding-top: 185px;
float: left;
}
.home-header-helper {
display: block;
height: 1%; /* fix IE7 display oddity */
background: url("../../images/bg/home_emp_bg.gif") left bottom no-repeat;
}
.content-header-bottom { width: 613px; height: 10px; line-height: 0; font-size: 0; background: transparent url(../../images/bg/content_header_bottom.gif) 0 0 no-repeat; float: left; }
.two-header-column {
width: 400px;
padding: 0px 20px 0 20px;
float: left;
color: #FFFFFF;
font-size: 1.25em;
line-height: 1.5em;
}
.two-header-column-right {
margin-left: 40px;
}
.two-header-column h3.replace {
display: none;
}
.two-header-column p {
margin-bottom: 8px;
}
.two-header-column strong {
font-size: 110%;
line-height: 100%;
}
.single-column {
width: 614px;
}
.single-header-column {
width: 573px;
padding: 18px 20px 6px 20px;
background: url("../../images/bg/single_header_bg.jpg") left bottom no-repeat;
float: left;
}
.single-header-column-thin {
width: 613px;
height: 20px;
background-color: #daebf3;
}
.single-header-column-dark {
background-image: url(../../images/bg/single_header_dark_bg.gif);
}
.single-header-column p {
color: #1b3881;
font-size: 1.2em;
line-height: 1.5em;
}
.single-header-column-dark p { color: #fff; }
.single-header-column.image-header {
padding:0px;
background:none;
}
.single-header-column-flat
{
width: 574px;
padding: 18px 20px 6px 20px;
background-color: #daebf3;
float: left;
}
.support-column {
width: 280px;
float: right;
display: inline;
margin: 25px 28px 0 0
}
.support-column .cta {
margin-bottom: 10px;
}
.single-column .twoColumnLayout {
width: 275px;
margin: 10px 0 0 25px;
padding: 15px 0px;
}
.single-column .twoColumnRight {
margin-left: 30px;
}
.content-employers .single-column, .content-employees .single-column { float: left; }
/****** CONTENT ******/
#content ul {
list-style: none;
margin: 20px 0 20px 0;
}
#content ul li {
list-style-type: none;
padding: 0 0 0 17px;
margin: 0.3em 0;
background: url("../../images/bg/bullet.gif") left 0.3em no-repeat;
line-height: 1.4em;
color: #5f5f5f;
}
#content ul.intro-bullets {
margin:0px;
font-size:13px;
}
.right-button {
float: right;
}
.left-button {
float: left;
}
a.small-bullet {
background: url("../../images/bg/bullet.gif") 0px 4px no-repeat;
padding: 0 0px 0 13px;
text-decoration:none;
font-size:11px;
}
a.small-bullet.leftsb {
padding-right: 13px;
}
button.button-red, button.button-red:hover {
height: 28px;
display: block;
border-width: 0px;
padding: 0;
margin: 0 0 15px 0;
text-indent: -5000px;
overflow: hidden;
}
.button-learnmore-red {
width: 109px;
height: 28px;
display: block;
background: url("../../images/buttons/learn_more_red.gif") left top no-repeat;
text-indent: -5000px;
overflow: hidden;
margin: 0 0 15px 0;
}
.button-learnmore-blue, .button-learnmore-grey {
width: 78px;
height: 22px;
display: block;
background: url("../../images/buttons/learn_more_blue.gif") left top no-repeat;
text-indent: -5000px;
overflow: hidden;
margin: 0 0 15px 0;
}
.button-signin-red {
width: 65px;
height: 28px;
display: block;
background: url("../../images/buttons/signin_red.gif") left top no-repeat;
text-indent: -5000px;
overflow: hidden;
margin: 0 0 15px 0;
}
.button-next-red {
width: 54px;
background: url("../../images/buttons/next_red.gif") left top no-repeat;
}
.button-reset-password-red {
width: 130px;
background: url("../../images/buttons/reset-password_red.gif") left top no-repeat;
}
.button-calculate-red {
width: 85px;
background: url("../../images/buttons/calculate_red.gif") left top no-repeat;
}
.button-learnmore-grey {
background: url("../../images/buttons/learn_more_grey.gif") left top no-repeat;
}
.home-solution-finder {
background: url("../../images/bg/home_form_bg.gif") left top no-repeat;
height: 85px;
padding: 20px 20px 0 20px;
width: 399px;
margin: 10px 0 0 0;
}
.secondary-solution-finder {
background: url("../../images/bg/secondary_form_bg.gif") left top no-repeat;
height: 85px;
padding: 20px 20px 0 20px;
width: 570px;
margin: 10px 0 20px 0;
}
.solution-finder h3 {
margin: 0;
}
.secondary-solution-finder h3 {
color: #1b3881;
font-weight:bold;
}
.solution-finder form {
padding: 20px 0;
}
.solution-finder form label, .solution-finder form input, .solution-finder form select {
width: auto;
float: left;
margin: 0 10px 0 0;
padding: 2px 0 0 0;
}
.secondary-solution-finder form label {
font-weight: bold;
color: #5F5F5F;
}
.solution-finder form select {
margin-right: 15px;
padding: 0;
width: 70px;
}
.secondary-solution-finder form select {
margin-right: 30px;
}
.solution-finder form button.go, .solution-finder form input.go, button.go {
display: block;
background: transparent url("../../images/buttons/go.gif") 0 0 no-repeat;
height: 22px;
width: 40px;
text-indent: -5000px;
overflow: hidden;
border-width: 0px;
padding: 0;
margin: 0;
}
.plant {
background: url("../../images/bg/plant.gif") right bottom no-repeat;
}
.train {
background: url("../../images/bg/train.gif") right 170px no-repeat;
}
/****** CALLOUTS ******/
.callout {
position: relative;
width: 262px;
padding: 0 15px;
margin-bottom: 17px;
background-position: 0 0;
background-repeat: no-repeat;
overflow: hidden;
}
a.callout { display: block; }
.callout h4 {
display: block;
visibility: hidden;
height: 55px;
margin: 0;
padding: 0;
}
.callout h5 {
color: #fff;
margin: 0 0 4px 0;
}
.callout .image-replace, .callout h5 { display: none; }
.callout .absolute {
position: absolute;
text-indent: -5000px;
}
.callout a.double-arrow { display: block; }
.callout-signin {
background-image: url(../../images/bg/callout_signin.gif);
height: 239px;
}
.callout-signin form {
width: 200px;
height: 73px;
}
.callout-signin form label {
color: #fff;
padding-top: 2px;
width: 30%;
}
.callout-signin form input {
margin: 0 0 5px;
width: 55%;
}
.callout-signin-sm {
background-image: url(../../images/bg/callout_signin_sm.gif);
height: 161px;
}
.callout-signin-sm h4 { height: 52px; }
.callout-signin-med {
background-image: url(../../images/bg/callout_signin_med.gif);
height: 226px;
}
.callout-signin-med h4 { height: 70px; }
.callout-signin-lg {
background-image: url(../../images/bg/callout_signin_lg.gif);
height: 276px;
}
.callout-signin-lg h4 { height: 84px; }
.callout-signin-sm a.double-arrow, .callout-signin-lg a.double-arrow, .callout-signin-med a.double-arrow, .callout-signin-sm a.double-arrow:hover, .callout-signin-lg a.double-arrow:hover, .callout-signin-med a.double-arrow:hover, .callout-signin-sm a.double-arrow:visited, .callout-signin-lg a.double-arrow:visited, .callout-signin-med a.double-arrow:visited { margin-top: 31px; color: #b3caec; }
.callout-faq {
background-image: url(../../images/bg/callout_faq.gif);
height: 140px;
}
.callout-faq-red {
background-image: url(../../images/bg/callout_faq_red.gif);
height: 140px;
}
.callout-calcsavings {
background-image: url(../../images/bg/callout_calcsavings.gif);
height: 123px;
}
.callout-solution-largeco {
background-image: url(../../images/bg/callout_solution-largeco.gif);
height: 193px;
}
.callout-solution-largeco h4, .callout-solution-smallco h4 { height: 165px; }
.callout-solution-largeco .absolute, .callout-solution-smallco .absolute {
top: 85px;
left: 15px;
width: 210px;
height: 20px;
}
.callout-solution-smallco {
background-image: url(../../images/bg/callout_solution-smallco.gif);
height: 193px;
}
.callout-livehelp { height: 113px; }
.callout-livehelp h4 { height: 82px; }
.callout-livehelp-online { background-image: url(../../images/bg/callout_live-help_online.gif); }
.callout-livehelp-idle { background-image: url(../../images/bg/callout_live-help_idle.gif); }
.callout-livehelp-offline { background-image: url(../../images/bg/callout_live-help_offline.gif); }
.callout-become-env-partner {
background-image: url(../../images/bg/callout_become-env-partner.gif);
height: 101px;
}
.callout-become-partner {
background-image: url(../../images/bg/callout_become-partner.gif);
height: 88px;
}
.callout-dont-have-benefits {
background-image: url(../../images/bg/callout_dont-have-benefits.gif);
height: 168px;
}
.callout-dont-have-benefits h4 { height: 96px; }
button.go-light { background-image: url(../../images/buttons/go_light.gif) }
a.newsletter-signup {
display: block;
width: 207px;
height: 32px;
margin: 15px 0;
background: transparent url(../../images/bg/newsletter_signup.gif) 0 0 no-repeat;
text-indent: -5000px;
}
a.tell-employer {
display: block;
width: 165px;
height: 32px;
margin: 15px 0;
background: transparent url(../../images/bg/tell_employer.gif) 0 0 no-repeat;
text-indent: -5000px;
}
a.tell-a-friend {
display: block;
width: 104px;
height: 32px;
margin: 15px 0;
background: transparent url(../../images/bg/tell_a_friend.gif) 0 0 no-repeat;
text-indent: -5000px;
}
a.print-page {
display: block;
width: 119px;
height: 32px;
margin: 15px 0;
background: transparent url(../../images/bg/print_page.gif) 0 0 no-repeat;
text-indent: -5000px;
}
/****** HOME ******/
.content-home .cta-cc {
float: left;
width: 196px;
height: 184px;
background-position: 0 0;
background-repeat: no-repeat;
margin: 17px 0 0;
padding-left: 15px;
}
.content-home .cta-cc-office {
background-image: url(../../images/bg/home_commuter-check_office_callout.gif);
margin-right: 18px;
}
.content-home .cta-cc-direct {
background-image: url(../../images/bg/home_commuter-check_direct_callout.gif);
}
.content-home .cta-cc a { float: left; margin: 141px 7px 0 0; }
img.header-icon {
float: right;
margin: 0 0 4px 4px;
}
/****** SOLUTIONS ******/
.commuter-check-office-header {
background: transparent url(../../images/headers/commuter_check_office_sub.gif) 0 0 no-repeat;
height: 80px;
}
.commuter-check-direct-header {
background: transparent url(../../images/headers/commuter_check_direct_sub.gif) 0 0 no-repeat;
height: 80px;
}
#solutions, #employees {}
.solutions-content, .employees-content {
background: transparent url(../../images/bg/solutions_content_bg.gif) 0 0 no-repeat;
min-height: 45px;
}
.solutions-content h3, .employees-content h3 {
font-weight: normal;
font-size: 1.2em;
line-height: 1.5em;
color: #666;
margin: 0;
}
#content .solutions-content ul, #content .employees-content ul { margin: 10px 0; }
ul#nav-content {
padding-left: 10px;
margin: 0;
height: 36px;
}
.what-is-it ul#nav-content { background: #fff url(../../images/nav/solutions_nav_what.gif) 0 0 no-repeat; }
.how-does-it-work ul#nav-content { background: #fff url(../../images/nav/solutions_nav_how.gif) 0 0 no-repeat; }
.success-stories ul#nav-content { background: #fff url(../../images/nav/solutions_nav_success.gif) 0 0 no-repeat; }
.made-for-you ul#nav-content { background: #fff url(../../images/nav/employees_nav_madeforyou.gif) 0 0 no-repeat; }
.products ul#nav-content { background: #fff url(../../images/nav/employees_nav_products.gif) 0 0 no-repeat; }
.tell-employer ul#nav-content { background: #fff url(../../images/nav/employees_nav_tellemployer.gif) 0 0 no-repeat; }
ul#nav-content li {
float: left;
padding: 0;
margin: 0;
background-image: none;
}
ul#nav-content li a {
display: block;
width: 112px;
height: 27px;
text-indent: -5000px;
}
.what-is-it ul#nav-content li a { }
.how-does-it-work ul#nav-content li a { width: 168px; }
.success-stories ul#nav-content li a { width: 152px; }
.made-for-you ul#nav-content li a { width: 158px; }
.products ul#nav-content li a { width: 168px; }
.tell-employer ul#nav-content li a { width: 152px; }
ul#nav-content li a.products { width: 100px; }
.content-employers .cta-cc {
float: left;
width: 272px;
height: 214px;
background-position: 0 0;
background-repeat: no-repeat;
margin: 28px 0 0;
padding-left: 20px;
}
.content-employers .cta-cc-office {
background-image: url(../../images/bg/employers_commuter-check_office_callout.gif);
margin-right: 29px;
}
.content-employers .cta-cc-direct {
background-image: url(../../images/bg/employers_commuter-check_direct_callout.gif);
}
.content-employers .cta-cc a { float: left; margin: 165px 7px 0 0; }
/****** Sign In ******/
#signin { width: auto; padding: 10px 0 15px 25px; margin: 0; color: #5f5f5f; background: transparent url(../../images/bg/solutions_content_bg.gif) no-repeat 0 0;}
#signin p { clear: both; margin-bottom: 0.6em; }
#signin p.button-set { padding-top: 12px; }
#signin label { width: 54%; padding-top: 3px; font-weight: bold; line-height: 1.5em; }
#signin label.radio { font-weight: normal; padding-top: 1px; padding-left: 3px; }
#signin label.bold { font-weight: bold; }
#signin label .note { font-weight: normal; line-height: 1em; }
#signin .col-2-set label { width: 35%; }
#signin input, #signin select { float: none; width: 216px; height: auto; margin-bottom: 0; padding: 2px; }
#signin .col-2-set input { width: 50.2%; }
#signin input.radio { float: left; width: 1.3em; }
#signin select { width: 221px; padding: 1px; }
#signin .col-2-set select { width: 59.5%; }
#signin a { color: #5f5f5f; text-decoration: underline; }
#signin a:hover { text-decoration: none; }
#signin a.double-arrow-blue { color: #1c3881; text-decoration: none;}
#signin a.double-arrow-blue:hover { text-decoration: underline; }
#signin h5 { margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: normal; }
#signin h5.red { color: #ed1c24; }
#signin .required-text { float: left; padding: 5px 0 0 30px; }
#signin table { margin-top: 6px; }
#signin table tr td { width: 125px; vertical-align: top; padding-right: 10px; }
#signin table tr td.col-1 { width: 125px; padding-top: 3px; font-weight: bold; }
#signin table tr td label { width: auto; }
.col-2-set { float: left; width: 100%; clear: both; padding-top: 6px; }
.col-2-set .col-1 { float: left; width: 318px; border-right: 1px solid #ccc; margin-right: 23px; }
.col-2-set .col-2 { float: left; width: 230px; }
.col-2-set .no-border { border-width: 0px; }
/****** Calculator ******/
.calculator { padding: 10px 0 30px 25px; color: #5f5f5f; }
.calculator p { margin: 0; padding: 4px 0; }
.calculator p.first { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 14px; font-weight: bold; padding: 6px 0; margin-bottom: 12px; }
.calculator p.first label { width: 485px; }
.calculator fieldset { border-top: 1px solid #ccc; }
.calculator label { float: left; width: 450px; padding-top: 4px; }
.calculator fieldset label { width: 400px; }
.calculator input, .calculator select { display: inline; width: 94px; height: auto; margin-bottom: 0; padding: 2px; }
.calculator fieldset input { width: 144px }
.calculator fieldset input.radioinput { width: 1.3em; margin-left: 4px; }
.calculator select { width: 100px; }
.calculator fieldset select { width: 150px; }
.calculator button, .calculator button:hover { margin-bottom: 0; }
.calculator h2 { margin: 10px 0 18px; }
.calculator h4 { font-size: 14px; }
.calculator fieldset h4 { padding: 8px 0; border-bottom: 1px dotted #ccc; }
.calculator h5 { margin-top: 0; padding: 8px 0; }
.calculator .dotted { margin-bottom: 8px; }
.calculator .dotted h5, .calculator .dotted p { border-bottom: 1px dotted #ccc; }
.calculator .dotted p.no-border { border-width: 0px; }
.calculator .dotted p { padding-left: 36px; }
.calculator span.with-button { float: left; font-weight: bold; margin: 3px 10px 0 0; font-size: 14px; }
.blue-content-top { height: 10px; background: transparent url(../../images/bg/blue-content_top.gif) 0 0 no-repeat; font-size: 0; line-height: 0; }
.blue-content-bottom { height: 10px; background: transparent url(../../images/bg/blue-content_bot.gif) 0 0 no-repeat; font-size: 0; line-height: 0; }
.blue-content { background-color: #c8e6f1; padding: 2px 25px; }
.blue-content p { padding: 8px 0; margin: 0; border-top: 1px solid #a6bfc8; font-size: 14px; color: #5f5f5f; }
.blue-content p span { font-weight: bold; padding-right: 2px; white-space: nowrap; }
.blue-content p span.red { color: #ed1c24; }
.blue-content label { float: right; color: #000; font-weight: bold; padding-top: 3px; }
/* =Footer
----------------------
Credit/footer styles: Usually the copyright/company info
Notes:
---------------------- */
#siteinfo {
margin-top: 25px;
width: 100%;
background: url("../../images/bg/footer_bg.gif") left top repeat-x;
height: 83px;
clear: both;
}
#siteinfo-legal { /* Usually the copyright notice */
background: url("../../images/inline/making_life_work_better.gif") left top no-repeat;
width: 180px;
height: 31px;
margin: 22px 0 0 40px;
display: block;
float: left;
text-indent: -5000px;
overflow: hidden;
}
#siteinfo-links { /* Usually Terms, Privacy and Accessibility */
float: right;
margin: 32px 10px 0 0;
}
#siteinfo-links ul {
}
#siteinfo-links ul li {
width: auto;
float: left;
padding: 0 10px;
background: url("../../images/bg/footer_item_sep.gif") right center no-repeat;
color: #5f5f5f;
font-size: 0.9em;
}
#siteinfo-links ul li.last {
background: none;
}
#siteinfo-links ul li a {
color: #5f5f5f;
text-decoration: none;
}
#siteinfo-image {
float: right;
width: 90px;
height: 32px;
margin: 26px 35px 0 0;
}
/* =Uni
----------------------
Universal styles: Styles that apply to elements found throughout the site
Notes:
The best example of this is the "clear" div
---------------------- */
.op { position:absolute; margin-left:6000px; display:none; }
.clear {clear: left}
.clear-right {clear: right}
.clear-both {clear: both}
.clear-none {clear: none;}
.bold {font-weight: bold}
.em {font-style: italic}
div.hr {
border-top: 1px solid #ccc;
height: 1px;
margin: 8px 0 8px 0;
font-size: 0;
}
hr {
display: block;
clear: both;
border: 0px;
background:transparent url(../../images/bg/hr_bg.gif) 0 0 repeat-x;
height: 2px;
margin: 0.8em 0;
line-height: 0em;
}
hr.double {
background-image: url(../../images/bg/hr_double_bg.gif);
height: 3px;
}
a.pdf, a.pdf:hover, a.pdf:visited, a.pdf:active {
background: url(../../images/icons/pdf_sm.gif) 0 2px no-repeat;
padding-left: 20px;
color: #666;
text-decoration: underline;
}
a.double-arrow, a.double-arrow:hover, a.double-arrow:visited, a.double-arrow:active {
background: url(../../images/icons/a_double-arrow.png) 0 3px no-repeat;
padding-left: 23px;
color: #333;
text-decoration: none;
}
a.double-arrow:hover { text-decoration: underline; }
a.double-arrow-green, a.double-arrow-green:hover, a.double-arrow-green:visited, a.double-arrow-green:active {
background-image: url(../../images/icons/a_double-arrow_green.gif) !important;
font-weight: bold;
color: #666;
}
a.double-arrow-blue, a.double-arrow-blue:hover, a.double-arrow-blue:visited, a.double-arrow-blue:active {
background-image: url(../../images/icons/a_double-arrow_blue.gif) !important;
font-weight: bold;
color: #666;
}
a.double-arrow-ltblue, a.double-arrow-ltblue:hover, a.double-arrow-ltblue:visited, a.double-arrow-ltblue:active {
background-image: url(../../images/icons/a_double-arrow_ltblue.gif) !important;
font-weight: bold;
color: #666;
line-height: 1.2em;
}
.fat {
height: 12px;
}
.fat-pad {
padding-top: 12px;
}
.thin {
height: 5px;
}
.thin-pad {
padding-top: 5px;
}
.header {
font-weight: bold;
}
.align-right {
text-align: right;
}
.hidden {
display: none;
}
.fleft { float:left; }
.fright { float:right; }
.footnote
{
font-size:10px;
color:#999;
}
.error
{
height:1px;
line-height:1px;
display:inline;
padding:0px;
margin:0px;
font-size:0px;
position:absolute;
left:-1000px;
}
.topdivider
{
border-top:1px solid #ccc;
}
#tree, .tree {}
#tree ul, #content .tree ul {
display: block;
padding:0px;
margin:0px;
background-image:none;
}
#tree ul li, #content .tree ul li {
background-image: none;
display: none;
padding:0px;
margin:0px;
font-size: 0.9em;
clear: both;
}
#tree li {
border-top: 1px solid #ddd;
}
#tree li a {
font-size:11px;
background:none;
display: block;
padding:0px;
margin:0px;
}
#tree li.branch, #content .tree li.branch {
font-size:14px;
background:none;
display: block;
padding: 0;
margin: 0;
}
.tree li.branch {
margin-bottom: 4px !important;
}
.tree span {
color: #1c3881;
font-size: 0.9em;
cursor: pointer;
}
.tree li span {
background: transparent url('../../images/icons/li_box_closed.gif') 0 center no-repeat;
padding-left: 16px;
}
.tree li span.show {
background: transparent url('../../images/icons/li_box_open.gif') 0 center no-repeat;
padding-left: 16px;
}
.tree li ul li { margin-left: 18px !important; }
.tree li ul li ul li {
margin-left: 0px !important;
padding: 6px 12px !important;
background-color: #e5e5e5 !important;
font-size: 0.9em;
}
.tree p {
margin-bottom: 0;
width: 400px;
line-height: 1.3em;
}
.tree img {
float: right;
}
#tree li.open, #content .tree ul li.open {
display: block;
margin:3px 0px;
}
#tree span, .tree li ul span {
display: block;
background: transparent url('../../images/nav/red_arrow.gif') 0 center no-repeat;
padding: 3px 0 3px 12px;
font-weight: bold;
cursor: pointer;
/*color: #a0390d; */
}
.tree li ul span {
font-weight: normal;
color: #666;
padding-left: 12px;
}
#tree label, .tree label {
width:200px;
padding: 3px 40px 3px 12px;
font-weight: bold;
font-size:11px;
float:left;
/*color: #a0390d; */
}
#tree span.show, .tree li ul li span.show {
background-image: url('../../images/nav/red_arrow_down.gif');
font-weight: bold;
padding-left: 12px;
}
/****** PARTNERS ******/
#partners
{
clear: left;
}
#partners ul
{
margin: 0;
}
#partners ul li
{
background-image: none;
padding: 0;
margin: 0;
}
#partners h4
{
margin: 0;
}
#partners ul#nav-content
{
padding-left: 10px;
margin: 0;
height: 36px;
}
.partners-list ul#nav-content
{
background: #fff url(../../images/nav/partners_nav_list.gif) 0 0 no-repeat;
}
.partners-map ul#nav-content
{
background: #fff url(../../images/nav/partners_nav_map.gif) 0 0 no-repeat;
}
#partners ul#nav-content li
{
float: left;
padding: 0;
margin: 0;
background-image: none;
}
#partners ul#nav-content li a
{
display: block;
width: 106px;
height: 27px;
text-indent: -5000px;
}
.partners-content
{
background: transparent url(../../images/bg/partners_content_bg.gif) 0 0 no-repeat;
min-height: 45px;
}
ul#transportation-method {
float: left;
margin: 0 0 12px 20px;
}
ul#transportation-method li {
float: left;
position: relative;
width: 420px;
height: 30px;
padding: 37px 0 0 0;
margin: 0 20px 0 0;
background-image: none;
}
ul#transportation-method li.public-transit {
background: transparent url(../../images/bg/partners_trans_public-transit.gif) 19px 0 no-repeat;
width: 107px;
}
ul#transportation-method li.public-transit-active { background-image: url(../../images/bg/partners_trans_public-transit_active.gif); }
ul#transportation-method li.parking {
background: transparent url(../../images/bg/partners_trans_parking.gif) 13px 0 no-repeat;
width: 77px;
}
ul#transportation-method li.parking-active { background-image: url(../../images/bg/partners_trans_parking_active.gif); }
ul#transportation-method li.van-pooling {
background: transparent url(../../images/bg/partners_trans_van-pooling.gif) 20px 0 no-repeat;
width: 98px;
margin-right: 0;
}
ul#transportation-method li.van-pooling-active { background-image: url(../../images/bg/partners_trans_van-pooling_active.gif); }
ul#transportation-method li.bicycling {
background: transparent url(../../images/bg/partners_trans_bicycling.gif) 13px 0 no-repeat;
width: 127px;
height: 57px;
margin-right: 0;
}
ul#transportation-method li.bicycling-active { background-image: url(../../images/bg/partners_trans_bicycling_active.gif); }
ul#transportation-method li.car-sharing {
background: transparent url(../../images/bg/partners_trans_car-sharing.gif) 19px 0 no-repeat;
width: 83px;
margin-right: 0;
}
ul#transportation-method li.car-sharing-active { background-image: url(../../images/bg/partners_trans_car-sharing_active.gif); }
ul#transportation-method li.tma {
background: transparent url(../../images/bg/partners_trans_tma.gif) 19px 0 no-repeat;
width: 165px;
margin-right: 0;
padding-top: 40px;
}
ul#transportation-method li.tma-active { background-image: url(../../images/bg/partners_trans_tma_active.gif); }
ul#transportation-method li input {
margin: 2px 0 0 2px;
width: auto;
border-width: 0px;
background-color: transparent;
}
ul#transportation-method li label { visibility: hidden; }
ul#transportation-method .click-target {
position: absolute;
top: 0;
left: 20px;
width: 60px;
height: 70px;
}
ul#transportation-method li ul {
display: none;
position: absolute;
bottom: 0;
right: -30px;
width: 240px;
background: transparent url(../../images/bg/partners_transportation_sub_dotted_bg.gif) 0 0 no-repeat;
}
ul#transportation-method li.active ul {
display: block;
margin: 0;
}
ul#transportation-method li.active ul li {
color: #000;
float: left;
padding: 15px 9px 0 0;
margin: 0;
width: auto;
height: auto;
}
ul#transportation-method li ul li input {
margin-top: 2px;
}
span#transportation-method-text {
float: left;
color: #000;
padding-top: 37px;
}
#partners select
{
font-weight: bold;
padding: 1px;
width: 200px;
height: auto;
}
#partners p
{
clear: none;
}
#partners p input
{
margin: 0;
padding: 2px;
float: none;
}
#partners p label
{
float: none;
display: inline;
color: #000;
font-size: 1em;
width: auto;
padding: 0;
}
#map-list-container
{
border: 1px solid #7a7a7a;
margin: 0 10px 0 12px;
position: relative;
}
#gmap
{
margin: 3px;
float: left;
width: 407px;
height: 385px;
}
#gmap div
{
line-height: 1.3em;
}
ul#partners-list
{
float: left;
width: 158px;
height: 375px;
padding: 8px 9px;
border-left: 1px solid #7a7a7a;
overflow: auto;
}
ul#partners-list li
{
padding-bottom: 3px;
cursor: pointer;
}
#gmap-loading
{
position: absolute;
top: 0;
left: 0;
width: 413px;
height: 391px;
}
#gmap-loading .screen
{
position: absolute;
z-index: 50;
top: 0;
left: 0;
background-color: #ccc;
opacity: 0.6;
filter: alpha(opacity = 60);
width: 413px;
height: 391px;
}
#gmap-loading img
{
position: absolute;
z-index: 100;
top: 45%;
left: 45%;
}
.info-window-image
{
float: left;
padding-right: 4px;
}
.go
{
background: url("../../images/buttons/go.gif") left top no-repeat;
height: 22px;
width: 40px;
text-indent: -5000px;
overflow: hidden;
border: none;
padding: 0;
margin: 0;
float: right;
}
.captchaLabel
{
display: inline;
float: left;
width: 35%;
padding: 0 5% 0px 0;
margin: 0;
color:Purple;
}
.captchaImg
{
float:left;
margin: 0;
padding: 0;
margin-bottom:16px;
/*width: 50.2%;*/ /* CLOSE to full width; use pixels for the real thing */
width: 45.2%;
background-color: #fff;
font-family: Arial, Tahoma, sans-serif;
}
.captchaTextbox
{
float:left;
margin: 0;
padding: 0;
margin-bottom:16px;
/*width: 50.2%;*/ /* CLOSE to full width; use pixels for the real thing */
width: 45.2%;
background-color: #fff;
font-family: Arial, Tahoma, sans-serif;
}
.ctafixed
{
}
.cardMargin
{
margin-bottom: 10px;
}
a.pdf, a.pdf:hover, a.pdf:visited, a.pdf:active {
background: url(../../images/icons/pdf_sm.gif) 0 2px no-repeat;
padding-left: 20px;
color: #666;
text-decoration: underline;
}
.hide
{
visibility: collapse;
display: none;
}
.ddlStates
{
margin-left:10px;
width:250px
}