// properties
@mainTop: 43px;
@mainBottom: 41px;

@minWidth: 640px;
@minHeight: 480px;

@topologyOffset: -4px; // ensure calibration

@interface-admin-up: #46A040;
@interface-admin-down: #C41230;
@interface-edge-down: #F58025;

// mixins
.dash-size (@width, @height) {
	width: @width;
	height: @height;
}
.position (@type, @top, @right, @bottom, @left) {
	position: @type;
	top: @top;
	right: @right;
	bottom: @bottom;
	left: @left;
}
.dash-position (@top, @right, @bottom, @left) {
	.position(absolute, @top, @right, @bottom, @left);
}
.icon {
	width: 22px;
	height: 16px;
	background-position: left center;
	background-repeat: no-repeat;
}
.dashlet-elements {
	width: 98%;
	margin: 5px auto;
}

// header
#menu {
	.navbar-inner {
		.brand {
			font-size: 1.4em;
			font-variant: small-caps;
			margin: 0 12px;
			padding: 10px 0 10px 45px;
			background-image: url('../img/logo.png');
			background-position: left center;
			background-repeat: no-repeat;
		}
		ul {
			margin-top: 10px;
			border-bottom: transparent;
			li {
				a {
					padding: 5px 15px;
					&:hover {
						border-color: transparent;
					}
				}
			}
			.active {
				a {
					border-radius: 1px;
					background: #f6f6f6;
					&:hover {
						border-top: 1px solid #ddd;
						border-right: 1px solid #ddd;
						border-left: 1px solid #ddd;
					}
				}
			}
		}
		#toolbar {
			position: absolute;
			right: 10px;
			.dropdown-menu {
				right: 0;
				left: auto;
				min-width: 120px;
			}
			.icon-user {
				.icon;
				background-image: url('../img/user_0020_16.png');
			}
			.icon-users {
				.icon;
				background-image: url('../img/user_group_0107_16.png');
			}
			.icon-cluster {
				.icon;
				background-image: url('../img/topology_view_1033_16.png');
			}
			.icon-default {
				.icon;
				background-image: url('../img/logo_16.png');
			}
			.icon-save {
				.icon;
				background-image: url('../img/save_as_0106_16.png');
			}
			.icon-logout {
				.icon;
				background-image: url('../img/open_1054_16.png');
			}
		}
	}
}

// footer
#footer {
	#alert {
		margin: 0;
		p {
			padding: 0;
			margin: 0;
		}
	}
}

// main
#main {
	position: fixed;
	top: @mainTop;
	right: 0;
	bottom: @mainBottom;
	left: 0;
	min-width: @minWidth;
	min-height: @minHeight;

	// topology
	#topology {
		position: absolute;
		top: @topologyOffset;
		right: 0;
		bottom: @topologyOffset;
		left: 0;
		background: #ddd;
	}

	// left
	#left {
		.dash-size(30%, 100%);
		float: left;

		#left-top {
			.dash-size(100%, 60%);

			.dash {	
				.dash-position(5px, 5px, 5px, 5px);
			}
		}

		#left-bottom {
			.dash-size(100%, 40%);

			.dash {
				.dash-position(0, 5px, 5px, 5px);
			}
		}
	}

	// right
	#right {
		.dash-size(70%, 100%);
		float: right;

		#right-top {
			.dash-size(100%, 60%);

			.dash {
				.dash-position(5px, 5px, 5px, 0);
			}
		}

		#right-bottom {
			.dash-size(100%, 40%);

			.dash {
				.dash-position(0, 5px, 5px, 0);
			}
		}
	}

	#left-top, #left-bottom,
	#right-top, #right-bottom {
		position: relative;
	}

	// dashentries
	.dash {
		border-radius: 1px;
		background: #fff;
		border: 1px solid #ddd;

		.nav {
			padding: 2px;
			padding-bottom: 0;
			margin: 0;
		}

		.nav-tabs {
			background: #eee;
			li {
				a {
					background: #ddd;
					padding: 4px 8px;
					margin-right: 3px;
					border-radius: 1px;
					&:hover {
						border-color: transparent;
					}
				}
			}
			.active {
				a {
					background: #fff;
					border-radius: 1px;
					&:hover {
						border-top: 1px solid #ddd;
						border-left: 1px solid #ddd;
						border-right: 1px solid #ddd;
					}
				}
			}
		}

		.dashlet {
			overflow: auto;
			.dash-position(45px,0,0,0);

			h4 {
				.dashlet-elements;
			}

			p {
				.dashlet-elements;
			}

			table {
				.dashlet-elements;
			}
			
			.btn-group {
				margin: 5px;
			}
			
			.none {
				margin: 0 auto;
				padding-top: 128px;
				background-position: center;
				background-repeat: no-repeat;
				background-image: url('../img/alert_unreachable_2008_128.png');
				text-align: center;
				p {
					cursor: default;
				}
			}
		}
	}

	// defaults for visual topology
	#right-top .dash {
		background: #ddd;
		overflow: hidden;
	}
}

.table-cursor tr:hover {
	cursor: pointer;
}

// interfaces
table {
	.admin-up {
		color: @interface-admin-up;
	}
	.admin-down {
		color: @interface-admin-down;
	}
	.edge-down {
		color: @interface-edge-down;
	}
}

// hide
.modal {
	.help {
		display: none;
	}
}