#city-list-left { width: 250px; height: 100%; float: left; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #f5f5f5; padding-bottom: 44px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #city-list-left > ul { position: relative; height: 100%; overflow: auto; -moz-box-sizing: border-box; box-sizing: border-box; } #city-list-left li { position: relative; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } #city-list-left li:hover > a, #city-list-left li:hover, #city-list-left .selected, #city-list-left .selected a { background-color: #ccc; } #city-list-left li > a { line-height: 44px; padding: 0 12px; display: block; overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; text-overflow: ellipsis; color: #333; } #city-list-left li .icon-delete { width: 30px; height: 18px; top: 0; right: 0; position: absolute; cursor: pointer; height: 100%; display: none; } #city-list-left li:hover .icon-delete { display: inline; } #city-right { padding: 45px; height: 100%; overflow-y: hidden; overflow-x: auto; top: 0; bottom: 0; right: 0; left: 250px; background: black; color: #EEE; } #city-right .city-name { font-size: 6em; line-height: 1em; } #city-right .city-current-temp { font-size: 4em; line-height: 1em; } #city-right .city-current-pressure, #city-right .city-current-wind { font-size: 3em; line-height: 1em; } #city-right .city-current-humidity { font-size: 3em; line-height: 1em; } #city-right .city-current-weather { font-size: 3em; line-height: 1em; } #city-right .city-current-sunrise { font-size: 3em; line-height: 1em; } .city-list hr { border: 0; height: 1px; background: #BBB; background-image: linear-gradient(to right, #CCC, #BBB, #CCC); } #create-city { padding: 10px; background-color: #EEE; border: 1px solid #DDD; } #create-city h1 { color: #444; } #create-city h1 { text-align: center; font-weight: bold; } #create-city h2 { font-weight: bold; } .city-form-error { color: red; } .city-load-error { color: #FF3333; position: absolute; text-align: center; top: 40%; width: 100%; padding: 20px; font-size: 1.5em; } #city-weather-panel { border-radius: 3px; padding: 30px; padding-top: 20px; background-color: rgba(50, 50, 50, 0.5); display: inline-block; }