﻿
/* basic elements -- override body in page when main repeater not necessary, eg popup, login */

.wf-loading  { visibility:hidden;   }
.wf-active   { visibility:visible;  }
.wf-inactive { visibility: visible; }


body {
    margin: 0;
    border: 0;
    background: url('/assets/bgCenter1167.gif') repeat-y center #fbfbfb;
    background-color: #ffffff;
    font: normal 13px OS45, Arial, Helvetica;
    color: #666;
}

tbody {
    font: normal 13px HN55, Arial, Helvetica;
    font-weight: normal;
    color: #666;
}

*:focus { outline: none; }

a, a:link, a:visited {
    color: #666;
    text-decoration: underline;
}

a:hover {
        color: #d8292f;
        text-decoration: underline;
}
a:active, a:focus { outline: none; }

textarea:focus, input:focus {
    outline: none;
}


/* classes for div/table alignment */

.center { margin-left: auto; margin-right:auto; }
.right  { margin-left: auto; }
.left   { margin-right: auto; }
    
/* classes for text alignment */
    
.alignLeft    { text-align:left; }
.alignRight   { text-align:right; }
.alignCenter  { text-align:center; }
   
.alignTop       { vertical-align:top; }
.alignMiddle    { vertical-align:middle; }
.alignBottom    { vertical-align:bottom; }
    
/* Top and top repeaters */

.bgPageContent
{
    /* background-color:#ffffff; */
    padding-top:0;
    overflow-x:hidden;
}

.bgNavigation {
    width:100%; 
    overflow-x:hidden;
}
.bgContentGradient {
    width: 100%;
    overflow-x: hidden;
    background: url('/assets/Gradient-Hline5.png') repeat-x;
    height: 5px;
}
    
.bgPageFooter
{
    width:100%;
    height:104px;
    min-width:1160px;
    text-align: center;
    background-color:#333;
    vertical-align:top;
}

/* common TetraSphere elements (text boxes, buttons, etc) */

.bubblepanel {
    background-color: #f0f1f3;
    outline: none;
    -webkit-appearance: none;
    -webkit-border-radius: 4px;
    margin: 15px auto 0 auto;
    padding: 15px 0 15px 0;
    color: #666;
    border-radius: 4px;
}

.bubblepanelgrey
{
    background-color:#ffffff;
    color: #506e9a;
    border: 1px solid #e2e2e2;
    -webkit-appearance: none;
    -webkit-border-radius: 5px;
    margin: 15px auto 0 auto;
    padding: 15px 0 15px 0;
    border-radius: 5px;
}

.errorpanel
{
    background-color:#e0cdf4;
    color: #506e9a;
    outline: none;
    -webkit-appearance: none;
    -webkit-border-radius: 4px;
    margin: 15px auto 0 auto;
    padding: 15px 0 15px ;
    border-radius: 4px;
}

