@import url("../webfont/stylesheet.css");

/* reset stuff */
* {
	margin:0;
   	padding:0;
}
/* set stuff */
html {
	width:100%;
	height:100%;
	/*font-family: 'Comfortaa';*/
	font-family: 'bankgothic_lt_btlight';
	/*font-family: 'liberatorregular';*/
	font-weight:400;
	font-size:15px;
	background-color: #000;
	background-image: url(../images/SciSonicBG.jpg);
	background-position: center top;
	background-repeat:no-repeat;
	color:#fff;
	overflow-x: hidden;
	text-align:center;
	position:relative;
}

a{
	color:white;
	text-decoration:none;
}

/* Preloader */
#preloader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#000; /* change if the mask should have another color then white */
	z-index:1999999999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../images/status.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

audio{
	position:fixed;
	z-index:1999999997;
	top:0;
	right:0;
}

#mute-off {
	background-color:transparent !important;
	border-radius:0 !important;
	width:15px !important;
	height:15px !important;
	background-image:url(../images/mute-off-over.png) !important;
}

#mute-off:hover {
	background-image:url(../images/mute-off.png) !important;

}

#mute-on {
	background-color:transparent !important;
	border-radius:0 !important;
	width:15px !important;
	height:15px !important;
	background-image:url(../images/mute-on.png) !important;
}

#mute-on:hover {
	background-image:url(../images/mute-on-over.png) !important;
}

#play {
	position:absolute;
	bottom:300px;
	/*margin-left:-500px;*/
}


ul li {
	line-height:32px;
	font-size:16px;
	color:#fff;
	font-weight:300;
	list-style:none;

}

#nav{
	position:fixed;
	z-index:1999999998;
	right:10px;
	top:36%;
}

#nav a {
	display:block;
	background-color:#fff;
	border-radius:10px;
	width:14px;
	height:14px;
	margin:0 0 12px 0;
}

#nav a:hover {
	background-color:#FFC41F;
}

.active {background-color:#FFC41F !important;}


.navlabel {
    position:fixed;
    right:36px;
    background-color:#FFC41F;
    padding:10px;
    color:#000;
}

.navlabel img { position:absolute; margin:3px 0 0 10px;
}


#navintrolabel{ margin-top:-13px; display:none;}
#nav1label{ margin-top:14px; display:none;}
#nav2label{	margin-top:40px; display:none;}
#nav3label{	margin-top:66px; display:none;}
#nav4label{	margin-top:92px; display:none;}
#nav5label{	margin-top:118px; display:none;}
#nav6label{	margin-top:144px; display:none;}
#nav7label{	margin-top:170px; display:none;}
#nav8label{	margin-top:196px; display:none;}
#navmuteofflabel{margin-top:187px; display:none;}
#navmuteonlabel{margin-top:187px; display:none;}

#content {
   	height:5550px;
   	margin:0px auto; /* this line centers the main content body horizontally. */
   	padding:0 0px;
	position: relative;
	z-index: 100000;
	max-width:1000px;

}

#tv{
   	margin:2542px auto 0 -139px; /* this line centers the main content body horizontally. */
	position:absolute;
	left:50%;
	display:none;


}

#star1{
	z-index: 1;
	position: fixed;
	top: 0px;
	opacity:1;
}

#star1 #s1s1{
		position: absolute;
		top: 792px;
		left: 8px;
}
#star1 #s1s2{
		position: absolute;
		top: 792px;
		left: 308px;
}
#star2{
	z-index: 1;
	position: fixed;
	top: 0px;
	opacity:1;
}

#star2 img{
		position: absolute;
		top: 350px;
		left: 148px;
}

#star3{
	z-index: 1;
	position: fixed;
	top: 0px;
	opacity:1;
}

#star3 #s3s1{
		position: absolute;
		top: 850px;
		left: 798px;
}

#star3 #s3s2{
		position: absolute;
		top: 350px;
		left: 398px;
}

#star4{
	z-index: 1;
	position: fixed;
	top: 0px;
	opacity:1;
}

#star4 img{
		position: absolute;
		top: 200px;
		left: 98px;
}

#moon{
	z-index: 1;
	position: fixed;
	top: 0px;
	opacity:1;
}

