/*
		CSS Style for:	Navigation
						Menu Items
						Carousel
						
		Written by William Troup
*/


/* 	Navigation styles
	(These are the main layout styles that are to be used for the navigation system through the pages.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

._Navigation {
	margin: 							0px;
    color: 								#ffffff;
	font-family: 						"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 							13px;
	background-color: 					#dee6e9;
	line-height:						19px;
	overflow: 							hidden;
}

._Navigation a:link, ._Navigation a:visited {
    text-decoration: 					none;
}

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

.navTopBar {
    width:                              100%;
    height:                             70px !important;
    background-image: 					url(../../navigation/images/topbar/search.png);
    background-repeat: 					repeat-x !important;
}

.navTopBarBorder {
    width:                              100%;
    height:                             1px !important;
    background-image: 					url(../../navigation/images/topbar/border/search.png);
    background-repeat: 					repeat-x !important;
}

.navTopBar_HomeIconContainer {
    position:                           relative;
    top:                                9px;
    width: 								62px !important;
    height:								53px !important;
    z-index:							15000 !important;
    margin:								0 auto;
}

.navCursor_Pointer {
	cursor:								pointer;
}


/* Navicon alarms/alerts overlays */

.navNavicon_Alarms {
    background-image:			url(../../navigation/images/topbar/homeicons/alarmsicon.png);
    position:				absolute;
    top:				3px;
    right:				3px;
    width: 				23px;
    height:				23px;
    display:				block;
}

.navNavicon_Alerts {
    background-image:			url(../../navigation/images/topbar/homeicons/alertsicon.png);
    position:				absolute;
    top:				3px;
    right:				3px;
    width:				23px;
    height:				23px;
    display: 				block;
}

/* 	Navigator styles
	(These are the main layout styles that are to be used for the navigator.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

.navNavigationPane_Layer {
    width:								100% !important;
    height: 							100% !important;
    top: 								71px !important;
    display:							none;
}

.navNavigationPane_Background {
    cursor: 							default;
    position: 							fixed !important;
    left: 								0px !important;
    overflow: 							hidden !important;
    z-index:							15000 !important;
    width: 								100% !important;
    height: 							100% !important;
    display: 							none;
    background-color: 					#0a2749;

    filter:								alpha(opacity=60);
    -moz-opacity:						0.6;
    -khtml-opacity: 					0.6;
    opacity: 							0.6;
}

.navNavigationPane_Holder {
    position:							absolute !important;
    z-index:							20000 !important;
    width:                              100%;
    margin:								0 auto !important;
}

.navNavigationPane_HoverArea {
	position: 							relative;
	min-height:							200px; 
	min-width:							200px;
	margin:								0 auto;
	border:								1px solid #0a2749;
}

.navNavigationPane_HoverAreaTop {
	position: 							relative;
	height:								11px; 
	width:								inherit;
	margin:								-11px auto 0px auto;
}

.navNavigationPane {
    position:							relative !important;
    top:                                50px;
    margin:								0 auto !important;
    padding:                            1px !important;
    visibility:                         hidden;
}

.navPane_IconContainer, .navPane_IconConfigurableContainer {
    position:                           relative;
    float:								left !important;
    height: 							128px !important;
    width: 								128px !important;
    margin:								4px !important;
	cursor:								pointer;
}

.navPane_IconConfigurableContainer {
	background-repeat: 					no-repeat !important;
	background-image: 					url(../images/navigator/icons/configurable_button.png);
	overflow:							hidden;
}

.navPane_CenteredIcon {
	position: 							absolute;
    margin: 							auto;
    top: 								0px;
    left: 								0px;
    right: 								0px;
    bottom: 							0px;
	z-index:							0;
}

.navNavigationPane_Title {
    position:                           absolute;
    top:                                10px;
    text-align:                         center;
    color:                              white;
    width:                              128px;
    cursor:                             pointer;
    display:                            none;
	z-index:							1;
}

.navDefaultPage_Button {
    position:                           absolute;
    bottom:                             5px;
    text-align:                         center;
    font-size:                          10px;
    color:                              #000000;
    width:                              100px;
    left:                               14px;
    background:                         url(../../navigation/images/navigator/default_btn_nml.png) no-repeat;
    cursor:                             default;
    display:                            none;
	cursor:								pointer;
}

.navDefaultPage_Button:hover {
    background:                         url(../../navigation/images/navigator/default_btn_hvr.png) no-repeat;
}

.navStatus_Text {
    top:                                71px;
    height:                             25px;
    width:                              100%;
    text-align:                         center;
    color: 								#404040;
    cursor:								default !important;
    padding-top:                        2px;
}

.navTop_Plugin {
	visibility: 						hidden !important; 
	height: 							0px !important;
}

.navCenter_PageContainer {
    padding:                            10px;
	color: 								#404040 !important;
}

.navImagePreloader {
	position:							absolute !important;
	margin-top:							-9999px !important;
	margin-left:						-9999px !important;
	background-repeat: 					no-repeat !important;
	visibility: 						hidden !important; 
}

/* Alarms/Alerts Navigation icon styles */

