* {
    font-family: helvetica, verdana, sans-serif;
}

body {
    background: #FFF;
    overflow-y: scroll;
    margin: 0;
    padding: 0;
}

h1 {
    margin-top: 0;
}

h2 {
    clear: both;
    color: #63821E;
    font-size: 1.25em;
    border-bottom: 1px dashed #CCC;
    margin: .8em 0 .5em;
    padding: .2em 0;
}

h3 {
    color: #63821E;
    font-size: 1em;
    margin: .7em 0 .3em;
}

table {
    width: 100%;
    font-size: .8em;
}

th {
    text-align: left;
    vertical-align: bottom;
    padding: .2em;
    margin: 0;
}

td:first-child {
    text-align: right;
}

td {
    padding: .2em;
    vertical-align: bottom;
    margin: 0;
}

#page {
    background: #FFF;
}

#headerShadow {
    display: none;
}

#content {
    padding: .5em;
}

#content a {
    text-decoration: none;
    color: #9dbf21;
}

#navigation a {
    display: block;
    padding: .5em 0;
    text-decoration: none;
    font-weight: bold;
    color: #AAA;
}

#navigation a:hover,
#navigation a.active:hover {
    color: #b8e23a;
}

#navigation a.active {
    color: #63821E;
}

.articleImage {
    float: right;
    clear: right;
    padding: .2em;
    margin: .5em;
    border-radius: .5em;
    border: 1px solid #AAA;
    width: 200px;
    font-size: .6em;
    color: #63821E;
}

.articleImage a {
    display: block;
    margin: 0 auto .2em;
    text-align: center;
    border-bottom: 1px solid #AAA;
}

#headerNavigation {
    bottom: 0;
    background: #b8e23a;
    overflow: auto;
}

#headerNavigation ul {
    list-style: none;
    margin: 0;
    padding: 0 1em;
    clear: left;
}

#headerNavigation li {
    float: left;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}

#headerNavigation a {
    padding: 0 1em;
    text-decoration: none;
    color: #888;
    line-height: 1.5em;
    display: block;
}

#headerNavigation a:hover,
#headerNavigation li.active a {
    background: #FFF;
}

#navigation {
    color: #AAA;
    padding: .5em;
}

#navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    clear: left;
    overflow: hidden;
}

#navigation li {
    padding: 0 .5em;
    margin: 0;
    float: left;
}

#navigation li:first-child {
    padding: 0 .5em 0 0;
}

#navigation ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
    clear: left;
    overflow: hidden;
    display: none;
}

#navigation ul li.active ul {
    display: block;
}

#navigation li li:first-child {
    padding: 0 .5em 0 0;
}

#navigation li li {
    padding: 0 .5em;
    margin: 0;
    float: left;
}

#navigation ul ul ul {
    list-style: none;
    margin: 0;
    padding: 0;
    clear: left;
    overflow: hidden;
    display: none;
}

#navigation ul ul li.active ul {
    display: block;
}

#navigation li li li:first-child {
    padding: 0 .5em 0 0;
}

#navigation li li li {
    padding: .5em;
    margin: 0;
    float: left;
}

#header {
    height: 6em;
    background: radial-gradient(#b8e23a 0%, #FFF 50%);
    background-position: -14em -67em;
    background-size: 200% 100em;
    background-repeat: no-repeat;
    border-radius: .5em .5em 0 0;
}

#title {
    font-size: 3em;
    font-weight: bold;
    padding-left: .5em;
}

#slogan1 {
    font-size: .8em;
    padding-left: 5em;
}

#slogan2 {
    font-size: .8em;
    padding-left: 6em;
}

.fb-like {
    display: none !important;
}

.gplus {
    display: none !important;
}

.twitter-share-button {
    display: none !important;
}

