@import 'baseline.css';
@import 'grid.css';


#outercontainer {
	background: url(../images/bg_body.jpg) no-repeat center 0px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;

}
#header {
	background: url(../images/signature.gif) no-repeat;
	height: 64px;
	width: 296px;
	position: absolute;
	top: 25px;
	left: 40px;
}
#header span, h2 span, h3 span, #nav a span, #contact a span {
	display: block;
	height: 0px;
	width: 0px;
	overflow: hidden;
}
#content {
	background: url(../images/bg_pagetop.jpg) no-repeat 0px 0px;
	padding-top: 145px;
	font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
	position: relative;
	color: #5A4F4F;
}
#wrapper-a .col1 { /* home page layout; two columns of combined, flowing text. This is the left column. */
	padding-left: 40px;
	padding-right: 400px;
}
#wrapper-a .col2 { /* home page layout; two columns of combined, flowing text. This is the right column. */
	position: absolute;
	top: 129px;
	right: 40px;
	width: 310px;
}
#wrapper-b .col1 { /* blog page layout; two columns of separate text. This is the main column. */
	padding-right: 40px;
	padding-left: 330px;
}
#wrapper-b .col2 { /* blog page layout; two columns of separate text. This is the sidebar. */
	position: absolute;
	top: 180px;
	width: 232px;
	left: 40px;
	border: solid 1px #FFF;
}
#wrapper-c .col1 { /* album page layout; two columns of separate text. This is the thumbnail div. there is no second column on a page like this*/
	padding-right: 478px;
	padding-left: 40px;
	padding-top: 36px;
}
#wrapper-c .col2 {
	position: absolute;
	top: 180px;
	right: 40px;
	width: 400px;
}

#nav {
	position: absolute;
	left: 40px;
	top: 110px;
	margin: 0;
	padding: 0;
}
#nav li {
	float: left;
	list-style-type: none;
	margin-right: 56px;
}
#nav  a, #contact a {
	display: block;
}
#nav a:hover {
	background-position: 0px -27px;
}
#contact  {
	position: absolute;
	top: 20px;
	right: 40px;
	padding: 0;
	margin: 0;
}
#contact li {
	float: left;
	list-style: none;
	margin-left: 10px;
	padding-right: 10px;
	background: url(../images/buttons/right-border.gif) no-repeat right center;
}
#contact li.last {
	padding-right: 0px;
	background: url(none);
}




#button-activities {
	background: url(../images/buttons/activities.gif) no-repeat 0 0;
	height: 27px;
	width: 121px;
}
#button-stereo {
	background: url(../images/buttons/stereo.gif) no-repeat 0 0;
	height: 27px;
	width: 79px;
}
#button-album {
	background: url(../images/buttons/album.gif) no-repeat 0 0;
	height: 27px;
	width: 79px;
}
#button-blog {
	background: url(../images/buttons/blog.gif) no-repeat 0 0;
	height: 29px;
	width: 63px;
}
#button-contact {
	background: url(../images/buttons/contact.jpg) no-repeat;
	height: 20px;
	width: 61px;
}
#button-home {
	background: url(../images/buttons/home.jpg) no-repeat;
	height: 20px;
	width: 47px;
}










#postit {
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 21px;
}
#blogsketch {
	margin-left: 18px;
	margin-top: 18px;
}
#photosketch {
	margin-left: 18px;
	margin-top: 18px;
}
#pagetitle-activities {
	background: url(../images/title_activities-trans.png) no-repeat center 0;
	height: 33px;
	width: 380px;
	margin-bottom: 35px;
	margin-top: 35px;
}
#pagetitle-album {
	background: url(../images/title_photoalbum-trans.png) no-repeat center 0;
	height: 64px;
	width: 400px;
	margin-bottom: 20px;
}
#pagetitle-blog {
	background: url(../images/title_blogspot-trans.png) no-repeat center 0px;
	height: 42px;
	width: 380px;
	margin-top: 35px;
	margin-bottom: 20px;
}
#pagetitle-contact {
	background: url(../images/title_contact-trans.png) no-repeat;
	height: 31px;
	width: 226px;
	margin-top: 35px;
	margin-bottom: 20px;
}
#pagetitle-stereo {
	background: url(../images/title_stereo-trans.png) no-repeat center 0;
	height: 31px;
	width: 400px;
	margin-bottom: 35px;
}


