/* ----// Sets the custom scroll bar //---- */

a:focus { outline:0; }

#scroll-it { overflow:hidden; }
::-webkit-scrollbar { width:10px;}
::-webkit-scrollbar-track-piece { margin:10px 0 105px 0; background-color:#cbcccc; -webkit-border-radius:5px; }
::-webkit-scrollbar-thumb:vertical { height:63px; background-color:#989999; -webkit-border-radius:5px; }
::-webkit-scrollbar-thumb:vertical:hover { background-color:#878888; }

@media only screen and (max-device-width:480px) {
	#scroll-it { overflow:auto; }
}

#scroll-it { position:absolute; top:0; right:10px; bottom:0; left:0; overflow-y:scroll; overflow-x:hidden; }

@media only screen and (max-device-width:480px) {
	#scroll-it { position:relative; top:auto; right:auto; bottom:auto; left:auto; overflow:auto; }
}






body, html {margin: 0; padding: 0;}

body {font-family: Helvetica, Arial, sans-serif; color: black; font-weight: bold; font-size: 16px; background: url(images/bg.gif) top left no-repeat;}

ul, li {list-style: none; padding: 0; margin: 0;}

a {text-decoration: none; color: #bdbec0; font-size: 10px;}

a.normalLink {color: #000; font-weight: bold; font-size: 16px;}

a:hover {color:#e0b216 !important;}

/* tools */

a, .animate {-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;}



#change {display: none; width: 100%; text-align: left; height: 75px; border-bottom: 9px solid #bdbec0; position:fixed; z-index: 111; top: 0px; left: 0px; background: white;}

#change img, #change a {border: none;}




#wrapMac {position: absolute; width: 166px; height: 188px; top: 20px; right:0px; z-index: 1; overflow: hidden;}

#viewOnMac {position: absolute; width: 166px; height: 188px; background: url(images/viewonmac.jpg) top right no-repeat; right:-135px; z-index: 1;}






/****************
*****content*****
****************/

#wrapper {width: 100%; z-index: 40; float: left; min-height: 100%;}

#contentWrap {padding-left: 300px; padding-top: 25px; width: 600px;}

	.heads {font-size: 36pt; line-height: 34px; cursor: pointer; width: 600px;}
	
		div.heads:hover {color: #e0b216 !important;}
	
			#maxhead {color: #333333;}
	
				#rshead {color: #5b5b5b;}
		
					 #designhead {color: #949494;}
					 
					 	#dbhead, #skoonhead {color: #000;}
				
#superadesign {margin-bottom: 120px;}


.content {width: 100%; float: left; height: 0px; background: white;}






/****************
******about******
****************/

span.bigGray {display: block; width: 100%; color:#666;}

.aboutinfo {float: left;}

.mepic {float: left; background: url(images/picMe.jpg) top right no-repeat; width: 157px; height: 239px;}


#aboutwrap {display: none;}


.infoItem, .infoItem a {font-weight: normal; font-style: italic; color: black; font-size: 12px;}


.socialLinks {font-size: 12px; color: #666; font-style: italic;}

.socialLinks a{font-size: 12px;}








/****************
*****db stuff****
****************/

#dbWrap {display: none;}

#dblogos {display: block; width: 100%; height: 50px; background: url(images/dblogos.jpg) top left no-repeat;}


.gf-branding, .gf-branding-vertical {opacity:0; filter: alpha(opacity = 0);}

.gf-result .gf-title, .gf-result .gf-title a {color: black !important; font-size: 16px;}

.gf-title a:hover {color:#e0b216 !important;}


.calltoaction a{font-size: 24px !important; margin-top: 20px;}

.gfg-horizontal-root .gf-title, .gfg-title {margin-left: 0 !important; padding-left: 0 !important;}

.myfeeds {margin-top: 10px;}

.gfg-horizontal-root {border: none !important; padding: 0 !important; margin: 0 !important;}







/****************
*****rs stuff****
****************/

#rsWrap {display: none;}

#rslogos {display: block; width: 100%; height: 50px; background: url(images/rslogos.jpg) top left no-repeat;}

.player {float: left; margin-right: 50px;}


.playerwrap {float: left;}


.discography {display: block; width: 100%; padding-bottom: 5px; border-bottom: dotted #7d7d7d thin; color: #7d7d7d;}








/****************
***skoon stuff***
****************/
#skoonWrap {display: none;}

#skoonlogos {display: block; width: 100%; height: 50px; background: url(images/skoonLogo.jpg) top left no-repeat;}






/****************
**design stuff***
****************/
#designWrap {display: none;}

#designlogos {display: block; width: 100%; height: 50px; background: url(images/superalogo.jpg) top left no-repeat;}









/****************
*****footer******
****************/

#footer {width: 100%; height: 85px; border-top: 9px solid #bdbec0; position: fixed; z-index: 99; background: white; float: left; bottom: 0px; left: 0px;}


#footerWrap {position: relative; height: 85px; width: 100%; z-index: 99;}


#tweetHolder {height: 85px; position: relative; float: left; top:0px; left:0px; width: 50%; background: url(images/tweetBird.jpg) left center no-repeat; padding-left: 130px; text-align: left; z-index: 999;}

	#twitter_div {margin-top: 20px;}
	
		ul#twitter_update_list span{display: block; width: 100%; color: #7d7d7d; font-size: 12px;}

			#mytwitlink {font-style: italic;}








#contactBtn {height: 47px; width: 25%; float: right; position: absolute; top: 0px; right: 40px; font-size: 24pt; text-align: right; padding-top: 28px; cursor: pointer; color: #000; background: white; z-index: 100;}

#contactBtn:hover {color:#e0b216 !important;}


#contactHolder {display:none; width:500px; position: absolute; z-index: 50; bottom: 85px; right: 20px; border-top: 9px solid #bdbec0; border-right: 9px solid #bdbec0; border-left: 9px solid #bdbec0; border-bottom: 9px dashed #bdbec0; opacity:0; filter: alpha(opacity = 0); background: white;}



		.contactPad {padding: 15px;}
		
		
		
		#contactInfo {float: left; border-right: thin dotted #bdbec0; padding-bottom: 25px;}
		
		#contactForm {float: left;}

		.myinputs {border: black solid thin;}

.thanks {font-size: 30pt; line-height: 34px; cursor: pointer; width: 600px;}