/*-------------------------------------------------------------------------*/
/* Main Style Sheet for danielsjewelers.infinitybuss Web Site.Master file and Home Page Blocks */
/*-------------------------------------------------------------------------*/

/* Logo color is #183c8f or #003399 for web-safe color. */
.logocolor          {color: #003399;} 
.ddnblue            {color: #183c8f;}
.ddnlightblue       {color: #d5e0f8;}
.ddnmediumblue      {color: #4f7be1;}
.ddndarkblue        {color: #10275d;}
.ddnred             {color: #cd0000;}
.brightblue         {color: #0000FF;}
.white              {color: #FFFFFF;}
.black              {color: black;}
.red                {color: red;}
.green              {color: green;}

.brown              {color: #6E4A1D}
.brownback          {background-color: #6E4A1D}

.logocolorback      {background-color: #003399;} 
.mediumblueback     {background-color: #4f7be1;}
.lightyellowback    {background-color: #ffffcc !important;}
.lightgreenback     {background-color: #ccffcc !important;}
.goldenalertback    {background-color: #ffbb00 !important;}
.yellowback         {background-color: #FFFF00;}
.redback            {background-color: red;}
.attentionblueback  {background-color: #0190df;}     /* rgb(1,144,223) */
.warningback        {background-color: #f9b0a5 !important;}

.goldback           {background-color: #f1edf9;}    /*#E2B966*/

.lightgray          {color: #d6d6d6;}
.mediumgray         {color: #606166;}
.darkgray           {color: #484848;}

/* These are elements, not a class and can be used like <maroon>some phrase</maroon>*/
gray {
    color: #cccccc;
}
maroon          {color: maroon;}
blue            {color: blue;}
black           {color: black;}
green           {color: green;}
red             {color: red;}
bold            {font-weight:bold;}

.specialofferbox {
    border: 6px solid #521a89;
    padding: 5px;
}

.toplink {
    padding: 4px;
    font-size: .9rem;
    text-decoration: underline;
}
.toplink:hover {
        background-color: #f1edf9;
}



/* Custom Font for the Home Page Blocks */
/*@font-face {
  font-family: "HomeFont";
  src: url('svenings-webfont.eot');
  src: url('svenings-webfont.eot?#iefix') format('embedded-opentype'),
       url('svenings-webfont.woff') format('woff'),
       url('svenings-webfont.ttf') format('truetype'),
       url('svenings-webfont.svg#sveningssonregular') format('svg');
  font-weight: normal;
  font-style: normal;
 
  }*/

/* This Body segment here is used by the any control that doesn't override these values SITE-WIDE */
body   
{
    margin: 0; 
    padding: 0
}

nowrap          { white-space: nowrap !important; }
.nowrap          { white-space: nowrap !important; }

.bold           {font-weight: bold;}
.italic         {font-style:italic }
.underline      {text-decoration: underline;}
.uppercase      {text-transform: uppercase;}
.NoPadding      {padding: 0px 0px 0px 0px}
.NoMargin       {margin: 0px 0px 0px 0px}
.bottom-align   {vertical-align: bottom;}
.nounderline a:hover {text-decoration: none;}
.center         {text-align: center;}
.right          {text-align: right;}
.left           {text-align: left;}
a.hoverunderline:hover {text-decoration: underline;}

.hidden         {display: none !important;}
.smallink       {font-size: .75rem;}
.smallcaps      {font-variant: small-caps;}

.CcLogo { vertical-align: middle; }
.CcLogoDim { vertical-align: middle ; filter: alpha(opacity=30); opacity: 0.3;  }

/* I add this class to DIVs sometimes to add a little extra space either before or after them, as needed */
.spaceAfter {margin-bottom: 1rem;}
.spaceBefore {margin-top: 1rem;}


/* HEADINGS   
----------------------------------------------------------*/

h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 3px;
}

h1
{
    color: #666666;
    text-transform: none;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

/* Medium-up  - don't do these for small, makes the font to hard to read. */
@media only screen and (min-width: 41em) {
    h1
    {
        font-size: 1.6em;
        font-weight: 200;
    }
 }


h2
{
    font-size: 1.5em;
    font-weight: 600;
}

h3
{
    font-size: 1.2em;
    font-weight: bold;
}

/*
    h4 is used SITE-WIDE for that section header with a fase left-to-right background and a nice title
*/
h4 { font-size: 1.1em; font-weight:bold; margin-top: 0px; margin-bottom: 6px; margin-left: -5px;
        text-transform: none;
        /*color: #6E4A1D; text-shadow: 1px 1px 2px rgba(226, 185, 102, 0.63);*/
        color: black; background-color: #f1edf9;
        /*background-color: #c0e7ff;  */    /* #E2B966 */  
        padding: 2px 2px 2px 8px;
        /*background: -moz-linear-gradient(left,  rgba(241,237,249,1) 0%, rgba(255,255,255,0) 100%);*/ /* FF3.6+ */
        /*background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(241,237,249,1)), color-stop(100%,rgba(255,255,255,0)));*/ /* Chrome,Safari4+ */
        /*background: -webkit-linear-gradient(left,  rgba(241,237,249,1) 0%,rgba(255,255,255,0) 100%);*/ /* Chrome10+,Safari5.1+ */
        /*background: -o-linear-gradient(left,  rgba(241,237,249,1) 0%,rgba(255,255,255,0) 100%);*/ /* Opera 11.10+ */
        /*background: -ms-linear-gradient(left,  rgba(241,237,249,1) 0%,rgba(255,255,255,0) 100%);*/ /* IE10+ */
        /*background: linear-gradient(to right,  rgba(241,237,249,1) 0%,rgba(255,255,255,0) 100%);*/ /* W3C */
        /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0e7ff', endColorstr='#00ffffff',GradientType=1 );*/ /* IE6-9 */
}


h5
{
    font-size: 1.1em;
    /*font-weight:bold;*/ 
    color: #6E4A1D;
}
h6
{
    font-size: 1em;
}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top: 0px;
}

.padded15   {padding: 15px 15px 15px 15px;}

.leftCol
{
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}


.small-left-medium-right {text-align: right;}
 @media only screen and (max-width: 40em) {
     .small-left-medium-right {text-align: left !important;}
 }



/* TOP MENU above Logo  
----------------------------------------------------------*/

.clear          {clear: both;}
.Borderless     { margin: 0px; padding: 0px; border: 0px none; border-collapse: collapse;}
.BorderNone     { border: 0px none; }

.NewLinks {
    font-size: 1.3em;
}
    .NewLinks::after {
        content: "New!";
        color: #003399;
        background-color: yellow;
        border-radius: 10px;
        margin-left: 5px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top:5px;
        padding-bottom:5px;
        text-decoration: none !important;
        font-style: italic;
    }
.NewLinksSp {
    font-size: 1.3em;
}
    .NewLinksSp::after {
        content: "Nuevo!";
        color: #003399;
        background-color: yellow;
        border-radius: 10px;
        margin-left: 5px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top:5px;
        padding-bottom:5px;
        text-decoration: none !important;
        font-style: italic;
    }



/* Logo  */
/* Large */
.MasterLogo {
    border: 0px none; 
    height: 80px;
    width: 225px;
    min-width:225px; 
    min-height:80px;
}
/* Medium */
@media only screen and (max-width: 64em) { .MasterLogo { height:80px; min-width:225px; min-height:80px; max-height:80px !important; }}
/* Small */
@media only screen and (max-width: 40em) { .MasterLogo { height:80px; min-width:225px; min-height:80px; max-height:80px !important; }}


/*.LogoRow     { font-family: Arial, Helvetica, Sans-Serif; display: table;
               width: 960px; text-decoration: none; margin: 2px 0px 6px 0px; padding: 0px 0px 0px 0px; }*/
/*.LogoRowCell { float: left; display: inline; min-height: 76px; display:table-cell; }*/
.vertmiddle  { vertical-align: middle;}
.horizmiddle { text-align:center ;}

.LoginItems  {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: .9em;    
    font-weight: normal;
    color: RGB(96,96,96);
}

.LoginHello { font-weight:bold; font-style:italic; }

a.LoginButton {font-size: .85rem;}
a.LoginButton:link, a.LoginButton:visited { color: #4d4d4d; border: 0px None; text-decoration: none;}
a.LoginButton:hover, a.LoginButton:active { color: #521a89; text-decoration: underline;}



/* MAIN MENU at top of site below Logo  
----------------------------------------------------------*/

.lowzindex {z-index: 5}

.hideSkiplink
{
    text-align: left ;
    width: 956px;
    padding: 0px;
    margin: 0px;
    z-index: 9999;   
}


.side-nav li {
    margin-bottom: 0px;
}
.side-nav li a:not(.button) {
    padding-top: 5px;           /*  Adding a little padding helps to push the other menu entries away from each other, so wrapped-lines are notricably a single item*/
    padding-left: 4px;
    padding-bottom: 5px;
    line-height: 1rem;          /*  This will cause the wrapped lines of single-entry to remain close together, and not look like other menu items*/
}

.side-nav li:not(.has-form) a:not(.button):hover {
    background-color: #4f7be1 ;  /*#4b6c9e;*/                      /*  <--- back/fore colors when hovering with mouse in DROPPED DOWN menu */
    color: white;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------*/

.title
{
    display: block;
    float: left;
    text-align: left;
    width: auto;
}



/* ----------- Scroll To Top Button --------------*/

.scroll-top-wrapper {
    /*font-family: "HomeFont", "Century Gothic", AppleGothic, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica;*/
    font-family: Arial, Helvetica, Verdana, sans-serif;    
    font-size: 1.8rem;
    position: fixed;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	text-align: center;
	z-index: 99999999;
    background-color: rgba(24,60,143, .6);
    color: #eeeeee;
	width: 48px;
	height: 48px;
	line-height: 52px;
	right: 30px;
	bottom: 50px;
	padding-top: 2px;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 50px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
	background-color: rgba(24,60,143,.9);
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
	opacity: 1.0;
}
 .scroll-top-wrapper b.upmarker {
	line-height: inherit;
    font-size: 1.8rem;
}

/* --------------- Footer Stuff ---------------- */

.FooterStripe {
    border: 0px none;
    width: 100%;
    height: 4px;
    background-color: #D6D6D6;    /* Menubar gray*/
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 4px 0px;
}

/* LOCATIONS MENU   
----------------------------------------------------------*/


/* Various attribs to apply to the Text under the images in carousels */
.centeritemtext
{
    font-size: 0.68em;
    font-weight:normal ;
    text-align:center;
    border: 0 none;    
}

.centeritemtextMedium
{
    font-weight:normal ;
    text-align:center;
    border: 0 none;    
    /*text-transform:lowercase ;*/
}

.centeritemtext150
{
    font-size: 0.68em;
    font-weight:normal ;
    text-align:center;
    width: 150px;
    border: 0 none;    
}

.centeritemtext240
{
    font-size: 0.68em;
    font-weight:normal ;
    text-align:center;
    width: 232px;
    border: 0 none;    
}

.centeritemtext320
{
    font-size: 0.68em;
    font-weight:normal ;
    text-align:center;
    width: 320px;
    border: 0 none;    
}

.featureditemsheader {
    /*Font-Family: HomeFont, Arial, sans-serif;*/
    font-family: Arial, Helvetica, Verdana, sans-serif;    
    Font-Size: 1.2rem;
    color: #183c8f;
    margin: 6px inherit 10px inherit;
}




/*--------------------------------------------------------------------------------------------------------------*/
/*  These styles are for the Please Wait .... spinning progress indicator used during some postbacks.
/*--------------------------------------------------------------------------------------------------------------*/

.wait-modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}
.wait-loading
{
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}

/*--------------------------------------------------------------------------------------------------------------*/
/* These styles are for ancillary pages, like Contact Us, Sign Up for Email/Text, Travel, Apply For Credit, etc.
/*-----------------*/

.PageHeader {margin-top:5px; margin-bottom: 5px;}

.SectionHeaders
{
    /*font-family: HomeFont, "Century Gothic", AppleGothic, "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/    
    color: #606060;
    font-size: 1.6rem;
    font-weight:lighter ;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}

.blue-legend-header {
    color: white;
    background-color: #484848;
    padding: 2px 2px 2px 5px;
    margin-bottom: 8px;
}
.blue-legend-wrapper {
    border: 1px solid #d6d6d6;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px !important;
}
.blue-double-wrapper {
    border: 3px solid #d6d6d6;
    padding: 5px;
    margin-bottom: 10px !important;
    font-size: .85rem;
}
.blue-double-wrapper li {
    font-size: .85rem;
    }

.floatleft {float:left;}
.floatright {float: right;}
.lmargin10 {margin-left: 10px;}

.Labels
{
    /*font-family: Verdana, Arial, Helvetica, Sans-Serif;*/
    font-size: 10pt;
    color: Black;
}
.Textboxes
{
    /*font-family: Verdana, Arial, Helvetica, Sans-Serif;*/
    font-size: 10pt;
    border: 1px Solid #183c8f;
    background-color: White;
}

.RedWarning
{
    /*font-family: Verdana, Arial, Helvetica, Sans-Serif;*/
    font-size: 10pt;
    color: Red;
    font-weight:bold ;
}
.examples
{
    color: #999999;
}
.leftcolumn
{
    text-align: right;
}
.required
{
    color: #0000CC;
}
.noshow {
	display:none !important;
}
hr.faded {
    border: 0;
    height: 2px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(82, 26, 137,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(82, 26, 137,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(82, 26, 137,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(82, 26, 137,0.75), rgba(0,0,0,0)); 
}

button, .button {
    background-color: #521a89;
    border-color: #521a89;
    color: White;
}
    button:hover, button:focus, .button:hover, .button:focus {
        background-color: #774bc7 !important;
        border-color: #774bc7 !important;
    }

.top-bar {
    background: #f1edf9;
}
.top-bar-section ul li {
    background: #f1edf9;
}
.top-bar-section ul li > a {
    color: #000000;
}
.top-bar.expanded .title-area {
    background: #f1edf9;
}
.top-bar-section ul li:hover:not(.has-form) > a {
    background-color: #521a89;
    color: #FFFFFF;
    background: #521a89;
}
.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
    background: #f1edf9;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
    background: #f1edf9;
}
.top-bar-section .dropdown li:not(.has-form) a:not(.button):hover {
    background-color: #521a89;
    background: #521a89;
    color: white;
}
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover {
    background-color: #521a89;
    background: #521a89;
    color: white;
}

    @media only screen and (min-width: 40.0625em) {
        .top-bar-section li:not(.has-form) a:not(.button) {
            background: #f1edf9;
        }

            .top-bar-section li:not(.has-form) a:not(.button):hover {
                background-color: #521a89;
                background: #521a89;
                color: white;
            }
    }