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;
}