/* globals */
.content-container { overflow: hidden; }
.inline { display: inline; }
.blue-title {
  color: #001446;
  font-weight: bold;
}
.gradient-banner {
  color: #fff;
  text-align: center;
  background: linear-gradient(#000066, #000033);
  padding: 5px 0;
  font-size: 18px;
  margin-top: 10px;
  border-collapse: collapse;
}
.product-table-header {
  float: right;
  width: 240px;
}
.product-table {
  float: right;
  width: 240px;
  border-collapse: collapse;
  margin-bottom: 25px;
  text-align: center;
}

.product-table tr {
  border: 2px;
  border-style: solid;
  border-color: transparent transparent #d0a50a;
  height: 35px;
}

/* This is specifically needed for the content that comes
   out of the data base to fill the main body of text
   under the coin graphics on the product page
   Other than that content, header elements are not used*/
h3 {
  color: #001446;
  font-size: 16px;
  font-weight: bold;
}



/**************************************** GOLD BOX ****************************/
/* gold box containers */
#specific-info {
  width: 655px;
  float: left;
}
#gold-box-left-container { /*TODO rename choose-a-grade-container */
  width: 190px;
  float: left;
}
#specific-info-graphic-container {
  margin-bottom: 20px;
}

/* gold box header */
#information-by-grade-section {
  border: 1px solid #d0a50a;
  padding: 20px 20px 0;
}
#info-header {
  height: 60px;
}
#info-header-left {
  float: left;
}
#info-header-left-title {
  margin-bottom: 5px;
}
#info-header-left-title h1{
  margin-bottom: 0px;
  margin-top: 0px;
}
#info-header-left-title-h1 {
  margin-bottom: 0px;
  margin-top: 0px;
  font-size: 22px
}
#info-header-left-title-d {
  margin-bottom: 5px;
}
#info-header-left-title-d h1{
  margin-bottom: 0px;
  margin-top: 0px;
}
#info-header-left-title-d-h1 {
  margin-bottom: 0px;
  margin-top: 0px;
  font-size: 22px
}
#info-header-left-subtitle {
  color: #AF0000;
  font-size: 18px;
}
#info-header-right {
  float: right;
  width: 275px;
  position: relative;
  height: 55px;
}
#info-header-right-line1 {
  width: 225px;
  margin-bottom: 10px;
}
#info-header-right-title {
  color: #001446;
  font-size: 13px;
  text-align: left;
  font-weight: bold;
  padding-right: ;
  display: inline;
}
.info-header-population {
  float: right;
  color: #001446;
  font-size: 13px;
  text-align: right;
  display: inline;
}
#info-header-population-number {
  font-weight: bold;
  margin-top: 4px;
}
#info-header-population-date {
  font-size: 11px;
}
.info-header-population-d {
  float: right;
  color: #001446;
  font-size: 13px;
  text-align: right;
  display: inline;
}
#info-header-population-number-d {
  font-weight: bold;
  margin-top: 4px;
}
#info-header-population-date-d {
  font-size: 11px;
}
#info-header-right-subtitle {
  color: #7f7f7f;
  font-size: 10px;
  text-align: right;
  font-weight: bold;
}
#info-header-hr {
  display: block;
  background-color: #d0a50a;
  height: 5px;
  margin: 3px 0 5px 0;
  border: none;
}
#product-like-button {
  position: absolute;
  margin-top: -2px;
}
#product-like-button-static { /* TODO rename product-like-button-euro */
  /*float: right;*/
  /*text-align: right;
  margin-top: 7px;*/
}

/* grade selector pre1933 style*/
#grade-selector {
  position: relative;
  margin-top: 0px;
  z-index: 100;
}
#select-a-grade-text {
  margin-bottom: 8px;
}
#grade-selector-options {
  width: 190px;
  margin: 0 0 0 1px;
  padding: 0;
  list-style: none;
}
#grade-selector-images {
  width: 190px;
  margin: 0 0 0 1px;
  padding: 0;
  list-style: none;
}
/**************************************************************************************************/
/*         This is where you can adjust the spacing for the grade selector options                */
/*        Just change the first of the two valudes for padding in the selector below              */
/**************************************************************************************************/
#grade-selector-options li {
  padding: 2px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
}
.grade-selector-option {
  position: relative;
  text-align: left;
}
.grade-selector-option ul {
  padding: 2px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  list-style: none;
}
.grade-selector-option input{
  float: left;
  visibility: hidden;
}
.grade-selector-option label:hover{
  color: #AF0000;
  cursor: pointer;
}
.grade-selector-option input:checked ~ label {
  color: #AF0000;
}
.grade-selector-option-arrow {
  content:'';
  border-style: solid;
  border-width: 8px 0 8px 8px;
  border-color: transparent blue;
  width: 0;
  z-index: 1;
  position: absolute;
}
.grade-selector-option-arrow::after {
  content:'';
  border-style: solid;
  border-width: 7px 0 7px 6px;
  border-color: transparent white;
  width: 0;
  z-index: 1;
  position: absolute;
  top: -7px;
  left: -7px;
}
.grade-selector-option input:checked ~ div.grade-selector-option-arrow::after {
  border-color: transparent blue;
}

