/* SFLY specific CSSs, menu */

/* new styles to support 1600px px width*/
#responsiveNonConflictingWrapper, .responsiveNonConflictingWrapper {
    max-width: 1600px;
    margin: 0 auto;
}

/* narrow menu overrides */
.menu_srch_narrow {
    top: 58px !important;
    left: 510px !important;
    width: 168px !important;
}

#main-nav {
    margin: 0;
    padding: 0;
    line-height: 1.22em;
    height: 31px;
}

/* subnav classes */
#hdSubNavMenu {
    height: 25px;
    color: #494A37;
    padding: 0;
}

.hdSubNavWide {
    width: 845px;
}

#hdSubNavMenu span {
    font-size: 11px;
    margin: 8px 0 0 1px;
    padding: 0 10px 0 10px;
    display: block;
    float: left;
}

/* keep in sync with span selector above */
#hdSubNavMenu a, #hdSubNavMenu DIV.du-l {
    text-decoration: none;
    font-size: 11px;
    margin: 8px 0 0 0;
    padding: 0 18px 0 14px;
    color: #494A37;
    display: block;
    float: left;
    height: 13px;
}

#hdSubNavMenu a:hover {
    color: #F05323;
}

/* BEGIN HERE: StoreSubNavigation.jsp */
#subNavigationContainer {
    width: 800px;
    height: 25px;
    margin: 5px 0 0 195px;
    font-size: 11px !important;
}

#docWide #subNavigationContainer {
    /* 15 less for docWide's margin */
    margin-left: 190px;
}

ul.subNavigation {
    float: left;
    list-style-type: none;
    height: 25px;
    margin: 0;
    padding: 0;
}

ul.subNavigation li.categoryItem {
    float: left;
    position: relative;
    margin: 5px 20px 0 0;
    text-align: center;
    line-height: 1;
}

ul.subNavigation li.categoryItem.last {
    border-right: 1px solid #494A37;
    padding-right: 30px;
    margin-right: 0;
    margin-top: 5px;
}

ul.subNavigation li.categoryItem a.categoryItemLink {
    text-decoration: none;
    color: #494A37;
    font-size: 11px;
}

ul#saleNavigation {
    width: 110px;
    *margin: 0 !important;
    *padding: 0 !important;
}

/* END HERE: StoreSubNavigation.jsp */
#headerWrapper {
    margin: 0 0 0 15px;
    line-height: 1.22em;
    padding: 0;
    font-size: 13px;
}

#headerWrapper.hdNarrow_full {
    height: 85px;
}

/* tab background sprites */
a.navMySflyTab {
    width: 122px;
    background-position: 0px 0;
}

a.navMySflyTab:hover {
    background-position: 0px -31px;
}

a.navMySflyTabActive {
    width: 122px;
    background-position: 0px -62px;
}

a.navMyPicsTab {
    width: 114px;
    background-position: -122px 0;
}

a.navMyPicsTab:hover {
    background-position: -122px -31px;
}

a.navMyPicsTabActive {
    width: 114px;
    background-position: -122px -62px;
}

a.navShareTab {
    width: 80px;
    background-position: -236px 0;
}

a.navShareTab:hover {
    background-position: -236px -31px;
}

a.navShareTabActive {
    background-position: -236px -62px;
    width: 80px;
}

a.navInspirationTab {
    width: 113px;
    background-position: -316px 0;
}

a.navInspirationTab:hover {
    background-position: -316px -31px;
}

a.navInspirationTabActive {
    background-position: -316px -62px;
    width: 113px;
}

a.navStoreTab {
    width: 76px;
    background-position: -429px 0;
}

a.navStoreTab:hover {
    background-position: -429px -31px;
}

a.navStoreTabActive {
    background-position: -429px -62px;
    width: 76px;
}

#mySflyTab,
#shareTab,
#myPicturesTab {
  text-transform: uppercase;
}

