/*================================================*/
/*==========| GLOBAL NAV REDESIGN 2016 |==========*/
/*
 * Implemented by: Isaak Jimenez
 * Platform: EONLINE DESKTOP
 * 
 * This css file is used for the global nav only.
 * Members project will have a different CSS 
 * stylesheet file.
 * 
*/
/*================================================*/

/*--------------------------------------*/
/*==========| GENERAL LAYOUT |==========*/
/*--------------------------------------*/

/*------------------------*/
/*--BEGIN GENERAL SHARED--*/
.nav__nav-base,
.social a,
.nav__menu-intl a,
.nav__search-button,
.nav__form-submit,
.social__fb-half-circle,
.nav__image-icon,
.extender-bkg,
.nav__logo-link {
	background-image: url('/resources/images/header_footer/navRedesign2016-sprite.png');
	background-repeat: no-repeat;
}
.nav,
.nav__nav-base,
.nav__logo-link,
.nav__wrapper {
	height:100px;
}
.nav__wrapper--show-nav-page {
	height: 180px;
}
.nav__menu-intl a,
.nav__menu-main > li > a,
.nav__form-label,
.nav__form-textarea,
.nav__button-type1-link {
	font-family: 'Oswald', sans-serif;
}
.nav__subnav a {
	font-family: 'Lato', sans-serif;
}

/*| GENERIC |*/
.nav a,
.nav input {
	outline: none;
}
.nav a {
	text-decoration:none;
}
.nav__logo-link,
.social a,
.nav__menu-intl a,
.nav__subnav--type1 a,
.nav__subnav--type2 > li a,
.nav__search-button,
#shows-nav {
	display:block;
}
.social,
.nav__menu-main {
	display:table;
}
.nav__menu-intl-menuitem,
.nav__form-textarea,
.nav__form-label,
.nav__form-submit,
.nav--collapsed .social,
.nav--collapsed .nav__menu-intl,
.nav__image-overlay,
.nav__image-icon--news {
	display:none;
}
.social,
.nav__menu-main,
.nav__menu-intl {
	list-style: none;
}
.nav,
.nav__shows,
.nav__events,
.nav__more,
.nav__form,
.social__fb-section,
.social__fb-button,
.nav__image-container {
	position:relative;
}
.nav__logo-link,
.nav__menu-intl,
.nav__subnav,
.nav__search-button,
.nav__form-label,
.nav__form-textarea,
.nav__form-submit,
.social__fb-sliderbase,
.social__fb-container,
.social__fb-half-circle,
.nav__image-overlay,
.nav__image-container img,
.nav__image-icon,
.nav__image-gradient-overlay,
.nav__button-type1 {
	position:absolute;
}
.social li,
.nav__menu-main > li,
.nav__subnav--type1 li {
	float:left;
}
/*---END GENERAL SHARED---*/
/*------------------------*/

.NavR_Header_BannerBlock {
	margin-bottom: 10px;
}
/*need to be more specific to overwrite legacy style. ID 'HHeader' needs to stay tagged on the nav element but that is picking up legacy styles that are breaking the nav */
body #page #nav__wrapper .nav {
	background: #1a212b; /* Old browsers */
	background: -moz-linear-gradient(left,  #1a212b 0%, #3c5266 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1a212b 0%,#3c5266 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1a212b 0%,#3c5266 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a212b', endColorstr='#3c5266',GradientType=1 ); /* IE6-9 */
    z-index: 503; /* if this z-index is increased, the .split_skin z-index must also be increased to prevent overlap from the extenders */
}
.nav__nav-base {
	background-position: left -566px;
}
.rebrand .nav__logo-link,
[pagewidth=w1230] .nav__logo-link,
[pagewidth=w1250] .nav__logo-link,
[pagewidth=w1280] .nav__logo-link,
[pagewidth=w1560] .nav__logo-link {
	background-position:-30px 0;
}
.nav__logo-link,
.news .nav__logo-link,
[pagewidth=w980] .nav__logo-link {
	width: 142px;
	background-position: -20px 0;
	left:0;
	top:0;
}
.rebrand .nav--collapsed .nav__logo-link,
[pagewidth=w1230] .nav--collapsed .nav__logo-link,
[pagewidth=w1250] .nav--collapsed .nav__logo-link,
[pagewidth=w1280] .nav--collapsed .nav__logo-link,
[pagewidth=w1560] .nav--collapsed .nav__logo-link {
	background-position: -10px 0;
}
.nav--collapsed .nav__logo-link,
.news .nav--collapsed .nav__logo-link,
[pagewidth=w980] .nav--collapsed .nav__logo-link  {
	background-position: -5px 0;
}
.nav__logo--skin,
[pagewidth] .nav__logo--skin,
.nav--collapsed .nav__logo--skin,
[pagewidth] .nav--collapsed .nav__logo--skin {
	background-position: 0 0;
}
.nav__second-group {
	padding-top:10px;
}

