/************************************
Site overall layout settings */


.BodyContent {
    background-color: #fbf8f4; /*#ece9e9;*/
    margin-left:0px;
    margin-right:0px;
    min-height:250px;
}

.wrapper {
    width:100%;
    left: 0px;
    max-width: 1024px;
    margin: 0 auto;
    position:relative;
    z-index:1;
}

/*********************************************************
        Header Styles 
*********************************************************/

.site-head {
    margin: 5px 0 0;
    position: relative;
}

.site-head .wrapper {
    /*height: 100%;*/  
    z-index: 4;
    max-height:136px;
  }

.LogoAndTextDiv {
    height: 110%;
    left: 40.5%;
    position: absolute;
    right: 50%;
    text-align: center;
    top: -16%;
    width: 11%;
}


/*http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size*/

.site-head .NavMenuGraphic {
    z-index: -1;
    position:relative;
    width:100.7%;
    bottom:0;
    vertical-align:top;
    left: -3px;
}

/* Primary Nav */
.site-head .primary-nav-wrap {
    padding: 80px 10px 0;
    position: absolute;
    bottom: 49px;
    width:100%;
}

.primary-nav-wrap .primary-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    position:absolute;
    top:85px;
    font-size:13px;
}

.DMSite .PrimaryNavWord {
    bottom: 1px; 
    letter-spacing: 0.5px;
    left: -14px;
    position: relative;
    font-family: myTrajanFont;
    display: inline-block;
    color: #544C46;
}

.PrimaryNavWord:first-letter {
    font-size: 22px;   
}

#MainLogoText {
     
   bottom: 28%;
    left: 4%;
    width: 161%;
    z-index: 60;       
          
}

.MainLogo {
 min-width: 100%;
    height: 110%;  
}

#MainLogoText span:first-letter, #MainLogoText:first-letter {
    font-size: inherit;
    font-size: 108%;
}

#MainLogoText #MainLogoNoFirstLetter::first-letter {
font-size:inherit;
}

#MainLogoR {
    font-family: myElfFont;
}

.primary-nav > li.show .PrimaryNavWord, #MainLogoText a:hover {
    color:#f47c20 !important;
}

.primary-nav > li {
   bottom: -38px;
    z-index: 50;
    float: left;
    width: 120px;  
    padding-left:14px;
    position:absolute;
}
 
    .primary-nav > li.right {
        float: right;       
    }

 
#AdminEditLink {
    position: absolute;
    right: 60px;
    bottom: 75%;
  z-index: 5;
}

#AdminEditLink a {
    color:white;    
}


/*********************************************************
        Mobile Nav Stuff 
*********************************************************/
.ui-navbar li:last-child .ui-btn {
    margin-right: -16px !important;
}

.ui-panel-inner .nav-link {
    padding: 0 0 10px;
    display: inline-block;
}

/*http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll*/

.navbar-fixed-top {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;

}

.divider-fixed-top {
  top: 18px !important;
  z-index: 101;
  position: fixed !important;
  width: 100%;

}

.PanelMenu-fixed-Top {
    position:absolute  !important;
    top:35px  !important;

}


#mobile_nav_bar .PrimaryCTAButton {

    
}

/*********************************************************
        Site Background Image 
*********************************************************/
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}


/*********************************************************
       Drop Down and flyout nav formatting 
*********************************************************/

.primary-nav .drop-nav-wrap, .admin-nav .drop-nav-wrap {
    display: none;
    position: absolute;
    top: 108%;
    left: -24px;
    z-index: 50;
    background: #ece9e9;
}

.primary-nav .right .drop-nav-wrap {
    left: auto;
    right: 0;
}

.primary-nav .MenuDivider, .admin-nav .MenuDivider {
    margin: 6px 0 4px;
}

.drop-nav-wrap > ul, .nav-products-outter > ul, .flyout-wrap > ul {
    min-width: 140px;
    min-height: 100px;
    margin: 20px 16px;
    z-index: 55;
    position: relative;
    float:left;
}

#LibraryNavLI .nav-products-outter > ul {
    width: 165px;
}

#LibraryNavLI .drop-nav-wrap {
    left: -57px;
}

#LibraryNavLI .flyout-wrap {
    left: 109.5%;
}

#CartMenu .drop-nav-wrap {
    width: 300px;
    right: -5px;
}

#AccountNavLI .drop-nav-wrap {
    right:17%;
}

#CartMenu ul {
    margin-left:8px;
}

