/**
 * CSS for building toggle links and toggle buttons.
 * Both can have a label or an image.
 *
 * Examples:
 *
 * <div class="wpToolbarCommon">
 *   ...
 *   <div class="wpToolbarToggleLink selected">
 *     <a href="#" title="tooltip" role="button" aria-pressed="true">
 *       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
 *     </a>
 *     <div class="wpToolbarAltText">Alt text</div>
 *   </div>
 *   ...
 *   <div class="wpToolbarToggleLink">
 *     <a href="#" title="tooltip" role="button" aria-pressed="false">
 *       My Label
 *     </a>
 *     <div class="wpToolbarAltText">Alt text</div>
 *   </div>
 *   ...
  *   <div class="wpToolbarToggle selected">
 *     <a href="#" title="tooltip" role="button" aria-pressed="true">
 *       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
 *     </a>
 *     <div class="wpToolbarAltText">Alt text</div>
 *   </div>
 *   ...
 *   <div class="wpToolbarToggle">
 *     <a href="#" title="tooltip" role="button" aria-pressed="false">
 *       My Label
 *     </a>
 *     <div class="wpToolbarAltText">Alt text</div>
 *   </div>
 * </div>
 *
 */
.wpToolbarCommon .wpToolbarToggle,
.wpToolbarCommon .wpthemeMenuShow.wpToolbarToggleLink {
    display: inline-block;
}

.wpToolbarCommon .wpToolbarToggle > a,
.wpToolbarCommon .wpToolbarToggleLink > a {
	box-sizing: border-box;
    display: inline-block;
    position: relative;
    min-width: 48px;
    min-height: 24px;
    padding: 3px;
    text-decoration: none;
    text-align: center;
    color: #000;
}
/* center the img element */
.wpToolbarCommon .wpToolbarToggle a img,
.wpToolbarCommon .wpToolbarToggleLink a img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.wpToolbarCommon .wpToolbarToggle:hover a .wpToolbarAltText,
.wpToolbarCommon .wpToolbarToggleLink:hover a .wpToolbarAltText {
	color: #222;
	text-decoration: underline;
}
/*
 * Overrides for toggle button
 */
.wpToolbarCommon .wpToolbarToggle > a {
    border-radius: 2px;
    border: 1px solid #c4c4c4;
    box-shadow: inset 0px 0px 2px #fff, inset 0px -2px 1px #d4d4d4, 0px 1px 0px #fff;
    -webkit-box-shadow: inset 0px 0px 2px #fff, inset 0px -2px 1px #d4d4d4, 0px 1px 0px #fff;
    -moz-box-shadow: inset 0px 0px 2px #fff, inset 0px -2px 1px #d4d4d4, 0px 1px 0px #fff;
    background-color: #f2f2f2;
    background: linear-gradient(top, #f2f2f2 0%, #e0e0e0 100%);
    background: -o-linear-gradient(top, #f2f2f2 0%, #e0e0e0 100%);
    background: -moz-linear-gradient(top, #f2f2f2 0%, #e0e0e0 100%);
    background: -webkit-linear-gradient(top, #f2f2f2 0%, #e0e0e0 100%);
    background: -ms-linear-gradient(top, #f2f2f2 0%, #e0e0e0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #f2f2f2), color-stop(1.0, #e0e0e0) );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0e0e0', endColorstr='#f2f2f2' );
}
.wpToolbarCommon .wpToolbarToggle > a:hover,
.wpToolbarCommon .wpToolbarToggle > a:focus {
    box-shadow: inset 0px 0px 2px #fff, inset 0px -2px 1px #c4c4c4, 0px 1px 0px #fff;
    -webkit-box-shadow: inset 0px 0px 2px #fff, inset 0px -2px 1px #c4c4c4, 0px 1px 0px #fff;
    -moz-box-shadow: inset 0px 0px 2px #fff, inset 0px -2px 1px #c4c4c4, 0px 1px 0px #fff;
    background-color: #f2f2f2;
    background: linear-gradient(top, #e0e0e0 0%, #d8d8d8 100%);
    background: -o-linear-gradient(top, #e0e0e0 0%, #d8d8d8 100%);
    background: -moz-linear-gradient(top, #e0e0e0 0%, #d8d8d8 100%);
    background: -webkit-linear-gradient(top, #e0e0e0 0%, #d8d8d8 100%);
    background: -ms-linear-gradient(top, #e0e0e0 0%, #d8d8d8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #e0e0e0), color-stop(1.0, #d8d8d8) );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8d8d8', endColorstr='#e0e0e0' );
}
.wpToolbarCommon .wpToolbarToggle.selected > a {
    box-shadow: inset 0px 1px 2px #646464, inset 0px -2px 1px #d4d4d4, 0px 1px 0px #FFFFFF;
    -webkit-box-shadow: inset 0px 1px 2px #646464, inset 0px -2px 1px #d4d4d4, 0px 1px 0px #FFFFFF;
    -moz-box-shadow: inset 0px 1px 2px #646464, inset 0px -2px 1px #d4d4d4, 0px 1px 0px #FFFFFF;
    background-color: #aaaaaa;
    background: linear-gradient(top, #aaa 0%, #cfcfcf 100%);
    background: -o-linear-gradient(top, #aaa 0%, #cfcfcf 100%);
    background: -moz-linear-gradient(top, #aaa 0%, #cfcfcf 100%);
    background: -webkit-linear-gradient(top, #aaa 0%, #cfcfcf 100%);
    background: -ms-linear-gradient(top, #aaaaaa 0%, #cfcfcf 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #aaa), color-stop(1.0, #cfcfcf) );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfcfcf', endColorstr='#aaaaaa' );
    border: 1px solid #aaaaaa;
}