@charset "utf-8";

/* CSS Document */
body {
    font-family: Arial;
    background-color: rgba(198,236,195,1.00);
	margin: 8px;
}
@media (min-width: 1px) {
	.headerLogo {width:100px; float:left;margin-left:40px}
	.mobileMenuDiv {visibility:visible}
	.mainNav{visibility:hidden; height:0px}
	#outline {margin-top: auto;margin-bottom:auto; padding-bottom: 10px}
	#mobileSawleyImage {
	width: 10px;
	float: right;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	}
	#extHallImage {width:90%}
	#coopwebbanner{width:90%}
	#supportedbycoopmembers{width:90%}
}
@media (min-width: 240px) {
	.headerLogo {width:160px; float:left;margin-left:40px}
	.mobileMenuDiv {visibility:visible}
	.mainNav{visibility:hidden; height:0px}
	#outline {margin-top: auto;}
	#mobileSawleyImage {
	width: 20px;
	float: right;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;}
	#extHallImage {width:90%}
	#coopwebbanner{width:90%}
	#supportedbycoopmembers{width:90%}
}
	

@media (min-width: 320px) {
	.headerLogo {width:260px; float:left}
	.mobileMenuDiv {visibility:visible}
	.mainNav{visibility:hidden; height:0px}
	#outline {margin-top:auto;}
	#mobileSawleyImage {
	width: 30px;
	float: right;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;}
	#extHallImage {width:90%}
	#coopwebbanner{width:90%}
	#supportedbycoopmembers{width:90%}
}

@media (min-width: 415px) {
	.headerLogo {width:350px ; float:left}
	.mobileMenuDiv {visibility:visible}
	.mainNav{visibility:hidden; height:0px}
	#outline {margin-top:auto;}
	#mobileSawleyImage {
	width: 30px;
	float: right;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;}
	#extHallImage {width:85%}
	#coopwebbanner{width:85%}
	#supportedbycoopmembers{width:85%}
}

@media (min-width: 600px) {
    .headerLogo {width:500px; float:none}
    .mobileMenuDiv {visibility:hidden; height:0px}
    .mainNav{visibility:visible}
    body {
        background-image: url(hallopec.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }
    #outline {margin-top:auto;}
    #mobileSawleyImage {width:0px}
    #main {margin-left:160px}
    #extHallImage {width:auto}
    #coopwebbanner{width:auto}
    #supportedbycoopmembers{width:auto}
}

@media (min-width: 767px) {
	.headerLogo {width:700px}	
	}
@media (min-width: 1000px) {
	#outline {width:900px}	
	}

h2 {
	color: #E6C400;
	font-size: medium;
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight: 700;
    line-height: 1.0;
}
.importantnotice {
	/*imortancenotice is used index and events page any important notices*/ 
	padding: 5px;
	background-color: #EDD955;/*Yellow*/
	border-radius: 10px;
    position: relative;
    overflow: hidden; 
    margin:10px;
}
.importantnotice img {
    /*Manages size of image in importantnotice*/
    max-width: 100%; 
    height: auto; 
}
.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    gap: 10px; /* Adds space between the title and the close button */
}

.title-area {
    flex-grow: 1; /* Ensures the title takes available space */
    word-wrap: break-word; /* Allows the text to wrap to a new line if it's too long */
}

.close-btn-area {
    flex-shrink: 0; /* Prevents the close button from shrinking */
}

.noticeclosebtn {
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    margin-left: 10px; /* Optional: Adds extra space between the title and the close button */
    line-height: 1; /* Keeps the button centered */
}
.eventimg {
	/*eventimg is used ievents page */ 
	width:100%;
	padding: 5px;
	border-radius: 10px;
    position: relative;
    overflow: hidden; 
}
.eventimg img {
    /*Manages size of image in eventimg*/
    max-width: 100%; 
    height: auto; 
}
.noticeclosebtn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #000;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
}
.greena {
	/*greena is used as hyperlink text*/
	color: #006400;
	text-decoration: none;
	font-weight: bold;
}
.reda {
	/*reda is used as bold red text*/
	color:#F9171B;
	text-decoration: none;
	font-weight: bold;
}
.pboldlarge{
	/*pboldlarge is class used as make para bold. Currently in index and Events as opposed to using <strong></strong>*/
	font-weight: bolder;
}
a {
	/*color: #006400;*/
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
}
a:hover {
	cursor: pointer
/*color: #E6C400;*/
}
a:focus {
	
cursor: pointer
/*color: #E6C400;*/

}


/*gallery2 start*/
/* The Image Box */
div.img {
	border: 1px solid #ccc;	
}

div.img:hover {
    border: 1px solid #777;
}

/* The Image */
div.img img {
    width: 100%;
    height: 100%;
    cursor: pointer;
	border-radius:2px;
}

