/* 
 * This CSS file with the included images is licensed under the MIT license.
 * All though the Gaia Ajax Widgets *library* itself is licensed under GPL 
 * or a proprietary license we choose to distribute the CSS files and the Images 
 * to the skins as a gesture to our users under the MIT license.
 * The MIT license can be read underneath this line.
 * 
 * Copyright (c) 2008 Gaiaware AS
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE. 
 */


/* Note also that these skin/themes are mostly "95%" compatible with the skins and themes from
 * ExtJS which is a JavaScript DHTML library. We have consciously chosen this due to first
 * of all our wish for creating standards, also where none official exists. Second of all because
 * of that there exists a lot of free and Open Souce skins for ExtJS which then our users
 * can benefit from and third of all because ExtJS all though have some big flaws in their
 * skinning logic still have a very good DOM and CSS class structure. The places where we
 * are not compatible is either because we or ExtJS have Widgets which the other party does
 * not have or because we were cornered in regards to following other (and more important)
 * standards (e.g. XHTML) and thereby break ExtJS compatibility.
 * We hope that both our community and the ExtJS community in addition to that the entire
 * Open Web community will see this as a significant gain for all involved.
 */

/* Global "fixing bugs" styles */
body, ul, li, div, span, img
{
	padding:0;
	margin:0;
}


/* Empty class for avoiding "funny" intellisense behavior in Visual Studio 2008 */
.gaiax { }









/* To remove Image (s.gif) need in TreeView */
/* We're trying to mostly be compatible with the Style Sheets in ExtJS
 * however ExtJS uses "s.gif" which is a dirty hack to display images where
 * you declare the image src as an "empty" image 1x1 pixel large and then you
 * display the "real" image as a background-image property in CSS.
 * We've intentionally removed the need for s.gif to make no dependencies on
 * specific images by adding these two classes and render a span instead of the
 * image "s.gif". This have been done SEVERAL places in the library. Nice things are
 * that the dependancy upon having an empty image is gone. The bad parts are that
 * we're NOT using img elemnents anymore which might be less accessible for things 
 * which actually ARE images. In addition to being slightly less compatible with ExtJS.
 */
.span-for-image
{
	display:block;
	float:left;
}








/* ExtendedButton, this class should be roughly 90% compatible with ExtJS though 
   ExtJS uses mouseover/mouseout to add/remove classes and change appearance, we
   try to as much as possible to use :hover styles instead which is far more 
   optimal though also makes those parts in-compatible in regards to ExtJS */
.gaiax-btn
{
	cursor:pointer;
	white-space:nowrap;
}

/* Button in disabled state */
.gaiax-btn-disabled span
{
	color:#999;
}

/* Actual button HTML element */
.gaiax-btn-text
{
    border:none;
	padding:0 5px 0 5px;
    margin:0;
    cursor:inherit;
    overflow:visible;
    width:auto;
    color:#333;
    background-color:Transparent;
    height:16px;
	white-space:nowrap;
	font-family: Arial, Helvetica, Tahoma, Sans-Serif;
	font-size:11px;
	font-style:normal;
}

/* To make sure we remove spaces in table surrounding button */
.gaiax-btn td
{
    padding:0;
}

/* Button HTML element of a "small" button */
.gaiax-btn-small .gaiax-btn-text
{
    margin:2px 0 2px 0;
}

/* Button HTML element of a "medium" button */
.gaiax-btn-medium .gaiax-btn-text
{
    margin:4px 0 4px 0;
}

/* Button HTML element of a "large" button */
.gaiax-btn-large .gaiax-btn-text
{
    margin:8px 0 8px 0;
}

/* Adding left padding to button HTML element to give room for Icon
   Currently we don't really support anything else but having icon to the 
   left, so there's no reasons to bloat CSS with other styles */
.gaiax-btn-icon-small-left .gaiax-btn-text,
.gaiax-btn-icon-medium-left .gaiax-btn-text,
.gaiax-btn-icon-large-left .gaiax-btn-text
{
	padding-left:16px;
}

/* To make sure we don't get "empty" TD cells, we render a "dummy italic element" inside every "empty" TD cell
   in the table surrounding the button HTML element */
.gaiax-btn i
{
	font-size:1px;
    line-height:1px;
    width:3px;
    display:block;
    overflow:hidden;
	height:3px;
}

/* TD top/left of surrounding table */
.gaiax-btn-tl
{
	background:url(button/images/button-bg.png) no-repeat 0 0;
	height:3px;
	width:3px;
}

/* TD top/right of surrounding table */
.gaiax-btn-tr
{
	background:url(button/images/button-bg.png) no-repeat -3px 0;
	height:3px;
	width:3px;
}

/* TD top/center of surrounding table, here we don't need width since it will 
   be overridden anyway by the content of the -btn-mc anyway */
.gaiax-btn-tc
{
	background:url(button/images/button-bg.png) repeat-x 0 -6px;
	height:3px;
}

/* TD middle/left of surrounding table, don't need height */
.gaiax-btn-ml
{
	background:url(button/images/button-bg.png) no-repeat 0 -24px;
	width:3px;
}

/* TD middle/right of surrounding table, don't need height */
.gaiax-btn-mr
{
	background:url(button/images/button-bg.png) no-repeat -3px -24px;
	width:3px;
}

/* TD middle/content (actual placement of the button HTML element) */
.gaiax-btn-mc
{
	background:url(button/images/button-bg.png) repeat-x 0 -96px;
	text-align:center;
	padding:0 5px 0 0;
	cursor:inherit;
}

/* TD bottom/left of surrounding table */
.gaiax-btn-bl
{
	width:3px;
	height:3px;
	background:url(button/images/button-bg.png) no-repeat 0 -3px;
}

/* TD bottom/right of surrounding table */
.gaiax-btn-br
{
	width:3px;
	height:3px;
	background:url(button/images/button-bg.png) no-repeat -3px -3px;
}

/* TD bottom/center of surrounding table, don't need height */
.gaiax-btn-bc
{
	height:3px;
	background:url(button/images/button-bg.png) repeat-x 0 -15px;
}


