/* General, Shared, Navigation */

body {margin: 0px; background-image: url(images/diagonal_bg.gif); background-repeat: repeat; background-position: top left; text-align: center; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000; line-height: 1.0em;}

a {color: #000; text-decoration: underline;}
p {clear: left; margin-top: 0px;}

/* The container holds the header, the content, the sidebar, and the footer */

#container {width: 640px; padding: 0px 0px 10px 50px; background-image: url(images/container_bg.jpg); background-repeat: repeat-y; background-position: top center; overflow: hidden; text-align: left;}

#header {width: 590px; height: 53px; padding-top: 92px; background-image: url(images/title_header.jpg); background-repeat: no-repeat; background-position: top left; margin-bottom: 15px;}

/* MODX's Wayfinder is used to create the navigation menu, so some additional list styles had to be incorporated */

#nav_container {float: left;}
#nav_container ul {margin: 0px;  padding: 0px;}
#nav_container li {display: inline; margin: 0px; padding: 0px; list-style-type: none;}
#nav_container li a {float: left; display: block; padding-top: 13px; padding-left: 12px; padding-right: 12px; height: 25px; background-image: url(images/nav_inactive_background.jpg); background-repeat: repeat-x; background-position: left; border-bottom: 1px solid #FF9832; border-left: 1px solid #FF9832; border-top: 1px solid #FF9832; border-right: 1px solid #C97928; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #fff; text-decoration: none;}
#nav_container li a:hover {background-image: url(images/nav_active_background.jpg); background-repeat: repeat-x; background-position: left;}
#nav_container li.active a {background-image: url(images/nav_active_background.jpg); background-repeat: repeat-x; background-position: left; font-weight: bold;}

#content {float: left; width: 365px; padding: 0px 15px 0px 20px; text-align: left; overflow: hidden;}

/* The sidebar is just a vertical collection of <div>s, each with their own background images; the backgrounds repeat when necessary, so the content of each stickie note is variable */

#sidebar {float: right; width: 240px; background-image: url(images/sidebar_top_bg.jpg); background-repeat: no-repeat; background-position: top left; text-align: left; margin-bottom: 10px; padding-top: 6px;}
#sidebar_interior_1 {width: 165px; padding: 15px 20px 1px 40px; background-image: url(images/sidebar_repeating_bg1.jpg); background-position: top left; background-repeat: repeat-y;}
#sidebar_middle_1 {width: 240px; height: 21px; background-image: url(images/sidebar_middle_bg1.jpg); background-position: top left; background-repeat: no-repeat;}
#sidebar_interior_2 {width: 165px; padding: 1px 20px 1px 55px; background-image: url(images/sidebar_repeating_bg2.jpg); background-position: top left; background-repeat: repeat-y;}
#sidebar_middle_2 {width: 240px; height: 10px; margin: 0px; padding: 0px; background-image: url(images/sidebar_middle_bg2.jpg); background-position: top left; background-repeat: no-repeat; font-size: 4px;}
#sidebar_interior_3_wrapper {width: 240px; margin: 0px; padding: 0px; background-image: url(images/sidebar_interior3_wrapper_bg.jpg); background-position: top left; background-repeat: no-repeat;}
#sidebar_interior_3 {padding: 13px 20px 18px 27px; width: 165px; background-image: url(images/sidebar_repeating_bg3.jpg); background-position: top left; background-repeat: repeat-y;}
#sidebar_bottom {width: 212px; height: 5px; background-image: url(images/sidebar_bottom_bg.jpg); background-position: top left; background-repeat: no-repeat;}
#sidebar img {border: 1px solid #999;}
#sidebar p {margin-bottom: 8px;}

#footer {clear: both; width: 590px; padding: 10px 5px 0px 5px; height: 55px; margin-bottom: 10px; margin-top: 0px; text-align: center; background-image: url(images/footer_bg.jpg); background-position: top center; background-repeat: no-repeat;}
#footer p {margin-top: 0px;}

#footer_content {font-size: 11px; line-height: 1.5em;}

/* The h1 and h2 are wrapped in another <div> that creates the klez prefix */

#body_head_title {float: left; height: 26px; margin-bottom: 10px; background-image: url(images/h1_repeating_bg.jpg); background-repeat: repeat-x; background-position: bottom left;}
h1 {padding-left: 37px; padding-top: 2px; height: 24px; font-family: Georgia, Times New Roman, Times, serif; font-size: 16px; color: #000; margin: 0px; font-weight: bold; background-image: url(images/h1_klez_bg.jpg); background-repeat: no-repeat; background-position: top left;}

#sidebar_head_title {float: left; height: 26px; margin-bottom: 10px; background-image: url(images/h2_repeating_bg.jpg); background-repeat: repeat-x; background-position: bottom left;}
h2 {padding-left: 37px; padding-top: 4px; height: 24px; font-family: Georgia, Times New Roman, Times, serif; font-size: 16px; color: #000; margin: 0px; font-weight: bold; background-image: url(images/h2_klez_bg.jpg); background-repeat: no-repeat; background-position: top left;}

h3 {display: block; background-color: #ffffdd; height: 15px; width: 215px; float: left; font-size: 14px; font-weight: normal; border-bottom: solid 1px #999; padding: 5px 0px 4px 5px; margin: 5px 0px 10px 0px;}
h4 {display: block; background-color: #ffffdd; height: 14px; width: 140px; float: right; font-size: 13px; font-weight: normal; text-align: right; border-bottom: solid 1px #999; padding: 6px 5px 4px 0px; margin: 5px 0px 10px 0px;}
h5 {display: block; background-color: #ffffdd; height: 15px; width: 360px; float: left; font-size: 14px; font-weight: normal; border-bottom: solid 1px #999; padding: 5px 0px 4px 5px; margin: 5px 0px 10px 0px;}

/* The ul is used in the About page and the ol is used in the Recordings page */

#content_body {clear: both;}
#content_body ul {clear: both; margin: 0px 0px 20px 0px; padding-left: 15px; padding-bottom: 0px;}
#content_body li {list-style-type: square; line-height: 1.2em; margin-top: 0px;}
#content_body ol {margin: 0px; padding-left: 18px;}
#content_body ol li {list-style-type: decimal;}

/* The next set of styles is for the eForm snippet that manages the Contact page */

fieldset {padding: 10px; width: 340px; border: 1px dotted #bbb; margin-top: 45px;}
fieldset p {margin-top: 0px;}
label {font-weight: bold;}
input, textarea {background-color: #eee;}
input {width: 220px;}
textarea {width: 338px;}
#submit {width: 100px;}
#form_thanks {padding: 10px 10px 0px 10px; background-color: #ffffdd; border: 1px solid #ccc;}

/* The cover image is the CD image on the recordings page */

#cover_image {float: right; margin-left: 10px; border: 1px solid #999;}

/* Every aspect of the gallery front end can be managed and altered by these styles */

.gallery_preview {clear: both; width: 365px; height: 335px; padding: 12px 0px 16px 0px; text-align: center; background-image: url(images/gallery_image_bg.jpg); background-position: top center; background-repeat: no-repeat; margin: 5px 0px 5px 0px;}
.gallery_preview a {border: none; text-decoration: none; text-align: center;}
.gallery_preview img {border: none; text-align: center;}
.gallery_enter {display: block; margin-bottom: 20px; text-align: right; padding-right: 5px;}

.gallery_header {margin-left: 5px;}
.gallery_thumb {float: left; width: 95px; height: 95px; padding: 8px 10px 12px 10px; margin-bottom: 5px; margin-top: 5px; margin-right: 6px; text-align: center; background-image: url(images/gallery_thumb_bg.jpg); background-position: top center; background-repeat: no-repeat;}
.gallery_thumb a {border: none; text-decoration: none;}
.gallery_thumb img {border: none;}

.photo_description {display: block; text-align: center; font-weight: bold;}
.photo_navigation_wrapper {padding: 6px 14px 0px 15px; height: 32px; }
.photo_navigation {display: block; float: left; text-decoration: underline; text-align: center; width: 111px; height: 14px; margin-right: 1px; padding: 6px 0px; background-color: #ffffdd; border-bottom: 1px solid #999;}