/* -------------------------------------------------------------- Reset.css * Resets default browser CSS styles. Original by Erik Meyer: * meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ -------------------------------------------------------------- */ 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; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } body { line-height: 1; color: #333; background: white; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } /* Remove possible quote marks (") from ,
. */ blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Clearing floats without extra markup Based on How To Clear Floats Without Structural Markup by PiE [http://www.positioniseverything.net/easyclearing.html] */ .clear { display: inline-block; } .clear:after, .container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clear { height: 1%; } .clear { display: block; } /* -------------------------------------------------------------- Typography.css * Sets some default typography. -------------------------------------------------------------- */ body { font-family: Arial, Helvetica, sans-serif; line-height: 1.5; /* Unitless for proper inheritance */ color: #65676C; } /* This is where you set your desired font size. The line-height and vertical margins are automatically calculated from this. You have to add an extra calculation here because of IE, so that all users may resize text manually in their browsers. The top one is for IE: The percentage is of 16px (default IE text size) 10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth). The second value is what all other browsers see (the wanted font size). */ body { font-size: 69%; } /* IE */ html > body { font-size: 11px; } /* Other browsers */ /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color: #0552A5; line-height:1em; margin-bottom:10px; } h1 { font-size: 2.8em; font-weight: normal; font-style: italic; padding:5px 0px 10px 0px; } h2 { font-size: 1.8em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: 1em; } #contentArea h1 { color:#fff; margin-bottom:10px; } #contentArea h2, #contentArea h3, #contentArea h4, #contentArea h5, #contentArea h6 { color: #fff; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 1.5em 0; font-size:1.05em; } p.last { margin-bottom:0; } /*p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding:0; }*/ p img.top { margin-top:0; } /* Use this if the image is at the top of the

. */ ul, ol { margin: 0 0 1.5em 1.5em; } ol { list-style-type: decimal; margin-left:3em; } dl { margin: 1.5em 0; } dl dt { font-weight: bold; } li { font-size:1.05em; } a { color: #F26721; text-decoration: none; outline: none; } a:hover { color: #0552A5; text-decoration: none; } blockquote { margin: 1.5em 0 1.5em 1.5em; color: #666; font-style: italic; } strong { font-weight: bold; } em { font-style: italic; } pre { margin-bottom: 1.3em; background: #eee; border:0.1em solid #ddd; padding:1.5em; } code { font:0.9em Monaco, monospace; } /* Use this to create a horizontal ruler across a column. */ hr { background: #B2CCFF; color: #B2CCFF; clear: both; float: none; width: 100%; height: 0.1em; margin: 0 0 1.4em 0; border: none; } * html hr { margin: 0 0 1.2em 0; } /* IE6 fix */ /* Tables -------------------------------------------------------------- */ table { margin-bottom: 1.4em; border-top:0.0em solid #ddd; border-left:0.0em solid #ddd; } th,td { height: 1em; padding:0.2em 0.4em; border-bottom:0.0em solid #ddd; border-right:0.0em solid #ddd; } th { font-weight:bold; } /* Forms -------------------------------------------------------------- */ label { font-weight: normal; cursor: pointer; } /*textarea { height: 180px; width: 300px; }*/ /* Some default classes -------------------------------------------------------------- */ p.small { font-size: 0.8em; margin-bottom: 1.875em; line-height: 1.875em; } p.large { font-size: 1.2em; line-height: 2.5em; } p.quiet { color: #666; } .hide { display: none; } /* Extra fancy typography -------------------------------------------------------------- */ /* For great looking type, use this code instead of asdf: asdf Best used on prepositions and ampersands. */ .alt { color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", serif; font-size: 1.2em; line-height: 1%; /* Maintain correct baseline */ font-style: italic; } /* For great looking quote marks in titles, replace "asdf" width: “asdf” (That is, when the title starts with a quote mark). (You may have to change this value depending on your font size). */ .dquo { margin-left: -.7em; } /* Reduced size type with incremental leading (http://www.markboulton.co.uk/journal/comments/incremental_leading/) This could be used for side notes. For smaller type, you don't necessarily want to follow the 1.5x vertical rhythm -- the line-height is too much. Using this class, it reduces your font size and line-height so that for every four lines of normal sized type, there is five lines of the sidenote. eg: New type size in em's: 10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems) New line-height value: 12px x 1.5 = 18px (old line-height) 18px x 4 = 72px 60px / 5 = 14.4px (new line height) 14.4px / 10px = 1.44 (new line height in em's) */ p.incr, .incr p { font-size: 0.83333em; /* font size 10px */ line-height: 1.44em; margin-bottom: 1.8em; /* Still 1.5 x normal font size as baseline */ } /* -------------------------------------------------------------- CSS Framework * Site Styles * -------------------------------------------------------------- */ /* -------------------------------------------------------------- Site wrapper ---------------------------------------------------------------*/ #wrapper { width:832px; margin:10px auto 30px auto; } /* -------------------------------------------------------------- Utility styles ---------------------------------------------------------------*/ .left { float:left; text-align:left; } .right { float:right; text-align:right; } .position_left { float: left; } .position_right { float: right; } .hide { display:none; } .icon { vertical-align:middle; float:none; } /* -------------------------------------------------------------- Header ---------------------------------------------------------------*/ .header { margin-bottom:10px; } .header a { color: #0552A5; } .header a:hover { color: #F26721; } .accessibilitylinks { display:none; } /* -------------------------------------------------------------- Middle -and- columns ---------------------------------------------------------------*/ .middle { position:relative; } .columnLeft { width:161px; float:left; margin-bottom:20px; } .columnRight { width:665px; float:right; margin-bottom:20px; } .logo { height:52px; } .logo img { margin-top:-10px; } /* -------------------------------------------------------------- Tabbed navigation ---------------------------------------------------------------*/ .tabs { float:right; text-align:right; position:relative; width:460px; height:52px; } .tabs a { display:block; cursor:pointer; height:52px; float:right; position:absolute; z-index:1; } .tabs a span { display:none; } .tabs .employers { width: 180px; background: url('/images/tab.employers.png') center center no-repeat; left:0; } .tabs .employees { width: 180px; background: url('/images/tab.employees.png') center center no-repeat; left:155px; } .tabs .flex { width:150px; background: url('/images/tab.home.png') center center no-repeat; left:310px; } .tabs .selected { z-index:1000; } /* -------------------------------------------------------------- Side column navigation ---------------------------------------------------------------*/ .navigation { font-family: "trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size:12px; } .navigation ul { list-style:none; margin:0; padding:0; } .navigation ul li { margin:0; padding:0; } .navigation ul li a { display:block; padding:1px 2px 1px 18px; color:#fff; border-bottom:1px solid #fff; } .navigation ul li a:hover { color:#fff; } .navigation ul.firstLevel li.home a { background: url('/images/nav.bg.top.png') top right no-repeat; height:20px; padding-top:35px; } .navigation ul.firstLevel li.sectionTitle a { background: #4c7bb7 url('/images/bullet.triangle.right.gif') left center no-repeat; padding:14px 4px 14px 18px; font-size:14px; } .navigation ul.secondLevel li a { background-color: #004fa1; background-image: url(''); } .navigation ul.secondLevel li a:hover { background: #004fa1 url('/images/nav.arrow.right.gif') right center no-repeat; } .navigation ul.secondLevel li a.selected { background: #004fa1 url('/images/nav.arrow.down.gif') right center no-repeat; } .navigation ul.secondLevel li a.selected:hover { background: #004fa1 url('/images/nav.arrow.down.gif') right center no-repeat; } .navigation ul.secondLevel li ul { display:none; } .navigation ul.secondLevel li ul li a { background: #aec3de; color:#004fa1; line-height: 1.4em; } .navigation ul.secondLevel li ul li a:hover { background: #aec3de; color:#dc5600; text-decoration:none; } .navigation ul.thirdLevel li a { background: #4c7bb7; } .navigation ul.thirdLevel li a:hover { background: #4c7bb7 url('/images/nav.arrow.right.gif') right center no-repeat; } .navigation ul.thirdLevel li a.selected { background: #4c7bb7 url('/images/nav.arrow.right.gif') right center no-repeat; } .navigation ul.thirdLevel li a.selected:hover { background: #4c7bb7 url('/images/nav.arrow.right.gif') right center no-repeat; } .navigation ul.fourthLevel li a { background: #6bafbb; } .navigation ul.fourthLevel li a:hover { background: #6bafbb url('/images/nav.arrow.right.gif') right center no-repeat; } .navigation ul.fourthLevel li a.selected { background: #6bafbb url('/images/nav.arrow.right.gif') right center no-repeat; } .navigation ul.fourthLevel li a.selected:hover { background: #6bafbb url('/images/nav.arrow.right.gif') right center no-repeat; } .navigation ul.fifthLevel li a span { display:none; } .navigation ul.fifthLevel li.lowerNavPic a { background: url('/images/nav.bg.darkcurved.gif') bottom left no-repeat #a4c1df; height: 105px; border:0px; margin:0; padding:0; } .navigation ul.fifthLevel li.bottomNavBlock { color: #3a70bf; background: url('/images/nav.bg.lightcurved.gif') bottom left no-repeat; height: 85px; border:0; margin:0; padding:15px; } .navigation ul.fifthLevel li.bottomNavBlock h4 { color: #3a70bf; } .navigation ul.fifthLevel li.bottomNavBlock span { font-size:0.9em; } .navigation ul.fifthLevel li.bottomNavBlock a { display:inline; color: #F26721; border:0; text-decoration:none; padding:0; margin:0; } /* -------------------------------------------------------------- Content area ---------------------------------------------------------------*/ #contentArea { margin-top:0px; color: #fff; } #contentBlock { padding-bottom:140px; min-height:300px; } .contentBlock_employees { background-image: url('/images/logo.flex.contentbg.employees.gif'); background-position: bottom right; background-repeat: no-repeat; } .contentBlock_employers { background-image: url('/images/logo.flex.contentbg.employers.gif'); background-position: bottom right; background-repeat: no-repeat; } .contentBlock_flex { background-image: url('/images/logo.flex.contentbg.flex.gif'); background-position: bottom right; background-repeat: no-repeat; } .pageEmployees { background: #4c7bb7; } .pageEmployers { background: #6f9dca; } .pageFlex { background: #6bafbb; } .contentImage { float:left; width:159px; height:400px; background-position: top left; background-repeat: no-repeat; } .contentVerticalDivider { float:left; margin-left:15px; width:46px; } .contentText { margin-left:220px; width:430px; padding-top:55px; } /* .pageFlex .contentText a { color: #114a84; } .pageFlex .contentText a:hover { color: #f0ff00; } */ .pageFlex .contentText a { color: #fff75e; border-bottom:0px dotted #114a84; } .pageFlex .contentText a:hover { color: #114a84; border-bottom:0px dotted #114a84; } .pageEmployers .contentText a { color: #fff75e; } .pageEmployers .contentText a:hover { color: #004fa1; } .pageEmployees .contentText a { color: #ffce3e; } .pageEmployees .contentText a:hover { color: #fff; } .contentText img { padding:0px 15px; } /* -------------------------------------------------------------- Landing page styles Main body area ---------------------------------------------------------------*/ .mainbody { padding-top:20px; color: #fff; border-bottom:1px solid #fff; } .mainbody div.maincontent { min-height:300px; background: url('/images/landingpage.bg.triangle.png') bottom left no-repeat; } .mainbody div.textcontent { padding-top:0px; margin-left:335px; padding-left:30px; margin-right:20px; padding-bottom:20px; z-index:100; } .mainbody div.textcontent h1 { color: white; line-height:1em; font-style: italic; padding-top:2px; margin-bottom:20px; font-size:2.3em; font-weight:normal; } .mainbody_bottom { height: 55px; margin-bottom:20px; background: url('/images/logo.actnow.small.jpg') right center no-repeat; } .mainbody_flex { background: #6bafbb url('/images/roundedcorner.flexhome.gif') top left no-repeat; } .mainbody_employers { background: #6f9dca url('/images/roundedcorner.employershome.gif') top left no-repeat; margin-bottom:20px; } .mainbody_employees { background: #4c7bb7 url('/images/roundedcorner.employeeshome.gif') top left no-repeat; margin-bottom:20px; } div.homegraphic_flex { z-index:50; position:absolute; width:214px; left: 130px; height:376px; background: url('/images/homegraphic.gymnast.png') no-repeat bottom left; } div.homegraphic_employers { z-index:50; position:absolute; width:251px; left: 100px; height:370px; background: url('/images/homegraphic.employers.png') no-repeat bottom left; } div.homegraphic_employees { z-index:50; position:absolute; width:353px; left: 35px; height:385px; background: url('/images/homegraphic.employees.png') no-repeat bottom left; } div.mainbody_flex div.textcontent { background: url('/images/bullet.triangle.flexpage.gif') top left no-repeat; } div.mainbody_employers div.textcontent { background: url('/images/bullet.triangle.employers.gif') top left no-repeat; } div.mainbody_employees div.textcontent { background: url('/images/bullet.triangle.employees.gif') top left no-repeat; } /* -------------------------------------------------------------- Landing page styles Subfooter ---------------------------------------------------------------*/ .subfooter div.leftblock { float:left; width:480px; } .subfooter div.leftblock div { height:135px; } .subfooter div.leftblock div.image { float:left; width:175px; } .subfooter div.leftblock div.info { float:left; width:130px; padding:0px 15px; margin-left:-12px; background: url('/images/buttonbg.homeinfo.png') bottom left no-repeat; } .subfooter div.leftblock div.info h3 { padding-top: 10px; } .subfooter div.leftblock div.info p { color: #0552A5; } .subfooter div.leftblock div.links { float:left; width:150px; background: url('/images/buttonbg.homelinks.gif') top right no-repeat; } .subfooter div.leftblock div.links ul { list-style:none; padding-top:10px; } .subfooter div.leftblock div.links li a { display:block; background: url('/images/bullet.triangle.png') left center no-repeat; padding-left:15px; font-size: 1.2em; color: #0552A5; font-weight:bold; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .subfooter div.leftblock div.links li a:hover { color: #F26721; } .subfooter div.rightblock { float:right; width:345px; } .subfooter div.rightblock div { height:135px; } .subfooter div.rightblock div.image { float:left; width:174px; } .subfooter div.rightblock div.linkblocks { float:left; width:185px; margin-left:-14px; } .subfooter div.rightblock div.linkblocks a { cursor:pointer; display:block; font-size: 1.3em; color: #0552A5; font-weight:bold; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .subfooter div.rightblock div.linkblocks a.top { height:52px; padding-left:55px; padding-top:15px; background: url('/images/buttonbg.toptips.png') top right no-repeat #c1ddf4; } .subfooter div.rightblock div.linkblocks a.bottom { height:45px; padding-left:55px; padding-top:23px; background: url('/images/buttonbg.videoresources.png') bottom left no-repeat; } .subfooter div.rightblock div.linkblocks a:hover { color: #F26721; } /* -------------------------------------------------------------- Footer ---------------------------------------------------------------*/ .footer { } .footer div.logos { margin: 20px 0px 13px 0px; text-align:center; } .footer div.logos img { margin:0px 22px; } .footer div.footertext p { text-align:center; margin:0; padding:0; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } .bottomNavigationMenu { margin-top:-20px; margin-bottom:20px; } .bottomNavigationMenu ul { list-style:none; display:inline; } .bottomNavigationMenu ul li { float:left; } .bottomNavigationMenu ul li a { display:block; z-index:99; color: #fff; text-align:center; padding-top:25px; font-size:1.2em; font-family: "trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } .bottomNavigationMenu ul li a:hover { color: #fff; } .bottomNavigationMenu ul li a.bottonNavLink { height:29px; } .bottomNavigationMenu ul li.whatisit { width:98px; height:54px; background: url('/images/nav.bottom.whatisit.gif') bottom center no-repeat; } .bottomNavigationMenu ul li.thebenefits { width:112px; height:54px; background: url('/images/nav.bottom.thebenefits.gif') bottom center no-repeat; } .bottomNavigationMenu ul li.planningforit { width:120px; height:54px; background: url('/images/nav.bottom.planningforit.gif') bottom center no-repeat; } .bottomNavigationMenu ul li.doingit { width:83px; height:54px; background: url('/images/nav.bottom.doingit.gif') bottom center no-repeat; } .bottomNavigationMenu ul li.faqs { width:65px; height:54px; background: url('/images/nav.bottom.faqs.gif') bottom center no-repeat; } .bottomNavigationMenu ul li.glossary { width:89px; height:54px; background: url('/images/nav.bottom.glossary.gif') bottom center no-repeat; } .bottomNavigationMenu ul li.toolkitdownload { width:139px; height:54px; background: url('/images/nav.bottom.toolkit.gif') bottom center no-repeat; } .bottomNavigationMenu ul li.flexdirectory { width:126px; height:54px; background: url('/images/nav.bottom.directory.gif') bottom center no-repeat; } .bottomNavigationMenu li.whatisit:hover { background: url('/images/nav.bottom.whatisit.over.gif') bottom center no-repeat; } .bottomNavigationMenu li.thebenefits:hover { background: url('/images/nav.bottom.thebenefits.over.gif') bottom center no-repeat; } .bottomNavigationMenu li.planningforit:hover { background: url('/images/nav.bottom.planningforit.over.gif') bottom center no-repeat; } .bottomNavigationMenu li.doingit:hover { background: url('/images/nav.bottom.doingit.over.gif') bottom center no-repeat; } .bottomNavigationMenu li.faqs:hover { background: url('/images/nav.bottom.faqs.over.gif') bottom center no-repeat; } .bottomNavigationMenu li.glossary:hover { background: url('/images/nav.bottom.glossary.over.gif') bottom center no-repeat; } .bottomNavigationMenu li.toolkitdownload:hover { background: url('/images/nav.bottom.toolkit.over.gif') bottom center no-repeat; } .bottomNavigationMenu li.flexdirectory:hover { background: url('/images/nav.bottom.directory.over.gif') bottom center no-repeat; } .bottomNavigationMenu ul li ul { list-style:none; margin:0px 0 0 0; padding:0; display:none; position:absolute; background-color: #cddced; z-index:500; } .bottomNavigationMenu ul li ul li { padding:0; margin:0; float:none; z-index:5; } .bottomNavigationMenu ul li ul li a { display:block; font-size:1.1em; width:200px; text-align:left; padding:3px 22px 3px 12px; margin:0; background: #004fa1; border-bottom:1px solid #cddced; z-index:5; } .bottomNavigationMenu ul li ul li a:hover { background: #5d8dc2 url('/images/nav.arrow.right.gif') right center no-repeat; color: #fff; z-index:5; } .bottomNavigationMenu ul li ul li a.last { border-bottom:1px solid white; z-index:5; } /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ *{padding: 0; margin: 0;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} /* ----------------------------------------------------------------------------------------------------------------*/ /* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/ /* ----------------------------------------------------------------------------------------------------------------*/ #TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; } .TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;} .TB_overlayBG { background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; } * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%; } * html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_window img#TB_Image { display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666; } #TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left; } #TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right; } #TB_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; } #TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB_title{ background-color:#e8e8e8; height:27px; } #TB_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; } #TB_ajaxContent.TB_modal{ padding:15px; } #TB_ajaxContent p{ padding:5px 0px 5px 0px; } #TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } * html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; } * html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px; }