/* Then comes all the hover styles for the button where we modify the 
   background image (position) to simulate "hovering".
   Note that ExtJS does this with mouseove/mouseout which is sub-optimal.
   To be 100% ExtJS compatible you can modify these to -btn-over instead */
.gaiax-btn:hover .gaiax-btn-tl
{
	background-position:-6px 0;
}
.gaiax-btn:hover .gaiax-btn-tr
{
	background-position:-9px 0;
}
.gaiax-btn:hover .gaiax-btn-tc
{
	background-position:0 -9px;
}
.gaiax-btn:hover .gaiax-btn-ml
{
	background-position:-6px -24px;
}
.gaiax-btn:hover .gaiax-btn-mr
{
	background-position:-9px -24px;
}
.gaiax-btn:hover .gaiax-btn-mc
{
	background-position:0 -168px;
}
.gaiax-btn:hover .gaiax-btn-bl
{
	background-position:-6px -3px;
}
.gaiax-btn:hover .gaiax-btn-br
{
	background-position:-9px -3px;
}
.gaiax-btn:hover .gaiax-btn-bc
{
	background-position:0 -18px;
}

/* This is the classed used when the button is in "Toggled" state. 
   We just modify the background image (position) here */
.gaiax-btn-pressed .gaiax-btn-tl
{
	background-position:-12px 0;
}
.gaiax-btn-pressed .gaiax-btn-tr
{
	background-position:-15px 0;
}
.gaiax-btn-pressed .gaiax-btn-tc
{
	background-position:0 -12px;
}
.gaiax-btn-pressed .gaiax-btn-ml
{
	background-position:-12px -24px;
}
.gaiax-btn-pressed .gaiax-btn-mr
{
	background-position:-15px -24px;
}
.gaiax-btn-pressed .gaiax-btn-mc
{
	background-position:0 -240px;
}
.gaiax-btn-pressed .gaiax-btn-bl
{
	background-position:-12px -3px;
}
.gaiax-btn-pressed .gaiax-btn-br
{
	background-position:-15px -3px;
}
.gaiax-btn-pressed .gaiax-btn-bc
{
	background-position:0 -21px;
}














/* DateTimePicker, ExtJS doesn't really have a DateTimePicker all though it
   does have a "calendar widget" so here there are far fewer compatibility 
   issues since there's nothing to be compatible with */

/* The DateTimePicker and our Calendar Widget is sharing these CSS classes
   so something here will only apply for the DateTimePicker while other
   things only applies for our Calendar and yet again some things applies
   for both */

/* The entire Calendar (the DIV that wraps the entire content of it) */
.gaiax-date-picker
{
	border-width:1px;
	border-style: solid;
	border-color: #1b376c;
    background:#fff;
	position:relative;
	padding:2px;
}

/* The text input field for our DateTimePicker */
.gaiax-date-text-input-field
{
	font-size:11px;
	width:80px;
}

/* Here we use an anchor to be more kind towards accessibility software.
   This anchor wraps the specific day cells in the month. */
.gaiax-date-picker a
{
    -moz-outline:0;
    outline:0;
}

/* This is the content of the Calendar surface meaning the weekdays in 
   addition to all the days in the currently viewed month */
.gaiax-date-inner,
.gaiax-date-inner td,
.gaiax-date-inner th
{
    border-collapse:separate;
}

/* Previous, Next and "Current Month" styles. The Current Month is the LinkButton
   showing the month and year which can be clicked to open the year/month picker */
.gaiax-date-middle,
.gaiax-date-left,
.gaiax-date-right
{
	background:#eeeeff;
	color:#fff;
	font-weight:bold;
	font-size:11px;
	font-family: Arial, Helvetica, Tahoma, Sans-Serif;
	overflow:hidden;
}

/* Styles for the TD cell containing the previous and nex LinkButtons */
.gaiax-date-right,
.gaiax-date-left
{
    width:18px;
}

/* The Next LinkButton's TD cell */
.gaiax-date-right
{
    text-align:right;
}

/* The Current Month/Year LinkButton's TD cell */
.gaiax-date-middle
{
    padding:2px 0 2px 0;
}

/* The Next/Previous LinkButton's styles */
.gaiax-date-right a,
.gaiax-date-left a
{
    display:block;
    width:16px;
	height:16px;
	background-position:center;
	background-repeat:no-repeat;
	cursor:pointer;
}

/* LinkButton for Next */
.gaiax-date-right a
{
	background:url('calendar/images/btn-sprites.png') no-repeat 0 -30px;
    margin-right:42px;
    height:15px;
}

/* LinkButton for Previous */
.gaiax-date-left a
{
	background:url('calendar/images/btn-sprites.png') no-repeat 0 -15px;
    margin-left:42px;
    height:15px;
}

/* Input field for InPlaceEdits for hour and minute editing */
input.gaiax-date-time-part
{
	width:22px;
	height:14px;
	font-size:12px;
	font-family: Arial, Helvetica, Tahoma, Sans-Serif;
	text-align:center;
	border:none;
}

/* LinkButtons for navigating hours/minutes and InPlaceEdits for hours/minutes */
.gaiax-date-time-nav
{
    width:12px;
    text-align:center;
}

/* LinkButtons for plus/minus on Hours/Minutes plus display of currently chosen hours/minutes*/
.gaiax-date-time-nav a,
.gaiax-date-time-nav span
{
    color:#666;
    font-size:12px;
    text-decoration:none;
    height:16px;
    font-weight:normal;
}

/* Content (days in month) of DateTimePicker ++ */
table.gaiax-date-inner
{
    width:100%;
    table-layout:fixed;
}

/* Header row of days in month area */
.gaiax-date-inner th
{
    width:25px;
    background:url('calendar/images/glass-bg.png') repeat-x left top;
    text-align:right;
	border-bottom:1px solid #a3bad9;
	font-weight:normal;
	font-size:10px;
	font-family:Arial, Helvetica, Tahoma, Sans-Serif;
	color:#2f3171;
	cursor:default;
}

