/*
METRO COLORS
blue: #009ad7;
blue:hover: #005683;
darkblue: #005683;
darkblue:hover: #009ad7;
red: #c22424;
red:hover: #891f19;
darkred: #a81f1f;
darkred:hover: #c22439;
violet: #943285;
violet:hover: #81045f;
darkviolet: #770b5a;
darkviolet:hover: #93305f;
yellow: #ffe050;
yellow:hover: #dcbe2c;
darkyellow: #fdcb1f;
darkyellow:hover: #daac12;
orange: #ff791f;
orange:hover: #c9631e;
darkorange: #f16d25;
darkorange:hover: #c65a1e;
green: #68af27;
green:hover: #2c8c1f;
darkgreen: #2c8c1f;
darkgreen:hover: #68af27;
-----------------------
gray: #a5aaae;
gray:hover: #626971;
light_gray: #cfceca;
light_gray:hover: #6d6f70;
*/



/**********************************************/
/******************* DEFAULT ******************/
/**********************************************/

body {
	/*
	background: #000 url(../images/background.jpg);
	background-size: 100% 1000px;
	*/
	background: #000 url(../images/background.png);
	
	/*font-family: 'Titillium Web', sans-serif;*/
	font-family: 'Calibri', sans-serif;
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	color: #fff;
	text-align: center;
}
input, textarea, a{
	-webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.container{
	display: block;
	position: relative;
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	-webkit-border-radius: 10px 10px; /* Safari, Chrome */
	-khtml-border-radius: 10px 10px;    /* Konqueror */
	-moz-border-radius: 10px 10px; /* Firefox */
  border-radius: 10px 10px;
}
a {
	color: #009ad7;
	text-decoration: underline;
}
a:visited {
	color: #009ad7;
}
a:hover {
	text-decoration: none;
	color: #81045f;
}
p {margin: 0px 0px 15px 0px;}
img {border: none;}
small {font-size: 80%;}
div.clear{
	display: block;
	position: relative;
	float: left;
	width: 100%;
	margin-top: 20px;
}
img.img_link{
	padding: 5px;
	border: 2px solid #009ad7;
	-webkit-border-radius: 8px 8px; /* Safari, Chrome */
	-khtml-border-radius: 8px 8px;    /* Konqueror */
	-moz-border-radius: 8px 8px; /* Firefox */
  border-radius: 8px 8px;
}

/**********************************************/
/*********** AUTHORIZATION WINDOW *************/
/**********************************************/

#authorization_window{
	display: block;
	position: relative;
	border: 2px solid #757675;
	-webkit-border-radius: 8px 8px; /* Safari, Chrome */
	-khtml-border-radius: 8px 8px;    /* Konqueror */
	-moz-border-radius: 8px 8px; /* Firefox */
  border-radius: 8px 8px;
	background: url(images/bg_splash_solid.png);
	margin: auto;
	margin-top: 100px;
	padding: 50px;
	width: 250px;
}
#authorization_window .authorization_title{
	font-size: 1.7em;
	font-weight: 700;
	font-style: italic;
	color: #6b6c6b;
}
#authorization_window .authorization_field{
	font-size: 1.5em;
	font-weight: 700;
	color: #6b6c6b;
}
#authorization_window .authorization_field a{
	font-size: 1.0em;
	font-weight: 700;
	color: #fff;
	text-decoration: underline;
}
#authorization_window .authorization_field a:hover{
	color: #666;
	text-decoration: underline;
}
#authorization_description{
	display: block;
	position: relative;
	border: 2px solid #757675;
	-webkit-border-radius: 8px 8px; /* Safari, Chrome */
	-khtml-border-radius: 8px 8px;    /* Konqueror */
	-moz-border-radius: 8px 8px; /* Firefox */
  border-radius: 8px 8px;
	background: url(images/bg_splash_solid.png);
	margin: auto;
	margin-top: 100px;
	padding: 50px;
	width: 250px;
}
/**********************************************/
/******************** HEADER ******************/
/**********************************************/

