/* NTTA PORTAL (HOME) A few important notes: - We're using CSS to load all the layout images i.e. any images that are common to the site, and are not part of the content. - The paths for images being loaded via CSS are relative to the CSS file, not the HTML file. Transparent PNGs: - We're using a combination of transparent PNGs and precisely-positioned non-transparent GIFs/PNGs to create the shadows and edges. - IE 6 doesn't support transparent PNGs by default, we're feeding it the IE-only AlphaImageLoader filter to make the PNG transparent, and then offering Firefox, etc. just the transparent PNG. - IE 6 slightly color shifts (saturates) PNGs, so they don't blend with CSS colors and sometimes with GIFs. - WARNING: Text in front of transparent PNGs become unclickable in IE 6. Transparent portions of PNGs in links are also non-clickable. */ /* General elements */ * { padding: 0; margin: 0; border: 0; } html, body { height: 100%; } body { background: #36332f url(/images/portal/bg-page.gif) repeat-x left top; font: 12px/16px Arial, sans-serif; color:#35322e; } td { vertical-align: top; } p { margin-bottom: 7px; } a:link { color: #0d3853; } a:visited { color: #0d3853; } a:hover { color: #df2d04; } a:active { color: #df2d04; } /*Preload Images*/ #preload { width: 0; height: 0; position: absolute; top: 0; left: 0;} #preload #preload-nav-about { width: 0; height: 0; background: url(/images/portal/nav-about-ntta-o.png) no-repeat left top; } #preload #preload-nav-business { width: 0; height: 0; background: url(url(/images/portal/nav-business-o.png);) no-repeat left top; } #preload #preload-nav-csc { width: 0; height: 0; background: url(url(/images/portal/nav-csc-o_sticker.png);) no-repeat left top; } /* Main layout containers */ #main { background: #f1ebdd url(/images/portal/bg-body.png) no-repeat left top; height: 400px; } #nav { width: 210px; } #splash { width: 770px; } #content { height: 170px; } #footer { width: 760px; height: 20px; vertical-align: bottom; padding-left: 200px; color: #6c6760; font-size: 11px; } .nav-divider { width: 210px; height: 3px; background: url(/images/portal/divider-nav.gif) no-repeat left top; } /* NTTA home */ #nav #ntta-portal-home { margin: 0; width: 180px; height: 80px; text-indent: -10000px; } #nav #ntta-portal-home a { display: block; width: 100%; height: 100%; } /* Search field */ #nav #search { margin: 0; height: 57px; width: 200px; background: url(/images/portal/search-bg.gif) no-repeat 12px 1px; position: relative; padding-left: 0} #nav #search label { position: absolute; top: 1px; left: 16px; width: 46px; height: 10px; text-indent: -10000px; background: url(/images/portal/search-text.gif) no-repeat left center; } html>body #nav #search label { top: 4px; } #nav #search input.text { margin-left: 63px; background-color: transparent; } #nav #search #search-submit { position: absolute; top: 1px; left: 180px; border: 0; background-color: transparent; width: 21px; height: 21px; background: url(/images/portal/search-go.png) no-repeat top left; text-indent: -10000px; } #nav #search .search-submit { position: absolute; top: 1px; left: 180px; border: 0; background-color: transparent; width: 21px; height: 21px; background: url(/images/portal/search-go.png) no-repeat top left; text-indent: -10000px; } /* About NTTA link */ #nav #about-ntta { margin: 0 0 5px 0; width:127px; height: 51px; } #nav #about-ntta a { display: block; width: 100%; height: 100%; text-indent: -10000px; } #nav #about-ntta a:link, #nav #about-ntta a:visited { background: url(/images/portal/nav-about-ntta.png) no-repeat left top; } #nav #about-ntta a:hover, #nav #about-ntta a:active { background: url(/images/portal/nav-about-ntta-o.png) no-repeat left top; } /* Online CSC link */ #nav #csc { margin: 0 0 18px 0; width:157px; height: 54px;} html>body #nav #csc { margin: 19px 0 18px 0; } #nav #csc a { display: block; width: 100%; height: 100%; text-indent: -10000px; } #nav #csc a:link, #nav #csc a:visited { background: url(/images/portal/nav-csc_sticker.png) no-repeat left top; } #nav #csc a:hover, #nav #csc a:active { background: url(/images/portal/nav-csc-o_sticker.png) no-repeat left top; } /* Working With Us link */ #nav #business { margin: 0 0 37px 0; width:178px; height: 50px; } html>body #nav #business { margin: 13px 0 37px 0; } #nav #business a { display: block; width: 100%; height: 100%; text-indent: -10000px; } #nav #business a:link, #nav #business a:visited { background: url(/images/portal/nav-business.png) no-repeat left top; } #nav #business a:hover, #nav #business a:active { background: url(/images/portal/nav-business-o.png) no-repeat left top; } /* Splash photo */ #splash { /*background: url(/images/portal/splash-photo.jpg) no-repeat left top;*/ width: 770px; height: 380px; } #splash-overlay { position: absolute; top: 0; left: 210px; width: 53px; height: 380px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/splash-overlay.png',sizingMethod='crop'); } html>body #splash-overlay { background: url(/images/portal/splash-overlay.png) no-repeat left top; } #driving-conditions { width: 770px; height: 380px; visibility: hidden; } #driving-conditions-iframe { width: 770px; height: 380px; overflow: hidden; } /* Bottom content (Contact Us, Hot Topic, Speed map */ /* Contact Us box */ #contact { float: left; font: 12px/17px Arial, sans-serif; color: #377eab; } #contact-content { width: 190px; padding: 0 5px 5px 10px; background: url(/images/portal/contact-bg.gif) repeat-y left top; position: relative; } html>body #contact-content { background: url(/images/portal/contact-bg.png) repeat-y left top; } #contact-top { width: 190px; height: 20px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/contact-top.png',sizingMethod='scale'); } html>body #contact-top { background: url(/images/portal/contact-top.png) no-repeat left top; } #contact-bottom { float: left; width: 190px; height: 20px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/contact-bottom.png',sizingMethod='scale'); } html>body #contact-bottom { background: url(/images/portal/contact-bottom.png) no-repeat left top; } /* Hot Topic */ /*background: url(/images/portal/hot-topic-photo.jpg) no-repeat left top;*/ #hot-topic { float: left; width: 170px; height: 160px; position: relative; margin-top: 4px;} #hot-topic-overlay { position: absolute; top: 0px; left: 0px; width: 170px; height: 160px; background: url(/images/portal/hot-topic-overlay.gif) no-repeat left top; } #hot-topic-content { float: left; width: 300px; padding: 0 0 0 5px; } #hot-topic-content h2 { color: #00529c; font-size: 14px; line-height: 18px; } #hot-topic-content #RadEditorPlaceHolderControl1 { float: left; width: 450px; padding: 5px; font-size: 12px; } #hot-topic-content #RadEditorPlaceHolderControl1 h2 { color: #00529c; font-size: 14px; line-height: 18px; } #hot-topic-content ul { margin-bottom: 10px; margin-left: 20px; } #hot-topic-content ol { margin-bottom: 10px; margin-left: 30px; } #hot-topic-content ul li { list-style-image: url(images/common/bg/body-arrow.png); margin-top: 2px; } #hot-topic-content ol li { list-style-image: none; margin-top: 2px; } /* Speed map */ #speedmap { float: right; margin: 4px 5px 0 0; } #driving { width: 275px; background: #ddd url(/images/portal/driving-bg.gif) repeat-x left top;} #driving-topleft { width: 10px; height: 10px; background: url(/images/portal/driving-topleft.gif) no-repeat left top; } #driving-top { width: 255px; height: 10px; background: url(/images/portal/driving-topbottom.gif) repeat-x left top; } #driving-topright { width: 10px; height: 10px; background: url(/images/portal/driving-topright.gif) no-repeat left top; } #driving-bottomleft { width: 10px; height: 10px; background: url(/images/portal/driving-bottomleft.gif) no-repeat top left; } #driving-bottom { width: 255px; height: 10px; background: url(/images/portal/driving-topbottom.gif) repeat-x left bottom; } #driving-bottomright { width: 10px; height: 10px; background: url(/images/portal/driving-bottomright.gif) no-repeat top left; } #driving-left { width: 10px; background: url(/images/portal/driving-sides.gif) repeat-y left top; } #driving-right { width: 10px; background: url(/images/portal/driving-sides.gif) repeat-y right top; } #driving-content { background-color: transparent; color: #666666; padding: 5px 5px 0 5px;} #driving-content p { padding: 0; margin: 0 0 5px 0; font-size: 12px;} .driving-speedbar { width: 240px; height: 18px; margin-bottom: 8px; background: url(/images/portal/driving-speed.png) no-repeat left top; } .driving-arrow-normal, .driving-arrow-slow, .driving-arrow-delays { width: 11px; height: 18px; background: url(/images/portal/driving-arrow.gif) no-repeat left top; } .driving-arrow-normal { margin-left: 28px; } .driving-arrow-slow { margin-left: 122px; } .driving-arrow-delays { margin-left: 208px; } #driving-footer { font-size: 10px; line-height: 17px; } .popup-help { width: 200px; padding: 5px; border: 1px solid #6fa6c8; font: normal 11px/14px Arial, sans-serif; visibility: hidden; overflow: visible; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/popup-bg.png',sizingMethod='crop'); } /* default Windows yellow for help popups: #ffffe1; */ html>body .popup-help { background: url(/images/portal/popup-bg.png) no-repeat right bottom; } #help-AboutNTTA { position: absolute; top: 135px; left: 130px; width: 200px; height: auto; } #help-OnlineCSC { position: absolute; top: 216px; left: 170px; width: 200px; height: auto; } #help-WorkingWithUs { position: absolute; top: 300px; left: 182px; width: 200px; height: auto; } /*Right-side shadow */ #shadow-right { width: 10px; height: 400px; background: #36332f url(/images/portal/shadow-right-bg.gif) repeat-y left top; } #shadow-righttop { width: 10px; height: 100%; background: url(/images/portal/shadow-right-top.gif) no-repeat left top; } /*Right-side shadow */ #shadow-bottom { height: 20px; background: url(/images/portal/shadow-bottom.gif) repeat-x left bottom; } #shadow-bottomright { height: 20px; width: 100%; background: url(/images/portal/shadow-bottom-right.gif) no-repeat right top; }