/* 
	POSITIONING AND MAIN LAYOUT 

	These styles govern the general layout of the page, most notably
	the header section of the page.
*/
body {
	background: #F9F9F9 url(../images/body.jpg) repeat-x 0 76px;
	background-attachment: fixed;
	margin: 0;
	padding: 0;
	color: #666;
	font: normal 11px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
}

#header {
	width: 100%;
	z-index: 10;
	position: fixed;
}

#footerwrap {
	bottom: 0px;
	width: 100%;
	z-index: 10;
	position: fixed;
}

#footerwrap #footer {
	width: 100%;
	height: 24px;
	border-top: 1px solid #484848;
	margin-top: 5px;
	color: #FFF;
	background: #505050;	
}

#header #top, 
#header #middle, 
#header #bottom {
	height: 24px;
}

#header #top,
#header #bottom {
	color: #FFF;
	border-bottom: 1px solid #34373D;
	background: #505050;
}

#header #bottom {
	border-top: 1px solid #C9C2C2;
	margin-bottom: 5px;
}

#header #middle {
	background: #A49E9E;
}

#footer #notification-box {
	height: 20px;
	float: left;
	padding-top: 4px;
	padding-left: 4px;
	font-weight: bold;
	color: #FFF;
}

#footer #server-activity {
	height: 20px;
	float: right;
	width: 100px;
	text-indent: 0;
	padding: 4px 0 0 4px;
	border-left: 1px solid #A9A9A9;
}

#header #top #quick-stats,
#header #top #note-toggle,
#header #top #note-create,
#info-popup #info-title #close-button  {
	height: 20px;
	float: right;
	border-left: 1px solid #B0B5BD;
	text-indent: 0;
	padding: 4px 4px 0 4px;
	cursor: pointer;
}

#header #top #quick-stats {
	min-width: 131px;
	cursor: default;
	text-align: center;
	color: #FFF;
}

#page-title a{
	color: yellow;
}

#header #middle #menu {
	margin-left: 6px;
}

#header #top #page-title {
	float: left;
	padding-top: 4px;
	padding-left: 10px;
	font-weight: normal;
	color: #fff;
}

#quick-stats a{
	color: #FFF !important;
}

#quick-stats:hover,
#tree-title:hover,
#note-toggle:hover,
#note-create:hover,
#close-button:hover {
	background: #34373D;
}

#info-popup {
	display: none;
	position: fixed;
	top: 80px;
	left: 10%;
	width: 80%;
	max-height: 300px;
	border: 1px solid #D8D2D2;
	background: white;
	z-index: 100;
}

#info-popup #info-title,
#save-mask #mask-title {
	font: normal 13px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	color: #FFF;
	background: #505050;
	height: 24px;
}

#save-mask #mask-title {
	height: auto;
	padding: 5px 0;
	text-align: center;
}

#info-popup #info {
	height: 260px;
	padding: 10px;
	padding-top: 4px;
	overflow: auto;
}

#page-mask {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #505050;
	z-index: 99;
	text-align: center;
}

#save-mask {
	position: fixed;
	display: none;
	top: 40%;
	left: 40%;
	border: 1px solid #34373D;
	background: white;
	width: 20%;
	min-width: 300px;
	z-index: 100;
	text-align: center;
}

#save-mask img {
	margin: 4px 0;
}

#main-content {
	width: auto;
	min-width: 640px;
	padding: 20px;
	padding-top: 82px;
	margin-bottom: 40px;
}

#error-display {
	position: fixed;
	bottom: 35px;
	right: 10px;
	width: 450px;
	background: transparent url(../images/bg-error.png) no-repeat bottom left;
	z-index: 1500;
}

#error-title {
	background: red;
	font-weight: bold;
	color: white;
	padding: 4px;
	border-bottom: 1px solid red;
	cursor: default;
	margin-right: 5px;
}

#error-message {
	background: pink url(../images/li/error_pad.png) no-repeat left;
	padding: 4px;
	padding-left: 70px;	
	min-height: 52px;
	max-height: 300px;
	overflow: auto;
	border: 1px solid red;
	margin-right: 5px;
	margin-bottom: 5px;
}

