@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:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	5;
	
	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/
*/


/* Phones Landscape Layout: 482px to 767px. Inherits styles from: Mobile Layout. */
@media only screen and (max-width: 767px) {
#headerBackground {
	clear: both;
	float: none; /*this needed to be here because of hovering over nav menu the page would move down a little */
	/*margin: 0;	*/
}
#header {
	clear: both;
	float: none;
	margin-left: 0;
	width: 100%;
	display: block;
}
#hlink {
	/*float: left;*/ /*keeps background in ie in the right spot */
}


#navDeptBackground {
	clear: both;
	float: none;
	width: 100%;
}
#navDeptMenu {
	clear: both;
	float: none;
	margin: auto;
}

#cbp-hrmenu {
	margin-left: auto;
	margin-right: auto;
	/*float: left;*/
	position: relative;
	z-index: 10; /* keep for tomorrow */
	/*z-index: 2;*/
}
/*#page {
	display: none;
}*/
#seal {
	clear: both; /* both of test prevent things from moving to the left while hovering over something */
	width: 100%;
	display: block;
	/*margin-top: 0;
	position: relative;
	z-index: 102;*/
}
.gridContainer {
	/*width: 99.4047%;*/
	/*max-width: 1059px; removed today*/
	width: 100%;
	/*padding-left: 0.4976%;
	padding-right: 0.3976%;
	margin: 0 auto;
	padding-top: 3px;*/
	
}


#importantNotice {
	clear: none;
	float: left;
	margin-left: 0.2615%;
	width: 100%;
	display: block;
}
#quickLinks {
	clear: both;
	float: left;
	margin-left: 0.2615%;
	width: 100%;
	display: block;
}
#blueFooter {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#deptNarr {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#deptContactInfo {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#hiliteLinks {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#deptLinks {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

}

	


/* Tablet Layout: 768px to 1075px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 768px) and (max-width: 1075px) {
#headerBackground {
	clear: both;
	float: none; /*this needed to be here because of hovering over nav menu the page would move down a little */
	margin: 0;
}
#header {
	clear: both;
	float: none;
	margin: 0;
}
#hlink {
	/*float: left;*/ /*keeps background in ie in the right spot */
	/*margin-top: .5%;
	margin-left: -2.7%;*/
	
	
	/*border:1px #FF0004 solid;*/
	margin-top: 0;
	position: relative;
	/*width: 100%;*/ /*needs to be in to keep search box from moving on top of hlinks */
	margin-left: 1.10%;   /* this moves search left and right */

}

#navDeptBackground {
	clear: both;
	float: none;
	margin: auto;
}
#navDeptMenu {
	clear: both;
	float: none;
}

#cbp-hrmenu {
	margin-left: auto;
	margin-right: auto;
	/*float: left;*/
	position: relative;
	z-index: 10; /* keep for tomorrow */
	/*z-index: 2;*/
}

/*#page {
	display: none;
}*/
#seal {
	clear: both; /* both of test prevent things from moving to the left while hovering over something */
	width: 100%;
	display: block;
	margin-top: 0;
	position: relative;
	z-index: 102;
}
.gridContainer {
	max-width: 1075px;
	padding-left: 0.4976%;
	padding-right: 0.3976%;
	margin: 0 auto;
	padding-top: 0;
}


#social {
	position: relative;
	z-index: 1;
	clear: both;
	float: none;
	width: 99.3%;
}

#blueFooter {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
}


/* Laptop Layout: Min width 1075px - max width 1400px*/
@media only screen and (min-width: 1076px) and (max-width: 1400px) {
#headerBackground {
	clear: both;
	float: none;
	margin: auto;	
}

#header {
	clear: both;
	float: none;
	margin-top: -29px;
}

#hlink {
	float: left; /*keeps background in ie in the right spot */
	margin-top: 1%;  /*this moves hlinks up and down */
	margin-left: 2%;   /* this moves hlinks links left and right */
	
}

#navDeptBackground {
	clear: both;
	float: none;
	width: 100%;
}

#navDeptMenu {
	clear: both;
	float: none;
}


#cbp-hrmenu {
	margin-left: auto;
	margin-right: auto;
	/*float: left;*/
	position: relative;
	z-index: 10; /* keep for tomorrow */
	/*z-index: 2;*/
}
#seal {
	clear: both; /* both of test prevent things from moving to the left while hovering over something */
	width: 100%;
	display: block;
	margin-top: 0;
	
}
.gridContainer {
	max-width: 1060px;
	padding-left: 0.1984%;
	padding-right: 0.1984%;
	margin: 0 auto;
	margin-top: 3px;

}

#social {
	position: relative;
	z-index: 1;
	clear: both;
	float: none;
	width: 99.95%;
}

#blueFooter {
	position: relative;
	z-index: 1;
	clear: both;
	float: none;
	width: 100%;
}

footer {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	
}	
}



/* Desktop Layout: min-width of 1401px and greater.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 1401px) {
#headerBackground {
	clear: both;
	float: none;
	margin: auto;	
}

#header {
	clear: both;
	float: none;
	margin-top: -29px;
}

#hlink {
	float: left; /*keeps background in ie in the right spot */
	margin-top: -.25%;  /*this moves hlinks up and down */
	margin-left: -1.7%;   /* this moves hlinks links left and right */
}


	#navDeptBackground {
	clear: both;
	float: none;
	width: 100%;
}

#navDeptMenu {
	clear: both;
	float: none;
}


#cbp-hrmenu {
	margin-left: auto;
	margin-right: auto;
	/*float: left;*/
	position: relative;
	z-index: 10; /* keep for tomorrow */
	/*z-index: 2;*/
}


#seal {
	clear: both; /* both of test prevent things from moving to the left while hovering over something */
	width: 100%;
	display: block;
	margin-top: 0;	
}
.gridContainer {
	max-width: 1060px;
	padding-left: 0.1984%;
	padding-right: 0.1984%;
	margin: 0 auto;
	margin-top: 3px;
}


#social {
	position: relative;
	z-index: 1;
	clear: both;
	float: none;
	width: 99.95%;
}

#blueFooter {
	clear: both;
	float: none;
	width: 100%;
	display: block;
}

footer {
	clear: both;
	float: none;
	width: 100%;
	display: block;
}
}