styles.css

/***** General *****/

	.error {
		color: #cc0000;
		font-size: 1.5em;
	}
	
	nav {
		border-bottom: 1px solid #aaaaaa;
		margin: 0.5em 0 1em;
		padding: 0.5em;
	}

	hr {
		clear: left;
		border: none;
		height: 1px;
		background: #aaaaaa;
		margin: 0;
	}

	.unit {
		font-size: smaller;
	}

/***** Tables *****/

	table {
		border-collapse: collapse;
	}

	.hiddencell {
		border: transparent;
		color: transparent;
		background: transparent;
	}

	table td,
	table th {
		border: 1px solid #aaaaaa;
		padding: 0.2em 0.4em;
		display: table-cell;
	}

	tbody tr:nth-child(2n+1) {
		background: #f8f8f8;
	}

	tbody tr:nth-child(2n) {
		background: #e0e0e0;
	}

	table thead th,
	table thead td,
	table tfoot th,
	table tfoot td {
		background: #d0d0d0;
	}

	/*** Call logs ***/
		.calllog tbody tr > :nth-child(3) { text-align: right; }
		.calllog tbody tr > :nth-child(6) { text-align: right; }
		tr.avorted > :first-child { color: #cc0000; }
		tr.internal > :first-child { color: #0000aa; }
		tr.caller > :first-child { color: #008800; }
		tr.callee > :first-child { color: #555; }

	/*** Invoices ***/
		.invoice td { text-align: right; }
		.invoice tbody tr > :first-child { text-align: left; }

/***** Forms *****/
	
	.form {
		background: #f0f0f0;
		width: 20em;
		border: 1px solid #aaaaaa;
		padding: 0.5em;
		margin: 0.5em 0.3em;
		float: left;
	}
	
	
	@media only screen and (max-width:20em) {
		.form {
			width: 100%;
			box-sizing: border-box;
			margin: 0.5em 0;
		}
	}
	
	.form h2 {
		font-size: 1em;
		text-align: center;
		padding: 0 0 0.5em;
		margin: 0;
		border-bottom: 1px solid #aaaaaa;
	}

	form label,
	form input,
	form select {
		display: block;
		box-sizing: border-box;
		width: 100%;
		text-align: center;
		margin: 1em 0 0;
	}

	form label + input,
	form label + select {
		margin: 0.5em 0 0;
	}