/*
	McFly Super City - layout.css
	by Chris Lawes (Chris@TheUnit.co.uk)
*/


/*-------------------------------------------------
	GLOBAL PROPERTIES 
-------------------------------------------------*/

body{
	background: #fff;
	font-size: 13px; color: #333333;
	line-height: 18px;
	font-family: 'Helvetica neue', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
}
	a{text-decoration: none;}

/*-------------------------------------------------
	FONTS
-------------------------------------------------*/

@font-face {
    font-family: 'ProximaNova';
    src: url('http://supercity.mcfly.com/fonts/proximanova.eot');
    src: url('http://supercity.mcfly.com/fonts/proximanova.eot?#iefix') format('embedded-opentype'),
         url('http://supercity.mcfly.com/fonts/proximanova.woff') format('woff'),
         url('http://supercity.mcfly.com/fonts/proximanova.ttf') format('truetype'),
         url('http://supercity.mcfly.com/fonts/proximanova.svg#ProximaNovaCondensedSemibold') format('svg');
    font-weight: normal; font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('http://supercity.mcfly.com/fonts/141185_4.eot');
    src: url('http://supercity.mcfly.com/fonts/141185_4.eot?#iefix') format('embedded-opentype'),
         url('http://supercity.mcfly.com/fonts/141185_4.woff') format('woff'),
         url('http://supercity.mcfly.com/fonts/141185_4.ttf') format('truetype'),
         url('http://supercity.mcfly.com/fonts/141185_4.svg#ProximaNovaCondensedSemibold') format('svg');
    font-weight: normal; font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaCondensed';
    src: url('http://supercity.mcfly.com/fonts/proximanovacond.eot');
    src: url('http://supercity.mcfly.com/fonts/proximanovacond.eot?#iefix') format('embedded-opentype'),
         url('http://supercity.mcfly.com/fonts/proximanovacond.woff') format('woff'),
         url('http://supercity.mcfly.com/fonts/proximanovacond.ttf') format('truetype'),
         url('http://supercity.mcfly.com/fonts/proximanovacond.svg#ProximaNovaCondensedSemibold') format('svg');
    font-weight: normal; font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaUltraCondensed';
    src: url('http://supercity.mcfly.com/fonts/141185_7.eot');
    src: url('http://supercity.mcfly.com/fonts/141185_7.eot?#iefix') format('embedded-opentype'),
         url('http://supercity.mcfly.com/fonts/141185_7.woff') format('woff'),
         url('http://supercity.mcfly.com/fonts/141185_7.ttf') format('truetype'),
         url('http://supercity.mcfly.com/fonts/141185_7.svg#ProximaNovaCondensedSemibold') format('svg');
    font-weight: normal; font-style: normal;
}

@font-face {
    font-family: 'ProximaNovaUltraCondensedRegular';
    src: url('http://supercity.mcfly.com/fonts/145615_1.eot');
    src: url('http://supercity.mcfly.com/fonts/145615_1.eot?#iefix') format('embedded-opentype'),
         url('http://supercity.mcfly.com/fonts/145615_1.woff') format('woff'),
         url('http://supercity.mcfly.com/fonts/145615_1.ttf') format('truetype'),
         url('http://supercity.mcfly.com/fonts/145615_1.svg#ProximaNovaCondensedSemibold') format('svg');
    font-weight: normal; font-style: normal;
}

/*-------------------------------------------------
	MAIN LAYOUT
-------------------------------------------------*/

#container, header, #main, footer{
	position: relative;  /* float: left; */
	display: block; clear: both;
	width: 100%;
}
	#container{z-index: 0;}
	header{height: 247px;}
	body.home header, body.home header .center{height: 542px;}
		body.home header .center{background: no-repeat;}
.center{
	position: relative; display: block;
	width: 1020px; margin: 0 auto;
}

