/* ------WIGOLIA DESIGN------ TITLE: wayfarers and company AUTHOR: scott robertson (scott@wigolia.com) DATE: 03.01.09 VERSION: 2.0 "Stylesheet for Standards Compliant Broswers" -------------------------- */ /* --------- RESET ------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;} ol, ul { list-style: none; } .important { display: none; } /* --------- DOCUMENT ------------------ */ body { line-height: 1.8; min-width: 900px; max-width: 1000px; background: #39210a url(/images/bg.jpg) repeat; margin: 0 auto; } #access { position: absolute; top: -9999px; } /* --------- HEADER ------------------ */ #header { height: 200px; background: #6e4a29 url(/images/header_bg.jpg) repeat-x 0 0em; /* background: #6e4a29 url(/images/header_bg.jpg) repeat-x 0 2em; */ /* padding: 3em 0 0 0; position: relative; */ padding: 0em 0 0 0; position: relative; } /* --------- branding -- */ #branding { height: 200px; background: url(/images/branding_bg.png) no-repeat 12% 50%;} h1 { height: 200px; color: #ffedc7; text-indent: -9999px; background: url(/images/branding_h1.png) no-repeat 88% 50%; } #h-icon { text-indent: -999px; position: absolute; top: 10px; left: 35px; } #h-icon a { display: block; width: 21px; height: 22px; background: url(/images/home.png) no-repeat 0 0; } #h-icon a:hover { opacity: .8; } /* --------- nav-main -- */ #nav-main { text-transform: lowercase; background: #fff9ee; text-align: center; padding: 10px 0; } #nav-main li { display: inline; padding: 0 2%; } #nav-main a:link { font: bold small-caps .9em Georgia, Arial, sans-serif; color: #3b250d; text-decoration: none; } #nav-main a:visited { font: bold small-caps .9em Georgia, Arial, sans-serif; color: #3b250d; text-decoration: none; } #nav-main a:hover { font: bold small-caps .9em Georgia, Arial, sans-serif; color: #bc9b61; text-decoration: none; } #nav-main a:active { font: bold small-caps .9em Georgia, Arial, sans-serif; color: #bc9b61; text-decoration: none; } /* --------- nav-sub -- */ #nav-sub { padding: .5em 3% .5em 0; text-transform: lowercase; font: bold small-caps .9em Georgia, Arial, sans-serif; color: #735443; letter-spacing: 1px; background: #fff9ee; position: absolute; top: 0; height: 2em; width: 97%; text-align: right; } #nav-sub #c-icon { position: absolute; right: 150px; top: 10px; vertical-align: middle; } #nav-sub #n-icon { position: absolute; right: 25px; } #nav-sub:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #nav-sub a:link { text-decoration: none; color: #735443; } #nav-sub a:visited { text-decoration: none; color: #735443; } #nav-sub a:hover { text-decoration: none; color: #bc9b61; } #nav-sub a:active { text-decoration: none; color: #bc9b61; } /* --------- CONTENT ------------------ */ #content { background: #fff9ee; padding: 3em 40px 30px 40px; } #content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #content p { font: normal 1em/1.8 "Goudy Old Style", Georgia, serif; } h1, h2, h3 { font-family: 'Adobe Garamond Pro'; color: #53191a; text-transform: uppercase; } /* --------- content-main -- */ #front #content-main { background: #fff9ee; margin: 0 0 30px 0; } #front #content-main #intro { background: #d8cbb8 url(/images/pages_box_bg.png) no-repeat 12% -1%; padding: 40px 30px 30px 30px; } #front #content-main #intro p { line-height: 1.6; min-height: 225px; background: url(/images/intro_p_group_photo.jpg) no-repeat 95% top; padding-right: 42%; } #front #content-main .section { margin-bottom: 30px; padding: 10px; } #front #content-main h2 { font-size: 1.5em; letter-spacing: 2px; margin-bottom: 10px; } #front #content-main #feature { background: #fff9ee; padding: 0; } #front #content-main #feature h2 { font-size: 1.2em; letter-spacing: 0px; } #front #content-main #release { background: #c3bdb2 url(/images/trimmed_thumb.jpg) no-repeat 5% 30px; margin-right: 2%; float: left; width: 52%; min-height: 12em; padding: 30px 3%; } #front #content-main #release p { padding-left: 159px; } #front #content-main #release h2 { padding-left: 159px; } #front #content-main #bookings { background: #c3bdb2 url(/images/bookings_clip.jpg) no-repeat 7% 70px; margin-left: 2%; float: left; width: 32%; min-height: 12em; padding: 30px 3%; } #front #content-main #bookings p { padding-left: 113px; } #front #content-main #feature:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #front #content-main #release ul { width: 262px; margin-left: 159px; } #front #content-main #release li { font-size: .9em; letter-spacing: 1px; margin: 20px 20px 0 20px; text-align: center; float: left; padding: 5px 5px; width: 81px; height: 19px; background: #613C1F url(/images/recordings_button.jpg); } #front #content-main #release ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #front #content-main #release li a:link { text-decoration: none; color: #fff9ee; } #front #content-main #release li a:visited { text-decoration: none; color: #fff9ee; } #front #content-main #release li a:hover { text-decoration: none; color: #bc9b61; } #front #content-main #release li a:active { text-decoration: none; color: #fff9ee; } #shows #content-main #upcoming { padding: 30px 3%; margin-left: 2%; margin-top: 10px; float: right; height: auto; width: 22%; background: url(/images/upcoming_bg.jpg) repeat 0 0; } #shows #content-main #next_show { background: #d8cbb8 url(/images/pages_box_bg.png) no-repeat 12% -1%; padding: 40px 3% 30px 3%; margin-right: 2%; float: left; width: 62%; min-height: 245px; } #shows #content-main #next_show h2 { font-size: 1.1em; letter-spacing: 2px; margin-bottom: 10px; } #shows #content-main #next_show h3 { font-weight: bold; margin: 10px 0; color: #361B00; text-transform: none; } #shows #content-main h4 { font: normal 1.2em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3b250d; margin: 10px 0; } #shows #content-main #upcoming h3 { margin-bottom: 10px; text-align: center; } #shows #content-main #upcoming dd { margin-bottom: 10px; } #shows #content-main #intro:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #shows #content-main { margin: 0 0 30px 0; } #about #content-main #intro { background: #d8cbb8 url(/images/pages_box_bg.png) no-repeat 12% -1%; padding: 40px 30px 30px 30px; line-height: 1.6; margin-bottom: 30px; } #about #content-main h2 { font-size: 1.2em; letter-spacing: 2px; margin-bottom: 10px; background: url(/images/section_hr.gif) no-repeat 0 1.9em;} #about #content-main #biographies { padding: 0 30px; } #about #content-main #biographies h2 { padding: 10px 0; } #about #content-main #biographies dl { margin-top: 20px; } #about #content-main dl dt+dd { float: left; padding-right: 20px; position: relative; top: -1.2em; } #about #content-main dl dt { font: bold small-caps 1.1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3b250d; clear: both; padding-left: 135px; } #about #content-main dl dd+dd { margin: 5px 0 30px 0; line-height: 1.6; } #about #content-main dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #about #content-main .drop { margin-bottom: 25px; } #bookus #content-main #intro { background: #d8cbb8 url(/images/pages_box_bg.png) no-repeat 12% -1%; padding: 40px 30px 30px 30px; line-height: 1.6; margin-bottom: 10px; } #bookus #content-main #reviews { float: right; width: 40%; margin-top: 20px; } #bookus #content-main #book_us { padding-right: 5%; float: left; width: 45%; } #bookus #content-main #book_us h2 { font-size: 1.2em; letter-spacing: 2px; margin-bottom: 10px;} #bookus #content-main #intro:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #bookus #content-sub:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #bookus blockquote p { font-size: 1.5em; font-style: italic; } #bookus blockquote p:after, #bookus blockquote p:before { content: '"'; color: #53361a; } #bookus cite { display: block; text-align: right; margin: 0 0 0 0; color: #C54E03; font-style: normal; } #bookus #bookform { padding: 30px 3%; margin-right: 2%; float: left; width: 47%; } #bookus #details { padding: 30px 3%; margin-left: 2%; float: right; width: 37%; } #bookus #content-sub h3 { padding: 10px 0; background: url(/images/section_hr.gif) no-repeat 0 1.9em; font-size: 1.2em; letter-spacing: 2px; } #bookus #content-sub:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #bookus #details .org { text-transform: none; font: bold small-caps 1.1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3b250d; } #bookus #bookform legend { margin-bottom: 10px; font-family: 'Adobe Garamond Pro'; color: #53191a; text-transform: uppercase; } #bookus #details .adr span { display: block; } #bookus #details p { margin-top: 30px; } #bookus #bookform p { margin-bottom: .9em; } #bookus #bookform label, #bookform label span { display: block;} #bookus #bookform label { margin: .9em 0; } #req_name, #req_email, #req_reply, #req_telephone, #req_date { width: 90%; } .org, .adr, .email { margin: 20px 0;} #music #content-main #intro { background: #d8cbb8 url(/images/pages_box_bg.png) no-repeat 12% -1%; padding: 40px 30px 30px 30px; line-height: 1.6; margin-bottom: 30px; } #music #content-main h2 { font-size: 1.2em; letter-spacing: 2px; margin-bottom: 10px; } #music #content-main #instruments h2 { padding: 10px 0; background: url(/images/section_hr.gif) no-repeat 0 1.9em; } #music #content-main #instruments { padding: 0 30px; } #music #content-main #instruments dl { margin-top: 20px; } #music #content-main dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #music #content-main dl dt+dd { float: left; padding-right: 20px; position: relative; top: -1.2em; } #music #content-main dl dt { font: bold small-caps 1.1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3b250d; clear: both; padding-left: 135px; } #music #content-main dl dd+dd { margin: 5px 0 50px 0; line-height: 1.6; } #music #content-main .drop { padding-left: 135px; margin-bottom: 25px; } #recordings #content-main #intro { background: #d8cbb8 url(/images/pages_box_bg.png) no-repeat 12% -1%; padding: 40px 30px 30px 30px; line-height: 1.6; margin-bottom: 30px; } #recordings #content-main #intro p { line-height: 1.6; min-height: 200px; background: url(/images/trimmed_large.jpg) no-repeat 95% top; padding-right: 35%; } #recordings #content-main #intro span { margin-top: 10px; display: block; } #recordings #content-main h2 { font-size: 1.2em; letter-spacing: 2px; margin-bottom: 10px; } #recordings #reviews { width: 65%; margin: 0 auto; } #recordings blockquote p { font-size: 1.5em; font-style: italic; } #recordings blockquote p:after, #recordings blockquote p:before { content: '"'; color: #53361a; } #recordings cite { display: block; text-align: right; margin: 20px 0 0 0; color: #C54E03; font-style: normal; } #recordings #content-main #discography { padding: 0 30px; } #recordings #content-main #discography h2 { padding: 10px 0; background: url(/images/section_hr.gif) no-repeat 0 1.9em; } #recordings #content-main #discography dl { margin-top: 20px; } #recordings #content-main dl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #recordings #content-main dl dt { font: bold small-caps 1.1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3b250d; clear: both; padding-left: 165px; margin-bottom: 5px;} #recordings #content-main dl dt a { text-transform: lowercase; } #recordings #content-main dl dt+dd { float: left; padding-right: 20px; position: relative; top: -1.2em; } #recordings #discography ol { list-style: decimal; padding-left: 185px; } #recordings #discography ol li { padding: 0; } #contact #content-main #intro { background: #d8cbb8 url(/images/pages_box_bg.png) no-repeat 12% -1%; padding: 40px 30px 30px 30px; line-height: 1.6; margin-bottom: 10px; } #contact #content-main #intro h2 { font-size: 1.2em; letter-spacing: 2px; margin-bottom: 10px;} #contact #contactform { padding: 30px 3%; margin-right: 2%; float: left; width: 47%; } #contact #details { padding: 30px 3%; margin-left: 2%; float: right; width: 37%; } #contact #content-sub h3 { padding: 10px 0; background: url(/images/section_hr.gif) no-repeat 0 1.9em; font-size: 1.2em; letter-spacing: 2px; } #contact #content-sub:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #contact #details .org { text-transform: none; font: bold small-caps 1.1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3b250d; } #contact #details .adr span { display: block; } #contact #contactform label, #contactform label span { display: block;} #contact #details p { margin-top: 30px; } #contact #contactform p { margin-bottom: .9em; } #contact #contactform label, #bookform label span { display: block;} #contact #contactform label { margin: .9em 0; } #artworks #gallery h3 { padding: 10px 0; background: url(/images/section_hr.gif) no-repeat 0 1.9em; font-size: 1.2em; letter-spacing: 2px; } #artworks #gallery ul li { display: inline; } #artworks #gallery ul li img { padding: 20px; } /* --------- content-sub -- */ #front #content-sub { background: #fff9ee; margin: 30px 0 0 0; } #front #content-sub h3 { font-size: 1.3em; text-transform: none; padding-left: 40px; margin-bottom: 20px; } #front #content-sub .section { float: left; background: url(/images/section_hr.gif) no-repeat 0 1.7em; } #front #shows, #front #news { width: 27%; margin: 0 4% 0 0; } #front #content-sub dd { margin-bottom: 10px; } #front #content-sub p { margin-top: 20px; } #front #shows h3 { background: url(/images/shows_icon.jpg) no-repeat 0 0; } #front #news h3 { background: url(/images/news_icon.jpg) no-repeat 0 0; } #front #artwork { width: 38%; } #front #artwork h3 { background: url(/images/artwork_icon.jpg) no-repeat 0 0; } #front #artwork p { padding-right: 155px; min-height: 136px; background: url(/images/artwork_photo.jpg) no-repeat 95% top; } #front #content-sub:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #shows #content-sub #photos { width: 50%; float: left; } #shows #photos img { width: 75px; } #shows #content-sub #reviews { width: 50%; float: right; } #shows #content-sub #photos ul { padding: 3px 0; } #shows #content-sub #photos li { display: inline; padding: 0px 3px; } #shows #content-sub:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #shows blockquote p { margin-top: 20px; font-size: 1.5em; font-style: italic; } #shows blockquote p:after, #shows blockquote p:before { content: '"'; color: #53361a; } #shows cite { display: block; text-align: right; margin: 20px 20px 0 0; color: #C54E03; font-style: normal; } #newspage #content-sub { background: #d8cbb8; float: right; width: 25%; padding: 20px 5% 800px 5%; } #newspage #content-sub ul li { padding: 5px 0; } #newspage #content-main { padding: 0 4%; float: left; width: 57%; } #newspage #content { margin-top: 30px; } #newspage #content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #newspage #content-main h2 { background: url(/images/section_hr.gif) no-repeat 0 1.3em; font-size: 1.2em; letter-spacing: 2px; padding-bottom: 15px;} #newspage h3 { padding: 10px 0; font-size: 1.2em; letter-spacing: 2px; } #newspage .date { font: bold normal 1.1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3b250d; margin-bottom: 5px; } #newspage .author { font: italic 1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; margin-bottom: 10px; } #newspage .entry p { margin: 10px 0; text-indent: 10px; } #newspage .entry .continue { margin: 10px 0 25px 0; text-indent: 0; } /* --------- OUR SONGS ------------------ */ #songs #content-main #our_songs h2 { font-size: 1.2em; padding: 10px 0; background: url(/images/section_hr.gif) no-repeat 0 1.9em; } .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #songs #content-main #our_songs img { position: absolute; top: 70px; right: 0; } #songs #content-main #our_songs div { clear: both; } #songs #content-main #our_songs .album { position: relative; min-height: 250px; padding: 10px 0; background: url(/images/section_hr.gif) no-repeat 0 1.9em; padding-top: 50px; } #songs #content-main #our_songs .album ul { margin-top: 15px; width: 70%; } #songs #content-main #our_songs .album li { margin-bottom: 20px; } #songs #content-main #our_songs .album:first-child { background: none; padding-top: 10px; } #songs #content-main #our_songs .album h3 { position: absolute; left: -9999px; } #songs #content-main #our_songs .album h4 { font: bold small-caps 1.1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3B250D; margin-bottom: 5px; } /* --------- TESTIMONIALS ------------------ */ #testimonials #content-main h2 { font-size: 1.2em; padding: 10px 0; } #testimonials #content-main .l_col h2 { background: url(/images/section_hr.gif) no-repeat 0 1.9em; } #testimonials .aside { text-align: center; padding: 30px 3%; margin-left: 2%; margin-top: 50px; float: right; height: auto; width: 22%; background: #D8CBB8 url(/images/pages_box_bg.png) no-repeat 12% -1%; } #testimonials .aside a:link, #testimonials .aside a:visited { font-size: .8em; text-decoration: none; font: bold small-caps 1.1em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3B250D; } #testimonials .aside a:hover, #testimonials .aside a:active { text-decoration: underline; } #testimonials .aside p { margin-bottom: 25px; } #testimonials .l_col { padding: 10px 3% 30px 3%; margin-right: 2%; float: left; width: 62%; min-height: 245px; } #testimonials .l_col li { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid #ccc; } #testimonials blockquote p { margin-bottom: 1em; } #testimonials .cite { display: block; text-align: left; color: #C54E03; } /* --------- FOOTER ------------------ */ #footer { background: #6e4a29; padding: 30px 40px; color: #3b250d; font-size: .8em; } #footer:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #footer a:link { color: #cebe86; letter-spacing: 1px; text-decoration: none; border-bottom: 1px dotted #e3d295; } #footer a:visited { color: #cebe86; letter-spacing: 1px; text-decoration: none; border-bottom: 1px dotted #e3d295; } #footer a:hover { color: #e3d295; letter-spacing: 1px; text-decoration: none; border-bottom: 1px dotted #e3d295; } #footer a:active { color: #cebe86; letter-spacing: 1px; text-decoration: none; border-bottom: 1px dotted #e3d295; } #footer li { padding: 2px 0; } #footer ul { margin-bottom: 10px; } /* --------- site-info -- */ #site-info { float: left; } #site-info h4 { margin: 0 0 10px 0; width: 203px; text-indent: -9999px; background: url(/images/site-info_h4.png) no-repeat 0 0; } #site-info li { display: inline; padding: 0 15px 5px 0; } #site-info #copyright { display: block; padding: 10px 0; } #site-info #design a { margin: 0 7px; } /* --------- nav-add -- */ #nav-add { float: right; width: 38%; } #nav-add h4 { margin: 0 0 5px 0; text-indent: -9999px; background: url(/images/nav-add_h4.png) no-repeat 0 0; } /* --------- NEWSLETTER ------------------ */ #newsletter { font-family: Georgia, "Times New Roman", serif; font-size: 1em; } #newsletter h2 { color: #fff4cb; background: #6e4a29; margin: 0 auto; text-align: center; font: 20px/30px Georgia, serif; text-transform: none; } #newsletter #intro p { margin: 20px auto 10px auto; width: 75%; padding: 15px 30px 20px 30px; background: #d8cbb8; position: relative;} #newsletter_form { width: 75%; margin: 10px auto; padding: 0 0 0 10%; } #newsletter_form fieldset { position: relative; top: -15px; } #newsletter_form p { margin-bottom: .9em; } #newsletter_form label, #newsletter_form label span { display: block;} #newsletter #req_name, #newsletter #req_email { width: 80%; } #newsletter_form legend { text-indent: -99999px; color: #824c55; font-weight: bold; margin-bottom: 10px; } #newsletter #send { margin: 15px 0; } #newsletter_valid #content-main { margin: 0 0; padding: 10px 0 0 0; width: 100%; } #newsletter_valid #content-main:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #newsletter_valid #content-main #intro { height: 93px; margin: 0 0; padding: 30px 0 0 0; z-index: 3; background: transparent url(..//site/images/contact_intro_bg.png) no-repeat 10px 0; } #newsletter_valid #content-main #intro h2 { margin: 0 10px 0 113px; padding: 0; height: 33px; text-indent: -9999px; background: #4d3617 no-repeat 15px 50%; } #newsletter_valid #content-main #intro p { color: #F7F2D9; height: auto; margin: 20px auto; width: 70%; height: 50px; padding: 15px 30px; background: #a39775; } #newsletter_valid #req_name, #newsletter_valid #req_email, #newsletter_valid #req_reply, #newsletter_valid #req_telephone, #newsletter_valid #req_date { width: 50%; } #newsletter_valid #newsletter_form { width: 75%; margin: 50px auto; padding: 0 0 0 10%; } /* --------- UPCOMING SHOWS ------------------ */ #upcoming-box { background: #fff9ee; } #upcoming-box h2 { color: #fff4cb; background: #6e4a29; margin: 0 auto; text-align: center; font: 20px/30px Georgia, serif; text-transform: none;} #upcoming-box h3 { font-size: 1.4em; text-transform: none; font-family: 'Adobe Garamond Pro'; color: #53191a; margin-top: 20px; padding: 0 20px; } #upcoming-box h4 { font: bold 1.2em 'Adobe Garamond Pro', Georgia, "Times New Roman", serif; color: #3b250d; margin: 10px 0; padding: 0 20px; } #upcoming-box p, #upcoming-box ul { padding: 0 20px; } #upcoming #intro p { margin: 20px auto 10px auto; width: 75%; padding: 15px 30px 20px 30px; background: #d8cbb8; position: relative; }