/* Styles for the tables test page */



/* Test page styles */
.docs {
   margin: 3% 5%;
   font-size: 1.2em;
}
.docs h3 {
   font-size: 1.2em;
   font-weight: bold;
   margin: .5em 0;
}
.docs p {
   margin: 0 0 1em;
}


body {
   font: 62.5%/1.3  "Lato", arial, sans-serif; /**"Helvetica Neue", Helvetica, Arial, sans-serif;**/ 
}
.a11y-only {
   position: absolute;
   left: -999em;
}

.table-wrapper {
   position: relative;

   
}
.table-menu-wrapper {
   position: absolute;
   top: -3em;
   right: 0;
}
.table-menu {
   position: absolute;
   background-color: #fff;
   padding: 10px;
   border: 1px solid #ccc;
   font-size: 1.2em;
   width: 12em;
   right: 0;
   left: auto;
}
.table-menu-hidden {
   left: -999em;
   right: auto;
}

.table-menu li {
   /**padding: .3em 0;**/
}



/* Table styles */
table {
	width: 100%;
	font-size: 1.2em;
}
thead th {
	white-space: nowrap;
	border-bottom: 1px solid #ccc;
	color: #888;
	background-color:#eee;
}
thead th, td {
   padding: .5em 1em;
	
	text-align: left;
}
th:first-child, 
td:first-child {
   text-align: left;
}
tbody th, td {
	border-bottom: 1px solid #e6e6e6;
}


.enhanced th,
.enhanced td {
   display: none;
}

.legacy-ie .enhanced th.essential, 
.legacy-ie .enhanced td.essential {
	display: inline;
}
.enhanced th.essential, 
.enhanced td.essential {
   display: table-cell;
}
.enhanced th.optional, 
.enhanced td.optional {
   display: table-cell;
}
.co-name {
   display: block;
   font-size: .9em;
   opacity: .4;
}
.table-menu-btn {
   text-decoration: none;
   color: #333;
   font-size: 1.2em;
   background: #eee url(../_img/icon-menu.png) no-repeat 5px center;
   padding: .3em 10px .3em 20px;
   border: 1px solid #ccc;
}
.displaybtn{
display:none;
}


/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) 
and (orientation: landscape) {
.enhanced th.optional, 
.enhanced td.optional {
   display: table-cell;
}

}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) 
and (orientation: portrait) {
.enhanced th.optional, 
.enhanced td.optional {
   display: table-cell;
}


}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) 
and (orientation: landscape) {
.enhanced th.optional, 
.enhanced td.optional {
   display: none;
}
.displaybtn{
display:block;
}
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
.enhanced th.optional, 
.enhanced td.optional {
   display: none;
}
.displaybtn{
display:block;
}
}

@media (max-width: 480px) {
	.enhanced th.optional, 
	.enhanced td.optional {
	   display: none;
	}
	.displaybtn{
	display:block;
	}
}