/*
*
* !DO NOT EDIT THE CSS FILES, THEY ARE BUILT WITH THE LESS CSS!
* less/content/tables.less
*
* ---------------------------
* Styles associated with the responsive tables
* ---------------------------
*/
@import "../_mixins/all.less";

@colorGray: #dedede;

// Add all base (screen width doesn't matter) here
#maincontent {

	.wdn_responsive_table {
		width: 100%;
		max-width: 100%;
		font-family: @impactFont;
		font-weight: bold;
		line-height: 1.3;
		
		caption {
			line-height: 1em;
			font-size: 1.875em;
		}
		
		thead tr {
			display: none;
		}
		
		th {
			background: fadeout(@colorGray, 30%);
			text-shadow: 1px 1px 1px #fff;
		}
		
		tr {
			border: 1px solid @colorGray;
			
			&:nth-of-type(even) {
                background: fadeout(@colorGray, 60%); // Just in case we're over a background
            }
            
            &:nth-of-type(odd) {
                background: fadeout(@colorGray, 90%); // Just in case we're over a background
            }
		}
		
		th,td {
            display:block;
            padding: 4px;
        }
        
        td {
            width: auto;
            font-weight: normal;
        }
        
        tbody tr {
            
            td {
                &:before {
                    display: block;
                    font-weight: bold;
                    content: attr(data-header);
                }
                
                &:empty {
                    display: none;
                }
            }
        }
	}
}

@media (min-width: 320px) {
    
}
@media (min-width: 480px) {

}
@media (min-width: 600px) {

}
@media (min-width: 768px) {
    #maincontent {
    
    	.wdn_responsive_table {
    		font-size: 90%;
    	
    		thead tr {
    			display: table-row;
    			
    			td {
    				background: fadeout(@colorGray, 30%);
    			}
    		}
    		
    		th {
    			font-size: 110%;
    		}
    		
    		td {
    			text-align: center;
    			word-wrap: break-word;
    			word-break: break-all;
    		}
    		
    		th, td {
    			display: table-cell;
    			border: 1px solid @colorGray;
    		}
    		
    		.flush-left {
                text-align: left;
    		}
    		
    		tbody {
                
                td:before {
                    display: none !important;
                }
                
                tr td:empty {
                    display: table-cell;
                }
            }
    	}
    }
}
@media (min-width: 960px) {

}
@media (min-width: 1040px) {

}