.drop-nav-wrap li.nav-item, .nav-products-outter li.nav-item {
    padding: 5px 15px 5px 9px;
    z-index: 55;
    line-height: 125%;
}

    .drop-nav-wrap li.nav-item:hover > a {
       color:#f47c20;
    }
        
        /* CSS only drop down nav animation  */
        .drop-nav-wrap li.nav-item:hover .flyout-wrap,
        .drop-nav-wrap li.nav-item.hover .flyout-wrap,
        .primary-nav > li:hover .drop-nav-wrap,
        .primary-nav > li.hover .drop-nav-wrap {
            display: block;
        }
    /*-----------------------------------------------------*/
    /*For the scripted Hover Inten drop down nav items*/
    .drop-nav-wrap li.nav-item.show .flyout-wrap,
    .primary-nav > li.show .drop-nav-wrap {
        display: block;
    }

    /* Remove all of the CCS only menu flyout stuff */
    .drop-nav-wrap li.nav-item.with-js .flyout-wrap,
    .primary-nav > li.with-js .drop-nav-wrap {
        display: none !important;
    }

    .drop-nav-wrap li.nav-item.with-js,
    .primary-nav > li.with-js {
        background: none !important;
    }

/*********************************************************
    Flyouts
*********************************************************/
.drop-nav-wrap .flyout-wrap {
    display: none;
    position: absolute;
    top: -20px;
    left: 111.5%;
    width: 709px;
    background: #CCC;
    z-index: inherit;
}

#LibraryNavLI .drop-nav-wrap .flyout-wrap {
    width: 550px;
}

.right .drop-nav-wrap .flyout-wrap {
    left: auto;
    right: 100%;
}

.nav-products-outter .flyout-wrap li {
    float: left;
    width: 33%;
    padding: 5px 7px;
    position: relative;
    z-index:inherit;
}

    .nav-products-outter .flyout-wrap li:nth-child(3n+1) {
        clear: left;
    }


/************************************************
    Menu product Images - cat grid page image wrapper as well
****************************************************/

.drop-nav-wrap .img-wrapper img {
    max-width:100%;
}

.drop-nav-wrap .img-wrapper {
    display: inline-block; 
    width:35%;
    float: left;
    margin: 2px 2px 1px 0; 
}

#ProductMenuFlexWrapper {
  padding:8px 14px 18px 20px;
}

#ProductMenuFlexWrapper .CatagoryGridItem {
   
    padding: 6px 1%; 
    max-width:33%;  
}


#LibraryNavLI .drop-nav-wrap .img-wrapper {
    width:95%;
}

.drop-nav-wrap .img-wrapper img{
      -webkit-border-radius: .15em; 
	-moz-border-radius: .15em;
    -o-border-radius: .15em;
    -ms-border-radius: .15em;
	border-radius: .15em;
}


.beside-image-text {
    display: inline-block; 
    margin-left: 6px;
    line-height: 160%;
    min-height:5em;
}

/************************************************
    Footer Styles 
*************************************************/
.site-foot .footer-nav {
    padding: 8px 0 8px 6px;   
    width: 100%;
}


#DMSite .footer-nav a:link, #DMSite .footer-nav a:visited {   
    padding: 0px 18px 5px 0px;
    line-height: 1;
    color: #232323 !important;
}


/*******   Skype Button   ********/
.footer-nav img {
    margin: -2px 0 0 !important;
    width: 70px !important;
    vertical-align: 0 !important;
}

.footer-nav p {
    font-size: 0px !important;
}

.footer-nav p ul{
    padding: 8px 8px 2px !important;
    width: 80px !important;
    margin-left: 8px !important;
    margin-top: 2px !important;
}

.footer-nav p li{
    padding: 0 0 8px 4px !important;
}



/************************************************
/* Utility Nav 
*************************************************/    
 
    /*Look this up for animating the drop down navs 
    http://www.thatsquality.com/articles/creating-delayed-drop-down-menus-in-jquery-without-losing-accessibility
    */
    
.utility-nav-wrap {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 5;
}

    .utility-nav-wrap > ul {
    }

        .utility-nav-wrap > ul > li {
            float: left;
        }

            .utility-nav-wrap > ul > li + li {
                border-left: 1px solid #333;
            }

    .utility-nav-wrap a {
        display: block;
        padding: 1px 10px;
        line-height: 1;
    }

    
/*************************************************************
        Site corners / rail images and layouts 
**************************************************************/

.Mated_Top_Left_Corner {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Top_Left_TopMated.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    width: 60px;
    height: 60px;
    left: -3px;
    top: 0px; 
}

.Mated_Top_Right_Corner {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Top_Right_TopMated.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    width: 60px;
    height: 60px;
    right: -4px;
    top: 0px;
}

.Bottom_Corner_Left {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Bottom_Left.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    bottom: -3px;   
    width: 60px;
    height: 60px;
    left: -3px;  
}