.navNavigationPane_AlarmsTitle {
    position:                           absolute;
    top:                                11px !important;
    text-align:                         center;
    font-size:				12px;
    color:                              white;
    width:                              100px;
    left:				14px;
    cursor:                             pointer;
}

.navNavigationPane_AlarmsIcon {
    background:				url(../../navigation/images/navigator/icons/alarmsnavigation.png);
    height:				100% !important;
}

.navNavigationPane_AlarmsText {
    position:                           absolute;
    bottom:                             5px;
    text-align:                         center;
    font-size:                          12px;
    color:                              white;
    width:                              126px !important;
    left:                               1px !important;
    cursor:                             pointer;
}


/* 	Navigation "Options/Logout" styles
	(These are the styles used for the Options/Logout area on the right hand side of the navigation.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

.navRightSideOptions {
	position: 							absolute !important;
    right: 								13px !important;
    top: 								50px !important;
	display:							block;
	height:								auto;
	width:								auto;
	white-space: 						nowrap !important;
}

.navRightSideOptions .Options, .navRightSideOptions .Logout, .navRightSideOptions .Separator {
	float:								left;
	width:								auto;
	font-size: 							13px;
}

.navRightSideOptions .Options {
	cursor: 							pointer !important;
	text-align: 						right !important;
	vertical-align: 					middle !important;
	background-repeat: 					no-repeat !important;
	color: 								#fff8f6;
	background-position: 				right 7px !important;
	background-image: 					url(../../images/buttons/main/downarrow.png);
	padding-right:						13px;
}

.navRightSideOptions .Logout {
    cursor: 							pointer !important;
    vertical-align: 					middle !important;
    color: 							    #ffffff;
}

.navRightSideOptions .Separator {
	height:								19px;
    width:								2px;
    margin-left:						10px;
    margin-right:						10px;
    background-color:                   #ffffff;
}


/* 	Navigation Icons holding area styles
	(These are the styles used for the main holding area of the icons using for page navigation.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

.navCarousel_Left_Active, .navCarousel_Right_Active {
	background-repeat:					no-repeat !important;
	height:								16px;
	width:								16px;
	margin-top:							24px !important;
}

.navCarousel_Left_Active, .navCarousel_Right_Active {
	cursor:								pointer;
}

.navCarousel_Left_Active, .navCarousel_Right_Active{
	float:								left !important;
}

.navCarousel_Left_Active {
	background-image:					url(../images/carousel/carousel_left.png);
}

.navImagePreloader, .navCarousel_Left_Active:hover {
	background-image:					url(../images/carousel/carousel_left_on.png);
}

.navCarousel_Right_Active {
	background-image:					url(../images/carousel/crousel_right.png);
}

.navImagePreloader, .navCarousel_Right_Active:hover {
	background-image:					url(../images/carousel/carousel_right_on.png);
}

.navCarousel_Icon {
	margin-left:						7px !important;
	margin-right:						7px !important;
	-ms-interpolation-mode: 			bicubic !important; 
}
	

/* 	Navigation Menu styles
	(These are the styles that will be used for the main navigation "Options" menu and menu items.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

._mnuContainer {
	cursor:								pointer;
	position: 							absolute !important;
	width: 								210px; 
	padding: 							0px 0px 0px 0px; 
	background-color: 					#e3e1e2; 
	top: 								70px !important;
	display: 							none;
	border: 							solid;
	border-width: 						1px;
	border-color: 						#5d6f84;
	font-size: 							11px;
	text-decoration: 					none;
	z-index: 							250000;
}

._mnuContainer a:link, ._mnuContainer a:visited {
    color: 								#232323; 
}

._mnuContainer a:hover {
    color: 								white;
}

._mnuBody, ._mnuItem, ._mnuSpace, ._mnuLine, ._mnuItemTick {
	cursor: 							pointer !important;
	background-color: 					#194981; 
}

._mnuItem, ._mnuItemTick {
	background-color: 					#e2e9f1;
	color: 								#404040; 
	padding: 							4px 8px 4px 18px;
}

._mnuItemTick {
	background-position: 				left;
	background-position:				5px;
	background-repeat: 					no-repeat !important; 
	background-image: 					url(../images/menu/tick.png);
}

._mnuItemTick:hover, ._mnuItem:hover  {
	background-color: 					#f0f4f7;
	color: 								#404040;
}

._mnuSpace {
	padding: 							2px 1px 1px 2px;
}

._mnuLineSeperator {
	border-bottom-width:				1px !important;
	border-bottom-color:				black;
	border-bottom-style:				dotted !important;
}


/* 	ComboBox container style
	(This is the style that will be used for the container that will be used for holding groups list in a combo box.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

.ctlComboboxContainer {
	position: 							relative !important;
	padding:     						5px !important;
	height: 							auto;
    margin-left:                        15px;
}


/* 	Check Box/Option Box styles
	(This is the style that will be used for the container that will be used for holding check/option boxes.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

.ctlListBoxContainer, .ctlListBoxContainer_NoScroll {
	position: 							relative !important;
	padding:							5px;
	padding-top: 						5px !important;
	padding-left: 						7px !important;
	border: 							1px solid gray !important;
	height: 							200px;
}

.ctlListBoxContainer {
	overflow: 							auto !important;
	overflow-x: 						hidden !important;
	overflow-y: 						scroll !important;
}


/* 	CheckBox/OptionBox styles
	(These are the styles that are used for the CheckBoxes/OptionBoxes through the pages.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */


