/* Stylesheet for STS */
/* umbrella colors: red: #d42a2d, green #43aca7, yellow: #f9ba2d */

/* website */
	body { font-size: 12px; font-family: "Lucida Grande", Arial, Verdana; line-height: 14px;
	background-image: -webkit-gradient(	linear, left top, left bottom, color-stop(0, rgb(27, 154, 212)), color-stop(66, rgb(204, 197, 142)) );
	background-image: -o-linear-gradient(bottom, rgb(27, 154, 212) 0%, rgb(204, 197, 142) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(27, 154, 212) 0%, rgb(204, 197, 142) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(27, 154, 212) 0%, rgb(204, 197, 142) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(27, 154, 212) 0%, rgb(204, 197, 142) 100%);
	background-image: linear-gradient(to bottom, rgb(27, 154, 212) 0%, rgb(204, 197, 142) 100%);
}

	img { display: block; height: auto;  max-width: 100%; }
	a:link { text-decoration: none; }
	a:visited { text-decoration: none; }
	a:hover { text-decoration: underline; } 
	a:active { text-decoration: underline; } 
	p.italic {font-style:italic;}
	.imagebox { border: 5px solid #f9ba2d; width: 200px; height: 150px; }
	a[href^="mailto"] { color: #d42a2d; }
	a[href^="mailto"]:hover:after { content: " > " attr(title); }

	
	h2 {color: #d42a2d; }
	
	#site-body {width: 60%; margin: 0px auto 20px auto; background-color: #fff; border: 2px solid #c9c1a2; border-radius: 25px; box-shadow: 5px 5px 5px #888888; color: #000000; }
	
	#header {width: 90%; margin: auto; padding: 10px;}
	#logo { float: left;}
	#header2 {float:left;}
	#welcome {float: left; color: #d42a2d; }
	#navigation { float: left; padding-right: 60px;}
	#navigation ul { list-style: none; }
	#navigation li { float: left; padding: 4px 5px 4px 5px; margin:0px 5px 0px 5px; background-color: #43aca7; border: 2px solid #43aca7; border-radius: 25px;  }
	#navigation li a { color: #fff; }
	#navigation li a:hover {color: #f9ba2d; }
	#subheader {float: left; margin: 10px auto; }
	
	#main-container {width: 90%; min-height: 400px; margin: auto; padding: 10px; }
	#slideshow-wrapper {float: left; width: 30%;}
	#middle-text {float: left; width: 69%; }
	
	#footer { text-align: center; padding: 10px; margin: 10px; }
	#footer a {color: #000;}
	#footer a:hover {color: #d42a2d; }
	#mobile-indicator { display: none; }
	
	
/* slideshow - set the width and height to match your images */
	#slideshow { position:relative; height: 150px; width: 200px; }
	#slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; }
	#slideshow IMG.active { z-index:10; opacity:1.0; }
	#slideshow IMG.last-active { z-index:9; }

/* Screens */
	@media all and (min-width: 1024px){
	#mobile-indicator {display: none; }
	}
	
/* Large Screens */
	@media all and min-width: 1824px) {
	#mobile-indicator {display: none;}
	}
	
/* ipads */
	@media all and (min-width: 768px) and (max-width: 1024px){
	#site-body {width: 95%;}
	#logo {float: none; width: auto;}
	#header2 {float: left; }
	#welcome {float: left; padding: 0px; }
	#navigation { float: left; padding: 0px; }
	#contact {float: left; width: auto: padding: 0px;}
	#subheader {float: none; padding: 0px;}
	#main-container {float: left; width: auto; }
	#slideshow-wrapper {display: none; }
	#middle-text {float: right;  }
	#footer {float: none; width: auto;  min-height: 0; color: purple; }
}
/* smartphones in portrait */
	@media all and (max-width: 360px) {
	#site-body {width: 95%;}
	#welcome {float: none; width: auto: padding: 0px;}
	#logo{ float: none; width: auto; }
	#navigation { float: none; width: auto; padding: 0px;}
	#contact {float: none; width: auto: padding: 0px;}
	#subheader {float: none;}
	#main-container {float: left; width: auto; }
	#middle-text {width: 50%; }
	#slideshow-wrapper {display: none;}
	#middle-text {float: none; width:auto;}
	#footer { float: none; width: auto;  min-height: 0; color: green;}
}

/* smartphones in landscape and Kindle in both orientations*/
	@media all and (min-width: 361px) and (max-width: 900px) {
	#site-body {width: 95%;}
	#logo{ float: none; width: auto; }
	#header2 {float: left;}
	#welcome {float: left; padding: 0px; }
	#navigation { float: right; padding: 0px; }
	#subheader {float: left; padding: 0px;}
	#main-container {float: left; width: auto; }
	#slideshow-wrapper {display: none;}
	#middle-text {float: none; width:auto;}
	#footer {float: none; width: auto; color: purple; }
}