[irc/quakenet/qwebirc.git] / static / css / mochaui / ui.css

/*\r
\r
CSS for Mocha UI\r
\r
Copyright:\r
	Copyright (c) 2007-2008 Greg Houston, <http://greghoustondesign.com/>.\r
	\r
License:\r
	MIT-style license.\r
\r
*/\r
\r
/* Layout\r
---------------------------------------------------------------- */\r
\r
html, body {\r
	overflow: hidden;\r
}\r
\r
body {\r
	margin: 0; /* Required */\r
	background: #fff; /* #6989b3 url(../../images/mochaui/splash.gif) center center no-repeat; */\r
}\r
\r
#desktop {\r
	visibility: hidden; \r
	position: relative;\r
	min-width: 750px; /* Helps keep header content from wrapping */\r
	height: 100%;\r
	overflow: hidden;\r
	cursor: default; /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */\r
}\r
\r
#desktopHeader {\r
	background: #f1f1f1;\r
}\r
\r
#desktopTitlebarWrapper {\r
	position: relative;	\r
	height: 45px;\r
	overflow: hidden;\r
	background: #333 url(../../images/mochaui/bg-header.gif) repeat-x;\r
}\r
\r
#desktopTitlebar {\r
	padding: 7px 8px 6px 8px;\r
	height: 32px;\r
	background: url(../../images/mochaui/logo.gif) no-repeat;\r
	background-position: left 0;\r
}\r
\r
#desktopTitlebar h1.applicationTitle {\r
	display: none;\r
	margin: 0;\r
	padding: 0 5px 0 0;\r
	font-size: 20px;\r
	line-height: 25px;\r
	font-weight: bold;\r
	color: #fff;\r
}\r
\r
#desktopTitlebar h2.tagline {\r
	font-size: 12px;\r
	color: #b2b2b2;\r
	font-weight: bold;\r
	padding: 5px 0 0 0;\r
	text-align: center;\r
}\r
\r
#desktopTitlebar h2.tagline .taglineEm {\r
	color: #fff;\r
	font-weight: bold;\r
}\r
\r
#topNav {\r
	font-family: Verdana, Arial, Helvetica, sans-serif;\r
	font-size: 10px;\r
	position: absolute;\r
	right: 0;\r
	top: 0;\r
	color: #b2b2b2;\r
	text-align: right;\r
	padding: 13px 10px 0 0;\r
}\r
\r
#topNav a {\r
	color: #7DD0FA;\r
	font-weight: normal;\r
}\r
\r
#topNav a:hover {\r
	text-decoration: none;\r
}\r
\r
/* Toolboxes */\r
\r
.toolbox {\r
	float: right;\r
	padding: 6px 3px 0 5px;\r
	height: 23px;\r
	overflow: hidden;\r
}\r
\r
div.toolbox.divider { /* Have to specify div here for IE6's sake */\r
	background: url(../../images/mochaui/toolbox-divider.gif) left center no-repeat;\r
	padding: 6px 3px 0 12px;\r
}\r
\r
div.toolbox.divider2 { /* Have to specify div here for IE6's sake */\r
	background: url(../../images/mochaui/toolbox-divider2.gif) left center no-repeat;\r
	padding: 6px 4px 0 12px;\r
}\r
\r
.toolbox img {\r
	cursor: pointer;\r
	margin-right: 6px;\r
	padding: 0;\r
	float: left;\r
}\r
\r
.toolbox img.disabled {\r
	cursor: default;\r
}\r
\r
#spinnerWrapper {\r
	width: 16px;\r
	height: 16px;\r
	background: url(../../images/mochaui/spinner-placeholder.gif) no-repeat;\r
	margin-right: 5px;\r
}\r
\r
#spinner {\r
	visibility: hidden;\r
	background: url(../../images/mochaui/spinner.gif) no-repeat;\r
	width: 16px;\r
	height: 16px;\r
}\r
\r
/* Navbar */\r
\r
#desktopNavbar {\r
	background: #4C4C4C;\r
	height: 30px;\r
	margin: 0 0px;	\r
}\r
\r
#desktopNavbar ul {	\r
	padding: 0;\r
	margin: 0;\r
	list-style: none;\r
	font-size: 12px;\r
}\r
\r
#desktopNavbar li {\r
	float: left;\r
}\r
\r
#desktopNavbar a {\r
	display: block;\r
}	\r
	\r
