/* ********************************************************************** */
/* COLORS */

body {
    background:#fff;
    color:#333;
}

.red,
.error {
    color:#c00;
}

.grey {
    color:#999;
}

a,
a:visited,
a code,
a:visited code {
    color:#3a78a0;
}

a:hover,
a:hover code {
    color:#c00;
}



/* ********************************************************************** */
/* FONTS */

body {
    font-family:Helvetica,Arial,sans-serif;
}



/* ********************************************************************** */
/* OTHER CONFIG */

body {
    font-size:140%;
    line-height:1.5;
}

p,
h5,
h6 {
    margin:0.6em 0;
}

h1 {
    font-size:200%;
}

h2 {
    font-size:150%;
}

h3 {
    font-size:130%;
}

h4 {
    font-size:110%;
}

h1,
h2,
h3,
h4 {
    margin-top:1.2em;
    margin-bottom:0.4em;
    line-height:1.4;
}

h2 a,
h3 a,
h4 a {
    text-decoration:none;
}



/* RESPONSIVE FONT SIZE */

@media all and (max-width:848.68px){
    
    body {
        font-size:120%;
    }
    
    h1 {
        font-size:180%;
    }
    
    h2 {
        font-size:150%;
    }
    
    h3 {
        font-size:120%;
    }
    
    h4 {
        font-size:110%;
    }
}



/* ********************************************************************** */
/* RESETS + CONSTANTS */

/**
 * Narrow screen is defined as @media all and (max-width:848.68px)
 */

* {
    margin:0;
    padding:0;
    border-width:0;
    border-style:solid;
    max-width:100%;
    vertical-align:baseline;
    font:inherit;
    line-height:inherit;
    background:inherit;
    color:inherit;
}

ol,
ul {
    text-align:left;
    /**
     * list-style-position:outside is needed for second line of text
     * being aligned with first in multiline list items
     */
    list-style-position:outside;
    text-indent:0;
    /**
     *  padding-left is needed for the bullet to show inside the list
     */
    padding-left:1.2em;
}

ul {
    list-style-type:square;
}

ol {
    list-style-type:decimal;
}

b,
strong,
.b {
    font-weight:bold;
}

em,
i,
.i {
    font-style:italic;
}

sub,
sup {
    font-size:smaller;
}

sub {
    vertical-align:sub;
}

sup {
    vertical-align:super;
}

.left {
    float:left;
}

.right {
    float:right;
}

.wrap,
.sep,
.both {
    display:block;
    clear:both;
}

.wrap {
    margin:0 auto;
}

.center {
    margin-left:auto;
    margin-right:auto;
}

.hidden {
    /* use !important to override element display property */
    display:none !important;
}



/* ********************************************************************** */
/* END */