@charset "UTF-8";
/* CSS Document */

body {
	background-color: #deb887;
	font-family: Palatino, Georgia, "Times New Roman", serif;
	letter-spacing: -1px;
	/* Possible background experimentation */
		
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-image: url(Index_pics/soto_bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;	/*
	background-position: 5px 5px; */
}


.wrapper {
	margin: 0px auto 0px auto;
	position: relative;
	width: 1024px;
	

	
}

/* Cotyledon is a "husk" wrapping up a good portion of the layout content and giving an extra layer of control to the positioning */

.cotyledon {
	position: absolute;
	margin-top: 450px;
	margin-left: 220px;
	
}

.pictureBox {
	position: absolute;
	width: 528px;
	height: 324px
	top: 160px;
	box-shadow: 5px 5px 5px #000;
	border: 2pt solid #000000;	
	
	
	/*
	border-top-width: 2pt;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: 2pt;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000;
	border-right-color: #be9d71;
	border-bottom-color: #be9d71;
	border-left-color: #000; */
}

/* mainContent grabs both assymetrical columns */

.mainContent {
	position: absolute;
	top: 340px;
	/*
	background-color: #deb887; */
	width: 530px;
	
	
}


/* Bodycopy is is the main text column for the assymetrical 2-column layout */

.bodyCopy {
	width: 190px;
	
		box-shadow: 5px 5px 5px #000;
		background-color: #deb887;

	border-left-width: thin;
	border-left-style: solid;
	border-left-color: #000000;
	padding-left: 10px;
	padding-right: 20px;
	padding-top: 10px;
	
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #000000;
	padding-left: 15px;
	
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #000000;
	
	
	-moz-border-radius-bottomright: 50px;
	border-bottom-right-radius: 50px;
	
		-moz-border-radius-bottomleft: 50px;
		border-bottom-left-radius: 50px;
	
	
	margin-top: 0;
	margin-bottom: 50px;

}

.bodyCopy a {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	font-size: 14pt;
	letter-spacing: -1px;
	
	margin-bottom: 10px;
	text-decoration: none;
	list-style-type: none;
	
	
}

.bodyCopy a:hover {
	color: #000;
}

/* Basic link information */

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

a:hover {
	color:#deb887;
}
 
a:active {
	color:#f88817;
}


/* All the juicy layout stuff for the copy */


.bodyCopy h1 {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	line-height: 90%;
	font-size: 26pt; /*
	font-size: 2.618em; */
	margin-top: 5px;
	text-shadow: 2px 2px #fff;
}

.bodyCopy h2 {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	line-height: 15pt;
	font-size: .818em;
	text-transform: uppercase;
	line-height: 85%;
}

.bodyCopy h3 {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	line-height: 15pt;
	font-size: 1.2em;
	text-transform: uppercase;
	line-height: 85%;
	text-shadow: 2px 2px #fff;
}

.bodyCopy p {
	text-align: justify;
	text-indent: 1em;
	font-size: 1em;
	line-height: 1.5em;
}

.bodyCopy blockquote {
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 130%;	
}

.bodyCopy ul {
	line-height: 125%;
	text-align: left;
	margin-right: 15px;
	list-style-type: square;
}

.bodyCopy ul li {
	margin-top: 9pt;
	margin-bottom: 19pt;
}


/* Here are some universal spans to make StateoftheOzarks' content that much better... and more consistent! */

.artist {
	font-weight: bold;
	font-size: 14pt;
}

.lyric {
	font-style: italic;
	text-align: center;
}

.songTitle {
	font-style: italic;
	font-weight: bold;
}



blockquote {
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 130%;	
}

.recipe ul li {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	margin-bottom: -10px;
	list-style-type: square;
}

.recipe p {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
}

/* Leaf is the right-side "leaflet" to the main content, ie., the second half of our assymetrical two-column design */


.leaf {
	position: absolute;
	top: 10px;
	
	margin-top: -10px;

	left: 242px;
	width: 266px;
	padding: 10px;
	background-color: #fff;
	border: 3px solid #000;
	
	-moz-border-radius-bottomright: 50px;
	border-bottom-right-radius: 50px;
	
	box-shadow: 5px 5px 5px #000;
	
	margin-bottom: 50px;
}

.leaf h1 {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	line-height: 90%;
	font-size: 2.618em;
	margin-top: 5px;

}

.leaf h2 {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	line-height: 15pt;
	font-size: .818em;
	text-transform: uppercase;
	line-height: 85%;
}

.leaf h3 {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	line-height: 15pt;
	font-size: 1.2em;
	text-transform: uppercase;
	line-height: 85%;
}

.leaf p {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-weight: bold;
	text-align: justify;
	text-indent: none;
	line-height: 110%;
	width: 266px;
	margin: 6px 0 20px 0;
	background-color: #fff;
}

.leaf blockquote {
	font-weight: bold;
	text-align: center;
	line-height: 130%;	
	color: #000;
}

/* Here are the controls to the arbitrary links at the bottom of the second column */

.leaf ul {
	list-style-type: none;
	font-weight: bold;
	margin-left: -25px;
}

.leaf ul li {
		margin-bottom: 15px;

}


.leaf ol {
	line-height: 120%;
}

.leaf ol li {
	margin-bottom: 15px;
}

.leaf a {
	color: #000;
}

.leaf a:hover {
	color: #deb887;	
	
	/*	
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	
	font-size: 12pt; */	
}


/* Spans to control how the photo "plate" text appears, as well as the Latin names of plants. */

.plate {
	font-family: Palatino, Georgia, "Times New Roman", serif;

	text-transform: uppercase;
	font-size: 10pt;
}

.latin {
	font-style: italic;
	font-size: 13pt;
}


/* Showcase Control! */

.showcase {

	position: absolute;
	margin-top: 5px;
	margin-left: 765px;
	width: 266px;
	color: #fff;
	background-color: #000;
	padding: 15px;
	line-height: 1.5em;
	
	-moz-border-radius-bottomright: 50px;
	border-bottom-right-radius: 50px;

	-moz-border-radius-topright: 50px;
	border-top-right-radius: 50px;
	
	-moz-border-radius-bottomleft: 50px;
	border-bottom-left-radius: 50px;

}

/* Here is where the body copy gets all beautifully formatted, including the justified type and the lovely left and right margins. */

.showcase p {
	font-family: Palatino, Georgia, "Times New Roman", serif;
	font-size: 12pt;
	font-weight: bold;
	line-height: 120%;
	text-align: justify;
	margin-right: 16px;
	margin-left: 16px;
	line-height: 130%;
}

.showcase h1 {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	font-size: 28pt;
	line-height: 100%;
	text-align: center;
}

.showcase h2 {
	font-family: Palatino, Georgia, "Times New Roman", serif;
	line-height: 90%;
	font-size: 18pt;
	margin-top: 30px;
	text-align: center;
}


.showcase img {
	border: none;
	margin-bottom: 5px;
}


.showcase a {
	font-size: 11pt;
	font-weight: bold;
	text-align: left;
	text-indent: none;
	margin-left: 0px;
	margin-bottom: 24px;
	list-style-type: none;
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 10pt;
	letter-spacing: -1px;
}

.showcase a:hover {
	color: #deb887;
	/*
	font-size: 12pt; */
	text-decoration: none;
}


.city {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 10pt;
	letter-spacing: 1px;
}

 /* Trying to remember what this rule actually does! */

#bluegrasstown #bluegrasstownLink {
	color: #000;
	text-transform: uppercase;
	background-color: #fff;
}

