@charset "utf-8";
/* CSS Document: UK 'flyout.css'

IMPORTANT =======================================================
This file is owned and controlled by James Armitage.
All changes to this file must be actioned by james.armitage@qvc.com.
The latest copy of this should be taken from ClearCase prior to
making updates, once changed the file on ClearCase should be
updated and a copy migrated to QA/STG/INT/BETA.


CONTENTS ========================================================

A. FILE INFORMATION
B. CHANGELOG
C. STYLES
1. MAIN NAVIGATION GLOBAL
2. MAIN NAVIGATION ACTIVE STATE
3. MAIN NAVIGATION FLYOUT CONTROL
4. MAIN NAVIGATION FLYOUT DIV
5. MAIN NAVIGATION FLYOUT DIV COLUMN WIDTH SETTINGS
6. MAIN NAVIGATION FLYOUT DIV COLUMN
7. MAIN NAVIGATION FLYOUT DIV EXTRA LINKS

A. FILE INFORMATION ==============================================

- CSS Document: flyout.css
- Modified/Owned by: James Armitage
- Copyright: 2014
- Written for: http://www.qvcuk.com
- Purpose: Controls display/visual function of site menu dropdown/flyout navigation

B. CHANGELOG =====================================================

- Last modified: 2016-01-18 / James Armitage

C. STYLES ========================================================
*/

/* 1. MAIN NAVIGATION GLOBAL -------------------------------------
   Global styling for flyout navigation
----------------------------------------------------------------*/
#mastTierTwo {
    border-top: 1px solid #eeeced;
    border-bottom:1px solid #eeeced;
    box-shadow: 0px 2px 8px #eaeaea;
    color: #fff;
    font-family: 'Gotham SSm 5r',"Century Gothic",Arial,Helvetica,sans-serif;
    height: 34px;
    margin: 10px 0;
    clear: both;
}

#nav {
    float: left;
    
}

#nav .starter {
    background: url(//images.qvc.com/is/image/pic/qvc/down_arrow_desktop.png?fmt=png-alpha) no-repeat 164px 50%;
    border: 1px solid #ffffff;
    color: #57444f;
    display: block;
    width: 200px;
    padding: 7px 10px;
    font-size: 12px;
}

#nav.nav--open .starter{
    background: url(//images.qvc.com/is/image/pic/newMediaDE/web/up_arrow_desktop.png?fmt=png-alpha&qlt=89,1) no-repeat 164px 50% #ffffff;
    border: 1px solid #ebebeb;
    border-bottom: 1px solid transparent;
}

#mainnavigation {
    background: #ffffff;
    border: 1px solid #ebebeb;
    border-top: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
    list-style: none outside none;
    padding:0;
    position: absolute;
    z-index:50;
    margin: 0;
	height: 420px;
}

#nav.nav--open #mainnavigation {
    display: block;
}

#mainnavigation li {
    width: 220px;
}

#mainnavigation li > div,
#mainnavigation li > .flyout {
    background: #f6f5f5;
    border: 1px solid #eeeced;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor:default;
    display:none;
    font-weight:normal;
    height: 451px;
    min-height: 451px;
    left: 219px;
    padding:10px 25px;
    position:absolute;
    text-align:left;
    top: -31px;
    z-index:55;
}

#mainnavigation li > a:link,
#mainnavigation li > a:visited {
    color: #333;
    display:block;
    outline:0;
    padding: 10px 15px;
    text-decoration:none;
}

#mainnavigation li > a:hover,
#mainnavigation li > a:active,
#mainnavigation li > a:focus {
    background: #f6f5f5;
    color: #e2636a;
}

#mainnavigation div li a{text-decoration:none;float:left;clear:left;width:100%;line-height:1.4em;border:none}
#mainnavigation li.flyleft:hover,
#mainnavigation li.flyright:hover,
#mainnavigation li.flyleft:hover a.noborder,
#mainnavigation li.flyright:hover a.noborder{
	background:#e5e5e5;
	border-bottom:0;
	z-index:50;
	cursor:pointer
}


/* 2. MAIN NAVIGATION ACTIVE STATE -------------------------------
   Styling for active state when a menu item is selected
----------------------------------------------------------------*/
#mainnavigation a.active{/*background:#eeeeee;color:#000;*/}
#mainnavigation li:hover a.active{cursor:pointer}
/* 3. MAIN NAVIGATION FLYOUT CONTROL -----------------------------
      Just normal flyouts now, but can't edit the HTML so we're stuck with flyright/flyleft classes
----------------------------------------------------------------*/
#mainnavigation .flyright:hover div,
#mainnavigation .flyleft:hover div {
   display:block;
}

