@charset "UTF-8";

/*

orange: 255,125,15
gray: 51,51,51
green: 57,180,75

*/

html {
	font-size: 62.5%; /* so that 1rem = 10px */
}

body {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 11px;
	font-size: 1.1em; /* not rem, to help Chrome */
	color: rgb(51,51,51);

	/*background: url('leds.jpg');
	background-position: center center;
	background-attachment: fixed;*/

	margin: 0;
	padding: 0;
}

	@media only screen and (min-width: 450px) {
		body {
			font-size: 16px;
			font-size: 1.6em; /* not rem, to help Chrome */
		}
	}

div#wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 1rem 2rem 0rem 2rem;
}

h1 {
	margin-top: 0;
}

p, ul {
	line-height: 1.5;
}

ul {
	padding-left: 0;
}

#header-toggle {
	cursor: pointer;
	background: #ccc;
	position: absolute;
	left: 10px;
	top: 10px;
	display: none;
}

p#intro {
	
}

#leddy.input {
	box-sizing: border-box;
}

ul#list-form {
	list-style-type: none;
	line-height: 1;
	margin-top: 0;
	font-weight: bold;
}

ul#list-form ul {
	list-style-type: none;
}

ul#list-form ul p {
	margin-top: 0;
	margin-bottom: 0.4rem;
}

ul#list-form ul#list-types {
	display: block;
	text-align: justify;
}

ul#list-form ul#list-types:after {
	content: '';
	width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
	display: inline-block;
}

ul#list-form li#module-type-options {
	margin-bottom: -1rem; /* to make up for the space created by :after on ul#list-types */
}

ul#list-form fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

ul#list-form fieldset legend {
	padding-left: 0;
	margin-left: 0;
	display: inline-block;
}

ul#list-form ul#list-types li {
	display: inline-block;
	box-sizing: border-box;
	width: 15%;
}

ul#list-form ul#list-types li input[type="radio"] {
	display: none;
}

ul#list-form ul#list-types li input[type="radio"] + label {
	display: inline-block;
	padding: 1rem 0.5rem;
	cursor: pointer;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	background: rgb(51,51,51);
	color: white;
}

ul#list-form ul#list-types li input[type="radio"]:checked + label {
	background: rgb(255,125,15);
	font-weight: bold;
}

ul#list-form ul#module-count {
	margin-bottom: 1rem;
	text-align: center;
	/*outline: solid 1px black;*/
}
/*
ul#list-form ul#module-count:after {
	content: '';
	width: 100%;
	display: inline-block;
}
*/
ul#list-form ul#module-count li {
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;

}

ul#list-form ul#module-count li#module-count-x-buttons {
	text-align: right;
	position: relative;
	width: 25%;
	/*outline: dotted 1px red;*/
}

ul#list-form ul#module-count li#module-count-y-buttons {
	text-align: left;
	position: relative;
	width: 25%;
	/*outline: dotted 1px green;*/
}


ul#list-form ul#module-count li#module-count-listitem-x-and-y {
	width: 45%;
	max-width: 200px;
	text-align: center;
}

ul#list-form ul#module-count li div.module-count-container {
	display: inline-block;
	position: relative;
}

ul#list-form ul#module-count li label {
	display: block;
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	text-align: left;

	width: 100%;
	font-size: 1rem;
	line-height: 1;
	margin-bottom: 0.2rem;
	pointer-events: none;
}

ul#list-form ul#module-count li button {
	font-size: 1.4rem;
	display: inline-block;
	padding: 0.1rem;
	box-sizing: border-box;

	/*-webkit-appearance: none;
    -moz-appearance: none;*/
	outline: none;
    border: none;
    border-radius: 0;
    cursor: pointer;

    background: rgb(51,51,51);
	color: white;
	height: 4.4rem;
	width: 45%;
	vertical-align: middle;
}

ul#list-form ul#module-count li button + button {
	margin-left: 0.5rem;
}

ul#list-form ul#module-count li button:active {
	background: rgb(255,125,15);
}