.grade-selector-option:hover div.grade-selector-option-arrow::after {
  border-color: transparent blue;
}
/* grade selector EURO style*/
#gold-box-left-container-euro { /* TODO rename choose-a-grade-container-euro */
  width: 220px;
  float: left;
}
#grade-selector-options-euro {
  width: 220px;
  margin: 0 0 0 1px;
  padding: 0;
  list-style: none;
}
#grade-selector-options-euro li span.euro-design-grade {
  font-weight: normal;
  padding-left: 1px;
}
#grade-selector-options-euro li span {
  padding-left: 21px;
}
#grade-selector-options-euro li span.italic {
  font-style: italic;
  font-size: 10pt;
  display: block;
  font-weight: normal;
  line-height: 14px;
}

/* images */
#specific-info-large-coin {
  width: 420px;
  float: right;
  margin-right: 10px;
}
#small-coins-container {
  height 95px;
  margin-top: 10px;
}
#small-coins-container div {
  height: 100px;
  margin:  0 !important;
}
#small-coins-container div img {
  height: 75px;
  display: inline;
}
#coin-image1 {
  /* width: 95%;
  margin: 0px 0px 0px 20px; */
}
#coin-image2,
#coin-image3 {
  max-height: 75px;
  max-width: 75px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
#coin-image4,
#coin-image5 {
  max-height: 75px;
  max-width: 75px;
  margin-bottom: 20px;
  cursor: pointer;
}
#coin-image2,
#coin-image4 {
  margin-right: 15px;
}

/* gold box prices */
#specific-info-price {
  overflow: auto;
}
.add-to-cart {
  width: 95px;
  height: 30px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  margin-left: 40px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
#product-qty-input {
  width: 35px;
  height: 20px;
  border: 1px solid #d0a50a;
  margin-left: 10px;
}
#price-table tr td { /* TODO rename to product-table1 */
  width: 50%;
  color: #001446;
}

#price-table tr:last-child {
  border: none;
  height: 60px;
	border: 1px;
  border-style: solid;
  border-color: transparent transparent #d0a50a;
}

/* gold box bottom */
#specific-info-bottom {
  margin-top: -10px;
}
#specific-info-details p {
  color: #595959;
  font-size: 14px;
  margin-bottom: 23px;
}
/*#specific-info-details h2 {
  float: left;
  width: 640px;
  color: #001446;
  font-size: 20px;
}*/

/* key benefits */
#specific-info-key-benefits ul {
  list-style: none;
  padding: 0;
}
#specific-info-key-benefits ul li {
  margin: 2px 0;
}
.kb-red {
  color: #AF0000;
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
}
.kb-blue {
  color: #001446;
  font-size: 14px;
}
.kb-arrow-show::before {
  content:'';
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent blue;
  width: 0;
  z-index: 1;
  position: absolute;
  margin-top: 5px;
}

/* interactive chart */
#interactive-chart {
  width: 240px;
  margin-top: 42px;
  margin-bottom: 20px;
  float: right;
  border: 1px solid #d0a50a;
  display: none;
}
#interactive-chart-image {
  width: 100%;
}
/********** END GOLD BOX ************/

/* product description section (outside gold box) */
#product-description-section {
  padding: 15px 0;
  margin-right: 20;
}
#product-description-text {
  float: left;
  margin-left: 20px;
 	margin-right: 20px;
  width: 640px;
  color: #001446;
  /*font-size: 16px;*/
}
/*#product-description-text h3 {
  float: left;
  width: 640px;
  color: #001446;
  font-size: 20px;
}*/
#product-description-section-left {
  float: left;
  width: 70%;
  color: #001446;
}
/*#product-description-section-left h3 {
  color: #001446;
  font-size: 20px;
}*/
#product-description-section-right {
  float: right;
  width: 30%;
}

