#mapa {
  width:  640px;
  height: 800px;
}



.legenda {
	float:	left;
	width:	200px;
	position: relative;
	overflow: hidden;
	background-color:	#C0C0C0;
	/*box-shadow: 1px 1px 1px 1px #808080;*/
	padding: 0px 0px 0px 10px;
	border: 1px solid #cdcdcd;
	text-align:	center;
}

.legenda-title {
	font-size: 120%;
	color: #000;
	margin: 15px 5px;
}

.legendinha {
	display:	block;
	border-left-style: solid;
	border-width: 20px;
	padding-left: 4px;
	width: 100%;
	font-size: 10px;
	color: #000;
	text-transform: uppercase;
	line-height: 20px;
	height: 20px;
	margin: 5px;
	text-align:	left;
}

.legend-wrapper {
  display: none;
  width:   100%;
  box-sizing: border-sizing;
}



#indicador-container, 
#buttons-container, 
#splitter-container, 
#text-container  {
  box-sizing:       border-box;
  width:            202px;
  background-color: #FFF;
  border-width:       0px 1px;
	border-color:       #000;
	border-style:  solid;
}

#indicador-container {
  position: absolute;
  border:   1px solid #000;
}

.indicador, .menu-item, .splitter {
  width:  100px;
  font-family:  'oswald_light', Arial;
}

.wide {
  width:  120px !important;
}

.indicador {
	line-height:    10px;
  vertical-align: middle;
	font-size:      10px;
	text-transform: uppercase;
	color:          #000;
	padding:        0;
	text-align:     center;
}

#buttons-container {
	height: 44px;
  position: absolute;
  bottom: 200px;
	background-color: #FFF;
	/*text-align: center;*/
	
	/*border-width: 1px;
	border-color: #2786c2;
	border-left-style: solid;
	border-right-style: solid;
	border-top-style: solid;
	border-radius: 3px 3px 0 0;*/
}

.menu-item {
	height: 20px;
	font-size: 130%;
	font-family: "oswald_bold", sans-serif;
	line-height: 25px;
	text-align: center;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	color: #585858;
  width:  100px;
  float:  left;
}

.menu-item-active {
  color:  rgb(0, 0, 0) !important;
}

#splitter-container {
	height:             10px;
  
  position: absolute;
  bottom:   199px;
}

.splitter {
	height:           10px;
	background-color: #32bbee;
}

#text-container {
  position: absolute;
  bottom:   243px;
  border-top-width: 1px;
}



.list p {
  padding:  0px 5px;
  font-family:  'lato_regular', sans-serif;
}





#logo {
  background: url(../img/logo_ZHm.png) no-repeat; 
  width: 150px; 
  height: 150px;
  float: left;
  position: absolute;
  z-index: 500; 
  left: 13px;
  top: 15px;
}

#select {
  float:    right;
  z-index:  666;
  top:      40px;
  right:    -400px;
  position: absolute;
}

.button {
  color:        rgb(255, 255, 255);
  display:      inline-block;
  font-family:  'oswald';
  width:         48%;
  text-align:   center;
  cursor:       pointer;
}

.disabled, .disabled:hover {
  color:  #c0c0c0 !important;
  cursor: default !important;
}

.button:hover {
  color:  rgb(255, 255, 0);
}

#detalhes {
  background-color: rgb(0, 0, 0);
  position:         absolute;
  border:           solid 10px rgb(0, 0, 0);
  left:             50%;
  width:            320px;
  margin-left:      -160px;
  bottom:           0px;
  z-index:          500;
  display:          none;
  padding:          0px;
  
  -moz-border-radius:     10px 10px 0px 0px;
  -ms-border-radius:      10px 10px 0px 0px;
  -o-border-radius:       10px 10px 0px 0px;
  -webkit-border-radius:  10px 10px 0px 0px;
  border-radius:          10px 10px 0px 0px;
}

.escala {
  font-size: 70%;
}

#detalhes * {
  color:    rgb(255, 255, 255);
}

#detalhes h2 {
  text-align:   center;
  padding:      0px;
  margin:       0px;
  font-size:    150%;
  font-family:  'oswald';
}

#detalhes span {
  text-align:   center;
  font-size:    110%;
  font-family:  'oswald';
  color:        #FFF;
}

#legenda-wrapper {
  text-align: center;
}

.assaltos {
  display:    block;
  width:      100%;
  font-size:  70%;
}

.modal-open {
  display:    block;
  width:      100%;
  clear:      both;
  cursor:     pointer;
  background-position:  0px 0px;
  font-size:            80%;
  color:                rgb(255, 255, 0) !important;
}

#menu, .list, #list-controls {
  background-color: rgb(0, 0, 0);
  position:         relative;
  float:            right;
  border:           solid 10px rgb(0, 0, 0);
  box-sizing:       border-box;
}

#list-controls {
  left:   70px;
  width:  100%;
}

#menu {
  background-image: url('../img/menu.png');
  
  width:            70px;
  height:           70px;
  cursor:           pointer;
  
  -moz-border-radius:     10px 0px 0px 10px;
  -ms-border-radius:      10px 0px 0px 10px;
  -o-border-radius:       10px 0px 0px 10px;
  -webkit-border-radius:  10px 0px 0px 10px;
  border-radius:          10px 0px 0px 10px;
}

#list-city {
  width:  400px;
}

#list-course {
  width:  570px;
}

.odd {
  background-color: rgb(220, 220, 220);
}

.list {
  height:       750px;
  
  clear:        both;

  overflow-y:   scroll;
  overflow-x:   hidden;
  background-color: #FFF;
  
  border-right: 0px;
  
  -moz-border-radius:     0px 0px 0px 10px;
  -ms-border-radius:      0px 0px 0px 10px;
  -o-border-radius:       0px 0px 0px 10px;
  -webkit-border-radius:  0px 0px 0px 10px;
  border-radius:          0px 0px 0px 10px;
}

.list div {
  color:    rgb(0, 0, 0);
  padding:  0px 0px 5px 0px;
  border:   2px solid rgb(220, 220, 220);
  border-radius:  0px 0px 5px 5px;
  margin-bottom:  10px;
}

.list h1 {
  padding:  10px;
}

.list h2 {
  width:      100%;
  text-align: center;
}

.list h3 {
  background-color: rgb(220, 220, 220);
  display:          block;
  width:            100%;
  padding:          3px;
  font-size:        110%;
  margin:           0px;
}

.active {
  color:  rgb(255, 255, 0) !important;
}

.list span {
  display:        inline-block;
  width:          100%;
  font-family:    'oswald';
  padding:        5px 0px;
  word-break:     keep-all;
  cursor:         pointer;
  float:          left;
  line-height:    1.1em;
  color:          #000;
}

.prefix {
  width:    45px !important;
  clear:    both;
}