/*
Style.css development version
Author: J.G. Vissers - All rights reserved
*/

/* reset styles */
*	{ margin: 0; padding: 0; }

/* container */
.container		{ margin: 0px auto; overflow: hidden; }

/* position, float and overflow of main elements */
#header,
	#banner,
	#nav,
#content,
#footer,
	#sitemap,
	#copyright

{ margin: 0px auto; float: none; overflow: hidden;}

/* position, float and overflow of sub elements */

#content img,
#content a.button,
.row,
.row1-2,
.ec,
.img_container,
.vid_container,
.logo-txt,
.logo-txt-top,
.logo-txt-sub,
.rep_title,
.rep_artist,
p
{ position: relative; float: left; overflow: hidden;}



/* default width and margins */

p,
table,
#header,
	#banner,
	#nav,
#content,
#footer,
	#sitemap,
	#copyright,
.row,
.logo-txt-top,
.logo-txt-sub
{ width: 100%;}


.row1-2
{ width: 50%;}

p				{ margin: 4px 0 6px 0;}
h2				{ margin: 4px 0 6px 0;}

#header			{ margin: 5px 0px;}
#nav			{ margin: 0px 0px 5px 0px; padding: 2px; }
#footer			{ padding: 2px; }

#nav	.ec		{ width: 99%; padding: 2px; margin: 5px 0.5%;   }
#footer	.ec		{ width: 99%; padding: 2px; margin: 5px 0.5%;   }


.img_container			{ width: 99.6%;}

.vid_container {
	width: 99.6%;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.vid_container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#content .ec1-4 .img_container img		{ width: 96%; margin: 2%;} 

	.rep_title	{ width: 60%; }
	.rep_artist { width: 38%; padding-left: 2%: } }

#footer			{ margin: 5px 0px 0px 0px;  padding: 2px;}
#sitemap		{ display: none;   }
#copyright .ec	{ width: 99%; padding: 2px; margin: 5px 0.5%;   }
#copyright p	{ margin: 0% }


/* ------------------------------------------------------------- Font scheme size and alignments --------------------------------------------------------------- */

