/* Externals */
@import url(ext/reset.css);
@import url(ext/forms.css);
@import url(ext/typography.css);
@import url (ext/ie.css);

body {
	font: normal 11px/1.5 'Lucida Grande', Tahoma, Helvetica, sans-serif;
	color: #333;
}

textarea.sans {
	font: normal 11px/1.5 'Lucida Grande', Tahoma, Helvetica, sans-serif;
}

h1, h2, h3 {
	letter-spacing: -.05em;
}

h1 + p,
h2 + p {
	font-size: 125%;
	color: #666;
}

hr {
	margin: 1em 0;
	background: #ccc;
	height: 1px;
	border: 0;
}

img, fieldset {
	border: 0;
}

th,
td {
	border-left: solid 1px #eee;
	border-bottom: solid 1px #ccc;
}
th:first-child,
td:first-child {
	border-left: 0;
}
	th.sort-asc span,
	th.sort-desc span {
		background-position: center right;
		background-repeat: no-repeat;
		display: block;
		width: 100%;
	}
		th.sort-asc span {
			background-image: url(/resources/images/layout/arrow-up.png);
		}
		th.sort-desc span {
			background-image: url(/resources/images/layout/arrow-down.png);
		}

input,
button,
select,
textarea {
	margin: 2px 0;
}

input[type="text"],
input[type="password"],
textarea {
	padding: 5px 5px 6px;
	border: solid 1px #ccc;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
	outline: none;
	background-color: #ffe;
}

input.search {
	padding-right: 20px;
	background: #fff url(/resources/images/layout/search_light.png) no-repeat 99% 50%;
}

input.search:focus {
	background-image: url(/resources/images/layout/search.png);
}

/* ajax load indicator */
div#loading-notification {
	position: fixed;
	z-index: 1234;
	display: none;
	right: 0;
	top: 0;
	padding: 6px 12px;
	background: #ffa;
	color: #585835;
	font-weight: bold;
	opacity: .9;
}

div#loading-notification img {
	margin: 0 8px 0 0;
	vertical-align: middle;
}

/* fka #messages */
div#notification-template {
	display: none;
}

div#notifications {
	opacity: .95;
	position: fixed;
	top: 72px;
	left: 25%;
	width: 50%;
	text-align: center;
	font-size: 125%;
	z-index: 999;
}

div#notifications div {
	background: #8cc63f;
	padding: 16px;
	color: #fff;
}

div#notifications a {
	text-decoration: underline;
	color: #fff;
}

div#notifications div.error {
	background: #c64a3f;
}

div#notifications a.close {
	background: url(/resources/images/layout/close.png) no-repeat 0 0;
	text-indent: -10000px;
	display: block;
	float: right;
	height: 16px;
	width: 16px;
}

div#notifications a:hover.close {
	background-position: -17px 0;
}

div#head {
	background: #fff url(/resources/images/layout/head-kisp.gif) repeat-x 0 0;
	padding: 0 12px;
	display: block;
}
	span#caption {
		display: block;
		font-size: 24px;
		line-height: 70px;
		color: #fff !important;
		font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
		background: transparent url(/resources/images/layout/logo-ref.png) no-repeat 99.5% 20px;
		position: relative;
	}
	
	div#nav-wrap {
		width: 100%;
		height: 2.5em; /* Prevent content overflowing */
		clear: both;
	}
		ul#nav {
			margin: 0;
			padding: 2px 0 0 0;
			list-style: none;
			display: block;
			clear: both;
			text-align: right;
			height: 2em;
		}
			ul#nav li {
				display: inline;
				float: left;
			}
			ul#nav li.tool-mail a,
			ul#nav li.tool-calendar a,
			ul#nav li.tool-settings a,
			ul#nav li.tool-service a {
				background-repeat: no-repeat;
				background-position: 0 50%;
				padding: 2px 2px 2px 24px;
				line-height: 18px;
				height: 18px;
			}
			ul#nav li.tool-mail a {
				background-image: url(/resources/images/layout/tool-mail.png);
			}
			ul#nav li.tool-calendar a {
				background-image: url(/resources/images/layout/tool-calendar.png);
			}
			ul#nav li.tool-settings a {
				background-image: url(/resources/images/layout/tool-settings.png);
			}
			ul#nav li.tool-service a {
				background-image: url(/resources/images/layout/tool-service.png);
			}
			ul#nav li.right {
				float: none;
				font-weight: normal;
			}
			ul#nav li a {
				padding: 1px 2px;
				margin: .25em .5em .5em;
				text-decoration: none;
			}
			ul#nav li.selected a,
			ul#nav li a:hover {
				text-decoration: underline;
			}

