/* --------------------------- TABLE OF CONTENTS ---------------------------- */ /* Global styles for W3C CSS 2.1 compliant browsers * (c) 2005 filmfestivalworld.com * This stylesheet is a key component of the copyright look-and-feel of the web * site at filmfestivalworld.com; duplication is restricted by law * * $Id$ * * These styles should render as intended in CSS2.1-compliant browsers, such as * Mozilla Firefox, Opera 8, and Apple's Safari. Help for non-compliant browsers * such as Internet Explorer is contained in stylesheets strictly for them. * * Chapters are indicated in the code by number within the heading comment tag. * 1 - Universal basic styles * 1.1 - Standardize Defaults (cross-browser compatibility of unstyled tags) * 1.2 - Accessibility * 2 - Page Layout -- position and relation to others * 2.1 - site-wide general * 2.2 - homepage columns * 2.3 - blog page columns * 2.4 - text columns * 2.5 - mediaplex layout (homepage, blog pages) * 3 - Fonts and Colors * 3.1 - baseline * 3.2 - background colors for layout fields and common bitz * 3.3 - font sizes and families for common bitz * 3.3.1 - link pseudo classes * 4 - Forms * 5 - Common Structures -- repeated look-and-feel, functional arrangements * 5.1 - graphic titles * 5.2 - navigation * 5.2.1 - topnav * 5.2.2 - footer nav * 5.3 - mini-map * 5.4 - mini-calendar * 5.5 - site search * 5.6 - sidebar scrolling lists * 5.7 - titled boxes * 5.8 - mediaplex (homepage, blog pages) * 5.8.1 - static layout * 5.8.2 - "theater mode" * 5.8.3 - winners * 5.8.4 - pages: Worldpulse & Filmmakers in Focus * 5.9 - charts (statistic tables) * 5.10 - simple lists in titled boxes * 5.11 - feature list (reviews, winners, etc.) * 5.12 - about box (bordered content with orange button submerged on the bottom) * 5.13 - Media Gallery * 5.14 - Slideshow * 5.15 - scrollbars * 5.15.x - scrollbar settings (specifics for different instances) * 5.16 - generic collapsables * 5.17 - predictive text * 5.18 - editorial block layout * 5.19 - minor little beasties * 6 - Page-specific Layouts and Overrides * 6.1 - fablist structure (homepage) * 6.2 - previewlist structure (blog pages) * 6.3 - Calendar Layout * 6.4 - Map Layout * 6.5 - Record Layout * 6.5.2 - Comments * 6.6 - About Page */ /* (1) ====================== UNIVERSAL BASIC STYLES ======================== */ /* (1.1) --------------------- STANDARDIZE DEFAULTS ------------------------- */ /* whitespace reset [ref:http://leftjustified.net/journal/2004/10/19/global-ws-reset/] */ * { padding:0; margin:0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:1em 0; } input { padding: 0.08em 0; } option { margin-right:0.5em; } li, dd { margin-left:2em; } fieldset { padding:0.5em; } /* /whitespace */ /* font : set base size, then configure for em usage */ body { font-size: 100.01%; } /* fixes a Win IE font scaling issue with ems */ * { font-size:1em; } input, select, textarea { font-size:1.18em; } /* /font */ /* form tags: start and end tag add carriage returns */ form { display:inline; } /* /form tags */ img { border:none; } a:focus { outline:none; } /* sometimes treated as inline, sometimes not, but that's for me to decide isn't it? */ object { display:block; } /* ------------------------- /STANDARDIZE DEFAULTS -------------------------- */ /* (1.2) ----------------------- ACCESSIBILITY ------------------------------ */ /* send accessibility-only link off-left */ #skipToAccessibilityLink { display:none; /* really hide it, really! */ position:absolute; /* remove from flow */ overflow:hidden; /* prevent side-scrolling */ height:1px; width:1px; /* it's technically visible */ text-indent:-99%; /* pull text off to the left -- but not all the way, so text-readers see it */ } /* ---------------------------- /ACCESSIBILITY ------------------------------ */ /* ======================== /UNIVERSAL BASIC STYLES ========================= */ /* (2) ============================ PAGE LAYOUT ============================= */ /* (2.1) ----------------------- SITE-WIDE GENERAL -------------------------- */ #wrap { position:relative; /* anchor for positioned children */ width:760px; margin:0 auto; /* REQ: sub-IE6 centering hack */ z-index:1; /* ground a stacking context */ top: 90px; top: 0; } body.layoutNoTopAd #wrap { top: 0; } #contentGroup { float:right; width:575px; margin:0 0 1em 0; padding:103px 0 1em 0; z-index:1; } #titler { position:relative; float:left; } #topsignin { display:block; position:absolute; top:0; right:-555px; } #navSite { position:absolute; top:78px; left:174px; height:25px; width:606px; margin:0; z-index:20; } body.layoutNoNavSite #navSite, body.layoutNoNavSite #topsignin, body.layoutNoNavSite #navSiteMapLink { display:none; } body.layoutNoNavSite #altPageTitle { position:absolute; top:35px; left:200px; width:450px; text-align:center; } #navSearchBy { clear:left; float:left; width:174px; } #navMemberServices, #navWebFeeds, #navMiniCal, #navSearchSite, #navFABList, #navWinnerList, #navNameList { margin:18px 0; } #navNameList { margin-bottom:0; } /* move the bottom margin to the wrapper, so the bgcolor stops before navSubordinate */ #navSearchBy { margin-bottom:18px; } body.hasNavFloater #navSearchBy { padding-top:1.85em; margin-top:-16px; } #navSubordinate { clear:both; /* NOTE: due to all content in #wrap being floats, this margin can affect the top of the page, even though it's last */ margin:0 0 1em 0; width:760px; } #auxContent { position:relative; } #auxContent h3 { display:block; position:absolute; visibility:hidden; } /* (/2.1) --------------------- /SITE-WIDE GENERAL -------------------------- */ /* (2.2) ----------------------- HOMEPAGE COLUMNS --------------------------- */ body.secHome #fabList { width:285px; float:left; margin-bottom:5px; } body.secHome #auxContent { width:285px; float:right; margin-bottom:5px; } body.secHome #auxContent div.titledBox { margin: 0 0 5px 0; } /* (/2.2) --------------------- /HOMEPAGE COLUMNS --------------------------- */ /* (2.3) ---------------------- BLOG PAGE COLUMNS --------------------------- */ body.contentBlog #previewList { width:345px; float:left; margin-bottom:5px; } body.contentBlog #auxContent { width:225px; float:right; margin-bottom:5px; } body.contentBlog #auxContent div.titledBox { margin: 0 0 5px 0; } /* (/2.3) -------------------- /BLOG PAGE COLUMNS --------------------------- */ /* (2.4) ----------------------- TEXTPAGE COLUMNS --------------------------- */ body.contentText #mainContent{ width:300px; float:left; margin-bottom:5px; padding:0 10px; } body.contentText #auxContent { width:240px; float:right; margin-bottom:5px; padding:0 0 0 10px; } body.contentText #auxContent div.titledBox { margin: 0 0 5px 0; } body.layoutSingleColumn #mainContent { width:auto; } body.layoutNoNav #contentGroup { width:inherit; padding-top:0; clear:both; } body.layoutNoNav #contentGroup h1:first-child { margin-top:0; } /* (/2.4) --------------------- /TEXTPAGE COLUMNS --------------------------- */ /* (2.5) -------------------------- MEDIAPLEX ------------------------------- */ #mediaplex { margin:0 0 5px 0; padding:20px 30px; } #mediaplex div.mediaBlock { float:left; width:250px; margin:10px 0 10px 6px; } #mediaplex div.mediaBlock div.wrap { width:242px; height:242px; margin:0 auto; } /* (/2.5) ------------------------ /MEDIAPLEX ------------------------------- */ /* (2.6) ---------------------- MINIMIZED PAGE LAYOUT ----------------------- */ body.bvMinimize { padding:20px 0 20px 40px; } body.bvMinimize #wrap { float:left; width:100%; max-width:600px; padding:0 !important; } body.bvMinimizeWide #wrap { float:none; max-width:800px; } body.bvMinimize #contentGroup { float:left; /*width:auto; this causes FF to shrink all the tables' widths due to the float */ min-width:250px; padding:0; } body.bvMinimizeWide #contentGroup { float:none; } body.contentBlock #wrap { width:500px; } /* (/2.6) -------------------- /MINIMIZED PAGE LAYOUT ----------------------- */ /* (2.7) --------------------- MINI-BRAND PAGE LAYOUT ----------------------- */ body.layoutMiniBrand { padding:0 9px; } body.layoutMiniBrand #wrap { width:376px; border-left:174px solid #e8e8e8; } body.layoutMiniBrand #wrap #contentGroup, body.layoutMiniBrand #wrap #mainContent { float:none; width:376px; } body.layoutMiniBrand #wrap #mainContent h1 { position:absolute; top:0; left:-174px; width:150px; padding:0 12px; text-align:center; text-transform:uppercase; font:18px "Arial Narrow","Helvetica Narrow",Arial,sans-serif; font-weight:bold; line-height:1.5; color:#000; } body.layoutMiniBrand #mainContent h1 img { display:block; margin:0 -12px 30px -12px; } /* (/2.7) ------------------- /MINI-BRAND PAGE LAYOUT ----------------------- */ /* (2.8) --------------------- SITE LEFT-ALIGNED PAGE LAYOUT ----------------------- */ body.siteLeftAligned #wrap { margin: 0 5px; } * html body.siteLeftAligned { text-align: left; } /* (/2.8) --------------------- /SITE LEFT-ALIGNED PAGE LAYOUT ----------------------- */ /* (/2) ========================== /PAGE LAYOUT ============================= */ /* (3) ========================= FONTS AND COLORS =========================== */ /* (3.1) --------------------------- BASELINE ------------------------------- */ body { font:16px Tahoma, Arial, Verdana, sans-serif; color:#000; background:#fff url(../img/bg/page_ffw.gif) 50% 90px repeat-x; background:#fff url(../img/bg/page_ffw.gif) 50% 0 repeat-x; } body.layoutNoTopAd { background-position: 50% 0%; } /* (/3.1) ------------------------- /BASELINE ------------------------------- */ /* (3.2) ---------------------------- COLORS -------------------------------- */ body.secFilm { background-image:url(../img/bg/page_film.gif); } body.secFestival { background-image:url(../img/bg/page_festival.gif); } body.secMember { background-image:url(../img/bg/page_member.gif); } body.secResources { background-image:url(../img/bg/page_resources.gif); } body.secAni { background-image:url(../img/bg/page_ani.gif); } body.secAni #titler h2, body.secAni #previewList h3 { background-color:#c0cf00; color:#000; } li#fabAni h4 { background-color:#c0cf00; color:#1f1f1f; } body.secChi { background-image:url(../img/bg/page_chi.gif); } body.secChi #titler h2, body.secChi #previewList h3 { background-color:#fdd801; color:#000; } li#fabChi h4 { background-color:#fdd801; color:#1f1f1f; } body.secCom { background-image:url(../img/bg/page_com.gif); } body.secCom #titler h2, body.secCom #previewList h3 { background-color:#f586a0; color:#000; } li#fabCom h4 { background-color:#f586a0; color:#1f1f1f; } body.secDoc { background-image:url(../img/bg/page_doc.gif); } body.secDoc #titler h2, body.secDoc #previewList h3 { background-color:#8fa35b; color:#000; } li#fabDoc h4 { background-color:#8fa35b; color:#1f1f1f; } body.secDra { background-image:url(../img/bg/page_dra.gif); } body.secDra #titler h2, body.secDra #previewList h3 { background-color:#c4876a; color:#000; } li#fabDra h4 { background-color:#c4876a; color:#1f1f1f; } body.secExp { background-image:url(../img/bg/page_exp.gif); } body.secExp #titler h2, body.secExp #previewList h3 { background-color:#80b2b2; color:#000; } li#fabExp h4 { background-color:#80b2b2; color:#1f1f1f; } body.secGLBT { background-image:url(../img/bg/page_glbt.gif); } body.secGLBT #titler h2, body.secGLBT #previewList h3 { background-color:#b586c2; color:#000; } li#fabGLBT h4{ background-color:#b586c2; color:#1f1f1f; } body.secSci-Fi { background-image:url(../img/bg/page_sci.gif); } body.secSci-Fi #titler h2, body.secSci-Fi #previewList h3 { background-color:#6699cc; color:#000; } li#fabSci-Fi h4 { background-color:#6699cc; color:#1f1f1f; } body.secTV { background-image:url(../img/bg/page_tv.gif); } body.secTV #titler h2, body.secTV #previewList h3 { background-color:#c7c7c7; color:#000; } li#fabTV h4 { background-color:#c7c7c7; color:#1f1f1f; } body.bvMinimize { background:none; } body.contentText #mainContent { color:#3d3d3d; background-color:#fff; } body.contentText div.titledBox table caption, body.contentText div.titledBox table th, body.contentText div.titledBox table td { color:#3d3d3d; background-color:#e8e8e8; } body.layoutNoNavSite { background:none; } /* added "body" of "html" specificity to override individual declarations, which may be in shortcut form */ #navSearchBy { background-color:#e8e8e8; color:#000; } #navMiniMap, #navMemberServices, #navMiniCal, #navSearchSite, #navGenreList, #navFABList, #navWinnerList, #navNameList, #navSubordinate { background-color:#fff; color:#000; } body #navSearchBy h3 { background-color:#999; color:#fff; } body div.calDisplay h4 { background-color:#ebebeb; color:#000; } /* specific in-calendar colors defined in chap. 5.4 */ /* when the left nav is used to deliver information, instead of navigation */ body.hasNavFloater #navSearchBy { background-color:#fff; } /* alternating list colors; hover color changes are in separate chapters */ #navFABList li, #navWinnerList li, #navNameList li { background-color:#fff; color:#000; } #navFABList li.b, #navWinnerList li.b, #navNameList li.b { background-color:#ebebeb; } table.chart tr { background-color:#fff; color:#333; } table.chart tr.b { background-color:#dedede; } table.chart tr.tie th, table.chart tr.tie td.countCol { color:#ccc; } table.chart tr.b.tie th, table.chart tr.b.tie td.countCol { color:#bbb; } body #mediaplex, body #fabList, body div.titledBox { background-color:#e8e8e8; color:#000; } body #calTrg div.calWrap, body #FAQMain, body #recordMain, body #mediaGallery, body #previewList { background-color:#e8e8e8; color:#333; } body #fabList h3, body div.titledBox h4 { background-color:#c7c7c7; color:#000; } body #mapTrg h3, body #calTrg h3, body #previewList h3, html body.contentRecord #contentGroup h1 { background-color:#c7c7c7; color:#333; } #fabList li, div.contentFeature li { background-color:#fff; color:#000; } div.contentFeatureAbbrev li { background-color:#e8e8e8; color:#333; } /* matching background of whole cell */ #contentGroup div.aboutBox { background-color:#fff; color:#333; } /* (/3.2) --------------------------- /COLORS ------------------------------- */ /* (3.3) ----------------------------- FONTS -------------------------------- */ /* (3.3.1) --------------------------- LINKS -------------------------------- */ a, a:link, a:visited, a:hover, a:active { color:#333; text-decoration:none; } a:hover { color:#f60; } #pgTermsOfUse #contentGroup a, #pgTermsOfUse #contentGroup a:visited, #pgTermsOfUse #contentGroup a:active { color:#f60; } #pgTermsOfUse #contentGroup a:hover { color:#f60; text-decoration:underline; } #legal a:hover, #fabList h4 a:hover, #previewList h5 a:hover, #fabList h5 a:hover, div.calDisplay caption a:hover, #navScrollLists a:hover { color:#f60; } #navScrollLists a:hover { text-decoration:underline; } #navScrollLists a:visited, #navScrollLists a:active { color:#666; } #contentGroup .headText a, body.contentForm fieldset a, body.contentForm div.asField a, a.slideshowActiveTrigger, table.featuredChart .featuredHilite a, #navSiteAlt a, #feedMainContent a { color:#f60; } a.altHighlight { display:block; margin:1em 0; text-align:center; } .featuredLinks a { color:#f60; font-weight:bold; } .featuredLinks a:hover { text-decoration:underline; } a.download { padding-top:5px; padding-right:16px; background:transparent url(../img/icons/doctype_other.png) right bottom no-repeat; } /* for CSS 3 : REQ Win IE fix */ a.download[href$=".pdf"] { background-image:url(../img/icons/doctype_pdf.png); } a.download[href$=".doc"] { background-image:url(../img/icons/doctype_doc.png); } a.addABlockTrigger { display:block; padding-left:11px; font-size:9px; font-weight:bold; background:transparent url(../img/icons/pip_plus.gif) 0% 50% no-repeat; } /* (/3.3.1) ------------------------- /LINKS -------------------------------- */ .filmmaker { font-size:1em; } .filmTitle { font-size:1em; } i.foreign { font-size:0.9375em; } p.intro { font-style:italic; } #navSite { font-size:12px; } #legal { font-size:10px; } #legal a { color:#666; } div.calDisplay table, div.calDisplay table td { font-size:9px; text-align:center; color:#333; } div.calDisplay caption { font-size:9px; font-weight:bold; text-transform:uppercase; white-space:nowrap; } div.calDisplay caption a { color:#333; } div.calDisplay thead th { font-weight:normal; text-transform:uppercase; } /* "#navSearchSite input" font-size acts to size box; defined in chap 5.5 */ div.compactLink a { color:#333; font-size:10px; } #countryMap ul, #festivalList ul, #navScrollLists a { color:#000; font-size:9px; } div.titledBox h4 { /* replaced by graphics */ font:11px "Helvetica Condensed",Helvetica,Tahoma,Arial; font-weight:bold; text-transform:uppercase; text-align:center; } /* text alignment in tables handled as a layout issue in 5.9 */ table.chart, table.featuredChart { font:9px Tahoma,Arial; } #pgHome table.chart { font-size:9.5px; } table.chart caption { font-size:11px; text-transform:uppercase; } table.chart thead th, table.chart tbody th { font-weight:normal; } table.featuredChart caption { font-size:12px; font-weight:bold; } div.mediaBlock { font-size:10px; line-height:0.9375; } div.rsrcWrap dl, div.rsrcWrap ul { font-size:11px; } div.rsrcWrap dl dt { font-weight:bold; } div.rankedList li { font-size:11px; } div.contentFeature li, div.contentFeatureAbbrev li { font-size:11px; } div.contentFeature h5, div.contentFeatureAbbrev h5 { font-weight:bold; } #fabList, #previewList { font-size:10px; } #fabList h3, #previewList h3 { font:12px "Helvetica Condensed",Helvetica,Tahoma,Arial; font-weight:bold; text-transform:uppercase; text-align:center; } #fabList h4 { font:10px Verdana,Arial; font-weight:normal; text-transform:uppercase; } #fabList h4 a { color:#000; } #previewList h5 a, #fabList h5 a { font-size:13px; font-weight:normal; font-style:italic; background-color:inherit; color:#000; } #previewList h5 a { color:#333; } #fabList ol li.filmBy, #previewList ol li.filmBy { font-size:11px; } #fabList ol li.festivalName, #previewList ol li.festivalName { font-size:11px; } #fabList ol li.festivalDate, #previewList ol li.festivalDate { font-size:11px; } #fabList ol li.runTime, #previewList ol li.runTime { } .aboutBox { font-size:10px; } #fabAbout { color:#333; font-size:1.125em; } #fabAbout h4 { font-weight:bold; font-size:13px; line-height:13px; } #fabAbout h4 em { font-size:10px; } #calTrg { font-size:0.75em; /* color:#333; in chap 2.2 */ } #calTrg h3, #calTrg h4 { font-weight:bold; text-transform:uppercase; } #calTrg h3 { text-align:center; } #calTrg ol li { font-weight:bold; } #calTrg ol li ul li { font-weight:normal; } #chooseACountry p { font-size:1em; } #mapTrg h3 { font:14px Verdana,Arial; font-weight:bold; font-style:italic; /* "color:#333;" defined in 2.2 */ } /* "#festivalList ul ul" defined in parallel with nameList */ body.contentEditorial #contentGroup h1, body.contentRecord #contentGroup h1 { font:14px Verdana,Arial; font-style:italic; font-weight:bold; color:#333; /* color overridden in chap 2.2 */ } body.contentEditorial #contentGroup h1 cite, body.contentRecord #contentGroup h1 cite { font-size:0.875em; font-style:normal; font-weight:normal; } #FAQMain, #recordMain, #recordPageFoot { font-size:12px; line-height:1.375; } #recordPageFoot th { text-align:left; font-weight:normal; white-space:nowrap; } body.contentEditorial #contentGroup { font-size:11px; line-height:16px; } body.contentEditorial div#commentsColumn { font-size:16px; line-height:normal; } body.contentText #contentGroup { margin-top:18px; font-size:11px; line-height:16px; } body.contentText #mainContent h1 { font-size:16px; margin:0.5em 0 1em 0; } body.contentText #mainContent h2 { font-size:13px; margin:1.5em 0 0.125em 0; } body.contentText #mainContent p { margin:0 0 1.125em 0; } body.contentText #mainContent ul, body.contentText #mainContent ol { margin:0 0 1.125em 1em; } body.contentText #mainContent.legalText, body.contentText #mainContent .legalText { font-size:9px; } body.contentText #mainContent.legalTextTight, body.contentText #mainContent .legalTextTight { line-height:1.125; } body.contentForm fieldset label { font-size:10px; font-weight:bold; } #pgFilmentryinfoFestivalSurvey fieldset label { font-weight:normal; } body.contentForm label.inputTxtMinor { font-size:9px; font-weight:normal; } body.contentForm .inputSmallPrint { font-size:10px; } body.contentForm .inputNoDisabledIndication { background-color:#fff; color:#000; } #contentGroup .note { font-size:0.95em; font-style:italic; color:#666; white-space:normal; } #contentGroup .headText { text-align:center; } #contentGroup .instructions { font-size:0.95em; line-height:1; color:#666; white-space:normal; } body.contentForm #contentGroup p.instructions { margin:0.5em 0; } #contentGroup .instructions code { font-size:1.085em; letter-spacing:-1px; } /* (/3.3) --------------------------- /FONTS -------------------------------- */ /* (/3) ======================= /FONTS AND COLORS =========================== */ /* (4) ================================ FORMS =============================== */ /* (4.1) --------------------------- SIGN UP/IN ----------------------------- */ body.contentForm #contentGroup #formSignUp fieldset table thead th.col-name { width:100px; } body.contentForm #contentGroup #formSignUp fieldset table thead th.col-input { width: 25px; } body.contentForm #contentGroup #formSignUp fieldset table thead th.col-value { width:275px; } body.contentForm #contentGroup #formSignUp fieldset table thead th.col-buffer { width: 25px; } body.contentForm #contentGroup #formSignUp fieldset label.note { font-size:0.9em; } body.contentForm #contentGroup #formSignUp #signupVerification caption { margin-bottom:-2em; } body.contentForm #contentGroup #formSignUp fieldset table tbody th { padding-top:0.25em; } body.contentForm #contentGroup #formSignUp fieldset table tbody th, body.contentForm #contentGroup #formSignUp fieldset table tbody td { vertical-align:top; } body.contentForm #formSignIn { display:block; margin:2em 100px; } body.bvMinimize #formSignIn { margin:10px 100px; width:345px; } body.contentForm div.formTools #formSignIn { margin:2em 0; } body.contentForm #contentGroup #formSignIn table { margin: 0 auto; } body.contentForm #contentGroup #formSignIn table td { padding-left:0; } body.contentForm #contentGroup #formSignIn label { font-size:1em; font-weight:bold; } body.contentForm #contentGroup #formSignIn tbody th { text-align:right; } body.contentForm #contentGroup #formSignIn #signinRememberRow th, body.contentForm #contentGroup #formSignIn #signinRememberRow td { padding:0 0 10px 0; } body.contentForm #contentGroup #formSignIn #signinRememberRow label { font-size:0.9em; font-weight:normal; } body.contentForm #contentGroup #formSignIn #signinRememberRow label input { margin-right:0.5em; } body.contentForm #contentGroup #formSignIn #signinSignUp { text-align:right; white-space: nowrap; } body.contentForm #contentGroup #formSignIn #signinForgot { padding-top:0.75em; font-size:0.9em; text-align:right; } /* (4.1.1) -------------------------- SNAPSHOT ------------------------------ */ body.contentForm #contentGroup #formSignUp #signupYou th.col-2 { width:130px; } body.contentForm #contentGroup #formSignUp #signupYou th.col-4 { width:220px; } body.contentForm #contentGroup #formSignUp #signupYou h3, body.contentForm #contentGroup #formSignUp #signupYou h4 { font-size:1.25em; margin:0; padding:0; } body.contentForm #contentGroup #formSignUp #signupYou h4 a { display:inline; padding:0 0 0 3em; font-size:0.675em; font-weight:normal; } body.contentForm #contentGroup #formSignUp #signupYou textarea { height:17em; } body.contentForm #contentGroup #formSignUp #signupYou table.bvCollapsable { width:320px; } body.contentForm #contentGroup #formSignUp #signupYou table.bvCollapsable td { width:50%; } body.contentForm #contentGroup #formSignUp #signupYou table.bvCollapsable td input, body.contentForm #contentGroup #formSignUp #signupYou table.bvCollapsable td select { width:145px; } body.contentForm #contentGroup #formSignUp #signupProfile table table { margin-left:-10px; } body.contentForm #contentGroup #formSignUp #signupProfile table table td { padding-left:0; } body.contentForm #contentGroup #formSignUp #signupProfile table table td input { margin:0.25em 2px 0 10px; } body.contentForm #contentGroup #formSignUp #signupProfile #fbOneTwoThreeFour { overflow:hidden; /* contain floats */ } body.contentForm #contentGroup #formSignUp #signupProfile #fbOneTwoThreeFour fieldset { float:left; clear:none; width:30%; margin:1em 5%; padding:0; height:4em; } body.contentForm #contentGroup #formSignUp #signupProfile fieldset.bvFormOtherHide input.bvFormOtherIn, body.contentForm #contentGroup #formSignUp #signupProfile fieldset.bvFormOtherShow select.bvFormOtherOut { display:none; } body.contentForm #contentGroup #formSignUp #signupProfile fieldset.bvFormOtherHide select.bvFormOtherOut, body.contentForm #contentGroup #formSignUp #signupProfile fieldset.bvFormOtherShow input.bvFormOtherIn { display:block; width:100%; height:1.5em; } body.contentForm #contentGroup #formSignUp #signupProfile fieldset.bvFormOtherShow input.bvFormOtherIn { height:1.25em; } html.domCapable body.contentForm #contentGroup #formSignUp #signupProfile div fieldset { display:none; } html.domCapable body.contentForm #contentGroup #formSignUp #signupProfile div.bvFormActivated fieldset { display:block; } /* (/4.1.1) ------------------------ /SNAPSHOT ------------------------------ */ /* (/4.1) ------------------------- /SIGN UP/IN ----------------------------- */ /* (4.2) ----------------------------- GENERAL ------------------------------ */ body.contentForm div.intro { margin:20px 50px; } input, select { font-size:0.95em; } input.inputTypeClick { margin-right:0.5em; } body.contentForm input.inputMajor { display:block; width:99%; } body.contentForm input.inputMinor { display:inline; width:45%; } body.contentForm textarea.inputMajor { display:block; width:99%; height:7em; } body.contentForm textarea.inputMinor { display:block; width:99%; height:2.5em; } body.contentForm input.inputBtn { display:block; padding:2px 1em; margin:1em auto; } body.contentForm input.inputGoNext { margin-left: 75%; } body.contentForm #contentGroup blockquote { margin:0 40px 0 50px; } body.contentForm #contentGroup blockquote.verses { text-align:center; } body.contentForm #contentGroup blockquote p { margin:0.5em 0; } body.contentForm #contentGroup fieldset, body.contentForm #contentGroup div.asField { clear:left; border:none; padding:0; margin:0 0 1em 0; background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; overflow:visible; } body.contentForm #contentGroup fieldset fieldset, body.contentForm #contentGroup div.asField fieldset { background:none; } body.contentForm #contentGroup form h2, body.contentForm #contentGroup div.formWrapper h2{ float:left; font-size:13px; font-style:italic; height:1.625em; margin:0.25em 0 0 0; background:#c7c7c7 url(../img/corners/fff_9px_top.png) top left no-repeat; } body.contentForm #contentGroup form h2 span, body.contentForm #contentGroup div.formWrapper h2 span{ display:block; padding:2px 20px; background:transparent url(../img/corners/fff_9px_top.png) top right no-repeat; } body.contentForm #contentGroup fieldset ul, body.contentForm #contentGroup div.asField ul { list-style:none; margin:0; padding:5px 50px; background:transparent url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; } body.contentForm #contentGroup fieldset ul li, body.contentForm #contentGroup div.asField ul li { margin:4px 0; padding:3px 0; } body.contentForm #contentGroup fieldset ul.compact li, body.contentForm #contentGroup div.asField ul.compact li { margin:4px 0; padding:0; } input.bvDim, textarea.bvDim { color:#999; } body.contentForm #contentGroup form fieldset h3, body.contentForm #contentGroup form fieldset table caption { text-align:left; font-size:1.125em; font-weight:bold; padding:0.5em 0 0.25em 0; } body.contentForm #contentGroup form fieldset table caption span { font-weight:normal; } body.contentForm #contentGroup form fieldset table thead th { height:1px; overflow:hidden; visibility:hidden; } body.contentForm #contentGroup form fieldset fieldset table thead th { height:auto; overflow:visible; visibility:visible; text-transform:uppercase; font-size:0.9em; color:#666; } body.contentForm #contentGroup form fieldset table tbody td { padding:0.25em 0; } body.contentForm #contentGroup form fieldset fieldset ol table { margin-bottom:-3px; } body.contentForm #contentGroup form fieldset fieldset ol table td { padding:0 1em 0 0; } body.contentForm #contentGroup form fieldset table tfoot td { padding:1em 0; } body.contentForm #contentGroup form fieldset table tbody th { white-space:nowrap; text-align:right; font-weight:normal; } body.contentForm #contentGroup form fieldset table tbody td { padding-left:1em; } body.contentForm #contentGroup form fieldset label { font-size:1.125em; font-weight:normal; white-space:nowrap; } body.contentForm #contentGroup table tbody tr.rowBreak th, body.contentForm #contentGroup table tbody tr.rowBreak td { padding:1em 0 0 0; } body.contentForm #contentGroup form fieldset table tbody tr.rowTall th { padding-top:0.25em; } body.contentForm #contentGroup form fieldset table tbody tr.rowTall th, body.contentForm #contentGroup form fieldset table tbody tr.rowTall td { vertical-align:top; } /* (/4.2) --------------------------- /GENERAL ------------------------------ */ /* (4.3) ---------------------------- MESSAGES ------------------------------ */ div.formMessage, #comments div.formMessage { background-color:#e8e8e8; border:1px solid #ccc; margin:0.75em 0; padding:0; text-transform:none; } div.formPreview { background-color:#fff; } div.formMessage h6 { background-color:#d6d6d6; border:1px solid #ccc; border-width:1px 0; margin:-1px 0; padding:3px 10px; } div.formMessage ul, #comments div.formMessage ul, body.contentForm #contentGroup div.formMessage ul { list-style:disc; margin:0.5em 1em; padding:0; background:none; } div.formMessage ul li, body.contentForm #contentGroup div.formMessage ul li { list-style:disc; margin: 0.125em 0.5em 0.125em 1em; } div.formMessage p, body.contentForm #contentGroup div.formMessage p { margin:0.5em 1em; } div.formMessage h6 img, body.contentForm #contentGroup div.formMessage h6 img { margin:0 0.5em -2px 0; } div.formPreview div { padding:3px 10px; } div.formPreview div.postMeta { padding-top:10px; } div.formPreview div.postBody { padding-bottom:10px; } #comments div.formPreview h6 input { font-size:0.75em; text-transform:uppercase; margin-right:0.5em; } /* (/4.3) -------------------------- /MESSAGES ------------------------------ */ /* (4.4) -------------------------- PRIVACY MSG ----------------------------- */ body.contentForm #contentGroup #formSignUp #privacyStatement { float:right; width:230px; background:#fff url(../img/corners/e8e8e8_fff_9px_top.gif) left top no-repeat; } body.contentForm #contentGroup #formSignUp #privacyStatement ul { margin:0; padding:0; background:transparent url(../img/corners/e8e8e8_fff_9px_top.gif) right top no-repeat; } body.contentForm #contentGroup #formSignUp #privacyStatement ul li { margin:0; padding:11px 20px 0 30px; line-height:1.2; background:transparent url(../img/icons/bullet_square_f60.gif) 17px 18px no-repeat; } body.contentForm #contentGroup #formSignUp #privacyStatement ul #privacyTitle { padding-top:15px; background:transparent url(../img/icons/padlock.gif) 17px 18px no-repeat; font-weight:bold; } body.contentForm #contentGroup #formSignUp #privacyStatement ul #privacyLongDesc { padding:0; background:transparent url(../img/corners/e8e8e8_fff_9px_bottom.gif) left bottom no-repeat; } body.contentForm #contentGroup #formSignUp #privacyStatement ul #privacyLongDesc a { display:block; margin:0; padding:15px 20px 20px 30px; font-weight:bold; color:#f60; background:transparent url(../img/corners/e8e8e8_fff_9px_bottom.gif) right bottom no-repeat; } body.contentForm #contentGroup #formSignUp #privacyStatement ul #privacyLongDesc a:hover { text-decoration:underline; } /* (/4.4) ------------------------- /PRIVACY MSG ---------------------------- */ /* (4.5) ------------------------ FILM SUBMISSION --------------------------- */ body.contentFormFilmSub #contentGroup #filmsubMsg { font-size:1.125em; font-weight:bold; } body.contentFormFilmSub #contentGroup form fieldset fieldset { margin:2em 0; } body.contentFormFilmSub #contentGroup form fieldset fieldset p { font-size:1.2em; margin-bottom:0.125em; } body.contentFormFilmSub #contentGroup form fieldset fieldset p strong { font-size:0.9em; } body.contentFormFilmSub #contentGroup form fieldset td.note { padding-top:0; } body.contentFormFilmSub #contentGroup form fieldset fieldset p span.note { display:block; font-size:0.8em; } body.contentFormFilmSub #contentGroup form fieldset fieldset tbody th { padding-top:0.3em; } body.contentFormFilmSub #contentGroup form fieldset fieldset tbody th, body.contentFormFilmSub #contentGroup form fieldset fieldset tbody td { vertical-align:top; } body.contentFormFilmSub #contentGroup select.countryList { max-width:150px; } body.contentFormFilmSub #contentGroup #filmsubFestUpcomingFFW label { font-size:0.9em; font-style:italic; } body.contentFormFilmSub #contentGroup #filmsubSubmit { text-align:right; padding:20px 50px 10px 50px; font-size:1.25em; } body.contentFormFilmSub #contentGroup #filmsubSubmit input.inputTypeSubmit { padding:0 0.125em; font-weight:bold; } body.contentFormFilmSub #contentGroup #filmsubSubmit #filmsubSubmitBack { float:left; } body.contentFormFilmSub #contentGroup #filmsubBasics th, body.contentFormFilmSub #contentGroup #filmsubLinkies th { text-align:left; } body.contentFormFilmSub #contentGroup #filmsubBasics sup, body.contentFormFilmSub #contentGroup #filmsubLinkies sup { margin-left:-0.45em; } body.contentFormFilmSub #contentGroup #filmsubVideo th { vertical-align:top; padding-top:0.25em; } body.contentFormFilmSub #contentGroup #filmsubVideo td { vertical-align:top; } body.contentFormFilmSub #contentGroup table caption span { display:block; } body.contentFormFilmSub #contentGroup input.inputTypeFile { margin:0 0 0.5em 0; } body.contentFormFilmSub #contentGroup p.uploadFiles { text-align:center; margin:1.5em 0 2.5em 0; font-size:1.125em; font-weight:bold; font-style:italic; } /* (/4.5) ---------------------- /FILM SUBMISSION --------------------------- */ /* (4.6) ------------------------- FORM-BASED NAV --------------------------- */ form.navForm, form.navForm fieldset, form.navForm dl, form.navForm dt, form.navForm dd { border:none; margin:0; padding:0; overflow:hidden; font-size:12px; } #navSearchBy form.navForm select { width:170px; } #navSite li select option, form.navForm option { border-bottom:1px solid #999; background:#e8e8e8; } #navSite li select option.destination, form.navForm option.destination { padding-left:1.5em; border:none; background:#fff; } /* (/4.6) ----------------------- /FORM-BASED NAV --------------------------- */ /* (4.7) ------------------------ MINI-PAGE FORMS --------------------------- */ body.bvMinimize form.miniOnly input.inputTypeText, body.bvMinimize form.miniOnly input.inputTypeFile, body.bvMinimize form.miniOnly textarea { width:99%; } body.bvMinimize form.miniOnly textarea.inputTypeMajor { height:8em; } body.bvMinimize form.miniOnly label { padding:0 1em; } body.bvMinimize form.miniOnly input.inputTypeCheckbox { margin-right:0.75em; } body.bvMinimize form.miniOnly hr { margin:1.75em 0; } body.bvMinimize form.miniOnly input.inputMinor { display:inline; width:45%; } body.bvMinimize form.miniOnly h3 small { display:block; font-weight:normal; font-size:0.9em; } body.bvMinimize form.miniOnly h4 { margin:0.75em 0 0 0; text-transform:uppercase; } body.bvMinimize #contentGroup form.miniOnly fieldset fieldset, body.bvMinimize #contentGroup form.miniOnly div.asField fieldset { border:1px solid #000; padding:8px; } body.bvMinimize #contentGroup form.miniOnly fieldset fieldset legend, body.bvMinimize #contentGroup form.miniOnly div.asField fieldset legend { padding:0 0.5em; } body.bvMinimize #contentGroup form.miniOnly th, body.bvMinimize #contentGroup form.miniOnly td { vertical-align:top; } body.bvMinimize #contentGroup form.miniOnly th { padding-top:0.13em; } body.bvMinimize #contentGroup form.miniOnly input.inputTiny { font-size: 9px; padding: 0; border: 1px solid #444; margin: 2px 1em 0 2em;; } form.miniOnly label.bareSubmit { display: block; margin: 15px 0; text-align: center; } /* (4.7.1) --------------------- MINI-BRAND FORMS --------------------------- */ /* these are a different style altogether */ body.layoutMiniBrand #mainContent form ul, body.layoutMiniBrand #mainContent form fieldset { background:none; } body.layoutMiniBrand #mainContent form ul { padding:5px 20px; } body.layoutMiniBrand #mainContent form h3 { padding:0; margin:0.5em 0 0 0; } body.layoutMiniBrand #mainContent form h3 a, body.layoutMiniBrand #mainContent form h3 span { display:block; } body.layoutMiniBrand #mainContent form label { display:block; padding:0; margin:0.5em 0 0.125em 0; } body.layoutMiniBrand #mainContent form label span { padding-left:1.5em; } body.layoutMiniBrand #mainContent form li.inputGoNext { text-align:right; } body.layoutMiniBrand #mainContent form #emailReflectLabel { float:left; text-align:left; margin:0.25em 0 0 0; line-height:12px; } body.layoutMiniBrand #mainContent form #emailReflectLabel input { margin-right:0.75em; } /* (/4.7.1) ------------------- /MINI-BRAND FORMS --------------------------- */ /* (/4.7) ---------------------- /MINI-PAGE FORMS --------------------------- */ /* (/4) ============================== /FORMS =============================== */ /* (5) ========================= COMMON STRUCTURES ========================== */ /* (5.1) ------------------------- GRAPHIC TITLES --------------------------- */ #titler img{ display:block; border:0; } /* gets rid of the "inline descender" bottom padding */ #titler h1 { margin:0; width:174px; background-color:#000; } #titler h2 { margin:0; width:174px; background-color:#999; } /* #titler h2 { margin:0; width:174px; background-color:#999; border-bottom:1px solid #999; } body.secAni #titler h2, body.secChi #titler h2, body.secCom #titler h2, body.secDoc #titler h2, body.secDra #titler h2, body.secExp #titler h2, body.secGLBT #titler h2, body.secTV #titler h2, body.secSci-Fi #titler h2 { border-color:#4d4d4d; } */ /* (/5.1) ----------------------- /GRAPHIC TITLES --------------------------- */ /* (5.2) -------------------------- NAVIGATION ------------------------------ */ /* (5.2.1) -------------------------- TOPNAV -------------------------------- */ #navSiteMapLink { position:absolute; top:7px; right:-596px; font-size:11px; font-weight:bold; color:#fff; z-index: 1; } #navSiteMapLink:hover { color:#f90; } #navSite { list-style:none; } #navSite img { display:block; } #navSite li { float:left; display:block; margin:1px 3px; font-weight:bold; font-size:11px; } #navSite li.aux { position:relative; float:right; } #navSite li.aux { white-space:nowrap; } #navSite li.aux a { display:block; padding:4px 2px; } #navSite a.iconLink { display:block; height:16px; width:38px; padding:4px 0; text-indent:-1000em; overflow:hidden; } #navSite #homeLink { margin-right:10px; background:transparent url(../img/navbar/home_off.png) 50% 50% no-repeat; } #navSite #contactLink { margin-left:-3px; background:transparent url(../img/navbar/email_off.png) 50% 50% no-repeat; } /* body.secHome #topsignin a, body.contentBlog #topsignin a, body.contentBlog #topsignin legend, body.secFilm #titler a, body.secFestival #titler a, body.secHome #topsignin label, body.contentBlog #topsignin label, body.secFilm #titler label, body.secFestival #titler label, body.secHome #topsignin legend, body.contentBlog #topsignin legend, body.secFilm #titler legend, body.secFestival #titler legend { color:#fff; } body.secMember #topsignin, body.secMember #topsignin a, body.secMember #topsignin label, body.secMember #titler a, body.secResources #topsignin a, body.secResources #topsignin label, body.secResources #titler a { color:#000; } body.secHome #topsignin a:hover, body.contentBlog #topsignin a:hover, body.secMember #topsignin a:hover, body.secResources #topsignin a:hover, body.secFilm #titler a:hover, body.secFestival #titler a:hover, body.secMember #titler a:hover, body.secResources #titler a:hover { color:#f93; } */ body.secFestival #navSite a, body.secFilm #navSite a, #topsignin, #topsignin a, #topsignin legend, #titler a { color:#fff; } #navSite a, body.secMember #topsignin, body.secMember #topsignin a, body.secMember #topsignin legend, body.secMember #titler a, body.secResources #topsignin, body.secResources #topsignin a, body.secResources #topsignin legend, body.secResources #titler a { color:#000; } #wrap #topsignin a:hover, #wrap #titler a:hover, #wrap #navSite a:hover { color:#f93; } body.secFilm #titler #homeLink, body.secFestival #titler #homeLink { background:none; text-indent:0; text-align:center; } body.secFilm #titler #contactLink, body.secFestival #titler #contactLink { background-image:url(../img/navbar/email_off_inv.png); } #navSite li form, #navSite li fieldset, #navSite li dl, #navSite li dt { margin:0; padding:0; border:none; font-size:12px; } #navSite li fieldset { padding:2px 0 0 0; } #navSite select { width:122px; height:17px; } #navSite option { padding:1px 0.25em; display:block; } #navSite #navSiteMaps select { width:100px; } #navSite #navSiteGenres select { width:144px; } #navSite dd { background:transparent url(../img/bg/fff_85pct.png); padding:2px 4px; margin:1px; } html.domCapable #navSite dd { display:none; } form#topsignin, #topsignin fieldset { margin:0; padding:0; border:none; width:125px; font-size:10px; } form#topsignin { padding-top:7px; } #topsignin legend, #topsignin a { font-weight:bold; } #topsignin input { margin:1px 0; } #topsignin input.inputTypeText { width:121px; border:1px solid #ccc; font-size:1.1em; padding:2px 4px; } #topsignin input.inputTypeCheckbox { width:11px; height:11px; } #topsigninSignUp { white-space:nowrap; position:absolute; bottom:0; left:139px; font-size:11px; height:13px; } p#topsignin { top:0.5em; right:-596px; margin:0; text-align:right; font-size:11px; color:#fff; font-weight:bold; } p#topsignin a { display:block; position:absolute; top:57px; right:0; font-weight:bold; font-size:0.9em; } #navSearchBy h3, #boxesSearchFilms h4 { background:#999 url(../img/text/buttons/search_by.gif) left no-repeat; /* color overridden in chap. 2.2 */ width:156px; height:5px; margin:0; padding:3px 7px; /* REQ: sub-IE6 box model correction */ border:1px solid #fff; } #navSearchBy h3.navBrowseBy { background-image: url(../img/text/buttons/browse_by.gif); } #navSearchBy h3 img, #boxesSearchFilms h4 img { float:right; } #navSiteAlt { list-style:none; margin:0.5em 0 1.5em 0; font-size:14px; font-weight:bold; } #navSiteAlt li { margin:0.25em 0; } /* (/5.2.1) ------------------------ /TOPNAV -------------------------------- */ /* (5.2.2) ------------------------ FOOTER NAV ------------------------------ */ #navSubordinate { border:1px solid #ebebeb; border-width:1px 0; text-align:center; } #navSubordinate img { display:block; margin:0 auto; } #navSubordinate table { width:75%; margin:0 auto; } #navSubordinate td { vertical-align:middle; text-align:center; padding:0 0.5em; } #legal { clear:both; margin:0.75em auto; text-align:center; } /* (/5.2.2) ---------------------- /FOOTER NAV ------------------------------ */ /* (5.2.3) --------------------- FLOATING LEFTNAV --------------------------- */ body.navFloating #navFloater { position:fixed; left:auto; top:10px; width:173px; margin:223px 0 0 0; } html.domCapable #navFloater form * { overflow:visible; }/* safari oddness */ /* (/5.2.3) ------------------- /FLOATING LEFTNAV --------------------------- */ /* (/5.2) ------------------------ /NAVIGATION ------------------------------ */ /* (5.3) --------------------------- MINI-MAP ------------------------------- */ /* relies on #navSearchBy styled in chapter 5.2 */ #navMiniMap { position:relative; border:1px solid #999; border-top:none; z-index:1; } #navMiniMap img { display:block; } #navMiniMap #navMiniMapTrg { border-bottom:1px solid #999; } #navMiniMap ul { list-style:none; display:block; margin:0; } #navMiniMap li { display:block; margin:0 -1px 0 0; width:173px; height:14px; } #navMiniMap li img { position:absolute; top:0; left:0; z-index:1; visibility:hidden; } #navMiniMap li a img { position:static; display:block; visibility:visible; float:right; } #navMiniMap li a { display:block; height:5px; width:158px; border-top:1px solid #d9d9d9; border-right:1px solid #999999; padding:4px 7px; } /* have the map react when the parent or the body tag have the section class assigned */ /* you need the #navMiniMapList in there to be more specific than the above stuff that is overridden */ #navMiniMap li:hover img, .secAfrica #navMiniMapList li.mapAfrica img, .secAmericas #navMiniMapList li.mapAmericas img, .secAsia #navMiniMapList li.mapAsia img, .secEurope #navMiniMapList li.mapEurope img, .secMiddle_East #navMiniMapList li.mapMiddle_East img, .secOceania #navMiniMapList li.mapOceania img { visibility:visible; z-index:10; } #navMiniMap li a:hover, .secAfrica #navMiniMapList li.mapAfrica a, .secAmericas #navMiniMapList li.mapAmericas a, .secAsia #navMiniMapList li.mapAsia a, .secEurope #navMiniMapList li.mapEurope a, .secMiddle_East #navMiniMapList li.mapMiddle_East a, .secOceania #navMiniMapList li.mapOceania a { border-right:2px solid #f60; padding-right:6px; background-color:#ebebeb; } /* (/5.3) ------------------------- /MINI-MAP ------------------------------- */ /* (5.3 and 1/2) ----------------- NAV ADD-ONS ------------------------------ */ #navMemberServices { border:1px solid #999; font-size:10px; } #navMemberServices ul { margin:0; padding:0; list-style:none; } #navMemberServices li { margin:0; padding:0; border-top:1px solid #ddd; } #navMemberServices li:first-child { border-color:#999; } #navMemberServices li a { display:block; padding:2px 5px; } #navMemberServices li a:hover { background-color:#e8e8e8; padding-left:3px; border-left:2px solid #f60; color:#000; } #navWebFeeds { border:none; padding:0 7px; font-size:9px; text-transform:lowercase; } #navWebFeeds img { margin:0 -7px; } /* (/5.3 and 1/2) --------------- /NAV ADD-ONS ------------------------------ */ /* (5.4) ------------------------ MINI-CALENDAR ----------------------------- */ /* relies on #navSearchBy styled in chapter 5.2 */ #navMiniCal { border:1px solid #999; } div.calDisplay h4 { display:block; height:17px; margin:0 0 0.5em 0; background:#ebebeb url(../img/text/tiny_title/Dates.png) 50% 50% no-repeat; /* color overridden in chap. 2.2 */ overflow:hidden; text-indent:200px; white-space:nowrap; } #calEntry h4 { border-top:1px solid #999; background-image:url(../img/text/tiny_title/Call%2520For%2520Entry%2520Deadlines.png); } #calRun h4 { background-image:url(../img/text/tiny_title/Opening%2520Dates.png); } div.calDisplay { position:relative; overflow:hidden; } div.compactLink a { display:block; padding:3px 5px; border-top:1px solid #999; } div.compactLink a img { margin:0 0.5em; } #navMiniCal.ajaxActive div.calDisplay table.waiting { display:none; } div.calDisplay table { position:relative; border-collapse:separate; border-spacing:0; margin:0.5em auto; z-index:1; } div.calDisplay caption { width:100%; } div.calDisplay caption a { padding:1.5em 0; margin:-1.5em 0; z-index:3; } div.calDisplay caption img { padding:0 6px; } div.calDisplay td { padding:1px 3px; color:#666; border:1px solid #fff; } div.calDisplay .calPast td { background-color:#ebebeb; border-color:#fff #ebebeb #ebebeb #ebebeb; } div.calDisplay tr td.calFuture { background-color:#fff; border-color:#fff; } div.calDisplay tr td.calToday { background-color:transparent; } div.calDisplay tr td.calToday, div.calDisplay tr td:hover { border:1px solid #999; } div.calDisplay tr td.calNone { background-color:transparent; border:none; } div.calDisplay table td a { display:block; padding:1px 3px; margin:-1px -3px; /* swallow and replace the td padding above */ color:#fff; } div.calDisplay table.calMiniRun td a { background-color:#6e9900; } div.calDisplay table.calMiniEntry td a { background-color:#cc0000; } /* (/5.4) ---------------------- /MINI-CALENDAR ----------------------------- */ /* (5.5) ------------------------- SITE SEARCH ------------------------------ */ /* relies on #navSearchBy styled in chapter 5.2; #boxesSearchFilms defs out of place there, but what are you gonna do? */ #navSearchSite, #boxesSearchFilms { position:relative; display:block; border:1px solid #999; } #boxesSearchFilms { margin:0.25em 0; } #navSearchSite h3, #boxesSearchFilms h4 { background-image:url(../img/text/buttons/search.gif); } #navSearchSite input, #boxesSearchFilms input { /* pretty tough (impossible?) to make all the browsers have the same width */ display:block; margin:0 1px 1px 1px; padding:0; border:1px solid #333; border-color:#333 #999 #eee #999; width:168px; height:1.5em; font-size:0.75em; /* acts to size input box */ } #navMemberServices h3 { background-image:url(../img/text/buttons/ffw.gif); } #boxesSearchFilms h4 { width:267px; } #boxesSearchFilms input { width:279px; } body.contentBlog #boxesSearchFilms h4 { width:207px; } body.contentBlog #boxesSearchFilms input { width:219px; } /* (/5.5) ----------------------- /SITE SEARCH ------------------------------ */ /* (5.6) ------------------------ SCROLL LISTS ------------------------------ */ /* relies on #navSearchBy styled in chapter 5.2 */ #navFABList, #navWinnerList, #navNameList { position:relative; border:1px solid #999; } body.secFilm #navScrollLists h3 img { float:left; } body.secFilm #navScrollLists h3 { background-image:none; } body.secFilm #navNameList h3 { background-color:#f60; } body.secFilm #navNameList h3 img { margin-left:0; } #navScrollLists ol { display:block; margin:0; padding:0; list-style:none; border-top:1px solid #999; } #navScrollLists li { display:block; margin:0; padding:0; } #navScrollLists a { display:block; padding:3px 5px; } /* sometimes we need extra specificity; symptoms include the top and bottom element being cropped off */ #navScrollLists ol.ScrollListActive, ol.ScrollListActive { position:relative; padding:16px 0; overflow:hidden; } #navScrollLists ol.ScrollListType-Arrow, ol.ScrollListType-Arrow { padding:0; } dol.ScrollListType-Arrow li.lastInLine { padding-bottom:18px; } ol.ScrollListActive li.controller { position:absolute; height:15px; width:100%; overflow:hidden; border:1px solid #999; cursor:pointer; z-index:1000; } ol.ScrollListActive li.controlTop { top:0; left:0; border-width:0 0 1px 0; } ol.ScrollListActive li.controlBottom { top:auto; bottom:0; border-width:1px 0 0 0; } ol.ScrollListType-AZList li.controller div { position:absolute; top:0; left:0; background:#000 url(../img/scroll/AZList.gif) 0px 0px no-repeat; } #navScrollLists ol.AZListShow-a li.controller div.a, #navScrollLists ol.AZListShow-b li.controller div.b, #navScrollLists ol.AZListShow-c li.controller div.c, #navScrollLists ol.AZListShow-d li.controller div.d, #navScrollLists ol.AZListShow-e li.controller div.e, #navScrollLists ol.AZListShow-f li.controller div.f, #navScrollLists ol.AZListShow-g li.controller div.g, #navScrollLists ol.AZListShow-h li.controller div.h, #navScrollLists ol.AZListShow-i li.controller div.i, #navScrollLists ol.AZListShow-j li.controller div.j, #navScrollLists ol.AZListShow-k li.controller div.k, #navScrollLists ol.AZListShow-l li.controller div.l, #navScrollLists ol.AZListShow-m li.controller div.m, #navScrollLists ol.AZListShow-n li.controller div.n, #navScrollLists ol.AZListShow-o li.controller div.o, #navScrollLists ol.AZListShow-p li.controller div.p, #navScrollLists ol.AZListShow-q li.controller div.q, #navScrollLists ol.AZListShow-r li.controller div.r, #navScrollLists ol.AZListShow-s li.controller div.s, #navScrollLists ol.AZListShow-t li.controller div.t, #navScrollLists ol.AZListShow-u li.controller div.u, #navScrollLists ol.AZListShow-v li.controller div.v, #navScrollLists ol.AZListShow-w li.controller div.w, #navScrollLists ol.AZListShow-x li.controller div.x, #navScrollLists ol.AZListShow-y li.controller div.y, #navScrollLists ol.AZListShow-z li.controller div.z { background-color:#f90; } #navScrollLists ol.ScrollListActive li.controller div:hover { background-color:#c00; } #navScrollLists ol.ScrollListType-Arrow li.controller div:hover { background-color:#e8e8e8; } ol.ScrollListType-Arrow li.controlBottom, #navScrollLists ol.ScrollListType-Arrow li.controlBottom { background-color:#e8e8e8; border-width:1px 0 0 0; height:14px; } #FAQGallery.ScrollList li.controlBottom { background-color:#fff; } ol.ScrollListType-Arrow li.controlBottom div { width:auto; height:7px; } ol.ScrollListType-Arrow li.controlBottom div.arrowUp { background:transparent url(../img/scroll/arrow_up.gif) bottom center no-repeat; } ol.ScrollListType-Arrow li.controlBottom div.arrowUp:hover { background-position:top center; } ol.ScrollListType-Arrow li.controlBottom div.arrowDown { background:transparent url(../img/scroll/arrow_down.gif) top center no-repeat; } ol.ScrollListType-Arrow li.controlBottom div.arrowDown:hover { background-position:bottom center; } #navScrollLists ol.GenreFilterList { position:relative; padding:0; } /* add some specificity here */ div#wrap #navScrollLists ol.GenreFilterList li.controlTop { position:absolute; top:0; left:0; height:19px; width:100%; overflow:hidden; border:1px solid #999; border-width:0 0 1px 0; cursor:pointer; z-index:1000; } #navScrollLists ol.GenreFilterList li.controlTop div { position:absolute; top:9px; left:0px; height:11px; width:100%; background:#000 url(../img/scroll/genre_filter.gif) 0px 0px no-repeat; } #navScrollLists ol.GenreFilterList li.controlTop div.filterLabel { top:0; height:8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterAll { left: 0; width:18px; background-position: 0px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterAni { left: 18px; width:16px; background-position: -18px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterChi { left: 34px; width:14px; background-position: -34px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterCom { left: 48px; width:18px; background-position: -48px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterDoc { left: 66px; width:17px; background-position: -66px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterDra { left: 83px; width:17px; background-position: -83px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterExp { left:100px; width:17px; background-position:-100px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterGLBT { left:117px; width:20px; background-position:-117px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterSci-Fi { left:137px; width:23px; background-position:-137px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.filterTV { left:160px; width:12px; background-position:-160px -8px; } #navScrollLists ol.GenreFilterList li.controlTop div.genreFilterPreview, #navScrollLists ol.showAll li.controlTop div.filterAll, #navScrollLists ol.showAni li.controlTop div.filterAni, #navScrollLists ol.showChi li.controlTop div.filterChi, #navScrollLists ol.showCom li.controlTop div.filterCom, #navScrollLists ol.showDoc li.controlTop div.filterDoc, #navScrollLists ol.showDra li.controlTop div.filterDra, #navScrollLists ol.showExp li.controlTop div.filterExp, #navScrollLists ol.showGLBT li.controlTop div.filterGLBT, #navScrollLists ol.showSci-Fi li.controlTop div.filterSci-Fi, #navScrollLists ol.showTV li.controlTop div.filterTV { background-color:#f90; } #navScrollLists ol.GenreFilterList li { border-bottom:1px solid #e8e8e8; } #navScrollLists ol.GenreFilterListActive li { display:none; } #navScrollLists ol.GenreFilterListActive li.controller, #navScrollLists ol.showAll li, #navScrollLists ol.showAni li.isAni, #navScrollLists ol.showChi li.isChi, #navScrollLists ol.showCom li.isCom, #navScrollLists ol.showDoc li.isDoc, #navScrollLists ol.showDra li.isDra, #navScrollLists ol.showExp li.isExp, #navScrollLists ol.showGLBT li.isGLBT, #navScrollLists ol.showTV li.isTV, #navScrollLists ol.showSci-Fi li.isSci-Fi { display:block; height:auto; border-bottom:1px solid #e8e8e8; } #wrap #navScrollLists ol li.genreListLead { display:block; height:19px; border:none; } #wrap #navScrollLists ol li.genreListLast { display:block; height: 1px; border:none; } #navNameList.countryList h3 { background-image:url(../img/text/buttons/country.gif); } #navNameList.countryList li { border-top:1px solid #d9d9d9; padding:2px 0; font-size:9px; overflow:auto; } #navNameList.countryList li img { display:block; float:left; margin:0 3px; } #navNameList.countryList li:hover { background-color:#ebebeb; } /* (5.6a) ---------------------- SCROLL TABLES ------------------------------ */ div.ScrollTableContainer { overflow:hidden; padding-bottom:17px; } div.boxWrap div.ScrollTableContainer { position:relative; margin:0 -15px; padding:0 15px 15px 15px; } div.ScrollTableContainer div.controlBottom { position:absolute; bottom:0; left:0; right:0; padding:3px 11px 0 11px; background-color:#e8e8e8; } div.boxWrap div.ScrollTableContainer div.controlBottom { border-top:1px solid #fff; } div.ScrollTableContainer div.controlBottom div { height:7px; cursor:pointer; } div.ScrollTableContainer div.controlBottom div.arrowUp { background:#e8e8e8 url(../img/scroll/arrow_up.gif) bottom center no-repeat; } div.ScrollTableContainer div.controlBottom div.arrowUp:hover { background-position:top center; } div.ScrollTableContainer div.controlBottom div.arrowDown { background:#e8e8e8 url(../img/scroll/arrow_down.gif) top center no-repeat; } div.ScrollTableContainer div.controlBottom div.arrowDown:hover { background-position:bottom center; } /* (/5.6a) -------------------- /SCROLL TABLES ------------------------------ */ /* (/5.6) ---------------------- /SCROLL LISTS ------------------------------ */ /* (5.7) ------------------------ TITLED BOXES ------------------------------ */ div.titledBox { background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; /* color overridden in chap 2.2 */ } div.titledBox .boxWrap { margin:0; padding:0 1em 1em 1em; background:transparent url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; } div.titledBox .bodyWrap { margin:0 -1em 0 -1em; background-color:#fff; border:1px solid #e8e8e8; } div.titledBox .boxFoot { clear:both; height:12px; margin:0 0 -12px 0; } div.titledBox h4 { display:block; margin:0; background:#c7c7c7 url(../img/corners/fff_9px_top.png) top left no-repeat; /* color overridden in chap 2.2 */ } div.titledBox h4 span { display:block; padding:7px 9px; background:transparent url(../img/corners/fff_9px_top.png) top right no-repeat; } body.layoutNoNav div.titledBoxWide { width:760px; margin:20px 0; font-size:13px; } body.layoutNoNav div.titledBoxWide p { width:450px; } div.titledBoxWide h4 span { text-align:left; padding-left:20px; } /* (/5.7) ----------------------- /TITLED BOXES ----------------------------- */ /* (5.8) -------------------------- MEDIAPLEX ------------------------------- */ /* (5.8.1) ---------------- MEDIAPLEX - STATIC LAYOUT ----------------------- */ #mediaplex { position:relative; background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; /* color overridden in chap 2.2 */ } #mediaplex h3 { /* this provides the bottom left rounded corner, since it's not needed as a visible title */ display:block; height:9px; width:9px; overflow:hidden; text-indent:-2000px; position:absolute; bottom:0; left:0; margin:0; background:transparent url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; } #mediaplex:after { /* clear: http://www.positioniseverything.net/easyclearing.html */ content:"."; display:block; height:0; clear:left; visibility:hidden; } #mediaplex div.mediaBlock div.wrap { /* widths defined in layout */ background:transparent url(../img/mediaplex/media_block.gif) top left no-repeat; } #mediaplex div.mediaBlock h4, #mediaplex div.mediaBlock img { display:block; margin:0 auto; padding:0; overflow:hidden; } #mediaplex div.mediaBlock h4 { height:13px; padding:4px 8px 3px 9px; text-align:center; } #mediaplex div.mediaBlock div.bvScroll { width:auto; height:59px; padding:0 0 0 8px; } #mediaplex div.mediaBlock div.bvScroll ul { list-style:none; margin:0; padding:3px 0; } #mediaplex div.mediaBlock div.bvScroll ul li { margin:0 0 0 2px; padding:2px 0; white-space:nowrap; overflow:hidden; } /* (/5.8.1) -------------- /MEDIAPLEX - STATIC LAYOUT ----------------------- */ /* (5.8.2) ---------------- MEDIAPLEX - THEATER MODE ------------------------ */ div.stage { display:none; position:absolute; z-index:101; width:575px; top:103px; left:50%; margin-left:-195px; overflow:hidden; } div.screen { display:none; padding:30px; text-align:center; color:#999; font-size:2.5em; } #onStageError #theaterErrorScreen, #onStageLoading #theaterLoadingScreen, #onStageRequesting #theaterRequestingScreen { display:block; } div.theater { display:none; } #onStagePage div.cameraAction { display:block; } div.upstage { padding:20px 20px 10px 20px; background-color:#262626; color:#fff; } div.orchestraPit { padding:10px 20px; background-color:transparent; } #theaterCurtain { display:none; position:fixed; top:0; left:0; height:100%; width:100%; z-index:100; background-color:#000; opacity:0.6; /* only supported experimentally in older Mozilla and Konqueror */ /* -khtml-opacity:0.6; -moz-opacity:0.6; */ } body.contentMediaTheaterCurtain #mediaplex { background-color:#888; } body.contentMediaTheaterCurtain #mediaplex div.mediaBlock { visibility:hidden; } body.contentMediaTheaterCurtain div.stage { display:block; } body.contentMediaTheaterCurtain #theaterCurtain { display:block; } body.contentMediaTheaterCurtain object { visibility:hidden; } body.contentMediaTheaterCurtain div.theater object { visibility:visible; } /* the mediaplex bgcolor should be e8e8e8; use c5c5c5 because of the 60% opacity fff overlay body.contentMediaTheaterLightsUp #mediaplex { background-color:#c5c5c5; } body.contentMediaTheaterLightsUp #theaterCurtain { background-color:#fff; } */ body.contentMediaTheaterLightsUp #mediaplex { background-color:#e8e8e8; } body.contentMediaTheaterLightsUp #theaterCurtain { display:none; } div.stage a.clickToClose { /* float:right; margin:1em 0; */ position:absolute; bottom:4px; right:20px; padding:2px 0; font-size:9px; color:#c7c7c7; text-decoration:none; text-transform:uppercase; font-weight:bold; z-index:200; } div.stage div.mediaplexPage a.clickToClose { bottom:3px; color:#444; } div.stage div.mediaplexPage a.clickToClose img { margin:0 0 -2px 3px; } /* (/5.8.2) -------------- /MEDIAPLEX - THEATER MODE ------------------------ */ /* (5.8.3) ------------------- MEDIAPLEX - WINNERS -------------------------- */ div.winnersPage { text-align:center; font-size:13px; line-height:17px; } div.winnersPageCompact { font-size:11px; line-height:14px; } div.winnersPage, div.winnersPage a, div.winnersPage a:link, div.winnersPage a:visited { color:#fff; } div.winnersPage a:hover, div.winnersPage a:active { color:#f93; } div.upstage { position:relative; } div.winnersPage { clear:both; float:left; width:535px; } div.winnersPage h2 { text-align:center; margin:5px 0 20px 0; } div.winnersPage ul.vitae { width:270px; list-style:none; margin:30px 0; } div.winnersPage ul.vitae li { margin:0; text-align:center; } div.winnersPage ul.vitae li { text-align:left; } div.winnersPage ul.vitae li span { display:block; } div.winnersPage img.objectStandIn, div.winnersPage object { display:block; margin:5px 0; } div.winnersPage img.winnersVideo, div.winnersPage object.winnersVideo { position:absolute; bottom:25px; right:30px; } div.winnersPage div.winnersAudio, div.winnersPage ul.linkies { width:270px; margin:20px 0; line-height:13px; text-align:left; } div.winnersPage ul.linkies li { padding:5px 0 5px 30px; margin:0; list-style:none; } div.winnersPage ul.linkies li.addClip { background:transparent url(../img/icons/icon_filmstrip_neg.gif) 6px 6px no-repeat; } div.winnersPage ul.linkies li.profile { background:transparent url(../img/icons/icon_member_neg.gif) 4px 7px no-repeat; } div.winnersPage ul.linkies li.moreAbout { background:transparent url(../img/icons/icon_text_doc_neg.gif) 7px 5px no-repeat; } div.winnersPage ul.linkies li.shareClip { background:transparent url(../img/icons/icon_share_neg.gif) 0px 3px no-repeat; } div.winnersPage table { text-align:left; } div.winnersPage table td { vertical-align:bottom; } div.winnersPage table td.videoStars span { line-height:19px; display:block; } div.winnersPage table div { white-space:nowrap; width:320px; } div.winnersPage label { display:block; margin:0; padding:0; } div.winnersPage input.inputTypeText { width:300px; background-color:#4d4d4d; border:2px solid #262626; margin:0.25em 0; font-size:12px; } body.contentBlog div.winnersPage { padding-top:10px; font-size:11px; line-height:14px; } body.contentBlog div.winnersPage h2 { margin:0 0 5px 0; } body.contentBlog div.winnersPage ul.vitae { margin-top:0; margin-bottom:5px; } body.contentBlog div.winnersPage img.objectStandIn, body.contentBlog div.winnersPage object { margin:3px 0; } body.contentBlog div.winnersPage img.winnersVideo, body.contentBlog div.winnersPage object.winnersVideo { bottom:10px; } body.contentBlog div.winnersPage div.winnersAudio, body.contentBlog div.winnersPage ul.linkies { margin:6px 0 1px 0; } body.contentBlog div.winnersPage ul.linkies li { padding:3px 0 3px 30px; } body.contentBlog div.winnersPage ul.linkies li.addClip { background-position:6px 3px; } body.contentBlog div.winnersPage ul.linkies li.profile { background-position:4px 4px; } body.contentBlog div.winnersPage ul.linkies li.moreAbout { background-position:7px 2px; } body.contentBlog div.winnersPage ul.linkies li.shareClip { background-position:0px 0px; } body.contentBlog div.orchestraPit { font-size:11px; line-height:13px; } body.contentBlog div.winnersPage table { margin:-20px 0 -20px -20px; } body.contentBlog div.winnersPage a.clickToClose { margin:-5px -10px; } /* (/5.8.3) ----------------- /MEDIAPLEX - WINNERS -------------------------- */ /* (5.8.4) ---------------- MEDIAPLEX - PAGES (WP/FiF) ---------------------- */ body.contentMediaTheaterLightsUp div.stage { width:583px; margin-left:-199px; } div.mediaplexPage { padding:50px 0; } div.mediaplexPage h4 { position:absolute; top:13px; left:0; margin:0; } div.mediaplexPage ul.filmmakerAnchors { text-align:center; margin:5px 0; } div.mediaplexPage ul.filmmakerAnchors li { display:inline; font-size:0.8em; font-weight:bold; padding-left:20px; margin:0; white-space:nowrap; background:transparent url(../img/icons/bullet_circle_999_to_e8e8e8.gif) 5px 4px no-repeat; } div.mediaplexPage ul.filmmakerAnchors li:first-child { /* REQ: win IE first-child selector */ background:none; padding-left:0; } div.mediaplexPage ol.ScrollList { list-style:none; margin:0; padding:0 24px; } div.mediaplexPage ol.ScrollList li.controlBottom { margin:0 -28px; padding:0 20px; width:550px;/* REQ: Win IE box-model fix */ height:20px; border-top:2px solid #fff; background:none; z-index:150; } div.mediaplexPage ol.ScrollList li.controlBottom div { background-color:#e8e8e8; width:auto; padding:2px 0; } div.mediaplexPage ol.ScrollList li.controlBottom div.arrowUp { background-position:271px -28px; } div.mediaplexPage ol.ScrollList li.controlBottom div.arrowUp:hover { background-position:271px 2px; } div.mediaplexPage ol.ScrollList li.controlBottom div.arrowDown { background-position:271px 0px; } div.mediaplexPage ol.ScrollList li.controlBottom div.arrowDown:hover { background-position:271px -30px; } div.mediaplexPage ol.ScrollList li.pageItem { position:relative; padding:85px 266px 0 0; margin:0; min-height:200px;/* REQ: Win IE min-height fix */ } div.contentWorldPulse ol.ScrollList li.wpFestival { padding-top:113px; min-height:220px;/* REQ: Win IE min-height fix */ } div.mediaplexPage ol.ScrollList li.pageItem ol.photoGallery { position:absolute; top:15px; left:0; list-style:none; margin:0; border:2px solid #fff; border-width:2px 1px 2px 2px; } div.mediaplexPage li.pageItem ol.photoGallery li { display:block; margin:0; padding:0; float:left; } div.mediaplexPage li.pageItem ol.photoGallery img { display:block; margin:0; padding:0; float:left; border-right:1px solid #fff; } div.mediaplexPage li.pageItem ol.photoGallery img.photoEnlarged { position:absolute; left:286px; top:72px; z-index:1; visibility:hidden; /* instead of display:none; so that some browsers get the clue to preload */ border:6px solid #fff; background-color:#c7c7c7; } div.mediaplexPage li.wpFestival ol.photoGallery img.photoEnlarged { top:102px; } div.mediaplexPage li.pageItem ol.photoGallery li:hover img, div.mediaplexPage li.pageItem ol.photoGallery li.hover img, div.mediaplexPage li.pageItem ol.photoGallery li.bvStickyWicketStuck img { opacity:0.6; } div.mediaplexPage li.pageItem ol.photoGallery li:hover img.photoEnlarged, div.mediaplexPage li.pageItem ol.photoGallery li.hover img.photoEnlarged, div.mediaplexPage li.pageItem ol.photoGallery li.bvStickyWicketStuck img.photoEnlarged { opacity:1; z-index:2; visibility:visible; } div.mediaplexPage li.pageItem { font-size:10px; } div.mediaplexPage li.pageItem h5, div.mediaplexPage li.pageItem h6 { font-size:1.25em; margin:0; } div.contentFilmmakersInFocus li.pageItem h6 { margin:1em 0 0.5em 0; } div.mediaplexPage li.pageItem h5 span { font-size:0.85em; font-weight:normal; } div.mediaplexPage ul.pageDetail { list-style:none; margin:10px 0; padding:0; } div.mediaplexPage ul.pageDetail li { border-bottom:1px solid #e1e1e1; padding:4px 5px 4px 14px; margin:0; } div.mediaplexPage ul.fifMemberAudioList li { font-size:1.25em; font-weight:bold; } div.mediaplexPage ul.fifMemberAudioList li img, div.mediaplexPage ul.fifMemberAudioList li object { margin:0 4px 0 -14px; } html.domCapable div.mediaplexPage ul.pageDetail li.bvCollapse h6 { cursor:pointer; margin-left:-14px; padding-left:14px; background:transparent url(../img/icons/toggle_cccccc_closed.gif) 0% 50% no-repeat; } html.domCapable div.mediaplexPage ul.pageDetail li.bvCollapseShow h6 { background-image:url(../img/icons/toggle_cccccc_open.gif); } div.mediaplexPage ul.pageDetail li ul { list-style:none; margin:2px 5px; } div.mediaplexPage ul.pageDetail li li { border:none; margin:0; padding:1px 0 1px 15px; text-indent:-15px; } div.mediaplexPage ul.tagDisplay li { text-indent:0; padding:1px 0; } div.mediaplexPage ul.tagDisplay li a { display:block; text-indent:0; padding:7px 25px; margin:-5px 0; background:transparent url(../img/icons/tag_questions.gif) 0% 50% no-repeat; } div.mediaplexPage ul.tagDisplay li a.tag_announcements { background-image:url(../img/icons/tag_announcements.gif); } div.mediaplexPage ul.tagDisplay li a.tag_buzz { background-image:url(../img/icons/tag_buzz.gif); } div.mediaplexPage ul.tagDisplay li a.tag_deals { background-image:url(../img/icons/tag_deals.gif); } div.mediaplexPage ul.tagDisplay li a.tag_parties { background-image:url(../img/icons/tag_parties.gif); } div.mediaplexPage ul.tagDisplay li a.tag_questions { background-image:url(../img/icons/tag_questions.gif); } div.mediaplexPage ul.tagDisplay li a.tag_reviews { background-image:url(../img/icons/tag_reviews.gif); } div.mediaplexPage ul.tagDisplay li a.tag_tips { background-image:url(../img/icons/tag_tips.gif); } /* (/5.8.4) -------------- /MEDIAPLEX - PAGES (WP/FiF) ---------------------- */ /* (/5.8) ------------------------ /MEDIAPLEX ------------------------------- */ /* (5.9) ---------------------------- CHARTS -------------------------------- */ table.chart { width:100%; border-collapse:collapse; } table.chart caption { padding:0.75em 1em; } table.chart tr { vertical-align:top; } table.chart th, table.chart td { padding:2px 2px; } table.chart thead th { text-align:left; white-space:nowrap; } table.chart tbody th { text-align:center; } table.chart .countCol { text-align:right; } table.chart thead tr { background-color:transparent; } /* alternating row colors in chap 2.2 */ table.featuredChart { width:100%; border-collapse:collapse; margin-bottom:15px; } table.lastInLine { margin-bottom:0; } table.featuredChart caption { padding:0; text-align:left; } table.featuredChart tr { vertical-align:top; } table.featuredChart th, table.featuredChart td { padding:2px 2px; } table.featuredChart th { width:30px; text-align:left; } /* (/5.9) -------------------------- /CHARTS -------------------------------- */ /* (5.10) ------------------------ SIMPLE LISTS ----------------------------- */ div.rsrcWrap dl, div.rsrcWrap ul { list-style:none; margin:1em 0 0 0; padding:0; } div.rsrcWrap dl dt { margin:1em 0 0 0; padding:0.5em 0; border-bottom:1px solid #c7c7c7; } div.rsrcWrap dl dd, div.rsrcWrap ul li { margin:0.25em 0; } div.rsrcWrap hr { margin:0.75em 0; background-color:#fff; } div.rankedList { list-style:none; margin:0; } div.rankedList li { list-style:none; display:block; margin:0.25em 0; } div.rsrcWrap ol.compactTitledList { margin-bottom:1em; } div.rsrcWrap ol.compactTitledList li { padding-left:50px; } div.rsrcWrap ol.compactTitledList li.titleTop { padding-left:0; text-indent:0; font-weight:bold; font-size:1em; } div.rsrcWrap ol.compactTitledList li span.datePrefix { width:50px; margin-left:-50px; float:left; clear:left; } div.rsrcWrap ol.itemIndicator li { padding-left:68px; } div.rsrcWrap ol.itemIndicator li.winner { background:transparent url(../img/icons/icon_winner.gif) 0% 50% no-repeat; } div.rsrcWrap ul.genreNavList { margin:0 -14px; padding:3px 0; border-bottom:1px solid #fff; overflow:hidden; } div.rsrcWrap ul.genreNavList li { display:block; float:left; width:10%; height:14px; /*overflow:hidden;*/ text-align:center; font-size:9px; line-height:11px; text-transform:uppercase; white-space:nowrap; } div.rsrcWrap ul.genreNavList li.gotoListLabel { width:100%; height:10px; line-height:10px; } div.rsrcWrap ul.genreNavList li.gotoListSci-Fi { width:12%; } div.rsrcWrap ul.genreNavList li.gotoListGLBT { width:11%; } div.rsrcWrap ul.genreNavList li.gotoListTV { width:8%; } div.rsrcWrap ul.genreNavList li.gotoListAni { width:9.5%; } div.rsrcWrap ul.genreNavList li.gotoListChi { width:9.5%; } div.rsrcWrap ul.genreNavList li a { display:block; } div.rsrcWrap ul.genreNavList li a:hover, div.rsrcWrap ul.genreNavShow-All li.gotoListAll a, div.rsrcWrap ul.genreNavShow-Ani li.gotoListAni a, div.rsrcWrap ul.genreNavShow-Chi li.gotoListChi a, div.rsrcWrap ul.genreNavShow-Com li.gotoListCom a, div.rsrcWrap ul.genreNavShow-Doc li.gotoListDoc a, div.rsrcWrap ul.genreNavShow-Dra li.gotoListDra a, div.rsrcWrap ul.genreNavShow-Exp li.gotoListExp a, div.rsrcWrap ul.genreNavShow-GLBT li.gotoListGLBT a, div.rsrcWrap ul.genreNavShow-Sci-Fi li.gotoListSci-Fi a, div.rsrcWrap ul.genreNavShow-TV li.gotoListTV a { font-weight:bold; color:#f60; } div.rsrcWrap ol.ScrollListType-Arrow { margin:1em -15px -5px -15px; padding:0 15px 3px 15px; } div.rsrcWrap ol.ScrollListType-Arrow li.controlBottom { margin:0 -15px -1px -15px; padding:3px 15px 0px 15px; border-color:#fff; } body.secHome div.rsrcWrap ol.ScrollListType-Arrow li.controlBottom { width:255px; } body.contentBlog div.rsrcWrap ol.ScrollListType-Arrow li.controlBottom { width:195px; } /* (/5.10) ---------------------- /SIMPLE LISTS ----------------------------- */ /* (5.11) ------------------------ FEATURE LISTS ---------------------------- */ /* need the extra specificity for contentFeatures that are also boxWraps */ div.contentFeature ul, div.contentFeature ul.boxWrap, div.contentFeatureAbbrev ul, div.contentFeatureAbbrev ul.boxWrap { list-style:none; margin:10px 0 0 0; } div.contentFeature li { position:relative; min-height:82px; /* REQ: subIE6 min-height hack */ margin:-1px 0 0 0; padding:0.5em 0.5em 0.5em 75px; border:1px solid #6d6d6d; } div.contentFeature h6 { position:absolute; top:-1px; left:-1px; width:68px; height:82px; margin:0; background-color:#6d6d6d; /* acts like a border */ } div.contentFeature h6 img { display:block; border:1px solid #fff; margin:1px; } div.contentFeature h5 { margin:0; } div.contentFeature p { margin:0.5em 0; } div.contentFeatureAbbrev ul, div.contentFeatureAbbrev ul.boxWrap { list-style:none; margin:0; } div.contentFeatureAbbrev li { position:relative; min-height:50px; /* REQ: subIE6 min-height hack */ margin:-1px 0 0 0; padding:0.5em 0.5em 0.75em 55px; border-top:1px solid #c7c7c7; } div.contentFeatureAbbrev h6 { position:absolute; top:0.75em; left:0; margin:0; width:50px; height:50px; } div.contentFeatureAbbrev h6 img { display:block; border:1px solid #000; } div.contentFeatureAbbrev h5 { margin:0; } div.contentFeatureAbbrev p { margin:0.5em 0; } /* (/5.11) ---------------------- /FEATURE LISTS ---------------------------- */ /* (5.12) ------------------------ ABOUT BOX ----------------------------- */ /* add the #contentGroup for additional specificty */ #contentGroup div.aboutBox { position:relative; padding:0 0.75em 0.5em 0.75em; margin:1em 0 0 0; border:1px solid #6d6d6d; } #contentGroup div.aboutBox div { position:absolute; bottom:-10px; left:50%; white-space:nowrap; } body.contentBlog #contentGroup div.aboutBox div { margin-left:-50px; width:100px; } /* (/5.12) ----------------------- /ABOUT BOX ------------------------------- */ /* (5.13) ------------------------ MEDIAGALLERY ----------------------------- */ div#mediaGallery { padding:15px 10px 15px 30px; margin:0; width:249px; float:right; background-color:inherit; } div#mediaGallery .mGalleryItem { display:block; width:240px; float:right; clear:right; margin-bottom:1em; padding:4px 4px 4px 5px; } div#mediaGallery .mGalleryFeature { background-color:#fff; /* acts as a border */ } div#mediaGallery ol#photoGallery { position:relative; list-style:none; margin:0 0 1em 0; padding-top:185px; } body.secFilm div#mediaGallery ol#photoGallery { padding-top:165px; } ol#photoGallery:after { /* clear: http://www.positioniseverything.net/easyclearing.html */ content:"."; display:block; height:0; clear:left; visibility:hidden; } ol#photoGallery li { margin:0 1px 0 0; padding:0; float:left; border:1px solid #fff; border-width:0 0 1px 1px; } ol#photoGallery li img { display:block; margin:0 0 0 -1px; border:0px solid #c7c7c7; /* combines with inline border-width values to create a mask for non-square images */ } ol#photoGallery li img.photoEnlarged { position:absolute; top:4px; left:6px; z-index:1; visibility:hidden; /* instead of display:none; so that some browsers get the clue to preload */ clip:rect(0,239px,240px,0); } ol#photoGallery li:hover img, ol#photoGallery li.hover img, ol#photoGallery li.bvStickyWicketStuck img { opacity:0.6; } ol#photoGallery li:hover img.photoEnlarged, ol#photoGallery li.hover img.photoEnlarged, ol#photoGallery li.bvStickyWicketStuck img.photoEnlarged { opacity:1; z-index:2; visibility:visible; } /* (/5.13) ---------------------- /MEDIAGALLERY ----------------------------- */ /* (5.14) -------------------------- SLIDESHOW ------------------------------ */ ul.slideshow { list-style:none; margin:0; padding:0; position:relative; height:162px; width:242px; overflow:hidden; z-index:1; } ul.slideshow li { display:block; margin:0; padding:0; border:1px solid #000; position:absolute; top:0; left:110%; height:162px; width:240px; z-index:110; } ul.slideshow li.slideBase { left:0%; z-index:1; } /* (/5.14) ------------------------ /SLIDESHOW ------------------------------ */ /* (5.15) -------------------------- SCROLLBARS ------------------------------*/ div.bvScrollBars { position: relative; /* absolute OK; must not be static, must be specified for JS hook */ overflow: auto; /* js will convert this to hidden, but Safari retains scrollbars if it starts in auto */ } div.bvScrollBars div.bvScrollContainer { position: relative; margin: 0; /* room will be made for scrollbar div based on its positioning */ } div.bvScrollBars div.bvScrollGui { position: absolute; top: 0; right: 0; bottom: 0; width: 13px; height: 100%; } div.bvScrollBars div.bvScrollBase { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: 1; } div.bvScrollDisabled div.bvScrollGui { display: none; } div.bvScrollDisabled div.bvScrollBase { display: block; z-index: 10; /* if disabled, this div will block clicking other divs */ } div.bvScrollBars div.bvScrollTrack { display: block; position: absolute; top: 12px; bottom: 12px; left: 0; right: 0; z-index: 2; background-color:#fff; border:1px solid #ececec; border-color:#ececec #c7c7c7 #ececec #ececec; } div.bvScrollBars div.bvScrollThumb { display: block; position: absolute; top: 8px; left: 1px; height: 25px; width: 9px; cursor:pointer; z-index: 5; background: #666; border:1px solid #fff; } div.bvScrollBars div.bvScrollThumbDetails { } div.bvScrollBars div.bvScrollUp { display: block; position: absolute; top: 0; left: 0; height: 11px; width: 11px; cursor:pointer; z-index: 4; background: #fff url(../img/icons/toggle_up_sm.gif) 2px 4px no-repeat; border:1px solid #ececec; border-color:#ececec #c7c7c7 #ececec #ececec; } div.bvScrollBars div.bvScrollDown { display: block; position: absolute; bottom: 0; left: 0; height: 11px; width: 11px; cursor:pointer; z-index: 3; background: #fff url(../img/icons/toggle_down_sm.gif) 2px 3px no-repeat; border:1px solid #ececec; border-color:#ececec #c7c7c7 #ececec #ececec; } /* required */ div.hideOverflow { overflow:hidden; } /* (5.15.1) ------------------------ SCROLLBAR : MAPS ------------------------*/ #festListByCountry table { font-size:10px; } #festListByCountry thead th, #festListByCountry tfoot td { padding:4px 0 4px 10px; } #festListByCountry tbody tr:hover th, #festListByCountry tbody tr:hover td { background-color:#ededed; } #festListByCountry th, #festListByCountry td { text-align:left; font-weight:normal; white-space:nowrap; vertical-align:top; padding-left:10px; } #festListByCountry thead th { font-weight:bold; text-transform:uppercase; } #festListByCountry .colCountry, #festListByCountry .colCity { width:120px; padding-left:10px; } #festListByCountry .colFestival { width:303px; padding-left:10px; } #festListByCountry div.bvScrollContainer table thead td img { display:block; margin-bottom:-1px; } #festListByCountry div.bvScrollContainer table thead * { height:0px; background-color:#fed327; } #festListByCountry div.bvScrollBars { height:375px; } #festListByCountry div.bvScrollDisabled { height:auto; } #festListByCountry { background:#fed327 url(../img/corners/fff_9px_top.png) top right no-repeat; } #festListByCountry div.foot { background:transparent url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; } /* select the td:first-child due to Safari bug of repeating the thead/tfoot bg for each td */ #festListByCountry thead th:first-child { background:transparent url(../img/corners/fff_9px_top.png) top left no-repeat; } #festListByCountry div.foot div { background:transparent url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; height:15px; } #festListByCountry div.bvScrollContainer { background-color:#fff; border-left:1px solid #fed327; } #festListByCountry div.bvScrollContainer tbody { background-color:#fff; } /* (/5.15.1) ---------------------- /SCROLLBAR : MAPS ------------------------*/ /* (5.15.2) ------------------------ SCROLLBAR : MEDIAPLEX -------------------*/ #mediaplex div.bvScrollBars div.bvScrollGui { background:transparent url(../img/mediaplex/scroll_bg.gif) top left no-repeat; width:14px; } #mediaplex div.bvScrollBars div.bvScrollUp { background:transparent url(../img/mediaplex/scroll_arrow_up.gif) 4px 3px no-repeat; border:none; } #mediaplex div.bvScrollBars div.bvScrollDown { background:transparent url(../img/mediaplex/scroll_arrow_down.gif) 4px 4px no-repeat; border:none; } #mediaplex div.bvScrollBars div.bvScrollTrack { top:14px; bottom:14px; left:1px; right:2px; background:none; border:none; } #mediaplex div.bvScrollBars div.bvScrollThumb { left:2px; width:9px; } /* (/5.15.2) ---------------------- /SCROLLBAR : MEDIAPLEX -------------------*/ /* (/5.15) ------------------------ /SCROLLBARS ------------------------------*/ /* (5.16) ------------------------- COLLAPSABLES ---------------------------- */ .bvCollapseControl { display:none; } html.domCapable .bvCollapseControl { display:block; } html.domCapable span.bvCollapseControl { display:inline; } html.domCapable .bvCollapsable { display:none; } html.domCapable .bvCollapseShow .bvCollapsable { display:block; } html.domCapable .bvCollapseShow span.bvCollapsable { display:inline; } html.domCapable .bvCollapseShow .bvCollapsable-Invert { display:none; } html.domCapable .bvCollapsable-Invert { display:block; } html.domCapable span.bvCollapsable-Invert { display:inline; } /* (5.16.1) --------------------- HOMEPAGE RESOURCES ------------------------ */ ul.resources li { margin:4px 0 0 0; } ul.resources dd ol, ul.resources dd ul, ul.resources dd p { margin:0 0 6px 10px; border-left:1px solid #ccc; } ul.resources dd li { margin:1px 0 2px 0; } ul.resources dd li, ul.resources dd p { padding:0 0 0 10px; } ul.resources dd ol { padding-left:20px; } ul.resources dd ol li { margin-left:10px; padding:0; } ul.resources dl.bvCollapse { margin:0; } ul.resources dl.bvCollapse dt { margin:2px 0; padding:1px 1px 1px 15px; background:transparent url(../img/icons/toggle_cccccc_open.gif) 0% 50% no-repeat; border:none; font-weight:normal; } html.domCapable .resources dl.bvCollapse dt { background-image:url(../img/icons/toggle_cccccc_closed.gif); cursor:pointer; } html.domCapable .resources dl.bvCollapseShow dt { background-image:url(../img/icons/toggle_cccccc_open.gif); } /* (/5.16.1) ------------------- /HOMEPAGE RESOURCES ------------------------ */ /* (/5.16) ----------------------- /COLLAPSABLES ---------------------------- */ /* (5.17) ------------------------ PREDICTIVE TEXT -------------------------- */ #ffwPredictBox { display:none; visibility:hidden;/* Safari won't re-draw this when a class is removed to cause display:none; */ position:absolute; top:0; left:0; z-index:1000; max-height:10em; overflow:auto; background:url(../img/bg/fff_92pct.png); border:1px solid #a8a8a8; border-width:1px 2px 2px 1px; } #ffwPredictBox.active { display:block; visibility:visible; } #ffwPredictBox.prep { /* make it exist to preload the background */ display:block; visibility:hidden; width:1px; height:1px; } #ffwPredictBox ul { list-style:none; margin:0; padding:0; } #ffwPredictBox li { color:#000; padding:3px 8px 2px 4px; margin:0; font-size:9px; white-space:nowrap; overflow:hidden; cursor:pointer; } #ffwPredictBox li.selected { color:#fff; background:#457bd1 url(../img/bg/bright_rounded_top.png) 0px -3px repeat-x; } /* (/5.17) ---------------------- /PREDICTIVE TEXT -------------------------- */ /* (5.18) ---------------------- EDITORIAL CONTENT -------------------------- */ body.contentEditorial div.diaBlock { clear:left; float:left; margin-bottom:1.5em; padding:16px 20px 0 20px; background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; } body.contentEditorial div.diaBlock .footClear { display:block; clear:both; background:transparent url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; /* stretch to the edge; match the padding-left of div.diaBlock */ margin-left:-20px; margin-right:-20px; padding:0 20px 25px 20px; } body.contentEditorial div.diaBlock a.commentLink { /* the commentLink is sometimes the footClear */ display:block; margin-top:2em; padding:10px 20px 12px 20px; text-align:right; border-top:1px solid #fff; color:#f60; font-weight:bold; font-size:0.9em; } body.contentEditorial #contentGroup h1, body.contentEditorial #contentGroup h2 { display:block; margin:1.5em 0 0 0; float:left; background:#c7c7c7 url(../img/corners/fff_9px_top.png) top left no-repeat; /* color overridden in chap 2.2 */ } body.contentEditorial #contentGroup h1 { min-width:351px; } body.contentEditorial #contentGroup h2 { margin:0; } body.contentEditorial #contentGroup h1 span, body.contentEditorial #contentGroup h2 span { display:block; padding:2px 20px; background:transparent url(../img/corners/fff_9px_top.png) top right no-repeat; } body.contentEditorial #contentGroup h1 small, body.contentEditorial #contentGroup h2 small { padding-left: 2em; font-size:0.75em; font-weight:normal; } body.contentEditorial #contentGroup h3 { margin:0; } body.contentEditorial #contentGroup h3+p { margin-top:0; } /* REQ: Win IE sibling selector fix */ /* (/5.18) -------------------- /EDITORIAL CONTENT -------------------------- */ /* (5.19) ------------------------ CLICKFORCODE ----------------------------- */ div.clickForCode { padding:20px 0; } html.domCapable div.clickForCode img { cursor:pointer; } div.clickForCode img { margin:0 35px 20px 0; } div.clickForCode fieldset { margin:0; border:2px solid #999; } div.clickForCode legend { margin:-0.35em 0 0 -5px; padding:0 15px 0 5px; font-weight:bold; } div.clickForCode textarea { display:block; width:100%; height:1.5em; background:transparent; border:none; outline:none; font-family:Verdana,sans-serif; font-size:0.85em; color:#777; font-style:italic; } div.clickForCode fieldset.set textarea { font-size:inherit; font-style:inherit; color:inherit; height:4em; line-height:1.125; } /* (/5.19) ---------------------- /CLICKFORCODE ----------------------------- */ /* (5.20) ----------------------------- MISC -------------------------------- */ ul.bvPrintables { display:none; } ul.postalAddress { list-style:none; margin-left:3em; } /* code wbr "word breaks" with extra space per character, for example: 'text-transform' becomes 'text- transform'; the reduced letter-spacing makes the space disappear while allowing a word-wrap */ .wbr { letter-spacing:-0.17em; } .nobr { white-space:nowrap; } table.memberGallery { width:100%; } table.memberGallery td { width:33%; vertical-align:top; text-align:center; font:9px Tahoma, Arial, sans-serif; line-height:1; padding:12px 4px 2px 4px; } table.memberGallery td img { display:block; margin:1px auto; } /* (/5.20) --------------------------- /MISC -------------------------------- */ /* (/5) ======================= /COMMON STRUCTURES ========================== */ /* (6) ===================== PAGE-SPECIFIC OVERRIDES ======================== */ /* (6.1) --------------------------- FABLIST -------------------------------- */ #fabList { background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; /* color overridden in chap 2.2 */ } #fabList ul { list-style:none; margin:0; padding:0 1.5em 1em 1.5em; background:transparent url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; } #fabList h3 { display:block; margin:0; background:#c7c7c7 url(../img/corners/fff_9px_top.png) top left no-repeat; /* color overridden in chap 2.2 */ } #fabList h3 span { display:block; padding:7px 9px; background:transparent url(../img/corners/fff_9px_top.png) top right no-repeat; } #fabList li { overflow:hidden; display:block; margin:-1px 0 0 0; padding:0 0 0.5em 0; border:1px solid #6d6d6d; } #fabList #fabAbout { overflow:visible; } #fabList h4 { display:block; margin:0; padding:0.625em; } #fabList h4 a { display:block; } div.listMediaPlayer { width:89px; float:right; margin:4px; } div.listMediaPlayer img { border:1px solid #000; } div.listMediaPlayer object img, div.listMediaPlayer img.objectStandIn { border:none; } #fabList br { clear:right; } #fabList h5 { margin:0.625em 0.625em 0.25em 0.625em; } #fabList p, #fabList ol { list-style:none; margin:0 1em 0.625em 0.625em; } #fabList ol li { border:none; padding:0; } li#fabAbout { position:relative; padding:0.875em 0.875em 1em 0.875em; margin:1em 0 1.5em 0; } li#fabAbout h4 { background-color:transparent; text-align:center; padding:0; margin:0 -2px; } li#fabAbout p { margin:1em 0; } li#fabAbout div { position:absolute; bottom:-9px; left:50%; margin-left:-116px; width:233px; white-space:nowrap; } /* (/6.1) ------------------------- /FABLIST -------------------------------- */ /* (6.2) ------------------------- PREVIEWLIST ------------------------------ */ #previewList { background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; /* color overridden in chap 2.2 */ } #previewList ul { list-style:none; margin:0; padding:0 0 9px 0; background:transparent url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; } #previewList h3 { display:block; margin:0; background:#c7c7c7 url(../img/corners/fff_9px_top.png) top left no-repeat; /* color overridden in chap 2.2 */ } #previewList h3 span { display:block; padding:7px 9px; background:transparent url(../img/corners/fff_9px_top.png) top right no-repeat; } #previewList li { display:block; margin:0; padding:0; } /* relies on div.listMediaPlayer styled in chapter 6.1 */ div.listMediaPlayer { margin-right:1.25em; } #previewList br { clear:right; } #previewList h5 { margin:1.5em 1.25em 0.25em 1.25em; } #previewList p, #previewList ol { list-style:none; margin:0 1.25em 0.625em 1.25em; } #previewList ol li { border:none; } #previewList div.linkMore { clear:right; margin-top:0.75em; height:20px; width:100%; text-align:center; border-top:1px solid #fff; background:transparent url(../img/bg/blog_preview_border_gray.gif) bottom left repeat-x; } /* (/6.2) ----------------------- /PREVIEWLIST ------------------------------ */ /* (6.3) ----------------------- CALENDAR LAYOUT ---------------------------- */ #calTrg { position:relative; float:left; width:100%; /* min-width:640px; min-width is a Safari-fix, since it does not recognize the width:100% on calTrg */ margin:1.5em 0; } #calTrg:after { /* clear: http://www.positioniseverything.net/easyclearing.html */ content:"."; display:block; height:0; clear:left; visibility:hidden; } /* safari is shrink-wrapping the float, so put some content in there to expand it, but then keep it out of the way */ #widthMaker { line-height:0; visibility:hidden; } #calTrg h3 { display:block; width:100%; margin:0; background:#c7c7c7 url(../img/corners/fff_9px_top.png) top left no-repeat; /* color overridden in chap 2.2 */ } #calTrg h3 span { display:block; margin:0; padding:7px; background:transparent url(../img/corners/fff_9px_top.png) top right no-repeat; } #calTrg div.calWrap { width:285px; background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; /* color overridden in chap 2.2 */ } #calTrg div.calWrap h4 { margin:1em 20px; } #calTrg div.calBigEntry { float:left; } #calTrg div.calBigRun { float:right; } #calTrg h3 img { padding:1em; margin:-1em; } #calTrg ol, #calTrg ol li ul { margin:0; list-style:none; } #calTrg ol li { margin:0.75em 0 0 0; } #calTrg ol li:first-child { margin:0; } #calTrg ol li ul li, #calTrg ol li ul li:first-child { margin-top:0.25em; padding-left:11px; background:transparent url(../img/icons/dash.gif) 0em 0.65em no-repeat; /* note: Opera wants the same units for each position def */ } #calTrg ol.ScrollList { padding:0 20px; margin:0; } #calTrg li.controlBottom { background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; border:none; padding:10px 20px 5px 0; width:245px; /* REQ: Win IE box model fix */ } /* (/6.3) --------------------- /CALENDAR LAYOUT ---------------------------- */ /* (6.4) -------------------------- MAP LAYOUT ------------------------------ */ #contentMap #contentGroup { position:relative; } #chooseACountry { margin:23px 0; } #mapTrg { position:relative; display:block; width:100%; float:right; margin:1.5em 0; z-index:1; } #mapTrg:after { /* clear: http://www.positioniseverything.net/easyclearing.html */ content:"."; display:block; height:0; clear:left; visibility:hidden; } #countryMap { position:relative; float:right; width:391px; z-index:1; margin:0 0 3px 0; } #mapTrg h3 { display:block; width:100%; height:22px; margin:0; background:#c7c7c7 url(../img/corners/fff_9px_top.png) top left no-repeat; /* color overridden in chap 2.2 */ } #mapTrg h3 span { display:block; margin:0; padding:3px 5px; background:transparent url(../img/corners/fff_9px_top.png) top right no-repeat; } #countryMap h3 span { padding-left:20px; } #countryMap div { position:relative; display:block; background:transparent url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; } #countryMap img { display:block; } #countryMap div, #countryMap div ul { position:absolute; top:0; left:0; bottom:0; right:0; margin:0; padding:0; background:transparent url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; } #countryMap div ul { margin-top:22px; /* height of title bar, #mapTrg h3 */ background:transparent url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; } #mapKey { float:right; clear:right; } #festivalList { width:180px; margin:0 395px 1em 0; } #festivalList ul, #festivalList li { margin:0; list-style:none; } #festivalList ul { border:1px solid #c7c7c7; margin-top:-2px; } #festivalList li { border-top:1px solid #e8e8e8; } #contentGroup #festivalList li:hover, #contentGroup #festivalList li.pointer { background-color:#ebebeb; } #festivalList li a { display:block; padding:2px 15px 2px 4px; } #festivalList li.genreANI, #festivalList li.genreCHI, #festivalList li.genreDOC, #festivalList li.genreEXP, #festivalList li.genreGLBT, #festivalList li.genreSCI-FI, #festivalList li.genreGeneral { background:transparent url(../img/icons/map_key_General.gif) 164px 1px no-repeat; } #festivalList li.genreANI { background-image:url(../img/icons/map_key_ANI.gif); } #festivalList li.genreCHI { background-image:url(../img/icons/map_key_CHI.gif); } #festivalList li.genreDOC { background-image:url(../img/icons/map_key_DOC.gif); } #festivalList li.genreEXP { background-image:url(../img/icons/map_key_EXP.gif); } #festivalList li.genreGLBT { background-image:url(../img/icons/map_key_GLBT.gif); } #festivalList li.genreSCI-FI { background-image:url(../img/icons/map_key_SCI.gif); } /* cities display */ #countryMap dl, #countryMap ul, #countryMap li { margin:0; list-style:none; } #countryMap ul li { display:block; position:absolute; z-index:2; width:10px; height:10px; text-align:center; background:transparent url(../img/icons/map_dot_off.png) 0 0 no-repeat; } #countryMap ul li img { display:block; visibility:hidden; } #countryMap ul li img.city { visibility:visible; display:inline; position:absolute; } #countryMap li img.left_middle { top:2px; right:11px; } #countryMap li img.left_top { top:-5px; right:9px; } #countryMap li img.center_left_top { top:-6px; right:-10px; } #countryMap li img.center_right_top { top:-6px; left:-10px; } #countryMap li img.right_top { top:-5px; left:9px; } #countryMap li img.right_middle { top:2px; left:11px; } #countryMap li img.right_bottom { top:10px; left:9px; } #countryMap li img.center_right_bottom { top:11px; left:-10px; } #countryMap li img.center_left_bottom { top:11px; right:-10px; } #countryMap li img.left_bottom { top:10px; right:9px; } #countryMap dl { display:none; position:absolute; top:-2px; left:-5px; text-align:left; } #countryMap dl dt { position:relative; white-space:nowrap; height:auto; width:auto; margin:-1px 0; border:1px solid #666; font-weight:bold; padding:1px 5px 1px 18px; background:#e8e8e8 url(../img/icons/map_dot_on.png) 4px 2px no-repeat; opacity:0.7; /* only supported experimentally in older Mozilla and Konqueror */ /* -khtml-opacity:0.7; -moz-opacity:0.7; */ } #countryMap dl dd { position:relative; /* height:auto; width:auto; */ padding:0; margin:0; } #countryMap dl dd a { display:block; padding:2px 5px 1px 3px; margin:1px 1px 1px 16px; background:#fff; white-space:nowrap; } #countryMap dl dd a:hover { background-color:#eee; } #countryMap li.rightmost dl { left:auto; right:-5px; text-align:right; } #countryMap li.rightmost dl dt { padding:1px 0 1px 5px; background-image:none; } #countryMap li.rightmost dl dt:after { content:url(../img/icons/map_dot_on.png); margin:0 4px; } #countryMap li.rightmost dl dd a { padding:2px 3px 1px 5px; margin:1px 16px 1px 1px; } #countryMap ul li.pointer, #countryMap ul li.menu { background-image:url(../img/icons/map_dot_on.png); z-index:3; } #countryMap ul li.menu { z-index:4; } #countryMap ul li.menu img.city { opacity:0.01; /*-khtml-opacity:0.01; -moz-opacity:0.01;*/ } /* mouseover-friendly invisibility */ #countryMap ul li.menu dl { display:block; z-index:4; } #countryMap ul li.menu a { z-index:4; } /* (/6.4) ------------------------ /MAP LAYOUT ------------------------------ */ /* (6.5) ------------------------ RECORD LAYOUT ----------------------------- */ body.contentRecord #contentGroup h1, body.contentRecord #contentGroup h2 { display:block; margin:1.5em 0 0 0; float:left; background:#c7c7c7 url(../img/corners/fff_9px_top.png) top left no-repeat; /* color overridden in chap 2.2 */ } body.contentRecord #contentGroup h1 span, body.contentRecord #contentGroup h2 span { display:block; padding:2px 20px; background:transparent url(../img/corners/fff_9px_top.png) top right no-repeat; } body.contentRecord #contentGroup h2 { margin:0; } body.contentRecord #contentGroup h1 cite { padding:0 0 0 2em; } #recordMain { float:left; width:100%; margin-bottom:1.5em; background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) bottom left no-repeat; /* color overridden in chap 2.2 */ } #recordMain #recordFoot { clear:both; height:9px; overflow:hidden; background:transparent url(../img/corners/fff_9px_bottom.png) bottom right no-repeat; } #recordMain ul#statsCol { list-style:none; margin:11px 20px 0 20px; } #recordMain ul#statsCol li { margin:0.5em 0 0 0; padding:0 0 0.5em 0; border-bottom:1px solid #c7c7c7; } #recordMain ul#statsCol li.lastInList { margin:0.5em 0 0 0; padding:0; border-bottom:none; } #recordMain ul#statsCol li h5 { display:inline; padding-right:0.75em; } #recordMain ul#statsCol li ul, #recordMain ul#statsCol li dl { list-style:none; margin:0; padding:0; } #recordMain ul#statsCol li li { margin:0; padding:0; border-bottom:none; } #recordMain ul#statsCol li ul.statsNumeric li { white-space:nowrap; } #recordMain ul#statsCol li ul li.linearList { white-space:normal; padding-left:2em; text-indent:-2em; } #recordMain ul#statsCol li ul.statsBinary li { padding-left:15px; background:transparent url(../img/icons/pip_off.gif) 0% 65% no-repeat; } /* note: Opera wants the same units for each position def */ #recordMain ul#statsCol li ul.statsBinary li.yes { background-image:url(../img/icons/pip_on.gif); } #recordMain ul#statsCol li ul.statsBinary li.no { } #recordMain ul#statsCol li ul.checkList li { padding-left:15px; background:transparent url(../img/icons/pip_on.gif) 0% 65% no-repeat; } #recordMain ul#statsCol li table.semiColumns th, #recordMain ul#statsCol li table.semiColumns td { text-align:left; vertical-align:top; } #recordMain ul#statsCol li table.semiColumns th { padding-right:0.75em; } #recordMain ul#statsCol li p img { border:1px solid #000; margin: 10px 25px 10px 0; } #recordMain ul#statsCol a.date { white-space:nowrap; padding-right:2em; } #recordMain ul#statsCol li.freeZone { clear:both; float:left; } #recordMain ul#statsCol li.freeZone p { clear:left; margin-top:10px; } #recordMain ul#statsCol li.freeZone img { float:left; } #recordMain span.number { white-space:nowrap; } #recordMain p { margin-top:0; } #recordMain .bvCollapse h6 { margin:2px 0; padding:1px 1px 1px 15px; background:transparent url(../img/icons/toggle_cccccc_open.gif) 0% 50% no-repeat; } html.domCapable #recordMain .bvCollapse h6 { background-image:url(../img/icons/toggle_cccccc_closed.gif); cursor:pointer; } html.domCapable #recordMain .bvCollapseShow h6 { background-image:url(../img/icons/toggle_cccccc_open.gif); } html.domCapable #recordMain p.bvCollapse span.bvCollapseControl { padding-left:1em; font-size:0.75em; } html.domCapable #recordMain p.bvCollapseShow span.bvCollapseControl { display:none; } #recordMain #videoStats { margin:-1em 0 1.75em 0; font-size:11px; } #videoStats span { white-space:nowrap; padding-right:2em; } table.ffwVote { margin:0.25em 0; } table.ffwVote td.videoStars { padding-left:12px; } table.ffwVote td.videoStars span { white-space:nowrap; } table.ffwVote td.videoStars img { display:block; float:left; } #photoCredits.bvCollapse { font-size:9px; } #photoCredits.bvCollapse h6 { margin:0; padding:0 0 0 15px; background-color:#d5d5d5; text-transform:uppercase; } #photoCredits.bvCollapse div.bvCollapsable { margin:1px 0 0 0; padding:3px; width:232px; border:1px solid #d5d5d5; background-color:#ececec; float:right; } #photoCredits.bvCollapse table { float:right; margin:0 0 2px 5px; } #photoCredits.bvCollapse table td { background-color:#bcbcbc; color:#fff; font-weight:bold; text-align:center; width:1.5em; padding:1px; } #photoCredits.bvCollapse ol { margin:2px; } #recordMain #recordFoot { clear:both; margin-top:1em; } #recordPageFoot { clear:both; width:100%; margin:1.5em 0; border-collapse:collapse; border:1px solid #e8e8e8; } #recordPageFoot td, #recordPageFoot th { border:1px solid #c7c7c7; border-width:1px 0; padding:0.25em 1em; } #recordPageFoot th { width:30%; border-width:1px 1px 1px 0; } #recordPageFoot th.last { border-width:1px 0 1px 0; } #recordPageFoot input { display:block; width:95%; } #recordPageFoot img { padding:0 0.75em 0 2em; } /* (6.5.2) ------------------------- COMMENTS ------------------------------- */ #comments { clear:both; margin:1.5em 0; } #comments div.titleWrapper { text-align:center; padding-top:1px; } #comments div.titleWrapper a { font-size:10px; color:#000; font-weight:bold; padding:9px 10px 0 10px; } #comments div.titleWrapper a:hover { color:#f60; } #commentsSearchQ { float:right; width:132px; font-size:11px; margin:2px 0 -3px 10px; padding:1px; } #comments div.titledBox { clear:both; border-top:1px solid #c7c7c7; margin-top:-1px; } #comments a { color:#f60; text-decoration:none; } #comments a:hover { text-decoration:underline; } #comments #tagFilters a:hover { text-decoration:none; } #comments h4 span { text-align:left; padding:7px 30px 5px 30px; } #comments img.cmtJumpToPost { padding:2px 4px 2px 25px; } #comments div.bodyWrap { padding:0; background:#fff url(../img/bg/comment_gallery_fauxcol.gif) top right repeat-y; border-color:#fff #e8e8e8; float:left; width:573px; } #comments ul, #comments li { list-style:none; margin:0; } #comments #tagFilters { margin:0 -1px; border:1px solid #c7c7c7; border-width:0 1px 1px 1px; background-color:#fff; padding:5px 0 4px 0; float:left; width:100%; } #comments #tagFilters li { display:block; float:left; white-space:nowrap; text-align:center; margin:0; padding:1px 3px 5px 3px; } #comments #tagFilters li a { display:block; padding:2px 1px 2px 4px; } #comments #tagFilters li span.icon { display:block; float:left; width:23px; margin:0 0 -5px 0; font:9px Tahoma, Arial, sans-serif; color:#f60; white-space:normal; } #comments #tagFilters li img { padding:0 0 4px 5px; } #comments #tagFilters li span.icon img { padding:0; } #commentsGallery { width:138px; float:right; background-color:#e8e8e8; } #commentsGallery div { padding-bottom:8px; margin-bottom:5px; border-bottom:1px solid #fff; } #commentsGallery table { width:138px; } #commentsGallery table caption { width:auto; font:11px Tahoma, Arial, sans-serif; padding:4px 18px; } #commentsGallery table td { width:50%; padding:4px 4px 1px 4px; } #commentsLogin { padding:2px 4px 4px 4px; font:9px Arial; } #commentsLogin form { font:10px Tahoma, Arial, sans-serif; font-weight:bold; text-transform:none; } #commentsLogin input { margin:2px 0; padding:1px; font-size:1em; } #commentsLogin input.inputTypeText { width:126px; } #commentsLogin input.inputTypePassword { float:left; width:106px; margin-right:5px; } #commentsLogin input.inputTypeImage { margin:3px -10px 0 0; } #comments div.paginateNav { clear:left; padding:5px 0; margin:0 -1px; border:1px solid #c7c7c7; border-width:0 0 1px 1px; width:100%; font-size:0.625em; text-align:right; } #comments div.paginateNav table { margin:0 10px; float:left;} #comments div.paginateNav table img { margin:0; } #comments div.paginateNav table td { padding:0 5px; } #comments div.paginateNav img { margin:2px 10px 0 0; } #comments div.paginateEnd { border-color:#e8e8e8; } #comments div.paginateEnd table { float:none; display:inline; margin-left:200px; } div#commentsColumn { margin:0 138px 0 0; } ul#postList { margin:8px 10px; font-size:0.8em; color:#3d3d3d; } ul#postList li { position:relative; margin:5px 0 10px 35px; padding:0 0 0 0; } #postList li li { margin:5px 0; padding:4px 4px 4px 20px; border-top:1px dotted #a6a6a6; } #postList div.postMeta { position:relative; } #postList div.postMetaIcon { position:absolute; top:0; left:-35px; } #postList span.postMetaDate { padding:0 0.5em 0 0; border-right:1px solid #444; text-transform:uppercase; } #postList span.postMetaAuthor { padding-left:0; } div.postSubject span.postTagged { padding:0 10px; } div.postSubject span.postTagged img { margin:-8px -8px -5px -7px; } #postList a.commentsReportThis { position:absolute; right:0; top:1px; font-size:0.85em; } #postList li.postThread { position:relative; border-bottom:1px solid #a6a6a6; } #postList a.postCommentLink { position:relative; padding:5px 20px 2px 0; font:9px Verdana, Arial, sans-serif; text-transform:uppercase; } #postList li.postThread div.postThreadToggle { position:absolute; bottom:3px; left:350px; height:20px; width:30px; cursor:pointer; background:transparent url(../img/icons/icon_close_neg.gif) 100% 100% no-repeat; } /* (6.5.2a) ------------------- COMMENTS:COLLAPSING ------------------------- */ html.domCapable #comments img.cmtCollapse { display:inline; } html.domCapable #comments.collapse img.cmtExpand { display:inline; } html.domCapable #comments.collapse img.cmtCollapse { display:none; } #postList li.collapse { border:none; } /* first, prevent a collapsed parent from constraining a child with barely more specificity */ #postList li.collapse li div { display:block; } #postList li.collapse li span.postMetaAuthorIntro, #postList li.collapse li div.postSubject a span, #postList li.collapse li a.postCommentLink { display:inline; } #postList li.collapse li div.postBody, #postList li.collapse li div.postThreadToggle { display:block; } /* now you need added specificity for the children to respond */ #postList li.collapse div, #postList li li.collapse div { display:inline; } #postList li.collapse div.postBody, #postList li li.collapse div.postBody, #postList li.collapse span.postMetaAuthorIntro, #postList li li.collapse span.postMetaAuthorIntro, #postList li.collapse div.postSubject a span, #postList li li.collapse div.postSubject a span, #postList li.collapse a.postCommentLink, #postList li li.collapse a.postCommentLink, #postList li.collapse div.postThreadToggle, #postList li li.collapse div.postThreadToggle { display:none; } #postList li.collapse a.commentsReportThis { display:none; } #postList li.collapse li a.commentsReportThis { display:block; } #postList li li.collapse a.commentsReportThis { display:none; } /* (/6.5.2a) ----------------- /COMMENTS:COLLAPSING ------------------------- */ /* (6.5.2b) --------------------- COMMENTS:FORMS ---------------------------- */ h4#commentsStartAThread { background-image:none; padding:5px 0 2px 0; } #commentsForm { font-size:0.75em; color:#444; padding:8px 30px; } #commentsForm fieldset { border:none; padding:0; margin:1.5em 0 1.25em 0; } #commentsForm input.inputText, #commentsForm input.inputPassword, #commentsForm textarea { width:369px; padding:1px 3px; border:1px solid #000; margin:2px 0 5px 0; } #commentsForm textarea { height:10em; font-family:inherit; } #commentsForm input.inputSubmit { margin-right:1.5em; } #commentsForm table { width: 375px; } #commentsForm table td { padding:0 1em 0.25em 0; } #commentsForm input.inputCheckbox { margin:0 0.25em 0 0; } #commentsForm p { margin:0.25em 0; } #commentsForm .subNote { font-size:0.9em; margin:0 0 0 1.5em; text-align:right; float:right; } #commentsForm strong { font-weight:normal; text-transform:uppercase; } /* (/6.5.2b) ------------------- /COMMENTS:FORMS ---------------------------- */ /* (/6.5.2) ----------------------- /COMMENTS ------------------------------- */ /* (6.5.3) ------------------------- GENRE-NAV ------------------------------ */ body.secFilm #navMiniMap { border-bottom:none; } /* relies on #navSearchBy styled in chapter 5.2 */ #navGenre { position:relative; border:1px solid #999; border-top:none; } #navGenre img { display:block; } #navGenre ul { list-style:none; display:block; margin:0; } #navGenre li { display:block; margin:0 -1px 0 0; width:173px; height:14px; } #navGenre li a img { float:right; } #navGenre li a { display:block; height:5px; width:158px; border-top:1px solid #d9d9d9; border-right:1px solid #999999; padding:4px 7px; } /* have the map react when the parent or the body tag have the section class assigned */ /* you need the #navGenreList in there to be more specific than the above stuff that is overridden */ #navGenre li a:hover, .genreAni #navGenreList li.genreAni a, .genreChi #navGenreList li.genreChi a, .genreCom #navGenreList li.genreCom a, .genreDoc #navGenreList li.genreDoc a, .genreDra #navGenreList li.genreDra a, .genreExp #navGenreList li.genreExp a, .genreGLBT #navGenreList li.genreGLBT a, .genreTV #navGenreList li.genreTV a, .genreSci-Fi #navGenreList li.genreSci-Fi a { border-right:2px solid #000; padding-right:6px; background-color:#ebebeb; } /* (/6.5.3) ----------------------- /GENRE-NAV ------------------------------ */ /* (/6.5) ---------------------- /RECORD LAYOUT ----------------------------- */ /* (6.6) -------------------------- ABOUT PAGE ------------------------------ */ #pgAbout #navMiniMap { border-bottom:none; } #pgAbout #masthead { min-height:100px; padding:10px 10px 40px 10px; font-size:11px; color:#000; } #pgAbout #masthead h2 { margin:1em 0 0 0; } #pgAbout div.titledBox h4 { background-color:#e8e8e8; } #pgAbout div.boxWrap { text-align:left; } /* (/6.6) ------------------------ /ABOUT PAGE ------------------------------ */ /* (6.7) --------------------------- FAQ PAGE ------------------------------- */ #FAQMain { padding-right:225px; } .FAQMAinNoPadding { padding-right: 20px !important; } #FAQMain #FAQGallery { list-style:none; float:right; width:160px; margin:0 -195px 0 0; background-color:#999; } #FAQMain #FAQGallery li { margin:0; } #FAQMain #FAQGallery li a { display:block; padding:5px; text-align:center; background-color:#999; color:#fff; font-weight:bold; font-size:0.95em; } #FAQMain #FAQGallery li a:hover, #FAQMain #FAQGallery li a:active { background-color:#000; color:#dedede; } #FAQMain ol.ScrollListType-Arrow li.controlBottom { border:1px solid #999; border-width:5px 1px 1px 1px; width:158px; } #FAQMain .overview { font-weight:bold; } #FAQMain p.overview { margin-bottom:0; } #FAQMain ul.overview { list-style:none; margin-top:0; } #FAQMain a, #FAQMain a:link, #FAQMain a:visited, #FAQMain a:hover, #FAQMain a:active { color:#f60; text-decoration:none; } #FAQMain a:hover { color:#f60; text-decoration:underline; } /* (/6.7) ------------------------- /FAQ PAGE ------------------------------- */ /* (6.8) ------------------------ RESOURCES PAGE ---------------------------- */ body.hasNavFloater form.navForm { display:block; padding:0 0 1.5em 0; } body.hasNavFloater form.navForm #rsrcSelectRegion { margin-top:0.75em; } body.hasNavFloater form.navForm #rsrcSelectCountry { margin:0.25em 0 0 0; padding-left:19px; background:transparent url(../img/icons/submit_arrow.gif) 0% 50% no-repeat; } body.hasNavFloater form.navForm #rsrcSelectCountry select { width:151px; } #tiledIcons { list-style:none; margin:0; } #tiledIcons li { list-style:none; margin:0 2px 2px 0; float:left; } #tiledIcons li a, #tiledIcons li img { display:block; } #tiledIcons li img { border:1px solid #fff; } #tiledIcons li a:hover img { border-color:#f90; } #RsrcMain ol { list-style:none; margin:1em 0 0 0; } #RsrcMain li { margin:10px 0; padding:0 0 10px 0; border-bottom:1px solid #ccc; overflow:hidden;/* contain floats */ } #RsrcMain li li, #RsrcMain li.controller { margin:0; padding:0.25em 0 0 0; border-bottom:none; } #RsrcMain .rsrcBlogTxt a{ color: #f60;} #RsrcMain .rsrcBlogTxt a:hover { text-decoration:underline; } html.domCapable #RsrcMain div.bvCollapse h6 { cursor:pointer; margin:0; padding-left:14px; background:transparent url(../img/icons/toggle_cccccc_closed.gif) 0% 50% no-repeat; } html.domCapable #RsrcMain div.bvCollapseShow h6 { background-image:url(../img/icons/toggle_cccccc_open.gif); } #RsrcMain li ul { list-style:none; margin:2px 20px; } #RsrcMain li ul li { border:none; margin:0; padding:1px 0 1px 15px; text-indent:-15px; } #RsrcMain div.bvCollapse { clear:left; } #RsrcMain img.rsrcBanner { float:left; margin:0 10px 5px 0; } #RsrcMain a.rsrcAuxRsrc { display:block; clear:right; float:right; margin:5px 0 0 20px; text-align:right; font-size:0.95em; } #RsrcMain a.rsrcAuxRsrc img { margin:0 0 -3px 0.5em; } #RsrcMain ol p { margin:0; } #RsrcMain ol p+p { margin-top:0.75em; } #RsrcMain a.rsrcAuxRsrc, #RsrcMain h6.bvCollapseControl, #RsrcMain a.rsrcOutlink { font-weight:bold; color:#f60; } #RsrcMain a.rsrcAuxRsrc:hover, #RsrcMain a.rsrcOutlink:hover { color:#f90; } /* (/6.8) ---------------------- /RESOURCES PAGE ---------------------------- */ /* (6.9) ------------------------ MEMBER PROFILE ---------------------------- */ #memProfile { font-size:10px; } /* editMode */ body .editMode, body.editMode #editModeEnter { display:none; } body.editMode .editMode { display:block; } body .editModeNote { color:#999; white-space:normal; } body .editModeCallToAct { padding:1em 2em; font-size:1.5em; text-align:center; } a.editLink { position:absolute; z-index:1000; top:7px; right:9px; padding:0 1px 2px 1px; color:#f60; font:10px/10px Arial,sans-serif; font-weight:bold; text-transform:lowercase; text-indent:0; } a.editLink:hover, a.editLink:active { color:#000; background-color:#f90; } #myWorld h3 a.editLink { top:50%; margin-top:-0.5em; } body .myWorldBlock a.editLink { top:3px; } #editModeEnter { position:absolute; color: #ff6600; font-weight: bold; top:114px; right:0; margin-top:-0.5em; } #editModeMsg { position:relative; margin:0 0 5px 320px; width:452px; background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) left bottom no-repeat; } #editModeMsg h4 { margin:0; padding:9px 12px 0 12px; background:transparent url(../img/corners/fff_9px_top.png) left top no-repeat; } #editModeMsg p { margin:0; padding:12px; background:transparent url(../img/corners/fff_9px_bottom.png) right bottom no-repeat; } #editModeExit { position:absolute; right:0; top:0; padding:10px 12px 9px 3px; background:transparent url(../img/corners/fff_9px_top.png) right top no-repeat; color:#f60; font-weight:bold; } #editModeExit:hover { color:#000; } /* /editMode */ #memProfile a.moreLink { font-weight:bold; color:#f60; } #memProfile a.moreLink:hover { text-decoration:underline; } body.editMode #memProfile a.moreLink { display:inline; /* in case a morelink is also an editmode item */ } #memClmProfile > div, #memClmHub > div { margin-bottom:5px } #memProfile div.titledBox h4 { position:relative; text-align:left; padding:0; } #memProfile div.titledBox span { padding:9px 15px; } #memProfile div.titledBox img { display:block; } /* columns */ #memClmProfile { float:left; width:307px;/* REQ: box model fix */ padding:0 4px 1.5em 0; margin-right:-311px; overflow:hidden; } #memClmHub { position:relative; width:461px; padding:0 0 1.5em 0; margin-left:311px; overflow:hidden; } /* /columns */ /* upper left snapShot box */ #snapShot { position:relative; margin-right:-4px; padding:0 10px 10px 15px; background:#fff url(../img/corners/box_border_profile.gif) left bottom no-repeat; overflow:hidden;/* contain floats */ } #snapShot h2 { margin:0 -10px 0 -15px; padding:12px 10px 5px 15px; background:#fff url(../img/corners/box_border_profile.gif) left top no-repeat; font-size:1.2em; text-transform:uppercase; } #snapShot h2 span { display:block; text-transform:none; font-size:0.875em; font-weight:normal; } #snapShot div { float:left; width:125px; margin:0 -125px 8px 0; } #snapShot #metaProfile { float:right; width:153px; list-style:none; margin:-1.2em 0 8px 135px; } #snapShot #metaProfile li { margin:0; padding:0; } #snapShot #metaProfile #selfRef { margin:0.75em 0; } #snapShot #metaProfile a.actLink { display:block; padding:1px 0 2px 17px; background:transparent url(../img/icons/checked_box.gif) 0% 50% no-repeat; } #snapShot #metaProfile a.actAddMe { background-image:url(../img/icons/pip_plus_000.gif); } #snapShot #metaProfile a.actForward { background-image:url(../img/icons/action_indication_arrow.gif); } #snapShot h3 { margin:0; font-size:1em; } #snapShot #metaProfile h3 { float:left; padding-right:0.75em; text-transform:uppercase; } #snapShot ul.batchLinks { clear:both; float:left; /* contain floats */ list-style:none; margin:8px 0 0 0; width:303px; } #snapShot ul.batchLinks li { margin:0 4px 0 0; padding:0; float:left; height:20px; } #snapShot ul.batchLinks h3 { font-weight:normal; margin:4px 0.75em 0 0; } #snapShot ul.batchLinks li a { display:block; text-indent:-1000em; height:20px; width:20px; background:#f7f7f7 url(../img/icons/dash.gif) 50% 50% no-repeat; } #snapShot #contactMe li a[href^='mailto:'], #snapShot #contactMe li a.contactLink { width:20px; background-image:url(../img/icons/icon_letter.gif); } #snapShot #contactMe li a[href$='.vcf'] { width:30px; background-image:url(../img/icons/vcard.gif); } #snapShot #contactMe li a[href^='aim:'] { width:20px; background-image:url(../img/icons/aim.gif); } #snapShot #contactMe li a[href^='ymsgr:'] { width:20px; background-image:url(../img/icons/yahoo.gif); } #snapShot #contactMe li a[href^='skype:'] { width:40px; background-image:url(../img/icons/skype.gif); } #snapShot #bookmarkMe li a[href^='http://del.icio.us/'] { background-image:url(../img/icons/bookmark_delicious.png); } #snapShot #bookmarkMe li a[href^='http://digg.com/'] { background-image:url(../img/icons/bookmark_digg.png); } #snapShot #bookmarkMe li a[href^='http://reddit.com/'] { background-image:url(../img/icons/bookmark_reddit.png); } #snapShot #bookmarkMe li a[href^='http://ma.gnolia.com/'] { background-image:url(../img/icons/bookmark_magnoliacom.png); } #snapShot #bookmarkMe li a[href^='http://www.newsvine.com/'] { background-image:url(../img/icons/bookmark_newsvine.png); } #snapShot #bookmarkMe li a[href^='http://www.furl.net/'] { background-image:url(../img/icons/bookmark_furl.png); } #snapShot #bookmarkMe li a[href^='http://www.google.com/'] { background-image:url(../img/icons/bookmark_google.png); } #snapShot #bookmarkMe li a[href^='http://myweb2.search.yahoo.com/'] { background-image:url(../img/icons/bookmark_yahoo.png); } /* /snapShot */ /* favorites */ div.faves ul.boxWrap { list-style:none; margin:0; padding:15px 10px 20px 15px; } div.faves ul.boxWrap li { margin:0; padding:2px 0 1px 0; } div.faves ul.boxWrap a { font-weight:bold; color:#f60; } div.faves ul.boxWrap a:hover { text-decoration:underline; } /* /favorites */ /* destinations */ #memDest table { display:block; width:auto; padding:0 1px 20px 1px; background:transparent url(../img/corners/fff_9px_bottom.png) right bottom no-repeat; } #memDest tr.a td { background-color:#fff; } #memDest tr th, #memDest tr td { padding:5px 12px 0 0; vertical-align:top; } #memDest thead th { padding-bottom:2px; font-size:9px; text-align:left; } #memDest tr th:first-child, #memDest tr td:first-child { white-space:nowrap; padding-left:12px; } #memDest tr th, #memDest tr.expansionRow td { border-bottom:1px solid #c6c6c6; padding-bottom:5px; padding-top:1px; } #memDest tr.expansionRow td a.addDest { display:block; margin-top:3px; padding-left:14px; line-height:16px; color:#f60; font-weight:bold; background:transparent url(../img/icons/pip_plus_000.gif) 0% 50% no-repeat; } #memDest dl, #memDest dt, #memDest dd { margin:0; padding:0; } html.domCapable #memDest dl.bvCollapse dt { cursor:pointer; padding-left:14px; background:transparent url(../img/icons/toggle_cccccc_closed.gif) 0% 50% no-repeat; } html.domCapable #memDest dl.bvCollapseShow dt { background-image:url(../img/icons/toggle_cccccc_open.gif); } #memDest dl { overflow:hidden; } #memDest dd { float:left; text-align:center; width:34px; margin:7px 6px 7px 0; overflow:hidden; white-space:normal; } #memDest dd.seeAllLink { clear:left; float:none; margin-top:7px; margin-bottom:0; width:270px; text-align:right; } #memDest dd img { margin:0 1px; } /* destination pages */ div.moreDest ul.eventDetails { list-style:none; } div.moreDest ul.eventDetails h6 { display:inline; padding-right:1em; } div.moreDest #moreDestDescription { margin:15px 0; padding:5px 20px; background:#fff; border:1px solid #333; } div.moreDest h3#moreDestWho { border-top:1px solid #fff; background:#c7c7c7; font-size:1.25em; color:#333; margin:20px -20px; padding:5px 20px; font-style:italic; } div.moreDest #moreDestSeeAll { list-style:none; margin:0; } div.moreDest #moreDestSeeAll li { float:left; margin:10px; width:88px; height:75px; text-align:center; } div.moreDest #moreDestSeeAll li img { display:block; margin:0 20px 4px 20px; } /* /destination pages */ /* /destinations */ #memAbout p.bvCollapse span { padding:0; } #memAbout p.bvCollapse span.bvCollapseControl { display:block; padding:0.5em 2em; } #memAbout p.bvCollapseShow span.bvCollapseControl { display:none; } #mainContent #formTop10s li { border-bottom:2px solid #fff; padding:20px 48px; margin:0 -48px; } #mainContent #formTop10s #formTop10sSubmit { padding:20px 0; margin:0; border:none; text-align:right; } #mainContent #formTop10s th { vertical-align:top; border-right:1px solid #ccc; padding-right:5px; } #mainContent #formTop10s th h4 { margin:0.45em 0 0 0; } #mainContent #formTop10s hr { margin:3px 0; height:1px; } /* my world */ #myWorld { margin:9px 0 0 0; background:#e8e8e8 url(../img/corners/fff_9px_bottom.png) left bottom no-repeat; z-index:1; } #worldStopper { position:relative; clear:left; background:transparent url(../img/corners/fff_9px_bottom.png) right bottom no-repeat; height:15px; width:auto; margin-top:-15px;/* overlap the h3, when there's no blocks */ z-index:10; } #myWorld h3 { position:relative; text-align:center; padding:5px 10px 4px 10px; margin:0; background:#c7c7c7 url(../img/corners/fff_9px_top.png) right top no-repeat; color:#3a3a3a; text-transform:uppercase; font-size:14px; } #myWorld .myWorldBlock { position:relative; width:212px; height:232px; background:transparent url(../img/myworld/world_block.gif) top left no-repeat; overflow:hidden; float:left; margin:12px 0 0 12px; } dl.myWorldBlock dt { padding-top:6px; margin-left:9px; } dl.myWorldBlock dt span { display:block; height:15px; margin:-1px 0 1px 0; overflow:hidden; white-space:nowrap; font:12px/12px "Arial Narrow", Arial, sans-serif; color:#383838; font-weight:bold; text-transform:uppercase; } dl.myWorldBlock dd { position:absolute; top:21px; left:12px; width:200px; height:210px; margin:0; padding:0; overflow: auto; /* js will convert this to hidden, but Safari retains scrollbars if it starts in auto */ } dl.myWorldBlock dd ul { margin:7px 0 3px 0; width:178px; /* not sure why Safari needs this */ list-style:none; } dl.myWorldBlock dd.bvScrollDisabled ul { width:185px; } dl.myWorldBlock dd li { clear:left; overflow:hidden;/* contain floats and prevent big stuff from breaking things */ margin:0; padding:7px 5px; border-top:1px solid #c9c9c9; } dl.myWorldBlock dd li:first-child { border-top:none; } dl.myWorldBlock dd img { float:left; margin:0 10px 5px 0; } dl.myWorldBlock dd a { color:#f60; } #contentGroup div.memberPost { font-size:1.2em; } div.memberPost p { margin-top:0; } div.memberPost a.ffwAdded { float:left; margin:0 10px 7px 0; border:1px solid #f90; } div.memberPost a.ffwAdded:hover { border-color:#000; } div.memberPost a.ffwAdded img { display:block; border:1px solid #fff; } body.contentBlock a.commentLink { display:block; clear:both; margin-bottom:20px; text-align:right; color:#f60; } /* scrollbars */ dl.myWorldBlock dd.bvScrollBars div.bvScrollContainer { position: relative; margin: 0 15px 0 0; /* room will be made for scrollbar div based on its positioning */ padding-bottom:5px; } dl.myWorldBlock dd.bvScrollBars div.bvScrollGui { position: absolute; top: 0; right: 1px; bottom: 0; width: 13px; height: 100%; background:transparent url(../img/myworld/scroll_bg_tall.gif) 0 0 no-repeat; } dl.myWorldBlock dd.bvScrollBars div.bvScrollBase { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; z-index: 1; } dl.myWorldBlock dd.bvScrollDisabled div.bvScrollContainer { margin-right:0; } dl.myWorldBlock dd.bvScrollDisabled div.bvScrollGui { display: none; } dl.myWorldBlock dd.bvScrollDisabled div.bvScrollBase { display: block; z-index: 10; /* if disabled, this div will block clicking other divs */ } dl.myWorldBlock dd.bvScrollBars div.bvScrollTrack { display: block; position: absolute; top: 12px; bottom: 12px; left: 0; right: 0; z-index: 2; } dl.myWorldBlock dd.bvScrollBars div.bvScrollThumb { display: block; position: absolute; top: 8px; left: 2px; height: 25px; width: 9px; cursor:pointer; z-index: 5; background: #666; border:1px solid #fff; } dl.myWorldBlock dd.bvScrollBars div.bvScrollThumbDetails { } dl.myWorldBlock dd.bvScrollBars div.bvScrollUp { display: block; position: absolute; top: 0; left: 0; height: 11px; width: 13px; cursor:pointer; z-index: 4; background: transparent url(../img/icons/toggle_up_sm.gif) 4px 3px no-repeat; } dl.myWorldBlock dd.bvScrollBars div.bvScrollDown { display: block; position: absolute; bottom: 0; left: 0; height: 11px; width: 13px; cursor:pointer; z-index: 3; background: transparent url(../img/icons/toggle_down_sm.gif) 4px 4px no-repeat; } dl.myWorldBlock dd.hideOverflow { overflow:hidden; } #myWorld div.myWorldType-Gallery div.bvScroll { top:-4px; width:auto; height:49px; padding:0 0 0 8px; background-color:transparent; } #myWorld div.myWorldType-Gallery div.bvScroll ul { list-style:none; margin:0; padding:3px 0; } #myWorld div.myWorldType-Gallery div.bvScroll ul li { margin:0 0 0 1px; padding:1px 0; white-space:nowrap; overflow:hidden; } /* /scrollbars */ /* /my world */ /* my network */ #myNetwork { overflow:hidden; } #myNetwork table { margin:7px 0; } #myNetwork td { vertical-align:top; text-align:center; width: 60px; font:9px Tahoma, Arial, sans-serif; padding:12px 4px 2px 4px; /* width:33%; vertical-align:top; text-align:center; line-height:1; */ } #myNetwork td img { margin-left: 12px; } #myNetwork span.seeAllLink { display:block; text-align:right; padding:0; margin:-5px -1em -5px 0; } #myNetwork span.seeAllLink a { padding:0 1em; } /* my network: see all */ div.moreNetwork #moreNetworkSeeAll { list-style:none; margin:0; } div.moreNetwork #moreNetworkSeeAll li { float:left; margin:10px; width:88px; height:75px; text-align:center; color:#666; } div.moreNetwork #moreNetworkSeeAll li a { display: block; } form div.moreNetwork #moreNetworkSeeAll li { height:108px; } form div.moreNetwork #moreNetworkSeeAll li a { padding-bottom: 4px; } div.moreNetwork #moreNetworkSeeAll li img { display:block; margin:0 20px 4px 20px; } div.moreNetwork #moreNetworkSeeAll li label { display:block; text-align: left; padding: 1px 10px; margin: 0; line-height: 1; white-space: nowrap; } #contentGroup div.moreNetwork label.footClear { display: block; margin-bottom: 0; border-top: 1px solid #fff; padding-top: 20px; text-align: right; } /* /my network: see all */ /* my network: manage */ #mainContent #nwReq li { margin-top:25px; padding:25px 0 0 55px; position:relative; border-top:1px solid #666; } #mainContent #nwReq li#nwReqIntro { border:none; padding:0 15px; } #mainContent #nwReq li h4 small { font-weight:normal; font-size:0.9em; text-transform:none; } #mainContent #nwReq li img { position:absolute; top:34px; left:0; } #mainContent #nwReq li div img { position:static; } #mainContent #nwReq li div { margin:10px 0; padding:10px 20px; background:#f0f0f0; border:1px solid #c7c7c7; } #mainContent #nwReq li span { display: block; white-space:nowrap; } #mainContent #nwReq li span input { margin-top:10px; } #mainContent #nwManage #nwManageAdd { height:auto; border-bottom:1px solid #fff; margin:0 -50px 15px -50px; padding:0 50px 20px 50px; } #mainContent #nwManage input.inputTypeSubmit { margin:10px 0 10px 300px; } #mainContent #nwManageAdd input.inputTypeSubmit { margin-left:355px; } #mainContent #nwManage li { position:relative; height:60px; padding-left:55px; } #mainContent #nwManage li img { float: left; margin: 0 15px 5px 0; } #mainContent #nwManage li select { clear: both; margin:10px 0 4px 0; } #mainContent #nwManage li label { font-size:0.9em; padding:0; margin:0; } /* /my network: manage */ /* /my network */ /* my network hub */ #myNetworkHub #comments { margin-top:0; } #myNetworkHub #postListHub, #myNetworkHub #postListHub dt, #myNetworkHub #postListHub dd { margin:10px 8px 10px 8px; } #myNetworkHub #postListHub dt, #myNetworkHub #postListHub dd { position:relative; padding:15px 26px 3px 78px; } #myNetworkHub #postListHub dt { margin-top:15px; margin-bottom:0; font-size:1.2em; font-weight:bold; } #myNetworkHub #postListHub dd { padding-top:0; margin-top:0; margin-bottom:15px; font-size:1.1em; } /* CIC IMAGE WIDTH FIX */ #myNetworkHub #postListHub dd.postVisitor img { max-width: 308px; } #myNetworkHub #postListHub dd.postNote { padding-left:30px; } #myNetworkHub #postListHub dt.postOwner, #myNetworkHub #postListHub dd.postOwner { background:#f8f8f8; border:1px solid #999; } #myNetworkHub #postListHub dt.postOwner { border-bottom:none; } #myNetworkHub #postListHub dd.postOwner { border-top:none; } #myNetworkHub #postListHub dt img { position:absolute; top:15px; left:15px; z-index:10; } #myNetworkHub #postListHub dt span { display:block; margin:0 0 5px 0; padding:0 0 3px 0; border:1px solid #aaa; border-width:0 0 1px 0; } #myNetworkHub #postListHub dt a.delLink { position:absolute; top:15px; right:30px; height:13px; width:12px; overflow:hidden; text-indent:-1000em; background:transparent url(../img/icons/icon_close.gif) center center no-repeat; } #myNetworkHub #postListHub dd a.commentLink { display:block; clear:both; margin-bottom:1em; text-align:right; } #myNetworkHub #postListHub dd p { margin:0 0 1.1em 0; } #myNetworkHub #postListHub dd a.ffwAdded { float:left; margin:0 10px 7px 0; border:1px solid #f90; } #myNetworkHub #postListHub dd a.ffwAdded:hover { border-color:#000; } #myNetworkHub #postListHub dd a.ffwAdded img { display:block; border:1px solid #fff; } #myNetworkHub #postListHub dd object { clear:both; margin:0 -26px 7px -78px; } #myNetworkHub #postListHub dd object:first-child { margin-top:20px; } /* /my network hub */ /* member tools */ #contentGroup div.formTools table tbody th { vertical-align:top; padding-top:0.25em; } #formToolsPrefs #draftFilmList { margin:0; padding:0; background:none; } #formToolsPrefs #draftFilmList li { margin:0 0 5px 0; padding:0; } /* (/6.9) ---------------------- /MEMBER PROFILE ---------------------------- */ /* (6.10) ----------------------- WEB FEEDS PAGE ---------------------------- */ #feedMainContent h3 { font-size:1.5em; } #feedMainContent h4 { margin:2em 0 0 0; } #feedMainContent h5 { margin-bottom:0; } #feedMainContent h6 { font-weight:normal; margin-bottom:0; } #feedMainContent ul { margin:0 0 0 1.5em; padding:0; list-style:none; } #feedMainContent li { margin:0; padding:0; list-style:none; } #feedMainContent ul ul { margin:0; } #feedMainContent li li { display:inline; padding-left:1.5em; } #feedMainContent li ul li:first-child { padding:0; } #feedMainContent li ul li:first-child img { margin-bottom:1px; } #feedMainContent h4+p, #feedMainContent h5+p { margin-top:0; } /* (/6.10) --------------------- /WEB FEEDS PAGE ---------------------------- */ /* (6.11) ----------------------- BLOG POST SPECIFIC ---------------------------- */ .blogFullLink { position: relative; text-align: center; margin: 0; padding: 0; top: 14px; font-size: 15px; } .blogFullLink a, .blogFullLink a:visited { color: #FF6600; } .blogFullLink a:hover { text-decoration: underline; } /* (/6.11) ----------------------- /BLOG POST SPECIFIC ---------------------------- */ /* (/6) =================== /PAGE-SPECIFIC OVERRIDES ======================== */