@font-face {
    font-family: 'robotolight';
    src: url('fonts/roboto-light-webfont.eot');
    src: url('fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-light-webfont.woff2') format('woff2'),
         url('fonts/roboto-light-webfont.woff') format('woff'),
         url('fonts/roboto-light-webfont.ttf') format('truetype'),
         url('fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotobold';
    src: url('fonts/roboto-bold-webfont.eot');
    src: url('fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-bold-webfont.woff2') format('woff2'),
         url('fonts/roboto-bold-webfont.woff') format('woff'),
         url('fonts/roboto-bold-webfont.ttf') format('truetype'),
         url('fonts/roboto-bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Andada';
    src: url('fonts/AndadaSC-Regular-webfont.eot');
    src: url('fonts/AndadaSC-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/AndadaSC-Regular-webfont.woff2') format('woff2'),
         url('fonts/AndadaSC-Regular-webfont.woff') format('woff'),
         url('fonts/AndadaSC-Regular-webfont.ttf') format('truetype'),
         url('fonts/AndadaSC-Regular-webfont.svg#AndadaSC-Regular-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'empire';
    src: url('fonts/ufonts.com_empire-bt-webfont.eot');
    src: url('fonts/ufonts.com_empire-bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ufonts.com_empire-bt-webfont.woff2') format('woff2'),
         url('fonts/ufonts.com_empire-bt-webfont.woff') format('woff'),
         url('fonts/ufonts.com_empire-bt-webfont.ttf') format('truetype'),
         url('fonts/ufonts.com_empire-bt-webfont.svg#empire-bt') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* reset fonts and set default font */ 
*													{ font-family: "robotolight";  font-size: 16px; text-decoration: none; font-weight: normal; font-style: normal;  }

h1, h2, h3, .logo-txt-sub							{ font-family: "Andada";  }
.logo-txt-top										{ font-family: "empire";  }
.nav_item											{ font-family: "Andada";  text-transform: uppercase; }
strong, .leadtext									{ font-family: "robotobold"; }

h1, h2, h3											{ text-transform: uppercase; }

h1			{ font-size: 120%; }
h2			{ font-size: 100%; }
h3			{ font-size: 90%; }
#footer	p	{ font-size: 70%;  }
.leadtext	{ font-size: 105%; }
.instrument { font-size: 70%; font-style: italic; margin-top: 0px;}


th,td		{ text-align: left; }
.ref_logo	{ text-align: center; }
#banner		{ text-align: center; }
#nav		{ text-align: center; }
#footer 	{ text-align: center; }
#copyright	{ text-align: center; }
.rep_artist	{ text-align: right; }

/* ----------------------------------------- COLOR SCHEME -------------------------------------------- */

/* backgrounds */
body				{ background: #000000; }

/* font-colors */
*					{ color: #FFFFFF; }
.formfield			{ color: #000000; }

/* borders */
#nav .row,
#copyright .row		{ border-top:	1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf; }
.img_container		{ border:		1px solid #bfbfbf; }
.vid_container		{ border:		1px solid #bfbfbf; }
.rep_title,
.rep_artist			{ border-top:	1px dotted #626262; }
th					{ border-bottom:1px dotted #626262; }
iframe				{ border: 0px; }

/* ------------------------------------------------------------- FORM SPECIFIC ------------------------------------------------------------- */

form					{ width: 98%; }
legend					{ margin: 10px; padding: 0px 10px;}
label, input, select	{ display:block; }
input, select			{ margin-bottom: .5em; width: 95%; }
fieldset				{ margin-bottom: 1em; padding: 1em; }
fieldset fieldset		{ margin-top: 1em; margin-bottom: 1em; }
input[type="checkbox"]	{ display:inline; }
input[type="submit"]	{ color: #000000; }
textarea				{ width: 95%; }

/* ------------------------------------------------------------- MEDIA QUERIES SMARTPHONE ------------------------------------------------------------- */
@media (max-width: 549px)
{
a h2			{ text-align: center; display: block; border: 1px solid #d8d8d8; border-right: 1px solid #575757; border-bottom: 1px solid #575757; padding: 4px; width: 90%; }

#header			{ position: fixed; top: 0px; z-index: 1500;  margin: 0px; }
#banner			{ border-bottom: 1px solid #bfbfbf; }
#act_menu		{ position: absolute; margin: 10px 4px; z-index: 2000; }
#nav			{ text-align: left; display: none; border-top: 0px transparent; padding: 0px;}
#content		{ margin-top: 134px;} /* offset due to fixed navigation bar - change this is .logo-txt... changes font-size */

.row1-2			{ width: 100%;}
.ec				{ width: 96%; margin: 1%;  padding: 1%; }
.logo-txt-top	{ font-size: 600%; }
.logo-txt-sub	{ font-size: 120%; }
#nav .ec		{ margin: 0px; padding: 0px;}
#nav .ec .row	{ border-top: 0px transparent; }
.nav_item		{ margin: 0%; padding: 2px; font-size: 100%; color: #000000; width: 100%; display: inline-block;  font-family: "robotolight"; border-bottom: 1px solid #cacaca; background: #e8e8e8;}

#banner			{ background: url("images/stage.jpg"); background-size: 100% 100%; }
/*#content		{ background: url("images/knopje.png"); background-size: 100% 100%;  padding-top: 3px;}*/


/* styling of large buttons on homepage *?
/*
.bandinfo		{ background: url("../images/bandmembers.jpg"); color: #000000;}
.repertoire		{ background: url("../images/setlist.jpg"); }
.opnames		{ background: url("../images/podium.jpg"); }
.contact		{ background: url("../images/calendar.jpg"); }
*/

.bandinfo,
.repertoire,
.opnames,
.contact		{ background: #000000 url("images/BLUE.jpg");background-size: 100% 100%; line-height: 40px; margin: 0px auto; max-width: 240px; font-size: 130%;}


.rep_title		{ width: 100%; padding: 2px;}
.rep_artist		{ width: 100%; font-size: 80%; font-style: italic; border: none; text-align: left; margin: 4px 0 8px 0;}



/* hide certain elements */
.notonphone		{ display: none; }

}


/* ------------------------------------------------------------- MEDIA QUERIES TABLET------------------------------------------------------------- */
@media (min-width: 550px) and (max-width: 904px)
{

#banner 		{ background: url("images/stage.jpg"); background-size: 100% 100%; }
#nav			{ z-index: 1500; }

.row1-2			{ width: 100%; }

.ec				{ width: 98%; margin: 0.5%; padding: 0.5%; }
.ec1-2			{ width: 48%; }
.ec1-4			{ width: 48%; }
.logo-txt-top	{ font-size: 600%; }
.logo-txt-sub	{ font-size: 180%; }
.nav_item		{ margin: 0 1%; padding: 1px 3px; display: inline-block; font-size: 110%; } 
.img_container	{ width: 97%; margin: 1%; padding: 0.5%; }

/* hide certain elements */
.onphone		{ display: none; }
#act_menu		{ display: none; }

}

/* ------------------------------------------------------------- MEDIA QUERIES DESKTOP -------------------------------------------------------- */
@media (min-width: 905px)
{
#banner				{ width: 90%; max-width: 1420px;}
#content			{ width: 90%; max-width: 1420px;}
.ec					{ width: 98.00%; margin: 0.5%; padding: 0.5%;}	
.ec1-2				{ width: 48.00%; }
.ec1-4				{ width: 48.00%; }

#header .ec			{ margin: 0; width: 100%; padding: 0%;}
.logo-txt-top		{ font-size: 850%; }
.logo-txt-sub		{ font-size: 250%; }
.nav_item			{ width: 120px; margin: 2px 2%; padding: 1px 3px; display: inline-block; font-size: 120%; } 
.img_container		{ width: 95%; margin: 1%; padding: 1%; }

#banner 			{ background: url("images/stage.jpg"); background-size: 100% 100%; }

#content a:hover	{ text-decoration: underline;}

/* hide certain elements */
.onphone			{ display: none; }
#act_menu			{ display: none; }

}
/* ------------------------------------------------------------- END MEDIA QUERIES ------------------------------------------------------------- */