/* Weekdays text area */
.gaiax-date-inner th span
{
    padding:2px;
    margin-right:7px;
}

/* Cells for specific days in month */
/* Note that in order to get the borders on selected dates etc to work without "jumping" we 
   need "in-visible" borders on these */
.gaiax-date-inner td
{
    padding:0;
	cursor:pointer;
}

/* Anchor elements wrapping actual days in month */
.gaiax-date-inner .gaiax-date-date
{
    padding:2px 5px 0 0;
    font-size:10px;
    display:block;
    font-family: Arial, Helvetica, Tahoma, Sans-Serif;
    text-decoration:none;
    color:#333;
    text-align:center;
}

/* Part of "current month" dataset */
.gaiax-date-inner .gaiax-date-active
{
	color:#333;
}

/* Currently selected date */
.gaiax-date-inner .gaiax-date-selected a
{
	background:url('calendar/images/glass-bg.png') repeat-x left top;
	border:1px solid #92aee5;
	padding:1px 4px 2px 3px;
	color:#000;
    font-weight:bold;
}

/* Day not part of "current month" */
.gaiax-date-inner .gaiax-date-prevday a,
.gaiax-date-inner .gaiax-date-nextday a
{
	color:#bbb;
}

/* When a date is being hovered over by the mouse */
.gaiax-date-inner a:hover
{
    text-decoration:none;
    color:black;
    background:#eee;
    border:solid 1px #abc0e5;
}

/* We need an "in-visible" border on all elements to not make the "jump" when moving mouse */
.gaiax-date-inner a
{
    border:solid 1px White;
}

/* The place where the "Today" button is rendered */
.gaiax-date-bottom
{
    padding:2px;
    border-top:1px solid #a0aade;
    background:#dfecfb url(calendar/images/glass-bg.png) repeat-x left top;
}

/* More "current month" styles */
.gaiax-date-middle a.gaiax-date-mt
{
	color:#666;
	text-decoration: none;
}

/* Year/Month picker */
.gaiax-date-mp
{
	position:absolute;
	left:0;
	top:0;
	background:white;
}

/* Year/Month picker - cells */
.gaiax-date-mp td
{
	font-weight:normal;
	font-size:11px;
	font-family: Arial, Helvetica, Tahoma, Sans-Serif;
}

/* Year/Month picker - cells, months, years and next/previous buttons (for years) */
.gaiax-date-mp-month,
.gaiax-date-mp-year,
.gaiax-date-mp-ybtn
{
	border: 0 none;
	text-align:center;
	vertical-align:middle;
	width:25%;
	cursor:pointer;
}

/* Months/Years cell anchors */
/* Need white "in-visible" border here to avoid "jumping" when mouse is moved */
.gaiax-date-mp-month a,
.gaiax-date-mp-year a
{
	display:block;
	padding:2px 4px 0 0;
	text-decoration:none;
	text-align:center;
	color:#15428b;
	border:1px solid White;
}

/* Months/Years cell anchors when hovered */
.gaiax-date-mp-month a:hover,
.gaiax-date-mp-year a:hover
{
	color:#1a3f90;
	text-decoration:none;
	background:#ddecfe;
	border:1px solid #8db2e3;
}

/* Currently selected Year/Month in Month/Year picker */
td.gaiax-date-mp-sel a
{
	padding:1px 3px;
	background:url('calendar/images/glass-bg.png') repeat-x left top;
	border:1px solid #8db2e3;
}

/* Previous/Next year "buttons" */
.gaiax-date-mp-ybtn a
{
    width:15px;
    height:15px;
    cursor:pointer;
    background:transparent url(calendar/images/btn-sprites.png) no-repeat;
    display:block;
}

/* Next Year button */
.gaiax-date-mp-ybtn .gaiax-date-mp-next
{
    background-position:0 -30px;
}

/* Next Year button when hovered, add your own logic here if you want to have hovering effects*/
.gaiax-date-mp-ybtn a.gaiax-date-mp-next:hover
{
}

/* Previous Year button */
.gaiax-date-mp-ybtn a.gaiax-date-mp-prev
{
	float:right;
    background-position:0 -15px;
}

/* Previous Year button when hovered, add your own logic here if you want to have hovering effects*/
.gaiax-date-mp-ybtn a.gaiax-date-mp-prev:hover
{
}













/* Menu toolbar, sine the ExtJS toolbar is _really_ bad we didn't even want to try 
   to be compatible with it. It renders almost exclusively based on tables. */
.gaiax-menu
{
	background: transparent url(menu/images/white-top-bottom.png) repeat-x 0 -1px;
    width:100%;
    display:block;
    position:relative;
    list-style-type:none;
    border:1px solid #99bbe8;
	height:24px;
	margin:0;
	padding:0;
}

/* When a MenuItem is hovered */
.gaiax-menu:hover
{
	background: transparent url(menu/images/white-top-bottom-hover.png) repeat-x 0 -1px;
}

/* Common for all items */
.gaiax-menu-item
{
    font-family: Arial, Helvetica, Tahoma, Sans-Serif;
    font-size:11px;
    font-weight:bold;
    -moz-user-select:none;
    cursor:pointer;
	color:#15428b;
}

/* When a MenuItem is hovered */
.gaiax-menu-item:hover
{
	color:#00f;
}

/* The content of a MenuItem */
.gaiax-menu-item-content a
{
	text-decoration:none;
}

/* Top items (on the toolbar strip) */
.gaiax-menu-top-item
{
	display:inline;
	margin-right:5px;
	padding-left:15px;
	line-height:25px;
}

/* MenuItems at the TOP level */
.gaiax-menu-top-item .gaiax-menu-item-el
{
	display:inline;
}

/* MenuItems at the TOP level with Icons */
.gaiax-menu-top-item .gaiax-menu-item-icon
{
	display:none;/* Modify if showing icons at "top level" of toolbar */
}

/* Content of MenuItems at the TOP level */
.gaiax-menu-top-item .gaiax-menu-item-content
{
	display:inline;
}

