/*  
Site Name: Four Quartets
Site URI: http://www.figures.org/fq
Description: John Farrell's performance of T.S. Eliot's Four Quartets
Version: 1.0	
Author: jmbroekman	
Author URI: http://www.jmbroekman.com

*/

/*  =COLORS
---------------------------------------------------
	Body Background:#fff
	Main Text: rgb (102,, 102, 102); #666666
	Old Links: #445s5d
	New Links: #9c5e1f
	Selected/hover:#788188
	footer rule:#5f4c81
	top bar: #717a82
	image shadow:  #4a4a25; if this is too green, go back to #59595b
	accent colors: #9c5e1f; #5f4c81
	
*/


/*using html 5; to make elements block rather than in-line*/

header, footer, section, aside, nav, article, hgroup, details, figure, figcaption {display: block;}

/*global elements */

/*  =RESET
---------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	padding: 0;
	margin: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset,img { 
	border: 0;
	}
ol,ul {
	list-style: none;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	
	}
abbr,acronym { border: 0;
	}
figure {margin:0; padding:0;}	
	
/*  =GLOBAL ELEMENTS
-------------------------------------------------------------- */
body {
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 0.9em;
	line-height:170%;
	color:#666;

}

a:link, a:visited {
	color: #9c5e1f;
	text-decoration:none;
}



a:hover, a:active {
	color:#788188; /*original: #235169;*/
	text-decoration: none;
}

h1 {
	text-indent:-99999px; display:none;
}

h2, h3, h4 { font-size:110%; margin-bottom:4px; color:#9c5e1f;}

h2{ font-size:140%; margin-bottom:2%; font-variant:small-caps;  margin-top:2%;  font-family:'Open Sans', sans-serif; font-weight:600;  }
aside h2 {font-weight:bold; }

/*PANEL HEADERS -  to look different than the rest */
h3 {margin-top:2%;  font-family:'Asul', sans-serif; font-size:150%; font-weight:bold; color: #756D32; font-variant:small-caps;
 }

h4 {font-size:100%; font-weight:600; color:#756d32;} /*THESE ARE IN THE SIDEBAR */

article h4 {font-variant:normal; margin-top:18px; font-weight:600; }/*use this for sub-headers*/

#create article h4, #about article h4, #artists article h4 { font-weight:400; font-family:'Open Sans', sans-serif; color:#9c5e1f; clear:both; font-size:110%;}

ul {
	list-style-type: none ;
}


p{ line-height:135%; margin-bottom:12px; }

article {}
article h4 a:hover, article h4 a:active {color:#5E825C;}

blockquote { margin:15px 25px 5px 15px; line-height:120%; font-style:italic;}
.author, .citation {text-align:right; margin-top:5px; margin-right:45px; margin-bottom:0; font-size:85%;}
blockquote.center {margin-left:129px;}

article blocquote {margin: 0;}

.normal {font-style:normal;}

.clearfix {clear:both;}

address {font-style:normal;
	line-height:130%;
	padding:0 0 5%;
	font-size:120%;
	}

/* end global */

html {
	background-image:url(../assets/large-tile.jpg);
	background-position:top left;
	background-repeat:repeat;
}


header {
   background-image: url(../assets/header-bkg.png); 
    background-position:top left;
    background-repeat: no-repeat;
	margin: 0 auto;
    text-align: center;
    max-width: 786px;
	width:100%;
	height:208px;
}

blockquote {text-align:left;}

#main {
	background-image: url(../assets/nav-bkg.png);
    background-position:top left;
    background-repeat: no-repeat;
	height:30px;
	max-width:786px;
	width:100%;
	font-family:'Open Sans', sans-serif;
}

section {
    max-width: 510px;
    overflow: auto;
  /*  padding-left: 1%;
    padding-top: 30px;*/
    position: relative;
    width: 100%;
	padding-bottom:10%;
   
}

.subhead {background-color:#fff; margin:0; padding:0; clear:both; position:relative;}


#about article p {clear:both;}

#donate {
position: fixed;
right: 50%;
margin-right: -370px;
padding: 15px;
width: 200px;
max-width: 225px;
overflow: hidden;
text-align: center;
background-color: rgb(255, 255, 255);
border-radius: 8px;
border: #B5AFC5 thin solid;
margin-top:2%;
}

.donate {
	width:52%;
}

.subscribe {
	/* margin-left:15%; */
	max-width:85%; /* original: 85%; */
	align: left;
}

.subscribe h4 {
	margin-bottom:24px;
	color:#9c5e1f;
}

#wrapper {
	max-width: 786px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
	width:100%;
}

#homelink {
	background-color: transparent;
	height: 129px;
	left: 15px;
	position: absolute;
	top: 42px;
	width: 339px;
	z-index: 1;
}


