@charset "UTF-8";
/* CSS Document */
@font-face {
	font-family: 'HighFiberRegular';
	src: url('HighFiber.eot');
	src: local('High Fiber'), local('HighFiber'), url('HighFiber.woff') format('woff'), url('HighFiber.ttf') format('truetype');
}

body  {
	font: 120% HighFiberRegular, Verdana, Arial, Helvetica, sans-serif;
	background: #000;
	margin: 0;
	padding: 0;
	font-weight:bold;
	text-align: center;
}

img  { border:0;}

#container { 
	width: 980px;
	height: 736px;
	background: url(../img/background.jpg) no-repeat ;
	margin: 0 auto;
	text-align: left;
} 

ul.menu	{
	height: 67px;
	width: 899px;
	background: transparent url(../img/bkg_nav.jpg) 45px 60px no-repeat;
	padding: 60px 45px 0 45px;
	position: relative;
	margin: 0;
	}
ul.menu li  {
	margin: 60px 45px 0 45px;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	}
ul.menu li, ul.menu a {
	height: 67px;
	display: block;
	}

ul.gallerymenu	{
	height: 287px;
	width: 144px;
	background: transparent url(../img/menu_gallery.png) top left no-repeat;
	margin: 50px 0 0 35px;
	padding: 0;
	position: relative;
}

ul.gallerymenu li  {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	left: 0;
}
ul.menu li, ul.gallerymenu a { width: 144px; display: block; }
ul.menu li a, ul.gallerymenu li a { text-indent: -9999px; overflow: hidden; text-decoration: none; }

#gallery	{left: 0; width: 159px;}
#bio	{left: 159px; width: 125px;}
#contact {left: 284px; width: 137px;}

#gallery a:hover {background: transparent url(../img/menu.jpg) 0 -67px no-repeat;}
#bio a:hover {background: transparent url(../img/menu.jpg) -159px -67px no-repeat;}
#contact a:hover {background: transparent url(../img/menu.jpg) -284px -67px no-repeat;}

#body-gallery  #gallery a:hover	{background: transparent url(../img/menu.jpg) 0 0 no-repeat;}
#body-bio #bio a:hover {background: transparent url(../img/menu.jpg) -159px 0 no-repeat;}
#body-contact #contact a:hover {background: transparent url(../img/menu.jpg) -284px 0 no-repeat;}
	
#body-gallery #gallery {background: transparent url(../img/menu.jpg) 0 0 no-repeat;}
#body-bio #bio {background: transparent url(../img/menu.jpg) -159px 0 no-repeat;}
#body-contact #contact {background: transparent url(../img/menu.jpg) -284px 0 no-repeat;}

#music	{top: 0; left: 0; height:67px;width: 144px;}
#people {top: 67px; left: 0;height:77px;width: 144px;}
#live {top: 144px; left: 0; height:70px;width: 144px;}
#project {top: 213px; left: 0;height:74px;width: 144px;}

#music a	{background:  url(../img/menu_gallery.png) 0 0 no-repeat;height: 67px;}
#people a {background:  url(../img/menu_gallery.png) 0 -67px no-repeat; height: 77px;}
#live a {background:  url(../img/menu_gallery.png) 0 -144px no-repeat; height: 70px;}
#project a {background: transparent url(../img/menu_gallery.png) 0 -214px no-repeat;height: 74px;}
#music.active a, #music a:hover	{background:  url(../img/menu_gallery.png) -144px 0 no-repeat;height: 67px;width:144px;}
#people.active a, #people a:hover {background: transparent url(../img/menu_gallery.png) -144px -67px no-repeat;height: 77px;width:144px;}
#live.active a, #live a:hover {background: transparent url(../img/menu_gallery.png) -144px -144px no-repeat;height: 70px;width:144px;}
#project.active a, #project a:hover {background: transparent url(../img/menu_gallery.png) -144px -214px no-repeat;height: 74px;width:144px;}
	
#mainContent { width: 800px; padding: 27px 0 0 50px; float:left; } 
#sidebar {line-height:1px;float: right; width:200px; padding: 0px 55px 0 0; }
#body-bio #mainContent img { margin: 0 20px 20px 12px; float:left; }
#body-gallery #mainContent { width: 630px;}
#sidebar img#dan {margin-bottom:60px;}
#sidebar img#phone {margin-bottom:7px;}

#fadeshow { position:relative; margin:20px 0 0 12px; width:662px; height:467px; overflow:hidden; }
#fadeshow img {position:absolute; top:0;display:none;}
#fadeshow img.landscape {margin-left:0px;margin-top:0px;}
#fadeshow img.portrait {margin-left:168px;margin-top:0px;height:480px;}
#fadeshow img.squared {margin-left:100px;margin-top:0px;}
#fadeshow #landscape {display:none;position:absolute; top:0; left:0;}
#fadeshow #portrait {position:absolute; top:0; left:0;}
#fadeshow #squared {position:absolute; top:0; left:0;}
#footer { position:relative;}
#counter {display:inline-block;width:56px; font-size:120%;}
#fadeshowtoggler {margin: 10px 250px; width:300px;height:40px;}
#fadeshowtoggler span span {width:13px; display:inline-block; text-align:center;}
.prev, .next {height:27px;display:inline-block;}
.comma {font-size:30px;line-height:17px;}