@import url("navigation.css");

body{
	margin-left:auto;
	margin-right:auto;
	width:80%;
	/*background-color:#E7ECEF; /*blue */
	background-color:#373F47; /*black */
	/*background-color:#274C77;   /*darker blue */
	/* background: url('Images/backgroundImage.png') no-repeat scroll;*/
		
}

#header{
	background-color:#E7ECEF;
	position:relative;
	height:110px;
	width:100%;
	color:#274C77;
}

#logo{
	float:left;
	border-style: none;
	margin-left:3.5%;
}
	

#title{
	margin-left:50px;
	float:left;
	color:#274C77;
}

#title h1{
	font-size:30px;
	font-family: 'arial';
}


#title h3{
	font-size:15px;
	color:rgb(93,116,148);
	font-family:'arial';
}


#slideWrapper{
	float:left;
	background-color:rgb(93,116,148);
	position:relative;
	height:405px;
	width:100%;
	
}

#slideshow{	
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	max-width:955px;
	max-height:385px;
}

#slideshow img {
	z-index:1;
	max-width:955px;
	max-height:385px;
	height: 100%;
	width:100%;
}

#imageCaption{
	font-size:10px;
	height:20px;
	float:left;
	width:100%;
	background-color:rgb(93,116,148);
	text-align:center;
	color:#E7ECEF;
	font-family:'arial';
}

#main{
	width:98%; 
	padding:1%;
	/*padding:20px;*/
	background-color:#E7ECEF;
	float:left;
	color:#373F47;
	font-family:'arial';
	text-align: justify;
}

h2,h3{
	color:#274C77;
}

li{
	font-size:1em;
}

#footer{
	float:left;
	height:20%;
	position:relative;
	color:#E7ECEF;
	text-align:center;
	background-color:rgb(93,116,148);
	padding:0;
	font-size:12px;
	font-family:'arial';
}
#footer a{
	color:#E7ECEF;
}


#footer img{
	height:40%;
	width:40%;
}
		
	
#wrapper{
	background-color:rgb(93,116,148);
	position:relative;
	height:46px;
	width:100%;
}

#text{
	float:left;
	width:50%;
}

#text h3{
	color:#274C77;
}	

#text li{
 	color: #274C77;
	list-style:square;
}

#text li p {
    color: #373F47; 
}

#image{
	float:right;
	width:50%;
}
#image #drawings{
	height:50%;
	width:100%;
}

#aboutPic{
	width:100%;
	max-width:1198px;
	max-height:875px;
	margin-top:20px;
}

#gallery{
	float:left;
	width:75%;
	background-color:rgb(93,116,148);
	color:#E7ECEF;
}

#gallery img{
	float:left;
	width:48%;
	height:200px;
	padding:1%;
}

#gallery p{
	font-size:12px;
	margin-left:1%;
}


#construction{
	padding:10px;
	font-family:'arial';
}

#imageWrapper{
	float:left;
	width:60%;
}
#drawings,#block{
	width:48%;
	float:left;
}
#block{
	margin-right:2%;
}

#contact{
	position:relative;
	width:100%;
}
#city{
	float:left;
	width:30%;
}
#county{
	float:left;
	width:70%;
}

#maps{
	width:100%;
	position:relative;
}
#googleMap iframe{
	float:left;
	width:46%;
	padding:1%;
}

#links{
	float:left;
	width:30%;
}

#external{
	float:left;
	width:100%;
}

#news{
	float:left;
	width:70%;
	height:100%;
}

#link {
  background: #333;
  list-style: none;
  margin: 0;
  margin-right:3%;
  padding: 0;
  width: 90%;
  float:left;
}

#link ul{
	padding:0;
	margin:0;
}

#link li {
  font: 67.5% "Lucida Grande", "Bitstream Vera Sans", "Trebuchet Unicode MS", Verdana, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  list-style: none;
}
#link a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #E7ECEF;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
}
#link a:hover {
  background: #2580a2 url("Images/hover.gif") left center no-repeat;
  color: #E7ECEF;
  padding-bottom: 8px;
}

/**----------------------------------responsive---------------------------------*/
@media(max-width:1200px){
	#footer p {
		font-size:8px;
	}
	#table{
		width:80%;
		height:80%;
	}
}

@media(max-width:900px){
	#title{
		height:100%;
	}
	#title h1{
		font-size:25px;
	}
	#title h3{
		font-size:12px;
	}
	.navigation li a{
		font-size:12px;
	}
	#table{
		width:80%;
		height:80%;
	}

}

@media(min-width:650px) and (max-width:900px){
	#title{
		height:100%;
	}
	#title h1{
		font-size:20px;
	}
	#title h3{
		font-size:10px;
	}
	.navigation li a{
		font-size:12px;
	}
	
	#logo{
		height:75px;
		width:60px;
	}
	#header{
		height:90px;
	}
	
	#main h2{
		font-size:20px;
	}
	#main p,li{
		font-size:12px;
	}
	
	#text,#image{
		float:left;
		width:100%;
	}
	
	#gallery{
		width:67%;
	}
	#imageWrapper{
		width:40%;
	}
	
}

@media(min-width:520px) and (max-width:650px){
	#title{
		height:100%;
	}
	#title h1{
		font-size:10px;
	}
	#title h3{
		font-size:8px;
	}
	.navigation li a{
		font-size:8px;
	}
	
	#logo{
		height:65px;
		width:50px;
	}
	#imageCaption{
		font-size: 10px;
	}
	
	#header{
		height:80px;
	}
	
	#slideWrapper{
		height:50%;
	}
	
	#main h2{
		font-size:15px;
	}

	#main p,li{
		font-size:8px;
	}
	
	#text,#image{
		float:left;
		width:100%;
	}
	
	#gallery{
		width:47%;
	}
	#gallery img{
		height:80%;
		width:96%;
		padding:2%;
	}
	#gallery p{
		font-size:0px;
	}
	
	#imageWrapper{
		width:50%;
	}
	
}

@media(min-width:320px) and (max-width:520px){
	#header{
		height:40px;
	}
	#title{
		margin-left:10px;
	}
	
	#title h1{
		font-size:10px;
	}
	#title h3{
		font-size:5px;
	}
	#logo{
		height:30px;
		width:20px;
	}
	.navigation li a{
		font-size:15px;
	}
	
	#imageCaption{
		font-size: p9x;
	}
	
	#slideWrapper{
		height:50%;
	}
	#main h2{
		font-size:12px;
	}
	#main p,li{
		font-size:6px;
	}
	
	#text,#image{
		float:left;
		width:100%;
	}
	
	#footer p {
		font-size:6px;
	}
	#gallery{
		background-color:#E7ECEF;
		width:37%;
	}
	#gallery img{
		width:98%;
		height:98%;
		padding-bottom:50%;
	}
	#gallery p{
		font-size:0px;
	}
	#imageWrapper{
		margin-top:5px;
		text-align:center;
		position:relative;
		width:100%;
	}
	
	#menuWrapper{
		float:left;
		width:100%;
	}
	#menuWrapper #menu{
		margin-left:10%;
		margin-right:10%;
		width:80%;
	}
	#links,#news{
		width:50%;
	}
	#footer{
		height:10%;
	}
	#footer img{
		height:40%;
		width:40%;
	}

}