body{font-family:Arial, Helvetica, sans-serif;
        background-image: linear-gradient(to top, #FFFFFF 0%, #e6e6e6 100%); 
        background-size: 100% 100%;
        margin: 36px auto;
	width: 90%;
}

#page{
	margin: 0 auto 53px;
	width: 93.75%; /* 900px / 960px */
	border: 1px solid black;
	border-radius: 15px;
}

/* header section */
header h1 {
    	border-bottom-right-radius:015px;
	border-bottom-left-radius:015px;	
        border-top-right-radius:015px;
	border-top-left-radius:015px; 
        background-image: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #e6e6e6 100%); 
        /*background-color: #778899;*/
	padding: 0.6em 5.33333333%;  /* 48px / 900px */
}

/* nav section */
nav ul {
	padding-left: 5.33333333%;  /* 48px / 900px */
}
nav ul li{
	display: inline;
	list-style-type: none;
	padding-right: 3em;
}

/* article section */
/* un comment and see what happens */
/*
article{
	height: 200px;
	overflow: auto;
}
*/

article h1, article p{
 padding: .2em 8.48056537% .2em 8.48056537%; /* 48px / 566px */
}

/* aside section */
aside {
	margin: 0 auto;
	width: 69.7885196%; /* 231px / 331px */
}
aside h2, aside p{
 padding: .2em 8.48056537% .2em 8.48056537%; /* 48px / 566px */
}

/* footer section */
footer{
	clear: both;
        background-image: radial-gradient(ellipse farthest-corner at right bottom, #FFFFFF 0%, #e6e6e6 100%); 
	/*background-color: #778899;*/
	border-bottom-right-radius:015px;
	border-bottom-left-radius:015px;
        border-top-right-radius:015px;
	border-top-left-radius:015px;
	padding: 0.8em 5.33333333%;  /* 48px / 900px */
}


/* setting the design to be 900px wide 
   with two columns. 
*/

body{
    max-width: 900px;
}

#main{
	float: left;
	width: 62.8888889%; /* 566px / 900px */
    }

    #other{
    list-style-type: none;
	float: left;
	width: 36.7777778%; /* 331px / 900px */
    }


    
    
/* make it responvive */




/* i am not crazy about this but i make each column the same size */
@media screen and (max-width:850px){
    
    #main{
	float: left;
	width: 50%; 
    }

    #other{
	float: left;
	width: 50%; 
    }

}

@media screen and (max-width: 530px){
    #main{
	float: left;
	width: 100%; 
    }

    #other{
	float: none;
        clear: both;
	width: 100%;
    }
    
}

table{
     margin-left: 5em;
}

table, td {
     border: 1px solid black;
}

th, td {
     text-align: center;
}

.mistake {
    color: #fff;
    background-color:#800;
    border: thin solid #000;
}

#errors ol li{
    color: #880000;
}