/* app.css - for Foundation Version 6.4.1 - 7/10/17 */

/** Define general page layout **/

body {
	background-image: url('/images/checkerboard1.jpg');
	background-repeat: repeat;
}

#container {
	line-height:135%;
	background: white;
	/*	background: yellow; Uncomment to check for leaks */
}

#contents {
	background: white;
}

/** Define responssive page transitions for header, menu and contents **/

@media screen and (min-width: 1041px) {
	div#container {margin: 20px 0px 20px;}
}

@media screen and (min-width: 768px) and (max-width: 1040px) {
	div#container {margin: 0px;}
}

@media screen and (min-width: 768px) {
	div#container {border: 3px solid #ED0000;}

	#contents {padding: 0px 30px 0px;}

	#header-small {display: none;}
	#fb-info-at-bottom {display: none;}
}

@media screen and (max-width: 767px) {
	div#container {margin: 0;}
	div#container {border: 2px solid #ED0000;}

	/* #contents {padding: 0px 10px 0px;} -- Caused overflow issue */

	#header-big   {display: none;}
	#fb-info-at-bottom {display: inline;}
}

@media screen and (min-width: 40em) {
	#menu-small {display: none;}
	#menu-big-center {padding: 0;}
}

@media screen and (max-width: 39.99em) {
	.title-bar {padding: 0.1rem 0.2rem;}

	#menu-big   {display: none;}
	#menu-small {background: #0a0a0a;}             /* Same background as .title-bar */
	#menu-small-center {padding: 0 0.5rem;}

	.top-bar-left {margin-left: 0;}
	.title-bar {justify-content: flex-start;}
	#menu-small-ul > li > a {font-size: 0.9rem; font-weight: normal; padding: 0.4rem 0.5rem;}
}

/** Menu general colors and layout **/

.top-bar, .top-bar ul, #menu-big.row, #menu-big-left, #menu-big-right { background-color: #DDDDDD; }
.top-bar { padding: 0.0rem; }

/* Menu formatting for everything but smart phones */

.menu { margin-top: 0; background: #DDDDDD;}
.menu > li {background: #DDDDDD;}

@media screen and (min-width: 900px) {
	.dropdown.menu > li > a {                       /* Override added for Version 6.4.3 */
		font-size: 1.0rem;
		padding: 0.4rem 0.8rem;
	}
}

@media screen and (min-width: 700px) and (max-width: 899px) {
	.dropdown.menu > li > a {                       /* Override added for Version 6.4.3 */
		font-size: 0.8rem;
		padding: 0.4rem 0.6rem;
	}
}

@media screen and (max-width: 699px) {
	.dropdown.menu > li > a {                       /* Override added for Version 6.4.3 */
		font-size: 0.75rem;
		padding: 0.4rem 0.5rem;
	}
}
.menu > li > a {font-weight: bold;}

.menu > li a { color: black; }
.menu > li:hover {background:  #DDDDDD; }
.menu > li a:hover { color: #ED0000; }

.topbar a:hover,
body#home a.homenav:hover,
body#services a.servicesnav:hover,
body#directions a.directionsnav:hover,
body#calendar a.calendarnav:hover,
body#webcam a.webcamnav:hover,
body#staff a.staffnav:hover
{
	color: black;
	cursor: default;
}

body#home a.homenav,
body#services a.servicesnav,
body#directions a.directionsnav,
body#calendar a.calendarnav,
body#webcam a.webcamnav,
body#staff a.staffnav
{
	color: white;
	background: #ED0000;
	cursor: default;
}

/* Unique menu formatting for smart phones **/

#menu-small .menu { margin-top: 0; background: black;}
#menu-small .menu > li {padding-left: 30px ; background: black;}

#menu-small .menu > li > a {font-weight: normal; margin: 1px 30px 1px 3px; padding: 5px 5px 5px 10px;}

#menu-small .menu > li a { color: white;}
#menu-small .menu > li:hover a {background: black; padding: 4px 4px 4px 9px; border-color: #D4121A; border-style: solid; border-width: 1px;}
#menu-small .menu > li:hover a {font-weight: bold;}

.topbar #menu-small a:hover,
body#home #menu-small a.homenav:hover,
body#services #menu-small a.servicesnav:hover,
body#directions #menu-small a.directionsnav:hover,
body#calendar #menu-small a.calendarnav:hover,
body#webcam #menu-small a.webcamnav:hover,
body#staff #menu-small a.staffnav:hover
{
	color: white;
	font-weight: bold;
	cursor: default;
}

.topbar #menu-small a,
body#home #menu-small a.homenav,
body#services #menu-small a.servicesnav,
body#directions #menu-small a.directionsnav,
body#calendar #menu-small a.calendarnav,
body#webcam #menu-small a.webcamnav,
body#staff #menu-small a.staffnav
{
	background:  gray;
	color: white;
	cursor: default;
}

/** Override Foundation's layout and spacing of lists and bullets **/

ul, ol, li, dl {
	font-size: 1rem;
	line-height: 1.2;
	list-style-position: outside;
}

/**  Override Foundation's color of hyperlink when hovering or in focus **/
a:hover, a:focus {
	color: blue;
}