/*

plein air interactive
28 Maple Street
Suite 300
Portland, Maine 04101
+1 207.221.2520

http://pleinairinteractive.com
http://facebook.com/gopleinair
http://twitter.com/gopleinair

SCREEN.CSS 

*/


/* = general styles
---------------------------------------------- */
body {
	font:100% 'Helvetica Neue', Helvetica, arial, helvetica, sans-serif;
	font-family: "museo-sans-condensed",sans-serif;
	font-weight:200;
	color:#686868;
	background: #efefef;
	}

a, a:visited {
/*   	color:#DD4E32; */
  	font-weight: normal;
/*   text-decoration: none; */
	color:#333;
  }
  
a:hover {color:#c00;}

a.button, .button a, button, form input[type="submit"] {
	font-weight:400;
	font-size:120%;
	text-transform: uppercase;
	text-decoration: none;
	display:inline-block;
	margin-top:.5em;
	padding:.5em 1em;
	color:#fff;
	background: #c00;
	border: none;
	white-space: nowrap;
	}

a.button:hover, .button a:hover, button:hover {
	color:#fff;
	background: #c00;
	opacity:0.8;
	}

/* responsive images */
#logo img,
#promos .column img,
#schedule_chart .venue dd img,
#sponsors a img,
#content .keyimage,
.postlist li a img {
	width:100%;
	max-width:100%;
	height:auto;
	}

/* make sure other images don't go 'out of bounds' */
#content img,
#content embed,
#sidebar img,
#sidebar embed {
	max-width:100%;
	height:auto;
	}

/* social icons */
.social {
	width:32px;
	height:32px;
	text-indent:-7777px;
	border:2px solid transparent;
	border-radius:50%;
	background: #dfdfdf;
	margin: -.25em .25em .5em .25em !important;
	}

.social:hover, #contact ul .social:hover {border:2px solid #dfdfdf;}
.social a:hover {background: transparent !important;}

.social a span {
	display:block;
	padding:.25em .25em .25em;
	}

.facebook {background: transparent url('/static/images/social/facebook.png') center center no-repeat;}
.twitter {background: transparent url('/static/images/social/twitter.png') center center no-repeat;}
.pinterest {background: transparent url('/static/images/social/pinterest.png') center center no-repeat;}
.instagram {background: transparent url('/static/images/social/instagram.png') center center no-repeat;}
.rss {background: transparent url('/static/images/social/rss.png') center center no-repeat;}

#footer #index .social {display:none;}

#contact ul .social {
	float:left;
	border:2px solid transparent;
	margin: .5em .5em .5em 0 !important;
	}

/* = header, layout
---------------------------------------------- */
#header {
	width:100%;
	position:fixed;
	top:0;
	z-index:500;
	
	background: #c00;
	background: rgba(204, 0, 0, 0.8) none repeat scroll 0 0;
	
	/*
background: #333;
	background: rgba(17, 17, 17, 0.8) none repeat scroll 0 0;
*/
	}

#logo {
	float:left;
	margin:1em 0 0 3em;
	width:80px;
	}
	
#tagline {
	position: absolute; 
	top: -7777px; 
	margin: 0; 
	}

/* nav */
#menu-icon, #nav .foot-only {display:none; /* for mobile */}

#navwrap {
	margin:0 auto;
	max-width:1200px;
	}	

#nav {
	float:right;
	margin:1.5em 0 0 0;
	}	
	
#nav li	{
	position:relative;
	float:left;
	}

#nav li a {text-decoration: none;}

#nav li a span {display:block;
	color:#fff;
	font-family: "jaf-bernina-sans-comp",sans-serif;
	font-family: "myriad-pro-condensed",sans-serif;
	font-size:120%;
	text-transform: uppercase;
	text-decoration: none; 
	/* text-shadow: 1px 1px 4px #333; */
	padding:.25em .5em .25em;
	-webkit-transition: color 0.25s linear, background 0.25s linear;
	transition: color 0.25s linear 0s, background 0.25s linear 0s;
	}