/* 
	TABLE STYLES

	These styles govern the layout and markup of the application's tables which
	are, of course, only used for tabular data. Doesn't mean they can't look 
	good, though :)
*/
td {
	font: 11px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	vertical-align: top;
}

table.normal {
    width: 100%;
    margin: 0;
	border: 0;
}

table.normal thead td {
    font-weight:normal;
    color: #7F7A7A;
	vertical-align: middle;
	height: 24px;
	background: #DCD3D4;
	border-bottom: 1px solid #C8C0C1;
	padding: 2px;
}

table.normal thead td a {
	color: black;
}

.cell-even,
.cell-even2 {
	padding: 2px;
    background-color:#F9F7ED;
    border-bottom:1px solid #D9D3B5;
	vertical-align: middle;
	height: 24px;
}

.cell-odd,
.cell-odd2 {
	padding: 2px;
    background-color:#fff;
    border-bottom:1px solid #D9D3B5;
	vertical-align: middle;
	height: 24px;
}

.cell-odd2,
.cell-even2 {
	border-left: 1px dotted #dedede;
}

.cell-highlight {
	padding: 2px;
    background-color:#FFE8A7;
    border-bottom:1px solid #ddd;
	vertical-align: middle;
	height: 24px;	
}

.cell-highlight2 {
	padding: 2px;
    background-color:#CAE8C8;
    border-bottom:1px solid #A7A7A7;
	vertical-align: middle;
	height: 24px;	
}

.cell-even a,
.cell-even2 a,
.cell-odd a,
.cell-odd2 a{
	color: #FE6C45
}


/* 
	FORMS MARKUP

	Markup for forms. Also layout for the form rows. Not the prettiest solution 
	(as it requires form elements to be contained within divs) but it works well
	and the forms are easy to build and style.
*/
legend {
	background: #A49E9E;
    padding: 5px 10px 5px 10px;
	color: #FFF;
    border: 1px solid #918B8B;
    font-weight: bold;
	margin-bottom: 10px;
}

fieldset {
    padding: 10px;
	padding-right: 15px;
    background: #FFF;
    border: 1px solid #CCCCCC;
	margin: 10px 0 10px 0;
	min-width: 600px;
	width: auto;
}

.row {
    clear: both;
    border: 1px solid #E4E3D6;
    margin-bottom: 4px;
	min-height: 25px;
	vertical-align: middle;
	background: #FAFAFA;
}


.row:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.row .label {
    float: left;
    width: 180px;
	margin: 5px 0 0 4px;
	color: #675858;
}

.tt {
    float: left;
	width: 40px;
	text-align: right;
	margin: 5px 10px 0 0;
}

.input {
    float: left;
	margin-top: 2px;
	min-width: 400px;
}

input[type='text']:focus,
input[type='password']:focus,
textarea.textarea:focus,
textarea.textbox:focus {
	background: #FFFFDD;
}

.droplist,
.textbox,
.textarea,
.readonly {
	font: 11px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	padding: 2px;
	border: 1px solid #D4CBCC;
	background-color: #fff;
	vertical-align: middle;
	width: 200px;
	height: 15px;
}

.readonly {
	background: #f7f7f7;
	border: 1px solid #d4d8e2;
}

.textarea {
	font: 11px "Courier New", Courier, mono;
	width: 99%;
	height: 250px;
}

.small {
	width: 240px;
	height: 120px;
}

.short {
	width: 99%;
	min-width: 400px;
	height: 100px;
}

.fancy,
.checkbox {
	vertical-align: middle;
	padding: 0;
}

optgroup {
	background: #EBF3FF;
	font-style: normal;
	color: black;
}

optgroup option {
	background:white;
}

.droplist {
	width: 206px;
	height: 19px;
}

.date-selector {
	width: 60px;
}

.smalldate-selector {
	width: 20px;
}

.errorbox {
	border: 1px solid red;
	background-color: pink;
}

.fauxbutton {
	cursor: pointer;
	font: 10px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	color: #FFF;
	padding: 1px;
	margin: 0;
	font-weight: bold;
	border: solid 1px #454545;
	background: #525252
}

