/*=====================================================================
 *
 * Filename: main.css
 * Website: midnightchoir
 * Author: Nivanka - paste.com.au
 * Date Created: 22/10/2010
 * Media: Screen
 *
 * Description
 * -----------
 * Colours:
 * Background 		- #000000
 * Link				- #1e4c4c  
 * Link	Hover		- #1e4c4c 
 * Link Active		- #1e4c4c 
 *
 *=====================================================================*/ 

/* Layout styles
    
	index -> 	
				CSS reset
				html
				default styles
				header
				siteSections
				about
				login
				contact
				downloads
				forms
				footer
*/

/* =css reset     
--------------------- */
html, body, div, span, object, iframe, 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 { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; vertical-align: baseline; list-style-type:none; }  

/* =html
-------- */
html { background: #000; -moz-background-size:cover; background-size:cover; font: 11px/15px "BrandonGrotesque-Regular"; color: #fff; } 

/* =body
-------- */
body { overflow-x: hidden; font-family: "BrandonGrotesque-Regular"; color:#fff;} 
	
/* =defaults
------------ */
h1 { font: 300 22px/28px "BrandonGrotesque-Bold"; letter-spacing:0.01em; margin-bottom: 20px;}
h2 { font: 300 14px/19px "BrandonGrotesque-Bold"; letter-spacing:0.05em; margin-bottom: 14px; }
h3 { font: 300 13px/18px "BrandonGrotesque-Bold"; letter-spacing:0.05em; margin-bottom: 13px; }
h4 { font: 300 12px/17px "BrandonGrotesque-Bold"; letter-spacing:0.05em; margin-bottom: 12px; }
p { font: 300 14px/20px "BrandonGrotesque-Regular"; letter-spacing:0.05em; margin-bottom: 11px; } 
a { color: #45b2b4; text-decoration: none; }
a:hover { text-decoration: underline; color: #ffffff; webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
input, textarea { color: #fff; background-color: #242323; border: none; height: 42px; padding: 0px 15px; font-size: 14px; margin-bottom: 12px; outline: none; }
.middleColumn .text { width: 243px; background-color: #272726!important; }
.action { font-size: 12px; font-weight: 300; }

/* =header
---------- */
#siteHead { min-height: 145px; height: auto; margin: 0px; padding: 0 288px; background: #000000; }
#siteHead a.logo { position: absolute; left: 68px; top: 45px; width: 132px; height: 55px; margin: 0; display: block; }
#siteHead h1 { text-indent: -9999px; width: 132px; height: 55px; display: block; margin: 0 auto; background: transparent url(../images/logo.png) no-repeat; }

h1.head {
	font-size: 24px;
	line-height: 1.2;
	text-transform: uppercase;
	font-weight: 500;
}

/* =Main Navigation
------------------- */
div.mainNav {
	min-width: 128px;
	width: auto;
	padding: 66px 32px 0 32px;
	position: relative;
	margin: 0 auto;
  	text-align: center;
}
div.mainNav h3 {
	font: 700 18px/22px "BrandonGrotesque-Bold";
	text-transform: uppercase;
	margin-bottom: 20px;
	margin-right: 10px;
	letter-spacing: 0.03em;
	cursor: pointer;
	
	display: none;
}
div.mainNav nav.main {
	/*padding-bottom: 20px;*/
	padding: 0;
	overflow: hidden;
	display: inline-block;
}
div.mainNav nav a {
	font: 300 17px/20px "BrandonGrotesque-Regular";
	text-transform: uppercase;
	display: block;
	/*margin-bottom: 16px;*/
	color: #ffffff;
	letter-spacing: 0.05em;
	opacity: 0.7;
 	filter: alpha(opacity=70); /* For IE8 and earlier */
	
	float: left;
	margin: 0 18px 10px;
	padding-bottom: 2px;
	border-bottom: 3px solid transparent;
}
div.mainNav nav a:hover {
	color: #cccccc;
	border-bottom: 3px solid #fff;
	text-decoration: none;
}
div.mainNav nav a.current {
	font-family: "BrandonGrotesque-Bold";
	font-weight: 700;
	border-bottom: 3px solid #fff;
	/*color: #cccccc;*/
}
#NavMenu {
	position: absolute;
	right: 20px;
	top: 22px;
	font-size: 25px;
	line-height: 20px;
	cursor: pointer;
	display: block;
	width: 22px;
	height: 20px;
	
	display: none;
}
.mainImage {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100%;
	background-size: cover;
}
#siteHead,
div.mainNav,
.pageContent {
	position: relative;	
	z-index: 2;
}
.flexslider {
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0!important;
	-webkit-border-radius: 0!important;
	-moz-border-radius: 0!important;
	-o-border-radius: 0!important;
	box-shadow: none;
	-webkit-box-shadow: none;
	width: 100%;
}

.pageContent.hasThreeColContent {
	margin-top: 60px;
}
.pageContent .threeColContent {
	background: url('../images/bg-content.png');
	max-width: 756px;
	margin: 0 auto;
	overflow: hidden;
	padding: 39px 42px 10px 35px;
}
.pageContent .threeColContent h1 {
	font: 500 23px/1.2 "BrandonGrotesque-Regular";
	text-transform: uppercase;
	margin-bottom: 43px;
}
.pageContent .threeColContent ul.col-block {
	width: 31%;
	float: left;
	margin-right: 3%;
}
.pageContent .threeColContent ul.col-block:last-child {
	margin-right: 0%;
}
.pageContent .threeColContent ul.col-block li {
	font: 300 14px/1.2 "BrandonGrotesque-Regular";
	text-transform: uppercase;
	margin-bottom: 10px;
}

/* =siteSection
--------------- */ 
.pageContent { width: 90%; overflow: hidden; margin: 5% 5% 0 5%; float: left; }
.siteSection { float: left; position: absolute; left: 65px;} 
.wideContent { }
.siteSection h1.head { height: 12px; width: 115px; margin: 0; padding: 15px 25px 15px 20px; display: block; clear: both; background: #1e4c4c url(../images/arrow.gif) right center no-repeat; font: 300 12px/12px "BrandonGrotesque-Regular"; letter-spacing:0.1em; text-transform: uppercase; cursor: pointer; z-index: 99999; }
.siteSection h1.head { -webkit-transition:background-color 0.1s ease-in;-moz-transition:background-color 0.1s ease-in;-o-transition:background-color 0.1s ease-in; transition:background-color 0.1s ease-in; }
.siteSection .head:hover, .siteSection .head:focus { background-color: #222222; }
.siteSection .head:hover, .siteSection .head:focus {  background: #1e4c4c url(../images/arrow.gif) right center no-repeat rotate(30deg);}
.siteSection.expanded .head { }                                                           
.siteSection.expanded .head:hover, .siteSection.expanded .head:focus { } 

.siteSection .head.small { background-position:  right -200px; }
.siteSection .head.small:hover, .siteSection .head:focus { background: #222222  url(../images/arrows.gif) right -264px no-repeat; } 
.siteSection.expanded .head.small { background-position:  right -168px; }                                                           
.siteSection.expanded .head.small:hover, .siteSection.expanded .head.small:focus { background-position:  right -232px; }

.siteSection .content { display: none; background-color: #000; color: #fff; padding: 20px 15px 15px 15px; }
.siteSection .expandedContent { display: block; background-color: #000; color: #fff; padding: 20px 15px 15px 15px; } 

/* =about section
----------------- */
.aboutContent, .aboutNarrrowContent { margin: 0; }

/* =login section
----------------- */
.loginContent { margin: 0; top: 139px; left: 785px; } 
.loginContent form {
	max-width: 570px;
	width: auto;
}
.loginContent label { display: none; }       
.loginContent #Email { float: left; }
.loginContent #Password { float: right; } 
.loginContent #Remember { display: none; }
.loginContent #Remember label { display: inline-block; }
.loginContent .Actions { overflow: hidden; }
.loginContent .Actions .action { float: left; margin-right: 17px; } 
.loginContent #ForgotPassword { float: left; margin-top: 10px; text-transform: uppercase; margin: 0; } 
.loginContent #ForgotPassword a { font-size: 14px; display: block; margin-top: 7px; }  
#MemberLoginForm_LoginForm label, #MemberLoginForm_LostPasswordForm label { display: block; font-size: 14px; line-height: 1.2; color: #1e4c4c; margin-bottom: 11px; text-transform: uppercase; }
.loginContent p { margin-bottom: 45px; }
.loginContent form fieldset { margin-bottom: 30px; }
#MemberLoginForm_LostPasswordForm fieldset { margin-bottom: 20px; }

/* =contact section
------------------- */
.contactContent { width:400px; margin: 0; left: 900px; top: 635px; }

/* =downloads section
--------------------- */ 
.downloadsContent { margin: 0px 0px 0px 0px; }
.userHolder { overflow: hidden; margin-right: -5px; }
.user { float: right; height: 37px; padding: 0px 15px; background-color: #242323; clear: both; line-height: 37px; font-size: 11px; }
.downloadsHeader { font-size: 18px; font-weight: normal; }  
.downloadsContainer { padding-top: 22px; }
.downloadItem { background-color: #262525; margin-bottom: 5px; display: block; height: 36px; overflow: hidden; } 
.downloadItem span { float: left; line-height: 36px; margin-left: 10px; } 
.downloadItem span a { color: #fff; text-decoration: underline; }
.downloadItem .button { float: right; width: 94px; height: 28px; margin: 4px; background-color: #1e4c4c; text-align: center; text-transform: uppercase; color: #fff; line-height: 28px; }
.downloadItem .button, .Actions .action { -webkit-transition:background-color 0.1s ease-in;-moz-transition:background-color 0.1s ease-in;-o-transition:background-color 0.1s ease-in; transition:background-color 0.1s ease-in; }
.downloadItem:hover .button, .downloadItem:focus button { background-color: #222; } 
.playList { padding-top: 43px; display: block; }

/* =forms
--------- */
.Actions .action { min-width: 89px; height: 28px; background-color: #1e4c4c; text-transform: uppercase; text-align: center; color: #fff; border: none; cursor: pointer; }  
.Actions .action:hover, .Actions .action:focus { background-color: #222222; }
                 

/* =footer
---------- */
#mainFooter { display: block; position: fixed; bottom: 0px; left: 0px; width: 100%; height: 60px; background-color: #000; z-index: 99999; }
#mainFooter .content { margin-top:10px;height: 40px; float: left; width: 100%;}
#mainFooter .content ul {float: left; margin-left:60px;} 
#mainFooter .content ul li { float: left; font: 300 11px/11px "BrandonGrotesque-Regular"; letter-spacing:0.1em; margin: 15px 10px 15px 0px; background-color:#000; -moz-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; }
#mainFooter .content ul li a { display:block; text-transform: uppercase; padding:3px 6px; }  
#mainFooter .content ul li a.tumblrLink { margin-top:-10px; display:block; text-transform: uppercase; padding:6px 6px 6px 6px; }  
#mainFooter .content ul li a:hover { background-color:#222; -moz-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px;}
#mainFooter .content span { float: right;  font: 300 11px/11px "BrandonGrotesque-Regular"; letter-spacing:0.1em;margin: 18px 60px 18px 15px; }

@media screen and (max-width: 690px) {  
	.loginContent #Email,
	.loginContent #Password {
		float: none;
	}
}
@media screen and (max-width: 640px) {  
	.pageContent .threeColContent ul.col-block {
		width: 100%;
		margin-right: 0;
		float: none;
	}
}
@media screen and (max-width: 501px) { 
	div.mainNav {
		width: 80%;
		margin: 0 5%;
		padding: 22px 2.8% 0 7.2%;
	}
	#siteHead {
		width: 90%;
		margin: 0 5%;	
		padding: 0;
	}
	#siteHead a.logo {
		position: relative;
		left: auto;
		top: auto;
		margin: 0 auto;
		padding: 30px 0;
	}
	div.mainNav nav a {
		float: none;
		margin: 0 0 20px 0;
	}
}
@media screen and (max-width: 480px) { 
	.pageContent {
		margin-bottom: 15px;
	}
}