/*
Theme Name: Verge
Author: Cardiant
*/


/* ============================================================================================================== *
 * 
 * Reset
 * 
 * ============================================================================================================== */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
em {
	font-style: oblique;
}
strong {
	font-weight: bold;
}
code, pre {
	font-family: monospace, monospace;
}


/* ============================================================================================================== *
 * 
 * Base
 * 
 * ============================================================================================================== */

body {
	background: #0D1419 url(images/header-background.jpg) center top no-repeat;
	color: #fff;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	padding: 8em 0 0;
	text-align: center;
}

h1, h2, h3, h4 {
	font-family: 'Archivo Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: bold;
	margin-bottom: 0;
}

h1 {
	font-size: 3em;
	font-weight: normal;
	line-height: 1.25;
	padding-bottom: 1em;
}

h2 {
	font-size: 1.5em;
	padding-bottom: 1em;
}

h3 {
	font-size: 1.25em;
	padding-bottom: 1em;
}

p { padding-bottom: 1.5em; }

small { font-size: 0.875em }

a {
	color: #fff;
	text-decoration: none;
}

#content a { text-decoration: underline; }

ul, ol {
	list-style-position: inside;
	margin: 0 0 1em; 
}

ol {
	list-style-type: decimal-leading-zero;
}

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	height: auto;
	max-width: 100%;
}

img.size-large,
img.alignnone {
	max-width: 100%;
	width: 100%;	
}

.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin: 0 1.5em 0.75em 0;
}

.alignright,
img.alignright {
	display: inline;
	float: right;
	margin: 0 0 0.75em 1.5em ;
}

.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto 0.75em;
}


/* ============================================================================================================== *
 * 
 * Main
 * 
 * ============================================================================================================== */

/*
#background {
	height: auto;
	left: 50%;
	margin-left: -750px;
	position: fixed;
	top: 0;
	z-index: 0;
}
*/
.container {
	margin: 0 auto;
	padding: 0 3em;
	position: relative;
	text-align: left;
	width: 960px;
}

.inner {
	padding: 1em 1.5em;
}

.fitvid { margin-bottom: 1em; }

/* ============================================================================================================== *
 * 
 * Header
 * 
 * ============================================================================================================== */

#header {
	background: url(images/menu-background.png) repeat-x bottom center;
	height: 3.25em;
	left: 0;
	line-height: 3.25em;
	padding: 1.75em 0 3em;
	position: absolute;
	top: 0;
	width: 100%;
}

	#header .container .grid_12 { margin-bottom: 0; }
		
	#header .logo {
		display: block;
		float: left;
		height: 3.25em;
		width: auto;
	}
	
	#header .menu {
		float: right;
	}
		
		#header .menu li {
			display: inline-block;
			padding: 0.25em 0 0.05em;
		}
		
		#header .menu li a {
			-webkit-transition: border-color 0.2s ease-in;  
			-moz-transition: border-color 0.2s ease-in;  
			-o-transition: border-color 0.2s ease-in;  
			transition: border-color 0.2s ease-in; 
			border-bottom: 0.2em solid transparent;
			color: #080d10;
			display: block;
			float: left;
			font-family: 'Archivo Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			font-weight: bold;
			height: 2.75em;
			line-height: 2.75em;
			margin-left: 1.5em;
			text-transform: uppercase;
		}
		
		
		#header .menu li a:hover { border-color: #080D10; }
		
		#header .menu li.current-menu-item a { border-color: #8F969A; }

	#header .menu .pull { display: none; }

/* ============================================================================================================== *
 * 
 * Hero
 * 
 * ============================================================================================================== */
		
#hero {
	position: relative;
	text-align: left;
}

	#hero .text {
		display: block;
		padding: 3em;
		width: 60%;
	}
	
	.home #hero .text { width: 40%; }
	
	#hero .text img {
		height: auto;
		width: 100%;
	}

		#hero .cta span {
			display: inline-block;
			font-size: 2.1em;
			height: 1.3em;
			line-height: 2.75em;
		}
		
		#hero .cta a {
			background: url(images/record-shop-x.png) no-repeat 0 0;
			display: inline-block;
			height: 2.75em;
			width: 11em;
			text-indent: -9999px;
		}

/* ============================================================================================================== *
 * 
 * Content
 * 
 * ============================================================================================================== */
		
#content {
	padding-bottom: 2.75em;
	text-align: center;
	width: 100%;
}

#content .container {
	background: url(images/background-overlay.png) repeat;
	padding: 2.75em 2em;
}

#content img {
	height: auto;
	max-width: 100%;	
}

