/* a little bit of reset */
body, h1, h2, h3, ul, li, p, img {
    border: 0;
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

a, li, article {
    display: inline-block;
}

a:link,
a:visited,
a:active {
    text-decoration: none;
    outline: none;
    font-size: 1em;
    color: #000;

    -webkit-transition:color 0.6s ease 0.1s;
       -moz-transition:color 0.6s ease 0.1s;
         -o-transition:color 0.6s ease 0.1s;
            transition:color 0.6s ease 0.1s;
}

html { 
    height: 100%;
    font-size: 100%; /* ~16px */
}

    body, footer {
        font-family: 'Gilda Display', serif;
    }

    body {
        position: relative;
         
        background: #ad9a74 url(../static/img/body1080.jpg) center 0 repeat-x;
        background-size: 60em auto; /* ~960px */
        
        min-height: 100%;
    }

        #wrapper, #footer_wrapper {
            /* 32/1040 = 0.030769231 */
            padding: 0 3.0769231%;
        }
        
        #footer_wrapper {
            padding-top: 1.5em;
        }
              
        #wrapper, #footer_wrapper {
            max-width: 65em; /* ~1040px */
            margin: 0 auto;
        }

            header {
                position: relative;

                background: transparent url(../static/img/header2.jpg) 6.875em 7.375em no-repeat;
                background-size: 23.25em auto;
            }
            
                header h1 {
                    font-size: 1em; /* ~16px */
                    vertical-align: top;
                }
                                
                h1 a {
                    position: relative;
                    margin: 1.125em 0 0.75em 1em;
                    width: 28.875em; /* ~462px */
                    height: 6.3125em; /* ~101px */

                    background: transparent url(../static/img/logotype.jpg) 0 -6.3125em no-repeat;
                    background-size: 28.875em auto;
                    text-indent: -5000em;
                }
                
                h1 span {
                    position: absolute;
                    left: 0;
                    top: 0;

                    width: 100%;
                    height: 6.25em;

                    background: transparent url(../static/img/logotype.jpg) 0 0 no-repeat;
                    background-size: 28.875em auto;
                    opacity: 0;

                    -webkit-transition:opacity 0.6s ease 0.1s;
                       -moz-transition:opacity 0.6s ease 0.1s;
                         -o-transition:opacity 0.6s ease 0.1s;
                            transition:opacity 0.6s ease 0.1s;
                }
                
                h1 a:hover span {
                    opacity: 1;
                }

                header q {
                    position: absolute;
                    right: 0;
                    top: 1em;

                    width: 25em;

                    font-style: italic;
                    text-align: right;
                }

                header q a:link,
                header q a:visited,
                header q a:active {
                    display: inline;;
                }

                header q a:hover {
                    color: #333;
                }
                
                #nav {
                    padding-bottom: 5em;
                    text-align: right;
                }
                
                        #nav li {
                            background: transparent url(../static/img/navBack.jpg) 0 0 no-repeat;
                            background-size: 15.5em auto;
                        }
                        
                            #nav li.first a {
                                border-left: 1px solid #000;
                            }

                            #nav a {
                                border-right: 1px solid #000;
                                padding: 0.85em 1.4em 1em 1.25em;
                                
                                font-family: 'sawasdeebold', sans-serif;
                                font-size: 1.25em; /* ~ 20px */
                                text-transform: uppercase;
                                letter-spacing: -0.15em;
                                color: #abb0aa;

                                /* SHAME, necessary for win browsers */
                                line-height: 1.6em;
                            }
                        
                        #nav li.active {
                            height: 5em;

                            background: transparent url(../static/img/linkLeft.jpg) 0 0 no-repeat;
                            background-size: 12.5em auto;
                        }
                            
                            #nav li.active a {
                                color: #754628;
                            }
                            
                            #nav a:hover {
                                color: #797572;
                            }
                
                #content {
                    text-align: justify;
                    padding: 0 0 12em 0;
                    font-size: 1.25em; /* ~20px */
                    color: #222;
                    margin: 0 auto;
                }

                #content:after {
                    display: inline-block;
                    width: 100%;
                    content: ' ';
                }
                
                    #content h2 {
                        padding: 0.5em 0 0 0;
                        font-family: 'sawasdeebold', sans-serif;
                        font-size: 2em;
                        text-transform: uppercase;
                        letter-spacing: -0.15em;
                    }
                    
                    #content p { 
                        padding: 0 0 2em;
                        line-height: 2em; 
                    }
                    
                    #content a:link,
                    #content a:visited,
                    #content a:active {
                        color: #000;
                        font-weight: bolder;
                    }
                    
                    #content a:hover {
                        color: #333;
                    }

                #left, #center, #right {
                    padding: 1em 0 0 0;
                    vertical-align: top;        
                }
                    
                footer {
                    position: absolute;
                    bottom: 0;

                    background: transparent url(../static/img/footer.jpg) 0 0 repeat-x;
                    background-size: 60em auto;
                    
                    width: 100%;
                    height: 12.75em;
                    color: #999;
                }

                    footer ul {
                        width: 40%;
                        min-width: 28em;
                        text-align: justify;
                    }

                    footer ul:after {
                        content: '';
                        width: 100%;
                        display: inline-block;
                    }
                
                        footer li {
                            width: auto;
                        }
                    
                            footer li a:link,
                            footer li a:visited,
                            footer li a:hover,
                            footer li a:active {
                                font-family: 'sawasdeebold', sans-serif;
                                font-size: 2.25em; /* ~ 36px */
                                text-transform: uppercase;
                                letter-spacing: -0.15em;
                                color: #aaa;
                            }
                            
                    footer p a:link,
                    footer p a:visited,
                    footer p a:hover,
                    footer p a:active {
                        padding-bottom: 0.5em;
                        color: #aaa;
                    }

