@charset "UTF-8"; /* CSS Document */ div#header_wrapper { border-bottom: 3px solid #000000; background: #ffffff url(../images/body_bg_alternate.png) top center repeat-x; } div#header { width: 960px; margin: 0 auto; overflow: hidden; height: 134px; position: relative; top: 0; } /* this is the start of the monumental brass logo text replacement */ div#header h1 { padding:25px 0 0 10px; } div#header h1 a { background: url(../images/monumentalbrassquintet.png) no-repeat scroll 0 0; height: 84px; width: 590px; margin-left: -10px; display: block; } div#header h1 a span { display: none; } /* end of logo */ /* this is the start of the navigation */ #header ul { position: absolute; bottom: 0; right: 0; margin:0 10px 0 0; font-size: 16px; } div#header ul a { text-decoration:none; padding: 5px 10px 2px; background-color: #FFFFFF; color: #000000; border-left: 1px solid #555555; border-top: 1px solid #555555; border-right: 1px solid #555555; border-bottom: 1px solid #000000; } div#header ul a:hover { background-color: #aeaeae; color: #FFFFFF; } div#header ul li { display: inline; margin: 0 0 0 -2px; } div#header ul li:first-child { margin-left: 0px; } /* this is the section for indicating which tab should be active */ /* each page's element should have an id tag which will tell the navigation what page you are on */ #about li#nav_about a { background-color: #000000; color: #FFFFFF; } #education li#nav_education a { background-color: #000000; color: #FFFFFF; } #bios li#nav_bios a { background-color: #000000; color: #FFFFFF; } #schedule li#nav_schedule a { background-color: #000000; color: #FFFFFF; } #contact li#nav_contact a { background-color: #000000; color: #FFFFFF; } #audio li#nav_audio_video a { background-color: #000000; color: #FFFFFF; } /* end of navigation */ /* the begining of the body */ div#main_wrapper { overflow: visible; background: #ffffff url(../images/dropshadow_body_top.png) top center repeat-x; } div#main { width: 960px; margin: 0 auto; padding-top: 40px; } #main h1, h2, h3 { margin-left: 10px; } /* the drop shadow basically is a div that is offset and behind the content divs */ .img-shadow{ float:left; background: url(../images/dropshadow_2_04.png) no-repeat bottom left !important; margin: 10px 0 0 0; } /* this is for the left 'main' column */ div#main_body { background-color: #ebebeb; float:left; padding-top:10px; width: 520px; display: block; position: relative; border: 1px solid #a9a9a9; margin: -6px -6px 10px 9px; font-size: 14px; } div#main_body p, img { margin-left:10px; margin-right: 10px; } div#bios img { width: 125px; margin-left:12px; margin-right: 12px; } /* starts the right column */ div#side_body { background-color: #ebebeb; float:left; padding-top:10px; width: 390px; display: block; position: relative; border: 1px solid #a9a9a9; margin: -6px -6px 10px 9px; padding-right: 12px; } .side { margin-left: 23px; } /* starts the footer */ div#footer_wrapper { background: #000000 url(../images/dropshadow_body_bottom.gif) repeat-x scroll center top !important; padding-top: 10px; } div#footer_wrapper p { margin-bottom: 0; } div#footer { background: #000000; width: 960px; overflow: auto; padding-bottom: 10px; padding-top: 10px; margin: 0 auto; } div#copyright_wrapper { background: #AAAAAA; clear: both; } div#copyright { width: 390px; margin: 0 auto; } div.footer_box { float: left; text-align: center; overflow: hidden; padding: 0; margin: 0; } div.footer_box h1 { color: #FFFFFF; line-height: 30px; font-size: 22px; font-weight: lighter; } div.footer_box h1 a { color: #19a6ff; text-decoration: none; } div.footer_box h1 a:hover { text-decoration: underline; } div.contact_footer { height: 63px; width: 330px; } div.music_footer{ height: 63px; width: 330px; float: right; } div.education_footer { margin-left:30px; height: 63px; width: 240px; } div#testimonial { background: url(../images/quote.gif) no-repeat top right; color: #ffffff; background-color: #757575; font-size: 14px; padding-top: 12px; padding-bottom: 12px; padding-left: 12px; padding-right: 86px; margin-left:12px; margin-bottom: 12px; }