/* RG 20150616 Added an icon_align image style to force images to align at the bottom of a text line with no padding */
/* RG 20150626 Changed the link colour to match the website - from #0095E2; to #53A9DB;*/
/* RG 20150626 Added new weblink style for text links on webhost - brown #8F5321*/
/* RG 20150820 Added a new style for support hub links */
/*

The index.htm file loads three CSS files, in this order:

	ext-all.css	~	This is the CSS portion of the Ext JS “cross-browser JavaScript library for building rich internet applications,” which
				Author-it used to build its Web Help template solution. The quote is from the Ext JS website:

					http://www.extjs.com/

	stylesheet.css	~	The Author-it software generates this file each time you publish your book to Web Help. It controls the appearance of
				topic content.

	webhelp.css	~	This and webhelp.js comprise the Author-it portion of the Web Help solution. Author-it’s webhelp.js scripts make calls
				to Ext JS’s ext-all.js library, while Author-it’s webhelp.css declarations apply UI touches not already covered by (or
				needing adjustment from) the declarations found in Ext JS’s ext-all.css.

				The original Author-it webhelp.css file also overrode some declarations typically found in stylesheet.css, for example,
				to make Heading 1 blend into the JavaScript-generated application framework by rendering it as white text on a blue
				background, seamlessly fitted to the bottom edge of the breadcrumb bar. (Our UI mod does not include that touch.)

At STEI, for our web outputs other than those generated using these Web Help templates, we discard stylesheet.css and apply our own custom stylesheet.
When we invent a new style in Author-it, we revise our stylesheet to contain the corresponding new style name. We find this easier than manipulating styles
within Author-it to determine what appears in stylesheet.css. In the case of these Web Help templates, to keep our solution more portable for use by others,
we have retained the link in index.htm to the stylesheet generated during publication. We apply our custom styles by other means easily removed, as
explained next.

Our UI mod to Author-it’s Web Help solution entails substantial changes to both the webhelp.css styles from Author-it and the ext-all.css styles from Ext JS.
To centralize control over these changes, and apply our custom stylesheet to topic content, we have:

	~ commented out portions of ext-all.css, copied those portions into this webhelp.css file, consolidated them with declarations in the original
		webhelp.css file, reordered them for clarity, and customized them to achieve our UI mod

	~ appended the entire contents of our STEI custom stylesheet, which overrides everything in stylesheet.css because this file is linked later in the
		index.htm file than stylesheet.css

We have organized the UI mod block to try to make clear the relationship between each declaration and the UI, moving roughly in order of appearance or
observational order. Our appended custom stylesheet is just that, our custom stylesheet ~ it lacks explanatory comments because the declarations are
obvious. You may easily remove, replace, or modify our topic styles without changing the UI. Removing or commenting out the material after the UI declarations
block will enable the stylesheet.css declarations to apply.

We have attempted to keep a clean, readable appearance despite the volume and detail of documentary comments, but that’s tough to do. We have favored
extensive comments to help enable others to develop their own UI mods.

It is important to note that since we have made non-trivial changes to both Author-it’s and Ext JS’s CSS -and- JavaScript, neither organization can reasonably
be expected to support this mod. If you have questions about this file set, contact buck1965@gmail.com. Within the constraints of my job function, I will do my
best to answer any questions.

David Buck ~ buck1965@gmail.com ~ June 2010

*/



/*	============ Beginning of UI Block (material from ext-all.css and the original webhelp.css, consolidated and customized ============	*/

/*	Our primary UI mod relies on rendering most interface elements transparent to reveal a page background image. The bulk of customizations
	relate to this approach. A few notes:

		Five UI pieces collectively display the various borders that visually partition the UI. To make it possible to set
		the color for all of these at once, rather than have to browse through the entire UI block to find the five pieces,
		we have removed -just- the border-color property from each of the five, then declared -just- the border-color
		property for all five of them in a single line near the end of this UI block.

		Right after the border colors, we have similiarly grouped link appearances.

		After the link appearances, at the end of this UI block, a relatively brief commented-out block contains the limited
		number of redeclarations required to build on the primary UI mod by overriding transparency in favor of pastel colored
		panels, achieving a wholly different UI mod, as described in accompanying comments. Removing the enclosing
		comment marks will enable this alternative “pastelica” UI.								*/



/*	standard default stuff	*/

/* -DM- new background color */
.x-border-layout-ct {
	background-color: #f1f1f1;
}

html {
	font-size: 62.5%
}
html, body, form	{ width: 100%;
height: 100%;
overflow: hidden;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}

p		{ margin: 5px; }


/* DM */
#logo {
	top: 5px;
	left: 5px;
	position: relative;
}

/*	We don’t know what this does so we have left it alone.	*/

#start-panel ul, #start-panel ol { padding-left: 20px; }



/*	We assign a page background image. You would comment this out if you use the pastelica block, although it would not show in the UI if you did not.		*/

/* body { background-color: background-image: url(images/background.gif); } */



/*	We added three transparent divs absolutely positioned at top right, bottom right, and bottom left to place images that augment the design, yet stay
	out of the way as the user resizes the browser. The images use transparency so the div blocks are not apparent. The z-indices ensure the images display
	beneath all content. To use these divs, replace the image specifications and resize each div accordingly. You do not have to use these, and you would not
	use them with the “pastelica” UI. To disable these, set the display to none. For convenience this can be done by uncommenting a block in the pastelica
	section at the bottom of this UI block.		*/