#outbound {
	background: #253035;
	left: 0;
	padding: 0.5em;
	position: fixed;
	top: 13em;
	width: 2.25em;
	z-index: 99;
}

	#outbound img {
		display: block;
		height: auto;
		margin-bottom: 2px;
		width: 100%;
	}

/* ============================================================================================================== *
 * 
 * Home
 * 
 * ============================================================================================================== */


#home hgroup {
	border-bottom: 0.15em solid #fff;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
}
	
	#home hgroup h2 { display: inline; }
	
	#home hgroup .goto {
		background: #253035;
		color: #fff;
		display: block;
		float: right;
		font-family: 'Archivo Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-weight: bold;
		padding: 0.5em 0.75em;
		text-decoration: none;
	}

#home .bulletin {
	background: #253035;
	font-style: italic;
	margin-bottom: 2em;
	padding: 1em;
	text-align: center;
}

#home .news ul {
	list-style: none;
	padding-bottom: 1.5em;
}

	#home .news li {
		background: url(images/dotted-line.png) repeat-x bottom left;
		padding: 0.875em 0;
	}
	
	#home .news li:last-child { background: none; }

		#home .news .date {
			font-weight: bold;
			display: inline-block;
			padding-right: 1em;
		}
		
		#home .news .info {
			background: #253035;
			color: #fff;
			display: inline-block;
			font-size: 0.875em;
			height: 2em;
			line-height: 2em;
			margin-left: 1em;
			margin-top: 0.5em;
			padding: 0 0.5em;
		}
		
		#home .news .info:hover {
			background: #43636c;
		}

#home #facebook {
	background: #fff;
	height: 500px;
	position: relative;
}

/* ============================================================================================================== *
 * 
 * Bio
 * 
 * ============================================================================================================== */

#biography .members .grid_2 {
	background: #fff;
	color: #080D10;
	line-height: 0;
}
	
	#biography .members .title {
		font-size: 0.875em;
		line-height: 1.5;
		padding: 0.5em 0.75em;
		text-align: center;
	}
	
		#biography .title h4 { font-size: 1.15em; }

/* ============================================================================================================== *
 * 
 * Releases
 * 
 * ============================================================================================================== */

#releases hgroup.grid_12 { margin-bottom: 0; }

#releases .release {
	background: #fff;
	color: #080D10;
}

	#releases .release p {
		line-height: 1.25;
		padding-bottom: 1em;
	}

	#releases .release a { color: #080D10; }
	
	#releases .release img { width: 100%; }

	#releases .release hgroup {
		border-bottom: 2px solid #080D10;
		margin-bottom: 1em;
	}
	
		#releases .release hgroup h2 { padding-bottom: 0; }
		
		#releases .release hgroup p { line-height: 1; }
		
	#releases .release .info  {
		background: url(images/dotted-line-inv.png) repeat-x bottom left;
		margin-bottom: 1.25em;
	}
		
	#releases .release .reviews { list-style-type: none; }

/* ============================================================================================================== *
 * 
 * Live
 * 
 * ============================================================================================================== */

#live hgroup {
	border-bottom: 0.15em solid #fff;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
}
	
	#live hgroup h2 { display: inline; }
	
	#live hgroup .goto {
		background: #253035;
		color: #fff;
		display: block;
		float: right;
		font-size: 0.875em;
		padding: 0.5em 0.75em;
	}

#live ul {
	list-style: none;
	padding-bottom: 1.5em;
}

	#live li {
		background: url(images/dotted-line.png) repeat-x bottom left;
		padding: 0.875em 0;
	}
	
	#live li:last-child { background: none; }

		#live .date {
			font-weight: bold;
			display: inline-block;
			padding-right: 1em;
		}
		
		#live .info {
			background: #253035;
			color: #fff;
			display: inline-block;
			font-size: 0.875em;
			height: 2em;
			line-height: 2em;
			margin-left: 1em;
			margin-top: 0.5em;
			padding: 0 0.5em;
		}
		
		#live .info:hover {
			background: #43636c;
		}
		
/* ============================================================================================================== *
 * 
 * Media
 * 
 * ============================================================================================================== */

