/* Theme Name: Southern Fried Jazz Description: Custom design for the Southern Fried Jazz Band Author: Fame Foundry Author URI: http://www.famefoundry.com Version: 1.0 */ /* RESET */ html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } a {outline:none;} img {border:none;} /* END RESET */ /* Default font settings. The font-size percentage is of 16px. (0.875 * 16px ~ 14px) */ body { font-size: 87.5%; color: #222; background-image: url(images/background.gif); font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; } /* GLOBAL FRAMEWORK -------------------------------------------------------------- */ #body-background {background-image: url(images/background-image.png); background-position: top; background-repeat: no-repeat; width: 100%; height: 763px; margin: 0 auto -763px auto;} #container {width: 870px; margin: 0 auto;} #canvas {width: 810px; background-color: #fff; padding: 30px;} #canvas.indexcanvas {width: 830px; background-color: #fff; padding: 20px;} #column1 {width: 550px; margin-right: 20px; float: left;} #sidebar {width:237px; float:right;} .canvas-shadow {display: block; width: 850px; height: 19px; background-image: url(images/canvas-bottom.png); margin: 0 auto 20px auto;} .copy-column1 {width: 390px; float:left; margin-right: 20px;} .copy-column2 {width: 390px; float:left; margin-right: 0px;} /* GLOBAL ELEMENTS -------------------------------------------------------------- */ .button a {display: block; width: 154px; height: 32px;} .button a:hover {background-position: 0 -32px;} .button.learnmore a {background-image: url(images/button-learnmore.gif);} .show-buttons {float:left; width: 100%;} .show-buttons a {float:left; height: 32px; text-indent:-9999em;} .show-buttons a:hover {background-position: 0 -32px;} .show-buttons-tall {float:left; width: 100%;} .show-buttons-tall a {float:left; height: 47px; text-indent:-9999em; margin-right:20px;} .show-buttons-tall a:hover {background-position: 0 -49px;} a.sfjb-show {width: 113px; background-image: url(images/button-sfjb-show.gif);} a.holiday-shows {width: 147px; background-image: url(images/button-holiday-shows.gif);} a.special-events {width: 147px; background-image: url(images/button-special-events.gif);} a.outreach-programs {width: 160px; background-image: url(images/button-outreach-programs.gif);} a.testimonials {width: 163px; background-image: url(images/button-testimonials.gif); margin-right:0;} a.riders {width: 237px; background-image: url(images/button-technical-riders.gif);} a.past-performances {width: 237px; background-image: url(images/button-past-performances.gif);} a.download-riders {width:180px; height:24px; display:block; background: url(images/pdf-icon.gif) 0 0 no-repeat; padding-left:24px; color:#650200; font-weight:bold; text-decoration:none;} a.download-riders:hover {color:#8b3735;} a.button-back {position:relative; float:right; margin-top:-50px; font-size:14px; font-weight:bold; color:#650200; text-decoration:none;} a.button-back:hover {color:#8b3735; text-decoration:none;} /* FOOTER -------------------------------------------------------------- */ #footer {width: 830px; background-color: #000; padding: 20px; margin: 30px auto; text-align: center; color: #fff;} #footer a {color:#fff; text-decoration: none;} #footer a:hover {text-decoration: underline;} /* NAVIGATION (WITHOUT BLOG) -------------------------------------------------------------- */ #navigation {list-style-type: none; margin-left: 0;} #navigation li {display:inline-block; float:left;} #navigation li a {display: block; width:140px; height:47px; background-image: url(images/navigation-no-blog.png); float: left; margin-right: 6px; text-indent: -9999em;} #navigation li.home a {background-position: 0 0;} #navigation li.home a:hover {background-position: 0 -47px;} #navigation li.home a.selected {background-position: 0 -47px;} #navigation li.about a {background-position: -146px 0;} #navigation li.about a:hover {background-position: -146px -47px;} #navigation li.about a.selected {background-position: -146px -47px;} #navigation li.meet a {background-position: -292px 0;} #navigation li.meet a:hover {background-position: -292px -47px;} #navigation li.meet a.selected {background-position: -292px -47px;} #navigation li.music a {background-position: -438px 0;} #navigation li.music a:hover {background-position: -438px -47px;} #navigation li.music a.selected {background-position: -438px -47px;} #navigation li.events a {background-position: -584px 0;} #navigation li.events a:hover {background-position: -584px -47px;} #navigation li.events a.selected {background-position: -584px -47px;} #navigation li.contact a {background-position: -730px 0; margin-right: 0;} #navigation li.contact a:hover {background-position: -730px -47px;} #navigation li.contact a.selected {background-position: -730px -47px;} /* NAVIGATION (WITH BLOG) #navigation {list-style-type: none; margin-left: 0;} #navigation li a {display: block; width:140px; height:47px; background-image: url(images/navigation.png); float: left; margin-right: 6px; text-indent: -9999em;} #navigation li.home a {background-position: 0 0;} #navigation li.home a:hover {background-position: 0 -47px;} #navigation li.meet a {background-position: -146px 0;} #navigation li.meet a:hover {background-position: -146px -47px;} #navigation li.music a {background-position: -292px 0;} #navigation li.music a:hover {background-position: -292px -47px;} #navigation li.events a {background-position: -438px 0;} #navigation li.events a:hover {background-position: -438px -47px;} #navigation li.blog a {background-position: -584px 0;} #navigation li.blog a:hover {background-position: -584px -47px;} #navigation li.contact a {background-position: -730px 0; margin-right: 0;} #navigation li.contact a:hover {background-position: -730px -47px;} -------------------------------------------------------------- */ /* HOMEPAGE -------------------------------------------------------------- */ #slideshow {width: 870px; height: 360px; background-color: #fff;} .video-feature {display: block; background-color: #f8e8ad; padding: 20px;} .video-feature p {font-size:12px;} .video {display: block; float: right; margin-left: 20px; } .testimonial {display:block; width: 243px;padding: 10px 10px 30px 10px; background-color: #b4998c; background-image: url(images/testimonial-bottom.gif); background-position: bottom; background-repeat: no-repeat; float:left; margin: 0 20px 20px 0;} .testimonial p {font-size: 14px; color: #fff; font-weight: 600; text-shadow: 0px 1px 1px #402b21; filter: dropshadow(color=#402b21, offx=0, offy=1);} .testimonial p.source {font-size: .75em; text-align: right;} .social {display:block; width:267px; height:61px; background: url(images/social-background.jpg); float:right; padding-top: 63px;} .social.wide {display:block; width:422px; height:61px; background: url(images/social-background-wide.jpg); float:right; padding-top: 63px;} .fb-like {margin-bottom:5px;} .facebook a {display:block; width:113px; height:36px; background: url(images/facebook.png); margin-left: 20px; float: left;} .facebook a:hover {background-position: 0 -36px;} .twitter a {display:block; width:113px; height:36px; background: url(images/twitter.png); margin-left: 20px; float:left;} .twitter a:hover {background-position: 0 -36px;} /* MEET THE BAND -------------------------------------------------------------- */ .biopic {margin-bottom: 20px;} /* CONTACT FORM -------------------------------------------------------------- */ input, select {width: 420px ; height: 22px; font-size: 16px;} textarea {width: 420px ;} .wpcf7-submit {width: auto;} /* Headings -------------------------------------------------------------- */ h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; } span.logo {display:block; width:543px; height:157px; background-image: url(images/logo.png); background-repeat: no-repeat; margin: 0 auto;} span.logo a {display:block; width:543px; height:157px; text-indent: -9999em;} h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; } h1.headline-meet {width: 401px; height: 33px; background: url(images/headline-meet.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-music {width: 458px; height: 33px; background: url(images/headline-music.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-events {width: 456px; height: 33px; background: url(images/headline-events.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-contact {width: 491px; height: 33px; background: url(images/headline-contact.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-about {width: 426px; height: 33px; background: url(images/headline-about.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-sfjb-show {width: 278px; height: 33px; background: url(images/headline-sfjb-show.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-holiday-shows {width: 426px; height: 33px; background: url(images/headline-holiday-shows.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-outreach-programs {width: 555px; height: 33px; background: url(images/headline-outreach-programs.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-special-events {width: 426px; height: 33px; background: url(images/headline-special-events.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-testimonials {width: 346px; height: 33px; background: url(images/headline-testimonials.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-technical-riders {width: 465px; height: 33px; background: url(images/headline-technical-riders.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h1.headline-past-performances {width: 540px; height: 33px; background: url(images/headline-past-performances.gif) no-repeat; text-indent: -9999em; display:block; background-position:left;} h2 {font-size: 1.60em; margin-bottom: 0.75em; color: #8b3735; font-weight: 600;} h2.headline01 {background-image: url(images/headline01.png); width: 743px; height: 63px; text-indent: -9999em; background-repeat: no-repeat; background-position: center;} h2.headline02 {background-image: url(images/headline02.gif); width: 830px; height: 91px; margin: -18px 0 0 0; text-indent: -9999em; background-repeat: no-repeat; background-position: center;} h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; } h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: .5em; font-weight: bold; } h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; } h6 { font-size: 1em; font-weight: bold; } h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; } /* Text elements -------------------------------------------------------------- */ p { margin: 0 0 1.5em; line-height: 1.3em;} p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } p.instrument {color:#5e5e5e; font-weight: bold; font-style: italic; margin: -10px 0 10px 0;} a:focus, a:hover { color: #000; } a { color: #009; text-decoration: underline; } small {font-size: .7em;} /* MISCELLANEOUS -------------------------------------------------------------- */ .float-right {float:right;} .float-left {float:left;} hr {clear:both; margin: 40px 0;} /* =Images -------------------------------------------------------------- */ /* Resize images to fit the main content area. - Applies only to images uploaded via WordPress by targeting size-* classes. - Other images will be left alone. Use "size-auto" class to apply to other images. */ img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img { max-width: 100%; /* When images are too wide for containing element, force them to fit. */ height: auto; /* Override height to match resized width for correct aspect ratio. */ } .alignleft, img.alignleft { display: inline; float: left; margin-right: 24px; margin-top: 4px; } .alignright, img.alignright { display: inline; float: right; margin-left: 24px; margin-top: 4px; } .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 12px; } .wp-caption { background: #f1f1f1; line-height: 18px; margin-bottom: 20px; max-width: 632px !important; /* prevent too-wide images from breaking layout */ padding: 4px; text-align: center; } .wp-caption img { margin: 5px 5px 0; } .wp-caption p.wp-caption-text { color: #888; font-size: 12px; margin: 5px; } .wp-smiley { margin: 0; } .gallery { margin: 0 auto 18px; } .gallery .gallery-item { float: left; margin-top: 0; text-align: center; width: 33%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery img { border: 2px solid #cfcfcf; } .gallery-columns-2 .attachment-medium { max-width: 92%; height: auto; } .gallery-columns-4 .attachment-thumbnail { max-width: 84%; height: auto; } .gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 12px; } .gallery dl { margin: 0; } .gallery img { border: 10px solid #f1f1f1; } .gallery br+br { display: none; } #content .attachment img {/* single attachment images should be centered */ display: block; margin: 0 auto; } /* =Clearfix (all browsers) --------------------------------*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* IE6 */ * html .clearfix {height: 1%;} /* IE7 */ *:first-child+html .clearfix {min-height: 1px;}