/* COE Banner*/
.coeBannerWrapper {
	width: 100%;
	
	background-color: white;
}
.coeBannerWrapper:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
}
	.coeBanner {
		max-width: 1170px;
		margin: 0 auto;
		
		background-color: white;
	}
		.coeBanner .wrapper {
			overflow:hidden;
			display:inline-block;
			margin:5px 0;
			font-size:13px;
			line-height:1.5em;
		}
		@media screen and (max-width: 565px) {
			.coeBanner .wrapper {
				width: 100%;
			}
		}
		.coeBanner .logo {
			float: left;
			margin-right:-10px;
			margin-left:20px;
		}
			.coeBanner img {
				height: auto;
				vertical-align: middle;
			}
			.coeBanner .logo img {
				width: 150px;
				margin-top: 8px;
			}
		.coeBanner .collegeTitle {
			float: left;
			
			font-size:1.3em;
			margin: 10px 0 0 25px;
			padding: 0 0 0 25px;
			
			border-left: 2px solid #ff6600;
		}
			.coeBanner .collegeTitle a {
				font-size: 1em;
				font-weight: 300;
				line-height: 1.5em;
				font-family: "Roboto", sans-serif;
				
				color: #777;
				text-decoration: none;
			}
			.coeBanner .collegeTitle:hover a {
				color:#ff6600;
			}
		.coeBanner .topBannerNav {
			float: right;
		}
			.coeBanner .topBannerNav .bars {
				display:none;
			}
			.coeBanner .topBannerNav ul {
				list-style-type: none;
				line-height:22px;
			}
				.coeBanner .topBannerNav ul#bannerNav li {
					float: left;
					
					border-left: 1px solid #eaeaea;
					font-family: "Roboto Condensed", sans-serif;
				}
				.coeBanner .topBannerNav li:last-child {
					border-right: 1px solid #eaeaea;
				}
				.coeBanner .topBannerNav li:hover {
					color: #ffffff;
					background-color: #660000;
				}
				.coeBanner .topBannerNav a {
					float: left;
					font-size: 14px;
					padding: 15px;
					color:black;
				}
				.coeBanner .topBannerNav a:hover {
					color: #ffffff;
				}
			.coeBanner .topBannerNav .bars > ul {
				display:none;
			}
		
		
		
		.coeBanner .topBannerNav ul.mobile-nav > li:last-child {
			border:none;
		}
		.topBannerNav > .bars > ul.mobile-nav > li.back {
			font-size:.8em;
			padding:1em 0 1em 1.4em;
			cursor:pointer;
			color:black;
		}
			.topBannerNav > .bars > ul.mobile-nav > li.back:hover {
				color:#ff6600;
			}
		.topBannerNav > .bars > ul.mobile-nav > li.back:before {
			position:absolute;
			top:1em;
			left:.5em;
			font-family:"FontAwesome";
			content:"\f100";
		}
			.coeBanner .topBannerNav .bars > ul.mobile-nav > li > a {
				display:inline-block;
				float:none;
				border:none;
				padding:.8em .5em;
				margin:0;
				width:100%;
			}
			.coeBanner .topBannerNav .bars > ul.mobile-nav > li > .seeChildren {
				position:absolute;
				right:0;
				top:0;
				height:100%;
				font-size:1.1em;
				width:2.6em;
				padding:.6em 0;
				text-align:center;
				background-color:#660000;
				color:white;
			}
				.coeBanner .topBannerNav .bars > ul.mobile-nav > li > .seeChildren:hover {
					background-color:#ff6600;
				}
			.coeBanner .topBannerNav .bars > ul.mobile-nav > li > i {
				position:absolute;
				right:0;
				padding:.5em 1em;
				color:black;
			}
				.coeBanner .topBannerNav .bars > ul.mobile-nav > li > i:hover {
					color:#ff6600;
				}

/* ECE Banner*/
.eceBannerWrapper {
	width: 100%;
	
	background-image: url("../images/templates/ece_banner_bg.png");
	background-repeat: no-repeat;
	background-position: center;
	background-color: #660000;
	
}
.eceBannerWrapper:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
}
	.eceBanner {
		max-width: 1170px;
		margin: 0 auto;
		padding: 0;
		overflow:hidden;
	}
	.eceBanner:after {
		content: " ";
		display: block;
		height: 0;
		clear: both;
	}
		.eceBanner .wrapper {
			position:relative;
			overflow:hidden;
			line-height:22px;
		}
		.eceBanner .logo {
			display:inline-block;
			padding:20px 0 20px 20px;
			position:relative;
			background-color:#530E10;
		}
		.eceBanner .logo::after {
			content:" ";
			position:absolute;
			top:0;
			right:-95px;
			border:48px solid;
			border-color:#530E10 transparent transparent #530E10;
		}
			.eceBanner .logo a {
				overflow:hidden;
			}
		.eceBanner .departmentTitle {
			position:absolute;
			left:270px;
			bottom:20px;
			display:inline-block;
			z-index:1;
		}
			.eceBanner .departmentTitle span {
				color: #ffffff;
			}

@media (max-width:565px) {
	.topNav .search {
		right:auto;
		left:0;
	}
	.coeBanner .logo img {
		height:2.5em;
	}
	.coeBanner .collegeTitle {
		display:none;
	}
	.eceBanner .departmentTitle {
		display:none;
	}
	.coeBanner .topBannerNav {
		font-size:16px;
		position:relative;
		z-index:1002;
	}
	.coeBanner .topBannerNav > ul {
		display:none;
	}
	.coeBanner .topBannerNav > ul > li {
		display:none;
	}
	#main-navigation.topNav.skinny .menuAnchor {
		display:none;
	}
	#main-navigation.topNav.skinny .menuAnchor + ul {
		display:none;
	}
	#main-navigation.topNav.skinny > div > ul {
		display:none;
	}
	.coeBanner .topBannerNav .bars {
		display:block;
		height:inherit;
		/*padding:.66em .8em;*/
		background-color:#3E3E4A;
		color:white;
		cursor:pointer;
		position:relative;
		z-index:1001;
		position:fixed;
		top:0;
		right:0;
	}
		.coeBanner .topBannerNav .bars i {
			font-size:1.4em;
			font-weight:100;
			padding:.48em .55em;
		}
		.coeBanner .topBannerNav .bars > ul {
			display:block;
			position:absolute;
			top:99%;
			right:0;
			background-color:white;
			margin:0;
			padding:0;
			overflow:hidden;
			box-shadow:0 .2em .3em #333;
			/*transition:height .5s;*/
		}
			.coeBanner .topBannerNav .bars > ul > li {
				float:none;
				overflow:hidden;
			}
			.coeBanner .topBannerNav .bars > ul > li:hover {
				background-color:white;
			}
				.coeBanner .topBannerNav .bars > ul > li > a {
					font-size:.8em;
					margin:0 1.3em;
					padding:.8em .2em;
					border-bottom:1px solid #dfdfdf;
					width:15em;
				}
				.coeBanner .topBannerNav .bars > ul > li:last-child > a {
					border:none;
				}
				.coeBanner .topBannerNav .bars > ul > li > a:hover {
					color:#ff6600;
				}
				
	.eceBanner .logo {
		padding:12px 0 12px 20px;
	}
	.eceBanner .logo::after {
		border-width:28.5px;
		right:-56.5px;
	}
		.eceBanner .logo img {
			height:33px;
			width:99.6px;
		}
}