.ddsmoothmenu{width: 100%; background: url(../images/bg_menu.jpg) repeat-x; height:110px; position:relative;}
.ddsmoothmenu ul li ul {  top:111px !important}
.ddsmoothmenu ul li ul li ul{  top:0 !important}
.ddsmoothmenu ul{z-index:100; margin: 0px auto;padding: 0; list-style-type: none; width:980px; 
background:url(../images/main_menu_sp.png) no-repeat left center; height:110px; }

.ddsmoothmenu ul li{position: relative;display: inline; float: left; width:12.4%; 
background:url(../images/main_menu_sp.png) no-repeat right center;  }
.ddsmoothmenu ul li ul{ position: absolute; left: -3000px; display: none; visibility: hidden; width: auto; }
.ddsmoothmenu ul li ul li{ display: list-item; float: none; width: 100%; background:none }
.ddsmoothmenu ul li ul li ul{ top: 0;}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{ display: block; padding: 5px 0px; margin-top:80px; text-decoration: none; font-size:17px; line-height:19px; position:relative; text-align:center; font-weight: bold; -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out; opacity: 1;}

.ddsmoothmenu ul li a.selected {}
.ddsmoothmenu ul li a:hover{ }

.ddsmoothmenu p{ width:100px; height:130px; position:absolute; bottom:40px; left:7px; z-index:100; -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out; opacity: 1;}
.ddsmoothmenu ul li:hover p{  bottom:30px; }



.btn_school p{ background:url(../images/btn_school.png) no-repeat ; }
.btn_school a{ color: #fe384f }
.btn_school a:hover p, .btn_school a.selected p{ background:url(../images/btn_school.png) no-repeat center top;}
.btn_school a:hover, .btn_school a.selected, .btn_school a.current{ background:#fe384f; color:#fff; }

.btn_information p{ background:url(../images/btn_information.png) no-repeat ; }
.btn_information a{ color: #ff9000 }
.btn_information a:hover p, .btn_information a.selected p{ background:url(../images/btn_information.png) no-repeat center top;}
.btn_information a:hover, .btn_information a.selected, .btn_information a.current{ background:#ff9000; color:#fff; }

.btn_teach p{ background:url(../images/btn_teach.png) no-repeat ; }
.btn_teach a{ color: #23b081 }
.btn_teach a:hover p, .btn_teach a.selected p{ background:url(../images/btn_teach.png) no-repeat center top;}
.btn_teach a:hover, .btn_teach a.selected, .btn_teach a.current{ background:#23b081; color:#fff; }

.btn_act p{ background:url(../images/btn_act.png) no-repeat ; }
.btn_act a{ color: #92c729 }
.btn_act a:hover p, .btn_act a.selected p{ background:url(../images/btn_act.png) no-repeat center top;}
.btn_act a:hover, .btn_act a.selected, .btn_act a.current{ background:#92c729; color:#fff; }

.btn_student_grow p{ background:url(../images/btn_student_grow.png) no-repeat ; }
.btn_student_grow a{ color: #009eea }
.btn_student_grow a:hover p, .btn_student_grow a.selected p{ background:url(../images/btn_student_grow.png) no-repeat center top;}
.btn_student_grow a:hover, .btn_student_grow a.selected, .btn_student_grow a.current{ background:#009eea; color:#fff; }

.btn_student_achievements p{ background:url(../images/btn_student_achievements.png) no-repeat ; }
.btn_student_achievements a{ color: #8d55a9 }
.btn_student_achievements a:hover p, .btn_student_achievements a.selected p{ background:url(../images/btn_student_achievements.png) no-repeat center top;}
.btn_student_achievements a:hover, .btn_student_achievements a.selected, .btn_student_achievements a.current{ background:#8d55a9; color:#fff; }

.btn_parents p{ background:url(../images/btn_parents.png) no-repeat ; }
.btn_parents a{ color: #0069b7 }
.btn_parents a:hover p, .btn_parents a.selected p{ background:url(../images/btn_parents.png) no-repeat center top;}
.btn_parents a:hover, .btn_parents a.selected, .btn_parents a.current{ background:#0069b7; color:#fff; }

.btn_alumi p{ background:url(../images/btn_alumi.png) no-repeat ; }
.btn_alumi a{ color: #af651f }
.btn_alumi a:hover p, .btn_alumi a.selected p{ background:url(../images/btn_alumi.png) no-repeat center top;}
.btn_alumi a:hover, .btn_alumi a.selected, .btn_alumi a.current{ background:#af651f; color:#fff; }



/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{ font-weight:normal; width: 106px; font-size:13px; padding: 10px 8px; margin: 0; border-top-width: 0; background:#fff; color:#333; border-bottom: 1px solid #eee; border-right: 1px solid #eee; border-left: 1px solid #eee; margin-left:-1px;}
.ddsmoothmenu ul li ul li a.selected {}
.ddsmoothmenu ul li ul li a:hover{ }

.ddsmoothmenu ul li ul li ul li a{ margin:0px 0px 0px -1px; border-top: 0px solid #eee;}
.ddsmoothmenu ul li ul li ul li a + a{ margin:-2px 0px 0px -1px; }
.ddsmoothmenu ul li ul li ul li a.selected {background: #fff9e3 !important; color: #333;}
.ddsmoothmenu ul li ul li ul li a:hover{ background: #fff9e3; color: #333;}
.ddsmoothmenu ul li ul li ul li a.selected{ background: #fff9e3; color: #333;}


* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images  ######### */
.downarrowclass{ position: absolute; top: 27px; right: 0px; display:none}
.rightarrowclass{ position: absolute; top: 17px; right: 5px; display:none}

/* ######### CSS for shadow added to sub menus  ######### */
.ddshadow{ position: absolute;left: 0;top: 0;width: 0;height: 0; background-color: #ccc; /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */}

.toplevelshadow{
margin: 5px 0 0 5px; /* in NON CSS3 capable browsers gives the offset of the shadow */
opacity: 0.8; /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */
}

.ddcss3support .ddshadow.toplevelshadow {
margin: 0; /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */
/* opacity: 1; */ /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */
}

.ddcss3support .ddshadow {
background-color: transparent;
box-shadow: 0px 0px 0px #ccc; /* box-shadow color generally should be a little darker than that for the NON CSS3 capable browsers background-color */
-moz-box-shadow: 0px 0px 0px #ccc;
-webkit-box-shadow: 0px 0px 0px #ccc;
}

* html .ddsmoothmenu ul li a{ display: inline-block;}

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

.btn_school a:hover, .btn_school a.selected, .btn_school a.current{ color: #fe384f; background:none }
.btn_information a:hover, .btn_information a.selected, .btn_information a.current{ color:#ff9000; background:none }
.btn_teach a:hover, .btn_teach a.selected, .btn_teach a.current{ color:#23b081; background:none }
.btn_act a:hover, .btn_act a.selected, .btn_act a.current{ color:#92c729; background:none }
.btn_student_grow a:hover, .btn_student_grow a.selected, .btn_student_grow a.current{ color:#009eea; background:none }
.btn_student_achievements a:hover, .btn_student_achievements a.selected, .btn_student_achievements a.current{ color:#8d55a9; background:none }
.btn_parents a:hover, .btn_parents a.selected, .btn_parents a.current{ color:#0069b7; background:none }
.btn_alumi a:hover, .btn_alumi a.selected, .btn_alumi a.current{ color:#af651f; background:none }

}