﻿/*======================================================================
	SKELETON: Layout
----------------------------------------------------------------------*/
body
{
	font: 75% Arial, Verdana, Helvetica, Sans-serif;
	color: #333;
    background-color: #0077ba;
}

/*======================================================================
	STRUCTURE
----------------------------------------------------------------------*/
#main-container
{
	position: relative;
	background-color: #f3f3f3;
}

#body-container
{
    margin: 0 auto;
	width: 960px;
}

#wrap-out
{}

#wrap-in
{}

	.with-side-container #wrap-in
	{}

#side-container 
{
	margin-right: 20px;
	width: 230px;
	float: left;
}	

#content-container
{
	padding: 0;
	width: 960px;
	min-height: 420px;
	_height: 420px;
}

	.with-side-container #content-container
	{
		margin: 0;
		padding: 0 0 2em;
		width: 710px;
		min-height: 400px;
		_height: 400px;
		float: left;
	}

/*======================================================================
	HEADER
----------------------------------------------------------------------*/
#header-container {}
    #header-container .wl-section {
        margin: 0 auto;
    	width: 960px;
    }
    /*---------------------------------
    	HEADER
    ---------------------------------*/
    #header {
        height: 59px;
        background: url(../images/layout/bg_header.gif) repeat-x center bottom #0077ba;
    }
        #header ul {
            padding: 10px 0;
        }
            #header li {
                margin: 0;
                padding: 5px 0;
            }
                #header li a {
                    color: #fff;
                    text-decoration: none;
                }
                #header li a:hover {
                    text-decoration: underline;
                }
        #header .wl-section {
            height: 59px;
            background: url(../images/layout/bg_pageheader.png) no-repeat right top;
        }
        #header .contact-nav {
            margin: 0;
            float: left;
            list-style-type: none;
        }
            #header .contact-nav li {
                float: left;
                color: #fff;
                font-weight: bold;
            }
            #header .contact-nav li.phone-number {
                padding-right: 10px;
                border-right: 1px solid #2f8fc5;
            }
            #header .contact-nav li.contact-us {
                padding-left: 10px;
                border-left: 1px solid #046298; 
            }
        #header .utility-nav {
            padding-right: 6px;
            margin: 0;
            float: right;
            list-style-type: none;
        }
            #header .utility-nav li {
                position: relative;
                float: left;
                font-weight: bold;
            }
            #header .utility-login {
                padding-left: 17px;
                padding-right: 10px;
                border-right: 1px solid #2f8fc5;
            }
                #header .utility-login .ico {
                    position: absolute;
                    top: 6px;
                    left: 0;
                    height: 13px;
                    width: 11px;
                    background: url(../images/layout/sprite_global.png) no-repeat;
                    _overflow: hidden;
                    
                }
            #header .utility-register {
                padding-left: 10px;
                border-left: 1px solid #046298;
            }
        
    /*---------------------------------
    	LOGO
    ---------------------------------*/
	#logo
	{
	    position: relative;
	    top: -16px;
		width: 300px;
		float: left;
	}

		#logo a
		{
			display: block;
			float: left;
		}
	
	/*---------------------------------
		UTILITY
	---------------------------------*/
	#utility
	{
		padding-top: 1em;
		float: right;
	}

		/*-- USER --*/
		#user
		{
			margin-bottom: 1em;
			float: right;
			color: #666;
		}

			#user a,
			#user a:visited
			{
				color: #000;
			}
	
			#user a:hover
			{
				color: #fff;
			}
		
			#user a.first
			{
				margin-right: 5px;
				padding-right: 5px;
				border-right: 1px dotted #ccc;
			}
	
		/*-- UTILITY-NAV --*/
		#utility-nav
		{	
			padding-left: 20px;
			float: right;
			clear: both;
		}
			#utility-nav ul
			{
				margin: 0;
				list-style: none;
			}
		
				#utility-nav ul li
				{
					display: inline;
					margin: 0;	
					padding: 0 0.5em;
					border-right: 1px dotted #ccc;
				}	
			
					#utility-nav ul li.last
					{
						padding-right: 0;
						border: none;
					}
				
					#utility-nav ul li a
					{
						text-decoration: none;
						border-bottom: 1px solid #ccc;
					}
		
