/* js-wall

*/

body,
form {
	padding: 0;
	margin: 0;
}

/* Font for all elements on the wall
*/
body,
input {
	font-family: arial, sans-serif;
}

.clearthisgroup:after {
	content: "";
	display: table;
	clear: both;
}

/* No border around images
*/
img {
	border: 0;
}

/*
*/
#header {
	background-color: #f0f0f0;
	color: #000000;

	width: 100%;

	margin-bottom: 5px;
	padding: 0;
}

#header > div {
	float: left;
	width: 49%;

	padding: 5px;
}

/* Align the field to call a number to the right of the browser
*/
#header div.dialanumber form#dial_form {
	width: 300px;
	float: right;
}

/* 
*/
h1 {
	color: #000000;

	margin: 0;
	padding: 0;

	font-size: 18pt;
	font-weight: bold;
}

/* Every quadrant has a title
*/
.title {
	background-color: #f0f0f0;
	color: #000000;

	padding: 5px;

	font-size: 15pt;
	font-weight: bold;
}

#current-calls,
#call-history {
	padding: 5px;
}

#chartdiv {
	left: 25px;
	top: 10px;
	
	height: 400px;
	width: 90%;
}

#queue-list,
#myuser {
	padding: 0;
}

/* If the content doesn't fit a quadrant, let it overflow.
   This usually means the a scroll bar will be shown.
*/
.lefttop,
.login,
.righttop,
.leftbottom,
.rightbottom {
	position: absolute;

	border: solid #f0f0f0;

	overflow: auto;
}

#quadrants {
	position: absolute;

	left: 0;
	right: 0;
	top: 50px;
	bottom: 0;
}

/* Every quadrant has its size and coordinates.
*/
.lefttop,
.login {
	top: 0;
	left: 0;

	right: 50%;
	bottom: 50%;

	border-width: 0 5px 0 0;
}

.login {
	border-width: 0 0 0 0;
}

.righttop {
	top: 0;
	left: 50%;

	right: 0;
	bottom: 50%;

	border-width: 0 0 0 0;
}

.leftbottom {
	top: 50%;
	left: 0;

	right: 50%;
	bottom: 0;

	border-width: 0 5px 0 0;
}

.rightbottom {
	top: 50%;
	left: 50%;

	right: 0;
	bottom: 0;

	border-width: 0 0 0 0;
}

/* */


#login_error {
	background-color: red;
	color: white;
	padding: 2em;
}

ul {
	padding-left: 5px;
	list-style-type: none;
	line-height: 30px;
}

label {
	display: block;
	float: left;
	width: 150px;
}

/* Queues have an avatar which will float left, so the
   properties of that queue will align to the right of the avatar.
*/
.avatar {
	float: left;

	margin: 0 5px;
}

/* Inside a quadrant, several blocks with data can be displayed.
   Adjust the width to your preferences.
*/
.block {
	background-color: #f0f0f0;

	width: 295px;
	display: inline-block;

	border-right: 1px solid #f0f0f0;
}

/* Every block has a header.
   For example, the quadrant containing blocks with queue data
   have the queue name in their header.
*/
.queue_name,
.user_name {
	background-color: #afafaf;
	color: #ffffff;

	padding: 5px;
	margin-bottom: 5px;

	font-weight: bold;
}

/* Some space between queue blocks for better seperation and readability.
*/
.queue_block {
	margin-bottom: 5px;
}

.user_ext {
	color: red;
}

#external {
	width: 90%;
	height: 90%;
}