@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } body{ margin: 0px; padding: 0px; border: 0px; outline: 0px; background: rgba(0, 0, 0, 0.12); } button,input{ color:black; background-color: lavender; border:1px solid black; border-radius: 5px; padding: 8px; margin: 5px; font-size: 14px; } table{ border-collapse: collapse; } table.table{ width: 100%; } .table th, .table td{ padding: 8px; border-bottom: 1px solid #ddd; } .table td{ text-align: right; } .table td.text{ text-align: left; } .table tr:nth-child(even){ background-color: #f2f2f2; } .table th{ background-color: #dc0067; color: white; } .content, .content > .map{ width:100%; height:100%; position: absolute; } header.menu{ position: absolute;; top:12px; right:12px; z-index: 3000; } .content > iframe{ width: 100%; height: 99%; border: none; } i.icon{ font: normal normal normal 12px/1 FontAwesome; } header.menu .icons i{ cursor: pointer; display: inline-block; padding: 0.4em 0 0 0.4em; margin-left: 12pt; border-radius: 0.9em; background: rgba(255,255,255,0.7); border: none; height: 1.4em; width: 1.4em; box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24); font: normal normal normal 24px/1 FontAwesome; } header.menu .icons i span{ font-size: 12px; position: relative; top:12px; left:-24px; display: inline-block; white-space: nowrap; overflow-x: visible; width: 0px; height: 0px; } .sidebar.hidden{ display: none; } .sidebar .icon i{ cursor: pointer; position: absolute; top: 12px; right: 0px; width: 1.6em; z-index: 3000; color: black; font: normal normal normal 24px/1 FontAwesome; } .sidebar{ background: rgba(255, 255, 255, 0.9); z-index: 2000; position: absolute; left: 0px; height: 100%; box-shadow: 0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23); width: 320pt; } @media screen and (max-width: 630pt){ .sidebar{ top: 500px; width: 100%; } } .nodeicon{ background-color: rgba(0,255,0,0.5); border: 2px solid white; border-radius: 10px; width:3px; height: 3px; } .nodeicon-label{ font-size: 12px; font-weight: lighter; } .nodeicon-label table{ width: 100% } .nodeicon-label table td{ border-top:1px solid #999; text-align: right; } .nodeicon-label table td:first-child{ text-align: left; } .nodeicon.offline{ background-color: rgba(255,0,0,0.5); } .nodeicon.select{ background-color: green; } .nodeicon.select.offline{ background-color: red; border-color: black; } .nodeicon.client24{ border-left: 3px solid blue; } .nodeicon.client5{ border-right: 3px solid blue; } .nodeicon.client24-warn{ border-left: 3px solid yellow; } .nodeicon.client5-warn{ border-right: 3px solid yellow; } .nodeicon.client24-crit{ border-left: 3px solid red; } .nodeicon.client5-crit{ border-right: 3px solid red; }