.download {
    box-shadow:inset 0px 1px 0px 0px #bbdaf7;
    background: linear-gradient(to bottom, #b8e23a 0%, #9dbf21 100%);
    background-color: #9dbf21;
    border-radius: 1em;
    color: #63821E !important;
    display: block;
    float: left;
    min-width: 10em;
    padding: 1em;
    margin: .5em .5em .5em 0;
    font-size: .8em;
}

.download:hover {
    background: linear-gradient(to top, #b8e23a 0%, #9dbf21 100%);
    background-color: #9dbf21;
}

.download h3 {
    padding: 0;
    margin: 0;
    font-size: 1.25em;
}

.cart {
    width: 100%;
    border-spacing: 0;
}

.cart th {
    border-bottom: 1px solid #AAA;
    border-right: 1px dashed #CCC;
}

.cart th:last-child {
    border-right: 0 none #FFF;
}

.cart td {
    border-bottom: 1px dashed #CCC;
    border-right: 1px dashed #CCC;
}

.cart td:last-child {
    border-right: 0 none #FFF;
}

.cart tr:last-child td {
    border-bottom: 0 none #FFF;
}

.protocol {
    width: 30em;
    border-spacing: 0;
}

.protocol thead th {
    border-bottom: 1px solid #AAA;
}

.protocol th:first-child {
    border-right: 1px solid #AAA;
    width: 50%;
    text-align: left;
}

.protocol tr:last-child td {
    border-bottom: 0 none #FFF;
}

.protocol td {
    border-bottom: 1px dashed #CCC;
}

.protocol tbody th:first-child {
    border-bottom: 1px dashed #CCC;
}

.protocol tbody tr:last-child th {
    border-bottom: 0 none #FFF;
}

.protocol th:last-child {
    border-right: 0 none #FFF;
}

.protocol th {
    text-align: right;
    border-right: 1px dashed #CCC;
}

.protocol td:last-child {
    border-right: 0 none #FFF;
}

.protocol td {
    text-align: right;
    border-right: 1px dashed #CCC;
    width: 25%;
}

@media screen and (orientation: landscape) and (min-width: 1000px) {
    body {
        background: linear-gradient(to right, #FFF 0%, #bebfa6 20%, #bebfa6 80%, #FFF 100%);
    }

    #page {
        padding: 0;
        width: 50em;
        margin: 2em auto;
        box-shadow: 0 0 2em .3em #999;
        border-radius: .5em;
        position: relative;
        z-index: 10;
        min-width: 950px;
    }

    #headerShadow {
        height: 1.5em;
        position: absolute;
        z-index: 1;
        top: 7.7em;
        left: 0;
        right: 0;
        background: #9dbf21;
        display: block;
    }

    #navigation {
        display: table-cell;
    }

    #navigation ul {
        width: 12em;
        margin: 1em 0 0;
        padding: 0 1em;
        border-right: 1px solid #CCC;
    }

    #navigation li {
        padding: 0;
        float: none;
        border-bottom: 1px dashed #CCC;
    }

    #navigation li:last-child {
        border-bottom: none;
    }

    #navigation ul ul {
        list-style: disc;
        border-right: none;
        margin: 0;
        padding: 0 0 0 1.2em;
        height: auto;
        display: block;
    }

    #navigation li li {
        padding: 0;
        border-bottom: none;
        float: none;
    }

    #navigation ul ul ul {
        list-style: square;
        border-right: none;
        margin: 0;
        padding: 0 0 0 1.2em;
        height: auto;
        display: block;
    }

    #navigation li li li {
        padding: 0;
        border-bottom: none;
        float: none;
    }

    #content {
        padding: 1em;
        display: table-cell;
    }

    .fb-like {
        position: absolute !important;
        right: 6em;
        top: 1em;
        display: block !important;
    }

    .gplus {
        position: absolute;
        right: 12em;
        top: 1em;
        display: block !important;
    }

    .twitter-share-button {
        position: absolute !important;
        right: 1em;
        top: 1em;
        display: block !important;
    }
}

@media screen and (max-width: 450px) {
    .articleImage {
        float: none;
        clear: right;
    }

    .protocol {
        width: 100%;
    }
}