div#floater_right_top	{ position:absolute; right: 0px;         top: 0px; width: 150px; height: 150px; background-image:url(images/floater_right_top.png);        z-index: -10001; display: none; }
div#floater_right_bottom	{ position:absolute; right: 0px; bottom: 0px; width: 150px; height: 150px; background-image:url(images/floater_right_bottom.png); z-index: -10002; display: none; }
div#floater_left_bottom	{ position:absolute; left:    0px; bottom: 0px; width: 150px; height: 150px; background-image:url(images/floater_left_bottom.png);   z-index: -10003; display: none; }


/*	We are using our own loading indicator, loading.gif, in place of the original loading_blue.gif.	*/

.loading { text-align: center; vertical-align: middle; height: 200px; background-image: url(images/loading.gif); background-repeat: no-repeat; background-position: center; padding-top: 70px; }


/*	We removed style declarations contrary to our use of a page background image. Plus, this is where we set the header height to whatever height will
	accommodate what we choose to display in the header ~ typically the book title and the toolbar, which in the Author-it original file set would sit below the
	header, not on top of it as in this mod (see more notes below).	*/
	/* This works together with the x-toolbar dimensions below */

/* DM */
div#header {
	padding: 10px;
	height: 55px; /* includes padding */
	background-color: #003b73;
}

/*	Author-it provided an id tag focused solely on the book title text that appears in the header. We set the text appearance to our liking.	 */
/* DM */
h1#headerTitle {font-weight: normal; font-size: 22px; color: #fff; vertical-align: center; padding: .3em 0 .3em 1.5em; margin: 0;}

h2#headerSubTitle {font-weight: normal; font-size: 16px; align: right; color: #fff; vertical-align: center;padding: 0.7em 0em 0.5em 1em; margin: 0;}
#header a{color: #fff;}

/*	We removed numerous toolbar aspects we do not need given our design.	This sets the space between the bottom of the header and the top of the topic??? */

/*.x-toolbar */
/* DM */
.x-toolbar{
	border-style:none;
	border-width:0;
	display:block;
	padding:0;
	background:#53a9db none;
	position:relative;
	}

/*	The same classes that apply to the main toolbar, which we positioned up from its usual location, also apply to the TOC toolbar, where said repositioning
	breaks the design. Here we added a relative positioning style to the TOC toolbar, specifying top 0px, ensuring that the TOC toolbar will not be affected
	by our repositioning of the main toolbar. We also made the TOC toolbar transparent with this declaration.	*/

.tree-node-toolbar-no-bg-image { background-color: transparent; background-image: none; position: relative; top: 0px; }

/*	We changed the toolbar button icon height and width setting to accommodate our 32 x 32 pixel icons.	*/
/* -DM- ALtered width and height of text icon buttons */
.x-btn-icon .x-btn-center .x-btn-text { background-position:center; background-repeat:no-repeat; height: 41px; width: 41px; cursor: pointer; white-space: nowrap; padding: 0; }

/* -DM- */
.x-btn-text-icon .x-btn-center .x-btn-text {
background-position: 12px 12px;
background-repeat: no-repeat;
padding-left: 34px;
padding-top: 0;
padding-bottom: 0;
padding-right: 12px;
}

/*	These are the main toolbar buttons. We use our own images here.	*/

button.homeIcon		{ background-image: url(images/home.png); }
button.upIcon		{ background-image: url(images/up.png); }
button.downIcon		{ background-image: url(images/down.png); }
button.EditIcon		{ background-image: url(images/edit.png); }
button.EditLiveIcon		{ background-image: url(images/edit_live.png); }
button.emailThisPageIcon	{ background-image: url(images/email.png); }
button.sendFeedbackIcon	{ background-image: url(images/feedback.png); }
button.printIcon		{ background-image: url(images/printer.png); }
button.searchIcon		{ background-image: url(images/search.png); }



/*	These are the buttons on the TOC toolbar, for expanding and collapsing the TOC. We use our own images.	*/

button.expand		{ background-image: url(images/expand_all.png); }
button.collapse		{ background-image: url(images/collapse_all.png); }


/* DM */
#search-textfield {
	margin-left:1em;
	padding: 5px 7px;
	font-size: 14px;

}
.x-btn-wrap.x-btn.x-btn-icon button.searchIcon {
	border:none;
}
/* cell containing search input */
#ext-gen139 {
		border-left: #75bae2 solid 1px!important;
}