/*-- HEADER --*/

	header .center{
		height: 247px;
		background: url('../img/backgrounds/header.png') top right no-repeat;
		overflow: visible;
	}
		header #logo{
			position: absolute;
			top: 0; left: -50px;
			width: 357px; height: 128px;
			background: url('../img/mcfly.png') top left no-repeat;
			text-indent: -999px; overflow: hidden;
			z-index: 55;
		}
		header #top-nav{
			position: absolute;
			top: 0px; left: -40px;
			width: 750px; height: 42px;
			padding: 15px 0 0 360px;
			background: url('../img/backgrounds/top-nav.png') top left no-repeat;
			margin: 0;
			z-index: 35;
		}
			.home header #top-nav{background: #fff; padding: 25px 0 0 360px; top: -10px;}
			header #top-nav li{position: relative;}
			header #top-nav .lang-drop-trigger{
				display: block;
				width: 62px; height: 28px;
				padding: 7px 0 0 12px;
				text-indent: -999px; overflow: hidden;
				background: url('../img/buttons/flag-dropdown.png') top left no-repeat;
				margin: -3px 0 0 0;
			}
				header #top-nav .lang-drop-trigger:hover{background-position: bottom left;}
				header #top-nav .lang-options{
					position: absolute;
					top:29px; left: 2px;
					display: none;
					background: #fff;
					border: 1px solid #a1a1a1;
					border-radius: 4px;
					-moz-border-radius: 4px;
					-webkit-border-radius: 4px;
					margin: 0; padding: 0;
					padding: 4px 2px;
					box-shadow: 0px 0px #6b6b6b;
					z-index: 30;
				}
					header #top-nav .lang-options li a{
						display: block; clear: both;
						width: 130px;
						border-radius: 4px;
						-moz-border-radius: 4px;
						-webkit-border-radius: 4px;
						color: #9E9E9E; text-transform: uppercase;
						letter-spacing: 1px; font-weight: bold;
						font-size: 10px;
						line-height: 25px;
						margin: 2px 0;
						padding: 2px 0 0px 42px;
						height: 28px;
					}
						header #top-nav .lang-options li a:hover{background-color: #f7f8f8; color: #706f6f; text-shadow: 1px 1px #fff;}
					
					header #top-nav .current-uk{ /* will need to add class' & images for all locations here */
						display: block;
						width: 28px; height: 20px;
						background: url('../img/flags/header-uk.gif') top left no-repeat;
					}
						header #top-nav a.uk{background: url('../img/flags/header-uk.gif') 4px 4px no-repeat;}
						
			header #top-nav form#search{
				position: relative;
				display: block; float: left;
				width: 160px; height: 20px;
				margin: 0 15px;
			}
			header #top-nav form#search-logedin{
				position: relative;
				display: block; float: left;
				width: 260px; height: 20px;
				margin: 0 15px;
			}
				header #top-nav form#search-logedin .search{width: 210px;}
				header #top-nav form#search-logedin .search-submit{left: 226px;}
			
				header #top-nav form .search{
					position: absolute;
					top: 0; left: 0;
					width: 110px;
					background: url('../img/backgrounds/search-input.png') top repeat-x;
					border-left: 1px solid #b1b1b1;
					border-right: none; border-top: none; 
					border-bottom: 1px solid #e9e9e9;
					height: 15px;
					border-top-left-radius: 4px; border-bottom-left-radius: 4px; 
					-moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px;
					padding: 9px 10px 3px 10px;
					color: #9e9e9e; font-weight: bold;
					letter-spacing: 1px;
					font-size: 10px; text-transform: uppercase;
				}
					header #top-nav form .search:focus{
						color: #222;
						text-transform: capitalize;
						font-weight: normal;
					}
				header #top-nav form .search-submit{
					position: absolute;
					top: 0; left: 130px;
					display: block; float: left;
					width: 34px; height: 30px;
					background: url('../img/buttons/search.png') top left no-repeat;
					border: none;
					text-indent: -999pc; overflow: hidden;
				}
					header #top-nav form .search-submit:hover{background: url('../img/buttons/search.png') bottom left no-repeat;}
			header #top-nav a.music-player{
				display: block; float: left;
				width: 146px; height: 29px;
				background: url('../img/buttons/music-player.png') top left no-repeat;
				text-indent: -999px; overflow: hidden;
				margin: 0 -5px 0 5px;
			}
				header #top-nav a.music-player:hover{background: url('../img/buttons/music-player.png') bottom left no-repeat;}
				header #top-nav li.help-why ul, header #top-nav li.community ul{margin: 0; padding: 0;}
					
					header #top-nav li.help-why ul{
						margin: 0px 11px 0 11px;
						height: 30px;
					
					}
					
					
						
				
			
					/* blue button version */
					
					
			
			
			
			header #top-nav .community{margin-top: -2px;}
				header #top-nav a.top-signin,
				header #top-nav a.top-signout,
				header #top-nav a.top-join{
					display: block; float: left;
					height: 35px;
					background: url('../img/buttons/community.png') no-repeat top left;
					text-indent: -999px; overflow: hidden;
				}
					header #top-nav a.top-signin{width: 75px;}
					header #top-nav a.top-join{width: 55px; background-position: top right;}
						header #top-nav a.top-signin:hover{background-position: bottom left;}
						header #top-nav a.top-join:hover{background-position: bottom right;}
					header #top-nav a.top-signout{
						background: url('../img/buttons/sign-out.png') top left no-repeat;
						width: 83px; height: 29px;
						margin-top: 4px;
					}
						header #top-nav a.top-signout:hover{background-position: bottom left;}
	