#nav li a:hover span, #nav li a span.current {
	background: #fff;
	color:#333;
	}

/* flyout subnavigation */
#nav li:hover a span {
	background: #fff;
	color:#333 !important;
	}

#nav li ul {
	display:none;
	background: #fff;
	position: absolute;
	font-size:90%;
	min-width:120px;
	/* top:2.5em; */
	right:0;
	z-index:99999;
	border:1px solid #dfdfdf;
	border-top:none;
	opacity:0;
	-webkit-transition: opacity 0.25s linear;
	transition: opacity 0.25s linear 0s;
	}

#nav li:hover ul {
	/* display:block; */
	opacity:1;
	-webkit-transition: opacity 0.25s linear;
	transition: opacity 0.25s linear 0s;
	}

.showsub {background: #fff;}
.showsub ul {display:block !important;}

#nav li ul li {
	float:none;
	}

#nav li ul li a {
	display:block;
	padding:.5em .75em;
	}	

#nav li ul li a:hover {
	
	background: #c00;
	background: rgba(204, 0, 0, 0.6) none repeat scroll 0 0;
	
	background: #c00;
	
	color:#fff;
	-webkit-transition:background 0.25s linear;
	transition:background 0.25s linear 0s;
	}	
	
	
#nav .foot_extra {display:none;}
	
#main a span {margin-top:-7777px; /* not needed for visual display but left in nav for accessibility */}

/* remove magenta background from social links */
#nav .social a span, #nav .social a:hover span {background: transparent;}

/* layout */
#container {
	position:absolute;
	z-index: 100;
	width:100%;
	margin-top:200px;
	}

#contentwrap {
	margin:0 auto;
	margin-top:-100px;
	max-width:1200px;
	}

#content {
	float:left;
	width:58%;
	margin:1em 1% 1em 2%;
	padding:0 2% 2%;
	background: #fff;
	box-shadow: 8px 8px 16px #dfdfdf;
	min-height:600px;
	}

#sidebar {
	float:left;
	width:26%;
	margin:1em 1% 1em 2%;
	}

#sidebar >	div {
	width:100%;
	padding:1% 7.6% 7.6%;
	margin-bottom:2em;
	background: #fff;
	}

#sidebar h2 {
	text-align:center;
	font-size:200%;
	/* color: #aaa; */
	}

/* subnav */
.subnav li {margin:.5em 0;}

.subnav > li a {
	color:#aaa;
	text-decoration: none;
	display:block;
	}

.subnav li a:hover {
	color:#e98d7b;
	}


.subnav li.current > a {
	color:#666;
	font-weight: bold;
	}

.subnav li ul {
	margin-left:1em;
	}	

.subnav li ul li a {
	font-size: 90%;
	font-weight: normal;
	}


/* = home
---------------------------------------------- */
#home #container {margin-top:0;}

#home #contentwrap {margin:0 auto;}

#home #content {
	float:none;
	margin:0 auto;
	padding:0;
	width:100%;
	background: transparent;
	box-shadow: none;
	}

#home #sidebar {display:none;}

/* = marquee
---------------------------------------------- */
#home #marquee, #marquee > a {height:560px;}

#marquee {
	background: #dfdfdf;
	width:100%;
	text-align: center;
	}	

#home h1 {
	height:0px;
	text-indent: -7777px;
	position:absolute;  /* makes it invisible in the display but visible in the code */
	}

#marquee > a {
	display:none;
	width:100%;
	max-width:100%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	}

#marquee a #hero {
	background: rgba(255, 255, 255, 0.8);
	max-width:36%;
	position: absolute;
	bottom:60px;
	left:12%;
	padding:.25em .5em;
	font-size:300%;
	text-align: left;
	}


#slidenav {
	margin:0 auto;
	margin-top:520px;  /* sticky header */
	z-index:4444;	
	position:absolute;
	top:0;
	right:12%;
	}
	

#slidenav ul li {
	float:left;
	}

