/*                                                                      */
/* 		            TABLES - TABLET UP                 	    	        */
/*                                                                      */
/* v001 02 Aug 2019 -   Initial version created from WOL tablet.css     */
/* v002 06 Aug 2019 -   Modified to new content element names           */
/*                                                                      */
/*                                                                      */

/* Instead of using this div-build table on future projects, */
/* use normal table tr td and then style for mobile only. */

/* **************************************** */
/* 		RESPONSIVE CONTRIBUTIONS TABLE		*/
/* **************************************** */

.general-table .row {
  border: 1px solid #C9CAC8 /* __ ARP 3 __ Light Grey */;
  border-width: 0 0 1px 0;
}
.general-table .row.header {
  display: block;
  background: #1C3A6B /* __ ARP 3 __ Dark Blue (Pantone 541c)  */;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}
.general-table .row.alt {
  background-color: #F0F7FD;	/* Table odd blue */
}
.general-table .row.header h4 {
  color: white;
  font-weight: bold;
}
.general-table .row h4 {
  float: left; 
  width: 31%;
  padding-left: 2%;
  margin-bottom: 0;
  padding-bottom: 10px;
  border-bottom: none;
}
.general-table .row > div,
.general-table .row > p {
  margin-left: 33%;		/* Must add to the width + left padding of the H4 */
}
.general-table .row p {
  border-bottom: none;
  float: none;
}

/* LEFT OVER FROM IAIN'S RESPONSIVE TABLES	*/
p.you-pay,
p.company-salary-exchange,
p.company-salary-deduction {
  display: inline; 
  width: 33.3%;
  padding-left: 0px;
  padding-right: 0px;
}
.contributions-table p.you-pay,
.contributions-table p.company-salary-exchange {
  border-bottom-width: 1px;
}

.contributions-table p.company-salary-exchange {
  padding-top: 10px;
  padding-bottom: 10px;
}

.contributions-table .legend {
	display: block;}

.contributions-table p .solution-description-mobile-only {
	display: none;}
	
.contributions-table div.legend p.you-pay,
.contributions-table div.legend p.company-salary-exchange,
.contributions-table div.legend p.company-salary-deduction { 
	background: #1C3A6B /* __ ARP 3 __ Dark Blue (Pantone 541c)  */;
	color: #fff;}
	
.contributions-table div.legend p.you-pay,
.contributions-table div.legend p.company-salary-exchange,
.contributions-table div.legend p.company-salary-deduction,
.contributions-table p.you-pay,
.contributions-table p.company-salary-exchange,
.contributions-table p.company-salary-deduction {
	text-align: center;}


/* **************************************** */
/* 			COOKIE TABLE					*/
/* **************************************** */

/* ++ Added by IMc - 20150924 ++ Created for master css application ++ */
/*  ++ Taken from table.css ++ */

.cookie-table { padding-bottom: 10px; }
.cookie-table h4,
.cookie-table p  {
  display: inline; 
  float: left; 
  margin: 0; 
  padding: 0;
}

.cookie-table .legend p.cookie-purpose,
.cookie-table .row p.cookie-purpose,
.cookie-table .row-alt p.cookie-purpose {
  display: inline; 
  float: left; 
  padding: 10px 0 0 0;
}

.cookie-table .legend {
    display: block;		/* AB added 29 Jun 2015 */
}

.cookie-table .legend p.cookie-purpose a {
	color: #fff;}
	
.cookie-table .legend,
.cookie-table .legend h4.cookie-name,
.cookie-table .legend p.cookie-purpose {
  background-color: #5EB9E4 /* __ ARP 3 __ Light Blue (Pantone 2915c)  */;
  color: #fff;
}

.cookie-table .legend h4.cookie-name,
.cookie-table .row h4.cookie-name,
.cookie-table .row-alt h4.cookie-name {
  width: 30%; 
  font-weight: normal;
  border: none;
}

.cookie-table .legend p.cookie-purpose,
.cookie-table .row p.cookie-purpose,
.cookie-table .row-alt p.cookie-purpose {
	width: 60%;}

.cookie-table .row h4.cookie-name:after,
.cookie-table .row-alt h4.cookie-name:after {
	content: ":";}

.prefix {
	display: none;}


