/* DA GRIDZZZZZ */

/*selecting the class attribute when it contains col- . Its going to apply the columns*/
[class*="col-"] {
	float: left;
	padding: 0.15em;
	text-align: left;
}

/* --------------------------------------------------*/
/* 4 column grid styles */ 
/* column used for the body sections of the site */
.col-1of4 {
	width: 25%;
}

/* column used for the buttons on the home page of the site */
.col-1of4button {
	width: 25%;
}

/* column used for the search bar */
/* 4 column grid styles */
.col-1of4search {
	width: 25%;
	float: right;
}

/* columns used for the navigation bar*/
/* 4 column grid styles */
.col-1of4nav {
	width: 25%;
}

/* used for body content that takes up 2 columns*/
.col-2of4 {
	width: 50%;
}

/* used for body content that takes up 3 columns*/
.col-3of4 {
	width: 75%;
}

/* columns used for content that takes up the entire width of the screen*/
.col-4of4 {
	width: 100%;
}

/* used for interactive maps, that take up 1/2 of the screen*/
.col-2of4intmap{
	width:50%;
	position:relative;
}

/* the np functions are used in the forms to create seamless sections without any padding/margins */
.col-1of4np {
	width: 25%;
	padding: 0;
	padding-left: 0.15em;
}

/* the np functions are used in the forms to create seamless sections without any padding/margins */
.col-2of4np {
	width: 50%;
	padding: 0;
}

/* the np functions are used in the forms to create seamless sections without any padding/margins */
.col-3of4np {
	width: 75%;
	padding: 0;
	padding-left: 0.15em;
}

/* after grids are done content is blank, display is blocks */
.grid:after {
	content:" ";
	display: block;
	clear: both; /* no floating elements are allowed on either the left or right side */
}
/* --------------------------------------------------*/


/* --------------------------------------------------*/
/* star means everything, */
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-box-sizing: border-box;
}
/* --------------------------------------------------*/

/* --------------------------------------------------*/
/* responsive stuff with media queries */
/* at 1300 pixels the quicklinks in park section become auto width */
@media (max-width: 1300px){
	.quicklinksp {
		width: auto;
	}
}

/* at 920 pixels the following columns stack ontop of each other */
@media (max-width: 920px){
	.col-1of4, .col-3of4, .col-4of4, .col-2of4, .col-1of4np, .col-3of4np, .col-2of4np, .col-2of4intmap { 
		width: 100%;
	}
/* at 920 pixels the buttons on the home page take up 1/3 of the screen */
	.col-1of4button{
		width: 33.33333333%;
	}
/* at 920 pixels the search bar & button take up 50% of the screen and the margins are changed to fit the new screen size */
	.col-1of4search{
		width: 50%;
		margin-top: -3em;
		margin-bottom: 0.3em;
	}
}

/* at 558 pixels the nav bars stack two over two*/
@media (max-width: 558px){
	.col-1of4nav{
		width: 50%;
		text-align: left;
	}

/* at 558 pixels buttons on the home page stack on top of each other taking up the full screen width*/
	.col-1of4button{
		width: 100%;
	}

/* at 558 pixels the search bar takes up the entire screen width*/
	.col-1of4search {
		margin-top: -3em;
	    width: 100%;
	}

/* at 558 pixels the drop down menus take up 50% of their width*/
	nav ul ul {
		width: 50%;
	}

/* at 558 pixels the search button is 20% of the screen width*/
	.searchbutton {
		width: 20%;
	}

/* at 558 pixels the search field is 78% of the screen*/
	.searchField {
		width: 78%;
	}
}

/* end of DA GRIDZ */
/* --------------------------------------------------*/