/**
 * This is the style sheet for the tracks page.
 *
 * @author     Vera Kern <vera@worksmartlabs.com>
 * @copyright  2009 WorkSmart Labs, Inc.
 */

/* blue bar above map / menu */
.tracks_blue {
    position:absolute;
    left:14px;
    _left:13;
    top:90px;
    width:275px;
    background-color:#DFEAF0;
    float:left;
    height:20px;
}

.tracks_blue.expanded {
    width:0px;
    left:0px;
}

.tracks_expand {
    position:absolute;
    left:289px;
    top:90px;
    width:520px;
    _width:519px;
    background-color:#BFDFF0;
    height:20px;
    text-align:right;
    padding-right:5px;
}

.tracks_expand.expanded {
    width:795px;
    left:14px;
    _left:13px;
}

div#tracks_arrow {
    background-image:url(/cardiotrainer/images/track_history_sprites.png);
    background-repeat:no-repeat;
    background-position:-17px 0px;
    width:15px;
    height:20px;
    cursor:pointer;
    float:left;
    display:none;
}

.tracks_submenu {
    height:18px;
    margin-top:2px;
    float:right;
    display:none;
    color:#4376F7;
    cursor:pointer;
    font-weight:normal;
    text-decoration:none;
}

.tracks_separator {
    margin-right:5px;
    margin-left:5px;
    margin-top:1px;
    color:#4376F7;
    float:right;
    display:none;
}

/* tracklist styles */
div#tracklist {
    position:absolute;
    top:110px;
    left:13px;
    width:277px;
    height:414px;
    overflow:auto;
    background:url(/cardiotrainer/images/tracklist_bg.png) no-repeat;
    _background-attachment:fixed;
}

div#smallGray {
    margin-top:5px;
    font-size:10px;
    color:#666666;
    text-align:center;
}

div#loadMore {
    color:#000000;
    text-align:center;
    margin-top:5px;
    font-weight:normal;
}

div#tracks_bluebar {
    height:15px;
    padding:7px;
    padding-left:10px;
    text-align:left;
    background-image:url(/cardiotrainer/images/bluebar.png);
}

.tracks_bluebar_menuitem {
    width:85px;
    height:13px;
    float:left;
    background-repeat:no-repeat;
}

.tracklist_item {
    cursor:pointer;
    padding:10px;
    padding-right:0px;
    background-repeat:no-repeat;
    text-align:left;
    border-top:1px #4376F7 solid;
    overflow:hidden;
    height:45px;
}

.tracklist_item.highlighted {
    background-image:url(/cardiotrainer/images/highlight_track.png);
    font-weight:bold;
}

.tracklist_content {
    width:85px;
    float:left;
}

div#no_tracks_yet {
    text-align:center;
    display:none;
}

/* map style */
.map {
    position:absolute;
    top:110px;
    left:291px;
    width:523px;
    height:414px;
    z-index:1;
    background-color:#F6F6F4;
}

.map.expanded {
    width:799px;
    left:14px;
}

.mapinfo {
    position:absolute;
    left:400px;
    top:220px;
    width:300px;
    text-align:center;
    z-index:1;
    font-weight:bold;
    display:none;
}

/* Link */
a.save:link {
    color:#333333;
    font-size:12px;
    text-decoration:underline;
    font-weight:normal;
}

a.save:visited{
    color:#333333;
    font-size:12px;
    text-decoration:underline;
    font-weight:normal;
}

a.save:hover{
    color:#333333;
    font-size:12px;
    text-decoration:underline;
    font-weight:normal;
}

a.save:active{
    color:#333333;
    font-size:12px;
    text-decoration:underline;
    font-weight:normal;
}

/* shadows on the map */
.horizontal_container {
    position:absolute;
    top:110px;
    left:290px;    
    width:523px;
    z-index:2;
    font-size:1px;
}

.horizontal_container.expanded {
    width:799px;
    left:14px;
}

.vertical_container {
    position:absolute;
    top:110px;
    left:290px;
    z-index:3;
}

.vertical_container.expanded {
    left:14px;
}

.shadowVertical {
    position:absolute;
    height:414px;
    background-color:#000000;
    z-index:4;
}

.shadowHorizontal {
    position:absolute;
    width:100%;
    background-color:#000000;
    z-index:4;
}

div#horizontal1 {
    height:1px;
    filter:alpha(opacity=10);
    -moz-opacity:.1;
    opacity:.1;
}

div#horizontal2 {
    height:2px;
    filter:alpha(opacity=8);
    -moz-opacity:.08;
    opacity:.08;
}

div#horizontal3 {
    height:3px;
    filter:alpha(opacity=6);
    -moz-opacity:.06;
    opacity:.06;
}

div#horizontal4 {
    height:4px;
    filter:alpha(opacity=4);
    -moz-opacity:.04;
    opacity:.04;
}

div#horizontal5 {
    height:5px;
    filter:alpha(opacity=2);
    -moz-opacity:.02;
    opacity:.02;
}

div#vertical1 {
    width:1px;
    filter:alpha(opacity=10);
    -moz-opacity:.1;
    opacity:.1;
}

div#vertical2 {
    width:2px;
    filter:alpha(opacity=8);
    -moz-opacity:.08;
    opacity:.08;
}

div#vertical3 {
    width:3px;
    filter:alpha(opacity=6);
    -moz-opacity:.06;
    opacity:.06;
}

div#vertical4 {
    width:4px;
    filter:alpha(opacity=4);
    -moz-opacity:.04;
    opacity:.04;
}

div#vertical5 {
    width:5px;
    filter:alpha(opacity=2);
    -moz-opacity:.02;
    opacity:.02;
}