html { min-height: 100%; }

/* Inset drop shadow for forms and code. */
input[type=submit] {
     text-shadow: -1px -1px 0px hsl(0, 0%, 0%);
}
input[type=text], input[type=passwod], textarea,
div.highlight, pre.literal-block {
    -moz-box-shadow: inset 1px 1px 1px hsl(0, 0%, 0%);
    -webkit-box-shadow: inset 1px 1px 1px hsl(0, 0%, 0%);
    box-shadow: inset 1px 1px 1px hsl(0, 0%, 0%);
}

.rounded {
    -moz-box-shadow: 0 2px 5px hsl(196, 0%, 10%);
    -webkit-box-shadow: 0 2px 5px hsl(196, 0%, 10%);
    box-shadow: 0 2px 5px hsl(196, 0%, 10%);
}

/* Code boxes */
div.highlight, pre.literal-block {
    max-height: 15.83em;  /* Exactly 11 lines, but why? */
}

/* start layout */
body {
	margin: 0 auto;
	margin-top: 0.5em;
    padding: 0 1em;
    width: 1000px;
}

#header {
    width: 100%;
    height: 11em;
    background: url("../images/bg_topleft.png") no-repeat;
    position: relative;
    left: -85px;
    padding-left: 85px;
}

#logo, #nav, #content, #sidebar, footer {
	display: inline;
	position: relative;
	float: left;
}

#logo {
    float: right;
	width: 33.333%;
    margin: 0;
    padding: 0;
}
#logo img.logo {
    display: none;
}
#logo img.logo2 {
    width: 357px;
    height: 272px;
    position: relative;
    left: -52px;
}

#nav {
    background: url("../images/hrule_left.png") no-repeat 0px 182px;
    position: relative;
    left: -52px;
    float: left;
	width: 60.667%;
    height: 30px;
    margin: 0 0 2.35em 0;
    padding: 135px 0 25px 6%;
}
#nav .hrule {
    z-index: -1;
    position: absolute;
    left: 90px;
    top: 182px;
    width: 577px;
    height: 3px;
    background: url("../images/hrule.png") repeat-x;
}
#nav ul {
    margin: 0;
    padding: 0;
    font-size: 1.25em;
}
#nav ul li {
    background: url("../images/li.png") no-repeat center bottom;
    display: inline;
    padding: 0 4% 36px;
}
#nav ul li a {
    text-decoration: none;
}

#content {
	clear: both;
	width: 64.667%;
	margin: -4em 2% 2em 0;
    font-size: 1em;
}

#sidebar {
	width: 31.333%;
	margin: -4em 0 -1px 2%;
}

#footer {
	clear: both;
	width: 100%;
	margin: 2em 0 .5em;
}

@media screen and (max-device-width: 1000px), screen and (max-width: 800px) {
    body, #header {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #header, #nav, #nav div.hrule {
        background: none;
        position: relative;
        left: 0px;
        top: 0px;
    }
    #logo, #nav, #content, #sidebar, #footer {
        margin: 0 1%;
        padding: 0 1%;
        width: 96%;
    }
    #logo {
        margin-top: .5em;
        margin-bottom: 1em;
        text-align: right;
    }
    #logo img.logo {
        display: inline;
        height: 200px;
    }
    #logo img.logo2 {
        display: none;
    }
    #nav ul {
        margin: 0 0 .25em;
        width: 100%;
        font-size: 1em;
    }
    #nav ul li {
        padding: 0 4%;
        background: none;
    }
    #nav div.hrule {
        margin: 0 0 .75em;
        width: 100%;
        height: 1px;
        border: 0;
        background: hsl(86, 50%, 36%);
        background: -moz-linear-gradient(left,
            hsla(86, 50%, 36%, 0) 0%,
            hsla(86, 50%, 36%, .8) 10%,
            hsla(86, 50%, 36%, .8) 90%,
            hsla(86, 50%, 36%, 0) 100%);
        background: -webkit-linear-gradient(left,
            hsla(86, 50%, 36%, 0) 0%,
            hsla(86, 50%, 36%, .8) 10%,
            hsla(86, 50%, 36%, .8) 90%,
            hsla(86, 50%, 36%, 0) 100%);
        background: linear-gradient(left,
            hsla(86, 50%, 36%, 0) 0%,
            hsla(86, 50%, 36%, .8) 10%,
            hsla(86, 50%, 36%, .8) 90%,
            hsla(86, 50%, 36%, 0) 100%);
    }

    #sidebar {
        margin-top: 1em;
    }
    #sidebar .box {
        float: left;
        margin: 0;
        padding: 1em 1%;
        border: 0;
        width: 48%;
    }
    #sidebar hr {
        display: none;
    }
}

@media screen and (max-device-width: 1000px) {
    #nav {
        font-size: 1.5em;
    }
    #content {
        font-size: 1.75em;
    }
}
/* end layout */