.gtnResponsiveNavigationPortlet {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
}

.gtnResponsiveNavigationPortlet .topmenu li {
    white-space: nowrap;
    word-break: break-all;
}

.gtnResponsiveNavigationPortlet .topmenu {
    display: none;
    /* kind of hack: z-index property is used just to indicate the collapsed/uncollapsed state of the menu */
    z-index: 0;
    position:relative;
}

.gtnResponsiveNavigationPortlet .topmenu.visible-element {
    display: block;
}

.gtnResponsiveNavigationPortlet a.collapsibleToggle {
    display: block;
}

.gtnResponsiveNavigationPortlet .collapsibleToggle.visible-element>.show {
    display: none;
}

.gtnResponsiveNavigationPortlet .collapsibleToggle.visible-element>.hide {
    display: inline;
}

.gtnResponsiveNavigationPortlet .collapsibleToggle:not(.visible-element)>.show {
    display: inline;
}

.gtnResponsiveNavigationPortlet .collapsibleToggle:not(.visible-element)>.hide {
    display: none;
}

.gtnResponsiveNavigationPortlet .topmenu.visible-element {
    display: block;
    margin-top: 0.75em;
    font-size: 1em;
}

.gtnResponsiveNavigationPortlet .menuitem.collapsed .submenu,
.gtnResponsiveNavigationPortlet .collapsibleRow.collapsed>.collapsibleContent:not(.display),
.gtnResponsiveNavigationPortlet .menuitem.close>.submenu {
/*    display: none;*/
}

