* {
    box-sizing: border-box;
}


/*CSS for skip to content*/

    .screenreader-text {
        position: absolute;
        left: -999px;
        width: 1px;
        height: 1px;
        top: auto;
    }

    .screenreader-text:focus {
        color: black;
        display: inline-block;
        height: auto;
        width: auto;
        position: static;
        margin: auto;
    }



/*CSS common to all pages*/

    a:link {
        color: #CD1F40;
    }

    a:hover {
        text-decoration: overline;
        color: #A80000;
    }

    a:visited {
        color: #CD1F40;
    }

    body {
        font-family: 'Times New Roman', Georgia, Garamond, serif;
        background-color: #EBF7FF;
    }

    header {
        text-align: center;
        color: #CD1F40;
        font-size: 1.25em;
        float: right;
        width: 85%;
    }

    nav {
        float: left;
        width: 15%; 
        color: #003058;
        padding: 0px 5px 0px 5px;
        border-top: 2px solid #003058;
		border-right: 2px solid #003058;
		border-bottom: 2px solid #003058;
        background-color:#EBEBEB;
    }

        nav h2 {
            font-size: 1.15em;
            text-align: center;
        }


        nav ul {
            text-decoration: none; 
            list-style-type: none; 
            padding-left: 15px;
        }

        nav li {
            padding: 20px 0px 20px 0px;
            font-weight: bold;
        }

    main {
        margin-left: 16%;
        background-color: #FFFFFF;
        padding: 0px 10px;
        clear: right;
        width: 84%;
    }

    footer {
        color: #FFFFFF;
        background-color: #003058;
        font-size: 1em;
        font-weight: bold;
        padding: 5px 0px 5px 0px;
        text-align: center;
        clear: both;
    }

        footer a:hover {
            color: #FFFFFF;
            text-decoration: overline;
        }

        footer a:link {
            color: #FFFFFF;
        }

        footer a:visited {
            color: #c2e0f0;
    }

    header, nav, main, footer {
        display: block;
    }

    table {
        width: 100%;
        margin: auto;
        border: 1px solid #000000;
    }

        th {
            background-color: #003058;
            color: #FFFFFF;
            font-weight: bold;
            font-size: larger;
        }

        td, th {
            padding: 5px;
            border: 1px solid #000000;
        }

	.red {
		color: #A80000;
	}
	
	h1 {
		font-family: Verdana, Arial, sans-serif;
	}

	.holiday {
		color: #A80000;
        font-weight: bold;
		text-align: center;
	}

	#wrapper {
        width: 95%; 
        margin-right: auto; 
        margin-left: auto; 
        min-width: 700px; 
        max-width: 1920px;
        background-color:#FFFFFF;
            border: 2px solid #000000;
    }

    #logo {
        height:60px; 
        background-image: url(../images/arc_logo.png); 
        background-repeat: no-repeat; 
        background-size: 500px; 
        background-color: #ffffff;
        margin-left: 10px
    }

    .mobile {
        display: none;
    }

    .desktop {
        display: inline;
    }

    .update {
        text-align: right;
        color: #000000;
    }



/*CSS for home page*/

    .home {
    	color: #003058;
        padding-right: 1em;
    }

    .home h2 {
        color:#A80000;
    }

    .home h3 {
		padding-left: 2em;
    }

    .home h4 {
		padding-left: 4em;
		color: #A80000;
		font-size: 1.1em;
    }

    .home p {
        padding-left: 5em;
        font-weight: bold;
    }
    


/*CSS for lab page*/

	.labs th {
		font-size: 1em;
	}

	.labweek {
		text-align: center;
		font-weight: bold;
        color: #003058;
	}

	.ll {
		text-align: center;
		font-weight: bold;
        color: #9124ff; 
	}

	.la_due {
		color: #A80000;
        font-weight: bold;
		font-size: 1.15em;
	}

	.lab_a {
		padding-left: 10px;
	}

	.lab_pl {
		text-align: center;
	}

	.lab_la {
		text-align: center;
	}

	.lab_ds {
		text-align: center;
	}

	.lab_due {
		text-align: center;
	}

	.lab_info {
		font-weight: bold;
		font-size: 1.15em;
		color: #003058;
	}

	.labcol1 {
        width: 5%;
    }

    .labcol2 {
        width: 5%;
    }

    .labcol3 {
        width: 8%;
    }

    .labcol4 {
        width: 50%;
    }

    .labcol5 {
        width: 11%;
    }

    .labcol6 {
        width: 16%;
    }

    .labcol7 {
        width: 11%;
    }

    .labcol8 {
        width: 16%;
    }

   .labs tr:nth-of-type(odd) {
        background-color: #EBF7FF;
    }



/*CSS for handout page*/

    .handout th {
        width: 29%;
    }

    .handcol4 {
        width: 13%;
    }

    .handout tr:nth-of-type(odd) {
        background-color: #EBF7FF;
    }
    