/* 1052px / 16px */
@media screen and (max-width: 65.75em) {

    header {
        background-position: -50em 8em;
    }

        h1 a {
            margin: 1.84em 0 0.05em 1em;
        }

        #nav {
            padding-bottom: 0;
        }
}

/* 935px */
@media screen and (max-width: 58.4375em) {
    header q {
        width: 16em;
        font-size: 0.9em;
    }
}

/* 768px */
@media screen and (max-width: 48em) {

    body {
        background-size: 40em auto;
    }

    h1 a,
    h1 span {
        background-size: 21.8em auto;
        height: 4.8em;
        width: 21.8em;
    }

    h1 a {
        margin: 0.6em 0 0.1em 1em;
        background-position: 0 -4.8em;
    }

    header q {
        font-size: 0.7em;
    }

    #nav li.active {
        background-size: 8.5em auto;
        height: 3.2em;
    }

    #nav a {
        font-size: 0.85em;
    }

    footer ul {
        min-width: 25em;
    }

        footer li a:link,
        footer li a:visited,
        footer li a:hover,
        footer li a:active {
            font-size: 2em;
        }
}

/* 640px */
@media screen and (max-width: 40em) {
    #content h2 {
        font-size: 0;
    }
}

/* 590px */
@media screen and (max-width: 36.875em) {
    header q {
        width: 13em;
        font-size: 0.6em;
    }
}

/* 500 */
@media screen and (max-width: 31.25em) {
    header q {
        font-size: 0;
    }
}

/* 480px */
@media screen and (max-width: 30em) {

    body {
        background-position: 0 -2em;
    }

    h1 a, h1 span {
        background-size: 15.7em auto;
        height: 3.4em;
        width: 15.8em;
    }

    h1 a {
        background-position: 0 -3.4em;
        margin: 0 0 0.1em 1em;
    }

    #nav a {
        padding: 0.85em 1em 1em 0.9em;
    }

    footer ul {
        min-width: 18em;
    }

    footer li a:link,
    footer li a:visited,
    footer li a:hover,
    footer li a:active {
        font-size: 1.5em;
    }
}