@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		9;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
	z-index:5;
}
#Header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 20px;
	height: 90px;
	display: block;
}
.logo {
	background-image: url(../images/WebbLogo_combined.png);
	background-repeat: no-repeat;
	clear: none;
	display: block;
	text-indent: -999em;
	overflow: hidden;
	background-size:contain;
	height:105px;
	width:300px;
	margin: 10px 0 0 0px;
	position: absolute;
	z-index:9998;
}

.callbox {
	display: none;
}
#menu-icon {

	display:inline-block;
	width: 40px;
	padding:0;
	margin:0;
	height: 40px!important;
	background: url(../images/menu-icon.png) center no-repeat;	
	top:-82px;
	position: absolute;
	right:10px;

}
#menu-icon a {
	padding:0;
	border: none;

}

a:hover#menu-icon {

	background-color: #444;

}


#Nav ul, #Nav:active ul { 

	display: none;
	position: absolute;
	float: right;
	padding: 15px 0 15px;
	background-color: rgba(30, 30, 30, 0.8);
	background-image: none;
	border: 3px solid #fff;
	right: 10px;
	top: -25px;
	width: 80%;

}

#Nav li {

	text-align: center;
	width: 100%;
	padding: 10px 0;
	margin: 0;

}

#Nav:hover ul {

	display: block;

}
#Nav-bgrnd {
	top: 40px;
	background-image: none;
	width:90%;
	padding-left:2em;
	display:block;
	height:60px;
	float:right;
	position: relative;
	z-index:4;
	
}
#Nav {
	clear: both;
	position:inherit;	
	float: right;
	margin:0 auto;	
	width: 100%;
	display: block;
	z-index:10000;
}
#Nav ul { margin: 0; padding: 0px; z-index: 10005; list-style:none;  }
#Nav li {  width: 100%; float:left; padding: 15px 0px 15px 0px;  /*position: absolute; top: 0; z-index: 10000;*/ font-family:'Lato', sans-serif; text-transform:uppercase; text-decoration:none;  border-bottom:#ccc solid 2px;   }
#Nav a { height: 1em; display:inline;  font-family:'Lato', sans-serif; color:#ffffff; font-size:20px; text-transform:uppercase; z-index: 10001; text-decoration:none; line-height: 25px; padding: 15px 0px 15px 0px; vertical-align:middle;   }
#Nav span { display: inline; padding: .8em;   }

#Nav a:hover, #Nav.on { color:#ee3940;}




/* ==|== Secondary Nav Styles ========================================================= */


.on { border-bottom: solid 2px #ee3940; color:#ee3940  }



#Feature {
	clear: both;
	float: left;
	margin-left: 0;
	margin-top:-3px;
	height:270px;
	width: 100%;
	display: block;
}
#article1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	background-color: #ebebeb;
	display: block;
	margin-bottom: 10px;
}
#article2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	background-color: #ebebeb;
	display: block;
	margin-bottom: 10px;
}
#article3 {
	clear: both;
	float: left;
	margin-left: 0;
	background-color: #ebebeb;
	width: 100%;
	display: block;
}
#content-area {
	background-color: #fff;
	width: 100%;
	margin-top: 125px;
	padding-top: 0px;
	min-height: 500px;
	
}

#content {
	padding-top: 0px;
	padding-right: 26px;
	padding-left: 26px;
	padding-bottom: 26px;
	
	
	
}

.rightImg {
	padding-left: 0px;
	float: none;
	clear: both;
	padding-right: 55px;
	padding-bottom: 18px;
}

#Footer-start {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	margin-top: 10px;
	padding-top: 15px;
	background-color: #ebebeb;
	min-height: 250px;
	color:#666666;
}
.footerContainer {
	margin-left: auto;
	margin-right: auto;
	width: 87.36%;
	padding-left: 1.82%;
	padding-right: 1.82%;
	/*font-family: 'Lato', sans-serif;*/
	font-family:"Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 15px;
}
#AboutUs {
	clear: both;
	float: left;
	/* [disabled]margin-left: 2px; */
	width: 37.5%;
	display: block;
	font-family: "Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}
#Contact {
	clear: none;
	float: left;
	margin-left: 4.1666%;
	width: 58.3333%;
	display: block;
	font-family:"Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}
#Social {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	font-family:"Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	position:relative;
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	z-index:5;
}
#Header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 20px;	
	height:80px;
	display: block;
}
.logo {
	background-image: url(../images/WebbLogo_combined.png);
	background-repeat: no-repeat;
	clear: none;
	display: block;
	text-indent: -999em;
	overflow: hidden;
	background-size:contain;
	height:166px;
	width:475px;
	margin: 10px 0 0 0px;
	position: absolute;
	z-index:9999;
}
.callbox {
	display: block;
}