/* Desktop Uploader Launch */
DIV.du-l {
    position: relative;
    padding: 0 !important;
}

DIV.du-l A {
    margin-top: 0 !important;
}

DIV.du-lf {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
}

DIV.du-lf {
    _width: 100%;
    _height: 100%;
}

#hdSubNavMenu DIV.du-lf {
    /*_width: 103px; _height: 14px;*/

}

DIV.du-lf EMBED {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#hdSubNavMenu A.du-hover {
    color: #F05323 !important;
}

DIV.colCtr DIV.du-l {
    float: left;
    clear: both;
}

DIV.du-debug A {
    background-color: cyan;
}

DIV.du-debug DIV.du-lf OBJECT, DIV.du-debug DIV.du-lf EMBED {
    border: 1px dashed red;
}

/*Styles for C&S dropdown*/
ul.subNavigation {
    position: relative;
    z-index: 50;
}

ul.subNavigation li.categoryItem {
    margin: 0;
    padding: 5px 9px 0px 9px;
}

ul.subNavigation li.categoryItem.last {
    margin-top: 0;
}

#categoryItemLink_1 {
    background: url(/img_/store/arrow-orange.gif) 97% 80% no-repeat;
    padding-left: 4px;
    padding-right: 15px;
}

/** Styles for Header **/
#headerWrapper {
    margin-left: 0;
}

.siteHeader {
    height: 49px;
    vertical-align: bottom;
}

#headerNavContainer {
    border-bottom: 1px solid #7e8083;
    margin-left: 24px;
    padding-top: 27px;
}

#headerLogo > a > img,
#headerLogo > img {
    position: relative;
    z-index: 10;
}

.headerNavContainer_limited, .headerNavContainer_full, .headerNavContainer_share {
    float: left;
    width: 815px;
}

.narrowHeader #headerNavContainer {
    width: 505px;
}

.headerLogo_limited, .headerLogo_full, .headerLogo_share {
    float: left;
}

/* fluid limited header */
#siteHeader_limited_flow {
    position: relative;
}

.headerLogo_limited_flow {
    position: absolute;
    top: 0;
    left: 0;
    width: 141px;
}

.flowHeader #siteHeader_limited_flow #headerNavContainer {
    position: absolute;
    min-width: 375px;
    left: 141px; /* matches width of logo image wrapper in .headerLogo_limited_flow rule above */
    top: 0;
    right: 0;
    padding-top: 24px;
}

/* end fluid limited header */

.narrowHeader #siteHeader_full #headerNavContainer {
    padding-top: 0;
}

.headerNavContainer_full #globalMenuBar {
    float: left;
    padding-top: 2px;
}

#hdUserLinks {
    float: right;
    color: #d2d3d5;
    padding-bottom: 2px;

    font-family: "Avenir LT W01 55 Roman", verdana, arial, sans-serif;
    font-size: 13px;
}

#hdUserLinks a, #narrowFullHdUserLinks a, .highlightedLink {
    text-decoration: none !important;
    font-family: "Avenir LT W01 55 Roman", Verdana, Arial, sans-serif;
    font-size: 11px;
}

#narrowFullHdUserLinks a {
    vertical-align: middle;
}

#hdUserLinks a:link, #hdUserLinks a:visited, #narrowFullHdUserLinks a:link, #narrowFullHdUserLinks a:visited {
    color: #58595b;
}

#hdUserLinks a:hover, #hdUserLinks a:active, #narrowFullHdUserLinks a:hover, #narrowFullHdUserLinks a:active, .highlightedLink, span.welcomeUserMsg {
    color: #F05323;
}

.welcomeUserMsg {
    font-family: 'Avenir LT W01 85 Heavy', Verdana, Arial, sans-serif;
    font-size: 11px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    width: 150px;
    height: 17px;
    float: left;
    text-overflow: ellipsis;
    text-align: right;
    padding: 2px 4px 0 0;
}

