/*
Theme Name: Everest
Author: Marko Ilic, mindsmash GmbH
Author URI: http://www.mindsmash.com
Version: 1.0
*/

@import 'css/normalize';

html{
	min-width: 620px;
	background: black;
	color: white;
	font-size: 10pt;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body{
	overflow-x: hidden;
	height: 100%;
	-webkit-backface-visibility: hidden; // fixes flickering for webkit animations
}

.touch{
	#wrapper{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
}

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

#darken{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: none;
	background: rgba(0,0,0,0.8);
}

#overlay-wrapper{
	padding-bottom: 170px;
	position: absolute;
	top: 30px;
	left: 50%;
	z-index: 3;
	display: none;
	margin: 0 auto;
	margin-left: -490px;
}

#overlay-wrapper{

	float: left;
	
	&.album{
		padding-bottom: 0;
	}
}

#overlay{
	width: 900px;
	padding: 40px;
	background: rgba(0,0,0,0.6);
	float: left;

    .content {
      clear: both;
      margin-top: 24px;
    }
	
	.close{
		text-align: right;
		
		img{
			cursor: pointer;	
		}
	}
	
	.back{
		display: inline-block;
		cursor: pointer;
	}
	
	#overlay-content{
		margin: 0;
		padding: 0;
		width: 900px;
	}
	
	h1{
		text-transform: uppercase;
		font-weight: normal;
	}
	
	h2{
		margin-bottom: 40px;
		color: #da5e1e;
		text-transform: uppercase;
		font-weight: normal;
        float: left;
		
		&.white{
			clear: both;
			padding-top: 10px;
			color: white;
		}
	}
	
	h3{
		color: #da5e1e;
		text-transform: uppercase;
		font-weight: normal;
	}
	
	p{
		line-height: 1.5em;
	}
	
	#cover, #tracklist{
		display: block;
		-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent) , to(rgba(250, 250, 250, 0.4))); 
	}
	
	#cover{
		float: left;
		margin-right: 60px;
	}
	
	#itunes{
		float: right;
		margin-top: 45px;

	}
	
	#amazon-link{
		background: white;
		width: 108px;
		height: 39px;
		display: block;
		float: right;
		margin-top: 45px;
		margin-left: 15px;
		border-radius: 4px;
	}

  #linkfire-link {
    float: right;
    margin-left: 15px;
  }
	
	#amazon{
		margin: 14px 24px;
	}
	
	.more{
		margin-bottom: 30px;		
	}
	
	.news{
		h2{
			margin-bottom: 15px;
		}
		
		.page-numbers{
			margin:0;
			padding: 0;
			
			li{
				display: block;
				float: left;
				margin-right: 5px;
				
				.current{
					color: #6f6f6f;
				}
			}
		}
	}
}

.touch{
	nav{
		position: absolute;
	}
}

nav{
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: 140px;
	background: rgba(0,0,0,0.92);
	vertical-align: middle;
	text-align: center;
	
	.nav-inner{
		position: absolute;
		left: 50%;
		margin-left: -490px;
		padding: 20px;
		width: 920px;
		height: 100px;
		
	
		img{
			float: left;
		}
		
		#countdown-media-logo{
			position: absolute;
			top: 50%;
			left: 20px;
			margin-top: -21px;
		}
		
		

		ul{
			float: left;
			margin: 0;
			padding: 0;
			
			li{
				display: block;
				float: left;
				color: #6f6f6f;
							
				.separator{
					padding: 0 20px;
				}
				
				&:first-child{
					.separator{
						display: none;
					}
				}
								
				a{
					&.active{
						color: white;
					}
				}
			}
		}
		
		#everest-logo{
			position: absolute;
			left: 50%;
			margin: 0 30px;
			margin-left: -52px;
		}
		
		.menu-links-container{
			position: absolute;
			top: 62px;
			right: 50%;
			margin-right: 80px;
		}
			
		.menu-rechts-container{
			position: absolute;
			top: 63px;
			left: 50%;
			margin-left: 80px;
		}
			
		
		#search {
			position: absolute;
			top: 50%;
			right: 20px;
			margin-top: -12px;
			padding: 3px;
			padding-right: 30px;
			width: 128px;
			height: 20px;
			border: 1px solid #6f6f6f;
			border-radius: 0;
			background: black url(img/search.png) no-repeat 140px center;
			color: white;
			font-size: 9pt;
		}
		
	}
}

#facebook{
	position: absolute;
	right: 20px; 
	bottom: 10px;
	z-index: 4;
}

#albums{
	padding-bottom: 140px;
	float: left;
	width: 100%;

	.album-wrapper{
		float: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 2px;
		height: auto;
		
		&:hover:not(.touch){
		    position: relative;
		    z-index: 1;
		    -webkit-transition-timing-function: ease-out;
		    -moz-transition-timing-function: ease-out;
		    -webkit-transition-duration: 250ms;
		    -moz-transition-duration: 250ms;
			-webkit-transform: scale(1.1,1.1);
		    -moz-transform: scale(1.1,1.1);
		    -ms-transform: scale(1.1,1.1);
		}
	}
	
	.album-content{
		display:none;
	}

	img{
		display: block;
		width: 100%;
	}
}

@media all and (max-width: 1000px) and (min-width: 0) {
	nav{
		.nav-inner{
			margin-left: -430px;
			width: 820px;
		}
	}
	
	#overlay-wrapper{
		margin-left: -400px;
		padding: 40px;
		
		#cover, #tracklist{
			width: 290px;
		}
	}
	
	#overlay, #overlay-content{
		width: 640px;
	}
}

@media all and (max-width: 860px) and (min-width: 0) {
	#countdown-media-logo, #search{
		display: none;
	}
}

@media all and (max-width: 800px) and (min-width: 0) {
	.album-wrapper{
		width: 25%;
	}
}

@media all and (max-width: 1000px) and (min-width: 800px) {
	.album-wrapper{
		width: 20%;
	}
}

@media all and (max-width: 1400px) and (min-width: 1000px) {
	.album-wrapper{
		width: 16.66666666%;
	}
}

@media all and (max-width: 1650px) and (min-width: 1400px) {
	.album-wrapper{
		width: 14.27%;
	}
}

@media all and (min-width: 1650px) {
	.album-wrapper{
		width: 12.5%;
	}
}