input[type=checkbox], input[type=radio] {
	vertical-align: 					middle !important;
	position: 							relative !important;
	margin-right:						5px;
}

input[type=checkbox] {
	bottom: 							1px;
}

input[type=radio] {
	bottom: 							1px;
}


/* 	Notification (media player panel) styles
	(These are thr styles that will be used for the main notification area displayed inside the media player area.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

.navNotification {
	border-bottom: 						solid; 
	border-bottom-width: 				1px; 
	background-color: 					#FF9
}

.navNotification a:link, .navNotification a:visited  {
	text-decoration:					underline;
	color: 								#404040;
}


/* 	Title/Section/Setting content styles
	(These are the styles used for the inner sections used inside layers (for settings, options, dialogs, etc).)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

._Preferences_Title, ._ChangePassword_Title, ._BulkExport_Title, ._CallSafeLock_Title, ._CallSafeUnlock_Title {
	vertical-align: 					top;
	position:							inherit;
	text-align: 						left;
}	
	
._Preferences_Title {
	width: 								230px;
	padding-bottom: 					10px;
}

._ChangePassword_Title {
	width: 								200px;
	padding-bottom: 					10px;
}

._BulkExport_Title {
	width: 								30px;
	padding-bottom: 					5px;
	vertical-align: 					center;
}

._BulkExport_OptionBox {
	width: 								30px;
	vertical-align: 					center;
}

._CallSafeLock_Title {
	width: 								30px;
	padding-bottom: 					5px;
	vertical-align: 					center;
}

._CallSafeUnlock_Title {
	width: 								30px;
	padding-bottom: 					5px;
	vertical-align: 					center;
}

._Preferences_Settings {
	vertical-align: 					top;
	padding-bottom: 					10px;
}

._Preferences_Option {
	height:								20px;
}


/* 	None-Selectable areas
	(These states state the action that should occur when the user tries to select text in a certain area.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

._NonSelectable {
	user-select: 						none !important; 
	-khtml-user-select: 				none !important; 
	-moz-user-select: 					none !important;
}

/* 	Textbox styles
	(These are the styles that are used for the Textboxes through the pages.)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

input[type=text]::-ms-clear {
	display: 							none;
}


/* 	The Error Message "Extended Details" style
	(This is the style that is used in the error messages to display extended details (which may get to large to fully display).)
	----------------------------------------------------------------------------------------------------------------------------------------------- */

.em_ExtendedDetails {
	padding:							5px;
	border: 							1px solid gray !important;
	overflow-x: 						hidden !important;
	overflow-y: 						scroll !important;
	height: 							100px;
}
#SupportMessageContainer {
	position:                           relative;
    top:                                -30px;
    right:                              -50% !important;
	z-index:							1500;
	margin-left:						auto;
	margin-right:						auto;
}

#SupportExpiryMessage {
	position:                           relative;
	right:								-50px !important;
	z-index:							1500;
	margin-left:						auto;
	margin-right:						auto;
}

#ComplianceMessageContainer {
	position:                           relative;
	top:                                -30px;
	right:                              -50% !important;
	z-index:							1500;
	margin-left:						auto;
	margin-right:						auto;
}

#ComplianceMessage {
	cursor: pointer;
	position:                           relative;
	right:								-50px !important;
	z-index:							1500;
	margin-left:						auto;
	margin-right:						auto;
}

@font-face {
	font-family: "Segoe UI";
	font-weight: 200;
	src: local("Segoe UI Light");
}
@font-face {
	font-family: "Segoe UI";
	font-weight: 300;
	src: local("Segoe UI Semilight");
}
@font-face {
	font-family: "Segoe UI";
	font-weight: 400;
	src: local("Segoe UI");
}
@font-face {
	font-family: "Segoe UI";
	font-weight: 600;
	src: local("Segoe UI Semibold");
}
@font-face {
	font-family: "Segoe UI";
	font-weight: 700;
	src: local("Segoe UI Bold");
}
@font-face {
	font-family: "Segoe UI";
	font-style: italic;
	font-weight: 400;
	src: local("Segoe UI Italic");
}
@font-face {
	font-family: "Segoe UI";
	font-style: italic;
	font-weight: 700;
	src: local("Segoe UI Bold Italic");
}

/*
	-----------------------------------------------------------------------------------------------------------------------------------------------
  	End of File:  styles.css	
  	-----------------------------------------------------------------------------------------------------------------------------------------------
*/