/* This stabilizes the html so pages don't jump around when navigating through the site   */
html {
        min-height: 100%;
        margin-bottom: 1px;
} 

body {
   	margin-top: 0px;
	margin-right: 2%;
	margin-left: 2%;  
	overflow-y: auto;
	background: -moz-linear-gradient(top, rgba(102,58,21,0.84) 0%, rgba(174,110,55,0.76) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(102,58,21,0.84) 0%,rgba(174,110,55,0.76) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(3,17,52,0.84) 0%,rgba(83,122,238,0.76) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6663a15', endColorstr='#c2ae6e37',GradientType=0 ); /* IE6-9 */	
					
}

#container {
	 z-index: 2;
		margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
        max-width: 1160px;
		min-width: 280px;
        padding: 2.2%;
		padding-bottom: 1%;
		padding-top: 2%;
     	overflow:hidden;
        background: #fff;
        font-size: 1em;
		border: 2px solid #0b299d;
      	border-top-width: 6px;
		border-top-style: solid;
		border-top-color: #0b299d;
		-moz-box-shadow: 5px 6px 6px rgba(32,32,32,0.55);
		-webkit-box-shadow: 5px 6px 7px rgba(32,32,32,0.55);
		box-shadow: 5px 6px 7px rgba(32,32,32,0.55);
		border-radius: 0px 0px 4px 4px;  /* for Chrome */
		font-family: 'Raleway', sans-serif;

background: radial-gradient(ellipse at center, rgba(255,255,255,0.9) 0%,rgba(200,222,250,0.9) 100%);

		}
	
#mission {
	position:relative;
	display:none;
	}

#header { /* holds all the header elements: */
	width: 100%;
	float: left;
	height: auto;
	padding: 0px;
	padding-bottom: 1%;
	margin: 0px;
	margin-bottom:0;
	border-bottom: 1px solid #0b299d;
	}

/* header group at upper left */

#title { /* holds the org name and subtitle */
	float: left;
	width: 90%;
	height: auto;
	font-size:1.5em;
	}
	
#org-name a {
	display: block;
	width: auto;
	height: auto;
	float: left;
	margin-top: 0px;
	margin-bottom: 6%;
	margin-right: 2%;
	color: #4e2509;
	font-size: 2.4em;
	line-height: 1em;
	font-weight:normal;
	text-decoration:none;
	}

#org-name a:hover {
	color: #4e2509;
	text-decoration:none;
	text-shadow: 1px 1px 2px #f4f1da;
	}

#subtitle {
	float: left;
	width: auto;
	font-size: 1em;
	margin-top: -2%;
	}

#searchbox {
	float: right;
	width: auto;
	height: auto;
	z-index: 16;
	padding: 0px;
	margin-top: 6px;
}


/* basic text formats */

p {
	font-size:1em;
	line-height:1.5em;
	color:#000;
	margin-bottom: 1%;
	}

.description {
	margin: 1em 18% 1em 20%;
	}

a { 
color: #4e2509; 
text-decoration: none;
font-weight:bold;
}
a:visited {
	text-decoration: none;
	color: #4e2509;
}	
a:hover {
	text-decoration:none;
	text-shadow: 1px 1px 1px #f4f1da;
}	
a:active {
	text-decoration: none;
	color:#a76730;
}		

.caption {
	font-size: .85em;
	font-style:italic;
	}

.small-text {
	font-size:.9em;
	}


#content {
	width: 100%;
	float: left;
	height: auto;
	border-bottom-width: 1px;
	border-bottom-color: #0b299d;
	border-bottom-style: solid;
	padding-top: 0;
	padding-bottom: 1%;
	margin-bottom: 2%;
	z-index: 25;
	}

#contentbox {
	float: left;
	height: auto;
	padding: 0%;
	margin-right: 2%;
	z-index: 12;
	width:98%;
	}

h1 {
	margin-top: 0;
	font-weight:500;
	font-size: 1.8em;
	margin-bottom: .3em;
}

h2 {
	margin-top: 0;
	font-weight:500;
	font-size: 1.4em;
	margin-bottom:.5em;
}	

#sliderbox {
	float: right;
	width: 44%;
	padding: 1%;
	margin-top: 1.1em;
	margin-right: 0;
	}

#sliderbox2 {
	float: left;
	width: 100%;
	margin-top: 3.4%;
	margin-left: 1%;
	margin-right: 0;
	}	

.panel {
	float: left;
	height: auto;
	padding: .6%;
	z-index: 25;
	margin-bottom: 0;
	margin-top: 1%;
	margin-left:1%;
	margin-right:1%;
	font-size:.9em;
	line-height:1.3em; 
	color:#000;
	}		

.oval-photo {
	width:50%;
	}

.panel-photo {
	float:left;
	position:relative;
	width: 100%;
	height: auto;
	margin-top: 2%;
	margin-bottom:3%;
		border: 1px solid #4e2509;
	border-radius: 3px 3px 3px 3px;  /* for Chrome */
	}

