/*@import url('/assets/css/screen_reset.css');*/ /* Eric Myer Reset */ 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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;} /* remember to define focus styles! */ :focus {outline: 0;} body {line-height: 1;color: black;background: white;} /*ol, ul {list-style: none;}*/ /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: separate;border-spacing: 0;} caption, th, td {text-align: left;font-weight: normal;} blockquote:before, blockquote:after,q:before, q:after {content: "";} blockquote, q {quotes: "" "";} a { text-decoration: none; } strong { font-weight: bold; } body { background-color: #e9eaea; font: normal 62.5% Arial, Helvetica, "Helvetica Neue", Sans-serif; line-height: 1.2; color: #333; } #superwrapper { background: #fff url(/assets/images/bg-superwrapper.gif) center top repeat-x; } #wrapper { width: 940px; margin: 0 auto; padding: 0 10px; overflow: hidden; } #wrapper .clearFix { clear: both; } #container { } /* | | Header | */ #header { height: 148px; } #header .logo { height: 53px; width: 326px; float: left; position: relative; left: 0px; top: 50px; } #header .logo h1 { height: 53px; width: 326px; background: url(/assets/images/logo-header.gif) 0 0 no-repeat; text-indent: -4000px; margin: 0; padding: 0; border: 0; } #header .logo h1 a { height: 53px; width: 326px; display: block; outline: none; } #header .utility { height: 40px; float: right; position: relative; right: 0; top: 0; } #header .utility ul { height: 40px; list-style: none; float: right; } #header .utility ul li { font-size: 1.2em; height: 40px; line-height: 40px; float: left; } #header .utility ul li a { color: #333; outline: none; padding: 0 10px; border-right: solid 1px #333; } #header .utility ul li a:hover { color: #000; text-decoration: underline; } #header .utility ul li.news-and-media a, #header .utility ul li.faq a { border-right: none; } #header .utility ul li.login a { padding-right: 20px; margin-right: 10px; border-right: none; border-left: solid 1px #333; background: url(/assets/images/icon-arrow-down.png) right center no-repeat; } #header .utility ul li.login.menu-open { background:#000; filter:alpha(opacity=100); opacity: 1; } #header .utility ul li.login.menu-open a { color: #ccc; background: url(/assets/images/icon-arrow-up.png) right center no-repeat; } #header .utility ul li.login.menu-open a:hover { color:#fff; } #header .utility ul li.logout a { padding-right: 20px; border-right: none; background: url(/assets/images/icon-arrow-down.gif) right center no-repeat; } #header .utility ul li.myaccount a { padding-right: 20px; border-right: none; border-left: solid 1px #333; background: url(/assets/images/icon-arrow-my-account.png) right center no-repeat; } #header .options { height: 65px; width: 500px; float: right; position: relative; right: 0; top: 20px; } #header .options p { height: 22px; width: 235px; float: left; background: #000 url(/assets/images/bg-options.gif) left bottom no-repeat; position: relative; left: 0; top: 43px; text-indent: -4000px; } #header .options ul { width: 265px; float: left; list-style-type: none; } #header .options ul li { height: 65px; width: 51px; padding-left: 2px; float: left; } #header .options ul li a { height: 65px; width: 51px; background-image: url(/assets/images/bg-options.gif); background-repeat: no-repeat; display: block; outline: none; text-indent: -4000px; } #header .options ul li.share a { background-position: -237px 0; } #header .options ul li.share a:hover { background-position: -237px -65px; } #header .options ul li.bus a { background-position: -290px 0; } #header .options ul li.bus a:hover { background-position: -290px -65px; } #header .options ul li.train a { background-position: -343px 0; } #header .options ul li.train a:hover { background-position: -343px -65px; } #header .options ul li.bike a { background-position: -396px 0; } #header .options ul li.bike a:hover { background-position: -396px -65px; } #header .options ul li.walk a { background-position: -449px 0; } #header .options ul li.walk a:hover { background-position: -449px -65px; } /* | | Footer | */ #footer { padding: 30px 0; margin-bottom: 30px; background: #e9eaea url(/assets/images/bg-footer.gif) center top repeat-x; clear: both; } #footer .footer { width: 940px; margin: 0 auto; } #footer .footer .links { width: 500px; float: left; } #footer .footer .links p.copyright { font-size: 1.1em; color: #8d8d8d; clear: both; } #footer .footer .links ul { list-style-type: none; } #footer .footer .links ul li { float: left; margin-bottom: 0.5em; } #footer .footer .links ul li a { padding: 0 10px; color: #333; border-right: solid 1px #333; } #footer .footer .links ul li a:hover { color: #000; text-decoration: underline; } #footer .footer .links ul li.feedback a { padding-left: 0; } #footer .footer .links ul li.privacy-policy a { border-right: none; } #footer .footer .pa-logo { width: 149px; height: 32px; float: right; } #footer .footer .pa-logo p a { width: 149px; height: 32px; display: block; background: url(/assets/images/logo-footer.gif) 0 0 no-repeat; text-indent: -4000px; } /* | | Navigation | */ #navigation { height: 68px; overflow: hidden !important; } #navigation ul { width: 940px; height: 42px; list-style: none; } #navigation ul li { height: 42px; float: left; } #navigation ul li { line-height: 42px; text-align: center; } #navigation ul li a { height: 42px; display: block; outline: none; background-image: url(/assets/images/navigation.gif); background-repeat: no-repeat; text-indent: -4000px; cursor: pointer !important; } #navigation ul li.home a { width: 69px; background-position: 0 0; } #navigation ul li.home a:hover { background-position: 0 -42px; } body#home li.home a, body#home li.home a:hover, #navigation ul li.home a.active { background-position: 0 -84px; } #navigation ul li.alternative-transportation a { width: 124px; background-position: -69px 0; } #navigation ul li.alternative-transportation a:hover { background-position: -69px -42px; } #navigation ul li.alternative-transportation a.active { background-position: -69px -84px; } #navigation ul li.ridesharing a { width: 105px; background-position: -193px 0; } #navigation ul li.ridesharing a:hover { background-position: -193px -42px; } #navigation ul li.ridesharing a.active { background-position: -193px -84px; } #navigation ul li.public-transit a { width: 76px; background-position: -298px 0; } #navigation ul li.public-transit a:hover { background-position: -298px -42px; } #navigation ul li.public-transit a.active { background-position: -298px -84px; } #navigation ul li.biking a { width: 70px; background-position: -374px 0; } #navigation ul li.biking a:hover { background-position: -374px -42px; } #navigation ul li.biking a.active { background-position: -374px -84px; } #navigation ul li.walking a { width: 80px; background-position: -444px 0; } #navigation ul li.walking a:hover { background-position: -444px -42px; } #navigation ul li.walking a.active { background-position: -444px -84px; } #navigation ul li.traveling-green a { width: 87px; background-position: -524px 0; } #navigation ul li.traveling-green a:hover { background-position: -524px -42px; } #navigation ul li.traveling-green a.active { background-position: -524px -84px; } #navigation ul li.seniors-and-persons-with-disabilities a { width: 156px; background-position: -611px 0; } #navigation ul li.seniors-and-persons-with-disabilities a:hover { background-position: -611px -42px; } #navigation ul li.seniors-and-persons-with-disabilities a.active { background-position: -611px -84px; } #navigation ul li.employers a { width: 96px; background-position: -767px 0; } #navigation ul li.employers a:hover { background-position: -767px -42px; } #navigation ul li.employers a.active { background-position: -767px -84px; } #navigation ul li.video-gallery a { width: 77px; background-position: -863px 0; } #navigation ul li.video-gallery a:hover { background-position: -863px -42px; } #navigation ul li.video-gallery a.active { background-position: -863px -84px; } /* | | Home Page | */ body#home #container .hero { height: 338px; width: 940px; padding-bottom: 20px; overflow: hidden; position: relative; } body#home #container .hero ul { list-style-type: none; position: absolute; top: 0; } body#home #container .hero ul#tabs { width: 160px; right: 0; z-index: 2; } body#home #container .hero ul#tabs li { font-size: 1.4em; text-transform: uppercase; } body#home #container .hero ul#tabs li a { text-indent: -4000px; display: block; outline: none; } body#home #container .hero ul#tabs li.share { height: 67px; } body#home #container .hero ul#tabs li.share a { height: 67px; line-height: 67px; background: url(/assets/images/tabs-slideshow.png) 0 0 no-repeat; } body#home #container .hero ul#tabs li.share a.current { background-position: -160px 0; } body#home #container .hero ul#tabs li.bus { height: 68px; } body#home #container .hero ul#tabs li.bus a { height: 68px; line-height: 68px; background: url(/assets/images/tabs-slideshow.png) 0 -67px no-repeat; } body#home #container .hero ul#tabs li.bus a.current { background-position: -320px -67px; } body#home #container .hero ul#tabs li.train { height: 68px; } body#home #container .hero ul#tabs li.train a { height: 68px; line-height: 68px; background: url(/assets/images/tabs-slideshow.png) 0 -135px no-repeat; } body#home #container .hero ul#tabs li.train a.current { background-position: -480px -135px; } body#home #container .hero ul#tabs li.bike { height: 68px; } body#home #container .hero ul#tabs li.bike a { height: 68px; line-height: 68px; background: url(/assets/images/tabs-slideshow.png) 0 -203px no-repeat; } body#home #container .hero ul#tabs li.bike a.current { background-position: -640px -203px; } body#home #container .hero ul#tabs li.walk { height: 68px; } body#home #container .hero ul#tabs li.walk a { height: 67px; line-height: 67px; background: url(/assets/images/tabs-slideshow.png) 0 -271px no-repeat;} body#home #container .hero ul#tabs li.walk a.current { background-position: -800px -271px; } body#home #container .hero ul#output { right: 0; width: 940px; height: 335px; position: relative; } body#home #container .hero ul#output li { position: absolute; width: 940px; height: 338px; } body#home #container .hero ul#output li h1 { height: 130px; width: 425px; text-indent: -4000px; } body#home #container .hero ul#output li.slide.share { background: url(/assets/images/bg-slideshow-share.jpg) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.share h1 { background: url(/assets/images/bg-slideshow-share-h1.png) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.bus { background: url(/assets/images/bg-slideshow-bus.jpg) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.bus h1 { background: url(/assets/images/bg-slideshow-bus-h1.png) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.train { background: url(/assets/images/bg-slideshow-train.jpg) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.train h1 { background: url(/assets/images/bg-slideshow-train-h1.png) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.bike { background: url(/assets/images/bg-slideshow-bike.jpg) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.bike h1 { background: url(/assets/images/bg-slideshow-bike-h1.png) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.walk { background: url(/assets/images/bg-slideshow-walk.jpg) 0 0 no-repeat; } body#home #container .hero ul#output li.slide.walk h1 { background: url(/assets/images/bg-slideshow-walk-h1.png) 0 0 no-repeat; } body#home #container .hero ul#output p { display: none; } body#home #container .hero ul#output dl { padding: 0 20px; width: 300px; } body#home #container .hero ul#output dl dt { height: 70px; width: 210px; font-size: 1.2em; font-weight: normal; color: #fff; } body#home #container .hero ul#output dl dd { height: 30px; line-height: 30px; width: 230px; padding: 5px 0; } body#home #container .hero ul#output dl dd a { padding-left: 40px; height: 30px; color: #000; display: block; background: url(/assets/images/bg-slideshow-dd.png) 0 0 no-repeat; } body#home #container .hero ul#output dl dd a:hover { color: #000; } body#home #container .hero ul#output dl dd.find { border-bottom: solid 1px #000; } body#home #container .hero ul#output dl dd.find a { background-position: 0 0; } body#home #container .hero ul#output dl dd.benefits { width: 237px; border-bottom: solid 1px #000; } body#home #container .hero ul#output dl dd.benefits a { background-position: 0 -30px; } body#home #container .hero ul#output dl dd.learn a { background-position: 0 -60px; } body#home #container .buckets { height: 276px; } body#home #container .buckets .bucket { height: 196px; overflow: hidden; background: #e9eaea url(/assets/images/bg-diagonal.gif) 0 0 repeat-x; float: left; } body#home #container .buckets .b1 { width: 340px; margin-right: 20px; } body#home #container .buckets .b2 { width: 100px; margin-right: 20px; } body#home #container .buckets .b3 { width: 220px; margin-right: 20px; } body#home #container .buckets .b4 { width: 220px; } body#home #container .buckets .bucket div { padding: 0 10px; } body#home #container .buckets .bucket div h1 { font-size: 2em; font-weight: bold; padding: 0.75em 0 0.25em 0; text-transform: uppercase; } body#home #container .buckets .bucket div p { margin-bottom: 0.75em; } body#home #container .buckets .bucket ul { list-style-type: none; } body#home #container .buckets .bucket ul li { margin: 0.25em 0; } body#home #container .buckets .bucket ul li a { padding-left: 10px; background: url(/assets/images/bullet-arrow.gif) left center no-repeat; } body#home #container .buckets .start-a-carpool { height: 276px; padding-left: 120px !important; background: url(/assets/images/bg-bucket-carpool.gif) 0 7px no-repeat; } body#home #container .buckets .start-a-carpool h1 { } body#home #container .buckets .green-facts { background: url(/assets/images/bg-bucket-green-facts.gif) center 7px no-repeat; } body#home #container .buckets .green-facts p { height: 160px; text-indent: -4000px; } body#home #container .buckets .savings { height: 196px; background: url(/assets/images/bg-bucket-savings.jpg) right bottom no-repeat; } body#home #container .buckets .savings p { height: 76px; } body#home #container .buckets .savings p.button { height: 32px; } body#home #container .buckets .savings p.button a.get-started { height: 32px; width: 105px; display: block; text-indent: -4000px; background: url(/assets/images/button-get-started.gif) 0 0 no-repeat; } body#home #container .buckets .savings p.button a.get-started:hover { background: url(/assets/images/button-get-started.gif) 0 -32px no-repeat; } body#home #container .buckets .discounts { height: 196px; background: url(/assets/images/bg-bucket-discounts.jpg) right 99px no-repeat; } body#home #container .buckets .discounts p { height: 100px; } body#home #container .buckets .discounts p.button a.start-saving { height: 32px; width: 114px; display: block; text-indent: -4000px; background: url(/assets/images/button-start-saving.gif) 0 0 no-repeat; } body#home #container .buckets .discounts p.button a.start-saving:hover { background: url(/assets/images/button-start-saving.gif) 0 -32px no-repeat; } /* | | Global | */ p, li { font-size: 1.2em; line-height: 1.275em; } p.callout { padding: 1.5em; background: #9acdea; } p.callout span { font-weight: bold; display: block; } p.alert { padding: 1em; color: #444; background: #ffffe0; border: solid 1px #e6db55; -moz-border-radius: 3px; -webkit-border-radius: 3px; } a { color: #01b0d3; background-color: transparent; font-weight: normal; text-decoration: none; cursor: pointer !important; } a:hover { color: #000; text-decoration: underline; } /* | | Content | */ #content { width: 460px; padding: 0 20px 2em 20px; float: left; } #content.wide { width: 700px; padding: 0 0 2em 20px; } #content h1 { margin-top: 0.6em; margin-bottom: 0.5em; font-size:2.8em; font-weight: bold;} #content h2 { margin-bottom: 0.5em; font-size:1.8em; font-weight: bold; } #content h3 { margin-bottom: 0.5em; font-size:2em; font-weight: bold; } #content h4 { margin-bottom: 0.5em; font-size:1.8em; font-weight: bold; } /*#content p { font-size:1.25em; color: #333; }*/ #content p { margin-bottom: 1.5em; } #content ul { padding: 0 20px 10px 20px; } #content ul li { margin: 0.5em 0; } #content ul li ul { padding: 0 2em; } #content ul li ul li { font-size: 1em; } #content #map { margin: 0 auto; height: 250px; width: 425px; background: url(/assets/images/map/map_bg.gif) top left no-repeat; } /* | | Content-Specific Header Images | */ body#matchandride #content h1 { margin-top: 0; } body#public-transit #content.search { padding-bottom: 6em; } body#public-transit #content.search h1 { margin-top: 0; } body#public-transit #content.search map area { cursor: pointer !important; } #content .header { height: 100px; width: 460px; background: url(/assets/images/header-default.jpg) 0 0 no-repeat; } #content.wide .header { height: 100px; width: 700px; background: url(/assets/images/header-wide-default.jpg) 0 0 no-repeat; } body#seniors-and-persons-with-disabilities #content .header { background-image: url(/assets/images/header-accessibility.jpg); } body#seniors-and-persons-with-disabilities #content.wide .header { background-image: url(/assets/images/header-wide-accessibility.jpg); } body#alternative-transportation #content .header { background-image: url(/assets/images/header-alternative-transportation.jpg); } body#alternative-transportation #content.wide .header { background-image: url(/assets/images/header-wide-alternative-transportation.jpg); } body#employers #content .header { background-image: url(/assets/images/header-employers.jpg); } body#employers #content.wide .header { background-image: url(/assets/images/header-wide-employers.jpg); } body#public-transit #content .header { background-image: url(/assets/images/header-public-transit.jpg); } body#public-transit #content.wide .header { background-image: url(/assets/images/header-wide-public-transit.jpg); } body#ridesharing #content .header { background-image: url(/assets/images/header-ridesharing.jpg); } body#ridesharing #content.wide .header { background-image: url(/assets/images/header-wide-ridesharing.jpg); } body#walking #content .header { background-image: url(/assets/images/header-walking.jpg); } body#walking #content.wide .header { background-image: url(/assets/images/header-wide-walking.jpg); } body#biking #content .header { background-image: url(/assets/images/header-biking.jpg); } body#biking #content.wide .header { background-image: url(/assets/images/header-wide-biking.jpg); } body#bus #content .header { background-image: url(/assets/images/header-bus.jpg); } body#bus #content.wide .header { background-image: url(/assets/images/header-wide-bus.jpg); } /* | | Subnav | */ #subnavigation { width: 220px; margin-bottom: 100px; float: left; overflow: hidden !important; } #subnavigation h1 { width: 220px; padding: 0.5em 10px; font-size: 1.6em; text-transform: uppercase; font-weight: normal; color: #fff; background: #000; } #subnavigation ul { list-style-type: none; margin: 0; padding: 0; width: 220px !important; } #subnavigation ul li { font-size: 12px; margin: 0; width: 220px; cursor: pointer !important; } #subnavigation ul li a { padding: 0.5em 10px 0.5em 20px; font-weight: normal; height: auto; width: auto; display: block; border-top: 1px dotted #bfbfbf; background: #fff url(/assets/images/bullet-square.gif) 10px center no-repeat; } #subnavigation ul li a:hover { text-decoration: none; background: #f2f2f2 url(/assets/images/bullet-square.gif) 10px center no-repeat; } #subnavigation ul li.active a { color: #000; background: #f2f2f2 url(/assets/images/bullet-square.gif) 10px center no-repeat; } #subnavigation ul li.active ul li a { padding: 0.5em 10px 0.5em 30px; background: #fff url(/assets/images/bullet-cross.gif) 20px center no-repeat; color: #01b0d3; } #subnavigation ul li.active ul li a:hover { background: #fff url(/assets/images/bullet-cross.gif) 20px center no-repeat; color: #000; } #subnavigation ul li.active ul li.active ul li { font-size: 11px; } #subnavigation ul li.active ul li.active ul li a { padding: 0.5em 10px 0.5em 40px; border: none !important; background: #fff url(/assets/images/bullet-dash.gif) 30px center no-repeat; color: #01b0d3; } #subnavigation ul li a.active { color: #000; background: #f2f2f2 url(/assets/images/bullet-arrow-white.gif) 10px center no-repeat !important; } #subnavigation ul li ul li a.active { color: #000; background: #fff url(/assets/images/bullet-arrow-white.gif) 20px center no-repeat !important; } #subnavigation ul li ul li ul li a.active { color: #000 !important; background: #fff url(/assets/images/bullet-arrow-white.gif) 30px center no-repeat !important; } /* | | Sidebar, Callouts | */ #sidebar { width: 220px; float: left; } #sidebar #callout { position: relative; top: -5px; width: 198px; margin-bottom: 1.7em; padding: 10px 12px; } #sidebar .green { background: #e9eaea url(/assets/images/bg-sidebar-green.gif) 0 0 repeat-x; } #sidebar .bike { background: #e9eaea url(/assets/images/bg-sidebar-bike.gif) 0 0 repeat-x; } #sidebar .discounts { background: #e9eaea url(/assets/images/bg-sidebar-discounts.gif) 0 0 repeat-x; } #sidebar .bus { background: #e9eaea url(/assets/images/bg-sidebar-bus.gif) 0 0 repeat-x; } #sidebar .calculator { background: #e9eaea url(/assets/images/bg-sidebar-calculator.gif) 0 0 repeat-x; } #sidebar .matchandride { background: #e9eaea url(/assets/images/bg-sidebar-matchandride.gif) 0 0 repeat-x; } #sidebar .rideshare { background: #e9eaea url(/assets/images/bg-sidebar-rideshare.gif) 0 0 repeat-x; } #sidebar .train { background: #e9eaea url(/assets/images/bg-sidebar-train.gif) 0 0 repeat-x; } #sidebar .walk { background: #e9eaea url(/assets/images/bg-sidebar-walk.gif) 0 0 repeat-x; } #sidebar .results { background: #e9eaea url(/assets/images/bg-sidebar-results.gif) 0 0 repeat-x; } #sidebar #callout h1 { height: 46px; width: 150px; position: relative; left: 52px; font-size: 1.6em; font-weight: bold; padding: 0.25em 0; text-transform: uppercase; } #sidebar #callout h2 { margin-bottom: 0.5em; font-size:2.4em; font-weight: bold; } #sidebar #callout h3 { margin-bottom: 0.5em; font-size:2em; font-weight: bold; } #sidebar #callout h4 { margin-bottom: 0.5em; font-size:1.4em; font-weight: bold; } #sidebar #callout p { margin-bottom: 1.5em; } #sidebar #callout ul { padding-bottom: 10px; list-style-type: none; } #sidebar #callout ul li { width: 180px; margin: 0.5em 0; padding-left: 10px; background: url(/assets/images/bullet-arrow.gif) -1px 0.2em no-repeat; } #sidebar #callout ul li a { } #sidebar #callout ul li ul { } #sidebar #callout ul li ul li { } #sidebar select#county_select { padding: 0.35em; width: 200px; } #sidebar #results { } #sidebar #results h4 { text-transform: uppercase; } #sidebar #results .service { padding: 1.5em 0 1em 0; border-bottom: dotted 1px #a4a4a4; overflow: auto; } #sidebar #results .service img {margin-bottom: 0.5em; } #sidebar #results .service p { margin: 0; padding: 0.15em 0; font-size: 1.1em; } #sidebar #results .service p span { font-weight: bold; } #sidebar #results .service ul { padding: 0; width: 50%; float: left; } #sidebar #results .service ul li { font-size: 1.1em; } #sidebar #results .location { padding: 1.25em 0 1em 0; border-bottom: dotted 1px #a4a4a4; overflow: auto; } #sidebar #results .location p { margin: 0; padding: 0.15em 0; font-size: 1.1em; } #sidebar #results .location p span { font-weight: bold; } /* | | PennDOT Map | */ #content.search ul.counties { list-style-type: none; padding: 0; float: left; width: 150px;} #content.search ul.counties li { text-transform: capitalize; } /* | | PennDOT Map :: Ajax Interaction | */ div#county { width: 760px; } div#county h1 { margin: 0.25em 0.5em 0 0.5em; padding: 0.25em 0; font-size:2.0em; font-weight: bold; border-bottom: solid 1px #e7e7e7; text-transform: capitalize; } div#county p.amtrak { padding: 1em 1em 0 0; font-size: 1.1em; } div#county dl { padding: 0 1em; height: 390px; overflow: auto; } div#county dl dt { background: #000; padding: 0.75em; font-size: 1.4em; color: #fff; } div#county dl dt a { padding-right: 24px; background: url(/assets/images/icon-question-mark.png) right bottom no-repeat; color: #fff; } div#county dl dt a:hover { text-decoration: none; color: #fff; background: url(/assets/images/icon-question-mark.png) right bottom no-repeat; } div#county dl dd { background: #f2f2f2; padding: 0.75em 1em; border-bottom: solid 1px #e7e7e7; margin-bottom: 1px; overflow: auto; } div#county dl dd ul { padding: 0.5em 0; float: left; } div#county dl dd .service-name { width: 240px; float: left; } div#county dl dd .service-name p span { padding-bottom: 0.25em; font-size: 1.2em; display: block; } div#county dl dd .service-information { width: 160px; float: left; } div#county dl dd .service-information ul li { width: 160px; list-style-position: inside; } div#county dl dd .service-programs { width: 300px; float: left; } div#county dl dd .service-programs ul { width: 140px; } div#county dl dd .service-programs ul.ada { padding-right: 20px; } div#county dl dd .service-programs ul li { width: 140px; padding: 0.5em 0; border-bottom: dotted 1px #444; list-style-type: none; } div#county dl dd .service-programs ul li.off { color:#ccc; } div#county dl dd .service-programs ul li span { height: 16px; width: 32px; float: right; display: block; text-indent: -4000px; } div#county dl dd .service-programs ul li.ada span { background: #fff url(/assets/images/icon-county-service.png) right 0px no-repeat; } div#county dl dd .service-programs ul li.ada.off span { background: #fff url(/assets/images/icon-county-service.png) right -16px no-repeat; } div#county dl dd .service-programs ul li.info span { background: #fff url(/assets/images/icon-county-service.png) right -32px no-repeat; } div#county dl dd .service-programs ul li.info.off span { background: #fff url(/assets/images/icon-county-service.png) right -48px no-repeat; } div#county .program_tip { } .tip-black { background: #000; width:200px; height:150px; border: 2px solid #fff; } /* div#county h2 { margin-bottom: 0.5em; padding: 0.25em 0; font-size:1.8em; font-weight: bold; } div#county h3 { margin-bottom: 0.5em; font-size:2em; font-weight: bold; } div#county h4 { margin-bottom: 0.5em; font-size:1.8em; font-weight: bold; } div#county p { margin-bottom: 1.5em; } div#county ul { padding: 0 20px 10px 20px; } div#county ul li { margin: 0.5em 0; } div#county ul li ul { padding: 0 2em; } div#county ul li ul li { font-size: 1em; } */ /* | | Video Gallery | */ #content.video { width: 650px; padding: 0 20px 0 0 !important; height: 600px; } #content.video h1 { margin-top: 0 !important; } #content.video .video-player { height: 320px; width: 400px; float: left; } #content.video .video-meta { width: 230px; float: left; padding: 0 10px; overflow: hidden; } #content.video .video-meta h1 { margin-top: 0 !important; font-size: 1.8em !important; } #content.video .video-meta h2 { margin-top: 0 !important; font-size: 1.2em !important; font-style: italic; font-weight: normal !important; } body#video #sidebar { height: 600px; } #sidebar .videos { width: 244px !important; top: 80px !important; } #sidebar .videos { overflow-y: scroll; overflow-x: hidden; border: solid 1px #ccc; background: #fafafa; height: 400px; } #sidebar .videos .thumbnail { height: 80px; width: 244px; overflow: hidden; margin-bottom: 2em; } #sidebar .videos .thumbnail img { margin-right: 0.5em; float: left; border: solid 2px #333; } #sidebar .videos .thumbnail p { padding-right: 3px; } #sidebar .videos .thumbnail p.title { font-size: 1.3em !important; margin-bottom: 0.5em !important; } #sidebar .videos .thumbnail p.title a { font-weight: bold !important; } /* | | Commute Cost Calculator | */ #content .calculator { width: 700px; padding-bottom: 2em; } #content .calculator .disclaimer { clear: both; position: relative; top: 2em; padding: 1em 0 2em 0; border-top: solid 1px #e5e5e5; } #content .calculator .disclaimer p { margin: 0; font-size: 1em; color: #454545; } #content .calculator h2 { padding: 1em 0 0.5em 0; font-size: 1.6em; text-transform: uppercase; background: #fff; border-bottom: solid 1px #e5e5e5; } #content .calculator .math { width: 340px; float: left; } #content .calculator .math form.calculator { width: 340px; } #content .calculator .math form.calculator p { padding: 0.5em 0 0.5em 1em; margin: 0.25em 0; background: url(/assets/images/bullet-arrow-white.gif) 0 center no-repeat;} #content .calculator .math form.calculator p.getmiles { background: none; } #content .calculator .math form.calculator .group { } #content .calculator .math form.calculator .group.miles input { width: 24px; } #content .calculator .math form.calculator .group.costs input { width: 28px; } #content .calculator .math form.calculator .group input[type=text] { padding: 0.35em; border: solid 1px #ccc; background: #fafafa; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #content .calculator .math form.calculator .group select { width: auto; padding: 0.35em; } #content .calculator .math form.calculator .totals { width: 160px; float: left; } #content .calculator .math form.calculator .totals p { padding: 0; margin: 0; background: none; } #content .calculator .math form.calculator .totals span { font-size: 2.4em; color: #ff0000; } div#myMileage { width: 600px; margin: 0 auto; overflow: hidden !important; } div#myMileage h1 { margin: 0.5em 0; font-size: 24px; font-weight: bold; } div#myMileage h2 { margin: 0.5em 0; font-size: 14px; font-weight: bold; } div#myMileage p { margin: 1em 0; font-size: 12px; } div#myMileage .start { width: 290px; float: left; } div#myMileage .end { width: 279px; float: right; padding-left: 30px; border-left: dotted 1px #e7e7e7; } div#myMileage fieldset p.txtInput label { width: 70px !important; float: left; padding-top: 0.35em; } div#myMileage fieldset p.txtInput input { display: block; background: #fafafa; padding: 0.35em; width: 170px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } div#myMileage fieldset p.txtInput select { display: block; background: #fafafa; padding: 0.35em; width: 182px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } div#myMileage .results { width: 600px; clear: both; padding: 2em 0 1em 0; border-top: dotted 1px #e7e7e7; } div#myMileage .results fieldset.submit { width: 110px; float: left; border-right: dotted 1px #e7e7e7; } div#myMileage .results fieldset input[type=submit], div#myMileage .results fieldset input[type=button] { background: #5d5d5d; border: 1px solid #444; color: #fff; text-shadow: 1px 1px 0 #000; padding: 4px 10px 5px; margin: 0 5px 0 0; font-weight: bold; cursor: pointer !important; -moz-border-radius: 4px; -webkit-border-radius: 4px; } div#myMileage .results fieldset input[type=submit]:hover, div#myMileage .results fieldset input[type=button]:hover { background:#5d5d5d; border:1px solid #444; color:#fff; text-shadow: 0 -1px 0 #000; } div#myMileage .results div#api { height: 30px; width: 450px; margin-left: 14px; float: left; } div#myMileage .results div#api p { margin: 0.5em 0; } div#myMileage .results div#api p em { color: #01b0d3; font-weight: bold; } #content .calculator .savings { width: 340px; padding-bottom: 2em; background: #f6f6f6; float: right; } #content .calculator .savings h2 { margin-bottom:0; } #content .calculator .savings h3 { padding:4px 10px; margin:0; font-size: 11px; text-align: right; font-weight: normal; text-transform: uppercase; background: #e7e7e7; } #content .calculator .savings .mode { height: 90px; background: url(/assets/images/bg-calculator-savings.gif) 0 0 no-repeat; cursor: pointer !important; } #content .calculator .savings .mode span { display: block; width: 285px; font-size: 2.4em; text-align: right; } #content .calculator .savings .mode span.month { position: relative; top: 24px; } #content .calculator .savings .mode span.year { position: relative; top: 22px; } #content .calculator .savings .mode.carpool4 { background-position: 0 0; } #content .calculator .savings .mode.carpool4:hover { background-position: -340px 0; } #content .calculator .savings .mode.carpool4 span { color: #779500; } #content .calculator .savings .mode.carpool2 { background-position: 0 -90px; } #content .calculator .savings .mode.carpool2:hover { background-position: -340px -90px; } #content .calculator .savings .mode.carpool2 span { color: #779500; } #content .calculator .savings .mode.bus { background-position: 0 -180px; } #content .calculator .savings .mode.bus:hover { background-position: -340px -180px; } #content .calculator .savings .mode.bus span { color: #017b94; } #content .calculator .savings .mode.train { background-position: 0 -270px; } #content .calculator .savings .mode.train:hover { background-position: -340px -270px; } #content .calculator .savings .mode.train span { color: #e89c06; } /* | | Match & Ride :: My Profile | */ .account { width: 340px; margin-bottom: 2em; } .account h2 { margin-bottom: 0.25em; padding: 0.5em; font-size:1.8em; font-weight: bold; background: #f2f2f2; } .account h3 { margin: 1em 0.75em 0.5em 0.75em !important; padding: 0.5em 0 !important; font-size: 1.6em !important; border-bottom: solid 2px #f2f2f2; } .account h3 span { font-size: 12px; float: right; } .account .matchcount { width: 340px; overflow: auto; border-bottom: solid 1px #f2f2f2; } .account .matchcount span.count { font-size: 6em; font-weight: bold; text-align: center; height: 100px; width: 75px; display: block; float: left; } .account .matchcount span.count a { background: url(/assets/images/profile-matches.gif) right bottom no-repeat; height: 100px; display: block; cursor: pointer !important; color: #000; font-weight: bold; text-decoration: none; } .account .matchcount span.count a:hover { background: url(/assets/images/profile-matches.gif) left bottom no-repeat; color: #01b0d3; } .account .matchcount p.results { margin: 0.75em 1em !important; width: 220px; font-size: 1.2em; float: right; border: none; } .account .messagecount { width: 340px; padding-bottom: 1em; margin-bottom: 1em; overflow: auto; } .account .messagecount span.count { font-size: 6em; font-weight: bold; text-align: center; height: 100px; width: 75px; display: block; float: left; } .account .messagecount span.count a { background: url(/assets/images/profile-messages.gif) right bottom no-repeat; height: 100px; display: block; cursor: pointer !important; color: #000; font-weight: bold; text-decoration: none; } .account .messagecount span.count a:hover { background: url(/assets/images/profile-messages.gif) left bottom no-repeat; color: #01b0d3; } .account .messagecount p.results { margin: 0.75em 1em !important; width: 220px; font-size: 1.2em; float: right; border: none; } .account.preferences { float: left; } .account.preferences p { margin: 0 1em 0.5em 1em !important; padding: 0.5em 0; border-bottom: dotted 1px #f2f2f2; } .account.preferences p span { float: right; } .account.commute { float: right; } .account.commute #map { width: 340px !important; height: 160px !important; overflow: hidden; background: #fafafa; background-image: none !important; } .account.commute p { padding: 0.25em 0 !important; margin: 0 !important; } .account.commute p span { padding-left: 1em; width: 100px; float: left; font-weight: bold; } dl.profile { width: 340px; margin-bottom: 2em;} dl.profile.personal { float: left; } dl.profile.commute { float: right; } dl.profile dt { margin: 0.5em 0; padding: 0.5em; font-size:1.8em; font-weight: bold; background: #f2f2f2; } dl.profile dt span { font-size: 0.7em; float: right; } dl.profile dd { font-size: 1.2em; padding: 0.25em 0.75em; border-bottom: dotted 1px #444; } dl.profile dd.map { padding: 0 0 1.5em 0; } dl.profile dd.map #map { width: 340px !important; height: 160px !important; overflow: hidden; } dl.profile.commute dd.origin, dl.profile.commute dd.destination { font-size: 1.4em; font-weight: bold; } dl.profile.commute dd.destination { margin-top: 1em; padding: 1em 0.5em; border-top: dotted 1px #e7e7e7; } dl.profile.commute dd span { width: 100px; float: left; font-weight: bold; } /* | | Match & Ride :: Results | */ #map_matches { margin-bottom: 1.5em; width: 700px; height: 350px; border: solid 1px #e7e7e7; } #map_matches .infowindow { height: 300px; width: 200px; } div.table.matches { width: 700px; } div.table.matches table thead tr .headDown { background-image: url(/assets/images/tablesort-asc.gif); } div.table.matches table thead tr .headUp { background-image: url(/assets/images/tablesort-desc.gif); } div.table.matches table thead tr th { padding-right: 20px; background: #000 url(/assets/images/tablesort-bg.gif) center right no-repeat; cursor: pointer; } div.table.matches table thead tr th.cta { background-image: none !important; background: #000; } div.table.matches table thead tr th span { padding: 0.5em 0; font-size: 0.8em; display: block; } div.table.matches table tbody tr td { padding: 0.5em; vertical-align: middle;} div.table.matches table tbody tr td.user { } div.table.matches table tbody tr td.user a { height: 100%; width: 100%; display: block; } div.table.matches table tbody tr td.user a img { margin-right: 3px; padding: 2px; width: 30px; border: solid 1px #e7e7e7; -moz-border-radius: 4px; -webkit-border-radius: 4px; float: left; } div.table.matches table tbody tr td.user a:hover img { background: #fafafa; } div.table.matches table tbody tr td.user a span { padding: 7px 7px; height: 20px; line-height: 20px; font-weight: bold; display: block; float: left; } div.table.matches table tbody tr td span.variance { padding-left: 7px; } div.table.matches table tbody tr td.cta { text-align: center; } div.table.matches table tbody tr td.cta a { padding: 0.25em 0.5em; color: #fff; border: solid 1px #e7e7e7; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-weight: bold; } div.table.matches table tbody tr td.cta a:hover { background: #e7e7e7; color: #333; text-decoration: none; } div.table.matches table tbody tr td a.initiate { background: #83a300; } div.table.matches table tbody tr td a.follow-up { background: #01b0d3; } div#tooltip { position:absolute; background:#000; padding:5px; display:none; } div#tooltip p { padding: 5px; color: #fff; } /* | | Match & Ride :: Ajax Interaction | */ body#ajax { background-color: #fff; } div#match { width: 750px; } div#match h1 { margin: 0.25em 0.5em 0 0.5em; padding: 0.25em 0; font-size:2.0em; font-weight: bold; border-bottom: solid 1px #e7e7e7; } div#match h2 { margin-bottom: 0.5em; padding: 0.25em 0; font-size:1.8em; font-weight: bold; } div#match h3 { margin-bottom: 0.5em; font-size:2em; font-weight: bold; } div#match h4 { margin-bottom: 0.5em; font-size:1.8em; font-weight: bold; } div#match p { margin-bottom: 1.5em; } div#match ul { padding: 0 20px 10px 20px; } div#match ul li { margin: 0.5em 0; } div#match ul li ul { padding: 0 2em; } div#match ul li ul li { font-size: 1em; } div#match .profile { padding: 10px 20px 0 10px; width: 320px; border-right: solid 1px #e7e7e7; float: left; } div#match .profile h2 span { float: right; } div#match .profile h2 span img { padding: 2px; width: 20px; border: solid 1px #e7e7e7; -moz-border-radius: 4px; -webkit-border-radius: 4px; } div#match .profile #map { height: 230px; width: 320px; /*background: url(/assets/images/temp/map.gif) 0 0 no-repeat;*/ border: solid 1px #ccc; } div#match .profile span { } div#match .profile .details { padding: 0.75em 0 0 0; } div#match .profile .details p { margin: 0.5em 0; padding: 0.25em 0 0.5em 0; border-bottom: dotted 1px #666; clear: both; text-align: right; } div#match .profile .details p span { width: 100px; font-weight: bold; float: left; text-align: left; } div#match div.contact { padding: 10px 10px 0 20px; width: 369px; float: left; } div#match div.contact form.matchandride { } div#match div.contact form.matchandride fieldset { margin: 0; padding-bottom: 0.25em; } div#match div.contact form.matchandride fieldset legend { display: none; } div#match div.contact form.matchandride fieldset p.from { padding: 0 0 0.5em 0; margin:0; font-weight: bold;} div#match div.contact form.matchandride fieldset p.compose { padding: 1em 0 0.5em 0; margin:0; font-weight: bold;} div#match div.contact form.matchandride fieldset p label { float: left; padding: 0.5em 0; } div#match div.contact form.matchandride fieldset p.dropdown { } div#match div.contact form.matchandride fieldset p.dropdown label { width: 42px; } div#match div.contact form.matchandride fieldset p.dropdown select { } div#match div.contact form.matchandride fieldset p.radioBox { height: 40px; margin-bottom: 0.5em; padding: 0;} div#match div.contact form.matchandride fieldset p.radioBox input { } div#match div.contact form.matchandride fieldset p.radioBox label { width: 345px; float: right; } div#match div.contact form.matchandride fieldset p.radioBox label span { font-weight: bold; display: block; padding-bottom: 0.15em; } div#match div.contact form.matchandride fieldset p.txtArea { width: 320px; } div#match div.contact form.matchandride fieldset p.txtArea textarea { padding: 0.45em; width: 330px; height: 190px; font-size: 1em; background: #FFF; border: 1px solid #E7E7E7; -moz-border-radius: 4px; -webkit-border-radius: 4px; } div#match div.contact form.matchandride fieldset.submit span.error { font-size: 1.2em; color: #DF0000; } /* | | Match & Ride :: Messages | */ div.table.messages { width: 700px; } div.table.messages table thead tr .headDown { background-image: url(/assets/images/tablesort-asc.gif); } div.table.messages table thead tr .headUp { background-image: url(/assets/images/tablesort-desc.gif); } div.table.messages table thead tr th { padding-right: 20px; background: url(/assets/images/tablesort-bg.gif) center right no-repeat; cursor: pointer; } div.table.messages table thead tr th.date { width: 100px; } div.table.messages table thead tr th.user { width: 160px; } div.table.messages table thead tr th.preview { background: none !important; cursor: default; } div.table.messages table thead tr th span { padding: 0.5em 0; font-size: 0.8em; display: block; } div.table.messages table tbody tr td { padding: 0.25em 0.4em; vertical-align: middle;} div.table.messages table tbody tr td.user { } div.table.messages table tbody tr td.user img { margin-right: 3px; padding: 2px; width: 30px; border: solid 1px #e7e7e7; -moz-border-radius: 4px; -webkit-border-radius: 4px; float: left; } div.table.messages table tbody tr td.user span { padding: 7px 7px; height: 20px; line-height: 20px; font-weight: bold; display: block; float: left; } div.table.messages table tbody tr td.preview { border-left: none; } div.table.messages table tbody tr td.contributor { width: 60px; text-align: right; } div.table.messages table tbody tr td.contributor span.you { padding: 0.25em 0.5em; background: #01b0d3; border: solid 1px #e7e7e7; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-weight: bold; } div.table.messages table tbody tr td.contributor span.them { padding: 0.25em 0.5em; background: #e7e7e7; border: solid 1px #e7e7e7; -moz-border-radius: 4px; -webkit-border-radius: 4px; font-weight: bold; } /* | | Match & Ride :: Conversation | */ p.back { margin: 0 !important; padding: 0 !important; position: relative; top: -0.75em;} div#chat { width: 460px; float: left; } div#chat form.conversation { padding: 1em 0 2em 0; width: 460px; overflow: auto; } div#chat form.conversation fieldset p { margin-bottom: 0.75em; } div#chat form.conversation fieldset p textarea { padding: 0.35em; width: 442px; height: 70px; font-size: 1em; background: #FFF; border: 1px solid #E7E7E7; -moz-border-radius: 4px; -webkit-border-radius: 4px; } div#chat form.conversation fieldset p label.error { display: block; padding: 0.5em; color: #DF0000; } div#chat form.conversation fieldset.submit { float: right; } div#chat form.conversation fieldset.submit label { font-size: 1.1em; padding: 0.4em 0; display: block; float: left; } div#chat form.conversation fieldset.submit label.private { width: 210px; } div#chat form.conversation fieldset.submit label.personal { width: 150px; } div#chat form.conversation fieldset.submit label span { font-weight: bold; } div#chat div.table.conversation { width: 460px; } div#chat div.table.conversation table { margin-bottom: 1.5em; } div#chat div.table.conversation table thead { background: none; } div#chat div.table.conversation table thead tr th { border: none; color: #000; } div#chat div.table.conversation table thead tr th.when { font-size: 1.1em; font-style: italic; text-align: right; } div#chat div.table.conversation table thead tr.them th { background: #e7e7e7; font-weight: bold; } div#chat div.table.conversation table thead tr.you th { background: #01b0d3; font-weight: bold; } div#chat div.table.conversation table tbody tr td { padding: 0.5em; vertical-align: top; } div#chat div.table.conversation table tbody tr td p { font-size: inherit; margin: 0.25em 0; } div#chatprofile .profile { margin-left: 10px; padding: 2.5em 0 0 1em; width: 220px; float: right; } div#chatprofile .profile h2 { padding: 0.25em; background: #e7e7e7; overflow: auto; margin-bottom: 0; } div#chatprofile .profile h2 span { float: right; } div#chatprofile .profile h2 span img { padding: 2px; width: 20px; background: #fff; border: solid 1px #ccc; -moz-border-radius: 4px; -webkit-border-radius: 4px; } div#chatprofile .profile #map { height: 160px; width: 218px; /*background: url(/assets/images/temp/map.gif) 0 0 no-repeat;*/ border: solid 1px #ccc; } div#chatprofile .profile span { } div#chatprofile .profile .details { padding: 0.75em 0 0 0; } div#chatprofile .profile .details p { font-size: 1.1em; margin: 0.5em 0; padding: 0.25em 0 0.5em 0; border-bottom: dotted 1px #666; clear: both; text-align: right; } div#chatprofile .profile .details p span { width: 100px; font-weight: bold; float: left; text-align: left; } /* | | Generic Form Styles | */ form { } form fieldset { } form fieldset legend { } form fieldset p { } form fieldset p label { } form fieldset p input { } form fieldset input[type=submit], form fieldset input[type=button] { background: #5d5d5d; border: 1px solid #444; color: #fff; text-shadow: 1px 1px 0 #000; padding: 4px 10px 5px; margin: 0 5px 0 0; font-weight: bold; cursor: pointer !important; -moz-border-radius: 4px; -webkit-border-radius: 4px; } form fieldset input[type=submit]:hover, form fieldset input[type=button]:hover { background:#5d5d5d; border:1px solid #444; color:#fff; text-shadow: 0 -1px 0 #000; } form fieldset textarea { } form fieldset p.txtInput { } form fieldset p.chkBox { } form fieldset p.chkBox input { margin: 0.65em 0.25em 0 0; } form fieldset p.radioBox { } form fieldset p.radioBox input { margin: 0.65em 0.25em 0 0; } form fieldset p.dropdown { } form fieldset p.dropdown select { margin: 0; width: auto; padding: 0.35em;} form fieldset p.txtArea textarea { font-family: inherit; } /* | | Contextual Form Styles | */ form.contextual { margin-bottom: 1.5em; } form.contextual fieldset { margin: 0.5em 0 1em 0; padding: 0.5em 0 1.5em 0; } form.contextual fieldset legend { padding: 1.2em; background: #fafafa; border-left: solid 2px #ccc; font-size: 1.2em; font-weight: bold; } form.contextual fieldset p { width: 460px; padding: 0.5em 0.4em 0.5em 1em; float: left; clear: both; margin-bottom: 0.15em !important; } form.contextual fieldset p.blockfocus { background: #fafafa; } form.contextual fieldset p.error { margin: 0.15em 0; background: #FFDFDF; color: #DF0000; border-left: solid 2px #DF0000; } form.contextual fieldset p.error span { padding: 0.75em 0; font-size: 0.9em; display: block; } form.contextual fieldset p label { float: left; padding-top: 0.5em; } form.contextual fieldset p.blockfocus label { font-weight: bold; } form.contextual fieldset p input { } form.contextual fieldset p input[type=text] { padding: 0.35em; width: 200px; display: block; -moz-border-radius: 4px; -webkit-border-radius: 4px; } form.contextual fieldset p input[type=password] { padding: 0.35em; width: 200px; display: block; -moz-border-radius: 4px; -webkit-border-radius: 4px; } form.contextual fieldset p input.fieldfocus { border: 1px solid #ccc; background: #fff; color: #333; } form.contextual fieldset p.postal input { width: 80px; } form.contextual fieldset p.time input { width: 80px; } form.contextual fieldset p input.fieldidle { color: #6F6F6F; border: 1px solid #ccc; background: #fafafa; } form.contextual fieldset p.txtArea { width: 700px; } form.contextual fieldset p.txtArea textarea { width: 460px; height: 120px; } form.contextual fieldset p.txtArea textarea.fieldfocus { border: 1px solid #ccc; background: #fff; color: #333; } form.contextual fieldset p.txtArea textarea.fieldidle { color: #6F6F6F; border: 1px solid #ccc; background: #fafafa; } form.contextual fieldset p.radioBox input { float: left; } form.contextual fieldset p.radioBox span { padding: 0.5em 0 0 0.25em; width: 80px; display: block; float: left;} form.contextual fieldset p.radioBox.error em { padding: 0.75em 0; font-size: 0.9em; display: block; clear: both; } form.contextual fieldset p.dropdown span { padding-left: 0.25em; } form.contextual fieldset.submit { padding: 0 1em; } /* | | Match & Ride Preferences | */ form.contextual.preferences fieldset p.radioBox { width: 600px; } form.contextual.preferences fieldset p.radioBox span { width: 100px; } /* | | Sidebar Form Styles | */ form.sidebar { width: 200px; } form.sidebar fieldset { } form.sidebar fieldset legend { display: none; } form.sidebar fieldset p { } form.sidebar fieldset p label { padding: 0 0 0.25em 0.15em; display: block; } form.sidebar fieldset p input[type=text] { padding: 0.5em; width: 180px; background: #FFF; border: 1px solid #E7E7E7; display: block; -moz-border-radius: 4px; -webkit-border-radius: 4px; } form.sidebar fieldset p.error { } form.sidebar fieldset p.error label.error { padding: 0.25em; font-size: 0.9em; display: block; color: #DF0000; } form.sidebar fieldset p.error input { background: #FFDFDF; color: #DF0000; border: solid 1px #DF0000; } /* | | Header Login Form | */ #loginwrapper { width: 940px; margin: 0 auto; position: relative; z-index: 200; } #loginwrapper #loginbox { display: none; width: 500px; padding: 20px; position: absolute; top: 40px; right: 0px; z-index: 100; background: #000; filter:alpha(opacity=100); opacity: 1; color: #fff; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; } #loginwrapper #loginbox h1 { margin-bottom: 1em; font-size: 1.8em; font-weight: bold; } #loginwrapper #loginbox p { margin-bottom: 1em; } #loginwrapper #loginbox ul.action { padding: 1em 0; list-style-type: none; } #loginwrapper #loginbox ul.action li { padding: 0.25em 0; } #loginwrapper #loginbox .intro { width: 265px; float: left; } #loginwrapper #loginbox .intro p { padding-right: 20px; } #loginwrapper #loginbox a:hover { color: #ccc; } #loginwrapper #loginbox .form { width: 215px; float: left; padding-left: 19px; border-left: solid 1px #454545; } #loginwrapper #loginbox .form form.headerform fieldset { width: 215px; padding: 0; } #loginwrapper #loginbox .form form.headerform fieldset p { width: 215px; padding: 0 !important; } #loginwrapper #loginbox .form form.headerform fieldset legend { display: none; } #loginwrapper #loginbox .form form.headerform fieldset label { float: none; clear: both; padding-left: 0; font-weight: normal; margin-bottom: 1em; } #loginwrapper #loginbox .form form.headerform fieldset input { float: none; margin: 0.35em 0 1em 0; width: 195px; } #loginwrapper #loginbox .form form.headerform fieldset input[type=text], #loginwrapper #loginbox .form form.headerform fieldset input[type=password] { padding: 0.35em; background: #fff; border: solid 1px #ccc; display: block; -moz-border-radius: 4px; -webkit-border-radius: 4px;} #loginwrapper #loginbox .form form.headerform fieldset.submit input { margin-right: 1em; width: auto; } #loginwrapper #loginbox .form form.headerform fieldset p.remember span { float: left; overflow: hidden; } #loginwrapper #loginbox .form form.headerform fieldset p.remember span.checkbox { width: 20px; padding-top: 0.25em; } #loginwrapper #loginbox .form form.headerform fieldset p.remember span.checkbox input { width: auto; } #loginwrapper #loginbox .form form.headerform fieldset p.remember span.label { width: 180px; height: 24px; overflow: hidden; } #loginwrapper #loginbox .form form.headerform fieldset p.remember span.label label { display: block; width: 180px !important; padding-bottom: 0; } form.headerform { } form.headerform fieldset { } form.headerform fieldset legend { } form.headerform fieldset p { } form.headerform fieldset p label { } form.headerform fieldset p input { } /* | | Match & Ride :: Login | */ #content .logmein { width: 400px; float: left; border-right: solid 1px #e7e7e7; } #content .logmein form { width: 400px; } #content .logmein form fieldset { } #content .logmein form fieldset p { width: 370px; } #content .logmein form fieldset p input[type=text], #content .logmein form fieldset p input[type=password] { width: 150px; } #content .logmein form fieldset p.error { width: 370px; margin: 0.15em 0; background: #FFDFDF; color: #DF0000; border-left: solid 2px #DF0000; } #content .logmein form fieldset p.error span { padding: 0.75em 0; font-size: 0.9em; display: block; } #content .loginhelp { width: 270px; float: right; } #content .loginhelp h2 { margin-top: 0.5em; } #content .loginhelp p { margin: 1em 0 2em 0; } /* | | Tables | */ div.table { width: auto; margin: 0 0 2.5em 0; } div.table table { width: 100%; border-right: solid 1px #e7e7e7; } div.table table thead { background: #000; } div.table table thead tr { } div.table table thead tr th { font-size: 1.2em; padding: 0.75em 0.5em; color: #fff; border: solid 1px #000; width: auto; } div.table table tfoot { display: none; background: #333; } div.table table tfoot tr { } div.table table tfoot tr th { font-size: 1.2em; font-weight: bold; padding: 0.75em 0.5em; color: #fff; } div.table table tbody { } div.table table tbody tr { } div.table table tbody tr th, div.table table tbody tr td { font-size: 1.2em; padding: 0.65em 0.5em; border-left: solid 1px #e7e7e7; border-bottom: solid 1px #e7e7e7; } div.table table tbody tr td ul { } div.table table tbody tr td ul li { font-size: 1em; } div.table .footnote { width: auto; font-size: 1em; padding: 1em; background: #fafafa; border: solid 1px #e7e7e7; } /* | | Content-Specific Tables | */ div.table.how-people-commute { width: 400px; } div.table.statewide-bike-routes { width: 700px; } div.table.statewide-bike-routes tbody tr th { text-align: center; font-size: 1.4em; font-weight: bold; background: #fafafa; } div.table.bike-gear { width: 700px; } div.table.bike-gear tbody tr th { font-weight: bold; background: #fafafa; } div.table.bike-clubs { width: 460px; } div.table.bike-clubs table { margin-bottom: 1.5em; } div.table.bike-clubs tbody tr th { width: 200px; font-weight: bold; background: #fafafa; } div.table.bus-service { width: 700px; } div.table.bus-service thead th.service { background: #444; text-align: center; } div.table.bus-service tbody tr th { width: 250px; font-weight: bold; background: #fafafa; } /* Time picker */ div.time-picker { z-index: 99; position: absolute; margin-left: 110px; padding: 0.35em; height: 150px; width: 100px; overflow: auto; background: #fff; border: solid 1px #ccc; display: block; -moz-border-radius: 4px; -webkit-border-radius: 4px; } div.time-picker-12hours { width: 100px; } div.time-picker ul { list-style-type: none; margin: 0; padding: 0.5em; } div.time-picker li { padding: 0.35em; cursor: pointer; color: #444; } div.time-picker li.selected { background: #e7e7e7; color: #000; } /* Keystone */ div.ctk-reasons { padding-left: 200px; padding-bottom: 25px; } div.ctk-reasons.convenience { background: url('/assets/images/ctk-clock.jpg') 0 0 no-repeat; } div.ctk-reasons.save { background: url('/assets/images/ctk-gaspump.jpg') 0 0 no-repeat; } div.ctk-reasons.gtd { background: url('/assets/images/ctk-laptop.jpg') 0 0 no-repeat; } /* CI Inspector */ div#codeigniter_profiler { width: 940px; margin: 20px auto; font-size: 12px !important; } div#codeigniter_profiler legend { font-size: 14px !important; font-weight: bold; }