/* Custom CSS Styles
---------------------------------------------------------------------------------------------------- */

/* Place your custom CSS Styles here */

/* Body CSS */
img {
border:none;
}

/* color: white;
background: red;
display: block;
background-image: url(img/gradient.png);
background-repeat: repeat-x;
text-decoration: none; */

.container{
	font-size: 16px;
	font-family: Arial;
	color: black;
}

/* Navigation CSS */

#nav{
	list-style: none;
	margin: 0;
	padding: 0px 0px 30px 0px;
}



#nav li{
	background-image: url(/redgumgully/assets/gradient.jpg);
	background-size: cover;
	display: block;
	float: left;
	width: 19%;
	margin-left: 1%;
	text-align: center;
	position: relative;
}

#nav li.active{
	background-image: url(/redgumgully/assets/active-nav.jpg);
}

#nav li a{
	text-decoration: none;
	display: block;
	font-weight: bold;
	font-size: 20px;
	
}



#nav li:first-child{
	width: 20%;
	margin-left: 0;
}

#linkBarBackground{
	background: #1f3905;
	margin: 10px;
	padding: 0px 0px 0px 0px;
	height: 100%;
}

#linkBar{
	display: block;
	list-style: none;
	margin: 10px;
	padding: 12px;
	background-repeat: no-repeat;
	background-size: 100%;
}

#linkBar li{
	display: block;
	float: left;
	width: 25%;
	text-align: center;
	font-size: large;
}

/* JavaScript Drop Down Menu CSS */

#nav li .submenu {
	/* By default, the sub-menu is hidden */
	display: none;
}

#nav li.open .submenu {
	/* if the list item has class="open", show .submenu */
	display: block;
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	margin:0;
	padding: 0;
}

#nav li .submenu li {
	/* No dividing lines for li elements within the .submenu class */
	display: block;
	width: 100%;
	background: #1f3905;
	
}

#nav li .submenu a:link, 
#nav li.open .submenu a:link {
	background-image: none; /* links inside .submenu should have no background image */
	padding-left: 0px; /* links inside .submenu should a greater left indent */
}

#nav li .submenu :link{color: black;}
#nav li .submenu :visited{color: black;}
#nav li .submenu :hover{color: blue;}
#nav li .submenu :focus{color: white;}
#nav li .submenu :active{color: red;}

/* 'drop down' menu */

#about_linkBarBackground{
	margin: 10px;
	padding: 0px 0px 0px 0px;
	height: 100%;
	lenght: 300px;
}

#about_nav{
	list-style: none;
	margin: 0;
	padding: 0px 0px 30px 0px;
}

#about_nav li:first-child{
	width: 20%;
	margin-left: 200px;
}

#about_nav li{
	background-image: url(/redgumgully/assets/gradient.jpg);
	background-size: cover;
	display: block;
	float: left;
	width: 20%;
	margin-left: 1%;
	text-align: center;
	position: relative;
}

#about_nav li a{
	text-decoration: none;
	display: block;
	font-weight: bold;
	font-size: 20px;	
}

#about_nav li a:link{color: black;}
#about_nav li a:visited{color: black;}
#about_nav li a:hover{color: blue;}
#about_nav li a:focus{color: white;}
#about_nav li a:active{color: red;}

/* Header CSS */

h1{
	font-size: 28px;
	color: black;
	font-weight: bold;
	font-family: Arial;
}

h2{
	font-size: 24px;
	font-family: Arial;
	color: black;
}

h3{
	font-size: 18px;
	font-family: Arial;
	color: black;
}

#pb{
	background: #aacc89;
	background-image: url(/redgumgully/assets/Side-Bar.jpg);
	padding: 1em 1em 1em 2em; 
	background-repeat:repeat-y;
	margin-top: 6px;
}

#headerBackground{
	background: #aacc89;
	background-image: url(/redgumgully/assets/Side-Bar.jpg);
	background-repeat:repeat-y;
	padding: 1em 1em 1em 1em; 
}

/* Footer CSS */

#footer{
	background: #1f3905;
	list-style: none;
	margin-top: 6px;
	padding: 4px 4px 4px 4px; 
	color: #ffffff;
	font-size: 14px;
	font-family: Arial;
}

#footer li{
	display: block;
	float: left;
	width: 33%;
	text-align: center;
}

#footer a:link{color: white;}
#footer a:visited{color: yellow;}
#footer a:hover{color: blue;}
#footer a:focus{color: white;}
#footer a:active{color: red;}

/* Functional CSS */

.fluid{
	/* This allows images to resize depending on the size of the window */
	width: 100% !Important;
	height: auto !Important;
}

.fluidMap{
	/* This allows images to resize depending on the size of the window */
	width: 100% !Important;
}

.imageband{
	list-style: none;
	margin: 0;
	padding: 0;
}

.imageband li{
	display: block;
	float: left;
	width: 33%;
	text-align: center;
}

.imageband li .fluid{
	width: auto !Important;
	height: 250px !Important;
}

/* Internet Explorer  Code */

#nav a:link{color: black;}
#nav a:visited{color: black;}
#nav a:hover{color: blue;}
#nav a:focus{color: white;}
#nav a:active{color: red;}
/* Responsive Styles
---------------------------------------------------------------------------------------------------- */

/* 

/* Large desktop */
@media (min-width: 1200px) { 

	/* Place any styles specific to large destop screens here */
.imageband li .fluid{
	width: auto !Important;
	height: 300px !Important;
}

}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { 

	/* Place any styles that are specific to tablets (portrait or landscape) and desktops here */

.imageband li .fluid{
	width: auto !Important;
	height: 179px !Important;
}

}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	
	/* Place styles that are specific to landscape phones here */
	
#about_nav li:first-child{
	margin-left: 200px;
}

	.imageband li .fluid{
		width: auto !Important;
		height: 100px !Important;
	
}
 
/* Landscape phones and down */
@media (max-width: 480px) { 
	
	/* Place any styles that are specific to mobile phones here */
	
	.imageband{
		display: none;
	}
	
	#pb{
		background-image: none;
		padding: 0px 0px 5px 7px; 
	}
	
	#nav li, #nav li:first-child{
	display: block;
	float: left;
	width: 100%;
	margin-left: 0;
	text-align: center;
	}
	
	#nav li.open .submenu {
		/* if the list item has class="open", show .submenu */
		display: block;
		position: static;
		top: auto;
		left: auto;
		width: 100%;
		margin:0;
		padding: 0;
	}
	
	#about_nav li, #about_nav li:first-child{
		display: block;
		float: left;
		width: 100%;
		margin-left: 0;
		text-align: center;
	}

	.fluidMap{
		display: none;
	}
	
	#footer li{
		display: block;
		float: left;
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
}