/* 
===============================================================================================================
RESET
===============================================================================================================
*/
* {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    outline: 0;
    text-decoration: none;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article, aside, dialog, figure, footer, header, hgroup, nav, section { 
    display: block;
}

hr {
    display: none;
}


/* 
===============================================================================================================
GENERAL SETTINGS
===============================================================================================================
*/
body {
    /*
     *background: #000 url('/media/img/bg-page.jpg') no-repeat 50% 0;
     */
     background: #000 url('/media/img/bg.jpg') no-repeat 50% 0;
    font: normal 11px/18px arial, sans-serif;
    color: #aaa;
}

/* 
===============================================================================================================
STRUCTURE
===============================================================================================================
*/

/* header
---------------------------------------- */
#header {
    position: fixed;
    z-index: 9999999999;
    top: 0;
    left: 0;
}

#header hgroup,
#header nav {
    display: none;
}

/* .footer
---------------------------------------- */
#footer {
    /*
     *background: #e6e6e6 url('/media/img/bg-footer.png') repeat-x 0 50%;
     */
    height: 30px;
    line-height: 30px;
    color: #999;
    font-size: 9px;
    letter-spacing: 0.05em;
    width: 100%;
    right: 0px;
    position: relative;
}

#footer nav {
    width: 920px;
    margin: 0 auto;
}

#footer li, footer a {
    float: left;
    display: block;
}

#footer li {
    line-height: 30px;
    height: 30px;
    position: relative;
}

#footer a {
    color: inherit;
    padding: 0 10px;
    margin-top: 10px;
    border-right: 1px solid #999;
    line-height: 9px;
}

#footer a:hover {
    color: #95a624;
}

#footer li:first-child a {
    padding-left: 0;
}

#footer li:last-child a {
    border-right: none;
}

#footer p {
    float: right;
    margin-right 10px;
}


/* CONTENT
---------------------------------------- */
#content {
    width: 938px;
    height: 900px;
    margin: 121px auto 200px;
    position: relative;
}

/* 
===============================================================================================================
MAP
===============================================================================================================
*/
#map {
    height: 620px;
    width: 100%;
    text-transform: uppercase;
    font-size: 9px;
}

/* MAP header
---------------------------------------- */
#map > header hgroup {
    display: none;
}

#map > header nav {
    float: right;
}

#map > header nav a,
.nav-button
{
    float: right;
    cursor: pointer;
    padding: 0 12px;
    margin: 8px 6px 0 0;
    background: #9bdc49;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    outline: 0;
    letter-spacing: 0.05em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;     
    -moz-box-shadow: 0 0 3px 1px #6da430, 0 2px 2px 3px #b6e470 inset, 0 -4px 2px 3px #6da430 inset;
    -webkit-box-shadow: -1px -2px 3px #6da430, -1px 2px 3px #6da430, 2px 0px 3px #6da430;
    border-width: 1px;
    border-style: solid;
    border-color: #b6e470;
    text-shadow: 0 0 3px #000;
    text-align: center;
}
.nav-button
{
        float: none; !important
}

#map > header nav input[type="button"]{
        float: right;
        cursor: pointer;
        background: url("/media/img/btn_howtouse.png") no-repeat scroll 0 -23px transparent;
        width: 28px;
        height: 25px;
        margin: 7px 12px 0 0;

}

#map > header form {
    margin-top: 7px;
    float: left;
    width: 100%;
    background: url('/media/img/bg-address-bar.png') no-repeat 310px 0;
    height: 34px;
    line-height: 34px;
}

#map > header h2 {
    float: left;
    color: #9bdc49;
    height: 34px;
    line-height: 34px;
    font-weight: normal;
    text-shadow: 0 0 2px #9bdc49;
}



/* MAP header - LOCALIZATION
---------------------------------------- */
#map > header #localization {
    padding-left: 20px;
    float: left;
    width: 295px;
}

#map > header #localization h2 {
    padding: 0 10px 0 0;
}

#map > header #localization label {
    margin: 0 5px 0 0;
}

#map > header #localization input[type="radio"] {
    display: none;
}

#map > header #localization a {
    cursor: pointer;
    padding: 5px 7px;
    color: #ddd;
    text-decoration: none;
    outline: 0;
    text-shadow: 0 0 2px #eee;
    background: transparent url('/media/img/arrows.png') no-repeat -200px -9px;
    
}

