/* NTTA PORTAL (WORKING WITH US) 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: 1. Text in front of transparent PNGs become unclickable in IE 6. Transparent portions of PNGs in links are also non-clickable. 2. Paths for images loaded via AlphaImageLoader should be relative to root i.e. /images/a.png rather than ../images/a.png */ /* General elements */ * { padding: 0; margin: 0; border: 0; } html, body { height: 100%; } body { background: #36332f url(/images/common/bg/bg-page.gif) repeat-x left top; font: 12px/16px Arial, sans-serif; color:#35322e; } td { vertical-align: top; } p { margin-bottom: 10px; } h3 { font-size: 18px; line-height: 24px; color: #377eab; } a:link { color: #377eab; } a:visited { color: #377eab; } a:hover { color: #df2d04; } a:active { color: #df2d04; } /* Main layout containers */ #main { background: #f1ebdd url(/images/working/common/bg.png) no-repeat left top; height: 400px; } #leftcol { width: 220px; } #content { width: 760px; } #footer { width: 750px; height: 20px; padding-top:20px; color: #88837c; } /* NTTA home */ #ntta-portal-home { margin: 0; width: 110px; height: 40px; text-indent: -10000px; } #ntta-portal-home a { display: block; width: 100%; height: 100%; } /* Working With The NTTA link */ #working-ntta { margin: 0; width:120px; height: 50px; } #working-ntta a { display: block; width: 100%; height: 100%; text-indent: -10000px; } /* Search field */ #search { margin-left: 10px; height: 30px; width: 100px; background: url(/images/common/search-bg.gif) no-repeat 0 0; position: relative; padding-right: 10px; } html>body #search { width: 120px; } #search label { position: absolute; top: 1px; left: 16px; width: 46px; height: 10px; text-indent: -10000px; background: url(../images/common/search-text.gif) no-repeat left center; } html>body #search label { top: 4px; } html>body #search input.text { margin-left: 50px; } #search input.text { margin-left: 40px; background-color: transparent; } #search #search-submit { position: absolute; top: 1px; left: 133px; border: 0; background-color: transparent; width: 21px; height: 21px; background: url(/images/common/button-search.png) no-repeat top left; text-indent: -10000px; } #search .search-submit { position: absolute; top: 1px; left: 133px; border: 0; background-color: transparent; width: 21px; height: 21px; background: url(/images/common/button-search.png) no-repeat top left; text-indent: -10000px; } /* Navigation box */ #nav { position: relative; margin-top: 20px; } /*#nav-content { }*/ #nav ul { background: url(/images/common/nav-bg.png) no-repeat left top; font-size: 12px; line-height: 16px; color: #416e8a; list-style: none; padding-bottom: 0; } #nav ul li { padding: 3px 15px 5px 15px; } #nav ul li.level1 { background: url(/images/common/level2-bg.png) no-repeat left top; font-weight: normal; color: #fff } #nav ul li.level2 { background: url(/images/common/level2-bg.png) no-repeat left top; font-weight: normal; color: #fff; padding-left: 30px; } #nav ul li.here { background: url(/images/common/nav-here.png) no-repeat left top !important; font-weight: bold; color: #fff } #nav ul li.here a { color: #fff !important; } #nav ul a { text-decoration: none; } #nav ul a:hover { text-decoration: underline; } #nav-bottom { width: 220px; height: 20px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/nav-bottom.png',sizingMethod='scale'); } html>body #nav-bottom { background: url(/images/common/nav-bottom.png) no-repeat left bottom; } .navDir { font-weight: normal; } .currentDir { font-weight: bold; } .currentParentDir {font-weight: bold;} li.Channels {font-weight: bold;} /*root channel stays bolded*/ li.currentDir { display:block; visibility:visible;} li.AboutNTTA { display:none; } .currentDir.Home.navDir { font-weight: normal; } /* Contact Us box */ #contact { color: #36332f; } #contact-top { width: 220px; height: 20px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/contact-top.png',sizingMethod='scale'); } html>body #contact-top { background: url(/images/common/contact-top.png) no-repeat left top; } #contact-content { width: 220px; background: url(/images/common/contact-bg.png) repeat-y left top; } #contact-content p { padding: 0 10px 0px 10px; } #contact-bottom { width: 220px; height: 20px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/contact-bottom.png',sizingMethod='scale'); } html>body #contact-bottom { background: url(/images/common/contact-bottom.png) no-repeat left top; margin-top: -10px; } .icon-news { margin-right: 5px; float: right; width: 70px; height: 60px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/icon-news.png',sizingMethod='scale'); } html>body .icon-news { background: url(/images/common/icon-news.png) no-repeat left top; } .icon-warn { margin-right: 5px; float: right; width: 51px; height: 53px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/icon-warn.png',sizingMethod='scale'); } html>body .icon-warn { background: url(/images/common/icon-warn.png) no-repeat left top; } .icon-arrow-right { margin-left: 5px; margin-right: 0; float: right; width: 40px; height: 60px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/arrow-right.png',sizingMethod='scale'); } html>body .icon-arrow-right { background: url(/images/common/arrow-right.png) no-repeat left top; } .icon-map { margin-left: 5px; margin-right: 0; float: right; width: 69px; height: 47px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/common/icon-map.png',sizingMethod='scale'); } html>body .icon-map { background: url(/images/common/icon-map.png) no-repeat left top; } .icon-interop { margin-left: 0; margin-right: 5px; float: left; width: 65px; height: 67px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/icon-interop.png',sizingMethod='scale'); } html>body .icon-interop { background: url(/images/common/icon-interop.png) no-repeat left top; } .icon-annual { margin-left: 0; margin-right: 5px; float: right; width: 41px; height: 98px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/icon-annual.png',sizingMethod='scale'); } html>body .icon-annual { background: url(/images/common/icon-annual.png) no-repeat left top; } .icon-calendar { margin-left: 0; margin-right: 5px; float: right; width: 57px; height: 73px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/icon-calendar.png',sizingMethod='scale'); } html>body .icon-calendar { background: url(../images/common/icon-calendar.png) no-repeat left top; } .icon-check { margin-left: 5px; margin-right: 5px; float: right; width: 33px; height: 58px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/icon-check.png',sizingMethod='scale'); } html>body .icon-check { background: url(/images/common/icon-check.png) no-repeat left top; } .icon-binos { margin-left: 5px; margin-right: 5px; float: right; width: 52px; height: 46px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/icon-binos.png',sizingMethod='scale'); } html>body .icon-binos { background: url(/images/common/icon-binos.png) no-repeat left top; } #footer { margin-left: 5px; list-style: none; } #footer li { float: left; border-left: 1px solid #736e67; color: #736e67; padding: 0 10px 0 10px; } #footer li.first { border: 0; } /*Right-side shadow */ #shadow-right { width: 10px; height: 400px; background: #36332f url(/images/common/bg/shadow-right-bg.gif) repeat-y left top; } #shadow-righttop { width: 10px; height: 100%; background: url(/images/common/bg/shadow-right-top.gif) no-repeat left top; } /*Right-side shadow */ #shadow-bottom { height: 20px; background: url(/images/common/bg/shadow-bottom.gif) repeat-x left bottom; } #shadow-bottomright { height: 20px; width: 100%; background: url(/images/common/bg/shadow-bottom-right.gif) no-repeat right top; } blockquote { background: url(/images/common/quote.gif) no-repeat top left; margin-left: 40px; padding-left: 40px; height: 40px; color: #396480; min-height: 40px; } div.address { margin: 10px 0 20px 0; } div.address address { float: left; margin: 0 10px 10px 5px; font-style: normal; } div.address .icon-arrow-right { float: left; } table.data { border-top: 1px solid #bbb4ab; border-bottom: 1px solid #bbb4ab; color: #36332f; } table.data th { text-align: left; padding: 5px; vertical-align: top; width: 160px; } table.data td { text-align: left; padding: 5px; vertical-align: top; } /*table.data tr.odd th { background-color: #f9e3a6; } table.data tr.odd td { background-color: #f9e3a6; } table.data td.odd { background-color: #f9e3a6; }*/ .odd1{background-color: white;} .even1{background-color: #f9e3a6;} .prev-arrow { background: url(/images/common/step-prev.gif) no-repeat left top; padding-left: 35px; height: 30px; line-height: 30px; float: left; } .prev-arrow-left { background: url(/images/common/step-prev.gif) no-repeat left top; padding-left: 35px; height: 30px; line-height: 30px; } .next-arrow { background: url(/images/common/step-next.gif) no-repeat left top; width: 35px; height: 30px; float: left; } .next-arrow-left { background: url(/images/common/step-next.gif) no-repeat left top; padding-left: 35px; height: 30px; line-height: 30px; } .next-arrow-right { background: url(/images/common/arrow-next-yellow.png) no-repeat right top; padding-right: 35px; height: 30px; line-height: 30px; } .next-arrow-left-blue { background: url(/images/common/arrow-next-bluebg.gif) no-repeat left center; padding-left: 40px; height: 30px; line-height: 30px; } .important { font-weight: bold; color: #BD1E09; } .photo-cellphone { float: right; width: 80px; height: 300px; background: url(/images/working/photos/cellphone.png) no-repeat left top;} .footnote { border-top: 1px solid #a7a097; color: #817a71; font-size: 11px; padding-top: 10px; margin: 20px 20px 10px 0; } .question { font-size: 14px; font-weight: bold; } .answer { padding-left: 35px; height: 51px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/common/icon-a.png',sizingMethod='crop'); } html>body .answer { height: auto; min-height: 51px; } ul.news li { list-style-image: url(/images/common/arrow-right-small.png); } /* The steps at the top of each page shows: 1. the total number of pages the user will go through to complete the process 2. Indicate which steps have not been taken yet 3. Highlight the step that the user is currently working on 4. Indicate which steps the user has already completed */ .steps { height: 40px; } .steps span { display: block; float: left; width: 41px; height: 15px; margin:10px 5px 0 0; background: url(/images/common/txt-step.gif) no-repeat top left; text-indent: -10000px; } .steps ul { list-style: none; } .steps li { display: block; float: left; text-indent: -10000px; width: 42px; height: 35px; } /* By default, indicate which steps have not been taken yet*/ .steps .step1 { background: url(/images/common/steps.gif) no-repeat top left; width: 25px; height: 35px; } .steps .step2 { background: url(/images/common/steps.gif) no-repeat -26px 0; } .steps .step3 { background: url(/images/common/steps.gif) no-repeat -68px 0; } .steps .step4 { background: url(/images/common/steps.gif) no-repeat -110px 0; } .steps .step5 { background: url(/images/common/steps.gif) no-repeat -152px 0; } .steps .step6 { background: url(/images/common/steps.gif) no-repeat -194px 0; } .steps .step7 { background: url(/images/common/steps.gif) no-repeat -236px 0; } /* The user is currently at this step in the process */ li.step1-here { background: url(/images/common/step-here.gif) no-repeat 0 0; width: 25px; height: 35px; } li.step2-here { background: url(/images/common/step-here.gif) no-repeat -26px 0; width: 42px; height: 35px; } li.step3-here { background: url(/images/common/step-here.gif) no-repeat -68px 0; width: 42px; height: 35px; } li.step4-here { background: url(/images/common/step-here.gif) no-repeat -110px 0; width: 42px; height: 35px; } li.step5-here { background: url(/images/common/step-here.gif) no-repeat -152px 0; width: 42px; height: 35px; } li.step6-here { background: url(/images/common/step-here.gif) no-repeat -194px 0; width: 42px; height: 35px; } li.step7-here { background: url(/images/common/step-here.gif) no-repeat -236px 0; width: 42px; height: 35px; left: -10000px; } /* And these are the steps the user has already completed */ li.step1-taken { background: url(/images/common/steps.gif) no-repeat 0 -35px; width: 25px; height: 35px; } li.step2-taken { background: url(/images/common/steps.gif) no-repeat -26px -35px; width: 42px; height: 35px; } li.step3-taken { background: url(/images/common/steps.gif) no-repeat -68px -35px; width: 42px; height: 35px; } li.step4-taken { background: url(/images/common/steps.gif) no-repeat -110px -35px; width: 42px; height: 35px; } li.step5-taken { background: url(/images/common/steps.gif) no-repeat -152px -35px; width: 42px; height: 35px; } li.step6-taken { background: url(/images/common/steps.gif) no-repeat -194px -35px; width: 42px; height: 35px; } li.step7-taken { background: url(/images/common/steps.gif) no-repeat -236px -35px; width: 42px; height: 35px; text-indent: -10000px; }