/*
IMPORTANT:
Essential styles to ensure accessibility
*/
@media projection, screen { /* use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display:none}
}
@media print { /* retain accessibility by overriding inline style used by animations... */
    .fragment {
        display:block !important;
        height:auto !important;
        opacity:1 !important}
}

#container{
    display:none;
    margin:0 0 15px 0;
    overflow:hidden}
    #container div *{
        position:relative;
        z-index:2;}
#container div{
    clear:both;
    height:230px;
    margin:0;
    overflow:hidden;
    padding:15px 0 0 10px;
    position:relative;
    top:0;
    width:580px}
    #container h1{
        height:auto;
        line-height:16px;
        color:#FFF;
        background:none}
    #container ul li,#container ol li{
        list-style:none;}
    #container ol{
        margin:15px 0 0 30px;
        padding:0}
        #container ol li{
            color:#FFF;
            padding:0;
            margin:0 0 12px 0}
    #container img{
        position:absolute;
        left:0;top:0;
        z-index:1}
    div#hwelcome h1{
        display:none}
#container ul.anchors{
    list-style:none;
    height:24px;
    margin:0;
    padding:0}
    #container ul.anchors li{
        width:100px;
        float:left;
        padding:0;
        margin:0 1px 0 0}
    #container ul.anchors a{
        display:block;
        width:84px;
        height:24px;
        padding:0 8px;
        line-height:24px;
        color:#333;
        background:#CFD9D4;
        text-decoration:none}
#container li.ui-tabs-selected a {
    background:#EBD8C5;
    color:#69501B;
    text-decoration:none;
    outline:none}
.anchors a:focus, .anchors a:active{
    background:#EBD8C5;
    outline:none} /* @ Firefox 1.5, remove ugly dotted border */
.anchors a:hover, .anchors a:focus{
    background:#D7DFDA;
    outline:none}
.anchors .on a:link, .anchors .on a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor:text}
.anchors a:hover, .anchors a:focus, .anchors a:active{
    cursor:pointer;
    outline:none}

.ui-tabs {}
.ui-tabs .ui-tabs-nav {}
.ui-tabs .ui-tabs-nav li {
    position:relative; 
    float:left; 
    border-bottom-width:0 !important; 
    padding:0}
.ui-tabs .ui-tabs-nav li a {}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: text;}
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
    display:block; 
    border-width:0;
    background:none}
.ui-tabs .ui-tabs-hide { 
    display:none !important}