/* CSS Document */

img {
     max-width: 100%;
    height: auto;box-shadow: 4px 2px 4px 2px #333;
}

#pagewrap {
	font-family:"Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;
color:#666666;
	background-image: url("bg.jpg");
	border: 5px solid #333;
    width: 100%;
	max-width:950px;
  margin: auto;
}
#styles img {box-shadow: none;}
header {
  height: auto;
  max-width:950px;
  padding: 3%;
}
#title {font-size: 200%; color:#267471; text-align: center;margin-top:5px;}

h1 {font-size: 30px; color:#267471; text-align: center;margin-top:5px;}

#desc {
  max-width:950px;
  margin:auto;
 
 color:#666666;
border: 4px solid #333;border-radius: 20px;
 margin:0px 25px 15px 25px;
	padding:3%;
	background-color:#fff;box-shadow: 2px 1px 2px 2px #000;
}
#info {
  max-width:950px;
  margin:auto;
  border-radius: 20px;
  font-size:smaller;
 color:#666666;
	
border: 4px solid #333;
 margin:0px 25px 15px 25px;
	padding:3%;
	background-color:#fff;box-shadow: 2px 1px 2px 2px #000;
}

#footer{
  height: auto;
  max-width:950px;
  padding: 0% 3%;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */

@media screen and (max-width: 950px) {
  #pagewrap {
	width: 94%;
  }
  header,
  footer {
	padding: 3%;
  }
#title {font-size: 160%; color:#267471; text-align: center;margin-top:5px;}
}
/* for 480px or less */

@media screen and (max-width: 480px) {
  header {
	height: auto;
  }
  h1 {
	font-size: 2em;
  }

}

/* Responsive Navigation Bar */
#navlinks {margin:auto;width:80%;}
#navlinks img {box-shadow: 2px 2px 2px 2px #333;}
		.nav{padding-left:0;margin-bottom:0;list-style:none;}
		.nav:before, .nav:after{display:table;content:" ";}
		.nav:after{clear:both;}
		.nav:before, .nav:after{display:table;content:" ";}
		.nav:after{clear:both;}
		.nav > li{position:relative;display:block;}
		.nav > li > a{position:relative;display:block;padding:10px 10px;}
		.nav > li > a:hover, .nav > li > a:focus{text-decoration:none;background-color:transparent;}
		.nav > li > a > img{max-width:170px;}
		
		.navbar{position:relative;min-height:50px;margin-bottom:20px;border:1px solid transparent;}
		@media (min-width:768px){.navbar{border-radius:4px;}
		}
		.navbar-header:before, .navbar-header:after{display:table;content:" ";}
		.navbar-header:after{clear:both;}
		.navbar-header:before, .navbar-header:after{display:table;content:" ";}
		.navbar-header:after{clear:both;}
		@media (min-width:768px){.navbar-header{float:left;}
		}
		.navbar-collapse{max-height:340px;padding-right:15px;padding-left:15px;overflow-x:visible;border-top:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);-webkit-overflow-scrolling:touch;}
		.navbar-collapse:before, .navbar-collapse:after{display:table;content:" ";}
		.navbar-collapse:after{clear:both;}
		.navbar-collapse:before, .navbar-collapse:after{display:table;content:" ";}
		.navbar-collapse:after{clear:both;}
		.navbar-collapse.in{overflow-y:auto;}
		@media (min-width:768px){.navbar-collapse{width:auto;border-top:0;box-shadow:none;align:center;}
		.navbar-collapse.collapse{display:block !important;height:auto !important;padding-bottom:0;overflow:visible !important;}
		.navbar-collapse.in{overflow-y:visible;}
		}
		@media (min-width:768px){.container > .navbar-header, container > .navbar-collapse{margin-right:0;margin-left:0;}
		}
		.navbar-brand{padding:15px 15px;font-size:18px;line-height:20px;}
		.navbar-brand:hover, .navbar-brand:focus{text-decoration:none;}
		@media (min-width:768px){.navbar > .container .navbar-brand{margin-left:-15px;}
		}
		.navbar-nav{margin:7.5px -15px;}
		
		.navbar-nav > li > a{padding-top:10px;padding-bottom:10px;line-height:20px;}
		@media (min-width:768px){.navbar-nav{float:left;margin:0;}
		.navbar-nav > li{float:left;}
		.navbar-nav > li > a{padding-top:0px;padding-bottom:15px;}
		.navbar-nav.navbar-right:last-child{margin-right:-15px;}
		}
		@media (min-width:768px){.navbar-left{float:left !important;}
		.navbar-right{float:right !important;}
		}