/* demo page styles */

.example {
    background:#fff url(../images/blue.jpg);
    width:700px;
    height:500px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}


/* main menu styles */
.menu {
    background-color:#fff;
    text-align:center;
    width:100%;
}
.menu > span {
    display:inline-block;
    margin:0 auto;
}
#nav {
    display:inline;
    text-align:left;
    position:relative;
    list-style-type:none;
}
#nav > li {
    float:left;
    padding:0;
    position:relative; margin-right:25px; text-transform:uppercase
}
#nav > li > a {

    color:#4F4F4F;
    display:block;
    font-size:14px;
    padding:0;
    position:relative;
    text-decoration:none;
}
#nav > li > a:hover {
     color:#c3808a; border:0;
}
#nav > li.selected  > a {
    background-color:#FFFFFF;
    border-color:#999999 #999999 #FFFFFF;
    z-index:2;
}
#nav li div {
    position:relative;
}
#nav li div div {
    background-color:#FFFFFF;
    border:1px solid #999999;
    padding:12px 0;
    display:none;
    font-size:0.75em;
    margin:0;
    position:absolute;
    top:2px;
    z-index:1;
    width:190px;
}
#nav li div div.wrp2 {
    width:354px;
}
#nav .sep {
    left:190px;
    border-left:1px solid #E3E3E3;
    bottom:0;
    height:auto;
    margin:15px 0;
    position:absolute;
    top:0;
    width:1px; display:none;
}
#nav li div ul {
    padding-left:10px;
    padding-right:10px;
    position:relative;
    width:170px;
    float:left;
    list-style-type:none;
}
#nav li div ul li {
    margin:0;
    padding:0;
}
#nav li div ul li h3 {
    border-bottom:1px solid #E3E3E3;
    color:#4F4F4F;
    font-weight:normal;
    margin:0 5px 4px;
    font-size:13px;
    padding-bottom:3px;
    padding-top:3px;
}
#nav li ul ul {
    padding:0 0 8px;
}
#nav li ul ul li {
    margin:0;
    padding:0;
}
#nav li ul ul li a {
    color:#cb959d;
    display:block;
    margin-bottom:1px;
    padding:3px 5px;
    text-decoration:none;
    font-size:13px;
}
#nav li ul ul li a:hover{
    background-color:#cb959d;
    color:#fff;
}

.nav-drop {
  overflow-x: hidden;
  overflow-y: auto;
   width: 400px;
background-color: #282828;
height: 450px;
position: absolute;
top: 41px;
left: 0;
z-index: 20000;
height: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
visibility: hidden;
opacity: 0;
  height: 0;}
.nav-drop-left { float:left; width:49%; text-align:left}
.nav-drop-right { float:right;}
.nav-drop a { color:#fff !important; display:block; float:left; width:100%}
.nav-drop a:hover { background:#d72390}

.nav li:hover .nav-drop{  height: 450px !important;
overflow: visible;
opacity: 1;
height: 251px;
visibility: visible; }

.nav-drop1 { overflow-x: hidden;
  overflow-y: auto;
   width: 400px;
background-color: #282828;
height: 450px;
position: absolute;
top: 41px;
left: 0;
z-index: 20000;
height: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
visibility: hidden;
opacity: 0;
  height: 0;}
.nav-drop1-left { float:left; width:49%; text-align:left}
.nav-drop1-right { float:right;}
.nav-drop1 a { color:#fff !important; display:block; float:left; width:100%}
.nav-drop1 a:hover { background:#d72390}

.nav li:hover .nav-drop1{  height: 450px !important;
overflow: visible;
opacity: 1;
height: 251px;
visibility: visible; }

.nav-drop2 {
  overflow-x: hidden;
overflow-y: auto;
  width: 400px;
background-color: #282828;
height: 450px;
position: absolute;
top: 41px;
left: 0;
z-index: 20000;
height: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
visibility: hidden;
opacity: 0;
  height: 0;}
  .nav-drop2-left { float:left; width:49%; text-align:left}
.nav-drop2-right { float:right;}
.nav-drop2 a { color:#fff !important; display:block; float:left; width:100%}
.nav-drop2 a:hover { background:#d72390}

.nav li:hover .nav-drop2{ height: 450px !important;
overflow: visible;
opacity: 1;
height: 251px;
visibility: visible;}