/* CSS Document - Desktop First Responsive Design */
body{
	margin:0px; 
	padding:0px; 
	background:url(images/main-bg.gif) 0 0 repeat-x #F2F0DC;
	color:#5D5B46;
 	font-size:13px;
	font-family: 'Lato', sans-serif;
	font-weight:100; 
	text-decoration:none;
}
div, p, ul, h2, img{margin:0px; padding:0px;}
ul{list-style-type:none;}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

div.center {
    margin-left: auto;
    margin-right: auto;
    width:500px;
}

/*----TOP PANEL----*/
#topPan{
	width:778px; 
	height:141px; 
	position:relative; 
	margin:0 auto; 
	font-size:14px;
	line-height: 18px;
}
#topPan ul{width:125px; height:22px; position:absolute; top:0px; right:130px;}
#topPan ul li{float:left; width:45px; height:22px;}
#topPan img.logo{position:absolute; top:53px; left:29px;}

/*----HEADER- PANEL----*/
#headerPan{width:778px; height:28px; position:relative; margin:0 auto;}
#headerleftPan{width:46px; height:28px; float:left;}
#headermiddlePan{width:686px; height:28px; float:left;}

/*----Menu Panel----*/
#menuPan{
	width:686px; 
	height:33px; 
	background:url(images/menu-bg.gif) 0 0 repeat-x; 
	position:relative; 
	margin:0 auto;
	text-align:center;
	line-height: 33px;
}
#menuPan ul{width:550px; height:28px; position:relative; top:2px; margin-left: auto;margin-right: auto;}
#menuPan ul li{width:110px; height:28px; float:left;}
#menuPan ul li a{width:109px; height:28px; display:block; background:#fff; color:#2F2A28; border-right:1px dashed #969260; font-size:15px; text-align:center; text-decoration:none;}
#menuPan ul li a:hover{width:110px; height:28px; background:#2F2A28; color:#fff; border:none; text-decoration:none;}
#menuPan ul li.contact a{width:110px; height:28px; display:block; background:#fff; color:#2F2A28; border:none; font-size:13px; line-height:28px; text-align:center; text-decoration:none;}
#menuPan ul li.contact a:hover{width:110px; height:28px; background:#2F2A28; color:#fff; border:none; text-decoration:none;}

/*----BODY PANEL----*/
#bodyPan{width:686px; position:relative; margin:0 auto;}
#bodyPan h2{width:500px; background:#F2F0DC; margin-top:15px;color:#D80000; font-size:26px; line-height:54px;}
#bodyPan p{padding:5px 0 0;font-weight:100;}
#bodyPan ul{list-style-type: disc;font-weight:100; padding-left:30px;}
#bodyPan p.date{width:174px; height:22px; background:#FEFEF6; color:#000; font-size:18px; line-height:22px; padding:0px;}
#bodyPan p.more{width:102px; height:16px; margin:0 0 0 582px; padding:0 0 14px 0;}
#bodyPan p.more a{width:102px; height:16px; display:block; background:#F2F0DC; color:#D80000; font-size:13px; line-height:16px; font-weight:bold; text-decoration:none;}
#bodyPan p.more a:hover{background:#F2F0DC; color:#7E0202; text-decoration:none;}
#bodyPan p.border{background:url(images/dot-line.gif) 0 0 repeat-x; height:1px;}

/*----Body Bottom Panel----*/
#bodybottomPan{width:686px; position:relative; margin:0 auto; padding:30px 0 0 8px;}
#bottomleftPan{width:686px; background:#FFF; color:#D80000; border:1px solid #CDCAA3; margin:0px;margin-left: auto;margin-right: auto;}
#bottomleftPan h2{width:640px; font-size:26px; line-height:26px; font-weight:100; padding:10px 0 0 2px; margin:22px 22px 0 22px; text-align:center;}
#bottomleftPan h2.detail{font-size:20px; color:#5D5B46; text-align:center;}
#bottomleftPan p.more{width:270px; height:41px; margin:10px auto 25px;display: block;}
#bottomleftPan p.more a{width:270px; height:21px; display:block; background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#fff; font-size:18px; font-weight:100; text-align:center; text-decoration:none;}
#bottomleftPan p.more a:hover{background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; text-decoration:none;}