/* Child items (initially hidden) */
.gaiax-menu-child-item
{
	display:block;
	width:150px;
}

/* When child menu items (not TOP menuitems) are hovered */
.gaiax-menu-child-item:hover
{
	background:url('menu/images/hover_child.png') repeat-x 0 -1px;
}

/* Child MenuItems */
.gaiax-menu-child-item .gaiax-menu-item-el
{
	display:block;
	width:100%;
	padding-left:2px;
	height:28px;
}

/* Child MenuItems with Icons */
.gaiax-menu-child-item .gaiax-menu-item-icon
{
	width:25px;
	height:100%;
	vertical-align:middle;
	display:inline;
	margin:0 10px 0 2px;
	height:25px;
	vertical-align:middle;
}

/* Contene parts of Child MenuItems */
.gaiax-menu-child-item .gaiax-menu-item-content
{
	display:inline;
}

/* Container that holds the child menu items */
.gaiax-menu-child-container
{
	display:block;
	background:white url(menu/images/menu-child-bg.png) repeat-y 0 0;
	position:absolute;
	margin-left:-1px;
    border:1px solid #99bbe8;
    padding:10px 0 10px 0;
    width:150px;
}

/* Specific icon classes */
.gaiax-icon-house
{
	background:url('menu/images/icons.png') no-repeat 0 0;
}
.gaiax-icon-computer
{
	background:url('menu/images/icons.png') no-repeat -39px 0;
}
.gaiax-icon-nofolder
{
	background:url('menu/images/icons.png') no-repeat -78px 0;
}
.gaiax-icon-musicfolder
{
	background:url('menu/images/icons.png') no-repeat -117px 0;
}
.gaiax-icon-folder
{
	background:url('menu/images/icons.png') no-repeat -156px 0;
}
.gaiax-icon-trashcan
{
	background:url('menu/images/icons.png') no-repeat -195px 0;
}
.gaiax-icon-writer
{
	background:url('menu/images/icons.png') no-repeat 0 -41px;
}
.gaiax-icon-refresh
{
	background:url('menu/images/icons.png') no-repeat -39px -41px;
}
.gaiax-icon-drivers
{
	background:url('menu/images/icons.png') no-repeat -78px -41px;
}
.gaiax-icon-package
{
	background:url('menu/images/icons.png') no-repeat -117px -41px;
}
.gaiax-icon-mouse
{
	background:url('menu/images/icons.png') no-repeat -156px -41px;
}
.gaiax-icon-cd
{
	background:url('menu/images/icons.png') no-repeat -195px -41px;
}
.gaiax-icon-flower
{
	background:url('menu/images/icons.png') no-repeat 0 -82px;
}
.gaiax-icon-warning
{
	background:url('menu/images/icons.png') no-repeat -39px -82px;
}
.gaiax-icon-package
{
	background:url('menu/images/icons.png') no-repeat -78px -82px;
}













/* ExtendedPanel */
.gaiax-panel
{
}

/* Caption/Header parts of ExtendedPanel */
.gaiax-panel-header
{
    overflow:hidden;
    color:#15428b;
	font-family: Arial, Helvetica, Tahoma, Sans-Serif;
	font-size:11px;
	font-weight:bold;
    padding:5px 3px 4px 5px;
    border:1px solid #99bbe8;
    line-height: 15px;
    background:url('panel/images/white-top-bottom.png') repeat-x 0 -1px;
    position:relative;
}

/* The draggable "Caption" part of the ExtendedPanel */
.gaiax-panel-draggable
{
	cursor:move;
}

/* Actual content parts of ExtendedPanel */
/* We don't use it for anything, but have it here for "reference" */
.gaiax-panel-bwrap
{ }

/* Though inside the above content there's ANOTHER content part... ;) */
.gaiax-panel-body
{
    border-left:1px solid #99bbe8;
    border-right:1px solid #99bbe8;
    border-bottom:1px solid #99bbe8;
    border-top:0;
    overflow:hidden;
    background:white;
    position: relative; /* added for item scroll positioning */
}

/* Icons for expand/collapse */
/* Note that by default we render both the collapse and the expand icons 
   at the exact SAME location */
.gaiax-tool
{
	width:15px;
	height:13px;
	cursor:pointer;
	background:url('panel/images/action-buttons.png') no-repeat;
	margin-left:2px;
	position:absolute;
}

/* Collapse */
.gaiax-tool-minus
{
    background-position:0 0;
	top:0;
	right:5px;
}

/* Collapse when hovered, we just change th BG image */
.gaiax-tool-minus:hover
{
    background-position:-15px 0;
}

/* Expand */
.gaiax-tool-plus
{
    background-position:0 -15px;
	top:0;
	right:5px;
}

/* Expand when hovered, we change the BG image here */
.gaiax-tool-plus:hover
{
    background-position:-15px -15px;
}

/* We do NOT want to use images here, all though it would be technically "more correct"
   since that would force the usage of a specifically placed (known URL) image for the 
   SRC attribute. Instead we render the thing purely with background-image on a span 
   element. */
.gaiax-panel-icon span
{
	background-position:0 0;
	background-repeat:no-repeat;
	padding-left:20px;
	height:16px;
	display:block;
}












/* Gaia Slider */
.gaiax-slider
{ }

/* Horizontal slider styles */
.gaiax-slider-horz
{
	background:url('slider/images/sprite.png') no-repeat 0 -14px;
	padding-left:3px;
}

/* The right parts of the slider. End part. */
.gaiax-slider-horz .gaiax-slider-end
{
	background:url('slider/images/sprite.png') no-repeat right -27px;
	padding-right:3px;
}

/* The "main surface" (editable parts) of the slider */
.gaiax-slider-horz .gaiax-slider-inner
{
	height:13px;
	background:url('slider/images/sprite.png') repeat-x 0 -40px;
}

/* The thumb or dragger of the slider */
.gaiax-slider-horz .gaiax-slider-thumb
{
	background:url('slider/images/sprite.png') no-repeat 0 0;
	height:14px;
	position:absolute;
	width:15px;
	cursor:move;
}

