.tabribbon {
    width: 100%;
    border-bottom: 1px solid #BBB;
    box-shadow: 0px 0px 8px #999;
    -moz-box-shadow: 0px 0px 8px #999;
    -webkit-box-shadow: 0px 0px 8px #999;
    
    font-family: sans-serif;
    font-size: 10pt;
    
    background: #DFDFDF;
    color: #333;
}

.tabs {
    height: 25px;
}
.tabs > * {
    height: 20px;
    padding-left: 8px; padding-right: 8px; padding-top: 3px;
    border-bottom: 1px solid transparent; border-top: 1px solid transparent;
    
    float: left;
}
.tabs > *:hover {
    cursor: pointer;
    
    color: black;
    
    background: #EBEBEB;
    padding-left: 7px; padding-right: 7px;
    padding-top: 4px;
    
    border: 1px solid #CCC;
    border-bottom: 1px solid #DFDFDF;
    border-top: 0px solid transparent;
}
.tabs > .selected {
    background: whiteSmoke;
    border-top: 1px solid #888;
    border-bottom: 1px solid transparent;
    padding-top: 3px;
}
.tabs > * > img {
    float: left;
}
.tabs > * > img.at_left {
    margin-right: 4px;
}
.tabs > * > img.at_right {
    margin-left: 4px;
}
.tabs > ._home {
    font-weight: bold;
}

.toolbars {
    clear: both;
    height: 58px;
    
    background: whiteSmoke;
}

.toolbars > * {
    width: 100%;
    height: 100%;
}

/* toolsets have fixed height and float to the left */
.toolbars .toolset {
    padding-top: 3px;
    height: 55px;
    float: left;
    
    padding-left: 6px;
    padding-right: 6px;
    border-right: 1px solid #DFDFDF;
}

.toolset .title {
    margin-top: 14px; /* FIXME this must be changed by the specific application to do a correct alignment */
    color: #666;
    font-size: 8pt;
    text-align: center;
}

.screens > * {
    padding: 6px;
}