.Bottom_Corner_Right {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Bottom_Right.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    bottom: -3px;   
    width: 60px;
    height: 60px;
    right: -4px;
}

.VerticalRailRight {
    background: url('/Content/Layout_Images/Framing_Images/Border_Vertical_Right.png');
    z-index: 8;
    position: absolute;
    width: 20px;
    right: -4px;
    bottom: 57px;
    top: 60px;
}

.VerticalRailLeft {
    background: url('/Content/Layout_Images/Framing_Images/Border_Vertical_Left.png');
    z-index: 8;
    position: absolute;
    width: 14px;
    bottom: 57px;
    left: -3px;
    top: 60px;
}

.HorizonalBorderBottom
{
    background: url('/Content/Layout_Images/Framing_Images/Border_Horizonal_Bottom.png');     
    z-index: 8;
    position: absolute; 
    right: 56px;
    left: 57px;
    height: 20px; 
    bottom:-3px;  
}

.HorizonalBorderTopMated
{
    background: url('/Content/Layout_Images/Framing_Images/Border_Top_Mated.png');     
    z-index: 8;
    position: absolute; 
    height: 15px; 
    top: 0px;
    left: 57px;
    right: 56px;  
}

.HorizonalBorderTop
{
    background: url('/Content/Layout_Images/Framing_Images/Border_Horizonal_Bottom.png');     
    z-index: 8;
    position: absolute; 
    height: 20px; 
    top: 0px;
    left: 57px;
    right: 54px;  
}

/*Mated Corners*/

.Corner_Bottom_Right_BottomMated {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Bottom_Right_BottomMated.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    bottom: -3px;   
    width: 60px;
    height: 60px;
    right: 0px;
}

.Bottom_Corner_Left_SideMated {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Bottom_Left_SideMated.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    bottom: -3px;   
    width: 60px;
    height: 60px;    
}

.Mated2Sides_Top_Left_Corner {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Top_Left_2SidesMated.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    width: 60px;
    height: 60px;
    left: 1px;
    top: 0px; 
}

.Bottom_Corner_Left_BottomMated {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Bottom_Left_BottomMated.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    bottom: -3px;   
    width: 60px;
    height: 60px;    
}

.Corner_Top_Right_Mated2Sides {
    background: url('/Content/Layout_Images/Framing_Images/Corner_Top_Right_2SidesMated.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    width: 60px;
    height: 60px;
    right: 0px;
    top: 0px;
}



/*****************************************************************************/
/*     Flyout Section - Imagery / formating
*****************************************************************************/

.Flyout_Corner_Top_Left {
    background: url('/Content/Layout_Images/Framing_Images/Flyout-Corner-Top-Left.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    width: 60px;
    height: 60px;
    left: -1px;
    top: -1px; 
}

.Flyout_Corner_Top_Right {
    background: url('/Content/Layout_Images/Framing_Images/Flyout-Corner-Top-Right.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    width: 60px;
    height: 60px;
    right: -2px;
    top: -1px;
}

.Flyout_Corner_Bottom_Left {
    background: url('/Content/Layout_Images/Framing_Images/Flyout-Corner-Bottom-Left.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    bottom: -3px;   
    width: 60px;
    height: 60px;
    left: -1px;  
}

.Flyout_Corner_Bottom_Right {
    background: url('/Content/Layout_Images/Framing_Images/Flyout-Corner-Bottom-Right.png') no-repeat;     
    z-index: 9;
    position: absolute; 
    bottom: -3px;   
    width: 60px;
    height: 60px;
    right: -2px;
}

.Flyout_Vertical_Rail_Right {
    background: url('/Content/Layout_Images/Framing_Images/Flyout-Vertical-Rail-Right.png');
    z-index: 8;
    position: absolute;
    width: 20px;
    right: -2px;
    bottom: 57px;
    top: 59px;
}

.Flyout_Vertical_Rail_Left {
    background: url('/Content/Layout_Images/Framing_Images/Flyout-Vertical-Rail-Left.png');
    z-index: 8;
    position: absolute;
    width: 14px;
    bottom: 57px;
    left: -1px;
    top: 59px;
}

.Flyout_Horizontal_Rail_Bottom
{
    background: url('/Content/Layout_Images/Framing_Images/Flyout-Horizontal-Rail-Bottom.png');     
    z-index: 8;
    position: absolute; 
    right: 58px;
    left: 59px;
    height: 20px; 
    bottom:-3px;  
}

.Flyout_Horizontal_Rail_Top
{
    background: url('/Content/Layout_Images/Framing_Images/Flyout-Horizontal-Rail-Top.png');     
    z-index: 8;
    position: absolute; 
    height: 15px; 
    top: -1px;
    left: 59px;
    right: 58px;  
}