/* ------------------ NOTES FOR ME: "Hoefler Text", Baskerville, "Big Caslon", "Adobe Garamond Pro", Georgia, Palatino, "Times New Roman", serif --------------------- */

body {font: normal 16px/1.75em Georgia, "Times New Roman", Times, serif; text-align: left}
#header, #footer {height: auto; background: #fff; text-align: center; color:#000; margin: 0; padding: 0 0 10px 0}
#primary, #content, #secondary { padding: 0px 0}
#primary p {text-align: left; width:180px}
#content p {
	margin: 10px auto;
	text-align: left;
}
#secondary p {text-align: left; margin:10px auto; width:180px}
#content h2 {text-align: center; color: #054d09; font-style:italic; margin-top: 50px; margin-bottom: 25px}
#content h3 {text-align: left; color: #054d09; margin-top: 25px}
#primary {font: normal 18px/1.2em Georgia, "Times New Roman", Times, serif; font-style:italic; background:#fff; margin:0}
#content {background:#fff;}
#secondary {font: normal 16px/1.2em Georgia, "Times New Roman", Times, serif; font-style:italic; background:#fff; margin:0}

/* --------------------------------------- */


h1, h2, h3, h4, h5, h6, p {
	margin-top: 10px;	 /* removing the top margin gets around an issue where margins can escape from their containing block. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: 10px;
	padding-left: 10px; /* adding the padding to the sides of the elements within the blocks, instead of the block elements themselves, gets rid of any box model math. A nested block with side padding can also be used as an alternate method. */
}

.firstcharacter { 
	color: #054d09;  /*dark green*/
	font-size: 30px; 
	font-family: Georgia, "Times New Roman", Times, serif
}

.quote { 
	font: italic 18px/1.8em Georgia, "Times New Roman", Times, serif;
	color: #999;  /*dark gray*/
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif
}

article-img {
	margin-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	text-align:center;
}
	
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto
}

welcomeletter {
	float: left;
	background: #f7efd4;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	width:545px;

	font: normal 16px/1.8em Georgia, "Times New Roman", Times, serif;
	text-align:left;
	color:#000;
}


welcomeletter2 {
	float: left;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	width:180px;

	font: normal 14px/1.6em Georgia, "Times New Roman", Times, serif;
	text-align:left;
	color:#000;
}


titlebox {
	float: left;
	margin-top: 20px;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-left: 10px;
	margin-right: 10px;
	width:545px;
}

titlebox p {text-align:center !important;}


hilite {
	float: left;
	background: #eff9f0;
	padding-top: 10px;
	margin:5px 10px;
	width:545px;
	text-align:left;
	color:#000;
}


hilite-title {
	font: normal 18px/1.2em Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	padding-bottom: 0px;
}

hilite-author {
	font: normal 16px/1em Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	padding-top: 0px;
	padding-bottom: 10px;
}

hilite-intro {
	font: normal 16px/1.3em Georgia, "Times New Roman", Times, serif;
	padding-top: 15px;
}

hilite-img {
	float: right;
	text-align:right;
	margin-right: 10px;
}


articleheader {
	float: left;
	background: #bee2c0; /*light green*/
	padding-top: 40px;
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom: 15px;
	width:545px;
	color:#054d09; /*dark green*/
}
articleheader p {
	text-align: center !important; }

articleheader-gallery {
	float: left;
	background: #bee2c0; /*light green*/
	padding-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom:10px;
	width:745px;
	color:#054d09; /*dark green*/
}

article-title {
	font: normal 28px/1.3em Georgia, "Times New Roman", Times, serif;
	padding-bottom: 0px;
	text-align: center;
}

article-subhead {
	font: normal 22px/1.2em Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	padding-top: 0px;
	padding-bottom: 20px;
	text-align: center;
}

article-author {
	font: normal 20px/2em Georgia, "Times New Roman", Times, serif;
	padding-top: 20px;
	text-align: center;
}


imgcaption {
	float: none;
	width: 500px;
	font-size: 14px;
	line-height: 1.2em;
	text-align: center;
	font-style: italic; 
	padding: 5px;
	height: auto;
	color:#000
}