#map > header #localization abbr {
    cursor: pointer;
    padding: 5px 7px;
    background: #5a5a5a;
    font-weight: bold;
    color: #d6d6d6;
    text-decoration: none;
    outline: 0;
    border: 1px solid #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;     
    -moz-box-shadow: 0 0 3px 1px #000, 0 0 3px 2px #333 inset, 0 0 3px 2px #333 inset;
    -webkit-box-shadow: 0 1px 4px #000, 0 2px 4px #222, 0 2px 4px #222; 
}

#map > header #localization input[checked="checked"] ~ abbr {
    cursor: pointer;
    background: #9bdc49;
    padding: 5px 7px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    outline: 0;
    letter-spacing: 0.05em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;     
    -moz-box-shadow: 0 0 3px 1px #6da430, 0 2px 2px 3px #b6e470 inset, 0 -4px 2px 3px #6da430 inset;
    -webkit-box-shadow: -1px -2px 3px #6da430, -1px 2px 3px #6da430, 2px 0px 3px #6da430;
    border-width: 1px;
    border-style: solid;
    border-color: #b6e470;
    text-shadow: 0 0 3px #000;
    text-align: center;
}

#map > header #localization a.bt-1 {
    background: #e2e2e2;
    color: #343434;
    -moz-box-shadow: 0 0 3px 1px #111, 0 0 3px 2px #aaa inset, 0 5px 3px 1px #bbb inset;
    -webkit-box-shadow: 0 1px 4px #111, 0 -1px 4px #111, 0 -1px 4px #111;   
    border: 1px solid #222;
    float: none;
}


/* MAP header - ROUTE
---------------------------------------- */

#map > header #route {
    float: left;
    width: 605px;
    margin-left: 5px;
    position: relative;
    z-index: 1000;
    opacity: 0.4;
}

#route .block {
    background-color: #000000;
    height: 40px;
    margin: 0 -10px;
    opacity: 0.25;
    filter: alpha(opacity = 25);
    position: absolute;
    width: 630px;
}

#map > header #route h2 {
    background: url('/media/img/arrow-right.png') no-repeat right center;
    padding: 0 6px 0 0px;
    float: left;
    width: 96px;
    overflow: hidden;
}

#map > header #route h2 span {
    float: left;
    width: 200px;
}

#map > header #route label {
    float: left;
    font-size: 9px;
    color: #ccc;
    text-shadow: 0 0 2px #aaa;
    height: 34px;
    line-height: 34px;
    padding: 0 0 0 5px;
    position: relative;
    overflow: hidden;
}

#map > header #route input[type="text"] {
    width: 125px;
    margin: 7px 5px 0 4px;
}

#map > header #route input[type="submit"].bt-1,
#map > header #route input[type="button"].bt-1 {
    margin: 7px 12px 0 3px;
}

#map > header #route-link {
    float: left;
    text-transform: uppercase;
    cursor: pointer;
    margin: 7px 0 0 0;
    font-size: 9px;
    line-height: 13px;
    padding: 3px 5px;
    color: #ddd;
    text-decoration: none;
    outline: 0;
    text-shadow: 0 0 2px #eee;
    background: transparent url('/media/img/arrows.png') no-repeat -200px -9px;
}

#map > header #route ul {
    position: absolute;
    right: 5px;
    top: 0; 
    width: 120px;
/*  float: left;*/
}

#map > header #route ul li {
/*  display: inline;*/
    float: left;
}

/**
 * ------------------------- //
 * Hint button
 * ------------------------- // 
 **/

#hint-button{
    position:absolute;
    left:16px;
    top:82px;
    width:93px;
    height:100px;
    background-image: url('/media/img/hint.png');
    background-repeat: no-repeat;
    z-index:10;
    opacity: 0;
    filter:alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
#hint-button a{
    
    float: left;
    height: 0px;
    overflow: hidden;
    padding-top: 100px;
    width: 93px;
}

#hint-button-over{
    position:absolute;
    left:16px;
    top:82px;
    width:93px;
    height:100px;
    background-image: url('/media/img/hint_over.png');
    background-repeat: no-repeat;
    z-index:9;
    opacity: 0;
    filter:alpha(opacity=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/**
 * ------------------------- //
 * Permalink Route
 * ------------------------- // 
 **/
#map #permalink-route {
    background: #4e4e4e;
    padding: 8px;
    color: #FFF;
    -moz-border-radius: 4px;
    -webkit-border-radius: 2px;
    border-radius: 2px;     
    width: 246px;
    position: absolute;
    top: 73px;
    right: 23px;
    z-index: 9999999;
    font-weight: bold;
    display: none;
}

