/*
 ---

 file: window.css

 description: MUI - Create a window from a form.

 copyright: (c) 2011 Contributors in (/AUTHORS.txt).

 license: MIT-style license in (/MIT-LICENSE.txt).

 provides: css for default theme

 ...
 */

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

.mocha { display: none; overflow: hidden; background-color: #e5e5e5; }
.mocha.css3 { overflow: visible; }
.mocha.isFocused { }
.mochaOverlay { position: absolute; /* This is also set in theme.js in order to make theme transitions smoother */ top: 0; left: 0; }

/*

	We get a little creative here in order to define a gradient in the CSS using a query
	string appended to a background image.
	
	"from" is the top color of the gradient. "to" is the bottom color of the gradient.
	
	Both must be hex values without the leading # sign.
  
*/
.mochaTitlebar { width: 100%; overflow: hidden; background: url(../images/spacer.gif?from=fafafa&to=e5e5e5);}
.mochaTitlebar .toolbar { padding-top:2px; padding-bottom:1px; padding-right:6px; margin-top:0; margin-bottom:0; height:23px; line-height:23px; float:right; vertical-align:middle; margin-right:0}
.mochaTitle { float:left; font-size: 12px; font-family: Arial,Helvetica,sans-serif; line-height: 23px; vertical-align:middle; font-weight: bold; margin: 0; padding: 0 10px 0 12px; color: #888; }
.mochaTitle { color: #181818; }
.mochaTitlebar span.icon.windowMinimize { background: url('../images/window-minimize.gif') left top no-repeat; height:16px; width:16px;}
.mochaTitlebar span.icon.windowMinimize:hover { border-color:transparent; }
.mochaTitlebar span.icon.windowMaximize { background: url('../images/window-maximize.gif') left top no-repeat; height:16px; width:16px; }
.mochaTitlebar span.icon.windowMaximize:hover { border-color:transparent; } 
.mochaTitlebar span.icon.windowClose { background: url('../images/window-close.gif') left top no-repeat; height:16px;  width:16px; }
.mochaTitlebar.gauge .mochaTitle { color:white; margin-top:1px; }
.mochaTitlebar.gauge span.icon.windowClose { background: url('../images/window-close.gif') left -16px no-repeat; padding-top:1px; }
.mochaTitlebar.gauge span.icon.windowMinimize { background: url('../images/window-minimize.gif') left -16px no-repeat; padding-top:1px; }
.mochaTitlebar span.icon.windowClose:hover { border-color:transparent; }
.mochaTitlebar .toolbar span.icon { line-height:20px; padding:0;  margin-top:2px; margin-right:2px; cursor:pointer; float:left; }
.mochaToolbarWrapper { width: 100%; /* For IE */ position: relative; height: 29px; background: #f1f1f1; overflow: hidden; border-top: 1px solid #d9d9d9; }
div.mochaToolbarWrapper.bottom { border: 0; border-bottom: 1px solid #d9d9d9; }
.mochaToolbar { width: 100%; /* For IE */ border-top: 1px solid #fff; }
.mochaContentBorder { border-top: 1px solid #dadada; border-bottom: 1px solid #dadada; }
.mochaContentWrapper { /* Has a fixed height and scrollbars if required. */ font-size: 11px; overflow: auto; background: #fff; }
.mochaContent { padding: 10px 12px;}
.mochaWindowFooter { height: 26px; padding-left: 20px; padding-top:1px; }
.mochaWindowFooter .toolbar { vertical-align:middle; height:20px; line-height:20px; margin:0; padding-top:2px; float:left; padding-left:20px; }
.IE .mochaWindowFooter .toolbar { padding-top:4px }
.mochaWindowFooter .toolbar span.icon { line-height:20px; padding-top:2px; padding-bottom:2px; cursor:pointer }
.mochaWindowFooter .info { line-height:24px; float:left; color:#999999; margin-left:10px; height:24px;overflow: hidden; }

.mocha .handle { position: absolute; z-index: 2; }
.mocha .handle, .mocha .handleN,.mocha .handleS,.mocha .handleW,.mocha .handleE {  background: #0f0; width: 3px; height: 3px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 0); /* IE6 and 7*/ opacity:.0; -moz-opacity: .0; overflow: hidden; font-size: 1px; /* For IE6 */ }

.mocha .cornerSE,.mocha .cornerNE,.mocha .cornerNW,.mocha .cornerSW,.mocha .corner { /* Corner resize handles */ width: 10px; height: 10px; background: #f00; }
.mocha .cornerNE { cursor:ne-resize; top:0; right:0; }
.mocha .cornerNW { cursor:nw-resize; top:0; left:0; }
.mocha .cornerSW { cursor:sw-resize; bottom:0; left:0; }
.mocha .cornerSE { cursor:se-resize; width: 20px; height: 20px;opacity:1.0;filter:none; -ms-filter:none; background: url('../images/window-resize.gif') no-repeat; /* background: #fefefe; This is the color of the visible resize handle */ }
.mocha.css3 .cornerSE { background: transparent; border-color: transparent white white transparent; border-style: solid; border-width: 5px; height: 0; margin: 2px; opacity: 1; width: 0; }

.mochaCanvasHeader { position: absolute; top: 0; left: 0; background: transparent; z-index: -1; visibility: hidden; overflow: hidden; }
.mochaControls { position: absolute; width: 58px; top: 6px; right: 10px; height: 14px; z-index: 4; background: transparent; }
.mochaCanvasControls { position: absolute; top: 6px; right: 8px; z-index: 3; background: transparent; }
/*
	To use images for these buttons:
	1. Set the useCanvasControls window option to false.
	2. If you use a different button size you may need to reposition the controls.
	   Modify the controlsOffset window option.		
	2. Replace the background-color with a background-image for each button.

*/
.mochaMinimizeButton, .mochaMaximizeButton, .mochaCloseButton { float: right; width: 14px; height: 14px; font-size: 1px; cursor: pointer; z-index: 4; color: #666; background-color: #fff; margin-left: 5px; }
.mochaMinimizeButton { margin-left: 0; }
.mochaMaximizeButton { }
.mochaCloseButton { }
.mochaWindowFooter .spinner { display: none; position: absolute; bottom: 5px; left: 6px; width: 16px; height: 16px }
.mochaIframe { width: 100%; }
/* Fix for IE6 select z-index issue */
.zIndexFix { display: block; position: absolute; top: 0; left: 0; z-index: -1; filter: mask(); width: 100px; height: 100px; border: 1px solid transparent; }
/* Viewport overlays
---------------------------------------------------------------- */
#modalOverlay { display: none; position: fixed; top: 0; left: 0; width: 100%; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 0); /* IE6 and 7*/ opacity: 0; -moz-opacity: 0; z-index: 10000; }
/* Fix for IE6 select z-index issue */
#modalFix { display: none; position: absolute; top: 0; left: 0; width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 0); /* IE6 and 7*/ opacity: 0; -moz-opacity: 0; z-index: 9999; }

/* Underlay */
#windowUnderlay { position: fixed; top: 0; left: 0; width: 100%; background: #fff; }
* html #windowUnderlay { position: absolute; }

/* The replaced class is used internally when converting CSS values to Canvas. These classes should not be removed. */
.mocha.replaced, .mochaTitlebar.replaced, .mochaMinimizeButton.replaced, .mochaMaximizeButton.replaced, .mochaCloseButton.replaced { background-color: transparent !important; }
.windowClosed { visibility: hidden; display: none; position: absolute; top: -20000px; left: -20000px; z-index: -1; overflow: hidden; }
.windowClosed .mochaContentBorder, .windowClosed .mochaToolbarWrapper, .windowClosed .mochaTitlebar, .windowClosed .mochaControls, .windowClosed .mochaCanvasControls { position: absolute; top: 0; left: 0; visibility: hidden; display: none; z-index: -1; }

/* Modals */
.modal2 {}
.modal2 .mochaContentBorder { border-width: 0; }

/* Window Themes */
.mocha.no-canvas { background: #e5e5e5; border: 1px solid #555; }
.mocha.css3.no-canvas { border: none; }
.mochaCss3Shadow { background-color: #333; }
.mocha.no-canvas .mochaTitlebar { background: #e5e5e5; }
.mocha.css3 .mochaTitlebar {
/*
	background-image: -moz-linear-gradient(top, #fafafa, #e5e5e5);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #e5e5e5));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#e5e5e5')";
*/
	background: #f1f1f1;
}
.mocha.transparent .mochaTitlebar h3 { color: #fff; display: none; }
.mocha.transparent .mochaContentWrapper { background: transparent; }
.mocha.notification { background: #fff; }
.mocha.notification .mochaTitlebar { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 0); /* IE6 and 7*/ opacity: .0; -moz-opacity: 0; }
.mocha.notification .mochaContentBorder { border-width: 0; }
.mocha.notification .mochaContentWrapper { text-align: center; font-size: 12px; font-weight: bold; background: transparent; }

.IE .mochaTitlebar .toolbar { margin-top:0 }

/* Example Window Themes */
#builder_contentWrapper { background: #f5f5f7; }
#json01 .mochaTitlebar { background: #6dd2db; }
#json02 .mochaTitlebar { background: #6db6db; }
#json03 .mochaTitlebar { background: #6d92db; }
.jsonExample .mochaTitlebar h3 { color: #ddd; }

/* This does not work in IE6. */
.isFocused.jsonExample .mochaTitlebar h3 { color: #fff; }
#fxmorpherExample .mochaContentWrapper { background: #577a9e; }
#clock { background: #fff; }


/* Ionize addon 
---------------------------------------*/
.mocha .buttons {
	width: 100%;
	position:absolute;
	bottom:10px;
	padding-right: 40px;
}

/* Ionize Modal Window Themes */
.mocha.confirmation .mochaContentWrapper {
	overflow:auto;
}
.mocha.confirmation .mochaContent,
.mocha.information .mochaContent,
.mocha.alert .mochaContent,
.mocha.error .mochaContent {
	background-repeat: no-repeat;
	background-position: 20px 28px;
	min-height: 60px;
}
.mocha.confirmation .mochaContent {background-image:url(../../../../../images/icon_48_confirm.png);}
.mocha.information .mochaContent {background-image:url(../../../../../images/icon_48_information.png);}
.mocha.alert .mochaContent {background-image:url(../../../../../images/icon_48_alert.png);}
.mocha.error .mochaContent {background-image:url(../../../../../images/icon_48_error.png);}

.mocha.confirmation .message,
.mocha.information .message,
.mocha.alert .message,
.mocha.error .message {
	padding:20px 10px 0 70px;
	font-size: 12px;
	color:#000;
}

