@charset "UTF-8";
/* CSS Document */

/*
	Max width before this PARTICULAR table gets nasty. 
	*/

table, .responsive {
    width: 100%;
    line-height: 24px;
    border-collapse: collapse;
    border-spacing: 0px;
    height: auto; /*Android text boost fix*/
    min-height: 1px; /*Android text boost fix*/
    max-height: 999999px /*Android text boost fix*/;
    margin-bottom: 20px;
}
table th, table td, table tr {
    text-align: left;
}
table th {
    background: #FFFFFF;
    color: #000000;
    font-size: 19px;
    font-weight: 700;
    padding: 15px 15px 15px 0px;
    border-bottom: 1px solid #d8d8d8;
    vertical-align: top;
    line-height: 24px;
}
.responsive th {
    font-size: 18px;
}
.responsive td {
    font-size: 16px;
}
.responsive tr {
    width: 100%;
}
table td, table td:before {
    padding: 15px 15px 15px 0px;
}
table td {
    border-bottom: 1px solid #d8d8d8;
}
.table-overflow {
    width: 100%;
    overflow: scroll;
    padding: 0 15px 15px 0;
    box-sizing: border-box;
    white-space: nowrap !important;
}
/* Simple table text sizes */
.simple th {
    font-size: 20px;
}
.simple td {
    font-size: 18px;
}
.col2-r td:nth-child(even), .col2-r th:nth-child(even) {
    text-align: right;
}
/* Versions page table overrides*/

.version-list td {
}
.version-list td:nth-child(even) {
    text-align: left !important;
    font-size: 15px !important;/*Fallback*/
    font-size: 1.5rem !important;/*=40px*/	/*CHANGED FROM GUIDELINES*/
}
.version-list th:nth-child(even) {
    text-align: left !important;
}
.version-list td {
    vertical-align: top !important;
}
.version-list td:nth-child(odd) {
    padding-right: 30px;
    width: 100px !important;
}

/* 1024px _ 320px (takes into account sidebar) */
@media only screen and (max-width: 1168px) {
/* Force table to not be like tables anymore */
.responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr {
    float: left;
    width: 100%;
}
.responsive {
    display: block;
    margin-bottom: 30px;
}
/* Hide table headers (but not display: none;, for accessibility) */
.responsive thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.responsive td {
    /* Behave  like a "row" */
    display: block;
    font-size: 15px;
    text-align: right;
    padding: 8px 15px 8px 0px;
}
.responsive tr:nth-child(odd) {
}
.responsive tr {
}
.responsive tbody tr {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
.responsive td:before {
    /* Now like a table header */
    position: relative;
    /* Top/left values mimic padding */
    float: left;
    width: 45%;
    text-align: left;
    font-weight: 600;
    padding: 0;
}
/* Responsive table header */
.responsive tr td:nth-child(1), .responsive tr td:nth-child(1)::before {
    background: #FFFFFF !important;
    color: #000000;
    font-size: 18px;
    font-weight: 700;
}
/*
		Label the data
    Would need to be dynamic pulling in table headers
		*/
.breakpoints td:nth-of-type(1):before {
    content: "Device";
}
.breakpoints td:nth-of-type(2):before {
    content: "Range (pixels)";
}
.breakpoints td:nth-of-type(3):before {
    content: "Text size guide";
}
.breakpoints td:nth-of-type(4):before {
    content: "Page margin & padding (pixels)";
}
.breakpoints td:nth-of-type(5):before {
    content: "Column spacing (pixels)";
}
/*	Label the data
    Would need to be dynamic pulling in table headers
		*/
.dimensions td:nth-of-type(1):before {
    content: "Size";
}
.dimensions td:nth-of-type(2):before {
    content: "Weight";
}
.dimensions td:nth-of-type(3):before {
    content: "Height";
}
.dimensions td:nth-of-type(4):before {
    content: "Width";
}
/*	Label the data
    Would need to be dynamic pulling in table headers
		*/
	
.fileuploads td {
    text-align: left;
}
.fileuploads .dataicon a {
    float: left;
    margin-left: 0;
}
.fileuploads td:nth-of-type(1):before {
    display: none;
    content: "";
}
.fileuploads td:nth-of-type(2):before {
    display: none;
    content: "";
}
.fileuploads td:nth-of-type(3):before {
    display: none;
    content: "";
}
.fileuploads td:nth-of-type(4):before {
    display: none;
    content: "";
}
/* Simple table text sizes */
	
.simple td {
    width: 100%;
    padding: 8px 15px 8px 0px;
}
.simple th {
    font-size: 18px;
}
.simple td {
    font-size: 16px;
}
/* Version table overide */
	
.version-list td:nth-child(even) {
    text-align: left !important;
    font-size: 15px !important;/*Fallback*/
    font-size: 1.5rem !important;/*=40px*/	/*CHANGED FROM GUIDELINES*/
}
.version-list th:nth-child(even) {
    text-align: left !important;
}
.version-list td {
    width: auto !important;
}
}