#header{
	height: 100px;
	width: 100%;
	background: url(../images/header-clear.png) repeat-x;
}
#header #app_identification{
	height: 85px;
	display:block;
	position: relative;
	float: left;
	padding: 15px 0 0 50px;
}
#header #app_identification .app_title{
	display:block;
	position: relative;
	float: left;
	height: 85px;
	background: url(images/cuse-crm-white-medium.png) no-repeat;
	font-weight: 400;
	font-size: 3.5em;
	padding-left: 255px;
}
#header #user_identification{
	display:block;
	position: relative;
	float: right;
	font-size: 1.1em;
}
#header #user_identification .avatar{
	display:block;
	position: relative;
	float: right;
	width: 50px;
	height: 50px;
	padding: 2px;
	border: 1px solid #fff;
	margin: 5px 35px 0px 10px;
}
#header #user_identification .description{
	display:block;
	position: relative;
	float: right;
	height: 50px;
	color: #fff;
	margin: 5px 0px 0px 0px;
	text-align: right;
	font-size: 1.0em;
	font-weight: 700;
}
#header #user_identification .description p{
	margin-bottom: 0px;
}
#header #user_identification .description ul, #header #user_identification .description ul li{
	list-style: none;
	display: inline-block;
	font-size: 1.0em;
}
#header #user_identification .description ul li{
	margin-right: 3px;
}
#header #user_identification .description a{
	display: block;
	position: relative;
	float: left;
	border: 1px solid #fff;
	-webkit-border-radius: 5px 5px; /* Safari, Chrome */
	-khtml-border-radius: 5px 5px;    /* Konqueror */
	-moz-border-radius: 5px 5px; /* Firefox */
  border-radius: 5px 5px;
	-webkit-transition: all 0s ease 0s;
  -moz-transition: all 0s ease 0s;
  -o-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
	text-decoration: none;
	padding: 1px 10px 1px 10px;
	color: #fff;
	text-decoration: none;
	font-weight: 400;
}
#header #user_identification .description a:hover{
	background: #fff;
	color: #009ad7;
	font-weight: 400;
	text-decoration: none;
}
#header #user_identification .description .name{
	font-size: 1.9em;
	font-weight: 500;
}

#pageheader{
	height: 20px;
	width: 100%;
	background: url(../images/header-clear.png) repeat-x;
}
#pageheader #app_identification{
	height: 35px;
	display:block;
	position: relative;
	float: left;
	padding: 0px 0 0 50px;
	margin-top: 5px;
}
#pageheader #app_identification .app_title{
	display:block;
	position: relative;
	float: left;
	height: 45px;
	background: url(images/cuse-crm-white-small.png) no-repeat;
	background-position: left center;
	font-weight: 400;
	font-style: italic;
	font-size: 2.5em;
	padding-left: 155px;
	margin-top: 5px;
}
#pageheader #user_identification{
	display:block;
	position: relative;
	float: right;
	font-size: 1.2em;
}
#pageheader #user_identification .avatar{
	display:block;
	position: relative;
	float: right;
	width: 45px;
	height: 45px;
	padding: 2px;
	margin: 5px 35px 0px 5px;
}
#pageheader #user_identification .description{
	display:block;
	position: relative;
	float: right;
	height: 25px;
	color: #fff;
	margin: 2px 5px 0px 10px;
	text-align: right;
	font-size: 1.0em;
	font-weight: 700;
}
#pageheader #user_identification .description p{
	margin-bottom: 0px;
}
#pageheader #user_identification .links{
	display:block;
	position: relative;
	float: right;
}
#pageheader #user_identification .description ul, #pageheader #user_identification .description ul li{
	list-style: none;
	display: inline-block;
}
#pageheader #user_identification .description ul li{
	margin-right: 3px;
}
#pageheader #user_identification .description a{
	display: block;
	position: relative;
	float: left;
	border: 1px solid #fff;
	-webkit-border-radius: 5px 5px; /* Safari, Chrome */
	-khtml-border-radius: 5px 5px;    /* Konqueror */
	-moz-border-radius: 5px 5px; /* Firefox */
  border-radius: 5px 5px;
	-webkit-transition: all 0s ease 0s;
  -moz-transition: all 0s ease 0s;
  -o-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
	text-decoration: none;
	padding: 1px 10px 1px 10px;
	color: #fff;
	text-decoration: none;
	font-weight: 400;
}
#pageheader #user_identification .description a:hover{
	background: #fff;
	color: #009ad7;
	font-weight: 400;
	text-decoration: none;
}
#pageheader #user_identification .description .name{
	font-size: 1.6em;
	font-weight: 500;
	vertical-align: top;
	padding-top: 0px;
}

