html { height: 100% }
body { height: 100%; margin: 0; padding: 0; font-family: sans-serif; }
#map-canvas { position: absolute; top: 50px; left: 0; right: 0; bottom: 0;}
header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    font-size: 20px;
    display: block;
    z-index: 1;
    padding: 0 20px;
}

header a {
    text-decoration: none;
    font-weight: bold;
    color: #333;
}

.left {
    float:left;
}
header .title {
    line-height: 30px;
    float: left;
}

header .description {
    line-height: 15px;
    float: left;
    clear: left;
    font-size: 12px;
    color: #999;
}

header .description a {
    color: #999;
    text-decoration: underline;
}

.marker128 {
    width: 128px;
    height: 128px;
    background-image: url(../images/BeliefFrames_small-sprite.png);
    background-size: auto 128px;
    -webkit-animation: belief128 4s steps(64) infinite;
       -moz-animation: belief128 4s steps(64) infinite;
        -ms-animation: belief128 4s steps(64) infinite;
         -o-animation: belief128 4s steps(64) infinite;
            animation: belief128 4s steps(64) infinite;
}

@keyframes belief128 {
    from {background-position: 0;}
    to {background-position: -8192px;}
}

@-webkit-keyframes belief128 /* Safari and Chrome */{
    from {background-position: 0;}
    to {background-position: -8192px;}
}

.marker64 {
    width: 64px;
    height: 64px;
    background-image: url(../images/BeliefFrames_small-sprite.png);
    background-size: auto 64px;
    -webkit-animation: belief64 4s steps(64) infinite;
       -moz-animation: belief64 4s steps(64) infinite;
        -ms-animation: belief64 4s steps(64) infinite;
         -o-animation: belief64 4s steps(64) infinite;
            animation: belief64 4s steps(64) infinite;
}

@keyframes belief64 {
    from {background-position: 0;}
    to {background-position: -4096px;}
}

@-webkit-keyframes belief64 /* Safari and Chrome */{
    from {background-position: 0;}
    to {background-position: -4096px;}
}

.marker32 {
    width: 32px;
    height: 32px;
    background-image: url(../images/BeliefFrames_small-sprite.png);
    background-size: auto 32px;
    -webkit-animation: belief32 4s steps(64) infinite;
       -moz-animation: belief32 4s steps(64) infinite;
        -ms-animation: belief32 4s steps(64) infinite;
         -o-animation: belief32 4s steps(64) infinite;
            animation: belief32 4s steps(64) infinite;
}

@keyframes belief32 {
    from {background-position: 0;}
    to {background-position: -2048px;}
}

@-webkit-keyframes belief32 /* Safari and Chrome */{
    from {background-position: 0;}
    to {background-position: -2048px;}
}

.marker16 {
    width: 16px;
    height: 16px;
    background-image: url(../images/BeliefFrames_small-sprite.png);
    background-size: auto 16px;
    -webkit-animation: belief16 4s steps(64) infinite;
       -moz-animation: belief16 4s steps(64) infinite;
        -ms-animation: belief16 4s steps(64) infinite;
         -o-animation: belief16 4s steps(64) infinite;
            animation: belief16 4s steps(64) infinite;
}

@keyframes belief16 {
    from {background-position: 0;}
    to {background-position: -1024px;}
}

@-webkit-keyframes belief16 /* Safari and Chrome */{
    from {background-position: 0;}
    to {background-position: -1024px;}
}


/*#map-canvas div.gmnoprint[title="belief"] {
    background-image: url(../images/BeliefFrames_small-sprite.png);
    background-size: auto 32px;
    -webkit-animation: belief32 4s steps(64) infinite;
       -moz-animation: belief32 4s steps(64) infinite;
        -ms-animation: belief32 4s steps(64) infinite;
         -o-animation: belief32 4s steps(64) infinite;
            animation: belief32 4s steps(64) infinite;
    opacity: 1 !important;
}

#map-canvas div.gmnoprint[title="belief"] img {
    display: none;
}*/


.marker {
    width: 48px;
    height: 48px;
    background-image: url(../images/BeliefFrames_small-sprite.png);
    background-size: auto 48px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-animation: belief 4s steps(64) infinite;
       -moz-animation: belief 4s steps(64) infinite;
        -ms-animation: belief 4s steps(64) infinite;
         -o-animation: belief 4s steps(64) infinite;
            animation: belief 4s steps(64) infinite;
}

@keyframes belief {
    from {background-position: 0;}
    to {background-position: -3072px;}
}

@-webkit-keyframes belief /* Safari and Chrome */{
    from {background-position: 0;}
    to {background-position: -3072px;}
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.6);
    display: none;
}
.overlay.show {
    display: block;
}

.overlay .overlayContent {
    position: fixed;
    top: 50%;
    margin-top: -155px;
    height: 310px;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 10px rgba(0,0,0,0.8);
    padding: 20px;
}

h1 {
    margin: 0 0 20px;
    padding: 0;
}

input[type=text] {
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    line-height: 18px;
    font-size: 14px;
    width: 585px;
}

.input[type=text].error {
    border: 1px solid red;
}

input[type=submit],
.userAdd {
    border-radius: 3px;
    background: #60bd67;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    font-size: 14px;
    line-height: 18px;
    padding: 10px 15px;
    border: 0 none;
    float: left;
    margin-top: 10px;
}

.userAdd {
    float: left;
    text-decoration: none;
    margin-top: 5px;
}

.right {
    float: right;
}
.twitter-share-button {
    float: left;
    margin-top: 14px;
}

input[type=button] {
    border-radius: 3px;
    background: #ffc000;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    font-size: 14px;
    line-height: 18px;
    padding: 10px 15px;
    border: 0 none;
    float: right;
    margin-top: 10px;
}

.who {
    color: #999;
    text-align: center;
    margin-top: 10px;
    display: block;
    line-height: 40px;
    display: none;
}

.errorHolder {
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -300px;
    width: 600px;
    z-index: 999999;
    background: #e16b6b;
    color: #fff;
    padding: 10px 15px;
    border-radius: 0 0 3px 3px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    display: none;
}
.errorHolder.show {
    display: block;
}