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

/** Define general page layout **/

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

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

#contents, #home-precontents1, #home-precontents2 {
	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 black;}

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

	#header-small {display: none;}
}

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

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

	#header-big   {display: none;}
}

@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;}
}

@media screen and (min-width: 620px) {
	.hide-for-narrow-header {display: inline;}
	.show-for-narrow-header {display: none;}
	.hide-for-narrow-header {display: inline;}
	.show-for-narrow-header {display: none;}
}

@media screen and (max-width: 619px) {
	.hide-for-narrow-header {display: none;}
	.show-for-narrow-header {display: inline;}
}

/** Menu general colors and layout **/

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

/* Menu formatting for everything but smart phones */

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

@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: white; }
.menu > li:hover {background:  black; }
.menu > li a:hover { color: #D4121A; }

.topbar a:hover,
body#home a#homenav:hover,
body#services a#servicesnav:hover,
body#directions a#directionsnav:hover,
body#specials a#specialsnav:hover,
body#webcam a#webcamnav:hover,
body#about a#aboutnav:hover
{
	color: #D4121A;
	background: gray;
	cursor: default;
}

body#home a#homenav,
body#services a#servicesnav,
body#directions a#directionsnav,
body#specials a#specialsnav,
body#webcam a#webcamnav,
body#about a#aboutnav {
	color: white;
	background: gray;
	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#auto #menu-small a#autonav:hover,
body#tires #menu-small a#tiresnav:hover,
body#rewards #menu-small a#rewardsnav:hover,
body#coupons #menu-small a#couponsnav:hover,
body#directions #menu-small a#directionsnav:hover,
body#about #menu-small a#aboutnav:hover {
	color: white;
	font-weight: bold;
	cursor: default;
}

body#home #menu-small a#homenav,
body#auto #menu-small a#autonav,
body#tires #menu-small a#tiresnav,
body#rewards #menu-small a#rewardsnav,
body#coupons #menu-small a#couponsnav,
body#directions #menu-small a#directionsnav,
body#about #menu-small a#aboutnav {
	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;
}