@import url(/assets/stylesheets/less/classes.less);

@font-face {
	font-family: 'Myriad-Pro';
	src: url('/assets/fonts/Myriad-Pro.eot'); /* IE */  
	src: local('Myriad-Pro'), url('/assets/fonts/Myriad-Pro.ttf') format('truetype'); /* non-IE */
	/*src: local('Myriad-Pro'), url('/assets/fonts/Myriad-Pro.woff') format('woff'); /* Modern Browsers */
}

@font-face {
	font-family: 'Myriad-Pro-Bold';
	src: url('/assets/fonts/Myriad-Pro-Bold.eot'); /* IE */  
	src: local('Myriad-Pro-Bold'), url('/assets/fonts/Myriad-Pro-Bold.ttf') format('truetype'); /* non-IE */
	/*src: local('Myriad-Pro-Bold'), url('/assets/fonts/Myriad-Pro-Bold.woff') format('woff'); /* Modern Browsers */
}

@font-face {
	font-family: 'Myriad-Pro-Bolder';
	src: url('/assets/fonts/Myriad-Pro-Bolder.eot'); /* IE */  
	src: local('Myriad-Pro-Bolder'), url('/assets/fonts/Myriad-Pro-Bolder.ttf') format('truetype'); /* non-IE */
	/*src: local('Myriad-Pro-Bolder'), url('/assets/fonts/Myriad-Pro-Bolder.woff') format('woff'); /* Modern Browsers */
}

@site-width: 994px;

.menu(@bg-pos)
{
	background: url(/assets/images/template/nav-bg.jpg) @bg-pos;
		
	&:hover, &.active { background: url(/assets/images/template/nav-bg-hover.jpg) @bg-pos; }
}

.image-holder() 
{
	.image-holder {
		top: 30px;
		width: 186px;
		height: 122px;
		margin: 0 auto;
		position: relative;
		background: #2D2D2D;
		
		img {
			width: 185px;
			height: 120px;
		}
	}
	
	.image-border {
		top: -97px;
		width: 196px;
		height: 132px;
		margin: 0 auto;
		display: block;
		z-index: 10;
		position: relative;
		background: url(/assets/images/template/image-border.png);
	}
}

.left { float: left; }
.right { float: right; }
.white { color: white; }

.m-r-5 { margin-right: 5px; }

* { font-family: Myriad-Pro; }

html, 
body { height: 100%; }
body { background: #000 url(/assets/images/template/bg.jpg) center bottom no-repeat; }

header {
	width: @site-width;
	height: 348px;
	z-index: 10;
	position: relative;
	background: url(/assets/images/template/header-bg.png);
}

h1,
h1 a { 
	font-size: 18pt;
	font-family: Myriad-Pro-Bold;
}

h1.music { 
	margin: 0 0 5px 0;
	
	.line { 
		width: 3px;
		margin: 0 2px;
		background: white;
		height: 17px;
		display: inline-block;
	}
}

hr {
	margin: 5px 0;
	border: none;
	background: #707070;
	
	&.dotted {
		background: transparent;
		border-bottom: 1px dotted #707070;
	}
}

nav {
	margin: 266px 0 0 11px;
	position: absolute;

	ul {
		overflow: hidden;
	
		li {
			float: left;
			margin: 0 7px 0 0;
			
			a {
				width: 82px;
				height: 30px;
				display: block;
			}
			
			&.tickets 		{ .menu(0px); }
			&.news 			{ .menu(-89px); }
			&.events 		{ .menu(-178px); }
			&.music 		{ .menu(-267px); }
			&.photo 		{ .menu(-356px); }
			&.movies 		{ .menu(-445px); }
			&.podcast 		{ .menu(-534px); }
			&.shop 			{ .menu(-623px); }
			&.radio 		{ .menu(-712px); }
			&.hardtunes		{ .menu(-801px); }
			&.djbookings 	{ .menu(-890px); }
		}
	}
}

#wrapper {
	width: @site-width;
	margin: 0 auto;
	
	.box-shadow(0, 0, 10px, 0, #000);
}

#logo {
	width: 390px;
	height: 170px;
	margin: 60px 0 0 0;
	display: block;
	position: absolute;
	background: url(/assets/images/template/logo.png);
}


#swf-container {
	width: 460px;
	height: 140px;
	margin: 60px 0 0 415px;
	display: block;
	position: absolute;
}

