.menu {
    position: relative;
    z-index: 900;
}

.main-menu {
	width:848px;
	font-size: 13px;
	font-family:Helvetica, Arial, sans-serif;
	background-color:#ececec;
	height:60px
	
}

.main-menu img{
	float:left
	
}


.main-menu  ul {
  list-style: none;
  padding: 0;


}

.main-menu ul li {
  display: block;
  position: relative;
  float: left;
    cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;


}

.main-menu ul li ul li{
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

.main-menu ul li ul {
	border-top: 1px solid #fff;
	opacity: 0;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
   min-width: 190px;
	
}


/* This hides the dropdowns */
.main-menu li ul { 
display: none; 
opacity:0;
}

  
  .main-menu ul li.sub > a::after {
    content: "»";
    position: absolute;
    right: 4px;
}


.main-menu ul li a {
  display: block;
  padding: 5px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  background-color:#333
}

.main-menu ul li a:hover { 
background: #000; 
color:#fff;
}





/* Display the dropdown */

.main-menu li:hover > ul {
  display: block;
  position: absolute;
   opacity: 1;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}

.main-menu li:hover li { float: none; }

.main-menu li:hover a {
	background-color: #333;
	color:#fff
}

.main-menu li:hover li a:hover { 
	background-color: #000; 
}

.main-menu .main-navigation li ul li { 
border-top: 0; 
}




/* Displays second level dropdowns to the right of the first level dropdown */

.main-menu ul ul ul {
  left: 100%;
  top: 0;
}



/*Disabilities*/

.main-menu .disabilities span{
	display:none
}


.main-menu li.disabilities a {
	background-color: #bb1c21;
	color:#fff
}

.main-menu li.disabilities:hover a {
	background-color: #bb1c21;
	color:#fff
}

.main-menu li.disabilities:hover li a:hover { 
	background-color: #6b0f12; 
}

.main-menu a.dis:link, .main-menu a.dis:visited{
	background-image:url(../nav-img/disabilities.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
	
}
.main-menu a.dis:hover, .main-menu a.dis:active{
	background-color:transparent;
	background-image:url(../nav-img/disabilities-over.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
	
}

/*academics*/

.main-menu .academics span{
	display:none
}

.main-menu li.academics a {
	background-color: #67318f;
	color:#fff
}

.main-menu li.academics:hover a {
	background-color: #67318f;
	color:#fff
}

.main-menu li.academics:hover li a:hover { 
	background-color: #4d2564; 
}

.main-menu a.aca:link, .main-menu a.aca:visited{
	background-image:url(../nav-img/academics.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px	
}
.main-menu a.aca:hover, .main-menu a.aca:active{
	background-color:transparent;
	background-image:url(../nav-img/academics-over.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px	
	}

/*social skills*/

.main-menu .socialskills span{
	display:none
}

.main-menu li.socialskills a {
	background-color: #223a8b;
	color:#fff
}

.main-menu li.socialskills:hover a {
	background-color: #223a8b;
	color:#fff
}

.main-menu li.socialskills:hover li a:hover { 
	background-color: #162559; 
}



.main-menu a.soc:link, .main-menu a.soc:visited{
	background-image:url(../nav-img/socialskills.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
}

.main-menu a.soc:hover, .main-menu a.soc:active{
	background-color:transparent;
	background-image:url(../nav-img/socialskills-over.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
	}
	
/*behavior management*/

.main-menu .behavior span{
	display:none
}


.main-menu li.behavior a {
	background-color: #1999cf;
	color:#fff
}

.main-menu li.behavior:hover a {
	background-color: #1999cf;
	color:#fff
}

.main-menu li.behavior:hover li a:hover { 
	background-color: #0f7dab; 
}

.main-menu a.beh:link, .main-menu a.beh:visited{
	background-image:url(../nav-img/behaviormanagement.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
}

.main-menu a.beh:hover, .main-menu a.beh:active{
	background-color:transparent;
	background-image:url(../nav-img/behaviormanagement-over.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
	}

/*picture cards*/

.main-menu .picturecards span{
	display:none
}

.main-menu li.picturecards a {
	background-color: #59ae39;
	color:#fff
}

.main-menu li.picturecards:hover a {
	background-color: #59ae39;
	color:#fff
}

.main-menu li.picturecards:hover li a:hover { 
	background-color: #3a831e; 
}

.main-menu a.pic:link, .main-menu a.pic:visited{
	background-image:url(../nav-img/picturecards.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
}

.main-menu a.pic:hover, .main-menu a.pic:active{
	background-color:transparent;
	background-image:url(../nav-img/picturecards-over.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
	}
	
/*JobTIPS Students*/

.main-menu .JTStudents span{
	display:none
}

.main-menu li.JTStudents a {
	background-color: #f25a1c;
	color:#fff
}

.main-menu li.JTStudents:hover a {
	background-color: #f25a1c;
	color:#fff
}

.main-menu li.JTStudents:hover li a:hover { 
	background-color: #c2410c; 
}

.main-menu a.job:link, .main-menu a.job:visited{
	background-image:url(../nav-img/jobtips.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
}

.main-menu a.job:hover, .main-menu a.job:active{
	background-color:transparent;
	background-image:url(../nav-img/jobtips-over.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
	}
	
/*Products*/

.main-menu .Products span{
	display:none
}

.main-menu li.Products a {
	background-color: #4c4c4c;
	color:#fff
}

.main-menu li.Products:hover a {
	background-color: #4c4c4c;
	color:#fff
}

.main-menu li.Products:hover li a:hover { 
	background-color: #2d2d2d; 
}

.main-menu a.pro:link, .main-menu a.pro:visited{
	background-image:url(../nav-img/products2.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
}

.main-menu a.pro:hover, .main-menu a.pro:active{
	background-color:transparent;
	background-image:url(../nav-img/products-over2.jpg);
	width:100px;
	height:60px;
	background-repeat:no-repeat;
	padding:0px
	}