/* CSS Document */

body, html {
    height:  100%;
    margin:  0px auto;
    padding: 0px auto;
    background-color:#fff;
    font-size:1em;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.3em;
}

body#index a#indexnav,
body#download a#downloadnav,
body#how a#hownav,
body#about a#aboutnav,
body#involved a#involvednav {color:#87C214;}

img {
    margin:0px;
    display:inline;
    padding:0px;
    border:none;
    vertical-align: middle;
}

figure {text-align:center;margin:0px 0px 50px 0px;padding:0px;}

figcaption {margin:10px 0px 0px 0px;font-weight:bold;text-align:center;}

@-ms-viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

.clearboth {clear:both;}

#header_container {
    height:120px;
    position:fixed;
    width:100%;
    top:0;
    background-color:#2D3E50;
}

#header {margin:20px auto 0 auto;width:65%;}

#logo {float:left;width:20%;}

.logo {
    border:3px solid #2D3E50;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color:#fff;
    padding:30px 20px 17px 20px;
    margin-top:-40px;
    width:100%;
    max-width:111px;
    height:auto;
    max-height:147px;
}

#nav {
    font-weight:bold;
    padding:0px 0px 0px 0px;
    float:right;
    margin:0px auto 10px auto;
    vertical-align:bottom;
    width:80%;
}

#nav a:link {text-decoration:none;color:#fff;}
#nav a:visited {text-decoration:none;color:#fff;}
#nav a:hover {text-decoration:none;color:#87C214;}
#nav a:active {text-decoration:none;color:#fff;}

#nav ul {
    clear:both;
    display:block;
    list-style-type:none;
    font-size:0.9em;
    padding:0px 0px 0px 0px;
    margin:0;
    text-align:right;
    height:auto;
}

#nav li {
    list-style-type:none;
    display:inline;
    padding:0px 0px 0px 20px;
    text-transform:uppercase;
    margin:0px;
    font-weight:bold;
    white-space:nowrap;
}

#nav a.current {color:#87C214;}

#signup2 {display:none;}

#signupform {height:30px;padding-bottom:10px;float:right;text-align:right;}

#signupform2 {
    height:auto;
    padding-bottom:10px;
    float:left;
    width:80%;
    font-size:1.5em;
    padding-top:10px;
    padding-left:0px;
}

#signupconf {
    display:none;
    height:30px;
    padding-bottom:10px;
    float:right;
    text-align:right;
    color:#fff;
    font-size:0.9em;
    font-weight:bold;
    padding-bottom:0px;
    padding-top:10px;
}

#signupconf2 {
    display:none;
    height:auto;
    padding-bottom:10px;
    float:left;
    width:80%;
    font-size:1.5em;
    padding-top:10px;
    padding-left:0px;
}

#signupform input, textarea {
    display:inline;
    margin-right:10px;
    width:10em;
    font-size:0.7em;
    background-color:#E2E1E1;
    color:#565555;
    padding:3px 5px;
    border:0px;
}

#signupform2 input, textarea {
    display:inline;
    margin-right:10px;
    width:10em;
    font-size:0.7em;
    background-color:#E2E1E1;
    color:#565555;
    padding:3px 5px;
    border:0px;
}

#signupform button {
    width:auto;
    background-color:#C1392B;
    color:#fff;
    border:0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-transform:uppercase;
    font-size:0.6em;
    font-weight:normal;
    padding:4px 7px;
}

#signupform2 button {
    width:auto;
    background-color:#C1392B;
    color:#fff;
    border:0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-transform:uppercase;
    font-size:0.6em;
    font-weight:normal;
    padding:4px 7px;
}

#container {
    margin:0 auto;
    padding:175px 0 30px 0;
    width:65%;
    background:#fff;
    height: 100%;
}

#content {
    margin:20px 60px 20px 180px;
    font-size:0.9em;
    line-height:1.4em;
}

#content ul {}
#content li {margin:0px 0px 10px 0px;}

#content h1 {
    margin:23px 20px 0px 0px;
    font-size:3.5em;
    line-height:1.1em;
    font-weight:normal;
}

#content h2 {
    margin:23px 20px 0px 0px;
    font-size:2.9em;
    line-height:1.1em;
    font-weight:normal;
}

#content h3 {
    margin:20px 20px 0px 0px;
    font-size:2em;
    line-height:1.1em;
    font-weight:normal;
}

#content h4 {margin:20px 20px 0px 0px;}
#content h5 {margin:20px 20px 0px 0px;}
#content h6 {margin:20px 20px 0px 0px;}
#content p {margin:20px 20px 20px 0px;}