/*
	itoolbar MARKUP

	The itoolbars are usually contained in forms, and offer such functionality as saving
	or cancelling. 
*/
.itoolbar-fixed {
	position: fixed;
	padding-left: 6px;
	top: 49px;
	left: 0px;
	text-align: left;
	background: transparent;
	border-top: 1px solid #AFAFAF;
	height: 24px;
	z-index: 15;
}

.itoolbar {
	text-align: left;
	background: #79B22A;
	border: 1px solid #679823;
	height: 24px;
	margin-bottom: 10px;
}

.itoolbar-fixed a.menu-link,
.itoolbar a.menu-link {
	display: block;
	float: left;
	margin-right: 10px;
	text-decoration: none;
	color: #FFF;
	padding: 4px 5px 4px 5px;
}

.itoolbar-fixed a.menu-link:hover,
.itoolbar a.menu-link:hover {
	color: #FFF;
	padding: 4px 4px 4px 4px;
	border: 1px solid #AFAFAF;
	background: #34373D;
	border-top: 0;
	border-bottom: 0;
}

.itoolbar-fixed a.menu-link img,
.itoolbar a.menu-link img {
	border: 0;
	vertical-align: middle;
}

#form-status {
	float: right;
	padding: 4px 5px 4px 10px;
	cursor: default;
	display: none;
	color: #000;
	border-left: 1px solid #34373D;
	background: #eeffee; /* #FFFFA3; */
	width: auto;
	text-align: right;
}


/* 
	NOTES STYLES

	Markup for the user notes. Sort of like Post-it notes, but you can
	hide them, sort of negating the whole purpose of Post-its :)
*/
.note {
	position: fixed;
	width: 205px;
	height: 155px;
	background: transparent url(../images/bg-note.png) no-repeat bottom right;
}

.note-toolbar {
	background: #FFC000 url(../images/bg-note-title.png) repeat-y left;
	height: 22px;
	margin: 0 5px 0 0;
	border: 1px solid #FFC000;
	border-bottom: 0;
}

.note-load {
	float: left;
	text-align: left;
	width: 178px;
	height: 100%;
	cursor: move;
	vertical-align:middle;
}

.note-toolbar img {
	float: left;
	cursor: pointer;
	margin: 4px 0 0 4px;
}

.note textarea {
	background: #FFFFC0;
	font: normal 10px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	width: 190px;
	height: 118px;
	padding: 4px;
	margin: 0 5px 5px 0;
	border: 1px solid #FFC000;
	border-top: 0;
	overflow: auto;
}


/* 
	HOME PAGE MARKUP

	The markup for the different info boxes on the home page.
*/
.home-box {
	float: left;
	width: 300px;
	margin: 3px;
	border: 1px solid #D2CACB;
	background: #FBFBFB
}

.home-box h2 {
	background: #DCD3D4;
	color: #505050;
	margin: 0;
	border: 0;
}

.home-box-data {
	padding: 10px 5px 5px 70px;
	height: 80px;
	max-height: 80px;
	margin: 0;
}

.home-box-data ol,
.home-box-data ul {
	margin-top: 0;
	margin-bottom: 0;
}

.home-box-data2 {
	padding: 10px 5px 5px 10px;
	min-height: 80px;
	margin: 0;
}

/* 
	SORTABLE LISTS

	Markup for sortable lists. 
*/
.sortable-title {
	width: 450px;
	padding: 5px;
	margin-top: 10px;
	font: normal 13px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	border: 1px solid #C8C0C1;
	color: #333;
	background: #DCD3D4;	
}

.sortable-container {
	border: 1px solid #C8C0C1;
	border-top: 0;
	width: 450px;
	padding: 0 5px;
	background: white;
}

.sortable-list {
	padding: 10px;
	margin: 0;
}

.sortable-list li,
.sortable-list li.hidden,
.sortable-item {
	color: #FFF;
	list-style-type: none;
	border: 1px solid #7eb729;
	margin: 2px;
	padding: 3px;
	background: #85c329;
	cursor: move;
}

.sortable-list li.hidden {
	background: pink;
}

.sortcheck {
	display: none;
}

