/** very pale blue: #C6D2F1; baby blue: #9AB1EC; logo blue: #7490D7; text cobalt blue: #0440D8; top of sugg box: #4961B7;dark blue: #2C3CB8; navy: #1E3279; yellow: #F5DA6D **/ .just1 {font-family: Arial, sans-serif; font-size: 1px;} .just2 {font-family: Arial, sans-serif; font-size: 2px;} .just3 {font-family: Arial, sans-serif; font-size: 3px;} .spacer {font-family: Verdana, Arial, sans-serif; font-size: 3px; color: #103ABB;} .footnote {font-family: Verdana, Arial, sans-serif; font-size: 5px; color: #103ABB;} .credit {color: #0440D8; font: 8px Verdana, Arial, sans-serif; } .graph {color: #0440D8; font: 10px Verdana, Arial, sans-serif; } .text-sm-blue {color: #0440D8; font: 11px Verdana, Arial, sans-serif; } .text-sm-white {color: #FFF; font: 11px Verdana, Arial, sans-serif; } .text-reg-blue {color: #0440D8; font: 12px Verdana, Arial, sans-serif; } .text-reg-navy {color: #132C69; font: 12px Verdana, Arial, sans-serif;} .text-reg-white {color: #FFF; font: 12px Verdana, Arial, sans-serif; } .text-reg-ylw {color: #F5DA6D; font: 12px Verdana, Arial, sans-serif; } .text-big-blue {color: #0440D8; font: 14px Verdana, Arial, sans-serif; } .text-big-navy {color: #132C69; font: 14px Verdana, Arial, sans-serif; } .text-big-white {color: #FFF; font: 14px Verdana, Arial, sans-serif; } .text-big-ylw {font-family: Verdana, Arial, sans-serif; font-size: 14px; color: #F5DA6D;} .subhead {font-family: Verdana, Arial, sans-serif; font-size: 15px; *font-size: 14px; color: #0440DB; font-weight: bold;} .subhead-blue {font-family: Verdana, Arial, sans-serif; font-size: 15px; *font-size: 14px; color: #0440DB; font-weight: bold;} .subhead-navy {font-family: Verdana, Arial, sans-serif; font-size: 15px; *font-size: 14px; color: #132C69; font-weight: bold;} .subhead-white {font-family: Verdana, Arial, sans-serif; font-size: 15px; *font-size: 14px; color: #FFF; font-weight: bold;} .colhead {color: #0440D8; font: bold 16px; Verdana, Arial, sans-serif; } .colhead-blue {font-family: Verdana, Arial, sans-serif; font-size: 16px; color: #0440DB; font-weight: bold;} .colhead-navy {color: #132C69; font: bold 16px Verdana, Arial, sans-serif; } .quote { font-family: Courier, Times Roman, serif; font-size: 14px; line-height: 22px; margin-left: 10px; width: 90%; } .hang-left { display: inline; float: left; padding: 0 4px 25px 0; *padding: 0 4px 0 0;} .hang-right { display: inline; float: right; padding: 0 0 25px 4px; *padding: 0 0 0 4px;} .move-left {display: inline; margin-left: 0; } /** for some weird reason, this only works with DIV, not SPAN!! **/ .move-right {display: inline; margin-right: 0; } /** for some weird reason, this only works with DIV, not SPAN!! **/ .quote {color: #0440D8; font-family: Georgia, Times Roman, serif; font-size: 12px; padding: 0 15px; } .box-space {line-height: 30px; } .extra-space { line-height: 25px; } .text-size { width: 55px; *width: 45px;} .small-space { line-height: 3px; *line-height: 1px; } .big-space { line-height: 45px; *line-height: 50px; } body { background: #FFF; margin: 0; width: 100%; } /** ========================================= PAGE COMPONENTS =========================================== **/ #page { background: #FFF; height: auto; margin: 0; position: relative; width: 100%; } #content { background: #FFF; color: #0440D8; display: inline; float: left; font: 12px Verdana, Arial, sans-serif; height: auto; margin-left: 375px; *margin-left: 370px; margin-top: -1375px; /** this goes up & down depending on height of side bar -- why??? decreasing moves content UP **/ *margin-top: -1325px; padding: 5px 5px 7px 7px; position: absolute; width: 675px; } @media screen and (-webkit-min-device-pixel-ratio:0) { #content {margin-top: -1250px;} }/** Chrome **/ #side-bar { height: auto; margin-left: 150px; margin-top: 155px; *margin-top: 175px; position: relative; width: 210px; } #btm-nav { background-color: #7490D7; color: #FFF; float: left; font: 10.5px Verdana, Arial, sans-serif; *font-size: 11px; height: 125px; margin-top: 200px; position: absolute; text-align: center; width:100%; } /** ======================================= GRID FRAMEWORK =============================================**/ /** width of content page is 675px , 5 px gutter **/ .grid-1 { width: 65px; } .grid-2 { width: 140px; } .grid-3 { width: 180px; } .grid-4 { width: 265px; } .grid-5 { width: 325px;} .grid-6 { width: 365px; } .grid-7 { width: 440px; } .grid-8 { width: 520px; } /** tot = 675px **/ .grid-9 { width: 600px; } .grid-10 { width: 675px; } .col { display: inline; float: left; margin: 0 5px; overflow: hidden; } .row { margin: 0 auto; overflow: hidden; text-align: left; width: 675px; } /** ========================================= BOXES =========================================== **/ .baby-blue-box { background-color: #7490D7; border: 1px solid #0440D8; font: 12px Verdana, Arial, sans-serif; height: auto; padding: 9px; *padding: 7px; width: 200px; } .bright-blue-box { background-color: #4961B7; border: 1px solid #1E3279; color: #FFF; font: 12px Verdana, Arial, sans-serif; height: auto; padding: 9px; *padding: 7px; width: 200px; } .navy-box { background-color: #1E3279; border: 1px solid #F5DA6D; color: #FFF; font: 12px Verdana, Arial, sans-serif; height: auto; padding: 9px; *padding: 7px; width: 200px; } .white-box { background-color: #FFF; border: 1px solid #0440D8; color: #0440D8; font: 12px Verdana, Arial, sans-serif; height: auto; padding: 9px; *padding: 7px; width: 200px; } .yellow-box { background-color: #F5DA6D; border: 1px solid #0440D8; color: #0440D8; font: 12px Verdana, sans-serif; height: auto; padding: 9px; *padding: 7px; width: 200px; } .blog-box { /** this is the format for reporting the comments, not accepting them **/ background: #FFF; border: 4px solid #0440D8; color: #0440D8; font-family: Times Roman, serif; font-size: 14px; *font-size: 13px; padding: 10px; *padding: 9px; width: auto; } .form-box { background: #FFF; border: 2px solid #0440D8; color: #0440D8; font-family: Verdana, sans-serif; font-size: 12px; height: auto; padding: 10px; *padding: 8px; width: auto; } .bulletin-board { background: #F5DA6D; border: #0440D8 4px solid; color: #0440D8; height: auto; padding: 10px; width: auto; } /**======================================== top-level styles ===================================**/ #top-nav { background: #FFF; display: inline; margin: 0; /** don't change margin, since it affects logo, must be at top **/ position: absolute; text-align: center; width:100%; } /** this determines the color, placement and width of the bar containing links in the list elts; can't set height here, use padding to widen bar **/ #tablist { background: #F5DA6D; /* yellow */ color: #000; font-family: Verdana, Arial, sans-serif; font-size: 13px; font-weight: bold; margin-left: -100px; *margin-left: 0; margin-top: 3px; padding-bottom: 3px; padding-top: 3px; } /** this determines the look of list elts; creates wider band behind each list elt; can't set width or height **/ #tablist li { background-color: #F5DA6D; display: inline; list-style: none; margin: 15px; } /** what each link in the top-level colored boxes will look like **/ #tablist li a { background: #F5DA6D; color: #0440D8; margin-left: 0; text-decoration: none; } #tablist li a:hover { font-weight: bold; color: #7490D7; } /** ===================================== end: top-level styles ========================================**/ /** ++++++++++++++++++++++++++++++++++++++++ second-level styles ++++++++++++++++++++++++++++++++++++++ **/ /** this determines the look of the colored cells behind the second-level links/text, used in expandcontent to determine look of sublinks **/ .tabcontent { background: #C6D2F1; color: #0440D8; display: none; font-family: Arial, Verdana, sans-serif; margin-left: 0; margin-top: 400px; } a.tabconlink:link{ /** this determines what the TEXT will look like **/ /** was tabconlink **/ color: #0440D89; font-family: Verdana, Helvetica, sans-serif; font-size: 11px; *font-size: 11.5px; text-decoration: none; } a.tabconlink:hover, a.tabconlink:visited:hover { color: #132C69; font-family: Verdana, Helvetica, sans-serif; font-size: 11px; *font-size: 11.5px; text-decoration: underline; } a.tabconlink:visited { color: #2C3CB8; font-family: Verdana, Helvetica, sans-serif; font-size: 11px; *font-size: 11.5px; text-decoration: none; } #about { margin-left: 125px; *margin-left: -415px; margin-top: 0; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; position: absolute; width: auto; } #news { margin-left: 125px; *margin-left: -415px; margin-top: 0; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; position: absolute; width: auto; } #resources { margin-left: 300px; margin-top: 0; padding-bottom: 2px; padding-top: 2px; position: relative; width: 650px; *width: 600px; } #bulletin { margin-left: 750px; *margin-left: 500px; margin-top: 0; padding-bottom: 2px; padding-top: 2px; position: relative; width: 220px; *width: 200px; } /** ++++++++++++++++++++++++++++++++++++++++ end: second-level styles +++++++++++++++++++++++++++++++++**/ /** ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ end: top nav bar ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ **/ .footer { background: #transparent; font-family: Verdana, Arial, sans-serif; color: #FFF; font-size: 12px; width:100%; } .line-yellow { background: #F5DA6D; display: inline-table; height: 4px; width:100%; } .line-white { background: #FFF; height: 2px; width:100%; } .logo { background: #7490D7; padding-bottom: 3px; *padding-bottom: 0; text-align: center; width:100%; } /** ===================================== LISTS ========================================**/ .none { color: #0440D8; font-family: Arial, Helvetica, sans-serif; font-size: 12px; list-style: none; margin-left: -37px; *margin-left: 4px; } .none li a{ color: #0440D8; font-family: Arial, Helvetica, sans-serif; font-size: 12px; list-style: none; margin-left: 10px; text-decoration: underline; } .none a:hover { color: #7490D7; text-decoration: none; } ol {padding; 0; margin: 0;} ul {padding; 0; margin: 0;} ol { margin-left: 5px; *margin-left: 30px; padding-left: 0;} ol>li { margin-left: 2.5em; *margin-left: 2em; padding-left:0; *padding-left:10px; } li.square-white { list-style-type: square; font-family: Verdana, Arial, sans-serif; font-size: 12px; color: #FFF; margin-left: -2em; *margin-left: 1.5em; } li.square { list-style-type: square; margin-left: 2em; } li.square-small {list-style-type: square; list-style-size: 5pt;} li.square-in {font-weight: normal; list-style-type: square; margin-left: -2em; *margin-left: 1.5em; } /** ===================================== LINKS ========================================**/ a.blue {text-decoration: none; font-weight: bold; color: #0440D8;} /** no underline **/ a:link.blue {text-decoration: none; font-weight: bold; color: #0440D8;} a:hover.blue {text-decoration: underline; font-weight: bold; color: #7490D7;} a.blue-u {color: #0440D8; text-decoration: underline;} a:link.blue-u {color: #0440D8; text-decoration: underline;} a:hover.blue-u {color: #7490D7; text-decoration: underline;} a.none {border: 0; text-decoration: underline;} a:link.none {border: 0; text-decoration: underline;} a:hover.none {border: 0; text-decoration: underline;} a.navy-u {text-decoration: underline; font-weight: normal; color: #0440D8;} a:link.navy-u {text-decoration: underline; font-weight: normal; color: #0440D8;} a:hover.navy-u {text-decoration: underline; font-weight: normal; color: #7490D7;} a.white {text-decoration: none; font-weight: bold; color: #FFF;} /** no underline **/ a:link.white {text-decoration: none; font-weight: bold; color: #FFF;} a:hover.white {text-decoration: underline; font-weight: bold; color: #F5DA6D;} a.white-u {text-decoration: underline; font-weight: normal; color: #FFF;} a:link.white-u {text-decoration: underline; font-weight: normal; color: #FFF;} a:hover.white-u {text-decoration: underline; font-weight: normal; color: #F5DA6D;} a.top {text-decoration: none; font-weight: bold; color: #0440D8;} a:link.top {text-decoration: none; font-weight: bold; color: #0440D8;} a:hover.top {text-decoration: underline; font-weight: bold; color: #456ED7;} a.ylw {text-decoration: none; font-weight: bold; color: #F5DA6D;} a:link.ylw {text-decoration: none; font-weight: bold; color: #F5DA6D;} a:hover.ylw {text-decoration: underline; font-weight: bold; color: #FFF;} a.btm {text-decoration: underline; color: #FFF} a:hover.btm {text-decoration: underline; color: #F5DA6D}