#slidenav ul li a {
	display:block;
	text-decoration: none;
	color:#fff;
	text-indent: -7777px;
	background: #fff;
	background: rgba(255, 255, 255, 0.4);
	border-radius:50%;
	width:24px;
	height:24px;
	padding:0;
	margin:.25em;
	}

#slidenav ul li a.activeSlide {
	background: #fff;
	}


/* = home, promos
---------------------------------------------- */
#promos {
	position:relative;
	z-index:300;
	margin:0 auto;
	width:96%;
	max-width:1200px;
	}

#promos .column {
	float:left;
	width:26%;
	margin:1em 1% 1em 2%;
	background: #fff;	
	padding:0 2% 1%;
	}

#promos .column h2 {
	text-align:center;
	font-size:200%;
	}

/* temp */
#promos .column img {
	height:130px;
	}

#main-accordion {margin-bottom:1em;}


#promos .column, #sidebar > div {
	box-shadow: 4px 4px 16px #dfdfdf;
	}


/* for featured performers - home */
.featured li {
	position:relative;
	}

.featured li a {
	display:block;
	text-decoration: none;
	text-align:right;
	color:#fff;
	opacity:0.8;
	}

.featured li a:hover {
	opacity:1;
	/* color:#da4224; */
	}

.featured li a:hover img {border:4px solid #e4745e;}	

.featured li a img {
	border:4px solid #fff; 
	width:100%;
	}

.featured li a h3 {
	margin-top:-2.75em !important;
	margin-bottom:0em !important;
	line-height: normal;
	padding-right:0.25em;
	font-size:140%;
	}
	
.featured li a h4 {
	/* font-size:80%; */
	margin-top:-.5em !important;
	margin-bottom:1em !important;
	padding-right:0.5em;
	font-style: italic;
	}	

.featured li a * {
	text-shadow: 1px 1px 8px #454545;
	}	


/* = footer
---------------------------------------------- */
#footer {
	position: relative;
	z-index:900;
	margin:0 auto;
	font-size:80%;
	}

#footbox {
	height:240px;
	background: #111;
	/* background: #2e2e2e url('/static/images/ex.png') repeat scroll left top; */
	color:#fff;
	}

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

#innerfooter {
	margin:0 auto;
	padding:2em 0 1em 0;
	max-width:1200px;
	}

#innerfooter h2 {
	float:left;
	margin:0 2em;
	}	

#innerfooter h2 a img {
	max-width:100px;
	height:auto;
	}

#innerfooter h2 a span {
	display: block;
	height:0px;
	text-indent: -7777px;
	}

#innerfooter #contact {float:left;}

#innerfooter #contact h3 {
	font-size:140%;
	text-transform: capitalize;
	}

/* #innerfooter #contact * {margin:.25em;}	 */

#innerfooter #index {
	float:right;
	font-size:90%;
	width:30%;
	margin:0 1% 1em 2%;
	padding:0 2% 1%;
	}

#innerfooter #index li.top {margin-top:-6.6em;}
#innerfooter #index li.col2 {margin-left:180px;}
#innerfooter #index li a:hover {color:#aaa;}


#index li ul {display:none;}




	
/* = blog
---------------------------------------------- */
/* for render_blog tag */
.postlist li {
	position:relative;
	opacity:0.7;
	}

.postlist li:hover {
	opacity:1;
	-webkit-transition: color 0.25s linear, opacity 0.25s linear;
	transition: color 0.25s linear 0s, opacity 0.25s linear 0s;
	}	

.blogtagblock {
	position:absolute;
	top:0;
	padding:.5em 1em;
	color:#fff;
	text-shadow: 2px 2px 8px #111;
	}

