/* Flexible Slide-to-top Accordion Style*/
body {
	background:url("../images/steel_bg_grad2.jpg") #CECECE;
	background-repeat:no-repeat;
	background-position:top;	
}

html>body { overflow:scroll; }

.wrapper{
	width:100%;
	max-width:920px;
	margin: auto;
	padding-top:30px;
	background-color:#CECECE;
}

.st-accordion{
    width:91%;
    min-width:270px;
    margin: 0 auto;
	margin-bottom:35px;
}
.st-accordion ul li{
    height: 60px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}
.st-accordion ul li:first-child{
    border-top:none;
}
.st-accordion ul li > a{
	font-family: 'BellGothicStdBold', Arial, sans-serif;
    text-shadow: 1px 1px 1px #000;
    font-size: 28px;
	letter-spacing:-1px;
    display: block;
	position: relative;
    line-height: 60px;
	outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
	-moz-transition:  color 0.2s ease-in-out;
	-o-transition:  color 0.2s ease-in-out;
	-ms-transition:  color 0.2s ease-in-out;
	transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a span{
	background: transparent url("../images/down.png") no-repeat center center;
	text-indent:-9000px;
	width: 26px;
	height: 14px;
	position: absolute;
	top: 50%;
	right: -26px;
	margin-top: -7px;
	opacity:0;
	-webkit-transition:  all 0.2s ease-in-out;
	-moz-transition:  all 0.2s ease-in-out;
	-o-transition:  all 0.2s ease-in-out;
	-ms-transition:  all 0.2s ease-in-out;
	transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color:#1693eb;
}
.st-accordion ul li > a:hover span{
	opacity:1;
	right: 20px;
}
.st-accordion ul li.st-open > a{
    color: #1693eb;
}
.st-accordion ul li.st-open > a span{
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
    transform:rotate(180deg);
	right:0px;
	opacity:1;
}
.st-content{
    padding: 5px 0px 30px 0px;
}
.st-content ul {
	list-style-type:circle;
}
.st-content ul li {
	height:30px;
	font-size:14px;
    border-bottom:none;
    border-top:none;
}
.st-content p{
    font-size:  16px;
    font-family:  Georgia, serif;
    font-style: italic;
    line-height:  28px;
    padding: 0px 4px 15px 4px; 
}
.st-content img{
	max-width: 100%;
	height: auto;
	margin: 10px 0px 10px 0px;
}

.slide_overview{ background-color:#BBBBBB; padding-left:30px; padding-right:30px;}
.slide_ethos{ background-color:#AAAAAA; padding-left:30px; padding-right:30px;}
.slide1{ background-color:#999999; padding-left:30px; padding-right:30px;}
.slide2{ background-color:#8C8C8C; padding-left:30px; padding-right:30px;}
.slide3{ background-color:#808080; padding-left:30px; padding-right:30px;}
.slide4{ background-color:#737373; padding-left:30px; padding-right:30px;}
.slide5{ background-color:#666666; padding-left:30px; padding-right:30px;}
.slide6{ background-color:#595959; padding-left:30px; padding-right:30px;}
.slide7{ background-color:#4D4D4D; padding-left:30px; padding-right:30px;}
.slide8{ background-color:#808080; padding-left:30px; padding-right:30px;}

@media screen and (max-width: 320px){
	.wrapper {padding-bottom:50px; margin-bottom:50px;}
	body {overflow:hidden;}
	h2 {font-size:16px;}
	h4 {font-size:12px;}
	#motto {width:100%;}
	#footer {width:90%; margin:0 auto;}	
	#contact-info {width:90%; font-size:16px; letter-spacing:-1px;}
	#contact-info a {font-size:18px; letter-spacing:-1px;}
	#header {margin-bottom:20px;}
	#logo {width:90%;}
	#map {width:100%; margin:0 auto; margin-top:20px; margin-bottom:50px;}
	
	.st-accordion{width:100%;}
	.st-accordion ul li{height: 60px;}
	.st-accordion ul li > a{font-size:20px; line-height:60px;}

	.slide_overview{ padding-left:15px;}	
	.slide_ethos{ padding-left:15px;}
	.slide1{ padding-left:15px;}
	.slide2{ padding-left:15px;}
	.slide3{ padding-left:15px;}
	.slide4{ padding-left:15px;}
	.slide5{ padding-left:15px;}
	.slide6{ padding-left:15px;}
	.slide7{ padding-left:15px;}
	.slide8{ padding-left:15px;}
	
	#map {position:relative;float:right;width:100%;height:120px;margin-top:20px;}
	#map_canvas {width:100%;height:120px;border:1px solid #999;}
	
	#footer {padding-left:10px; padding-right:10px;}
	
	.copyright {
float: left;
width: 100%;
clear: both;
text-align: center;
margin: 20px 0;
color:#EEE;
font-size:11px;
}

.bluecanoe {
float: right;
width: 100%;
text-align: center;
margin: 20px 0;
color:#999;
font-size:10px;
}
	
}