html, div, body, span, p, h1, h2, h3, h4 { padding: 0; margin: 0; font-family: Arial; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } body { background-color: #404040; overflow: none; } h1 { width: 100%; text-align: center; padding-top: .5rem; padding-bottom: .5rem; font-size: 1.4rem; color: white; background: -moz-linear-gradient(top, #ff8c1c 0%, #ff5c1c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ff8c1c 0%, #ff5c1c 100%); /* Chrome10-25,Safari5.1-6 */ border-bottom: 1px solid white; } .content-wrap { margin: 0.4rem; padding-bottom: 0.5rem; } .clear { clear: both; padding-bottom: 5px; } .content-wrap div.button { padding: 0.8rem; margin: 0.1rem; float: left; font-weight: bold; } .content-wrap div.button.off:nth-child(even) { background: linear-gradient(to bottom, #ffe1e1 0%, #b45353 100%); } .content-wrap div.button.off:nth-child(odd) { background: linear-gradient(to bottom, #ffe1e1 0%, #b45353 100%); } .content-wrap div.button.on:nth-child(odd) { background: linear-gradient(to bottom, #e1ffe4 0%, #53b453 100%); } .content-wrap div.button.on:nth-child(even) { background: linear-gradient(to bottom, #e1ffe4 0%, #53b453 100%); } .content-wrap div.button:nth-child(even) { background: -moz-linear-gradient(top, #f5f7f9 0%, #d7dee3 50%, #e5ebee 51%, #f6f8f9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f5f7f9 0%, #d7dee3 50%, #e5ebee 51%, #f6f8f9 100%); /* Chrome10-25,Safari5.1-6 */ } .content-wrap div.button:nth-child(odd) { background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* Chrome10-25,Safari5.1-6 */ } .content-wrap div.button:hover { background: -moz-linear-gradient(top, #9f9f9f 0%, #7c7c7c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #9f9f9f 0%, #7c7c7c 100%); /* Chrome10-25,Safari5.1-6 */ color: white; } .content-wrap .button { min-width: 100px; margin: auto; } .content-wrap div.button span { text-align: center; margin: auto; } .drop-down { padding: 0; } .loading { color: white; width: 100% !important; text-align: center; margin-top: 14px; font-size: 14pt; } .drop-title { width: 100%; padding: 12px 0; color: white; background: -moz-linear-gradient(top, #7d7e7d 0%, #3f3f3f 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #7d7e7d 0%, #3f3f3f 100%); /* Chrome10-25,Safari5.1-6 */ border-bottom: 1px solid #232323; overflow: hidden; } .drop-title::before { padding-left: 15px; padding-right: 15px; content: "\25B2"; font-weight: bold; } .content-group.unfurl .drop-title::before { content: "\25BC"; } .content-group .drop-down { -webkit-transition: max-height 0.3s ease-out; transition: max-height 0.3s ease-out; max-height: 0px; overflow: hidden; } .content-group.unfurl .drop-down { transition: max-height 0.25s ease-in; max-height: 300px; }