/*-- MAIN MENU (HEADER) --*/

		header nav{
			position: absolute;
			bottom: 38px;
			left: 0; right: 0;
			background: url('../img/backgrounds/menu.png') repeat-x;
			height: 49px;
			z-index: 9;
		}
			header nav .center, body.home header nav .center{background: none; height: 60px !important;}
			header nav ul#main-menu{
				position: relative;
				margin: 0 0 0 20px;
				display: block; float: left;
			}
				header nav ul#main-menu li,
				header #top-nav li{
					list-style-type: none;
					display: block; float: left;
				}
					header nav ul#main-menu li a{
						font-family: 'ProximaNovaUltraCondensed', Helvetica, sans-serif;
						font-size: 22px; font-weight: 100;
						-webkit-font-smoothing: antialiased;
						letter-spacing: 0px;
						color: #fff; text-shadow: 1px 1px #4a4a4a;
						text-transform: uppercase;
						display: block; float: left;
						height: 28px;
						margin: 0 18px 0 0;
						padding: 13px 2px 0px 2px;
						-moz-transition: 0.2s; 
						-webkit-transition: 0.2s; 
						-o-transition: 0.2s;
					}
					@-moz-document url-prefix() {
					  header nav ul#main-menu li a{
					    font-family: 'ProximaNovaUltraCondensedRegular', Helvetica, sans-serif;
					    letter-spacing: 1px;
					  }
					}
						header nav ul#main-menu li a.current{
							border-bottom: 4px solid #C5B895;
							height: 25px;
						}
						header nav ul#main-menu li a:hover{
							color: #e4c069;
							-moz-transition: 0.2s; 
							-webkit-transition: 0.2s; 
							-o-transition: 0.2s;
						}
						
/*-- BAND MEMBERS (HEADER) --*/

			header nav ul#member-menu{ display:none;
				position: absolute;
				top: -5px; right: 23px;
				width: 301px; height: 132px;
				background: url('../img/band-badges.png') top left no-repeat;
				z-index: 10;
			}
				header nav ul#member-menu li, header nav ul#member-menu li a{display: block; float: left;}
					header nav ul#member-menu li a{
						width: 63px; height: 90px;
						margin: 0 2px 0 0;
						text-indent: -999px; overflow: hidden;
						background: transparent;
					}
						header nav ul#member-menu li a.menu-dougie:hover{background: url('../img/backgrounds/band-badges-hover.png') 17px -1px no-repeat;}
						header nav ul#member-menu li a.menu-harry:hover{background: url('../img/backgrounds/band-badges-hover.png') 14px -1px no-repeat;}
						header nav ul#member-menu li a.menu-tom:hover{background: url('../img/backgrounds/band-badges-hover.png') 15px -1px no-repeat;}
						header nav ul#member-menu li a.menu-danny:hover{background: url('../img/backgrounds/band-badges-hover.png') 11px -1px no-repeat;}

/*-- CONTENT/MIDDLE --*/

	#main{min-height: 200px;}
		#main .center{z-index: 15;}
		
/*-- FOOTER --*/

