
/*

	Layout.css for Mocha UI

	Theme: Default

	Copyright:
		Copyright (c) 2007-2009 Greg Houston, <http://greghoustondesign.com/>.

	License:
		MIT-style license.

	Required by:
		Layout.js

	Modified for Dark Mode by:
	Raymond Lanser

	*/

/* Layout 
	---------------------------------------------------------------- */
@import mixins
@import variables

+themeGenerate($layoutTheme, "--")


html, body
	background: var(--bg-color)


body 
	margin: 0  /* Required */
	/*color: var(--font-color)*/

#desktop
	position: relative
	min-width: 400px  /* Helps keep header content from wrapping */
	height: 100%
	min-height: 100%
	overflow: hidden
	cursor: default  /* Fix for issue in IE7. IE7 wants to use the I-bar text cursor */

#desktopHeader
	background: var(--bg-color-tint)

/* Hidden Index Title Element, Wrapper does not exist
#desktopTitlebarWrapper
	position: relative
	height: 45px
	overflow: hidden
	background: #718BA6 url("../images/bg-header.gif") repeat-x

#desktopTitlebar 
	padding: 7px 8px 6px
	height: 32px
	background: url("../images/logo.gif") no-repeat
	background-position: left 0
	h1.applicationTitle
		display: none
		margin: 0
		padding: 0px 5px 0px 0px
		font-size: 20px
		line-height: 25px
		font-weight: bold
		color: var(--selected-text)
	h2.tagline
		padding: 7px 0px 0px
		font-family: Verdana, Arial, Helvetica, sans-serif
		font-size: 10px
		color: #d4dce4
		font-weight: bold
		text-align: center
		text-transform: uppercase
		.taglineEm 
			color: var(--selected-text)
			font-weight: bold

#topNav
	font-family: Verdana, Arial, Helvetica, sans-serif
	font-size: 10px
	position: absolute
	right: 0
	top: 0
	color: #d4dce4
	text-align: right
	padding: 13px 10px 0 0
	a
		color: var(--selected-text)
		font-weight: normal
		&:hover
			text-decoration: none

/* Navbar */

#desktopNavbar
	background: var(--bg-color)
	margin: 0
	height: 20px
	border-bottom: 1px solid #3f3f3f
	ul
		padding: 0
		margin: 0
		list-style: none
		font-size: 12px
	&>ul>li
		float: left
	a
		display: block

#desktopNavbar ul li a
	/*padding: 6px 10px 6px*/
	color: var(--font-color)
	font-weight: normal
	padding: 2px 10px 0px
	&:hover
		color: var(--font-color-tint)
		background-color: var(--bg-color-tint)

#desktopNavbar li ul
	border: 1px solid #3f3f3f
	background: var(--bg-color-tint)
	position: absolute
	left: -999em
	z-index: 8000
	&::before
		content: ''
		background-color: var(--mocha-border-lte)
		opacity: 0.8
		width: 20px
		height: 100%
		position: absolute
		left: 0px

#desktopNavbar li:hover,#desktopNavbar li.ieHover
	ul ul, ul ul ul
		left: -999em

#desktopNavbar li ul ul  /* third-and-above-level lists */
	margin: -22px 0 0 163px

#desktopNavbar li ul li 
	.check
		position: absolute
		top: 8px
		left: 6px
		width: 5px
		height: 5px
		background: var(--bg-color-tint)
		overflow: hidden
		line-height: 1px
		font-size: 1px
	a
		position: relative
		/*padding: 1px 9px 1px 25px*/
		min-width: 120px
		color: var(--font-dtint)
		font-weight: normal
		/* Fix By Chris */
		padding: 1px 10px 1px 20px
		/* Reduce left padding */
		&:hover
			background: var(--row-select)
			color: #fff
			.check
				background: var(--bg-color-tint)
	
		

#desktopNavbar
	li, li li, li li li
		&:hover ul, &.iehover ul
			left: auto


