html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
    	-webkit-overflow-scrolling: touch;
	overflow-x:hidden !important;
	overflow-y: auto;   

}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

.noselect {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;   
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset, dl, dd, ul, li {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ===== Custom Styles ======================================================

   ========================================================================== */

#stars {
	display: block;
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
	}

#sccontrols {
	position: fixed;
	display: none;
	top: 4px; right: 5px;
	z-index: 65555;
	text-align: right;
	padding-right: 4px;
	}
#sccontrols img {
	opacity: 0.8;
	height: 22px;
	width: 22px;
	}
#sccontrols img:hover {
	opacity: 1;
	}


	
#easingselect {
	position: fixed;
	top: 0px; left: 0px;
	width: 400px; height: 40px;
	z-index: 65556;
	text-align: left;
	padding-left: 4px;
	}

#easingselect > select {
	font-size: 10px;
	}

	
dd,ul {
	display: inline-block;
	font-size: 12px;
	}
		
button, .button {
	background: rgba(233,233,233,0.8);
	cursor: pointer;
	border: 1px solid rgba(221,221,221,0.8);
	padding: 2px 8px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	margin: 0;
	cursor: pointer;
	}
	
body {
    font: 16px/26px 'Trebuchet MS', TrebuchetMS, Tahoma, Helvetica Neue, Arial;
    color: #ffffff;
    padding: 0;
    margin: 0;
    overflow: hidden;
	text-align:center;
	background-color: #000000;
	}
	
html,body {
	height: 100%;
	width: 100%;
	}
	
#pageLoadingVorhang {
	display: block; position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: black;
	z-index: 9999999;
	text-align: center;
	padding-top: 30%;
	color: #FFFFFF;
	
	}

#planetOuterWrapper {
	display: block; position:fixed;
	left: 0; bottom: 0; right: 0;
	margin-bottom: -400px;
	z-index: 300;
	pointer-events:none;
	}

#planetWrapper {
	position: absolute;
	width: 1600px;
	height: 1600px;
	top: 50%;
	left: 50%;
	margin-top: -800px;
	margin-left: -800px;
	z-index: 301;
	pointer-events:none;
	display: none;	
	}

#contentBoxesWrapper {
	position: fixed;
	width:500px;
	height:100%;
	left: 50%;
	margin-left: -250px;
	z-index: 299;
	}
.contentBox a:link, .contentBox a:visited, .contentBox > div > a:link, .contentBox > div > a:visited, a.white:link, a.white:visited  {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dashed #FFFFFF;
	}
.contentBox a:hover, .contentBox a:active, .contentBox > div > a:hover, .contentBox > div > a:active, a.white:hover, a.white:active {
	color: #ebef0d;
	text-decoration: none;
	border-bottom: 1px dashed #ebef0d;
	}

span.applnk {
	display: inline-block;
	text-align: center;
	width: 100%;
	}
span.applnk a {
´	font-family: Courier, 'Courier New', monospace !important;
	cursor: auto !important;
	display: inline !important;
	font-size: 16px !important;
	font-style: normal !important;
	font-variant: normal !important;
	font-weight: bold !important;
	height: auto !important;
	line-height: 26px !important;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	width: auto !important;
	}
span.applnk a:before {
	content: "  >> ";
	}
span.applnk a:link, span.applnk a:visited {
	border-bottom: 1px dotted #FFFFFF;
	}
span.applnk a:hover, span.applnk a:active {
	border-bottom: 1px dotted #ebef0d !important;
	}
	

.contentBox {
	display: none;
	position: absolute;
	border: 1px solid #FFFFFF;
	border-bottom: none;
	background-color: #000000;
	color: #FFFFFF;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
	-moz-border-radius: 10px 10px 0 0;
	-webkit-border-radius: 10px 10px 0 0;
	padding-top: 4px;
	padding-right: 4px;
	}
.contentBox > div {
	padding: 4px;
	display: block;
	position: relative; 
	left: 0; right: 0; top: 0; bottom: 0; height: 100%;
	font: 14px/16px 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
	text-align:left;
	overflow-x: hidden;
	overflow-y: auto;
	}
