p, small { line-height: 1.2em; } #container { position:absolute; width: 100%; max-width: 1024px; /*max-height: 768px;*/ top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; margin: 0 auto; box-shadow: 0 0 0 2px #5e8c71, 0 0 8px 4px rgba(8, 8, 8, 0.25); } a { color: #5491D2; text-decoration: none; } #preloader { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; pointer-events: none; } #list { padding: 0; } .box{ list-style-type: none; float: left; margin: 0 15px 15px 0; /*padding: 25px;*/ padding: 0 0 25px 0; display: block; position: relative; min-width: 200px; /*175px;*/ min-height: 175px; /*175px;*/ /*height: 275px;*/ border: 2px solid #333; border-radius: 25px; -moz-box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60); -webkit-box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60); box-shadow: 0px 2px 7px 0px rgba(16, 16, 16, 0.60); transition:background-color 0.1s, color 0.1s; } .box:hover { background-color: #5491D2; } .box:hover .link{ color: #fff; } .box.complex { width: 375px; /*320px;*/ height: 350px; /*border: 2px solid #00f;*/ } box.connecting { border: 2px solid #ff0; } .box .link{ display:block; padding: 25px 25px 12px 25px; text-align: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .box.complex .link { position: relative; top: auto; right: auto; bottom: auto; left: auto; } .box small { margin: 0.5em 0 0 0; display: block; } #hint { display:none; position: absolute; bottom: 1em; } #networkForm { display: none; } .box .networkForm { display: none; } .box.complex .networkForm { display: block; } /* FORMS */ form label { min-width: 110px; display: block; float: left; margin: 1px 0 10px 0; } form label.inline { display: inline; float: none; } form input, form select { margin-bottom: 5px; } form select { margin-right: 5px; } form input[type="text"], form input[type="number"], form input[type="password"], form select { width: 130px; } form input[type="text"], form input[type="number"], form input[type="password"] { border: 1px solid rgb(144, 192, 255); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } form .row { clear: left; } form .row div { /* float: left;*/ } /* NETWORK PANEL */ .networkForm { background-color: #fff; /*border-radius: 0 0 25px 25px;*/ padding: 12px 25px 12px 25px; } .networkForm p { margin: 0 0 10px 0; } .networkForm #network { margin-right: 5px; width: 180px; } .networkForm #ssid, .networkForm #listNetworks, .networkForm #passwordSettings { display: none; } .networkForm.customNetwork #passwordSettings { display: block; } .networkForm.customNetwork #ssid, .networkForm.customNetwork #listNetworks{ display: inline-block; } .networkForm.customNetwork #network, .networkForm.customNetwork #refreshNetworks { display: none; } .networkForm #status { position: relative; top: 2px; } .networkForm #action { /*clear: left;*/ display: block; padding: 5px 4px 4px 4px; } .networkForm #action.error { background: #EB313C; color: #fff; } .networkForm #action.warning { background: #E9A86E; } .networkForm #action.notice { background: #93CAF4; } .networkForm #action.info { background: #97DD8A; } .networkForm #action.none { display: none; } .networkForm .chosen-container-single .chosen-default { color: #333; /* let's not pretend it's disabled */ }