.gtnResponsiveNavigationPortlet .collapsibleToggle {
    display: block;
    width: 2.5em;
    height: 1.875em;
    margin-left: 1.7094%;
    margin-right: 1.7094%;
    margin-bottom: 0.125em;
    background-color: #F5F5F5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6)); /* Chrome, Safari 4+ */
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
    background-image:    -moz-linear-gradient(top, #fff, #e6e6e6); /* Firefox 3.6-15 */
    background-image:     -ms-linear-gradient(top, #fff, #e6e6e6); /* IE 10+ */
    background-image:      -o-linear-gradient(top, #fff, #e6e6e6); /* Opera 11.10-12.00 */
    background-image:         linear-gradient(to bottom, #fff, #e6e6e6); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
    background-position: center top;
    background-repeat: repeat-x;
    border-radius: 0.25em;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #A2A2A2;
    border-style: solid;
    border-width: 0.07142em;
    box-shadow: 0 0.07142em 0 rgba(255, 255, 255, 0.2) inset, 0 0.07142em 0.14284em rgba(0, 0, 0, 0.05);
}

.gtnResponsiveNavigationPortlet .collapsibleToggle:hover {
    background-color: #E6E6E6;
    background-image: none;
}

.gtnResponsiveNavigationPortlet .collapsibleToggle.visible-element {
    background-color: #eaeaea;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e7e7e7)); /* Chrome, Safari 4+ */
    background-image: -webkit-linear-gradient(top, #eee, #e7e7e7); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
    background-image:    -moz-linear-gradient(top, #eee, #e7e7e7); /* Firefox 3.6-15 */
    background-image:     -ms-linear-gradient(top, #eee, #e7e7e7); /* IE 10+ */
    background-image:      -o-linear-gradient(top, #eee, #e7e7e7); /* Opera 11.10-12.00 */
    background-image:         linear-gradient(to bottom, #eee, #e7e7e7); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
    box-shadow: inset 1px 0px 5px rgba(0,0,0,0.3);
    border-color: #c3c3c3;
}


.gtnResponsiveNavigationPortlet .btn {
    background-image:  url(../images/icon-nav.png);
    background-image:  none, url(../images/icon-nav.svg), url(../images/icon-nav.png);

    background-color: transparent;
    background-position: center 0.5em;
    background-repeat: no-repeat;
    display: block;
    text-indent: 10em;
    overflow: hidden;
    white-space: nowrap;
    width: 2.5em;
    height: 1.875em;
}


.gtnResponsiveNavigationPortlet .collapsibleToggle .btn:hover,
.gtnResponsiveNavigationPortlet .visible-element .btn {background-position: center -1.6875em;}

.gtnResponsiveNavigationPortlet .collapsibleToggle>span {
    font-size: .8em;
    color: #1C5182;
    text-decoration: none;
}

.gtnResponsiveNavigationPortlet .topmenu a:hover {
    background-color: rgba(0, 0, 0, 0.03);
    color: #222;
    text-decoration: none;
}

.gtnResponsiveNavigationPortlet .topmenu .menuitem.current > a.menuhandler {
    background-color: rgba(0, 0, 0, 0.03);
    color: #222;
}

.gtnResponsiveNavigationPortlet li.active>a:first-child {
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.07);
    color: #1C5182;
    text-shadow: 0 .0625em 0 #FFFFFF;
}

.gtnResponsiveNavigationPortlet .topmenu a {
    border-radius: 0.3125em;
    color: #666;
    text-shadow: 0 0.12em 0 #FFF;
    padding: 0.125em 0.625em 0.3125em 0.625em;
    white-space: pre-wrap;
    font-size: 1em;
}

.gtnResponsiveNavigationPortlet .menuitem > span {
    font-size: 0.95em;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    word-break: break-all;
    -ms-word-break: break-all;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    color: #bbb;
    display:block;
    text-shadow: 0 0.12em 0 #FFF;
    padding: .12em 0 .3em 0;
    white-space: pre-wrap;
}

.gtnResponsiveNavigationPortlet .submenu .menuitem > span {
    padding: 0.25em 0.9375em;
}
 

.gtnResponsiveNavigationPortlet a>span {
    font-size: 0.9375em;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    word-break: break-all;
    -ms-word-break: break-all;
}

.gtnResponsiveNavigationPortlet .submenu a>span {
    padding-right: 1.4em;
}

.gtnResponsiveNavigationPortlet .topmenu,.gtnResponsiveNavigationPortlet .submenu {
    padding: 0;
}

.gtnResponsiveNavigationPortlet .submenu,
.gtnResponsiveNavigationPortlet .submenu .submenu
{margin-left: 0.9375em;}

.gtnResponsiveNavigationPortlet .topmenu {
    margin: 0 0.3em 0.62em 0.62em;
}

.gtnResponsiveNavigationPortlet .topmenu li {
    position: relative;
    display: block;
    margin: 0.375em 0;
}

.gtnResponsiveNavigationPortlet li.multilevel a.menuhandler.caret {
    position: absolute;
    right: 0;
    top: 0;
    width: 0.5em;
}

.gtnResponsiveNavigationPortlet li:not(.multilevel)>a.menuhandler>i {
    position: absolute;
    right: 0.62em;
}

.gtnResponsiveNavigationPortlet a {display: block;}

.gtnResponsiveNavigationPortlet .multilevel>a:first-child {
    margin-right: 1.8725em;
}

.gtnResponsiveNavigationPortlet .multilevel {
    background-image: url('../images/navbar-separator.png');
    background-position: right 0.375em;
    background-repeat: no-repeat;
}

/* Darker arrow */
.gtnResponsiveNavigationPortlet li>a.menuhandler>i,
.gtnResponsiveNavigationPortlet .submenu a.caret>i {
    border-left: 0.25em solid transparent;
    border-right: 0.25em solid transparent;
    border-top: 0.25em solid #222;
    border-bottom: 0.25em solid transparent;
    content: "";
    display: inline-block;
    height: 0;
    width: 0;
    margin-left: 0;
    vertical-align: top;
    margin-top: 0.5em;
}

.gtnResponsiveNavigationPortlet .topmenu>li.close>a.menuhandler:hover>i {border-top-color: #222;}

.gtnResponsiveNavigationPortlet li.close a.menuhandler:hover > i {
    border-top-color: #222;
}

/* Lighter arrow */
.gtnResponsiveNavigationPortlet li.close a.menuhandler>i {
    border-top-color: #777;
}

.gtnResponsiveNavigationPortlet i {
    text-align: left;
    text-indent: -99999px;
    overflow: hidden;
}


/* RWD */

@media only screen and (min-width: 40em) {

    .gtnResponsiveNavigationPortlet .topmenu {
        display: block;
        margin-left:  1.7094%;
        margin-right: 1.7094%;
        margin-bottom: 0.9375em;
        /* kind of hack: z-index property is used just to indicate the collapsed/uncollapsed state of the menu */
        z-index: 1; 
    }

    .gtnResponsiveNavigationPortlet .topmenu .submenu {
        margin-left: 0;
    }

    .gtnResponsiveNavigationPortlet .topmenu>.multilevel>.submenu:not(.inverse),
    .gtnResponsiveNavigationPortlet .topmenu>li:not(.multilevel)>.submenu.inverse{
    right: 0;
    left: auto;
    }
    
    .gtnResponsiveNavigationPortlet .submenu .submenu {
        left: 100%;
        top: -0.48em;
        position: absolute;
    }
    
    .gtnResponsiveNavigationPortlet .submenu .submenu.inverse {
        right: 100%;
        left: auto;
    }
    
    .gtnResponsiveNavigationPortlet a {
        display: block;
        white-space: nowrap;
    }
    
    .gtnResponsiveNavigationPortlet .submenu a>span {
        padding-right: 0.6875em;
    }
    
    .gtnResponsiveNavigationPortlet .collapsibleToggle {
        display: none;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu ol {
        margin-left: 0;
    }
    
    .gtnResponsiveNavigationPortlet>.collapsed {
        display: none;
    }
    
    .gtnResponsiveNavigationPortlet>.expanded {
        display: block;
    }
    
    .gtnResponsiveNavigationPortlet .submenu>li.active>a:first-child {
        background-color: #0081C2;
        background-image: linear-gradient(to bottom, #0088CC, #0077B3);
        text-shadow: none;
        color: #FFF;
    }
    
    .gtnResponsiveNavigationPortlet .submenu .multilevel>a:first-child {
        border-radius: 0 0.375em 0.375em 0;
        margin-right: 1.9em;
    }
    
    .gtnResponsiveNavigationPortlet .submenu  li.multilevel>a.menuhandler:hover {
        border-radius: 0.375em 0 0 0.375em;
    }
    
    /* Down arrow */
    .gtnResponsiveNavigationPortlet .topmenu>li.close>a.menuhandler>i {
        border-left: 0.25em solid transparent;
        border-right: 0.25em solid transparent;
        border-top: 0.25em solid #777;
        border-bottom: 0.25em solid transparent;
        position: static;
    }

    .gtnResponsiveNavigationPortlet .submenu a.caret {
        border-radius: 0.3125em 0 0 0.3125em;
    }

    /* up arrow */
    .gtnResponsiveNavigationPortlet .submenu a.caret>i {
        border-left: 0.25em solid transparent;
        border-right: 0.25em solid transparent;
        border-top: 0.25em solid #777;
        border-bottom: 0.25em solid transparent;
    }
    
    /* right arrow */
    .gtnResponsiveNavigationPortlet .submenu>li.close>a.menuhandler>i {
        border-top: 0.25em solid transparent;
        border-right: 0.25em solid transparent;
        border-left: 0.25em solid #777;
        border-bottom: 0.25em solid transparent;
        margin-top: 0.5em;
    }
    
    /* Hover open - right arrow */
    .gtnResponsiveNavigationPortlet .submenu li a.menuhandler:hover>i,
    .gtnResponsiveNavigationPortlet .submenu>li:not(.close)>a.menuhandler>i {
        border-left: 0.25em solid #222;
        border-right: 0.25em solid transparent;
        border-top: 0.25em solid transparent;
        border-bottom: 0.25em solid transparent;
    }
    
    .gtnResponsiveNavigationPortlet .submenu>li:not(.close)>a.menuhandler {
        background-color: rgba(0, 0, 0, 0.08);
    }
    
    .gtnResponsiveNavigationPortlet .topmenu .menuitem.current > a.menuhandler {
        background-color: rgba(0, 0, 0, 0.08);
    }
    
    .gtnResponsiveNavigationPortlet .topmenu .menuitem.current > a:nth-child(2) {
        border-radius: 0.3125em 0 0 0.3125em;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>li {
        display: inline-block;
        margin-right: 0.625em;
        margin-top: 0;
        margin-bottom: 0.125em;
    }
    
    .gtnResponsiveNavigationPortlet .submenu>li {
        margin-bottom: 0.3125em;
        margin-top: 0;
    }
    
    .gtnResponsiveNavigationPortlet .submenu a:not(.caret) {
        /*border-radius: 0.375em 0 0 0.375em;*/
        border-radius: 0;
        display: block;
        text-shadow: none;
    }
    
    .gtnResponsiveNavigationPortlet .submenu a:hover,
    .gtnResponsiveNavigationPortlet .submenu .menuitem.current>a:hover {
        background-color: rgba(0, 0, 0, 0.08);
        color: #222;
    }
    
    .gtnResponsiveNavigationPortlet .submenu {
        background-clip: padding-box;
        background-color: #FFF;
        border: 0.0625em solid rgba(0, 0, 0, 0.2);
        border-radius: 0.375em 0.375em 0.375em 0.375em;
        box-shadow: 0 0.3em 0.62em rgba(0, 0, 0, 0.4);
        left: auto;
        width: 11.25em;
        position: absolute;
        z-index: 1000;
        margin: 0.12em 0 0;
        padding: 0.3125em 0 0 0;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu > li > .submenu > li.multilevel > a.menuhandler.caret {
        padding-left: 0.75em;
        padding-right: 0.5em;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>li>.submenu:after,.gtnResponsiveNavigationPortlet .topmenu>li>.submenu:before {
        content: "";
        display: inline-block;
        position: absolute;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>li.multilevel>.submenu:not(.inverse):after,
    .gtnResponsiveNavigationPortlet .topmenu>li:not(.multilevel)>.submenu.inverse:after {
        border-bottom: 0.375em solid #FFF;
        border-left: 0.375em solid transparent;
        border-right: 0.375em solid transparent;
        right: 0.3625em;
        top: -0.375em;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>li.multilevel>.submenu:not(.inverse):before,
    .gtnResponsiveNavigationPortlet .topmenu>li:not(.multilevel)>.submenu.inverse:before {
        border-bottom: 0.4375em solid rgba(0, 0, 0, 0.2);
        border-left: 0.4375em solid transparent;
        border-right: 0.4375em solid transparent;
        right: 0.3em;
        top: -0.4375em;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>li:not(.multilevel)>.submenu:not(.inverse):after,
    .gtnResponsiveNavigationPortlet .topmenu>li.multilevel>.submenu.inverse:after
        {
        border-bottom: 0.375em solid #FFF;
        border-left: 0.375em solid transparent;
        border-right: 0.375em solid transparent;
        left: 0.5625em;
        right: auto;
        top: -0.375em;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>li:not(.multilevel)>.submenu:not(.inverse):before,
    .gtnResponsiveNavigationPortlet .topmenu>li.multilevel>.submenu.inverse:before
        {
        border-bottom: 0.4375em solid rgba(0, 0, 0, 0.2);
        border-left: 0.4375em solid transparent;
        border-right: 0.4375em solid transparent;
        left: 0.5em;
        right: auto;
        top: -0.4375em;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>li>a.menuhandler>i.caret {
        margin-left: 0.3125em;
    }
    
    .gtnResponsiveNavigationPortlet li:not(.multilevel)>a.menuhandler>i {
        position: static;
    }
    
    .gtnResponsiveNavigationPortlet .submenu li:not(.multilevel)>a.menuhandler>i {
        position: absolute;
        bottom: auto;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>.submenu {
        margin: 0;
    }
    
    .gtnResponsiveNavigationPortlet .topmenu>li.multilevel>a.menuhandler>i.caret {
        margin-left: 0;
    }
    
    /* 1st Level indentation */
    .gtnResponsiveNavigationPortlet .submenu li>a:first-child {
        padding: 0.25em 0.9375em;
    }
    
    /* Make the background of the parent darker when the submenu is opened */
    .gtnResponsiveNavigationPortlet > .topmenu > li.menuitem.multilevel.current > a.caret,
    .gtnResponsiveNavigationPortlet > .topmenu > li.menuitem.current > .menuhandler {
        background-color: rgba(0, 0, 0, 0.03);
    }
    
    .gtnResponsiveNavigationPortlet .submenu a.caret>i {
        margin-bottom: 0.375em;
    }

}


@media only screen and (max-width: 39.99999em) {

    .gtnResponsiveNavigationPortlet {
        margin-bottom: 0.9375em;
    }

}

@media screen and (max-width: 30em) { /* 480px */

    .gtnResponsiveNavigationPortlet .collapsibleToggle {
        margin-left: 0.625em;
    }

}