footer{padding: 20px 0 0 0;}
	footer nav{
		position: relative;
		margin: 0 0 0 16px;
		width: 980px; height: 57px; /* 173px, 980px */
		border-top: 8px solid #E9E9E9;
	}
		footer nav ul{
			position: absolute;
			margin: 0;
			left: 58px;
		}
			footer nav ul#footer-menu{top: 11px;}
			footer nav ul#footer-subnav{top: 12px;}
			footer nav ul li{
				list-style-type: none;
				display: block; float: left;
			}
				footer nav ul li a{
					display: block; float: left;
					-moz-transition: 0.2s; 
					-webkit-transition: 0.2s; 
					-o-transition: 0.2s;
				}
					footer nav ul li a:hover{
						-moz-transition: 0.2s; 
						-webkit-transition: 0.2s; 
						-o-transition: 0.2s;
					}
				footer nav ul#footer-menu li a{
					font-family: 'ProximaNovaCondensed', Helvetica, sans-serif;
					font-size: 18px; font-weight: 100;
					-webkit-font-smoothing: antialiased;
					letter-spacing: 1px;
					color: #B99C55;
					text-transform: uppercase;
					margin: 0 13px 0 0;
					padding: 2px 4px;
				}
					footer nav ul#footer-menu li a:hover{color: #e4c069;}
				footer nav ul#footer-subnav li a{
					font-weight: bold;
					color: #9E9E9E;
					margin: 0 18px 0 0;
					padding: 2px 4px;
				}
					footer nav ul#footer-subnav li a:hover{color: #222;}
	footer #member-social{
		position: absolute;
		top:-5px; right: 0px;
		width: 323px; height: 100px; /* 190 w/icons */
		margin: 0; padding: 0;
		background: url('../img/band-badges.png') top left no-repeat;
	}
		footer ul#member-social li{
			display: block; float: left;
			width: 63px; 
			margin: 0 2px 0 0;
			list-style-type: none;
		}
			footer ul#member-social li ul{position: relative; margin: 0; padding: 0;}
				footer ul#member-social li ul li{
					display: block; float: left;
					clear: both;
				}
				footer ul#member-social li ul li.facebook,
				footer ul#member-social li ul li.twitter{
					position: absolute;
					width: 37px; height: 37px;
				}
					footer ul#member-social li ul li.facebook{top: 95px; left: 54px;}
					footer ul#member-social li ul li.twitter{top: 140px; left: 79px;}
						footer ul#member-social li ul.danny li.facebook{top: 95px; left: 52px;}
						footer ul#member-social li ul.danny li.twitter{top: 140px; left: 77px;}
				footer ul#member-social a{text-indent: -999px; overflow: hidden;}
				footer ul#member-social li ul li.badge a{
					display: block; 
					height: 90px; width: 63px;
					background: transparent;
				}
					footer ul#member-social li ul.dougie li.badge a:hover{background: url('../img/backgrounds/band-badges-hover.png') 17px -1px no-repeat;}
					footer ul#member-social li ul.harry li.badge a:hover{background: url('../img/backgrounds/band-badges-hover.png') 14px -1px no-repeat;}
					footer ul#member-social li ul.tom li.badge a:hover{background: url('../img/backgrounds/band-badges-hover.png') 15px -1px no-repeat;}
					footer ul#member-social li ul.danny li.badge a:hover{background: url('../img/backgrounds/band-badges-hover.png') 11px -1px no-repeat;}
				footer ul#member-social li ul li.facebook a{
					display: block;
					height: 37px; width: 37px;
					background: url('../img/buttons/badge-social.png') top left no-repeat;
				}
					footer ul#member-social li ul li.facebook a:hover{background: url('../img/buttons/badge-social.png') top right no-repeat;}
				footer ul#member-social li ul li.twitter a{
					display: block;
					height: 37px; width: 37px;
					background: url('../img/buttons/badge-social.png') bottom left no-repeat;
				}
					footer ul#member-social li ul li.twitter a:hover{background: url('../img/buttons/badge-social.png') bottom right no-repeat;}

/* made by the unit link */
a.theunit{
	position: absolute;
	top: 10px; right: 24px;
	width: 133px; height: 27px;
	background: url('../img/theunit.png') top left no-repeat;
	text-indent: -999px; overflow: hidden;
}

/*-------------------------------------------------
	GRID LAYOUTS (split, main, community)
-------------------------------------------------*/

.grid_full{
	position: relative; float: left;
	width: 979px;
	margin: 0 20px;
}

.grid_split_left,
.grid_split_right{
	position: relative; float: left;
	width: 470px;
	margin: 0 20px;
}

.grid_main_left,
.grid_main_right{
	position: relative; float: left;
	margin: 0 20px;
}
	.grid_main_left{width: 640px;}
	.grid_main_right{width: 300px}
	
.grid_community_left,
.grid_community_mid,
.grid_community_right,
.grid_community_stretch{
	position: relative; float: left;
}
	.grid_community_left{width: 221px; margin: 0 30px 0 20px;}
	.grid_community_mid{width: 481px; margin: 0 30px 0 0;}
	.grid_community_right{width: 220px; margin: 0 3px 0 0;}
	.grid_community_stretch{width: 732px;}
	
