@-ms-viewport { width: device-width;}
@viewport { width: device-width;}
* { box-sizing: border-box; }

html {
    background-color : #bbbb99;
    font-size: 16px;
}
body {
    background-color: #bbbb99;
    text-align:left;
    margin: 0px auto;
    border: 0px;
    padding: 0px;
    font-family: Verdana, "Lucida Sans", "Segoe UI", "Calibri Light", Arial, sans-serif;
	font-size: 16px;
	text-size-adjust: none;
}

div {padding:0; margin:0;}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #741206; /*441206*/
    line-height: normal;
    text-align: center;
    margin: 0;
    padding: 0;
}

h1 {
    font-family: Candara, 'Trebuchet MS', Helvetica, Arial, Monaco, sans-serif;
}

h2, h3 {
    font-family: 'Trebuchet MS', Helvetica, Arial, Monaco, sans-serif;
}

h1.left, h2.left, h3.left, h4.left, h5.left, h6.left { 
    text-align: left;
}

.pad-top {
    padding-top: 0.8rem;
}
.pad-bottom {
    padding-bottom: 0.8rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.3rem;
}

h3 {
    font-size: 1.2rem;
}

.no-underline { text-decoration: none !important;}

#banner {
    margin: auto;
    border-bottom: 3px solid #741206;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
    background-color: #dedea6;
    color: #441206;
    font-weight: bold;
    width:100%;
}
    #divBannerImage {
        display:inline-block;        
    }

    #divBannerDivider {
        display: table-cell;
        width:5%;
    }

    #divBannerText {
        display: table-cell;
        vertical-align: middle;
    }
	
.container {
    width:100%;
    margin: auto;
    /*padding: 20px 20px 20px 30px;*/
	padding: 1rem;
    background-color: #f7f7c5;
}

#mainContainer {
    width: 800px;
    padding: 0;
    border: 3px solid #741206;
}

#largeContainer {
    width: 900px;
    padding: 0;
    border: 3px solid #741206;
}

img.left{float:left; margin:5px 10px 5px 0px}

img.image-large {
    display: block;
    margin:auto;
    max-width: 100%;
    height: auto;
}

.stick-top {
	position: -webkit-sticky;
  	position: sticky;
  	top: 0px;
  }
  
 .solid-back {
	display:block;
	width:100%;
	background-color:#f7f7c5;
 }

a {color: #741206}
a:visited {color:#441206}
a:hover {background-color:#bbbb99}
 
#bannerimage:hover {background-color:inherit;}

hr {
    width: 90%;
    border-color: #800000;
    border-width: 0px 0px 1px 0px;
}

.ind {margin-left:1.5rem;}
.ind80{margin-left:25px;font-size:80%}

.smaller-font {font-size:0.8rem;}
.larger-font {font-size:1.25rem;}
.colored-font { color: #741206;}

.i{font-style:italic}
.b{font-weight:700}
.left{text-align:left}
.ctr{text-align:center}
.right{text-align:right}
.red{color:#e41206}
.white{background-color:#ffffff;padding:10px 25px 10px 25px}

/* used in diagram sitemap */
.col-2 {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;

    -webkit-column-width: 220px;
    -moz-column-width: 220px;
    column-width: 220px;
}

/* used in sitemap & tourcircuit */
.col-3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
}
	.col-3 a {display:block;}

/* used in glossary */
.col-5 {
	-webkit-column-count: 5; /* Chrome, Safari, Opera */
	-moz-column-count: 5; /* Firefox */
	column-count: 5;

	-webkit-column-width: 7rem;
	-moz-column-width: 7rem;
	column-width: 7rem;
}

    .col-5 a {display:block;} 


.sitemap {
    padding: 0;
    margin: 0;

    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid; /* Theoretically FF 20+ */
    break-inside: avoid-column; /* IE 11 */
    display: table; /* Actually FF 20+ */
}

    .sitemap ul {
        list-style-type: none;
        padding: 5px 10px 20px 5px;
        margin: 0;
    }


.page-menu-link-cell { float:right; text-align:right; }

.question {
    padding: 10px 0px 0px 0px;
    margin:0;
    text-align: left;
    font-family: verdana, lucida, arial, helvetica, sans-serif;
    font-size: 1rem;
    font-weight: bold;
}

#menu {
    /*position:absoute;*/
    z-index: 10000;
    margin: 0px;
    border: 0px;
    background-color: #ddddbb
}

    #menu a {
        display: block;
        padding-left: 15px;
        padding-right: 10px;
        padding-bottom: 2px;
        padding-top: 2px;
    }

.menuLink {
    font-size: 1rem;
}

    #menu .menuGroup {
        display:none;
    }
	
	#stuck {
		display:none;
	}
	
	#unstuck {
		display:none;		
	}
	

	#unstuck.show {display:block;}
	#stuck.show {
		display:block;
		width:100%;
		background-color:#f7f7c5;
		}

	
	/*#stucklink {
		background-color:#f7f7c5;
		width:100%
	}*/


    #menu .menuGroupToggle {
        background-color: #800000;
        box-shadow: none;
        color: antiquewhite;
        padding: 6px 3px 6px 3px;
        text-decoration: none;
        display: block;
        width: 100%;

        border-bottom: 1px;
        border-bottom-style:solid;
        border-color: antiquewhite;
    }
	
@media (max-width: 300px) {
	img.left {
		display:block; 
		float:none;
		margin:auto; 
		padding-bottom:0.5rem;
		padding-top:0.5rem;
		max-width: 100%;
    	height: auto;
		/*font-size: 14px;*/
		}	
}

@media (max-width: 590px) {	
	#divBannerImage {
        display:none;
    }
	#divBannerDivider {display:none;}
}

@media (max-width: 700px) {
	h1 { font-size:1.7rem;}
	#divBannerDivider {width:1%;}
}


@media (max-width: 800px) {
    #mainContainer {
        width: 100%;
        border: 0;
    }
}

@media (min-width: 801px) and (max-width: 900px) {
    #mainContainer {
        width: 90%;
    }
}

*@media (min-width: 901px) {
    #mainContainer {
        width: 800px;
    }
}

@media (max-width: 900px) {
    #largeContainer {
        width: 100%;
    }
}