/*

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: 1.2em;
   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-100 > div {
	 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.8em 0.5em;;
	 text-align: center;
	 line-height: 1em;
 }
 
 .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;
 }
 
 .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: 0em 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;
 } */