#moon img{
		position: absolute;
		top: 0px;
		left: 300px;
}
/* DORIAN WEST */
#parallax-intro {
	z-index: 1;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 50px;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	}
	h1#welcome {
		text-align:center;
		left: 180px;
		font-size:50px;
		color:#fff;
		font-family: 'bankgothic_md_btmedium';
		line-height:44px;
		font-weight:normal;
		}
	h1#welcome span {
		color:#FFC41F;
	}
	#logo {
		font-size:50px;
		color:#fff;
		margin:0 0 30px 0;
		}

	h2#intro-text{
		font-size:20px;
		color:#fff;
		text-align:center;
		margin:30px 0 0 0;
		letter-spacing:2px;
		font-weight:normal;
		line-height:26px;
	}

	h2#intro-text span{
		font-weight:normal;
		font-family: 'bankgothic_md_btmedium';
	}

	#intro-arrow, #back-arrow{
		text-align:center;
		position:fixed;
		bottom:10px;
		margin:0 auto;
		width:1000px;
		opacity:0;
		z-index:999999;
	}

	#scrollarrow-back{
	display:none;
	}


#parallax-flare {
	z-index: 1;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0px;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	opacity:1;
	}
#flare-img{
		position: absolute;
		top: 1300px;
		left:-100px;
}
/* DORIAN WEST */
#parallax-bg1 {
	z-index: 1;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	opacity:0;
	}
	#dorian span{
		font-size:50px;
		color:#fff;
		font-family: 'bankgothic_lt_btlight';
	}
	#dorian {
		position: absolute;
		top: 780px;
		left: 260px;
		font-size:50px;
		color:#fff;
		font-family: 'bankgothic_lt_btlight';
		}


	#contact{
		position: absolute;
		top: 798px;
		left:-50px;
		font-size:50px;
		color:#fff;
		text-align:right;
		font-size:16px;
		}
	#address{
		position: absolute;
		top: 798px;
		left: 870px;
		font-size:50px;
		color:#fff;
		text-align:left;
		font-size:16px;
		width:300px;

		}
	#address a{
		display: block;

	}
	#line1{
		position: absolute;
		top: 787px;
		left: 312px;
		height:38px;
		width:1px;
		border-right:1px dashed #fff;
		}
	#line2{
		position: absolute;
		top: 787px;
		left: 616px;
		height:38px;
		width:1px;
		border-right:1px dashed #fff;
		}

/* midground (clouds) */
#parallax-bg2 {
	z-index: 2;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	}

	#music-director-circle{
		background-image:url(../images/circle1-bg.png);
		width:980px;
		height:380px;
		position:absolute;
		z-index:1;
		top: 867px;
		left: 10px;
	}


	#music-director {
		position: absolute;
		top: 1040px;
		left: 456px;
		color:#FFC41F;
		font-weight:normal;
		z-index:999;
		letter-spacing:1px;
		}
	#music-director-bg {
		position: absolute;
		top: 962px;
		left: 404px;
		z-index:998;
		}
	#music-director-list-right {
		position: absolute;
		top: 942px;
		left: 624px;
		}
	#music-director-list-right ul li {
		text-align:left;
		}

	#music-director-list-right ul li span{
	color:#FFC41F;
	font-size:12px;
	}

	#music-director-list-left {
		position: absolute;
		top: 942px;
		left: 75px;
		}

	#music-director-list-left ul li {
		text-align:right;
		}

	#music-director-list-left ul li span{
	color:#FFC41F;
	font-size:12px;
	}



#parallax-bg3 {

	z-index: 3;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	}

	#theme-composer-circle{
		background-image:url(../images/circle2-bg.png);
		width:980px;
		height:380px;
		position:absolute;
		z-index:1;
		top: 1168px;
		left: 11px;
	}
	#theme-composer {
		position: absolute;
		top: 1334px;
		left: 448px;
		color:#113E4F;
		font-weight:normal;
		z-index:999;
		letter-spacing:1px;
		}
	#theme-composer-bg {
		position: absolute;
		top: 1262px;
		left: 404px;
		z-index:998;
		}
	#theme-composer-list-right {
		position: absolute;
		top: 1253px;
		left: 624px;
		}
	#theme-composer-list-right ul li {
		text-align:left;
		line-height:18px;
		padding:0 0 26px 0;
		}

	#theme-composer-list-right ul li span, #theme-composer-list-left ul li span{
	color:#113E4F;
	font-size:12px;
	}

	#theme-composer-list-left {
		position: absolute;
		top: 1253px;
		left: 58px;
		}

	#theme-composer-list-left ul li {
		text-align:right;
		line-height:18px;
		padding:0 0 26px 0;
		}


