nav {
	&.affix + .nav-spacer { height: 69px; }
	.support-block { display: none; }
	&.affix {
		box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4),
					0 4px 0 rgba(0,0,0,0.05);
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
	}
	&.navbar {
		background-color: #EFF4F9;
		border-bottom: 1px solid rgba(0,0,0,0.3);
		border-radius: 0;
		border-top: 1px solid rgba(0,0,0,0.3);
		padding: 14px 10px 0;
		margin-bottom: 0;

		.navbar-nav {
			margin-bottom: 21px;

		}
	}
	.logo {
		background-image: url($image-base + '/logos/snappy-logo_default_mobile.png');
		background-position: center;
		background-repeat: no-repeat;
		height: 43px;
		margin-bottom: 10px;
		width: 170px;
	}
	.navbar-brand { padding: 10px; }
	.navbar-nav > li > .dropdown-menu {
		border-top: none;
		border-radius: 0;
		left: 0;
		margin: 0;
		padding: 0;
		right: inherit;

		li {

			a {
				color: $white;
				display: block;
				font-weight: 200;
				padding: 12px 50px 12px 12px;
			}
			a:hover { background-color: $color2; }
		}
		li:last-child { border-bottom: none; }
	}
	span.glyphicon-chevron-down { font-size: 8px; }
}
.navbar-default {
	.navbar-collapse {
		border-color: transparent;
		max-height: inherit;
	}
	.navbar-toggle {
		background-color: transparent;
		border: none;
		margin: 0;

		.icon-bar {
			background-color: $color2-light;
			height: 4px;
			width: 30px;
		}
		.icon-bar + .icon-bar { margin-top: 6px; }
	}
	.navbar-toggle:hover,
	.navbar-toggle:active,
	.navbar-toggle:focus { background-color: transparent; }

	.navbar-nav > li > a {
		color: $color2;
		font-size: 18px;
		font-weight: 700;
		text-decoration: none;

		&.dropdown-toggle {
			text-decoration: none;
		}
		&.dropdown-toggle:active,
		// &.dropdown-toggle:hover,
		&.dropdown-toggle:focus { color: $color2; }
	}
	.navbar-nav > li > a:hover {
		color: $color2;
		text-decoration: underline;
	}
	.navbar-nav .open .dropdown-menu > li { padding: 6px 0 6px 0; }
	.navbar-nav .open .dropdown-menu > li > a {
		color: $color2-light;
		text-decoration: none;
	}
	.navbar-nav .open .dropdown-menu > li > a:hover {
		color: $color2-light;
		text-decoration: underline;
	}
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	color: $color2;
	background-color: transparent;
}

.mobile-nav-container {
	background-color: #EFF4F9;
	border-bottom: 1px solid rgba(0,0,0,0.3);
	border-top: 1px solid rgba(0,0,0,0.3);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4),
				0 4px 0 rgba(0,0,0,0.05);
	padding: 14px 10px;
	position: relative;
}

.mobile-menu {
	background-color: transparent;
	border: none;

	.icon-bar {
		background-color: $color2;
		display: block;
		width: 32px;
		height: 4px;
		border-radius: 1px;
	}
	.icon-bar + .icon-bar { margin-top: 6px; }
}



a.mobile_navigation_support {
	background-color: #0A4880;
	background-image: url($image-base + '/template/snappy_phone_small.jpg');
	background-position: 180px 0;
	background-repeat: no-repeat;
	display: block;
	text-align: left;
}
a.mobile_navigation_support:hover {
	text-decoration: none !important;
}
a.mobile_navigation_support h2 {
	color: #FFFFFF;
	font-size: 18px;
	font-weight: 800;
	padding: 10px 0 0 30px;
}
a.mobile_navigation_support h4 {
	color: #FFCB08;
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	padding: 5px 0 10px 30px;
}
.mobile-menu:focus { outline: none; }
h1.menu-header {
	color: $color2;
	background-color: #EFF4F9;
	border: 1px solid #6F98BD;
	border-right: none;
	font-size: 18px;
	font-weight: 200;
	margin-bottom: 0;
	padding: 21px 0 21px 21px;
	position: relative;
	text-align: left;
}
h1.menu-header {
	span {
		background-image: url($image-base + '/nav/mobile_nav-sprite.png');
		background-repeat: no-repeat;
		bottom: 0;
		border-left: 1px solid #6F98BD;
		border-right: 1px solid #6F98BD;
		position: absolute;
		right: 0;
		top: 0;
		width: 60px;

		a {
			display: block;
			height: 100%;
		}
		&#customer-portal_mobile {
			background-position: -20px 19px;
			border: 0;
		}
		&#call-support_mobile {
			background-position: 20px 19px;
			right: 60px;
		}
	}
	span:hover { background-color: #FAFAFA; }
}
.sign-in_container {
	bottom: 0;
	left: 0;
	right: 0;
	color: #FFFFFF;
	position: fixed;
}
.sign-in_container {
	.btn-default {
		display: block;
		font-size: 18px;
		margin: 16px;
	}
}

