/* ----------------------------------
 * HEADERS: default
 * ---------------------------------- */
section[role="region"] > header:first-child {
    position: relative;
    z-index: 10;
    padding: 0;
    height: 5rem;
    color: #fff;
    border: none;
}

section[role="region"] > header:first-child h1 {
    font-size: 2.5rem;
    line-height: 5rem;
    text-align: left;
    color: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0 1rem 0 3rem;
    height: 100%;
    font-weight: lighter;
}

section[role="region"] > header:first-child h1 em {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1em;
    font-style: normal;
}

section[role="region"] > header:first-child form {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 1rem 1rem 0 0.5rem ;
    margin-left: 3.5rem;
}

section[role="region"] > header:first-child input[type="text"] {
    width: 100%;
    height: 3rem;
    -moz-box-sizing: border-box;
    padding: 0 0.8rem;
    border: solid 0.1rem #9d4123;
    border-top-color: #a6501e;
    border-radius: 0.3rem;
    background: #fff url(headers/images/ui/shadow.png) repeat-x left -0.1rem;
    font-size: 1.5rem;
    line-height: 3em;
    box-shadow: none;
}

section[role="region"] > header:first-child form button[type="reset"] {
    font-size: 0;
    overflow: hidden;
    position: absolute;
    right: 1rem;
    top: 1rem;
    bottom: 0;
    width: 3rem;
    height: auto;
    margin: 0;
    display: none;
    border: none;
    background: url(headers/images/icons/clear.png) no-repeat center center / 1.7rem auto;
}

section[role="region"] > header:first-child input[type="text"]:valid + button[type="reset"] {
    display: block;
}

/* Generic set of actions in toolbar */
section[role="region"] > header:first-child menu[type="toolbar"] {
    height: 100%;
    float: right;
}

section[role="region"] > header:first-child menu[type="toolbar"] a,
section[role="region"] > header:first-child menu[type="toolbar"] button {
    -moz-box-sizing: border-box;
    position: relative;
    float: left;
    width: auto;
    min-width: 5rem;
    height: 5rem;
    margin-bottom: 0;
    padding: 0 1rem;
    border-radius: 0;
    line-height: 5rem;
    background: none;
    text-align: center;
    text-shadow: none;
    z-index: 5;
}


section[role="region"] > header:first-child menu[type="toolbar"] {
    padding: 0;
    margin: 0;
}

section[role="region"] > header:first-child a,
section[role="region"] > header:first-child button {
    border: none;
    padding: 0;
    overflow: hidden;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.1em;
    color: #fff;
    border-radius: 0;
    text-decoration: none;
}

/* Pressed state */
section[role="region"] > header:first-child a:focus {
    outline: none;
}

section[role="region"] > header:first-child button::-moz-focus-inner {
    outline: none;
    border: none;
    margin-top: -0.2rem; /* To fix line-height bug (697451) */
    padding: 0;
}

section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
section[role="region"] > header:first-child > button:not(:disabled):active:after,
section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
section[role="region"] > header:first-child > button:not(:disabled):hover:after,
section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active  {
    background-color: #A9CFD6 !important;
}

/* Disabled state */
section[role="region"] > header:first-child menu[type="toolbar"] a[aria-disabled="true"],
section[role="region"] > header:first-child menu[type="toolbar"] button[disabled]  {
    opacity: 0.5;
}

/* Icon definitions */
section[role="region"] > header:first-child .icon {
    position: relative;
    float: none;
    display: inline-block;
    vertical-align: middle;
    width: 3rem;
    height: 5rem;
    margin: 0 -1rem;
    background: transparent no-repeat center center / 3rem auto;
    font-size: 0;
    overflow: hidden;
}

section[role="region"] > header:first-child .icon.icon-add {
    background-image: url(headers/images/icons/add.png);
}

section[role="region"] > header:first-child .icon.icon-compose {
    background-image: url(headers/images/icons/compose.png);
}

section[role="region"] > header:first-child .icon.icon-edit {
    background-image: url(headers/images/icons/edit.png);
}

section[role="region"] > header:first-child .icon.icon-send {
    background-image: url(headers/images/icons/send.png);
}

section[role="region"] > header:first-child .icon.icon-close {
    background-image: url(headers/images/icons/close.png);
}

section[role="region"] > header:first-child .icon.icon-back {
    background-image: url(headers/images/icons/back.png);
}

section[role="region"] > header:first-child .icon.icon-menu {
    background-image: url(headers/images/icons/menu.png);
}

section[role="region"] > header:first-child .icon.icon-user {
    background-image: url(headers/images/icons/user.png);
}

section[role="region"] > header:first-child .icon.icon-up {
    background-image: url(headers/images/icons/up.png);
}

section[role="region"] > header:first-child .icon.icon-down {
    background-image: url(headers/images/icons/down.png);
}

section[role="region"] > header:first-child .icon.icon-disabled {
    opacity: 0.5;
}

/* We need to opt out of the header separator */
section[role="region"] > header:first-child menu[type="toolbar"] a.msg-down-btn {
    background: no-repeat left center / auto 4.8rem !important;
}

section[role="region"] > header:first-child .icon.icon-options {
    background-image: url(headers/images/icons/options.png);
}

/* Navigation links (back, cancel, etc) */
section[role="region"] > header:first-child > button,
section[role="region"] > header:first-child > a {
    position: relative;
    width: 5rem;
    height: 5rem;
    background: none;
    float: left;
    overflow: visible;
    margin: 0 -5rem 0 0;
}

section[role="region"] > header:first-child > button:after,
section[role="region"] > header:first-child > a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 2.6rem;
    height: 5rem;
}

section[role="region"] > header:first-child > button .icon,
section[role="region"] > header:first-child > a .icon {
    display: block;
    margin: 0;
    font-size: 0;
}

