/* www.yourPropertyTracker.com Responsive Template v 1.2 */

/* MOBILE SIZE */
/* These are the mobile styles. It's what people see on their phones. */

/*MAIN MENU*/

/* Mobile Device Menu*/
.menu-toggle {
	display: block;
	padding: 10px;
	margin: 20px 0 0;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	transition: all 0.30s ease-in-out;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	background: #8492ae; /*Color of Menu Box when Off*/
	color: #fff;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 20px;
}

	.menu-toggle:hover {
		background: #445067;
	}

	.menu-toggle.toggled-on {
		background: #445067; /*Color of Menu Box when On, changed in color.css*/
	}

#topnav {
	margin: 0.1em 0 0 0;
}

.the-menu {
	display: none;
	clear: both;
	margin-bottom: 0px; /*Space between Bottom of Menu and Content*/
}

	.the-menu.toggled-on {
		display: block;
		position: relative;
		z-index: 10;
	}

	.the-menu li a {
		background: #445067; /*First Level Menu Background*/
		color: #fff; /*ALL Level Menu Font Color, OVERRIDDEN in color.css*/
		display: block;
		margin: 1px 0;
		padding: 5px 15px;
		text-decoration: none;
		-webkit-transition: all 0.30s ease-in-out;
		-moz-transition: all 0.30s ease-in-out;
		-o-transition: all 0.30s ease-in-out;
		transition: all 0.30s ease-in-out;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		-o-border-radius: 15px;
		border-radius: 15px;
		font-weight: 200;
	}

		.the-menu li a:hover {
			background: #000; /*ALL Level Menu Hover Background, OVERRIDDEN in color.css*/
			color: #fff; /*ALL Level Menu Hover Font*/
		}

	.the-menu li li a {
		width: 95%;
		float: right;
		background: #8492ae; /*Second Level Menu Background*/
	}

	.the-menu li li li a {
		width: 90%;
		float: right;
		background: #ccc; /*Third Level Menu Background*/
	}

/* LARGER MOBILE DEVICES */
/* This is for mobile devices with a bit larger screens. */

@media only screen and (min-width: 481px) {
	.menu-toggle { /*make menu float right, instead of sitting under the logo*/
		margin-top: 20px; /*this depends on the height of the logo*/
		float: right;
	}
}

/* TABLET, SMALLER LAPTOPS, PCs */
/* The average viewing window and preferred media query for those is 768px. */
/* But more breathing space is good. */

@media only screen and (min-width: 800px) {

	#topnav, .the-menu {
		float: right;
		margin: 1.0em 0 0 0;
	}

	.menu-toggle {
		display: none;
	}

	#menu-main-navigation {
		display: block;
	}

	.the-menu, .the-menu * {
		margin: 0;
		padding: 1px;
		list-style: none;
		/* Option Box Shadowing of Menu*/
		/*-webkit-box-shadow: 1px 1px 1px 1px rgba(00, 00, 00, .1);
		-moz-box-shadow: 1px 1px 1px 1px rgba(00, 00, 00, .1);
		box-shadow: 1px 1px 1px 1px rgba(00, 00, 00, .1);*/
	}

		.the-menu ul {
			position: absolute;
			display: none;
			width: 12em; /* left offset of submenus need to match (see below) */
		}

			.the-menu ul li {
				width: 100%;
			}

		.the-menu li:hover {
			visibility: inherit; /* fixes IE7 'sticky bug' */
		}

		.the-menu li {
			float: left;
			position: relative;
			margin-left: 1px;
		}

			.the-menu li li {
				margin-left: 0px;
			}

		.the-menu a {
			display: block;
			text-decoration: none;
			position: relative;
			color: #000; /*Menu Font when Not Selected, OVERRIDDEN in color.css*/
		}

		.the-menu li:hover ul,
		.the-menu li.sfHover ul {
			display: block;
			left: 0;
			top: 45px; /* match top ul list item height */
			z-index: 99;
		}

	ul.the-menu li:hover li ul,
	ul.the-menu li.sfHover li ul {
		top: -999em;
	}

	ul.the-menu li li:hover ul,
	ul.the-menu li li.sfHover ul {
		left: -12em; /* match ul width */
		top: 0;
	}

	ul.the-menu li li:hover li ul,
	ul.the-menu li li.sfHover li ul {
		top: -999em;
	}

	ul.the-menu li li li:hover ul,
	ul.the-menu li li li.sfHover ul {
		left: 10em; /* match ul width */
		top: 0;
	}

	/*** MENU COLORS ***/

		.the-menu li a {
			background: #fff; /*Menu Background when Not Selected*/
			color: #445057; /*Menu Font when not Selected*/
			margin: 0;
			padding: 10px 10px;
			height: 45px;
		}

		.the-menu li:hover > a,
		.the-menu li.current a {
			color: #fff; /*Top Menu Font when Hover*/
			background: #445057; /*Top Menu Background when Selected or Hover, OVERRIDDEN in color.css*/
		}

		/*Drop Down Menu*/
		.the-menu li li a {
			border-top: 1px solid rgba(255,255,255,.2);
			background: #666; /*fallback for old IE*/
			background: rgba(0,0,0,.6); /*Background, .6 is for Opaque*/
			padding-left: 20px;
			color: #fff; /*Menu Font when Not Selected*/
			height: auto;
		}

		.the-menu li li:hover > a {
			color: #fff; /*Sub Menu Font when Hover*/
			background: #000; /*Sub Menu Background when Hover*/
		}

		/*3rd Level Menu*/
		.the-menu li li li a,
		.the-menu li.current * li a {
			padding-left: 20px;
			background: rgba(0,0,0,.6); /*Background, .6 is for Opaque*/
		}
}