/* ===== global styles ===== */

body  {
    font-family: monospace;    /* default page font */
    background: #bbb url(../images/page_background.png);
	background-attachment:fixed;
    margin: 0;          /* shorthand for all margins = 0 */
    padding: 0;         /* no padding */
}
a {
	
	text-decoration:none;
}
p, h1, h2, h3, h4, h5, h6, li {
    margin: 1ex 1em;
}
h1, h2, h3, h4, h5, h6{
    font-family: Georgia, "Finger Paint", sans-serif;
}
h1{
	
	    font-size: 1.6em;
    font-weight: bold;
    color: #2A6360;
    margin: 0 0 .4ex 0;
}
#outerDiv {
    width: 56.39%;       /* sets the content width */
    margin: 0 auto;     /* no top/bottom margin, centered horizontally */
	padding-top:100px;
	background-color:#BED4C7;
	/*background-image: url(../images/falaena_logo.png);      /* white content background, header image */
	/*background-repeat: no-repeat;
	background-size:  30% auto;
	background-position:  20px 5px;*/
	max-width: 900px;
	min-width:200px;
	-webkit-box-shadow: 0px 0px 58px -6px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 58px -6px rgba(0,0,0,1);
box-shadow: 0px 0px 58px -6px rgba(0,0,0,1);

}

hr {
	height:1px;
	   background:  #aaa;
	   border:0;
	   margin: 10px 0 10px 0;
}
	
	/* Gradient transparent - color - transparent */

hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
	
}
/*#midBanner{
	background: url(../images/Floral_Ornament_with_Roses.png) repeat-x; 
	background-size:200px auto;
}*/
	
}
a {
    text-decoration: none;
    color: #2A6360;
}

p {
	font-family:monospace;
	font-size:4em;

}
a:hover, a:active {
    color: #566440;
    border-bottom: 1px dashed #566440;
}

/* ===== header ===== */

#header {

	background-color:#EEEEEE;
	background-image: url(../images/falaenalogo-nomoth.png);      /* white content background, header image */
	background-repeat: no-repeat;
	background-size:  auto 70px;
	background-position:  20% center;
	margin-top:10px;
	width:100%;
    height: 75px;          /* set size equal to banner image */
    position: fixed;     /* allow absolute positioning relative to this space */
                            /* (used for menus below) */
	-webkit-box-shadow: 0px 21px 58px -6px rgba(0,0,0,1);
-moz-box-shadow: 0px 21px 58px -6px rgba(0,0,0,1);
box-shadow: 0px 21px 58px -6px rgba(0,0,0,1);
z-index:1;

							
}


#bandPhoto {
	display:none;
	width:32.5%;
	float:right;
	position:absolute;
	right:0;
	height:auto;
	opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
	
	
}
/* ===== main menu ===== */

#mainMenu {
    position: relative;
	float:right;
	right:10%;
    bottom: -40px;
}
#mainMenu {
    position: relative;
    float: right;
    right: 5%;
    top: 10px;
    max-width: 55%;
    text-align: right;
}

#mainMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
	max-width:50%;
}


#mainMenu li {
	background-color:black;
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	font-family:'Roboto Condensed', Helvetica, Arial, sans-serif;
    float: left;
    margin: 2px 2px;
    padding: 5px 15px;
	text-align:center;
}

#mainMenu a {
    display: block;
    color: #fff;
    text-decoration: none;
   /* background: url(../images/falaena_sprites_nav.jpg);*/
    border: none;
}

#mainMenu a:hover {
    color: #BED4C7;
    background-position: -50px 0;
}

#mainMenu .comingSoon1:hover  {
background:grey;
   text-decoration: line-through;
}
.comingSoon2 {
	
	display:none;
}

/* === video banner style === */


#video-banner  {
	height:250px;
	min-height:100px;
	background: black url(../images/band_laughs_resized.jpg);
	background-repeat: no-repeat;
	background-position: center 5%;
	background-size: %;
	background-attachment: fixed;

	
	
}
#video-banner  h2, #video-banner  h3, #video-banner  h1 {
	text-align:center;
	line-height:250px;
	margin:auto;
	color:white;
	font-family: Georgia, Times, serif;
}
#video-banner  h1{font-size:60px;} 
#video-banner  h2{font-size:50px;} 
#video-banner  h3{font-size:70px; font-style:italic;} 

 #mobile-video-banner {
		margin-top:80px;
		min-height:150px;
		background:   url(../images/band_laughs_resized.jpg), #333333 /*,url(../images/mobile_video_banner-fade.png)*/;
		background-size: auto 100%/*,110% auto;*/;
		background-repeat:no-repeat/*, no-repeat;*/;
		background-position:center/*,center;*/;
	}
#mobile-video-banner  h1{
	text-align:center;
	line-height:50px;
	margin:auto;
	color:white;
	font-family: Georgia, Times, serif;
	font-size:20px;
	} 
.mobile-video-banner-span {
	font-style:italic;
		font-size:30px;

	
}

/* === Slider video banner  === */

/*.slides {
position:absolute;
}*/

#frame2 {display:none}
#frame3 {display:none}
#frame4 {display:none}

.slides{
	text-align:center;

}
.slides img {
	width:auto;
	height:250px;
	text-decoration:none;
	margin:auto;
	
}
.slides  a:hover {

	text-decoration:none;
	
}
/* the content portion of the page */

