/*  Responsive design  */

body {
	-webkit-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
	background-color: #666666;
	font-family: "lucida grande", "lucida sans", verdana, sans-serif;
	color: black;
	font-size: 12.5px;
	line-height: 1.6em;
	}

div.main {
	position: relative;
	box-sizing: border-box;
	max-width: 64em;
	min-width: 32.0em;
	height: auto;
	margin: 0 auto;
	padding: 0;
	background-color: #FFFFFF;
	}

/*  0em right, because we have hard returns anyway -> safer  */
div.maintxt { padding: 6em 0em 4em 8em; }
div.txt { padding: 2em 0em 4em 8em; }

/*  64em x 12.5px/em = 800px */
@media only screen and (max-width: 800px) {
	div.maintxt { padding: 4em 12.5% 6em; }
	div.txt { padding: 2em 12.5% 6em; }
}

p {
	margin: 0 0 1.6em;
	padding: 0;
	}

table, tr, td {
	box-sizing: border-box;
	border-collapse;
	border-spacing: 0;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.6em;
}

table.invoice {
	width: 20em; }

table.invoice td.descr {
	text-align: left; }

table.invoice td.skpdescr {
	padding-top: 1.6em;
	text-align: left; }

table.invoice td.price {
	text-align: right; }

table.invoice td.skpprice {
	padding-top: 1.6em;
	text-align: right; }

table.invoice tr.gray {
	color: #7F7F7F; }



/*  Fonts and colors  */

.small {
	font-size: 11.25px; }

.normal {
	font-size: 12.5px; }

.black {
	color: #000000 }

.gray {
	color: #7F7F7F }

.graylink {
	color: #7F7F7F }

.red {
	color: #FF0000 }

.petrol {
	color: #007F7F }


.halfskip { margin: 0 0 .8em; }
.doubleskip { margin: 0 0 3.2em; }
.last { margin: 0 0 4.8em; }
.verylast { margin: 0 0 6.4em; }

a { text-decoration: none }
a:link { color: black }
a:visited { color: black }
a:active { color: #FF0000 }
a:hover { color: #FF0000 }

.gray a:link { color: black }
.gray a:visited { color: black }
.gray a:active { color: #FF0000 }  /*  Need to be repeated  */
.gray a:hover { color: #FF0000 }  /*  Need to be repeated  */

.graylink a:link { color: #7F7F7F }
.graylink a:visited { color: #7F7F7F }
.graylink a:active { color: #FF0000 }  /*  Need to be repeated  */
.graylink a:hover { color: #FF0000 }  /*  Need to be repeated  */



/*  Responsive design  */

.heading {
	float: left;
	box-sizing: border-box;
	width: 16em;
	margin: 0;
	padding: 0 1.6em 0 0;
	color: #007F7F;
}

.regular {
	float: left;
	box-sizing: border-box;
	width: 16em;
	margin: 0;
	padding: 0 1.6em 0 0;
}

.narrow {
	float: left;
	box-sizing: border-box;
	width: 12em;
	margin: 0;
	padding: 0 1.6em 0 0;
}

.description {
	float: left;
	width: 40em;
	margin: 0;
	padding: 0;
	height: auto;
}

@media only screen and (max-width: 800px) {
	.heading {
	width: 100%;
	padding: 0;
	}
	.description {
	width: 100%;
	}
}

.fixed{
	display:inline-block;
	}

.flow{
	display:none;
	}

@media only screen and (max-width: 800px)  {
	.fixed{ display: none; }
	.flow{ display: inline-block; }
	}



/*  Forms  */
	
input {
	box-sizing: border-box;
	padding: 0 0 8px;
	margin: 0;
	outline: none;
	border: 0;
	border-bottom: 1px solid #DFDFDF;
	background-color: #FFFFFF;
	text-decoration: none;
	font-family: "lucida grande", "lucida sans", verdana, sans-serif;
	font-size: 12.5px;
}
	
select {
	-webkit-appearance: none;  /*  Fix I found online; not sure I understand  */
	box-sizing: border-box;
	padding: 0;
	margin-left: -.5px;  /*  arbitrary correction to make alignments better  */
	outline: none;
	border: none;
	background-color: #FFFFFF;
	text-decoration: none;
	font-family: "lucida grande", "lucida sans", verdana, sans-serif;
	font-size: 12.5px;
}

.button {
	box-sizing: border-box;
	padding: 8px 16px;
	margin:0;
	outline: none;
	border: none;
	background-color: #FF0000;
	color: white;
	text-align: center;
	text-decoration: none;
	font-family: "lucida grande", "lucida sans", verdana, sans-serif;
	font-size: 12.5px;
}

.button:active {
	background-color: #000000;
	color: white;
}