/* layout.css This document contains elements that are used on every page and are *not* page specific. They contain basic style elements as well as host of positioning elements. **warning**: changing styles in this stylesheet may effect ALL pages */ /* Basic HTML Elements - The "*" resets all elements throughout the website so that we don't have to worry about margins/paddings and can start from scratch. The reason for the 62.5% font-size on the body tag is to equal out the EM font sizing. Ex) 1.2em = 12px */ * { margin: 0px; padding: 0px; } html { height: 100%; } body { background: #080807 url(/images/bg_body.gif) center repeat-y; font-size: 62.5%; height: 100%;} ul { list-style: none; } img { border: none; } a { color: #88440C; outline: none} a:hover { color: #BF7A19; } a span { display: none; } .share a span { display: inline; } a.returnto { display:block;text-align:right } #header_print, #footer_print { display: none; } /* Surrounding/Wrapping - These initial divisions allow for the page to become centered in the window cross browser, using a margin: 0px auto; A height of 100% is also set to allow for the #btm division to always stay anchored to the bottom of the window */ #wrapper { width: 798px; margin: 0px auto; height: 100%;} #container { width: 798px; height: 100%; padding: 0px 1px 0px 1px; position: absolute; font: normal 1.1em Verdana,Arial; color: #949494; } /* Top Area - This houses two sides, the left side being #nav and the right side being #header They are split up into two different styles for this website, as the homepage has a taller #top section, and all sub-pages have a shorter one. This will be defined by "pg_home" and "pg_base" */ #top { width: 798px; float: left; position: relative; z-index: 2} /* Navigation */ #nav ul.tier1 { margin: 73px 0px 0px 12px; } #nav ul.tier1 li { float: left; cursor: pointer; } #nav ul.tier1 a.t1 { display: block; width: 113px; height: 35px; cursor: pointer } /* Below navigation is only used for the homepage, due to its unique image and height */ .pg_home #nav { background: url(/images/bg_nav_home3.jpg) right no-repeat; float: left; width: 124px; height: 531px;} .pg_base #nav { background: url(/images/bg_nav_base2.jpg) right no-repeat; float: left; width: 124px; height: 447px;} .pg_media #nav { background: url(/images/bg_nav_media.jpg) right no-repeat; float: left; width: 124px; height: 447px;} li.home a.t1 { background: url(/images/nav/down/btn_home-trans.png) no-repeat; } li.about a.t1 { background: url(/images/nav/down/btn_about-trans.png) no-repeat; margin-top: 1px} li.music a.t1 { background: url(/images/nav/down/btn_music-trans.png) no-repeat; margin-top: 1px} li.media a.t1 { background: url(/images/nav/down/btn_media-trans.png) no-repeat; margin-top: 1px} li.image_gallery a.t1 { background: url(/images/nav/down/btn_gallery-trans.png) no-repeat; margin-top: 1px} li.private_events a.t1 { background: url(/images/nav/down/btn_private-trans.png) no-repeat; margin-top: 1px} li.fave_links a.t1 { background: url(/images/nav/down/btn_favelinks-trans.png) no-repeat; margin-top: 1px} li.myspace a.t1 { background: url(/images/nav/down/btn_myspace-trans.png) no-repeat; margin-top: 1px} li.contact a.t1 { background: url(/images/nav/down/btn_contact-trans.png) no-repeat; margin-top: 2px} li.home:hover a.t1, li.home a.t1:hover { background: url(/images/nav/hover/btn_home-trans.png) no-repeat; } li.about:hover a.t1, li.about a.t1:hover { background: url(/images/nav/hover/btn_about-trans.png) no-repeat; margin-top: 1px} li.music:hover a.t1, li.music a.t1:hover { background: url(/images/nav/hover/btn_music-trans.png) no-repeat; margin-top: 1px} li.media:hover a.t1, li.media a.t1:hover { background: url(/images/nav/hover/btn_media-trans.png) no-repeat; margin-top: 1px} li.image_gallery:hover a.t1, li.image_gallery a.t1:hover { background: url(/images/nav/hover/btn_gallery-trans.png) no-repeat; margin-top: 1px} li.private_events:hover a.t1, li.private_events a.t1:hover { background: url(/images/nav/hover/btn_private-trans.png) no-repeat; margin-top: 1px} li.fave_links:hover a.t1, li.fave_links a.t1:hover { background: url(/images/nav/hover/btn_favelinks-trans.png) no-repeat; margin-top: 1px} li.myspace:hover a.t1, li.myspace a.t1:hover { background: url(/images/nav/hover/btn_myspace-trans.png) no-repeat; margin-top: 1px} li.contact:hover a.t1, li.contact a.t1:hover { background: url(/images/nav/hover/btn_contact-trans.png) no-repeat; margin-top: 2px} .pg_home li.home a.t1, .pg_home li.home a.t1:hover { background: url(/images/nav/up/btn_home-trans.png) no-repeat; } .pg_about li.about a.t1, .pg_about li.about:hover a.t1, .pg_about li.about a.t1:hover { background: url(/images/nav/up/btn_about-trans.png) no-repeat; } .pg_music li.music a.t1, .pg_music li.music:hover a.t1, .pg_music li.music a.t1:hover { background: url(/images/nav/up/btn_music-trans.png) no-repeat; } .pg_media li.media a.t1, .pg_media li.media:hover a.t1, .pg_media li.media a.t1:hover { background: url(/images/nav/up/btn_media-trans.png) no-repeat; } .pg_gallery li.image_gallery a.t1, .pg_gallery li.image_gallery:hover a.t1, .pg_gallery li.image_gallery a.t1:hover { background: url(/images/nav/up/btn_gallery-trans.png) no-repeat; } .pg_events li.private_events a.t1, .pg_events li.private_events:hover a.t1, .pg_events li.private_events a.t1:hover { background: url(/images/nav/up/btn_private-trans.png) no-repeat; } .pg_links li.fave_links a.t1, .pg_links li.links:hover a.t1, .pg_links li.fave_links a.t1:hover { background: url(/images/nav/up/btn_favelinks-trans.png) no-repeat; } .pg_contact li.contact a.t1, .pg_contact li.contact:hover a.t1, .pg_contact li.contact a.t1:hover { background: url(/images/nav/up/btn_contact-trans.png) no-repeat; } /* Subnav Information */ ul.tier1 .bg {display: none;behavior: url(/App_Css/iepngfix.htc); position: absolute; } ul.tier1 ul.tier2{ display: none; position: absolute; padding: 16px 0px 0px 20px; } ul.tier2 li { clear: left; float: left; } ul.tier2 a.t2 { display: block; height: 15px; } /* Subnav Setup */ li.about .bg { top: 80px; left: 60px; width: 130px; height: 90px; background: url(/images/nav/bg_subnav_about.png) no-repeat; } li.about ul.tier2 { top: 80px; left: 60px; } li.music .bg { top: 135px; left: 60px; width: 130px; height: 68px; background: url(/images/nav/bg_subnav_music.png) no-repeat; } li.music ul.tier2 { top: 135px; left: 60px; } li.private_events .bg { top: 235px; left: 60px; width: 151px; height: 68px; background: url(/images/nav/bg_subnav_events.png) no-repeat; } li.private_events ul.tier2 { top: 235px; left: 60px; } /* Subnav Down states for subnav */ li.about ul.tier2 li.about_bio a.t2 { background: url(/images/nav/subnav_about_bio.gif) no-repeat; width: 20px;} li.about ul.tier2 li.about_news a.t2 { background: url(/images/nav/subnav_about_news.gif) no-repeat; width: 88px; margin-top: 5px} li.about ul.tier2 li.about_credits a.t2 { background: url(/images/nav/subnav_about_credits.gif) no-repeat; width: 46px; margin-top:5px} li.music ul.tier2 li.music_originals a.t2 { background: url(/images/nav/subnav_music_originals.gif) no-repeat; width: 59px; margin-top: 0px} li.music ul.tier2 li.music_covers a.t2 { background: url(/images/nav/subnav_music_covers.gif) no-repeat; width: 44px; margin-top: 5px} li.private_events ul.tier2 li.events_simon a.t2 { background: url(/images/nav/subnav_events_simon.gif) no-repeat; width: 106px;} li.private_events ul.tier2 li.events_testimonials a.t2 { background: url(/images/nav/subnav_events_testimonials.gif) no-repeat; width: 81px; margin-top: 5px} /* Subnav Hover states for subnav */ li.about ul.tier2 li.about_bio a.t2:hover { background: url(/images/nav/subnav_about_bio_h.gif) no-repeat; } li.about ul.tier2 li.about_news a.t2:hover { background: url(/images/nav/subnav_about_news_h.gif) no-repeat; } li.about ul.tier2 li.about_credits a.t2:hover { background: url(/images/nav/subnav_about_credits_h.gif) no-repeat; } li.music ul.tier2 li.music_originals a.t2:hover { background: url(/images/nav/subnav_music_originals_h.gif) no-repeat; } li.music ul.tier2 li.music_covers a.t2:hover { background: url(/images/nav/subnav_music_covers_h.gif) no-repeat; } li.private_events ul.tier2 li.events_simon a.t2:hover { background: url(/images/nav/subnav_events_simon_h.gif) no-repeat; } li.private_events ul.tier2 li.events_testimonials a.t2:hover { background: url(/images/nav/subnav_events_testimonials_h.gif) no-repeat; } /* Hovering trigger for the different subnavs */ li.about:hover ul.tier2 { display: block; } li.about:hover .bg { display: block; } li.music:hover ul.tier2 { display: block; } li.music:hover .bg { display: block; } li.private_events:hover ul.tier2 { display: block; } li.private_events:hover .bg { display: block; } li.sfhover ul.tier2 { display: block;} li.sfhover .bg { display: block;} /* Header Area - This changes throughout the website, for each tier-1 index page. See styles.css for more details on each specific section */ #header { float: left; width: 673px; } #header a.home { position: absolute; right: 30px; top: 160px; width: 330px; height: 100px; } #header p { display: none; } .pg_base #header { height: 447px; } /* Content Area - This houses the actual content for the website. All classes are unique to the individual page they reside in. To view each page's individual styles see styles.css for more details on each specific section */ #content { clear: left; float: left; width: 754px; padding: 10px 20px 10px 20px; position: relative; z-index: 2; background: url(/images/bg_content.gif) 0px 0px repeat-y;} #content h1 { margin-bottom: 5px; } #content p { margin: 0px 0px 5px 10px; } #content p.rightlink { text-align: right; } /* Bottom Area - This area allows the copyright and secondary navigation to always remain at the bottom of the website. If the window begins to close, the #btm information will slide under the #content and #top sections. */ /*#btm { position: absolute; bottom: 0px; z-index: 10; padding: 20px; width: 100%} */ #btm { float: left; width: 774px; padding: 20px; } #btm ul { float: left; margin-top: 1px; } #btm li { float: left; border-right: 1px solid #5F3012; padding-bottom: 2px; margin-right: 5px; padding-right: 5px; line-height: 8px} #btm li.last { border: none; } #btm a { color: #5F3012; font-size: 10px } #btm a:hover { color: #7F4117; } #btm h2 { float: right; font-size: 10px; white-space: nowrap; color: #5F3012; font-weight: normal; margin-right: 16px; display: inline; line-height: 16px; } a.icon { float: left; display: block; } a.icon { opacity: .75; float: left; display: block; filter: alpha(opacity=75); #} a.icon:hover { opacity: 1; filter: alpha(opacity=100); #}