/*
-------------------------------------------------------------------
Page
*/

#Banner-Text {
	margin-left: 4px;
	margin-top: 2px;
	float:left;
	line-height: 98%;
	height: 40px;
	width: 180px;
	padding-top: 10px;
	padding-left: 96px;
	font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
	font-size: 20px;
	font-color: black;
	font-feature-settings: "liga", "kern";
	text-rendering: optimizelegibility;
	background-image: url(../images/tebubbles_banner.png);
	background-repeat: no-repeat;
	background-position: left top;
}

body
{
	background: #fafafa;
	color: #000;
	margin: 0;
	padding: 0;
	font-size: 12px;
	background-image: url(../images/page_background.png);
      font-family: 'Roboto', sans-serif;
  </style>
}

body.With-Sidebar
{
	background-image: url(../images/page_background_sidebar.png);
	background-repeat: repeat-y;
	background-position: -250px 0;
}

.Innovation {
  color: #3872c2;
}
.Edge {
  color: #f78812;
}

.disabled {
	color: #E0E0E0;
	text-decoration: none;
	cursor: default;
}

a.button {
	display:-moz-inline-stack;
	display: inline-block;
	color: #202020;
	text-decoration: underline;
	cursor: pointer;
	background-image: url(../images/nav_plain_green.png);
	background-repeat: no-repeat;
	margin: 12px;
	padding-left: 20px;
	padding-right: 2px;
	height: 20px;
	text-align: left;
}
a.button:hover {
	text-decoration: none;
	color: #606060;
	background-position: 0 -100px;
}

/*
-------------------------------------------------------------------
Miscellaneous
*/

img { border: 0; }

form
{
	margin: 0;
	padding: 0;
}

.noDisplay { display: none; }

.fb
{
	/*Float break - generally used as <span class="fb">&nbsp;</span>*/
	clear: both;
	height: 0;
	display: block;
	overflow: hidden;
}

.Success {
	color: green;
}
.Warning {
	color: orange;
}
.Error {
	color: red;
	font-weight: bold;
}

/*
-------------------------------------------------------------------
Fonts
*/

p,ul,dl,li,dd,dt,td,div
{
	font-size: 100%;
/*
	font-family: verdana,arial,sans-serif;
*/
}
input,select,optgroup,option,textarea
{
	font-size: 100%;
/*
	font-family: Fixed,monospace;
*/
	font-family: verdana,arial,sans-serif;
}