/**********************************************/
/******************** SIDEBAR *****************/
/**********************************************/

#sidebar_switcher{
	display: block;
	position: fixed;
	top: 0px;
	float: left;
	width: 25px;
  min-height: 100% !important;
	height: 100%;
	background: url(images/bg_splash.png);
	background-position: center center;
	z-index: 98;
}
#sidebar_switcher a{
	display: block;
	width: 25px;
	height: 100%;
	background: url(images/expand_left_white_small.png) no-repeat;
	background-position: center center;
	-webkit-transition: all 0s ease 0s;
  -moz-transition: all 0s ease 0s;
  -o-transition: all 0s ease 0s;
  transition: all 0s ease 0s;
}
#sidebar_switcher:hover, #sidebar_switcher:hover a{
	width: 70px;
	background-position: 90% center;
}
#sidebar_cover{
	display: none;
	position: fixed;
	top: 0px;
	width: 100%;
  height: 100%;
	z-index: 90;
}
#sidebar_cover a{
	display: block;
	position: fixed;
	top: 0px;
	width: 100%;
  height: 100%;
}
#sidebar_panel{
	display: none;
	position: fixed;
	top: 0px;
	float: left;
	width: 200px;
  min-height: 100% !important;
  height: 100%;
	font-size: 1.4em;
	/* background: #fff url(images/collapse_left_black_small.png) no-repeat; */
	background: #fff; 
	/*background:  url(images/sidebar_bg.png);*/
	z-index: 599;
}
#sidebar_panel .sidebar_menu{
	display: block;
	position: relative;
	float: left;
	width: 275px;
}
#sidebar_panel a.panel_hide{
	display: block;
	position: relative;
	float: left;
	width: 20px;
	height: 100%;
	background: url(images/collapse_left_black_small.png) right center no-repeat;
	background-position: center center;
}
#sidebar_panel .sidebar_menu .title{
	font-weight: 400;
	font-size: 1.2em;
	color: #943285;
}
#sidebar_panel .sidebar_menu a{
	display: block;
  font-weight: 400;
  color: #000;
  cursor: pointer;
	text-align: left;
	text-decoration: none;
	padding-left: 5px;
}
#sidebar_panel .sidebar_menu a.active{
  background: #2c8c1f;
}
#sidebar_panel .sidebar_menu a:hover, #sidebar_panel .sidebar_menu a.active:hover{
  color: #fff;
	background: #009ad7;
}
#sidebar_panel .sidebar_menu ul{
	width: 265px;
  margin: 0px;
	padding: 0px;
	padding-left: 5px;
  list-style: none;
}
#sidebar_panel .sidebar_menu ul li{
  display: list-item;
  position: relative;
	margin-left: 0px;
}
#sidebar_panel .sidebar_menu ul ul{
	width: 245px;
	margin: 5px 0px 5px 0px;
	padding-left: 20px;
  list-style: none;
}
#sidebar_panel .sidebar_menu ul li ul li{
  display: list-item;
  position: relative;
	margin-left: 10px;
}


