/***** COLORS Blues #339 => anchors, default #77B =>

s, most dividers & borders, copyright text #99C => nav item borders #AAD => schedule

s #EEF => blue callouts Greens #393 =>

s,
s, many pieces of highlighted text #ADA => nav menu items, schedule

s #CEC => nav submenu bottom borders, schedule

s #F30 Bright Red => Page headers, some in-page elements #A26FC2 Purple => Top and bottom borders, in logo #555 Grey => Quote attributions *****/ /********** BASE STYLES **********/ body { font:75%/1.6 verdana,lucida,helvetica,arial,sans-serif; } input, textarea, select { font:100%/2 verdana,lucida,helvetica,arial,sans-serif; vertical-align:middle; } select { border:1px solid #339; background:#EEF; } p, ul, ol, blockquote { margin:.25em 0 1em; } blockquote { padding:0 2.5em; } cite { font-style:italic; display:block; margin-left:4em; color:#555; font-size:90%; } ul { list-style:url(/images/bits/bullet.gif); padding-left:25px; } h1, h2, h3, h4, h5, h6 { margin:1em 0 .1em; } h3 { color:#393; font-size:110%; } h3 span { display:block; padding-left:2em; margin-top:-.3em; color:black; font-weight:normal; font-size:93%; } h4 { font-size:100%; } a { color:#339; } a img { border:0; } /*em { font-weight:bold; font-style:normal; color:#f30; }*/ hr { color:#77B; height:1px; border:none; border-top:1px solid #77B; clear:both; } del, ins { color:#F30; } del { text-decoration:line-through; } ins { text-decoration:underline; } code { font:108% courier,"courier new",monospace; } #container { margin:8px auto; width:770px; } #content { width:100%; } #content_main { float:right; width:570px; } #content_sub { float:left; width:180px; margin-right:20px; } #content_sub p { font-size:93%; } /* Elements without margin/padding */ body, #nav ul, #nav li, #schedule #title, .tracklist, blockquote p { margin:0; } body, #nav, #nav ul, #nav li, blockquote p { padding:0; } /********* NAV STYLES *********/ /* Image-replacement and nav lists common styles */ #nav, #nav ul, #nav_sub, form ul { list-style:none outside none; } #nav span, h1 span, div.buybutton span { position:absolute; top:0; left:0; width:100%; height:100%; } #nav li, #nav a, h1, .buybutton a { display:block; position:relative; } #nav a, form li, #title, h1, .buybutton a { overflow:hidden; } /*Base Nav Styles*/ #nav { height:35px; margin:5px 0 20px; } /*Top level buttons*/ #nav li { float:left; height:35px; border:1px solid #99C; border-width:0 1px 0 0; white-space:nowrap; } #nav .last { border:none; } /*Drop-down lists*/ #nav ul { position:absolute; top:35px; left:-999em; z-index:100; } #nav li:hover ul, #nav li.sfhover ul { left:0; } /*Drop-down list items*/ #nav li li { float:none; height:auto; width:100%; background:#ADA; border:none; border-bottom:1px solid #CEC; } /*Link styling*/ #nav a { height:100%; } #nav ul a { text-decoration:none; padding:2px 6px; } #nav ul a:hover { background:#CEC; border:1px solid #393; padding:1px 5px; } /* CSS Sprites position change */ #nav li:hover span, #nav li.sfhover span, #nav li.pressed span { background-position:0 -100px; } /* Nav Image Replacement */ #nvab { width:83px; } #nvab span { background:url(/images/nav/sn_about.png); } #nvab li { min-width:83px; } #nvsc { width:108px; } #nvsc span { background:url(/images/nav/sn_schedule.png); } #nvst { width:79px; } #nvst span { background:url(/images/nav/sn_store.png); } #nvst li { min-width:79px; } #nvbk { width:104px; } #nvbk span { background:url(/images/nav/sn_booking.png); } #nvbk li { min-width:104px; } #nvbg { width:73px; } #nvbg span { background:url(/images/nav/sn_blog.png); } #nvbg li { min-width:73px; } #nvlp { width:142px; } #nvlp span { background:url(/images/nav/sn_learn_to_play.png); } #nvlp li { min-width:142px; } #nvlk { width:77px; } #nvlk span { background:url(/images/nav/sn_links.png); } #nvco { width:97px; } #nvco span { background:url(/images/nav/sn_contact.png); } /* Local Nav Styles */ #nav_sub { background:#CEC; padding:10px; margin:0 0 1em; border:2px solid #77B; border-width:2px 0; } #nav_sub li { text-align:right; line-height:2em; } #nav_sub .pressed { background:url(/images/bits/arrow_red-rt.gif) no-repeat right center; padding-right:10px; font-weight:bold; } #nav_sub a { text-decoration:none; } #nav_sub a:hover { font-weight:bold; color:#393; } /**************** TITLE AREA STYLES ****************/ #title { border-bottom:1px solid #77B; margin-bottom:1em; height:32px; color:#F30; } h1, #title h2 { height:100%; line-height:26px; float:left; margin:0 .1em .1em 0; z-index:-1; } h1 span { z-index:0; } h2 { color:#77B; font-size:133.33%; } #title h2 { padding-left:17px; background:url(/images/hdrs/colon.png) no-repeat left; } /* Title image-replacement */ #about h1 { width:62px; } #about h1 span { background:url(/images/hdrs/about.png); } #schedule h1 { width:94px; } #schedule h1 span { background:url(/images/hdrs/schedule.png); } #store h1 { width:57px; } #store h1 span { background:url(/images/hdrs/store.png); } #booking h1 { width:89px; } #booking h1 span { background:url(/images/hdrs/booking.png); } #blog h1 { width:49px; } #blog h1 span { background:url(/images/hdrs/blog.png); } #learn_to_play h1 { width:136px; } #learn_to_play h1 span { background:url(/images/hdrs/learn_to_play.png); } #links h1 { width:53px; } #links h1 span { background:url(/images/hdrs/links.png); } #contact h1 { width:81px; } #contact h1 span { background:url(/images/hdrs/contact.png); } #error h1 { width:199px; } #error h1 span { background:url(/images/hdrs/404.png); } /****** CLASSES ******/ .divider { border-top:1px solid #77B; margin-top:1em; padding-top:1em; clear:both; } .note { font-size:93%; } .left, .right { text-align:center; } .left { float:left; margin:0 10px 10px 0; } .right { float:right; margin:0 0 10px 10px; } .topLink { clear:both; float:right; color:#F30; margin-top:1em; } #quotes, #side_info { text-align:center; margin-top:30px; } #quotes p { color:#393; } #quotes p em { font-weight:normal; } .callout { font-size:120%; background:#EEF; border:1px solid #77B; padding:1.5em 2em 1em; margin-bottom:2em; } .callout table { width:100%; } .callout td { width:33.33%; } .giftorder { text-align:left; background-color:#EEF; padding:1px 8px; } .red { color:#F30; } /******************* PAGE-SPECIFIC STYLES *******************/ /* About */ /* Photos */ #photos { margin:1em 0; font-size:93%; } #photos td { vertical-align:top; padding:0 5px 15px 0; white-space:nowrap; } #photos td p { margin-top:0; } /* Schedule */ #schedule hr { margin:3px 0 0; } #schedule h2, #schedule h3 { clear:both; padding:3px 8px; margin:1em 0 .5em; color:white; } #schedule h2 { background:#AAD; font-size:150%; } #schedule h3 { background:#ADA; } #nav_year { line-height:2.25em; border-bottom:1px solid #77B; padding-bottom:3px; margin-bottom:20px; } .item { clear:both; border-bottom:1px solid #77B; padding:15px 0 10px; overflow:hidden; } .item div { display:inline; float:left; } .details { width:200px; margin-right:20px; font-size:93%; } .content { width:550px; } /* Store */ /* Product Pages */ .image, .descrip { float:left; padding:1.5em 0; border-top:1px solid #77B; } .image { clear:both; text-align:center; width:120px; padding-right:20px; } .image img, .image a { display:block; } .descrip { width:430px; padding-top:1.2em; } .descrip h3, h3.descrip { margin-top:0; } .descrip a { font-weight:bold; white-space:nowrap; } .noborder { border:none; } .buybutton { font-weight:bold; color:#339; padding:4px 6px 1px; margin-bottom:1em; border:1px solid #339; line-height:23px; } .buybutton, div.buybutton a { display:inline-block; vertical-align:middle; } form.buybutton span { padding-left:12px; margin-left:6px; background:url(/images/bits/bullet.gif) left no-repeat; } form.buybutton .submit { margin-left:6px; } div.buybutton a { width:102px; height:26px; margin-left:6px; } div.buybutton span { background:url(/images/bits/addtocart.gif) no-repeat; } /* Lyrics */ h3 span { display:block; padding-left:2em; margin-top:-.3em; color:black; font-weight:normal; font-size:87.5%; } .lyrics { white-space:pre-wrap; margin-top:1em; } .handmotions { width:100%; } .handmotions td { vertical-align:top; width:50%; border:0; padding-right:1em; } /* Blog */ #blog #title { border:none; margin:0; } #blog .callout { padding-top:.5em; } #blog .lyrics { padding-left:2em; } /* Contact */ form li { padding:.25em; min-height:2em; } label { display:block; width:12em; padding-right:.5em; float:left; clear:both; text-align:right; } #contact span { display:block; float:left; } span label { display:inline; float:none; clear:none; } input, textarea { clear:both; } #submit { clear:both; margin-left:12.5em; } /* Footer */ #footer { margin-top:1em; clear:both; background:url(/images/bits/footer_line.gif) repeat-x; position:relative; height:51px; } .copy { font-size:93%; color:#77B; line-height:1.5em; position:absolute; right:0; bottom:0; } .copy a { text-decoration:none; } .copy a:hover { text-decoration:underline; }