.donor {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

img {
	 -moz-box-shadow: 2px 2px 5px rgba(102, 102, 51, 0.4); /*original 3px 3px 5px 3px rgba(102, 102, 51, 0.3) */
	 -webkit-box-shadow:  2px 2px 5px rgba(102, 102, 51, 0.4);
        box-shadow:  2px 2px 5px rgba(102, 102, 51, 0.4);
		margin: 10px 20px 20px 10px;
}

img.inline {
	 -moz-box-shadow: 0px 0px 0px rgba(102, 102, 51, 0.4);
	 -webkit-box-shadow:  0px 0px 0px rgba(102, 102, 51, 0.4);
        box-shadow:  0px 0px 0px rgba(102, 102, 51, 0.4);
	margin: 0px 0px 0px 0px;
}

article img {margin-left:129px; margin-top:5%;}

article img.large {margin:0;} /*note: width should be c.a. 477px */
#perform figure.large {float:none;}

#outer img {margin:0; box-shadow: 0 0 0;}

#perform figure, #artists figure, #create figure, #subscribe figure {float:left; margin:0; padding:1%; }

.left {float:left; margin:0 8% 0 0; padding:1%;}

.left img {margin:0;}

#perform figure img, #artists figure img, #create figure img { margin: 5px 20px 0 0; }

#create figure img {margin-top:0;}

figcaption { font-size:75%; padding:1%; margin-top:-5px;}


nav { 
    height: auto;
    margin-right: 12px;
    padding-top: 6px;
    position: relative;
    text-align: left;
    }

nav ul {
	clear: both;
	margin-left:29%;
	display:inline-table;
	position:relative;
	margin-top:-3px;
	}

nav ul li{
    height: 25px;
	float:left;
	display:list-item;
	}
	
nav ul li a {
	display:block;
}

nav ul ul {
	position:absolute;
	display:none;
	top:60%;
	background-color:#D7D2DF;
	width:95%;
}

nav ul ul li {
	position:relative;
	float:none;
	padding:1%;
}

nav a:link, nav a:visited {
	text-decoration: none;
	}

nav>ul>li {margin-right:10px; font-weight:bold; color:#788188;}

li.select {color:#9c5e1f;}

nav ul li:hover  ul  { 

	z-index:99999;
	display:list-item !important;
	position:absolute;
	margin-top:5px;
	margin-left:-10px;
	}
 
nav ul li:hover  ul li {
	float:none;
	}

/*subnavigation
nav ul li ul {
	display:none;
	visibility:hidden;
} */
/*MAIN CONTENT */


#content {
    max-width: 786px;
    overflow: auto;
    position: relative;
    top: 0;
	width:100%;
	background-image: url(../assets/content-bkg.png);
    background-position:top left;
    background-repeat:repeat-y;
	clear:both;
}


/*ORIGINAL - was working on all pages but create  
#content-home {
	padding-top: 1%;
	margin-right: 45px; /* this needs to be 125px for the home page picture 
	float: right;
	position: relative;
	overflow: auto;
	max-width: 626px;
	}
*/
/* NEW TO MAKE CREATE WORK -  */

#content-home {
	padding-top:1%;
	margin-right:1%;
	float:right;
	position:relative;
	overflow:auto;
	width:75%;
	max-width:540px;
}
	

#content-subscribe {
	padding-top: 1%;
	margin-right:1%;
	float: right;
	position: relative;
	overflow: auto;
	width: 75%;
	max-width: 540px;
	
}

