/* CSS for the Billboard Art project */
/* To quickly find styled sections use ' =NAV'  in find. Elements are styled in the following order:
RESET
GENERAL
HEADINGS
LISTS
LINKS
LAYOUT (styling ids and classes)
HEADER
NAV
SEARCH
ID (styling ids and classes)
FOOTER
404
*/


/* =RESET incorporating Jan 29, 1011 vers. of Eric Meyer http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   and Paul Irish https://github.com/paulirish/html5-boilerplate/blob/master/css/style.css#L52
 */

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* PI: always force a scrollbar in non-IE: 	overflow-y: scroll; */
html {
	background: transparent;
	border: 0;
	margin: 0;
	overflow-y: scroll;
	padding: 0;
	outline: 0;
	vertical-align: baseline;
}
	

body {
	background-color: #000;
	border: 0;
	color: #E2E2E2;		/* grey */
    font-family: Helvetica, Arial, sans-serif;   /* set to Arial in IE */
    font-size: 100%;			/* most browsers are set at 16px. Allows most flexible resizing in IE7 and earlier  */
    line-height: 1;			/* reset */
    margin: 0;
    padding: 0;
    position: relative;
    vertical-align: baseline;
    width: 100%;
    min-width: 536px;  
}

/* =GENERAL STYLES */
	
abbr[title], dfn[title] {
    border-bottom: 1px #aaa dotted;
    font-variant: small-caps;
    letter-spacing: 0.07em;
    cursor: help;
 	 }
 	 
aside {
font-size: 0.875em;
  	line-height: 1.7; 
  	margin: 0; 
  	padding: 0.5em 0;
  	}


blockquote {
	quotes: none;
	font-size: 0.875em;
  	line-height: 1.7; 
  	margin: 0; 
  	padding: 0 2em 1em 2em;
}


blockquote:before, q:before {
	content: '"';
	}
	
blockquote:after, q:after {
	content: '"';
}


del {
	text-decoration: line-through;
}

	
hr { display:block; height:1px; border:0; border-top:1px solid #BEBEBE; margin: 2em 0 1em 0; padding: 0; }

iframe {
	padding: 1em 0;
	}


/* remember to highlight inserts somehow! */
ins {
	background-color: #FF9; 
	color: #000;
	text-decoration: none;
}


mark { 
	background-color: #FF9; 
	color:#000; 
	font-style:italic; 
	font-weight:bold; 
	}
	
p { 
	font-size: 0.875em;
  	line-height: 1.7; 
  	margin: 0; 
  	padding: 0.5em 0;
  	}
	
/* normalize monospace sizing
* en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { 
	font-family: monospace, sans-serif; 
	}

	
strong { 
	font-style: italic;
  	font-weight: normal; 
  	}
  	
small {
	color: #C7E3F1;			/* pale blue */
	font-size: 0.750em;
	}
	
/* set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }



/*TABLES  */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td { vertical-align: top; }

	
/* =HEADINGS  */

h1, h2, h3, h4, h5, h6 {
    font-family: "Futura Light", Futura, Arial, sans-serif;	
    line-height: 1.7;
    margin: 0;
  }

h1 { 
	font-size: 1.25em; /* 20px */
	padding: 0;
	} 
	
h2 { 
	font-size: 1.125em;  	/* 18px */
	padding: 1.5em 0 0 0;
	} 
	
h3 { 
	font-size: 1em;  	/* 16px */
	padding: 1.5em 0 0 0;
	}
	
h4, h5, h6 { 
	font-size: 0.875em;		/* 14px */
	padding: 0.250em 0 0 0;
	}                     

  	
	
/* LISTS */
ol, ul {
	list-style: none;
	font-size: 0.875em;
  	line-height: 1.7; 
  	margin: 0; 
  	/* max-width: 40em; */
  	padding: 0.5em 0;
  	}
  	
ol {
	list-style-type: decimal;
	list-style-position:  inside;
	}
	
li {
	line-height: 1.7;
	padding: 0;
	}
	

/* Use with em to keep fonts from shrinking in nested lists */
li li, li p, li h2, li h3, li h4, li a {
	font-size: 1em;
	}
	


/* =LINKS  The link order is important. */

a {
	background-color: transparent;
	font-size: inherit;
	text-decoration: underline;
	}
	
a:link { 
	color: #FFF; 
	}
	
a:visited  {
	color: #BEBEBE; 
	}
	
/* Focus used when tabbing. Must be highly visible. */

a:focus {  
	color: #FCD116;   /* sign yellow */
	text-decoration: none;
	}
	