/*======================================================================
	NAVIGATION
----------------------------------------------------------------------*/
/*---------------------------------
	ACCESSIBILITY NAVIGATION
---------------------------------*/
#accessibility-nav
{
	position: absolute;
	left: -9999px;
	top: -9999px;	
}

/*---------------------------------
	PRIMARY NAVIGATION
---------------------------------*/
#primary-nav
{
	float: right;
}

	#primary-nav ul
	{
		margin: 0;
		float: left;
		list-style: none;
		background: url(../images/layout/bg_nav.png) no-repeat left top;
	}

		#primary-nav ul li
		{
			margin: 0;
			float: left;
			background: url(../images/layout/bg_nav.png) no-repeat right top;
		}
		#primary-nav ul li.current a {
		    background: url(../images/layout/bg_nav-selected.png) repeat-x right top;
		    color: #fff;
		}	
			#primary-nav ul li a
			{
				padding: 0 15px;
				height: 61px;
				line-height: 61px;
				font-size: 1.5em;
				float: left;
				text-decoration: none;
				color: #114a80;
				font-weight: bold;
			}
		
				#primary-nav ul li a:hover
				{
					text-decoration: underline;
				}
			
				#primary-nav ul li ul
				{
					display: none;
				}
				/*-- NAV ITEM IDs --*/
				/*
				#primary-nav ul li.navigation-item-UID a
				{
					width: 100px;
					background-image: url(../images/layout/nav_item-name.gif);	
				}
			
				#primary-nav ul li a:hover,
				#primary-nav ul li.current a,
				#primary-nav ul li.current a:hover
				{
					background-position: left -48px;
				}
				*/

/*---------------------------------
	BREADCRUMB NAVIGATION
---------------------------------*/
#breadcrumb-container
{
	margin-bottom: 10px;
	padding: 10px 24px 8px 18px;
	border-bottom: 1px solid #d5d5d5;
}
	#breadcrumb-container ul,
	#breadcrumb-container ul li
	{  
		margin: 0;
		padding: 0;
		display: inline;
	}
	
		#breadcrumb-container ul li a,
		#breadcrumb-container ul li a:visited,
		#breadcrumb-container ul li span
		{
			padding: 0 10px 0 6px;
			font-size: 0.833em;
			color: #999;
			border-right: 1px dotted #ccc;
		}

			#breadcrumb-container ul li.current a,
			#breadcrumb-container ul li.current a:visited,
			#breadcrumb-container ul li.current span
			{
				font-weight: bold;
				border: none;
			}
			
			#breadcrumb-container ul li a:hover
			{
				color: #000;
				text-decoration: underline;
				background: none;
			}
			