/* Siders, the left navigation column, is composed mostly of php _includes. The first rule controls page layout and position */

.siders {
	position: absolute;
	width: 180px;
	color: #fff;
	background-color: #000;
	padding: 15px;
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	top: 450px;
	left: 0px;
	text-align: left;
	-moz-border-radius-bottomleft: 50px;
	border-bottom-left-radius: 50px;
	
	
	-moz-border-radius-bottomright: 50px;
	border-bottom-right-radius: 50px;
}
	
	
.siders h1 {
	font-size: 24pt;
	margin-top: 0;
}


.siders h2 {
	line-height: 90%;
	font-size: 12pt;
}


.siders ul {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	list-style-type: none;
	font-size: 12pt;
	line-height: 145%;
	text-transform: none;
}

.siders li {
	margin-left: -15px;
}

.siders a:hover {
	color: #deb887;
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

/* The definition list rules control how the "Email the Editor" shows up. */

.siders dl {
	margin-bottom: 45px;
	font-size: 18pt;
}

.siders dt {
	font-weight: bold;
	

}

.siders dd {
	margin-left: 0px;
	font-size: 12pt;
}

/* Here is the code that should turn off the hoppy part of the a links just for my email address */

.siders dl a {

	font-family: Georgia, "Times New Roman", Times, serif;
	list-style-type: none;
	font-size: 12pt;
	line-height: 145%;
	text-transform: none;

}


/* Pinesky is the main navigation box at the top, with the pinesky.jpg. */

.pinesky {
	position: absolute;
	margin-top: 100px;
	width: 725px;
	color: #fff;
	background-color: #000;
	padding: 15px;
	color: #fff;
	-moz-border-radius-bottomright: 50px;
	border-bottom-right-radius: 50px;
	top: -8px;
}

.pinesky img {
	border: none;
}


/* The .headline rule controls the very top introduction header, which is all html / css this time rather than a jpg! It actually is quite a bit of CSS for two lines of text! */

.headline {
	position: absolute;
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	margin-top: -405px;
	margin-left: 370px;
	text-align: right;
}


.headline h1 {
	margin-bottom: -20px;
	color: #fff;
	font-family: Palatino, Georgia, "Times New Roman", serif;
	text-shadow: 2px 2px #000;
	letter-spacing: 1px;
}

.headline h2 {

	font-family: Palatino, Georgia, "Times New Roman", serif;
	font-size: 14pt;
	margin-bottom: 20px;
	color: #fff;
	text-shadow: 2px 2px #000;
	letter-spacing: 1px;

}

/* Contentia is the div class controlling position and formatting of the main top nav (Home, Natural Heritage, Culture) and holds the ul Basket. It looks confusing only because the html is now in the php includes so it doesn't show up on the actual pages anymore. Look for it in _topheader.php */

.contentia {

	position: absolute;
	
	margin-top: -320px;
	margin-left: 195px;
	text-align: left;
	line-height: 165%;

}

.contentia h1 {
	font-size: 21pt;
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
		text-transform: none;
		margin-bottom: -13px;
}

.contentia h2 {
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	line-height: 90%;
	font-size: 18pt;
	text-transform: none;
	margin-top: 25px;
	margin-bottom: -10px;

}


.contentia ul {
	font-family: Palatino, Georgia, "Times New Roman", serif;
	font-weight: bold;
	list-style-type: none;
	font-size: 12pt;
	line-height: 145%;
	margin-left: -25px;
}

/* Here are the fancy controls of the hover links. We don't have an increase in font-size in this case and that does keep the formatting change to a minimum, ie., it is not hopping around on a mouse-over, though that has soemthing to do with the wider column as well. We may want to incorporate same-size fonts for the other links. */

.contentia a:hover {
	color: #deb887;
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	font-size: 12pt;
}

/* Cleans up the margin for the YMLP button */

.emailbutton {
	margin-left: -5px;
}


/* Considering the length of some of these pages, I'm very proud to include a classy back-to-top link. */

.backtotop {
	font-weight: bold;
	margin-top: 25px;
	height: 65px;
	background-image: url(../Index_pics/black-leaf.png);
	background-repeat: no-repeat;
	background-position: 29px 24px;
	
		text-shadow: 2px 2px #fff;
}

.backtotop a {
	color: #000;
	font-family: "Gill Sans", Futura, Arial, Helvetica, sans-serif;
	font-size: 14pt;		
}


.backtotop a:hover {
	color: #fff;
	text-shadow: none;
}

.paypal {
	margin-left: 205px;
}


.paypal2 {
	margin-left: 0;
}

.critter {
	line-height: 120%;
}

.critter p {
	text-align: left;
	margin-bottom: 15px;

}



.poetry {
	text-align: center;
}

.poetry p {
font-family: "Courier New", Courier, monospace;
}

.poetry h3 {
font-family: "Courier New", Courier, monospace;
text-align: center;
}

.poetry h2 {
font-family: "Courier New", Courier, monospace;
text-align: center;
}


.poetry ul {
	font-family: "Courier New", Courier, monospace;
	list-style-type: none;
	margin-left: -25px;
	font-size: 14px;
	font-weight: bold;
	text-align: left;

}

.poetry ul li {
	margin-bottom: 10px;
}

.animallist h3 {
	text-align: center;
	}

.animallist  p {
	text-align: center;
	margin-bottom: 0px;
}