@charset "utf-8";
/* CSS Document */

#wrapper {
            width: 90%;
            margin: auto;
			
}

body {
	background-image: url(images/hallfield-dark-blue-bg.gif);
	
}

 #hallfield-banner {
            max-width: 100%;
        }
li {
	text-align:left;
	color:#fff;
	font-size:20px;
	font-family:avenir-b;
	padding-bottom:20px;
}

a {
	color:#FFF;

}

a:hover{
	color:#00aeef;
}

.onsite {
	position:absolute; 
	top:240px; 
	width:100%; 
	right:0px; 
	height:30px; 
	background-color:#00aeef; 
	text-align:center;
	color:#fff;
	font-size:20px;
	font-family:avenir-h;
	padding-top:3px;

}

p {
	text-align:left;
	color:#fff;
	font-size:20px;
	font-family:avenir-b;
}


.p1 {
	text-align:left;
	color:#fff;
	font-size:12px;
	font-family:avenir-b;
	padding-bottom:10px;
}



.p2 {
	text-align:left;
	padding-left: 50px;
	padding-bottom:10px;
	color:#fff;
	font-size:12px;
	font-family:avenir-b;
}

.p3 {
	text-align:left;
	padding-left: 100px;
	padding-bottom:10px;
	color:#fff;
	font-size:12px;
	font-family:avenir-b;
}

h1 {
	color:#00aeef;
	font-size:24px;
	font-family: avenir-k;
	text-align:left;	
}

h2 {
	color:white;
	font-size:18px;
	font-family:avenir-h;
	line-height:8px;
	
	
}

h3 {
	color:#00aeef;
	font-size:14px;
	font-family:avenir-h;
	line-height:8px;
	text-align:left;
}

h4 {
	color:#00aeef;
	font-size:11px;
	font-family:avenir-h;
	line-height:8px;
}

#nav{
  list-style-type: none;
  text-align:left;
  margin-left:0px;
  position: relative;
}

#nav li{
 display: inline-block; 
 position: relative;
}

#nav li a{
 display: block;
 padding: 5px 8px;
 color: #FFF; 
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 500;
 font-size: 14px;
 text-transform: uppercase;
}

#nav li a:hover{
  color: #00aeef;
}

#nav li ul {
  padding: 0;
  position: absolute;
  top: 25px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  z-index: 1000;
}
#nav li ul li { 
  background: #001f49; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
#nav li ul li:hover { background: #001f49; }
#nav li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  text-align: left;
}

#nav li ul li a{
  padding: 8px 10px;
}

@font-face {
            src: url(fonts/Avenir-Black.otf);
            font-family: avenir-k;
        }
@font-face {
            src: url(fonts/Avenir-BlackOblique.otf);
            font-family: avenir-ko;
        }
@font-face {
            src: url(fonts/Avenir-Book.otf);
            font-family: avenir-b;
        }				

@font-face {
            src: url(fonts/Avenir-BookOblique.otf);
            font-family: avenir-bo;
        }				
@font-face {
            src: url(fonts/Avenir-Heavy.otf);
            font-family: avenir-h;
        }				
@font-face {
            src: url(fonts/Avenir-HeavyOblique.otf);
            font-family: avenir-ho;
        }				
@font-face {
            src: url(fonts/Avenir-Light.otf);
            font-family: avenir-l;
        }				
@font-face {
            src: url(fonts/Avenir-LightOblique.otf);
            font-family: avenir-lo;
        }				
@font-face {
            src: url(fonts/Avenir-Medium.otf);
            font-family: avenir-m;
        }				
@font-face {
            src: url(fonts/Avenir-MediumOblique.otf);
            font-family: avenir-mo;
        }				
@font-face {
            src: url(fonts/Avenir-Oblique.otf);
            font-family: avenir-o;
        }				
@font-face {
            src: url(fonts/Avenir-Roman.otf);
            font-family: avenir-r;
        }	
		
		
        .story {
            width: 90%;
            padding: 5%;
        }
        
        .story img {
            max-width: 100%;
        }
		
		
		.zero {
            clear: both;
        }			

@media screen and (min-width:768px) and (max-width:960px){
    /* larger tablet css */
	
}

@media screen and (min-width:420px) and (max-width:768px) {

}



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

}