.grid_single{
	display: block;
	clear: both; width: 600px;
	margin: 0 auto;
}

#main .grid_side_full{
	margin: 0;
	width: 731px;
}

/*-------------------------------------------------
	GRID LAYOUTS (for IE6)
-------------------------------------------------*/

.ie6 .grid_full{margin: 0 10px;}

.ie6 .grid_split_left,
.ie6 .grid_split_right{margin: 0 10px;}

.ie6 .grid_main_left,
.ie6 .grid_main_right{margin: 0 10px;}

	.ie6 .grid_main_left{width: 640px;}
	.ie6 .grid_main_right{width: 300px}

	.ie6 .grid_community_left{margin: 0 15px 0 10px;}
	.ie6 .grid_community_mid{margin: 0 15px 0 0;}
	.ie6 .grid_community_right{margin: 0 1px 0 0;}


/*-- New Slide --*/

.countdown-panel img.countdown-background{
	margin-top: 58px;
	font-family: 'ProximaNovaUltraCondensed', Helvetica, sans-serif;
}
	.countdown-panel .countdown-numbers{
		position: absolute;
		top: 208px; left: 110px;
		width: 164px; height: 85px;
		padding-top: 55px; /* 20 */
		background: url('../img/carousel/countdown-numbers-background.png') top left no-repeat;
		text-align: center;
		font-size: 96px; color: #2E2E2E;
		font-weight: bold;
		font-family: 'ProximaNovaUltraCondensed', Helvetica, sans-serif;
	}
		.countdown-panel .countdown-numbers span{
			position: absolute;
			bottom: 10px;
			left: 0; right: 0;
			text-transform: uppercase;
			color: #888888;
			font-size: 23px;
			text-shadow: 1px 1px #fff;
			text-shadow: 1px 1px rgba(225, 225, 225, 0.5);
			font-family: 'ProximaNovaUltraCondensed', Helvetica, sans-serif;
		}
	.countdown-panel .countdown-text{
		position: absolute;
		top: 255px; left: 274px;
		width: 525px; height: 60px; /* width: 384px; */
		padding: 25px 5px 0 10px;
		background: #000;
		background: rgba(26, 26, 26, 0.80);
		color: #F4D486; font-size: 44px;
		font-family: 'ProximaNovaUltraCondensed', Helvetica, sans-serif;
	}
		.countdown-panel .countdown-text span,
		.countdown-panel .countdown-text a{
			display: block; clear: both;
			font-size: 14px; color: #B4B5B5;
			font-weight: bold;
			font-family: 'ProximaNovaUltraCondensed', Helvetica, sans-serif;
			padding-top: 14px;
		}
		.finished-counting span.today-bg{
			font-size: 66px !important;
			position: absolute;
			left: 0; right: 0;
			margin-left: auto; margin-right: auto;
			top: 20px;
			height: 120px;
			background: url('../img/carousel/zero.png') 55px 2px no-repeat;
			color: #333333;
			font-weight: normal;
			font-family: 'ProximaNovaUltraCondensed', Helvetica, sans-serif;
			line-height: 66px !important;
		}
		
		
		
		
		
		
					header #top-nav li.help-why ul{
						height: 29px;
						}
						
		
					header #top-nav li.help-why ul li{
						height: 29px;
						
						}
					
					header #top-nav li.help-why ul li a{
						
						font-size: 11px;
						text-transform: uppercase;
						color: #3d86b6; font-weight: bold; 
						margin: 0 9px;
						letter-spacing: 1px;
						text-shadow: 1px 1px #fff;
						/*
						text-indent: -3000px !important;
						*/
					}
					header #top-nav li.help-why ul li a:hover{color: #5fb0e5;}
					
					.helptext{
					margin:5px 9px 0 9px !important;
					}

					/* blue button version */
					header #top-nav li.help-why ul li a.why-blue-button{					
						    background: url("../img/buttons/why-join.png") no-repeat scroll left top transparent;
    						display: block;
    						float: left;
    						height: 29px;
							width: 107px;
							padding: 0 !important;
    						overflow: hidden;
    						text-indent: -999px;
					}
					header #top-nav li.help-why ul li a.why-button:hover{background-position: left bottom ; border-bottom: 1px solid black;}