@font-face {
    font-family: 'marcellus';
    src: url('../fonts/Marcellus-Regular.ttf');
}

strong {
    font-family:courier;
    font-weight:bold;
}

code {
    font-family:courier;
    font-weight:normal;
}

pre {
    font-family:courier;
    font-weight:normal;
}


a:link {
    color: CornflowerBlue;
    text-decoration: none;
}

a:visited {
    color: CadetBlue;
    text-decoration: none;
}


* {
    background-color:#ffffff;
    font-family: 'marcellus', 'optima', 'palatino', 'sans-serif';
}

@media screen and (orientation:landscape){

    .page {
	width:75%;
	background-color:#cccccc;
	text-align: left;
	padding:2%;
	margin:auto;
    }

    .noscreen {display: none;} 
    .cleaner {clear: both; height: 0; font-size: 0; visibility: hidden;}
    .spacer {clear: both; height: 10px; font-size: 0; visibility: hidden;}

    .left {
	display:inline;
	background-color:#cccccc;
	float:left;
	width: 20%;
    }

    .right {
	display:inline;
	background-color:#cccccc;
	float:right;
	width: 77%;
    }

    .inner {
	background-color:#ffffff;
	text-align: left;
	padding: 2% 5% 2% 5%;
	margin:0 auto;
    }

    .header {
	height:145px;
	background-color: #003366;
	font-size: large;
	color: #CCCC99;
	padding: 1em;
    }

    .footer {
	background-color: #003366;
	color: #CCCC99;
	text-align: center;
	font-size: small;
    }

    .header h1 {
	background-color: #003366;
	text-align:center;
    }

    .header ul {
	background-color: #003366;
	list-style-type: none;
	padding: 0;
    }

    .header ul li {
	background: #CCCC99;
	color: #003366;
	display: block;
	font-weight: bold;
	font-size: 18;
	float: left;
	width: 20%;
        height: 5.5ex;
	text-align: center;
	padding: 0.5ex 0 0.5ex 0;
    }

    .header ul li a {
	background: #CCCC99;
	color: #003366;
	text-decoration: none;
	padding: 0.5ex 0 0.5ex 0;
    }

    .header ul li a:hover {
	color: #CCCC99;
	background: #003366;
    }

    .left h2 {
	font-size: 20;
	font-weight: bold;
    }

    .left h3 {
	font-size: 18;
	font-weight: bold;
    }

    .left ul {
	list-style-type: none;
	text-align: center;
	padding: 0;
    }

    .left ul li {
	background: #003366;
	width: 100%;
	color: #cccccc;
	padding: 1ex 0 1ex 0;
	text-decoration: none;
	display: block;
	text-align: center;
	font-weight: bold;
	font-size: 15;
    }

    .left ul li a {
	background: #003366;
	width: 100%;
	color: #cccccc;
	text-decoration: none;
	display: block;
    }

    .left ul li a:hover {
	color: #003366;
	background: #cccccc;
    }


    .right h2 {
	font-size: 20;
	font-weight: bold;
    }

    .right h3 {
	font-size: 18;
	font-weight: bold;
    }

}


@media screen and (orientation:portrait){

    .page {
	width:auto;
	background-color:#cccccc;
	text-align: left;
	padding:2%;
	margin:auto;
    }

    .noscreen {display: none;} 
    .cleaner {clear: both; height: 0; font-size: 0; visibility: hidden;}
    .spacer {clear: both; height: 5px; font-size: 0; visibility: hidden;}

    .left {
	display:inline;
	float:none;
	text-align:left;
	padding: 0;
	width: auto;
    }

    .right {
	display:inline;
	float:none;
	text-align:left;
	padding:0;
	width: auto;
    }

    .inner {
	background-color:#ffffff;
	text-align: left;
	padding: 1ex 1em 1ex 1em;
	margin:0 auto;
    }

    .header {
	height:auto;
	float:none;
	background-color: #003366;
	color: #CCCC99;
	padding:2%;
    }

    .footer {
	background-color: #003366;
	color: #CCCC99;
	text-align: center;
	font-size:x-small;
	font-wieght: bold;
    }

    .header h1 {
	background-color: #003366;
	text-align:center;
    }

    .header ul {
	list-style-type: none;
	background-color: #CCCC99;
	color:  #003366;
	padding: 0;
	font-size: larger;
    }

    .header ul li {
	display: block;
	width: auto;
	background-color: #CCCC99;
	color:  #003366;
	text-align:center;
	font-weight: bold;
	padding: 0.2ex 0 0.2ex 0;
    }

    .header ul li a {
	display: block;
	background-color: #CCCC99;
	color:  #003366;
	text-decoration: none;
	padding: 0.2ex 0 0.2ex 0;
    }

    .header ul li a:hover {
	display: block;
	background-color: #003366;
	color:  #CCCC99;
    }

    .left h2 {
	font-weight: bold;
	font-size: larger;
    }

    .left h3 {
	font-weight: bold;
	font-size: larger;
    }

    .left ul {
	padding: 0.2ex 0 0.2ex 0;
	list-style-type: none;
	text-align: center;
	clear: left;
	font-size: larger;
    }

    .left ul li {
	background: #003366;
	width: auto;
	height: auto;
	padding: 0.2ex 0 0.2ex 0;
	color: #cccccc;
	text-decoration: none;
	display: block;
	text-align: center;
	font-weight: bold;
    }

    .left ul li a {
	background: #003366;
	width: auto;
	height: auto;
	padding: 0.2ex 0 0.2ex 0;
	color: #cccccc;
	text-decoration: none;
	display: block;
	text-align: center;
	font-weight: bold;
    }

    .left ul li a:hover {
	color: #003366;
	background: #cccccc;
    }


    .right h2 {
	font-weight: bold;
	font-size: larger;
    }

    .right h3 {
	font-weight: bold;
	font-size: larger;
    }
}