.photo-right {
	position:relative;
	float:right;
	width:24%;
	margin-right:5%;
	margin-left:1%;
	}
	
 #box {
	 position:relative;
	 float: left;
	 width: 40%;
	 height: 24em;
	 border: 1px solid #fff;
	 
	  
	 }
	
.width20 {
	width: 20%;
	}

.width30 {
	width: 30%;
	}

.width31 {
	width: 30%;
	}

.width36 {
	width: 36%;
	}		

.width40 {
	width: 40%;
	}

.width50 {
	width: 50%;
	margin-top:2%;
	}

.width56 {
	width: 58%;
	}

.width60 {
	width: 60%;
	}

.width64 {
	width: 64%;
	}

.width70 {
	width: 70%;
	}

.width80 {
	width: 80%;
	}
	
.width90 {
	width: 90%;
	}

.top {
	margin-top: 18px;
	}

.rule {
	width: 100%;
	height: 6px;
	border-bottom: 1px solid #0b299d;
	margin-bottom: 1%
	}

.callout {
	margin:.6%;
	margin-left: 1.5%;
	margin-bottom:0;
	font-size:.9em;
	}
	
.mobile-show {
	display: none;
	}

#about {
	position: relative;
	float: right;
	margin-top: 1%;
	width:auto;
	}

.icon {
	float: right;
	width: 24px;
	height: auto;
	margin-left: 3%;
	}
	

.indented-text {
	margin-left: 5%;
	margin-right: 3%;
	margin-top: 0;
	}

	
.button {
	width: auto;
	float:left;
	margin-right: 1%;
	}
	
		
#siderail {
	float: left;
	font-size: .9em;
	height: auto;
	padding-top: 0;
	padding-right: 1%;
	padding-left: 1%;
	margin: 0px;
    color: #333;
	}	
	
.floatright {
	float: right;
	margin-top: 2%;
	}
	
	
#footer {
	float: left;
	width: 100%;
	margin-top: 0;
	margin-bottom: 2%;
	padding: 0;
	padding-bottom: 0;
	font-size: .9em;
	line-height: 1.3em;
	}
	
#footerlogo {
	float: left;
	width: 50px;
	height: 50px;
	background-image: url(../images/logo.svg);
	background-size:80%;
	background-repeat: no-repeat;
	background-position: 0px 0px;
	margin-top:-.9%;
	margin-right: 0;
	margin-left: .6%;	
	}
#footerlogo:hover {
	background-image: url(../images/logo-on.svg);
	}
	
.footertext {
	float: left;
	margin-left: 0;
	margin-top: .4%;
	margin-right: 4%;
	}	


#socialmediawidget {
	float: right;
	margin-top: 1%;
	margin-bottom: 2%;
	margin-right: 4px;
	}
.pdf-icon {
	margin-bottom: -12px;	
	}

@media screen and (max-width: 920px) {
	
.width30 {
	width: 46%;
	}

.float-clear {
	display: none;	
	}
}

@media screen and (max-width: 840px) {
	
.mobile-show {
	display: block;
	}

	
#searchbox {
	padding-top: 1%;
	padding-bottom: 4%;
}

.photobox {
	width: 20%;
}

.video {
	width: 66%;
	height: 224px;
	margin-bottom: 4%;
	}
	

}

@media screen and (max-width: 740px) {

p {
	margin-left: 1%;
}

#subtitle {
	margin-bottom: 2%;
}

#contentbox {
	width:95%;	
}

#logo-holder {
	margin-top: 2%;
	margin-left: 6%;
	margin-right: 2%;
	}

#searchbox {
	float: left;
	margin-top: 2%;
	margin-bottom: 2%;
}

#sliderbox {
	float: left;
	width: 100%;
	margin-left: 0;
}

#sliderbox2 {
	float: left;
	width: 100%;
	margin-left: 2%;
}

.description {
	margin: 1em 10% 1em 1%;
	}


#newsfeed {
	float: left;
	width: 100%;
	margin-top: 4%;
}

.video {
	width: 76%;
	height: 224px;
	margin-bottom: 4%;
	}

.photobox {
	width: 26%;
	margin-right: 3%;
}

.silo {
	float: left;
	width: 98%;
	margin-bottom: 4%;
}

.width20,
.width30,
.width31,
.width40,
.width50,
.width56,
.width60,
.width70,
.width80 {
	width: 94%;
	}	

}

@media screen and (max-width: 460px) {



#footer {
	float: left;
	margin-top: 4%;
	padding-top: 4%;
	margin-bottom: 4%;
	padding: 0;
	}

#footerlogo {
	margin-left: 2%;
	margin-top: 1%;
	margin-bottom:4%;
	margin-right: 3%;	
	}

	
.footertext {
	font-size: .9em;
	line-height: 1.25em;
	margin-bottom: 2%;
	}
		
.margin-left2 {
	margin-left: 2%;
	}
	

	

}