@charset "UTF-8";
/*
NOTE TO DEVELOPER/DESIGNERS:
New menu system has more extensive use of CLASSES. Try to style using classes rather than IDs.

Date            User    Action(s)                                      
----------------------------------------------------
2013-09-13      ITAZC   CREATED: New File to manage global navigation
                        ADDED: Basic properties to govern general layout of navigation
2013-09-16      ITAZC   CHANGED: WAS using ID's to style. NOW using classes. Cleaner, more generalised and less of a hazard to overwrite when required.
2013-09-17      ITAZC   ADDED: z-index properties to primary, secondary and tertiary navs (primary highest, tertiary lowest) to eliminate the possibility of layering problems when dropdowns are triggered.
2013-09-26      ITAZC   REMOVED: background colour from .globalFooter (should be up to respective titles)
                ITAZC   ADDED: Better footer sprite graphic coordinates and alignments (new "footerLogos.png" graphic uploaded)
2013-10-02      ITAZC   ADDED: width to globalFooter class, width to be overridden by repective titles.
*/

#accountList li {
    padding: 0 12px 0 0;
}
header,
footer,
nav {
	display: block;
    margin: 0;
    padding: 0;
}
nav ul {
	list-style: none;
}
/*--------------------------- 
Main Navigation <nav> Structure
---------------------------*/
.headerNav {
    position: relative;
    z-index: 500;
    display: block;
    clear: both;
}
.headerNav ul,
.headerNav li {
	list-style: none;
    margin: 0;
    padding: 0;	
}
/*--------------------------- 
Main Navigation <ul> Structure
---------------------------*/
.mainNav:before,
.mainNav:after {
    display: table;
    content: " ";
}
.mainNav:after {
    clear: both;
}
.mainNav {
    zoom: 1;
    width: 100%;
    position: relative;
    /* .primaryNav, .secondaryNav and .tertiaryNav each have a z-index property to prevent layering problems */
}
.mainNav a {
	display: block;
	text-decoration: none;
}
.mainNav a:hover,
.mainNav a:focus {
	text-decoration: underline;
}

    /*--------------------------- 
    Top Level Lists
    ---------------------------*/  
    .mainNav > li {
    	position: relative;
    	float: left;
    	margin: 0 10px;
    }
    .mainNav > li > a {
        text-decoration: none;
        padding: 0;
        margin: 0;
        line-height: 30px;
        white-space: nowrap;
    }
    .mainNav > li > a:hover,
    .mainNav > li > a:focus {
        text-decoration: none;
    }
    .mainNav > li:hover,
    .mainNav > li:focus {
        /* in case you want to style a persistent hover state for top-level list items to remain when the mouse has moved to the sub-menu (drop down) */
    }

    /*--------------------------- 
    Dropdown (Sub) Navigation Column Container (and Column Widths)
    ---------------------------*/
    .mainNav .navColumnContainer {
        /* hide menu initially */
    	position: absolute;
    	left: 0;
    	top: auto;
    	background: #fff none;
    	box-shadow: 0 0.25em 0.25em rgba(0,0,0,0.3);
        *display: none; /* IE7 */
        *zoom: 1; /* IE7 */
        visibility: hidden;
        opacity: 0;
        overflow: auto; /* contain child floats */
        -webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
        -webkit-transition-delay: .4s;
        -moz-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
        -moz-transition-delay: .4s;
        -ms-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
        -ms-transition-delay: .4s;
        -o-transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
        -o-transition-delay: .4s;
        transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
        transition-delay: .4s;
    }
    .mainNav li:hover > .navColumnContainer,
    .mainNav li:focus > .navColumnContainer {
        /* show menu on hover event */
        *display: block; /* IE7 */
        visibility: visible;
        opacity: 1;
    }
    .mainNav .navColumnSize1 {
        width: 200px;
        z-index: 9999;
    }
    .mainNav .navColumnSize2 {
        width: 400px;
    }
    .mainNav .navColumnSize3 {
        width: 600px;
    }
    .mainNav .navColumnSize4 {
        width: 800px;
    }
    /*--------------------------- 
    Dropdown (Sub) Navigation Column
    ---------------------------*/
    .mainNav .navColumn {
        float: left;
        width: 169px;
        margin: 15px; /* width + margins = total 200px width, per column */
        *padding: 0 0 15px; /* IE7, which doesn't respect bottom-margin in this situation */
    }
    .mainNav .navGroup {
        margin: 10px 0 15px;
    }
    .mainNav .navColumnContainer .categoryHeading,
    .mainNav .navColumnContainer .categoryHeading a,
    .mainNav .navColumnContainer .subCategoryHeading,
    .mainNav .navColumnContainer .subCategoryHeading a {
        font-weight: bold;
    }

    /*--------------------------- 
    Primary (Top) Navigation Specific
    ---------------------------*/
    .primaryNav {
    	z-index: 650; /* top: above secondary and tertiary navs, to prevent dropdown layering issues. */
    }

    /*--------------------------- 
    Secondary (Top) Navigation Specific
    ---------------------------*/
    .secondaryNav {
        z-index: 600; /* middle; below primary but above tertiary nav, to prevent dropdown layering issues. */
    }

    /*--------------------------- 
    Tertiary (Top) Navigation Specific
    ---------------------------*/
    .tertiaryNav {
    	z-index: 550; /* bottom; below primary and secondary nav, to prevent dropdown layering issues. */
    }

