/*
   #### PUBLIC TABLES STYLESHEET ####
*/

/* top of each table page */

/*general message to customers..*/
#call-us-message {
    margin: 0 0 25px;
    height: 40px;
    padding: 5px 20px 5px 0;
    background: 0;
}

/*PAGE TITLE. Grade title header for the page*/
.content-area-product-segment-selected-title {
    margin-top: 0;
}

/*bar that contains message regarding price and stock packet description */
.price-stock-text {
    margin: 1px 0 30px;
    padding: 0.25em 0 0.25em;
    color: #333;
    text-align: left;
    font-style: normal;
    font-size: 90%;
}

/* ............................................... */
/* Main Table Styles */
/* ............................................... */

/*tables that hold main product data*/
.table-container {
    position: relative;
    padding: 0;
    margin: 0 0 4.5em;
    background: #fff;
    border: 1px solid #999;
    font-size: 100%;
    color: #212529 !important;
}

.table-container a {
    color: #212529;
}

/* displays product details at top of each table */
.table-title {
    position: relative;
    margin: 0;
    padding: 20px 0 10px;
    background: #fff;
    border: 0px solid #999;
    border-bottom: 0;
    text-align: center;
    z-index: 0;
}

.table-title-grade-and-treatment {
    color: #333;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 110%;
}

/*duplicate table display tag*/
.duplicate-tag {
    margin-left: 10px;
    color: #333;
    vertical-align: top !important;
    cursor: help;
    font-size: 15px;
}

/*description tag showing product and price units.*/
.uom-tag {
    position: absolute; top: 20px; left: 0; color: #333;
}

/*cells with lengths*/
.table-header {
    padding: 0;
    vertical-align: middle !important;
    font-weight: normal;
    font-size: 105%;
    background-color: #fff !important;
    border-right: 1px solid #ddd !important;
    border-top: 0 !important;
    color: #999;
    font-weight: bold;
}

.table-header:last-child {
    border-right: 0 !important;    
}


/*cell top left hand corner of table that contains table/stock description*/
#table-description {
    font: normal 19px Tahoma, Geneva, sans-serif;
    padding-left: 10px;
    background-color: #fff;
    color: #999;
    vertical-align: middle !important;
    border-top: 0 !important;
    border-right: 1px solid #ddd !important;
    text-align: left !important;
}

/* ............................................... */
/* Start General Styles */
/* ............................................... */
.msg {
    position: relative;
    border-collapse: collapse;
    width: 100%;
    margin: 0;
}

/* ................................. */
.msg td {
    position: relative;
    width: 38px;
    height: 55px;
    padding: 5px 0;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
    background-clip: padding-box; /* Fix for Firefox Border Issues */
}

.msg td:first-child {
    border-left: 0; 
}

.msg td:last-child {
    border-right: 0;
}

/*
.msg td:first-child,
.msg td:last-child {
    border-right: 0;
    border-left: 0; 
}*/

/* ****
 NOTE: Alternative row background colours handled by php, found in file public/tables/table_display_public.php (approx half way down)
 */
/* ................................. */

/*td's that display the available timber sizes*/
.timber-size-display {
    width: 10% !important;
    padding-left: 10px !important;
    vertical-align: middle !important;
    text-align: left !important;
    background-color: #FFF;
    color: #999;
    font-weight: bold;
}

/*p/size header cell*/
.pack-size-header {
    border-top: 0 !important;
}

/*p/size general column*/
.pack-size-display {
    width: 6% !important;
    color: #999;
    background-color: #fff;
    font-size: smaller;
}

.pack-size-hover {
    cursor: wait;
    color: blue;
}

/* .................... */
/*tags to show product is in cart.*/
.on-order-tag-hover {
    margin: 0 auto 0;
    font-size: 100%;
    color: blue;
    padding: 0 0 0 2px;
    font-weight: normal;
    background: none;
    text-align: center !important;
    display: inline-block;
}

.on-order-tag-hover i {
    color: #333;
    margin-right: 3px;
}

.on-order-tag-inline {
    margin: 0 auto 0;
    font-size: 100%;
    color: blue;
    padding: 0 0 0 2px;
    font-weight: normal;
    background: none;
    border-bottom: 1px solid #aaa;
    text-align: center !important;
    display: inline-block;
}

.on-order-tag-inline i {
    color: #333;
    margin-right: 3px;
}
/* .................... */

#inline-special-notice-container {
  margin-top: -5px;
  border: 1px solid #999;
  padding: 10px;
}

.inline-special-legend {
    width: 60px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 10px;
}