#right_sidebar_switcher{
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 20px;
  min-height: 100% !important;
  height: 100%;
	background: url(images/bg_splash.png);
	background-position: center center;
	z-index: 98;
}
#right_sidebar_switcher a{
	display: block;
	width: 20px;
	height: 100%;
	background: url(images/expand_left_white_small.png) no-repeat;
	background-position: center center;
}
#right_sidebar_cover{
	display: none;
	position: fixed;
	top: 0px;
	width: 100%;
  height: 100%;
	z-index: 90;
}
#right_sidebar_cover a{
	display: block;
	position: fixed;
	top: 0px;
	width: 100%;
  height: 100%;
}
#right_sidebar_panel{
	display: none;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 300px;
  min-height: 100% !important;
  height: 100%;
	/* background: #fff url(images/collapse_left_black_small.png) no-repeat; */
	/* background: #fff; */
	background:  url(images/sidebar_bg.png);
	z-index: 99;
}
#right_sidebar_panel .right_sidebar_menu{
	display: block;
	position: relative;
	float: left;
	width: 275px;
}
#right_sidebar_panel a.panel_hide{
	display: block;
	position: relative;
	float: left;
	width: 20px;
	height: 100%;
	background: url(images/collapse_left_black_small.png) right center no-repeat;
	background-position: center center;
}
#right_sidebar_panel .right_sidebar_menu .title{
	font-weight: 400;
	font-size: 1.2em;
	color: #943285;
}
#right_sidebar_panel .right_sidebar_menu a{
	display: block;
  font-weight: 400;
  color: #000;
  cursor: pointer;
	text-align: left;
	text-decoration: none;
	padding-left: 5px;
}
#right_sidebar_panel .right_sidebar_menu a.active{
  background: #2c8c1f;
}
#right_sidebar_panel .right_sidebar_menu a:hover, #right_sidebar_panel .right_sidebar_menu a.active:hover {
  color: #fff;
	background: #009ad7;
}
#right_sidebar_panel .right_sidebar_menu ul {
	width: 265px;
  margin: 0px;
	padding: 0px;
	padding-left: 5px;
  list-style: none;
}
#right_sidebar_panel .right_sidebar_menu ul li{
  display: list-item;
  position: relative;
	margin-left: 0px;
}
#right_sidebar_panel .right_sidebar_menu ul ul{
	width: 245px;
	margin: 5px 0px 5px 0px;
	padding-left: 20px;
  list-style: none;
}
#right_sidebar_panel .right_sidebar_menu ul li ul li{
  display: list-item;
  position: relative;
	margin-left: 10px;
}

/**********************************************/
/*************** NOTIFICATIONS ****************/
/**********************************************/

