/**************************
CycleStreets custom theme
**************************/
.ui-bar-z {
    border: 1px solid #060;
    background: #009900;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 -1px 1px #000000;
    background-image: -moz-linear-gradient(top, #006300, #009900);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, #006300),
        color-stop(1, #009900));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#009900')";
}
.ui-bar-z .ui-link {
    color: #7cc4e7;
    font-weight: bold;
}
.ui-body-z {
    border: 1px solid #2A2A2A;
    background: #222222;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    font-weight: normal;
    background-image: -moz-linear-gradient(top, #666666, #222222);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, #666666),
        color-stop(1, #222222));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#222222)')";
}
.ui-body-z .ui-link {
    color: #2489CE;
    font-weight: bold;
}
.ui-br {
    border-bottom: rgb(130,130,130);
    border-bottom: rgba(130,130,130,.3);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
.ui-btn-up-z {
    border: 1px solid #222;
    background: #08C908;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 1px #000;
    background-image: -moz-linear-gradient(top, #555555, #08C908);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, 555555),
        color-stop(1, #08C908));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#555555', EndColorStr='#333333')";
}
.ui-btn-hover-z {
    border: 1px solid #000;
    background: #009900;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 -1px 1px #000;
    background-image: -moz-linear-gradient(top, #666666, #009900);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, #666666),
        color-stop(1, #009900));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#666666', EndColorStr='#009900')";
}
.ui-btn-down-z {
    border: 1px solid #000;
    background: #055C05;
    font-weight: bold;
    color:  #fff;
    text-shadow: 0 -1px 1px #000;
    background-image: -moz-linear-gradient(top, #333333, #055C05);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, #333333),
        color-stop(1, #055C05));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#5a5a5a')";
}
.ui-btn-up-z, .ui-btn-hover-z, .ui-btn-down-z {
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
}
.ui-btn-active {
    border: 1px solid #155678;
    background: #6BDF6B;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    text-shadow: 0 -1px 1px #145072;
    text-decoration: none;
    background-image: -moz-linear-gradient(top, #4B9C4B, #6BDF6B);
    background-image: -webkit-gradient(linear,left top,left bottom,
        color-stop(0, #4B9C4B),
        color-stop(1, #6BDF6B));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#85bae4', EndColorStr='#5393c5')";
    outline: none;
}
.ui-body-z, .ui-body-z input, .ui-body-z select, .ui-body-z textarea, .ui-body-z button, 
 .ui-bar-z, .ui-bar-z input, .ui-bar-z select, .ui-bar-z textarea, .ui-bar-z button {
    font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-z .ui-link-inherit, .ui-btn-active a.ui-link-inherit, .ui-btn-down-z a.ui-link-inherit,
 .ui-btn-hover-z a.ui-link-inherit, .ui-body-z .ui-link-inherit, .ui-btn-up-z a.ui-link-inherit {
    color: #fff;
}

/**************************
General useful styles
**************************/
.right { 
    float: right;
}
.hidden {
    display: none;
}
.center-text {
    text-align: center;
}
.inset {
    padding: 0 10px;
}

/**************************
Other custom styles 
**************************/

/* Home page */
.native-footer {
    display: none;
    vertical-align: middle;
    padding: 10px;
    text-align: center;
    margin: auto;
}
#native-button {
    margin-top: 10px;
}
#itunes-button {
    margin: auto;
    text-align: center;
}
#hide-native {
    float: right;
    margin-right: 20px;
    vertical-align: middle;
}

/* Journey page */
#crosshairs, #crosshairs_img {
    z-index: 1000 ! important;
    padding: 0;
    margin: 0;
    pointer-events: none;
}
#getting-location, #getting-photo {
    text-align: center;
}
table.routesegment {
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    margin-left: auto;
    margin-right: auto;
}
table.routesegment td.button {
    min-width: 70px;
}
td.left {
    text-align: left;
}

/* Photo page */
#photo-image { 
    width: 100%;
    display: block;
    margin: auto;
    padding: 10px;
}

img.maplet { 
    width: 256px;
    height: 256px;
    border: 1px solid #eee;
}