/* 
	DROP DOWN MENU

	Markup for the drop down menus. Speaks for itself, really.
*/
.dropdownwrapper {
	position: fixed;
	display: none;
	z-index: 80;
	top: 49px;
}

.dropdown {
	font-size: 11px;
	border: 1px solid #34373D;
	border-bottom: 0;
	line-height: 18px;
	width: 200px;
	color: #FFF !important;
	background: #8D8888;
	margin: 0;
}

.dropdown a {
	width: 100%;
	display: block;
	text-indent: 2px;
	text-align: left;
	height: 20px;
	border-bottom: 1px solid #34373D;
	padding: 2px 0 2px 0;
	text-decoration: none;
	color: #FFF !important;
}

.dropdown a:hover {
	color: #333 !important;
	background: #CBC4C4;
}

#menu a.menu-link {
	display: block;
	float: left;
	margin-right: 10px;
	text-decoration: none;
	color: #FFF;
	padding: 5px 5px 3px 5px;
	text-indent: 0px;
}

#menu a.menu-link-selected,
#menu a.menu-link:hover {
	display: block;
	float: left;
	margin-right: 10px;
	text-decoration: none;
	text-indent: 0px;
	color: #FFF;
	padding: 5px 4px 3px 4px;
	border: 1px solid #CBC4C4;
	border-top: 0;
	background: #8D8888;
}

#menu a img,
.dropdown img
{
	border: 0;
	vertical-align: middle;
}

/*
	PAGE BROWSER

	Markup for the page browser. 
*/
#treewrap {
	position: fixed;
	width: 300px;
	height: auto;
	top: 74px;
	right: 0px;
	z-index: 35;
	display: none;
}

#tree-title {
	position: fixed;
	top: 50px;
	height: 20px;
	border-left: 1px solid #AFAFAF;
	padding-top: 3px;
	padding-bottom: 1px;
	cursor: pointer;
	width: 299px;
	text-align: center;
	right: 0px;
	z-index: 35;
	color: #FFF;
}

#tree-title a{
	color: yellow;
}

#tree-wrapper {
	padding-top: 4px;
	white-space: nowrap;
	background-color: #fff;
	overflow: auto;
    max-height: 300px;
	padding-bottom: 10px;
	border-left: 1px solid #34373D;
	border-top: 1px solid #34373D;
}

#tree-options {
    text-align: center;
	height: 19px;
   	padding: 5px 0 0 20px;
	margin: 0;
	color: #FFF;
	font: normal 11px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	border-top: 1px solid #34373D;
	background: #8D8888;
	margin: 0 0 5px 0;
	border-left: 1px solid #34373D;
	border-bottom: 1px solid #34373D;
}

#tree-options a {
	color: #FFF;
}

.deleted-page {
	text-decoration: line-through;
	color: #888;
}

.normal-page {
	color: #FF6C01;
}

.unpublished-page {
	color: #888;
}

.unapproved-page {
	color: #55ff55;
	font-style: italic;
}

.empty-page {
	color: #bbb;
}

.node{
	color: #FF6C01;
}

.node:hover {
	color: #000;
	background: #ECECEC;
}

.selected-node {
	color: #FFF;
	background: #feedb7;
}

.selected-node a{
	color: #000 !important;
}

#base-node img,
.selected-node img,
.node img {
	vertical-align: middle;
}

#browser-menuwrapper {
	position: fixed;
	display: none;
	right: 50px;
	top: 60px;
	width: 200px;
	height: auto;
	z-index: 200;
}

.browser-menu {
	border: 1px solid #34373D;
	background: #fff;
	margin: 0 5px 5px 0;
}

.menu-title {
	background: #505050;
	padding: 3px;
	font-weight: bold;
	cursor: default;
	color: white;
}

.menu-divider {
	border-top: 1px solid #34373D;
	padding: 3px;
	font-style: italic;
	cursor: default;
	background: #828B9A;
	color: white;
}

.browser-menu a {
	border-top: 1px solid #34373D;
	padding: 3px;
	display: block;
	color: black;
}

.browser-menu a:hover {
	background: #FFE8A7;
}

/*
	PAGINATION LINKS MARKUP

	Markup for pagination links
*/

