/* screen styles from template version 1.0 */ /* NOTE: any * > selector rules are for standards-compliant browsers. The rule before will have a style that works in IE6. */ /* Table of Contents /* *************************************************************************************** */ /* Non-displaying Elements Layout Page Specific Layout Special Links Contact Page Typography and Inline Elements Page Specific Typography Navigation Expand Collapse Styling (for expandCollapse() JavaScript function) Forms */ /* Color Pallet */ /* *************************************************************************************** */ /* % Blue: Yellow: Tan: Dark Tan: 100 #00338D #F2AF00 #BEB9A6 #8C816B 50 #7F99C6 #F8D77F #DEDCD2 #C5C0B5 25 #BFCCE2 #FCEBBF #EFEDE9 #E3E1DD 10 #E5EFA3 #FEF7E5 #F8F8F6 #F4F3F1 */ /* Non-displaying Elements*/ /* *************************************************************************************** */ .hide, #nav p, #atffc { display:none; } #foo { text-indent:-9999px; } /* moves text inside menu anchors off screen. Remove if not using graphics for menu links. */ /* Layout */ /* *************************************************************************************** */ body { font-size:0.875em; text-align:center; background: #8f8777 url(../images/topTile.png) repeat-x; } #branding-logo { background: url(../images/menuTop-minimal.png) no-repeat; height:82px; } #container { height:auto; margin:0 auto; position:relative; text-align:left; width:960px; } #branding { position: absolute; top: 0px; left:-3px; width:100%; z-index: 5; } a#branding-logo { display: block; width: 210px; text-align: center; padding-top: 10px; left:32px; top:0; position:absolute; padding-left:3px; } a#branding-slogan { position: absolute; right: 32px; top: 40px; } #content { background-color:#fff; position: relative; height: 600px; top: 80px; z-index: 1; padding: 9em 40px 6em; } * > #content { min-height:400px; height:auto } #content-main { float:left; width:600px; } #content-sidebar { float:right; width:240px; border-left:1px dotted #E3E1DD; padding-left:20px; } #footer { background: url(../images/bottomTile.png) repeat-x scroll 100% 50%; height: 75px; position: relative; top:95px; z-index:2; margin-top:-66px; padding-left:84px; font-size: 0.7em; color: #8C816B; } #footer-right-corner { background: url(../images/bottomCorner.gif) no-repeat right top; height: 24px; width: 24px; position: absolute; top: 24px; right:0; } #footer-gear { background: url(../images/bottomGear.png) no-repeat; height: 87px; width: 105px; position:absolute; left:-28px; top:-17px; } .thumbnails h3 { clear:both; float:none; margin:0; text-align:left; border-bottom-width: 2px; border-bottom-style: solid; padding: 0.5em 0 0 0; } .thumbnails { margin-left:-1em; overflow:hidden; } .thumbnails img { margin: 0 0 0.95em 0.95em; border: 1px solid #000000; } .expand .imageAndCaption { width: 200px; margin: 0px 0px 1em 1em; padding: 5px; border: 1px solid #9F9988; } .expand .imageAndCaption p { font-size: 0.8em; line-height: normal; text-align: center; margin: 0.5em 0px 0px; } .googleSearchResults iframe { width:52em; max-width:1000px /*fix the google search results iframe witdth */ } .map { width:100%; height: 350px; } #dev-server_message { position:absolute; width:100%; z-index:100; left:0; top:0; padding-top:1em; padding-bottom:1em; } * > #dev-server_message { position:fixed; } #dev-server_message:hover { background-color:transparent; border-bottom:none; } /* Page Specific Layout */ /* use a class on the body to change specific parts of the layout based on portions of the website (e.g. user vs. admin) */ .layout-tools #branding-slogan { top: 11px; right:auto; left:0; } .layout-tools #content, .layout-tools #footer { margin-left: 0px; } /* home page layout */ #nav-home { float:left; list-style:none; overflow:hidden; margin-left:-35px; font-size: 0.9em; line-height: 1.4em; } #nav-home li { width:240px; min-height:16.75em; float:left; padding:15px 15px 0; margin: 0 0 1.5em 35px; background: #e3e1dd; } #nav-home li:hover { background-color:#E7E7EA } #nav-home h2 { margin:.125em 0 .25em; font-size: 1.4em; border:none } #nav-home a { text-decoration:none; color:#333 } #nav-home li img { width:240px; height: 100px; display:block; background-color:#EDEDED; margin-bottom:.25em; } /* TEMP */ #subscribe ul { margin:1.5em 0 } #subscribe li { display:inline; margin-right:30px; } #subscribe a { text-decoration:none; } #content-sidebar #subscribe li { display:block; list-style:none; margin-right:0 } #feeds { margin-left: -35px } #feeds h2 { margin:0 0 1em; border:none; font-size:1.2em; } #feeds h3 { margin:0; border-bottom: solid 1px #BEB9A6; font-size:1em; } #feeds-news, #feeds-events, #feeds-articles { float:left; width: 240px; padding: 0 15px; margin:0 0 0 33px; border-right: 1px dotted #E3E1DD; border-left: 1px dotted #E3E1DD; } #feeds-news { } #feeds-events { } #feeds-articles { } /* Special Links */ /* use a class on the body to change specific parts of the layout based on portions of the website (e.g. user vs. admin) */ /* Block links and styled links */ a.blockLink:link, a.blockLink:visited { clear:both; background-color: #F8F8F6; display:block; color:#8C816B; font-size:1em; line-height:1em; margin:0.5em 0 1em; padding:.125em .5em; text-align:center; text-decoration:none; background: #F8F8F6; border: 1px solid #BEB9A6; } a.blockLink:focus, a.blockLink:hover, a.blockLink:active { background-color: #f2af00; color: #333333; border-color: #8c816b; } a.blockLink.medium:link, a.blockLink.medium:visited { font-size:1.25em; font-weight:bolder; display:inline; color:#8C816B; border:0px; background-color:#e3e1dd; } a.blockLink.medium:focus, a.blockLink.medium:hover, a.blockLink.medium:active { background-color:#f2af00; color:#fff; } #content-sidebar .blocklink { font-size:.9em; } a.blocklink { line-height:1em; font-size:1em; font-weight:bold; text-decoration:none; display:inline-block; padding:.5em 2em .5em .5em; background:url(../images/blocklink-bg.png) no-repeat right center; margin-right:.5em } .sidebar a.blocklink { font-size:.8em } a.blocklink:link, a.blocklink:visited { background-color:#E3E1DD; color:#8C816B; } a.blocklink:focus, a.blocklink:hover, a.blocklink:active { color:white; background-color:#8c816b } #extra_info .blockLink.medium, #content-sidebar .blockLink.medium { display:block; background-color:#f2af00; color:#fff; border-color:#8c816b; text-align: center; } #extra_info .blockLink.medium:hover, #content-sidebar .blockLink.medium:hover { background-color:#8c816b; color:#fff } #infoWeekFeed .external { white-space:normal; background:none; } #infoWeekFeed br { display:none; } #content-main #clientServicesBtn:link, #content-main #clientServicesBtn:visited, #content-main #capabilitiesBtn:link, #content-main #capabilitiesBtn:visited { display: block; width: 46.5%; height: 2.25em; padding: 47px 1% 2px; font-weight: bold; text-align: center; float: left; margin: 0 0 1em; border-bottom:none; } #content-main #clientServicesBtn:link, #content-main #clientServicesBtn:visited { background: url(../images/iconClientServices.png) no-repeat center 2px; margin-right:3%; } #content-main #capabilitiesBtn:link, #content-main #capabilitiesBtn:visited { background: url(../images/iconCapabilities.png) no-repeat center 2px; } #content-main #capabilitiesBtn:hover, #content-main #clientServicesBtn:hover, #content-main #capabilitiesBtn:active, #content-main #clientServicesBtn:active { background-color: #fef7e5; } /* Contact Page */ .contactList { margin-left:-4%; } .contact { border-top:1px solid #8F8777; float:left; margin:5px 0 1em 4%; padding-bottom:1em; width:46%; background-color:#f8f8f6; height:11.5em; } .contact img { border-bottom:1px solid #8F8777; border-left:1px solid #8F8777; border-right:1px solid #8F8777; border-top-style:none; float:right; margin:0 0 0 5px; padding:0; } .contact p { font-size:.9em; line-height:1.2em; margin:0; padding:0 0.5em 0 0; } * html .contact { width : 46%; /* IE doesn't automatically get the width correct */ height : 12em; /* force ul to expand around floated li's (IE doesn't do it with overflow) */ } * html .contact { display : inline; /* fix IE6's double float margin bug */ } .contact p a, .contact h3 a { margin:0 } /* Typography and Inline Elements */ /* *************************************************************************************** */ #simpleTooltip { padding: 7px 7px 7px 28px; border: 1px solid #A6A7AB; background: #FEF5BE; text-align:left } #addthis { margin:0 0 1em; } /* Page Specific Typography */ /* use a class on the to change specific typographic elements (e.g.

