@font-face {
    font-family: 'TradeGothicLTStdBdCnNo.20';
    src: url('tradegothicltstd-bdcn20-webfont.eot');
    src: url('tradegothicltstd-bdcn20-webfont.eot?#iefix') format('embedded-opentype'),
         url('tradegothicltstd-bdcn20-webfont.woff') format('woff'),
         url('tradegothicltstd-bdcn20-webfont.ttf') format('truetype'),
         url('tradegothicltstd-bdcn20-webfont.svg#TradeGothicLTStdBdCnNo.20') format('svg');
	font-weight: lighter;
    font-style: normal;
	}


/* !Meta */
html,body,span,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { list-style-type:none; color:inherit; text-decoration:none; margin:0; padding:0; border:0; font-weight:inherit; vertical-align:baseline; outline:none; border-collapse:collapse; table-layout:fixed; }
.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; overflow:hidden; }
.clearfix { display:inline-block; }
html[xmlns] .clearfix { display:block; }
* html .clearfix { height:1%; }
html { text-rendering:optimizeLegibility;}

/* !Basics */
html { width:100%; height:100%; position:relative; }
body { font-family:"TradeGothicLTStdBdCnNo.20"; color: #fff; width:100%; height:100%; position:relative; -webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */ background-color: #000; 	overflow-x: hidden;}



#Pagecontainer {
	width:80px;
	background-color: #000;
}
.navcontainer{
}
#nav{
	list-style: none;
	position: fixed;
	left: 27px;
	top:20px;
		z-index: 50;
}
#nav li{
	margin: 0 0 15px 0;	
}
/* upplösning upp till 2560pixlar bred */
@media only screen and (min-width: 2002px) and (max-width: 6001px) {

		#frontpage{
			background:url(images/frontpageBG-2560.jpg) 50% 0 no-repeat fixed;
			color: white;
			height: 2560px;
			width: 2560px;
			margin: 0 auto;
			padding: 0;
			overflow: hidden;
			z-index: 100;
		}

		#frontpage .pont{
			background: url(images/bridge-2560.png) 50% 0 no-repeat fixed;
			height: 2240px;
			margin: 0 auto;
			margin-top: 832px;
			padding: 0;
			width: 2560px;
			position: absolute;
			z-index: 200;
		}
		#frontpage .logodiv{


			background-position:center; 
			text-align: center;
			height: 576px;
			margin: 0 auto;
			margin-top: 384px;
			padding: 0;
			left: 0;
			right: 0;
			width: 2000px;
			position: absolute;
			z-index: 200;
		}

		#frontpage .linjal{
			background: url(images/linjal-2560.png) 50% 0 no-repeat fixed;
			height: 2240px;
			margin: 0 auto;
			margin-top: 1536px;
			padding: 0;
			width: 2560px;
			position: absolute;
			z-index: 200;
		}

		#second{

			color: white;
			height: 1500px;
			margin: 0 auto;
			margin-top: 250px;
			overflow: hidden;
			padding: 0;
		}

		#third{
			background: url(images/IMG_2951-2560.jpg) 50% 0 no-repeat fixed;
			color: white;
			height: 1000px;
			padding: 100px 0 0 0;	
		}

		#oxygene{

			height: 900px;
			margin: 0 auto;
			margin-top: 300px;
			padding: 40px 0 0 0;
		}

		#forth{
			background: url(images/IMG_2723-2560.jpg) 50% 0 no-repeat fixed;
			color: white;
			height: 1000px;
			padding: 100px 0 0 0;	

		}

		#voyeur{
			background:url(images/voyeurBG.png) 50% 0 no-repeat fixed;
			background-size: 1600px;
			color: white;
			height: 4400px;
			width: 2100px;
			margin-top: 600px;
			padding: 0;
			overflow: hidden;
			z-index: 100;
		}

		#voyeur .voyeurFG{
			background: url(images/voyeurFG.png) 50% 0 no-repeat fixed;
			height: 4500px;
			margin-top: 0px;
			padding: 0;
			width: 2100px;
			position: absolute;
			z-index: 200;
		} 
		#fifth{
			background: url(images/IMG_2857-2560.jpg) 50% 0 no-repeat fixed;
			color: white;
			margin-top: 700px;
			height: 1000px;
			padding: 100px 0 0 0;	

		}
		#sixth{
			
			color: white;
			margin-top: 0px;
			margin-left: 10%;
			height: 1800px;
			padding: 100px 0 0 0;	

		}
		#seventh{
			background: url(images/IMG_2910-2560.jpg) 50% 0 no-repeat fixed;
			color: white;
			margin-top: 450px;
			height: 1000px;
			padding: 100px 0 0 0;	

		}

		.story{

				position: relative; 
				top: 0;
				left: 0;
				right: 0;
				text-align: center;
				height: 0;
		}


		.story .float-left, .story .float-right{


			position: absolute; 
			width: 800px; 
			top: 10px; 
			left: 0;
			right: 0;
			margin: 0 auto;
			z-index: 1000;
		}
		.lyrics{
			
			float: left;
			padding-left: 0%;
			padding-right: 0%;
			padding-top: 150px;
			font-size:16px !important;
			max-width:90%;
			display: block;
			-webkit-column-count: 8;
			-moz-column-count: 8;
			 column-count: 8;
			-webkit-column-gap: 20px;
			-moz-column-gap: 20px;
			column-gap: 20px; 
			text-align:left;
			text-justify:inter-word;
		}

		#oxygene-frame {

			width: 300px;
			height: 500px;
			border: 0;

		}

		#contentleft{
			width: 400px; 
			float: left; 
			font-family:"TradeGothicLTStdBdCnNo.20";
			font-size:18px;
		}
		#contentright{
			width: 400px; 
			float: right; 
			font-family:"TradeGothicLTStdBdCnNo.20";

		}

		.logo { margin-left: auto; margin-right: auto; display: block; width: 100%; width: 100%; height: auto; } 
		.knapp {width:25px; height:25px; background-color: #FFF; 	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-top:5px;}
		.menuimg { margin: 37px;}
		.headerintro { margin-right: 53px; margin-bottom: 45px;}
		#table { width: 800px;	height: 375px;}
		#player { Margin-left: 10%; margin-top: 425px; width: 300px; }

}
/* upplösning upp till 2000pixlar bred */