#desktopNavbar ul li a {\r
	padding: 6px 10px 6px 10px;	\r
	color: #b2b2b2;\r
	font-weight: normal;\r
}\r
\r
#desktopNavbar ul li a:hover {\r
	color: #fff;\r
}\r
\r
#desktopNavbar ul li a.arrow-right, #desktopNavbar ul li a:hover.arrow-right {\r
	background-image: url(../../images/mochaui/arrow-right.gif);\r
	background-repeat: no-repeat;\r
	background-position: right 7px;	\r
} \r
\r
#desktopNavbar li ul {\r
	padding: 2px;\r
	border: 1px solid #3f3f3f;\r
	background: #fff url(../../images/mochaui/bg-dropdown.gif) repeat-y;\r
	position: absolute;\r
	width: 164px;\r
	left: -999em;\r
	z-index: 8000;\r
}\r
\r
#desktopNavbar li:hover ul ul,\r
#desktopNavbar li.ieHover ul ul,\r
#desktopNavbar li:hover ul ul ul,\r
#desktopNavbar li.ieHover ul ul ul {\r
	left: -999em;\r
}\r
\r
#desktopNavbar li ul ul { /* third-and-above-level lists */\r
	margin: -22px 0 0 164px;\r
}\r
\r
#desktopNavbar li ul li .check {\r
	position: absolute;\r
	top: 8px;\r
	left: 6px;\r
	width: 5px;\r
	height: 5px;\r
	background: #555;\r
	overflow: hidden;\r
	line-height: 1px;\r
	font-size: 1px;\r
}\r
\r
#desktopNavbar li ul li a {\r
	position: relative;\r
	padding: 1px 9px 1px 25px;\r
	width: 130px;\r
	color: #3f3f3f;\r
	font-weight: normal;\r
}\r
\r
#desktopNavbar li ul li a:hover {\r
	background: #6C98D9;\r
	color: #fff;\r
}\r
\r
#desktopNavbar li ul li a:hover .check {\r
	background: #fff;\r
}\r
\r
#desktopNavbar li:hover ul,\r
#desktopNavbar li.ieHover ul,\r
#desktopNavbar li li.ieHover ul,\r
#desktopNavbar li li li.ieHover ul,\r
#desktopNavbar li li:hover ul,\r
#desktopNavbar li li li:hover ul { /* lists nested under hovered list items */\r
	left: auto;\r
}\r
\r
#desktopNavbar li:hover { /* For IE7 */\r
    position: static;\r
}\r
\r
li.divider {\r
	margin-top: 2px;\r
	padding-top: 3px;	\r
	border-top: 1px solid #ebebeb;\r
}	\r
\r
#pageWrapper {\r
	position: relative;\r
	overflow: hidden; /* This can be set to hidden or auto */\r
	border-top: 1px solid #222;\r
}\r
\r
/* Footer */\r
#desktopFooterWrapper {\r
	position: absolute;\r
	left: 0;\r
	bottom: 0;\r
	width: 100%;\r
	height: 30px;\r
	overflow: hidden;\r
	border-top: 1px solid #222;\r
}\r
\r
#desktopFooter {\r
	font-family: Verdana, Arial, Helvetica, sans-serif;\r
	font-size: 10px;\r
	height: 24px;\r
	padding: 6px 8px 0 8px;\r
	background: #333;\r
	color: #b2b2b2;\r
}\r
\r
#desktopFooter a {\r
	color: #7DD0FA;\r
	font-weight: normal;\r
}\r
\r
#desktopFooter a:hover {\r
	text-decoration: none;\r
}\r
\r
/* Dock/Taskbar */\r
\r
#dockWrapper {\r
	display: none;\r
	width: 100%;\r
	border-top: 1px solid #222;\r
}\r
\r
#dockWrapper.top {\r
	border: 0;\r
}\r
\r
#dock {\r
	position: relative;\r
	padding: 3px 16px 0 6px;\r
	bottom: 0;\r
	left: 0;\r
	background: #4c4c4c;\r
	min-height: 27px;\r
	height: auto;\r
}\r
\r
*html #dock {\r
	height: 30px; /* Used for IE 6.0 since it does not support min-height */\r
}\r
\r
.dockTab {\r
	float: left;\r
	position: relative;	\r
	font-size: 11px;\r
	width: 150px;\r
	height: 24px;\r
	margin: 0 3px 2px 0;\r
	overflow: hidden;	\r
	cursor: pointer;\r
	background: url(../../images/mochaui/dock-tabs.gif) left top no-repeat;\r
}\r
\r
.dockTab.activeDockTab {	\r
	background-position: left -24px;\r
}\r
\r
.dockText {\r
	position: absolute;\r
	top: 0;\r
	left: 0;\r
	display: block;\r
	font-weight: normal;\r
	color: #bbb;	\r
	text-align: left;\r
	padding: 4px 10px 2px 10px;\r
	width: 130px;\r
	height: 19px;\r
	overflow: hidden;\r
}\r
\r
.dockText:hover {\r
	color: #fff;\r
}\r
\r
.dockTab.activeDockTab .dockText {\r
	color: #fff;\r
}\r
\r
#dockCanvas {\r
	position: absolute;\r
	top: 5px;\r
	right: 3px;\r
	z-index: 2;\r
}\r
\r
#dockPlacement {\r
	position: absolute;\r
	top: 4px;\r
	right: 8px;\r
	width: 10px;\r
	height: 9px;\r
	opacity: 0;\r
	filter: alpha(opacity=0);\r
	-moz-opacity: 0;\r
	background: #f00; /* for troubleshooting */\r
	cursor: pointer;\r
	z-index: 3; /* for IE */\r
	text-align: right;\r
}\r
\r
#dockAutoHide {\r
	position: absolute;\r
	top: 14px;\r
	right: 8px;\r
	width: 10px;\r
	height: 9px;\r
	opacity: 0;\r
	filter: alpha(opacity=0);\r
	-moz-opacity: 0;\r
	background: #f00; /* for troubleshooting */\r
	cursor: pointer;\r
	z-index: 3; /* for IE */\r
}\r
\r
/* Panel Layout\r
---------------------------------------------------------------- */\r
\r
/* Columns */\r
\r
.column {\r
	position: relative;	\r
	float: left;\r
	overflow: hidden;\r
	background: #f1f1f1;\r
}\r
\r
/* Panels */\r
\r
.panel {\r
	position: relative;	\r
	overflow: auto;\r
	border-bottom: 1px solid #b9b9b9;\r
	border-top: 0;\r
}\r
\r
.pad {\r
	position: absolute;\r
	top: 0;\r
	left: 0;\r
	padding: 8px;\r
	overflow: hidden;\r
}\r
\r
#mainPanel {\r
	background: #fff; 	\r
}	\r
\r
.panel-header {\r
	position: relative;	\r
	background: #f1f1f1 url(../../images/mochaui/bg-panel-header.gif) repeat-x;\r
	height: 30px;\r
	overflow: hidden;\r
	border-bottom: 1px solid #d3d3d3;		\r
}\r
\r
.panel-headerContent {\r
	padding-top: 2px;\r
}	\r
\r
.panel-headerContent.tabs {\r
	background: url(../../images/mochaui/tabs.gif) repeat-x;\r
	background-position: left -68px;	\r
}\r
\r
.panel-header h2 {\r
	display: inline-block;\r
	font-size: 12px;\r
	margin: 0;\r
	padding: 3px 8px 0 8px;\r
	height: 22px;\r
	overflow: hidden;\r
	color: #3f3f3f;\r
}\r
\r
.panel-header-toolbox {\r
	float: right;\r
	height: 26px;\r
	margin: 2px 5px 5px 0;\r
	text-align: right;\r
}\r
\r
.panel-collapse {\r
	background: url(../../images/mochaui/collapse-expand.gif) left top no-repeat;\r
}\r
\r
.panel-expand {\r
	background: url(../../images/mochaui/collapse-expand.gif) left -16px no-repeat;\r
}\r
\r
.icon16 {\r
	margin: 5px 0 0 2px;\r
	cursor: pointer;\r
}\r
\r
.panel-footerWrapper {\r
	position: absolute;\r
	left: 0;\r
	bottom: 0;\r
	width: 100%;\r
	background: #f9f9f9;\r
	height: 30px;\r
	overflow: hidden;\r
	border-top: 1px solid #b9b9b9;\r
}\r
\r
.panel-footer {\r
	padding: 1px 0 0 8px;	\r
}\r
\r
.panel-footerContent {\r
	margin-top: 5px;\r
}\r
\r
/* Handles */	\r
\r
.horizontalHandle {\r
	height: 4px;\r
	line-height: 1px;\r
	font-size: 1px;\r
	overflow: hidden;\r
	background: #d1d1d1 url(../../images/mochaui/bg-handle-horizontal.gif) repeat-x;\r
}\r
\r
.horizontalHandle.detached .handleIcon {\r
	background: transparent;	\r
}\r
\r
.horizontalHandle .handleIcon {	\r
	margin: 0 auto;\r
	height: 4px;\r
	line-height: 1px;\r
	font-size: 1px;\r
	overflow: hidden;\r
	background: url(../../images/mochaui/handle-icon-horizontal.gif) center center no-repeat;\r
}\r
\r
.columnHandle {\r
	min-height: 10px;	\r
	float: left;\r
	width: 4px;\r
	overflow: hidden;\r
	background: #bbb url(../../images/mochaui/handle-icon.gif) center center no-repeat;\r
	border: 1px solid #9a9a9a;\r
	border-top: 0;\r
}\r
\r
/* Viewport overlays\r
---------------------------------------------------------------- */\r
\r
#modalOverlay {\r
	display: none;\r
	position: fixed;\r
	top: 0;\r
	left: 0;\r
	width: 100%;\r
	background: #000;\r
	opacity: 0;\r
	filter: alpha(opacity=0);\r
	-moz-opacity: 0;\r
	z-index: 10000;\r
}\r
\r
* html 	#modalOverlay {\r
	position: absolute;\r
}\r
\r
/* Fix for IE6 select z-index issue */\r
#modalFix {\r
	display: none;\r
	position: absolute;\r
	top: 0;\r
	left: 0;\r
	width: 100%;\r
	opacity: 0;\r
	filter: alpha(opacity=0);\r
	-moz-opacity: 0;\r
	z-index: 9999;\r
}\r
\r
/* Underlay */\r
\r
#windowUnderlay { \r
	position: fixed;\r
	top: 0;\r
	left: 0;\r
	width: 100%;\r
	background: #fff;	\r
}\r
\r
* html #windowUnderlay { \r
	position: absolute;\r
}\r
\r
/* Windows\r
---------------------------------------------------------------- */\r
\r
.mocha {\r
	position: absolute;\r
	top: 0;\r
	left: 0;\r
	display: none;\r
	overflow: hidden;	\r
}\r
\r
.mocha.isFocused {	\r
}	\r
\r
.mochaOverlay {\r
	position: absolute;\r
	top: 0;\r
	left: 0;	\r
}\r
	\r
