html {
    font-family: "Exo", "helvetica neue", helvetica, arial;
    overflow: hidden;
}

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #222;
    overflow: hidden;
}

img {
    border: 0px;
}

a:active, a:focus {
    -moz-outline-style: none;
    outline: none;
}

.map {
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#shutter {
    background: white;
    z-index: 9999;
    display: none;
}

.invisible {
    visibility: hidden;
}

.nobr {
    white-space: nowrap;
}

ul {
    list-style-type: none;
}

#settings_dialog td {
    vertical-align: top;
}

#settings_dialog td.c1 {
    text-align: center;
    font-weight: bold;
    padding-left: 16px;
}

#settings_dialog tr.break-after td {
    padding-bottom: 16px;
}

.ok-button-container {
    text-align: center;
    width: 100%;
}

.custom-button {
    display: inline-block;
    padding: 7px 24px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 3px solid white;
    background: #444;
    margin: 16px auto 0px auto;
    text-align: center;
    color: white;
    cursor: pointer;
}

.supports-hover .custom-button:hover {
    opacity: 1;
    cursor: pointer;
    background: #222;
}

#full_screen_message_outer {
    display: none;
    position: absolute;
    top: 20px;
    z-index: 400;
    width: 100%;
}

#full_screen_message_inner {
    padding: 8px;
    text-align: center;
    margin: 0 auto;
    width: 300px;
    color: #ddd;
}

a {
    color: #ccc;
    text-decoration: none;
}

.dark-1-bg {
    background: #333; /* for browsers that don't understand the following rgba rule */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}

.dark-2-bg {
    background: #333; /* for browsers that don't understand the following rgba rule */
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
}

.dark-3-bg {
    background: #111; /* for browsers that don't understand the following rgba rule */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

.full-screen-message {
    text-align: center;
    font-size: 22pt;
    color: #ff6;
    margin-top: 16px;
    font-weight: bold;
}

.round {
    -moz-border-radius: 15px;
    border-radius: 15px;
}

.round-bl {
    -moz-border-bottom-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

#snap {
    display: none;
}

#settings_toggle {
    float: right;
}

#share {
    display: none;
    -moz-border-radius: 10px;
    border-radius: 10px;
    xbackground: #226;
    background: #444;
    padding: 12px 4px 8px 16px;
    width: 86px;
}

#share_snapshot_dialog {
    display: none;
    padding: 16px;
    margin: 0px auto;
    font-size: 18px;
    text-align: center;
}

.share-snapshot-link-div {
    margin: 20px auto;
}

.share-snapshot-link-div a {
    color: #bbf;
}

#settings_dialog {
    display: none;
    padding: 16px;
    margin: 0px auto;
}

#upper_right {
    position: absolute;
    right: 0px;
    z-index: 200;
    padding: 2px 4px;
}

#upper_left {
    position: absolute;
    left: 0px;
    z-index: 200;
    padding: 0px 0px;
}

#bottom_right {
    position: absolute;
    z-index: 200;
    padding: 0px;
    margin: 0px;
    right: 8px;
    bottom: 28px;
}

#bottom_center {
    position: absolute;
    bottom: 0px;
    z-index: 200;
    left: 0;
    right: 0;
    width: 128px;
    margin: 0px auto 0px auto;
    padding-bottom: 8px;
}

#map_controls_hover {
    visibility: hidden;
    width: 500px;
    height: 80px;
    top: 0px;
    left: 0px;
    position: absolute;
}

.pac-container {
    font-family: arial;
    font-size: 14px;
}

#geocoder, #geocoder_label {
    color: #eee;
    text-shadow: .1em .1em .08em #111;

    position: absolute;
    z-index: 200;
    top: 20px;
    left: 80px;
    font-size: 16px;
    font-weight: bold;
    padding: 0px 8px;
}

#geocoder_form input {
    position: relative;
    top: -2px;
    margin-left: 8px;
    font-family: arial, sans-serif;
    font-size: 14px;
}

#geocoder {
    display: none;
}

#geocoder_label {
    visibility: hidden;
}

#geocoder_error {
    color: #ff6;
    xcolor: #F66;
    xtext-shadow: .1em .1em .08em #666;
    padding-left: 64px;
}

form {
    padding: 0px;
    margin: 0px;
}

#stats {
    float: right;
    clear: both;
    display: none;
    color: #fff;
    text-shadow: .1em .1em .08em #111;
}

#slideshow_mode_outer {
    text-align: center;
}

#vote_container {
}

.vote-button {
    opacity: .7;
    cursor: pointer;
    width: 46px;
    height: 46px;
}

.supports-hover .vote-button:hover {
    opacity: 1;
}

#upvote, #downvote {
    display: inline-block;
}

#upvote_unselected, #preload_upvote {
    background-image: url("/img/set1/up3.png");
}