#hdSearchContainer {
  flex: 1 1 auto;
  margin-left: auto;
  height: 100%;
  padding-left: 20px;
}

#narrowFullHdUserLinks {
    text-align: right;
    margin: 6px 0;
    color: #D2D3D5;
}

.siteHeader ul li, .siteSubNavContainer ul li {
    list-style-type: none;
}

.wideHeader {
    width: 980px;
    *width: 998px;
    margin: 0 10px;
}

.narrowHeader {
    width: 680px;
    *width: 699px;
    margin: 0 10px;
}

.shareHeader {
    margin: 0 10px;
}

ul#globalNavList {
    margin-left: 0;
}

#globalNavList li {
    float: left !important;
    *white-space: nowrap; /** Fix for IE expanding floated width to 100% */
    margin-right: 18px;
    height: 19px;
    *width: 35px;
}

#globalNavList #storeTabContainer {
    margin-right: 5px;
}

#globalNavList li#mySflyTabContainer {
    *width: 88px;
}

#globalNavList li#myPicturesTabContainer {
    *width: 73px;
}

#globalNavList li#inspirationTabContainer {
    *width: 81px;
}

#globalNavList li a {
    text-decoration: none !important;
    font-family: "Avenir LT W01 95 Black", Verdana, Arial, sans-serif;
    font-size: 11px;
    display: block;
    width: 100%;
    height: 100%;
    text-transform: uppercase;
}

#globalNavList li a:link, #globalNavList li a:visited {
    color: #58595b;
}

#globalNavList li a:hover, #globalNavList li a:active {
    color: #F05323;
}

#globalNavList li a.active {
    color: #F05323 !important;
}

#globalNavList ul {
    overflow: auto;
}

.clear {
    clear: both;
}

ul {
    padding: 0;
    margin: 0;
}

/****Search Box Styles **/
#srchContainer {
  height: 100%;
}
#srchContainer.flyout {
    margin-left: 7px;
    position: relative;
    padding-left: 1px;

    /** To fix z-index for children in IE assign this to parent */
    *z-index: 1;
}

#srchContainer.searchInline {
    position: relative;
    z-index: 1;
}

#srch.searchInline {

}

#srchTooltip {
    display: none;
    position: absolute;
    right: -50%;
    z-index: 40 !important;
    top: 144%;
    *top: 136% !important;
    *padding-top: 2px;
}

#srchContainer:hover #srchTooltip, #srchContainer.active #srchTooltip {
    display: block;
}

#searchIcon {
    background: url(/i/ui/sitenav/search_icon.png) 0px 1px no-repeat;
    width: 13px;
    height: 13px;
}

#srchContainer .triangleBorder {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: transparent transparent #a6a8ab transparent;
    background: none;
    opacity: 1;
    filter: alpha(opacity=100);
    position: absolute;
    top: -5px;
    font-size: 0;
    right: 5px;
    _top: -10px;
}

#srchContainer .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: transparent transparent #ffffff transparent;
    opacity: 1;
    filter: alpha(opacity=100);
    background: none;
    position: absolute;
    top: -3px;
    right: 5px;
    _top: -8px;
    font-size: 0;
}

#srchContainer .flyOutContent {
    padding-top: 10px;
    *padding-bottom: 5px;
    margin-top: 5px;
    border: 1px solid #a6a8ab;
    opacity: 1;
    filter: alpha(opacity=100) !important;
    background-color: #ffffff;
    width: 162px;
    height: 30px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

