@charset "utf-8";
viewport {
    zoom: 1.0;
    width: device-width;
}

@media screen {
    body {
        font-size: 1em;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #000000;
        color: #ffffff;
    }

    #banner {
        text-align: center;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 2em;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }

    a:link {
        color:#00ffff;
        text-decoration: none;
    }

    a:focus, a:hover {
        text-decoration: underline;
        font-weight: bold;
    }

    a:active {
        color: #ffff00;
        font-style: italic;
    }

    a:visited {
        color:#ffff00;
        text-decoration: none;
    }

    article {
        margin-left: 10px;
        padding-left: 10px;
    }

    article img {
        max-width: 100%;
        height: auto;
    }

    .post {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    #pageNav {
        display: flex;
    }

    #banner, #siteFooter {
        clear: both;
    }

    #siteFooter {
        text-align: center;
    }
}

@media screen and (max-width:980px) {
    body {
        font-size: 2em;
    }

    #menu {
		list-style-type:none;
		margin:0;
		padding:10px 0 0 0;
	}

	#menu li {
		float:left;
		text-decoration:none;
		margin:0 0 0 20px;
		padding:0;
		position:relative;
	}

	#menu ul {
		display:none;
		list-style-type:none;
		position:absolute;
		top:100%;
		left:0;
		background:#FFFFFF;
		padding:0;
	}

	#menu ul li {
		float:none;
		margin-top:20px;
	}

	#menu li:hover > ul, #menu li:focus > ul, #menu li:active > ul {
		display:block;
        background-color: #999999;
	}

    #mainNav, main {
        clear:both;
    }

    main {
        margin-top: 20px;
        padding-top: 20px;
    }

    article ul li {
        margin-bottom: 20px;
    }
}

/* rules for small screens. */
@media screen and (min-width:981px) and (max-width:1069px) {
    #menu {
		list-style-type:none;
		margin:0;
		padding:10px 0 0 0;
	}

	#menu li {
		float:left;
		text-decoration:none;
		margin:0 0 0 20px;
		padding:0;
		position:relative;
	}

	#menu ul {
		display:none;
		list-style-type:none;
		position:absolute;
		top:100%;
		left:0;
		background:#FFFFFF;
		padding:0;
	}

	#menu ul li {
		float:none;
		margin-top:20px;
	}

	#menu li:hover > ul, #menu li:focus > ul, #menu li:active > ul {
		display:block;
        background-color: #999999;
	}

    #mainNav, main {
        clear:both;
    }

    main {
        margin-top: 20px;
        padding-top: 20px;
    }

    article ul li {
        margin-bottom: 20px;
    }
}

/* rules for screen resolution widths of 981 pixels and above. */
@media screen and (min-width:1070px) {
    .arrow {
		display:none;
	}

    #wrapper {
        width:90%;
        margin-left: auto;
        margin-right: auto;
    }

    #mainNav {
        float:left;
        clear: left;
        background-color: #3f3f3f;
        border-radius: 10px;
    }

    #menu {
        list-style-type: none;
    }

    #menu li {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    #menu ul {
        list-style-type: none;
        margin-right: 10px;
        padding-right: 10px;
    }

    main {
        float: right;
        clear: right;
        background-color: #3f3f3f;
        border-radius: 10px;
        width: 70%;
    }
}

/** rules for the printed screen. */
@media print {
    body {
        font-size: 1em;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    #wrapper {
        width: 100%;
    }

    #banner, #mainNav {
        display: none;
    }

    /* display link target on printed page. */
    article a:link:after, article a:visited:after { 
        display:inline-block; 
        margin-left:5px; 
        font-style:normal; 
        content: " (" attr(href) ")"; 
    }
   
    article header a:link:after, article header a:visited:after { 
        content:normal;
    }
   
   
    a:link, a:visited {
        font-weight:bold;
        color:#520;
    }
     
    /* display abbreviation and acronym meanings on printed page, if page uses the respective abbr and acronym tags. */ 
    abbr:after { 
        content: " (" attr(title) ")"; 
    } 
}