#Nav-bgrnd {
	top: 90px;
	background-image: url(../images/nav_bgrnd.png);
	background-color: none;
	width:90%;
	padding-left:2em;
	display:block;
	height:45px;
	float:right;
	position:inherit;
	z-index:4;
	
}
#Nav ul, #Nav:active ul {
	clear: both;
	float: right;	
	position: inherit;
	background-image:none;
	background-color: rgba(30, 30, 30, 0);
	border: none;
	top: 10px;
	padding: 0px;
	margin:0 auto;	
	width: 85%;
	display: block;	
	z-index:9999;
	left: 60px;
}
#Nav ul { margin-top:-5px; margin-left: 120px; z-index: 10005; list-style:none; float:right;  }
#Nav li { width: auto;  padding: 0 .2em 0em .2em;  /*position: absolute; top: 0; z-index: 10000;*/ font-family:'Lato', sans-serif; color:#fff; padding: 0px 8px 0px 8px; text-transform:uppercase; text-decoration:none; border-bottom:none;   }
#Nav a { height: 22px; display:inline;  font-family:'Lato', sans-serif; color:#ffffff; font-size:15px; text-transform:uppercase; z-index: 10001; text-decoration:none; line-height: 20px; vertical-align:middle;  float:right; }
#Nav span { display: inline; padding: .5em;   }

#Nav a:hover, #Nav.on { color:#ee3940; }
#Nav .start { display:none;}

	
	
/* ==|== Secondary Nav Styles ========================================================= */

.on { border-bottom: solid 2px #ee3940; color:#ee3940;   }

#Nav ul { margin: 0; padding: 0; }
#Nav li ul { /* second-level lists */  position: absolute; list-style: none; clear: both; z-index: 10000; display:none; border-top:solid #34bbd1 3px; background-color:#333; padding:0px; margin-top:-11px;  /* using left instead of display to hide menus because display: none isn't read by screen readers */ }
#Nav li ul li { position: relative; text-transform:capitalize;    }
#Nav li ul li, nav li ul li a { background-image: none !important; clear: both;border-bottom: #555 solid 2px; text-transform:capitalize; padding: 5px 5px 5px 5px;    }
#Nav li ul li a { color: #fff; font-size: 14px;  height: auto; text-decoration: none; text-indent: 0 !important; vertical-align: middle; width: 140px; z-index: 1100; border-bottom:none;  }
#Nav li ul li a:hover { background: #333; color:#00bce4 !important; width:140px;   }
#Nav li:hover ul { /* lists nested under hovered list items */ position: absolute; margin-top:30px; margin-left:-120px; width: 150px; list-style: none; clear: both; z-index: 99999999; display:block; /* to fix the sticky hover state in ie7 */display: inline; }

#menu-icon {

	display:none;
	width: 40px;
	padding:0;
	margin:0;
	height: 40px!important;
	background: #4C8FEC url(../images/menu-icon.png) center;	
	top:-170px;
	position: absolute;
	right:10px;

}

a:hover#menu-icon {

	background-color: #444;

}




#Nav:hover ul {

	display: block;

}

#Feature {
	clear: both;
	float: left;
	margin-left: 0;
	margin-top:-3px;
	height:360px;
	width: 100%;
	display: block;
}
#article1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 31.2%;
	background-color: #ebebeb;
	display: block;
}
#article2 {
	clear: none;
	float: left;
	margin-left: 2.5%;
	background-color: #ebebeb;
	width: 31.897%;
	display: block;
}
#article3 {
	clear: none;
	float: left;
	background-color: #ebebeb;
	margin-left: 15px;
	width: 31.718%;
	display: block;
}

#content-area {
	background-color: #fff;
	width: 100%;
	margin-top: 141px;
	padding-top: 26px;
	min-height: 500px;
	
}

#content {
	padding: 26px;
	
	
	
}

.rightImg {
	float: right;
	padding-left: 10px;
	padding-right: 2px;
}

#Footer-start {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	color:#666666;
}
.footerContainer {
	width: 90.675%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	/*font-family: 'Lato', sans-serif;*/
	font-family:"Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 15px;
}
#AboutUs {
	clear: both;
	float: left;
	margin-left: 15px;
	width: 29.718%;
	display: block;
	font-family: "Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}
#Contact {
	clear: none;
	float: left;
	margin-left: 4.464%;
	width: 29%;
	display: block;
	font-family: "Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}
#Social {
	clear: none;
	float: left;
	margin-left: 33px;
	width: 28%;
	display: block;
	font-family: "Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}
.feed {
    border: none;
    overflow: hidden;
    width: 300px;
    height: 450px;
    float: left;
}

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
	position:relative;
	width: 88.2%;
	max-width: 960px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: auto;
	z-index:5;
}
#Header {
	clear: both;
	float: left;
	margin-left: 0;
	width: 20px;
	height:80px;
	display: block;
}
.logo {
	background-image: url(../images/WebbLogo_combined.png);
	background-repeat: no-repeat;
	clear: none;
	display: block;
	text-indent: -999em;
	overflow: hidden;
	background-size:contain;
	height:229px;
	width:656px;
	margin: 10px 0 0 0px;
	position: absolute;
	z-index:9999;
}
.callbox {
	display: block;
}