.pagination-link {
	padding: 3px;
	border: 1px solid #CBC5C5;
	background: #E7E3E3;
	color: #675858;
}

.pagination-link-active {
	padding: 3px;
	border: 1px solid #928787;
	background: #A99D9D;
	color: #FFF;
}


/* 
	TAB MARKUP

	Markup for tabs.
*/
#tab-header {
	border-bottom : 1px solid #ccc;
	margin : 0;
	padding-bottom : 19px;
	padding-left : 10px;
}

#tab-header ul, #tab-header li {
	display : inline;
	list-style-type : none;
	margin : 0;
	padding : 0;
}

#tab-header a {
	background : #B3ADAD;
	border : 1px solid #A29D9D;
	color : #FFF;
	float : left;
	font-size : 11px;
	font-weight : normal;
	line-height : 14px;
	margin-right : 8px;
	padding : 2px 10px 2px 10px;
	text-decoration : none;
}

#tab-header a:hover {
	background: #8D8888;
}

#tab-header .tab-current {
	background : #fff;
	border-bottom : 1px solid #fff;
	color : #000;
}

#tab-header .tab-current a {
	background : #fff;
	border-bottom : 1px solid #fff;
	color : #000;
}

#wrap-tabs {
	width: 100%;
	margin: 0;
	clear: both;
}

.visible-tab {
	display:block;
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	padding: 10px;
	min-height: 200px;

}

.hidden-tab {
	display:none;
}

/* 
	COMPONENT MARKUP

	Contains styles for marking up the components in the library.
*/
.component-name {
	font: normal 13px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	background: #ececec;
	border: 1px solid #7F7A7A;
	padding: 3px;
	color: #fff;
	background: #8D8888;
}

.component-name a {
	color: #fff;
}

.component-description {
	border: 1px solid #7F7A7A;
	border-top: 0;
	background: #FFF;
	padding: 5px;
	margin-bottom: 5px;
}

.component-description a{
	color: #FE6C45;
}



/* 
	STATISTICS MARKUP

	Contains styles for the statistics pages
*/
.stats-holder {
	float: left;
	width: 300px;
	margin: 0 10px 10px 0;
}

.stats-holder h3 {
	font: bold 13px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	background: #FFE8A7;
	border-bottom: 1px solid #bdbdbd;
	padding: 3px;
	margin: 0;
}

/* 
	EXPANDABLE SECTIONS MARKUP

	Deals with expandable sections.
*/
.expander-switch {
	margin-bottom: 0;
	color: #E7E3E3;
	background: #505050;
	border: 1px solid #434343;
	cursor: pointer;
}

.expander-box {
	padding: 15px;
    background: #FFF;
    border: 1px solid #B5AFAF;
	border-top: 0;
	margin-bottom: 15px;
}

.expander-box p {
	margin-top: 0;
}

/* 
	LANGUAGE ICONS
	
	A couple of styles for the language selector
*/
.langimg {
	border: 0;
	margin-top: 3px;
	opacity:.3;
	-moz-opacity:.3;
	cursor: pointer;
}

.langimg:hover {
	opacity:1;
	-moz-opacity:1;
}

.langimg-active {
	border: 0;
	margin-top: 3px;
}

/* 
	PANE MARKUP

	Style info related to the left and right panes
*/
#right-pane {
	float: right;
	width: 30%; 
	margin-top: 19px; 
	height: 394px; 
	overflow: auto; 
	overflow-x: hidden; 
	border: 1px solid #cccccc;
	background: #f9f9f9;
}

#right-pane h2 {
	margin-top: 0;
}

#left-pane {
	float: left; 
	width: 100%;
}


/* 
	GENERAL/ MISC MARKUP

	Lots of style information for just about anything which doesn't fit into another
	category.
*/

.login-logo {
	border: 1px solid #E4E3D6;
}

.ref-ul {
	margin: 10px; 
	padding: 10px; 
}

.ref-ul li {
	list-style-image: url(../images/si/bullet_green.png);
}

.php,
.sql,
.html4strict,
.apache,
.css,
.javascript {
	border: 1px solid #E0E5EF;
	padding: 5px;
	background: #F4F6F9;
	margin: 10px 0 10px 0;
}