/* Description of Image */
div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

/* Add Responsiveness */
.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    /*z-index: 1;  Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;	
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
	
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0.1)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Responsive Columns */
@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
    .modal-content {
        width: 100%;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

/* Clear Floats */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
/*gallery2 end*/
#mobileSawleyImage   {
	border-radius: 5px;
}
#extHallImage {
	border-radius: 10px;
}
.headerLogo {
	
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2px;
	margin-bottom: 2px;
	}
main {
    overflow:auto;
	
}
body {
	font-family: Arial;
	font-size: 16px;
	opacity: 0.85;
	filter: alpha(opacity=85);
	text-align: justify;	
}
footer {
	font-family:Arial;
	font-size:10px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;	
}

.containedDiv {
	overflow: auto;
	width:90%;
	margin: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: small;	 
}
.imageLeft {
	float:left;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	border-radius: 10px;
	max-width: 95%;
	width: auto\9; /* ie8 */
    height: auto;
    
	
}
.imageRight{
	float:right;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	border-radius: 10px;
	max-width: 95%;
    height: auto;
    width: auto\9; /* ie8 */;
}
.imageDisplay{
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	border-radius: 10px;
	text-align:center;
	max-width: 28%;
    height: auto;
    width: auto\9; /* ie8 */
}
.imageGallery{
	border-radius: 5px;
	
}
#outline {
	/*width: 900px;*/
	border: 2px solid;
	margin-left: auto;
	margin-right: auto;
	height:auto;
	background-color: #ffffff;
	border-color: #ffffff;
	border-radius: 5px;
	/*display: flex;
    flex-direction: column;*/
    min-height: 94vh;
	
	
	}
.nextButton {
	background-color:rgba(184,184,184,1.00);
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left:10px;
	padding-right: 10px;
	border-radius:10px;
	box-shadow:8px 5px 5px rgba(39,39,39,1.00);
	color: #006400;
	text-decoration: none;
	font-weight: bold;
	
}
.dropbtn {
	background-color: rgba(50,102,0,1.00);
	color: white;
	padding: 2px;
	font-size: 20px;
	border: none;
	cursor: pointer;
	border-radius: 20px;
	display:block;
	width: 100%;
}
.mainNavButton {
	background-color: rgba(50,102,0,1.00);
	color: white;
	padding: 2px 2px 2px 15px;
	font-size: 16px;
	border: none;
	/*cursor: pointer;*/
	border-radius: 10px;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	width:100px;
	list-style-type: none;
	
	
}

.dropbtn:hover, .dropbtn:focus {
    background-color: rgba(216,173,0,1.00);
}

.mobileMenuDiv {
    position: relative;
    /*display: inline-block;*/
	z-index:1000;
}

.dropdown-content {
    display: none;
    position: absolute;
	border-radius: 10px;
    background-color: rgba(50,102,0,1.00);
    min-width: 50px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: white;
	font-family:arial;
    padding: 3px 12px;
    text-decoration: none;
    display: block;
}

.mobileMenuDiv a:hover ,.mainNavButton:hover  {background-color: rgba(216,173,0,1.00)}


.show {display:block;}
.indentpara{
	/*indentpara is  class used to ident a paragraph. Used in rates and bookingform*/
	padding-left: 50px;
    padding-right: 50px;
}
/* -----------start format bookingform----------*/
.formlabel{
	float:left; 
	width:125px; 
	text-align:right; 
	margin-right:10px;
}
.formsurveytitle{
	text-align:left;
	margin-left:3%;
}
.formlabelwide{
	float:left; 
	width:95%; 
	text-align:center; 
	margin-right:10px;
}
.forminput{
	width: 55%;
}
.forminputwide{
	width:95%; 
	text-align:center; 
}
.custom-submit {
    background-color: #007bff; /* Bootstrap primary button color */
    color: white; /* Text color */
    border: none; /* Remove borders */
    border-radius: 5px; /* Slightly rounded corners */
    padding: 10px 20px; /* Padding for a button-like appearance */
    font-size: 16px; /* Font size for better readability */
    cursor: pointer; /* Show pointer on hover */
    transition: background-color 0.3s ease; /* Smooth transition effect */
}

.custom-submit:hover {
    background-color: #0056b3; /* Darker blue on hover (Bootstrap darken) */
}

.custom-submit:focus {
    outline: none; /* Remove the default outline */
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Custom focus outline */
}

.custom-submit:disabled {
    background-color: #6c757d; /* Bootstrap's gray disabled color */
    cursor: not-allowed; /* Show disabled cursor */
}
.forminputdate,.forminputtime{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	color: #666666;
	font-size: small;
}
.forminput:focus,.forminputwide:focus {
    background-color:#C7EACC;
	border: 3px ;
}
/* -----------End format bookingform----------*/