body {
    background-color: white;
    margin: 0;

    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 14px;
    color: #111;
}

header {
    background: linear-gradient(
        to bottom,
        #222222 0%,
        #222222 6%,
        #1d2a30 13%,
        #113a4c 21%,
        #034e6e 29%,
        #0370a4 42%,
        #048ac4 52%,
        #1999d1 59%,
        #43b0df 67%,
        #95d4ef 80%,
        #c8e8f6 88%,
        #e4f4fa 94%,
        #fcfefe 100%
    ) lightblue;
    padding: 20px;
}

main, footer, header > * {
    max-width: 960px;
    margin: 0 auto;
}

main {
    height: 500px;
}

h1 {
    color: #333;
    font-weight: normal;
    font-size: 22px;
}

#mainLogo {
    display:block;
    margin-bottom: 10px;
}

nav > ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

nav > ul > li {
    display: inline-block;
    border: 1px solid #51c9ff;
    border-radius: 4px;
    height: 24px;
    padding: 0 10px;
    line-height: 18px;

    background:
        linear-gradient(
        to bottom,
        #a6e4ff 0%,
        #b2e7ff 4%,
        #c3edff 9%,
        #bdebff 22%,
        #b8e9ff 26%,
        #9fe1ff 30%,
        #8bdbff 35%,
        #7cd7ff 43%,
        #63cfff 70%,
        #53caff 91%,
        #51c9ff 96%,
        #5ccbfc 100%)
        #7cd7ff;
}

nav > ul > li:hover {
    background: linear-gradient(
        to bottom,
        #0086c2 0%,
        #0188c4 4%,
        #43a9d5 9%,
        #55b2dc 13%,
        #59bce8 30%,
        #0c9fe1 35%,
        #15b1f7 74%,
        #17b6fd 96%,
        #28b9fa 100%)
        #035174;
}

nav a {
    color: #035174;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
}