/*

Defines grid class rules used site-wide, mostly for tablular presentations at present (2015-08-01)
Includes:
 - backgrounds
 - fills
 - borders
*/


/* FONTS */

.table-header {
   font-family:'Karla', sans-serif;
	color: #000000;
	font-size: 1em;
}

.table-cell-6em  { width: 6em; }
.table-cell-8em  { width: 8em; }
.table-cell-10em { width: 10em; }
.table-cell-12em { width: 12em; }
.table-cell-14em { width: 14em; }


/* FILLS */
.light-gray-fill    { background: #f2f2f2; }
.white, .white-fill { background: #fff;    }

.halfchart-background { background:#ece7e0; }





/* FAKE TABLE RULES */

.checklist-background {
   background:#ece7e0;
}

.checklist-table, .cancellist-table{
   list-style-type:none;
   list-style-position:outside;
   width: 18.75em;
   max-width: 100%;
}

.checklist-table li, .cancellist-table li{
   color:#000000;
   display:block;
   padding:.45em 0 .45em 2em;
   background: url(/images/checklist-icon.png) no-repeat .45em .52em;
}

/* override .checklist-wide from style-2015 */

.checklist-wide {
   list-style-type:none;
   list-style-position:outside;
   border-top:1px dotted #efefef;
   width:auto; }

.checklist-wide li {
   border-bottom: 1px dotted #efefef;
   color:#000000;display:block;
   padding:.5em 0 .5em 1.85em;
   background: url(/images/check.png) no-repeat 1px 9px;
}

.ballpark-header-font p {
  font-family: 'Merriweather', serif;
  color:#fff !important;
  font-size: .9em;
  line-height: 1.4em;
  text-align: center;
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

.ballpark-body-font p {
  font-family: 'Karla', sans-serif;
  color:#000000 !important;
  font-size: .9em;
  line-height: .9em;
  text-align: center;
}

.ballpark-header-row {
  display: table;
  margin: auto;
}

.ballpark-header-font {
  display: table-cell;
  vertical-align: middle;
}

.bw-header-row  { background: #0C0C0C; }
.bw-odd-row  { background: #f2f2f2; }
.bw-even-row { background: #fff;    }

.color-header-row  { background: #619BA5; }
.color-odd-row  { background: #eefafd; }
.color-even-row { background: #fff;    }

.price-table-row-font, .price-table-header-font, .price-table-title-font{
  font-family: 'Merriweather', sans-serif;
  color:#707070 !important;
  font-size: .9em;
}

.price-table-header-font {
  font-size: 1em;
}

.price-table-title-font {
  font-size: 1.2em;
  color: #000000 !important;
}

.price-table-row {
   padding-top:    .25em !important;
   padding-bottom: .25em !important;
}

.box-075.ballpark-table {
	width: 74%;
	margin: .25em 0.5% .25em 0.5%
}

.box-025.binding-chart-features {
	width: 24%;
	margin: .25em 0.5% .25em 0.5%
}

@media  only screen and (max-width: 69em)  {
	.ballpark-table .grid-100,
	.ballpark-table .grid-050 {
		min-width: 0 !important;
	}

	.ballpark-table .box-025 {
		border: none;
	}

	.ballpark-table .box-020 p {
		margin: 0.2em auto 0.2em auto;
	}
}

.cancellist-table li{ background: url(/images/cancel.png) no-repeat  .45em .52em;  }

/* standard alternating row colors, these can be fiddled being aware that ALL fake tables (responsive div based) will be affected */
.odd-row  { background: #f2f2f2; }
.even-row { background: #fff;    }

/*.gp-table:nth-child(even) {background: #CCC}  THIS stuff ONLY works for actual tables, here for reference
.gp-table:nth-child(odd) {background: #FFF}*/

/* BORDERS */
.gray-border, .grey-border-radius {
	border: 1px solid #adabab !important;
	box-sizing: border-box;
}
.grey-border-radius { border-radius:  .5em; height: auto; }
.no-border-right  { border-right: 0px; }
.no-border-left   { border-left: 0px;}

.gray-border-table {
  border: 1px solid #adabab;
  border-radius: .5em;
  overflow: hidden;
}

.gray-line-right {
   top: 0px;
   width: 1px;
   height: 150%;
   background:  #d8d6d6;
   color: transparent;
}
.gray-line-right:before { content: '.'; }

.gray-border-tablerow { border-bottom: 1px solid #d8d6d6; }

.gray-border-tablerow:nth-child(odd) { background: #f2f2f2; }
.gray-border-tablerow:nth-child(even){ background: #fff;    }

.alternative_cls:nth-child(odd){
    background:#ccc;
}
.gray-border-row-odd {
   background: #f2f2f2;
   border-bottom: 1px solid #d8d6d6;
}

.gray-border-row-even {
    background: #fff;
   border-bottom: 1px solid #d8d6d6;
}

/*Colin's Design Services Table */

.table-title-font, .level-font, .price-font1, .price-font2, .price-font3, {
  font-family:'Karla', sans-serif;
  font-size: 1.1em;
}

.table-title-font, .level-font {
  color: #000000;
  font-weight: 700;
}

.price-font1 { color: #595977; }
.price-font2 { color:#8f5a1e; }
.price-font3 { color: #e17533; }

.brown-border-table {
  border: 1px solid #ae712c;
  overflow: hidden;
  display: table;
  width: 95%;
  margin: 0 auto;
  font-family: 'Karla';
}

.brown-border-tablerow, .title-tablerow { border-bottom: 1px solid #ae712c; }

.title-tablerow {
  background: #efdac3;
}

.brown-border-tablerow:nth-child(odd) { background: #fef8f1; }
.brown-border-tablerow:nth-child(even){ background: #fff;    }

.brown-border-tablerow button {
  margin-top: 0.7em;
  margin-bottom: 0.7em;
  cursor: pointer;
}

.features-font {
  font-family:'Karla', sans-serif;
  font-size: 1em !important;
  color: #000000;
}

.brown-border-table a:visited, .brown-border-table a:link {
  color: #aa0a0a;
}

.brown-border-table a:hover {
  color: #db5e5e;
}

.brown-border-tablerow .price-table-row {
  display: table;
  margin: 0.45em 0.75em 0.45em 0.75em;
}

.brown-border-tablerow .price-table-row > div {
  display: table-cell;
  vertical-align: middle;
}

@media  only screen and (max-width: 69em)  {

	.brown-border-tablerow .price-table-row, .brown-border-tablerow .price-table-row > div {
    display: inline-block;
    margin: .25em 1.5% .25em 1.5%
  }

}

.stock-table {
	font-size: 0.9em;
}

.stock-table .grid-100 {
	display: table;
	min-width: 0 !important;
}

.stock-table .grid-025,
.stock-table .grid-014 {
	display: table-cell;
	vertical-align: middle;
	border: 1px solid #adabab;
	min-width: 0 !important;
}

.stock-table .grid-100:first-child,
.stock-titles {
	background: #f2f2f2;
	font-weight: 700;
}

.stock-table p {
	margin: 0.5em;
	text-align: center;
}

.stock-titles {
	width: 100%;
	border: 1px solid #adabab;
	text-align: center;
	margin-top: 2em;
	font-size: 1.2em;
	box-sizing: border-box;
}

@media  only screen and (max-width: 69em)  {
	.stock-table {
		font-size: 0.8em;
	}
}

/* DESIGN TABLE */

.design-table {
	background: white;
	font-size: 0.9em;
	border: 1px solid #adabab;
	box-sizing: border-box;
	transition: 0.3s;
	position: relative;
	border-right: none;
	position: relative;
	overflow: hidden;
	flex: 1 1 0px;
}

.design-table:first-of-type {
	border-radius: .25em 0 0 .25em;
	border-left: 1px solid #adabab;
}

.design-table:last-of-type {
	border-radius: 0 .25em .25em 0;
	border-right: 1px solid #adabab;
}

.design-table .grid-035,
.design-table .grid-065 {
	display: table-cell;
}

.design-table .grid-100,
.design-table .grid-035,
.design-table .grid-065 {
	vertical-align: middle;
	min-width: 0 !important;
	box-sizing: border-box;
}

.design-title {
	background: #eee;
	/*font-weight: 700;*/
	box-sizing: border-box;
	transition: 0.3s;
	border-bottom: 1px solid #adabab;
	/*border-radius: 0.2em 0.2em 0em 0em;*/
	transition: 0.3s;
	font-size: 1.1em;
}

.design-table p {
	margin: 0.7em;
	text-align: center;
	line-height: 1.3em;
	color: #333232;
}

.design-title p {
	margin: 0.5em;
}

.design-table hr {
	width: 80%;
	border: 0;
	border-top: 1px solid #adabab;
	margin: 0 auto;
}

.design-table .image-circle {
	width: 5em;
	height: 5em;
	border: 2px solid #adabab;
	background: #eee;
	border-radius: 50%;
	transition: 0.3s;
	position: absolute;
	left: 50%;
	transform: translate(-50%,0);
	top: -3em;
}

.design-table .image-circle img,
.design-table .image-circle i,
.design-table .image-circle svg {
	max-width: 70%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.5em;
	color: #437c4c;
	margin: 0;
}

.design-table .image-circle .fa-star,
.design-table .image-circle .fa-check {
	display: none;
}

.design-table.recommend .image-circle {
	background: #f8f1c8;
}

.design-table.recommend .image-circle .fa-star {
	display: block;
	color: #d4af37;
}

.design-table.recommend .image-circle img {
	display: none;
}

.design-table .extra {
	font-size: 0.9em;
	padding-top: 0;
	font-weight: 400;
}

.design-table.recommend {
	flex-basis: 1em;
	margin: -1em 0;
	border: 1px solid #adabab;
}

.design-table.recommend .design-title {
	background: #dfeaf5;
}

/*.design-table.recommend .design-title .sublabel { color: #fff; }
.design-table.recommend .design-title .extra { color: #ddd; }*/

.design-table.recommend + .design-table {
	border-left: none;
}

.design-table.recommend .design-title:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 1.5em;
	border-right-color: #277fcc;
	border-top-color: #277fcc;
	transition: 0.3s;
}

.design-table.recommend .design-title:before {
	content: '\f005';
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	font-size: 1.1em;
	color: #dfeaf5;
	position: absolute;
	top: 4px;
	right: 3px;
	z-index: 1;
	transition: 0.3s;
}

.design-table.recommend button {
	bottom: 3em;
	background-color: #dfeaf5;
}

.genre-text {
	color: #277fcc;
	margin-top: 0.5em;
}

/*.design-table .design-title.input-alert .sublabel { color: #333232; }
.design-table .design-title.input-alert .extra { color: #999; }*/

.design-table.recommend .design-title.input-alert:after {
	border-right-color: #aa0a0a;
	border-top-color: #aa0a0a;
	transition: 0.3s;
}

.design-table.recommend .design-title.input-alert:before {
	color: #f7e7e7;
	transition: 0.3s;
}

.design-table.quote-box-selected {
	outline: 4px solid #437c4c;
	transition: 0.3s;
	z-index: 1;
	/*box-shadow: 0px 0px 4px 0px #437c4c;*/
}

.design-table.quote-box-selected .image-circle {
	border-color: #437c4c;
	background: #d7e9d9;
	transition: 0.3s;
}

.design-table.quote-box-selected .design-title {
	background: #d7e9d9;
	border-bottom: 1px solid #437c4c;
	transition: 0.3s;
}

.design-table.quote-box-selected button {
	color: white;
	background-color: #437c4c;
	border-color: #437c4c;
}

/*.design-table.recommend.quote-box-selected .design-title:before {
	color: #d7e9d9;
}*/

.cover-design-levels,
.text-design-levels {
	display: flex;
}

.cover-design-levels .design-table .hollow-button,
.text-design-levels .design-table .hollow-button {
	position: absolute;
	bottom: 0.75em;
	left: 50%;
	transform: translate(-50%,0);
}

.cover-design-levels .design-table button,
.text-design-levels .design-table button {
	width: 10em;
	border-color: #adabab;
	color: #333232;
	pointer-events: none;
	background: #eee;
}

@media  only screen and (max-width: 50em)  {
	.design-table,
	.design-table:first-of-type,
	.design-table:last-of-type {
		border-radius: .25em;
		border: 1px solid #adabab;
	}

	.design-table:first-of-type { margin-top: 0; }
	.design-table:last-of-type { margin-bottom: 0; }
}

/* MARKETING TABLE */

.marketing-table {
	border: 1px solid #adabab;
	padding-bottom: 2em;
}

.marketing-table .title-row {
	background: #6A8661;
	color: white;
	text-align: center;
	font-size: 1.4em;
	padding: 1em;
	margin: auto;
}

.marketing-table p {
	text-align: left;
	margin: 1em 2em 0em 2em;
}

.marketing-table ul {
	margin: 2em 2em 0em 2em;
}

.marketing-table ul li {
	cursor: pointer;
	transition: 0.2s;
}

.marketing-table ul li.strike,
ul.floating-ul li.strike {
	color: #ccc !important;
	text-decoration: line-through;
}

.marketing-table ul li:hover {
	color: #888;
	transition: 0.2s;
}

.marketing-table .grid-075 {
	border-right: solid 2px #eee;
	box-sizing: border-box;
}

.marketing-table .radius-box {
	background: white;
	box-shadow: none !important;
	border: none;
	margin-right: 2em;
}

.marketing-table .radius-box i,
.marketing-table .radius-box svg { transition: 0.2s; }
.marketing-table .radius-box:hover i,
.marketing-table .radius-box:hover svg {
	color: #6A8661;
	transition: 0.2s;
}

.marketing-table .radius-box h4 { transition: 0.2s; }
.marketing-table .radius-box:hover h4 {
	color: #888;
	transition: 0.2s;
}