#Nav {
	clear: both;
	position:inherit;	
	float: right;
	margin:0 auto;	
	width: 100%;
	display: block;
	z-index:10000;
}
#Nav-bgrnd {
	top: 120px;
	background-image: url(../images/nav_bgrnd.png);
	background-color: none;
	width:90%;
	padding-left:2em;
	display:block;
	height:40px;
	float:right;
	position:inherit;
	z-index:4;
	
}

#Nav ul, #Nav:active ul {
	clear: both;
	float: right;	
	position: inherit;
	background-image:none;
	background-color: none;
	border: none;
	top: 40px;
	padding: 0px;
	margin: 0px auto;	
	width: 90%;
	display: block;	
	z-index:9999;
	left: 180px;
}
#Nav ul { margin: 0; padding: 0; z-index: 10005; list-style:none; float:right;  }
#Nav li { width: auto; padding: 8px;  /*position: absolute; top: 0; z-index: 10000;*/ font-family:'Lato', sans-serif; color:#fff; text-transform:uppercase; text-decoration:none; border-bottom:none;   }
#Nav a { height: 22px; display:inline;  font-family:'Lato', sans-serif; color:#ffffff; font-size:18px; text-transform:uppercase; z-index: 10001; text-decoration:none; line-height: 22px; padding: 0px; vertical-align:middle;  float:left; }
#Nav span { display: inline; padding: .8em;   }

#Nav a:hover, #Nav.on { color:#ee3940; underline:#ffffff;}
#Nav .end {background:none;}
/* ==|== Secondary Nav Styles ========================================================= */

.on { border-bottom: solid 2px #ee3940; color:#ee3940  }

#Nav ul { margin: 0; padding: 0; }
#Nav li ul { /* second-level lists */  position: absolute; list-style: none; clear: both; z-index: 10000; display:none; border-top:solid #ee3940 3px; background-color:#333; padding:0px; margin-top:-11px;  /* using left instead of display to hide menus because display: none isn't read by screen readers */ }
#Nav li ul li { position: relative; text-transform:capitalize;    }
#Nav li ul li, nav li ul li a { background-image: none !important; clear: both;border-bottom: #555 solid 2px; text-transform:capitalize; padding: 5px 5px 5px 5px;    }
#Nav li ul li a { color: #fff; font-size: 14px;  height: auto; text-decoration: none; text-indent: 0 !important; vertical-align: middle; width: 140px; z-index: 1100; border-bottom:none;  }
#Nav li ul li a:hover { background: #333; color:#ee3940 !important; width:140px;   }
#Nav li:hover ul { /* lists nested under hovered list items */ position: absolute; margin-top:30px; margin-left:-120px; width: 150px; list-style: none; clear: both; z-index: 99999999; display:block; /* to fix the sticky hover state in ie7 */display: inline; }

#menu-icon {

	display: hidden;
	width: 40px;
	height: 40px;
	background: #4C8FEC url(../images/menu-icon.png) center;

}

a:hover#menu-icon {

	background-color: #444;
	border-radius: 4px 4px 0 0;

}

#Feature {
	clear: both;
	float: left;
	margin-left: 0;
	margin-top: -3px;
	height: 377px;
	width: 100%;
	display: block;
}
#article1 {
	clear: both;
	float: left;
	margin-left: 0;
	background-color: #ebebeb;
	width: 32%;
	min-height: 400px;
	display: block;
}
#article2 {
	clear: none;
	float: left;
	background-color: #ebebeb;
	margin-left: 2.0408%;
	width: 32%;
	min-height: 400px;
	display: block;
}
#article3 {
	clear: none;
	float: left;
	background-color: #ebebeb;
	margin-left: 2.041%;
	width: 31.5%;
	min-height: 400px;
	display: block;
}

#content-area {
	background-color:#fff;
	width: 100%; 
	margin-top: 175px;
	padding-top: 60px;
	min-height: 500px;
	
}

#content {
	padding: 26px;
	
	
	
}
.rightImg {
	float: right;
	padding-left: 10px;	
}
#Footer-start {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	color:#666666;
}
.FooterContainer {
	width: 88.2%;
	max-width: 1232px;
	padding-left: 0.9%;
	padding-right: 0.9%;
	margin: 0 auto;
	/*font-family: 'Lato', sans-serif;*/
	font-family:"Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 16px;
}
#AboutUs {
	clear: both;
	float: left;
	margin-left: 16px;
	width: 30.571%;
	display: block;
	font-family: "Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}
#Contact {
	clear: none;
	float: left;
	margin-left: 3.5%;
	width: 30.571%;
	display: block;
	font-family: "Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}
#Social {
	clear: none;
	float: left;
	margin-left: 27px;
	width: 26.776%;
	display: block;
	font-family: "Lato", Arial, Helvetica, sans-serif, "Century Gothic";
	font-size: 14px;
}
.feed {
    border: none;
    overflow: hidden;
    width: 100%;
    height: 450px;
    float: left;
}
}