@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. Any rules listed under MOBILE, impact the Tablet and Desktop versions, but not the other way around*/

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height:auto !important; 
	min-height:100%; 
}
#header {
	clear: both;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	display: block;
	padding-bottom:1em;
}
#logo {
	clear: both;
	width: 100%;
	display: block;
	margin:auto;
	text-align:center;
	float:left;
/*	background-color:#EAF7F1;
	border-bottom: 1px solid #008E54;
	border-right: 1px solid #008E54;
	border-left: 1px solid #008E54;*/
}
#nav {
	clear: both!important;
	width: 100%;
	text-align: center;
	background-color: #7EC7AB;
	margin-top:0;
	padding-top:0;
}
#nav ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	line-height: 1.9em;
	background-color: #7EC7AB;
	list-style-type: none;
	list-style-type: none;
	
}
#nav li {
	width: 100%;
	text-align: center;
	color: #FFF;
	border-right: 1px solid #008E54;
	border-left: 1px solid #008E54;
	line-height: 2.5em;
	list-style-type: none;
	list-style-type: none;
}
#nav li a { 
/* grouping these selectors makes sure that your links retain their button look even after being visited */
	display: block;  /*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. */
	list-style-type: none;
	text-decoration: none;
	color: #fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.0em;
	opacity: 1.0;
    filter: alpha(opacity=100); 
	line-height: 1.7;
}
#nav li a:visited { /* this changes the background and text color for both mouse and keyboard navigators */
	color: #57977C;
}
#nav li a:hover { /* this changes the background and text color for both mouse and keyboard navigators */
	opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}
#nav li a:active { /* this changes the background and text color for both mouse and keyboard navigators */
	color: #444;
}
/* ~~ This fixed width container surrounds all other blocks ~~ */
#nav li img {
	border: none;
}
#article {
	font-family: 'Roboto', sans-serif;
	clear: both!important;
	text-align: center;
	display: block;
	color: #444;
	font-size: 1.3em;
	width: 96%;
	margin-left:auto;
	margin-right: auto;
	height: 100%;
}
/*#article .sub{
	font-size: 0.8em;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #CCC;
	padding: 10px;
	max-height: 224px;
}*/
#article a {
	color: #09C;
}
#article a:visited {
	color: #003399;
}
#article a:hover { color: #06e; }
#article a:focus { outline: thin dotted; }

#slideshow {
clear: both!important;
	text-align: center;
	width: 100%;
	display: block;
}
#aside{
	margin-right:auto;
	margin-left:auto;
}
#footer {
	clear: both;
	width: 100%;
	margin: auto;
	text-align: center;
	display: block;
	background-color: #DDDDDD;
	vertical-align: middle;
	padding-top: 0.5em;
	padding-bottom: 1em;
	height: 4em;
	position: relative;
	bottom: 0;
}
/*#footer {
	clear: both;
	width: 96%;
	margin-left:0;
	margin-right:0;
	text-align:center;
	display: block;
	background-color: #DDDDDD;
	vertical-align: middle;
	padding-top: 0.5em;
	padding-bottom: 1em;
	height:3em;
	position: relative;
}*/
#footer img {
	padding-right:0.8em;
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#footer img:hover {
	opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
} 
.overlay {
	background-color: #90D7BD;
}
h1 {
	color: #000;
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
}
h2 {
	color: #CCC;
	font-weight: 100;
	font-family: 'Roboto', sans-serif;
	float: right;
	margin-right: 10%;
}
.quote {
	width:100%;
	padding-top: 4em;
	font-size: 1.4em;
	font-weight: lighter;
	color: #999;
	font-family: 'Roboto', sans-serif;
	text-align:center;
}
.quotesignature{
	font-size: 0.9em;
	font-weight: lighter;
	color: #999;
	font-family: 'Roboto', sans-serif;
	text-align:center;
}
.sub{
	font-size: 0.8em;
	border: 1px solid #CCC;
	padding: 10px;
	max-height: 224px;
	text-align:center;
	width: 200px;
	margin-right: auto;
	margin-left: auto;
}
.smallfont{
	font-size:0.8em;
	vertical-align:bottom;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

#article #aside iframe {
	width: 94%;
}
.right-image {
	display: none;
}
@media only screen and (min-width: 800px) {
.gridContainer {
	width: 100%;
}
#header {
	clear: both;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	display: block;
	padding-bottom:1em;
}
#logo {
	width: 20em;
	margin:auto;
	float:left;
	text-align:left;
	margin-left: 3%;
}
#nav {
	clear: both!important;
	text-align: center;
	background-color: #7EC7AB;
	margin-top:0;
	padding-top:0;
	padding-left:0;
	margin-left:0;
	min-height: 3.4em;
}
#nav ul {
	list-style: none;
	padding: 0px;
	margin-right: 2%;
	line-height: 2.8em;
	background-color: #7EC7AB;
	list-style-type: none;
	list-style-type: none;
	float: right;
	
}
#nav li {
	text-align: center;
	color: #FFF;
	list-style-type: none;
	list-style-type: none;
	display: block;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	padding-top: 0.4em;
	float: left;
	width:5em;
}
#nav li a { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	display: block;  /*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. */
	list-style-type: none;
	text-decoration: none;
	color: #fff;
	font-size: 100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.0em;
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#nav li a:visited { /* this changes the background and text color for both mouse and keyboard navigators */
	color: #57977C;
}
#nav li a:hover { /* this changes the background and text color for both mouse and keyboard navigators */
	opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}