#map #permalink-route input {
    background: #FFF;
    border: 1px solid #a7a7a7;
    padding: 2px;
    color: #434141;
    margin-left: 4px;
    width: 150px;
    cursor: pointer;
}

#map #permalink-route .up-arrow {
    font-size: 0px; 
    line-height: 0%; 
    width: 0px;
    border-bottom: 10px solid #4e4e4e;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -10px;
    right: 13px;        
}


/* MAP - ROAD INFOS
---------------------------------------- */
#road-infos {
    overflow: hidden;
    margin-top: 6px;
    position: absolute;
    top: 508px;
    left: 16px;
}

#map #road-infos .data {
    display: none;
}

#map #road-infos .label {
    margin-top: 15px;
    padding-left: 35px;
    font-size: 20px;
    color: #FFF;
    font-weight: normal;
    text-shadow: #CCC 0px 1px 5px;
    line-height: 26px;      
}

.infos {
    padding: 0px 0px 0px 61px;
    float: left;
    margin-right: 4px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    color: #FFF;    
    height: 55px;
}

div#km {
    background: #4e4e4e url( '/media/img/ico_bg_distancia.png' ) no-repeat scroll 0px -1px;
    background-position: 0px -1px;
}

div#km p #route_distance_label {
    text-align: center;
}

div#time {
    background: #4E4E4E url('/media/img/ico_bg_relogio.png') no-repeat scroll 0px -1px;
    width: 145px;   
    margin-left: 5px;
}

div#time p {
    padding: 8px 0px 0 20px;
}

div#time p #route_time_min_label {
    font-size: 32px;
    margin-right: 10px;
    text-align: center;
}

div#time p #route_time_label {
    font-size: 32px;
    padding-left: 20px;
    text-align: center;
    text-transform: none;
}

div#player-musics {
    background: #4E4E4E url('/media/img/ico_bg_headphone.png') no-repeat scroll 0px -1px;
    width: 310px;
}

div#player-musics p {
    padding: 8px 0px 14px 12px;
    height: 33px;
}

.infos p {
    background: #232323;
    padding: 8px 6px 0 24px;
    font-size: 31px;
    overflow: hidden;

    -moz-border-radius-bottomright: 5px;    
    -moz-border-radius-topright: 5px;   
    -webkit-border-radius-bottomright: 5px; 
    -webkit-border-radius-topright: 5px;    
    line-height: 23px;  
    height: 47px;
}

.infos p span {
    float: left;
    margin-right: 13px;
    margin-top: 2px;
    text-shadow: #CCC 0px 0px 5px;
}

.infos p span small {
    font-size: 9px;
    clear: both;
    display: block;
    line-height: 18px;
    text-shadow: none;  
    text-transform: uppercase;
}

#map #player-info {
    position: absolute;
    right: 10px;
    top: 515px;
}

#map #player-info .data {
    display: none;
}

#map #player-info .label {
    left: -358px;
    top: 17px;
    position: absolute;
    font-size: 20px;
    color: #FFF;
    font-weight: normal;
    text-shadow: #CCC 0px 1px 5px;
    width: 320px;   
}

#map #player-info p span.button-download {
    background: url('/media/img/btn_download.png') no-repeat left top;
    height: 40px;
    width: 235px;
    font-size: 10px;
    line-height: 15px;
    text-shadow: 0 0 1px #9BDC49;
    padding: 8px 0px 8px 10px;
    margin-top: -6px;
    color: #94ff0c;

    position: absolute;
    right: -5px;
/*  font-weight: bold;*/
/*  border: 1px solid #232222;*/
/*  -moz-border-radius: 3px;*/
/*  -webkit-border-radius: 3px; */
    line-height: 14px;
    cursor: pointer;
}

#map #player-info p span.button-download img {
    float: left;
    margin: 2px 10px 0 5px;
}

/* MAP HOLDER
---------------------------------------- */
#map-holder {
    float: left;
    height: 429px;
    width: 908px;
    margin: 9px 0 0 16px;
    overflow: hidden;
    position: relative;
    background: #000;
}