/* Body elements */
	/* Regular, no columns, layout */
	div#page {
		margin: 32px 16px;
	}

	/* Columns */
	ul#page {
		list-style: none;
		display: block;
		clear: both;
		padding: 0;
		margin: 16px auto;
		width: 97%;
	}

	ul#page.no-margin {
		margin: 0 auto;
	}

	ul#page > li {
		/*position: relative;*/
		float:left; /* added */
		margin: 0;
		clear: none;
		width: 200px;
		border-right: solid 1px #ccc;
		/*vertical-align: top;*/
		/*display: inline-block;*/
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: word-break;
	}

	/* IE 7 */
	* + html ul#page > li {
		display: inline;
	}

	ul#page > li.hide-in-print {
		overflow-y: auto;
	}

	ul#page > li.last {
		width: 460px; /* Failsafe for js (total of 960px with 3 columns) */
		padding: 0 0 0 10px;
		overflow-y: auto;
		border-right: 0;
	}

	ul#page > li.scrollable {
		overflow-y: scroll;
		overflow-x: hidden;  /* IE has issues with padding + overflow so we just hide the x axis */
		text-overflow: ellipsis;
	}
/* End body elements */

div#foot {
	background: transparent url(/resources/images/layout/foot_gradient.png) repeat-x 0 0;
	text-align: center;
	font-size: 90%;
	padding: 12px;
	height: 62px;
	color: #999;
}

div#foot a {
	color: #666;
}

/* Global UI classes */
/*	
	Column block, defaults to 48% width with 1% margin on right,
	override the width with style attr if needed (just remember to
	substract the margin + 1% to prevent overflowing)
*/
span.column {
	white-space: wrap;
	vertical-align: top;
	display: inline-block;
	width: 48%;
	margin: 0 1% 1% 0;
}

