/*
   3 column layout

   styles.css
   for Santa Rosa Concert Association Web site
*/

/* ================================== */
/* = main div styles                = */
/* ================================== */
body {
	text-align:center;  /* IE6 needs this to center the layout in the browser window */
}
#main_wrapper {
	width:990px; /* widths of columns will scale proportionately as this width is changed */
	margin-left:auto;  /* centers max'd layout in browser */
	margin-right:auto; /* centers max'd layout in browser */
	text-align:left; /* prevents page inheriting IE6 centering hack on body */
}
#header {
	background: transparent url('../presentation_graphics/banner_09-10.jpg') no-repeat scroll top left;
	height: 257px;
}
#nav {                  position: relative;   float: left;    width: 970px;                     padding: 10px;      }
#two_col_wrap {                               float: left;    width: 660px;                                         }
#sub_header {           position: relative;                   width: 100%;    height: 150px;    margin-bottom: 20px;}
#promo_header {         position: relative;                   width: 100%;    height: 140px;    margin-bottom: 4px; }
#index #promo_header {                                                                          margin-bottom: 3px; }

#index #sub_header {      background: transparent no-repeat scroll bottom left url('../presentation_graphics/sub_banner_01.jpg');}
#tickets #sub_header,
#seating #sub_header {    background: transparent no-repeat scroll bottom left url('../presentation_graphics/sub_banner_02.jpg');}
#support #sub_header {    background: transparent no-repeat scroll bottom left url('../presentation_graphics/sub_banner_03.jpg');}
#about #sub_header,
#board #sub_header,
#volunteers #sub_header { background: transparent no-repeat scroll bottom left url('../presentation_graphics/sub_banner_04.jpg');}
#contact #sub_header {    background: transparent no-repeat scroll bottom left url('../presentation_graphics/sub_banner_05.jpg');}

#sub_nav {        width:20%;    float:left;}
#content,
#content_2_col {  width:80%;    float:left;}
#content_2_col {  width:100%;              }
#promo {          width:330px;  float:left;}
#footer {         width:100%;   clear:both;}
/* end main div styles */

/* ==================================== */
/* = inner div styles                 = */
/* ==================================== */
#header_inner, #nav_inner, #content_inner, #promo_inner {
  overflow:hidden; /* prevents oversize elements from breaking the layout */}
#header_inner {                                             padding:12px 24px;                              }
#sub_header_inner {                                         padding:12px 12px 12px 24px;                    }
#nav_inner {                                                padding-left: 6px;                              }
#sub_nav_inner {}                                                                                           
                                                                                                            
#sub_nav_inner img {            margin: 6px 0 18px 18px;                                                    }
#content_inner {                margin:0 12px 12px 18px;                                                    }
#content_2_col #content_inner { margin: 0 18px 24px;                                                        }
#promo_header_inner {                                       padding:12px 12px 12px 24px;                    }
#promo_inner {                  margin:0 18px 13px;                                                         }
#footer_inner {                                             padding:6px 120px;            text-align:center;}
/* end inner div styles */

/* ====================================== */
/* = heading div styles                 = */
/* ====================================== */
.heading {                      padding-bottom: 4px;}
#promo .heading {               margin-top: 30px;}

#sub_header .heading,
#promo_header .main_heading {       width: 94%;   left: 15px;   bottom: 12px;   position: absolute;}
#promo #promo_header .main_heading {width: 100%;  left:0;       bottom: 2px;
}
/* end heading div styles */