Tiny

body, html {margin: 0;}
body{ background-color: white; box-sizing: border-box; color:black;}
h1, h2, h3, h4, h5, h6, p, img {
	padding:8px;
}
div{
border-style: dotted;
}
*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
	-ms-box-sizing: border-box !important;
	box-sizing: border-box !important;
}
/* Clear floats after the columns */
.row:after {content: ""; display: table;  clear: both;}
.column0 {float: left; width: 100%; min-height: 300px;}
.column  {float: left; width: 50%;  min-height: 300px;}
.column3 {float: left; width: 33.33%; min-height: 300px;}
.column10{float: left; width: 10%; min-height: 300px;}
.column20{float: left; width: 20%; min-height: 300px;}
.column30{float: left; width: 30%; min-height: 300px;}
.column40{float: left; width: 40%; min-height: 300px;}
.column50{float: left; width: 50%; min-height: 300px;}
.column60{float: left; width: 60%; min-height: 300px;}
.column70{float: left; width: 70%; min-height: 300px;}
.column80{float: left; width: 80%; min-height: 300px;}
.column90{float: left; width: 90%; min-height: 300px;}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column0 {width: 100%; min-height: 300px;}
.column  {width: 100%; min-height: 300px;}
.column3 {width: 100%; min-height: 300px;}
.column10{width: 100%; min-height: 300px;}
.column20{width: 100%; min-height: 300px;}
.column30{width: 100%; min-height: 300px;}
.column40{width: 100%; min-height: 300px;}
.column50{width: 100%; min-height: 300px;}
.column60{width: 100%; min-height: 300px;}
.column70{width: 100%; min-height: 300px;}
.column80{width: 100%; min-height: 300px;}
.column90{width: 100%; min-height: 300px;}
}