@charset "utf-8";
/* CSS Document */

* {margin: 0px; padding: 0px; vertical-align: middle;}
html, body {height: 100%; font-family: Arial; font-size: 12px; color: #777; overflow-x: hidden;}

.pag {position: relative; display: block; min-height: auto; min-width: 320px; text-align: center; background-color: #fff;}
.pag .wrap {position: relative; display: inline-block; width: 80%; text-align: left;}

.head {position: relative; display: block; min-height: 9%; text-align: center; background: url(../imgs/grid.gif); background-color: #00c5ff; border-bottom: 1px solid #00b2e6; border-top: 5px solid #00acff;}
.head .wrap {position: relative; display: inline-block; width: 80%; text-align: left;}

.body {position: relative; display: block; text-align: center; /*background-color: #fff; border: 1px solid #eee;*/}

input {padding: 5px; border: 1px solid #eee;}
.btns {position: relative; display: block; padding: 5px;}
.btn {position: relative; display: inline-block; padding: 10px 20px; color: #fff; font-weight: bold; background-color: #427fe8; border: 1px solid #3e71c9; cursor: pointer;
-moz-box-shadow: 0px 1px 2px #a0a0a0; -webkit-box-shadow: 0px 1px 1px #a0a0a0; box-shadow: 0px 1px 1px #a0a0a0; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=180, Color='#a0a0a0')";}
.btn_w {position: relative; display: inline-block; padding: 10px 20px; font-weight: bold; color: #777; cursor: pointer;}

/*.clock {position: relative; display: inline-block; padding: 6px; margin-left: 10px; font-size: 18px; font-weight: bold; background-color: #eee; border: 1px solid #ccc;}*/

.busca {position: relative; display: block; margin: 5px; background-color: #fff; border: 1px solid #a4a19a;}
.busca .h {position: relative; display: block; padding: 5px; cursor: pointer;}
.busca .b {position: relative; display: block; padding: 5px;}
.busca .hh_mm {position: relative; display: inline-block; padding-left: 5px; color: #ff0000;}

.onibus {position: relative; display: block; text-align: left;}

.rotas_h {position: relative; display: block; background-color: #ece5d2; border-bottom: 1px solid #e3dcc7;}
.rotas {position: relative; display: inline-block; padding: 10px 0px; text-align: left;}
.rotas .num {position: relative; display: inline-block; padding: 10px; margin: 1px; color: #7e6621; background-color: #fec726; border: 1px solid #d6aa2a; cursor: pointer;}

.form_h {position: relative; display: block; background-color: #f6f6f6; border: 1px solid #eee;}
.form {position: relative; display: inline-block; padding: 7px 0px; /*text-align: left;*/}
.tab {position: relative; border-collapse: collapse;}
.tab td {padding: 5px; /*background-color: #f6f6f6; border: 1px solid #e3e3e3;*/}
.tab .h {}

.gab {position: relative; display: inline-block; font-family: Arial; font-size: 30px; font-weight: bold;}
.gab .l {position: relative; display: inline-block; /*top: 10px;*/}
.gab .b {/*left: 120px;*/ color: #ffffff;}
.gab .u {/*left: 150px;*/ color: #00acff;}
.gab .s {/*left: 180px;*/ color: #56d9ff;}

.bus {position: relative; display: inline-block; margin: 5px; text-align: left; color: #2c3c58; background-color: #eee; border: 1px solid #ccc;}
.bus .ind {position: relative; display: block; text-align: center; padding: 5px; border-bottom: 1px solid #dbdbdb;}
.bus .ordem {position: relative; display: block; padding: 5px;}
.bus .data {position: relative; display: block; padding: 5px;}
.bus .velo {position: relative; display: block; padding: 5px;}
.bus .dist {position: relative; display: block; padding: 5px; font-size: 14px; font-weight: bold;}
.bus .sentido {position: relative; display: block; text-align: center; padding: 5px; border-top: 1px solid #dbdbdb;}

.img {position: relative; display: block;}
.plus {background-color: #abcbfd; border-color: #8faad4;}
.minus {background-color: #ddeffd; color: #9eabb5; border-color: #a8ccfd;}
.parado {background-color: #fff6ce; border-color: #e3daae;}
.out {border: 1px solid #ff0000;}

.minus .ind, .minus .sentido {border-color: #cddeeb;}
.plus .ind, .plus .sentido {border-color: #a0bdec;}
.parado .ind, .parado .sentido {border-color: #eee5b9;}

.box_legenda {position: relative; display: block; vertical-align: top;}
.tutorial {position: relative; margin: 0px; vertical-align: top;}
.legenda {position: relative; display: inline-block; margin: 5px; vertical-align: top; font-size: 9px; overflow: hidden; background-color: #fff; border: 1px solid #a4a19a;}
.legenda span {display: block; padding: 5px;}
.legenda .h {text-align: center; color: #444; font-size: 11px; cursor: pointer;}
.legenda .b {padding: 0px;}

.controle {position: relative; display: inline-block; margin: 5px; vertical-align: top; font-size: 9px; background-color: #fff; border: 1px solid #a4a19a;}
.controle .h {position: relative; display: block; padding: 5px; text-align: center; color: #444; font-size: 11px; cursor: pointer;}
.controle input {position: relative; display: block; padding: 5px; margin: 5px; width: 122px;}
.controle .b {position: relative; display: block;}
.controle .btns {position: relative; display: block; font-size: 12px; text-align: center;}
.controle .help_img {position: absolute; display: inline-block; top: 3px; right: 3px; width: 18px; height: 18px; background: url(../imgs/help.gif) no-repeat center; cursor: pointer;}

.help {position: absolute; display: inline-block; padding: 10px; background-color: #fff; border: 1px solid #444;}
.help .btns {padding: 0px; text-align: center;}
.help .h {position: relative; display: block; padding: 5px; font-size: 16px; color: #444; text-align: center;}

.mapa {position: relative; display: inline-block; width: 100%; min-height: 90%;}
.mapa .infowin {position: relative; display: block; width: 250px; text-align: left; font-family: Arial; font-size: 12px; color: #777;}
.mapa .infowin .h {position: relative; display: block; line-height: 20px;}
.mapa .infowin .h .b {padding: 0px 5px; font-weight: bold; color: #444;}

.manual {position: relative; display: block; padding: 10px; font-size: 12px; line-height: 18px;}

.new_pos {position: relative; display: inline-block; padding: 5px; margin: 5px; font-size: 12px; text-decoration: underline; cursor: pointer;}

@media screen and (max-width: 400px) {
	.pag .wrap {width: 95%;}
}