styles.css

/* CSS Document */

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

#nav #is-active {
  color: #87C214;
}


#wrapper {
    min-height:100%;
    margin-bottom:-2em;
}

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

.fullwidth img {
    width: 100%;
}

.twitterbutton {
    width: 24px;
}

#playbutton, #fdroidbutton {
    width:240px;
}

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

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

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

.clearboth {clear:both;}

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

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

#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:0 0 0 0;
    float:right;
    margin:10px 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 label {display:none;}

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

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

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

#menu-toggle {display:none;}

#signup2 {display:none;}

.twitter {
    float:right;
    margin-left:12px;
}

.twitter2 {
    float:left;
    margin-left:12px;
}

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

#signupform2 {
    height:30px;
    float:left;
    text-align:left;
    margin-left: 12px;
}

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

#signupconf2 {
    display:none;
    float:left;
    text-align:left;
    color:#fff;
    font-size:0.9em;
    font-weight:bold;
}

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

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

#signupform button {
    width:auto;
    background-color:#C1392B;
    color:#fff;
    border:0;
    -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:0;
    -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 3em 0;
    width:700px;
    background:#fff;
    height:auto;
}

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

#content ul {}

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

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

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

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

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

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

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

#content p {margin:20px 20px 20px 0;}

#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:30px 0 32px 10px;
    padding-left:20px;
}

#content .intro #introlist ul {}

#content .intro #introlist li {margin:1em 20px 0 0;}

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

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

#content.news a {
	font-weight: normal;
}

#content #screenshots {
	display: flex;
	flex-wrap: nowrap;
    overflow-x: auto;
}

#content #screenshots a img {
    width: 200px;
    margin: 15px;
}

#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;
}

#flattr {
    font-size:0.6em;
    text-align:center;
}

#flattr a {
    margin-right: 1em;
}

#footer_container {
    background-color:#87C214;
    color:#fff;
    bottom:0;
    height:2em;
    left:0;
    position:static;
    width:100%;
    clear:both;
}

#footer {
    line-height:30px;
    margin:0 auto;
    width:100%;
    text-align:center;
    font-size:0.7em;
    font-weight:bold;
    float:left;
}

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

#footer li {
    list-style-type:none;
    display:inline;
    padding:0 10px 0 0;
    margin:0;
    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;
}


#header_container {
    *height:180px;
}

#logo {
    *padding:0;
    *margin:0;
    *height:147px;
    *background-image:url('../img/briar_logo_circle.gif');
    *background-position:0 0;
    *background-repeat:no-repeat;
}

.logo {
    *display:none;
}

#nav {
    *margin-top:40px;
}

#container {
    *padding-top:0;
}

.intro {
    *width:65%;
}

#signupform button {
    *padding:4px 2px 3px 2px;
    *font-size:0.6em;
    *font-weight:bold;
    *line-height:1.3em;
}

span.reverse {
  unicode-bidi: bidi-override;
  direction: rtl;
}

@media only screen and (max-width:48em) {
    #wrapper {margin-bottom:-5em;}

    #content {
        margin-left:0;
        margin-right:0;
    }

    #content figure img {width:100%;}

    #container {
        width:90%;
        padding-top:70px;
        padding-bottom:5em;
    }

    #content h1 {
        font-size:2em;
        margin-top:15px;
    }

    #content h2 {
        font-size:2em;
        margin-top:15px;
    }

    #playbutton, #fdroidbutton {
        width:200px;
        border: 0;
    }

    #phone {
        width:auto;
        clear:both;
        text-align:center;
        display:inline;
        margin:10px 10px 10px 0;
        float:left;
    }

    .intro {width:100%;}

    .logo {display:none;}

    #header {
        height:auto;
        margin:0;
        width:100%;
        float:left;
        padding:0;
    }

    #logo {
        padding:0;
        margin:0;
        float:left;
        width:50%;
        height:71px;
        background-size:129px 51px;
        -webkit-background-size:129px 51px;
        -moz-background-size:129px 51px;
        -o-background-size:129px 51px;
        background-image:url('../img/briar_logo_sm.png');
        background-position:1em 10px;
        background-repeat:no-repeat;
    }

    #header_container {
        height:auto;
        position:static;
        float:left;
        margin:0;
    }

    #nav {
        float:left;
        width:50%;
        margin:0;
    }

    #nav a {
        width:100%;
        height:3em;
        display:block;
    }

    #nav label {
        display:block;
        float:right;
        margin:0 1em 0 0;
        line-height:71px;
    }

    label {cursor:pointer;}

    #nav ul {display:none;}

    #menu-toggle {display:none;}

    #menu {display:none;}

    #menu-toggle:checked + #menu {display:block;}

    #menu li {
        background:#2D3E50;
        border-top:1px solid #34495e;
        border-bottom:1px solid #273646;
        margin-left:-100%;
	    display:block;
        font-size:0.9em;
        line-height:3em;
        text-align:left;
        padding:2px 0 0 30px;
	}

    #footer_container {height:5em;}

    #footer ul {
        width:auto;
        clear:both;
        margin:10px 10px 10px 15px;
    }

    #footer {
        text-align:left;
        margin-top:5px;
    }

    #signup2 {
        width:100%;
        display:inline;
    }

    #signup {display:none;}
}

@media only screen and (max-width:28em) {
    #content .intro #introlist {clear:both;}
}