.left_informations, .informations{
	display: block;
	position: absolute;
	top: 25px;
	z-index: 100;
	font-size: 1.3em;
	font-weight: 500;
}
.left_informations{
	left: 20px;
}
.informations{
	right: 5px;
}
.left_informations .box, .informations .box{
	display: none;
	position: relative;
	float: right;
	clear: both;
	margin: 10px;
	-webkit-border-radius: 5px 5px; /* Safari, Chrome */
	-khtml-border-radius: 5px 5px;    /* Konqueror */
	-moz-border-radius: 5px 5px; /* Firefox */
  border-radius: 5px 5px;
	color: #fff;
	border: 1px solid #fff;
}
.left_informations .confirmation , .informations .confirmation { background: #2c8c1f; }
.left_informations .notification , .informations .notification { background: #005683; }
.left_informations .error , .informations .error { background: #a81f1f; }
.left_informations .warning , .informations .warning { background: #d53f26; }
.left_informations .box a.close_box, .informations .box a.close_box{
	display: block;
	position: absolute;
	top: 2px;
	right: 4px;
	background: url(images/cancel24.png) ;
	width: 24px;
	height: 24px;
}
.left_informations .box .info_content, .informations .box .info_content{
	display: block;
	position: relative;
	font-size: 1.0em;
	font-weight: 200;
	padding: 0px 15px 15px 15px;
	margin-top: 25px;
	background: none;
}
.left_informations .box a.link, .informations .box a.link{
	display: block;
	position: relative;
	float: right;
	color: #fff;
	font-weight: 200;
	padding: 2px 5px 2px 5px;
	border: 1px solid #fff;
	margin: 5px 0 5px 4px;
}
.left_informations .box a.link:hover, .informations .box a.link:hover{
	color: #000;
	background: #fff;
	border: 1px solid #000;
	font-weight: 400;
}


/**********************************************/
/******************** CONTENT *****************/
/**********************************************/

#main_content{
	display: block;
	position: relative;
	width: auto;
	margin: 10px 0px 0px 25px;
	padding: 20px 15px 5px 0px;
	background: #fff;
	font-size: 1.2em;
}
#main_content .content{
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	/*margin: 20px 25px 5px 25px;*/
	margin: 20px 0px 5px 0px;
	padding: 0px 10px 0px 5px;
	color: #000;
	overflow-x: hidden;
	overflow-y: auto;
}
#main_content .page_header{
	height: 45px;
	width: 100%;
}
#main_content .page_header .page_title{
	display: block;
	position: relative;
	float: left;
	font-size: 1.2em;
	margin: 5px 0px 0px 25px;
	color: #000;
	font-weight: 500;
}
#main_content .page_header .breadcrumps{
	display:block;
	position: relative;
	float: left;
	font-size: 1.2em;
	font-weight: 700;
	/*font-style: italic;*/
	margin: 5px 0px 0px 25px;
	color: #770b5a;
}
#main_content .page_header .breadcrumps a{
	text-decoration: none;
	color: #009ad7;
	font-weight: bold;
}
#main_content .page_header .breadcrumps a:hover{
	text-decoration: none;
	color: #cd0a0a;
	font-weight: 700;
}
#main_content .page_header .breadcrumps a.active{
	text-decoration: none;
	color: #cd0a0a;
	font-weight: 700;
}
#main_content .page_header .breadcrumps a.active:hover{
	text-decoration: none;
	color: #cd0a0a;
	font-weight: 700;
}
#main_content .page_header .site_navigation{
	display:block;
	position: relative;
	float: right;
	margin: 5px 5px 0px 0px;
}
#main_content .page_header .site_navigation .separator{
	display:block;
	position: relative;
	float: left;
	border-left: 2px solid #000;
	height: 45px;
	width: 1px;
	margin-left: 5px;
}

#main_content .page_header .site_navigation a{
	display:block;
	position: relative;
	float: left;
	border: 0px;
	width: 45px;
	margin-left: 5px;
	background: url(icons/appbar.base.png) no-repeat;
}
#main_content .page_header .site_navigation a.sublink{
	display:block;
	position: relative;
	float: left;
	border: 0px;
	width: 25px;
	height: 25px;
	margin-left: 5px;
	background: url(icons/appbar.base.small.png);
}
#main_content .page_header .site_navigation a:hover{
		background: url(icons/appbar.base.select.new.png) no-repeat;
}
#main_content .page_header .site_navigation a.sublink:hover{
		background: url(icons/appbar.base.select.small.png) no-repeat;
}
#main_content .page_header .site_navigation a span.label{
	display:block;
	position: relative;
	float: left;
	border: 0px;
	width: 45px;
	padding: 0px;
	text-align: center;
	font-size: 0.8em;
	overflow-x: hidden;
	color: #000;
}
#main_content .page_header .site_navigation a:hover span.label{
	color: #cc0000;
}
#main_content .page_header .site_navigation .avatar{
	display:block;
	position: relative;
	float: right;
	width: 25px;
	height: 25px;
	padding: 2px;
	border: 0px solid #fff;
	margin: 5px 35px 0px 5px;
}
#main_content .page_header .site_navigation .description{
	display:block;
	position: relative;
	float: right;
	height: 25px;
	color: #fff;
	margin: 5px 0px 0px 0px;
	text-align: right;
	font-size: 0.8em;
}
#main_content .page_header .site_navigation .links{
	display:block;
	position: relative;
	float: right;
}
#main_content .page_header .site_navigation .description a{
	color: #fff;
	text-decoration: none;
	font-weight: 300;
}
#main_content .page_header .site_navigation .description a:hover{
	font-weight: 400;
	text-decoration: underline;
}
#main_content .page_header .site_navigation .description .name{
	font-size: 1.6em;
	font-weight: 200;
}