a.srch_go {
    /*text-shadow: 0 -1px 0 #fff;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e0dbd7));
    background-image: -webkit-linear-gradient(#ffffff, #e0dbd7);
    background-image: -moz-linear-gradient(#ffffff, #e0dbd7);
    background-image: -o-linear-gradient(#ffffff, #e0dbd7);
    background-image: -ms-linear-gradient(#ffffff, #e0dbd7);
    background-image: linear-gradient(#ffffff, #e0dbd7);
    display: inline-block;
    font-family: "Avenir LT W01 55 Roman", Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 11px;
    text-decoration: none;
    padding: 1px 5px 0;
    border-radius: 5px;
    border: 1px solid #a5a09d;
    vertical-align: top;
    cursor: pointer;

    margin: 1px 0 0 -1px;
    *margin-top: 5px;

    line-height: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;*/
}

a.srch_go_enabled {
    color: #F05323;
}

a.srch_go_disabled {
    color: #CCCCCC !important;
}

#srchContainer.flyout a.srch_go {
    margin: 0;
}

#srchContainer.flyout .srchTxtField {
    width: 100px;
    margin: 0 10px;
}

#srchContainer .srchTxtField {
    font-family: "Avenir LT W01 45 Book", Verdana, Arial, sans-serif;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    border: 1px solid #a5a09d;
}

input::-webkit-input-placeholder {
    color: #58595B;
}

input:-ms-input-placeholder {
    color: #58595B;
}

input:-moz-placeholder {
    color: #58595B;
}

/*** Styles for Re-branded sub nav **/
.subNavWrapper li {
    list-style-type: none;
}

.hdSubNavNarrow {
    width: 505px;
}

.siteSubNav li.catItem {
    float: left;
}

.catItem, .siteInspirationItem {
    padding: 2px 9px 0;
}

.firstCatItem {
    padding-left: 0;
}

#siteSubNavContainer a:link, #siteSubNavContainer a:visited {
    color: #58595b;
}

.not-touch-device #siteSubNavContainer a:hover,
#siteSubNavContainer a:active,
#siteSubNavContainer a.activeSubNavItem {
    color: #F05323 !important;
}

#csMenuContainer, #pgMenuConatiner {
    position: absolute;
    z-index: 40;
    background-color: #ffffff;
    left: -238px;
    top: 20px;
    opacity: 1;
    display: none;
}

#photoGiftsNavLink #pgMenuConatiner {
    left: -627%;
}

.siteInspirationItem {
    position: relative;
    cursor: pointer;
}

#siteSubNavContainer a {
    text-decoration: none !important;
}

#siteSaleNav .siteInspirationItem.active a.catItemLink {
    *width: 87px;
    *display: inline-block;
    *height: 22px;

}

#siteSubNavContainer ul.inspirationMenu {
    margin-left: 0px !important;
    width: auto !important;
}

#siteSubNavContainer ul.siteSubNav, #siteSubNavContainer ul.siteInspirationMenu {
    float: left;
    height: 25px;
}

.siteInspirationContainer {
    width: 140px;
    position: absolute;
    padding: 5px;
    top: 22px;
    left: -1px;
    z-index: 40;
    background-color: #ffffff;
    box-shadow: 4px 4px 4px rgba(51, 51, 51, 0.5);
    display: none;
}

.siteInspirationItem:hover #siteSaleContainer, #siteSaleItem.active #siteSaleContainer {
    display: block;
    border: 1px solid #ccccae;
}

#siteSaleItem .siteInspirationContainer a {
    display: block;
    padding: 3px;
}

#siteSaleItem.active .siteInspirationContainer li {
    *margin: 0;
    *border: 1px solid #fff;
}

#siteSaleItem.active .siteInspirationContainer a:hover, #siteSaleItem:hover .siteInspirationContainer a:hover {
    background-color: #F4F4E4;
}

.clear {
    clear: both;
}

#siteSubNavWrapper, .subNavWrapper {
    margin: auto 10px;
}

#siteSubNavWrapper {
    margin-left: 0;
}

#siteSaleContainer a.on {
    color: #F05323 !important;
    font-weight: bold;
}

#contactUsWrapper {
    margin-left: 15px;
}

#contactUsWrapper .catItem {
    position: relative;
    width: 100px;
}

