﻿/*
metro ui
author: melbourne
*/

/* used in MetroUI CSS 2.0*/
.master-header 
{
    display: block;
    margin: 30px 50px 35px 80px;
    padding-bottom: 20px;
    position: relative;
}
.master-header .myaccount
{
    position: absolute;
    top: 10px;
    right: 0;
}
.master-header .myaccount .user-id 
{
    margin-top: -1px;
    margin-right: -2px;
}
.master-header .myaccount .user-id .user-id-name .first-name { font-size: 20pt; color: #fff; text-align: right; margin-top: -2px; }
.master-header .myaccount .user-id .user-id-name .last-name {  font-size: 12pt; color: #fff; text-align: left; height: 35px; margin-top: -4px; }

.login-page .master-header .myaccount { display: none; }

.master-body { margin-left: 80px; }
#legacy-app 
{
    width:860px;
    overflow:hidden;
    border:none;
    margin:-10px 10px 30px 10px;
    background:transparent;
}
#legacy-app-preloader
{
    width:150px;
    height:150px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -75px;
    margin-top: -75px;
    z-index:900;
    background:#444 url(/images/preloader-w8-cycle-white.gif) no-repeat center;
}


.metro .special 
{
    position:absolute!important;
    left: 0;
}


/* APP TRAY CSS */
#app-tray {
	background: transparent url('/images/85black.png') repeat 0 0;
	position: fixed;
	bottom: 0;
	width: 100%;
	display: none;
	z-index: 1;
}

/* hack for IE for floating the app tray in the bottom of the page */
* html #app-tray  {
  position: absolute;
  width: 100%;/*IE5.5*/
  bottom: 0;
  left: 0;
  overflow: visible;
  top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}

#app-tray .app-icon {
	/*padding: 8px;*/
	display: inline-table;
	position: relative;
	float: left;
}

*html #app-tray .app-icon {
	float: left;
}

#app-tray .bg-gray { background: transparent; } 
#app-tray .bg-gray-hover { background: transparent url(/images/50black.png) repeat 0 0; } 

.metro-icon 
{
    height: 40px;    
    float: left !important;
}

.app-icon .icon,
.metro-icon a .icon {
	margin: 0px; /* 6px;*/
	background-image: url('/images/icons.png');
	background-repeat: no-repeat;
}

.icon img {
	border: 0;
}

/* FOR LARGE ICONS */
.large .icon {
	width: 41px;
	height: 41px;
}

/* 
FOR SMALL ICONS 
NOT CIRCLE AROUND THE ICON
*/
.small .icon,
.small-hover .icon {
	display: inline-table;
	margin: 0;
	position: relative;
}

.icon img {
	border: 0;
	width: 40px;
}

.icon span {
	background-color: red;
	white-space: nowrap;
	line-height: 50px;
	position: absolute;
	top: 0;
	left: 0;
}

/* normal label */
.app-icon .label-display {
	color: #fff;
	max-width: 50px;
	line-height: 26px;
	position: absolute;
	top: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 0px;
	display: inline-table;
}

