@import url(ResponsiveMenuStylesheet.css);

.gtnResponsiveHeaderPortlet {
    margin: 0;
    padding: 0;
    margin-bottom: 0.9375em;
}


/* TODO: do we really need this here? */
.gtnResponsiveHeaderPortlet .clearfix {
    float: none;
    clear: both;
}

/* The gatein Logo */
.gtnResponsiveHeaderPortlet .logo {
    background-image:  url("../images/logo_ltr.png"); /* orientation=rt */
    background-image:  none, url("../images/logo_ltr.svg"), url("../images/logo_ltr.png"); /* orientation=rt */

    background-image:  url("../images/logo.png"); /* orientation=lt */
    background-image:  none, url("../images/logo.svg"), url("../images/logo.png"); /* orientation=lt */

    line-height: 1em;
    background-repeat: no-repeat;
    background-size: contain;
    width: 10.375em;
    height: 2.8125em;
    background-position: 0 0;
    padding: 0;
    margin: 1.25em 2em 0 1em; /* 1.7094% ~= 1em at a standard desktop width, we can't use % with a collapsible width */
    margin: 1.25em 1em 0 1em;
    float: right; /* orientation=rt */
    float: left; /* orientation=lt */
    cursor: pointer;
}


/** Header Specific Menu Configuration **/

/* Userpreference specific button icons */
.gtnResponsiveHeaderPortlet .gtnResponsiveMenuCollapseButton .collapseButtonIcon {
    background-image:  url(../images/icon-user.png);
    background-image:  none, url(../images/icon-user.svg), url(../images/icon-user.png);
}

.gtnResponsiveHeaderPortlet .gtnResponsiveMenuCollapseButton:hover .collapseButtonIcon,
.gtnResponsiveHeaderPortlet .gtnResponsiveMenuCollapseButton.enabled .collapseButtonIcon {background-position: center -1.6875em;}

.gtnResponsiveHeaderPortlet .gtnResponsiveMenuCollapseButton.enabled .btn {border-color: #c3c3c3;}


/* Menu Options */
.gtnResponsiveHeaderPortlet .options {
    float: left; /* orientation=rt */
    float: right; /* orientation=lt */
    text-align: left; /* orientation=rt */
    text-align: right; /* orientation=lt */
    margin-top: 2.3125em;
    margin-right: 0; /* orientation=rt */
    margin-left: 0; /* orientation=lt */
}

.gtnResponsiveHeaderPortlet .options a {font-size: 0.9375em;}

.gtnResponsiveHeaderPortlet .options a:hover {text-decoration: underline;}


/** Collapsible Row **/
.gtnResponsiveHeaderPortlet .collapsibleRow.collapsed {
    width: 100%;
    position: relative;
}

.gtnResponsiveHeaderPortlet .collapsibleRow > .gtnResponsiveMenuCollapseButton {
    display: none;
}

.gtnResponsiveHeaderPortlet .collapsibleRow.collapsed > .gtnResponsiveMenuCollapseButton {
    display: block;
}

.gtnResponsiveHeaderPortlet .collapsibleRow.collapsed > .collapsibleContent {display:none;}

.gtnResponsiveHeaderPortlet .collapsed > .collapsibleContent.display {display: block;}

.gtnResponsiveHeaderPortlet .collapsed .options.display {
    clear: both;
    margin-top: 0.75em;
}

/*Top Menu */
.gtnResponsiveHeaderPortlet .collapsibleRow > .options {
    white-space: nowrap;
}

.gtnResponsiveHeaderPortlet .collapsibleRow.collapsed > .options {
    white-space: normal;
}


.gtnResponsiveHeaderPortlet .options.collapsed > .menu > li {
    display: block;
    background: none;
    margin-left: 0.69em; /* orientation=rt */
    margin-right: 0.69em; /* orientation=lt */
    padding-left: 0; /* orientation=rt */
    padding-right: 0; /* orientation=lt */
}

.gtnResponsiveHeaderPortlet .collapsed .options > .menu > li {
    margin-bottom: 0.3125em;
}


.gtnResponsiveHeaderPortlet .options.collapsed > .menu > .menucategory > a,
.gtnResponsiveHeaderPortlet .options.collapsed > .menu > .menulink > a {
    padding: 0.125em 0.625em 0.3125em 0.625em;
    display: block;
}

.gtnResponsiveHeaderPortlet .options.collapsed > .menu > .menucategory.close:hover > .menutoggle > .caret,
.gtnResponsiveHeaderPortlet .options.collapsed > .menu > .menucategory > .menutoggle > .caret,
.gtnResponsiveHeaderPortlet .options.collapsed > .menu > .menucategory.close > .menutoggle > .caret {
    position: absolute;
    left: -0.1875em; /* orientation=rt */
    right: -0.1875em; /* orientation=lt */
}