.formbutton, .formbutton2, .formbutton3, .formbuttonwhite {
    cursor: pointer;
    font: 14px HN55, Helvetica, sans-serif;
    height: 32px;
    outline: none;
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.formbutton { /* green button */
    color: #666;
    background: #ffffff;
    border-top: solid 1px #aeaeae;
    border-right: solid 1px #aeaeae;
    border-left: solid 1px #aeaeae;
    border-bottom: solid 1px #aeaeae;
    padding: 0 0 3px 0;
}

    .formbutton:hover {
        background: #999;
        border-color: #666;
        color: #ffffff;
    }

.formbutton2 { /* identical to formbutton in default scheme */
    color: #ffffff;
    background: #666;
    border: solid 1px #666;
    padding: 0 0 3px 0;
}

.formbutton3 { /* identical to formbutton in default scheme - there are no accent buttons */
    color: #ffffff;
    background: #666;
    border: solid 1px #666;
    padding: 0 0 3px 0;
}

.formbuttonwhite { /* white button */
    color: #666;
    background: #ffffff;
    border-top: solid 1px #aeaeae;
    border-right: solid 1px #aeaeae;
    border-left: solid 1px #aeaeae;
    border-bottom: solid 1px #aeaeae;
    padding: 0 0 3px 0;
}

    .formbutton2:hover, .formbutton3:hover, .formbuttonwhite:hover {
        background: #999;
        border-color: #666;
        color: #ffffff;
    }

    .formbutton[disabled="disabled"], .formbutton.disabled, .formbutton[disabled="disabled"] .formbutton:hover,
    .formbutton2.disabled .formbutton2:hover, .formbutton2[disabled="disabled"], .formbutton2.disabled,
    .formbutton3[disabled="disabled"] .formbutton3:hover, .formbutton3.disabled .formbutton3:hover,
    .formbuttonwhite[disabled="disabled"], .formbuttonwhite.disabled, .formbuttonwhite[disabled="disabled"] .formbuttonwhite:hover,
    .formbuttonwhite.disabled .formbuttonwhite:hover {
        background: #d0d0d0;
        color: #f4f5f6;
        border-top: solid 1px #a0a0a0;
        border-right: solid 1px #a0a0a0;
        border-left: solid 1px #a0a0a0;
        border-bottom: solid 1px #a0a0a0;
    }


.ListBoxTetra {
    border: 1px solid #aeaeae;
    font: 13px/15px HN55;
    color: #666;
}


.ListBoxTetra option:checked {
    background: #506e9a;
    color: #fff;
}

.CmbTetra {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* remove default arrow */
    background: url('/assets/icoDown.png') no-repeat right;
    border: 1px solid #aeaeae;
    height: 23px;
    font: 11px Verdana;
    color: #666;
    padding-left: 5px;
}

.CmbTetra::-ms-expand {
    display: none;
}
    

.TxtBoxTetra {
    border: 1px solid #aeaeae;
    font: 13px/15px HN55;
    color: #666;
    padding: 3px 0 2px 0;
    margin-top: 0;
}


.TextBoxRepeating {
    color: #666;
    font: 13px/15px HN55;
    text-align: Center;
    border: 1px solid #aeaeae;
    width: 30px;
}

inPanel
{
    border: 1px solid #94a7b5;
        
}



.FieldLabel {
    color: #4a4f55;
    font: 14px/23px HN45, Arial Helvetica;
}
    
.FieldText
{
    color: #666;
    font: 14px/23px HN45, Arial Helvetica;

}
        
    
.AccentText
{
    font: normal 11px Tahoma, Arial;
    color: #21395a;
}

.SmallText {
    font: normal 10px HN55, Arial, Helvetica;
    color: #606060;
}
    
    

.TetraTabMultiPage
{
    border-top: none 1px #f5f6f7;
    border-left: solid 1px #e2e2e2;
    border-right: solid 1px #e2e2e2;
    border-bottom: solid 1px #e2e2e2;
    background-color: #f5f6f7;
}
    
.TetraFormHeaderTable
{
    padding:10px; 
    width: 680px; 
    border: solid 1px #a5b3c5; 
    border-collapse:collapse; 
}

.HeaderFieldCell {
    background-color:#f5f6f7; 
    border: 1px solid #ffffff;
}

.TotalsFieldTable { border:1px solid #aeaeae;  }

.TotalsFieldCell {
    background-color:#f5f6f7; 
    padding-right:5px;
    height:30px;
}
    
/* Header */

.HeaderLink, a:link.HeaderLink, a:visited.HeaderLink, a:active.HeaderLink {
    font: normal 16px HN45, Arial, Helvetica;
    color: #53585e;
    text-decoration: none;
    border-bottom: none;
}

a:hover.HeaderLink {
    font: normal 16px HN45, Arial, Helvetica;
    color: #d8292f;
    text-decoration: none;
    border-bottom: dotted 1px #506e9a;
}

.HeaderDivider {
    font: normal 16px HN45, Arial, Helvetica;
    color: #c2c2c2;
    text-decoration: none;
}

.UniformHeader {
    font: normal 20px HN45, Arial, Helvetica;
    color: #606060;
    border-bottom: dotted 1px #606060;
}


.MajorHeader {
    font: normal 30px HN45, Arial, Helvetica;
    color: #666;
}

.MassiveHeader {
    font: normal 36px HN45, Arial, Helvetica;
    color: #666;
}

/* Footer */



.FooterLink, a:link.FooterLink, a:visited.FooterLink, a:active.FooterLink {
    font: normal 11px HN55, Verdana, Arial, Helvetica;
    color: #a0a0a0;
    text-decoration: none;
    border-bottom: none 0px #FFFFFF;
}

a:hover.FooterLink {
    font: normal 11px HN55, Verdana, Arial, Helvetica;
    color: #ffffff;
    text-decoration: none;
    border-bottom: dotted 1px #FFFFFF;
}
   
    
    

/* Product Grid Item Hyperlink */

.ProductGridLink, a:link.ProductGridLink, a:visited.ProductGridLink, a:active.ProductGridLink {
    font: normal 18px HN45, Arial, Helvetica;
    color: #506e9a;
    text-decoration: none;
    border-bottom: none 0 #FFFFFF;
}

a:hover.ProductGridLink {
    font: normal 18px HN45, Arial, Helvetica;
    color: #FF0000;
    text-decoration: none;
    border-bottom: none 1px #21395a;
}

.ProductGridSku, .ProductGridPrice {
    font: normal 16px HN45, Arial, Helvetica;
    color: #666;
    text-decoration: none;
        
}

/* Reverse Link - go from light to dark */

.ReverseLink, a:link.ReverseLink, a:visited.ReverseLink, a:active.ReverseLink {
    font: normal 14px HN55, Arial, Helvetica;
    font-weight: normal;
    color: #666;
    text-decoration: none;
    border-bottom: dotted 1px #506e9a;
}

a:hover.ReverseLink {
    font: normal 14px HN55, Arial, Helvetica;
    color: #b52327;
    text-decoration: none;
    border-bottom: dotted 1px #506e9a;
}

    

/* MiniCart styles */
    
    .MiniCart {
        width: 185px;
        margin: 0 auto 0 auto;
        
    }

.MiniCartText, a:link.MiniCartText, a:visited.MiniCartText, a:active.MiniCartText {
    font-family: HN55, Arial, Helvetica;
    font-size: 11px;
    font-weight: normal;
    color: #666;
    text-decoration: none;
    border-bottom: none;
}

a:hover.MiniCartText {
    font-family: HN55, Arial, Helvetica;
    font-size: 11px;
    font-weight: normal;
    color: #FF0000;
    text-decoration: none;
    border-bottom: dotted 1px #21395a;
}


.MiniCartTotalText {
    font-family: HN55, Arial, Helvetica;
    font-size: 11px;
    font-weight: normal;
    color: #666;
}

.MiniCartItem
{
    border-bottom: dotted 1px #D0D0D0;
    padding: 3px 0 3px 0;
    text-align: left;
    vertical-align: top;
    width:115px;
}

.MiniCartQty
{
    border-bottom: dotted 1px #D0D0D0;
    padding: 3px 0 3px 0;
    text-align: right;
    vertical-align: top;
    width:20px;
}

.MiniCartEmpty
{
    border: dotted 1px #D0D0D0;
    padding: 10px 3px 10px 3px;
    text-align: center;
}


.ProgressText {
    font: normal 16px HN45, Arial, Helvetica;
    color: #666;
}

.ProgressTextSelected {
    font: normal 16px HN45, Arial, Helvetica;
    color: #506e9a;
}        

/* used in popup panels */
    .PanelTetra 
    {
        border: solid 1px #4a709e; 
        background-color:#FFFFFF; 
    }

.LanguageSelector, a:link.LanguageSelector, a:visited.LanguageSelector, a:active.LanguageSelector {
    font: normal 18px HN45, Arial, Helvetica;
    color: #666;
    text-decoration: none;
    border-bottom: dotted 1px #666;
}

.TelerikModalOverlay {
    background: #333333 !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=70) !important;
    opacity: .7 !important;
    -moz-opacity: .7 !important;
}




.TopBar, a:link.TopBarLink, a:visited.TopBarLink, a:active.TopBarLink {
    font: normal 12px HN55, Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-decoration: none;
}

a:hover.TopBarLink {
    font: normal 12px HN55, Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px dotted white;
}


.capAttachmentThumb {
    margin: 20px 0 0 20px;
    width: 340px;
    padding: 0;
    border: 1px solid #CCCCC8;
    background-color: white;
    float: left;
}

.capAttachmentThumbTable {
    margin: 0;
    padding: 0;
    border: none;
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.capAttachmentThumbHeader {
    height: 31px;
    width: 320px;
    background-color: #E6E6E6;
    padding: 0 10px;
    text-align: left;
    border-bottom: 1px solid #CCCCC8;
    overflow: hidden;
}

.capAttachmentThumbImage {
    padding: 2px 2px 0;
    text-align: center;
    vertical-align: middle;
    overflow-x: hidden;
    overflow-y: hidden;
}

.capAttachmentThumbFooterID {
    height: 31px;
    border-top: 0px solid #CCCCC8;
    padding: 0 10px;
    text-align: left;
    overflow: hidden;
}

.capAttachmentThumbFooter {
    height: 31px;
    border-top: 0px solid #CCCCC8;
    padding: 0 10px;
    text-align: left;
    overflow: hidden;
}

.capAttachmentThumbLink a {
    text-decoration: none !important;
    color: #666 !important;
}

.capAttachmentThumbLink:hover {
    /*background-color: #E6E6E6;*/
    color:red;
}

.capAttachmentThumbPager {
    margin: 20px 0;
    height: 30px;
    text-align: center;
}

.capAttachmentThumbPagerIndex {
    display: inline-block;
    margin: 0 3px;
    padding: 8px 12px;
    color: #242B4A !important;
    text-decoration: none !important;
}

.capAttachmentThumbPagerIndex:hover {
        background-color: #90AED1 !important;
    }

.capAttachmentThumbPagerCurrentIndex {
    display: inline-block;
    margin: 0 3px;
    padding: 8px 12px;
    color: white;
    background: #242B4A;
}

.capAttachmentThumbPagerEmpty {
    height: 120px;
    background-color: white;
    color: #7D7D78;
    text-align: center;
}

.capAttachmentThumbPagerEmpty p {
        line-height: 120px;
    }

.capHideDiv {
    display: none;
}


.capFullWidthRightGutterOnly {
    padding: 0 20px 0 0;
    /*clear: both;*/
}


.AttachFileLink, a:link.AttachFileLink, a:visited.AttachFileLink, a:active.AttachFileLink {
    font: normal 12px HN55, Verdana, Arial, Helvetica;
    color: #666;
    text-decoration: none;
    border-bottom: none 0px #FFFFFF;
}

a:hover.AttachFileLink {
    font: normal 12px HN55, Verdana, Arial, Helvetica;
    color: #ff0000;
    text-decoration: none;
    border-bottom: dotted 1px #FFFFFF;
}
   