@charset "utf-8";
/* CSS Document */

/* ----- GLOBAL NAV ----- */
/* i dont think this is used anymore. remove when there's time to test to make sure */
#globalNav {
	float:right;
	margin: 12px 0 0 0;
	padding: 0 0 0 65px;
}
	#globalNav a{
		font-weight:bold;
		display:inline;
		padding: 0 10px;
		font-size: 11px;
		text-decoration: none;
	}
	#globalNav a.active{
		color: #999;
	}
	#globalNav a:hover{
		text-decoration: underline;
	}

/* ----- MAIN NAV ----- */

#mainNav {
	height: 39px;
	background: url(../images/nav-background.jpg) 0 0 no-repeat;
	padding-left:53px;
	width:955px;
	position:relative;
	left: -15px;
	top:20px;
	z-index:99;
	margin-bottom: 39px;
	clear: both;
}
	#mainNav ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	#mainNav ul li {
		margin: 0;
		padding: 0;
		display: inline;
	}
	#mainNav a{
		width: 196px;
		height:39px;
		display:block;
		float:left;
		text-indent: -9999999px;
	}
	#mainNav a.products{
		background: url(../images/nav-products.jpg) 0 0 no-repeat;
		margin-right:42px;
	}
	#mainNav a.benefits{
		background: url(../images/nav-benefits.jpg) 0 0 no-repeat;
		margin-right:40px;
	}
	#mainNav a.uses{
		background: url(../images/nav-uses.jpg) 0 0 no-repeat;
		margin-right:37px;
	}
	#mainNav a.news{
		background: url(../images/nav-news.jpg) 0 0 no-repeat;
	}
	#mainNav a:hover{
		background-position: 0 -39px;
	}
	#mainNav a.active {
		background-position: 0 -78px;
	}

/* ----- SECONDARY NAV ----- */

#secondaryNav {
	background: #f8f8f8;
	margin-bottom: 20px;
}
    #secondaryNav .container {
        margin: 0 auto;
        width: 1170px;
    }
    @media (max-width: 1200px) {
        #secondaryNav .container {
            width: 980px;
        }
    } 
	#secondaryNav .navItem {
        border-bottom: solid 6px transparent;
        display: inline-block;
        line-height: 50px;
        font-size: 1.1em;
        text-transform: uppercase;
        font-weight: bold;
        color: #56524e;
        padding: 6px 20px 0 20px;
        -o-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
	}
	#secondaryNav .navItem:hover {
        color: #e21d46;
        border-bottom: 6px solid;
    	text-decoration: none;
    }
	#secondaryNav .navItem.active {
        color: #e21d46;
        border-bottom: 6px solid;
    }

/* ----- THIRD LEVEL NAV ----- */

#orderProcess,
.thirdNav {
	display: table;
	color: #ccc;
	margin: 0 -1px 0 0;
	width: 100%;
	padding: 0;
}
.thirdNav {
	margin: 0 0 24px 0;
	height: 38px;
}

ul.thirdNav {
	width: 100%;
	display: table;

}
#stepOne,
#stepTwo,
#stepThree,
#coppaVerifyStep,
.thirdNav li {
	display: table-cell;
	width: auto;
	text-align: center;
	border-right: solid 1px #fff;
	font-weight: bold;
	text-decoration: none;
	list-style: none;
	padding: 0;
	margin: 0;
}
	#stepOne span,
	#stepTwo span,
	#stepThree span,
	#coppaVerifyStep span,
	.thirdNav a {
		color: #767676;
		padding: 7px 0 9px 0;
		display: block;
		text-align: center;
		background: #ececec;
		border-top: solid 5px #cccccc;
		text-decoration: none;
	}
		.thirdNav a:hover {
			background: #e0e0e0;
			color: #444;
		}
		#orderProcess .active span,
		#orderProcess2 .active span,
		.thirdNav a.active {
            background: #e21d46;
            border-top-color: #bc042b;
            color: #fff;
		}
    
		#orderProcess .lessactive span,
		#orderProcess2 .lessactive span {
			color: #767676 !important;
			border-top: solid 4px #4a8a1f !important;
		}
 
@media print {
    #secondaryNav,
    .thirdNav {
        display: none !important;
    }
}