#media hgroup.grid_12 {
	display: block;
	float: none;
	margin-bottom: 0;
}

	#media hgroup h1 { float: left; }

	#media hgroup #filter {
		float: right;
		padding-top: 0.5em;
	}
	
		#media hgroup #filter li { display: inline; }
		
			#media hgroup #filter a {
				-webkit-transition: background-color 0.2s linear;
				-moz-transition: background-color 0.2s linear;
				-ms-transition: background-color 0.2s linear;
				-o-transition: background-color 0.2s linear;
				transition: background-color 0.2s linear;
				display: block;
				float: left;
				font-family: 'Archivo Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
				font-weight: bold;
				padding: 0.25em 0.75em;
				text-decoration: none;
			}
			
			#media hgroup #filter .active a { background: #253035; }
		
		#media .item { background: #fff; }
			
			#media .item .thumb { line-height: 0; }
			
			#media .item .thumb.no-thumb { background: #43636C; }
				
				#media .item .thumb img {
					height: auto;
					width: 100%;
				}
				
				#media .item .thumb img.overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}
				
				#media .item .thumb .hide {
					display: none;
					height: 0;
					line-height: 0;
					visibility: 0;
					width: 0;
				}
				
				#media .item .thumb.web span {
					display: block;
					font-size: 0.75em;
					font-style: italic;
					line-height: 1.2;
					padding: 0 10%;
					position: absolute;
					text-align: center;
					top: 55%;
					width: 80%;
					word-wrap: break-word;
				}
			
			#media .item .thumb:hover img:last-of-type { opacity: 0.7; }
			
			#media .item .title {
				-webkit-transition: all 0.2s linear;
				-moz-transition: all 0.2s linear;
				-ms-transition: all 0.2s linear;
				-o-transition: all 0.2s linear;
				transition: all 0.2s linear;
				color: #080D10;
				display: table-cell;
				height: 4em;
				line-height: 1.2;
				padding: 1em 0 0;
				vertical-align: middle;
				width: 600px;
			}
			
				#media .item .title .valign {
					text-align: center;
					padding: 0 1.5em;
				}
				
				#media .item .title .valign-fix {
					display: none;
					margin-left: -1px;
					width: 1px;
				}
			
				#media .item .title h3 {
					font-size: 1em;
					line-height: 1.2;
				}
				
				.oldie #media .item .title { width: 100%; }
				
				.oldie .valign,
				.oldie .valign-fix {
					display: inline-block;
					vertical-align: middle;
				}
				
				.oldie .valign { width: 100%; }
				
				.oldie .valign-fix { height: 100%; }
				
				.oldie .valign,
				.oldie .valign-fix { display: inline; }

/* ============================================================================================================== *
 * 
 * Contact
 * 
 * ============================================================================================================== */

.presskit {
	background: #253035;
	color: #fff;
	display: block;
	padding: 0.5em 1em;
}

.presskit:hover { background: #43636C; }
	
/* ============================================================================================================== *
 * 
 * Posts and archives
 * 
 * ============================================================================================================== */

.widget {
	background: #fff;
	color: #080D10;
	margin-bottom: 1.5em;
	padding: 1em 1.5em;
}

	.widget h3 {
		border-bottom: 0.15em solid #080D10;
		margin-bottom: 0.5em;
		padding-bottom: 0.5em;
	}
	
	.widget ul { list-style: none; }
	
		.widget li {
			background: url(images/dotted-line-inv.png) repeat-x bottom left;
			padding: 0.875em 0;
		}
		
		.widget li:last-child { background: none; }
		
		.widget li .date {
			font-weight: bold;
			display: inline-block;
			padding-right: 0.25em;
		}
		
/* ============================================================================================================== *
 * 
 * Footer
 * 
 * ============================================================================================================== */

#footer {
	font-size: 0.875em;
	height: 113px;
	width: 100%;	
}

	#footer .container {
		background: transparent none;
	}
	
		#footer .mediatavast {
			background: url(images/mediatavast.png) no-repeat;
			display: block;
			float: right;
			height: 14px;
			text-indent: -9999px;
			width: 101px;
		}
	
@media screen and (max-width: 1200px) {
	
	/* ============================================================================================================== *
	 * Main
	 * ============================================================================================================== */
	
	.container { width: 840px; }

	/* ============================================================================================================== *
	 * Hero
	 * ============================================================================================================== */
	
	#hero .text {
		padding-bottom: 2.5em;
		width: 30em;
	}
	
	.home #hero .text { width: 40%; }
	
}