#pagetitle-welcome {
	background: url(../images/title_welcome.gif) no-repeat;
	height: 41px;
	width: 305px;
	margin-top: 35px;
	margin-bottom: 20px;
}

#sidebar-blog, #sidebar-activities {
	background: #E9E5D9;
}
#sidebar-blog  h3#main {
	background: url(../images/sidebar_blog.jpg) no-repeat;
	height: 363px;
	width: 232px;
	margin: 0 0 15px 0;
}
#sidebar-activities h3 {
	background: url(../images/sidebar_activities.jpg) no-repeat;
	height: 363px;
	width: 232px;
	margin: 0 0 15px 0;
}
#sidebar-activities h4 {
	border-bottom: 1px solid #BAB6B6;
	text-align: center;
	margin: 20px 15px 0 15px;
	color: #736D6D;
}
#sidebar-activities h5 {
	font-size: 85%;
	margin-left: 25px;
	margin-bottom: 15px;
	font-style: italic;
}
#page-stereo #thumbnail-container h3 {
	width: 192px;
}


#sidebar-activities p {
	font-size: 85%;
	line-height: 160%;
	margin-left: 15px;
	margin-right: 15px;
}

#sidebar-blog p {
	width: 182px;
	margin-left: 25px;
}
#sidebar-blog  ul, #sidebar-activities ul {
	margin: 0 0 20px 0;
	padding: 0px;
}
#sidebar-blog  li, #sidebar-activities li {
	margin-left: 40px;
	list-style: outside;
	width: 168px;
}
#sidebar-blog  a, #sidebar-activities a {
	color: #6B6863;
}
#sidebar-blog h3.title {
	text-align: center;
	margin: 15px 0 10px 0;
	font-size: 85%;
}



#thumbnail-container {
	background: #CEAF91 url(../images/bg_thumbnails.jpg) no-repeat 0px 0px;
	border: 1px solid #FFFFFF;
	padding: 20px 0 0 20px;
	width: 212px;
}
#thumbnail-container img {
	border: 1px solid #FFFFFF;
	margin-bottom: 20px;
	margin-right: 14px;
}
#schedule {
	background: url(../images/schedule_top-trans.png) no-repeat;
	padding-top: 23px;
	float: right;
	width: 230px;
	margin-left: 15px;
}
#schedule div {
	background: url(../images/schedule_bottom-trans.png) no-repeat 0px bottom;
	width: 230px;
	font-size: 85%;
	padding-bottom: 20px;
}
#schedule h3 {
	text-align: center;
}
#schedule h4 {
	border-bottom: 1px solid #BAB6B6;
	text-align: center;
}


#page-activities #schedule h3, #page-activities #schedule h4, #page-activities  #schedule  p {
	margin-left: 25px;
	margin-right: 25px;
}


h3 {
	color: #736D6D;
	font: bold 136% "trebuchet ms", Arial, Helvetica, sans-serif;
}
#page-activities  .col1 h3 {
	color: #736D6D;
	font: bold 136% "trebuchet ms", Arial, Helvetica, sans-serif;
	margin: 0;
}
#page-blog .col1 h3 {
	margin-bottom: 10px;
	margin-left: -15px;
}
h3.quote {
	margin-bottom: 15px;
}
h3.quote em  {
	font-weight: normal;
	font-size: 69%;
}
h3.quote em strong  {
	text-align: right;
	font-weight: normal;
	font-style: italic;
	display: block;
	margin: 5px 0 20px 0;
	border-bottom: 1px solid #999595;
	padding-bottom: 10px;
}


h4 {
	color: #6E6B66;
	font: bold 92% "trebuchet ms", Arial, Helvetica, sans-serif;
	margin-bottom: 5px;
	margin-top: 0px;
}



#footer {
	clear: left;
}
#footer-home  {
	background: url(../images/bg_pagebottom_a.jpg) no-repeat;
	height: 530px;
}
#footer-blog  {
	background: url(../images/bg_pagebottom_b.jpg) no-repeat;
	height: 365px;
	margin-top: 0px;
}
#footer-activities {
	background: url(../images/bg_pagebottom_b.jpg) no-repeat;
	height: 365px;
	margin-top: -265px;
}

#footer-album {
	background: url(../images/bg_pagebottom_c.jpg) no-repeat;
	height: 741px;
	margin-top: -700px;
}
#footer-contact {
	background: url(../images/bg_pagebottom_contact.jpg) no-repeat;
	height: 530px;
	margin-top: -200px;
}

.clearer {
	clear: right;
}