/* --------------- Base (Base Styles) --------------- */

body, html { font: 12px arial; }
body { padding-bottom: 64px; }
h1, h2, h3, h4, h5, h6 { font-family: Arial; font-weight: bold; margin: 0; padding: 0.5em; }
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.64em; }
a { color: #800; font-weight: bold; border: 0; cursor: pointer; }
a:hover,
a.active { color: #333; }
img { border: 0; }
.Base-Non>span,    .Base-Ful>span,    .Base-Hlf>span,    .Base-3rd>span,    .Base-2-3rd>span,  .Base-4th>span,    .Base-2-4th>span,   .Base-3-4th>span,  .Base-5th>span,
.Base-2-5th>span,  .Base-3-5th>span,  .Base-4-5th>span,  .Base-6th>span,    .Base-2-6th>span,  .Base-3-6th>span,  .Base-4-6th>span,   .Base-5-6th>span,  .Base-8th>span,
.Base-2-8th>span,  .Base-3-8th>span,  .Base-4-8th>span,  .Base-5-8th>span,  .Base-6-8th>span,  .Base-7-8th>span,  .Base-10th>span,    .Base-2-10th>span, .Base-3-10th>span,
.Base-4-10th>span, .Base-5-10th>span, .Base-6-10th>span, .Base-7-10th>span, .Base-8-10th>span, .Base-9-10th>span, .Base-12th>span,    .Base-2-12th>span, .Base-3-12th>span,
.Base-4-12th>span, .Base-5-12th>span, .Base-6-12th>span, .Base-7-12th>span, .Base-8-12th>span, .Base-9-12th>span, .Base-10-12th>span, .Base-11-12th>span { background-color: #CCC; }
.footer {
	height: 48px;
	position: fixed;
	bottom: 0;
    right: 0;
	left: 0;
    z-index: 100;
	background:#ee5;
    background: #800; /* fallback color if gradients are not supported */
    background: -webkit-linear-gradient(bottom, #800, #800 75%, #600); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top, #800, #800 75%, #600); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #800, #800 75%, #600); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top, #800, #800 75%, #600); /* Standard syntax */
    box-shadow: 0 -2px 5px #000;
}

.header,
.redSeperator {
    background: #800; /* fallback color if gradients are not supported */
    background: -webkit-linear-gradient(top, #800, #800 75%, #600); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #800, #800 75%, #600); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, #800, #800 75%, #600); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #800, #800 75%, #600); /* Standard syntax */
    box-shadow: 0 2px 5px #000;
}
.header { height: 82px; }
.header,
.header>.container,
.header>.container>a,
ul.nav,
ul.nav>li,
ul.nav>li>a { vertical-align: middle; color: #FFF; }
ul.nav,
ul.nav>li,
ul.nav>li>a { display:block; }
ul.nav,
ul.nav>li { float: left; }
ul.nav>li,
ul.nav>li>a { height: 100%; }
ul.nav>li>a {
    font-weight: bold;
    text-decoration: none;
    padding: 0 0.5em;
    box-sizing: border-box;
    border-bottom: 0 solid #FFF;
    -webkit-transition: border 0.2s;
    transition: border 0.2s;
    font-size: 1.2em;
}
ul.nav>li>a:hover,
ul.nav>li>a.active { border-bottom: 4px solid #FFF; }
ul.nav>li>a:after { content:''; display:inline-block; vertical-align: middle; height: 100%; }

#slideshow { width: 100%; height: 360px; padding: 24px 0; }

#sideNav>span { border: solid 1px #333; }
#sideNav>span>h1,
#sideNav>span>h2,
#sideNav>span>h3,
#sideNav>span>h4,
#sideNav>span>h5,
#sideNav>span>h6 { color:#FFF; text-align: center; background-color: #333; border: solid 4px #CCC; }
#sideNav>span>a { display: block; padding: 6px; margin: 6px 0; border-right: solid 0 #800; text-align: right; -webkit-transition: border 0.15s; transition: border 0.15s; text-decoration: none; }
#sideNav>span>a:hover,
#sideNav>span>a.active { border-right: solid 4px #800; }

#pageContent { display: block; position: relative; }
#pageContent>li { display: block; display: none; }
#pageContent>li.active { display: block; padding-bottom: 96px; }

.Metro { padding: 6px; }
.Metro>a,
.Metro>span { display: block; position: relative; }
.Metro>a>img,
.Metro>a>img { position: relative; width: 100%; display: block; }
.Metro>a>span,
.Metro>a>span { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(128,0,0,0.8); color: #CCC; padding: 8px; font-size: 1.15em; -webkit-transition: color 0.2s, background-color 0.2s; transition: color 0.2s, background-color 0.2s; }
.Metro>a:hover>span,
.Metro>a:hover>span { background-color:#333; color: #FFF; }






/* --------------- SmMo (450px) --------------- */

@media only screen and (min-width : 450px) {
    
}





/* --------------- LgMo (600px) --------------- */

@media only screen and (min-width: 600px) {
    body, html { font: 13px arial; }
}





/* --------------- SmTb (750px) --------------- */

@media only screen and (min-width : 750px) {
    body, html { font: 14px arial; }
}





/* --------------- LgTb (900px) --------------- */

@media only screen and (min-width : 900px) {
    body, html { font: 15px arial; }
}





/* --------------- SmDk (1200px) --------------- */

@media only screen and (min-width : 1200px) {
    body, html { font: 16px arial; }
}





/* --------------- MdDk (1500px) --------------- */

@media only screen and (min-width : 1500px) {
    body, html { font: 17px arial; }
}





/* --------------- LgDk (1800px) --------------- */

@media only screen and (min-width : 1800px) {
    body, html { font: 18px arial; }
}





/* --------------- ExLg (2250px) --------------- */

@media only screen and (min-width : 2250px) {
    body, html { font: 19px arial; }
}





/* --------------- SuLg (2700px) --------------- */

@media only screen and (min-width : 2700px) {
    body, html { font: 20px arial; }
}





/* --------------- UlLg (3150px) --------------- */

@media only screen and (min-width : 3150px) {
    body, html { font: 22px arial; }
}