ul.tool-nav,
ul.tool-nav ul,
ul.tool-links,
ul.tool-links ul {
	font-weight: bold;
	list-style: none;
	width: 180px;
	color: #000;
	margin: 0;
}
	ul.tool-nav a {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	ul.tool-nav li {
		border-top: solid 1px #ddd;
		line-height: 20px;
		padding: 0;
	}
	ul.tool-nav > li:first-child {
		border-top: 0;
	}
	ul.tool-nav a {
		color: #333;
		display: block;
		text-decoration: none;
	}
	ul.tool-nav .icon {
		display: block;
		padding: 0 0 0 12px;
		background: transparent url(/resources/images/layout/bullet_arrow.gif) no-repeat 2px 50%;
	}
	ul.tool-nav a:hover,
	ul.tool-nav a.selected {
		text-decoration: underline;
	}
	ul.tool-nav ul {
		padding: 0;
		margin: 0;
	}
	ul.tool-nav ul > li {
		padding: 0 0 0 12px;
	}
	ul.tool-nav ul li,
	ul.tool-nav ol li {
		font-weight: normal;
	}

ul.inline {
	list-style: none;
	display: inline;
	padding: 0;
	margin: 0;
}

ul.inline > li {
	float: left;
	margin: 0 4px;
}

dl.inline {
	padding: 0 0 0 14em;
}

dl.inline.wide {
	padding: 0 0 0 24em;
}

dl.inline dt {
	float: left;
	margin: 0 0 0 -14em;
}

dl.inline dt,
form label {
	color: #666;
}

dl.inline.wide dt {
	margin: 0 0 0 -24em;
}

dl.accordion dd {
	margin: 2px 6px;
}

/* Modals (deprecated) */
div.modal-wrapper {
	background: #fff;
	position: absolute !important;
	border: solid 6px #eee;
	overflow: auto;
	max-height: 400px;
	width: 600px;
	padding: 12px;
}

div.modal-wrapper.fixed {
	position: fixed;
}

div.modal-blackout {
	position: absolute;
	background: #000;
	left: 0;
	top: 0;
	width: 100%;
}
	div.modal-wrapper .title-bar {
		background-color: #000;
		padding: 6px;
		position: relative;
	}
	div.modal-wrapper .title-bar.dragging {
		cursor: move;
	}
		div.modal-wrapper .title-bar h2 {
			font-size: 12px;
			color: white;
			line-height: 1;
			margin: 0;
			padding: 0;
			font-weight: normal;
		}
		div.modal-wrapper .close {
			color: #000;
			font-size: 90%;
			line-height: 1;
			float: right;
		}
		div.modal-inner {
			background: #fff;
			padding: 0;
		}
		div.modal-content {
			padding: 15px;
		}

/* Toolbar */
div.toolbar,
ul.toolbar {
	background: url(/resources/images/layout/toolbar.png) repeat-x 50% 50%;
}
	div.toolbar .title {
		font-weight: bold;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #333;
	}
	div.toolbar a,
	ul.toolbar a {
		color: #111;
		padding: 0 4px;
		border: solid 1px #aaa;
		background-color: #ccc;
		text-decoration: none;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
	}
		div.toolbar a:hover,
		ul.toolbar a:hover {
			color: #333;
			text-decoration: none;
			background-color: #fff;
		}

div.toolbar {
	display: block;
	padding: 6px;
	height: 22px;
	line-height: 22px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: solid 1px #ccc;
}
	div.toolbar a {
		color: #000;
		line-height: 1;
		margin-top: 1px;
		background: #ccc;
		border: solid 1px #aaa;
		padding: 4px;
		text-decoration: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
	}
	div.toolbar li:hover a {
		color: #333;
		text-decoration: none;
		background: #fff;
		border-color: #aaa;
	}
	div.toolbar li.active > a {
	}
	div.toolbar > ul.toolbar-dropdown {
		list-style: none;
		display: inline;
		clear: none;
		margin: 0;
	}
		div.toolbar > ul.toolbar-dropdown > li {
			float: left;
			clear: none;
		}
			div.toolbar > ul.toolbar-dropdown li.dropdown > a {
				padding-left: 16px;
				background-image: url(/resources/images/layout/arrow-down.png);
				background-repeat: no-repeat;
				background-position: 4px 50%;
			}
			div.toolbar ul.toolbar-dropdown li a {
				display: block;
				margin-left: 6px;
			}
			div.toolbar ul.toolbar-dropdown ul {
				position: absolute;
				list-style: none;
				display: none;
				margin: -1px 0 0 0;
				padding: 6px 0;
				background: #fff;
				z-index: 100;
				min-width: 160px;
				border: solid 1px #bbb;

				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
			}
				div.toolbar ul.toolbar-dropdown ul li {
					border-bottom: solid 1px #eee;
					display: list-item;
					float: none;
				}
					div.toolbar ul.toolbar-dropdown ul li a {
						background-color: transparent;
						border: solid 3px transparent;
						padding: 0 4px;
						line-height: 1.5;
						margin: 0;

						-moz-border-radius: 0;
						-webkit-border-radius: 0;
					}
						div.toolbar ul.toolbar-dropdown ul li:last-child {
							border-bottom-color: transparent;
						}
						div.toolbar ul.toolbar-dropdown ul li:hover a {
							color: #000;
							border-color: #ffc;
							background-color: #ffc;
/*
							border-color: #ffc;
							background: #ffc;
*/
						}

/* Picker, for contacts */
div.picker, div.picker ul, div.picker li, div.picker a.group-name, div.picker a.button { -moz-border-radius: 3px; -webkit-border-radius: 3px; }

div.picker { padding: .6em; background: #eee; border: solid 1px #ccc; display:none; position: absolute; margin-top: 3px; width: 480px; }
	div.picker input#picker-search-criteria { margin-left: 10px; width: 270px !important; display: inline !important; }
	div.picker a#picker-clear-search { margin-top: 5px; display: none; }
	div.picker ul { list-style: none; margin: 0; padding: 0; }
	div.picker ul.hidden { display: none; }
	div.picker ul li { margin: 0; padding: 0; }
	div.picker span.group-name { display: block; padding: 5px 5px 5px 16px; white-space: nowrap; margin: 0; background: #fff url(/resources/images/layout/bullet_arrow.gif) no-repeat 8px 50%; }
	div.picker span.group-name a { font-weight: bold; text-decoration: none; color: #333; }
	div.picker span.group-name a:hover { text-decoration: underline; }
	div.picker ul#picker-results { height: 300px; overflow: auto; }
	div.picker li { text-overflow: ellipsis; overflow: hidden; }
	div.picker li.selected { background: #ddd !important; }
	div.picker ul ul { margin: 0; margin-top: .5em; background: #fff; display: block; padding-left: 16px; }
		div.picker ul li { padding: .25em; border-bottom: solid 1px #eee; white-space: nowrap; }
		div.picker a.button { border: solid 1px #aaa; margin-right: 6px; padding: 0 5px; background: #ccc; color: #333 !important; text-decoration: none !important; display: inline-block; font-weight: normal !important; }

/* Move pointers */
span.move-vertical, span.move-horizontal {
}
	span.move-horizontal a,
	span.move-vertical a {
		text-indent: -10000px;
		display: inline-block;
		height: 12px;
		margin: 0 2px;
		width: 12px;
	}
	span.move-horizontal a {
		background: transparent url(/resources/images/layout/move-horizontal-sprite.png) no-repeat 0 0;
	}
		span.move-horizontal a.first { background-position: 50% -5px; }
		span.move-horizontal a.prev { background-position: 50% -25px; }
		span.move-horizontal a.next { background-position: 50% -45px; }
		span.move-horizontal a.last { background-position: 50% -65px; }

	span.move-vertical a {
		background: transparent url(/resources/images/layout/move-vertical-sprite.png) no-repeat 0 0;
	}
		span.move-vertical a.first { background-position: -5px 50%; }
		span.move-vertical a.prev { background-position: -25px 50%; }
		span.move-vertical a.next { background-position: -45px 50%; }
		span.move-vertical a.last { background-position: -65px 50%; }

/* Language selector */
ul#ui-language-selector {
	position: absolute;
	padding: 5px 10px;
	margin: 0;
	border: solid 1px #ccc;
	background: #fff;
	list-style: none;
	text-align: left;
	display: none;
	z-index: 200;
	opacity: .95;
	width: 140px;
}
	ul#ui-language-selector li {
		display: list-item;
		float: none;
		margin: 0;
	}
		ul#ui-language-selector li a {
			color: #333 !important;
		}
			ul#ui-language-selector li a:hover {
				text-decoration: underline !important;
			}

/* Progress- / percentbar */
div.percentage {
/*
	border: solid 1px #ccc;
*/
	background: #eee;
	overflow: hidden;
	display: block;
	margin: 3px 0;
	height: 12px;
	padding: 0;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
	div.percentage div.bar {
		/*
		background-repeat: repeat-x !important;
		background-image: url(/resources/images/layout/percentage.png) !important;
		background-position: 0 50% !important;
		*/
		height: 10px;
		margin: 1px;

		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	}
		div.percentage div.blue {
			background-color: #36c;
		}
		div.percentage div.green {
			background-color: #5cb354;
		}
		div.percentage div.orange {
			background-color: #bd5c17;
		}
		div.percentage div.red {
			background-color: #b2342f;
		}

.clear {
	clear:both;
}

.monospace {
}