#downvote_unselected, #preload_downvote {
    background-image: url("/img/set1/down3.png");
}

.supports-hover #upvote_unselected:hover, #upvote_selected, #preload_upvote_color {
    background-image: url("/img/set1/up3-color.png");
}

.supports-hover #downvote_unselected:hover, #downvote_selected, #preload_downvote_color {
    background-image: url("/img/set1/down3-color.png");
}

#upvote_selected, #downvote_selected {
    display: none;
}

#settings-image {
    opacity: .7;
    width: 48px;
    height: 48px;
}

#search-image {
    opacity: .7;
    width: 48px;
    height: 48px;
    position: relative;
    top: -8px;
}

.supports-hover #settings-image:hover {
    opacity: 1;
}

#delete_button {
    margin: 0px;
    display: none;
    opacity: .7;
}

#snapshot_button {
    position: relative;
    top: 6px;
    margin: 0px auto;
    display: none;
    width: 50px;
    height: 50px;
    opacity: .7;
    background-image: url("/img/set1/Camera.png");
}

#preload_camera_blue {
    background-image: url("/img/set1/Camera-Blue.png");
}

#snapshot_button:hover {
    opacity: 1;
    background-image: url("/img/set1/Camera-Blue.png");
}

#left_message_base {
    position: absolute;
    z-index: 200;
    text-align: right;
    margin-right: 24px;
    bottom: 14px;
    color: #666;
    font-size: 18px;
}

#left_message {
    position: absolute;
    right: 0px;
    bottom: 0px;
    color: #ff6;
}

#left_message_shadow {
    position: absolute;
    right: 1px;
    bottom: -1px;
    color: #333;
}

#right_message_base {
    position: absolute;
    z-index: 200;
    margin-left: 30px;
    bottom: 18px;
    font-size: 18px;
}

#right_message {
    position: absolute;
    left: 0px;
    bottom: 0px;
    color: #eee;
    text-shadow: .1em .1em .08em #111;
}

#right_message a {
    color: #eee;
    font-weight: normal;
    text-decoration: none;
}
#right_message a:hover {
    text-decoration: underline;
}

#snapshot_actions {
    margin-bottom: 8px;
}

img#play {
    position: relative;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
    top: -3px;
    opacity: .7;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.supports-hover img#play:hover {
    opacity: 1;
}

#name_dialog {
    padding: 16px;
    margin-top: -50px;
    font-size: 18px;
    text-align: center;
    display: none;
}

#name_dialog input {
    margin-top: 16px;
    font-size: 18px;
    width: 420px;
}

#credits {
    color: #999;
    font-size: 11pt;
    position: relative;
    text-align: center;
}

#credits a {
    color: #999;
    text-decoration: underline;
    cursor: pointer;
    xoutline: none;
}

#thumbnails {
    position: absolute;
    top: 10px;
    left: 490px;
    z-index: 200;
    height: 80px;
}

.thumbnail {
    height: 80px;
    width: 100px;
    margin: 8px;
    border: 1px solid #ddd;
}

h1 {
    font-size: 20px;
    font-weight: normal;
}

#preload_static_maps {
    display: none;
}

#next_zone_positioner, #previous_zone_positioner {
    position: absolute;
    top: 50%;
}

#next_zone_positioner {
    right: 0px;
    text-align: right;
}

#previous_zone_positioner {
    left: 0px;
    text-align: left;
}

#next_zone, #previous_zone {
    position: relative;
    top: -60px;
    height: 120px;
    line-height: 120px;
    width: 50px;
    z-index: 100;
    padding: 0px 24px;
    opacity: .7;
}

#next_arrow, #previous_arrow {
    position: relative;
    top: 28px;  /* Change this if image changes */
}

#previous_zone:hover, #next_zone:hover {
    opacity: 1;
}

#settings_ok_button_container {
    margin-top: 6px;
    margin-bottom: 18px;
}

#keyboard_commands {
    display: none;
}

/* Fix for chromium bug. */
.map div, #map div {
    xcursor: url("/img/openhand_8_8.cur");
    cursor: default;
}

#pinterest {
    height: 22px;
    margin-bottom: 3px;
}

#debug_window {
    position: absolute;
    top: 20px;
    left: 12%;
    width: 76%;
    border: 1px solid silver;
    height: 300px;
    background: rgba(0, 0, 0, .2);
    color: #eee;
    overflow: auto;
    z-index: 9999;
}

#screensaver_promo {
    color: white;
    font-size: 9pt;
    text-decoration: underline;
    display: none;
}

/***********************************************************************/
/***********************************************************************/
/***********************************************************************/

@media only screen and (min-width: 800px) {

    h1 {
        font-size: 24px;
    }

    #settings_dialog {
        font-size: 18px;
    }
}