/*

CSS for Mocha UI

Copyright:
	Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.
	
License:
	MIT-style license.

*/

/* Layout
---------------------------------------------------------------- */

input[type=checkbox] {margin-right:18px; opacity:.4; position:relative; top:2px;}
input[type=checkbox]:hover {opacity:1;}

/* Toolboxes */

.toolbox {
	float: right;
	padding: 6px 3px 0 5px;
	height: 23px;
	overflow: hidden;
}

div.toolbox.divider { /* Have to specify div here for IE6's sake */
	background: url(../images/toolbox-divider.gif) left center no-repeat;
	padding: 6px 3px 0 12px;
}

div.toolbox.divider2 { /* Have to specify div here for IE6's sake */
	background: url(../images/toolbox-divider2.gif) left center no-repeat;
	padding: 6px 4px 0 12px;
}

.toolbox img {
	cursor: pointer;
	margin-right: 6px;
	padding: 0;
	float: left;
}

.toolbox img.disabled {
	cursor: default;
}

#spinnerWrapper {
	width: 16px;
	height: 16px;
	background: url(../images/spinner-placeholder.gif) no-repeat;
	margin-right: 5px;
}

#spinner {
	visibility: hidden;
	background: url(../images/spinner.gif) no-repeat;
	width: 16px;
	height: 16px;
}

/* Navbar */

li.divider {
	margin-top: 2px;
	padding-top: 3px;	
	border-top: 1px solid #ebebeb;
}	

#pageWrapper {
	position: relative;
	overflow: hidden; /* This can be set to hidden or auto */
	border-top: 1px solid #222;
}

/* Footer */
#desktopFooterWrapper {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 30px;
	overflow: hidden;
	border-top: 1px solid #222;
}

#desktopFooter {
	font-size: 10px;
	height: 24px;
	padding: 6px 8px 0 8px;
	background: #333;
	color: #b2b2b2;
}

#desktopFooter a {
	color: #7DD0FA;
	font-weight: normal;
}

#desktopFooter a:hover {
	text-decoration: none;
}



/* Panel Layout
---------------------------------------------------------------- */

/* Columns */

.column {
	position: relative;	
	float: left;
	overflow: hidden;
	background: #f1f1f1;
}


/* Handles */	

.horizontalHandle {
	height: 4px;
	line-height: 1px;
	font-size: 1px;
	overflow: hidden;
	background: #d1d1d1 url(../images/bg-handle-horizontal.gif) repeat-x;
}

.horizontalHandle.detached .handleIcon {
	background: transparent;	
}

.horizontalHandle .handleIcon {	
	margin: 0 auto;
	height: 4px;
	line-height: 1px;
	font-size: 1px;
	overflow: hidden;
	background: url(../images/handle-icon-horizontal.gif) center center no-repeat;
}

.columnHandle {
	min-height: 10px;	
	float: left;
	width: 4px;
	overflow: hidden;
	background: #bbb url(../images/handle-icon.gif) center center no-repeat;
	border: 1px solid #9a9a9a;
	border-top: 0;
}

/* Viewport overlays
---------------------------------------------------------------- */

#modalOverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #000;
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	z-index: 10000;
}

* html 	#modalOverlay {
	position: absolute;
}

/* Fix for IE6 select z-index issue */
#modalFix {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	z-index: 9999;
}

/* Underlay */

#windowUnderlay { 
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;	
}

* html #windowUnderlay { 
	position: absolute;
}
/* Base
---------------------------------------------------------------- */




.mocha .dump {text-shadow:none;} 