/*	We changed the border color and background color for the main toolbar’s search box, while it is inactive.	*/
.x-form-text,
textarea.x-form-field { padding: 1px 3px; background: #fff; border: none; }



/*	We changed the border color and background color for the main toolbar’s search box, while it is active. That is, when the user
	clicks into the search text box, its border and background change color.	*/
.x-form-focus,
textarea.x-form-focus { border: none; background: #FFC; }



/*	We manipulated this declaration to set the padding and positioning of the Search “Match partial words” checkbox text to better align
	with the checkbox. The font declarations here have effect only because we force them with !important ~ apparently declarations
	elsewhere which we have not been able to identify have precedence over .checkbox-text, even though .checkbox-text is directly applied
	to the text “March partial words” in the webhelp.js code that creates said text.	*/

/* DM */

#checkBoxForm {
	padding-left:1em;
	padding-right:1em;
}
#checkBoxForm input {
	width: 13px;
    height: 13px;
    padding: 0;
    margin:0 5px 0 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
.checkbox-text {
	font-size:13px!important;
	color:#FFF;
}



/*	We adjusted the following block, which implements the mouse-over and mouse-click button backgrounds, as required for our larger buttons. The file stei-note.txt
	in \extjs\resources\images\default\toolbar explains the technical basis for these declarations, plus lists all file set changes related to the change in button size.		*/
/*
.x-toolbar .x-btn-over .x-btn-menu-arrow-wrap .x-btn-center button							{ background-position: 0 -47px; }

.x-toolbar .x-btn-over .x-btn-left										{ background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) no-repeat 0 0; }
.x-toolbar .x-btn-over .x-btn-right										{ background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) no-repeat 0 -36px; }
.x-toolbar .x-btn-over .x-btn-center										{ background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) repeat-x 0 -72px; }

.x-toolbar .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed .x-btn-left, .x-toolbar .x-btn-menu-active .x-btn-left		{ background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) no-repeat 0 -108px; }
.x-toolbar .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed .x-btn-right, .x-toolbar .x-btn-menu-active .x-btn-right		{ background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) no-repeat 0 -144px; }
.x-toolbar .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed .x-btn-center, .x-toolbar .x-btn-menu-active .x-btn-center	{ background: url(extjs/resources/images/default/toolbar/tb-btn-sprite.png) repeat-x 0 -180px; }
*/

/* -DM- */
.x-toolbar .x-btn-over .x-btn-left,
.x-toolbar .x-btn-over .x-btn-right {background:none}

.x-toolbar .x-btn-over .x-btn-center {
	background-image:none;
	background-color:#5fb2e2;
	}

.x-btn button {
	font-size:14px;
	color:#fff;
	line-height:41px;
	padding:0 12px;
	border-right: #489ed5 solid 1px;
	border-left: #75bae2 solid 1px;
	}
.x-toolbar .ytb-spacer,
.x-btn-left,
.x-btn-right {display:none}

/*	We left this apparently toolbar-related style alone. It seems not to have any effect on our design. We do not know to what .ytb-text applies.	*/

.x-toolbar .ytb-text { padding: 0px; }



/*	We made the breadcrumbs bar transparent by eliminating the specification of a repeating background image. We made it borderless by reducing the
	border to 0 px. We also set the font size up a notch and specified our preferred family. Finally, we changed the font color.	*/
/* DM */
.x-panel-header {
	overflow: hidden;
	color: #333;
	font: normal 14px arial, helvetica, sans-serif;
	padding: 8px;
	border:none;
	line-height: 15px;
	background: transparent;
	}

/* DM */
.x-panel-no-border {background-color: green;}

/*	This sets the appearance of text in the TOC title bar (“Contents”), Index title bar (“Index”), and Search Results title bar (“Search Results”) and the breadcrumb bar	*/

.x-panel-header-text { 	font: bold 14px arial, helvetica, sans-serif; color: #333;
 }



/*	We made the lower border on the TOC toolbar (if it is displayed) disappear by setting the border-bottom to 0 px.	*/

.x-panel-noborder .x-panel-tbar-noborder .x-toolbar { border-width: 0; border-bottom: 0px solid #99bbe8; }



/*	We applied a top border to the TOC (sidebar) pane by removing the border-top: 0 setting in this declaration; made the background
	transparent for the topic content area ~ the TOC pane stays white without the additional change [next] to the .x-tab-panel-body
	declaration. 	*/
/* DM */
.x-panel-body { border: 1px solid; overflow: hidden; position: relative; }



/*	We changed the background to transparent so that the TOC has no white background.	*/

.x-tab-panel-body { border: 1px solid #8db2e3; background: transparent; }



/*	We set the background-color of this element to transparent, which revealed a solid white contained element that had previously been concealed.
	Other declarations rendered that element transparent as well, but this one is still required to see through to the page background image.		*/

.x-tree .x-panel-body { background-color: transparent; padding: 5px; }



/*	We changed the following line to specify our preferred font sequence and size for the TOC.	*/
/* DM */
.x-tree-node {
	color: black;
	font: normal 10pt "Calibri", calibri, verdana, arial, helvetica, sans-serif;
	white-space:nowrap;
}



/*	We changed the background-color setting for the TOC selected entry and removed the bold setting. We also changed the color of the mouseover highlight.	*/

.x-tree-node .x-tree-selected	{ background-color: #D6D6FF; }
.x-tree-node .x-tree-node-over { background-color: #FEFFC1; }



/*	We changed the following line to set the width to 0 px, so that the TOC icons (which we don’t want to use) will not show.	*/

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



/*	With the immediately preceding declaration we suppressed the appearance of the book and topic icons declared in the next three lines.
	We have left the declarations, and included the image files in our mod, to avoid any error conditions.	*/

.x-tree-node-collapsed .x-tree-node-icon	{ background-image: url(images/book_blue.png); }
.x-tree-node-expanded .x-tree-node-icon	{ background-image: url(images/book_open.png); }
.x-tree-node-leaf .x-tree-node-icon		{ background-image: url(images/leaf.gif); }



/*	We manipulated this block to change from triangular TOC tree node images to the plus and minus images.

	It appeared the original block was a framework for building a Windows Explorer styled tree navigation, in which there are
	+/- icons with dotted lines, including the dotted-line constructions needed for mid-list and end-list items. However, in the
	original declarations, the framework had not been used to full capacity, with (for example) -elbow-minus and -elbow-end-minus
	being set to the same image (the second image in the arrows.gif icon conglomerate, a little black triangle).

	In the files that accompany the Author-it templates, most of the component images for an Explorer styled tree are present, but
	not used. We added the missing files, and edited this block to use a plus-and-minus system, including with dotted lines. We supplied
	the colored *.mouseover.gif versions of the + and - images.									*/

.x-tree-arrows .x-tree-elbow								{ background: transparent url(images/tree/elbow.gif) no-repeat; }
.x-tree-arrows .x-tree-elbow-plus							{ background: transparent url(images/tree/elbow-plus.gif) no-repeat; }
.x-tree-arrows .x-tree-elbow-minus							{ background: transparent url(images/tree/elbow-minus.gif) no-repeat; }
.x-tree-arrows .x-tree-elbow-end							{ background: transparent url(images/tree/elbow-end.gif) no-repeat; }
.x-tree-arrows .x-tree-elbow-end-plus							{ background: transparent url(images/tree/elbow-end-plus.gif) no-repeat; }
.x-tree-arrows .x-tree-elbow-end-minus						{ background: transparent url(images/elbow-end-minus.gif) no-repeat; }
.x-tree-arrows .x-tree-elbow-line							{ background: transparent url(images/tree/elbow-line.gif) no-repeat; }
/* DM */
.x-tree-arrows .x-tree-ec-over .x-tree-elbow-plus						{ background: transparent url(images/tree/elbow-plus.gif) no-repeat; }
.x-tree-arrows .x-tree-ec-over .x-tree-elbow-minus					{ background: transparent url(images/tree/elbow-minus.gif) no-repeat; }
.x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-plus					{ background: transparent url(images/tree/elbow-end-plus.gif) no-repeat; }
.x-tree-arrows .x-tree-ec-over .x-tree-elbow-end-minus					{ background: transparent url(images/tree/elbow-end-minus.gif) no-repeat; }
.x-tree-elbow-plus,
.x-tree-elbow-minus,
.x-tree-elbow-end-plus,
.x-tree-elbow-end-minus	{ cursor: pointer; }



/*	We made the Index panel background transparent and adjusted the p.indexatoz margins. 	*/

#index			{ background-color: transparent; width: 90%; }
#index p.indexatoz		{ background: #A9E4FF; margin: 3px; font-size: 9pt; color: #ffffff; }
.index1, .index2, .index3	{ font-family: "Calibri", calibri, verdana, arial, helvetica, sans-serif; font-weight: bold; font-size: 9pt; color: #620090; padding-top: 3pt; padding-left: 5pt; }
td.indexheading		{ font-size: 10pt; padding-bottom: 2px; padding-left: 4px; }
td.indexlink		{ padding-left: 5px; }



/*	We made the Search Results panel background-colors transparent, which revealed previously non-apparent elements also needing to
	be declared transparent (included in next set of declarations).	*/
/* DM */
.searchResultsPanel	{ background-color: transparent !important; }



/*	We applied transparency and increased the font-size to make search results more like our TOC entries.
	With these padding settings, all the browsers display the proper indent, though apparently not all for the correct
	reasons. IE disregards this, yet has suitable indents in the search panel. Without this, other browsers lack a
	suitable indent. It works out the same on all tested browsers (Safari, Opera, Chrome, Firefox, IE on Windows;
	same except IE, on OS X). We’ll take it.		*/
/* DM */
.searchResults { font: italic 10pt; background-color: transparent !important; padding-left: 4px; padding-right: 4px; }



/*	We keep the text smaller for the xx results found in xx seconds text.	*/

#searchResultsPanel { font: normal 10pt; background-color: transparent !important; }



/*	We changed the search results hit highlight color.	*/

.searchword1		{ background-color: #81FFDD; }



/*	We changed the background here to be transparent. This controls one of the layers of the TOC, Index, and Search tab area.	*/
/* DM */
.x-tab-panel-header,
.x-tab-panel-footer { background: transparent; border:none; overflow: hidden; }



/*	Necessary for proper layout per original Author-it template design. Do not change.	*/

.x-tab-panel-footer { padding-top: 0; }



/*	We changed the background here to be transparent. This controls one of the layers of the TOC, Index, and Search tab area.	*/

ul.x-tab-strip-bottom { padding-bottom: 1px; background: transparent; border-top: 1px solid; border-bottom: 0 none; }



/*	We changed the color. This is the color for tab labels.	*/
/* DM */
.x-tab-strip span.x-tab-strip-text {
	font: normal 14px arial, helvetica;
	color: #333;
	white-space: nowrap;
	cursor: pointer;
	padding: 4px 0;
}



/*	We changed the color. This is the hover color for tab labels.		*/
/* DM */
.x-tab-strip-over span.x-tab-strip-text { color: #333; }



/*	We changed the color. This is the text color for the active tab label.	*/
/* DM */
.x-tab-strip-active span.x-tab-strip-text { cursor: default; color: #333; font-weight: bold; }



/*	The original code references a file named toc_collapsed.png that appears at the left side of the page when the TOC / Index / Search Results
	panel has been collapsed. We have opted to have nothing (no image representing the collapsed “sidebar” panel). If you specify an image here,
	it needs to be narrow enough to fit in the thin collapsed-TOC column.		*/

.x-layout-collapsed-west	{ }



/*	We changed  the border around the collapsed TOC bar, setting it to be transparent because we don’t want it. Then we repurposed it, setting it to
	be 3 px thick on the left and 30 px thick on the top, thereby manipulating the position of the un-collapse button displayed when the TOC (sidebar)
	panel is hidden to the left.	*/
/* DM */
.x-layout-collapsed {
	  background-color:#f1f1f1;
	  position: absolute;
	  left: -10000px;
	  top: -10000px;
	  visibility: hidden;
	  width: 20px;
	  height: 20px;
	  overflow: hidden;
	  border: none;
	  z-index: 20;
}

/* margin to match expanded toggle button position */
/* DM */
.x-tool-expand-east, .x-tool-expand-west {
	float: none;
	margin: 8px auto;
}

/*	Simply by commenting out the following declaration in ext-all.css, we removed the highlight effect and hand pointer triggered when the mouse
	moves over the collapsed TOC (sidebar) panel. This supports our removal of the slide-out-but-don’t-stay-out (auto-hide) feature. We originally
	removed that feature as user-confusing, plus, search results would appear with auto-hide on, which was in our view a real mess. Later, with
	transparency implemented, we had no choice but to disable auto-hide because a transparent sidebar overlaying topic content would create a
	visual scramble. For consistency of form in this file, and to document the declaration in ext-all.css to which we refer, we have included an empty
	declaration here.	*/

.x-layout-collapsed-over{}

/*	Simply by commenting out the following declaration in ext-all.css, we make transparent (or contribute to making transparent) the screen areas
	representing the collapsed TOC panel, the breadcrumbs bar, and the divider bar between the TOC and content area. For consistency of form in
	this file, and to document the declaration in ext-all.css to which we refer, we have included an empty declaration here.		*/

.x-border-layout-ct{ }

/*	Set the background to be white	*/
/* DM */
div#start-panel				{ padding: 0; background-color: inherit;}
.aboveheading				{ display: none; }
.belowheading				{ display: none; }
div#highlightColor				{ background-color: #DAE3FE; }

/*	We made the footer background transparent, set its height, increased the font size, and set our preferred font families.	*/
/* DM */
.footer { background-color: transparent;
	width: 100%;
	height: 60px;
	border-top-width: 1px;
	border-top-style: solid;
	font: normal 9pt "Calibri", calibri, verdana, arial, helvetica, sans-serif;
	padding: 10px;
	color: #666666;
	}

/*	Set the color of the borders that partion the UI visually	*/
/* removed panel borders */
/* DM */
.x-panel-body, .x-tab-panel-header, .x-tab-panel-footer, ul.x-tab-strip-bottom, .footer {
	/*border-color: #777777;*/
	border:none;
}

/* bottom tabs */
/* DM */
.x-tab-panel-noborder .x-tab-panel-footer-noborder {
	background-color:#dbdbdb;
}
.x-tab-strip-bottom .x-tab-left {
	background-image:none;
}
.x-tab-strip-bottom .x-tab-right {
	background-image:none;
	background-color:#dbdbdb;
}
.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
	background-image:none;
		background-color:#f1f1f1;
}
.x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
	background-image:none;
}



/* 	Set link properties			*/

/*	all links get pointer by default	*/	a	{ cursor: pointer; }

/*	links in general (topic area)		*/
/* DM */
a:link	{ color: #53A9DB; text-decoration: none; }
a:hover	{ color: #666; text-decoration: underline;}
a:active	{ color: #53A9DB; background: #3398BA; }
a:visited	{ color: #53A9DB; text-decoration: none; }

/* 	breadcrumbs			Was #53a9db now */
.x-panel-header a { color: #53A9DB; text-decoration: none; }

/* 	breadcrumbs hover 		*/
.breadcrumb:hover { color: #717E85; text-decoration: underline;}

/* 	linked letters in the jump-to-letter	*/
#index p.indexatoz a { color: #800080; text-decoration: none; padding: 4px; }

/* 	block in the index			*/

/*	letter heading targets of those	*/	td.indexheading a { color: #008000 !important; cursor: default; }		/*	We set the cursor not to be a pointer because these index letter	*/
/*	jump-to-letter links			*/									/*	links do not go anywhere. It’s mysterious to us why they have	*/
														/*	rendered as links in the first place.				*/

/*	index links			*/
.indexlink a { font-style: italic; /* 10pt georgia, verdana, arial, helvetica, sans-serif; */ color: #0000FF; text-decoration: none; }

/*	index links hover			*/
.indexlink a:hover { color: #008000; }

/*	search results			*/
#searchResults a:link { font: normal 11pt "Myriad Pro", calibri, verdana, arial, helvetica, sans-serif; color: #0000FF; text-decoration: none; }
/* search results visited */
#searchResults a:visited	{ color: #666;}

/*	search results hover		*/
#searchResults a:hover { color: #008000; }



/*	top-of-page link			*/	.topOfPage { font: normal 11pt "Myriad Pro", calibri, verdana, arial, helvetica, sans-serif; padding-left: 10px; padding-bottom: 5px; color: #717E85; text-decoration: none; }

/*	top-of-page link behaviour		*/

.topOfPage a:hover	{ text-decoration: underline;}

/* DM */
.bodytext {
	line-height: 1.4rem;
	margin-top: 6pt;
	margin-bottom: 6pt;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;

}

.bodytextright {

	margin-top: 6pt;
	margin-bottom: 6pt;
	margin-left: 0cm;
	margin-right: 0cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: right;
	text-indent: 0cm;
	width: auto;
	height: auto;

}


.buttons {
	display: inline;
	font-weight: bold;
	color: #8F5321;
	background-color: inherit;
	vertical-align: baseline;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
}


.emphasis {
	display: inline;
	font-style: italic;
	color: inherit;
	background-color: inherit;
	vertical-align: baseline;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
}


.figureheading {

	/* font-family: "Myriad Pro", calibri, verdana, arial, helvetica, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold; */
	font-size: 14pt;
	color: #870000;
	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 3pt;
	margin-left: 0cm;
	margin-right: 0cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;

}

/* DM */
.heading1 {

	font-size: 27px;
	color: #333;
	font-weight:normal;
	margin-top:1em;
	margin-bottom:.6em;
	}

/* DM */
.heading2

	{
	font-size: 27px;
	color: #333;
	font-weight:normal;
	margin-top:1em;
	margin-bottom:.6em;
	}

/* DM */
.heading3, .heading4, .heading5, .heading6

	{
	font-weight: bold;
	font-size: 18px;
	color: #333;
	margin-top: 1.5em;
	margin-bottom: .5em;
	}


.Sectiontitle
	{
	font-weight: bold;
	font-size: 16px;
	color: #333;
	margin-top: 1.5em;
	margin-bottom: .5em;
	}



.list

	{

	display: block;
	/* Replace georgia with "Myriad Pro", calibri */

	text-decoration: none;

	line-height: normal;
	margin-top: 3pt;
	margin-bottom: 3pt;
	margin-left: 0.5cm;
	margin-right: 0px;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: -0.5cm;
	width: auto;
	height: auto;


	}



.listcontinue

	{

	display: block;
	text-decoration: none;

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 6pt;
	margin-left: 0cm;
	margin-right: 0cm;
	padding-top: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}
.listcontinue img{
					padding-bottom: 0.7em;
				}

.listcontinue2

	{

	display: block;
	text-decoration: none;

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 6pt;
	margin-left: 0cm;
	margin-right: 0cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}

/*.icon_align

used for forcing icons in text to be aligned at the bottom!} */
.icon_align img
{padding-bottom: 0em;}

.menuoptions

	{

	display: inline;
	font-weight: bold;
	color: #870000;
	background-color: inherit;
	vertical-align: baseline;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;

	}


.monospace

	{

	display: inline;
	font-family: "Courier New", verdana, arial, helvetica, sans-serif;
	color: #666;
	background-color: inherit;
	vertical-align: baseline;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;

	}


.nonprinting

	{

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 6pt;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}


.note {
	background-color: #FFC;
	padding:0.7em;
	border: #EFEF89 solid 1px;
}
.note img {
	margin:.5em 0;
}
.faq-q {
	background-color: #FFC;
	padding:0em;
	font-weight: bold;
}
.faq-a {
	padding:0em 0.7em 0.7em;
	font-weight: normal;
}

.preformatted

	{

	font-family: "Courier New", verdana, arial, helvetica, sans-serif;

	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 6pt;
	margin-left: 6pt;
	margin-right: 6pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;

	}




/* This is for the navigation icons */
.navigation
	{
	background-color: inherit;
	vertical-align: middle;
	text-decoration: none;

	line-height: normal;
	margin-top: 2px;
	margin-bottom: 1px;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	padding-right: 4px;
	float: none;
	clear: none;
	text-indent: 0cm;
	width: auto;
	/* height: 25px; */


}

/* DM */
.relatedheading {
	font-size: 16px;
	font-weight: bold;
}

/* DM */
.subheading {
	font-weight: bold;
	font-size: 18px;
	color: #333;
	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 1.5em;
	margin-bottom: .5em;
	margin-left: 0cm;
	margin-right: 0cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;

}


.subheading-nonprinting

	{

	font-weight: bold;
	font-size: 14pt;
	color: #870000;
	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 3pt;
	margin-left: 0cm;
	margin-right: 0cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}


.subscript

	{

	display: inline;
	font-size: 11pt;
	color: inherit;
	background-color: inherit;
	vertical-align: sub;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;

	}


.superscript

	{

	display: inline;
	font-size: 11pt;
	color: inherit;
	background-color: inherit;
	vertical-align: super;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;

	}


.symbols

	{

	display: inline;
	font-family: "Symbol", verdana, arial, helvetica, sans-serif;
	color: inherit;
	background-color: inherit;
	vertical-align: baseline;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;

	}


.tablebodytext

	{
	color: inherit;
	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 3pt;
	margin-bottom: 3pt;
	margin-left: 0.1cm;
	margin-right: 0.1cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}


.tablecolumnheadings

	{

	font-size: 13pt;
	color: #870000;
	background-color: inherit;
	text-decoration: none;

	line-height: normal;
	margin-top: 3pt;
	margin-bottom: 3pt;
	margin-left: 0.1cm;
	margin-right: 0.1cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}





.toc

	{

	font-family: "Myriad Pro", calibri, verdana, arial, helvetica, sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 11pt;
	color: #000000;
	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 0cm;
	margin-bottom: 0cm;
	margin-left: 0cm;
	margin-right: 0cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 6pt;
	width: auto;
	height: auto;


	}





.widegraphic

	{

	display: block;
	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 6pt;
	margin-left: 0cm;
	margin-right: 0cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}


.wingdingsymbols

	{

	display: inline;
	font-family: "Wingdings", verdana, arial, helvetica, sans-serif;
	color: inherit;
	background-color: inherit;
	vertical-align: baseline;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;

	}


li.listalpha

	{

	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 0pt;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}


li.listalpha2

	{
	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 0pt;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}

/* DM */
.listbullet

	{
	background-color: inherit;

	vertical-align: baseline;
	text-decoration: none;

	line-height: 1.4rem;
	margin-top: 3pt;
	margin-bottom: 0pt;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;


	}


li.listbullet2

	{
	background-color: inherit;
	vertical-align: baseline;
	text-decoration: none;
	line-height: normal;
	margin-top: 3pt;
	margin-bottom: 0pt;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;
	}


li.listnumber

	{
	background-color: inherit;
	vertical-align: baseline;
	text-decoration: none;
	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 0pt;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;
	}


li.listnumber2
	{
	text-decoration: none;
	line-height: normal;
	margin-top: 6pt;
	margin-bottom: 0pt;
	margin-left: 0pt;
	margin-right: 0pt;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;
	}


li.tablelistbullet
	{
	background-color: inherit;
	vertical-align: baseline;
	text-decoration: none;
	line-height: normal;
	margin-top: 4pt;
	margin-bottom: 0pt;
	margin-left: 0cm;
	margin-right: 0.1cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;
	}


li.tablelistnumber
	{
	background-color: inherit;
	vertical-align: baseline;
	text-decoration: none;
	line-height: normal;
	margin-top: 4pt;
	margin-bottom: 0pt;
	margin-left: 0cm;
	margin-right: 0.1cm;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
	float: none;
	clear: none;
	text-align: left;
	text-indent: 0cm;
	width: auto;
	height: auto;
	}


ol.listalpha

	{
	list-style-type: Upper-Alpha;
	list-style-position: outside;
	margin-top: 6pt;
	margin-bottom: 0pt;
	}


ol.listalpha2

	{
	list-style-type: Lower-Alpha;
	list-style-position: outside;
	margin-top: 6pt;
	margin-bottom: 0pt;
	}


ol.listnumber

	{
	list-style-type: Decimal;
	list-style-position: outside;
	margin-top: 6pt;
	margin-bottom: 0pt;
	}


ol.listnumber2
	{
	list-style-type: Decimal;
	list-style-position: outside;
	margin-top: 6pt;
	margin-bottom: 0pt;
	}


ol.tablelistnumber
	{
	list-style-type: Decimal;
	list-style-image: none;
	list-style-position: outside;
	margin-top: 4pt;
	margin-bottom: 0pt;
	}

/* DM */
ul.listbullet
	{
	list-style-type: Disc;
	list-style-image: none;
	list-style-position: outside;
	margin-top: 3pt;
	margin-bottom: 1em;

	}


ul.listbullet2
	{
	list-style-type: Circle;
	list-style-image: none;
	list-style-position: outside;
	margin-top: 3pt;
	margin-bottom: 0pt;
	}


ul.listbullet3
	{
	list-style-type: Square;
	list-style-image: none;
	list-style-position: outside;
	margin-top: 3pt;
	margin-bottom: 0pt;
	}


ul.listbullet4

	{

	list-style-type: Disc;
	list-style-image: none;
	list-style-position: outside;
	margin-top: 3pt;
	margin-bottom: 0pt;

	}


ul.tablelistbullet

	{

	list-style-type: Square;
	list-style-image: none;
	list-style-position: outside;
	margin-top: 4pt;
	margin-bottom: 0pt;

	}

	/* RG More of my definitions */
	/* Basic paragraph styles */

/* DM */
.hint

	{
	background-color: #EDF9D9;
	padding:0.7em;
	border: 1px solid #CEE4A0;
	}

p img[alt~=Bomb] {
	width:32px;
	height:32px;
	margin-right:1em;
	vertical-align:middle;
}


/* DM */
.tip
  {
	background-color: #FFC;
	padding:0.7em;
	border: #EFEF89 solid 1px;
  }

p img[alt~=Pen] {
	width:32px;
	height:32px;
	margin-right:1em;
	vertical-align:middle;
	}

p img[alt~=Light] {
	width:32px;
	height:32px;
	margin-right:1em;
	vertical-align:middle;
	}

 /* DM */
.warning
	{
background-color:#FCC;
	padding:0.7em;
	border: 1px solid #E4A0A0;
	list-style-image:url('cross.gif');
	}


ul.warning
	{
	list-style-image:url('cross.gif');
	}

  /* DM */
.glossaryterm {
	color:#004080;
	font-family: arial,helvetica,sans-serif;
	font-size:10pt;
	font-style:normal;
	font-weight:bold;
	margin-bottom:0;
	margin-top:12pt;
	padding-bottom:0.01em;
	}

p.reftextright{
        font-size: 0.8em;
        color:  #3CA735;
        background-color: inherit;
        text-align: right;
       }

/* DM */
.relatedtopics {
	margin-top:30px;
}

/* ---------------------------------------------------------------------*/
/* Character styles */

.emphasis
{display: inline;
        font-style: italic;
        color: inherit;
        background-color: inherit;
        vertical-align: baseline;
        padding-top: 0pt;
        padding-bottom: 0pt;
        padding-left: 0pt;
        padding-right: 0pt;
       }

.keyword , .menuinstruction
{display: inline;
        font-weight: bold;
		font-size: inherit;
        background-color: inherit;
        vertical-align: baseline;
        padding-top: 0pt;
        padding-bottom: 0pt;
        padding-left: 0pt;
        padding-right: 0pt;
       }
.weblink
{display: inline;
        font-weight: bold;
		font-size: inherit;
        background-color: inherit;
        color: #8F5321;
       }



/* End of character styles */
/* ---------------------------------------------------------------------*/

/* Sutff for invisible keywords */
.aitkeywords
{
display:none; }
/* ------------------------------------------------------*/

/*  And here are the tables */

/* ------------------------------------------------------ */

/* DM */

table.tableintopic {width:100%;border-style:solid;border-width:1px;border-color:#CCC;}


table.tableintopic th {padding:5px;background-color:#f1f1f1;border-style:solid;border-width:1px;border-color:#e4e4e4!important;}
table.tableintopic td {padding:5px;background-color:#fff;border-style:solid;border-width:1px;border-color:#e4e4e4!important;}

table.tableintopic tr:nth-child(odd) td		{ background-color:#f8f8f8; }

.tableheading
{
	color: #333;
	margin-left:0;
	font-size:16px;

}
.tablerow
{
	color: #333;

}
.tabletight
{
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 2px;
	padding-top: 2pt;
	padding-bottom: 4pt;
	padding-left: 6pt;
	padding-right: 2pt;
	font-size:11pt;
}
.tabletightright
{
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 2px;
	padding-top: 2pt;
	padding-bottom: 4pt;
	padding-left: 2pt;
	padding-right: 2pt;
	text-align: right;
	font-size:11pt;
}
.tablebodytext
{

	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 2px;
	padding-top: 0pt;
	padding-bottom: 0pt;
	padding-left: 0pt;
	padding-right: 0pt;
}
ul.tablelistbullet
{
	list-style-type: Square;
	list-style-image: none;
	list-style-position: outside;
	margin-top: 2px;
	margin-bottom: 2px;
}
li.tablelistbullet
{
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;

}
.allowpagebreak
{
padding: 0;
margin: 0;
color: inherit;
font-size: 0
}

.breadcrumb {
   color: #576F8A;
   font-size: 90%;
   font-weight: normal;
    text-decoration: none;
}
/*
a:breadcrumb:link	{ color: #5055a5; text-decoration: none; }
a:breadcrumb:hover	{ color: #008000; }
a:breadcrumb:active	{ color: #000000; background: pink; }
a:breadcrumb:visited	{ color: #800080; text-decoration: none; } */



  /* The change of colours and styles for the different areas of Snap etc */
/* DM */

#Snap_topic{
	color: #000000;
	background-color: #FFFFFF;
	padding: 10px;
}

/* DM */
#Snap_topic_update {
	color: #576F8A;
	background-color: #f1f1f1;
	margin-bottom:20px;
	padding: 10px;
}

/* DM */
#Snap_topic_update p {
	text-align:right;
	font-size:14px;
}

#SO_topic{
	padding: 10px;
	padding-top:67px;
}

#SO_topic_update {
	color: #fff;
	height: 69px;
	background-color: #9fd6f6;
	background-image: url(images/webhost-banner-clouds.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	position:absolute;
	top:0px;
	right:0px;
	left:0px;
}

#SO_topic_update p {
	visibility: hidden;
}

/* DM */
#SO_admin {
	padding: 10px;
	padding-top:67px;
	background-color: #fff;
}

/* DM */
#SO_admin_update {
	color: #fff;
	height: 69px;
	background-color: #858e93;
	background-image: url(images/webhost-banner-admin.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
	position:absolute;
	top:0px;
	right:0px;
	left:0px;
}

#SO_admin_update p {
	visibility: hidden;
}


/* Navigation icons */
.nav_icon {
	width: 40px;
	height: 40px;
}
.nav_icon_small{
	width: 20px;
	height: 20px;
}

/* nav buttons */
.nav-btn {
	display: inline-block;
	padding:7px 10px;
	background-color:#53a9db;
	transition: all ease 200ms;
	color: #fff;
	border-radius: 3px;
}

.nav-btn:hover {
	background-color:#292929;
}

.nav-btn i::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
}

.arw-l::before {
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform:rotate(-45deg);
}

.arw-r::before {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

.arw-u::before {
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(-45deg);
	margin-left:5px;
}