/**
 * This file containts the CSS Styles for the workorder graph.
 * Other parts of that are dynamically created within the dtl.
 *
 * @project     OTRS (http://www.otrs.org) - Agent Frontend
 * @copyright   OTRS AG
 * @license     AGPL (http://www.gnu.org/licenses/agpl.txt)
 */

/**
 * @package     Skin "Default"
 * @section     Workorder Graph
 */

@media screen,projection,tv,handheld {

/**
 * @subsection  Workorder Graph
 */

div.WorkorderGraphBox {
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 1px;
    z-index: 100;
}

div.WorkorderGraph {
    position: relative;
    padding-bottom: 5px;
}

div.LinesScaleBox {
    position:absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

div.LinesScale {
    height: 100%;
    position: relative;
}

div.Timeline {
    position: absolute;
    height: 100%;
    font-size: 1px;
    z-index: 2;
}

div.ScaleVerticalLine {
    position: absolute;
    background-color: lightgrey;
    height: 100%;
    width: 1px;
    font-size: 1px;
    z-index: 1;
}

div.WorkorderLabel {
    position: relative;
    margin-right: 2px;
    float: left;
    text-align: left;
    height: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 14px;
}

.RTL div.WorkorderLabel {
    margin-right: auto;
    margin-left: 2px;
    float: right;
    text-align: right;
}

div.WorkorderLabel .Flag {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 2px;
}

.RTL div.WorkorderLabel .Flag {
    float: right;
}

div.WorkorderLabel .Flag span {
    cursor: auto;
}

div.Workorder {
    margin-bottom: 5px;
}

div.Workorder a {
    text-decoration: none;
    display: block;
    padding-top: 3px;
    padding-bottom: 3px;
    height: 15px;
    position: relative;
}

div.Workorder a span {
    display: block;
    width: 100%;
    height: 5px;
    margin: 1px auto 2px;
    position: relative;
}

div.Workorder a span > span {
    display: block;
    height: 5px;
    position: absolute;
    top: 0px;
    font-size: 3px;
    z-index: 4;
    cursor: pointer;
}

.WorkorderInactive {
    filter: alpha(opacity = 50);
    opacity: 0.5;
}

div.WorkorderDetails {
    display: none;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 5;
    width: 400px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #CCC;
    background-color: #EEE;
    padding: 6px;
    -moz-box-shadow: 4px 4px 4px #666;
    -webkit-box-shadow: 4px 4px 4px #666;
    box-shadow: 4px 4px 4px #666;
}

div.ScaleHorizontal {
    border-top: 1px solid lightgrey;
    padding-top: 5px;
    position: relative;
    width: 100%;
}

div.ScaleEntry {
    position: absolute;
    top: 3px;
    text-align: center;
    font-size: 8pt;
    width: 10%;
}

div.ScaleEntryTail {
    text-align: left;
}

div.ScaleEntryTrail {
    text-align: right;
}

.RTL div.ScaleEntryTail {
    text-align: right;
}

.RTL div.ScaleEntryTrail {
    text-align: left;
}

div.Scale0 {
    left: 0%;
}

div.Scale15 {
    left: 15%;
}

div.Scale20 {
    left: 20%;
}

div.Scale35 {
    left: 35%;
}

div.Scale40 {
    left: 40%;
}

div.Scale55 {
    left: 55%;
}

div.Scale60 {
    left: 60%;
}

div.Scale75 {
    left: 75%;
}

div.Scale80 {
    left: 80%;
}

div.Scale90 {
    left: 90%;
}

div.Scale100 {
    left: 99.9%;
}

.RTL div.Scale0 {
    left: auto;
    right: 0%;
}

.RTL div.Scale15 {
    left: auto;
    right: 15%;
}

.RTL div.Scale20 {
    left: auto;
    right: 20%;
}

.RTL div.Scale35 {
    left: auto;
    right: 35%;
}

.RTL div.Scale40 {
    left: auto;
    right: 40%;
}

.RTL div.Scale55 {
    left: auto;
    right: 55%;
}

.RTL div.Scale60 {
    left: auto;
    right: 60%;
}

.RTL div.Scale75 {
    left: auto;
    right: 75%;
}

.RTL div.Scale80 {
    left: auto;
    right: 80%;
}

.RTL div.Scale90 {
    left: auto;
    right: 90%;
}

.RTL div.Scale100 {
    left: auto;
    right: 99.9%;
}

} /* end @media */