html, body { background-color: #f1f4f5; } @font-face { font-family: 'FontAwesome'; src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } // green theme // $primary-color: #27ae60; // $primary-color-hover: lighten( $primary-color, 10% ); // blue theme // $primary-color: #3498db; // $primary-color-hover: lighten( $primary-color, 10% ); // tomato red theme $primary-color: #ea3200; $primary-color-hover: lighten( $primary-color, 10% ); .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } br { height: 0; padding: 0; margin: 0; display: none; } table#container { width: 100% !important; margin: 0 0 0 0; } td#content a { color: #536270; } td#content a:hover { background: none; color: $primary-color; } small a { color: white !important; } small a:hover { color: white !important; background-color: #76838f !important; } /*CUSTOM ICONS*/ td#navi a.indent1:before { width: 20px; } td#navi a.active.indent1:before { width: 20px; color: $primary-color; } td#navi a.indent2:before { width: 15px; content: "\f105"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 13px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*home*/ td#navi a:first-of-type:before { content: "\f015"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*bandwidth*/ td#navi a.indent1[href*="bwm"]:before { content: "\f1fe"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*tools*/ td#navi a.indent1[href*="tools"]:before { content: "\f0ad"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*basic*/ td#navi a.indent1[href*="basic"]:before { content: "\f01c"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*advanced*/ td#navi a.indent1[href*="advanced"]:before { content: "\f132"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*port forward*/ td#navi a.indent1[href*="forward"]:before { content: "\f064"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*quality of service*/ td#navi a.indent1[href*="qos"]:before { content: "\f200"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*access restriction*/ td#navi a.indent1[href*="restrict"]:before { content: "\f023"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*administration*/ td#navi a.indent1[href*="admin"]:before { content: "\f085"; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } /*about*/ td#navi a.indent1[href*="about"] { color: #2b323a; position: absolute; display: inline-block; top: 12px; right: 400px; text-shadow: none; font-size: 13px; } td#navi a.indent1[href*="about"]:before { content: "\f05a"; width: 11px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } td#navi a.indent1[href*="about"]:hover { color: $primary-color; } td#navi a.active[href*="about"] { color: $primary-color !important; } /*reboot*/ td#navi a.indent1[href*="javascript:reboot()"] { color: #2b323a; position: absolute; display: inline-block; top: 12px; right: 280px; text-shadow: none; font-size: 13px; } td#navi a.indent1[href*="javascript:reboot()"]:before { content: "\f021"; width: 11px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } td#navi a.indent1[href*="javascript:reboot()"]:hover { color: $primary-color; } /*shutdown*/ td#navi a.indent1[href*="javascript:shutdown()"] { color: #2b323a; position: absolute; display: inline-block; top: 12px; right: 150px; text-shadow: none; font-size: 13px; } td#navi a.indent1[href*="javascript:shutdown()"]:before { content: "\f011"; width: 11px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } td#navi a.indent1[href*="javascript:shutdown()"]:hover { color: $primary-color; } /*logout*/ td#navi a.indent1[href*="javascript:logout()"] { color: #2b323a; position: absolute; display: inline-block; top: 12px; right: 50px; text-shadow: none; font-size: 13px; } td#navi a.indent1[href*="javascript:logout()"]:before { content: "\f08b"; width: 11px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: 16px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-right: 10px; } td#navi a.indent1[href*="javascript:logout()"]:hover { color: $primary-color; } /* HEADER */ table#container td#header { background-color: white; border-bottom: none; padding: 0 0 0 0; position: relative; height: 60px; box-shadow: rgba(0,0,0,0.2) 0px 0px 8px; } table#container td#header div.title { font-size: 16px; background-color: $primary-color; height: 60px; display: block; width: 240px; position: absolute; top: 0px; line-height: 60px; text-align: center; background: no-repeat $primary-color url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkMxODRFQUVDRDNBMTFFNjk3NDFDRkE2N0RCRjNCMDkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkMxODRFQUZDRDNBMTFFNjk3NDFDRkE2N0RCRjNCMDkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCQzE4NEVBQ0NEM0ExMUU2OTc0MUNGQTY3REJGM0IwOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCQzE4NEVBRENEM0ExMUU2OTc0MUNGQTY3REJGM0IwOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnoUfOQAAAImSURBVHjatNZPSFRBHMDxUQtJcgVTSykCCRSKFTpoEkaldhEqyFvkwfCiEIQYQiCeAy+RiNghECIiigI9CCmRJP07eFMkNHWJUqOsXWsNXt8f/jamx74YzfeDD/uYnZnfzLz3Zp7xPM9sQR6eoMKlfqYJjgMoD/hvAMuYNA6RIZkCIgfPsYYYJtCL03iEIv0vGwmrTcI1SRRxHMJd5Gv5YxRIOy1vRS4+I4mWtLPzrV8VhpDEa+zHbjTiPuLeRqR+JVbwER3Yhds4b/drJ7iEhPd3SOXDmMRPJXXeaaJ1PMUR5GPCatuLTDvJCfyyKkintTiIRau8Dwt4jzZrRnM4iQbc0cFI3Egl2YlXVkfXkIXj2pnEGnqwD1+17BSOYkQHKMmjKMIPrSPlUUlS51siabRX70WF3qdinXE2YlqvTZcjF4XYgwge+Pq7Ke/JWd+zUI83aNcnJ6ll9/RxHdZ633EMb9GFbrzABV9/lUZH7hqXdbQvUYNzDm1mJcn0JpLErKUT/Q5tlnYwnTzjHiUYQ6e+rBcd2njyxn/iotCEF/Ny41dMuLEsSaZDTjIrSUZDTvJM7kkxF1OIhJBAtv1ymckH3AppFoNYSD3vEd1ZtzO+6FHx5/hdRRO+beMsrmAx3aFVpyP437gadGilVOt5spWQU7LZ32fQZ4xs89f1jHCJuB67pen6+9fXitGPBjkKzqBMtx/Z7td1p5jDOB5iJqiT3wIMAOGsd+Td/AWpAAAAAElFTkSuQmCC'); background-position: 66px 16px; padding-left: 10px; } table#container td#header div.title small { display: none; } table#container td#header div.version { background-color: white; height: 60px; position: absolute; top: 0px; left: 240px; line-height: 60px; padding-left: 20px; color: #536270; font-weight: normal; font-size: 13px; } /* NAVI */ td#navi { width: 240px !important; max-width: 240px; background-color: #2b323a; padding: 10px 0 0 0; } td#navi a { color: #959ba0; padding: 0 0 0 0; display: block; text-shadow: #24272b 1px 1px 3px; } td#navi a:hover { background-color: transparent !important; color: white; } td#navi a.indent1 { margin-left: 0px; padding: 0 0 0 25px; height: 35px; line-height: 35px; font-weight: normal; font-size: 14px; } td#navi a.indent1.active { color: white; background-color: none; } td#navi a.indent2 { margin-left: 0px; padding: 0 0 0 55px; height: 25px; line-height: 25px; } td#navi a.indent2.active { background-color: #252b31; color: white; } /* CONTENT */ td#content { width: auto; background-color: #f1f4f5; } div#ident { display: none; } div.section-title { margin-top: 20px; margin-left: 40px; margin-right: 40px; margin-bottom: 0px; background-color: #ffffff; border-top-left-radius: 4px; border-top-right-radius: 4px; padding-top: 18px; padding-left: 20px; border-bottom: none; color: #536270; font-weight: bold; font-size: 14px; box-shadow: rgba(0,0,0,0.1) 1px 1px 1px; } div.section { margin-top: 0px; margin-left: 40px; margin-right: 40px; margin-bottom: 20px; background-color: #ffffff; padding-left: 20px; padding-right: 20px; padding-top: 15px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; box-shadow: rgba(0,0,0,0.1) 1px 1px 1px; } /* TABLES */ table.tomato-grid { margin: 0 0 0 0; border-spacing: 0px; border: none; } table.tomato-grid tr.odd { cursor: default; } table.tomato-grid tr.even { cursor: default; } table.tomato-grid tr.header td { background-color: white !important; padding-top: 12px; padding-bottom: 12px; padding-left: 5px; font-size: 13px; color: #536270; border-bottom: 1px solid #e4eaec; } table.tomato-grid tr.odd { background-color: transparent !important; } table.tomato-grid tr td { background-color: transparent !important; padding-top: 12px; padding-bottom: 12px; padding-left: 5px; font-size: 12px; color: #76838f; border-bottom: 1px solid #e4eaec; } table.tomato-grid tr td small { display: block; } table.tomato-grid tr td small a { color: red; display: inline-block; padding: 4px 7px; background-color: #536270; color: white; font-size: 11px; border-radius: 3px; } table.tomato-grid tr td small a:hover { background-color: #76838f; } table.tomato-grid tr.even:hover { background-color: white !important; } table.tomato-grid .controls { background-color: white !important; } table.tomato-grid .editor { background-color: white !important; } table.tomato-grid .editor td { border-bottom: none; } input[type=button] { background-color: $primary-color; border: none; padding: 10px 18px; color: white; border-radius: 3px; font-size: 13px; width: auto; } input[type=button]:hover { background-color: $primary-color-hover; cursor: pointer; width: auto; } div.section div { background-color: transparent; float: none !important; color: #76838f; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #e4eaec; } /* FOOTER */ td#footer { border: none; padding: 0 0 0 0; background-color: #f1f4f5; text-align: left; } td#footer:before { display: block; background-color: #2b323a; width: 240px; min-height: 500px; content: ""; float: left; } td#footer div { text-align: left !important; margin-bottom: 10px; margin-left: 290px; } span#footer-msg { display: block; float: left; width: 15px; } /*STATS*/ div#rstats { background-color: white; border-radius: 4px; margin-top: 20px; margin-left: 40px; margin-right: 40px; margin-bottom: 0px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; box-shadow: rgba(0,0,0,0.1) 1px 1px 1px; } span#dtime { display: none; } div#tab-area { margin-bottom: 17px; } div#tabs-bottom { border: none; } ul#tabs li a { padding: 8px 8px; border-radius: 3px; } ul#tabs li a.active { background-color: $primary-color; color: white !important; } ul#tabs li a:hover { background-color: silver; }