p,li,td,div,a.anchor { color: #222; }

p
{
	padding: 0;
	margin-top: 0;
	margin-bottom: 0.2em;
	line-height: 1.4em;
}

ul
{
	margin-top: 0;
	/*padding-bottom to match li + p (else ul margin-bottom and li margin-bottom don't add together)*/
	margin-bottom: 0;
	padding-bottom: 0.4em;
	list-style: square;
}

li
{
	margin-top: 0;
	margin-bottom: 0.6em;
}

/*
h1,h2,h3,h4,h5,h6
{
	font-family: verdana,arial,sans-serif; 
	color: #333;
}
*/

h1
{
	padding: 0;
	margin-top: 1em;
	margin-bottom: 0.4em;
	font-size: 2em;
	line-height: 1em;
}

h2
{
	padding: 0;
	margin-top: 0.3em;
	margin-bottom: 0.4em;
	font-size: 24px;
	line-height: 1.1em;
}

h3
{
	padding: 0;
	margin-top: 1em;
	margin-bottom: 0.3em;
	font-size: 1.3em;
	line-height: 1.1em;
	color: var(--sail-color-text-black);
  font-weight: 300;
}

h4
{
	padding: 0;
	margin-top: 1em;
	margin-bottom: 0.3em;
	font-size: 1.1em;
	line-height: 1.1em;
}

h5
{
	padding: 0;
	margin-top: 0.75em;
	margin-bottom: 0.3em;
	font-size: 1em;
	line-height: 1.1em;
	text-decoration: underline;
}

h6
{
	padding: 0;
	margin-top: 0.5em;
	margin-bottom: 0.3em;
	font-size: 1em;
	line-height: 1.1em;
	font-style: italic;
}

.small { font-size: 80%; }

/*
-------------------------------------------------------------------
Layout table
*/

table.layoutTable
{
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	table-layout: auto !important;
}

table.layoutTable td
{
	padding: 0 !important;
	border: none !important;
	vertical-align: top !important;
	background: none !important;
	width: auto;
}

/*
-------------------------------------------------------------------
Links
*/
a
{
	color: #555555;
}

a:active,a:link,a:visited
{
	text-decoration: underline;
}

a:hover
{
	/* color: #000; */
	text-decoration: none;
}

a.disabled:active,a.disabled:link,a.disabled:visited,a.disabled:hover
{
	color: #AAA;
	text-decoration: none;
}

a.plain:link,a.plain:visited,a.plain:active,a.plain:hover { text-decoration: none; }

/*
-------------------------------------------------------------------
Header
*/

#Header
{
	background-image: url(../images/header_background.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	background-color: #111;
	padding-left: 8px;
	padding-right: 8px;
}

#Header h1 { display: -moz-inline-box; }

#Header h1
{
	margin: 0;
	padding: 0;
	margin-top: 10px;
	margin-right: 8px;
	display: inline;
	float: left;
}

#Header p
{
	text-align: right;
	margin: 0;
	padding: 0;
	height: 20px;
}

#Header p span { display: -moz-inline-box; }

#Header p span
{
	display:-moz-inline-stack;
	display: inline-block;
	color: #fff;
	height: 20px;
	padding-top: 0.2em;
}

#Header p a { display: -moz-inline-box; }

#Header p a
{
	display:-moz-inline-stack;
	display: inline-block;
	overflow: hidden;
	background-image: url(../images/logout_button.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 44px;
	height: 20px;
	vertical-align: top;
	margin-left: 1em;
	text-decoration: none;
}
#Header p a.login
{
	background-image: url(../images/login_button_top.png);
}

#Header p a:hover
{
	background-position: 0 -100px;
	text-decoration: none;
}

#Header p a span
{
	display: inline !important;
	visibility: hidden;
}

/*
Navigation
*/

#Header ul
{
	list-style: none;
	margin: 0;
	margin-top: 8px;
	padding: 0;
	display: inline;
}

#Header li
{
	list-style: none;
	margin: 0;
	margin-left: 0.2em;
	padding: 0;
	border-top: 1px solid #444;
	border-right: 1px solid #222;
	border-left: 1px solid #444;
	display: inline;
	float: left;
	background-color: #f3f3f3;
	background-image: url(../images/tab.png);
	background-position: left 0;
	position: relative;
	top: 3px;
}

#Header li span
{
	padding: 6px 1em 0.3em 0.8em;
	margin-left: 0.2em;
	background: #fff;
	display: block;
	float: left;
	background-image: url(../images/tab.png);
	background-position: right 0;
	cursor: pointer;
}

#Header li.Active
{
	top: 0;
	background-image: url(../images/tab_active.png);
}

#Header li.Active span
{
	padding-top: 9px;
	background-image: url(../images/tab_active.png);
}

#Header li a
{
	display: block;
	font-size: 1.2em;
	color: #666;
	text-decoration: none;
}

#Header li.Active a span,
#Header li a:hover span
{
	color: #000;
	cursor: pointer;
}

#Header #Navigation-Main { float: left; }
#Header #Navigation-Config { float: right; }

/*
-------------------------------------------------------------------
Utility Bar
*/

#Utility-Bar
{
	background-color: #f3f3f3;
	background-image: url(../images/header_caption_background.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 14px;
	padding-bottom: 3px;
}

#Utility-Bar .Help-Button,
#Utility-Bar .Caption { color: #888; }
#Utility-Bar .Help-Button { display: inline; }
#Utility-Bar .Caption a { margin-left: 1em; }

#Utility-Bar .Help-Button a
{
	float: right;
	text-align: right;
	padding-right: 26px;
	height: 25px;
	background-image: url(../images/help_button.png);
	background-repeat: no-repeat;
	background-position: right 0;
	position: relative;
	top: -4px;
	color: #666;
}

#Utility-Bar .Help-Button a:hover { background-position: right -100px; text-decoration: underline; }

#Utility-Bar .Help-Button span
{
	float: left;
	padding-top: 5px;
	padding-left: 8px;
	color: #666;
}

#Utility-Bar .Help-ButtonSVG,
#Utility-Bar .CaptionSVG { color: #888; }
#Utility-Bar .Help-ButtonSVG { display: inline; }
#Utility-Bar .CaptionSVG a { margin-left: 1em; }

#Utility-Bar .Help-ButtonSVG a
{
	float: right;
	text-align: right;
	padding-right: 26px;
	height: 25px;
	position: relative;
	color: #666;
	text-decoration: none;
}

#Utility-Bar .Help-ButtonSVG span
{
	float: right;
	padding-left: 8px;
	color: #666;
}
#Utility-Bar .Help-ButtonSVG a:hover { background-position: right -100px; text-decoration: underline; }

#Utility-Bar .Search-Button,
#Utility-Bar .Caption { color: #888; }
#Utility-Bar .Search-Button { display: inline; }

#Utility-Bar .Search-Button a
{
	float: right;
	text-align: right;
	padding-right: 26px;
	height: 25px;
	background-image: url(../images/search_button.png);
	background-repeat: no-repeat;
	background-position: right 0;
	position: relative;
	top: -4px;
	color: #666;
}

#Utility-Bar .Search-Button a:hover { background-position: right -100px; }

#Utility-Bar .Search-Button span
{
	float: left;
	padding-top: 5px;
	padding-left: 8px;
	color: #666;
}

#Utility-Bar .Description
{
	max-width: 60em;
	border: 1px solid #ededed;
	background: #f3f3f3;
	padding: 0.5em;
	/*onload state (see ../scripts/setup.js)*/
	display: none;
}

#Utility-Bar .Description *
{
	color: #888;
	font-size: 95%;
}

#Utility-Bar .Hidden
#Utility-Bar .Caption { color: white;}
#Utility-Bar .Hidden { display: inline; }
#Utility-Bar .Hidden a
{
	text-decoration: none;
	color: white;
}

#Utility-Bar .Throbber,
#Utility-Bar .Caption { color: white;}
#Utility-Bar .Throbber { display: inline; }
#Utility-Bar .Caption a { margin-left: 24px; }

#Utility-Bar .Throbber a
{
	float: left;
	text-align: left;
	text-decoration: none;
	outline: none;
	padding-left: 38px;
	padding-top: 10px;
	height: 38px;
	background-image: url(../images/throbber.gif);
	background-repeat: no-repeat;
	background-position: left 0;
	position: relative;
	top: 4px;
	color: white;
}

#Utility-Bar .Notice-Green,
#Utility-Bar .Caption { color: #888;}
#Utility-Bar .Notice-Green { display: inline; }
#Utility-Bar .Caption a { margin-left: 24px; }

#Utility-Bar .Notice-Green a
{
	float: left;
	text-align: left;
	text-decoration: none;
	outline: none;
	padding-left: 22px;
	padding-top: 0px;
	height: 18px;
	background-image: url(../images/green-button_16x16.png);
	background-repeat: no-repeat;
	background-position: left 0;
	position: relative;
	top: 4px;
	color: #666;
}

#Utility-Bar .Notice-Green a:hover
{
	color: black;
	text-decoration: underline;
}

#Utility-Bar .Notice-Yellow,
#Utility-Bar .Caption { color: #888;}
#Utility-Bar .Notice-Yellow { display: inline; }
#Utility-Bar .Caption a { margin-left: 24px; }

#Utility-Bar .Notice-Yellow a
{
	float: left;
	text-align: left;
	text-decoration: none;
	outline: none;
	padding-left: 22px;
	padding-top: 0px;
	height: 18px;
	background-image: url(../images/yellow-button_16x16.png);
	background-repeat: no-repeat;
	background-position: left 0;
	position: relative;
	top: 4px;
	color: #666;
}

#Utility-Bar .Notice-Yellow a:hover
{
	color: black;
	text-decoration: underline;
}


#Utility-Bar .Notice-Red,
#Utility-Bar .Caption { color: #888;}
#Utility-Bar .Notice-Red { display: inline; }
#Utility-Bar .Caption a { margin-left: 24px; margin-top: 4px;}

#Utility-Bar .Notice-Red a
{
	float: left;
	text-align: left;
	text-decoration: none;
	outline: none;
	padding-left: 22px;
	padding-top: 0px;
	height: 18px;
	background-image: url(../images/red-button_16x16.png);
	background-repeat: no-repeat;
	background-position: left 0;
	position: relative;
	top: 4px;
	color: #666;
}

#Utility-Bar .Notice-Red a:hover
{
	color: black;
	text-decoration: underline;
}

#Utility-Bar .Phone-Logged-Out,
#Utility-Bar .Caption { color: red;}
#Utility-Bar .Phone-Logged-Out { display: inline; }
#Utility-Bar .Caption a { margin-left: 24px; }

#Utility-Bar .Phone-Logged-Out a
{
	float: left;
	text-align: left;
	text-decoration: none;
	outline: none;
	padding-left: 54px;
	padding-top: 10px;
	height: 38px;
	background-image: url(../images/phone-button-red_48x48.png);
	background-repeat: no-repeat;
	background-position: left 0;
	position: relative;
	top: 4px;
	color: #666;
}

#Utility-Bar .Phone-Logged-Out a:hover
{
	color: black;
	text-decoration: underline;
}

#Utility-Bar .Phone-Logged-Out span
{
	float: left;
	padding-top: 5px;
	padding-left: 8px;
	color: #666;
}

#Utility-Bar .Phone-Logged-In,
#Utility-Bar .Caption { color: green; }
#Utility-Bar .Phone-Logged-In { display: inline; }
#Utility-Bar .Caption a { margin-left: 1em; }

#Utility-Bar .Phone-Logged-In a
{
	float: left;
	text-align: left;
	text-decoration: none;
	outline: none;
	padding-left: 54px;
	padding-top: 10px;
	height: 38px;
	background-image: url(../images/phone-button-green_48x48.png);
	background-repeat: no-repeat;
	background-position: left 0;
	position: relative;
	top: 4px;
	color: #666;
}

#Utility-Bar .Phone-Logged-In a:hover
{
	color: black;
	text-decoration: underline;
}

#Utility-Bar .Phone-Logged-In span
{
	float: left;
	padding-top: 5px;
	padding-left: 8px;
	color: #666;
}

#Utility-Bar .Phone-Logged-Break,
#Utility-Bar .Caption { color: green; }
#Utility-Bar .Phone-Logged-Break { display: inline; }
#Utility-Bar .Caption a { margin-left: 1em; }

#Utility-Bar .Phone-Logged-Break a
{
	float: left;
	text-align: left;
	text-decoration: none;
	outline: none;
	padding-left: 54px;
	padding-top: 10px;
	height: 38px;
	background-image: url(../images/phone-button-yellow_48x48.png);
	background-repeat: no-repeat;
	background-position: left 0;
	position: relative;
	top: 4px;
	color: #666;
}

#Utility-Bar .Phone-Logged-Break a:hover
{
	color: black;
	text-decoration: underline;
}

#Utility-Bar .Phone-Logged-Break span
{
	float: left;
	padding-top: 5px;
	padding-left: 8px;
	color: #666;
}

#Utility-Bar .Search-Button,
#Utility-Bar .Caption { color: #888; }
#Utility-Bar .Search-Button { display: inline; }

/*

#Utility-Bar .Search-Button,
#Utility-Bar .Caption { color: #888; }
#Utility-Bar .Search-Button { display: inline; }

/*
-------------------------------------------------------------------
Back Button
*/

.Back-Button
{
	display: inline;
	float: left;
	position: relative;
	top: -0.4em;
	left: -5px;
}

.Back-Button a
{
	display: block;
	width: 32px;
	height: 32px;
	background-position: 0 0;
	background-image: url(../images/back_button.png);
	background-repeat: no-repeat;
}

.Back-Button a:hover { background-position: 0 -100px; }
.Back-Button a span { display: none; }

/*
-------------------------------------------------------------------
Sidebar
*/

#Sidebar
{
	width: 150px;
	min-height: 400px;
	background-image: url(../images/sidebar_top.png);
	background-repeat: no-repeat;
	background-position: right top;
	padding-top: 1em;
	float: left;
}

#Sidebar #Navigation-Sub
{
	list-style: none;
	margin: 0 0 1em 0;
	padding: 0;
}

#Sidebar #Navigation-Sub li
{
	list-style: none;
	padding: 0;
	margin: 0;
}

#Sidebar #Navigation-Sub li a
{
	display: block;
	color: #777;
	font-size: 1em;
	margin-right: 2px;
	text-decoration: none;
}

#Sidebar #Navigation-Sub li a:hover,
#Sidebar #Navigation-Sub li.Active a
{
	background-image: url(../images/sidebar_menu_highlight.png);
	color: #fff;
	text-decoration: none;
}

#Sidebar #Navigation-Sub li span
{
	display: block;
	padding: 0.5em 0.5em 0.4em 0.5em;
}

/*
-------------------------------------------------------------------
Content
*/

#Content { }

#Content #Main
{
	background-image: url(../images/content_top.png);
	background-repeat: repeat-x;
	background-position: 0 0;
	padding-top: 1.4em;
	padding-left: 16px;
	padding-right: 12px;
	padding-bottom: 20px;
}

body.With-Sidebar #Content #Main { padding-left: 160px !important; }
body.With-Back #Content #Main { padding-right: 36px !important; }
#Content .Main-With-Panel { padding-right: 260px; }
#Content .Main-With-Back { padding-left: 36px; }

/*
-------------------------------------------------------------------
Header Blocks
*/

.Header-Block { margin-top: 0.5em; margin-bottom: 1.4em; }

.Header-Block .Title
{
	display: inline;
	margin: 0;
	padding: 0 1em 0 0;
}

.Header-Block .Title .Action { color: #00A33D; }

.Header-Block .Action-Buttons
{
	display: inline;
	margin: 0;
	padding: 0;
	color: #bbb;
	position: relative;
	top: -0.1em;
	white-space: nowrap;
	line-height: 1.8em;
}

.Header-Block .Action-Buttons span { padding-right: 1em; }
.Header-Block .Action-Buttons a span { padding-right: 0; }

.Header-Block .Action-Buttons a
{
	color: #222;
	text-decoration: none;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 22px;
	background-repeat: no-repeat;
}

.Header-Block .Action-Buttons a:hover
{
	color: #000;
	text-decoration: underline;
	background-position: 0 -100px;
}

.Header-Block .Action-ButtonsSVG
{
	display: inline;
	margin: 0;
	padding: 0;
	color: #bbb;
	position: relative;
	top: 0;
	white-space: nowrap;
	line-height: 1.8em;
}

.Header-Block .Action-ButtonsSVG i { padding-right: 0; float: left;}
.Header-Block .Action-ButtonsSVG span { padding-right: 1em; float: left;}
.Header-Block .Action-ButtonsSVG a span { padding-right: 0; }

.Header-Block .Action-ButtonsSVG a
{
	color: #222;
	text-decoration: none;
	padding-top: 0em;
	padding-bottom: 2em;
	padding-left: 0px;
}

.Header-Block .Action-ButtonsSVG a:hover
{
	color: #000;
	text-decoration: underline;
	background-position: 0 -100px;
}

.Header-Block .Action-Buttons .Add      { background-image: url(../images/action_button_add_sml.png); }
.Header-Block .Action-Buttons .Delete   { background-image: url(../images/action_button_delete_sml.png); }
.Header-Block .Action-Buttons .Info     { background-image: url(../images/action_button_info_sml.png); }
.Header-Block .Action-Buttons .Help     { background-image: url(../images/action_button_help_sml.png); }
.Header-Block .Action-Buttons .OK       { background-image: url(../images/action_button_ok_sml.png); }
.Header-Block .Action-Buttons .Cancel   { background-image: url(../images/action_button_cancel_sml.png); }
.Header-Block .Action-Buttons .Refresh  { background-image: url(../images/action_button_refresh_sml.png); }
.Header-Block .Action-Buttons .Up       { background-image: url(../images/action_button_up_sml.png); }
.Header-Block .Action-Buttons .Down     { background-image: url(../images/action_button_down_sml.png); }
.Header-Block .Action-Buttons .Left     { background-image: url(../images/action_button_left_sml.png); }
.Header-Block .Action-Buttons .Right    { background-image: url(../images/action_button_right_sml.png); }
.Header-Block .Action-Buttons .Back     { background-image: url(../images/action_button_back_sml.png); }
.Header-Block .Action-Buttons .Green    { background-image: url(../images/nav_plain_green.png); }
.Header-Block .Action-Buttons .Red      { background-image: url(../images/nav_plain_red.png); }
.Header-Block .Action-Buttons .Yellow   { background-image: url(../images/nav_plain_yellow.png); }
.Header-Block .Action-Buttons .Blue     { background-image: url(../images/nav_plain_blue.png); }
.Header-Block .Action-Buttons .Expand   { background-image: url(../images/list-add.png); }
.Header-Block .Action-Buttons .Shrink   { background-image: url(../images/list-remove.png); }
.Header-Block .Action-Buttons .GShield  { background-image: url(../images/action_button_gshield_sml.png);   }
.Header-Block .Action-Buttons .RShield  { background-image: url(../images/action_button_rshield_sml.png);   }

.AWIcon {
	display: inline;
	margin: 0;
	padding: 0;
	color: #bbb;
	position: relative;
	top: -0.1em;
	white-space: nowrap;
	line-height: 1.8em;
}
.AWIcon span {
	color: #222;
	text-decoration: none;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	padding-left: 22px;
	background-repeat: no-repeat;
}
.AWIcon span:hover {
	color: #000;
	text-decoration: underline;
	background-position: 0 -100px;
}

.AWIcon .Add        { background-image: url(../images/action_button_add_sml.png);       }
.AWIcon .Delete     { background-image: url(../images/action_button_delete_sml.png);    }
.AWIcon .Info       { background-image: url(../images/action_button_info_sml.png);      }
.AWIcon .Help       { background-image: url(../images/action_button_help_sml.png);      }
.AWIcon .OK         { background-image: url(../images/action_button_ok_sml.png);        }
.AWIcon .Cancel     { background-image: url(../images/action_button_cancel_sml.png);    }
.AWIcon .Refresh    { background-image: url(../images/action_button_refresh_sml.png);   }
.AWIcon .Up         { background-image: url(../images/action_button_up_sml.png);        }
.AWIcon .Down       { background-image: url(../images/action_button_down_sml.png);      }
.AWIcon .Left       { background-image: url(../images/action_button_left_sml.png);      }
.AWIcon .Right      { background-image: url(../images/action_button_right_sml.png);     }
.AWIcon .Back       { background-image: url(../images/action_button_back_sml.png);      }
.AWIcon .Green      { background-image: url(../images/nav_plain_green.png);             }
.AWIcon .Red        { background-image: url(../images/nav_plain_red.png);               }
.AWIcon .Yellow     { background-image: url(../images/nav_plain_yellow.png);            }
.AWIcon .Blue       { background-image: url(../images/nav_plain_blue.png);              }
.AWIcon .Expand     { background-image: url(../images/list-add.png);                    }
.AWIcon .Shrink     { background-image: url(../images/list-remove.png);                 }
.AWIcon .GShield    { background-image: url(../images/action_button_gshield_sml.png);   }
.AWIcon .RShield    { background-image: url(../images/action_button_rshield_sml.png);   }

.GreenText  { color: #00A33D; }
.RedText    { color: #e11010; }
.YellowText { color: #e1e110; }
.BlueText   { color: #1010e1; }
.GreyText   { color: #a1a1a1; }
.OrangeText { color: #ffa500; }
.BlackText  { color: #000000; }

.Header-Block .Caption
{
	padding-top: 0.2em;
	color: #888;
}

.Header-Block .Caption a
{
	color: #888;
	text-decoration: underline;
	margin-left: 1em;
}

.Header-Block .Caption a:hover
{
	color: #111;
	text-decoration: none;
}

.Header-Block .Description
{
	max-width: 48em;
	margin-bottom: 2em;
	border: 1px solid #ededed;
	background: #f3f3f3;
	padding: 0.5em;
	/*onload state (see ../scripts/setup.js)*/
	display: none;
}

.Header-Block .Description *
{
	color: #888;
	font-size: 95%;
}

/*
-------------------------------------------------------------------
(Icon) Panel
*/

.Icon-Panel
{
	float: right;
	background-image: url(../images/icon_panel_background.png);
	background-repeat: no-repeat;
	min-height: 280px;
	width: 251px;
	padding-top: 10px;
	margin-top: 10px;
}

.Text-Block
{
	float: left;
	background-image: url(../images/text_panel_background.png);
	background-size: contain;
	-moz-border-radius: 20px; 
	border-radius: 20px; 
	min-height: 150px;
	padding: 10px;
	margin: 10px;
}

.Text-Block img {
	border-radius: 10px;
}

.Item
{
/*
	margin-left: 5px;
	padding-left: 49px;
	padding-right: 5px;

	margin-left: 10px;
	padding-left: 40px;
	padding-right: 10px;
*/
	margin-left: 5px;;
	padding-left: 40px;
	padding-right: 5px;
	background-repeat: no-repeat;
	background-position: 0 5px;
	min-height: 40px;
/*
	margin-bottom: 2em;
	padding-top: 0.6em;
	height: 50px;
*/
}

.Item h2,h3,h4 { margin-top: 0; }

.Item p
{
	margin-bottom: 0.6em;
	font-size: 0.9em;
}

.Item a { color: #000; }

.ItemVector
{
	margin-left: 5px;;
	padding-left: 0px;
	padding-right: 5px;
	background-repeat: no-repeat;
	background-position: 0 5px;
	min-height: 40px;
}

.ItemVector h2,h3,h4 { margin-top: 0; padding-left: 40px;}

.ItemVector p
{
	margin-bottom: 0.6em;
	font-size: 0.9em;
	padding-left: 40px;
}

.ItemVector span
{
	float:left;
	padding-left: 0px;
	margin-right: 0px;
	cursor: pointer;
}

.ItemVector a { color: #000; }

/*
-------------------------------------------------------------------
Icon Buttons

Used in lists - renders as a clickable icon.

Useage: <a ... class="Action-Button"><span>Select</span></a>

Set up custom class (.Action-Button_*) to control icon image.
*/

a.Action-Button span { display: none; }
a.Action-Button { display: -moz-inline-box; }

a.Action-Button
{
	text-decoration: none !important;
	background-repeat: no-repeat;
	background-position: 0 0;
	display:-moz-inline-stack;
	display: inline-block;
	vertical-align: text-bottom;
	width: 25px;
	height: 28px;
	cursor: pointer;
}
input.Action-Button
{
	text-decoration: none !important;
	background-repeat: no-repeat;
	background-position: 0 0;
	display:-moz-inline-stack;
	display: inline-block;
	vertical-align: text-bottom;
	width: 25px;
	height: 28px;
	cursor: pointer;
}

a.Action-Button:hover { background-position: 0 -100px; }

a.Action-Button-Date
{
	background-image: url(../images/action_button_calendar.png);
	display:-moz-inline-stack;
	display: inline-block;
	height: 18px;
}

/*
-------------------------------------------------------------------
Messages
*/

.Msg
{
	position: relative;
	top: 1em;
	width: 506px;
	background-image: url(../images/msg.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-top: 1.1em;
	padding-left: 50px;
	min-height: 32px;
	margin-bottom: 1.6em;
}

.Msg-Success { background-image: url(../images/msg_success.png); }
.Msg-Alert { background-image: url(../images/msg_alert.png); }
.Msg-Warning { background-image: url(../images/msg_alert.png); }
.Msg-Fail { background-image: url(../images/msg_fail.png); }
.Msg-Forbidden { background-image: url(../images/msg_forbidden.png); }

.Msg h2,
.Msg h3,
.Msg h4,
.Msg p,
.Msg ul
{
	margin-left: 8px;
	margin-right: 8px;
}

div.Msg > *:first-child
{
	margin-top: 0;
	padding-top: 0;
}

/*
-------------------------------------------------------------------
Glassplate (dialogue prompt)
*/

#Glassplate
{
	position: absolute;
	left: 0;
	width: 100%;
	background-color: #000;
	cursor: default;
	z-index: 20000;
}

#Dialogue-Box
{
	width: 360px;
	min-height: 50px;
	position: absolute;
	left: 50%;
	margin-left: -200px;
	top: -1000px;
	border: 2px solid #888;
	background: #fefefe;
	z-index: 20001;
	background-position: -4px 0;
	background-repeat: no-repeat;
	padding: 1.4em 26px 14px 64px;
}

#Dialogue-Box.Default { background-image: url(../images/dbox.png); }
#Dialogue-Box.Success { background-image: url(../images/dbox_success.png); }
#Dialogue-Box.Alert { background-image: url(../images/dbox_alert.png); }
#Dialogue-Box.Fail { background-image: url(../images/dbox_fail.png); }
#Dialogue-Box.Forbidden { background-image: url(../images/dbox_forbidden.png); }
#Dialogue-Box-Msg { margin: 0; }

#Dialogue-Box-Btns
{
	text-align: right;
	margin-top: 2em;
	margin-bottom: 0;
	padding: 0;
}

#Dialogue-Box-Btns input
{
	margin-left: 1em;
	cursor: pointer;
}

/*
-------------------------------------------------------------------
Footer
*/

#Footer
{
	clear: both;
	border-top: 1px solid #999;
	padding: 1em 0.4em 2em 0.4em;
	padding-bottom: 2em;
	margin: 2em 8px 0 8px;
}

body.With-Sidebar #Footer { margin-left: 155px !important; }

#Footer *
{
	color: #8C8C8C !important;
	font-size: 0.95em;
}

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

#Footer li
{
	list-style: none;
	margin: 0;
	padding: 0 1.5em 0 1.5em;
	float: left;
	border-left: 1px solid #8C8C8C;
	line-height: 0.8em;
}

#Footer li a
{
	position: relative;
	top: -0.1em;
}

#Footer li:first-child
{
	padding-left: 0;
	border-left: 0;
}

#Footer #Footer-Logo
{
	float: right;
	width: 84px;
	height: 42px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	/*
	background-image: url(../images/footer_whirlwind_logo.png);
	*/
	background-repeat: no-repeat;
}

#Footer #Footer-Logo a
{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

#Footer #Footer-Logo em { visibility: hidden; }
#Footer a { text-decoration: underline; }

#Footer a:hover
{
	text-decoration: none;
	color: #666 !important;
}

#Footer #License
{
	clear: left;
	padding-top: 0.8em;
}

#Footer #License span { padding-right: 2em; }

/*
-------------------------------------------------------------------
Sub Navigation (horizontal tabs)
*/

body.With-SubNav #Utility-Bar { padding-bottom: 0; }
body.With-SubNav #Content #Main { background-image: url(../images/content_top_subnav.png); }
#SubNav { display: inline; }

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

#SubNav li
{
	list-style: none;
	margin: 0;
	margin-left: 0.3em;
	margin-bottom: 0;
	padding: 0;
	border-top: 1px solid #ccc;
	border-right: 1px solid #9c9c9c;
	border-left: 1px solid #ccc;
	display: inline;
	float: left;
	background-color: #f3f3f3;
	background-image: url(../images/tab.png);
	background-position: left 0;
	position: relative;
	top: 7px;
}

#SubNav li span
{
	padding: 4px 1em 2px 0.9em;
	margin-left: 0.2em;
	background: #fff;
	display: block;
	float: left;
	background-image: url(../images/tab.png);
	background-position: right 0;
	cursor: pointer;
}

#SubNav li.Active
{
	top: 5px;
	background-image: url(../images/tab_active_subnav.png);
}

#SubNav li.Active span
{
	padding-top: 6px;
	padding-bottom: 3px;
	background-image: url(../images/tab_active_subnav.png);
}

#SubNav li a
{
	display: block;
	font-size: 1.1em;
	color: #777;
	text-decoration: none;
}

#SubNav li.Active a span,
#SubNav li a:hover span
{
	color: #000;
	cursor: pointer;
}

/*
-------------------------------------------------------------------
Icon Panels
*/

.Panel
{
	float: left;
	padding-left: 16px;
	width: 261px;
	background-image: url(../images/panel.png);
	background-repeat: no-repeat;
	min-height: 85px;
	padding-top: 20px;
	/*display: inline-block !important;*/
}

.Panel-Pad
{
	background-repeat: no-repeat;
	background-position: 0 0;
	padding-left: 56px;
	margin-right: 15px;
	float:left;
	cursor: pointer;
}

.Panel-Pad:hover { background-position: 0 -100px; }
.Panel-Pad:hover a { text-decoration: none; }
.Panel p { color: #aaa; }


.Vector
{
	float: left;
	padding-left: 16px;
	width: 261px;
	background-image: url(../images/panel.png);
	background-repeat: no-repeat;
	min-height: 85px;
	padding-top: 20px;
}

.Vector-Pad 
{
	background-repeat: no-repeat;
	background-position: 0 0;
	width: 261px;
	padding-left: 0px;
	margin-right: 15px;
	float:left;
	cursor: pointer;
}

.Vector-Pad span
{
	float:left;
	padding-left: 0px;
	margin-right: 8px;
	cursor: pointer;
}

.Vector-Pad:hover { background-position: 0 -100px; }
.Vector-Pad:hover a { text-decoration: none; }
.Vector p { color: #aaa; }

.material-icons.md-18 { font-size: 18px; color: #5179ce; }
.material-icons.md-24 { font-size: 24px; color: #5179ce; }
.material-icons.md-36 { font-size: 36px; color: #5179ce; }
.material-icons.md-48 { font-size: 48px; color: #5179ce; }

/*
-------------------------------------------------------------------
File Browser
*/

.File-Browser a
{
	display:-moz-inline-stack;
	display: inline-block;
	margin: 0;
	padding-left: 24px;
	padding-right: 1em;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	white-space: nowrap;
	line-height: 1.8em;
	background-image: url(../images/browse_file.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	color: #000;
	text-decoration: none;
	/*
	width: 10em;
	*/
}

.File-Browser a:hover
{
	color: #404040;
	background-position: 0 -100px; 
	background-color: #fcf9da;
	
}

.File-Browser a.UpDir		{ background-image: url(../images/browse_updir.png); }
.File-Browser a.Audio		{ background-image: url(../images/browse_audio.png); }
.File-Browser a.Video		{ background-image: url(../images/browse_video.png); }
.File-Browser a.Folder		{ background-image: url(../images/browse_folder.png); }
.File-Browser a.Code		{ background-image: url(../images/browse_code.png); }
.File-Browser a.Chart		{ background-image: url(../images/browse_chart.png); }
.File-Browser a.Config		{ background-image: url(../images/browse_config.png); }
.File-Browser a.Image		{ background-image: url(../images/browse_image.png); }
.File-Browser a.Compress	{ background-image: url(../images/browse_compress.png); }
.File-Browser a.File		{ background-image: url(../images/browse_file.png); }