/* LENS template stylesheet
graphic design, interactive design, coding: Andrew Tay (www.andrewtay.com) December 2009/February 2010
IMPORTANT NOTE: This template uses several transparent background images that have to line up perfectly to
achieve the right effect. Most browsers use one method, but IE6 uses a completely different approach due
to the limitations of using the AlphaImageLoader filter to display transparent PNGs. The IE6 version is
a bit simpler, but the normal version is more robust and has a few graphic details that are missing from
the IE6 version. Opacities used to create backgrounds:
New Shades: Light 45% Lighter 60% Lightest 80% White
New Shades: Dark 50% Darker 65% Darkest 80% Black
Known issues:
- Subnav menus aren't positioned correcly in IE7 (too high, and height is inconsistent).
- Opera misrenders #navigation links that spill over to the next line (still functional, though).
MASTER FILE: Light/Center variation
*/
/* --- GLOBAL PAGE SETTINGS ------------------------------------------------------------ */
html, body, div, form {margin: 0; padding: 0} /* clears block margins/padding */
img {border: none;} /* clears all image borders */
h1, h2, h3, p, dl {margin: 0;}
ul, ol {margin: 1em 0 1em 35px; padding: 0;} /* firefox defaults */
/* --- GENERAL PAGE LAYOUT -------------------------------------------------------------- */
/* 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. */
body {
text-align: left;
padding: 195px 0;
background-color: #666;
background: url(/images/huge-26-cropped-pagebackground.jpg) center top fixed
}
/* IE6-Specific Alternate Layout: requires less padding since #banner and #footer stay completely
within #container. */
* html body {
padding-top: 45px;
padding-bottom: 0;
}
/* CONTAINER */
/* Layout for Good Browsers: #container places the repeating, middle portion of the background. The top and
bottom portions are handled by #banner and #footer, which are positioned directly outside of #container,
above and below. All three backgrounds have areas cut-out for the overlapping portions of #navigation and
#content (which have their own backgrounds). */
#container {
position: relative; /* reference for #emailsignup */
width: 730px;
margin: 0 auto;
padding: 1px; /* top/bottom padding prevents margin collapsing, l/r gives extra space for bg shadow */
background: url('/shared/lens/container-center-light.png') top left repeat-y;
}
/* IE6-Specific Alternate Layout: can't use AlphaImageLoader filter here because the filter makes any
portion of a child div that lies outside the boundaries of #container invisible (i.e. #banner and
#footer). Instead, we'll use #navigation and #content to display most of the translucent background. */
* html #container {
_background: none;
}
/* NAVIGATION */
#navigation {
position: relative; /* needed for z-index to work */
width: 460px;
margin: -50px 0 0 225px; /* -ve margin makes #navigation overlap #banner image */
padding-right: 25px;
background: url('/shared/lens/cutout-generalcontent-light.png') left top repeat-y;
z-index: 200; /* layers this over #banner */
}
#navigation ul {
margin: 0;
padding: 15px 0; /* controls spacing around div; also, ie6 needs padding to be inside the ul */
list-style: none;
font: 1.33em "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
line-height: 1.33em;
}
/* IE6-Specific Alternate Layout: since we're not using #banner or #container to position the background,
we'll make #navigation be full-width and use the AlphaImageLoader filter to display a unique, larger
PNG that includes the thick border and rounded corners at the top.
The filter can screw up the links pretty easily. For them to work, the links *must* have position, while
the div with the filter on it *must not* have position (see www.hrunting.org/csstests/iealpha.html).
That is why we're setting #navigation to position: static; and we're putting the filter on the ul
instead. Also, both elements must have layout. IE is stupid. */
* html #navigation {
_position: static; /* keeps links working properly */
_margin: 0 -1px; /* expands width to full; also compensates for 1px container padding */
_padding: 102px 44px 0 228px; /* expands width to full */
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/ie6-navigation-center-light.png', sizingMethod='crop');
_zoom: 1; /* IE6 needs hasLayout for the filter to work */
}
* html #navigation ul {
zoom: 1; /* IE6 needs this to prevent a link rendering bug */
}
/* NAVIGATION LIST ITEMS */
#navigation li {
display: inline;
}
/* Creates a slash "/" separator for all browsers except IE6/7, which don't understand the :after
pseudoclass. */
#navigation li:after {
color: black;
content: " /";
}
#navigation li:last-child:after { /* removes "/" from last nav link */
color: black;
content: "";
}
/* Ultra-Safe Hacks for IE6 and IE7: replaces generated slash "/" with a large space. */
* html #navigation li {_padding-right: 10px;}
*:first-child+html #navigation li {*padding-right: 10px;}
/* COOL INTERACTIVE NAVIGATION BUTTON EFFECT THINGS */
/* Using a clever drop shadow effect on these links. Known issue: Opera 9.64 has a rendering bug that's
triggered by the position: relative; on #navigation li a span. It only occurs when an individual
link wraps to the next line... it's slightly ugly, but rare... and it doesn't break anything. */
/* A) Navigation - Normal Links */
#navigation li a {
position: relative;
top: 1px; /* corrects link offsets (see below) */
left: 1px; /* corrects link offsets (see below) */
}
/* Ultra-Safe Hack for IE6: prevents rendering bug by removing positioning. */
* html #navigation li a {
_position: static; /* position: relative; caused hovered links to disappear in IE6 */
}
#navigation li a span {
position: relative;
top: -1px; /* offsets link rectangle from shadow rectangle ("a span" from "a") */
left: -1px; /* offsets link rectangle from shadow rectangle ("a span" from "a") */
}
/* Ultra-Safe Hacks for IE6 and IE7: must have layout for offsets to work in IE6/7 */
* html #navigation li a span {_zoom: 1;}
*:first-child+html #navigation li a span {*zoom: 1;}
/* B) Navigation - Hovered Links */
#navigation li a:hover {
background: url('/shared/lens/shadow-navbuttons-black10.png') right bottom no-repeat;
}
#navigation li a:hover span {
background: url('/shared/lens/white30.png');
}
/* C) Navigation - Active Links: creates pressed-button effect when link is clicked (not in IE6/7) */
#navigation li a:active {
background: none;
-moz-outline: none; /* FF proprietary: removes focus outline, which was distracting */
}
#navigation li a:active span {
background: url('/shared/lens/white45.png');
top: 0px; /* adjusts offset when button is pressed */
left: 0px; /* adjusts offset when button is pressed */
}
/* D) Navigation - Ultra-Safe Hacks for IE6: alpha filter for alpha-transparent PNG. This looks a bit
different due to the limitations of the filter. Deliberately not giving hasLayout
to IE6 so we can remove the shadow effect. */
* html #navigation li a:hover {
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/black10.png', sizingMethod='scale');
}
* html #navigation li a:hover span {
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/white30.png', sizingMethod='scale');
}
/* EMAIL SIGNUP */
#emailsignup {
position: absolute;
top: -180px;
left: 0px;
padding-right: 30px; /* simply expands hover area */
height: 60px;
/* cross-browser opacity settings */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
*filter: alpha(opacity=50);
opacity: 0.50;
}
#emailsignup:hover {
/* cross-browser opacity settings */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
*filter: alpha(opacity=65);
opacity: 0.65;
}
/* this helps even out the stuff in #emailsignup, allowing "Join the email list!" text to be stronger */
#emailsignup input#list_email {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
*filter: alpha(opacity=95);
opacity: 0.95;
}
/* IE6-Specific Alternate Layout: less top padding on body; this div doesn't have to be moved up as far. */
* html #emailsignup {
_top: -30px;
}
/* BANNER/ACCESSIBILITY */
#banner {
position: absolute;
width: 100%;
height: 150px;
top: -150px; /* pulls #banner up outside of #container so it can place the upper portion of the page bg */
left: 0;
background: url('/shared/lens/banner-center-light.png') top left no-repeat;
/* text styling */
color: black;
font: bold 37px Georgia, "Times New Roman", Times, serif;
letter-spacing: -2px;
line-height: 0.8;
}
/* IE6-Specific Alternate Layout: not using #banner to place any portion of the background. */
* html #banner {
_top: 0;
_height: auto;
_background: none;
_z-index: 500;
}
/* Band Photo - These are the shadows for the band photos */
#banner .photo {
position: absolute;
width: 164px;
height: 428px;
top: 41px; /* 1px offset from the main band name */
left: 41px; /* 1px offset from the main band name */
background: url('/shared/lens/shadow-userimages-center.png') left top no-repeat;
z-index: 300;
}
/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
* html #banner .photo {
_width: 700px;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/shadow-userimages-center.png', sizingMethod='crop');
}
/* Photo Span - This is the shadow of the main band name */
#banner .photo span {
display: block;
position: absolute;
width: 460px;
top: 10px;
left: 185px;
padding-bottom: 20px; /* protects descenders from being cut off in IE6/7 */
/* cross-browser opacity settings */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
*filter:alpha(opacity=25);
opacity: 0.25;
}
/* Band Band - This is the first (top) band photo. Dimensions of both photos: 164px x 205px */
#banner .band {
position: absolute;
width: 164px;
height: 205px;
top: 40px;
left: 40px;
background: url(/images/logo-cropped-topphoto.jpg) center center no-repeat;
z-index: 300;
}
/* Band Span - This is the main band name */
#banner .band span {
display: block;
position: absolute;
width: 460px;
top: 10px;
left: 185px;
padding-bottom: 20px; /* protects descenders from being cut off in IE6/7 */
}
/* Accessibility - This is the second (bottom) band photo. Using relative positioning so that we can center
it using auto margins--this technique syncs properly with the photo shadow and other page content
(unlike the usual technique of absolute positioning/left 50%/negative left margin). */
#accessibility {
position: relative;
width: 164px;
height: 205px;
top: 113px;
left: -244px;
margin: 0 auto -205px auto; /* bottom margin should equal height */
background: url(/images/awardsshow1-cropped-bottomphoto.jpg) center center no-repeat;
text-indent: -9999px;
z-index: 400;
}
/* IE6-Specific Alternate Layout: less top padding on body = this div needs to be pushed down further. */
* html #accessibility {
_top: 263px;
}
/* CONTENT */
#content {
position: relative; /* needed for z-index to work */
width: 460px;
margin: 0 0 -100px 225px; /* -ve margin makes #content overlap #footer image */
z-index: 100; /* makes sure #content overlaps footer */
}
/* IE6-Specific Alternate Layout: since we can't use #container to position any portion of the background,
much like #navigation, we'll make #content be full-width and use the AlphaImageLoader filter to display
a transparent PNG background--the same one that would've been used on #container, which has a big cut-out
for the actual content. This BG scales verically. */
* html #content {
_width: auto;
_margin: 0 -1px; /* expands width to full; also compensates for 1px container padding */
_padding: 0 46px 0 226px; /* expands width to full */
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/container-center-light.png', sizingMethod='scale');
_zoom: 1; /* IE6 needs hasLayout for the filter to work */
}
/* TRANSLUCENT BACKGROUNDS within CONTENT */
/* Because this design uses cutouts in the translucent background as a visual signature, the actual bg
images must be applied to individual child elements of #content, and they must all line up with each other
and with the main backgrounds without overlapping. */
#content>*, /* default styling for all immediate children */
#content #press>h2, /* needed for hostbaby 2 (different div structure) */
#content #calendar>p, #content #calendar>a, /* for show past dates, RSS feed */
#content #guestbook>a { /* for next/prev page */
display: block; /* needed for "show past dates" link on old wizard */
margin: 0; /* discourages gaps... */
border: none; /* removes link underline */
background: url('/shared/lens/cutout-generalcontent-light.png') left top repeat-y;
}
/* Ultra-Safe Hack for IE6: IE6 doesn't understand the direct child selector ">", so we need to
select each child one-by-one, and then reset for any descendants that aren't direct children. */
* html #content p,
* html #content a,
* html #content h1, * html #content h2, * html #content h3, * html #content h4,
* html #content ul, * html #content ol, * html #content dl,
* html #content form, * html #content img, * html #content blockquote,
* html #content .entry, * html #content .details, * html #content .notes, * html #content .contact,
* html #content table#calendar, /* for calendar past dates table */
* html #content #contacts, * html #content #bios, /* for new Hostbaby2 div nesting*/
* html .blog #content #news, /* for new Hostbaby2 div nesting*/
* html #content #postForm, /* for guestbook */
* html #content #guestbook a { /* for next/prev page */
_display: block;
_margin: 0;
_border: none;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-generalcontent-light.png', sizingMethod='scale');
_zoom: 1; /* IE6 needs hasLayout for the filter to work */
}
/* Ultra-Safe Hack for IE6: this prevents the transparency filter from messing up links. */
* html #content a {
_position: relative;
}
/* Ultra-Safe Hack for IE6: One-by-one reset for descendents that aren't direct children, and
therefore don't need a translucent background image. */
* html #content .entry p,
* html #content .entry h2, * html #content .entry h3, * html #content .entry h4,
* html #content .entry ul, * html #content .entry ol, * html #content .entry dl,
* html #content .entry blockquote,
* html #content .entry .details,
* html #content .entry .notes,
* html #content .details ul, * html #content .details ol, * html #content .details dl,
* html #content table#calendar *, /* for calendar past dates */
* html .blog #content #news h2, * html .blog #content #news p, /* for new Hostbaby2 div nesting*/
* html #content div form, /* esp. for guestbook form */
* html #content div .entry, /* esp. for guestbook entries */
* html #content #guestbook .entry a { /* esp. for guestbook links */
_filter: none;
}
/* Additional reset for links. These should also be inline by default. */
* html #content * a {
_display: inline;
_filter: none;
}
/* Additional reset for descendant images. */
* html #content * img {
_filter: none;
}
/* FOOTER */
#footer {
position: absolute;
width: 732px;
height: 150px;
bottom: -150px; /* pulls #footer down outside of #container so it can place lower portion of the page bg */
left: 0;
background: url('/shared/lens/footer-center-light.png') bottom left no-repeat;
z-index: 10; /* makes sure #content overlaps footer */
}
/* IE6-Specific Alternate Layout: using a smaller, non-overlapping transclucent background */
* html #footer {
_position: static;
_height: 95px;
_margin: 0 -1px; /* -1px left and right margins let the filter graphic overlap container padding */
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/ie6-footer-center-light.png', sizingMethod='crop');
}
#footer p {
display: block;
position: absolute;
bottom: -45px;
right: 40px;
/* cross-browser opacity settings */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
*filter: alpha(opacity=50);
opacity: 0.50;
}
/* IE6-Specific Alternate Layout: yet another adjustment */
* html #footer p {
_bottom: 0;
}
/* EXTRA DIVS */
#containermiddle1, #containermiddle2 {
display: none; /* these new empty divs caused a 1px gap in ie */
}
/* --- Text Styles & Minor Placement Adjustments ------------------------------- */
body {
color: black;
font: 93.75% Georgia, "Times New Roman", Times, sans-serif; /* 93.75% = 15px */
line-height: 1.33;
}
/* H1 - This places the 4px thick horizontal line and extra spacing at the top of content. */
#content h1 {
height: 4px;
padding-bottom: 21px;
background: url('/shared/lens/cutout-h1-light.png') top left repeat-y;
}
/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
* html #content h1 {
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-h1-light.png', sizingMethod='crop');
}
#content h1 span {
display: none;
}
/* H2 & H3 - These are styled together. */
h2, .music h3, .products h3 { /* chosen to style these h3s like h2s */
padding: 0 0 1em 0;
font: bold 1.26em "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform: uppercase;
line-height: 1;
text-align: center;
}
.music h3 {
text-align: left;
padding-bottom: 0.66em;
}
h3 {
font-size: 1em;
margin-bottom: 0.33em;
}
.bio h2, .contact h2, .music h2 {font-size: 1.533em;} /* major centered headings: 1.533em = 24px; */
#calendar h2, .press h2 {font-size: 1.33em;} /* minor centered headings: 1.33em = 20px; */
/* H2 & H3 CUTOUTS */
.links #content h2, .news #content h2, .products #content h3 {
text-align: left;
padding-left: 30px;
background: url('/shared/lens/cutout-h2-light.png') left top repeat-y;
}
/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG. */
* html .links #content h2, * html .news #content h2, * html .products #content h3 {
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-h2-light.png', sizingMethod='crop');
_zoom: 1;
}
p {padding-bottom: 1em;} /* replaces margin-bottom: 1em; */
blockquote {margin-top: 0;}
address {font-style: normal;}
ul, ol, dd {margin-left: 30px;}
/* .entry appears in: .contact, .bio, #calendar, .press, .news, .guestbook */
.entry {
padding-bottom: 1.66em;
}
/* .details appears in: #calendar (as a child of .entry), #music, #products */
.entry .details {
padding-bottom: 1.33em;
}
/* .caption appears in: 1) .press (child of .entry), 2) .products & .music (child of .details, not .entry) */
.caption {
padding-bottom: 1.33em;
}
.press .entry .caption {
text-align: right;
font-style: italic;
}
/* .notes appears in .news only. Strangely, it uses a hard-coded
and offers little control */
.notes br {line-height: 1em;} /* slight tweak--doesn't work in WebKit */
#footer p {
color: white;
font: bold 17px Georgia, "Times New Roman", Times, serif;
}
/* --- Link Styling & Form Elements ------------------------------------------------ */
/* general links */
#content a {
font-weight: bold;
text-decoration: none;
border-bottom: 1px dotted #444; /* ie6 ignores this because of low specificity (this is not a problem) */
}
a:link {color: #222;}
a:visited {color: #444;}
a:hover {color: #222; background: url('/shared/lens/white25.png');}
a:active {color: #000; background: url('/shared/lens/white45.png');}
h3 a:link {color: #000;} /* reverts h3 links back to normal h3 color */
h3 a:visited {color: #000;}
h3 a:hover {color: #222;}
h3 a:active {color: #000;}
/* Removes border on calendar "show past dates", etc. -- only needed for wizard 1 */
#content>a {border: none !important; text-decoration: underline;}
#content>a:link {color: #222;}
#content>a:visited {color: #222;}
#content>a:hover {color: #000;}
#content>a:active {color: #000;}
/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG. */
* html #content * a {
border-bottom: 1px dotted #444; /* assigns border only most links, but not "show past dates" */
}
* html #content a:hover,
* html #content #guestbook .entry a:hover {
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/white25.png', sizingMethod='scale');
}
/* navigation links */
#navigation li a {border: none; font-weight: normal; text-decoration: none;}
#navigation li a:link {color: #222;}
#navigation li a:visited {color: #222;}
#navigation li a:hover {color: #222;}
#navigation li a:active {color: #000;}
/* highlight current page */
#navigation li a.highlight {
text-decoration: underline;
}
/* email signup form elements */
#emailsignup form {
padding-left: 40px;
color: white;
font: bold 17px Georgia, "Times New Roman", Times, 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-left: 5px;
padding: 1px 3px;
color: #333;
background: #fff;
}
/* --- Images -------------------------------------------------------------- */
/* GENERAL IMGs (e.g. on Photo page) - Adds translucent drop shadow to all images except home page image.
It doesn't work in IE6, but degrades nicely (the shadow simply doesn't appear). */
#content * img, #splashimage a img {
background: url('/shared/lens/shadow-generalimages.png') top left no-repeat;
padding: 0 1px 1px 0;
}
/* HOME PAGE IMAGE - This img presented some difficulty as there's no parent div that we can use to place the
translucent background. Solution? Scale the image to a fixed width and give it a fixed padding so that we
can be sure that it (and the bg) will fill the entire width of #content. Applied to all immediate child
images as a precaution. */
/* For most browsers (not IE6): adds drop shadow */
#content>img {
width: 350px;
height: auto; /* maintains image proportions, overriding px height hard coded in HTML */
padding: 0 55px 1px 55px; /* for shadow, normal bottom padding had to be eliminated */
background: url('/shared/lens/shadow-homeimage-light.png') top left repeat-y;
}
/* For most browsers (not IE6), adds top padding to any p that immediately follows */
#content>img+p {
padding-top: 1em;
}
/* Ultra-Safe Hack for IE6: IE6 doesn't understand the direct child selector ">". */
* html .home #content img {
width: 350px;
height: auto; /* maintains image proportions, overriding px height hard coded in HTML */
margin: 0 !important; /* overrides margins for inline floated images */
padding: 0 55px 1em 55px;
background: none;
}
/* --- ADDITIONAL PAGE-SPECIFIC STYLES ---------------------------------------------------------------------- */
/* SPLASH */
#splashimage {text-align: center; margin: 0 auto 100px auto;}
#splashimage a img {border: 0;}
/* HOME */
/* CONTACT */
.contact .name {font-weight: bold;}
.contact .entry ul {list-style: none;}
/* BIO */
/* CALENDAR */
/* The Wizard code is weird in that there is a #calendar div for current dates and a #calendar table for past
dates. This styling applies only to the div. */
#content div#calendar {
padding-right: 0;
background: none;
}
/* CALENDAR ENTRY CUTOUTS - Large translucent background with separator line cutout at top. */
#content div#calendar .entry {
padding: 1.66em 0 0.66em 0; /* top/bottom padding replaces top/bottom margins */
background: url('/shared/lens/cutout-calendarentry-light.png') left top repeat-y;
}
/* this removes the separator line from the first calendar entry (not for IE6) */
#content div#calendar .entry:first-child {
padding-top: 0;
background-position: left -5px;
}
/* this restores spacing at the top of #calendar on the home page (not for IE6) */
#content p+div#calendar {
padding-top: 20px;
background: url('/shared/lens/cutout-generalcontent-light.png') left top no-repeat; /* top spcing */
}
/* Ultra-Safe Hack for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
* html div#calendar .entry {
_background: none !important;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-calendarentry-light.png', sizingMethod='crop');
_zoom: 1; /* IE6 needs hasLayout for the filter to work */
}
div#calendar .entry .details {
margin: 1em 0 1em 30px;
padding-bottom: 0;
}
div#calendar .entry .details h4 {
font-size: 1em;
margin: 0;
}
/* RSS feed - note that several styles are hard-coded inline (in the HTML) */
#content a.calendar_rss_feed {
position: absolute;
right: 0;
bottom: 0;
margin: 0 !important; /* overrides inline style */
z-index: 999;
font: bold 12px "Trebuchet MS", arial, helvetica, sans-serif;
}
/* Ultra-Safe Hack for IE6: adjusts placement */
* html #content a.calendar_rss_feed {
_right: 46px;
_filter: none;
}
/* LINKS */
.links dl {
padding-bottom: 2em;
}
/* PRESS */
/* PRESS ENTRY CUTOUTS - this code places left and right quotes around the blockquote using three separate
transparent PNGs. The .entry block and the blockquote block are exactly the same size and overlap
completely, but the PNGs are designed not to interfere with each other. */
.press #content .entry {
position: relative; /* positioning reference for .caption */
margin-bottom: 60px; /* creates fixed-size gap for caption */
padding: 0;
background: url('/shared/lens/cutout-pressquotesleft-light.png') left top repeat-y;
}
/* Ultra-Safe Hack IE7: gives hasLayout. */
*:first-child+html .press #content .entry {*zoom: 1;} /* ie7 needs this or all hell breaks loose */
.press #content .entry blockquote {
margin: 0;
padding: 5px 40px 8px 40px;
background: url('/shared/lens/cutout-pressquotesright-light.png') right bottom repeat-y;
}
.press #content .entry .caption {
position: absolute;
left: 0;
bottom: -60px; /* shifts .caption into gap */
width: 380px;
height: 60px; /* sets .caption to same fixed-size as gap */
padding: 0 40px;
background: url('/shared/lens/cutout-generalcontent-light.png') repeat-y;
}
/* Ultra-Safe Hacks for IE6: IE can't use the above technique because .caption would disappear when
positioned outside of .entry. So we're resetting everything and just using the left quote. */
* html .press #content .entry {
_position: static;
_margin: 0;
_background: none !important;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-pressquotes-ie6-light.png', sizingMethod='crop');
_zoom: 1; /* IE6 needs hasLayout for the filter to work */
}
* html .press #content .entry blockquote {
_background: none !important;
}
* html .press #content .entry .caption {
_position: static;
_background: none !important;
}
/* This fixes layout for custom press pages */
.press #content #press {
margin: 0;
padding: 0;
background: none;
}
/* NEWS */
/* Since the h2 is contained within the .entry div, we must use a single graphic for both the .entry background
and the h2 square cutout. As of Wizard 2, all news entries are contained within a #news div (much like
#calendar or #guestbook). */
/* Reset parent #news div */
.news #content #news {
padding: 0;
background: none;
}
/* Ultra-Safe Hack for IE6: resets IE6-only alpha filter */
* html .news #content #news {
_filter: none;
}
.news #content .entry {
padding: 0 0 2em 0;
background: url('/shared/lens/cutout-newsentryh2-light.png') left top repeat-y;
zoom: 1; /* ie7 needs hasLayout to prevent a rendering bug */
}
/* Ultra-Safe Hacks for IE6: uses IE-proprietary filter to display alpha-transparent PNG */
* html .news #content .entry {
_background: none !important;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/lens/cutout-newsentryh2-light.png', sizingMethod='crop');
}
/* makes text selectable again (keeps filter from messing it up) */
* html .news #content h2 a, * html .news #content .notes {
_position: relative;
}
/* News RSS Feed - removes h2 styling for the new RSS feed thingy (no idea why this is coded as an