/*--------------------------------------*/
/*============| SOCIAL MENU |===========*/
/*--------------------------------------*/
.social {
    margin: 0 auto;
	padding:0;
}
.social li {
	margin: 0 2px;
}
.social a {
    width: 30px;
    height: 30px;
}
.social__fb-half-circle {
	width: 15px;
    height: 31px;
    background-position: -306px -384px;
    /*left: -113px;*/
	left:0;
    top: -1px;
}
.social__fb-sliderbase {
    right: 17px;
    top: 0;
    background-color: #68717b;
    /*width: 111px;*/
	width:0;
    height: 30px;
}
.social__fb-container {
	left: 101px;
    top: 3px;
	overflow:hidden;
	z-index: 1;
	width:0;
}
/*| SOCIAL ICONS |*/
/*----------*/
.social__fb-button {
    background-position: -206px -385px;
	z-index: 2;
}
.social__fb-button:hover {
    background-position: -306px -115px;
}
/*----------*/
.social__tw-button {
	background-position: -206px -160px;	
}
.social__tw-button:hover {
	background-position: -306px -160px;	
}
/*----------*/
.social__instagram-button {
	background-position: -206px -205px;	
}
.social__instagram-button:hover {
	background-position: -306px -205px;	
}
/*----------*/
.social__gplus-button {
	background-position: -206px -250px;	
}
.social__gplus-button:hover {
	background-position: -306px -250px;	
}
/*----------*/
.social__pinterest-button {
	background-position: -206px -295px;	
}
.social__pinterest-button:hover {
	background-position: -306px -295px;	
}
/*----------*/
.social__tumblr-button {
	background-position: -206px -340px;
}
.social__tumblr-button:hover {
	background-position: -306px -340px;
}
/*----------*/

/*--------------------------------------*/
/*===========| MAIN NAV MENU |==========*/
/*--------------------------------------*/
.nav__menu-main {
	margin: 21px auto 0 auto;
	padding:0;
}
/*padding-bottom:22px, this is important!*/
.nav__menu-main > li > a {
	text-transform: uppercase;
	font-size: 0.9rem;
	padding: 15px 20px 22px 20px;
}
/*overrides on last links on either side to extend hover area*/
/*.nav__menu-main .nav__news > a {
	padding-left:70px;
}
.nav__menu-main .nav__more > a {
	padding-right:70px;
}*/
.nav__menu-main > li > a:link,
.nav__menu-main > li > a:visited,
.nav__menu-main > li > a:hover {
	color:white;
}
.nav__menu-main > li > a:hover {
	color:#ebd913;
}

.nav__extender {
	width:200%;
	height:100%;
	position:absolute;
}
.has-skin .nav__extender {
	display:none;
}
#galleryDetail .nav__extender,
#gallery .nav__extender,
.e-skin--bleed .nav__extender {
	display:block;
}
.nav__extender--left {
	background-color:#1a212b;
	left:-200%;
}
.nav__extender--right {
	background-color:#3c5266;
	right:-200%;
}
.extender-bkg {
	float:right;
	height:100%;
	width: 150px;
	background-position:-186px -430px;
}
.nav--collapsed .extender-bkg {
	width:75px;
	background-position:-107px -233px;
}