/* A disabled horizontal slider */
.gaiax-slider-horz .gaiax-slider-disabled
{
	background:url('slider/images/sprite.png') no-repeat 0 -53px;
	height:14px;
	position:absolute;
	width:15px;
	cursor:auto;
}

/* Inner parts common for both horizontal and vertical slider */
.gaiax-slider-inner
{
	overflow:visible;
	position:relative;
}

/* Vertical slider styles */
.gaiax-slider-vert
{
	background:url('slider/images/sprite-vertical.png') no-repeat -14px 0;
	padding-top:3px;
	width:14px;
}

/* End parts of the slider (bottom) */
.gaiax-slider-vert .gaiax-slider-end
{
	background:url('slider/images/sprite-vertical.png') no-repeat -27px bottom;
	padding-bottom:3px;
}

/* Main surface of vertical slider */
.gaiax-slider-vert .gaiax-slider-inner
{
	width:13px;
	background:url('slider/images/sprite-vertical.png') repeat-y -40px bottom;
}

/* Thumb or dragger of vertical slider */
.gaiax-slider-vert .gaiax-slider-thumb
{
	background:url('slider/images/sprite-vertical.png') no-repeat 0 0;
	height:15px;
	position:absolute;
	width:14px;
	cursor:move;
}

/* A disabled vertical slider */
.gaiax-slider-vert .gaiax-slider-disabled
{
	background:url('slider/images/sprite-vertical.png') no-repeat -53px 0;
	height:15px;
	position:absolute;
	width:14px;
	cursor:default;
}












/* TabControl, note in the TabControl we have some places where we couldn't 
   be compatible with ExtJS since ExtJS actually breaks XHTML several places
   like for instance when adding up spans in bulleted lists and so on */
.gaiax-tab-panel
{
    overflow:hidden;
    margin:0;
    padding:0;
}

/* Header parts of TabControl */
.gaiax-tab-panel-header
{
	background: #deecfd;
    overflow:hidden;
	padding-bottom: 2px;
    font-size:16px;
}

/* More header parts */
.gaiax-tab-panel-header-plain
{
    background:transparent;
    padding:0;
    margin:0;
}

/* There is a spacer which is being added up at the "bottom" of the "top parts" 
   of the TabControl. This is it ;) */
.gaiax-tab-panel-header-plain .gaiax-tab-strip-spacer
{
    border:1px solid #8db2e3;
    border-top:none;
    height:2px;
    background:#deecfd;
    font-size:1px;
    line-height:1px;
}

/* The wrapper around the entire TabStrip at the top */
.gaiax-tab-strip-wrap
{
	width:100%;
    overflow:hidden;
    position:relative;
}

/* Bulleted list element at the top of the TabControl (TabStrip) */
.gaiax-tab-strip
{
	display:block;
    width:5000px;
}

/* While ExtJS supports having TabStrip at both top/bottom and several different places we
   for the current release only supports TabStrips at the top. Still we want to be compatible. */
.gaiax-tab-strip-top
{
	border-bottom:1px solid #8db2e3;
	padding-top:1px;
	height:18px;
}

/* One TabView "button" wrapper */
.gaiax-tab-strip li
{
    float:left;
    margin-left:2px;
    list-style-type:none;
}

/* Need to display the anchor, spans and em at the top as block level
   elements since otherwise the browser will clip them really dirty */
.gaiax-tab-strip em,
.gaiax-tab-strip span,
.gaiax-tab-strip a
{
	display:block;
}

/* The anchor element to click to switch tab */
.gaiax-tab-strip a
{
	text-decoration:none;
	cursor:pointer;
}

/* The span element that wraps a single TabView "button" */
.gaiax-tab-strip-inner
{
    overflow:hidden;
	text-overflow:ellipsis; /* Not really supported, YET ;) IE CAN be cool sometimes in fact... */
}

/* Another span which again is inside the one above which wraps the text yet another time */
.gaiax-tab-strip .gaiax-tab-strip-text
{
	color:#416aa3;
	white-space:nowrap;
    font-style:normal;
    font-size:11px;
    font-family: Arial, Helvetica, Tahoma, Sans-Serif;
    margin:2px 0 0 0;
    padding-top:4px;
    padding-left:5px;
    height:12px;
	-khtml-user-select:none;
	-moz-user-select:none;
    -kthml-user-focus:normal;
}

/* The currently active TabView "button" */
.gaiax-tab-strip-active
{
    cursor:default;
}

/* The "text portions" inside (content span) for the active TabView */
.gaiax-tab-strip-active .gaiax-tab-strip-text
{
	color:#15428b;
	white-space:nowrap;
    font-size:11px;
    font-weight:bold;
    margin:2px 0 0 0;
    padding:4px 0 0 5px;
    height:12px; /* Notice the height here which is the one which kind of "brings the Active To the Front" logic... */
}

/* Disabled TabView */
.gaiax-tab-strip-disabled .gaiax-tabs-text
{
	cursor:default;
	color:#aaaaaa; /* Just dimming the color of the text to signalize "disabled"... */
}

/* The "body" parts of the tab view (or the "first parts" of them) ExtJS creates a LOT of markup... SIGH! :( */
.gaiax-tab-panel-body
{
    overflow:hidden;
}

/* Another layer of "body parts" */
.gaiax-tab-panel-bwrap
{
    overflow:hidden;
}

/* Here we build our "change active TabView button" */
.gaiax-tab-strip-top .gaiax-tab-right,
.gaiax-tab-strip-top .gaiax-tab-left,
.gaiax-tab-strip-top .gaiax-tab-strip-inner
{
	background-image:url(tabs/images/tabs-sprite.png);
	background-color:Transparent;
}
.gaiax-tab-strip-top .gaiax-tab-right
{
	background-repeat:no-repeat;
	background-position:0 -50px;
    padding-left:5px;
}
.gaiax-tab-strip-top .gaiax-tab-left
{
	background-repeat:no-repeat;
	background-position:right -350px;
    padding-right:5px;
}
.gaiax-tab-strip-top .gaiax-tab-strip-inner
{
	background-repeat:repeat-x;
	background-position:right -200px;
}