/* tables */
#specifications-table tr td,
#population-table tr td { /* TODO rename to pop table and specs table; probably have two dif selectors and change code; some pages have this already some don't */
  width: 33%;
  text-align: center;
  font-size: 13px;
}
#specifications-table tr td:first-child,
#population-table tr td:first-child {
  font-weight: bold;
}
#specifications-table tr,
#population-table tr {
  color: #001446;
}

#premium-table tr td { /* TODO rename to pop table and specs table; probably have two dif selectors and change code; some pages have this already some don't */
  width: 25%;
  text-align: center;
  font-size: 13px;
}

#premium-table tr td:first-child {
  font-weight: bold;
}

#premium-table tr {
  color: #001446;
}
/* specifications table */
#product-specifications-info div::before{
  color: #001446;
  font-size: 12px;
  font-weight: bold;
}
#product-specifications-title {
  float: right;
  margin-top: 12px;
  margin-right: 0;
}
#product-specifications-title-GB {
  /*float: right;*/
  margin-top: 12px;
  margin-right: 0;
}

/* populations table */
.chart-details {
  text-align: left;
  float: right;
  color: #595959;
  font-size: 11px;
}
/*.chart-details a,
.chart-details p a {
  text-decoration: none;
  font-size: 11px;
}*/

/*SPECIAL PRICING STYLES*/

.info-header-specials {
  color: #AF0000;
  float: right;
  margin-top: 3px;
  font-size: 16px;
}

.selector-special-text {
  color: #AF0000;
  /*padding-left: 20px;*/
  /*padding-top: 10px;*/
  padding-top: 5px;
}

.selector-special-text img {
  height: 15px;
  width: 15px;
  vertical-align: text-bottom;
}

.selector-special-img {
  height: 15px;
  width: 15px;
/*  padding-left: 5px; */
  vertical-align: top;
  padding-top: 2px
  /*vertical-align: bottom;*/
}

.original-price {
/*  text-decoration: #ff0000 line-through; */
  text-decoration: line-through;
}

.special-price {
  color: #AF0000;
  /*text-align: right;*/
}

#specific-info-special-text {
  color: #AF0000;
  text-align: center;
}

/*HIDE MOBILE STUFF*/

.product-tab input,
.product-tab label {
  display: none;
}
.tab-content p a {
	display: inline;
	color: blue;
	text-decoration: underline;
	font-size: 14px;
}
#info-header-special-text {
  color: #AF0000;
  position: absolute;
  right: 0;
  bottom: 0;
  font-weight: bold;
}
/*#00146E, #001446*/
#product-isa-text {
  padding: 10px;
  background-color: #fff;
  /*outline: 1px solid #00146E;
  border: 15px solid #fff7cc;*/
}
#product-isa-container {
  background-color: #fff7cc;
  overflow: auto;
  padding: 15px;
  outline: 1px solid #00146E;
  margin-top: 25px;
  display: none;
}

#product-isa-container strong {
  display: block;
  color: #AF0000;
  padding: 0 0 10px 5px;
  font-size: 16px;
}

#product-isa-container-1 {
  background-color: #fff7cc;
  overflow: auto;
  padding: 15px;
  outline: 1px solid #00146E;
  margin-top: 25px;
  display: none;
}

#product-isa-container-1 strong {
  display: block;
  color: #AF0000;
  padding: 0 0 10px 5px;
  font-size: 16px;
}

#product-isa-container-2 {
  background-color: #fff7cc;
  overflow: auto;
  padding: 15px;
  outline: 1px solid #00146E;
  margin-top: 25px;
  display: none;
}

#product-isa-container-2 strong {
  display: block;
  color: #AF0000;
  padding: 0 0 10px 5px;
  font-size: 16px;
}

.chart-details a,
.chart-details p a {
 /* text-decoration: none; */
  font-size: 11px;
}

/*COINS BY DATE*/
.mobile-cbd-add-cart {
	width: 240px;
}


#zi-magnifier-container {
  position:relative;
  width: 400px;
  height: 400px;
  left:0;
}



/*Coin Image Zoom*/

.zi-small {
  position: absolute; 
  
  border: 1px solid gray;
  cursor:crosshair;
  /*Set the size of the image:*/
  width: 400px;
  height: 400px;
  z-index:10;
  
  background-image:url("/images/magnifier_icon1.png") ;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.zi-magnifier-glass {
  position: absolute;
  
  overflow:hidden;
  
  border: 0px solid gray;
  /* cursor: crosshair; */
  /*Set the size of the magnifier area (NOT the image) :*/
  width:  400px;
  height: 400px;
  z-index:100;  
}

.zi-magnifier-icon {
  position: absolute; 
  top:375px;
  left:375px;
  
  width: 25px;
  height: 25px;
  z-index:99;
}