@media only screen and (min-width: 1011px) and (max-width: 2001px) {

		#frontpage{
			background:url(images/frontpageBG-2000.jpg) 50% 0 no-repeat fixed;
			color: white;
			height: 2000px;
			width: 2000px;
			margin: 0 auto;
			padding: 0;
			overflow: hidden;
			z-index: 100;
		}

		#frontpage .pont{
			background: url(images/bridge-2000.png) 50% 0 no-repeat fixed;
			height: 1750px;
			margin: 0 auto;
			margin-top: 650px;
			padding: 0;
			width: 2000px;
			position: absolute;
			z-index: 200;
		}
		#frontpage .logodiv{


			background-position:center; 
			text-align: center;
			height: 450px;
			margin: 0 auto;
			margin-top: 300px;
			padding: 0;
			max-width: 2000px;
			position: absolute;
			z-index: 200;
		}

		#frontpage .linjal{
			background: url(images/linjal-2000.png) 50% 0 no-repeat fixed;
			height: 1750px;
			margin: 0 auto;
			margin-top: 1200px;
			padding: 0;
			width: 2000px;
			position: absolute;
			z-index: 200;
		}

		#second{

			color: white;
			height: 1200px;
			margin: 0 auto;
			margin-top: 50px;
			overflow: hidden;
			padding: 0;
		}

		#third{
			background: url(images/IMG_2951-2000.jpg) 50% 0 no-repeat fixed;
			color: white;
			height: 650px;
			padding: 100px 0 0 0;	
		}

		#oxygene{

			height: 900px;
			margin: 0 auto;
			margin-top: 300px;
			padding: 40px 0 0 0;
		}

		#forth{
			background: url(images/IMG_2723-2000.jpg) 50% 0 no-repeat fixed;
			color: white;
			height: 650px;
			padding: 100px 0 0 0;	

		}

		#voyeur{
			background:url(images/voyeurBG.png) 50% 0 no-repeat fixed;
			color: white;
			height: 4475px;
			width: 2000px;
			margin-top: 1000px;
			padding: 0;
			overflow: hidden;
			z-index: 100;
		}

		#voyeur .voyeurFG{
			background: url(images/voyeurFG.png) 50% 0 no-repeat fixed;
			height: 4500px;
			margin-top: 0px;
			padding: 0;
			width: 2000px;
			position: absolute;
			z-index: 200;
		} 
		#fifth{
			background: url(images/IMG_2857-2000.jpg) 50% 0 no-repeat fixed;
			color: white;
			margin-top: 600px;
			height: 650px;
			padding: 100px 0 0 0;	

		}
		#sixth{
			display: table;
			color: white;
			margin-top: 10%;
			margin-left: auto;
			height: 1100px;
			padding: 100px 0 0 0;	

		}
		#seventh{

			background: url(images/IMG_2910-2000.jpg) 50% 0 no-repeat fixed;
			color: white;
			margin-top: 10%;
			height: 650px;
			padding: 100px 0 0 0;	
			

		}
		 
		.story{

				position: relative; 
				top: 0;
				left: 0;
				right: 0;
				text-align: center;
				height: 0;
		}


		.story .float-left, .story .float-right{


			position: absolute; 
			width: 650px; 
			top: 10px; 
			left: 0;
			right: 0;
			margin: 0 auto;
			z-index: 1000;
		}
		.lyrics{

			float: left;
			padding-left: 25px;
			padding-right: 25px;
			font-size:12px !important;
			max-width:1900px;
			display: block;
			-webkit-column-count: 10;
			-moz-column-count: 10;
           column-count: 10;
			-webkit-column-gap: 15px;
			-moz-column-gap: 15px;
			column-gap: 15px; 
			text-align:left;
			text-justify:inter-word;
		}

		#oxygene-frame {

			width: 300px;
			height: 500px;
			border: 0;

		}

		#contentleft{
			width: 300px; 
			float: left; 
			font-family:"TradeGothicLTStdBdCnNo.20";
		}
		#contentright{
			width: 300px; 
			float: right; 
			font-family:"TradeGothicLTStdBdCnNo.20";
		}

		.logo { margin-left: auto; margin-right: auto; display: block; width: 100%; height: auto; } 
		.knapp {width:25px; height:25px; background-color: #FFF; 	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-top:5px;}
		.menuimg { margin: 37px;}
		.headerintro { margin-right: 52px; margin-left: 52px;}
		#table { width: 650px;	height: 375px;}
		#player { Margin-left: 10%; margin-top: 265px; width: 300px; }

}