/* Without this extra margin here the active tab is gonna "spill" over and destroy the whole layout... */
.gaiax-tab-strip-top .gaiax-tab-strip-active .gaiax-tab-right
{
    margin-bottom:-1px;
}

/* Also for the "active tab" we need to MOVE the text up to get it correctly aligned since the height
   of the Active TabView is slightly higher...
   It is higher to "spill over" the border at the "bottom of the top" */
.gaiax-tab-strip-top .gaiax-tab-strip-active .gaiax-tab-right .gaiax-tab-strip-text
{
    padding-bottom:5px;
}

/* This defines the height of the left and right parts of the buttons on "non-active" TabViews to make them 
   have the exact height needed to reach the border of the TabStrip but NOT ANY longer since that will create
   the expression of them being "active"...! */
.gaiax-tab-strip-top .gaiax-tab-strip-inactive .gaiax-tab-right,
.gaiax-tab-strip-top .gaiax-tab-strip-inactive .gaiax-tab-left
{
	height:18px;
}

/* Disabled TabView items */
.gaiax-item-disabled
{
	vertical-align:top;
}
.gaiax-item-disabled .gaiax-tab-strip-text
{
	color:Gray;
	cursor:default;
	padding-top:2px;
	height:14px;
}

/* Inactive TabView's text properties */
.gaiax-tab-strip-top .gaiax-tab-strip-inactive .gaiax-tab-strip-text
{
	line-height:10px;
}

/* Hovering styles for inactive TabViews. We're just switching BG image to give 
   user clues that this can be clicked*/
.gaiax-tab-strip-inactive:hover .gaiax-tab-right
{
	 background-position:0 -100px;
}
.gaiax-tab-strip-inactive:hover .gaiax-tab-left
{
	 background-position:right -400px;
}
.gaiax-tab-strip-inactive:hover .gaiax-tab-strip-inner
{
	 background-position:0 -250px;
}

/* Active or currently selected TabView styles. Note we make this one slightly higher to "spill over" the
   content of it to create the illusion of that this one is in "front" of the border-bottom setting created
   for the entire TabStrip... */
.gaiax-tab-strip-active .gaiax-tab-right,
.gaiax-tab-strip-active .gaiax-tab-left
{
	height:20px;
}
.gaiax-tab-strip-active .gaiax-tab-strip-text
{
	line-height:12px;
}

/* Setting BG images for ACTIVE TabView */
.gaiax-tab-strip-active .gaiax-tab-right
{
	background-position: 0 0;
}
.gaiax-tab-strip-active .gaiax-tab-left
{
	background-position: right -300px;
}
.gaiax-tab-strip-active .gaiax-tab-strip-inner
{
	background-position: 0 -150px;
}

/* Body (wrapper, or ONE of them... SIGH!) the TabView content parts... */
.gaiax-tab-panel-body
{
    border: 1px solid #89afdf;
    background:#fff;
}

/* This one serves ONLY the purpose of needing to kill the "floating" parts of the 
   bulleted list which is the TabStrip */
.gaiax-clear
{
	clear:both;
}









/* Gaia TreeView */
/* Note that for the TreeView we had to break ExtJS compatibility quite extensive since first
   of all ExtJS is using mouseover/mouseout "all over the place" for adding/removing CSS class names.
   Second of all it uses a really bad approach for dragging and dropping TreeViewItems which is 
   a DIV element at the BODY node which "fakes" the content of the TreeViewItem being dragged... 
   Though it still should "almost" work and is roughly 90% compatible... */
.gaiax-tree
{
    background-color:#fff;
    position:relative;
    overflow:hidden;
	list-style-type:none;
	margin:0;
	padding:0;
}

.gaiax-tree ul, 
.gaiax-tree ul
{
	list-style-type:none;
}

.gaiax-tree-icon,
.gaiax-tree-ec-icon,
.gaiax-tree-elbow-line,
.gaiax-tree-elbow,
.gaiax-tree-elbow-end,
.gaiax-tree-elbow-plus,
.gaiax-tree-elbow-minus,
.gaiax-tree-elbow-end-plus,
.gaiax-tree-elbow-end-minus
{
	border:0;
	height:18px;
	vertical-align:top;
	width:16px;
    background-repeat:no-repeat;
}

.gaiax-tree-node-collapsed .gaiax-tree-node-icon,
.gaiax-tree-node-expanded .gaiax-tree-node-icon,
.gaiax-tree-node-leaf .gaiax-tree-node-icon
{
	background-position:center;
    background-repeat:no-repeat;
	border:0;
	height:18px;
	vertical-align:top;
	width:16px;
}

/* Icons for expander "button" */
.gaiax-tree-node-collapsed .gaiax-tree-node-icon
{
	background:url(tree/images/sprite.png) no-repeat -240px 0;
}

/* Icons for collapser "button" */
.gaiax-tree-node-expanded .gaiax-tree-node-icon
{
	background:url(tree/images/sprite.png) no-repeat -256px 0;
}

/* "Leaf node" or file. */
.gaiax-tree .file .gaiax-tree-node-icon
{
	background:url(tree/images/sprite.png) no-repeat -272px 0;
	width:11px;
}

/* In cases of "no-icon" we give room for having the user add up his own "custom" icon 
   through the IconCssClass property */
.gaiax-tree .noicon .gaiax-tree-node-icon
{
	width:0;
}

/* Tree with Lines styles */

/* Line styles */
.gaiax-tree-lines .gaiax-tree-elbow
{
	background:url(tree/images/sprite.png) no-repeat -64px 0;
}
/* Expander */
.gaiax-tree-lines .gaiax-tree-elbow-plus
{
	background:url(tree/images/sprite.png) no-repeat -208px 0;
}
/* Collapser */
.gaiax-tree-lines .gaiax-tree-elbow-minus
{
	background:url(tree/images/sprite.png) no-repeat -176px 0;
}