/*---------------------------------
	CHECKOUT NAVIGATION
---------------------------------*/
.checkout-progress 
{
	margin: 0.5em 0 1em;
}

	.checkout-progress h2
	{
		margin: 0;
		float: left;
	}
	
	ul.checkout-nav
	{
		margin: 0;
		width: 795px;
		float: left;
		list-style: none;
	}	

		.checkout-nav li
		{
			margin: 0;
			float: left;
		}
		
			.checkout-progress h2,
			.checkout-nav li a,
			.checkout-nav li span
			{
				padding: 0;
				height: 44px;
				display: block;
				font-size: 1px;
				text-indent: -9999px;
				background: transparent url(../images/layout/checkout-nav.png) 0 0 no-repeat;
			}
		
			/*-- HEADER -- */
			.checkout-progress h2
			{
				width: 165px;
			}	
			/*-- SIGN IN --*/
			.checkout-nav li.checkoutstart a,
			.checkout-nav li.checkoutstart span { width: 114px;	background-position: -165px 0; }
			.checkout-nav li.checkoutstart-current a,
			.checkout-nav li.checkoutstart-current span	{ background-position: -165px -44px; }
			.checkout-nav li.checkoutstart-complete a,
			.checkout-nav li.checkoutstart-complete span { background-position: -165px -88px; }	
			.checkout-nav li.checkoutstart-complete a:hover	{ background-position: -165px -132px; }
			
			/*-- ADDRESSES --*/
			.checkout-nav li.checkoutshippingaddressform a,
			.checkout-nav li.checkoutshippingaddressform span {	width: 137px; background-position: -279px 0; }
			.checkout-nav li.checkoutshippingaddressform-current a,
			.checkout-nav li.checkoutshippingaddressform-current span { background-position: -279px -44px; }
			.checkout-nav li.checkoutshippingaddressform-complete a,
			.checkout-nav li.checkoutshippingaddressform-complete span { background-position: -279px -88px;	}	
			.checkout-nav li.checkoutshippingaddressform-complete a:hover {	background-position: -279px -132px; }
			
			/*-- SHIPPING --*/
			.checkout-nav li.checkoutshippingmethodform a,
			.checkout-nav li.checkoutshippingmethodform span { width: 128px; background-position: -416px 0; }
			.checkout-nav li.checkoutshippingmethodform-current a,
			.checkout-nav li.checkoutshippingmethodform-current span { background-position: -416px -44px; }
			.checkout-nav li.checkoutshippingmethodform-complete a,
			.checkout-nav li.checkoutshippingmethodform-complete span { background-position: -416px -88px; }	
			.checkout-nav li.checkoutshippingmethodform-complete a:hover { background-position: -416px -132px; }
		
			/*-- BILLING --*/
			.checkout-nav li.checkoutpaymentform a,
			.checkout-nav li.checkoutpaymentform span {	width: 109px; background-position: -544px 0; }
			.checkout-nav li.checkoutpaymentform-current a,
			.checkout-nav li.checkoutpaymentform-current span {	background-position: -544px -44px; }
			.checkout-nav li.checkoutpaymentform-complete a,
			.checkout-nav li.checkoutpaymentform-complete span { background-position: -544px -88px; }	
			.checkout-nav li.checkoutpaymentform-complete a:hover { background-position: -544px -132px; }
			
			/*-- REVIEW --*/
			.checkout-nav li.checkoutorderreview a,
			.checkout-nav li.checkoutorderreview span {	width: 115px; background-position: -653px 0; }
			.checkout-nav li.checkoutorderreview-current a,
			.checkout-nav li.checkoutorderreview-current span { background-position: -653px -44px; }
			.checkout-nav li.checkoutorderreview-complete a,
			.checkout-nav li.checkoutorderreview-complete span { background-position: -653px -88px; }	
			.checkout-nav li.checkoutorderreview-complete a:hover { background-position: -653px -132px; }
			
			/*-- ORDER COMPLETE --*/	
			.checkout-nav li.checkoutorderconfirmation span { width: 192px; background-position: -768px 0; }
			.checkout-nav li.checkoutorderconfirmation-current a,
			.checkout-nav li.checkoutorderconfirmation-current span { background-position: -768px -44px; }
			.checkout-nav li.checkoutorderconfirmation-complete a,
			.checkout-nav li.checkoutorderconfirmation-complete span { background-position: -768px -88px; }	
			.checkout-nav li.checkoutorderconfirmation-complete a:hover { background-position: -768px -132px; }

/*---------------------------------
	WIDGET NAVIGATION
---------------------------------*/
.widget-navigation
{
	margin-bottom: 3em;
	padding: 0.5em 5px 1em;
	background-color: #f4f4f4;
	border: 1px solid #e5e5e5;
}
	.widget-navigation h2
	{
		margin: 0;
		padding: 0 5px 0.2em;
		border-bottom: 1px dotted #ccc;
	}
	
	.widget-navigation ul
	{
		margin: 0;
		_height: 1%;
		list-style: none;
	}
	
		.widget-navigation ul li
		{
			margin: 0;
			padding: 0;
		}
		
			.widget-navigation ul li a
			{
				padding: 0.5em 10px 0.5em 10px;
				display: block;
				text-decoration: none;
				color: #666;
				border-bottom: 1px solid #e5e5e5;
			}
			
			.widget-navigation ul li a:hover
			{
				color: #fff;
				background-color: #000;
			}
			
				.widget-navigation ul li.current a
				{
					color: #000;
					font-weight: bold;
				}
				
				.widget-navigation ul li.current a:hover
				{
					color: #000;
					background: none;
				}
				
				.widget-navigation ul li ul
				{
					padding-left: 1em;
				}

