div.copets_Timeline {
    position: relative;
    /*height: 155px;*/
    width: 270px;
}

/**
 * .-----------------------------------------------------
 * |datetimeLine ---------------------------------------->
 * | dateScale ------> dateScale ------------------------>
 * |  dateScaleInner |  dateScaleInner                   |
 * |   YYYY/MM/DD    |   YYYY/MM/DD                      |
 *
 */
div.datetimeLine {
    background-color: #FFFFFF;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 0 0 1px;
    font-size: 8pt;
    position: relative;
    height: 15px;
    width: 240px;
}
div.dateScale {
    height: 15px;
    float: left;
}
div.dateScaleInner {
    overflow: hidden;
    border-color: #CCCCCC;
    border-width: 0 1px 0 0;
    border-style: solid;
    height: 15px;
}
/**
 * .-----------------------------------------------------
 * |datetimeLine ---------------------------------------->
 * | timeScale ------> timeScale ------> timeScale ------>
 * |  timeScaleInner |  timeScaleInner |  timeScaleInner |
 * |   HH            |   HH            |   HH            |
 *
 */
div.timeScale {
    height: 15px;
    width: 20px;
    float: left;

}
div.timeScaleInner {
    overflow: hidden;
    border-color: #CCCCCC;
    border-width: 0 1px 0 0;
    border-style: solid;
    height: 15px;
}
/**
 * .-------------------------------------------------------
 * |timeline ---------------------------------------------->
 * | timelineCell -------------> timelineCell ------------->
 * |  timelineCellInner dotted :  timelineCellInner solid  |
 * |                           :                           |
 * `-------------------------------------------------------
 */
div.timeline {
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    font-size: 1px;
    position: absolute;
    height: 22px;
    width: 240px;
}
div.timeline div.timelineCell {
    font-size: 1px;
    height: 22px;
    width: 5px;
    float: left;
}
div.timelineCellInner.dotted {
    border-color: #CCCCCC;
    height: 22px;
    border-width: 0 1px 0 0;
    border-style: dotted;
}
div.timelineCellInner.solid {
    border-color: #CCCCCC;
    height: 22px;
    border-width: 0 1px 0 0;
    border-style: solid;
}
/**
 * none       : 現在よりも前の時間
 * selected   : ユーザ選択時間
 * vacant     : 空き時間
 * reserved   : 予約されている時間
 * affer-hours: 営業時間外
 */
div.timelineCellInner.selected {
    background-color: #9E9EFF;
}
div.timelineCellInner.vacant {
    background-color: #FFFFFF;
}
div.timelineCellInner.reserved {
    background-color: #FF6666;
    cursor: no-drop;
}
div.timelineCellInner.outside {
    background-image: url(outside.gif);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: left top;
    cursor: no-drop;
}
/**
 * .---------------------------------------------------------.
 * |scheduleBoard                                            |
 * |     .----------------------------------------------.    |
 * |     |schedule                                      |    |
 * |     | scheduleLeft  scheduleCaption  scheduleRight |    |
 * |     |  |handle                            handle|  |    |
 * |     |                                              |    |
 * |     '----------------------------------------------'    |
 * '---------------------------------------------------------'
 */

div.scheduleBoard {
    height: 24px;
    width: 270px;
    position: relative;
}
div.schedule {
    background-color: #FFFFE5;
    border: 1px solid #202F55;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
}
div.schedule div.scheduleCaption {
    padding: 2px;
}
div.schedule div.scheduleLeft {
    cursor: w-resize;
    font-size: 1px;
    float: left;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 4px;
}
div.schedule div.scheduleRight {
    cursor: e-resize;
    font-size: 1px;
    float: right;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
}
div.handle {
    background-color: #202F55;
    font-size: 1px;
    height: 12px;
    width: 2px;
    margin-top: 5px;
    margin-left: 1px;
    margin-right: 1px;
}
div.controller {
    position: relative;
    padding-top: 10px;
    clear: both;
}
div.controller form {
    line-height: 1.5em;
    vertical-align: text-bottom;
}
div.submitForm {
    clear: both;
    text-align: left;
    position: relative;
    padding-top: 10px;
}