.mochaTitlebar {\r
	width: 100%;\r
	overflow: hidden;	\r
}\r
\r
.mochaTitlebar h3 {\r
	font-size: 12px;\r
	line-height: 15px;	\r
	font-weight: bold;\r
	margin: 5px 10px 4px 12px;\r
	padding: 0;\r
	color: #888;\r
}\r
\r
.mocha.isFocused .mochaTitlebar h3 {\r
	color: #141414;\r
}\r
\r
.mochaToolbarWrapper {\r
	width: 100%; /* For IE */\r
	position: relative;\r
	height: 29px;\r
	background: #f1f1f1;	\r
	overflow: hidden;\r
	border-top: 1px solid #d9d9d9;\r
}\r
\r
div.mochaToolbarWrapper.bottom {\r
	border: 0;\r
	border-bottom: 1px solid #d9d9d9;\r
}\r
\r
.mochaToolbar {\r
	width: 100%; /* For IE */\r
	border-top: 1px solid #fff;\r
}\r
\r
.mochaContentBorder {\r
	border-top: 1px solid #dadada;\r
	border-bottom: 1px solid #dadada;\r
}\r
\r
.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */\r
	font-size: 12px;\r
	overflow: auto;\r
}\r
	\r
.mochaContent {\r
	padding: 10px 12px;\r
}\r
\r
.mocha .handle {\r
	position: absolute;\r
	background: #0f0;\r
	width: 3px;\r
	height: 3px;\r
	z-index: 2;\r
	opacity: .0;\r
	filter: alpha(opacity=0);\r
	-moz-opacity: .0;\r
	overflow: hidden;\r
	font-size: 1px; /* For IE6 */\r
}\r
\r
.mocha .corner { /* Corner resize handles */\r
	background: #f00;\r
	width: 10px;\r
	height: 10px;\r
}\r
\r
.mocha .cornerSE { /* Bottom right resize handle */\r
	background: #f00;\r
	width: 20px;\r
	height: 20px;\r
}\r
\r
.mochaCanvasHeader {\r
	position: absolute;\r
	top: 0;\r
	left: 0;\r
	background: transparent;\r
	z-index: -1;\r
	display: none;\r
	overflow: hidden;\r
}\r
\r
.mochaControls {\r
	position: absolute;\r
	width: 52px;\r
	top: 8px;\r
	right: 8px;\r
	height: 14px;\r
	z-index: 4;\r
	background: transparent;\r
}\r
\r
.mochaCanvasControls {\r
	position: absolute;	\r
	top: 8px;\r
	right: 8px;	\r
	z-index: 3;\r
	background: transparent;\r
}\r
\r
/*\r
	To use images for these buttons:\r
	1. Set the useCanvasControls window option to false.\r
	2. If you use a different button size you may need to reposition the controls.\r
	   Modify the controlsOffset window option.		\r
	2. Add background images to each button.\r
\r
*/\r
.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton {\r
	float: right;\r
	width: 14px;\r
	height: 14px;\r
	font-size: 1px;	\r
	cursor: pointer;\r
	z-index: 4;\r
	background: #f00;\r
	margin-left: 5px;\r
}\r
\r
.mochaMinimizeButton {\r
	margin-left: 0;\r
}\r
\r
.mochaMaximizeButton {\r
}\r
\r
.mochaCloseButton {\r
}\r
\r
.mochaSpinner{\r
	visibility: hidden;	\r
	position: absolute;\r
	bottom: 7px;\r
	left: 6px;\r
	width: 16px;\r
	height: 16px;\r
	background: url(../../images/mochaui/spinner.gif) no-repeat;\r
}\r
\r
.mochaIframe {\r
	width: 100%;\r
}  \r
		\r