a:hover { 
	color: #FCD116;  
	}
	
/* IE7 and older uses active instead of focus */
	
a:active { 
	color: #FCD116; 
	}
	
/* =LAYOUT */
div.bg {
 	background-position: top;
	background-repeat: no-repeat;
	-khtml-background-size: 100% auto;   /* Konqueror */ 
	-moz-background-size: 100% auto;    /* Firefox pre-v.4 for non-intel Macs */ 
    -o-background-size: 100% auto;       /* Opera pre-v.10 */       
    -webkit-background-size: 100% auto;  /* Safari pre-v.3 */   
    background-size: 100% auto;          /* all CSS3 enabled browsers */
    background-attachment: fixed;
	overflow: hidden;  /* needed to contain floats */
	width: 100%;   /* triggers 'hasLayout' in older IE browsers */ 
	}
	
div#home {
	background-image: url("../images/derek_cote_crossing2.jpg");
}

div#cities {
	background-image: url("../images/tschampel_world.jpg");
}

div#salem {
	background-image: url("../images/Salem_billboard.jpg");
}

div#detroit {
	background-image: url("../images/Detroit_billboard.jpg");
}

div#albany {
	background-image: url("../images/Albany_billboard.jpg");
}

div#quincy {
	background-image: url("../images/Quincy_billboard.jpg");
}

div#atlanta {
	background-image: url("../images/Atlanta_billboard.jpg");
}

div#richmond2012 {
	background-image: url("../images/Richmond_2012.jpg");
}

div#corona {
	background-image: url("../images/corona_billboard.jpg");
}

div#batonrouge {
	background-image: url("../images/baton_rouge_billboard.jpg");
}

div#reading {
	background-image: url("../images/conformist_sky.jpg");
}

div#neworleans {
	background-image: url("../images/new_orleans_billboard.jpg");
}

div#chicago {
	background-image: url("../images/ChicagoBillboardProject_ClaireAccardo.jpg");
}

div#duluth {
	background-image: url("../images/Duluth_Blackman.jpg");
}

div#savannah {
	background-image: url("../images/Savannah_Hodgson_lg.jpg");
}

div#nashville {
	background-image: url("../images/nashville_billboard.jpg");
}

div#richmond {
	background-image: url("../images/YetAnotherRoadsideAttraction.jpg");
}

div#artists {
	background-image: url("../images/monica_carrier.jpg");
}

div#requirements {
	background-image: url("../images/requirements.jpg");
}

div#about {
	background-image: url("../images/tschampel_red.jpg");
}

div#press {
	background-image: url("../images/balloon_liberation_front.jpg");
}

div#privacy {
	background-image: url("../images/day_for_night_lg.jpg");
}

div#error {
	background-image: url("../images/stephen_decker_around_dont_turn.jpg");
}

	
	
/* =HEADER elements styling for IDs and Classes */

header {
	background-color: rgba(0,0,0,0.7);
	color: #FFF;
    margin: 16px 0 0 0;
    overflow: hidden;    /* needed to clear floats */
    padding: 8px 5%; 
    /* position: absolute; */
    width: 99%; /* triggers hasLayout in IE  */
 	}
 	
header h1 {
	float: left;
	margin: 0;
	padding: 0;
	max-width: 40%;   /* ------- */
	min-width: 300px;
	}

header h1.current {				/* the home page has no link to itself */
	color: #FCD116; 			/* sign yellow */ 
	display: block;
	letter-spacing: 2px;
	margin: 0;
	padding: 0;
	}

header h1 a {					/* link back to homepage */
	display: block;
	letter-spacing: 2px;
	margin: 0;
	padding: 0;
	}
 	
header h1 a:link {
	color: #FFF;
	text-decoration: none;
  	}
  	
  	
header h1  a:visited  {
	color: #FFF;
 	text-decoration: none;
	}
	
header h1 a:focus { 
	color: #FCD116;   /* sign yellow */ 
	text-decoration: none;
	}
	
header h1 a:hover { 
	color: #FCD116;  
	text-decoration: underline;
	}
	
header h1 a:active { 
	color: #FCD116; 
	text-decoration: underline;
	}

	
/* =NAV Main navigation */

#mainnav {
	float: right;
	font-family: "Futura Light", Futura, Arial, sans-serif;
	margin: 0;
	padding: 4px 5% 0 0;
	width: 516px;		/* aligns with content below */
	}
	
#mainnav ol:first-child {
	float: left;
	list-style-type: none;
	margin-left: 0;
	padding: 0;
	}
	
