/**************************************************************************
Name:        nav.css
Description: Layout Navigation CSS definitions
Created:     Roxanne Martinez, 7/13/2011
Modified:    Roxanne Martinez, 7/19/2011
**************************************************************************/

@media all
{
	div.nav
	{
		height:       	  40px;
		float: 			  right;
		position: 		  relative;
		top: 			  3px;
		width: 			  100%;
		z-index:  		  9999;
	}

	_::-webkit-full-page-media, _:future, :root div.nav {
		top: 7px;
	}

	div.headerContent .column.span_3_4.navigation 
	{
		float: right;
	}

	div.nav.sticky
	{
		position: fixed;
		top: 	  0px;

		-webkit-box-shadow: 0px 2px 2px #999;
		   -moz-box-shadow: 0px 2px 2px #999;
		        box-shadow: 0px 2px 2px #999;
	}

	div.nav.newStore 
	{
		border-bottom: 0 solid transparent;
	}

	div.nav ul
	{
		position: absolute;
		width:    100%;
	}

	div.nav ul,
	div.nav li
	{
		margin:  0;
		padding: 0;
	}

	div.nav li
	{
		display: inline-block;
	}

	div.nav li.span_1_8 
	{
		width: 100%;
		width: -webkit-calc( 12.5% - 4px );
		width:    -moz-calc( 12.5% - 4px );
		width: 		   calc( 12.5% - 4px );
	}

	div.nav li.span_2_8 
	{
		width: 100%;
		width: -webkit-calc( 25% - 4px );
		width:    -moz-calc( 25% - 4px );
		width: 		   calc( 25% - 4px );
	}

	div.nav ul li.account,
	div.nav ul li.mobileSearch
	{
		display: none;
	}

	div.nav ul li.mobileSearch input.globalKeywords
	{
		background-color: #fefab7;
		border: none;
		font-size: 18px;
		height: 44px;
		margin: 0;
		padding-left: 30px;
    	padding-right: 45px;
	}
	
	/*div.nav ul li#header_receiptmanager 
	{ 
		float: right; 
		max-width: 191px;
		position: relative;
		top: -1px;
	}*/

	ul#contact 
	{ 
		min-width: 12.5%; 
		min-width: -webkit-calc( 100% / 7 - 5px ); 
		min-width: 	  -moz-calc( 100% / 7 - 5px ); 
		min-width: 		   calc( 100% / 7 - 5px );
	}

	ul#home      li { width: auto; min-width: 100px; }
	ul#locations li { width: auto; min-width: 150px; }
	ul#search    li { width: auto; min-width: 175px; }
	ul#services  li { width: auto; min-width: 175px; }
	ul#about     li { width: auto; min-width: 125px; }
	ul#contact   li { width: auto; min-width:  95px; }
	ul#receipt   li { width: auto; min-width: 170px; }

	div.nav ul li.span_1_7
	{
		width: 14.28%;
	    width: -webkit-calc( 100% / 7 - 3px );
	    width: -moz-calc( 100% / 7 - 3px );
	    width: calc( 100% / 7 - 3px );
	}

	/*div.nav ul li#header_receiptmanager a
	{
		background-color: #fef200;
		border: 		  1px solid #d0c703;
		border-radius: 	  5px;
		display: 		  block;
		height: 		  35px;
		left: 			  2px;
		line-height:  	  35px;
		position:  		  relative;
		
		width: 100%;
		width: -webkit-calc( 100% - 4px );
		width:    -moz-calc( 100% - 4px );
		width: 		   calc( 100% - 4px );
	}*/

	div.nav ul a
	{
		color:       	 #000;
		border: 		 1px solid transparent;
		display:  		 block;
		font-family: 	 MyriadProRegular, Helvetica, sans-serif;
		font-size:   	 18px;
		font-weight: 	 bold;
		height:      	 40px;
		line-height:  	 40px;
		text-align:  	 center;
		text-decoration: none;
	}

	div.nav ul li:hover a,
	div.nav ul li a:hover,
	div.nav ul li a.active
	{
		background-color: #fff;
		border: 		  1px solid #000;
		border-bottom: 	  none;

		box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.3);
	}

	div.nav ul li.noSubNav:hover a
	{
		border-bottom: 1px solid #fff;
	}

	div.nav ul li#header_receiptmanager:hover
	{
		background: transparent;
	}

	div.nav ul li#header_receiptmanager:hover a
	{
		background: 	  transparent;
		background-color: #FEF200;
	}

	div.nav ul li#header_receiptmanager a:hover,
	div.nav ul li#header_receiptmanager a.active
	{
		background-color: #fff;
	}

	div.nav ul li ul
	{
		background-color: rgba(255, 255, 255, 0.95);
		color:            #044388;
		display:          block;
		margin:           0;
		overflow: 		  auto;
		padding:          0;
		position:         absolute;
		top: 			  40px;
		z-index:          -1;
		width:            auto;
	}

	div.nav ul li:hover ul
	{
		border: 1px solid #000;

		-webkit-box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.3), 0 5px 5px -5px rgba(0, 0, 0, 0.3);
		   -moz-box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.3), 0 5px 5px -5px rgba(0, 0, 0, 0.3);
		        box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 0.3), 0 5px 5px -5px rgba(0, 0, 0, 0.3);
	}

	div.nav ul li ul li
	{
		background-color: transparent;
		border:  	 0;
		display: 	 block;
		float:   	 none !important;
		height:      0;
		line-height: 28px;
		margin:      0;
		max-width:   250px;
		overflow:    hidden;
		padding:     0;
		width:   	 auto;

		-webkit-transition: background-color 0.5s, border 0.5s, height 0.5s;
		   -moz-transition: background-color 0.5s, border 0.5s, height 0.5s;
				transition: background-color 0.5s, border 0.5s, height 0.5s;
	}

	div.nav ul li:hover ul li 
	{
		height: 44px;
	}

	div.nav ul li:hover ul li.borderBottom
	{
		border-bottom: 1px solid #999;
	}

	div.nav ul li ul li a
	{
		background:  	 transparent !important;
		color:           #000;
		font-size:       16px;
		font-weight:     bold;
		height:          auto;
		line-height:  	 44px;
		min-height:      44px;
		overflow: 		 hidden;
		padding:         0 15px;
		position:    	 relative;
		text-indent:     0;
		text-align:  	 left;
		text-decoration: none;
		text-overflow:   ellipsis;
		white-space:     nowrap;
		
		width: 100%;
		width: -webkit-calc( 100% - 30px );
		width:    -moz-calc( 100% - 30px );
		width: 		   calc( 100% - 30px );
	}

	div.nav ul li:hover ul li a,
	div.nav ul li ul li a:hover,
	div.nav ul li ul li a.active
	{
		border:  0 none;
	}

	div.nav ul li ul li:hover
	{
		background-color: #fef200;
	}

	div.hamburger
	{
		display: none;
		float: right;
	}

	#navIcon 
	{
		cursor:   pointer;
		float:    right;
		height:   25px;
		margin:   10px 0;
		position: relative;
		width: 	  35px;

		-webkit-transform: rotate(0deg);
		   -moz-transform: rotate(0deg);
			 -o-transform: rotate(0deg);
				transform: rotate(0deg);

		-webkit-transition: .25s ease-in-out;
		   -moz-transition: .25s ease-in-out;
			 -o-transition: .25s ease-in-out;
				transition: .25s ease-in-out;
	}

	#navIcon span 
	{
		display: 	   block;
		position: 	   absolute;
		height: 	   5px;
		width: 		   100%;
		background:    #000;
		border-radius: 5px;
		opacity: 	   1;
		left: 		   0;
	  
		-webkit-transform: rotate(0deg);
		   -moz-transform: rotate(0deg);
			 -o-transform: rotate(0deg);
				transform: rotate(0deg);

		-webkit-transition: .25s ease-in-out;
		   -moz-transition: .25s ease-in-out;
			 -o-transition: .25s ease-in-out;
				transition: .25s ease-in-out;
	}

	#navIcon span:nth-child(1) 							   { top:  0px; }
	#navIcon span:nth-child(2), #navIcon span:nth-child(3) { top: 10px; }
	#navIcon span:nth-child(4) 							   { top: 20px; }

	#navIcon.open span:nth-child(1) 
	{
		left:  50%;
		top:   15px;
		width: 0%;
	}

	#navIcon.open span:nth-child(2) 
	{
		-webkit-transform: rotate(45deg);
		   -moz-transform: rotate(45deg);
			 -o-transform: rotate(45deg);
				transform: rotate(45deg);
	}

	#navIcon.open span:nth-child(3) 
	{
		-webkit-transform: rotate(-45deg);
		   -moz-transform: rotate(-45deg);
		     -o-transform: rotate(-45deg);
				transform: rotate(-45deg);
	}

	#navIcon.open span:nth-child(4) 
	{
		left:  50%;
		top:   15px;
		width: 0%;
	}
}