#content a:link {text-decoration:none;color:#87C214;font-weight:bold;}
#content a:visited {text-decoration:none;color:#87C214;font-weight:bold;}
#content a:hover {text-decoration:none;color:#C1392B;font-weight:bold;}
#content a:active {text-decoration:none;color:#87C214;font-weight:bold;}

#content .intro #introlist {margin:27px 0px 32px 0px;padding-left:15px;}
#content .intro #introlist li {margin:1em 20px 0px 0px;}

#content .intro #sublist {
    clear:both;
    display:block;
    list-style-type:none;
    padding:0px;
    margin:10px 0 0px 0;
    line-height:1.4em;
    height:auto;
}

#content .intro #sublist li {
    float:left;
    list-style-type:none;
    display:inline;
    padding:0px 20px 0px 0px;
    margin:10px 0px 0px 0px;
    white-space:nowrap;
}

#sublist a.selected {color:#C1392B;}

.intro {width:70%;float:left;padding-bottom:40px;}
.full {width:100%;float:left;padding-bottom:40px;}

.intro .button {margin-right:30px;margin-bottom:20px;}
.intro .button2 {margin-bottom:20px;}

#phone {width:30%;float:left;display:inline;}
#phone2 {display:none;}

#flattr {
    font-size:0.6em;
}

#footer_container {
    color:#666;
    bottom:0;
    height:30px;
    left:0;
    position:static;
    width:100%;
}

#footer {
    line-height:30px;
    margin:0 auto;
    width:100%;
    text-align:center;
    font-size:0.7em;
    font-weight:bold;
    background-color:#87C214;
    color:#fff;
}

#footer ul {
    width:65%;
    display:block;
    list-style-type:none;
    font-size:0.9em;
    padding:0px 0px 0px 0px;
    margin:0 auto;
    text-align:left;
}

#footer li {
    list-style-type:none;
    display:inline;
    padding:0px 10px 0px 0px;
    margin:0px;
    font-weight:normal;
}

#footer a:link {text-decoration:none;color:#fff;}
#footer a:visited {text-decoration:none;color:#fff;}
#footer a:hover {text-decoration:none;color:#fff;}
#footer a:active {text-decoration:none;color:#fff;}

@media all and (max-width:1400px) {
    #header_container {
        position:static;
        float:left;
        width:100%;
        top:0;
        background-color:#2D3E50;
    }
    #header, #container {width:80%;}
    #footer ul {width:80%;}
    #content {margin-left:0px;margin-right:0px;}
}

@media all and (max-device-width:1100px) {
    #header_container {
        position:static;
        float:left;
        width:100%;
        top:0;
        background-color:#2D3E50;
    }
    #header, #container {width:80%;}
    #footer ul {width:80%;}
    #content {margin-left:0px;margin-right:0px;}
}

@media all and (max-width:800px) {
    #nav {width:400px;}
    figure img {width:100%;}
}

@media all and (max-device-width:800px) {
    #nav {width:400;}
    figure img {width:100%;}
}

@media all and (max-width:645px) {
    #nav {width:300px;}
    #header_container {height:auto;}
    #phone img {width:100px;}
    .intro {width:100%;}
    #phone2 {
        width:auto;
        clear:both;
        text-align:center;
        display:inline;
        margin:20px 20px 20px 0;
        float:left;
    }
    #phone {display:none;}
    #logo {margin-bottom:20px;}
}

@media screen and (max-device-width:645px) {
    #nav {width:300px;}
    #header_container {height:auto;}
    #phone img {width:100px;}
    .intro {width:100%;}
    #phone2 {
        width:auto;
        clear:both;
        text-align:center;
        display:inline;
        margin:20px 20px 20px 0;
        float:left;
    }
    #phone {display:none;}
    #logo {margin-bottom:20px;}
}

@media all and (max-width:520px) {
    #nav {width:200px;}
    #signupform {height:auto;width:150px;}
    #signupform button {margin:10px 0 0px 0;}
    #signupform input, textarea {margin-right:0px;}
    #content .intro #introlist {clear:both;}
    .intro p {clear:both;}
}

@media screen and (max-device-width:520px) {
    #nav {width:200px;}
    #signupform {height:auto;width:150px;}
    #signupform button {margin:10px 0 0px 0;}
    #signupform input, textarea {margin-right:0px;}
    #content .intro #introlist {clear:both;}
    .intro p {clear:both;}
}

@media all and (max-width:400px) {
    #nav {width:150px;}
    #header, #container {width:90%;}
    #container {padding-top:140px;}
    #signup2 {display:inline;}
    #signup {display:none;}
}

@media screen and (max-device-width:400px) {
    #nav {width:150px;}
    #header, #container {width:90%;}
    #container {padding-top:140px;}
    #signup2 {display:inline;}
    #signup {display:none;}
}