#mainnav ol {
	float: left;
	list-style-type: none;
	margin-left: 4em;
	padding: 0;  /* 0  4em 0 16px */
	}
	
#mainnav li {
	margin: 0;
	padding: 0 0 0 1.25em;
	}
	
/* HIGHLIGHT all current/active links */
#mainnav li.current  {
	color: #FCD116;  /* sign yellow */
	background-image:  url(../images/bullet.gif);
	background-repeat: no-repeat;
	background-position: 0 40%;
	}
	
#mainnav a.current {
	color: #FCD116;  /* sign yellow */
	list-style-type: none;
	background-image:  none;
	}

	
/* Navigation links. Link order is important! */	
#mainnav a {
	background-color: transparent;
	color: #E1E1E1;
	display: block;					/* block makes a larger area clickable */
	/* font-size: 100%; */
	margin: 0;
	padding: 0;
	}
	
#mainnav a:link, #mainnav a:visited {  
	text-decoration: none; 
	}
	
#mainnav a:focus {
	color: #FCD116;   /* sign yellow */
	text-decoration: underline; 
	}
	
#mainnav a:hover { 
	color: #FCD116;
	text-decoration: underline; 
	}
		
#mainnav a:active { 
	color: #FCD116;
	text-decoration: underline; 
	}

	

/* =ID styling ids and classes */

#content, #main {
	float: right;
	margin: 0 5% 10px 0;
	min-height: 700px;
	padding: 0;
	max-width: 474px;
	min-width: 300px;    /* ---------------- */
	}

	
h1#hometitle {
	color: #FCD116;
	padding-bottom: 0;
	}

.info {
	background-color: rgba(0,0,0,0.8);
	color: #DADADA;
	margin: 1em 0 0 0;
	padding: 2em; 
	}
	
.info h1, .info h2, .info h3, .info h4 {
	color: #FCD116;
	padding: 1em 0 0 0;
	}
	
.info ol {
	list-style-position: outside;
	padding: 0 0 1em 1.5em;
	}
	
.info ol li {
	padding-bottom: 0.5em;
	}
	
	
	
ol#showtimes, ol.non-ordered   {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

	
#showtimes li {
	line-height: 1.3;
	margin: 0;
	padding: 0.5em 0;
	}
	
#showtimes h2 a:link {
	color: #FCD116;
	padding: 1em 0 0 0;
	}
	
span.small {
	font-size: 0.750em;
	font-style: italic;
	}
	
#more {
	float: right;
	margin: 0 0 0 24px;
	}
	
#more:after {
	content: " …";
	padding: 0 8px 0 0;
	}
	
	
#breadcrumb ol {
	display: inline;
	list-style-type: none;
	margin-bottom: 1em;
	padding: 0;
	}
	
#breadcrumb li {
	display: inline;
	font-size: 1em;
	}
	
#breadcrumb a {
	text-decoration: underline;
	}
	
#breadcrumb a.current {
	color: #FCD116;
	text-decoration: none;
	}
	
	
#breadcrumb ol li:after {
	content: "\00BB \0020";
	}
		
#breadcrumb ol li:last-child:after {
	content: "\0020";   /* encoded space */
	}
	
.notes p {
	font-size: 0.750em;
	margin: 1em 0;
	padding: 1em;
	}

#social	 {
	background-color: rgba(0,0,0,0.8);
	margin: 1em 0;
	padding: 2em;
	}
	
span.interview {
	font-weight: bold;
	}
	
/* Apply and About  Pages with two floated columns */
#wide {
	background-color: transparent;
	color: #FFF;
    margin: 0 5% 10px 5%;
    overflow: hidden;    /* needed to clear floats */
    padding: 0; 
    /* position: absolute; */
    width: 99%; /* triggers hasLayout in IE  */
	}
	
.right {
	background-color: rgba(0,0,0,0.8);
	color: #DADADA;
	float: right;
	height: 100%;
	margin: 1em 5% 0 0;  
	padding: 2em; 
	max-width: 474px;         /* with top nav */
	min-width: 300px;
	}
	 
	
.left {
	background-color: rgba(0,0,0,0.8);
	color: #DADADA;
	float: left;
	margin: 1em 1px 0 0;
	padding: 2em; 
	width: 474px;
       
	}
	
.left h1, .left h2, .left h3, .right h1, .right h2 {
	color: #FCD116;
	padding: 0.5em 0 0 0;
					/* width: 90%; */
	}
	