.postlist li * {color:#fff;}
.postlist li:hover * {
	color:#fff;
	text-shadow: 2px 2px 8px #444;
	}

.postlist li a {
	display:block;
	width:100%;
	max-height:420px;
	overflow:hidden;
	margin-bottom:1.5em;
	}

.postlist li a img {
	width:100%;
	max-width:100%;
	height:auto;
	}

/* faq */
#q {margin-bottom:2em;}
#q li {margin-bottom:.5em;font-size:110%;}
#faq dt h2 {margin-top:1em;padding-top:1em;}


/* = events 
---------------------------------------------------------- */
.eventlist li {
	border-bottom:1px solid #dfdfdf;
	}

.eventlist li a {
	display:block;
	padding:1em 0;	
	text-decoration: none;
	}


/* = exhibitions 
---------------------------------------------------------- */
#exh #content ul li {border-bottom:1px solid #dfdfdf;}

#exh #content ul li a {
	display: block;
	padding:1em 0;	
	text-decoration: none;
	}

#exh #content ul li a img {
	max-width:30%;
	float:right;
	margin-left:1em;
	}
	
#exh #content ul li a:hover img {opacity:0.8;}

/* = map, locations
---------------------------------------------------- */
#map {
	background: #ccc;
	width:100%;
	min-height: 400px; 
	margin-top:-1.5em;
	}

#map img {max-width:none; /* needed to show map controls */}
	
.infowindow {
	width:200px;
	height:auto;
	text-align:center;
	}
	
#locations {
	float:left;
	width:100%;
	background: #efefef;
	font-weight: 300;
	}

#locations li {
	float:left;
	width:50%;
	}

#locations li a {
	display:block;
	padding:.25em 1em;
	text-align: center;
	text-decoration: none;
	font-size:200%;
	border:1px solid #dfdfdf;
	}

#locations li a:hover {
	text-decoration: underline;
	background: #fafafa;
	}

#directions #content {
	width:92%;
	max-width:1200px;	
	}
	
#directions #sidebar {display:none;}	

#directions h1 {
	text-indent: -7777px;
	height:1px;
	}


/* = enews box
---------------------------------------------------- */
#enews {
	/* same declarations as #index, above */
	float:right;
	font-size:90%;
	width:30%;
	margin:-6em 1% 1em 2%;
	padding:0 2% 1%;
	
	/* temp */
	margin-top:0;
	}
	
#enews input {
	float:left;
	margin-right:6px;
	}	

#enews .signup {
	width:60%;
	padding:.5em;
	}	

#enews button {margin-top:0 !important;}


/* = collages
---------------------------------------------------- */
.collage {
	width:70%;
	margin:0 auto !important;
	}

.collage li {
	float:left;
	width:24%;
	background: #777;
	}

.collage li a {opacity:0.7;}

.collage li a:hover {
	opacity:1;
	}

.collage li a img {
	float:left;
	margin-bottom:0 !important;
	padding-bottom:0 !important;
	}


/* adjustments */

.tickets .buy {text-align: center;}
.tickets button {font-size:80%;}

#footbox, #marquee #mist {margin-top:-2px; /* gets rid of white line below waves on ipads */}


/* ----- =  media query ----- tablet ---------------------------------------------- */
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

#nav {width:640px;}
#nav li a span {font-size:100%;}

#nav .social {
	position:absolute;
	top:4em;
	right:1.5em;
	}
#nav .facebook {right:3.5em;}


/* ----- =  media query ----- phone/phablet - portrait ---------------------------- */
/* -------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

body {font-size:120%;}

#contentwrap {margin-top:-140px;}

#logo {
	position:relative;
	left:0;
	width:66px;
	margin:.5em 0 0 1em;
	float:none;
	}


#navwrap {
	position:absolute;
	left:0;
	margin-top:0;
	width:100%;
	height:60px;
	text-align:center;
	background: #c00;
	background: rgba(204, 0, 0, 0.8);
	}
	
#menu-icon {
	display:block;
	position: fixed;
	z-index:5000;
	top:0px;
	right:0;
	width:60px;
	height:60px;
	
	/* background: #c00; */
	/* background: rgba(204, 0, 0, 0.8) url('/static/images/menu-icon.png') center center no-repeat; */
	background: transparent url('/static/images/menu-icon.png') center center no-repeat;
	
	}
	