/* Fix for IE6 select z-index issue */\r
.zIndexFix {\r
	display: block;\r
	position: absolute;\r
	top: 0;\r
	left: 0;\r
	z-index: -1;\r
	filter: mask();\r
	width: 100px;\r
	height: 100px;\r
	border: 1px solid transparent;\r
}\r
\r
/* Modals */\r
\r
.modal2 {\r
	border: 8px solid #fff;		\r
}\r
\r
.modal2 .mochaContentBorder {\r
	border-width: 0px;\r
}\r
	\r
/* Window Themes */\r
\r
.mocha.no-canvas {\r
	background: #f1f1f1;\r
	border: 2px solid #555;	\r
}\r
\r
.mocha.no-canvas .mochaTitlebar {\r
	background: #f1f1f1;	\r
}\r
\r
.mocha.transparent .mochaTitlebar h3 {\r
	color: #fff;\r
	display: none;\r
}\r
\r
.mocha.notification .mochaTitlebar {\r
	opacity: .0;\r
	filter: alpha(opacity=0);\r
	-moz-opacity: 0;\r
}\r
\r
.mocha.notification .mochaContentBorder {\r
	border-width: 0px;\r
}\r
\r
.mocha.notification .mochaContentWrapper {\r
	text-align: center;\r
	font-size: 12px;\r
	font-weight: bold;\r
}\r
\r
/* Compontents\r
---------------------------------------------------------------- */\r
\r
/* Toolbar Tabs */\r
\r
.toolbarTabs {	\r
	padding: 0 5px 2px 2px;\r
	background: url(../../images/mochaui/tabs.gif) repeat-x;\r
	background-position: left -70px;\r
	overflow: visible;\r
}\r
\r
.tab-menu {	\r
	padding-top: 1px;\r
	list-style:	none;\r
	margin: 0;\r
	padding: 0;\r
	line-height: 16px;\r
	font-size: 11px;\r
}\r
\r
.tab-menu li {\r
	display: block;\r
	float: left;\r
	margin:	0 0 5px 0;\r
	cursor: pointer;	\r
	background: url(../../images/mochaui/tabs.gif) repeat-x;\r
	background-position: left -35px;\r
}\r
\r
.tab-menu li.selected {\r
	background: url(../../images/mochaui/tabs.gif) repeat-x;\r
	background-position: left 0;\r
}\r
\r
.tab-menu li a {\r
	display: block;\r
	margin-left: 8px;\r
	padding: 6px 16px 5px 10px;\r
	text-align: center;\r
	font-weight: normal;\r
	color: #141414;\r
	background: url(../../images/mochaui/tabs.gif) repeat-x;\r
	background-position: right -35px;	\r
}\r
\r
.tab-menu li.selected a {\r
	color: #141414;\r
	font-weight: bold;	\r
	background: url(../../images/mochaui/tabs.gif) repeat-x;\r
	background-position: right 0;\r
}\r
\r
/* Accordian */\r
\r
.accordianWrapper {\r
	padding: 0;\r
	background: #fff;\r
}\r
\r
.accordianToggler {\r
	margin: 0;\r
	padding: 6px 10px;\r
	background: #f1f1f1 url(../../images/mochaui/bg-panel-header.gif) repeat-x;\r
	font-size: 12px;\r
	cursor: pointer;\r
	border-top: 1px solid #e3e3e3;	\r
}\r
\r
.topToggler {\r
	border-top: none;\r
}\r
\r
.accordianToggler.open {\r
	background: #fff url(../../images/mochaui/bg-panel-header.gif) repeat-x;	\r
}\r
\r
.accordianContent {\r
	padding: 10px 10px 5px 10px;\r
}\r
\r
/* Sliders */\r
\r
.slider {\r
	clear: both;\r
	position: relative;\r
	font-size: 12px;\r
	font-weight: bold;\r
	width: 200px;\r
	margin-bottom: 15px;	\r
}\r
\r
.sliderWrapper {\r
	position: relative;\r
	font-size: 1px;\r
	line-height: 1px;\r
	height: 9px;\r
	width: 222px;\r
}\r
\r
.sliderarea {\r
	position: absolute;\r
	top: 0;\r
	left: 0;\r
	height: 7px;\r
	width: 220px;\r
	font-size: 1px;\r
	line-height: 1px;\r
	background: url(../../images/mochaui/slider-area.gif) repeat-x;\r
	border: 1px solid #a3a3a3;\r
	border-bottom: 1px solid #ccc;\r
	border-left: 1px solid #ccc;\r
	margin: 0;\r
	padding: 0;\r
	overflow: hidden;\r
}\r
 \r