#parallax-bg4 {

	z-index: 3;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	}

	#record-producer-circle{
		background-image:url(../images/circle3-bg.png);
		width:980px;
		height:460px;
		position:absolute;
		z-index:1;
		top: 1529px;
		left: 11px;
	}
	#record-producer {
		position: absolute;
		top: 1740px;
		left: 452px;
		color:#fff;
		font-weight:normal;
		z-index:999;
		letter-spacing:1px;
		}
	#record-producer-bg {
		position: absolute;
		top: 1662px;
		left: 404px;
		z-index:998;
		}
	#record-producer-list-right {
		position: absolute;
		top: 1545px;
		left: 630px;
		}
	#record-producer-list-right ul li {
		text-align:left;
		color:#402413;
		}

	#record-producer-list-right ul li span, #record-producer-list-left ul li span{
	color:#fff;
	font-size:12px;
	}

	#record-producer-list-left {
		position: absolute;
		top: 1545px;
		left: 166px;
        z-index:100000;
		}

	#record-producer-list-left ul li {
		text-align:left;
		color:#402413;
		}

#parallax-bg5 {

	z-index: 3;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	}

	#film-circle{
		background-image:url(../images/circle4-bg.png);
		width:980px;
		height:670px;
		position:absolute;
		z-index:1;
		top: 3018px;
		left: 10px;
	}
	#film {
		position: absolute;
		top: 3320px;
		left: 441px;
		color:#fff;
		font-weight:normal;
		z-index:999;
		letter-spacing:0px;
		font-size:14px;
		}
	#film-bg {
		position: absolute;
		top: 3262px;
		left: 404px;
		z-index:998;
		}
	#film-list-right {
		position: absolute;
		top: 3160px;
		left: 624px;
		width:160px;
		}
	#film-list-right-alt {
		position: absolute;
		top: 3160px;
		left: 824px;
		}
	#film-list-right ul li, #film-list-right-alt ul li {
		text-align:left;
		color:#fff;
		line-height:16px;
		padding:0 0 20px 0;
		font-size:16px;
		}

	#film-list-right ul li span, #film-list-left ul li span, #film-list-right-alt ul li span, #film-list-left-alt ul li span{
	color:#8DD1F2;
	font-size:11px;
	}

	#film-list-left {
		position: absolute;
		top: 3160px;
		left: 220px;
		width:160px;
		}
	#film-list-left-alt {
		position: absolute;
		top: 3160px;
		left: 0px;
		width:170px;
		}

	#film-list-left ul li, #film-list-left-alt ul li {
		text-align:right;
		color:#fff;
		line-height:16px;
		padding:0 0 20px 0;
		font-size:16px;
		}


#parallax-bg6 {

	z-index: 3;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	}

	#artists-circle{
		background-image:url(../images/circle5-bg.png);
		width:980px;
		height:480px;
		position:absolute;
		z-index:1;
		top: 3611px;
		left: 11px;
	}
	#artists {
		position: absolute;
		top: 3814px;
		left: 452px;
		color:#fff;
		font-weight:normal;
		z-index:999;
		letter-spacing:1px;
		width:100px;
		line-height:14px;

		}

	#artists span{
		font-size:13px;

		}
	#artists-bg {
		position: absolute;
		top: 3762px;
		left: 404px;
		z-index:998;
		}
	#artists-list-right {
		position: absolute;
		top: 3684px;
		left: 624px;
		}
	#artists-list-right-alt {
		position: absolute;
		top: 3684px;
		left: 824px;
		}
	#artists-list-right ul li, #artists-list-right-alt ul li {
		text-align:left;
		color:#fff;
		font-size:16px;
		line-height:22px;
		}


	#artists-list-left {
		position: absolute;
		top: 3684px;
		left: 252px;
		}

	#artists-list-left-alt {
		position: absolute;
		top: 3684px;
		left: 0px;
		}

	#artists-list-left ul li, #artists-list-left-alt ul li  {
		text-align:right;
		color:#fff;
		font-size:16px;
		line-height:22px;
		}

#parallax-bg7 {

	z-index: 3;
	position: fixed;
	left: 50%; /* align left edge with center of viewport */
	top: 0;
	width: 1000px;
	margin-left: -500px; /* move left by half element's width */
	}

	#resume-circle{
		background-image:url(../images/circle6-bg.png);
		width:980px;
		height:660px;
		position:absolute;
		z-index:1;
		top: 3281px;
		left: 11px;
	}
	#resume {
		position: absolute;
		top: 3602px;
		left: 456px;
		color:#fff;
		font-weight:normal;
		z-index:999;
		letter-spacing:1px;
		}
	#resume-bg {
		position: absolute;
		top: 3522px;
		left: 404px;
		z-index:998;
		}
	#resume-list-right {
		position: absolute;
		top: 3584px;
		left: 624px;
		}
	#resume-list-right ul li {
		text-align:left;
		color:#c496e3;
		line-height: 16px;
		}

	#resume-list-right ul li span, #resume-list-left ul li span{
	color:#fff;
	font-size:12px;
	}

	#resume-list-left {
		position: absolute;
		top: 3600px;
		left: 260px;
		}

	#resume-list-left ul li {
		text-align:right;
		color:#c496e3;
		}