@media (min-width: 768px) {
	header {
		
		.container { position: relative; }
		&:after {
			content: "";
			position: absolute;
			height: 58px;
			background-color: $color2-light;
			box-shadow: inset 0 4px 1px rgba(0,0,0,0.3),
						0 4px 0 rgba(0,0,0,0.05);
			top: 73px;
			width: 100%;
		}
	}
	nav {
		height: 74px;

		&.affix {
			box-shadow: none;
			position: relative;
			
			+ .nav-spacer { height: 57px; }
		}
		&.navbar {
			padding-top: 0;

			&>.container {
				.navbar-brand { margin-top: 14px; }
			}
		}
		.support-block {
			display: block;
			height: 73px;
			position: absolute;
			right: 0;
			top: 0;
			width: 390px;

			ul {
				list-style-type: none;
				text-align: right;
				margin: 7px 92px 7px 0;

				li {
					font-size: 12px;	
					font-weight: 100;

					&:nth-child(2) {
						font-size: 16px;
						margin-top: 3px;

						span {
							color: $color3;
							font-weight: 400;
						}
					}
					a {
						font-weight: 300;
						text-decoration: underline;
					}
					#support-number:after {
						content: "96-GATOR";
						cursor: pointer;
					}
					#support-number.text:after {
						content: "964-2867";
						cursor: pointer;
					}
				}
			}
			.chat-block {
				background-color: $white;
				border-radius: 8px;
				box-shadow: 0 1px 2px rgba(0,0,0,0.2);
				height: 58px;
				font-size: 10px;
				margin: 7px;
				text-align: center;
				width: 63px;

				&:hover {
					box-shadow: 0 1px 2px rgba(0,0,0,0.35);
				}
				.chat-icon {
					background-color: $color2-light;
					background-image: url($image-base + '/nav/chat-icon.png');
					background-repeat: no-repeat;
					background-position: center;
					border-top-left-radius: 8px;
					border-top-right-radius: 8px;
					height: 41px;
					margin-bottom: 2px;
					width: 100%;	
				}
			}
		}
		.navbar-nav {
			text-align: center;
			width: 100%;
			z-index: 1;

			> li {
				display: table-cell;
				float: none;
				vertical-align: middle;
				width: 1%;

				.dropdown-menu {
					background-color: $color2-light;

					a:hover { background-color: $color2; }
					li a { padding: 18px 50px 18px 12px; }
				}
			}
		}
		&.navbar .navbar-nav {
			margin-bottom: 0;

			a.dropdown-toggle:active { color: $color4; }
		}
		.navbar-header { float: none; }
		.logo { margin-bottom: 15px; }
	}
	.navbar-default {
		.navbar-toggle:hover,
		.navbar-toggle:active,
		.navbar-toggle:focus { background-color: transparent; }
		.navbar-nav > li.dropdown a { padding-bottom: 18px; }
		.navbar-nav > li.dropdown.open {
			background-color: $color2-light;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;

			a {
				color: $white;
			}
			a:hover { color: $white; }
		}
		.navbar-nav { 
			&.shared a[href="/shared"],
			&.resellers a[href="/resellers"],
			&.vps-hosting a[href="/vps-hosting"],
			&.dedicated a[href="/dedicated"],
			&.windows a[href="/windows"],
			&.affiliates a[href="/affiliates"] { border-color: $color1; }
			> li { 
				padding: 19px 0 17px;

				&.active {
					a {
						border-bottom: 2px solid $color1;
						background-color: transparent;
						color: $white;

						&:hover {
							background-color: transparent;
							color: $white;
						}
					}
				}
				> a {
					border-bottom: 3px solid transparent;
					color: $white;
					display: inline;
					font-size: 13px;
					font-weight: 300;
					padding: 0 0 2px;
					text-decoration: none;

					&:hover,
					&:focus {
						border-color: $color1;
						color: $white;
					}
				}
			}
		}
		.navbar-nav > li > a:hover {
			color: $white;
			text-decoration: none;
		}
		.navbar-nav .open .dropdown-menu {
			border: 1px solid $color2;
			border-top: none;
		}
		.navbar-nav .open .dropdown-menu > li {
			border-bottom: 1px solid $color2;
			padding: 0;
		}
		.navbar-nav .open .dropdown-menu > li:last-child { border-bottom: none; }
		.navbar-nav .open .dropdown-menu > li > a {
			color: $white;
			text-decoration: none;
		}
		.navbar-nav > li > a:focus {
			background-color: transparent;
			outline: 0;
		}
		.navbar-nav .open .dropdown-menu > li > a:hover,
		.navbar-nav .open .dropdown-menu > li > a:active,
		.navbar-nav .open .dropdown-menu > li > a:focus {
			background-color: $color2;
			color: $white;
			text-decoration: none;
		}
	}
}

@media (min-width: 992px) {
	header:after {
		height: 57px;
		top: 105px;
	}
	nav {
		height: 50px;

		&.affix { position: relative; }
		.logo {
			background-image: url($image-base + '/logos/snappy-logo_default.png');
			height: 74px;
			width: 339px;
		}
		.navbar-nav > li > .dropdown-menu li { background-color: $color2-light; }
		.support-block {
			top: 14px;

			.chat-block {
				font-size: 12px;
				height: 100%;
				margin: 2px 7px 2px 12px;
				width: 70px;

				.chat-icon {
					height: 52px;
				}
			}
			ul {
				li { font-size: 14px; }
			}
		}
	}
	.navbar-default {
		.navbar-nav {
			> li {
				padding-top: 20px;

				> a {
					font-size: 14px;
					padding-bottom: 3px;

					&.dropdown-toggle { padding-bottom: 24px; }
				}
			}
		}
	}
	.navbar-nav { 
		> li { 
			> a {
				font-size: 16px;
			}
		}
	}
}