@-webkit-keyframes aboutBoxBG {
      0% {background-color: #76c3d6; /*#45CEEF;*/}
     25% {background-color: #d6ce8a; /*#FFF5A5;*/}
     50% {background-color: #dcb7b7; /*#FFD4DA;*/}
     75% {background-color: #98c3d0; /*#99D2E4;*/}
     100% {background-color: #a1a394; /*#D8CAB4;*/}
	}
.aboutBoxAni {
    -webkit-animation: aboutBoxBG 80s infinite alternate;
	}
#aboutBox {
	z-index: 471;
	width: 590px;	right: -30px;
	border-bottom: 0;
	background-color: #76c3d6; color: black;
	}
#aboutBox > div {
	padding: 10px;
	line-height: 20px;
	}
#musicBox {
	z-index: 461;
	width: 550px;	right: -90px;
	border-bottom: 0;
	background-color: #333333; color: black;
	}
#musicBox > div {
	z-index: 462;
	}
#newsBox {
	z-index: 481;
	width: 430px;	right: -60px;
	border-bottom: 0;
	background-color: #efefef; color: black;
	}
#newsBox > div {
	overflow-y: hidden !important;
	}
#datesBox {
	z-index: 491;
	width: 295px;	right: -50px;
	border-bottom: 0;
	background-color: #000000; color: black;
	}
#datesBox > div {
	padding: 10px;
	line-height: 20px;
	}
#contactBox {
	z-index: 499;
	width: 410px;	right: -95px;
	border-bottom: 0;
	background-color: #382f28; color: white;
	}
#contactBox > div {
	padding: 10px;
	line-height: 20px;
	}

#aboutBox {
	height: 900px; 	bottom: -920px;
	}
#musicBox {
	height: 620px;	bottom: -640px;
	}
#newsBox {
	height: 800px;	bottom: -820px;
	}
#datesBox {
	height: 700px; 	bottom: -720px;
	}
#contactBox {
	height: 740px;	bottom: -760px;
	}

@media only screen and (max-height: 900px) {
	#aboutBox {
		height: 800px; 	bottom: -820px;
		}
	}
@media only screen and (max-height: 800px) {
	#aboutBox {
		height: 740px; 	bottom: -760px;
		}
	#newsBox {
		height: 700px;	bottom: -720px;
		}
	#datesBox {
		height: 680px; 	bottom: -700px;
		}
	#contactBox {
		height: 720px;	bottom: -740px;
		}
	}
@media only screen and (max-height: 700px) {
	#aboutBox {
		height: 690px; 	bottom: -710px;
		}
	#newsBox {
		height: 670px;	bottom: -690px;
		}
	#datesBox {
		height: 680px; 	bottom: -700px;
		}
	#contactBox {
		height: 675px;	bottom: -995px;
		}
	}
@media only screen and (max-height: 600px) {
	#aboutBox,#musicBox,#newsBox,#datesBox,#contactBox {
		height: 550px; 	bottom: -570px;
		}
	}
@media only screen and (max-height: 550px) {
	#aboutBox,#musicBox,#newsBox,#datesBox,#contactBox {
		height: 500px; 	bottom: -520px;
		}
	}
@media only screen and (max-height: 400px) {
	#aboutBox,#musicBox,#newsBox,#datesBox,#contactBox {
		height: 390px; 	bottom: -410px;
		}
	}




/* ==========================================================================
   Our Styles
   ========================================================================== */

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

#planetTween	{ z-index: 600;	top:   0px; left:   0px;  width: 1600px; height:1600px; display: block; position: absolute; background-image: url(/img/planetTween.gif); background-repeat: no-repeat; background-size: contain; }
#planet			{ z-index: 500;	top: 277px; left: 277px;  width: 1046px; height:1046px; display: block; position: absolute; background-image: url(/img/planetHohl.gif); background-repeat: no-repeat; background-size: contain; }

#musicBackgr	{ z-index: 410; top:  63px; left: 489px;  width: 585px;  height: 338px; display: block; position: absolute; background-image: url(/img/musicBackgr.gif); background-repeat: no-repeat; pointer-events:none; }
#music			{ z-index: 510; top:  63px; left: 489px;  width: 585px;  height: 338px; display: block; position: absolute; background-image: url(/img/music.gif); background-repeat: no-repeat; pointer-events:none; }

#aboutBackgr	{ z-index: 420; top: 335px; left: 10px;   width: 526px;  height: 537px; display: block; position: absolute; background-image: url(/img/aboutBackgr.gif); background-repeat: no-repeat; pointer-events:none; }
#about			{ z-index: 520; top: 335px; left: 10px;   width: 526px;  height: 537px; display: block; position: absolute; background-image: url(/img/about.gif); background-repeat: no-repeat; pointer-events:none; }

