/* 
 * MAP HOLDER
 */

#map-holder {
    width: 850px;
    height: 400px;
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

#google-map {
    float: left;
    width: 598px;
    height: 100%;
    border: 1px solid #aaa;
    border-top: 0px;
    border-bottom: 0px;
}

#toolbar {
    float: left;
    width: 100px;
    height: 100%;
    background: #e8eeee;
}

#toolbar-tools {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    text-align: center;
}

#toolbar-tools input {
    background: #eee;
    color: #000;
    border: 1px solid #aaa;
    margin: 12px 0 0 0;
    cursor: pointer;
}

#toolbar-tools input.hilite {
    background: #aaf;
    border: 1px solid #ccf;
}

#directions {
    position: relative;
    float: right;
    width: 150px;
    height: 100%;
    background: #e8eeee;
}

#directions-steps {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 10px 20px;
    color: #555;
}

#directions-steps-shadow {
    position: absolute;
    left: 1px;
    top: 1px;
    padding: 10px 20px;
    color: #ddd;
}

#directions table {
    width: 130px;
}

#directions table td, #directions table th {
    border: 0px;
    text-align: right;
}

#directions table td {
    width: 50%;
}

#directions table td.label {
    font-weight: bold;
    width: 80%;
}

#options {
    height: 80%;
}

#actions {
    height: 20%;
}

/*
 * ELEVATION PROFILE
 */

#altGraf {
    position: relative;
    margin: auto;
    width: 850px;
    height: 200px;
    overflow: hidden;
}

#elevation-profile {
    position: absolute;
    top: 25px;
    left: 60px;
    width: 790px;
    height: 150px;
    background: #aaa;
}

.integral {
    position: absolute;
    border-top: 1px solid #fff;
    width: 1px;
}

.whole {
    background: #bbb;
    z-index: 35;
}

.filler {
    background: #eee;
    z-index: 30;
}

.elevation-tick {
    position: absolute;
    left: -10px;
    width: 800px;
    border-top: 1px dotted #ccc;
    z-index: 10;
}

.elevation-tick .value {
    position: absolute;
}

.unit-tick {
    position: absolute;
    width: 1px;
    height: 6px;
    border-left: 1px dotted #ccc;
    z-index: 10;
}

.unit-tick .value {
    position: absolute;
    top: 6px;
    text-align: center;
    padding: 0px 2px;
    z-index: 12;
}

.unit-marker-hiliter {
    position: absolute;
    z-index: 40;
}

.unit-marker-hiliter .cover {
    position: absolute;
    width: 1px;
    background: #5f5;
}

.unit-marker-hiliter .stretch {
    position: absolute;
    width: 1px;
    background: #000;
}

.unit-marker-hiliter .unit {
    position: absolute;
    border: 1px solid #5f5;
}

.unit-marker-hiliter .value {
    position: absolute;
    border: 1px solid #000;
    padding: 0px 4px;
    text-align: center;
}

/*
 * Race Info Form
 */
#race-distances {
    margin: 0;
}

#race-distance-length {
    text-align: right;
}

.note {
    font-size: 12px;
    font-style: italic;
}