/* 4. MAIN NAVIGATION FLYOUT DIV ---------------------------------
not needed...
----------------------------------------------------------------*/
/* 5. MAIN NAVIGATION FLYOUT DIV COLUMN WIDTH SETTINGS -----------
   Styling to control width of flyout (div width in columns)
----------------------------------------------------------------*/
.Column1{width: 190px}
.Column2{width: 380px;}
.Column3{width: 570px;}
.Column4{width: 760px}
/* 6. MAIN NAVIGATION FLYOUT DIV COLUMN --------------------------
   Styling to control content of each column in flyout menu
----------------------------------------------------------------*/
#mainnavigation div.flyout .linkcol{float:left;width: 160px;}	
#mainnavigation div.flyout .linkcol span{
    display: block;
    color: #eb5d5e;
    padding: 0 0 0 17px;
    text-transform: uppercase;
    font-family: 'Gotham SSm 4r',"Century Gothic",Arial,Helvetica,sans-serif;
}

#mainnavigation div.flyout .linkcol ul {
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Gotham SSm 4r',"Century Gothic",Arial,Helvetica,sans-serif;
}	
#mainnavigation div.flyout .linkcol li{clear:both;width:135px;text-align:left;font-size:1em}
#mainnavigation div.flyout .linkcol li a {
    padding: 12px 15px 2px 17px;
    color: #333;
    font-weight: normal;
}
/* 7. MAIN NAVIGATION FLYOUT DIV EXTRA LINKS ---------------------
   Styling to control extra links in flyout menu
----------------------------------------------------------------*/
#mainnavigation div.flyout div.exLinks{border-top:1px solid #ccc;padding:0 10px 10px 10px;clear:left;width:100%;background:none}	
#mainnavigation div.exLinks ul{list-style:none;margin:0;padding:0}	
#mainnavigation div.flyout div.exLinks li{float:left; width: 160px;background:none;font-weight:700;padding:0}
#mainnavigation div.flyout div.exLinks li a{list-style:none;float:left;color:#e2636a;margin:0;padding:3px; display: block; padding:12px 7px 2px 7px; width: 80%; font-size:1.3em;font-weight:normal}
#mainnavigation div.flyout .linkcol li a:hover,#mainnavigation div.flyout div.exLinks li a:hover{text-decoration:underline}


#tiertwoLinks {
    float: right;
    list-style: none inside;
    margin: 0;
    padding: 0;
}

#tiertwoLinks > li {
    border: 1px solid transparent;
    float: left;
    font-size: 12px;
    line-height: initial;
    position: relative;
	margin-left: 10px;
}

#tiertwoLinks > li a {
    color: #333;
    display: block;
    padding: 8px;
}

#tiertwoLinks > li.qvctv {
	z-index: 50;
}

#tiertwoLinks li.qvctv > a {
    background: url(//images.qvc.com/is/image/pic/qvc/down_arrow_desktop.png?fmt=png-alpha) no-repeat 94% 50%;
    border: 1px solid #ffffff;
    border-bottom: 0;
    padding: 7px 35px 10px 10px;
    text-decoration: none;
}

#tiertwoLinks li.qvctv > a:hover {
	text-decoration: underline;
}

#tiertwoLinks li.qvctv ul {
    background: #fff;
    border: 1px solid #ebebeb;
    border-top: 0;
    display: none;
    list-style: none inside;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1001;
}

#tiertwoLinks li.qvctv ul li {
    font-size: 14px;
    padding: 0;
    width: 132px;
}

#tiertwoLinks li.qvctv ul li a {
    font-size: 12px;
    line-height: initial;
    padding: 10px 15px;
	display: block;
}

#tiertwoLinks li.qvctv ul li a:hover {
	background-color: #f6f5f5;
	color: #e2636a;
	text-decoration: none;
}


body:not(.isMobile) #tiertwoLinks li.qvctv:hover > a, #tiertwoLinks li.qvctv.hover > a {
    background: url(//images.qvc.com/is/image/pic/qvc/up_arrow_desktop.png?fmt=png-alpha) no-repeat 94% 50%;   
    border: 1px solid #ebebeb;
    border-bottom: 0;
}

body:not(.isMobile) #tiertwoLinks li.qvctv:hover ul, #tiertwoLinks li.qvctv.hover ul {
    display: block;
}