#contactUsWrapper .catItem:hover .inspirationContainer, #contactUsWrapper li.active div.inspirationContainer {
    display: block;
}

#contactUsWrapper .catItem:hover .catItemLink, #contactUsWrapper li.active a.catItemLink {
    display: block;
    position: relative;
    height: 20px;
}

#contactUsWrapper .inspirationContainer {
    background-color: #FFFFFF;
    display: none;
    position: absolute;
    opacity: 1;
    top: 90%;
    z-index: 40;
    width: 153px;
    padding: 5px;
    border: 1px solid #CCCCAE;
    box-shadow: 4px 4px 4px rgba(51, 51, 51, 0.5);
}

#contactUsWrapper .inspirationContainer li {
    *line-height: 0.5em !important;
}

#contactUsWrapper .inspirationContainer li a {
    padding: 3px;
    display: block;
}

#contactUsWrapper .inspirationContainer li a:hover {
    background-color: #F4F4E4;
}

#offer-banner-wrapper .promo-flex-wrapper {
    display: flex;
    justify-content: space-between;
}

#offer-banner-wrapper #offer-banner1 {
    margin-right: 10px;
}

#offer-banner div {
    overflow: hidden;
}

.fleft {
    float: left;
}

.clear-left {
  clear: left;
}

.fright {
    float: right;
}

.orangecontent, .orangeContent {
    color: #F05323;
    font-size: 12px;
}

.tealContent {
  color:#00829b !important;
}

#offer-banner-wrapper a {
    color: #939598;
    font-size: 12px;
    text-decoration: none;
}

/* Style rules for search box. */
#srch_err #closeBtn {
  background: url(/i/search/search_btn_sprite_close.png) no-repeat -7px -7px;
  cursor: pointer;
  height: 13px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 13px;
}

#srch_err #closeBtn:hover {
    background-position: -7px -33px;
}

#srch_err {
  background-color: #fff;
  border: 1px solid #DCDEE1;
  border-radius: 4px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  display: none;
  padding: 10px;
  position: absolute;
  top: 40px;
  width: 148px;
}
#srch_err:before {
  background-color: #fff;
  box-sizing: border-box;
  border: 1px solid #DCDEE1;
  border-width: 1px 1px 0 0;
  content: '';
  height: 15px;
  left: 10%;
  position: absolute;
  top: -8px;
  transform: rotate(-45deg);
  width: 15px;
}

.srch_err span {
    display: inline-block;
    padding-right: 10px;
    width: auto;
    font-size: 12px;
    font-weight: normal;
    color: #333;
    line-height: normal;
}

#srch_err_txt {
    font-family: 'Avenir LT W01 55 Roman', verdana, arial, sans-serif;
}

/** sub nav dropdowns styles, however when all the pages are moved to standards mode remove all the styles that have the class .dj_iequirks in front of it **/
.not-touch-device .catItem:hover,
.catItem.active,
#siteSubNavContainer .active {
    margin: 0;
}

.not-touch-device #catItemLink_0:hover a.catItemLink,
.dj_iequirks #catItemLink_0.active a.catItemLink {
    padding: 4px 3px 0 4px;
    background-color: #ffffff;
    height: 26px;
    left: -5px;
    top: -3px;
    border-top-width: 1px;
    border-top-color: #7e8083;
}

.dropdownContent {
    margin: 0;
    padding: 20px 0;
    border-style: solid;
    border-color: #c6c7c9;
    border-width: 1px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    background-color: #ffffff;
    position: absolute;
    z-index: 1001; /* necessary to overlap siteSearch */
    top: 22px;
    display: none;
}

@media only screen and (max-width: 991px) {
  .dropdownContent {
    margin-left: 5px;
  }
}


.fourColumnDropDown {
    width: 784px;
    box-sizing: content-box;
}

