/*--------- CSS Reset for Mobile ----------*/
@media handheld, only screen and (max-width: 900px) {
body {-webkit-text-size-adjust:none;}
.floatl, .floatr{float: none;}
.root {width:100%;}
/*-------- design style --------*/

.mobile_display {display:block; position:relative; margin:0 0 2px 0;}
.mobile_nav {display:block;  position:relative; left:0px; top:0; width: auto; height:36px;}
.menuclick {background:url(../images/mobileUI_nav.png) no-repeat center 0; width: auto; height:36px; padding:0; margin: 0 auto; margin-top:15px; display: block; text-decoration: none;}
.mobile_nav_up {background:url(../images/mobileUI_nav.png) no-repeat center -74px; }
.click_img { width: auto; height:36px;}
#nav_box {display:none; width:100% !important;}

#megaMenu .root .selected  {background-color:#cbcbcb;}
#megaMenu .root .haschild {background-color:#cbcbcb; background-image:none;}

/*--------- MegaMenu style ----------*/
#megaMenu {width:auto;}
#megaMenu ul { padding:0; margin-top:25px;}
#megaMenu .root li{ width:100%; float:none; margin: 0 0 1px; text-align:left; background:#000; }
#megaMenu li.back{ background:none;}
#megaMenu li.back .left{ background:none; height:0; margin-left:0;}
#megaMenu li.back .center{ background:none; height:0; margin:0;}

#megaMenu .root li a{display:block; background-color:#202020; padding:0;}
#megaMenu .root li.breadcrumb a {}
#megaMenu .root li.selected a, #megaMenu .root li.rmHover a, #megaMenu .root li a:hover, #megaMenu .root li:hover a {margin:0;}

#megaMenu .root li a span {display:block; padding:0 20px; color:#fff; white-space:nowrap; font-size:13px; font-weight:normal; text-transform:uppercase; margin:0; height:38px; line-height:38px; position:relative;}
#megaMenu .root li.selected a span,#standardMenu .root li.breadcrumb a span,#standardMenu .root li.rmHover a span,  #standardMenu .root li:hover a span, #standardMenu .root li a:hover span{text-decoration:none; font-style: normal; background:none; color:#fff; font-weight:normal; } /** selected entry**/

#megaMenu .root a span .navarrow{ position:absolute; width:60px; height:38px; margin-right:0; right:0px; background:url(../images/mobile_navarrow) no-repeat center 0; display:none!important;}
#megaMenu .root li.selected a span .navarrow, #megaMenu .root li.breadcrumb a span .navarrow, #megaMenu .root li.rmHover a span .navarrow, #megaMenu .root li:hover a span .navarrow, #megaMenu .root li a:hover span .navarrow{margin-right:0; background:url(../images/mobile_navarrow.png) no-repeat center 0; }

#megaMenu .root a span .navarrow2{ position:absolute; width:60px; height:38px; margin-right:0; right:0px; background:url(../images/mobile_navarrow.png) no-repeat center -42px;}
#megaMenu .root li.selected a span .navarrow2, #megaMenu .root li.breadcrumb a span .navarrow2, #megaMenu .root li.rmHover a span .navarrow2, #megaMenu .root li:hover a span .navarrow2, #megaMenu .root li a:hover span .navarrow2{ margin-right:0; background:url(../images/mobile_navarrow.png) no-repeat center -42px; }

/*-- submenu --*/
#megaMenu .category{background:none; background-color:#cbcbcb; left:0; position:static; width:auto; margin-top:0px; padding:0; border:0px solid; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0; display: none;}
#megaMenu .category li{ float:none; clear:both; width:100%; padding:0; margin:0;}
#megaMenu .category li.item a{ border-bottom:1px solid #bababa; margin:0; padding:0; height:auto; background:#000;}
#megaMenu .category li.last a { border-bottom:none;}
#megaMenu .category li.haschild > a {}
#megaMenu .category li.item a span{padding:0 35px 0 35px; color:#fff; border-top:1px solid #bababa;}
#megaMenu .category li.item a:hover span, #megaMenu .category li.selected a span{color:#fff; cursor:pointer;}

/* -- SUBSUB --*/
#megaMenu .leaf{display:block; position:static; width:auto; margin:0; padding-left:35px; border:none; top:0; -webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
#megaMenu .leaf li.last > a{border-bottom:1px solid rgba(234,234,234,.1);}
#megaMenu .leaf li.item a span{display:block; background:none; font-size:12px; font-weight:normal; white-space:nowrap; height:35px; line-height:37px; padding:0 35px 0 15px; text-transform:none; background:url(../images/right.gif) left 15px no-repeat; border:0px;}
#megaMenu .leaf li.item a span:hover{background:url(../images/right.gif) left 15px no-repeat;}
#megaMenu .leaf li.selected > a span{}
#megaMenu .category li.rmhover > .leaf{display:block;}
#megaMenu .leaf li li, #megaMenu .leaf li li li {width:auto;}

@media handheld, only screen and (max-width:380px) {

.menuclick {background:url(../images/mobileUI_nav.png) no-repeat center 0; width: auto; height:36px; padding:0; margin:10px auto 0px; display: block; text-decoration: none;}
.mobile_nav  { display: block; position: relative; top: 0px; height: 36px; width: auto; left:0px;}
.click_img   { width: auto; height:36px;}
}