#radio {
	margin: 315px 0 0 20px;
	position: absolute;

	span {
		color: #C4C6C9;
		position: absolute;
		font-size: 8pt;
		text-align: center;
		font-family: Courier New;
		text-transform: uppercase;
		
		&.radio {
			color: #FFF;
			width: 40px;
			display: inline-block;
			
			border: 1px solid transparent;
		}
		
		&.nowlive {
			width: 63px;
			margin: 0 0 0 58px;
			display: inline-block;
			
			border: 1px solid transparent;
		}
	}
	
	marquee {
		margin: 0 0 0 139px;
		padding: 1px 0 0 0;
		position: absolute;
		font-size: 8pt;
		
		border: 1px solid transparent;
	}
	
	a {
		width: 100px;
		color: #FFF;
		margin: 4px 0 0 744px;
		display: inline-block;
		font-size: 10pt;
		text-align: center;
		font-family: Courier New;
		text-transform: uppercase;
		text-decoration: none;
		
		border: 1px solid transparent;
		
		&:hover { color: #0085B2; }
	}
}

#social {
	width: 98px;
	margin: 315px 0 0 878px;
	position: absolute;
	text-align: center;
	
	a {
		margin: 0 2px;
	}
}

#content {
	width: @site-width;
	margin: -20px 0 0 0;
	padding: 20px 5px 0 5px;
	overflow: hidden;
	background: url(/assets/images/template/content-bg.png) repeat-y;
}

#left,
#right {
	float: left;
	width: 225px;
}