/*---------------------------------
	WIDGET FILTERS
---------------------------------*/
.widget-filters
{
	margin: 2em 5px 1em;	
}

	.widget-filters h3
	{
		margin: 0;
		padding: 0 5px 0.2em;
		border-bottom: 1px dotted #ccc;
	}

	.widget-filters ul
	{
		margin: 0 0 1.5em;
		list-style: none;
	}

	.widget-filters .selected-filters
	{
		margin: 1.5em 0;
		padding: 0.5em 5px;
		background-color: #f6f6f6;
		border: 1px solid #e7e7e7;
	}
	
		.widget-filters .selected-filters h3
		{
			margin-bottom: 0;
		}
		
		.widget-filters .selected-filters ul
		{
			margin: 0;
			padding: 10px;
			background-color: #fff;
		}
		
			.widget-filters .selected-filters ul li
			{
				margin: 0.25em 0;
			}
			
			.widget-filters .selected-filters span
			{
				width: 130px;
				float: left;
			}
			
			.widget-filters .selected-filters a
			{
				margin-top: 2px;
				padding-left: 5px;
				float: right;
				font-size: 0.833em;
				text-transform: uppercase;
				text-decoration: none;
				border-left: 1px solid #dadada;
			}
			
				.widget-filters .selected-filters a span
				{
					width: auto;
					float: none;
				}

	.widget-filters .available-filters div.collapsed ul
	{
		display: none;
	}
		.widget-filters .filter li
		{
			margin: 0;
		}
			.widget-filters .filter li a,
			.widget-filters .filter li.filter-more span
			{
				padding: 0.4em 10px;
				display: block;	
				border-bottom: 1px solid #ddd7ca;
				cursor: pointer;
			}
			.widget-filters .filter li.filter-more span
			{
				font-weight: bold;
			}
		
				.widget-filters .filter li.current a
				{
					margin-left: 10px; 
					text-decoration: none;
					color: #757575;
					border-left: 1px solid #ccc;	
				}	
				
				.widget-filters .filter li.current a:hover
				{
					color: #757575;
					background: none;
				}
			
	.widget-filters .filters-showall a
	{
		display: block;
		padding: 0.25em;
		font-size: 1.1em;
		font-weight: bold;
	}
			
/*---------------------------------
	WIDGET RECENTLY VIEWED
---------------------------------*/
.widget-recentlyviewed
{
	margin: 2em 5px 1em;	
}

	.widget-recentlyviewed h3
	{
		margin: 0;
		padding: 0 5px 0.2em;
		font-size: 1em;
		font-style: normal;
		border-bottom: 1px dotted #ccc;
	}

	.widget-recentlyviewed .u-miscellaneous-recentlyviewedblock ul
	{
		margin: 0 0 1.5em;
		list-style: none;
	}

	.widget-recentlyviewed .u-miscellaneous-recentlyviewedblock li
	{
		margin: 0;
	}
	
		.widget-recentlyviewed .u-miscellaneous-recentlyviewedblock li a
		{
			padding: 0.4em 10px;
			display: block;	
			border-bottom: 1px solid #ddd7ca;
			cursor: pointer;
		}

	/*-- WITH IMAGE --*/
	.widget-recentlyviewed .u-miscellaneous-recentlyviewedblock li.item-with-image span.image
	{
		display: block;
		float: left;
	}
		
		.widget-recentlyviewed .u-miscellaneous-recentlyviewedblock li.item-with-image span.image img
		{
			display: block;
		}
		
	.widget-recentlyviewed .u-miscellaneous-recentlyviewedblock li.item-with-image span.name
	{
		display: block;
		margin-left: 35px;
	}
			