/**************************************************************************
Tablet-specific Styles
**************************************************************************/

@media only screen and ( max-width: 1450px )
{
	div.nav ul li.span_1_7
	{
		width: 14.28%;
	    width: -webkit-calc( 100% / 6 - 30px );
	    width: -moz-calc( 100% / 6 - 30px );
	    width: calc( 100% / 6 - 30px );
	}

	div.nav ul li#header_receiptmanager
	{
		width: 150px;
	}
}

@media only screen and ( max-width: 1075px )
{
	div.headerContent .column.span_3_4.navigation 
	{
		width: 100%;
	}
}

@media only screen and ( max-width: 768px )
{
	div.headerContent .column.span_3_4.navigation 
	{
		border: 0;
		width: 100%;
	}

	div.headerRight
	{
		display: none;
	}

	div.hamburger
	{
		display: block;

		width: 100%;
		width: -webkit-calc( 100% - 117px );
		width:    -moz-calc( 100% - 117px );
		width: 		   calc( 100% - 117px );
	}

	div.nav 
	{
		height: auto;
	}

	div.nav ul.primary
	{
		background-color: rgba( 255, 255, 255, 0.95 );
		margin:   0;
		padding:  0;
		position: relative;
		overflow: auto;
		top:      -4px;
		right:    10px;
		width: 	  270px;
		z-index:  9999;

		width: 100%;
		width: -webkit-calc( 100% + 20px ); 
		width: 	  -moz-calc( 100% + 20px ); 
		width: 		   calc( 100% + 20px );
	}

	div.nav ul.primary li, 
	div.nav ul.primary ul.secondary li
	{
		background-color: transparent;
		border:        	  0;
		display: 		  block;
		float:         	  left;
		height:        	  0;
		overflow:  		  hidden;
		text-align:    	  left;
		
		width: 100%;
		width: -webkit-calc( 100% - 1px );
		width:    -moz-calc( 100% - 1px );
		width: 		   calc( 100% - 1px );

		-webkit-transition: border 0.25s, height 0.25s;
		   -moz-transition: border 0.25s, height 0.25s;
				transition: border 0.25s, height 0.25s;
	}

	div.nav ul.primary.active li
	{
		border-bottom: 1px solid #666;
		border-left:   1px solid #666;
		height: 	   44px; 
	}

	div.nav ul li a,
	div.nav ul ul li a,
	div.nav ul li#header_receiptmanager a 
	{
		border: 		 0;
		color: 			 #000;
		display: 		 block;
		font-size: 		 18px;
		font-weight: 	 bold;
		height: 	     44px;
		line-height:  	 44px;
		padding: 		 0 10px 0 30px;
		text-align: 	 left;
		text-decoration: none;
		width:           100%;

		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		
	}

	div.nav ul li:hover a,
	div.nav ul li a:hover,
	div.nav ul li a.active
	{
		background-color: transparent;
		border: 		  0;
		box-shadow: 	  none;
	}

	div.nav ul.primary ul.secondary
	{
		background-color: transparent;
		border: 		  0;
		list-style-type:  none;
		margin:           0;
		padding:          0 30px 0 50px;
		position: 		  relative;
		top: 			  0;
		z-index: 		  999999;
	}

	div.nav ul.primary ul.secondary li a 
	{
		padding: 0;
	}

	div.nav ul ul.hidden
	{
		display: none;
	}

	div.nav ul ul,
	div.nav ul ul li
	{
		background-color: transparent;
	}
	
	div.nav ul.active ul li
	{
		border: 0;
		height: 0; 
	}

	div.nav ul.primary.active li.showOverflow
	{
		overflow: visible;
	}
	
	div.nav ul.primary.active ul.secondary.active li
	{ 
		height: 44px; 
	}

	div.nav ul.primary.active ul.secondary.active li.borderBottom
	{
		border-bottom: 1px solid #999;
	}

	div.nav ul.active ul.active li:last-child
	{
		border-bottom: 0;
	}

	div.nav ul li.account 
	{
		border-top: 0;
		display: block;
	}

	div.nav ul li.mobileSearch
	{
		display: block;
	}

	div.nav ul.primary.active li.account
	{
		border-top: 1px solid #666;
	}

	div.nav ul li.account a
	{
		display: 	 inline-block;
		font-size: 	 16px;
		font-style:  italic;
		font-weight: normal;
		margin: 	 0 10px 0 30px;
		padding: 	 0;
		width: 	 	 auto;
	}

	div.nav ul li#header_receiptmanager
	{
		max-width: none;

		width: 100%;
		width: -webkit-calc( 100% - 1px );
		width:    -moz-calc( 100% - 1px );
		width: 		   calc( 100% - 1px );
	}

	div.nav ul li#header_receiptmanager a 
	{
		background-color: transparent;
		border: 		  0;
	}
}

/**************************************************************************
Wireless-specific Styles
**************************************************************************/
@media only screen and ( max-width: 568px )
{

}