.sliderknob {\r
	position: absolute;\r
	top: 0;\r
	left: 0;\r
	height: 9px;\r
	width: 19px;\r
	font-size: 1px;\r
	line-height: 1px;	\r
	background: url(../../images/mochaui/knob.gif) no-repeat;\r
	cursor: pointer;\r
	overflow: hidden;\r
	z-index: 2;\r
}\r
	\r
.update {\r
	padding-bottom: 5px;	\r
}\r
\r
/* Folder Tree */\r
\r
.tree {\r
	font-size: 11px;\r
	line-height: 15px;\r
	margin: 0;\r
}\r
\r
.tree ul {\r
	margin: 0;\r
}\r
\r
.tree li {\r
	list-style-type: none;\r
	white-space: nowrap;\r
}\r
\r
.tree li a {\r
	color: #3f3f3f;	\r
}	\r
\r
.tree li img {\r
	vertical-align: middle;\r
	width: 18px;\r
	height: 18px;\r
	overflow: hidden;\r
}\r
\r
.tree li span {\r
	padding-left: 2px;\r
}\r
\r
/* View Toggle */\r
\r
.viewToggle {\r
	position: absolute;\r
	top: 4px;\r
	right: 5px;\r
	width: 60px;\r
	text-align: right;\r
}\r
\r
.viewToggle img.viewToggleList, .viewToggle img.viewToggleGrid {\r
	width: 28px;\r
	height: 22px;\r
}	\r
\r
.viewToggle img.viewToggleList {\r
	background: url(../../images/mochaui/view-toggle.gif) no-repeat;\r
	background-position: 0 -66px;\r
}\r
\r
.viewToggle img.viewToggleGrid {\r
	background: url(../../images/mochaui/view-toggle.gif) no-repeat;\r
	background-position: 0 0;\r
}\r
\r
/* Miscellaneous\r
---------------------------------------------------------------- */\r
\r
/* Window Builder Form Elements */\r
	\r