/*Slut på Css för tvåtusen pixlar*/

/*tabletter*/

@media only screen and (min-width: 767px) and (max-width: 1010px) {

				#frontpage{
					background:url(images/frontpageBG.png) 50% 0 no-repeat fixed;
					background-size: 1250px;
					color: white;
					height: 1250px;
					width: 1000px;
					margin: 0 auto;
					padding: 0;
					overflow: hidden;
					z-index: 100;
				}

				#frontpage .pont{
					background: url(images/bridge.png) 50% 0 no-repeat fixed;
					background-size: 100%;					
					height: 875px;
					margin: 0 auto;
					margin-top: 350px;
					padding: 0;
					width: 1000px;
					position: absolute;
					z-index: 200;
				}
				#frontpage .logodiv{


					background-position:center; 
					text-align: center;
					height: 450px;
					margin: 0 auto;
					margin-top: 150px;
					padding: 0;

					max-width: 2000px;
					position: absolute;
					z-index: 200;
				}

				#frontpage .linjal{
					background: url(images/linjal.png) 50% 0 no-repeat fixed;
					background-size: 100%;
					height: 875px;
					margin: 0 auto;
					margin-top: 730px;
					padding: 0;
					width: 2000px;
					position: absolute;
					z-index: 200;
				}

				#second{

					color: white;
					height: 1200px;
					margin: 0 auto;
					margin-top: 200px;
					overflow: hidden;
					padding: 0;
				}

				#third{
					background: url(images/IMG_2951-1400.jpg) 50% 0 no-repeat fixed;
					background-size: 1400px;
					color: white;
					height: 500px;
					padding: 100px 0 0 0;	
				}

				#oxygene{

					height: 900px;
					margin: 0 auto;
					margin-top: 300px;
					padding: 40px 0 0 0;
				}

				#forth{
					background: url(images/IMG_2723-1400.jpg) 50% 0 no-repeat fixed;
					background-size: 1400px;
					color: white;
					height: 500px;
					padding: 100px 0 0 0;	

				}

				#voyeur{
					background:url(images/voyeurBG-1400.png) 50% 0 no-repeat fixed;
					background-size: 825px;
					color: white;
					height: 2300px;
					width: 1200px;
					margin-top: 600px;
					padding: 0;
					overflow: hidden;
					z-index: 100;
				}

				#voyeur .voyeurFG{
					background: url(images/voyeurFG-1400.png) 50% 0 no-repeat fixed;
					background-size: 1050px;
					height: 2500px;
					margin-top: 0px;
					padding: 0;
					width: 1200px;
					position: absolute;
					z-index: 200;
				} 

				#fifth{
					background: url(images/IMG_2857-1400.jpg) 50% 0 no-repeat fixed;
					background-size: 1400px;
					color: white;
					height: 500px;
					padding: 100px 0 0 0;	

				}
		#sixth{
			display: table;
			color: white;
			margin-top: 10%;
			margin-left: auto;
			padding: 100px 0 0 0;	

		}
		#seventh{

			background: url(images/IMG_2910-2000.jpg) 50% 0 no-repeat fixed;
			color: white;
			margin-top: 10%;
			height: 500px;
			padding: 100px 0 0 0;	
			

		}				
				.story{

						position: relative; 
						top: 0;
						left: 0;
						right: 0;
						text-align: center;
						height: 0;
				}


				.story .float-left, .story .float-right{


					position: absolute; 
					width: 600px; 
					top: 5px; 
					left: 0;
					right: 0;
					margin: 0 auto;
					z-index: 1000;
				}
		.lyrics{
			
			float: left;
			padding-left: 25px;
			padding-right: 25px;
			padding-top: 125px;
			font-size:11px !important;
			max-width:1100px;
			display: block;
			-webkit-column-count: 5;
			-moz-column-count: 5;
           column-count: 5;
			-webkit-column-gap: 15px;
			-moz-column-gap: 15px;
			column-gap: 15px; 
			text-align:left;
			text-justify:inter-word;
		}

				#oxygene-frame {

					width: 300px;
					height: 500px;
					border: 0;

				}

				#contentleft{
					width: 300px; 
					float: left; 
					font-family:"TradeGothicLTStdBdCnNo.20";
				}
				#contentright{
					width: 300px; 
					float: right; 
					font-family:"TradeGothicLTStdBdCnNo.20";
				}

				.logo { margin-left: auto; margin-right: auto; display: block; width: 100%; height: auto; } 
				.knapp {width:20px; height:20px; background-color: #FFF; 	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-top:5px;}
				.menuimg { margin: 19px; width:60%;}
				.headerintro { margin-right: 40px; margin-left: 40px; width:500px;}
				#table { width: 650px;	height: 350px;}
				#player { Margin-left: 5%; margin-top: 175px; width: 150px; }


}

