/**,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}*/

/* DEMO 1 */

.wrapper-dropdown-1 { /* Size and position */ position: relative; /* Enable absolute positionning for children and pseudo elements */ /*width: 200px;*/ margin: 0 auto; height: 16px; padding: 20px 10px 20px 10px; /* Styles */ /*background: #9bc7de;*/ color: #fff; outline: none; cursor: pointer; }

    .wrapper-dropdown-1:after { content: ""; width: 0; height: 0; position: absolute; right: 5px; top: 50%; margin-top: -3px; border-width: 5px 4px 0 4px; border-style: solid; border-color: #fff transparent; }

    .wrapper-dropdown-1 .dropdown { /* Size & position */ position: absolute; top: 97%; left: 0; right: 0; z-index: 500; /* Styles */ background: #fff; color: #555; border: /*#E7E7E5*/ #0d74ba solid 1px; /*border-top:none 0;*/ list-style: none; font-weight: normal; /* Cancels previous font-weight: bold; */ box-shadow: 1px 2px 5px #ccc; /* Hiding */ opacity: 0; pointer-events: none; }

        .wrapper-dropdown-1 .dropdown li a { display: block; text-decoration: none; padding: 10px; color: #555; }

        /* Hover state */
        .wrapper-dropdown-1 .dropdown li:hover a { color: #fff; }

    /* Active state */
    .wrapper-dropdown-1.active .dropdown { opacity: 1; pointer-events: auto; }

    .wrapper-dropdown-1.active:after { margin-top: -3px; border-width: 0 4px 5px 4px; border-style: solid; border-color: #fff transparent; }

/*.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: -moz-linear-gradient(left,  #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9bc7de), color-stop(78%,#9bc7de), color-stop(78%,#ffffff), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: -o-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: -ms-linear-gradient(left,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  background: linear-gradient(to right,  #9bc7de 0%,#9bc7de 78%,#ffffff 78%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9bc7de', endColorstr='#ffffff',GradientType=1 );
}*/

/* No CSS3 support */

.no-opacity .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */ }

.no-opacity .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown { display: block; }

/*================================*/
/* Styles for Example #1 */
#example1 { margin: 0; padding: 0; list-style-type: none; line-height: 120%; border-right: #E7E7E5 solid 1px; border-bottom: #E7E7E5 solid 1px; background: #efefef; }

    #example1 .closed { /*background-image: url(img/ha-down.gif);*/ }

        #example1 .closed:after { position: absolute; right: 10px; font-size: 20px; font-family: 'Genericons'; content: '\f431'; }

    #example1 .closed, #example1 .opened { background-position: 95% 50%; background-repeat: no-repeat; }

    /*#example1 .header {
            background-color: #7B7B7B;
        }*/

    #example1 .opened { /*background-image: url(img/ha-up.gif);*/ }

        #example1 .opened:after { position: absolute; right: 10px; font-size: 20px; font-family: 'Genericons'; content: '\f432'; }

    #example1 a { display: block; text-decoration: none; }

        #example1 a.hover, #example1 li a:hover { background-color: #0067aa; color: #FFFFFF; transition: all 200ms ease-in-out 0s; }

    #example1 ul { margin: 0; padding: 0; overflow: hidden; }

    #example1 li { margin: 0; padding: 0; list-style-type: none; color: #FFFFFF; }

        #example1 li a { position: relative; width: 212px; height: 20px; padding: 11px 0 9px 17px; font-size: 15px; transition: all 200ms ease-in-out 0s; text-decoration: none; text-transform: uppercase; border-top: #E7E7E5 solid 1px; }

            #example1 li a:last-child { border: none 0; }

        #example1 li.active a, #example1 li li.active a { color: #FFFFFF; }

        #example1 li.active li a, #example1 li li a { background: #fff; padding: 11px 0 9px 17px; text-transform: none; border: none 0; }