body{
	max-width: 1080px;
	margin: 0 auto !important;
	float: none !important;
	background-image: url("images/bg.gif");
	background-color: #000;
}
* {
    box-sizing: border-box;
}
.center {
	background-color: #fff;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html, html a {
    font-family: Arial, "Lucida Sans", sans-serif;
	-webkit-font-smoothing: antialiased !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
.header {
    background-image: url("images/fulllogo.png");
	background-repeat: no-repeat;
	background-position: center;
    background-color: #474719;
	height: 100px;
    color: #ffffff;
    padding: 15px;
}
h1 {
	padding: 0px;
	margin: 0px;
}
p{
	padding: 0px;
	margin: 0px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#333300;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #333333;
}
.aside {
    background-color: #474719;
    padding: 2px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #474719;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 20%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 80%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Load Number"; }
	td:nth-of-type(2):before { content: "Vehicle ID"; }
	td:nth-of-type(3):before { content: "Tract No"; }
	td:nth-of-type(4):before { content: "Tons"; }
	td:nth-of-type(5):before { content: "Gross Wt"; }
	td:nth-of-type(6):before { content: "Tare Wt"; }
	td:nth-of-type(7):before { content: "Time Out"; }
	td:nth-of-type(8):before { content: "Tons Hauled"; }
	td:nth-of-type(9):before { content: "Tons Remaining"; }
}

table {
    border-collapse: collapse;
	width: 100%;
}
table, th, td {
    border: 1px solid black;
}

th {
    background-color: grey;
    color: white;
	text-align: center;
	vertical-align: center;
}
td { 
	text-align: center;
}
tr:nth-child(even) {
	background: #6C6C47;
	color: white;
	}
tr:nth-child(odd) {
	background: #FFF;
	color: black;
	}

input[type=checkbox]:not(old),
input[type=radio   ]:not(old){aa
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
}
input[type=checkbox]:not(old) + label,
input[type=radio   ]:not(old) + label{
  display      : inline-block;
  margin-left  : -2em;
  line-height  : 1.5em;
}
input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 0.875em;
  height           : 0.875em;
  margin           : 0.05em 0.2em 0.35em 0.9em;
  border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 0.25em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}
input[type=checkbox]:not(old):checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : rgb(153,204,102);
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
}
a.back-to-top {
	display: none;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: #27AE61 url("up-arrow.png") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
a:hover.back-to-top {
	background-color: #000;
}