/* button */

[role="button"] 
{
    display: block;
	height: 20px;
	width: 100px;
    font-size: 1.1em;
    font-weight: bold;
    padding: 10px 15px;
    margin 20px auto;
    color: #ccc;
    background-color: #555;
    border: 0 none;
    border-radius: 3px;
    text-shadow: 0 -1px 0 #000;
    box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
}

[role="button"]:hover, [role="button"]:focus 
{
    background-color: #333;
    color: #fff;
    text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff;
    box-shadow: 0 1px 0 #666, 0 2px 0 #444, 0 2px 2px rgba(0,0,0,0.9);
}

[role="button"][aria-expanded="false"] .icon:after {
    content: ' ›';
}

[role="button"][aria-expanded="true"] .icon:after {
    content: ' ×';
}


/* content panel */

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

div[aria-hidden="false"]
{
    display: block;
    border: 1px #000 solid;
    padding: 1em;
    background: #555;
    color: #FFF;
}