#content {
    background-color: #BED4C7;
    padding: 0 0 5px 0;
}


/* ====- main content ===== */

#mainContent {
    float: left;
    width: 55.85%;
    margin: 0 0;
    padding: 20px;
}

#mainContent p {
    font-size: 0.9em;
    line-height: 1.4em;
    color: black;
    margin: 1ex 0;
}

/*#mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4 {
    font-family: "Finger Paint", sans-serif;
}*/

#mainContent h1 {
    font-size: 1.6em;
    font-weight: bold;
    color: #2A6360;
    margin: 0 0 .4ex 0;
}

#mainContent h2 {
    font-size: 1.2em;
    color: #3c3809;
    margin: .4ex 0;
}

#mainContent h4 {
    font-size: 1.1em;
    font-weight: bold;
    color: #666;
    margin: 1ex 0 -.2ex 0;
}

#mainContent ul {
    font-size: 0.9em;
    margin: 0 0 1.4ex 0;
}
#mainContent a {
	color:#2A6360;
	text-decoration:none;
}

#youtubeVid {
    margin: 2ex 0 2ex 1em;
}


/* ====== Next gig dates div ====== */

#nextGig{
	background:url(../images/notepad_background.jpg);
	background-size:100% auto;
	padding:10%;
	
}





/* ===== sidebar ===== */

#sideBar {

    float: right;
    width: 30%;
    padding: 20px 10px 10px 5px;
    margin: 0;
    border-left: solid #aaa 1px;
}

#sideBar p {
    /*font-family: "Trebuchet MS", sans-serif;*/
    font-size: 0.8em;
    line-height: 1.2em;
    color: #666;
    margin: 0 0 3ex 0;
}
#sideBar a {
	color:black;
	text-decoration:none;
}


#sideBar img {
    margin: 0 25px;
}

#sideBar img.photo {
    padding: 5px;
    border: 1px solid #999;
}

#sideBar ol {
    margin: .5em 0 1.5em 0 ;
}

#sideBar li {
    font-family: "Trebuchet MS", sans-serif;
    font-size: 0.8em;
    color: #666;
    margin: .2em .5em;
}

/* ===== footer ===== */

#footer {
    clear: both;
    background: transparent;
    margin: 0 auto;
    padding: 20px;
}

#footer p {
    font-size: 1.02em;
    color: #fff;
    margin: 0;
    padding: 0;
    text-align: center;
}

#footer a {
    color: #BED4C7;
    text-decoration: none;
}

	.onlyMobile{
		
		display:none;
	}

	
	#accordion div {
		-webkit-box-shadow: 0px 21px 58px -6px rgba(0,0,0,1);
		-moz-box-shadow: 0px 21px 58px -6px rgba(0,0,0,1);
		box-shadow: 0px 21px 58px -6px rgba(0,0,0,1);
		background:#eeeeee;
		padding:10px;
	}
	
	#accordion h1{
	background-color:black;
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	font-family:'Roboto Condensed', Helvetica, Arial, sans-serif;
	background-image:none;
	text-align:center;
	padding:10px;
		
	}
	
/* ===== miscellaneous styles ===== */

.clear {
    clear: both;
    height: 0;
    margin: 0;
    padding: 0;
}

@media only screen and (min-width : 600px) and (max-width : 1050px) 	{
		#outerDiv {
			width:80%;
			
		}
		
		.noTablet {
			display:none;
		}

}
	


/* metti una media query da 600 a 700 in cui ingrandisci solo l'outer div senza cambiare il layout troppo*/
@media only screen and (max-width: 718px) {
	

		#outerDiv {
			width:90%;

}

	
	#header {
			min-height:140px;
	background-size:  auto 40%;
	background-position:  top center;
	height:auto;
	}

		#sideBar,#mainContent{
			width:90%;
			display:block;
			padding:10px 20px;
		}
		
		#sideBar{
			border:0;
		}
		#youtubeVid {
			margin: auto;
			padding:10px;
		}	

		

		#bandPhoto {
			display:none;
		}
		
#video-banner  {
	
	text-decoration:none;

	
	
}
.slides a {
	text-decoration:none;
	
	
}
	
.slides img {
	height:100px;

	
}
	#video-banner  {
	margin-top:80px;
	height:100px;
	background-size: 100%;

}	
#accordion {
	margin-top:80px;
	
}
		
		#video-banner  h2, #video-banner  h3, #video-banner  h1 {
	text-align:center;
	line-height:100px;
	margin:auto;
	color:white;
	font-family: Georgia, Times, serif;
}


		#video-banner  h1{font-size:2em;} 
		#video-banner  h2{font-size:1.5em;} 
		#video-banner  h3{font-size:2em;} 
		
#mainMenu {
	right:0;
	left:0;
	display:block;
	float:none;
    position: static;
margin:auto;	
margin-top:60px;
width:90%;
clear:both;


}


#mainMenu li {
	display:blcok;
    float: none;
    margin: 2px 2px;
    padding: 5px 15px;
	text-align:center;
	width:90%;

}

#mainMenu a {
    display: block;
    color: #fff;
    text-decoration: none;
    border: none;
}



			.noMobile {
		
		display:none;
	}
	.onlyMobile{
		
		display:block;
	}
	
	
	
	}	/*end of media query*/