#desktopNavbar li:hover  /* For IE7 */
	position: static

li.divider
	margin-top: 2px
	padding-top: 3px
	border-top: 1px solid var(--divider-border)

#pageWrapper
	position: relative
	overflow: hidden  /* This can be set to hidden or auto */
	border-top: 1px solid var(--border-col)
	border-bottom: 1px solid var(--border-col)
	/*height: 100%*/

/* Footer */

#desktopFooterWrapper
	position: absolute
	left: 0
	bottom: 0
	width: 100%
	height: 30px
	overflow: hidden

#desktopFooter
	font-family: Verdana, Arial, Helvetica, sans-serif
	font-size: 11px
	height: 24px
	padding: 6px 8px 0
	background: var(--bg-color-tint)



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

/* Columns */

.column
	position: relative
	float: left
	overflow: hidden  /* Required by IE6 */

/* Panels */

.panel
	position: relative
	overflow: auto
	background: var(--bg-color)
	/*border-bottom: 1px solid var(--border-col)
	border-bottom: 1px solid var(--border-lte)

.panelWrapper.collapsed .panel-header
	border-bottom: 0

.panelAlt
	background: var(--bg-color-tint)

.bottomPanel
	border-bottom: 0

.pad
	padding: 8px

#mainPanel
	background: var(--bg-color)

.panel-header
	position: relative
	background: var(--bg-color-tint)
	/*background: #f1f1f1 url("../images/bg-panel-header.gif") repeat-x
	height: 30px
	overflow: hidden
	border-bottom: 1px solid var(--border-lte)
	h2
		display: inline-block
		font-size: 12px
		margin: 0
		padding: 3px 8px 0px
		height: 22px
		overflow: hidden
		color: #333

.panel-headerContent
	padding-top: 2px

.panel-headerContent.tabs
	background-position: left -68px

.panel-collapse
	background: var(--collapseIcon) center/16px no-repeat
	margin-top: 2px !important

.panel-expand
	background: var(--collapseIcon) center/16px no-repeat
	transform: rotate(180deg)

.icon16
	margin: 4px 0 0 2px
	cursor: pointer

/* Column and Panel Handles */

.horizontalHandle
	filter: var(--invert-image)
	height: 4px
	line-height: 1px
	font-size: 1px
	overflow: hidden
	background: #eee 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
	filter: var(--invert-image)
	min-height: 10px
	float: left
	width: 4px
	overflow: hidden
	background: #c3c3c3 url("../images/handle-icon.gif") center center no-repeat
	border: 1px solid var(--border-col)
	border-top: 0
	border-bottom: 0

/* Toolboxes */

.toolbox
	float: right
	margin-top: 3px
	padding: 0 5px
	height: 24px
	overflow: hidden
	text-align: right

.panel-header-toolbox

div.toolbox.divider  
	/* Have to specify div here for IE6's sake */
	background: url("../images/toolbox-divider.gif") repeat-y
	padding-left: 8px

.toolbox img.disabled
	cursor: default

* html .iconWrapper
	padding: 1px
	border: 0


.iconWrapper
	display: inline-block
	height: 22px
	min-width: 22px
	overflow: hidden
	border: 1px solid transparent
	img
		cursor: pointer
		margin: 0
		padding: 3px
	&:hover
		border: 1px solid #a0a0a0

#spinnerWrapper
	width: 16px
	height: 16px
	background: url("../images/spinner-placeholder.gif") no-repeat
	margin: 4px 5px 0px

#spinner
	display: none
	background: url("../images/spinner.gif") no-repeat
	width: 16px
	height: 16px
	
#desktopFooter td
	vertical-align: top
	text-align: left

td.speedLabel
	cursor: pointer
	min-width: 18em

#freeSpaceOnDisk
	white-space: nowrap

#DHTNodes
	white-space: nowrap