/* End (bottom) */
.gaiax-tree-lines .gaiax-tree-elbow-end
{
	background:url(tree/images/sprite.png) no-repeat -80px 0;
}

/* End (bottom) with plus */
.gaiax-tree-lines .gaiax-tree-elbow-end-plus
{
	background:url(tree/images/sprite.png) no-repeat -128px 0;
}

/* End (bottom) with minus */
.gaiax-tree-lines .gaiax-tree-elbow-end-minus
{
	background:url(tree/images/sprite.png) no-repeat -96px 0;
}

/* Just lines */
.gaiax-tree-lines .gaiax-tree-elbow-line
{
	background:url(tree/images/sprite.png) no-repeat -160px 0;
}

/* Hover for lines, here we are NOT compatible with ExtJS due to wanting to do this with CSS
   instead of JavaScript likeExtJS does (which really is a dirty hack) */
.gaiax-tree-lines .gaiax-tree-elbow-plus:hover
{
    background-position:-384px 0;
}

.gaiax-tree-lines .gaiax-tree-elbow-minus:hover
{
    background-position:-352px 0;
}

.gaiax-tree-lines .gaiax-tree-elbow-end-plus:hover
{
    background-position:-320px 0;
}

.gaiax-tree-lines .gaiax-tree-elbow-end-minus:hover
{
    background-position:-288px 0;
}

/* Tree WITHOUT Lines styles */