backgrounds) */ /* .layout-home h1 {} */ /* Navigation */ /* placement of navigation */ /* *************************************************************************************** */ #nav-main, .layout-home #nav-secondary { position: absolute; width:880px; top: 120px; margin:0 40px; z-index: 6; font-size: 0.8em; color: #8c816b; background-color:#e3e1dd; height:25px } .layout-home #nav-secondary { position:relative; float:none; clear:both; top:auto; margin:0; } #nav-main a, .layout-home #nav-secondary a { color:#8c816b; text-decoration:none; padding:0 0.75em; height:25px; display:block; float:left; } #nav-main:hover { background-color:#c5c0b5; color:#FFF } #nav-main:hover a { color:#FFF } #nav-main a:link, #nav-main a:visited { } #nav-main a:focus, #nav-main a:hover, #nav-main a:active { background-color:#f2af00; color:#fff } #nav-main ul, #nav-main li, .layout-home #nav-secondary ul, .layout-home #nav-secondary li { display: inline; } #nav-sub-category, #extra_info { width: 260px; float: right; margin-left: 15px; margin-bottom: 1em; clear: right; padding: 0.25em 15px 0; background: #F8F8F6; border-top: 0px solid #8C816B; border-right: 1px solid #8C816B; border-bottom: 1px solid #8C816B; border-left: 1px solid #8C816B; overflow:hidden; } /* Expand Collapse Styling (for expandCollapse() JavaScript function) */ /* *************************************************************************************** */ /* Default State */ /* the
tag is open (visible) by default unless JavaScript is on. */ h2.expand, h3.expand { padding: 1px 0 0em 30px; margin:0; color: #FFFFFF; background-color:#f2af00; font-size:1.1em; border:none; } div.expand { padding: 0.5em 1em .25em; margin-bottom: 1em; border: 1px dotted #DEDCD2; border-top-width:0px; background: #F8F8F6; } .instructions { font-size:.8em; line-height:1.2em; } h2.expand.closed, h2.expand.open, h3.expand.closed, h3.expand.open { cursor:pointer; } h2.expand.closed:hover, h2.expand.open:hover, h2.expand.closed:active, h2.expand.open:active, h3.expand.closed:hover, h3.expand.open:hover, h3.expand.closed:active, h3.expand.open:active { background-color:#8c816b } /* Closed State */ /* .closed only gets applied by the JavaScript */ h2.expand.closed { margin-bottom:1em; } div.expand.closed { display:none; } /* Open State */ /* .open only gets applied by the JavaScript */ h2.expand.open { margin-bottom:0; } div.expand.open { margin-bottom:1em; } /* Forms */ /* some of these classes and styles are applied during validation. .validationError gets applied by the JavaScript validation or by the PHP validation. The .help functions that that make it visible or not visible don't work in IE6, so there is a JavaScript (in generic_ie6.js) to make that part work. It's is added with a conditional comment */ /* *************************************************************************************** */ form { width:auto; margin: 0 0 1em 0; } .formRow, form .row { /*background-color:#F9F9F7;*/ padding: 0.125em 0px; margin:0 0 .5em; } fieldset { border:none; } legend { font-size: 1.3em; color:#8F8777; padding-bottom: 0.0625em; text-align:left; margin-top:1em;/* margin-bottom:1em; formatting for IE6 */ } fieldset h3 { margin-left:.5em; } label { display:block; float:left; text-align:right; width:30%; margin:0 15px 0 0; } textarea, input, select { margin:0 .25em 0 0; padding:0.2em; border:1px solid #C6C1B9; } input[type="checkbox"], input[type="radio"] { border:none; } form div.buttons, #container form .counter { text-align:left; display:block; float:none; clear:both; margin: 0 0 0 15px; padding:0 0 .5em 8px; } #container form div.buttons { margin:0 0 0 31.5% } * > #container form div.buttons, #container form .counter { margin:0 0 0 31%; } form div.buttons input, input[type="submit"] { background:url(../images/hoverBg.png) no-repeat scroll -20px top; border-style:none; color:#FFFFFF; cursor:pointer; font-size:0.9em; height:auto; letter-spacing:0.125em; line-height:normal; text-transform:lowercase; width:auto; padding: .25em 2em; } form div.buttons input:hover, form div.buttons input:active, form div.buttons input:focus, input[type="submit"]:hover, input[type="submit"]:active { background-position:right top; } .formRow .note, form .row.note { display:block; padding:0 0 0 33% } p.validationError { text-align:center; color:#EE2E24; } .formRow .validationError, form .row .validationError { display:block; color:#EE2E24; font-size:.9em; float:none; clear:both; margin:0 0 0.7em; padding:0 0 0 37%; background: url(../images/validationErrorArrow.gif) no-repeat 33% 5px; } * > .formRow .validationError, * > form .row .validationError { padding:0 0 0 37%; background: url(../images/validationErrorArrow.gif) no-repeat 33% 5px; } .formRow .counter .validationError, form .row .counter .validationError { padding-left:28px; background-position:left top; } .formRow label .note, form .row label .note { display:inline; padding:0 } a.help { cursor:help; text-decoration:none } a.help:hover { overflow:visible; color:#333333 } a.help span { display:none; padding:0 2em 0 37%; background: url(../images/questionPointer.gif) no-repeat 33% 5px; } a.help:hover span, .help span:hover { display:block } option[value="Select One"], option[value="Select Your Name"] { margin-bottom:1em; } option { padding:0 .5em 0 1em } /* Forms NEW */ /* some of these classes and styles are applied during validation. .validation_error gets applied by the JavaScript validation or by the PHP validation. The .help functions that that make it visible or not visible don't work in IE6, so there is a JavaScript (in generic_ie6.js) to make that part work. It's is added with a conditional comment */ /* *************************************************************************************** */ .layout-minimal form { width:auto; margin: 0 0 1em 0; } .layout-minimal .row { margin:0 0 1.5em; padding:0 } .layout-minimal label { display:block; margin:0 15px 0 0; text-align:left; width:auto; float:none } .layout-minimal textarea, .layout-minimal input { width:auto } .layout-minimal textarea, .layout-minimal input, .layout_minimal select { margin:0 .25em 0 0; border: 1px solid #CCC; padding:5px; font:inherit; } .layout-minimal select option { margin:0 5px 5px; } .layout-minimal #container form div.buttons { margin:0; padding:0; } .layout-minimal form div.buttons input, .layout-minimal input[type="submit"] { background:url(../images/hoverBg.png) no-repeat scroll -20px top; border-style:none; color:#FFFFFF; cursor:pointer; font-size:0.9em; height:auto; letter-spacing:0.125em; line-height:normal; text-transform:lowercase; width:auto; padding: .25em 2em; } .layout-minimal form div.buttons input:hover, .layout-minimal form div.buttons input:active, .layout-minimal form div.buttons input:focus, .layout-minimal input[type="submit"]:hover, .layout-minimal input[type="submit"]:active { background-position:right top; } .layout-minimal .row .note { display:block; } form .row span.error { display:block; color:#EE2E24; font-size:.9em; padding:0 0 0 30px; border:none; background: url(../images/validation_error_arrow_down.png) no-repeat 0 5px; } .layout-minimal .row label .note { display:inline; padding:0 } .layout-minimal a.tooltip { cursor:help; text-decoration:none } .layout-minimal option[value="Select One"], .layout-minimal option[value="Select Your Name"] { margin-bottom:1em; color:#CCC } .layout-minimal .buttons { } /* Slide Show jQuery */ div#slideshow { width: 880px; height: 368px; padding: 0; margin:0 0 1em; overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */ position: relative; z-index: 5; } div#slideshow ul#nav { display: none; list-style: none; position: relative; top: 210px; z-index: 15; } div#slideshow ul#nav li#prev { float: left; margin: 0 0 0 40px; } div#slideshow ul#nav li#next { float: right; margin: 0 50px 0 0; } div#slideshow ul#nav li a { display: block; width: 80px; height: 80px; text-indent: -9999px; } div#slideshow ul#nav li#prev a { background: url(images/prev.png); } div#slideshow ul#nav li#next a { background: url(images/next.png); } div#slideshow ul#slides { list-style: none; margin:0; } div#slideshow ul#slides li { margin: 0 0 20px 0; }