/*** GENERAL STYLES ***/

body {background: #f9f9f9; text-align: center; margin: 0; padding: 0;}
body, th, td, h1, h2, h3, h4, h5, h6, select, input, textarea {font-family: tahoma, arial, helvetica, sans-serif; font-size: 11px; color: #666;}
body, th, td, h1, h2, h3, h4, h5, h6 {line-height: 16px;}
form, h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}

img, table, fieldset {border: 0;}
ul, ul li {list-style: none; margin: 0; padding: 0;}
p {margin: 0 0 1.5em 0;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
	body.home a, body.home .alert {color: #d2cc3a;}
	body.portfolio a, body.portfolio .alert {color: #00a483;}
	body.shows a, body.shows .alert {color: #ce0069;}
	body.about a, body.about .alert {color: #b500e9;}
	body.contact a, body.contact .alert {color: #00ea00;}

.hide {display: none;}
.small {font-size: 10px;}
.large {font-size: 12px;}
.indent {margin-left: 15px;}
.spacer {float: none; clear: both; height: 1px; overflow: hidden;}
.hr {clear: both; margin: 30px 0; background: #ccc; height: 1px; overflow: hidden;}
.alert {font-weight: bold;}


/*** STRUCTURAL STYLES ***/

#top {background: #fff repeat-x;}
	body.home #top {background-image: url(../images/top-home.gif);}
	body.about #top {background-image: url(../images/top-about.gif);}
	body.portfolio #top {background-image: url(../images/top-portfolio.gif);}
	body.shows #top {background-image: url(../images/top-shows.gif);}
	body.contact #top {background-image: url(../images/top-contact.gif);}

#top h1 a {display: block; margin: 0 auto; text-align: left; width: 750px; height: 75px; overflow: hidden; line-height: 300px; background: 0 42px no-repeat;}
	body.home #top h1 a {background-image: url(../images/logo-home.gif);}
	body.about #top h1 a {background-image: url(../images/logo-about.gif);}
	body.portfolio #top h1 a {background-image: url(../images/logo-portfolio.gif);}
	body.shows #top h1 a {background-image: url(../images/logo-shows.gif);}
	body.contact #top h1 a {background-image: url(../images/logo-contact.gif);}

#top ul {position: relative; margin: 0 auto; width: 750px; text-align: left; font-size: 12px;}
#top li {display: inline; margin-right: 25px;}
#top li.on {padding-right: 8px; background: url(../images/nav.gif) right 4px no-repeat;}
#top li a {text-decoration: none;}
#top li.on a {font-weight: bold;}

#nav {height: 27px; line-height: 27px;}
#nav a {color: #fff;}

#subnav {height: 36px; line-height: 36px;}
#subnav a {color: #ccc;}
	body.home #subnav li.on a, body.home #subnav li a:hover {color: #a1b2e8;}
	body.portfolio #subnav li.on a, body.portfolio #subnav li a:hover {color: #ce6633;}
	body.shows #subnav li.on a, body.home #shows li a:hover {color: #cac258;}
	body.about #subnav li.on a, body.about #subnav li a:hover {color: #66b967;}
	body.contact #subnav li.on a, body.home #contact li a:hover {color: #fb34ca;}

#middle {background: #fff; padding-bottom: 20px;}
#main {width: 750px; margin: 0 auto; text-align: left;}
	body.about #main {padding-top: 30px;}
	body.portfolio #main {padding-top: 30px;}
#main h1 {font-size: 15px; margin-bottom: 30px;}
#main h2.title {margin-top: 20px;}
#main h2 {font-size: 12px; margin-bottom: 20px;}
#main h3 {position: relative; top: -20px; font-weight: normal;}
#main ul {margin: -20px 0 1.5em 0;}

body.home .center, .portfoliodiv .center {text-align: center; height: 371px;}
body.home .center .pageimage, .center .thepiece {float: none; margin: 0 auto; display: table; width: 10px;}
	html>body.home .center .pageimage, html>body .center .thepiece {width: auto; min-width: 10px;}
.center .spacer {height: 1px !important;}

.rightcol {float: right; width: 370px;}
.quote {clear: right; width: 340px; margin: 0 0 0 30px;}

.pageimage, .categoryimage, .pieceimage, .thepiece {float: left; background: #ccc; padding: 1px; margin: 0 20px 20px 0; border: 5px solid #fff;}
.pageimage {float: right; margin: 0 0 10px 30px; border: 0; width: 338px;}
	html>body .pageimage {width: auto; min-width: 338px;}
.thepiece {border: 0;}
.pageimage p, .showimage p, .categoryimage p, .pieceimage p, .thepiece p  {border: 9px solid #fff; background: #fff; margin: 0; text-align: center;}

.pageimage a, .showimage a, .categoryimage a, .pieceimage a, .thepiece a {display: table-cell; text-align: center; vertical-align: middle; background: #fff;}
.pageimage a {width: 320px; height: 320px;}
	body.shows .pageimage a {width: 320px; height: 200px;}
	body.home .pageimage a {width: auto; height: auto;}
.showimage a {width: 160px; height: 100px;}
.categoryimage a {width: 200px; height: 200px;}
.pieceimage a {width: 100px; height: 100px;}

.showimage {position: absolute; left: 0; top: 0; background: #ccc; padding: 1px;}
.showdiv {clear: left; position: relative; padding-left: 212px; height: 152px;}
	html>body .showdiv {height: auto; min-height: 152px;}

.portfoliodiv {margin-bottom: 30px; height: 371px;}
.portfoliodiv .on {border-color: #efefef;}

.arrows, .viewarrows {float: right; height: 18px; padding: 2px 25px 2px 0; width: 68px;}
.viewarrows {border-right: 1px solid #ccc; padding-right: 17px; width: 120px;}
.arrows a, .viewarrows a {float: right; position: relative; width: 17px; height: 18px; margin-left: 17px; line-height: 60px; overflow: hidden; background: url(../images/arrows.gif); z-index: 10;}
.viewarrows span {float: right; padding-left: 17px;}
.arrows .prev {background-position: 0 0;}
.arrows .prev:hover {background-position: 0 -18px;}
.arrows .next {background-position: -17px 0;}
.arrows .next:hover {background-position: -17px -18px;}
.viewarrows .prev {background-position: -34px 0;}
.viewarrows .prev:hover {background-position: -34px -18px;}
.viewarrows .next {background-position: -51px 0;}
.viewarrows .next:hover {background-position: -51px -18px;}

#contactform label {display: block; color: #ed2db1; font-weight: bold;}
#contactform input, #contactform textarea {width: 300px; border: 1px solid #bbb; margin: 3px 0 10px 0;}
#contactform textarea {height: 100px; display: block;}
#contactform input#contactsubmit {width: 70px; margin-left: 230px; border: 3px solid #bbb; background: #bbb; color: #fff; font-weight: bold; font-size: 13px; cursor: pointer; cursor: hand;}
#contactform input#contactsubmit:hover {background: #ed2db1; border-color: #ed2db1;}

#footer {background: url(../images/footer.gif) repeat-x; text-align: center;}
#footer p {width: 750px; margin: 0 auto; line-height: 40px; text-align: left; color: #999; font-size: 10px;}
#footer a {color: #999;}