#map-holder #gmaps-holder  {
    height: 429px;
    width: 908px;
    position: absolute;
    top: 0px;
    float: left;
    display: none;
}

#map-holder .bd { position: absolute; z-index: 9999999; width: 8px; height: 8px; background: url('/media/img/border-rounded.png') no-repeat; } 
#map-holder .bd.topleft { top: 0; left: 0; background-position: 0 0; }
#map-holder .bd.topright { top: 0; right: 0; background-position: -8px 0; }
#map-holder .bd.bottomleft { bottom: 0; left: 0; background-position: 0 -8px; }
#map-holder .bd.bottomright { bottom: 0; right: 0; background-position: -8px -8px; } }

/* 
===============================================================================================================
MOST VIEWED
===============================================================================================================
*/

#most-viewed {
    width: 342px;
    height: 159px;
    position: relative;
    float: left;
    overflow: hidden; 
    display: block; 
}

#places-most-viewed {
    width: 342px;
    height: 159px;
    position: relative;
    float: left;
    overflow: hidden; 
    display: block; 
}

#places-most-viewed header {
    width: 252px;
    float: right;
    margin: 10px 0 0 0;
}

#places-most-viewed header h1 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.01em;
    line-height: 15px;
    color: #FFFFFF;
}

#places-most-viewed dl {
    width: 252px;
    float: right;
    margin: 4px 0 0 0;
}

#places-most-viewed dt {
    color: #fff;
    font-weight: bold;
}

#places-most-viewed dd {
    font-size: 10px;
    color: #707070;
    line-height: 12px;
    padding-top: 7px;
}

#places-most-viewed p {
    width: 252px;
    float: right;
    margin: 4px 0 0 0;
}

#places-most-viewed a.bt-1 {    
    padding-left: 10px;
    padding-right: 10px;
}

.baladas {
    background: url('/media/rider/box_estabelecimento/icone_baladas.png') left no-repeat;
    background-position: 33px 13px;
}

.baladas span {
    color: #ae81ef;
}

.cultura {
    background: url('/media/rider/box_estabelecimento/icone_cultura.png') left no-repeat;
    background-position: 33px 13px;
}

.cultura span {
    color: #BF2406;
}

.lazer {
    background: url('/media/rider/box_estabelecimento/icone_cultura.png') left no-repeat;
    background-position: 33px 13px;
}

.lazer span {
    color: #7ABA36;
}

.comer {
    background: url('/media/rider/box_estabelecimento/icone_comer.png') left no-repeat;
    background-position: 33px 13px;
}

.comer span {
    color: #32BFDB;
}

.compras {
    background: url('/media/rider/box_estabelecimento/icone_compras.png') left no-repeat;
    background-position: 33px 13px;
}

.compras span {
    color: #F19A15;
}


/* 
===============================================================================================================
TWITTER
===============================================================================================================
*/

#twitter {
    width: 342px;
/*  height: 305px;*/
    position: relative;
    background: url('/media/img/logo-twitter.png') no-repeat 37px 4px;
    float: left;
    margin-top: 39px;
}

#twitter header {
    width: 252px;
    float: right;
    margin: 0 0 13px 0;
}

#twitter header h1 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.01em;
    line-height: 15px;
    color: #fff;
}

#twitter header h2 {
    font-size: 10px;
    color: #707070;
    line-height: 12px;
    padding-top: 7px;
    font-weight: normal;
}

#twitter ul {
    width: 325px;
    float: right;
    margin: 10px 0 0 0;
}

#twitter ul li {
    height: 70px;
    background: #232323;  url('/media/img/pattern-1.png');
    /*
     *background: #232323  url('/media/img/pattern-1.png');
     */
    margin-bottom: 4px;
    margin-left: 9px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;     

    /*
     *-moz-box-shadow: 0 0 3px 1px #000, 0 0 5px 2px #111 inset, -20px 0 30px 2px #101010 inset, 10px 5px 30px 2px #191919 inset;
     *-webkit-box-shadow: 0 1px 4px #000, 0 -1px 4px #000, 0 -1px 4px #000; 
     */
}

#twitter ul li dl {
    padding: 0px 0 0;
}

#twitter ul li dl dt {
    padding: 0 7px 0 7px;
    float: left;
    margin-right: 7px;
    height: 70px;
    background: #4e4e4e;

    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-radius-topleft: 5px;
    -webkit-border-radius-bottomleft: 5px;

    /*
     *border-right: 1px dotted #585858;
     */
}