/*--------------------------------------*/
/*==========| SUB NAV MENUS |===========*/
/*--------------------------------------*/
.nav__subnav {
	/*-webkit-box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.08);
	-moz-box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.08);
	box-shadow: -1px 1px 2px 1px rgba(0,0,0,0.08);*/
}
.nav__subnav--type1 {
	/*100px very important, or nav will bug out*/
	top: 100px;
	background-color:#f3f3f3;
	height:267px;
	/*border: 1px solid white;*/
	z-index:502;
}
.nav__subnav--type1 a,
.nav__subnav--type1 li img {
	width: 145px;
}
.nav__subnav--type1 li img {
	/*border-top: 31px solid black;
	border-bottom: 31px solid black;*/
}
.subnav__imglink {
	padding: 10px 0 0 10px;
}
.subnav__txtlink {
	padding: 0 0 10px 10px;
}
.nav__subnav--type2 {
	top: 38px;
	left:0;
	text-align:center;
	background-color:#212b37;
	width:150px;
	border-top: 1px solid #ebd913;
	padding: 15px 0;
	z-index:502;
}
.nav__subnav--type2 > li a {
	padding: 5px 20px;
	font-size: 0.78rem;
}
.nav__subnav--type2 a:link,
.nav__subnav--type2 a:visited,
.nav__subnav--type2 a:active {
	color:#cecfd1;
	font-weight:bold;
}
.nav__subnav--type2 a:hover {
	background-color:#424b55;
	border-left: 3px solid #ebd913;
	padding-left:17px;
}
.nav__image-container {
	overflow: hidden;
	margin-bottom: 5px;
}
.nav__image-container,
.nav__image-overlay,
.nav__image-gradient-overlay  {
	width:145px;
	height:145px;
}
.nav__image-overlay,
.nav__image-container img,
.nav__image-gradient-overlay {
	left:0;
	top:0;
}
.nav__image-container img {
	z-index: 1;
}
.nav__image-overlay {
	background-color:black;
	z-index: 3;
	opacity: 0.4;
}
.nav__image-icon {
	z-index: 4;
    right: 5px;
    bottom: 5px;
}
.nav__image-icon--news {
    width: 48px;
    height: 14px;
	background-position: -90px -437px;
}

.nav__image-gradient-overlay {
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
	z-index: 2;
}

.nav__image-icon--photo {
    width: 24px;
    height: 19px;
	background-position: -102px -503px;
}
.nav__image-icon--video {
    width: 22px;
    height: 22px;
	background-position: -103px -466px;
}
/*Keep positioning for reference*/
/*
.nav__image-icon--photo:hover {
	background-position: -102px -403px;
}
.nav__image-icon--video:hover {
	background-position: -103px -366px;
}*/

.nav__vid-thumb {
    border-top: 31px solid black;
    border-bottom: 31px solid black;
}
.nav__subnav-title {
	color:#585858;
	font-weight:bold;
	font-size: 0.9rem;
}
.nav__subnav-stamp {
	color:#b5b5b5;
	font-size: 0.7rem;
	margin-top: 6px;
}
.nav__subnav-branded-content {
	color:#b5b5b5;
	font-size: 0.6rem;
	margin-top: 6px;
}
/*---------------------------------------------*/
/*=============| MISC NAV BUTTONS |============*/
/*---------------------------------------------*/
.nav__button-type1 {
    right: 91px;
    top: 12px;
}
.nav__button-type1-link {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    padding: 5px 16px;
	font-size: 0.8rem;
}
.nav__button-type1-link:link,
.nav__button-type1-link:visited {
	border: 1px solid #EBD913;
	color: #EBD913;
	-o-transition:.1s;
	-ms-transition:.1s;
	-moz-transition:.1s;
	-webkit-transition:.1s;
	transition:.1s;
}
.nav__button-type1-link:hover,
.nav__button-type1-link:active {
	border: 1px solid white;
	color: white;
}
.nav--collapsed .nav__button-type1 {
	display:none;
}
/*--------------------------------------*/
/*=============| INTL MENU |============*/
/*--------------------------------------*/
.nav__menu-intl {
	margin:0;
	padding: 0 0 5px 0;
	right: 0;
	top:0;
	width: 86px;
	z-index: 503;
}
.nav__menu-intl a {
	color:white;
	font-size: 0.75rem;
	padding: 3px 10px 3px 35px;
}
.nav__menu-intl a:hover {
	background-color:#768FA7;
}

/*add hover states to menu items, except top globe menu*/
.nav__menu-intl .nav__menu-intl-current:hover {
	background-color:transparent;
}

/*
intl top header title: 
more specific so these styles win, and
custom overstate.
*/
.nav__menu-intl .nav__menu-intl-current {
	background-position: 56px -105px;
	padding-bottom: 10px;
    padding-top: 12px;
	text-indent: 3px;
	color:#BDC7D0;
	text-transform:uppercase;
}

.nav__menu-intl--menu-open {
	background-color:#567088;
}
.nav__menu-intl--menu-open .nav__menu-intl-current {
	color:white;
	background-position:56px -140px;
}

