html, button, input, select, textarea, .pure-g [class *="pure-u"]{font-family: sans-serif;}.button-success, .button-error, .button-warning, .button-secondary{color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);}.button-success{background: rgb(28, 184, 65); /* this is a green */}.button-error{background: rgb(202, 60, 60); /* this is a maroon */}.button-warning{background: rgb(223, 117, 20); /* this is an orange */}.button-secondary{background: rgb(66, 184, 221); /* this is a light blue */}input[type=checkbox]{/*float: left;*/ margin: .35em 0.4em; display: inline-block; cursor: pointer;}input[type=checkbox]:focus{outline: 1px solid #00f;}input[type=number]{font-size:1em; width:5em; padding:3px; margin:0; border:1px solid #ddd; border-radius:5px; text-align:center;}input[type=number]:focus{outline:none;}body{color: #777;}a:visited, a:link{color: #009;}a:hover{color: #00c;}.card{background-color: #eee;padding: 1em;margin: 0.5em;-moz-border-radius: 0.5em;-webkit-border-radius: 0.5em;border-radius: 0.5em;border: 0px solid #000000;}/* click-to-edit fields */.click-to-edit{position: relative;}.edit-off{cursor: pointer;}.click-to-edit input, .click-to-edit textarea{color: black; background-color: #eee; width: 100%;}.click-to-edit span, .click-to-edit div{/*background-color: #e0e0e0;*/ /*color: #1c0099;*/ padding: 0.3em; width: 100%; color: #444; /* rgba not supported (IE 8) */ color: rgba(0, 0, 0, 0.80); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ background-color: #E6E6E6; text-decoration: none; border-radius: 2px;}.click-to-edit span:hover, .click-to-edit div:hover,.click-to-edit span:focus, .click-to-edit div:focus{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10))); background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10)); background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));}.click-to-edit span:focus, .click-to-edit div:focus{outline: 0;}.click-to-edit span:active, .click-to-edit div:active{box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; border-color: #000\9;}/* Firefox: Get rid of the inner focus border */.click-to-edit span::-moz-focus-inner,.click-to-edit div::-moz-focus-inner{padding: 0; border: 0;}/* wifi AP selection form */#aps label div{display: inline-block;margin: 0em 0.2em;}fieldset.radios{border: none;padding-left: 0px;}fieldset fields{clear: both;}/* make images size-up */.xx-pure-img-responsive{max-width: 100%; height: auto;}/* Add transition to containers so they can push in and out */#layout, #menu, .menu-link{-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}/* This is the parent `<div>` that contains the menu and the content area */#layout{position: relative;padding-left: 0;}#layout.active #menu{left: 150px;width: 150px;}#layout.active .menu-link{left: 150px;}div.tt{font-family: monospace;font-size: 120%;color: #390;background-color: #ddd;padding: 2px;margin: 2px 0;line-height: 100%;}/* The content `<div>` */.content{margin: 0 auto;padding: 0 2em;max-width: 800px;margin-bottom: 50px;line-height: 1.6em;}.header{margin : 0;color : #ffffff;text-align : center;padding : 0.7em 2em 0;border-bottom : 1px solid #eee;background-color : #6dd2fe;}.header h1{margin : 0.2em 0;font-size : 2em;font-weight : 200;}.header h1 .esp{font-size: 1.25em;}.content-subhead{margin: 50px 0 20px 0;font-weight: 300;color: #888;}form button{margin-top: 0.5em;}.button-primary{background-color: #99f;}.button-selected{background-color: #fc6;}form input{margin-top: 0.5em;}/* Text console */pre.console{background-color: #39014b;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;border: 0px solid #000000;color: #e7fd66;padding: 5px;text-align: left;}pre.console a{color: #66ff66;}/* log page */.dbg-btn, #refresh-button{vertical-align: baseline;}.lock-icon{background-image: url("/wifi/icons.png");background-color: transparent;width: 32px;height: 32px;display: inline-block;}#menu{margin-left: -150px;width: 150px;position: fixed;top: 0;left: 0;bottom: 0;z-index: 1000;background: #191818;overflow-y: auto;-webkit-overflow-scrolling: touch;}#menu a{color: #999;border: none;padding: 0.6em 0 0.6em 0.6em;}#menu .pure-menu, #menu .pure-menu ul{border: none;background: transparent;}#menu .pure-menu ul, #menu .pure-menu .menu-item-divided{border-top: 1px solid #333;}#menu .pure-menu li a:hover, #menu .pure-menu li a:focus{background: #333;}#menu .pure-menu-selected, #menu .pure-menu-heading{background: #9d1414;}#menu .pure-menu-selected a{color: #fff;}#menu .pure-menu-heading{font-size: 110%;color: #fff;margin: 0;text-transform: none;}#menu .pure-menu-heading img{vertical-align: middle;top: -1px;position: relative;}#menu .pure-menu-item{height:2em;}/* -- Dynamic Button For Responsive Menu -------------------------------------*/.menu-link{position: fixed;display: block; top: 0;left: 0; background: #000;background: rgba(0,0,0,0.7);font-size: 10px; z-index: 10;width: 2em;height: auto;padding: 2.1em 1.6em;}.menu-link:hover, .menu-link:focus{background: #000;}.menu-link span{position: relative;display: block;}.menu-link span, .menu-link span:before, .menu-link span:after{background-color: #fff;width: 100%;height: 0.2em;}.menu-link span:before, .menu-link span:after{position: absolute;margin-top: -0.6em;content: " ";}.menu-link span:after{margin-top: 0.6em;}/* -- Responsive Styles (Media Queries) ------------------------------------- *//*@media (max-width: 896px){*/@media (min-width: 56em){.header, .content{padding-left: 2em;padding-right: 2em;}#layout{padding-left: 150px;left: 0;}#menu{left: 150px;}.menu-link{position: fixed;left: 150px;display: none;}#layout.active .menu-link{left: 150px;}}@media (max-width: 56em){#layout.active{position: relative;left: 150px;}}/*=====spinners and notification messages */#messages{position: absolute;left: 25%;width: 50%;top: 10;z-index: 200;font-size: 110%;text-align: center;}#warning{background-color: #933;color: #fcc;padding: 0.1em 0.4em;}#notification{background-color: #693;color: #cfc;padding: 0.1em 0.4em;}#spinner{position: absolute;right: 10%;top: 20;z-index: 1000;}.spinner{height: 50px; width: 50px; -webkit-animation: rotation 1s infinite linear; -moz-animation: rotation 1s infinite linear; -o-animation: rotation 1s infinite linear; animation: rotation 1s infinite linear; border-left: 10px solid rgba(204, 51, 0, 0.15); border-right: 10px solid rgba(204, 51, 0, 0.15); border-bottom: 10px solid rgba(204, 51, 0, 0.15); border-top: 10px solid rgba(204, 51, 0, 0.8); border-radius: 100%;}.spinner-small{display: inline-block;height: 1em;width: 1em;border-width: 4px;}@-webkit-keyframes rotation{from{-webkit-transform: rotate(0deg);}to{-webkit-transform: rotate(359deg);}}@-moz-keyframes rotation{from{-moz-transform: rotate(0deg);}to{-moz-transform: rotate(359deg);}}@-o-keyframes rotation{from{-o-transform: rotate(0deg);}to{-o-transform: rotate(359deg);}}@keyframes rotation{from{transform: rotate(0deg);}to{transform: rotate(359deg);}}//scroll text.rdtscroll{height: 50px; overflow: hidden; position: relative;}.rdtscroll h3{position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: rdtscroll 15s linear infinite; -webkit-animation: rdtscroll 15s linear infinite; animation: rdtscroll 15s linear infinite;}/* Move it (define the animation) */@-moz-keyframes rdtscroll{0%{-moz-transform: translateX(100%);}100%{-moz-transform: translateX(-100%);}}@-webkit-keyframes rdtscroll{0%{-webkit-transform: translateX(100%);}100%{-webkit-transform: translateX(-100%);}}@keyframes rdtscroll{0%{-moz-transform: translateX(100%); /* Firefox bug fix */ -webkit-transform: translateX(100%); /* Firefox bug fix */ transform: translateX(100%);}100%{-moz-transform: translateX(-100%); /* Firefox bug fix */ -webkit-transform: translateX(-100%); /* Firefox bug fix */ transform: translateX(-100%);}}/* pop-ups */.popup-hidden{display: none;}.popup, div.popup{position: absolute; /*top: 100%;*/ bottom: 100%; background-color: #fff0b3; border-radius: 5px; border: 0px solid #000; color: #333; font-size: 80%; line-height: 110%; z-index: 100; padding: 5px; min-width: 10em;}.popup:not(.pop-left){left: 20px;}.popup.pop-left{right: 20px;}.popup-target:hover .popup{display: block;}.popup-target{position: relative;}canvas{display: block;margin: 0 auto;}.pure-table td, .pure-table th{padding: 0.5em 0.5em;}.pure-table thead{text-align:center;}/* TABELE RESPONSIVE ver 1686px@media screen and (max-width: 520px){table{width:100%; table-layout:auto; border-collapse: collapse; border-spacing:0}thead{display: none;}th{background-color:silver}tr:nth-of-type(2n){background-color: inherit;}tr td:first-child{background: #f0f0f0; font-weight:bold;font-size:1.3em;}tbody td{display: block; text-align:center;}tbody td:before{content: attr(data-th); display: block;text-align:center;}}*//* TABELE RESPONSIVE https://webdesignerhut.com/pure-css-responsive-tables/Max width before this PARTICULAR table gets nastyThis query will take effect for any screen smaller than 760px (768)and also iPads specifically.*//*@media only screen and (max-width: 520px),(min-device-width: 368px) and (max-device-width: 1024px)*/ @media screen and (max-width: 520px){table{width: 100%;}/* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr{display: block; /*align:center;*/ text-align: center; text-align: -moz-center; text-align: -webkit-center; text-align: -o-center; /* https://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way The -webkit- prefixed property will work in WebKit-based browsers such as Chrome and Safari The -moz- prefixed property will work in Firefox The -ms- prefixed property will work in Internet Explorer The -o- prefixed property will work in Opera */}/* Hide table headers (but not display: none;, for accessibility) */ thead tr{position: absolute; top: -9999px; left: -9999px;}tr{border: 1px solid #ccc;}td{/*display: inline-block; */ /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%;}tr:nth-child(odd){background-color: #f8f8f8}td:before{/* Now like a table header */ /*position: absolute;*/ /* Top/left values mimic padding */ /*top: 6px; left: 0px;*/ /*width: 45%;*/ padding-right: 10px; white-space: nowrap; /* Label the data */ content: attr(data-column); color: #3498db;}}