/* == STYLESHEET FUNCTIONS
------------------------------------------------------------------------------------------------------------------------
- Defines the site-wide layout for core structure
- Defines reusable widget code
- Defines page specific layout
- Overrides base HTML elements where required
----------------------------------------------------------------------------------------------------------------------*/

/* == CONTENTS
------------------------------------------------------------------------------------------------------------------------
- Main Layout
- Picture Layout
----------------------------------------------------------------------------------------------------------------------*/

/* == Main Layout
----------------------------------------------------------------------------------------------------------------------*/
#outer{background: url(/_img/btm-image.jpg) bottom center no-repeat;height: 100%;min-height: 100%;}
#wrap{width: 933px;margin: 0 auto;text-align: left;min-height: 686px; height: auto !important; height: 686px;}
#wrap #mainContent{float: left;width: 890px;border: solid 2px #f1dddf;border-width: 0 2px 0 1px;padding: 0 20px 10px 20px;min-height: 692px; height: auto !important; height: 692px;}
#wrap #foot{float: left;width: 933px; height: 142px;}

#wrap #head{float: left; width: 933px;background: url(/_img/head-bg.gif) top right no-repeat;min-height: 221px; height: auto !important; height: 221px;}
#wrap #head .headBanner{float: left;margin: 9px 0 0 0;}
#wrap #head .logo{float: right;margin: 85px 20px 0 0;}


#wrap #head{float: left; width: 933px;background: url(/_img/head-bg.gif) top right no-repeat;min-height: 221px; height: auto !important; height: 221px;}
#wrap #head .headBanner{float: left;margin: 9px 0 0 0;}
#wrap #head .logo{float: right;margin: 100px 20px 0 0;}

#wrap #head #nav{float: left; margin: 0;width: 890px;border: solid 2px #f1dddf;border-width: 0 2px 0 1px;padding: 0 20px;background: url(/_img/nav-bg.gif) center left repeat-x;}
#wrap #head #nav ul{margin: 0; list-style: none;}
#wrap #head #nav ul li{float: left; margin: 0 18px 0 0;}
#wrap #head #nav ul li.shop{margin-right: 0;}
#wrap #head #nav ul li a{float: left; font-size: 120%;height: 36px; line-height: 36px;padding-top: 11px;}
#wrap #head #nav ul li a:hover, #wrap #head #nav ul li a.on{background: url(/_img/nav-hover.gif) top center no-repeat; color: #111;}
#wrap #head #nav ul li.links a:hover, #wrap #head #nav ul li.links a.on,
#wrap #head #nav ul li.live a:hover, #wrap #head #nav ul li.live a.on,
#wrap #head #nav ul li.chalk a:hover, #wrap #head #nav ul li.chalk a.on,
#wrap #head #nav ul li.shop a:hover, #wrap #head #nav ul li.shop a.on{background-image: url(/_img/nav-hover-right.gif);}

#wrap #head #nav ul li a span{float: left;letter-spacing: -100000px;overflow: hidden;font-size: 0; color: #111;height: 21px;background-image: url(/_img/nav-sprite.gif);background-repeat: no-repeat;cursor: pointer;}
#wrap #head #nav ul li.home a span{background-position: 0 -22px;width: 62px;}
#wrap #head #nav ul li.about a span{background-position: 0 -141px;width: 76px;}
#wrap #head #nav ul li.news a span{background-position: 0 -260px;width: 60px;}
#wrap #head #nav ul li.music a span{background-position: 0 -380px;width: 75px;}
#wrap #head #nav ul li.photos a span{background-position: 0 -499px;width: 100px;}
#wrap #head #nav ul li.video a span{background-position: 0 -618px;width: 74px;}
#wrap #head #nav ul li.gigs a span{background-position: 0 -737px;width: 57px;}
#wrap #head #nav ul li.links a span{background-position: 0 -1094px;width: 80px;}
#wrap #head #nav ul li.chalk a span{background-position: 0 -856px;width: 153px;}
#wrap #head #nav ul li.shop a span{background-position: 0 -975px;width: 76px;}

#wrap #mainContent ul.foot, 
#wrap #mainContent ul.foot li{float: right; list-style:none;}
#wrap #mainContent ul.foot li{float: left; padding-right: 10px;}


/* == Picture Layout
----------------------------------------------------------------------------------------------------------------------*/
#wrap .picture{position:relative;width: 644px;height: 621px;float: right;background: #444;border: solid 1px #000;}
#wrap .picture .block{position:absolute;display:block;text-align:center;color:#fff;cursor:hand;}
#wrap .picture .block:hover{opacity:.25;filter: alpha(opacity=25); -moz-opacity: 0.25;}
#wrap .picture .block div{background:#000;height:100%; width:100%;cursor:pointer;font-weight:normal;font-size:90%;}
#wrap .picture .off{color:red;cursor:default;}
#wrap  #mainView .off{visibility:hidden;}

#wrap .picture span{position:absolute;z-index:4;background:#0a0a0c;display:block;display:none;width:150px;padding:10px;overflow:hidden;border:solid 1px #224e73;}
#wrap .picture span h2{color:#ccc;text-transform:uppercase;border-bottom:dashed 1px #fff;font-size:80%;font-weight:normal;}
#wrap .picture span h2 b{font-size:120%;}
#wrap .picture span p{color:#ccc;text-transform:uppercase;font-size:80%;font-weight:normal;}
#wrap .picture span a{color:#ccc;}


/* == Control
----------------------------------------------------------------------------------------------------------------------*/
#wrap .control{width:500px;margin: 0 auto;}
#wrap .control h1{padding:40px 0 5px 0;margin: 10px 0 25px 0;color:#ccc;border-bottom:dashed 1px #ccc;}
#wrap .control .form{padding:40px;}
#wrap .control .form label{color:#ccc;}

#wrap .panel{position:relative;float: left;width:200px;margin: 0;padding: 0;}
#wrap .panel ul,.panel ul li{margin:0;padding:0;list-style:none;}
#wrap .panel ul li{padding: 0 0 4px 0;}
#wrap .info{margin: 170px 0 0 0px;}


/* == Gallery Layout
----------------------------------------------------------------------------------------------------------------------*/
#wrap .gallery{width:644px;margin: 0px 0 40px 247px;color:#fff;}
#wrap .gallery h2{font-size:180%;color:#fff;letter-spacing:-0.5px;}
#wrap .gallery a.thumb{float:left;padding:1px;border:solid 1px #666;margin: 0 5px 5px 0;}
#wrap .gallery a.thumb:hover{border:solid 1px #fff;}
#wrap .gallery a.thumb span{float:left; width:70px; height:55px; overflow:hidden;}