/*----FOOTER PANEL----*/
#footermainPan{height:80px; background:url(images/footerbg.gif) 0 0 repeat-x #3B3B3B; color:#fff; font-size:13px; line-height:20px; position:relative; margin:0 auto; clear:both; padding:75px 0 0; display: block;}
#footerPan{text-align:center;list-style:none}
#footerPan ul{text-align:center;list-style:none}
#footerPan li{display:inline}
#footerPan ul li a{padding:0 10px 0; color:#fff; background:#3B3B3B; text-decoration:none; font-size:12px;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan p.copyright{position:relative; margin:0 auto; background:#3B3B3B; color:#fff;  font-size:11px;display: block;}
#footerPanhtml{width:70px; height:24px; display:block; position:absolute; top:45px; left:265px;}
#footerPancss{width:58px; height:24px; display:block; position:absolute; top:45px; left:340px;}
/*----/FOOTER PANEL----*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font-size: 10px; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* Gallery Layout */
#container {
	width:686px; 
	position:relative; 
	margin:0 auto; 
	padding:15px 0 0 8px; 
	text-align:center;
	text-decoration:none;
	border:0;
}

/* Handle row-based layout for prairie and nature galleries */
#container .row {
	width: 686px;
	height: auto;
	clear: both;
	overflow: hidden;
	margin-bottom: 0;
}

#container div.short {
	float: left;
	text-align:center; 
	background: #fff; 
	width: 228px; 
	padding:15px 0px 15px 0px; 
	height:180px; 
	display: block;
	text-decoration:none;
	border:0;
}

#container div.medium {
	float: left;
	text-align:center; 
	background: #fff; 
	width: 228px; 
	padding:15px 0px 15px 0px; 
	height:225px; 
	display: block;
	text-decoration:none;
	border:0;
}

#container div.tall {
	float: left;
	text-align:center; 
	background: #fff; 
	width: 228px; 
	padding:15px 0px 15px 0px; 
	height:350px; 
	display: block;
	text-decoration:none;
	border:0;
}

#container a{color:#2F2A28;}

.page div {height:20px; padding: 0;}