/* liten nalle */
@media only screen and (min-width: 240px) and (max-width: 766px) {
				#frontpage{
					background:url(images/frontpageBG.png) 50% 0 no-repeat fixed;
					background-size: 767px;
					color: white;
					height: 1250px;
					width: 1000px;
					margin: 0 auto;
					padding: 0;
					overflow: hidden;
					z-index: 100;
				}

				#frontpage .pont{
					background: url(images/bridge.png) 50% 0 no-repeat fixed;
					background-size: 767px;					
					height: 875px;
					margin: 0 auto;
					margin-top: 70px;
					padding: 0;
					width: 1000px;
					position: absolute;
					z-index: 200;
				}
				#frontpage .logodiv{


					background-position:center; 
					text-align: center;
					height: 450px;
					margin: 0 auto;
					margin-top: 150px;
					padding: 0;

					max-width: 2000px;
					position: absolute;
					z-index: 200;
				}

					#frontpage .linjal{
					background: url(images/linjal.png) 50% 0 no-repeat fixed;
					background-size: 767px;
					height: 875px;
					margin: 0 auto;
					margin-top: 420px;
					padding: 0;
					width: 2000px;
					position: absolute;
					z-index: 200;
				}


				#third{
					background: url(images/IMG_2951-767.jpg) 50% 0 no-repeat fixed;
					background-size: 767px;
					color: white;
					height: 200px;
					padding: 100px 0 0 0;	
				}


				#forth{
					background: url(images/IMG_2723-767.jpg) 50% 0 no-repeat fixed;
					background-size: 767px;
					color: white;
					height: 200px;
					padding: 100px 0 0 0;	

				}
				#fifth{
					background: url(images/IMG_2857-767.jpg) 50% 0 no-repeat fixed;
					background-size: 767px;
					color: white;
					height: 200px;
					padding: 100px 0 0 0;	

				}
				#sixth{
					
					color: white;
					margin-top: 700px;
					margin-left: auto;
					height: 1000px;
					padding: 100px 0 0 0;	

				}
				#seventh{
					background: url(images/IMG_2910-767.jpg) 50% 0 no-repeat fixed;
					background-size: 767px;
					color: white;
					margin-top: 700px;
					height: 200px;
					padding: 100px 0 0 0;	

				}		
				
				.logo { margin-left: auto; margin-right: auto; display: block; width: 100%; height: auto; } 
				.knapp {width:20px; height:20px; background-color: #FFF; 	-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-top:5px;}
				.menuimg { margin: 19px; width:60%;}
				.headerintro { margin-right: 40px; margin-left: 40px; width:500px;}
				#table { width: 650px;	height: 350px;}
				#player { Margin-left: 5%; margin-top: 50px; width: 150px; }
				
						.lyrics{
			
			float: left;
			padding-left: 15px;
			padding-right: 15px;
			padding-top: 50px;
			font-size:11px !important;
			max-width:766px;
			display: block;
			-webkit-column-count: 3;
			-moz-column-count: 3;
           column-count: 3;
			-webkit-column-gap: 10px;
			-moz-column-gap: 10px;
			column-gap: 10px; 
			text-align:left;
			text-justify:inter-word;
		}
} 

/* Nokia 3210 
@media only screen and (max-width: 240px) {
} */