#desktop form {\r
	margin: 0 0 0 0;\r
	padding: 5px 0 0 0;\r
}\r
\r
#newWindowForm {\r
	width: 320px;\r
}\r
\r
#desktop .input {\r
	width: 225px;\r
	padding: 1px 0 1px 3px;\r
	border: 1px solid #bbb;	\r
}\r
\r
#desktop textarea {\r
	width: 225px;\r
	height: 100px;\r
	padding: 1px 0 1px 3px;\r
	border: 1px solid #bbb;\r
}\r
\r
#desktop .formLabel {\r
	float: left;	\r
	text-align: right;\r
	width: 80px;\r
	margin: 0 0 5px 0;\r
}\r
\r
#desktop .formField {\r
	float: right;\r
	margin: 0 0 5px 0;\r
	padding: 0 0 0 0;\r
	width: 230px;\r
}\r
\r
#desktop form .number {\r
	width: 40px;\r
}\r
\r
/* Menus */\r
\r
.menu-right li {\r
	list-style-type: none;\r
	display: inline;	\r
	margin: 0 0 0 15px;\r
}\r
\r
/* Notifications */\r
\r
/* Success, error & notice boxes for messages and errors. */\r
.error,\r
.notice, \r
.success    { padding: 8px; margin-bottom: 10px; border: 2px solid #ddd; }\r
.error      { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }\r
.notice     { background: #FFF6BF; color: #817134; border-color: #FFD324; }\r
.success    { background: #E6EFC2; color: #529214; border-color: #C6D880; }\r
.error a    { color: #D12F19; }\r
.notice a   { color: #817134; }\r
.success a  { color: #529214; }\r
\r
\r
/* Clears */\r
\r
.clear {\r
	clear: both;\r
	height: 0;\r
}\r
\r
*html .clear {\r
	height: 1%;\r
	font-size: 1px;\r
	line-height: 1px;\r
	overflow: hidden;\r
	visibility: hidden;\r
}