#content-subscribe h3 {
	margin-bottom:5%;
}

.form {
	margin-left:15%;
	margin-top:5%;
}
#content-perform {
	padding-top: 340px;}
	

article {
	overflow: auto;
	position: relative;
	max-width: 608px;
	width:100%;
}

article h2, article p, article ul { line-height:140%;}
article ul li { color:#666; font-size:100%; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; margin-left:5%;}

#create article p {margin-top: 12px;}

.accolades {font-style:normal;}

/*PHOTO PAGE */
#portfolio-thumbs { overflow:hidden;
}

#portfolio-thumbs img {
	margin:0;
}

img.lb-image {
	margin:0;
}

#portfolio-thumbs ul {
overflow: hidden;
position: relative;
width: 99%;
}

#portfolio-thumbs ul li {
display: inline-block;
width: 30%;
line-height: 0;
float: left;
padding: 0 12px 12px 0;
margin-left:0;
}

#portfolio-thumbs ul li a {
line-height: 0;
}


.fullsize {width:395px; margin-right:48px;}

/*SIDEBAR */
aside {
	max-width: 160px;
	float: left;
	position: relative;
	margin-left: 4%;
	font-family:'Open Sans', sans-serif;
	margin-top:1.25%;
	line-height:130%;
	width: 24%;
	margin-right:2.5%;
	font-size:90%;
	padding-bottom:4%;
}

aside h2, aside h3 {
	margin-bottom:18px;
	font-size:140%; 
	font-weight:bold
}
aside p, aside blockquote {
	font-size:75%;
	margin-top:36px;
	line-height:140%;
}


aside ul {
	margin-bottom: 15%;}
	
aside ul.extranav {
	padding-top:18px;
	border-top:#44525d thin dotted;
}

aside ul li {
	margin-bottom:4%;
}

aside li.subnav {
	margin-top:8%;
}
aside ul ul {
	margin-left:6%;
	margin-bottom:12%;
	margin-top:6%;
}

aside ul ul ul {margin-top:2%;
}


/*FOOTER */
footer {
	border-top: thin dotted #9084A8;
    font-size: 85%;
    padding-right: 8px;
    padding-top: 1%;
    text-align: right;
    width: 100%;
	clear:both;
	max-width:786px;
	}
	
p.copy {
	margin-left:35%;
    font-size: 85%;
    text-align: right;
	float: left;
	}
	
#contact {text-align:left; margin-left:2%; float:left;}



/* SLIDER TRIAL */
.scroll {
min-height: 600px;
width: 510px;
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
}

#slider {
	width:510px;
}

article.panel {max-width:510px; min-height:600px;}


/*CHRONOLOGY */

.chronology td {
text-align: left;
padding: 0px 2px 5px 8px;
margin: 0px;
vertical-align: text-top;
font-size: 95%;
line-height: 120%;
}

.chronology tr {
	margin-bottom: 6px;
}


.fb-like {padding:0 20px; max-width:200px;}

.fb_iframe_widget {
max-width: 200px;
display: inline-block;
position: relative;
overflow: hidden;
}



/*MOBILE OPTIMIZATION GLORY GOES HERE */



@media screen and (max-width: 640px)  {
	nav ul {
		margin-left: 4%;
}

	#content {background-image:url(../assets/content-bkg-640.png);
	}
	#content-home {
		overflow:hidden;
		width: 70%;
}
	aside {
		width:20%;
	}
	
	#main {
	background-image: url(../assets/nav-bkg-640.png);
	
	}
	
	header {
		background-image:url(../assets/header-bkg-640.png);
		height:169px;
	}

		
	}



@media screen and (max-width: 480px)  {
	
	#wrapper {
		font-size:90%;
	}
	#content-home {
		width:60%;
}

	figure {
		display:none;
	}
	
	#main {
		font-size:90%;
	}
	
	nav ul {
		width:100%;
	}
	nav>ul>li {
		margin-right:2%;
	}
	
	header {
		background-image:url(../assets/header-notagline-480.png);
		height:127px;
	}
	#homelink {
		height:29px;
}
}