/* hover label */
.app-icon-hover .label-display { color: #26c9ff; }



/* METRO ICON SET */
.metro-icon {
	/*margin: 0 4px 0 0;*/
	margin: 0;
	padding: 0;
	float: left;
	cursor: pointer;
	white-space: nowrap; /* prevent icons from dropping to the next line*/
}

*html .metro-icon {
	margin: 0;
}

.metro-icon li {
	list-style: none;
	position: relative;
	/*display: inline-table;*/
	float: left;
	width: auto;
	margin: 0; /*-4px 0 0;*/
	padding: 0;
}

*html .metro-icon li {
	display: inline;
	cursor: pointer;
}

.metro-icon li a {
	color: #fff;
	overflow: hidden;
	text-decoration: none;
	padding: 0;
	display: inline-block;
}

*html .metro-icon li a {
	display: inline-block;
	cursor: pointer;
}

.metro-icon li a:hover {
	color: #26c9ff;
	background: transparent url(/images/50black.png) repeat 0 0;
}

.metro-icon a div {
	display: inline-table;
	float: left;
}

.metro-icon a .icon {
	width: 42px;
	height: 40px;
}

.metro-icon a .label-display {
	/*font: normal 12px Arial, Tahoma, Verdana;*/
	font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 13px;
	line-height: 40px;
	white-space: nowrap;
	display: compact;
	position: relative;
	padding: 2px 15px 0 0;
}

/* CUSTOM METRO BUTTON BACKGROUNDS */
.metro-hallow-button                                    { background: #fff; border: 1px solid #ccc; }

.metro-icon li a.btn-green,
.metro-popup-container .pane-green,
.metro-popup-box .pane-green,
.metro-background-green,
.metro-button-green										{ background: #058e05; border: 1px solid #058e05; }

.metro-icon li a.btn-orange,
.metro-popup-container .pane-orange,
.metro-popup-box .pane-orange,
.metro-background-orange,
.metro-button-orange									{ background: #c74e2c; border: 1px solid #c74e2c; }

.metro-icon li a.btn-violet,
.metro-popup-container .pane-violet,
.metro-popup-box .pane-violet,
.metro-background-violet,
.metro-button-violet		 							{ background: #5638a8; border: 1px solid #5638a8; }

.metro-icon li a.btn-blue,
.metro-popup-container .pane-blue,
.metro-popup-box .pane-blue,
.metro-background-blue,
.metro-button-blue		 								{ background: #2d7edb; border: 1px solid #2d7edb; }

.metro-icon li a.btn-cyan,
.metro-popup-container .pane-cyan,
.metro-popup-box .pane-cyan,
.metro-background-cyan,
.metro-button-cyan		  								{ background: #058e9e; border: 1px solid #058e9e; }

.metro-icon li a.btn-red,
.metro-popup-container .pane-red,
.metro-popup-box .pane-red,
.metro-background-red,
.metro-button-red		 								{ background: #a11b3c; border: 1px solid #a11b3c; }

.metro-icon li a.btn-gray,
.metro-popup-container .pane-gray,
.metro-popup-box .pane-gray,
.metro-background-gray,
.metro-button-gray		 								{ background: #444444; border: 1px solid #444444; }

.metro-icon li a.btn-yellow,
.metro-popup-container .pane-yellow,
.metro-popup-box .pane-yellow,
.metro-background-yellow,
.metro-button-yellow									{ background: #e69c1b; border: 1px solid #e69c1b; }

.metro-icon li a.btn-green:hover,
.metro-icon li a.btn-orange:hover,
.metro-icon li a.btn-violet:hover,
/*.metro-icon li a.btn-blue:hover,*/
.metro-icon li a.btn-cyan:hover,
.metro-icon li a.btn-red:hover,
.metro-icon li a.btn-gray:hover,
.metro-icon li a.btn-yellow:hover 						{ background: transparent url(/images/50black.png) repeat 0 0; border: 1px solid transparent;}
.metro-icon li a.btn-blue:hover
{
    color:#fff;
}

/* CUSTOM METRO BUTTON INVERTED BACKGROUND */

.metro-icon li a.btn-green-inverted:hover 				{ background: #008000; }
.metro-icon li a.btn-orange-inverted:hover 				{ background: #c74e2c; }
.metro-icon li a.btn-violet-inverted:hover 				{ background: #5638a8; }
.metro-icon li a.btn-blue-inverted:hover 				{ background: #2d7edb; }
.metro-icon li a.btn-cyan-inverted:hover 				{ background: #058e9e; }
.metro-icon li a.btn-red-inverted:hover					{ background: #a11b3c; }
.metro-icon li a.btn-gray-inverted:hover 				{ background: #444444; }
.metro-icon li a.btn-yellow-inverted:hover				{ background: #e69c1b; }

.metro-icon li a.btn-green-inverted:hover .label-display		{ color: #fff; }
.metro-icon li a.btn-orange-inverted:hover .label-display		{ color: #fff; }
.metro-icon li a.btn-violet-inverted:hover .label-display		{ color: #fff; }
.metro-icon li a.btn-blue-inverted:hover .label-display			{ color: #fff; }
.metro-icon li a.btn-cyan-inverted:hover .label-display			{ color: #fff; }
.metro-icon li a.btn-red-inverted:hover .label-display 			{ background: #a11b3c; }
.metro-icon li a.btn-gray-inverted:hover .label-display			{ background: #444444; }
.metro-icon li a.btn-yellow-inverted:hover .label-display		{ background: #e69c1b; }

.metro-icon li a.btn-green-inverted,
.metro-icon li a.btn-orange-inverted,
.metro-icon li a.btn-violet-inverted,
.metro-icon li a.btn-blue-inverted,
.metro-icon li a.btn-cyan-inverted,
.metro-icon li a.btn-red-inverted,
.metro-icon li a.btn-gray-inverted,
.metro-icon li a.btn-yellow-inverted					{ background: transparent; border: 1px solid transparent;}



/* 
CUSTOM CSS FOR LARGE ICONS 
DISCONTINUED...
*/
.large .arrow-up { 			background-position: -115px -194px; }
.large-hover .arrow-up { 	background-position: -115px -53px; }
.large .search { 			background-position: -115px -194px; }
.large-hover .search { 		background-position: -115px -53px; }




/* 
CUSTOM CSS FOR SMALL ICONS 
*/

/* ARROW DOWN BUTTON */
.small .arrow-down 							{ 		background-position: -64px -269px; }

.small-hover .arrow-down,
.small .arrow-down:hover 					{ 	background-position: -64px -130px; }

/* ARROW UP BUTTON */
.small .arrow-up 							{ 			background-position: -123px -269px; }

.small-hover .arrow-up,
.small .arrow-up:hover 						{ 	background-position: -123px -129px; }

/* SEARCH BUTTON */
.small .search 								{ 			background-position: -2501px -269px; }

.small-hover .search,
.small .search:hover 						{ 		background-position: -2501px -130px; }

/* PHONEBOOK BUTTON */
.small .phonebook,
.metro-icon a .phonebook,
.metro-icon a.btn-green-inverted:hover .phonebook,
.metro-icon a.btn-orange-inverted:hover .phonebook,
.metro-icon a.btn-violet-inverted:hover .phonebook,
.metro-icon a.btn-blue-inverted:hover .phonebook { 		background-position: -3155px -262px; }

.small-hover .phonebook,
.small .phonebook:hover,
.metro-icon a:hover .phonebook { 	background-position: -3155px -120px; }

.mini-popup h3 img.phonebook { background-position: -3163px -388px;}


/* EMAIL BUTTON */
.small .email,
.metro-icon a .email,
.metro-icon a.btn-green-inverted:hover .email,
.metro-icon a.btn-orange-inverted:hover .email,
.metro-icon a.btn-violet-inverted:hover .email,
.metro-icon a.btn-blue-inverted:hover .email { 			background-position: -2231px -261px; }

.small-hover .email,
.small .email:hover,
.metro-icon a:hover .email  { 		background-position: -2232px -121px; }

.mini-popup h3 img.email { background-position: -2239px -387px;}



/* STAR BUTTON */
.small .star,
.metro-icon a .star,
.metro-icon a.btn-green-inverted:hover .star,
.metro-icon a.btn-orange-inverted:hover .star,
.metro-icon a.btn-violet-inverted:hover .star,
.metro-icon a.btn-blue-inverted:hover .star { 			background-position: -2625px -261px; }

.small-hover .star,
.small .star:hover,
.metro-icon a:hover .star  { 		background-position: -2625px -122px; }

.mini-popup h3 img.star { background-position: -2633px -387px;}

/* REQUEST EMAIL BUTTON */
.small .emailaddress,
.metro-icon a .emailaddress,
.metro-icon a.btn-green-inverted:hover .emailaddress,
.metro-icon a.btn-orange-inverted:hover .emailaddress,
.metro-icon a.btn-violet-inverted:hover .emailaddress,
.metro-icon a.btn-blue-inverted:hover .emailaddress { 		background-position: -3230px -260px; }

.small-hover .emailaddress,
.small .emailaddress:hover,
.metro-icon a:hover .emailaddress { 	background-position: -3230px -119px; }

.mini-popup h3 img.emailaddress { background-position: -3238px -388px;}


/* HELP BUTTON */
.small .help,
.metro-icon a .help,
.metro-icon a.btn-green-inverted:hover .help,
.metro-icon a.btn-orange-inverted:hover .help,
.metro-icon a.btn-violet-inverted:hover .help,
.metro-icon a.btn-blue-inverted:hover .help { 			background-position: -3292px -260px; }

.small-hover .help,
.small .help:hover,
.metro-icon a:hover .help  { 		background-position: -3292px -121px; }

.mini-popup h3 img.help { background-position: -2633px -387px;}

/* CONTACT BUTTON */
.small .contact,
.metro-icon a .contact,
.metro-icon a.btn-green-inverted:hover .contact,
.metro-icon a.btn-orange-inverted:hover .contact,
.metro-icon a.btn-violet-inverted:hover .contact,
.metro-icon a.btn-blue-inverted:hover .contact { 			background-position: -3365px -260px; }

.small-hover .contact,
.small .contact:hover,
.metro-icon a:hover .contact  { 		background-position: -3365px -122px; }

.mini-popup h3 img.contact { background-position: -3375px -385px;}

/* NOTEBOOK BUTTON */
.small .notebook,
.metro-icon a .notebook,
.metro-icon a.btn-green-inverted:hover .notebook,
.metro-icon a.btn-orange-inverted:hover .notebook,
.metro-icon a.btn-violet-inverted:hover .notebook,
.metro-icon a.btn-blue-inverted:hover .notebook { 			background-position: -2955px -262px; }

.small-hover .notebook,
.small .notebook:hover,
.metro-icon a:hover .notebook  { 		background-position: -2954px -121px; }

.mini-popup h3 img.notebook { background-position: -2963px -386px;}

/* DOWNLOAD BUTTON */
.small .download,
.metro-icon a .download,
.metro-icon a.btn-green-inverted:hover .download,
.metro-icon a.btn-orange-inverted:hover .download,
.metro-icon a.btn-violet-inverted:hover .download,
.metro-icon a.btn-blue-inverted:hover .download { 			background-position: -3425px -261px; }

.small-hover .download,
.small .star:hover,
.metro-icon a:hover .download  { 		background-position: -3425px -122px; }

.mini-popup h3 img.download { background-position: -3435px -385px;}


/* 
METRO BUTTONS 
*/

.metro-button-container {
	display: inline-block;
	width: auto;
	position: relative;
	margin-bottom: 10px;
}

* html .metro-button-container {
	display: block;
	width: auto;
	height:100%;
}

.metro-button-green,
.metro-button-orange,
.metro-button-violet,
.metro-button-blue,
.metro-button-cyan,
.metro-button-red,
.metro-button-gray,
.metro-button-yellow { color: #fff; }

.metro-hallow-button { color: #444; }


.metro-button-s,
a.metro-button-s,
button.metro-button-s {
	padding: 6px 15px;
	white-space: nowrap;
	margin: 0;
	display: inline-table;
	cursor: pointer;	
}

input.metro-button-s,
button.metro-button-s 
{
    border: 0;
    display: inline;
}

@-moz-document url-prefix() {
	.metro-button-container {
	}
	
	.metro-button-s,
	a.metro-button-s {
		float: left;
		margin: 0 4px 4px 0; 
	}
	
	.metro-button-s {
		padding: 6px 15px 5px 15px;
	}
	
	a.metro-button-s {
		padding: 6px 15px 6px 15px;
	}	
}

*html .metro-button-s,
*html a.metro-button-s,
*html input.metro-button-s {
	float: left;
	margin: 0 4px 0 0;
	white-space: nowrap;
	cursor: pointer;
	display: inline-table;
}

* html .metro-button-s {
	padding: 4px 5px 0;
	float: left;
	line-height 10px;
}

*html input.metro-button-s {
	margin-left: -20px;
}

* html a.metro-button-s {
	padding: 6px 15px;
}

a.metro-button-s {
	text-decoration: none;
}


/* LARGE BUTTON */
.metro-button-l,
a.metro-button-l {
	padding: 10px 15px;
	white-space: nowrap;
	margin: 0;
	display: inline-table;
	cursor: pointer;
	font-size: 11pt;
}

input.metro-button-l,
button.metro-button-l 
{
    border: 0;
}

@-moz-document url-prefix() {
	.metro-button-container {
	}
	
	.metro-button-l,
	a.metro-button-l {
		float: left;
		margin: 0 4px 4px 0; 
	}
	
	.metro-button-l {
		padding: 6px 15px 5px 15px;
	}
	
	a.metro-button-l {
		padding: 6px 15px 6px 15px;
	}	
}

*html .metro-button-l,
*html a.metro-button-l {
	float: left;
	margin: 0 4px 0 0;
	white-space: nowrap;
	cursor: pointer;
	display: inline-table;
}

* html .metro-button-l {
	padding: 4px 5px;
	float: left;
}

*html input.metro-button-l {
	margin-left: -20px;
}

* html a.metro-button-l {
	padding: 6px 15px;
}

a.metro-button-l {
	text-decoration: none;
}

/* added class on mouse hover */
.metro-button-hover {
	background-image: url(/assets/images/10black.png);
	background-repeat: repeat;
}

/*
POP UP UI
*/

.metro-pop-up {
	background: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 4;
	display: none;
}

/* hack for IE for floating the app tray in the bottom of the page */
* html .metro-pop-up  {
	position: absolute;
	width: 100%;/*IE5.5*/
	bottom: 0;
	left: 0;
	overflow: visible;
	top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight - 43) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - 43));
}

.metro-pop-up .metro-popup-container {
	width: 100%;
	position: relative;
	height: 100%;
}

.metro-popup-container .pane {
	float: left;
	height: 100%;
}

.metro-popup-container .left-pane {
	float: left;
	width: 300px;
}

.metro-popup-container .center-pane {
	width: auto;
	float: left;
}



/* METRO MINI BOX */
.metro-mini-popup {
	background: red;
	position: fixed;
	bottom: 0;
	width: auto;
	margin-bottom: 43px;
	z-index: 5;
}

/* hack for IE for floating the app tray in the bottom of the page */
* html .metro-mini-popup  {
	position: absolute;
	width: auto;/*IE5.5*/
	bottom: 0;
	left: 0;
	overflow: visible;
	top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight - 43) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight - 43));
}

.metro-mini-popup .metro-mini-popup-container {
	position: relative;	
}
.metro-mini-popup-container .mini-popup {
	background: #ffffff; /*#f8f8f8;*/
	width: 250px;
	left: 0;
	bottom: 0;
	position: absolute;
	display: none;
	/*border-top: 1px solid #d1d1d1;
	border-left: 1px solid #d1d1d1;
	border-right: 1px solid #d1d1d1;*/
    -webkit-box-shadow: 0px -2px 12px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px -2px 12px rgba(50, 50, 50, 0.5);
    box-shadow: 0px -2px 12px rgba(50, 50, 50, 0.5);	
}
.mini-popup .mini-popup-container {
	height: 600px;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	/*font: normal 12px Arial, Tahoma, Verdana;	*/
	font-size: 12px;
}

.mini-popup .mini-popup-toolbar {
    display: block;
    border-top: 1px solid silver;
    margin 0;
}


/* METRO SEARCH FORM */

.metro-search-form {
	border: 1px solid gray;
	background: #fff;
	position: relative;
	font: normal 12px Arial, Tahoma, Verdana;
}

.metro-search-form form {
	margin: 0;
	padding: 0;
}

.metro-search-form .metro-form-textbox {
	border: 0;
	background: transparent;
	height: 30px;
	margin: 0 -4px 0 0;
	outline: none;
	padding: 0 7px;
	font: normal 12px Arial, Tahoma, Verdana;
}

*html .metro-search-form .metro-form-textbox {
	height: 30px;
	margin: 0;
}


.metro-search-form .metro-form-submit {
	background: transparent url(/images/icons.png) no-repeat -251px -330px;
	width: 30px;
	height: 30px;
	color: transparent;
	border: 0;
	position: relative;
	cursor: pointer; 
	position: absolute;
	right: 3px;
}

*html .metro-search-form .metro-form-submit {
	right: 25px;
}

*html .metro-search-form .metro-form-submit span {
	margin-left: -1000px;
}

/* METRO POP UP BOX */
.metro-popup-box {
	border: 0px solid gray;
	display: none;
	background-color: #fff;
	position: relative;
	font: normal 12px Arial, Tahoma, Verdana;
}

.metro-popup-box .metro-popup-close,
.metro-popup-container .metro-popup-close {
	position: absolute;
	right: 0;
	top: 0;
	margin-right: 10px;
	margin-top: 15px;
	background-image: url(/images/icons.png);
	background-repeat: no-repeat;
	background-position: -451px -333px;
	z-index: 10;
}

.x-close,
.mini-popup .metro-popup-close {
	position: absolute;
	right: 0;
	top: 0;
	margin-right: 10px;
	margin-top: 10px;
	background-image: url(/images/icons.png);
	background-repeat: no-repeat;
	background-position: -912px -333px;
	z-index: 7;
}

.mini-popup .metro-popup-close:hover {
	background-position: -782px -333px;
}

.mini-popup h3 {
	position: relative;
}

.mini-popup h3,
.mini-popup h3 span {
    font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 300;
}
.mini-popup h3 img.mini-popup-icon {
	height: 25px; 
	height: 25px;
	background-image: url(/images/icons.png);
	background-repeat: no-repeat;
	float: left;
	margin-right: 5px;
	margin-top: -5px;
	z-index: 6;
}

.metro-popup-box .metro-popup-close img,
.metro-popup-container .metro-popup-close img {
	border: 0;
}


.metro-popup-box .pane {
	float: left;
	height: 100%;
}

.metro-popup-box .left-pane {
	width: 300px;
}


/*.metro-popup-box .metro-popup-close:hover { background-position: -510px 333px; }*/

.metro-popup-box h3 {
	font: normal 12pt Arial, Tahoma, Verdana;
	color: #5a5a5a;
	margin: 20px 50px 20px 20px;
}

.metro-popup-container .pane h1,
.metro-popup-box .pane h1 { font: normal 20pt Arial, Tahoma, Verdana; margin: 20px;color: #5a5a5a; }

.metro-popup-container .pane h2,
.metro-popup-box .pane h2 { font: normal 15pt Arial, Tahoma, Verdana; margin: 25px 20px;color: #5a5a5a; }

.metro-popup-container .pane h3,
.metro-popup-box .pane h3 { font: normal 12pt Arial, Tahoma, Verdana; margin: 25px 20px; color: #5a5a5a; }

.mini-popup h3 { font: normal 12pt Arial, Tahoma, Verdana; margin: 15px 10px; color: #5a5a5a;}

.metro-popup-container .pane-green h1,
.metro-popup-container .pane-orange h1,
.metro-popup-box .pane-green h1 { color: #fff; }

.metro-popup-container .pane-green h2,
.metro-popup-container .pane-orange h2,
.metro-popup-box .pane-green h2 { color: #fff; }


/* tabbed panel */
.metro-tab {
	display: block;
}

.metro-tab ul.tab-title-container{
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 2;
}

.tab-title-container li {
	list-style: none;
	display: inline;
	display: inline-block;
}

.tab-title-container li a {
	text-decoration: none;
	color: #969ba1;
	padding: 9px;
	line-height: 35px;
}	

@-moz-document url-prefix() {
	.tab-title-container li a {
		padding: 9px;
	}	
}

*html .tab-title-container li a {
	padding: 9px;
}

.tab-title-container li a.tab-item-selected {
	color: #000;
	border-bottom: 3px solid #2d7edb;
}


.metro-tab .tab-content-container {
	border-top: 3px solid #e1e1e1;
	position: relative;
	z-index: 1;
}

.tab-content-container .tab-content {
	display: none;
	margin: 15px 0;
}


/*
METRO LISTING
*/
.metro-list {
	padding: 0;
	margin: 0;
}

.metro-list li {
	list-style: none;
	padding: 0;
	margin-left: -25px;
	display: block;
	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}

.metro-list li .item {
	display: block;
	white-space: nowrap;
	margin: 0 25px 0 25px;
	padding: 10px 0;
	position: relative;
	z-index: 2;
}

.metro-list li .item a  
{
    font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 300;    
    font-size: 12px;
    text-decoration: none;
    color: #000;
    display: block;
}

.metro-list li .item a img 
{
    border: 0;
}

.metro-list li .item .metro-list-icon 
{
    float: left;
    position: relative;
    margin-top: -5px;
    z-index: 3;
    margin-right: 15px;
}

.metro-list li.active {
	color: #fff;
}

.metro-list li.active .metro-color-green,
.metro-list li.active .metro-color-orange,
.metro-list li.active .metro-color-violet,
.metro-list li.active .metro-color-blue,
.metro-list li.active .metro-color-cyan,
.metro-list li.active .metro-color-red,
.metro-list li.active .metro-color-gray,
.metro-list li.active .metro-color-lightgray,
.metro-list li.active .metro-color-yellow,
.metro-accordion div.metro-background-green,
.metro-accordion div.metro-background-orange,
.metro-accordion div.metro-background-violet,
.metro-accordion div.metro-background-blue,
.metro-accordion div.metro-background-cyan,
.metro-accordion div.metro-background-red,
.metro-accordion div.metro-background-gray,
.metro-accordion div.metro-background-lightgray,
.metro-accordion div.metro-background-yellow { color: #fff; }


.active .metro-color-green,
.active .metro-color-orange,
.active .metro-color-violet,
.active .metro-color-blue,
.active .metro-color-cyan,
.active .metro-color-red,
.active .metro-color-gray,
.active .metro-color-lightgray,
.active .metro-color-yellow { color: #accffc; }

/* METRO ACCORDION */
.metro-accordion {
 display: block;
}

.metro-accordion .metro-accordion-heading {
	padding: 10px 25px;
	color: #444;
	font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 13px;
	cursor: pointer;
	border-top: 1px solid #e1e1e1;
	border-bottom: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}

.metro-accordion .metro-accordion-content {
	margin-bottom: 1px;
	font: normal 12px Arial, Tahoma, Verdana;
}

.metro-accordion .metro-accordion-content-padding 
{
	padding: 12px 25px;
}

/* METRO EMAIL RECIPIENTS CONTAINER */
.metro-mail-recipient-container {
	border: 1px solid #d1d1d1;
	position: relative;
	display: compact;
	background: #fff;
}

.metro-mail-recipient-container .metro-mail-recipient {
	margin: 3px;
	/*border: 1px solid #fff;*/
	background: #f6f6f6;
	padding: 3px 5px;
	line-height: 35px;
	font: normal 12px Arial, Tahoma, Verdana;
	white-space: nowrap;
	display: inline-block;
}

.metro-mail-recipient .icon {
	background-image: url(/assets/images/16x16-icon.png);
	background-repeat: no-repeat;
	width: 16px;
	height: 16px;
	float: left;
	display: compact;
}

.metro-mail-recipient .single-user {
	background-position: -44px -10px;
	margin-right: 3px;
}

.metro-mail-recipient .multi-user {
	background-position: -9px -10px;
	margin-right: 5px;
}
.metro-mail-recipient-container .hover {
    background: #e1e1e1;
}

.metro-mail-recipient .remove-recipient {
	height: 10px;
	width: 10px;
	margin-left: 5px;
	background-image: url(/images/icons.png);
	background-repeat: no-repeat;
	background-position: -458px -340px;
	cursor: pointer;
}

/* FORM TEXTBOXES */
.metro-textbox {
	border: 1px solid #d1d1d1;
	/*display: inline-table;
	padding: 0;*/

	margin: 0;	
	padding: 5px 5px;
	outline: none;
	/*height: 25px;*/
}

* html .metro-textbox {
    display: inline;
    border: 1px solid red;
}


/*.metro-textbox input {
	border: 1px solid red;
	background-color: #fff;
	margin: 0;	
	padding: 5px;
	outline: none;
}

* html .metro-textbox input {
	height: 25px;
}*/

.metro-textbox-onfocus {
	border-color: #666;
}

.metro-label 
{
    line-height:28px;
}

.inputbox 
{
    border: 1px solid #d1d1d1;
}

.metro-select {
	border: 1px solid #d1d1d1;
	margin: 0;	
	padding: 3px 5px;
	outline: none;
}

/* GENERAL CLASSES */
.metro-padder {	margin: 20px; }

.def-font-set { font: normal 12px Arial, Tahoma, Verdana; }
.font-set-default { font-size: 12px; }

/* FONT COLORS */
.metro-color-green 					{ color: #008000; }
.metro-color-orange 				{ color: #c74e2c; }
.metro-color-violet 				{ color: #5638a8; }
.metro-color-blue 					{ color: #2d7edb; }
.metro-color-cyan 					{ color: #058e9e; }
.metro-color-red					{ color: #a11b3c; }
.metro-color-gray					{ color: #929292; }
.metro-color-lightgray				{ color: #a5a5a5; }
.metro-color-yellow					{ color: #e69c1b; }
.metro-color-white                  { color: #ffffff; }

.custom-input-label                 { padding: 5px 0; display: inline-table;}

.main,
.main .main,
.main div.main,
.metro-padder.main {
    /* font: normal 12px Arial, Tahoma, Verdana; */
    font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 12px;
}
.clear {
    clear: both; 
}
.reset-margin-left {
    left: -50px; 
    padding-left: -50px;
}
.main hr.separator {
    color: #e1e1e1;
    background-color: #e1e1e1;
    height: 3px;
    border: 0;
}

.fixedHeight 
{
    overflow: hidden;
    overflow-y: auto;
}





/* login buttons */
.login-button-set 
{
    position: absolute;
    right: 35px;
    top: 35px;
    width: auto!important;
}
/* end - login buttons */

.iframe 
{
    overflow: scroll;
}

.validation-summary-errors { display: block; margin: .5em 0; }
.validation-summary-errors ul { margin: 0; padding: 0; list-style : none; }
.validation-summary-errors ul li { padding: .25em 0; color: Red; }