.info-icon {
	cursor: help;
	margin-left: 5px;
	opacity: .3;
}

.info-icon:hover {
	opacity: 1.0;
}

#tooltip {
	position: absolute;
	border: 1px solid #34373D;
	background: white;
	width: 30%;
	max-width: 30%;
	z-index: 1000;
	cursor: pointer;
}

#tooltip-title {
	font: normal 13px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	background: #ececec;
	border-bottom: 1px solid #34373D;
	padding: 2px;
	color: #FFF;
	background: #505050;
}

#tooltip-title-text {
	padding-left: 4px;
	font-weight: normal;
	vertical-align: middle;
}

#tooltip-body {
	padding: 5px;
}

.handle {
	cursor: move;
}

h1, h2 {
	font: normal 13px 'Lucida Grande', Tahoma, Verdana, Lucida, Geneva, Arial, Helvetica, sans-serif;
	background: #ececec;
	border: 1px solid #7F7A7A;
	padding: 3px;
	color: #FFF;
	background: #8D8888;
}

.codeblock {
	font: 11px "Courier New", Courier, mono;
	background: #eee;
	border: 1px solid #888;
	padding: 1px 2px 2px 2px;
	width: auto;
	min-width: 200px;
	vertical-align: middle;
}

.help-icon {
    vertical-align: middle;
    cursor: pointer;
}

a {
	text-decoration: none;
	color:#426BAF;
}

img {
	border: 0;
	vertical-align: middle;
}

#debug {
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 5px;
    border:1px solid red;
	text-align: left;
	cursor: pointer;
	background: pink;
}

div.message-box {
	width: 100%;
	height: 20px;
    border-bottom:1px solid #A7A7A7;
	text-align: left;
	cursor: pointer;
	float: left;
}

.boldtext {
	font-weight: bold;
}

.message-text {
   white-space:normal;
   font-family: "Courier New", Verdana, Arial;
   background: #FBFBFB;
   border: 1px solid #DDDDDD;
   padding: 5px;
}

.message-quote {
   white-space:normal;
   font-family: "Courier New", Verdana, Arial;
   background: #fff;
   border: 1px solid #afafaf;
   padding: 5px;
   margin: 10px;
}

.mono {
	font-family: "Courier New", Courier, mono;
}

.right-align {
	text-align: right;
}

.warning {
	font-weight: bold;
	color: red;
}

.ok {
	font-weight: bold;
	color: green;
}

.media-path {
	padding: 3px;
	border: 1px solid #a7a7a7;
	background: #ededed;
	font-weight: bold;
}

.comp-desc {
   white-space: normal;
   background: #FBFBFB;
   border: 1px solid #DDDDDD;
   padding: 5px;
   font-size: 10px;
}

pre.code, code {
   background: #FBFBFB;
   border: 1px solid #DDDDDD;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

a:focus {
	/* gets rid of the lines around links - I find them irritating */
	/* if you want them back, simply remove this entire selector from the file */
	-moz-outline: 0; 	/* Firefox 1.0x */
	outline: 0; 		/* Firefox nightly builds, DeerPark dev. releases */
	outline-offset: 0; 	/* Firefox nightly builds, DeerPark dev. releases */
}

#perms-table td {
	vertical-align: middle;
	height: 25px;
}

#mask-remover { 
     position: fixed; 
     display: none; 
     right: 0; 
     bottom: 0; 
     z-index: 100; 
     text-align: center; 
     padding: 4px; 
     cursor: pointer; 
}

.clearer {
	clear: both;
}

.nodisp {
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
}

/* 
	LIST OPTIONS

	Styles for the messenger options list (reply | forward kind of fing) and for the plugin lists
*/
ul.messengerlist,
ul.pluginitem  {
	margin: 0 auto 5px auto;
	padding: 5px;
	border: 1px solid #679823;
	background: #79B22A;
}
	
ul.messengerlist li,
ul.pluginitem li {
	padding: 0 0.5em 0 0.7em;
	border-left: 0.08em solid #FFF;
	display: inline
}
	