/* Mobile Responsive Styles */
@media screen and (max-width: 767px) {
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    div.center {
        width: 100%;
        max-width: 500px;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    #topPan {
        width: 100%;
        max-width: 778px;
        height: auto;
        min-height: 80px;
        padding: 10px 15px;
        box-sizing: border-box;
    }
    
    #topPan img.logo {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        margin: 0 auto;
        max-width: 281px;
    }
    
    #headerPan {
        width: 100%;
        max-width: 778px;
        height: auto;
    }
    
    #headerleftPan {
        display: none;
    }
    
    #headermiddlePan {
        width: 100%;
        height: auto;
        float: none;
    }
    
    #menuPan {
        width: 100%;
        height: auto;
        padding: 5px 0;
    }
    
    #menuPan ul {
        width: 100%;
        height: auto;
        position: relative;
        top: auto;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
    }
    
    #menuPan ul li {
        width: auto;
        height: 28px;
        float: none;
        flex: 1;
        min-width: 80px;
        max-width: 110px;
    }
    
    #menuPan ul li a {
        width: 100%;
        height: 28px;
        display: block;
        background: #fff;
        color: #2F2A28;
        border-right: 1px dashed #969260;
        font-size: 13px;
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
        padding: 0 5px;
    }
    
    #menuPan ul li:last-child a {
        border-right: none;
    }
    
    #menuPan ul li a:hover {
        background: #2F2A28;
        color: #fff;
        border: none;
        text-decoration: none;
    }
    
    #menuPan ul li.contact a {
        width: 100%;
        height: 28px;
        display: block;
        background: #fff;
        color: #2F2A28;
        border: none;
        font-size: 13px;
        line-height: 28px;
        text-align: center;
        text-decoration: none;
    }
    
    #menuPan ul li.contact a:hover {
        background: #2F2A28;
        color: #fff;
        border: none;
        text-decoration: none;
    }
    
    #bodyPan {
        width: 100%;
        max-width: 686px;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    #bodyPan h2 {
        width: 100%;
        max-width: 500px;
        background: #F2F0DC;
        margin-top: 15px;
        color: #D80000;
        font-size: 24px;
        line-height: 1.3;
    }
    
    #bodyPan p.date {
        width: 100%;
        max-width: 174px;
        height: auto;
        min-height: 22px;
        background: #FEFEF6;
        color: #000;
        font-size: 16px;
        line-height: 1.3;
        padding: 5px;
        box-sizing: border-box;
    }
    
    #bodyPan p.more {
        width: 100%;
        max-width: 102px;
        height: auto;
        margin: 10px auto 0;
        padding: 0 0 14px 0;
        text-align: center;
    }
    
    #bodyPan p.more a {
        width: 100%;
        max-width: 102px;
        height: auto;
        min-height: 16px;
        display: block;
        background: #F2F0DC;
        color: #D80000;
        font-size: 13px;
        line-height: 1.3;
        font-weight: bold;
        text-decoration: none;
        padding: 5px;
        box-sizing: border-box;
    }
    
    #bodybottomPan {
        width: 100%;
        max-width: 686px;
        padding: 30px 15px 0;
        box-sizing: border-box;
    }
    
    #bottomleftPan {
        width: 100%;
        background: #FFF;
        color: #D80000;
        border: 1px solid #CDCAA3;
        margin: 0;
        box-sizing: border-box;
    }
    
    #bottomleftPan h2 {
        width: auto;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 100;
        padding: 15px;
        margin: 0;
        text-align: center;
        box-sizing: border-box;
    }
    
    #bottomleftPan h2.detail {
        font-size: 18px;
        color: #5D5B46;
        text-align: center;
        padding: 10px 15px;
    }
    
    #bottomleftPan p.more {
        width: 100%;
        max-width: 270px;
        height: auto;
        margin: 10px auto 25px;
        display: block;
    }
    
    #bottomleftPan p.more a {
        width: 100%;
        height: auto;
        min-height: 40px;
        display: block;
        background: url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1;
        color: #fff;
        font-size: 16px;
        font-weight: 100;
        text-align: center;
        text-decoration: none;
        padding: 10px;
        box-sizing: border-box;
    }
    
    #footermainPan {
        height: auto;
        min-height: 80px;
        background: url(images/footerbg.gif) 0 0 repeat-x #3B3B3B;
        color: #fff;
        font-size: 13px;
        line-height: 20px;
        position: relative;
        margin: 0 auto;
        clear: both;
        padding: 40px 15px 20px;
        display: block;
        box-sizing: border-box;
    }
    
    #footerPan ul {
        text-align: center;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    #footerPan li {
        display: inline-block;
        margin: 0 5px;
    }
    
    #footerPan p.copyright {
        position: relative;
        margin: 10px auto 0;
        background: #3B3B3B;
        color: #fff;
        font-size: 11px;
        display: block;
    }
    
    /* Mobile Gallery Layout */
    #container {
        width: 100%;
        max-width: 686px;
        padding: 15px;
        text-align: center;
        text-decoration: none;
        border: 0;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 15px;
    }
    
    #container .row {
        width: 100%;
        height: auto;
        clear: none;
        overflow: visible;
        margin-bottom: 0;
        display: contents;
    }
    
    #container div.short,
    #container div.medium,
    #container div.tall {
        width: 100%;
        text-align: center;
        background: #fff;
        padding: 15px;
        height: auto;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border: 0;
        box-sizing: border-box;
        float: none;
    }
    
    .page div {
        height: auto;
        min-height: 20px;
        padding: 5px 0;
    }
}