#newsBackgr		{ z-index: 430; top: 241px; left:1070px;  width: 428px;  height: 647px; display: block; position: absolute; background-image: url(/img/newsBackgr.gif); background-repeat: no-repeat; pointer-events:none; }
#news			{ z-index: 530; top: 241px; left:1070px;  width: 428px;  height: 647px; display: block; position: absolute; background-image: url(/img/news.gif); background-repeat: no-repeat; pointer-events:none; }

#contactBackgr	{ z-index: 440; top: 958px; left: 255px;  width: 507px;  height: 576px; display: block; position: absolute; background-image: url(/img/contactBackgr.gif); background-repeat: no-repeat; pointer-events:none; }	
#contact		{ z-index: 540; top: 958px; left: 255px;  width: 507px;  height: 576px; display: block; position: absolute; background-image: url(/img/contact.gif); background-repeat: no-repeat; pointer-events:none; }	

#datesBackgr	{ z-index: 450; top: 937px; left: 830px;  width: 714px;  height: 501px; display: block; position: absolute; background-image: url(/img/datesBackgr.gif); background-repeat: no-repeat; pointer-events:none; }
#dates			{ z-index: 550; top: 950px; left: 840px;  width: 714px;  height: 501px; display: block; position: absolute; background-image: url(/img/dates.gif); background-repeat: no-repeat; pointer-events:none; }

#menuwrapper	{ z-index: 900; position: fixed; bottom: -50px; width: 450px; height: 46px; left: 50%; margin-left: -215px; right: 0px; background-image: url(/img/menuBackgr.png); background-repeat: no-repeat; background-position: center top; }
#menu			{ margin: 0 auto 20px; text-transform: uppercase;  }

#menu ul {
	float: left;
	position: relative;
	left: 50%;
	margin: 0.5em auto;
	padding: 0;
	list-style-type: none;
	}

#menu ul li {
	float: left;
	position: relative;
	right: 50%;
	text-align: center; 
	white-space: nowrap;
	}

#menu ul li a {
	width: auto;
	display: block;
	margin: 0 4px;
	padding: 0 4px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: #FFFFFF;
	font-family: 'Special Elite', cursive;
	font-weight: bold;
	font-size: 20px;
	}

#menu ul li a:hover {
	color: black;
	}

#menu ul li a.current {
	color: black;
	}



/**********************************************************************************
 *	social buttons
 **********************************************************************************/

#socialcontainer {
	top: 0; left: -10px; width: 70px; height: 100%;
    position: fixed; display: table;
	z-index: 80555;
    }
	
#socialcontainer > div {
	display: table-cell; vertical-align: middle;
	}
#socialbuttons {
	display: none;
	margin-bottom: 40px;
	padding-left: 10px;
	min-height: 200px;
	background-color: #232323; 
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	}

#socialbuttons ul {
	position: relative;
	padding: 2px 0 2px 0;
	list-style-type: none;
	}

#socialbuttons ul li {
	
	padding: 2px 1px 2px 1px;
	position: relative;
	text-align: center; 
	}

#socialbuttons ul li:first-child img {
	-webkit-filter: brightness(150%);
	}
#socialbuttons ul li img {
	opacity: 0.9;
	}
#socialbuttons ul li img:hover {
	opacity: 1;
	-webkit-filter: brightness(200%);
	-webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
	




/**********************************************************************************
 *	scollbar customization
 **********************************************************************************/

/** {
	scrollbarBaseColor:			#f5f5f5;
	scrollbar-track-color:		#b1b1b1;
	scrollbar-face-color:		#484848;
	scrollbar-arrow-color:		#484848;
	scrollbar-highlight-color:	#484848;
	scrollbar-3dlight-color:	#484848;
	scrollbar-shadow-color:		#484848;
	scrollbar-darkshadow-color: #484848;
	}
	
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: none;
	}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: #484848;
}

*/
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	border-radius: 10px;
	background-color: rgba(0,0,0,0);
}

::-webkit-scrollbar
{
	width: 12px;
	background-color: #rgba(0,0,0,0);
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #7f1a78;
	background-color: #000000;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 480px) {


}

@media only screen and (min-width: 768px) {


}

@media only screen and (min-width: 1140px) {


}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}