#nav {
	float:none;
	width:100%;
	margin:-.5em 0 0 0 !important;
	padding-top:0 !important;
	
	


	}

#nav li {
	float:none;
	width:100%;
	margin:0;
	position: relative;
	text-align:center;
	}

#nav li a {
	display:block;
	/* background: #aaa; */
	background: #333;
	background: rgba(17, 17, 17, 0.8) none repeat scroll 0 0;
	border-bottom:1px solid #777;
	margin:0;
	}

#main a span {margin-top:0; /* show the 'home' link */}

#nav li a span {
	font-size:110%;
	padding:.5em 1em;
	}

#nav li a:hover, #nav li a:hover span, #nav li a span.current  {
	color:#333;
	background: #fff;
	background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
	}

#nav .social {
	position: relative;
	width:100%;
	top:auto;
	height:auto;
	right:0;
	border:none;
	border-radius:0;
	margin:0 !important;
	}

.social:hover, #contact ul .social:hover {
	border:none;
	box-shadow:none;
	}
	
/*
#nav li.facebook a, #nav li.facebook a:hover  {background: #0D6EAC url('/static/images/social/facebook.png') center center no-repeat !important;border-bottom:1px solid #dfdfdf;}
#nav .rss a, #nav li.rss a:hover  {background: #D27514 url('/static/images/social/rss.png') center center no-repeat !important;border-bottom:1px solid #dfdfdf;}
*/

	
#nav {
	/* 
	display will be toggled by tapping #menu-icon  
	has to be placed here to override previous style; not sure which one
	*/
	display:none; 
	}


.showsub ul {display:none !important;}


#content {
	background: #fff;
	background: -webkit-gradient(linear, 0% 0%, 0 60, from(#ccc), to(#fff));
	}

#content, 
#sidebar,
#footbox,
#promos .column {
	width:88%;
	float:none;
	margin:0 auto;
	padding:2% 6%;
	}

#content h1 {font-size:2em;}
#content h2, #sidebar h2 {font-size:120%;}
#promos .column h2 {font-size:160%;}

#sidebar > div {
	width:92%;
	margin:1em 0 .5em;
	padding:4%;
	}
.nugget, #index {display: none;}
	
#innerfooter {text-align: center;}
#innerfooter h2 {float:none;}
#contact {width:100%;}
#innerfooter #contact h3 {font-size:100%;}

#innerfooter #contact ul {
	width:140px;
	margin:0 auto;
	padding-left:.4em;	
	}

#innerfooter #contact ul li {
	float:none;
	display: inline-block;
	margin:.12em;
	border:none;
	}

#footbox {
	height:720px;
	}

#enews {
	clear:both;
	float:none;
	width:96%;
	margin:1em 1%;
	padding:1em 0 0 0;
	text-align:center;
	}

#enews .signup {
	padding:.5em 0;
	text-align:center;
	}

#enews input, #enews button {
	float:none;
	padding:.5em;
	width:100% !important;
	}

	
	
/* = home, marquee, promos
---------------------------------------------- */

#marquee {display:none;}

/*
#marquee h1 {
	padding-top:6em;
	margin-top:0;
	font-size:240%;
	margin-bottom:0;
	}

#marquee a {
	margin-bottom:3.5em;
	}


#marquee a #hero {	
	bottom:150px;
	right:12%;
	margin:auto;
	max-width:100%;
	font-size:120%;
	}
*/


#mobile_marquee {
	display:block;
	height:480px;
	margin-bottom:3em;
	padding:0 !important;
	width:100%;
	background: #333 url('/static/images/marquee/welcome-mobile.jpg') center center no-repeat;
	}

#slidenav {display:none;}

#promos .column {margin-bottom:2em;}


.postlist h2 {
	/* font-size: 100% !important; */
	font-weight: bold;
	text-shadow: 4px 4px 16px #333;
	}

#innerfooter #contact {
	margin-top:1em;
	}

#footbox, #marquee #mist {margin-top:0px; /* gets rid of white line below waves on ipads */}
	
}