/*======================================================================
	FOOTER
----------------------------------------------------------------------*/
#footer-container
{
    margin: 0 auto;
	padding-top: 12px;
	background: url(../images/layout/bg_header.gif) repeat-x scroll center top #0077BA;
	clear: both;
}
    #footer-container ul {
        list-style-type: none;
        margin: 0;
        color: #fff;
    }
        #footer-container ul a {
            color: #fff;
            text-decoration: none;
        }
        #footer-container ul a:hover {
            text-decoration: underline;
        }
	#footer-container .footer {
	    margin: 0 auto;
	    padding-top: 20px;
	    padding-bottom: 84px;
	    width: 960px;
	    background: url(../images/layout/bg_pagefooter.png) no-repeat right top;
	}
	    #footer-container .footer ul {}
	        #footer-container .footer ul li {
	            margin: 0;
	        }
	    #footer-container .footer .contact {
	        float: left;
	    }
	    #footer-container .footer .utility {
	        float: right;
	    }
	        #footer-container .footer ul.utility li {
	            margin-right: 10px;
	            padding-right: 10px;
	            border-right: 1px solid #fff;
	        }
	        #footer-container .footer ul.utility li.termsofuse {
	            margin-right: 0;
	            padding-right: 0;
	            border-right: none;
	        }
	        #footer-container .footer ul li {
	            margin-right: 20px;
	            float: left;
	        }
	#footer-container .email-signup,
	#footer-container .email-signup .u-emaillist-emaillistform
	{
		float: left;
	}
	
		#footer-container .email-signup .u-emaillist-emaillistform * 
		{
			display: inline;
		}
		
		#footer-container .email-signup label.primary span.required
		{
			display: none;
		}
		
		#footer-container .email-signup input.input-text
		{
			margin-left: 2px;
			padding-top: 2px;
			padding-bottom: 2px;
			width: 160px;
		}

	#footer-container .footer p
	{
		float: right;
		font-size: 0.833em;
		color: #666;
	}

/*======================================================================
	LAYOUT: Account
----------------------------------------------------------------------*/
.l-account
{}

/*======================================================================
	LAYOUT: Cart 
----------------------------------------------------------------------*/
.l-cart
{}

/*======================================================================
	LAYOUT: Cart Items (with cart summary)
----------------------------------------------------------------------*/
.l-cartitems
{}

	/*-- CART CONTAINER --*/
	.l-cartitems #cart-container
	{
		margin: 0 20px 2em 0;
		width: 230px;
		float: left;
	}
	
		.l-cartitems #cart-container h2
		{
			margin: 0;
			padding: 0.5em 0 0.2em;
			text-align: center;
			background-color: #e5e5e5;
		}
		
	/*-- CONTENT CONTAINER --*/
	.l-cartitems #content-container
	{
		margin: 0;
		padding: 0 0 2em;
		width: 710px;
		min-height: 400px;
		float: left;
	}

/*======================================================================
	LAYOUT: Checkout
----------------------------------------------------------------------*/
.l-checkout
{}

/*======================================================================
	LAYOUT: Checkout Items (with cart summary)
----------------------------------------------------------------------*/
.l-checkoutitems
{}

	/*-- CART CONTAINER --*/
	.l-checkoutitems #cart-container
	{
		margin: 0 20px 2em 0;
		width: 230px;
		float: left;
	}
	
		.l-checkoutitems #cart-container h2
		{
			margin: 0;
			padding: 0.5em 0 0.2em;
			text-align: center;
			background-color: #e5e5e5;
		}
		
	/*-- CONTENT CONTAINER --*/
	.l-checkoutitems #content-container
	{
		margin: 0;
		padding: 0 0 2em;
		width: 710px;
		min-height: 400px;
		float: left;
	}
	
		.l-checkoutitems #content-container div.actionlist
		{
			padding: 0;
			border: none;
		}
		
			.l-checkoutitems #content-container ul.actions li.action-primary
			{
				margin: 0;
				float: none;
			}
			
				/* TODO: add input.image class, figure out why position relative is needed for IE */
				.l-checkoutitems #content-container ul.actions li.action-primary input
				{
					position: relative;
				}
			
				.l-checkoutitems #content-container ul.actions li.action-primary a:hover
				{
					background: none;
				}
		
				.l-checkoutitems #content-container ul.actions li.action p
				{
					margin: 0;
				}

/*======================================================================
	LAYOUT: Homepage
----------------------------------------------------------------------*/
.l-homepage
{}

	.l-homepage #content-container
	{
		padding-left: 0;
		padding-right: 0;
		min-height: 0;
	}

/*======================================================================
	LAYOUT: No Side Navigation
----------------------------------------------------------------------*/
.l-nosidenavigation
{}

/*======================================================================
	LAYOUT: Popup
----------------------------------------------------------------------*/
.l-popup
{}

/*======================================================================
	LAYOUT: Side Navigation
----------------------------------------------------------------------*/
.l-sidenavigation
{}