/***************************************************** CSS Documentation: ================== Layout Details ================== Homepage - fixed height as all lines/content containers are in the background - site admins need to keep content within charactor count to keep the layout intact. 2 col layout. 2nd column contains 3 Ads that are CMS. ALERT - This site uses seperate header footer files for the homepage and the inside pages Three sections are custom color coded - Economic Development - teals, Business Incubation - drk blues, and Business Finance - browns. These styles are swapped via cases and scriptlets. Items affected are h1 and h2 headers, submenu and borderBG. You will find the headers in articles.jsp, the submenu is section_articles.jsp borderBG is at the top of content.jsp. Styles are laid out on one line where possible to keep optimized and beholden to bandwidth. For futher optimization, remove these comments for the web stylesheet. ================== About CSS ================== To assist with viewing styles for this page: 1. Get a copy of Mozilla Firefox at http://mozilla.org/products/firefox/ if you don't have one already. 2. Install Chris Pedericks Web Developer's Toolbar if you haven't already at http://www.chrispederick.com/work/firefox/webdeveloper/ 3. You have other software that enables you to dissect a Web page layout. ===================== Browser Compatibility ===================== Viewable in all standard compliant browsers, degrades gracefully in older, non compliant software pre 2000. Note: Even current browsers handle CSS differently. To accomodate these differences with one style sheet, the child selector hack is used. The child selector: html>body #yourstylehere {margin:10px} IE ignores the child selector enabling page authors to assign different attributes for the same content block. When the child selector is used it hides a set of attributes from IE but is read by Mozilla, etal. The style compatible with IE uses the same id or class but without the child selector. You can set major differences such as margins, padding, fonts, colors, etc. second hack - uses the !important attribute so that standard compliant browser read that and ignore the second. IE ignores the !important attribute altogether and so applies the second style. This enables you to make slight various that often overcomes most annoyances like font size differences, margins, etc. ========================= In Progress Documentation ========================= This style sheet is in progress and may contain extraneous/unused styles while in production and until release of the final site. Created 01/24/2006 :: Diane Dougherty/http://www.ecreative1.com for LarryKing06.com/http://www.larryking06.com :: webmaster@ecreative1.com ***************************************************/ body {margin-top: 20px; color: #000; background: #1A4C9B url(../art/bg.gif) repeat-x; font: normal 12px verdana, arial, sans-serif;} hr {color: #807C59;background: #807C59;border: 0;height: 1px;text-align: center;} h1 {font: bold 18px arial, helvetica, sans-serif;margin: 0px;} h2 {font: normal 16px arial, helvetica, sans-serif;margin: 0px;color:#411644;} h3 {font: bold 14px arial, helvetica, sans-serif;margin: 12px 0 0;} a:link, a:visited, a:active {font: normal 12px arial, helvetica, sans-serif;color: #063F96;text-decoration: underline;} a:hover { text-decoration: underline; } .dots {font-size: 10px; color:#6A9CCA;} p a.back:link, a.back:visited, a.back:active {font-weight:bold; font-size:11px;text-decoration:underline;} p.legal {font-size:11px;color:#666;} .img_rt {margin-right:8px;border:1px solid #CBD7E5;} .img_lft {margin-left:8px;border:1px solid #CBD7E5;} /************************* Home page styles for 2 columns **************************/ #wrap {width: 760px;margin:0px auto;background-color:#3C71C4} #header {background: url("../art/headerBG.gif") no-repeat;width:760px; height:103px;background-color:#3F75C9;} /* positions hotlinked trans image over the logo which is in the background.*/ .homelink {position:relative;float:left;margin-top:5px;margin-left:10px;z-index:200;} #quote {color:#064897;width:380px; padding-top:15px;margin-left:250px;font-size:11px;} #ad1 {background-color:#063F96;width:194px;height:60px;} #ad1 h1 {padding: 4px 2px; font-size: 16px; color:#fff;} #ad1 a {font-size: 16px; font-weight:bold; color:#ffffff;} #ad1 p {color:#ffffff;font-size:10px;margin: 0px 4px;} #ad1 p a {color:#ffffff;font-size:10px;text-decoration:underline;} #ad2 {background-color:#4486D0;width:182px;height:60px;} #ad2 h1 a {display:block;padding: 4px 2px;font-size: 13px;font-weight:bold; color:#063F96;} #ad2 p {color:#ffffff;font-size:10px;margin: 0px 4px;} #ad2 p a {color:#ffffff;font-size:10px;text-decoration:underline;} #issue {background-color:#EDDEA6;width:182px;height:192px;margin:0px;padding:0px;} #issue h1 {padding: 4px 8px; font-size: 14px; font-weight:bold; color:#851F00;} #issue p {color:#000;font-size:10px;margin: 4px 8px;line-height:130%;} #issue p a {color:#851F00;font-size:11px;text-decoration:underline;} /************************* Search and form styles **************************/ input { width: 70%; } textarea { width: 98%;} input.btn {width:80px;background-color:#8EB2DC;color:#0C3F7A;border:1px solid #1351A6; cursor:pointer;cursor:hand;} input.contribute {width:70px; height:18px;text-align:middle;} input.actblue {width:79px; height:39px;vertical-align:middle;} input, textarea {width:200px; padding: 1px 3px; margin: 5px 0; font: 1em verdana, arial, sans-serif; color: #000; background-color: #F4F9FC; border: 1px solid #A8BAD3; } input.checkbox {width:14px; background-color: #E7E1B8; border: 1px solid #A8BAD3; position: relative; top: 4px;} input:focus, textarea:focus { color: #000; background-color: #F4F9FC; border: 1px solid #A8BAD3;} /************************* Menu/Submenu and other navigation styles **************************/ #menu {text-align:center;font-weight:normal;color:#327ACC; margin:0px;background-color:#01398E;padding:5px;border-top:1px solid #fff;border-bottom:1px solid #fff;} #menu ul {padding:0px;margin: 0px;list-style-type: none;} #menu ul li {display: inline;padding: 0 4px;margin: 0;text-align:center;text-transform:uppercase;} #menu a { color:#fff;text-decoration: none;font: normal 11px arial, sans-serif;} #menu a:hover { color: #fff;text-decoration:underline;} /*default submenu styling*/ #submenu {margin-left:0px;width:180px;} #submenu ul {margin: 0px;padding: 0px;list-style-type: none;} #submenu li {background-color: #3F82CF;margin:0px;padding:0px;border-bottom: solid 1px #063F96;text-align: left;} #submenu li a:link, #submenu li a:visited {font: normal 11px helvetica, arial sans-serif;padding: 8px 8px;color: #fff;text-decoration: none;display: block;letter-spacing:1px;background-color: #3F82CF;} #submenu li a:hover {color: #fff;text-decoration: none;background-color: #1C61BF;} #submenu li.current_page a {background-color: #1C61BF;text-decoration: none;} /************************* Custom color-coded section submenu styles called by cases and scriptlets in content.jsp and assigned to section_articles.jsp - sorry all you java devheads **************************/ /* key_topics = economic development */ #key_topics {margin-left:0px;} #key_topics ul {margin: 0px;padding: 0px;list-style-type: none;} #key_topics li {background-color: #596D80;margin:0px;padding:0px;border-bottom: solid 1px #327ACC;border-left: solid 1px #327ACC;border-right: solid 1px #327ACC;text-align: right;} #key_topics li.topic1 a:link, #key_topics li.topic1 a:visited, #key_topics li.topic1 a:active {font: normal 14px verdana, arial, sans-serif; letter-spacing: 1px;padding: 19px 8px;color: #fff;text-decoration: none;display: block;background-color: #B0CBEB;} #key_topics li.topic1 a:hover {color: #fff;text-decoration: none;background-color: #01398E;} #key_topics li.topic2 a:link, #key_topics li.topic2 a:visited, #key_topics li.topic2 a:active {font: normal 14px verdana, arial, sans-serif; letter-spacing: 1px;padding: 19px 8px;color: #fff;text-decoration: none;display: block;background-color: #8CB4E2;} #key_topics li.topic2 a:hover {color: #fff;text-decoration: none;background-color: #01398E;} #key_topics li.topic3 a:link, #key_topics li.topic3 a:visited, #key_topics li.topic3 a:active {font: normal 14px verdana, arial, sans-serif; letter-spacing: 1px;padding: 19px 8px;color: #fff;text-decoration: none;display: block;background-color: #689DD9;} #key_topics li.topic3 a:hover {color: #fff;text-decoration: none;background-color: #01398E;} #key_topics li.topic4 a:link, #key_topics li.topic4 a:visited, #key_topics li.topic4 a:active {font: normal 14px verdana, arial, sans-serif; letter-spacing: 1px;padding: 19px 8px;color: #fff;text-decoration: none;display: block;background-color: #4486D0;} #key_topics li.topic4 a:hover {color: #fff;text-decoration: none;background-color: #01398E;} div#key_box {border: 1px solid; color:#E9F2F9;float:right;padding:0px; margin:0 0px 5px 10px; width:30%;} div#key_box ul {margin:0 0 20px 0!important;margin:0 0 10px 0;padding:2px 20px 5px!important;padding:2px 0px 3px;color:#000;} div#key_box li {padding:0px;margin:0px;} div#key_box p {padding:0px 6px!important;padding:0px 2px;font-size:11px;} div#key_box p.center {vertical-align:middle;} div#key_box h4 {font-size:12px;background-color:#608DC1;margin:0px;padding:2px;} div#key_box a {font: normal 11px arial,helvetica,sans-serif;} div#key_box hr {color: #C1DCED;background: #C1DCED;border: 0;height: 1px;text-align: center;width:95%;} div#key_box form {font-size:11px;color:#01398E;margin-left:6px;padding:0px;} div#key_box ol {margin-left:0px;} table #dates {border: 1px solid #E9F2F9;padding:4px;color:#000;background-color:#E9F2F9;width:100%;font-weight:bold;} table #dates td {border: 1px solid #E9F2F9;padding:2px 4px;background-color:#fff;} /* submenu1 = economic development */ #submenu1 {background: url("../art/navBG_ecodev.gif") repeat-y;margin-left:6px!important;margin-left:25px;height:400px;} #submenu1 ul {margin: 0px;padding: 0px;list-style-type: none;} #submenu1 li {background-color: #596D80;margin:0px;padding:0px;border-bottom: solid 1px #fff;border-left: solid 1px #fff;border-right: solid 1px #fff;text-align: left;} #submenu1 li a:link, #submenu1 li a:visited {font: normal 11px helvetica, arial sans-serif;padding: 8px 8px;color: #fff;text-decoration: none;display: block;letter-spacing:1px;background-color: #596D80;} #submenu1 li a:hover {color: #fff;text-decoration: none;background-color: #344350;} #submenu1 li.current_page a:link {background-color: #344350;text-decoration: none;} /* submenu2 = biz incubation */ #submenu2 {background: url("../art/navBG_incubate.gif") repeat-y;margin-left:6px!important;margin-left:25px;height:400px;} #submenu2 ul {margin: 0px;padding: 0px;list-style-type: none;} #submenu2 li {background-color: #555969;margin:0px;padding:0px;border-bottom: solid 1px #fff;border-left: solid 1px #fff;border-right: solid 1px #fff;text-align: left;} #submenu2 li a:link, #submenu2 li a:visited {font: normal 11px helvetica, arial sans-serif;padding: 8px 8px;color: #fff;text-decoration: none;display: block;letter-spacing:1px;background-color: #555969;} #submenu2 li a:hover {color: #fff;text-decoration: none;background-color: #151929;} #submenu2 li.current_page a {background-color: #151929;text-decoration: none;} /* submenu3 = biz finance */ #submenu3 {background: url("../art/navBG_finance.gif") repeat-y;margin-left:6px!important;margin-left:25px;height:400px;} #submenu3 ul {margin: 0px;padding: 0px;list-style-type: none;} #submenu3 li {background-color: #7A5656;margin:0px;padding:0px;border-bottom: solid 1px #fff;border-left: solid 1px #fff;border-right: solid 1px #fff;text-align: left;} #submenu3 li a:link, #submenu3 li a:visited {font: normal 11px helvetica, arial sans-serif;padding: 8px 08px;color: #fff;text-decoration: none;display: block;letter-spacing:1px;background-color: #7A5656;} #submenu3 li a:hover {color: #fff;text-decoration: none;background-color: #443030;} #submenu3 li.current_page a:link, #submenu3 li.current_page a:active, #submenu3 li.current_page a:visited {background-color: #443030;text-decoration: none;} /************************* Inner page styles **************************/ #innerwrap {width: 760px; background: url("../art/pageBG.gif") repeat top;margin:0px;} /* hide from MacIE \*/ * html #articles p { height: 1%; } /* end hide */ #articles {margin: 20px 25px; line-height:160%;font-family: arial, helvetica, sans-serif;} #articles h1{font: bold 18px arial, helvetica, sans-serif;margin: 8px 0px;color:#063F96;} #articles h2{font: italic 14px arial, helvetica, sans-serif;margin: 8px 0px;color:#1C55AC;} #articles ul li {list-style: none url("../art/bullet.gif") outside;text-align: left;} table #key {margin-left:10px;background-color: #D9E6F5;} table #key a {font-size:11px;} table #key h1 {font: bold 12px arial, helvetica, sans-serif;margin:0px; padding:4px;color:#fff;background-color: #3F82CF;} table #key p {font-size: 11px;padding: 0 4px;} #articles p {color:#000;} #articles p.caption {text-align:right;font-style:italic;color:#A9A8A9;} p.caption {text-align:right;font-style:italic;font-size:11px;color:#A9A8A9;margin-right:20px;margin-top:4px;} /************************* Home page footer styles **************************/ #footer {clear: both;} #footer p {width:760px;margin:auto;color:#B0CBEB;font-size:9px;width:80%;text-align:center;padding-top:10px!important;padding-top:5px} #footer a {font-size:10px;color:#B0CBEB;text-decoration:underline;} #footer ul {text-align:center;list-style-type: none;font-weight: bold;margin: 0px;background-color:#689DD9;border-top: 1px solid #fff;padding: 6px;font-family: arial, sans-serif;} #footer ul li {color:#ffffff;display: inline;text-transform:uppercase;padding: 0 4px;} #footer ul li a {color:#fff;text-decoration:none;} #footer ul li a:hover {text-decoration:underline;} /************************* Inside page footer_IN styles **************************/ #footer_IN {clear: both; background: url("../art/footerBG2.gif") no-repeat top; width:760px; height:84px;} #footer_IN p {width:760px;margin:auto;color:#ffffff;font-size:9px;width:60%;text-align:center;padding-top:18px!important;padding-top:0px;} #footer_IN a {font-size:10px;color:#ffffff;text-decoration:underline;} #footer_IN ul {position: relative;top: 10px;text-align:center;padding: 0;list-style-type: none;font-weight: bold;margin: 0px;} #footer_IN ul li {color:#ffffff;display: inline;text-align: center;margin-top: 5px; text-transform:uppercase;} #footer_IN ul li a {color:#fff;text-decoration:none;padding:0 6px;} #footer_IN ul li a:hover {text-decoration:underline;} /************************* Misc styles **************************/ /* styles the image list and feature image captions */ .photoCaption {font-family: arial, helvetica, sans-serif;font-size: 10px;font-style: italic;color: #000000;text-decoration: none;padding-right:38px;padding-top:4px;} /* styles the imageViewer.jsp Close Window link */ .photoClose {font-family: arial, helvetica, sans-serif;font-size: 12px;color: #FFFFFF;} /*styles the download links if there are any*/ a.download:link, a.download:visited, a.download:active {font: bold 14px courier, times, serif;color: #FF7F00;text-decoration: none;} a.download:hover {color: #CA4A0A;text-decoration: none;}