/* ----------------------------------
 * HEADERS: subheader
 * ---------------------------------- */

section[role="region"] > header {
    z-index: 0;
    height: auto;
}

section[role="region"] > header:after {
    display: none;
}

section[role="region"] header h2 {
    margin: 0;
    padding: 0.8rem 3rem;
    color: #424242;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.8rem;
    border-bottom: solid 0.1rem #e6e6e6;
}

/* ----------------------------------
 * HEADERS: dark
 * ---------------------------------- */
section[role="region"].skin-dark > header:first-child,
.skin-dark > section[role="region"] > header:first-child {
    background-color: #242D33;
}


/* Navigation links (back, cancel, etc) */
section[role="region"].skin-dark > header:first-child .icon.icon-back {
    background-image: url(headers/images/icons/organic/back.png);
}

section[role="region"].skin-dark > header:first-child .icon.icon-close {
    background-image: url(headers/images/icons/organic/close.png);
}


section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):active:after,
section[role="region"].skin-dark > header:first-child > button:not(:disabled):active:after,
section[role="region"].skin-dark > header:first-child > a:not([aria-disabled="true"]):hover:after,
section[role="region"].skin-dark > header:first-child > button:not(:disabled):hover:after,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
section[role="region"].skin-dark > header:first-child menu[type="toolbar"] button:not(:disabled):active  {
    background-color: #1d525e !important;
}

section[role="region"].skin-dark header h2,
.skin-dark > section[role="region"] header h2 {
    background-color: #2c353b;
    color: #fff;
    border: none;
}



/* ----------------------------------
 * HEADERS: organic
 * ---------------------------------- */

section[role="region"].skin-organic > header:first-child,
.skin-organic section[role="region"] > header:first-child {
    background-color: #F4F4F4;
}

section[role="region"].skin-organic > header:first-child h1,
.skin-organic section[role="region"] > header:first-child h1 {
    color: #868692;
}


/* Navigation links (back, cancel, etc) */
section[role="region"].skin-organic > header:first-child .icon.icon-back,
.skin-organic section[role="region"] > header:first-child .icon.icon-back {
    background-image: url(headers/images/icons/organic/back.png);
}

section[role="region"].skin-organic > header:first-child .icon.icon-close,
.skin-organic section[role="region"] > header:first-child .icon.icon-close {
    background-image: url(headers/images/icons/organic/close.png);
}

section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):active:after,
.skin-organic section[role="region"] > header:first-child > a:not([aria-disabled="true"]):active:after,
section[role="region"].skin-organic > header:first-child > button:not(:disabled):active:after,
.skin-organic section[role="region"] > header:first-child > button:not(:disabled):active:after,
section[role="region"].skin-organic > header:first-child > a:not([aria-disabled="true"]):hover:after,
.skin-organic section[role="region"] > header:first-child > a:not([aria-disabled="true"]):hover:after,
section[role="region"].skin-organic > header:first-child > button:not(:disabled):hover:after,
.skin-organic section[role="region"] > header:first-child > button:not(:disabled):hover:after,
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):hover,
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):hover,
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] a:not([aria-disabled="true"]):active,
section[role="region"].skin-organic > header:first-child menu[type="toolbar"] button:not(:disabled):active,
.skin-organic section[role="region"] > header:first-child menu[type="toolbar"] button:not(:disabled):active  {
    background-color: #aae1e9 !important;
}

section[role="region"].skin-organic header h2,
.skin-organic section[role="region"] header h2 {
    background-color: #e7e7e7;
    color: #4D4D4D;
    border: none;
}

section[role="region"].skin-organic > header:first-child a,
.skin-organic section[role="region"] > header:first-child a,
section[role="region"].skin-organic > header:first-child button,
.skin-organic section[role="region"] > header:first-child button {
    color: #858585;
}


/* ----------------------------------
 * HEADERS: right-to-left tweaks
 * ---------------------------------- */

html[dir="rtl"] section[role="region"] > header:first-child h1 {
    text-align: right;
    padding: 0 3rem 0 1rem;
}
html[dir="rtl"] section[role="region"] > header:first-child form {
    padding: 1rem .5rem 0 1rem ;
    margin-right: 3.5rem;
    margin-left:0;
}
html[dir="rtl"] section[role="region"] > header:first-child input[type="text"] {
    background: #fff url(headers/images/ui/shadow.png) repeat-x right -0.1rem;
}

html[dir="rtl"] section[role="region"] > header:first-child form button[type="reset"] {
    left: 1rem;
    right:inherit;
}
html[dir="rtl"] section[role="region"] > header:first-child menu[type="toolbar"] {
    float: left;
}
html[dir="rtl"] section[role="region"] > header:first-child menu[type="toolbar"] a,
html[dir="rtl"] section[role="region"] > header:first-child menu[type="toolbar"] button {
    float: right;
}
html[dir="rtl"] section[role="region"] > header:first-child > button,
html[dir="rtl"] section[role="region"] > header:first-child > a {
    float: right;
    margin: 0 0 0 -5rem;
}
html[dir="rtl"] section[role="region"] > header:first-child > button:after,
html[dir="rtl"] section[role="region"] > header:first-child > a:after {
    right: 0;
}
html[dir="rtl"] section[role="region"] > header:first-child .icon.icon-back {
    background-image: url(headers/images/icons/back_rtl.png);
}
html[dir="rtl"] section[role="region"].skin-organic > header:first-child .icon.icon-back,
html[dir="rtl"] .skin-organic section[role="region"] > header:first-child .icon.icon-back,
html[dir="rtl"] section[role="region"].skin-dark > header:first-child .icon.icon-back {
    background-image: url(headers/images/icons/organic/back_rtl.png);
}