#middle {
	float: left;
	width: 514px;
	margin: 0 5px;
	padding: 0 5px;
	color: #A0A0A0;
	font-size: 10pt;
	
	a { 
		color: #0085B2;
		text-decoration: none;
	}
	
	.pagination {
		overflow: hidden;
		
		li {
			float: left;
			margin: 0 2px 0 0;
			text-align: center;
			background: #272727;
			list-style-type: none;
			
			&.prev-next a { width: 69px; }
			&.active a { color: #0085B2; }
			
			a {
				width: 27px;
				color: #888;
				display: block;
				padding: 4px 2px 1px 2px;
				font-size: 8pt;
				text-transform: uppercase;
				
				&:hover { color: #0085B2; }
			}
		}
	}
	
	.event {
		overflow: hidden;
		
		&:hover .info h1 a { color: #0085B2; }
		
		.image { float: left; }
		
		.info {
			float: right;
			width: 405px;
			padding: 14px 0 0 0;
			text-transform: uppercase;
			
			&.video { 
				width: 385px;
				padding: 4px 0 0 0;
			}
			
			h1 {
				margin: 5px 0;
				
				a { color: white; }
			}
			
			ul {
				overflow: hidden;
				list-style: none;
				margin: 12px 0 0 0;
				
				li {
					float: left;
					background: #282828;
					margin: 0 2px 0 0;
					padding: 1px 2px 0px 2px;
					
					a {
						color: #888888;
						font-size: 8pt;
						
						&:hover { color: #0085B2; }
					}
				}
			}
		}
	}
	
	.news {
		overflow: hidden;
		
		&:hover .top .title a { color: #0085B2; }
		
		.image img { width: 80px; }
		
		.top {
			overflow: hidden;
			
			.title {
				float: left;
				width: 290px;
				
				a {
					color: white;
					font-family: Myriad-Pro-Bold;
					font-size: 14pt;
					text-transform: uppercase;
				}
			}
			
			.date {
				float: right;
				font-family: Myriad-Pro-Bold;
				font-size: 10pt;
				text-transform: uppercase;
			}
			
			p {
				font-size: 10pt;
				text-align: justify;
			}
		}
	}
	
	.music-archive {
		li {
			margin: 0;
			padding: 0;
			
			img {
				width: 75px;
				height: 75px;
				margin: 0 5px 0 0;
				border: 1px solid #707070;
			}
			
			table {
				width: 430px;
				
				tr {				
					&:first-child {
						td {
							a { font-size: 14pt; }
						}
					}
					
					&.links {
						td { 
							height: 30px; 
							vertical-align: bottom;
						}
					}
					
					td:first-child { width: 50px; }
				}
			}
		}
	}
}

#event {
	h1 { color: white; }
	
	ul {
        overflow: hidden;
        
        li {
        	float: left;
        	margin: 0 2px 0 0;
            text-align: center;
            background: #272727;
            list-style-type: none;
            
            &.active a { color: #0085B2; }
            &.larger a { width: 111px; }
            
            a {
            	width: 50px;
            	padding: 5px 2px 2px 2px;
            	display: block;
                font-size: 8pt;
                color: #888888;
                text-transform: uppercase;
                text-decoration: none;
                
                &:hover { color: #0085B2; }
            }
        }
    }
    
    img {
        width: 510px;
        margin: 7px 0;
        border: 1px solid #272727;
    }
    
    #info_wrapper { overflow: hidden; }
    
    #line_up {
        float: left;
        width: 200px;
        margin: 0 7px 0 0;
        color: #FFF;
    
        span {
            margin: 0 0 7px 0;
            padding: 3px 0 0 7px;
            display: block;
            font-size: 12pt;
            background: #272727;
            text-transform: uppercase;
            font-family: Myriad-Pro-Bold;
        }
        
        p {
            padding: 0 0 0 7px;
            font-size: 9pt;
            font-family: Myriad-Pro;
        }
    }
    
    #info {
        float: left;
        width: 305px;
        
        span {
            margin: 0 0 7px 0;
            padding: 3px 0 0 7px;
            color: #FFF;
            display: block;
            font-size: 12pt;
            background: #272727;
            text-transform: uppercase;
            font-family: Myriad-Pro-Bold;
        }
        
        table {
            margin: 0 0 0 7px;
            
            td {
                color: #FFF;
                font-size: 9pt;
                
                &:first-child {
                    width: 100px;
                    vertical-align: top;
                }
                
                &:first-child, &.bold {
                    font-size: 12pt;
                    text-transform: uppercase;
                    font-family: Myriad-Pro-Bold;
                }
            }
        }
    }
}

#news {
	overflow: hidden;

	img { 
		float: left; 
		margin: 0 5px 0 0;
	}
	
	.date {
		float: right;
		font-family: Myriad-Pro-Bold;
		text-transform: uppercase;
	}
	
	p { margin: 16px 0 0 0; }
}

#upcomingevent {
	width: 202px;
	height: 276px;
	margin: 0 auto 10px auto;
	background: url(/assets/images/template/upcomingevent-bg.png);
	
	.box-shadow(0, 0, 10px, 0, #000);
	.image-holder();
	
	.info a {
		font-family: Courier New;
		top: -92px;
		left: 8px;
		color: #C7C9C9;
		position: relative;
		font-size: 10pt;
		text-transform: uppercase;
		text-decoration: none;
	}
	
	.links {
		top: -80px;
		left: 8px;
		position: relative;
		font-size: 10pt;
		text-transform: uppercase;
		
		a { 
			text-align: center;
			margin: 0 0 2px 0;
			width: 187px;
			display: block;
			padding: 2px 0 0 0;
			color: #FFF;
			background: #282828;
			font-family: Courier New;
			text-decoration: none;
			
			&:hover { color: #0085B2; }
		}
	}
}

#hardtunes {	
	width: 202px;
	height: 275px;
	color: #C7C9C9;
	margin: 0 auto 10px auto;
	background: url(/assets/images/template/hardtunes-bg.png);
	font-size: 8pt;
	text-transform: uppercase;
	
	table {
		margin: 90px 0 0 15px;
		position: absolute;
	
		td {
			width: 100px;
			white-space: nowrap;
			padding-bottom: 5px;
		
			&:first-child { 
				width: 10px;
				padding-right: 5px; 
			}
			
			a {
				color: #C7C9C9;
				font-family: Courier New;
				text-decoration: none;
			}
		}
	}
	
	.link {
		width: 100px;
		height: 30px;
		margin: 245px 0 0 50px;
		display: block;
		position: absolute;
	}
}

#video {
	width: 202px;
	height: 187px;
	margin: 0 auto 10px auto;
	background: url(/assets/images/template/video-bg.png);
	
	.image-holder();
	
	.link {
		width: 54px;
		height: 22px;
		margin: -96px 0 0 140px;
		display: block;
		position: absolute;
	}
}

#twitter {
	width: 202px;
	height: 314px;
	margin: 0 auto 10px auto;
	color: #7E7E7A;
	background: url(/assets/images/template/twitter-bg.png);
	font-size: 8pt;
	
	ul {
		width: 175px;
		height: 265px;
		margin: 39px 0 0 15px;
		overflow: hidden;
		position: absolute;
		
		li { 
			margin: 0 0 5px 0; 
			font-family: Courier New;
		}
	}
	
	span {
		font-family: Courier New;
	}
	
	a { 
		color: #00ADF3;
		font-family: Courier New;
		text-decoration: none;
		
		&.tweet_user { margin: 0 7px 0 0; }
	}
	
	.tweet_time {
		display: block;
		
		a { color: #7E7E7A; }
	}
}

#merchandise {
	width: 202px;
	height: 226px;
	margin: 0 auto 10px auto;
	background: url(/assets/images/template/merchandise-bg.png);
	
	.image-holder {
		top: 30px;
		width: 186px;
		height: 164px;
		margin: 0 auto;
		position: relative;
		background: #2D2D2D;
		
		.linear-gradient(#2D2D2D, #000);
		
		img {
			top: 7px;
			display: block;
			width: 176px;
			height: 150px;
			margin: 0 auto;
			position: relative;
		}
	}
	
	.image-border {
		top: -137px;
		width: 196px;
		height: 174px;
		margin: 0 auto;
		display: block;
		z-index: 10;
		position: relative;
		background: url(/assets/images/template/merchandise-image-border.png);
	}
	
	.link {
		width: 120px;
		height: 24px;
		margin: -140px 0 0 40px;
		display: block;
		position: absolute;
	}
}