#inline-special-message {
   display: inline;
   margin-left: 5px;
}

/*highlight cell where special is set*/
.inline-special-highlight {
    background-color: #fcca75 !important;
    border: 1px solid #e9be75 !important;
}

.group-message {
    width: 764px;
    background: #ececec;
    padding: 0.25em;
    color: #333;
}

.group-message a {
    font-weight: normal;
    color: #333;
    border-bottom: 1px dotted #333;
}

/*================================*/
/* Two different out of stock messages, the first for a clicked product link that has no database entries for the product group yet or at all,
   the second for product groups that are listed in the database, but have no stock listed against them. */


.no-stock-available-message {
    margin-top: 0;
    margin-bottom: 30px;
    border-top: 0;
    padding: 4em 0 4em;
    text-align: left;
    color: #001808;
}

 /*no stock image placement*/
.out-of-stock-normal-message {
    position: absolute;
    top: 19px;
    left: -4px;
    width: 120px;
    color: #292a30;
    font-weight: bold;
    font-size: 10pt;
    text-align: left;
    padding: 5px;
    letter-spacing: 1px;
    z-index: 99;
}

.out-of-stock-normal-message img {
    vertical-align: middle;
    width: 110px;
}

/*============ end out of stock styles ====================*/

.input-field {
    width: 35px !important;
    height: 20px !important;
    margin: 2px 0 5px !important;
    padding: 1px 2px !important;
    text-align: center;
    color: #000;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    background: #fff !important;
    font-size: 90%;
}

.input-field:focus {
    border: 1px solid #888 !important;
    border-radius: 0 !important;
}

 /*text in cell displaying number of stock packets available for sale*/
.num_available {
  /*  display: inline-block;
    min-width: 40px;
    vertical-align: middle; */
}

.num_available a {
    font-weight: normal;
}

/* ............................... */
/*this block styles the table pricing display according to program settings.*/
.inline-price-box {
    margin: 3px 0 0px 0;
    padding: 0 !important;
    text-align: center;
    font-size: 81% !important;
    font-weight: normal;
    background: 0;
    color: #5a5a5a;
    font-style: italic;
}

.inline-price-detail {
    margin-left: 7px;
}

.inline-price-detail i {
    font-size: 13px;
    color: #ca0022;
    cursor: wait;
}

.hover-price-box {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 0;
    height: 0;
    border-width: 0 0 11px 11px;
    border-color: transparent transparent #ccc #f9f9f9;
    border-style: solid;
    cursor: wait;
}

.hover-price-box:hover {
    border-width: 0 0 15px 15px;
    border-color: transparent transparent #333 #EEE;
}

/* NOT IN USE at the moment 
.hover-price-box {
    position: absolute;
    bottom: 5px;
    right: 7px;
    cursor: wait;
}

.hover-price-box i {
    font-size: 12px;
    color: #AAA;
}
*/
/* ............................... */

.msg-footer {
   padding: 0 10px !important;
   font-size: 85%;
   text-align: right !important;
   vertical-align: middle !important;
}

.msg-footer a {
    color: #999 !important;
}


.msg-footer a:hover {
    color: #333 !important;
    text-decoration: none;
    text-decoration: underline;
}


/* ------------------------------------------------------------------ */
/* Start User Error tooltip styles - all this code found in basket.js */
/* ------------------------------------------------------------------ */
div[name=error-comments-container] {
    position: relative;
    height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;  /* a border must be set to align to top of table cell correctly, so set as transparent */
}

div[name=error-comments-container-p] {
    height: 0;
    position: relative;
    margin: 0;
    padding: 0;
}

#error-comments-info {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background: #8aa0a2;
    border: 0;
    z-index: 200;
}

#error-comments-info table {
    border-collapse: collapse;
}

#error-comments-info td {
    margin: 0;
    padding: 0;
    height: 25px;
    background: #8aa0a2;
    border: 0;
}

#error-comments-info-header {
    padding: 10px 5px 0;
    margin: 0;
    color: #FFF;
    font-size: 90%;
    font-weight: bold;
    border: 0;
    text-align: center;
}

#error-comments-info-content-container {
    background: #8aa0a2;
    border-top: 0;
    padding: 5px 0;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 80%;
}

#error-comments-info-content-container p {
    text-align: center !important;
}

#error-comments-h4-image {
    vertical-align: middle;
    width: 16px;
}

#error-comments-info p {
    margin: 5px 10px 10px;
    padding: 0;
    color: #FFF;
    text-align: left;
}

#error-close {
    position: absolute;
    right: 8px;
    top: 8px;
    cursor: pointer;
    font-weight: bold;
}