/*--------------------------- 
Global Footer <footer>
---------------------------*/
.globalFooter {
	width: 1000px;
    display: block;
    clear: both;
    text-align: center;
    margin: 0 auto !important;
    font-size: 12px;
    float: none;
    font-weight: bold;
}
.globalFooter a {
	text-decoration: none;
    padding: 0;
    font-weight: bold;
}
.globalFooter a:hover,
.globalFooter a:focus {
    text-decoration: underline;
}
.globalFooter ul,
.globalFooter li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.globalFooter nav {
    text-align: center;
    margin: 0 0 0.5em;
    padding: 0.5em;
}
.globalFooter nav li {
	display: inline;
	margin: 0 5px;
}
.globalFooter nav a {
    padding: 0 0.75em;
}

/*--------------------------- 
Logo Container Area
---------------------------*/
.logoContainer {
	clear: both;
	float: none;
	margin: 1em 10px 0;
	overflow: auto;
	text-align: left;
}
    .logoContainer p {
        margin: 0 0 0.5em;
    }
    .logoContainer ul {
        overflow: auto;
    }
    .logoContainer li {
        float: left;
        margin: 0 10px 10px 0;
    }
    .logoContainer li a {
        background: transparent url("//images2.drct2u.com/content/common/images/commongui/footerLogos.png") no-repeat 0 0;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-indent: 100%;
        height: 50px;
        margin: 0;
        padding: 0;
    }
    .logoContainer .personalaccount a {
        background-position: 0 0;
        width: 100px;
    }
    .logoContainer .mastercard a {
        background-position: -110px 0;
        width: 50px;
    }
    .logoContainer .maestro a {
        background-position: -170px 0;
        width: 50px;
    }
    .logoContainer .visa a {
        background-position: -230px 0;
        width: 50px;
    }
    .logoContainer .visaelectron a {
        background-position: -290px 0;
        width: 52px;    
    }
    .logoContainer .laser a {
        background-position: -350px 0;
        width: 32px;
    }
    .logoContainer .3v a {
        background-position: -3950px 0;
        width: 48px;
    }
    .logoContainer .nextdaydelivery a {
        background-position: -455px 0;
        width: 55px;
    }
    .logoContainer .dayshomeapproval a,
    .logoContainer .dayshomeapprovals a {
        background-position: -515px 0;
        width: 120px;
    }
    .logoContainer .easyreturnswithin14days a,
    .logoContainer .dayreturns a {
        background-position: -645px 0;
        width: 82px;
    }
    .logoContainer .verifiedbyvisa a {
        background-position: -740px 0;
        width: 75px;
    }
    .logoContainer .mastercardsecurecode a {
        background-position: -830px 0;
        width: 68px;
    }