#footer{
	margin-top: 25px;
	font-size: 1.3em;
}
#footer a{
	color: #fff;
	text-decoration: underline;
}
#footer a:hover{
	font-weight: 700;
	text-decoration: underline;
}

label {
	display: inline-block;
	width: 5em;
	
}
.ui-tooltip {
	border: 3px solid #009AD7;
	/*padding: 10px 20px;*/
	background: #ccccff;
	-webkit-box-shadow: 1px 0px 2px 0 #009AD7;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 0px 2px 0 #009AD7;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 0px 2px 0 #009AD7;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.rounded_box{
	-webkit-border-radius: 5px 5px; /* Safari, Chrome */
	-khtml-border-radius: 5px 5px;    /* Konqueror */
	-moz-border-radius: 5px 5px; /* Firefox */
  border-radius: 5px 5px;
	padding: 5px;
}
.rounded{
	-webkit-border-radius: 5px 5px; /* Safari, Chrome */
	-khtml-border-radius: 5px 5px;    /* Konqueror */
	-moz-border-radius: 5px 5px; /* Firefox */
  border-radius: 5px 5px;
}
.text_centered{
	text-align: center;
}
a {
	color: #009ad7;
	text-decoration: underline;
}
a:visited {
	color: #009ad7;
}
a:hover {
	text-decoration: none;
	color: #81045f;
}
.noeffect,.no_effect:visited,.noeffect:hover{
	text-decoration: none;
	color: none;
}
.pointer{
	cursor: pointer;
}
.small-font{
	font-size: 0.9em;
}

/**********************************************/
/******************** COLORS ******************/
/**********************************************/
.blue_base{background: #009ad7;}
.darkblue_base{background: #005683;}
.darkblue2_base{background: #009ad7;}

.lightred_base{background: #D47777;}
.red_base{background: #c22424;}
.red2_base{background: #c22439;}
.darkred_base{background: #891f19;}
.darkred2_base{background: #a81f1f;}

.violet_base{background: #943285;}
.violet2_base{background: #93305f;}
.darkviolet_base{background: #81045f;}
.darkviolet2_base{background: #770b5a;}

.yellow_base{background: #ffe050;}
.yellow2_base{background: #daac12;}
.darkyellow_base{background: #dcbe2c;}
.darkyellow2_base{background: #fdcb1f;}

.orange_base{background: #ff791f;}
.orange2:hover_base{background: #c65a1e;}
.darkorange_base{background: #c9631e;}
.darkorange_base{background: #f16d25;}

.lightgreen_base{background: #b8e093;}
.green_base{background: #68af27;}
.darkgreen_base{background: #2c8c1f;}

.white,.white:hover{color: #fff;}
.black{color: #000;}

.lightgray_base{background: #cfceca;border: 1px solid #a5aaae;}
.gray_base{background: #a5aaae;}
.darkgray_base{background: #626971;}
.darkgray2_base{background: #6d6f70;}

.blue{color: #009ad7;}
.darkblue{color: #005683;}
.darkblue2{color: #009ad7;}

.red{color: #c22424;}
.red2{color: #c22439;}
.darkred{color: #891f19;}
.darkred2{color: #a81f1f;}

.violet{color: #943285;}
.violet2{color: #93305f;}
.darkviolet{color: #81045f;}
.darkviolet2{color: #770b5a;}

.yellow{color: #ffe050;}
.yellow2{color: #daac12;}
.darkyellow{color: #dcbe2c;}
.darkyellow2{color: #fdcb1f;}

.orange{color: #ff791f;}
.orange2:hover{color: #c65a1e;}
.darkorange{color: #c9631e;}
.darkorange{color: #f16d25;}

.green{color: #68af27;}
.darkgreen{color: #2c8c1f;}

.lightgray{color: #cfceca;}
.gray{color: #a5aaae;}
.darkgray{color: #626971;}
.darkgray2{color: #6d6f70;}