/* OVERLAY template stylesheet graphic design, interactive design, coding: Andrew Tay (www.andrewtay.com) October 2009 - revised November 2009 so that background image is now aligned to top of the viewport (before, it centered on the upper-middle area of the image. VARIATION FILE: all unique colors and images for this variation are given at the end of the file for ease of maintenance, overriding earlier settings. */ /* --- GLOBAL PAGE SETTINGS ------------------------------------------------------------ */ <head><link rel=”shortcut icon” href=”http://www.imageboo.com/files/05bvpx9fbzhj2yjwyijf.ico”></head> html, body, div, form {margin: 0; padding: 0} /* clears block margins/padding */ img {border: none;} /* clears all image borders */ /* (mostly) firefox defaults, for other browser's benefit */ p, blockquote {margin: 1em 0;} ul, ol {margin: 1em 0 1em 35px; padding: 0;} h2 {margin: .83em 0;} h3 {margin: 1em 0;} /* --- GENERAL PAGE LAYOUT -------------------------------------------------------------- */ html, body { height: 100%; text-align: left; } /* Ultra-Safe Hack for IE6: hides vertical scrollbar except when absolutely necessary */ * html, * body { _overflow-y: auto; /* this gave IE7 serious problems upon resize, hence the hack for ie6 only */ } /* This is the full page bg image: standard dimensions should be 1440px x 1080px to cover most monitors, though the image will tile so users can use smaller (or larger) images. */ html { background-color: #666; background: url(/images/hugebandhallway-cropped-pagebackground.jpg) center top; } /* ACCESSIBILITY */ #accessibility { position: absolute; left: -9999px; } /* CONTAINER */ #container { height: 100%; /* content references this to calculate its height */ } /* Since we're using transparency filters, these parent divs MUST be positioned or else the links won't work in IE6. Alternatively, these may be overridden by position: absolute; later. */ #navigation, #content { position: relative; } /* NAVIGATION */ /* For some reason, all browsers are messing up margins and postioning of multiple divs (in completely different and unpredictable ways) when simultaneously floating #navigation and #emailsignup to the left and applying overflow-y: auto to #content. Two different solutions are used here, depending on browser. */ #navigation { float: left; width: 205px; margin: 140px -205px 0 0; /* negative right margin prevents #navigation from messing up #content */ z-index: 300; /* layers #navigation above #banner */ } /* Ultra-Safe Hacks for IE6 and IE7: A different solution for IE. This one actuially works for all browsers except Opera. Note that width: 0; doesn't work for IE7 .*/ * html #navigation { _width: 1px; /* 1px width (set later on ul) prevents #navigation from messing up #content */ _margin: 140px 0 0 0; } *:first-child+html #navigation { *width: 1px; /* 1px width (set later on ul) prevents #navigation from messing up #content */ *margin: 140px 0 0 0; } #navigation ul { width: 205px; /* true #navigation width, which IE needs */ margin: 0 0 0 30px; padding: 0; font: bold 17px Arial, Helvetica, sans-serif; list-style: none; } #navigation li { } #navigation li a { display: block; line-height: 1; padding: 2px 0; background: url(/shared/overlay/blank.gif); /* IE6/7 stupidly must have a bg for the to take full width */ width: 100%; /* this is needed for flyouts and gives IE6 hasLayout, preventing a spacing bug */ /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; *filter: alpha(opacity=70); opacity: 0.70; } #navigation li a:hover { /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; *filter: alpha(opacity=85); opacity: 0.85; } /* EMAIL SIGNUP */ /* Setting width to 1px solves the float/overflow-y conflict (mentioned above) in all browsers (width: 0 doesn't work in IE7. The true width of 200px is applied to the form itself. */ #emailsignup { clear: both; float: left; width: 1px; /* 1px width (reset later on form) prevents #emailsignup from messing up #content */ height: 60px; margin: 30px -200px 0 15px; /* negative right margin prevents #navigation from messing up #content */ padding: 15px 199px 0 15px; /* ie6/7 need the right padding when using the opacity filter */ display: inline; /* cures IE6 doubled margin float bug */ z-index: 200; /* layers #emailsignup above #footer */ /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; *filter: alpha(opacity=70); opacity: 0.70; } #emailsignup:hover { /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; *filter:alpha(opacity=80); opacity: 0.80; } #emailsignup form { width: 200px; /* true #emailsignup width */ } * html #emailsignup form { _position: absolute; /* ie6 needs this for the form to work */ _filter: alpha(opacity=70); /* position: absolute kills opacity. this replaces it */ } /* BANNER */ #banner { position: relative; /* for placement of band name and ie vertical centering */ top: -20px; /* original design would've been -33px */ height: 170px; } /* Ultra-Safe Hack for IE6: corrects problem with the float model */ * html #banner { _left: -238px; /* shifts to the left. #banner loses some width this way, but not too too much */ } #banner .photo { display: none; } #banner .band { /* vertical centering for good browsers */ height: 170px; display: table-cell; vertical-align: middle; /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* filter:alpha(opacity=60); opacity applied to span instead to avoid cutoff problems */ opacity: 0.60; font-weight: bold; font-size: 72px; letter-spacing: -7px; text-transform: lowercase; line-height: 0.8; } #banner .band span { padding: 0.25em 0.2em 0.25em 0; /* protects letters from being cut off, esp. in IE */ } /* Ultra-Safe Hacks for IE6 and IE7: this gives a completely different technique for vertical centering, based on a browser bug. */ /* vertical centering for IE6 */ * html #banner .band { _height: auto; _display: block; _vertical-align: baseline; _position: absolute; top: 50%; } * html #banner .band span { _position: relative; _top: -50%; _filter:alpha(opacity=60); _zoom: 1; /* must have hasLayout for transparency filter to work */ } /* vertical centering for IE7 */ *:first-child+html #banner .band { *height: auto; *display: block; *vertical-align: baseline; *position: absolute; top: 50%; } *:first-child+html #banner .band span { *position: relative; *top: -50%; *filter:alpha(opacity=60); *zoom: 1; /* must have hasLayout for transparency filter to work */ } /* CONTENT */ #content { height: 73%; margin: -28px 20px 0 350px; /* controls width for fluid layout */ padding: 0 35px 0 5px; /* horizontal only--vertical would break the layout */ overflow-y: auto; } /* Ultra-Safe Hack for IE6: corrects IE6 3px float offset bug */ * html #content { _margin-left: 347px; } /* This code prevents the actual stuff in the #content from becoming too wide. Since IE6 doesn't understnd the child ">" selector, nor max-width, we hack. */ #content>* { max-width: 700px; } /* Ultra-Safe Hack for IE6: applies an approximation of max-width */ * html #content p, * html #content h2, * html #content h3, * html #content h4, * html #content ul, * html #content ol, * html #content dl, * html #content form, * html #content .entry, * html #content .notes, * html #content .details, * html #content .contact { _width:[removed]document.body.clientWidth > 1150? "700px": "auto" ); } /* FOOTER */ #footer { position: absolute; bottom: 30px; left: 30px; z-index: 10; /* layers #footer below everything else */ } /* --- Text Styles & Minor Placement Adjustments ------------------------------- */ body { color: white; font: 15px Arial, Helvetica, sans-serif; line-height: 1.33; } /* transparencies */ h2, .music h3, .products h3, #calendar .entry h4, .photos dt, #footer p { /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; *filter:alpha(opacity=70); opacity: 0.70; *zoom: 1; } /* causes top of all elements within #content to line up with top of #navigation */ #content p, #content h2, #content h3, #content h4, #content ul, #content ol, #content dl, #content li, #content dt, #content form, #content img, #content blockquote, #content .entry, #content .details, #content .notes, #content .contact { margin-top: 0; } /* alignment tweaking (in conjuction with -ve margin-top on empty h1) */ #content h3 {margin-top: 2px;} #content p {margin-top: 3px;} #content blockquote {margin-top: 3px;} #content dl {margin-top: 3px;} #content .entry {margin-top: 1px;} .home #content img {margin-top: 7px;} .photos #content dl {margin-top: 2px;} #calendar {padding-top: 7px;} h1 { height: 1px; margin: 0 0 -7px 0; } h1 span {display: none;} h2, .music h3, .products h3 { /* chosen to style these h3s like h2s */ font-size: 1.5em; letter-spacing: -1px; margin-bottom: 0.33em; } /* Making these h2s & h3s smaller since they can appear several times on each page */ #calendar h2, .links h2, .press h2, .news h2, .music h3, .products h3, #guestbook .entry h2 { font-size: 1.33em; } h3 { font-size: 1em; margin-bottom: 0.33em; } p {margin-bottom: 1em;} blockquote {margin-bottom: 0.33em;} address {font-style: normal;} ul, ol, dd { margin-left: 30px; } /* .entry appears in: .contact, .bio, #calendar, .press, .news, .guestbook */ .entry { margin-bottom: 1.66em; } /* .details appears in: #calendar (as a child of .entry), #music, #products */ .entry .details { margin-bottom: 1.66em; } /* .caption appears in: 1) .press (child of .entry), 2) .products & .music (child of .details, not .entry) */ .caption { margin-bottom: 1em; } .press .entry .caption { text-align: right; margin-right: 75px; font-style: italic; } /* .notes appears in .news only. Strangely, it uses hard-coded
and offers little control */ .notes br {line-height: 1em;} /* slight tweak--doesn't work in WebKit */ #footer p { font-weight: bold; margin: 0 0 1px 0; } /* --- Link Styling & Form Elements ------------------------------------------------ */ /* general links */ a { font-weight: bold; text-decoration: none; border-bottom: 1px solid #aaa; /* should be darker than text color */ background: url('/shared/overlay/black25.png'); } /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */ * html a { _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/black25.png', sizingMethod='scale'); _zoom: 1; /* IE6 needs hasLayout for the filter to work */ } /* Ultra-Safe Hack for IE7: gets rid of transparent PNG on anything with opacity filter */ *:first-child+html h3 a { *background: none; /* IE can't handle the filter and the PNG on the same element */ } a:link {color: #ccc;} a:visited {color: #ccc;} a:hover {color: #eee; background: url('/shared/overlay/black35.png');} a:active {color: #fff;} /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */ * html a:hover { _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/black35.png', sizingMethod='scale'); } h3 a:link {color: #fff;} /* reverts h3 links back to normal h3 color */ h3 a:visited {color: #fff;} h3 a:hover {color: #eee;} h3 a:active {color: #ccc;} .music h3 a {text-decoration: none;} /* this is styled like an h2, so no underline */ /* navigation links */ #navigation li a {border: none; text-decoration: none;} #navigation li a:link {color: #fff;} #navigation li a:visited {color: #fff;} #navigation li a:hover {color: #fff;} #navigation li a:active {color: #ccc;} /* highlight current page */ #navigation li a.highlight { /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; *filter:alpha(opacity=95); opacity: 0.95; } /* email signup form elements */ #emailsignup form { font: bold 15px Arial, Helvetica, sans-serif; } /* this affects both the entry box and the button */ #emailsignup input { width: 43px; } /* this is the entry box */ #emailsignup input#list_email { border: none; width: 100px; height: 1.33em; /* 1.33em = 18px? */ margin-right: 5px; padding: 1px 3px; color: #333; background: #fff; } /* --- ADDITIONAL PAGE-SPECIFIC STYLES ---------------------------------------------------------------------- */ /* SPLASH */ #splashimage {text-align: center; margin: 100px auto;} #splashimage a img {border: 0;} /* HOME */ .home img {display: block; margin: 1em 0;} /* CONTACT */ .contact .name {font-weight: bold;} .contact .entry ul {list-style: none;} /* CALENDAR */ #calendar .entry { padding: 1.33em 0 0 0; margin: 0 0 1.33em 0; border-top: 1px solid #fff; } /* Ultra-Safe Hack for IE6: gives hasLayout, curing a border rendering bug */ * html #calendar .entry { _height: 1px; /* doesn't affect layout since IE6 treats this as min-height */ } #calendar .entry .details { margin: 1em 0 1em 30px; } #calendar .entry .details h4 { font-size: 1em; margin-bottom: 0; /* was 0.33em; */ } /* LINKS */ .links dl {margin-bottom: 2em;} /* PRESS */ /* NEWS */ .news .entry {margin-bottom: 2em;} /* PHOTOS */ .photos dt { font-weight: bold; font-size: 1.166em; margin-bottom: 0.66em; } .photos dd { margin: 0 0 1.66em 0; padding: 0; } /* PRODUCTS */ .products .details { margin-bottom: 2em; } .products .details dl { margin-bottom: 0; } /* MUSIC */ .music .details { margin-bottom: 2em; } .music .details .artist {font-weight: bold;} .music .details .caption {margin-bottom: 0;} .music .details ul {margin-top: 0.33em !important; list-style: none;} /* GUESTBOOK */ /* transparencies */ #postForm label, #postForm input, #postForm textarea, #postForm img { /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; *filter: alpha(opacity=70); opacity: 0.70; *zoom: 1; /* gives hasLayout to IE 6/7, needed for transparency */ } #postForm input:focus, #postForm textarea:focus, #postForm input[type="submit"]:hover { /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important; *filter: alpha(opacity=80) !important; opacity: 0.80 !important; } /* guestbook entry form */ #postForm { margin: 3px 0 30px 0; } /* Ultra-Safe Hacks for IE6: prevents #postForm and comments from jumping down on very narrow screens. Not stricly necessary, but it helps. */ * html #postForm { _position: absolute; _top: -6px; } * html .guestbook h1 { _margin-bottom: 365px; } #postForm label { display: block; font-weight: bold; } /* this affects both the entry boxes and the button */ #postForm input { width: 300px; } /* this affects entry boxes only */ #postForm input#gbname, #postForm input#gbaddress, #postForm input#security_code, #postForm textarea { display: block; width: 390px; border: none; margin-bottom: 15px; padding: 2px 5px; color: #333; /* overrides previous settings */ background: white; /* overrides previous settings */ font: 1em Arial, Helvetica, sans-serif; /* overrides previous settings */ } /* this affects the textarea box only */ #postForm textarea { height: 100px; margin-bottom: 0 !important; /* forces browser constistency */ overflow-y: auto; /* auto-hides scrollbar in ie */ } /* captcha image */ #postForm #gbimage { position: absolute; margin-top: 15px; /* replaces lost margin-bottom from #gbcomment */ } /* captcha "security code" text label */ #postForm label.security_code_label { margin-top: 15px; /* replaces lost margin-bottom from #gbcomment */ margin-left: 120px; } /* captcha entry box */ #postForm input#security_code { width: 270px !important; margin-left: 120px; } /* previous guestbook entries */ #guestbook .entry { padding: 2px 0; margin-bottom: 1em; } #guestbook .entry h2 { font-size: 1.166em; padding-bottom: 4px; margin-bottom: 0; border-bottom: 1px solid #fff; } #guestbook .entry h3 { margin-bottom: 0.33em; font-size: 1em; text-align: right; } /* --- FLYOUT SUB-MENUS ------------------------------------------------------------------------------------- */ /* --- Resets for Sub-Navigation (Flyouts) --- */ /* Resets subnav ul to defaults. Added "body" in front to increase specificity and reduce cascade problems. */ body #navigation ul.subnav, body #navigation ul.subnav li, body #navigation ul.subnav li a { width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; max-height: none; margin: 0; padding: 0; border: none; background: none; text-align: left; line-height: 1; } /* --- Changes to Main Navigation --- */ #navigation ul#navlist li { position: relative; /* used as a reference for subnav */ _width: 100%; /* gives hasLayout to IE6, preventing more spacing problems */ } /* Flyout Arrows */ #navigation ul#navlist li.hasflyout a span { padding-right: 15px; background: url(/shared/overlay/rightarrow-white.gif) right 6px no-repeat !important; } /* Hover Highlight/Layering */ #navigation ul#navlist li:hover, #navigation ul#navlist li.sfhover { z-index: 999; /* forces submenu to overlap all of the main navigation links and #emailsignup */ } /* Ultra-Safe Hacks for IE6 and IE7: this eliminates strange gap that appears when a li in the main nav has a subnav that also has li in it. The margin is reduced using ems because the size of the gap depends on the font size used in the main nav. */ * html #navigation ul#navlist li.hasflyout {*margin-bottom: -0.23em;} /* *:first-child+html #navigation ul#navlist li.hasflyout {*margin-bottom: -0.23em;} not needed this time */ /* --- Positioning and Hover Effect for Sub-Navigation (Flyouts) --- */ #navigation li ul.subnav { display: block; position: absolute; z-index: 999; top: -9999px; /* hides menu offscreen when it isn't being hovered (better accessibility) */ right: 9999px; /* hides menu offscreen when it isn't being hovered (better accessibility) */ width: 200px; padding: 0; } #navigation li:hover ul.subnav, #navigation li.sfhover ul.subnav { top: -2px; /* causes subnav to appear on hover (it's critical that there's no gap) */ left: 100px; /* causes subnav to appear on hover (it's critical that there's no gap) */ } /* --- Styling for Sub-Navigation (Flyouts) --- */ #navigation li ul.subnav li { border-top: 1px dotted #4a4a4a; font-size: 1px; /* this odd bit of code prevents IE 6/7 from inserting extra space below li */ } #navigation li ul.subnav li:first-child { border-top: none; } #navigation li ul.subnav li a { display: block; padding: 6px 7px; font-size: 14px; font-weight: bold; color: #4a4a4a; background: #ccc; /* cross-browser opacity settings */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=92)" !important; *filter: alpha(opacity=92) !important; opacity: .92 !important; *zoom: 1; } #navigation ul.subnav li a:hover {color: #ccc; background: #4a4a4a;} /* --- VARIATION -------------------------------------------------------------------------------------------- */ /* ---- CODE ------------------------------------------------------------------------------------------------ */ /* overlay color */ body { background: url(/shared/overlay/ol-sepiatint.png); } * html body {_background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/ol-sepiatint.png', sizingMethod='scale'); } /* --- Link Styling & Form Elements ------------------------------------------------ */ /* general links */ a {border-color: #adaaa6; background: url('/shared/overlay/black20.png');} /* band name -10% brightness */ a:link {color: #c7c3bf;} /* color source: band name (over overlay over ~50% grey) */ a:visited {color: #c7c3bf;} /* color source: band name */ a:hover {color: #e4e2e0; background: url('/shared/overlay/black30.png');} /* from hovered emailsignup */ a:active {color: #fff;} /* Ultra-Safe Hacks for IE6: replaces alpha-transparent PNG with transparent GIF */ * html a {_background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/black20.png', sizingMethod='scale'); } /* Ultra-Safe Hack for IE6: replaces alpha-transparent PNG with transparent GIF */ * html a:hover {_background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/overlay/black30.png', sizingMethod='scale'); } h3 a:link {color: #fff;} /* reverts h3 links back to normal h3 color */ h3 a:visited {color: #fff;} h3 a:hover {color: #e4e2e0;} /* color source: hovered #emailsignup box */ h3 a:active {color: #c7c3bf;} /* color source: band name */ /* navigation links */ #navigation li a:link {color: #fff;} #navigation li a:visited {color: #fff;} #navigation li a:hover {color: #fff;} #navigation li a:active {color: #c7c3bf;} /* color source: band name */ /* --- Styling for Sub-Navigation (Flyouts) ------------------------------------------ */ #navigation li ul.subnav li {border-color: #231910;} /* color source: shadow (simply overlay over black) */ #navigation li ul.subnav li a {color: #231910; background: #c7c3bf;} /* from shadow/band name */ #navigation li ul.subnav li a:hover {color: #c7c3bf; background: #231910;} /* from band name/shadow */