@media screen {
    /* Global values */
    .navbar {
        margin: 0;
        padding: 0;
        width: 10em;
        background-color: #E66C2C;
        position: fixed;
        height: 100%;
        overflow: auto;
        z-index: 2; /* Keep on top */
        top: 0; /* Keep at top */
        left: 0; /* Keep to very leftmost of screen */
    }

    /* The navigation menu links */ 
    .navbar a {
	cursor: url('/Stylesheets/cursor_Halloween.png'), auto;
        padding: .1em .1em .1em .2em;
        text-decoration: none;
        font-size: 2em;
        font-family: Helvetica;
        text-align: left;
        color: #F9F9F9;
        background-color: #E66C2C !important;
        display: block;
    }

    .navbar a.active {
        background-color: #E4611B !important;
        color: #FFFFFF;
    }

    .navbar a:hover:not(.active) {
        color: #FFFFFF;
        background-color: #EA8148;
    }

    .sbox {
        padding: .05em;
        background: #E66C2C;
    }

    .sbox input {
        width: 11em;
        background: #F9F9F9;
        border-radius: .4em;
    }
}

/* sub-XGA screens */
@media screen and (max-width:1023px) {
    .sbox { padding: 0em; }
    .sbox input { 
        width: 30em;
        height: 2em;
        border-radius: .6em;    
    }
    .navbar {
	padding: 0;
	width: 100%;
	top: 0;
	left: 0;
	right: 100%;
	height: auto;
	position: absolute;
    }
    .navbar a {
        float: left;
        padding-top: .5em;
    }
    div.content {margin-left: 0;}
}

@media print and (color) {
    .navbar, .navbar a { width: 0; display: none; }
}