/* willo design l.p. CSS File 10-18-05 fluid layout with classic willo site style Designed for minimum width of 1024px. --by-- David Wilbanks wilbanks@willodesign.com */ /* default styles */ * {padding: 0; margin: 0;} body { background-color: #47473C; font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFF;} /* default link styles */ a:link { color: #9ad24d; text-decoration: none;} a:visited { text-decoration: none; color: #6CB73C;} a:hover { color: #ccc; text-decoration: none;} a:active {text-decoration: none; color: #6CB73C;} /* default image replacement - use h1 and h2 tags with spans, and b elements to hide and replace text */ h1 span, h2 span, b { display: none;} dt {color: #9ad24d;} img { border: 0px; } /* define major block areas: masthead contains: logo main menu content contains: sidebar - dark area on left which contains: about and portfolio menus portfolio captions welcome text on home and contact main - large white area contains stage- 650 wide area for content centered in main white area. footer contians: copyright - absolutly postioned on left bottom nav- centered below white area xhtml/css validation links absolutly positioned on right */ /* masthead with logo on top left and main menu on top right */ #header {width: 100%; height: 132px; position: relative;} #logo { width: 475px; background: url(../images/bannerlogo.jpg) no-repeat; height: 132px;} #logo h1 a { display: block; width: 475px; height: 132px;} /* menu is a ul with li's floated left */ #menu{ position: absolute; bottom: 0; right: 0;} #menu ul { width: 26em;} #menu li { float: left; margin: 0 10px; height: 1.75em; display: inline; list-style: none; clear: none;} #menu li a {color: #fff; display: block; padding: 0 5px 3px; border-bottom: 2px solid #47473C;} #menu li a:visited { color: #CCCCCC;} #menu li a:hover { color: #9ad24d; background:url(../images/arrowtip.gif) 50% 6px no-repeat; border-bottom: 2px solid #47473C;} #menu li a:active { color: #6CB73C;} #menu li a.uber, #menu li a.uber:visited { color: #9ad24d;} /* content is fluid with 250px sidebar floated left */ #content { width: 100%; background: #fff; position: relative;} /* float sidebar and use body id's to set background image */ #sidebar {position: absolute; top: 0; left: 0; height: 375px; width: 250px;} #home #sidebar { background-image:url(../images/home.gif);} #about #sidebar { background-image:url(../images/about.gif);} #portfolio #sidebar { background-image:url(../images/porfolio.gif);} #contact #sidebar { background-image:url(../images/contacts.gif);} /*sidebar content, p's mainly on home and contact, about and portfolio have ul based menus span is set to block and is used for image replacement on home and contact pages since they are not really h1 worthy content. strong tag used for green phone number since we want it to stand out if css is off. */ #sidebar p { margin: 0 20px 1em 50px; width: 180px; font: 12px/28px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; text-align: right; padding: 0; } #sidebar strong { display: block; color: #9ad24d; font-size: 12px;} /* #ourport is for link to our portfolio that appears on home and about pages at bottom of sidebar */ #sidebar p#ourport, #sidebar dl { position: absolute; bottom: 24px; right: 38px; font-size: 11px; margin: 0; padding: 0;} #sidebar p a {color: #9ad24d; text-decoration: none;} #sidebar p a:hover {color: #fff; } #home h2 { width: 250px; height: 54px; background-image: url(../images/welcome.gif);} #contact #sidebar p span { display: block; width: 180px; height: 52px; color: #9ad24d; text-align: right; background: url(../images/thankyou.gif) bottom right no-repeat; } /*about and portfolio menu styling. they start with an h2 ( oops h1) to define what section you are in : about or portfolio. */ #sidebar li a { display: block; width: 250px; height: 36px;} /* about menu */ #about #sidebar h1 { width: 250px; height: 54px; background-image: url(../images/about/about.gif);} /* each li is given an id to key image replacement, b is used to hide text. We use b because we want the text to look bold if no css */ #ourfirm a { background: url(../images/about/ourfirm-off.gif) center; } #services a { background: url(../images/about/services-off.gif) center;} #clients a { background: url(../images/about/accounts-off.gif) center; } #bios a { background: url(../images/about/bios-off.gif) center; } /* .uber class is used to set selected state for all three nav elements ( top menu, sidebar menu and bottom nav). Here it is a green arrow.*/ #sidebar .uber { background: url(../images/select-arrow.gif) bottom right no-repeat;} /* turn menu item to on state if you are in that section */ .uber#ourfirm a, .uber#ourfirm a:visited { background: url(../images/about/ourfirm-on.gif) center; } .uber#services a, .uber#services a:visited { background: url(../images/about/services-on.gif) center;} .uber#clients a, .uber#clients a:visited { background: url(../images/about/accounts-on.gif) center; } .uber#bios a, .uber#bios a:visited { background: url(../images/about/bios-on.gif) center; } /*turn menu to on state if hovered with mouse */ #ourfirm a:hover { background: url(../images/about/ourfirm-on.gif) center; } #services a:hover { background: url(../images/about/services-on.gif) center;} #clients a:hover { background: url(../images/about/accounts-on.gif) center; } #bios a:hover { background: url(../images/about/bios-on.gif) center; } /* portfolio menu */ #portfolio #sidebar h1 { width: 250px; height: 54px; background-image: url(../images/portfolio/portfolio.gif);} /* each li is given an id to key image replacement, b is used to hide text. We use b because we want the text to look bold if no css */ #ident a { background: url(../images/portfolio/ident-off.gif) center; } #packaging a { background: url(../images/portfolio/packaging-off.gif) center;} /*#collateral a { background: url(../images/portfolio/collateral-off.gif) center; }*/ #interact a { background: url(../images/portfolio/interact-off.gif) center; } #ads a { background: url(../images/portfolio/ads-off.gif) center; } #other a { background: url(../images/portfolio/other-off.gif) center; } /* turn menu item to on state if you are in that section */ .uber#ident a, .uber#ident a:visited { background: url(../images/portfolio/ident-on.gif) center; } .uber#packaging a, .uber#packaging a:visited { background: url(../images/portfolio/packaging-on.gif) center;} .uber#interact a, .uber#interact a:visited { background: url(../images/portfolio/interact-on.gif) center; } .uber#ads a, .uber#ads a:visited { background: url(../images/portfolio/ads-on.gif) center;} .uber#other a, .uber#other a:visited { background: url(../images/portfolio/other-on.gif) center;} /*turn menu to on state if hovered with mouse */ #ident a:hover { background: url(../images/portfolio/ident-on.gif) center; } #packaging a:hover { background: url(../images/portfolio/packaging-on.gif) center;} #collateral a:hover { background: url(../images/portfolio/collateral-on.gif) center; } #interact a:hover { background: url(../images/portfolio/interact-on.gif) center; } #ads a:hover { background: url(../images/portfolio/ads-on.gif) center; } #other a:hover { background: url(../images/portfolio/other-on.gif) center; } .uber#ident a:active, .uber#ident a:active:visited { background: url(../images/portfolio/ident-on.gif) center; } /* portfolio descriptions at bottom of sidebar */ #sidebar dl { width: 175px; text-align: right;} #sidebar dl dt { color: #9ad24d; font-size: 11px; font-weight: bold;} /* --------------- End Sidebar Styles and Menus ----------------------------------- */ /*main area in white including cetntered stage for portfolio and content */ #main { margin-left: 250px; height: 375px; background: #fff; position: relative; min-width: 650px; text-align: center;} /* pull out from under floated sidebar with 250px margin and set white. check to see if postion relative can come out?? */ /* set background images for about section based on what page is visited. set using body class selector */ .leaf #main { background:url(../images/about/istock_stackedleaf.jpg) 92.5% 63% no-repeat;} .index #main { background-color: #ebebe8;} /*set stage area to be 650px centered in #main div */ #stage { height: 375px; width: 650px; margin: 0 auto; color: #47473c; font: 12px/30px "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; text-align: left; position: relative;} /* stage styles for about pages */ #stage p { padding-top: 2em;} #about #stage { padding-top: 18px; height: 357px; } #about #stage p { margin: 0 1em 1em; padding-top: 1em; width: 470px;} #about #stage #more { font-weight: bold; color: #9ad24d; text-align: right;} /* drop lead cap on first about page done with span with class drop */ #stage .drop {display: block; width: 57px; height: 50px; float: left; background-image:url(../images/about/wleadcapgreen50.gif); margin: 9px 5px 0 0; padding: 0;} /* for services page in about, three columns done with 3 ul's floated left with nested dls */ .serv #stage ul { width: 200px; float: left; line-height: 1.2em; margin-bottom: 1em;} .serv #stage dt { font-weight: bold; font-size: 14px; margin-top: 1em; font-family: Arial, Helvetica, sans-serif; letter-spacing: normal;} .serv #stage dd { font-size: 11px; padding-left: 1em;} .serv #stage dt a { display: block; padding-top: 10px;} /* easel mojo on services page. uses absolutly positioned i element inside a tag to swap images on easel*/ .serv #stage {background:url(../images/about/easel-175x175.jpg) 435px 150px no-repeat;} #about #stage dt a {display: block;} #about.acnts #stage { padding: 0;} .serv i { display: block; position: absolute; bottom: 94px; right: 53px; z-index: 1; font-size: 0; color: #fff; width: 146px; height: 94px; visibility: hidden;} #ms-i { background-image:url(../images/about/serv07.jpg); z-index: 99;} #co-i { background-image:url(../images/about/serv03.jpg); z-index: 99;} #in-i { background-image:url(../images/about/serv04.jpg); z-index: 99;} #ad-i { background-image:url(../images/about/serv05.jpg); z-index: 99;} #id-i { background-image:url(../images/about/serv01.jpg); z-index: 99;} #pa-i { background-image:url(../images/about/serv02.jpg); z-index: 99;} #ot-i { background-image:url(../images/about/serv06.jpg); z-index: 99;} /* accounts page uses three ul's floated left */ #stage ul { float: left; width: 175px; list-style: none; font-size: 10px; line-height: 1.5em; margin-left: 1em;} #stage ul li { padding-left: 0em;} /*bio pages use nested dl's */ #stage dl#bio { width: 480px; margin-top: 1.5em; text-align:left; float: left;} #stage dl#bio dt { margin:0 0 0.5em; padding: 0; font: 24px Arial, Helvetica, sans-serif; font-weight: bold; } #stage dl#bio dd { margin: 0; padding: 0 0 0 1em; } #stage dl#bio dd dl { width: 470px; } #stage dl#bio dd dl dt { font-size: 16px; float: left; width: 100px; display: inline; height: 1.5em; padding-top:3px; text-align: right;} #stage dl#bio dd dl dd { font-size: 12px; width: 350px; margin: 0 0 7px 110px; line-height: 1.5em; padding: 4px 0 7px 0;} /*poftfolio pages - uses centered image (must display as block to center )*/ #stage img { display: block; margin: 0 auto;} /* contact page move p tag over image */ #contact #stage p { position: absolute; bottom: 5px; width: 100%; text-align: center;} /* ---------------- End Stage Styles ------------------------------------- */ /* #main nave is series of gray squares with numbers centered at below white area. marked up as simple p with spans for the arrow buttons and anchor tags displayed as block */ #mainnav { margin-left: 250px; margin-top: 5px; background: #47473C; text-align: center;} #mainnav { height: 25px; color: #ccc; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;} #mainnav p {position: relative; width: 400px; margin: 0 auto; height: 20px; padding-top: 5px;} #mainnav b {font-weight: normal; display: inline;} #mainnav a { color: #ccc;} #mainnav a:hover { color: #9ad24d;} #mainnav span a { background-color: #67675d; padding: 0 2px; color: #67675d; border: 1px solid #67675d; height: 1.2em; width: 1.2em;} #mainnav span .uber, #mainnav span .uber:visited { background-color: transparent; color: #9ad24d; border: 1px solid #9ad24d;} #mainnav span a:visited { background-color: #27271d; color: #27271d; border: 1px solid #27271d;} #mainnav span a:hover { background-color: transparent; color: #9ad24d; border: 1px solid #9ad24d; text-decoration: none;} #mainnav span a:active { background-color: transparent; color: #9ad24d; border: 1px solid #9ad24d;} #mainnav #bk-arrow, #mainnav #nxt-arrow { width: 1.2em; displa: block; } #!mainnav #bk-arrow a, #mainnav #nxt-arrow a { width: 1.2em !important; height: 1.2em; padding: 0 2px; background-color: transparent; color: #ccc; border: 1px solid #ccc; text-decoration: none; font-size: 10px;} #mainnav #bk-arrow a:hover, #mainnav #nxt-arrow a:hover { color: #9ad24d; border: 1px solid #9ad24d; text-decoration: none;} /* New portfolio navigation styles by Cory (6/29/06) ------------------------------------------------------ */ #mainnav #skip { position: absolute; top: 7px; left: 140px; border-left: 1px solid #333; padding: 4px 12px; } #mainnav #bk-arrow a, #mainnav #nxt-arrow a { padding: 0; width: 20px; height: 20px; position: absolute; top: 8px; left: 90px; display: block; overflow: hidden; text-indent: -9000px; background: url(../images/portfolio/arrow-back.gif) 50% 0 no-repeat; border: 0; } #mainnav #bk-arrow a:hover, #mainnav #nxt-arrow a:hover { background-position: 50% -20px; border: 0; } #mainnav #nxt-arrow a { left: 110px; background-image: url(../images/portfolio/arrow-forward.gif); } /* footer styles including copyright and validation links */ #footer p { padding-top: 10px; text-align: center; color: #27271d;} #cop {position: absolute; left: 35px; top: 508px; width: 180px; text-align: center;} #val {position: absolute; right: 10px; top: 508px; text-align: right; width: 100px;} #val a {color: #27271d;} #val a:hover { color: #9ad24d;} /* New Cut lines on main stage */ #portfolio #main p { font-size: 10px; margin: 0; padding: 0; color: #80776e; text-align: center;line-height: 25px;} #portfolio #main p span {/* color: #15140a;*/ color: #15140a;} /*ie 5 box model hacks */ /*Debug borders div { border: 1px solid red;} p { border: 1px solid green;} dl, ul { border: 1px solid blue;} li, dt, dd { border: 1px solid yellow;} #main {border: 1px solid brown;} #stage { border: 1px solid black;} */