* {
    margin: 0;
}

html {
    height: 100%;
    background: rgb(190, 220, 255) url(../gfx/background.png) no-repeat scroll 0% 0%;
    font-size: 1em;
}

body {
    height: 88%;
}    

h1 {
    background: rgb(20, 20, 135) url(../gfx/title_bar.png) repeat-x scroll 0% 0%;
    color: rgb(255, 255, 255);
    font-size: 14px;
    text-align: center;
    padding: 0.2em;
}

.mainContainer {
    height: inherit;
}

.wrapper {
    min-height: 100%;
    height: inherit;
    margin-bottom: -49px;  /* Inverse of the footer's height */
}

h2 {
    margin: 7% 0 5% 0;
    color: rgb(0, 0, 0);
    font-size: 1.1em;
    text-align: center;
}

.selectedItem {
    background-image: url(../gfx/highlight.png);
    background-repeat: repeat;
}
    
.clickedItem {
    background-image: none;
}

#forecastContainer {
    margin: 0;
    text-align: center;
}

#locationTable {
    border-collapse: separate;
    border-spacing: 1em 0;
    margin: 0 auto;
}

#locationTable td {
    width: 54px;
    height: 54px;
    font-size: 80%;
    text-align: center;
}

#locationTable td img {
    width: 100%;
    height: 100%;
}

.navigationBar {
    width: 56px;
    height: 56px;
    position: relative;
    top: 50%;
    margin-top: -28px;  /* Half of the navigation arrow image height */
}

#navigationLeft {
    float: left;
    margin-left: 0;
    margin-right: 20px;
}

#navigationRight {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

#graphicalForecast img {
    height: 35%;
}

#textualForecast {
    font-size: 1.1em;
    margin: 0 58px;  /* Slightly more than the navigation arrow's width */
}

#temperatures {
    color: rgb(255, 255, 255);
    font-size: 14px;
}

.footer {
    margin: 0 auto;
    width: 224px;  /* Twice the width of the temperature component */
    height: 49px;  /* Same as the height of the temperature component */
}

.rightAligned {
    float: right;
    height: 110px;  /* Twice the height of the temperature component plus some
                       for the padding */
}

.temperature {
    width: 112px;
    height: 49px;
    text-align: center;
    padding-top: 0.8em;
}

#currentTemperature {
    background-image: url(../gfx/temperature_cold.png);
    background-repeat: no-repeat;
    float: none;
    margin: 0 auto;
}

#highTemperature {
    background-image: url(../gfx/temperature_warm.png);
    background-repeat: no-repeat;
    float: left;
}

.rightAligned #highTemperature {
    float: none;
}

#lowTemperature {
    background-image: url(../gfx/temperature_cold.png);
    background-repeat: no-repeat;
    float: left;
}

.rightAligned #lowTemperature {
    float: none;
}

.temperatureText {
    padding-right: 4px;
}

.temperatureDigits {
    font-size: 28px;
}