.mochaToolbar {background:url(test.png); height:19px; padding:4px 0px 1px; overflow:hidden; border-bottom:1px solid #232323; border-top:1px solid #2E2E2E;}
.mochaToolbar img {cursor:pointer; opacity:.6; background:#131414 url(mochaSprite.png) repeat-x scroll left bottom; position:relative; padding:3px 10px; bottom:4px; border:1px solid #0d0d0d; border-right:1px solid #292929;}
.mochaToolbar img:hover {opacity:.9; background:transparent;}
.mochaToolbar img:active {padding:4px 10px 2px 10px;}
.mochaToolbar div {float:right; padding-right:4px; }

/* Windows
---------------------------------------------------------------- */

.mocha {
	position: absolute;
	top:0;
	opacity:.96;
	display: block;
	overflow: hidden;
	z-index:100;
	border:1px solid #292929;
	background-color:#111;	
	-moz-box-shadow: 0 0 25px 5px #0d0d0d;
	-moz-border-radius:5px;
}

.mocha.isFocused {	
	opacity:1;
	z-index:200;	
}	

.mochaOverlay {
	position: absolute;
	top: 0;
	left: 0;	
}

.mochaTabs li, .mochaTitle {background:url(mochaSprite.png) repeat-x left bottom; opacity:.8;}
	
.mochaTitle {
	overflow: hidden;	
	font-size: 12px;
	font-weight: bold;
	margin: 0;
	padding: 3px 10px;
	color:#BFBFBF;
	border-bottom:1px solid #232323;
	-moz-border-radius-topright:5px;
	-moz-border-radius-topleft:5px;
	text-shadow:#000 1px 1px 0px;
}

.windowBottom {background:#131414 url(mochaSprite.png) repeat-x scroll left bottom; opacity:.6; cursor:se-resize; height:20px; width:100%; border-top:1px solid #2E2E2E; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px;}
	
.mochaContent {
	padding: 10px 12px;
	border:1px solid #000;
	position:relative;
	color:#444;
	height:100%;
}

.mocha_resize_indicator { /* Corner resize handles */
	background-color: #333;
	width: 9px;
	height: 9px;
	float:right;
	margin-top:7px;
	margin-right:3px;
	-moz-border-radius-bottomright:8px;
}

.mocha_btn_close, .mocha_btn_minimize, .mocha_btn_reload, .mocha_btn_maximize {width:16px; margin-top:2px; background:url(buttons.png); height:16px; display:inline; float:right; margin-left:5px; cursor:pointer;}
.mocha_btn_minimize {background-position:34px 0;}
.mocha_btn_maximize {background-position:53px 0; display:none;}
.mocha_btn_close {
  background-position: right top;
}
.mocha_btn_reload.active {background:url(loader.gif) 1px 1px no-repeat; opacity:.6;}
.mocha_btn_reload {background-position:top left;}

.mochaIframe {
	width: 100%;
}  
		
/* Fix for IE6 select z-index issue */
.zIndexFix {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100px;
	height: 100px;
	border: 1px solid transparent;
}

/* Modals */

.modal2 {
	border: 8px solid #fff;		
}

.modal2 .mochaContentBorder {
	border-width: 0px;
}
	
/* Window Themes */

.mocha.no-canvas {
	background: #f1f1f1;
	border: 2px solid #555;	
}

.mocha.no-canvas .mochaTitlebar {
	background: #f1f1f1;	
}

.mocha.transparent .mochaTitlebar h3 {
	color: #fff;
	display: none;
}

.mocha.notification .mochaTitlebar {
	opacity: .0;
	filter: alpha(opacity=0);
	-moz-opacity: 0;
}

.mocha.notification .mochaContentBorder {
	border-width: 0px;
}

.mocha.notification .mochaContentWrapper {
	text-align: center;
	font-size: 12px;
	font-weight: bold;
}

/* Compontents
---------------------------------------------------------------- */

/* Toolbar Tabs */

.mochaTabs {
	color:#BFBFBF;
	background-color:#0D0D0D;
	height:23px;	
	font-size: 11px;
	padding: 4px 5px 0 5px;	
	border-bottom:1px solid #000;
	border-top:1px solid #000;
}

.mochaTabs li {
	float: left;
	cursor: pointer;
	padding: 5px 12px;
	line-height:12px;
	margin-left: 6px;
	font-size: 11px;
	border:1px solid #2E2E2E;
	border-bottom:none;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	margin-bottom:-2px;
	opacity:.6;
}

.mochaTabs li:hover {
	color:#fff;
}

.mochaTabs li.selected {
	opacity:1;
	padding: 6px 12px;
}
.mochaTabs li.selected:hover {
	color:#bfbfbf;
}



/* Sliders */

.slider {
	clear: both;
	position: relative;
	font-size: 12px;
	font-weight: bold;
	width: 200px;
	margin-bottom: 15px;	
}

.sliderWrapper {
	position: relative;
	font-size: 1px;
	line-height: 1px;
	height: 9px;
	width: 222px;
}

.sliderarea {
	position: absolute;
	top: 0;
	left: 0;
	height: 7px;
	width: 220px;
	font-size: 1px;
	line-height: 1px;
	background: url(../images/slider-area.gif) repeat-x;
	border: 1px solid #a3a3a3;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
 
.sliderknob {
	position: absolute;
	top: 0;
	left: 0;
	height: 9px;
	width: 19px;
	font-size: 1px;
	line-height: 1px;	
	background: url(../images/knob.gif) no-repeat;
	cursor: pointer;
	overflow: hidden;
	z-index: 2;
}
	
.update {
	padding-bottom: 5px;	
}


/* View Toggle */

.viewToggle {
	position: absolute;
	top: 4px;
	right: 5px;
	width: 60px;
	text-align: right;
}

.viewToggle img.viewToggleList, .viewToggle img.viewToggleGrid {
	width: 28px;
	height: 22px;
}	

.viewToggle img.viewToggleList {
	background: url(../images/view-toggle.gif) no-repeat;
	background-position: 0 -66px;
}

.viewToggle img.viewToggleGrid {
	background: url(../images/view-toggle.gif) no-repeat;
	background-position: 0 0;
}

/* Miscellaneous
---------------------------------------------------------------- */


/* Menus */

.menu-right li {
	list-style-type: none;
	display: inline;	
	margin: 0 0 0 15px;
}


/* Clears */

.clear {
	clear: both;
	height: 0;
}

html .clear {
	height: 1%;
	font-size: 1px;
	line-height: 1px;
	overflow: hidden;
	visibility: hidden;
}

/*  FORM CONTROLS */ 

/*
	.ez div.buttonDiv {overflow:hidden; padding:8px 5px;}
	.buttonDiv button {float:right;}

	
	.ez div.buttonDiv span {padding:0px 8px;}	


	.ez label {
		cursor:pointer;
		float:left;
		display:block;
		text-align:center;
		width:100%;
	}
	
	.ez .msg span {display:inline;}	
	.ez select {padding:5px 0; text-indent:1px; padding-right:14px;}	
	.ez .largeArea {background-position:0 -100px;}
	.ez .dependBox {overflow:hidden;}
	
	.ez .dependBox label {
		font-size:11px;
		font-weight:bold;
		color:#4F8A10;
		margin-right:20px;
		width:50%;
		text-align:right;
	}
	
	.ez .dependBox select {float:right;}	
	
*/	
	.minfo, .msuccess, .mwarning, .merror, .mvalidation {
	border: 1px solid;
	font-size:12px;
	margin:0;
	line-height:18px;
	padding:5px 10px 5px 60px;
	background-repeat: no-repeat;
	background-position: 10px center;
	}
	.minfo {
	color:#77B1B5;
	background-color:transparent;
	border:none;
	background-image: url('icons/info.png');
	}
	.msuccess {
	color: #77B1B5;
	background-color:transparent;
	border:none;
	background-image:url('icons/system.png');
	}
	.merror {
	color:#B5778C;
	background-color:transparent;
	border:none;	
	background-image: url('icons/error.png');
	}
	.mvalidation {
	color: #D63301;
	background-color: #FFCCBA;
	background-image: url('validation.png');
	}




.autocomp
{
	position:				absolute;
	padding-top:			0;
	margin:0;
	border:1px solid #242424;
	border-top:1px solid #0d0d0d;
	z-index:				1000000;
	-moz-box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.8);
	color:#BDBDBD;
	padding:0;
	background:#666;
	-moz-border-radius-bottomleft:7px; -moz-border-radius-bottomright:7px;
}
.autocomp li {margin:0; list-style-type:none; color:#666; padding:0; height:auto; border-left:1px solid #0A0A0A; background:url(autotest.png) repeat-x #0f0f0f; line-height:16px;}
.autocomp li:hover {opacity:.9; background:url(autotest.png) repeat-x #0f0f0f;}
.autocomp li a {display:block; height:auto; padding:5px; overflow:hidden;}
.autocomp li a strong {display:block; font-weight:normal; color:#666; line-height:16px;}
.autocomp li b, .autocomp li i {margin-top:4px;}
.autocomp li a, .autocomp li b {line-height:16px;}
.autocomp li img {float:left; width:36px; height:54px; margin-right:10px;}
.autocomp a span.autocompleter-queried {color:#7AB6BA;}
.autocomp .select .autocompleter-queried {color:#7AB6BA;}
.autocomp li.last {text-align:right; font-size:11px; padding:2px 5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px;}
.autocomp li.first {height:8px;}




.outer,.buttonDiv {overflow:hidden; background:#232323 url(mochaSprite.png) 0 -50px; padding:6px 3px 6px 8px;}
.r2 .float {width:50%; float:left;}
.r3 .float {width:33%; float:left;}
.r3 .float:last-child {width:34%; float:left;}
.r4 .float {width:25%; float:left;}
.margin {padding-right:15px;}
.ez .largeArea {background-position:0 -100px;}
.ez input,.ez textarea,.ez select {border:1px solid #3B3B3B; -moz-border-radius:4px; width:100%; padding:6px 4px; font-size:12px; font-family:Arial,Helvetica,sans-serif; margin:0; color:#B7B7B7; background:#0f0f0f url(form_test_bg.png) repeat-x;}
.ez textarea {height:auto; font-size:11px; line-height:16px; color:#BABABA;}
.ez select {padding-bottom:4px;}
.ez .default {color:#777;}
.buttonDiv button {float:right;}
.ez .msg {padding:8px; font-size:13px; -moz-border-radius:0; line-height:18px; border-bottom:1px solid #0d0d0d;}