/*intl sprite sheet flag positions*/
.nav__au {
	background-position: 9px -180px;
}
.nav__de {
	background-position: 9px -208px;
}
.nav__fr {
	background-position: 9px -235px;
}
.nav__uk {
	background-position: 9px -263px;
}
.nav__ca {
	background-position: 9px -290px;
}
.nav__us {
	background-position: 9px -317px;
}
.nav__mx {
	background-position: 9px -345px;
}
.nav__br {
	background-position: 9px -372px;
}

/*---------------------------------------*/
/*=============| NAV SEARCH |============*/
/*---------------------------------------*/
.nav__search-button {
    right: 0;
    bottom: 5px;
    width: 44px;
    height: 44px;
    background-position: -92px -100px;
}
.nav__form-label {
    right: 64px;
    bottom: 0;
    z-index: 502;
    color: #8B98A2;
    font-size: 0.84rem;
    font-weight: 300;
}
.nav__form-textarea {
    right: 44px;
    bottom: -13px;
    border: none;
	border-bottom: 1px solid #567088;
    height: 23px;
    width: 0;
	text-indent: 50px;
	font-size: 1.3rem;
    font-weight: 300;
	color: #556B80;
	padding: 9px 0 11px 0;
}
.nav__form-submit {
	right:0;
	bottom: -6px;
    width: 29px;
    height: 29px;
    border: none;
    background-color: transparent;
    background-position: -100px -146px;
	cursor: pointer;
}
.nav__search-button:hover {
	background-position: -92px -189px;
}
.nav__search-button--close {
	background-position: -92px -248px;
}
.nav__search-button--close:hover {
	background-position: -92px -307px;
}
/*----------------------------------------*/
/*============| COLLAPSED NAV |===========*/
/*----------------------------------------*/
/*need to overwrite legacy styles on #header*/
#page .nav__wrapper .nav--collapsed {
    position: fixed;
    left: 0;
    top: 0;
}
#page .nav__wrapper .nav--collapsed-photo-detail {
	min-width:980px;
	width:980px;
	left: 50%;
	margin-left:-490px;
}
.nav--collapsed,
.nav--collapsed .nav__nav-base,
.nav--collapsed .nav__logo-link {
	height:54px;
}
.nav--collapsed .nav__nav-base,
.nav--collapsed .extender-bkg,
.nav--collapsed .nav__logo-link {
	background-size: 182px;
}
.nav--collapsed .nav__nav-base {
	background-position:0 -306px;
}
.nav--collapsed .nav__second-group {
	padding:0;
}
.nav--collapsed .nav__menu-main {
	margin: 0 auto;
	padding-top:16px;
}
.nav--collapsed .nav__search-button {
    bottom: 5px;
}
.nav--collapsed .nav__form-textarea {
    bottom: -13px;
	height: 24px;
}
.nav--collapsed .nav__form-label {
	bottom:2px;
}
.nav--collapsed .nav__form-submit {
	bottom:-5px;
}
.nav--collapsed .nav__subnav--type1 {
	top: 54px;
}
/*_____________________________________________*/
/*_________________| LEGACY |_________________*/

/*-------------------------------------*/
/*=========| LEGACY SHOWS NAV |========*/
/*-------------------------------------*/
#shows-nav {
	top:0; 
	left:inherit; 
	height:80px; 
	margin:0 auto;
	z-index: 502;
}
/*
need to use !important to overwrite hash (#)
which cant be removed without breaking the 
legacy JS (appears in show package pages that
have their own little subnav)
*/
.shows-nav--collapsed-mode {
	position:fixed !important;
	top:54px !important;
}
/*--------------------------------------*/
/*===========| MEDIA QUERIES |==========*/
/*--------------------------------------*/
@media
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
	/* UPDATE BY COPYING FROM INITIAL ABOVE */
	.nav__nav-base,
	.social a,
	.nav__menu-intl a,
	.nav__search-button,
	.nav__form-submit,
	.social__fb-half-circle,
	.nav__image-icon,
	.extender-bkg,
	.nav__logo-link {
		background-image: url('/resources/images/header_footer/navRedesign2016-sprite@2x.png');
		background-size:336px;
	}
	
	/* alignment adjustments for sprites that dont seem to line up perfectly */
	.nav__form-submit {
		background-size: 338px;
	}
}