| body { |
| margin: 0; |
| font-family: Arial, sans-serif; |
| } |
| |
| .destinations { |
| margin: 2em 3em; |
| width: 30em; |
| } |
| |
| .destination { |
| width: 100%; |
| position: relative; |
| } |
| |
| .destination input { |
| width: 100%; |
| font-size: 15px; |
| padding: 8px 16px; |
| } |
| |
| .destination-info .title { |
| font-weight: 500; |
| font-size: 14px; |
| } |
| |
| .map-canvas { |
| width: 100%; |
| height: 100%; |
| } |
| |
| ul.messages { |
| width: 30%; |
| min-width: 10em; |
| list-style: none; |
| } |
| |
| .messages li { |
| color: #FFF; |
| background-color: rgba(0, 0, 0, .6); |
| font-size: 10pt; |
| padding: 3px 3px 3px 1em; |
| border-radius: 4px; |
| margin-bottom: 3px; |
| text-indent: -.5em; |
| } |
| |
| .messages li:before { |
| font-weight: bold; |
| } |
| |
| .messages li.info:before { |
| content: "i "; |
| color: #77F; |
| } |
| |
| .messages li.error:before { |
| content: "x "; |
| color: red; |
| } |
| |
| .selected { |
| box-shadow: 0 0 8px #05f; |
| z-index: 1; |
| } |