credit-line {
	float: none;
	width: 500px;
	font-size: 10px;
	line-height: 1em;
	text-align: right;
	padding: 0px;
	height: auto;
	color:#999
}




/* --------------------------------------- */

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

/* ----- set width and center layout ----- */
#container {
	width:965px;
	margin:20px auto;
}
/* --------------------------------------- */


nav {
	font-family: Georgia, "Times New Roman", Times, serif;
	text-align: left;
	font-style: italic;
	padding-right: 10px;
}

nav ul {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #222; /* this creates the top border for the links - all others are placed using a bottom border on the LI */
	margin-bottom: 15px; /* this creates the space between the navigation on the content below */
}
nav ul li {
	border-bottom: 1px solid #222; /* this creates the button separation */
}
nav ul a:link { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	color: #1256b7; /*using same color for visited and unvisited links*/
	text-decoration: none; /*text-decoration: underline;*/

}
nav ul a, nav ul a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 5px 5px 5px 15px;
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	width: 170px;  /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
	text-decoration: none; /*text-decoration: underline;*/
	background: #fff;
	color: #1256b7; /*using same color for visited and unvisited links*/
}
nav ul a:hover, nav ul a:active, nav ul a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	background-color: #def;
	color: #333; /*color for hovers*/
}


/* ----------- float columns ------------- */
#primary {
	float:left;
	width:200px
}

#content {
	float:left;
	width:565px;
}
#content.gallery {
	float:left;
	width:765px;
	clear:right;
}
#secondary {
	float:left;
	width:200px;
}
/* --------------------------------------- */
#footer {
	border: none;
	position: relative;
	clear: both;
}

footer-nav {
	font: normal 12px/1em Georgia, "Times New Roman", Times, serif;
	height: auto;
	padding-top: 10px;
	text-align: center;
	color:#000
}

/* --------------------------------------- */

a img {
	border: none;
}
a:link {
	color: #1256b7; /*using same color for visited and unvisited links*/
	text-decoration: none; /*text-decoration: underline;*/
}
a:visited {
	color: #1256b7; /*using same color for visited and unvisited links*/
	text-decoration: none;
}
a:hover, a:active, a:focus { 
	background-color: #def;
	color: #333; /*color for hovers*/
	text-decoration: none;
}



/* ----------SLIDESHOW----------------------------- */


#slideshow{
	background-color:#F5F5F5;
	border:1px solid #FFFFFF;
	height:260px;
	margin:0 auto 0;
	position:relative;
	width:545px; /*--subtracted 20px to fit--*/
}

#slideshow ul{
	height:240px;
	left:10px;
	list-style:none outside none;
	overflow:hidden;
	position:absolute;
	top:10px;
	width:525px; /*--subtracted 20px to fit--*/
}

#slideshow li{
	position:absolute;
	display:none;
	z-index:10;
}

#slideshow li:first-child{
	display:block;
	z-index:1000;
}

#slideshow .slideActive{
	z-index:1000;
}

#slideshow canvas{
	display:none;
	position:absolute;
	z-index:100;
}

#slideshow .arrow{
	height:43px;
	width:30px;
	position:absolute;
	background:url('images/new-arrows.png') no-repeat;
	top:50%;
	margin-top:-21px;
	cursor:pointer;
	z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}

/* gallery divs */

#content.gallery .galleryS { width: 40%; float: left;padding:2%; margin:2%;border: 1px solid #ccc; font-size: .9em; line-height: 1.5em; }
#content.gallery .galleryS2 { width: 40%; float: left;padding:2%; margin:2%;border: 1px solid #ccc; font-size: .9em; line-height: 1.5em; height: 170px;  }
.galleryS img, .galleryS2 img { padding-right:15px; }
.fullgallery {display:inline-block; margin: 1%; }
ul.gal { list-style-type:none;padding: 10px  20px;}
.gal li { indent:none; display:inline-block; padding: 5px 15px; border: 1px solid #ccc; border-radius: 30px; -moz-border-radius: 30px;  -webkit-border-radius: 30px;  -khtml-border-radius: 30px;  }
.gal li a:hover { background-color: #ccc; }
#content .alignRt { text-align:right; }