/* 
Images location: /sites/r-img/name.jpg
ex: background: url(/sites/img/bgmid.png)
*/

* {	margin: 0;
	padding: 0;
}
html {  height: 100%;
}

body {
	background: #cabc9a url(/img/bg.png) center top repeat-x;
	margin: 0 auto;	padding-bottom: 0;
	max-width: 100%; height: 100%; position:relative;
}
                     /*//////////////////////  PAGE  ////////////////////*/

.wrapper { width: 900px;
	   margin: 0px auto; height: 100%;
}
img {
	max-width: 100%;
	height: auto;
	width: auto; border: 0;
}
.mainContent {  position: absolute;
		background: url(/img/raybg.png) center top no-repeat;
		    background-position: 0 220px; 
			top: 12%; margin-top: 0;
			height: 640px; width: 900px;
}

.logo { float: left;
		background: url(/img/logo.png) center top no-repeat;
        height: 100px; width:100%;
        margin: 0 0 0 0; padding: 0;
}
.menu2 { display: none; 
}
.menu { float: right; 
		 	width: 443px; height: 23px;
			margin: 40px 50px 10px 0; 
}
.fb {   float: right; background-image: url(/img/fb2.png);
              height:28px; width:28px;
			  margin-top: -5px; margin-right: 0;
}
#bfb {     background-image:url(/img/fb1.png);
              display:block; height:28px; width:28px;
}             #bfb:hover { background-image: none;}

.contact {   float: right; background-image: url(/img/contact1.png);
         	height: 23px; width:110px;
			margin-top: 0; margin-right: 10px;
}
#bcontact { display:block;
			background-image: url(/img/contact2.png);
	    	height: 23px; width:110px;
}        #bcontact:hover { background-image: none;}

.pics {   float: right; background-image: url(/img/pics1.png);
         	height: 23px; width:51px;
			margin-top: 0; margin-right: 10px;
}
#bpics { display:block;
			background-image: url(/img/pics2.png);
	    	height: 23px; width:51px;
}        #bpics:hover { background-image: none;}

.music {   float: right; background-image: url(/img/music1.png);
         	height: 23px; width:69px;
			margin-top: 0; margin-right: 10px;
}
#bmusic { display:block;
			background-image: url(/img/music2.png);
	    	height: 23px; width:69px;
}        #bmusic:hover { background-image: none;}

.band {   float: right; background-image: url(/img/band1.png);
         	height: 23px; width:65px;
			margin-top: 0; margin-right: 10px;
}
#bband { display:block;
			background-image: url(/img/band2.png);
	    	height: 23px; width:65px;
}        #bband:hover { background-image: none;}
.home {   float: right; background-image: url(/img/home1.png);
         	height: 23px; width:65px;
			margin-top: 0; margin-right: 10px;
}
#bhome { display:block;
			background-image: url(/img/home2.png);
	    	height: 23px; width:65px;
}        #bhome:hover { background-image: none;}

.rightbox { float: right; background: rgba(0, 0, 0, 0.7);
       		height: 430px; width: 570px; margin-right: 50px;
           -moz-box-shadow: 1px 2px 6px #2e2b24;
           -webkit-box-shadow: 1px 2px 6px #2e2b24;
           box-shadow: 1px 2px 6px #2e2b24;               
}
.right { float: left; overflow-y: hidden;
               margin-top: 12px;
               height: 408px; width: 570px;
}
#centerscroll { height:405px;
        	width: 570px;
        	overflow: hidden;
        	position: relative;
}
.rightcontent { float: left;
				padding: 8px 12px 12px 12px;
                width: auto;				
}
.left { float: right; background: rgba(0, 0, 0, 0.7);
       		height: 430px; width: 220px; margin-right: 10px;
           -moz-box-shadow: 1px 2px 6px #2e2b24;
           -webkit-box-shadow: 1px 2px 6px #2e2b24;
           box-shadow: 1px 2px 6px #2e2b24;               
}
.leftcontent { float: left;
               padding: 20px 12px 12px 12px; 
               width: auto;
}

                 /*////////////  FOOTER   //////////////*/
.bottom{
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	background: url(/img/bg-bottom.png) center top repeat-x;
	height:517px;
	padding-bottom:0;
	z-index: -3;
}
div#footer { width: 100%; height: 40px; margin: 20px 0 0 0;
             clear:both;    /* keep footer below content and menu */
             color: #103447;
             
}
div#footer p { font-size: 0.75em;
               margin: 0; padding-top: 0; text-align: center; 
}
div#footer p a { color: #227286;  
}

div#footer a:hover { font-weight: normal; color: #175160;
}
.clearfloat { 
	clear: both;
	height: 0;
	line-height: 0px;
}
/**********************************************************************************/
/******************* for 960px or less *******************************************/