ul.messengerlist li.first,
ul.pluginitem li.first {
	padding-left: 0;
	border: 0
}
	
ul.messengerlist a,
ul.pluginitem a {
	color: #FFF;
}

ul.pluginitem {
	background: #505050;
	border: 0;
}

/* 
	COLORJACK PLUGIN

	Styles for the colour picker.
*/
#plugin { 
	background: #636A75;
	COLOR: #AAA; 
	CURSOR: pointer; 
	DISPLAY: block; 
	PADDING: 7px 10px 11px 10px; 
	Z-INDEX: 1; 
	TOP: 0; 
	LEFT: 0; 
	POSITION: absolute; 
	WIDTH: 199px;
	border: 1px solid black;
}

#plugin br { 
	CLEAR: both; 
	MARGIN: 0; 
	PADDING: 0; 
}

#plugin select { 
	BORDER: 1px solid #333; 
	BACKGROUND: #FFF; 
	POSITION: relative; 
	TOP: 4px; 
}

#plugHEX { 
	FLOAT: left;
}

#plugCLOSE {
	FLOAT: right; 
	MARGIN: 0 8px 3px; 
	COLOR: #FFF;
}


#plugHEX:hover,
#plugCLOSE:hover { 
	COLOR: #FFD000;
}

#SV { 
	background: #FF0000 url('../../../assets/images/colour/SatVal.png'); 
	POSITION: relative; 
	CURSOR: crosshair; 
	FLOAT: left; 
	HEIGHT: 166px; 
	WIDTH: 167px; 
	MARGIN-RIGHT: 10px;
}

#SVslide {
	BACKGROUND: url('../../../assets/images/colour/slide.gif'); 
	HEIGHT: 9px; 
	WIDTH: 9px; 
	POSITION: absolute; 
	line-height: 1px;
}

#H { 
	CURSOR: crosshair; 
	FLOAT: left; 
	HEIGHT: 154px; 
	POSITION: relative; 
	WIDTH: 19px; 
	PADDING: 0; 
	TOP: 4px;
}

#Hslide { 
	BACKGROUND: url('../../../assets/images/colour/slideHue.gif'); 
	HEIGHT: 5px; 
	WIDTH: 33px; 
	POSITION: absolute;
	line-height: 1px;
}

#Hmodel { 
	POSITION: relative; 
	TOP: -5px;
}

#Hmodel div { 
	HEIGHT: 1px; 
	WIDTH: 19px; 
	font-size: 1px; 
	line-height: 1px; 
	MARGIN: 0; 
	PADDING: 0;
}

#plugID { 
	HEIGHT: 120px; 
	WIDTH: 63%; 
	MARGIN: 12px 0 0 250px; 
	PADDING-TOP: 76px; 
	COLOR: #000; 
	BORDER: 2px solid #333; 
	TEXT-ALIGN: center; 
	FONT-SIZE: 25px; 
	BACKGROUND: #F1FFCC;
}


/* UPDATE ALERTS */

#updalert{
	height: 42px;
	background: #894C4C url("../images/updalert.gif") no-repeat 0 0}

#updalert p{
	padding-top: 12px;
	font-size: 1.3em;
	margin-left: 50px;
	color: #FFF
}

#updalert p a{
	text-decoration: underline;
	color: #FFF;
}

/* QUICK START */

#quickstart{
	list-style: none;
	margin: 0;
	padding: 0;
}

#quickstart li{
	font-size: 1.5em;
	margin-bottom: .5em;
}

#quickstart li a{
	display: block;
	padding: .5em 1%;
	color: #505050;
	border: 1px solid #E4E0E1;
	background: #EDE9EA;
}

#quickstart li a:hover{
	border: 1px solid #DBD5D5;
	background: #E1DBDB
}

/* 
	TEXTAREA BUTTONS

	Styles for grow and shrink buttons
*/
.textarea-button {
	border: 1px solid #A29D9D;
	border-bottom: 0;
	padding: 3px 5px 3px 5px;
	margin-right: 5px;
	margin-bottom: -1px;
	float: right;
	background: #B3ADAD;
	color: #fff;
}

.textarea-button:hover {
	background: #8D8888;
}