/* No-lines, but plus and minus styles */
.gaiax-tree-no-lines .gaiax-tree-elbow
{
	background:transparent;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-plus
{
	background:url(tree/images/sprite.png) no-repeat -224px 0;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-minus
{
	background:url(tree/images/sprite.png) no-repeat -192px 0;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-end
{
	background:transparent;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-end-plus
{
	background:url(tree/images/sprite.png) no-repeat -144px 0;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-end-minus
{
	background:url(tree/images/sprite.png) no-repeat -112px 0;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-line
{
	background:transparent;
}

/* Hover for no-lines */
.gaiax-tree-no-lines .gaiax-tree-elbow-plus:hover
{
    background-position:-400px 0;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-minus:hover
{
    background-position:-368px 0;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-end-plus:hover
{
    background-position:-336px 0;
}
.gaiax-tree-no-lines .gaiax-tree-elbow-end-minus:hover
{
    background-position:-304px 0;
}

/* Tree with Arrow styles */

/* No-lines, and arrows for expanding/collapsing */
.gaiax-tree-arrows .gaiax-tree-elbow
{
	background:transparent;
}
.gaiax-tree-arrows .gaiax-tree-elbow-plus
{
    background:transparent url(tree/images/sprite.png) no-repeat 0 0;
}
.gaiax-tree-arrows .gaiax-tree-elbow-minus
{
    background:transparent url(tree/images/sprite.png) no-repeat -16px 0;
}
.gaiax-tree-arrows .gaiax-tree-elbow-end
{
	background:transparent;
}
.gaiax-tree-arrows .gaiax-tree-elbow-end-plus
{
    background:transparent url(tree/images/sprite.png) no-repeat 0 0;
}
.gaiax-tree-arrows .gaiax-tree-elbow-end-minus
{
    background:transparent url(tree/images/sprite.png) no-repeat -16px 0;
}
.gaiax-tree-arrows .gaiax-tree-elbow-line
{
	background:transparent;
}

/* Hover for arrows */
.gaiax-tree-arrows .gaiax-tree-elbow-plus:hover
{
    background-position:-32px 0;
}
.gaiax-tree-arrows .gaiax-tree-elbow-minus:hover
{
    background-position:-48px 0;
}
.gaiax-tree-arrows .gaiax-tree-elbow-end-plus:hover
{
    background-position:-32px 0;
}
.gaiax-tree-arrows .gaiax-tree-elbow-end-minus:hover
{
    background-position:-48px 0;
}



.gaiax-tree-elbow-plus,
.gaiax-tree-elbow-minus,
.gaiax-tree-elbow-end-plus,
.gaiax-tree-elbow-end-minus
{
	cursor:pointer;
}

.gaiax-tree-node
{
	color:#111;
	font-family: Arial, Helvetica, Tahoma, Sans-Serif;
}

.gaiax-tree-node-el
{
    line-height:18px;
    cursor:pointer;
}

.gaiax-tree-node input
{
	vertical-align:bottom;
	margin-left:0px;
	font-size:10px;
}

.gaiax-tree-node a
{
	-khtml-user-select:none;
	-moz-user-select:none;
    -kthml-user-focus:normal;
    -moz-user-focus:normal;
	text-decoration:none;
	color:#111;
}

.gaiax-tree-node a span
{
	text-decoration:none;
	color:black;
	padding:1px 3px 1px 2px;
}

.gaiax-tree-node a:hover
{
	text-decoration:none;
}

/* Not really part of skin but rather used directly from TreeView.aspx sample to 
   give hover effect when TreeViewItem is dragged around */
.gaiax-tree-node .gaiax-tree-drag-append
{
	 background:#efe;
}

/* Hover class for TreeViewItems */
.gaiax-tree-node-el:hover
{
	background-color: #eee;
}

/* Node selected CSS styles */
.gaiax-tree-node .gaiax-tree-selected
{
	background-color: #d7dbff;
}









/* Window */
.gaiax-window
{ }

.gaiax-window-header
{
	overflow:hidden;
}

/* Adding up the draggable cursor for DRAGGABLE Windows... */
.gaiax-window-draggable
{
	cursor:move;
}

/* Body wrapper */
.gaiax-window-bwrap
{
	position:relative;
	overflow:hidden;
}

/* Caption/Header (or "wrapper" of Caption actually) */
.gaiax-window-tl .gaiax-window-header
{
	color:#133f91;
	font-family: Arial, Helvetica, Tahoma, Sans-Serif;
	font-weight:bold;
	padding:0px 0 4px 0;
}

/* Actual caption */
.gaiax-window-header-text
{
	-khtml-user-select:none;
	-moz-user-select:none;
    -kthml-user-focus:normal;
    text-overflow:ellipsis;
}

/* Top/Center parts of Window Caption */
.gaiax-window-tc
{
	background:transparent url(window/images/tb.png) repeat-x 0 0;
	overflow:hidden;
}

/* Top/left of caption */
.gaiax-window-tl
{
	background:transparent url(window/images/corners-sprite.png) no-repeat 0 0;
	padding-left:6px;
	position:relative;
}

/* Top/Right */
.gaiax-window-tr
{
	background:transparent url(window/images/corners-sprite.png) no-repeat right 0;
	padding-right:6px;
}

/* Bottom/Center */
.gaiax-window-bc
{
	background:transparent url(window/images/tb.png) repeat-x 0 bottom;
}

/* Bottom/Left */
.gaiax-window-bl
{
	background:transparent url(window/images/corners-sprite.png) no-repeat 0 bottom;
	padding-left:6px;
}

/* Bottom/Right */
.gaiax-window-br
{
	background:transparent url(window/images/corners-sprite.png) no-repeat right bottom;
	padding-right:6px;
}

/* Middle/Center (actual content of window) */
.gaiax-window-mc
{
	border:1px solid #9bb9ea;
	font-family: Arial, Helvetica, Tahoma, Sans-Serif;
	background:#deeaf4;
}

/* Middle/Left parts */
.gaiax-window-ml
{
	background:transparent url(window/images/lr.png) repeat-y 0 0;
	padding-left:6px;
}

/* Middle/Right parts */
.gaiax-window-mr
{
	background:transparent url(window/images/lr.png) repeat-y right 0;
	padding-right:6px;
}

/* Bottom/Center parts (we don't support statis bar (YET!!) on our Window) */
.gaiax-panel-nofooter .gaiax-window-bc
{
	height:6px;
}

/* Maiing sure maxmized version have no "borders"... */
.gaiax-window-maximized .gaiax-window-tl,
.gaiax-window-maximized .gaiax-window-tr,
.gaiax-window-maximized .gaiax-window-mr,
.gaiax-window-maximized .gaiax-window-br,
.gaiax-window-maximized .gaiax-window-bl,
.gaiax-window-maximized .gaiax-window-ml,
.gaiax-window-maximized .gaiax-window-footer
{
	padding:0;
}

/* Indenting Caption in maximized version */
.gaiax-window-maximized .gaiax-window-tc
{
	padding-left:5px;
}

/* Body wrapper (or one of them ;) */
.gaiax-window-body
{
	background:transparent;
	overflow:hidden;
}

/* Making some DIFFERENT Border effects for the different parts of the Window 
   to simulate lights from up/left */
.gaiax-window-plain .gaiax-window-mc
{
	background:#e0edfd;
	border-right:0;
	border-bottom:0;
	border-top:1px solid #909ae0;
	border-left:1px solid #909ae0;
}
.gaiax-window-plain .gaiax-window-body
{
	border-left:0;
	border-top:0;
	border-bottom:1px solid #b3caf9;
	border-right:1px solid #b3caf9;
}

/* Tool buttons for Window */
.gaiax-window .gaiax-window-header .gaiax-tool
{
	overflow:hidden;
	width:15px;
	height:13px;
	cursor:pointer;
	background:transparent url(window/images/action-buttons.png) no-repeat;
	margin-left:2px;
	position:absolute;
}
.gaiax-window .gaiax-window-header .gaiax-tool-close
{
	background-position:0 0;
	top:1px;
	right:5px;
}
.gaiax-window .gaiax-window-header .gaiax-tool-close:hover
{
	background-position:-15px 0;
}
.gaiax-window .gaiax-window-header .gaiax-tool-minimize
{
	background-position:0 -14px;
	top:1px;
	right:39px;
}
.gaiax-window .gaiax-window-header .gaiax-tool-minimize:hover
{
	background-position:-15px -14px;
}
.gaiax-window .gaiax-window-header .gaiax-tool-maximize
{
	background-position:0 -28px;
	top:1px;
	right:22px;
}
.gaiax-window .gaiax-window-header .gaiax-tool-maximize:hover
{
	background-position:-15px -28px;
}
.gaiax-window .gaiax-window-header .gaiax-tool-restore
{
	background-position:0 -42px;
	top:1px;
	right:22px;
}
.gaiax-window .gaiax-window-header .gaiax-tool-restore:hover
{
	background-position:-15px -42px;
}

/* For having Icon support for Window. Note we're basically just adding up 
   some left padding here to "give room" for it */
.gaiax-window-tl .gaiax-window-icon
{
	background-position:0 4px;
	background-repeat:no-repeat;
	padding-left:20px;
}








/* ControlPicker classes */
.gaiax-layer
{
	visibility:hidden;
}

.gaiax-combo-list
{
	border-left:1px solid #E2E2E2;
	border-right:1px solid #E2E2E2;
	border-top:1px solid #E2E2E2;

	overflow:hidden;
}

.gaiax-combo-list-inner
{
	background:white;
	position:relative; 
	overflow-x:hidden;
	overflow-y:auto;
}

.gaiax-combo-list-item
{
	font-size:12px;
    padding:2px;
    padding-bottom:0px;
    margin-bottom:0px;
    border-bottom:1px solid #E2E2E2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.gaiax-combo-list-item:hover
{
	/*border:1px solid #888888;*/
	border-bottom: 1px solid #E2E2E2;
    background:#E9EDF0;/*#dfe8f6;*/
    
    
    color:#0061AA;
    text-decoration:underline;
    cursor:pointer;
}

.gaiax-combo-list .gaiax-combo-hover
{
	/*border:1px solid #888888;*/
	border-bottom: 1px solid #E2E2E2;
    background:#E9EDF0;/*#dfe8f6;*/

    color:#0061AA;
    text-decoration:underline;
    cursor:pointer;
}

.gaiax-combo-list .gaiax-combo-selected
{
	border:1px solid #f00;
    background:#fff;
    cursor:pointer;
}