/* 1. Accessible tooltips without javascript */

/* make the containers relative */
fieldset > div {
    position: relative;
}

/* set up hidden tooltip */
[role="tooltip"] {
    display: none;
    padding: 0.25em;
    margin: 0;
    color: #fff;
    background: #EF8100;
    width: 100%;
    z-index: 2;
}

/* reveal associated tooltip on focus of preceeding input */
input:focus + [role="tooltip"] {
    display: block;
    position: absolute;
    top: 100%;
}

/* 2. Incrementer & decrementer */

#number {
    display: inline-block;
    width: 60%;
}

#number ~ button {
    font-size: 1em;
    font-weight: 700;
    margin-top: 0.33em;
    padding: 0.25em;
    text-align: center;
}

/* 3. Progressive collapsibles */

.collapsible {
    padding: 1.5em;
    background: #E0E1EF;
}

h3 [aria-expanded] {
    display: block;
    width: 100%;
    font-size: inherit;
    font-family: inherit;
    text-transform: inherit;
    text-align: inherit;
    margin: 0;
}

h3 [aria-expanded]:before {
    content: '\25ba\0020';
}

h3 [aria-expanded="true"]:before {
    content: '\25bc\0020';
}

.collapsible h3 + [aria-hidden] {
    display: none;
}

.collapsible h3 + [aria-hidden="false"] {
    display: block;
}

/* 4. Simple tab interface */

a[role="tab"] {
    background: #1928CF;
    color: #fff;
    padding: 0.75em 0.33em;
    display: inline-block;
    margin-right: 0.25em;
}

a[aria-selected], a[role="tab"]:focus {
    background: #fff;
    color: #222;
    border: 2px solid #222;
    border-bottom: 0;
    position: relative;
    top: 2px;
}

a[role="tab"]:focus {
    background: #eee;
}

[role="tablist"] li {
    display: inline-block;
    list-style: none;
}

[role="tabpanel"] {
    margin-top: 0;
    padding: 1.5em;
    border: 2px solid #222;
}

[role="tabpanel"][aria-hidden="true"] {
    display: none;
}

[role="tabpanel"]:focus {
    background: #eee;
    outline: thin dotted;
}

/* 5. Alert! You're offline */

#status {
    padding: 1.5em;
    background: #5B7751;
    color: #fff;
}

#status.offline {
    background: #BF5050;
}

/* 6. Warning dialog */

dialog {
    display: none;
}

dialog[open] {
    display: block;
    width: 50%;
    height: 50%;
    position: fixed;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
    background: #ccc;
    border: 4px solid #999;
}

dialog[open]:focus {
    outline: 2px solid #222;
}

.mod-hidden {
    visibility: hidden;
}

dialog[open] > div {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%; 
    vertical-align: middle;
}

dialog[open] [role="document"] {
    display: table-cell;
    vertical-align: middle;
    padding: 1.5em;
}

dialog[open] [role="document"]:focus {
    outline: 2px solid;
}

#big-red {
    font-size: 2em;
    background: #cc0000;
}

/* 7. A toolbar widget */

.grey-box {
    background: #ddd;
    padding: 1.5em;
}

[role="toolbar"] {
    padding: 0.75em;
    background: #bbb;
    position: relative;
    text-align: center;
}

[role="toolbar"]:after {
    content: '\25bc';
    display: block;
    width: 100%;
    text-indent: -0.75em;
    text-align: center;
    position: absolute;
    bottom: -0.75em;
    font-size: 1.5em;
    color: #bbb;
}

[role="toolbar"] button {
    margin: 0.5em;
    box-shadow: 1px 1px 0 #222, 2px 2px 0 #222, 3px 3px 0 #222, 4px 4px 0 #222, 5px 5px 0 #222, 6px 6px 0 #222;
    position: relative;
    top: -6px;
}

[role="toolbar"] [aria-pressed="true"], [role="toolbar"] button:active {
    box-shadow: 1px 1px 0 #222, 2px 2px 0 #222;
    top: -2px;
}

[role="toolbar"] button:focus {
    outline: none;
    background: #1A248F;
}

[role="toolbar"] + ul li {
    background: #fff;
    list-style: none;
    padding: 0.5em;
    margin: 0.25em 0;
}

#sortable:focus {
    outline: thin dotted;
    outline-offset: 5px;
}

/* 9. Simple dropdowns */

[aria-label^="example"] ul {
    background: #1928cf;
}

[aria-label^="example"] ul:after {
    content: '\0020';
    display: block;
    clear: both;
}

[aria-label^="example"] li {
    float: left;
    vertical-align: top;
    list-style: none;
}

[aria-label^="example"] li + li a {
    border-left: 1px solid;
}

[aria-label^="example"] a {
    color: #fff;
    display: block;
    padding: 0.5em;
}

[aria-label^="example"] a:hover, [aria-label^="example"] a:focus {
    background: #222;
}

[aria-haspopup="true"] {
    position: relative;
}

[aria-haspopup="true"] span {
    font-size: 0.85em;
    padding-left: 0.25em;
}

ul[aria-hidden="true"] {
    display: none;
}

[aria-haspopup="true"] + ul[aria-hidden="false"] {
    margin-top: 0;
    display: block;
    position: absolute;
    min-width: 200px;
}

[aria-haspopup="true"] + ul li {
    float: none;
}