/*CSS for key page*/

    .keycol1 {
        width: 15%;
    }
    .keycol2 {
        width: 15%;
    }
    .keycol3 {
        width: 25%;
    }
    .keycol4 {
        width: 25%;
    }
    .keycol5 {
        width: 20%;
    }

    .key tr:nth-of-type(odd) {
        background-color: #EBF7FF;
    }
    


/*CSS for PowerPoint page*/

    .pptopic {
        text-align: left;
    }

    .ppsession {
        font-weight: bold;
        color: #003058;
    }

    .powerpoint {
        text-align: center;
    }

    .ppcol1 {
        width: 13%;
    }

    .ppcol2 {
        width: 73%;
    }

    .ppcol3 {
        width: 14%;
    }

    .powerpoint tr:nth-of-type(odd) {
        background-color: #EBF7FF;
    }
    
    .ppwarning {
        text-align: left;
        font-weight: bolder;
        color: #003058;
        font-size: 1.1em;
    }
    


/*CSS for Homework page*/

    .hwassigned {
        text-align: left;
    }

    .homework {
        text-align: center;
    }

    .hwcol1 {
        width: 11%;
    }

    .hwcol2 {
        width: 15%;
    }

    .hwcol3 {
        width: 74%;
    }

    .hwannounce {
        text-align: left;
        font-weight: bolder;
        color: #003058;
    }

    .bw {
        color: #CD1F40; 
        font-weight: bold;
    }

    .ec {
        color: #B05307; 
        font-weight: bold;
    }

    .reading {
        color: #9124ff; 
        font-weight: bold;
    }

    .misc {
        color: #0000FF; 
        font-weight: bold;
    }

    .lab {
        color: #007a00; 
        font-weight: bold;
    }

	.correction {
        color: #CD1F40; 
        font-weight: bold;
        font-style: italic;
    }

    .stripe {
        background-color: #EBF7FF;
    }

    .homework a, .ch {
        font-weight: bold;
    }
    


/*CSS for letter page*/

    .letter th {
        width: 20%;
    }
    
    .letter tr:nth-of-type(odd) {
        background-color: #EBF7FF;
    }

	.letter table {
		text-align: center;
	}



/*CSS for prereq page*/

    .prereq th {
        width: 50%;
		text-align: center;
    }
    
    .prereq tr:nth-of-type(odd) {
        background-color: #EBF7FF;
    }

	.prereq td {
		padding-left: 15px;
	}


/*CSS for survival pack page*/

    .sp {
    	color: #003058;
        padding-right: 1em;
    }

    .sp h2 {

	}

    .sp h3 {
		color:#A80000;
		padding-left: 2em;
    }

    .sp h4 {
		padding-left: 4em;
		color: #A80000;
		font-size: 1.1em;
    }

    .sp p {
        padding-left: 5em;
		color: #000000;
		margin-top: -5px;
    }

	.printed {
		font-weight: bold;
		font-style:  italic;
		text-decoration: underline;
    	color: #003058;
	}




/*CSS for mobile*/

    @media only screen and (max-width: 1280px) {
        
        body {
            margin: 0; 
            padding: 0;
        }

        header{
            float: none;
            width: auto;
            padding: 0.1em 1em 0.2em 1em;
        }

        nav {
            float: none;
            width: auto;
            padding: 0.1em 1em 0.1em 1em;
            text-align: center;

        }

        nav li {
            display: inline-block;
        }

        nav a {
            padding: 1em;
        }

        main {
            padding: 1em;
            margin-left: 0;
            font-size: 90%;
            width: auto;
        }

        footer {
            margin: 0;
        }
        
        h1 {
            margin: 0;
        }

        #wrapper {
            width:auto; 
            min-width: 0;
            margin: 0;
        }
        
        .mobile {
            display: block;
        }
        
        .desktop {
            display: none;
        }


    }


    @media only screen and (max-width: 768px) {
        
        header{
            padding: 0px 0px 5px 0px;
        }

        nav {
            padding: 0;
        }

        nav li {
            display: inline-block;
        }

        nav a {
            padding: 0.2em;
            display: block;
            font-size: 1.1em;
            border-bottom: 1px solid #000000; 
        }

        nav ul {
            margin: 0; 
            padding: 0;
        }

        nav li {
            margin: 0; 
            padding: .1em;
            display: block;
        }

        main {
            padding: 0.1em 0.6em;
        }

        footer {
            margin: 0;
        }
        
        h1 {
            height: 100%;
            font-size: 1.5em;
        }

        .mobile {
            display: inline;
        }
        
        .desktop {
            display: none;
        }

        #wrapper {
            width:auto; 
            min-width: 0;
            margin: 0;
        }
        
        #logo {
            height:60px; 
            background-image: url(../images/arc_logo.png); 
            background-repeat: no-repeat; 
            background-size: 65%, 65%; 
            background-color: #ffffff;
            margin-left: 10px
        }
        
    }