#twitter ul li dl dt img {
    /*
     *-moz-border-radius: 3px;
     *-webkit-border-radius: 3px;
     */
    margin-top: 6px;
    /*
     *-moz-box-shadow: 0 0 3px 1px #090909;
     *-webkit-box-shadow: 0 1px 3px #090909, 0 -1px 3px #090909, 0 -1px 3px #090909;    
     */
    border: 1px solid #383838;
    float: left;
}

#twitter ul li dl dd {
    line-height: 13px;
    padding: 5px 0 0 4px;
    width: 235px;
    overflow: hidden;
    height: 48px;
    vertical-align: middle;
/*  display: table-cell; */
    color: #707070;
}

#twitter ul li dl dd a {
    color: #9bdc49;
}




/* 
===============================================================================================================
Política de privacidade e termos de uso
===============================================================================================================
*/
.contracts div , .contracts header{
    line-height:1.2em;
    margin-top:5px;
    padding-left:15px;
    text-align:justify;
    width:275px;
}

.contracts header #fechar_contracts {
    height:20px;
    left:272px;
    position:absolute;
    top:5px;
    width:6px;
}

.contracts p {
    margin-bottom: 5px;
}

.contracts h1 {
    font-size: 14px;
    font-weight: normal;
    text-transform: normal;
    padding-top: 5px;
} 
/*
 * Scrolling of contracts
 */
.contracts  .jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding-right: 12px;
}

.contracts   .jScrollPaneTrack {
    background: url( '/media/img/player/bg-scroll.png' ) top repeat-y;  
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 20px;
    height: 100%;
    margin-right: 20px; 
    margin-top: 0px;
}

.contracts   .jScrollPaneDrag {
    position: absolute;
    background: url( '/media/img/player/scroll.png' ) top no-repeat;
    cursor: pointer;
    overflow: hidden;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    margin-top: 10px;
    padding: 0 0 2px 3px;
    right: 6px;
}

#policia {
    display: none;
    position: absolute;
    background: url('/media/rider/box_policia.png') left no-repeat;
    
    top: -285px;
    left: -30px;
    height: 292px;
    width: 303px;
    color: #444;
    /*display: none;*/
}

#policia .jScrollPaneDrag {
    position: absolute;
    background: url( '/media/img/player/scroll.png' ) top no-repeat;
    cursor: pointer;
    overflow: hidden;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    margin-top: 10px;
    padding: 0 0 2px 1px;
    right: 6px;
}
#policia header {
    margin-top: 10px;
    color: #444;
    font-size: 12px;
}
#policia-holder {
    height: 235px;
    overflow: hidden;   
    left: 0px;
}


#termos {
    position: absolute;
    display: none;
    background: url('/media/rider/box_policia.png') left no-repeat;
    
    top: -285px;
    left: -30px;
    height: 292px;
    width: 303px;
    color: #444;
}
#termos header {
    margin-top: 10px;
    color: #444;
    font-size: 12px;
}
#termos-holder {
    height: 235px;
    overflow: hidden;
    left: 0px;
}







/* 
===============================================================================================================
ADVERTISEMENTS
===============================================================================================================
*/
#advertisements {
    float: right;
    width: 570px;
    padding: 10px 0 0;
    margin-right: 12px;
}

#advertisements div {
    float: left;
    opacity: 0.95;
}

#advertisements div:hover {
    float: left;
    opacity: 1.0;
}


#advertisements div#ad-1 {
    margin: 0 0 4px 0;
}

#advertisements div#ad1 a {
    margin: 0 0 4px 0;
}


#advertisements div#ad-1 #ad-caption {
    bottom:290px;
    position:absolute;
    right:280px;
    opacity: 0.5;
}

#advertisements div#ad-1 #ad-caption:hover {
    opacity: 1.0;
}

#advertisements div#ad-1 #ad-caption p {
    color:#ffffff;
    font-size:24px;
    font-weight:normal;
    letter-spacing:0.08em;
    line-height:0.9em;
}

#advertisements div#ad-1 #ad-caption #ad-sub-label{
    margin-top: 20px;
    letter-spacing: 0.05em;
    position: absolute;
    top: 55px;
}

#advertisements div#ad-1 #ad-caption a {
    position: absolute;
    left: 0px;
    top: 85px;
}

#advertisements div#ad-3 {
    margin-left: 13px;
}