.fiveColumnDropDown, .tp-subnav .fourColumnDropDown {
    width: 980px;
    box-sizing: content-box;
}

@media (min-width: 1600px) {
  .fiveColumnDropDown {
      width: 1200px;
      box-sizing: content-box;
  }
}

.not-touch-device .catItem:hover .dropdownContent,
.catItem.active .dropdownContent,
.dj_iequirks #siteSubNavContainer .active .dropdownContent {
    display: block;
}

#siteSubNav .dropdownContent ul.column,
#siteSaleItem .dropdownContent ul.column,
#inspirationMenu .dropdownContent ul.column {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*width: 195px;*/
    width: 20%;
    float: left;
    border-right: 1px solid #C6C7C9;
    padding: 0 20px 0;

    /* touch devices */
    height: 369px;
}

.not-touch-device #siteSubNav .dropdownContent ul.column,
.not-touch-device #siteSaleItem .dropdownContent ul.column,
.not-touch-device #inspirationMenu .dropdownContent ul.column {
    height: 172px;
}

#siteSubNavContainer .dropdownContent ul.lastColumn,  #siteSubNavContainer .dropdownContent ul:last-child{
    border-right: 0;
}

#siteSubNavContainer .dropdownContent a:link,
#siteSubNavContainer .dropdownContent .column a:visited {
    font-size: 11px;
    color: #181512;
}

#siteSubNavContainer .dropdownContent .column .columnHeader a:link,
#siteSubNavContainer .dropdownContent .column .columnHeader a:visited {
    font-family: "Avenir LT W01 95 Black", Verdana, Arial, sans-serif;
}

.dropdownContent .column .columnHeader.notNavigable {
    padding: 3px;
    padding-left: 0;
    color: #181512;
    font-family: "Avenir LT W01 95 Black", Verdana, Arial, sans-serif;
}

.dropdownContent .column .columnHeader.promoHeader {
    color: #F05323;
}

.dropdownContent .column .columnHeader.promoHeader .promoCode {
    font-family: "Avenir LT W01 55 Roman", Verdana, Arial, sans-serif;
    color: #181512;
}

.catItem {
    position: relative
}

.dropdownContent .column li {
    list-style-type: none;
    margin-bottom: 8px;
    text-align: left;
}

.dropdownContent .column li.thumbItem {
    margin-bottom: 0;
    width: 155px;
    height: 120px;
}

.dropdownContent .column li.allSection {
    position: absolute;
    bottom: 20px;
    margin-bottom: 0;
}

.column li a:hover, .column li a:focus {
    color: #F05323;
    text-decoration: none;
    cursor: pointer;
}

/**quirks mode **/

.dj_iequirks .siteSubNavContainer {
    z-index: 99;
    position: relative;
}

.dj_iequirks #siteSubNavContainer .active a.catItemLink {
    width: auto;
}

.dj_iequirks #siteSubNav .active ul.column,
.dj_iequirks #siteSaleItem.active ul.column,
.dj_iequirks #inspirationMenu .active ul.column {
    width: 195px !important;
    padding-right: 19px !important;
}

.dropdownItem ul:last {
	border-right-width: 0;
}

.dropdownItem {
	height: 415px;
	position: relative;
}

.not-touch-device .dropdownItem {
  height: 215px;
}

.not-touch-device .dropdownItem.noHeading {
  height: 183px;
}

.dropdownItem.notFirstItem {
	margin-top: 30px;
}

.section-title {
	margin: 0 0 10px 20px;
}

.dropdownContent .section-title {
  font-size: 18px;
  font-family: "Avenir LT W01 55 Roman",Verdana,Arial,sans-serif;
}

.dropdownContent .section-title a.section-title-link {
	font-size: 18px !important;
}

.dropdownContent .dropdownItem .column li.allSection {
	bottom: 0;
}

.dropdownContent .dropdownItem .new-cat {
	text-transform: uppercase;
	color: #F05323;
}