ul#list-form ul#module-count li .module-count-field {
	padding: 0;
	text-align: center;
	min-width: 5.5rem;
	width: 5.5rem;
	height: 4.4rem;
	line-height: 1;
	box-sizing: border-box;
}

li#output {
	font-size: 1.4rem;
	text-align: right;
}

.output-label {
	display: inline-block;
	width: 45%;
	box-sizing: border-box;
	text-align: right;
	margin-right: 1rem;
	line-height: 1;
}

.output-result {
	display: inline-block;
	padding: 0.5rem 3rem 0.2rem 0.5rem;
	width: 43%;
	max-width: 16rem;
	box-sizing: border-box;

	background: rgb(51,51,51);
	color: white;
	text-align: right;

}

.output-result span.output-result-value {
	text-align: right;
}

.output-result span.unit {
	text-align: left;
	width: 2rem;
	min-width: 2rem;
	margin-right: -2rem;
	display: inline-block;
}



/**
* Hide elements visually, but keep them available for screen-readers.
*
* Used for information required for screen-reader users to understand and use
* the site where visual display is undesirable. Information provided in this
* manner should be kept concise, to avoid unnecessary burden on the user.
* "!important" is used to prevent unintentional overrides.
*/
.element-invisible {
	position: absolute !important;
	left: 0;
	top: 0;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

/**
* The .element-focusable class extends the .element-invisible class to allow
* the element to be focusable when navigated to via the keyboard.
*/
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
	position: static !important;
	clip: auto;
}

@media only screen and (min-width: 700px) {
	li#output {
		text-align: left;
	}
}


@media print {

	@page {
		margin-top: 25mm;
	}

	body {
		color: black;
		background: transparent;
		font-weight: normal;
	}

	ul#list-form {
		font-size: 14pt;
		font-weight: normal;
	}

	ul#list-form ul#list-types li input[type="radio"] + label {
		display: none;
	}
	
	ul#list-form ul#list-types li input[type="radio"]:checked + label {
		display: block;
		background: transparent;
		color: black;
		font-size: 25pt;
		font-weight: normal;
		border: solid 1pt black;
		padding: 0.5cm;
		box-sizing: content-box;
	}

	ul#list-form ul#list-types li input[type="radio"]:checked + label:before {
		content: 'LED type:\00a0';
		display: inline-block;
		font-size: 25pt;
	}

	ul#list-form ul#module-count {
		text-align: left;
	}

	ul#list-form ul#module-count li label {
		display: none;
	}

	ul#list-form ul#module-count #module-count-times-label {
		font-size: 25pt;
	}

	ul#list-form ul#module-count li#module-count-x-buttons,
	ul#list-form ul#module-count li#module-count-y-buttons {
		display: none;
	}

	ul#list-form ul#list-types li {
		width: auto;
	}

	ul#list-form ul#module-count li#module-count-listitem-x-and-y {
		width: auto;
		text-align: left;
		max-width: 15cm;
		border: solid 1px black;
		padding: 0.5cm;
	}

	ul#list-form ul#module-count li#module-count-listitem-x-and-y:after {
		content: '\00a0panels';
		display: inline-block;
		font-size: 25pt;
	}

	ul#list-form ul#module-count li .module-count-field {
		font-size: 25pt;
		width: auto;
		height: auto;
		border: none;
	}

	li#output {
		font-size: 14pt;
		text-align: left;
		margin-top: 1cm;
	}

	li#output .output-label {
		width: 7cm;
	}

	li#output .output-result {
		background: rgb(200,200,200);
		color: black;
		width: 5cm;
		max-width: 10cm;
		padding-right: 1cm;
	}

	li#output .output-result span.unit {
		width: 1cm;
		min-width: 1cm;
		margin-right: -1cm;
	}
	
	ul#list-form ul p {
		margin-top: 0;
		margin-bottom: 0.3cm;
	}

	.easter-eggs {
		display: none;
	}
}