.right h2.expand a {
	color: #FCD116;
	font-size: 1.125em;
	padding: 0.5em 0 0 4px;
			/* width: 90%; */
	}
	
.right h3 {
	color: #FCD116;
	font-size: 1em;
	padding: 1.25em 0 0 0;
			/* width: 90%; */
	}
	
.biopix {
	float: left;
	padding: 0;
	margin: 5px 12px 4px 0;
	}
	
	
h2#space {
	padding-top: 1.5em;
	}

ol.numbered {
	list-style-position: outside;
	padding: 0 0 1em 2em;
	}	
.numbered li {
	list-style-type: decimal;
	line-height: 1.3;
	}

.small-caps {
	font-variant: small-caps;
	}

/* =FOOTER  Must have fixed positioning to prevent a horizontal scrollbar. Dropped the negative z-index that allowed the artist list to overlap the footer. It interferes with the :hover pseudo-class and only allows links to be accessed by tabbing. */

/* from fixed positioning 	bottom: 0;
	right: 0;
 	left: 0;
	position: fixed;
*/

footer {
	clear: both;
	background-color: rgba(0,0,0,0.8);
	color: #D1D1D1;
    border: none;
    margin: 24px 0 8px 0;
    /*  overflow: hidden;  needed to for floated elements */
    padding: 8px 5% 2px 5%;
    width: 99%;
  }
  
footer p {
    font-size: 0.750em;
	margin: 0;
	padding: 0;
	}
		
address {
	font-size: 0.750em;
 	font-style: normal;
 	margin: 0;
 	padding: 0;
 	}

#top {
	float: right;
	width: 15em;
	margin: 0 5% 0 0;
	padding: 0;
	}
 


/* CSS for collapsing divs using jQuery on artists lists */
div.collapse {
	margin-top: 0;
	width: 100%;
	}
	
.collapse p {
	padding: 0.875em 10px 1em 10px; 
	}
	
.collapse ol, .collapse ul {
	list-style-type: none;
	padding: 0.875em 10px 1em 10px; 
	}
	
#switch, .switch {
	margin-bottom: 5px; 
	text-align: right;
	}

/* --- jQuery Headings  --- */

.expand {
	margin-bottom: 1px;
	} 	

/* --- jQuery Links  --- */

.expand a {
	border: 1px solid #000;
	color: #FCD116;
	display: block;
	padding: 5px 10px 3px 10px;
}

.expand a:link, .expand a:visited {
	border: 1px solid transparent;
	background-image: url(../images/arrow-down.gif);
	background-repeat: no-repeat;
	background-position: 98% 50%;
}

.expand a:hover, .expand a:focus {
	background-color: transparent;
	border: 1px solid #FCD116;
	color: #FCD116;
}

.expand a:active {
	background-color: transparent; 
	border-style: solid;
	border-width: 1px;
	color: #FCD116;
	}
	
.expand a.open:link, .expand a.open:visited {
	background: transparent url(../images/arrow-up.gif) no-repeat 98% 50%;  /* yellow  */
	border-style: solid;
	border-width: 1px;
	color: #FCD116;
}

/* call for artist requirements 
	
.right .expand {
	font-size: 0.875em;
	font-weight: normal;
}

.right .expand a {
	border-width: 1px;
	color: #FFF;
	display: block;
	padding: 5px 10px 3px 10px;
}

.right .expand a:link, .right .expand a:visited {
	border-width: 1px;
	background-image: url(../images/arrow-down.gif);
	background-repeat: no-repeat;
	background-position: 98% 50%;
}

.right .expand a:hover, .right .expand a:focus {
	background-color: transparent;
	border-style: solid;
	border-width: 1px;
	color: #FCD116;
}

.right .expand a:active {
	background-color: transparent; 
	border-style: solid;
	border-width: 1px;
	color: #FCD116;
	}
	
.right .expand a.open:link, .right .expand a.open:visited {
	background: transparent url(../images/arrow-up.gif) no-repeat 98% 50%; 
	border-style: solid;
	border-width: 1px;
	color: #FFF;
}
*/

/* =SEARCH Google search css */
div.search {
	background-color: rgba(0,0,0,.8); 
	color: #FFFFFA;
	float: right;
	margin: 0;
	overflow: visible;    /* needed to clear floats */
    padding: 0;  /* was 2px 5% */
    width: 474px;
	}
div#cse {
	background-color: transparent;  
	margin: 0;
	padding: 0;
	width: 100%;
	}
	