@media screen and (max-width: 960px) {
	body {}
.wrapper {   width:100%;
	     margin: 0px auto; 
}
.logo { 
}
.mainContent {  position: relative;
			top: 0; margin-top: 50px;
			height: auto; width: 100%;
}
.menu { float: right; 
		 	width: 443px; height: 23px;
			margin: 30px 5% 10px 0; 
}
.rightbox { float: right; background: rgba(0, 0, 0, 0.7);
       		height: 430px; width: 65%; margin-right: 5%;
           -moz-box-shadow: 1px 2px 6px #2e2b24;
           -webkit-box-shadow: 1px 2px 6px #2e2b24;
           box-shadow: 1px 2px 6px #2e2b24;               
}
.right { float: left; overflow-y: hidden;
               margin-top: 12px;
               height: 408px; width: auto;
}
#centerscroll { height:408px;
        	width: 100%;
}
.rightcontent {width: auto; min-height: 300px;
              padding: 8px 12px 15px 12px;
}
.left {	height: 430px; width: 24%; margin-right: 10px;
        -moz-box-shadow: 1px 2px 6px #2e2b24;
        -webkit-box-shadow: 1px 2px 6px #2e2b24;
         box-shadow: 1px 2px 6px #2e2b24;               
}
.leftcontent { float: left;
               padding: 20px 12px 12px 12px; 
               width: 90%;
}
}
/*********** for 768px or less *******************/
@media screen and (max-width: 768px) {
	body {background: #cabc9a url(/img/bg-small.png) center top repeat-x;
}
.wrapper {
}
.bottom{ display: none;
}
.mainContent {  position: relative; background: none;
		    background-position: 0; 
			top: 0; margin-top: 30px;
			height: auto; width: 100%;
}
.menu { float: right; 
		 	width: 443px; height: 23px;
			margin: 20px 2% 10px 0; 
}
.rightbox { float: right; background: rgba(0, 0, 0, 0.7);
       		height: auto; width: 64%; margin-right: 2%;
           -moz-box-shadow: 1px 2px 6px #2e2b24;
           -webkit-box-shadow: 1px 2px 6px #2e2b24;
           box-shadow: 1px 2px 6px #2e2b24;               
}
.right { float: left; overflow-y: hidden;
               margin-top: 12px;
               height: auto; width: auto;
}
#centerscroll { height:auto;
        	width: auto;
}
.rightcontent {width: auto; min-height: 410px;
              padding: 10px 12px 15px 12px;
}
.left {	height: auto; width: 30.5%; margin-right: 1.5%;
        -moz-box-shadow: 1px 2px 6px #2e2b24;
        -webkit-box-shadow: 1px 2px 6px #2e2b24;
         box-shadow: 1px 2px 6px #2e2b24;               
}
.leftcontent { float: left; height: 414px;
               padding: 20px 12px 12px 12px; 
               width: 90%;
}
div#footer { width: 100%; height: 35px; margin: 15px 0 0 0;
             clear:both;    /* keep footer below content and menu */
             color: #103447;
             
}
}
/*********************** for 480px or less ***********************/
@media screen and (max-width: 480px) {
body {}
.wrapper {}
.mainContent {  position: relative;
			top: 0; margin-top: 10px;
			height: auto; width: 100%;
}
.logo { float: left;
		background: url(/img/logo-small.png) center top no-repeat;
        height: 60px; width:100%;
        margin: 0 0 0 0; padding: 0;
}
.menu { display: none; 
}
.menubox { width: 230px; height: 65px;
			margin: 0px auto;
}
.menu2 { display: block; float: left; 
		 	width: 230px; height: 50px;
			margin: 15px auto; 
}
.contact {   float: left; background-image: url(/img/contact1.png);
         	height: 23px; width:110px;
			margin-top: 4px; margin-right: 0; margin-left: 7px;
}
#bcontact { display:block;
			background-image: url(/img/contact2.png);
	    	height: 23px; width:110px;
}        #bcontact:hover { background-image: none;}

.pics {   float: left; background-image: url(/img/pics1.png);
         	height: 23px; width:51px;
			margin-top: 4px; margin-right: 0; margin-left: 7px;
}
#bpics { display:block;
			background-image: url(/img/pics2.png);
	    	height: 23px; width:51px;
}        #bpics:hover { background-image: none;}

.music {   float: left; background-image: url(/img/music1.png);
         	height: 23px; width:69px;
			margin-top: 0; margin-right: 0; margin-left: 15px;
}
#bmusic { display:block;
			background-image: url(/img/music2.png);
	    	height: 23px; width:69px;
}        #bmusic:hover { background-image: none;}

.band {   float: left; background-image: url(/img/band1.png);
         	height: 23px; width:65px;
			margin-top: 0; margin-right: 0; margin-left: 15px;
}
#bband { display:block;
			background-image: url(/img/band2.png);
	    	height: 23px; width:65px;
}        #bband:hover { background-image: none;}
.home {   float: left; background-image: url(/img/home1.png);
         	height: 23px; width:65px;
			margin-top: 0; margin-right: 0; margin-left: 0;
}
#bhome { display:block;
			background-image: url(/img/home2.png);
	    	height: 23px; width:65px;
}        #bhome:hover { background-image: none;}
.gigs {   float: left; background-image: url(/img/gigs1.png);
         	height: 23px; width:54px;
			margin-top: 4px; margin-right: 0; margin-left: 0;
}
#bgigs { display:block;
			background-image: url(/img/gigs2.png);
	    	height: 23px; width:54px;
}        #bgigs:hover { background-image: none;}
.rightbox { float: right; background: rgba(0, 0, 0, 0.7);
       		height: auto; width: 96%; margin-right: 2%;
}
.right { float: left; overflow-y: hidden;
               margin-top: 12px;
               height: auto; width: auto;
}
#centerscroll { height:auto;
        	width: auto;
}
.rightcontent {width: auto; min-height: 410px;
              padding: 10px 12px 15px 12px;
}
.left {	display: none;               
}
}

@media (min-width: 981px) {
	.headerPic {
		width: 50%;/*500px*/;
		float:left;
		padding:20px;
	}
	.websiteDescription {
		margin-left: 50%/*500px*/;
	}	
	

}
/**************************/
/*********************************End Media Queries****************************************/
/**************************/