@media screen and (max-width: 1024px) {
	
	body {
		-webkit-background-size: 150% auto;
		background-size: 150% auto;
	}
	
	/* ============================================================================================================== *
	 * Main
	 * ============================================================================================================== */

	.container { width: 80%; }
	
	/* ============================================================================================================== *
	 * Header
	 * ============================================================================================================== */
		
	#header #nav {
		padding-top: 2.75em;
		position: relative;
	}
	
		#header .menu {
			background: #080D10;
			position: absolute;
			right: 0;
			width: 50%;
			z-index: 9999;
		}
		
		#header .menu.open { padding: 1.5em; }
			
			#header .menu li {
				display: none;
				padding: 0;
			}
			
			#header .menu.open li { display: block; }
			
			#header .menu li a {
				-webkit-transition: none;
				-moz-transition: none;
				-ms-transition: none;
				-o-transition: none;
				transition: none;
				border-bottom: 0.15em solid #fff;
				color: #fff;
				display: block;
				float: none;
				font-size: 0.875em;
				margin: 0;
				padding: 0 1em 0.15em;
			}
			
			#header .menu li a:hover,
			#header .menu li a:active {
				background: #12262D;
				border-bottom: 0.15em solid #12262D;
			}
			
			#header .menu li.current-menu-item a {
				border-bottom: 0.15em solid #fff;
				background: #fff;
				color: #080D10;
				padding: 0 1em;
			}
			
		#header .menu li.pull {
			display: block;
		}
			
		#header .menu li.pull a {
			border: none;
			display: block;
			height: 2.5em;
			padding: 0;
			position: absolute;
			right: 0;
			top: -2.5em;
			width: 2.5em;
		}
		
			#header .menu .pull img {
				height: auto;
				width: 100%;
			}
	
	
	/* ============================================================================================================== *
	 * Content
	 * ============================================================================================================== */

	#outbound {
		left: auto;
		line-height: 0;
		margin: 0 auto;
		padding: 0.5em 2em;
		position: relative;
		right: auto;
		text-align: center;
		top: auto;
		width: 80%;
	}
	
	.home #outbound { top: auto; }
	
		#outbound img:first-child:before {
			content: "Find us on: ";
		}
		
		#outbound img {
			display: inline-block;
			height: auto;
			margin: 0 0.25em;
			width: 2.25em;
		}
		
	/* ============================================================================================================== *
	 * Releases
	 * ============================================================================================================== */
	
	#releases .release {
		width: 98%;
	}
		
		#releases .release img {
			float: left;
			margin: 1.5em 0 1.5em 1.5em;
			width: 30%;
		}
		
		#releases .release .inner { float: left; }
		
}

@media screen and (max-width: 768px) {
	
	body {
		-webkit-background-size: 200% auto;
		background-size: 200% auto;
	}

	/* ============================================================================================================== *
	 * Hero
	 * ============================================================================================================== */
	
	#hero .text {
		margin: 0 auto;
		padding: 2em 2em 1.5em;
		width: 80%;
	}
	
	.home #hero .text { width: 80%; }
	
	/* ============================================================================================================== *
	 * Hero
	 * ============================================================================================================== */
	
	#biography .members { padding-bottom: 1em; }
		
		#biography .grid_2 {
			margin-bottom: 0.5em;
			width: 31.333%;
		}
		
		#biography .grid_2.alpha,
		#biography .grid_2.omega {
			margin-left: 1%;
			margin-right: 1%;
		}
		
			#biography .grid_2 .title { line-height: 1.2; }
	
	/* ============================================================================================================== *
	 * Media
	 * ============================================================================================================== */
	
	#media .item {
		display: inline;
		float: left;
		margin: 0 1% 0.5em 1%;
		position: relative;
		width: 31.333%;
	}
	
}

@media screen and (max-width: 640px) {
	
	body {
		-webkit-background-size: 250% auto;
		background-size: 250% auto;
	}
	
	/* ============================================================================================================== *
	 * Main
	 * ============================================================================================================== */
	
	.container { padding: 0 5%; }
	
	/* ============================================================================================================== *
	 * Content
	 * ============================================================================================================== */
	
	#content .container { padding: 2em 5%; }

	#outbound { padding: 0.5em 5%; }
		
	
	/* ============================================================================================================== *
	 * Header
	 * ============================================================================================================== */
	
	#header .logo {
		height: 2.75em;
		margin-top: 0.25em;
	}
		
	/* ============================================================================================================== *
	 * Releases
	 * ============================================================================================================== */

	#releases .release img {
		float: none;
		margin: 0;
		width: 100%;
	}
	
	#releases .release .inner { float: none; }
	
	
	/* ============================================================================================================== *
	 * Media
	 * ============================================================================================================== */
	
	#media hgroup h1 {
		float: none;
		padding-bottom: 0.25em;
	}

	#media hgroup #filter { float: none; }
	
	#media hgroup #filter a { margin-bottom: 1.5em; }
	
	#media .item { width: 48%; }
	
}

@media screen and (max-width: 480px) {
	
	html { margin-top: 4em; }
	
	body { padding-top: 6em; }
	
	body.home { padding-top: 4em; }

}