/* ---------------------
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;
height: 27px;
margin: 0;
padding: 0;
}
#nav-main ul li
{
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
{
background: #D7D7D7;
}
#nav-main ul li a
{
display: block;
border-right: 1px solid #FFFFFF;
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.last a
{
border: none;
}
#nav-main ul li.current a, #home #nav-main ul li a
{
color: #1B3881;
}
#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
{
}
#nav-tabs
{
position: absolute;
margin-top: 180px;
margin-left: 50px;
border: 0px solid red;
width: 900px;
height: 40px;
}
#nav-tabs a
{
float: left;
height: 40px;
border: 0px solid red;
}
#nav-tabs a.home
{
width: 80px;
}
#nav-tabs a.whatisit
{
width: 120px;
}
#nav-tabs a.whyoffer
{
width: 274px;
}
#nav-tabs a.howdoes
{
width: 185px;
}
#nav-tabs a.whywired
{
width: 230px;
}
/* Radio buttons */
form input.radio, form input.radiobtn
{
text-align: left;
width: 1.3em;
margin: 0.3em 0.2em 0 0;
padding: 0;
border: none;
background: none;
}
form .radiotext
{
margin: 0 1em 0 0;
}
/* Check boxes */
form input.ckbx, form input.checkbox
{
text-align: left;
width: 1.2em;
margin: 0.3em 0.2em 0 0;
padding: 0;
border: none;
background: none;
}
form p.indent
{
/* For buttons or text that need to align with inputs/selects */
margin-left: 40%;
}
form p.xspa
{
/* "extra space after" */
margin-bottom: 2.0em;
}
form .req, form .required
{
color: red;
}
form input.contactsubmit
{
background: url("../../images/buttons/go.gif") left top no-repeat;
border: 0px;
height: 30px;
}
form input:focus
{
/* however we want the focused field to look */
}
form input.submit, button
{
/* There are lots of default values to fix */
border: 3px double #999;
border-top-color: #ccc;
border-left-color: #ccc;
padding: 1px 2px;
background: #f6f6f6;
color: #555;
font-size: 0.9em;
font-weight: bold;
height: auto;
width: auto;
cursor: pointer;
font-family: inherit;
}
form input.submit:hover, button:hover
{
/* IE6 can't see these, too bad */
color: #fff;
background-color: #ff0000;
}
form input.submit:active, button:active
{
/* Button 'feedback' behavior */
border: 3px double #ccc;
border-top-color: #999;
border-left-color: #999;
}
/* =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;
}
.twoColumnInlineHeader
{
float: left;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 0px;
width: 580px;
border-bottom: 1px solid #ccc;
}
.twoColumnInlineHeader.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 .twoColumnLayout p.intro
{
font-size: 1.2em;
padding-bottom: 20px;
margin-bottom: 24px;
border-bottom: 1px solid #bbb;
}
.twoColumnLayout .twoColumnRight
{
margin-left: 40px;
}
.twoColumnRight .twoColumnLayout
{
width: 200px;
}
.twoColumnRight .twoColumnLayout h4
{
margin-top: 1em; /*color:#1b3881;*/
}
.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: 45px;
width: 945px;
}
#content-main
{
}
#content-news
{
}
#content .product-intro
{
font-size: 14px;
line-height: 22px; /*color:#1b3881;*/
}
.content-home
{
background: url("../../images/headers/header_ball.jpg") left top no-repeat;
padding-top: 236px;
}
.content-whatisit
{
background: url("../../images/headers/header_whatisit.jpg") left top no-repeat;
padding-top: 236px;
}
.content-whywired
{
background: url("../../images/headers/header_whywired.jpg") left top no-repeat;
padding-top: 236px;
}
.content-whyoffer
{
background: url("../../images/headers/header_whyoffer.jpg") left top no-repeat;
padding-top: 236px;
}
.content-howdoes
{
background: url("../../images/headers/header_howdoes.jpg") left top no-repeat;
padding-top: 236px;
}
.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-products
{
background: url("../../images/headers/header_products.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: 185px;
}
.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;
}
.home-header-helper
{
display: block;
height: 1%; /* fix IE7 display oddity */
background: url("../../images/bg/home_emp_bg.gif") left bottom no-repeat;
}
.two-header-column
{
width: 400px;
padding: 6px 20px 0px 20px;
margin-bottom: 10px;
float: left;
color: #FFFFFF;
font-size: 1.45em;
line-height: 1.5em;
}
.two-header-column-left
{
width: 578px;
border-right: 1px solid #5594b9;
}
.two-header-column-right
{
width: 240px;
margin-left: 20px;
}
.two-header-column h3.replace
{
display: none;
}
.two-header-column p
{
line-height: 1.4em;
padding-right: 20px;
}
.two-header-column strong
{
font-size: 110%;
line-height: 100%;
}
#content .two-header-column h5
{
margin-top: 0px;
line-height: 1px;
padding: 0px;
color: #fff;
}
#content .two-header-column ul.header-list
{
float: left;
position: relative;
margin-right: 30px;
margin-bottom: 0px;
}
#content .two-header-column ul.header-list li
{
font-size: 12px;
font-weight: bold;
background: url("../../images/bg/bullet-blue.gif") left 0.3em no-repeat;
color: #fff;
}
.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 p
{
color: #1b3881;
font-size: 1.2em;
line-height: 1.5em;
}
.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;
}
#content .single-column p
{
line-height: 1.5em;
}
.single-column .twoColumnLayout
{
width: 275px;
margin: 10px 0 0 25px;
padding: 15px 0px;
}
.single-column .twoColumnRight
{
margin-left: 30px;
}
.single-column .twoColumnLayout h5
{
margin-top: 4px;
margin-bottom: 14px;
font-size: 14px;
}
#content .single-column .home-left
{
width: 320px;
margin-right: 10px;
}
#content .single-column .home-right
{
width: 220px;
margin-right: 0px;
}
/****** 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-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-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
{
padding: 20px 0;
}
.solution-finder label, .solution-finder input, .solution-finder select
{
width: auto;
float: left;
margin: 0 10px 0 0;
padding: 2px 0 0 0;
}
.secondary-solution-finder label
{
font-weight: bold;
color: #5F5F5F;
}
.solution-finder select
{
margin-right: 15px;
padding: 0;
width: 70px;
}
.secondary-solution-finder select
{
margin-right: 30px;
}
.solution-finder button.go, .solution-finder input.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;
}
.plant
{
background: url("../../images/bg/plant.gif") right bottom no-repeat;
}
.train
{
background: url("../../images/bg/train.gif") right 170px no-repeat;
}
/* =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;
}
#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;
}
.fleft
{
float: left;
}
.fright
{
float: right;
}
.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;
}
.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 ul
{
display: none;
padding: 0px;
margin: 0px;
background-image: none;
}
#tree ul li
{
background-image: none !important;
display: none;
padding: 0px;
margin: 0px;
padding-left: 40px;
}
#tree li
{
border-top: 1px solid #ddd;
}
#tree li a
{
font-size: 11px;
background: none;
display: block;
padding: 0px;
margin: 0px;
}
#tree li.branch
{
font-size: 14px;
background: none;
display: block;
padding-left: 0;
border-bottom: 1px solid #ccc;
border-top: 0px;
}
#tree li.open
{
display: block;
margin: 3px 0px;
}
#tree span
{
display: block;
background: transparent url('../../images/nav/red_arrow.gif') 0 center no-repeat;
padding: 3px 0 3px 15px;
font-weight: bold;
cursor: pointer; /*color: #a0390d; */
}
#tree label
{
width: 200px;
padding: 3px 40px 3px 15px;
font-weight: bold;
font-size: 11px;
float: left; /*color: #a0390d; */
}
#tree span.show
{
background-image: url('../../images/nav/red_arrow_down.gif');
color: #333;
}
.blue
{
color: #1b3881;
}
.ctafixed
{
}
.captchaLabel
{
display: inline;
float: left;
width: 35%;
padding: 0 5% 0px 0;
margin: 0;
color: Purple;
}
/****** 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;
}
/******** TREE ***********/
#tree, .tree
{
}
#tree ul, .tree ul
{
display: block;
padding: 0px;
margin: 0px;
background-image: none;
}
#tree ul li, .tree ul li
{
background-image: none !important;
display: none;
padding: 0px;
margin: 0px;
padding-left: 40px;
}
#tree li
{
border-top: 1px solid #ddd;
}
#tree li a
{
font-size: 11px;
background: none;
display: block;
padding: 0px;
margin: 0px;
}
#tree li.branch, .tree li.branch
{
font-size: 14px;
background: none;
display: block;
padding-left: 0;
border-bottom: 1px solid #ccc;
border-top: 0px;
}
.tree li.branch
{
border-bottom-width: 0px;
margin-bottom: 4px !important;
}
.tree span
{
color: #1c3881;
font-size: 0.9em;
font-weight: bold;
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 li.open, .tree 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;
}
.blue
{
color: #1b3881;
}
.statepdf
{
}
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;
float: right;
}
/************************************/
/* =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 */
}
.hide
{
visibility: collapse;
}
.ddlStates
{
margin-left:10px;
width:250px
}