/* global styles */ /* blue #363195 orange #FF9801 */ html{ font-size:100%; } body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#7F7F7F; margin:20px 0 20px 0; padding:0; background:#ffffff url(/images/template/background.jpg) repeat-x; } * {padding:0; margin:0} h1 { float:left; color:#363195; font-size:24px; } #h1-p { color:#026AB3; font-size:24px; float:left; font-weight:bold; margin-top:20px; margin-bottom:10px } h2 { color:#363195; font-size:20px; } h3 { color:#026AB3; font-size:18x; } h3 A:link, h3 A:visited, h3 A:active, h3 A:hover { color:#026AB3; font-size:15px; text-decoration:none } hr { color:white; background-color:white; width:90%; height:1px; } #clear {clear:both; width:100%; height:1px } .scroll { clear:both; } p { padding-top:7px; padding-bottom:7px; } /* site containers */ .containerOuter { height:auto; width:852px; margin-right:auto; margin-left:auto; background:#FFFFFF repeat-y center; border:1px solid #CFCFCF; } .mainContent { clear:both; } /* header styles */ .header { border:1px solid #CFCFCF; margin:10px 10px 0 10px; height:98px; width:828px; padding:0; } .headerLogo img { margin:0; padding:0; } /* footer styles */ .footerCopy { color:#ffffff; font-size:12px; font-weight:normal; float:right; margin-right:10px; } .footerLinks { float:left; } .footerLinks A:link, .footerLinks A:visited, .footerLinks A:active, .footerLinks A:hover { padding:0 10px; color:#FFFFFF; border-right:1px solid #FFFFFF; font-size:12px; font-weight:normal; float:left; text-decoration:none; } .footer { background: url(/images/template/headerLink.jpg); height:18px; width:854px; padding:7px 0px 7px 0; margin-left:0px; } .bottomLinks { text-align:center; width:95%; padding:0 0 10px 0; margin-left:auto; margin-right:auto; } .bottomLinks A:link, .bottomLinks A:visited, .bottomLinks A:active, .bottomLinks A:hover { color:#7F7F7F; font-size:12px; font-weight:normal; text-align:center; text-decoration:none; padding:0 5px 0 5px;} /* header menu */ .menu { clear:both; width:828px; height:30px; padding:0; margin:0 10px 0 10px; border-left:1px solid #CFCFCF; border-right:1px solid #CFCFCF; } .menuItem { float:left; background:url(/images/template/headerLink.jpg); padding:7px 0px 7px 0px; text-align:center; color:#fdcf33; font-weight:bold; font-size:14px; text-decoration:none; width:138px; border:none; margin:0; } .menuItem:hover { float:left; background:url(/images/template/headerLinkHover.jpg); padding:7px 0px 7px 0px; text-align:center; color:#363195; font-weight:bold; font-size:14px; text-decoration:none; width:138px; border:none; margin:0px; } .dropdown { float:left; } .dropdown dt { width:138px; border:none; padding:0; font-weight:bold; cursor:pointer; color:#fdcf33; text-align:center; font-size:14px; text-decoration:none; background:url(/images/template/headerLink.jpg) } .dropdown dt a { display:block; width:124px; border:none; padding:7px; font-weight:bold; cursor:pointer; color:#fdcf33; text-align:center; font-size:14px; text-decoration:none; background:url(/images/template/headerLink.jpg) } .dropdown dt:hover { color:#363195; background:url(/images/template/headerLinkHover.jpg); } .dropdown dt a:hover { color:#363195; background:url(/images/template/headerLinkHover.jpg); } .dropdown dd { position:absolute; overflow:hidden; width:150px; display:none; background:#fff; z-index:200; } .dropdown ul { width:140px; border:1px solid #cfcfcf; list-style:none; border-top:none; } .dropdown li { display:inline; } .dropdown li a, .dropdown li a:active, .dropdown li a:visited { display:block; padding:5px; color:#fdcf33; text-decoration:none; background:#363195; width:140px; font-weight:bold; } .dropdown li a:hover { background:#FF9801; color:#363195 } .dropdown .underline { border-bottom:1px solid #cfcfcf } /* columns */ #col1 { float:left; width:634px; padding:0; margin:0; } #col2 { float:left; width:216px; padding:0; margin:0; } /* box1 */ #box1 { border:1px solid #CFCFCF; width:592px; height:200px; margin:10px 10px 10px 10px; padding:10px; } * html #box1 { margin:10px 0px 10px 10px; padding:10px 10px 10px 10px; } #box1-header { color:#363195; font:normal normal bold 24px arial; padding:0 6em 0 .7em; } #box1-img1 { clear:both; float:left; padding:1.4em 0 1em 1.4em; margin:0; } #box1-list { float:left; margin:.8em 0 0 1.8em; } #box1 ul { list-style-type:none; padding:0; margin:0; } #box1 li { color:#363195; font:normal normal bold 12px arial; padding:0 0 .9em 2.6em; background-image:url(/images/template/tick-orange.jpg); background-repeat:no-repeat; background-position:0em 0em; } /* box2 */ #box2 { clear:both; position:relative; border:1px solid #CFCFCF; width:592px; height:372px; margin:0px 10px 10px 10px; padding:10px; } #box2-img1 { margin:2px 0px 0 14px; padding:0; } #box2-img2 { position:absolute; bottom:0px; right:0px; margin:0; padding:0; } #box2-container { clear:both; float:left; border:2px solid #E2E2E2; width:400px; height:370px; background-color:#F0F0F0; background-image:url(/images/template/box2-header.jpg); background-position:top right; background-repeat:no-repeat; } #box2-img3 { float:right; margin:0; padding:0; vertical-align:top; } .box2-text1 { color:#363195; font:normal normal bold 14px arial; margin:20px 10px 10px 10px; float:left; } .box2-text2 { color:#FF9801; font:italic normal bold 14px arial; margin:20px 10px 10px 0px; float:left; } #box2 form { background-color:#F0F0F0; width:380px; margin:55px 0 0 10px; padding:0; } #box2-col1 { float:left; width:190px; margin:-5 0 0 0; padding:0; } #box2-col2 { float:left; width:180px; margin:0; padding:0; } .box2-label { color:#000000; width:150px; margin:0 35px 4px 0; padding:0; font:normal normal normal 12px arial; } .box2-select { width:150px; margin:0 35px 4px 0; padding:0; } .box2-input { width:150px; margin:0 35px 4px 0; padding:0; } #box2-check { float:left; padding:0; margin:0 3px 0 0; } .box2-privacy { float:left; color:#000000; width:180px; margin:20px 10px 5px 0; padding:0; font-size:11px; } #box2-button { float:left; margin:20px 0 0 0; width:150px; height:29px; } /* box3 */ #box3 { border:1px solid #CFCFCF; width:592px; height:290px; margin:0px 10px 10px 10px; background: url(/images/template/fade.png) repeat-x; padding:10px; } * html #box3 { margin:0px 0px 10px 10px; padding:10px 6px 10px 0px; } #box3-header { color:#363195; font:normal normal bold 24px arial; margin:0 0 0 14px; } #box3-sub { color:#363195; font:normal normal normal 13px arial; margin:10px 60px 0 14px; } #box3-1 { border:1px solid #CFCFCF; float:left; background-color:#ffffff; width:170px; height:200px; margin:10px 22px 10px 14px; } #box3-2 { border:1px solid #CFCFCF; float:left; background-color:#ffffff; width:170px; height:200px; margin:10px 22px 10px 0; } #box3-3 { border:1px solid #CFCFCF; float:left; background-color:#ffffff; width:170px; height:200px; margin:10px 10px 10px 0; } .number { padding:6px 3px 10px 5px; float:left; } .box3-text { color:#363195; font:normal normal normal 13px arial; margin:7px 0px 0 0; float:left; width:120px; } .box3-image { margin:0 10px 0 10px; } /* box4 */ #box4 { clear:both; border:1px solid #CFCFCF; width:204px; height:280px; margin:10px 0 10px 0px; padding:0; } #box4 a { background:url(/images/template/link.jpg); margin:0px 0px 0px 0px; padding:3px 0px 3px 30px; color:#363195; font-weight:bold; font-size:14px; text-decoration:none; border:none; background-repeat:no-repeat; } #box4 a:hover { background:url(/images/template/linkHover.jpg); margin:0px 0px 0px 0px; padding:3px 0px 3px 30px; color:#FF9801; font-weight:bold; font-size:14px; text-decoration:none; border:none; background-repeat:no-repeat; } #box4 .link { height:30px; padding:3px 5px 3px 25px; } /* box5 */ #box5 { border:1px solid #CFCFCF; width:204px; height:300px; margin:0px 0 10px 0px; padding:0; } .box5-label { float:left; color:#363195; width:120px; margin:0 0px 10px 30px; padding:0; font:normal normal bold 12px arial; } .box5-select { float:left; width:120px; margin:0 0px 10px 30px; padding:0; } #box5-button { float:left; margin:15px 0 0 40px; width:100px; height:27px; padding:0; } #box5-container { clear:both; border:1px solid #E2E2E2; width:174px; height:240px; background-color:#F0F0F0; background-image:url(/images/template/box5-background.jpg); background-repeat:repeat-x; margin:-10px 10px 0 15px; } * html #box5-container { margin:-10px 10px 0 10px; } #box5 form { width:174px; margin:20px 0 10px 0; padding:0; } /* box6 */ #box6 { position:relative; border:1px solid #CFCFCF; width:204px; height:342px; margin:0px 0 10px 0px; padding:0px; } #box6-text1 { padding:0 10px 10px 10px; color:#363195; font:normal normal normal 13px arial; } #box6-text2 { padding:0 10px 10px 10px; color:#363195; font:normal normal bold 12px arial; } #box6 img { position:absolute; bottom:0px; left:0px; padding:0; margin:0; } /* box7 */ #box7 { clear:both; border:1px solid #CFCFCF; width:592px; height:210px; margin:10px 10px 0 10px; padding:10px 20px 0 0; } #box7-header { float:left; color:#363195; font:normal normal bold 24px arial; padding:0 0 0 10px; } #box7-img1 { clear:both; float:left; padding:10px 15px 0 0; margin:0; } #box7 ul { float:left; list-style:none; padding:15px 0 0 15px; margin:0; } #box7 li { color:#363195; font:normal normal bold 12px arial; padding:0 0 10px 23px; background-image:url(/images/template/tick-orange.jpg); background-repeat:no-repeat; background-position:-5px -5px; width:370px; } #box7-button { margin:0 0 6px 210px; background-image:url(/images/template/box8-button.jpg); width:205px; height:29px; display:inline-block; } #box7-button:hover { margin:0 0 6px 210px; background-image:url(/images/template/box7-button-hover.jpg); width:205px; height:29px; display:inline-block; } /* box8 */ #box8 { clear:both; border:1px solid #CFCFCF; width:592px; height:732px; margin:10px 10px 10px 10px; padding:10px; overflow:auto; } /* box9 */ #box9 { clear:both; border:1px solid #CFCFCF; width:204px; height:318px; margin:10px 0 10px 0; padding:0; } #box9 form { background-image:url(/images/template/box9-background.jpg); width:204px; height:280px; margin:-25px 0 0 0; padding:10px 0 0 0; } .box9-select { float:left; width:140px; margin:8px 10px 0px 30px; padding:0; } .box9-input { float:left; width:140px; margin:8px 10px 0px 30px; padding:0; } #box9-privacy { float:left; color:#000000; width:160px; margin:10px 0px 0px 30px; padding:0; } #box9-button { float:left; margin:10px 0 0 30px; } /* box10 */ #box10 { clear:both; border:1px solid #CFCFCF; width:592px; height:640px; margin:10px 10px 10px 10px; padding:10px; } #box10-container { width:592px; height:630px; margin:0; padding:0; } #box10 form { width:592px; margin:0; } #box10-col1 { float:left; width:220px; height:202px; margin:0 0 0 60px; padding:0; } #box10-col2 { float:left; width:200px; height:202px; margin:0; padding:0; } #box10-col3 { float:left; width:20px; margin:0; padding:0; } #box10-col4 { float:left; width:220px; margin:5px 0 0 60px; padding:0; } #box10-col5 { float:left; width:220px; margin:5px 0 0 0; padding:0; } .box10-label { color:#000000; width:180px; margin:0 35px 3px 0; padding:0; font:normal normal bold 12px arial; } .box10-select { width:180px; margin:0; padding:0; } .box10-input { float:left; width:178px; margin:0; padding:0; } #box10-check { float:left; padding:0; margin:0 3px 0 0; } .box10-privacy { float:left; color:#000000; width:180px; margin:20px 0 5px 0; padding:0; font-size:11px; } #box10-button { float:left; margin:20px 0 0 83px; } #box10-img1 { clear:both; float:left; margin:0 0 10; padding:0; } #box10-img2 { clear:both; float:left; margin:0 0 10; padding:0; } #box10-1 { float:left; width:433px; height:27px; margin:0 0 10px 0; background-image:url(/images/template/box10-header.jpg); } #box10-2 { float:left; width:433px; height:27px; margin:0 0 10px 0; background-image:url(/images/template/box10-header.jpg); } #box10-right { float:left; margin:0 0 10; padding:0; } .box10-small { font:normal normal normal 10px arial; width:210px; padding:0; margin:0 0 3px 0; height:13px; } .box10-question { margin:0px 0 19px 0; padding:0; } .box10- { height:34px; } /* box11 */ #box11 { clear:both; border:1px solid #CFCFCF; width:808px; height:300px; margin:0px 10px 0 10px; padding:10px; overflow:auto; } /* box12 */ #box12 { clear:both; border:1px solid #CFCFCF; width:592px; height:380px; margin:10px 10px 10px 10px; padding:10px; overflow:auto; } /* */ .boxHeader { color:#363195; font:normal normal bold 18px arial; background-image:url(/images/template/header.jpg); padding:3px 5px 3px 5px; border-bottom:1px solid #CFCFCF; margin-bottom:25px; } .blueLarge { color:#363195; font:normal normal bold 24px arial; } .blueMedium { color:#363195; font:normal normal normal 14px arial; margin:10px 20px 0 0; } .blueSmall { color:#363195; font:normal normal normal 12px arial; margin:2px 0 0 0; float:left; } .blackLarge { color:#000000; font:normal normal bold 16px arial; } .blackMed { color:#000000; font:normal normal bold 14px arial; } .blackSmall { color:#000000; font:normal normal bold 12px arial; } /* Blog Pages */ .table1 { width:590px; margin-top:20px; border:1px solid #CFCFCF; } /* blog right menu */ .skyRight{ float:right; width:130px; position:relative; background-color:#F2F2F2; border:1px solid #CCCCCC; margin-bottom:20px; } .skyTL{width:22px; height:22px; position:absolute; top:-1px; left:-1px; background: url(/images/template/GcornTL.jpg) no-repeat} .skyTR {width:22px; height:22px; position:absolute; top:-1px; right:-1px; background: url(/images/template/GcornTR.jpg) no-repeat} .skyBL {width:22px; height:22px; position:absolute; bottom:-1px; left:-1px; background: url(/images/template/GcornBL.jpg) no-repeat} .skyBR {width:22px; height:22px; position:absolute; bottom:-1px; right:-1px; background: url(/images/template/GcornBR.jpg) no-repeat} /**** TJK_keyBoardDropDown Pure CSS Drop Down Menu [TJK_keyBoardDropDown] v1.2 Copyright 2006, Thierry Koblentz - TJKDesign.com - All rights reserved. Read www.TJKDesign.com/articles/Pure_CSS_dropdown_Menus.asp ****/ /* zeroing padding/margin for all elements */ #TJK_dropDownMenu, #TJK_dropDownMenu * { margin:0;padding:0;} /* "Master" UL (the whole Menu) */ #TJK_dropDownMenu {position:relative;background:#000 no-repeat 100% 50%;width:50em;max-width:100%;float:left;margin-bottom:3.5em;border-bottom:1px solid #666; } /* sub-menu ULs */ #TJK_dropDownMenu li ul { width:11em !important;/* leaves room for padding */ cursor:default; position:absolute; height:auto; display:none; left:-10px; padding:1px 10px 10px 10px; background:url(/img/clear.gif);/* trick to keep'em open */ } /* All LIs */ #TJK_dropDownMenu li { position:relative; width:8.30em; max-width:16.5%; cursor:pointer; float:left; list-style-type:none; font-weight:bold; } /* sub-menu LIs */ #TJK_dropDownMenu li ul li { width:10em/*FF*/; padding:0; border:none; max-width:120%; border:1px solid #333; border-top:none; } /* All anchors */ #TJK_dropDownMenu li a { cursor:default; color:#666; border-left:1px solid #333; text-decoration:none; display:block; float:left; padding:0 .4em; /* uncomment the declaration below if you want to go "full width" */ /* width:7.47em; */ height:2em; line-height:2em; } /* sub-menu Anchors */ #TJK_dropDownMenu li ul li a { width:9em/*FF*/; position:relative !important; /* ie Mac */ cursor:pointer !important; white-space:nowrap; line-height:1.7em; height:1.7em; font-weight:normal; border:1px solid #fff; color:#666; background-position:0 50% !important; } /* :hover and stuff */ #TJK_dropDownMenu li a:hover, #TJK_dropDownMenu li a:focus, #TJK_dropDownMenu li a:active {color:#000} /* move the declarations from the rule below the one above if you want a background swap on *all* anchors, including the top level ones */ #TJK_dropDownMenu ul a:hover, #TJK_dropDownMenu ul a:focus, #TJK_dropDownMenu ul a:active {color:#fff !important;background:#c30} /* display and z-index for the sub-menus */ #TJK_dropDownMenu li:hover ul, #TJK_dropDownMenu li.msieFix ul {display:block;z-index:10;top:2em !important;} /* safari: users can keep sub-menus up by from sub-menus to next top level */ /* didn't find a solution for users going back from the last one. I prefer */ /* to leave it like that vs. taking the last sub-menu *out of* the wrapper */ #TJK_dropDownMenu li#AB {z-index:6;} #TJK_dropDownMenu li#CF {z-index:5;} #TJK_dropDownMenu li#GJ {z-index:4;} #TJK_dropDownMenu li#KR {z-index:3;} #TJK_dropDownMenu li#ST {z-index:2;} #TJK_dropDownMenu li#UZ {z-index:1;} /* Current location - class on Body must match LI's id */ .AB #TJK_dropDownMenu li#AB a, .CF #TJK_dropDownMenu li#CF a, .GJ #TJK_dropDownMenu li#GJ a, .KR #TJK_dropDownMenu li#KR a, .ST #TJK_dropDownMenu li#ST a, .UZ #TJK_dropDownMenu li#UZ a {color:#000;} /* Keeping current menu accessible to JAWS */ .AB #TJK_dropDownMenu li#AB ul, .CF #TJK_dropDownMenu li#CF ul, .GJ #TJK_dropDownMenu li#GJ ul, .KR #TJK_dropDownMenu li#KR ul, .ST #TJK_dropDownMenu li#ST ul, .UZ #TJK_dropDownMenu li#UZ ul {display:block;top:-1000px} /* background colors */ #AB,#AB li a {background-color:#e2facd;} #CF,#CF li a {background-color:#fffcd0;} #GJ,#GJ li a {background-color:#ffe1cc;} #KR,#KR li a {background-color:#fccae5;} #ST,#ST li a {background-color:#c9c9ff;} #UZ,#UZ li a {background-color:#ffcebe;} /* "trigger" and "msieFix" classes */ #TJK_dropDownMenu li.msieFix a {} /* last nested UL. keeping it in */ #TJK_dropDownMenu li#UZ ul {left:-2.3em !important;} /* If JS is OFF we need to style the links in the sub-menu of the current page */ /* so they are accessible to keyboard users. Using a class on each link would let */ /* us stick each link in the same place, but we would have to plug a lot of */ /* attributes in the markup and many rules here, so... */ .AB #TJK_dropDownMenu li#AB ul li a:focus, .AB #TJK_dropDownMenu li#AB ul li a:active, .CF #TJK_dropDownMenu li#CF ul li a:focus, .CF #TJK_dropDownMenu li#CF ul li a:active, .GJ #TJK_dropDownMenu li#GJ ul li a:focus, .GJ #TJK_dropDownMenu li#GJ ul li a:active, .KR #TJK_dropDownMenu li#KR ul li a:focus, .KR #TJK_dropDownMenu li#KR ul li a:active, .ST #TJK_dropDownMenu li#ST ul li a:focus, .ST #TJK_dropDownMenu li#ST ul li a:active, .UZ #TJK_dropDownMenu li#UZ ul li a:focus, .UZ #TJK_dropDownMenu li#UZ ul li a:active {position:absolute !important;top:1028px !important;}