.gsc-control-cse {
    font-family: Arial, sans-serif;
    border-color: #DADADA;
    background-color: transparent;
  }
  input.gsc-input {
    border-color: #666666;
  }
  input.gsc-search-button {
  	color: #FFFFFA;
    border-color: #333333;
    background-color: #999999;
  }
  .gsc-tabHeader.gsc-tabhInactive {
    border-color: #777777;
    background-color: transparent;
  }
  .gsc-tabHeader.gsc-tabhActive {
    border-color: #333333;
    background-color: transparent;
  }
  .gsc-tabsArea {
    border-color: #333333;
  }
  .gsc-webResult.gsc-result {
    border-color: #FFFFFF;
    background-color: transparent;
    color: #FFFFFA;
  }
  .gsc-webResult.gsc-result:hover {
    border-color: #000000;
    background-color: transparent;
  }
  .gs-webResult.gs-result a.gs-title:link,
  .gs-webResult.gs-result a.gs-title:link b {
    color: #FFFFFF;
  }
  .gs-webResult.gs-result a.gs-title:visited,
  .gs-webResult.gs-result a.gs-title:visited b {
    color: #DADADA;
  }
  .gs-webResult.gs-result a.gs-title:hover,
  .gs-webResult.gs-result a.gs-title:hover b {
    color: #FCD116;
  }
  .gs-webResult.gs-result a.gs-title:active,
  .gs-webResult.gs-result a.gs-title:active b {
    color: #FCD116;
  }
  .gsc-cursor-page {
    color: #FCD116;
  }
  a.gsc-trailing-more-results:link {
    color: #FCD116;
  }
  .gs-webResult .gs-snippet {
    color: #DADADA;
    line-height: 1.5;
  }
  .gs-webResult div.gs-visibleUrl {
    color: #000000;
  }
  .gs-webResult div.gs-visibleUrl-short {
    color: #000000;
  }
  .gs-webResult div.gs-visibleUrl-short {
    display: none;
  }
  .gs-webResult div.gs-visibleUrl-long {
    display: block;
  }
  .gsc-cursor-box {
    border-color: #FFFFFF;
  }
  .gsc-results .gsc-cursor-page {
    border-color: #777777;
    background-color: transparent;
  }
  .gsc-results .gsc-cursor-page.gsc-cursor-current-page {
    border-color: #333333;
    background-color: transparent;
  }
  .gs-promotion {
    border-color: #CCCCCC;
    background-color: transparent;
  }
  .gs-promotion a.gs-title:link,
  .gs-promotion a.gs-title:link *,
  .gs-promotion .gs-snippet a:link {
    color: #6666cc;
  }
  .gs-promotion a.gs-title:visited,
  .gs-promotion a.gs-title:visited *,
  .gs-promotion .gs-snippet a:visited {
    color: #9999ff;
  }
  .gs-promotion a.gs-title:hover,
  .gs-promotion a.gs-title:hover *,
  .gs-promotion .gs-snippet a:hover {
    color: #6666cc;
  }
  .gs-promotion a.gs-title:active,
  .gs-promotion a.gs-title:active *,
  .gs-promotion .gs-snippet a:active {
    color: #6666cc;
  }
  .gs-promotion .gs-snippet,
  .gs-promotion .gs-title .gs-promotion-title-right,
  .gs-promotion .gs-title .gs-promotion-title-right *  {
    color: #333333;
  }
  .gs-promotion .gs-visibleUrl,
  .gs-promotion .gs-visibleUrl-short {
    color: #336666;
  }





/* KEEP THIS AT BOTTOM OF STYLE SHEET
Override instructions for mobile devices and printing */

  /* For general iPad layouts 
@media only screen and (device-width: 768px) {

  	.left {
	background-color: rgba(0,0,0,0.8);
	color: #DADADA;
	float: right;
	width: 474px;       
	margin: 1em 5% 0 0;
	padding: 2em; 
	}
}
*/

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ 
@media screen and (max-device-width: 480px) {
		
	#content, #main {
		float: left;
		margin: 0 0 10px 0;
		min-height: 700px;
		padding: 0;
		width: 99%;
	}
		
	.right {
		background-color: rgba(0,0,0,0.8);
		color: #DADADA;
		float: left;
		margin: 1em 0 0 0;  
		padding: 2em; 
		width: 100%;   
	}
	.left {
		background-color: rgba(0,0,0,0.8);
		color: #DADADA;
		float: left;
		width: 100%;       
		margin: 1em 0 0 0;
		padding: 1em; 
	}
}
*/

/* uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
j.mp/textsizeadjust
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } 
*/


/*
* print styles
* inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } 
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; } 
  a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  /* don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}