#nav li a:active { /* this changes the background and text color for both mouse and keyboard navigators */
	color: #444;
}
.overlay {
	padding-top: 0.4em;
}
#article {
	font-family: 'Roboto', sans-serif;
	clear: both!important;
	text-align: center;
	display: block;
	color: #444;
	font-size: 1.3em;
}
#slideshow {
clear: both!important;
	text-align: center;
	width: 100%;
	display: block;
}
#aside{
	margin-right:auto;
	margin-left:auto;
}
#content {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 100%;
	display: block;
}
#header img {
	display: block;
	margin-right: auto;
	margin-left: auto;
	z-index: -1000;
}
/*#footer {
	clear: both !important;
	padding-right: 10em;
	width: 100%;
	display: block;
	background-color: #DDDDDD;
	padding-top: 2em;
	padding-bottom: 2em;
	height: 4em;
	position: relative;
}*/
#footer {
	clear: both;
	width: 100%;
	margin: auto;
	display: block;
	background-color: #DDDDDD;
	vertical-align: middle;
	padding-top: 0.5em;
	padding-bottom: 1em;
	height: 4em;
	position: relative;
	bottom: 0;
	text-align:right;
}
#footer p {
	float: right;
	margin-right:5%;
}
#footer img {
	float:left;
	margin-right:1.5em;
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#footer img:hover {
	opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
} 
/* Desktop Layout: 769px to a max of 1920px.  Inherits styles from: Mobile Layout and Tablet Layout. */

#article #aside iframe {
	padding-right: 5em;
}
.right-image {
	display: none;
}

@media only screen and (min-width: 801px) {
.gridContainer {
	width: 96%;
	max-width: 1800px;
	margin: auto;
	text-align:center;
}
#header {
	clear: both;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
	display: block;
	padding-bottom:1em;
}
#logo {
	width: 20em;
	margin:auto;
	float:left;
	text-align:left;
	margin-left: 3%;
}
#nav {
	clear: both!important;
	text-align: center;
	background-color: #7EC7AB;
	margin-top:0;
	padding-top:0;
	min-height: 3.5em;
}
#nav ul {
	list-style: none;
	background-color: #7EC7AB;
	list-style-type: none;
	list-style-type: none;
	float: right;
	margin-right: 5%;
}
#nav li {
	width: 6em;
	text-align: center;
	color: #FFF;
	list-style-type: none;
	list-style-type: none;
	float: left;
	display: block;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
}
#nav li a { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	display: block;  /*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. */
	list-style-type: none;
	text-decoration: none;
	color: #fff;
	font-size: 100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.0em;
}
#nav li a:visited { /* this changes the background and text color for both mouse and keyboard navigators */
	color: #57977C;
}
#nav li a:hover { /* this changes the background and text color for both mouse and keyboard navigators */
	
}
#nav li a:active { /* this changes the background and text color for both mouse and keyboard navigators */
	color: #444;
}
#slideshow {
}
#article {
	font-family: 'Roboto', sans-serif;
	clear: both!important;
	text-align: left;
	display: block;
	color: #444;
	font-size: 1.4em;
	margin-left: 5%;
	margin-right: 4%;
	overflow: visible;
	width: 90%;
	margin-left:auto;
	margin-right: auto;
}
#aside{
	float: left;
	margin-bottom:2%;
	padding-right:0em;
}
.sub{
	font-size: 0.8em;
	border: 1px solid #CCC;
	padding: 10px;
	max-height: 224px;
	width: 160px:
	clear: both!important;
	margin-left: 850px;
    width: 210px;
	text-align:center;
}
#footer {
	clear: both;
	width: 100%;
	margin: auto;
	display: block;
	background-color: #DDDDDD;
	vertical-align: middle;
	padding-top: 0.5em;
	padding-bottom: 1em;
	height: 4em;
	position: relative;
	bottom: 0;
	text-align:right!important;
}
/*#footer {
	clear: inherit;
	margin-left:0;
	margin-right:0;
	text-align:center;
	display: block;
	background-color: #DDDDDD;
	vertical-align: middle;
	padding-top: 0.5em;
	padding-bottom: 1em;
	height:4em;
	position: relative;
	bottom:0;
}*/
#footer p {
	float: right;
	margin-right:4%;
	text-align: right!important;
}
#footer img {
	float:left;
	margin-right:1.5em;
	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#footer img:hover {
	opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
} 
.clearfix {
	min-height:2em;
	width:100%;
}
#article #aside iframe {
	padding-right: 5em !important;
	width:600px !important;
}
@media only screen and (min-width: 1200px) {
.right-image {
	float: right;
	width:420px !important;
	display: block;
	margin-top: -50px;
}