/* {{{ custom -- Custom widgets core to ActiveStyle
 *
 * A problem with lumping many widgets in here is that it is a burden on
 * sites that have no use for them. The perf impact can be real.
 *
 * TODO: (a) A plan for approving what is allowed to get in here.
 * (b) Possibly a system for breaking this css out into multiple independent
 * custom css files that using sites can grab piecemeal.
 */

.as_secondary {
    font-size: 90%;
    color: gray;
}


/* Include a "skip to $here" link section at the top of the <body> for
 * accessibility (a11y). This provides a jump link that is generally only
 * "visible" with screen readers. Suggested markup something like:
 *      <ul class="as_skip">
 *          <li><a href="#q">Skip to Search</a></li>
 *          <li><a href="#site_nav">Skip to Navigation</a></li>
 *          <li><a href="#as_content">Skip to Content</a></li>
 *      </ul>
 *   Note this markup relies on the <div id="as_content"> section
 */
.as_skip {
    display: block;
    position: absolute;
    left: -9999px;
}

/* Clear floated elements like so:
 *      <div class="as_clear">&nbsp;</div>
 * TODO: document the need for &nbsp;
 */
.as_clear {
    clear: both;
    height: 0;
}

/* {{{ as_box 
 * Styling of a box with a header and content area for markup like this:
 *    <div class="as_box">
 *      <div class="as_box_header">...</div>
 *      <div class="as_box_content">
 *        ...
 *      </div>
 *    </div>
 */
.as_box {
    margin-bottom: 20px;
}
.as_box_header {
    background-color: #999;
    color: white;
    padding: 5px 15px;
    margin-top: 0;
    font-size: 16px;
}
.as_box_header a {
    color: white;
}
.as_box_content {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px 0px 10px 15px;
    font-size: 95%;         
}


/* Styling of an 'as_box' (from above) whose only contents in a table:
 *    <div class="as_box">
 *      <div class="as_box_header">...</div>
 *      <div class="as_box_content as_box_table">
 *        <table>...</table>
 *      </div>
 *    </div>
 *
 * IE Note:
 * You must use one of the HTML DOCTYPE headers (or at
 * least just "<html>" for a header doesn't work.) This one works:
 *     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 *        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 *     <html xmlns="http://www.w3.org/1999/xhtml">
 * See http://archivist.incutio.com/viewlist/css-discuss/34443 for details.
 *
 * TODO:
 * - IE6 check: suspect there is a problem with the two classes in
 *   one "class" attr?
 */
div.as_box_table {
    padding: 0;
    border: none;
}
div.as_box_table table {
    width: 100%;
}
div.as_box_table td,
div.as_box_table th {
    padding: 5px 5px 5px 0px;
}
div.as_box_table th:first-child,
div.as_box_table td:first-child {
    padding-left: 15px;
}
/* These colors are the same as those for the 'binaries' downloads tables
 * on www.as.com. TODO: a common class for this in ActiveStyle.
 */
div.as_box_table tr.as_odd td {
    background-color: #e5e5e5;
}
div.as_box_table tbody tr:hover td {
    background-color: #404041;
    color: #fff;
}
div.as_box_table tbody tr:hover .as_secondary {
    color: #fff;
}
div.as_box_table tr:hover a {
    color: #fff !important;
}
/* end of as_box }}} */

/* }}} */
