@charset "utf-8";

*{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

html, body {
	font-size: 16px tahoma, verdana, arial, sans-serif;
	background-color: #000;
	color: #efd292;	
}


/** FONTS USED ON THIS SITE **/

/* Navigation */
@font-face {
    font-family: 'basic_sans_light_sfregular';
    src: url('../fonts/nav/basicsanslightsf-webfont.eot');
    src: url('../fonts/nav/basicsanslightsf-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nav/basicsanslightsf-webfont.woff2') format('woff2'),
         url('../fonts/nav/basicsanslightsf-webfont.woff') format('woff'),
         url('../fonts/nav/basicsanslightsf-webfont.ttf') format('truetype'),
         url('../fonts/nav/basicsanslightsf-webfont.svg#basic_sans_light_sfregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* h1 */
@font-face {
    font-family: 'romana_btroman';
    src: url('../fonts/h1/romanabt-webfont.eot');
    src: url('../fonts/h1/romanabt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/h1/romanabt-webfont.woff2') format('woff2'),
         url('../fonts/h1/romanabt-webfont.woff') format('woff'),
         url('../fonts/h1/romanabt-webfont.ttf') format('truetype'),
         url('../fonts/h1/romanabt-webfont.svg#romana_btroman') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* h2 */
@font-face {
    font-family: 'great_vibesregular';
    src: url('../fonts/h2/greatvibes-regular-webfont.eot');
    src: url('../fonts/h2/greatvibes-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/h2/greatvibes-regular-webfont.woff2') format('woff2'),
         url('../fonts/h2/greatvibes-regular-webfont.woff') format('woff'),
         url('../fonts/h2/greatvibes-regular-webfont.ttf') format('truetype'),
         url('../fonts/h2/greatvibes-regular-webfont.svg#great_vibesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* p + h3 */
@font-face {
    font-family: 'avenir_45_bookregular';
    src: url('../fonts/p/avenir45book-webfont.eot');
    src: url('../fonts/p/avenir45book-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/p/avenir45book-webfont.woff2') format('woff2'),
         url('../fonts/p/avenir45book-webfont.woff') format('woff'),
         url('../fonts/p/avenir45book-webfont.ttf') format('truetype'),
         url('../fonts/p/avenir45book-webfont.svg#avenir_45_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* TOP button */
@font-face {
    font-family: 'basic_sans_heavy_sfbold';
    src: url('../fonts/topBtn/basicsansheavysf-webfont.eot');
    src: url('../fonts/topBtn/basicsansheavysf-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/topBtn/basicsansheavysf-webfont.woff2') format('woff2'),
         url('../fonts/topBtn/basicsansheavysf-webfont.woff') format('woff'),
         url('../fonts/topBtn/basicsansheavysf-webfont.ttf') format('truetype'),
         url('../fonts/topBtn/basicsansheavysf-webfont.svg#basic_sans_heavy_sfbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Contact Form */
@font-face {
    font-family: 'avenir_85_heavyregular';
    src: url('../fonts/contact-form/avenir85heavy-webfont.eot');
    src: url('../fonts/contact-form/avenir85heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/contact-form/avenir85heavy-webfont.woff2') format('woff2'),
         url('../fonts/contact-form/avenir85heavy-webfont.woff') format('woff'),
         url('../fonts/contact-form/avenir85heavy-webfont.ttf') format('truetype'),
         url('../fonts/contact-form/avenir85heavy-webfont.svg#avenir_85_heavyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p {
	font-family: 'avenir_45_bookregular'; 
	font-size: 0.875em;
	line-height: 1.5em;	
	margin-bottom: 3%;
}

ul {
	font-family: 'avenir_45_bookregular'; 
	font-size: 0.875em;	
	margin-bottom: 2%;
}

h1 {
	font-family: 'romana_btroman';	
	font-size: 1.875em;
	color: #8d7952;
			
	background-image: url(../images/paint-splat.png);
	background-repeat: no-repeat;
	background-position: 0px -8px;
	height: 64px;
	padding-left: 45px; 
	margin-left: -45px;
}

h2 {
	font-family: 'great_vibesregular';
	font-size: 3em;
	color: #8d7952;	
	margin-bottom: 1%;
}

h3 {
	font-family: 'avenir_45_bookregular';
	font-size: 1.25em;
	font-weight: normal !important;
	margin-bottom: 0 !important;
}


.top-btn {
	display: none;
	position: fixed;
	left: 92%;
	top: 90.125%;
	
	width: 54px;
	height: 54px;
	background: #695141;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	
	font-family: 'basic_sans_heavy_sfbold';
	font-size: 1.6875em;
	line-height: 54px;
	text-align: center;
	
	z-index: 999;
}

a.top-link {
	color: #8d7952;
	text-decoration: none;	
}

a.top-link:hover {
	color: #4F3D31;	
}

div.paint-splat {
	margin-left: -5.5%;
	margin-top: -9.75%;	
	position: relative;
	z-index: 0;
}



/* NAVIGATION */
nav {
	display: table;	/* evenly distributed li */
}

nav ul {
	font-family: 'basic_sans_light_sfregular';
	font-size: 1.875em;
	color: #8d7952;
	
	display: table-row; /* evenly distributed li */
	width: 100%; /* evenly distributed li */
}

nav ul li {
	list-style-type: none;
	display: table-cell; /* evenly distributed li */
	text-align: center; /* evenly distributed li */
}

nav ul li:first-child {
	text-align: left;	/* evenly distributed li */	
}

nav ul li:last-child {
	text-align: right; /* evenly distributed li */
}

a#nav-news, a#nav-bio, a#nav-disco, a#nav-contact {
	color: #8d7952;
	text-decoration: none;	
}

a#nav-news:hover, a#nav-bio:hover, a#nav-disco:hover, a#nav-contact:hover {
	color: #B35C20;
}


/* NEWS */
.video-wrapper {
	position: relative;
	padding-bottom: 56.25% !important; /* to display 16:9 aspect ratio videos */	
	height: 0;
	
	margin-bottom: 3%;	
}

.video-wrapper iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

.dates {
	font-size: 1.25em;
}

a.content-link {
	color: #efd292;
	text-decoration: none;
	border-bottom: #efd292 thin dashed; 	
}

a.content-link:hover {
	color: #B35C20;
	border-bottom: #B35C20 thin dashed; 
}

/* BIOGRAPHY */
#bio img {
	margin-bottom: 3%;	
}

p#author {
	text-align: right;	
}

ul#line-up li {
	list-style-type: none;		
}

/* DISCOGRAPHY */
#disco p {
	margin-left: 3.42%;	
}

ul#first-row li, ul#second-row li {
	display: inline-block;
	text-align: center;
	margin-left: 3.42%;
}

ul#first-row, ul#second-row {
	margin-bottom: 5%;	
}

a.album {
	color: #efd292;
	text-decoration: none;
}

a.album:hover {
	color: #648f00;	
}

/* CONTACT */
table {
	max-width: 100;	
}

.form-labels {
	font-family: 'avenir_85_heavyregular';
	text-transform: uppercase;
	font-size: 0.75em;		
}

.form-fields {
	width: 90%;
	height: 3.125em;
	padding: 0 5% 0 5%;
	margin-bottom: 1.25em;
	border: 1px solid #efd292;
	background-color: #000;	
	font-family: 'avenir_45_bookregular';
	font-size: 0.875em;
	color: #efd292;
	-webkit-appearance: none;
}

.form-message {
	width: 90%;
	border: 1px solid #efd292;
	background-color: #000;		
	margin-bottom: 1.25em;
	padding: 5%;
	font-family: 'avenir_45_bookregular';
	font-size: 0.875em;
	color: #efd292;
	-webkit-appearance: none;
}

.submit {
	width: 25%;	
	float: right;
	background-color: #000;
	border: 1px solid #efd292;
	color: #efd292;	
	font-family: 'avenir_45_bookregular';
	font-size: 0.875em;
	padding-top: 2%;
	padding-bottom: 2%;
	text-transform: uppercase;
	-webkit-appearance: none;			
}

.submit:hover {
	color: #6F6244;
	cursor: pointer;	
}

#contact-photo {
	float: left;
	padding-left: 3.42%;
	padding-bottom: 6%;	/* important to create gap at bottom of image after form submission */
}

#contact-container {
	float: left;
	padding-left: 3.42%;
	padding-bottom: 5%;	
} 

footer {
	clear: both; /* to clear footer from floating over Contact section */	
}

/* SOCIAL MEDIA */
#social ul {
	text-align: center;
}

#social ul li {
	list-style-type: none;
	display: inline;
}

#youtube {
	margin: 0 10% 0 10%;	
}


/* COPYRIGHT & CREDITS */
#copyright p  {
	font-family: tahoma, verdana, sans-serif;
	font-size: 0.625em;
	text-align: center;	
	margin-bottom: 2%;
}

a#forgottenglory {
	color: #efd292;
	text-decoration: none;
	border-bottom: #efd292 thin dashed; 	
}

a#forgottenglory:hover {
	color: #B35C20;
	border-bottom: #B35C20 thin dashed; 
}