﻿/* Blue Theme Style */
/* Common tags                 */
/*-----------------------------*/		

body
{
    font-size: 11px;
    font-family: Arial, Tahoma;
    font-weight: normal;
    color: #000000;
    margin: 0;
    padding: 0;
    margin-right: 30;
    text-align: left;
}

A:link      { color: #41519A; text-decoration:none; }
A:visited 	{ color: #41519A; text-decoration:none; }
A:active 	{ color: #41519A;  cursor:context-menu; text-decoration:none; }
A:hover
{
    color: red;
    cursor: context-menu;
    text-decoration:underline;
}
		
A.bodyLink:link     { color: #41519A; text-decoration:none; font-weight:bold; }
A.bodyLink:visited 	{ color: #41519A; text-decoration:none; font-weight:bold; }
A.bodyLink:active 	{ color: #41519A;  cursor:context-menu; text-decoration:none; font-weight:bold; }
A.bodyLink:hover 	{ color: #181789;  cursor:context-menu; text-decoration:underline; font-weight:bold; }
		
p
{
	line-height: 1.4em;
}

.title
{
    text-transform: uppercase;
    font-family: verdana;
    font-size: large;
    font-weight: bold;
    color: #41519A;
 }

hr {
	border: 0;
	border-top: 2px solid #41519A;
	height: 2px;
}

img
{
	border-width: 0;
}

ul
{
	list-style-image: url(Images/bullet.jpg);
	list-style-position: outside;
	list-style-type: disc;
	color: #000000;
	font-family: verdana;
}

.menutextindent
{
    font-size: x-small;
}

/* Headings                    */
/*-----------------------------*/
h1
{
	font-size: large;
	color: #6B7EBF
}

h2
{
	font-family: Verdana;
	font-size: medium;
	margin-top: 30;
	color: #6B7EBF;
	margin-bottom: -15;
}
	
h3
{
	font-family: Verdana;
	font-size: small;
	margin-bottom: -15;
	color: #6B7EBF;
	padding-left: 15;
}

h1, h2, h3, h4
{
	margin: 0;
	font-family: Verdana;
}

/* Tables                      */
/*-----------------------------*/	
table
{
	font-size: 1em;
}

table.header
{
	  background-color:#5B6DB5;
}

td.logo
{
	text-align: left;
	width: 184px;
}

td.title 
	{
		text-align: center;
		font-family: verdana;
		font-size: x-large;
		font-weight: bolder;
		color: #FFFFFF;
	}

td.headerbar 
{
	background-image: url(Images/bar.jpg);
	text-align: right;
	height: 24px;
}

td.menu 
{
	background-color:#41519A;
	width: 184px;
	height: 500px;
	vertical-align: top;
}

td.footer
{
	margin-left: 30;
	font-family: Verdana;
	font-size:xx-small;
	font-weight: normal;
	color: #41519A;
	text-align: right;
}


.box
{   border:1px solid #C0C0C0;
    width:182px;
    height:19px;
    clip:rect(0px,181px,18px,0px);
    overflow:hidden;
} 

.box2
{
    border:1px solid #F4F4F4;
    width:180px;
    height:17px;
    clip:rect(0px,179px,16px,0px);
    overflow:hidden;
} 

select
{
    position:relative;
    left:-2px;
    top:-2px;
    font-size:13px;
    width:183px;
    line-height:14px;
    border:0px;
    color:#909993;
} 

.gen 
{
    border: 1px solid #4E4868;
    font-size:14px;
    background-color: #EBEBEB;
    font-size:11px;
    width: 200px;
}



body, div, p, h1, h2, h3, h4, ul, li, table
{
	margin:0;
	padding:0;
	border:none;
}

body
{
	background: #FFFEFD url(image/body_bg.gif) repeat left top;
	font-family: Arial, Tahoma, sans-serif;
	font-size:12px;
}

/* Master Page Layout */
#master_header
{
	margin: -1px auto 0 auto;
	width: 1024px;
}

#master_headertop
{
	background: url(image/headertop_img.jpg) no-repeat left top;
}

#master_headerbottom
{
	background: url(image/headerbottom_img.png) no-repeat left top;
}

#master_page
{
	margin: 5px auto 20px auto;
	width: 1024px;
	background-color:#FFFEFD;
}

#master_menu
{
	float: left;
	width: 240px;
	padding-right: 10px;
}

.sidebar
{
	width: 100%;
	margin-bottom: 10px;
}

.sidebarheader
{
	height: 24px;
	padding: 10px 0 0 35px;
	background: url(images/sidebar_header.png) no-repeat left top;
	color: #FFF;
	font-family: Arial, Sans-Serif;
	font-size: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
}

.sidebarcontent
{	
	border: 1px solid #0F2543;
	padding: 20px 20px 20px 30px;
	line-height: 1.5em;
	font-weight: bold;
}

#master_sidebarSamples
{	
	padding-top: 72px;
	background: #FFF url(images/samples_bg.gif) no-repeat left top;
}

#master_sidebarWalkthroughs
{
	padding-top: 72px;
	background: #FFF url(images/walkthrough_bg.gif) no-repeat left top;
}

.sidebarcontent a
{
	padding: 2px 5px;
	color: #5377A9;
	text-decoration: none;
}

.sidebarcontent a:hover
{
	background-color: #0F2543;
	color: #FFF;
}

.sidebarcontent a:visited
{
	font-weight: normal;
}

#master_content
{
	float: left;
	width: 1024px;
	margin-right: -550px;
	color: #000000;
}

#master_content ul
{
	margin: 0 25px 0 30px;
}

#master_content ul li ul li
{
	list-style-type: disc;
}

#master_contentheader
{
	height: 19px;
	background: url(images/rightcoltop.gif) no-repeat right top;
}

#master_contentplaceholder
{
	padding: 30px 20px 40px 20px;
	border-left: 1px solid #0F2543;
	border-right: 1px solid #0F2543;
	border-bottom: 1px solid #0F2543;
    border-top: 1px solid #0F2543;
	background-color: #EFEFEF;
	line-height: 1.5em;
    border-radius: 5px;
    left:30px;

}

#login_contentplaceholder
{
	padding: 30px 20px 40px 20px;
	border-top: 1px solid #0F2543;
	border-left: 1px solid #0F2543;
	border-right: 1px solid #0F2543;
	border-bottom: 1px solid #0F2543;
	background-color: #FFFBD6;
	line-height: 1.5em;
}

#master_contentfooter
{
	clear: both;
	padding: 10px 0 5px 10px;
	color: #333;
	font-size: 0.8em;
	letter-spacing: 0.1em;
}

/* Content Page Layout */

.div_grid
{
	padding:10px;
	background:#FFF url(image/demotop.png) no-repeat left top;	
	overflow:scroll; 
	width:945px ; 
	position:relative;
	height:300px;
}
.div_general 
{
	padding:10px;
	background:#FFF url(image/demotop.png) no-repeat left top;	

}
.demoarea {
	padding:10px;
	background:#FFF url(image/demotop.png) no-repeat left top;	
	font-size: 12px;
}

.moveGird {
	overflow-y:auto ;	
	position: relative;	 
}

.demoarea p 
{
	padding:0px;

}
    
.demoheading {
	padding-bottom:9px;
	color:#5377A9;
	font-family:Arial, Sans-Serif;
	font-weight:bold;
	font-size:1.5em;
}

.demobottom {
	height:8px;
	background:#FFF url(image/demobottom.png) no-repeat left bottom;
}


.heading {
	padding: 0.5em 0 0.5em 0;
	color:#5377A9;
	font-family:Arial, Sans-Serif;
	font-weight:bold;
	font-size:1.0em;
}

.subheading{
	padding:.8em 0 0.5em 0;
	color:#0F2543;
	font-weight:bold;
	font-family:Arial, Sans-Serif;
	font-size:1.1em;
}

p {}

em {font-style:italic}

i {font-style: italic;}

strong {font-weight:bold;}

.codeReference
{
	/*font-family: 'Courier New', Monospace;
	font-style: normal;
	font-weight: bold;*/
}

pre, code {
	display:block;
	margin:5px 5px 5px 0;
	padding:5px;
	border:1px dashed #CCC;
}

.releaseList {
	list-style-type:disc;
}


/* Styles for the Animation Reference */
.animationReferenceTable
{
}

.animationReferenceRow
{
}

.animationReferenceField
{
	text-align: right;
	vertical-align: top;
	padding-top: 5px;
}

.animationReferenceCode
{
	margin-top: 5px;
	vertical-align: top;
	/*font-family: 'Courier New', Monospace;*/
	font-style: normal;
	font-weight: bold;
	display:block;
	background-color:#FFF;
	color:#000;
/*	font-family:'Courier New', Monospace; */
	font-size:0.9em;
	font-style:normal;
	font-weight: bold;
	margin-bottom: 5px;
}

.animationReferenceItems
{
	vertical-align: top;
}

.animationReferenceItemTable
{
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.animationReferenceItemRow
{
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.animationReferenceItem
{
	width: 100%;
	padding: 0px;
	margin: 0px;
	padding-bottom: 10px;
}

.animationReferenceItemCode
{
	display:block;
	background-color:#FFF;
	color:#000;
	/*font-family:'Courier New', Monospace;*/
	font-size:0.9em;
	font-style:normal;
	font-weight: bold;
}

/******************************/
/**Styling information specific to individual content pages**/

/* Accordion */
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #2E4d7B;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

#master_content .accordionHeader a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
	font-family: Arial, Sans-Serif;
	font-size: 12px;
	font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
}

#master_content .accordionHeaderSelected a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

#master_content .accordionHeaderSelected a:hover
{
	background: none;
	text-decoration: underline;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

/*AutoComplete flyout */

.autocomplete_completionListElement 
{  
	visibility : hidden;
	margin : 0px!important;
	background-color : inherit;
	color : windowtext;
	border : buttonshadow;
	border-width : 1px;
	border-style : solid;
	cursor : 'default';
	overflow : hidden;	
    text-align : left; 
    list-style-type : none;
    position:absolute;
    z-index :1;
    
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
	background-color: #ffff99;
	color: black;
	padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem 
{
	background-color : window;
	color : windowtext;
	padding : 1px;
	z-index :3;
	 position :absolute ;
}

/*Cascading DropDown*/

/*CollapsiblePanel*/
.collapsePanel {
	
	background-color:white;
	overflow:hidden;
}

.collapsePanelHeader{
	width:100%;
	height:30px;
	background-image: url(images/bg-menu-main.png);
	background-repeat:repeat-x;
	color:#FFF;
	font-weight:bold;
}

#master_content .collapsePanelHeader a {color:#FFF;}
#master_content .collapsePanelHeader a:hover {text-decoration:none;background:none;}

/*Confirm Button*/

/* DropShadow */

#master_content .dropShadowPanel span {color:white;text-decoration:underline;}
#master_content .dropShadowPanel span:hover {text-decoration:none;}


.dropShadowPanel 
{
	width:300px;
	background-color:#5377A9;
	color:white;
	font-weight:bold;
}

/*Drag Panel*/
.dragMe {
	width:100%;
	height:21px;
	background-color:#FFF;
	background-image:url(images/header-opened.png);
	text-align:center;
	cursor:move;
	font-weight:bold;
}

.overflowHidden {overflow:hidden;}

.overflowScroll {overflow:hidden;}

/*Hover Menu*/
.popupMenu {
	position:absolute;
	visibility:hidden;
	background-color:#F5F7F8;
	opacity:.9;
	filter: alpha(opacity=90);
    z-index: 1;
}

.popupHover {
	background-image:url(images/header-opened.png);
	background-repeat:repeat-x;
	background-position:left top;
	background-color:#F5F7F8;
}

/* PagingBulletedList */
.selectIndex {
    font-weight: bold;
    text-decoration:none;
}
.unselectIndex {
    font-weight:normal;
    text-decoration:underline;
}


/*Modal Popup*/
.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}

.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	width:250px;
}

.sampleStyleA {
	background-color:#FFF;
}

.sampleStyleB {
	background-color:#FFF;
	font-family:monospace;
	font-size:10pt;
	font-weight:bold;
}

.sampleStyleC {
	background-color:#ddffdd;
	font-family:sans-serif;
	font-size:10pt;
	font-style:italic;
}

.sampleStyleD {
	background-color:Blue;
	color:#FFFFFF;
	font-family:Arial;
	font-size:10pt;
}

/*Popup Control*/
.popupControl{
	background-color:#FFFFFF;
	position:absolute;
	visibility:hidden;
}

/*Reorder List*/
.dragHandle {
	width:10px;
	height:15px;
	background-color:Blue;
	background-image:url(images/bg-menu-main.png);
	cursor:move;
	border:outset thin white;
}

.callbackStyle {
	border:thin blue inset;		
}

.callbackStyle table {
	background-color:#5377A9;	
	color:Black;
}


.reorderListDemo li {
	list-style:none;
	margin:2px;
	background-image:url(images/bg_nav.gif);
	background-repeat:repeat-x;
	color:#FFF;
}

.reorderListDemo li a {color:#FFF !important; font-weight:bold;}

.reorderCue {
	border:dashed thin black;
	width:100%;
	height:25px;
}

.itemArea {
	margin-left:15px;
	font-family:Arial, Verdana, sans-serif;
	font-size:1em;
	text-align:left;
}


/* Rounded Corners*/

.roundedPanel
{	
	width:300px;
	background-color:#5377A9;
	color:white;
	font-weight:bold;
}

/* ResizableControl */

.frameImage
{
	width:130px;
	height:65px;
	overflow:hidden;
	float:left;
	padding:3px;
}

.frameText
{
	width:100px;
	height:100px;
	overflow:auto;
	float:left;
	background-color:#ffffff;
	border-style:solid;
	border-width:2px;
	border-color:Gray;
	font-family:Helvetica;
	line-height:normal;
}

.handleImage
{
	width:15px;
	height:16px;
	background-image:url(images/HandleHand.png);
	overflow:hidden;
	cursor:se-resize;
}

.handleText
{
	width:16px;
	height:16px;
	background-image:url(images/HandleGrip.png);
	overflow:hidden;
	cursor:se-resize;
}

.resizingImage
{
	padding:0px;
	border-style:solid;
	border-width:3px;
	border-color:#B4D35D;
}

.resizingText
{
	padding:0px;
	border-style:solid;
	border-width:2px;
	border-color:#7391BA;
}

/*Textbox Watermark*/

.unwatermarked {
	height:18px;
	width:148px;
}

.watermarked {
	height:20px;
	width:150px;
	padding:2px 0 0 2px;
	border:1px solid #BEBEBE;
	background-color:#F0F8FF;
	color:gray;
}	

/* Rating */
.ratingStar {
    font-size: 0pt;
    width: 13px;
    height: 12px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.filledRatingStar {
    background-image: url(Images/FilledStar.png);

}

.emptyRatingStar {
    background-image: url(Images/EmptyStar.png);
}

.savedRatingStar {
    background-image: url(Images/SavedStar.png);
}


/*Toggle Button*/

/*Setup*/
.walkthrough li {padding-bottom:5px;}

/*Using a sample extender*/

/*Creating a new extender*/
.walkthroughNote {
	padding-left:25px;
	font-style:italic;
}

/*Other neat stuff*/





/************ PasswordStrength Related Styles ***********************/
.TextIndicator_TextBox1
{
     background-color:Gray;
     color:#FFFFFF;
     font-family:Arial;
     font-size:x-small;
     font-style:italic;
     padding: 2px 3px 2px 3px;
}

.BarIndicator_TextBox2_weak
{
    color:Red;
    background-color:Red;
}
.BarIndicator_TextBox2_average
{
    color:Blue;
    background-color:Blue;
}
.BarIndicator_TextBox2_good
{
    color:Green;
    background-color:Green;
}

.BarBorder_TextBox2
{
    border-style:solid;
    border-width:1px;
    padding:2px 2px 2px 2px;
    width:200px;
    vertical-align:middle;
}

.TextIndicator_TextBox3
{
     background-color:Blue;
     color:Yellow;
     font-size:small;
     font-variant:small-caps;
     padding: 2px 3px 2px 3px;
}

.TextIndicator_TextBox3_Handle
{
	width:16px;
	height:14px;
	background-image:url(images/Question.png);
	overflow:hidden;
	cursor:help;
}

.TextIndicator_TextBox1_Strength1
{
     background-color:Gray;
     color:#FFFFFF;
     font-family:Arial;
     font-size:x-small;
     font-style:italic;
     padding: 2px 3px 2px 3px;
     font-weight:bold;
}
.TextIndicator_TextBox1_Strength2
{
     background-color:Gray;
     color:Yellow;
     font-family:Arial;
     font-size:x-small;
     font-style:italic;
     padding: 2px 3px 2px 3px;
     font-weight:bold;
}
.TextIndicator_TextBox1_Strength3
{
     background-color:Gray;
     color: #FFCAAF;
     font-family:Arial;
     font-size:x-small;
     font-style:italic;
     padding: 2px 3px 2px 3px;
     font-weight:bold;
}
.TextIndicator_TextBox1_Strength4
{
     background-color:Gray;
     color:Aqua;
     font-family:Arial;
     font-size:x-small;
     font-style:italic;
     padding: 2px 3px 2px 3px;
     font-weight:bold;
}
.TextIndicator_TextBox1_Strength5
{
     background-color:Gray;
     color: #93FF9E;
     font-family:Arial;
     font-size:x-small;
     font-style:italic;
     padding: 2px 3px 2px 3px;
     font-weight:bold;
}



.dynamicPopulate_Normal
{
	border:silver 1px inset;
	padding:2px;
	text-align:center;
	height:2em;
	margin:5px;
	width:200px;
}

.dynamicPopulate_Updating 
{
	background-image:url(images/loading.gif);
	background-repeat:no-repeat;
	border:silver 1px inset;
	text-align:center;
	padding:2px;
	height:2em;
	margin:5px;
	width:200px;
}
/************ MaskedEdit Related Styles ***********************/
.MaskedEditFocus
{
    background-color: #ffffcc;
    color: #000000;
}
.MaskedEditMessage
{
	color: #ff0000;
	font-weight: bold;
}
.MaskedEditError
{
    background-color: #ffcccc;
}
.MaskedEditFocusNegative
{
    background-color: #ffffcc;
    color: #ff0000;
}
.MaskedEditBlurNegative
{
    color: #ff0000;
}

.MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color: lemonchiffon;
    color: red;
        /*position:absolute;*/
    position:inherit  ;
    z-index :2;
    
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,
.MyCalendar .ajax__calendar_other .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,
.MyCalendar .ajax__calendar_hover .ajax__calendar_month,
.MyCalendar .ajax__calendar_hover .ajax__calendar_year {
    color: black;
}
.MyCalendar .ajax__calendar_active .ajax__calendar_day,
.MyCalendar .ajax__calendar_active .ajax__calendar_month,
.MyCalendar .ajax__calendar_active .ajax__calendar_year {
    color: black;
    font-weight:bold;
}

/* SlideShow styles */

.slideTitle
{
	font-weight:bold;
	font-size:small;
	font-style:italic;
}

.slideDescription
{
	font-size:small;
	font-weight:bold;
}

.validatorCalloutHighlight
{
    background-color: lemonchiffon;
}

.ListSearchExtenderPrompt
{
	font-style:italic;
	color:Gray;
	background-color:white;
}

.fontSizeChinese {
    font-size: 14px;
}

.mandatoryMsg
{
    color: Red;
    font-family: Arial, Tahoma;
    font-size: 11px;
}

.errorMsg
{
    color: Red;
    font-family: Arial, Tahoma;
    font-size: 11px;
}

.eventMsg
{
    color: Green;
    font-family: Arial, Tahoma;
    font-size: 11px;
}

.errorMsg_Chinese {
    color: Red;
    font-family: Arial, Tahoma;
    font-size: 14px;
}

.eventMsg_Chinese {
    color: Green;
    font-family: Arial, Tahoma;
    font-size: 14px;
}

.silverMsg
{
    color: Silver;
    font-family: Arial, Tahoma;
    font-size: 11px;
}

.smallHeader
{
    font-family: Arial, Tahoma;
    font-size: 11px;
    font-weight: bold;
}

.checkBox
{
    font-family: Verdana, Arial;
    font-size: x-small;
}


.linkButton:link
{
    background-image:url(../image/BlueExplorer.gif);
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold;
    height: 24px;
    width: 80px;
    text-decoration: none;
}

.linkButton:active
{
    background-image:url(../image/BlueExplorer.gif);
    color:#FFFFFF;
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold;
    height: 24px;
    width: 80px;
    text-decoration: none;
}

.linkButton:visited
{
    background-image:url(../image/BlueExplorer.gif);
    color:#FF6600;
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold;
    height: 20px;
    width: 80px;
    text-decoration: none;
}

.linkButton:hover
{
    background-image:url(../image/BlueExplorer.gif);
    color:Red;
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold;
    height: 20px;
    width: 80px;
    text-decoration: none;
}



.commandButton
{
	/*BORDER-RIGHT: #0e1f5b 1px solid; 
	BORDER-TOP: #d9dfea 1px solid; 
	FONT-SIZE: 12px; 
	BORDER-LEFT: #d9dfea 1px solid; 
	COLOR: #222222; 
	BORDER-BOTTOM: #0e1f5b 1px solid; 
	FONT-FAMILY: "lucida grande", tahoma, Microsoft JhengHei, Verdana, arial, sans-serif; 
	BACKGROUND-COLOR: #BBBBBB; 
	TEXT-ALIGN: center*/
    
    FONT-SIZE: 12px; 
    border: none;
    background-color: #386493;
    FONT-FAMILY: "lucida grande", tahoma, verdana, arial, sans-serif; 
    color: #FFFFFF;
    TEXT-ALIGN: center;
    border-radius: 5px;
    transition: all 0.5s;
      /*border-radius: 5px;
      background-color: #386493;
      border: none;
      color: #FFFFFF;
      text-align: center;
      font-size: 12px;
      height:50px;
      padding: 0px;
      transition: all 0.5s;
      cursor: pointer;
      margin: 0px;*/

}

.commandButton:hover {background-color: #3e8e41}

.commandButton:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.commandButton:disabled {
  background-color: #C0C0C0;
  transform: translateY(2px);
}

.hyperlinkLikeButton { 
    cursor:pointer
}

.dropDown
{
    border-right: black 1px solid;
    padding-right: 3px;
    border-top: black 1px solid;
    padding-left: 3px;
    font-size: 11px;
    padding-bottom: 3px;
    border-left: black 1px solid;
    padding-top: 3px;
    border-bottom: black 1px solid;
    font-family: Arial, Tahoma;
    position: static;
    color: black;
}

.dropDownList
{
    border-right: black 1px solid;
    padding-right: 3px;
    border-top: black 1px solid;
    padding-left: 3px;
    font-size: 11px;
    padding-bottom: 3px;
    border-left: black 1px solid;
    padding-top: 3px;
    border-bottom: black 1px solid;
    font-family: Arial, Tahoma;
    position: static;
    color: black;
}


.dropDownList
{
    border-right: black 1px solid;
    padding-right: 3px;
    border-top: black 1px solid;
    padding-left: 3px;
    font-size: 11px;
    padding-bottom: 3px;
    border-left: black 1px solid;
    padding-top: 3px;
    border-bottom: black 1px solid;
    font-family: Arial, Tahoma;
    position: static;
    color: black;
}

.radioButton
{
    font-family: Verdana, Arial;
    font-size: x-small;
}

.textBox
{
	BORDER-RIGHT: #bdc7d8 1px solid; 
    PADDING-RIGHT: 1px; 
    BORDER-TOP: #bdc7d8 1px solid; 
    PADDING-LEFT: 3px; FONT-SIZE: 12px; 
    PADDING-BOTTOM: 1px; 
    BORDER-LEFT: #bdc7d8 1px solid; 
    PADDING-TOP: 1px; 
    BORDER-BOTTOM: #bdc7d8 1px solid; 
    height:15px;
    FONT-FAMILY: "lucida grande", tahoma, Microsoft JhengHei, Verdana, arial, sans-serif;
    border-radius: 2px;
}



.readOnlyTextBox
{
    font-size: 12px;
    font-family: arial, tahoma;
    background-color: transparent;
    border : none;
}

.numericReadOnlyTextBox
{
    font-size: 12px;
    font-family: Arial, Tahoma;
    background-color: transparent;
    border : none;
    text-align: right;
}

.fileuploadfield
{
	
	BORDER-RIGHT: #0e1f5b 1px solid; BORDER-TOP: #d9dfea 1px solid; FONT-SIZE: 12px; BORDER-LEFT: #d9dfea 1px solid; COLOR: #222222; BORDER-BOTTOM: #0e1f5b 1px solid; FONT-FAMILY: "lucida grande", tahoma, verdana, arial, sans-serif;
}

.tableNoBorder
{
    border-style:none;
}

.tableNoBorderW250
{
    border-style:none;
    width:250px;
}

.tableNoBorderW900
{
    border-style:none;
    width:900px;
}

.tableBox
{
    border-color:#bbbbbb;
    border-width:1px;
    border-style:solid;
    font-family:Arial, Tahoma;
    font-size: 10px;
}
                                            
.inputTable
{
    border-style:none;
    background-color:#DCDCDC;
}

.inputTableW500
{
    border-style:none;
    background-color:#DCDCDC;
    width:500px
}

.inputTableW600
{
    border-style:none;
    background-color:#DCDCDC;
    width:600px
}


.tablePageHeaderRow
{
    background-color:#800000;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:x-small;
    font-weight:bold
}

.tableGridHeaderRow
{
    background-color:#3A80A8;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:11px;
     position: sticky;
        top: 0;
        z-index: 1;
}

.onToptableGridHeaderRow
{
    background-color:#3A80A8;
    color:#FFFFFF;  
    font-family:Arial, Tahoma;
    font-size:11px;
    position: relative ;	
    z-index: 1;
	top: expression(this.offsetParent.scrollTop);
}

.mytableGridPagerRow
{
    background-color:#FFCC66;
    color:#333333;   
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableGridFooterRow
{
    background-color:#6495ED;
    color:Black;   
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold;  
}

.tableGridPagerRow A:active { WIDTH: 20px; COLOR: black }
.tableGridPagerRow A:link { WIDTH: 20px; COLOR: black }
.tableGridPagerRow A:visited { WIDTH: 20px; COLOR: black }
.tableGridPagerRow SPAN { FONT-WEIGHT: bold; FONT-SIZE: 15px; WIDTH: 20px; COLOR: red }

.tableGridPagerRow
{
    background-color:#FFCC66;
    color:#333333;   
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableGridRow
{
    background-color:#FDF5E6;
    color:#000000;   
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableGridAlternatingRow
{
    background-color:#FFFFFF;
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableGridSelectedRow
{
    background-color:#FFCC66;
    color:Navy;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold
}

.tableGridHighLightedRow
{
    background-color: #FFFF00;
    color: Navy;
    font-family: Arial, Tahoma;
    font-size: 10px;
    font-weight: bold;
}

.tableInnerGridHeaderRow
{
    background-color:#9CBED2;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:10px;
    font-weight:bold
}

.tableInnerGridFooterRow
{
    background-color:#990000;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:x-small;
    font-weight:bold
}


.tableInnerGridRow
{
    background-color:#EEEEEE;
    color:#333333;   
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableInnerGridAlternatingRow
{
    background-color:#DDDDDD;
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableInnerGridSelectedRow
{
    background-color:#FFCC66;
    color:Navy;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold
}


.tableInnerLevel1GridHeaderRow
{
    background-color:#FF8C00;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:10px;
    font-weight:bold
}

.tableInnerLevel1GridFooterRow
{
    background-color:#D2B48C;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:x-small;
    font-weight:bold
}


.tableInnerLevel1GridRow
{
    background-color:#F5DEB3;
    color:#333333;   
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableInnerLevel1GridAlternatingRow
{
    background-color:#FDF5E6;
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableInnerLevel1GridSelectedRow
{
    background-color:#FFA500;
    color:Navy;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold
}


.tableInnerLevel2GridHeaderRow
{
    background-color:#006400;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:10px;
    font-weight:bold
}

.tableInnerLevel2GridFooterRow
{
    background-color:#2E8B57;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:x-small;
    font-weight:bold
}

.tableInnerLevel2GridRow
{
    background-color:#6B8E23;
    color:#333333;   
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableInnerLevel2GridAlternatingRow
{
    background-color:#9ACD32;
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableInnerLevel2GridSelectedRow
{
    background-color:#008000;
    color:Navy;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold
}


.tableInnerLevel3GridHeaderRow
{
    background-color:#A52A2A;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:10px;
    font-weight:bold
}

.tableInnerLevel3GridFooterRow
{
    background-color:#FA8072;
    color:#FFFFFF;   
    font-family:Arial, Tahoma;
    font-size:x-small;
    font-weight:bold
}

.tableInnerLevel3GridRow
{
    background-color:#F08080;
    color:#333333;   
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableInnerLevel3GridAlternatingRow
{
    background-color:#BC8F8F;
    font-family:Arial, Tahoma;
    font-size:11px;
}

.tableInnerLevel3GridSelectedRow
{
    background-color:#B22222;
    color:Navy;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold
}




.tableGridSortableLink:link
{
    color:#FFFFFF;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold;
    text-decoration: none;
}

.tableGridSortableLink:active
{
    color:#FFFFFF;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold;
    text-decoration: none;
}

.tableGridSortableLink:visited
{
    color:#FF6600;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold;
    text-decoration: none;
}

.tableGridSortableLink:hover
{
    color:Red;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold;
    text-decoration: none;
}

.tableGridFooterLinkButton:link
{
    color:#333333;
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold;
    text-decoration: none;
}

.tableGridFooterLinkButton:active
{
    color:#333333;
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold;
    text-decoration: none;
}

.tableGridFooterLinkButton:visited
{
    color:#333333;
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold;
    text-decoration: none;
}

.tableGridFooterLinkButton:hover
{
    color:#333333;
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold;
    text-decoration: none;
}


.tableGridPOTrackEnableCell
{
    background-color:#FDF5E6;
    font-family:Arial, Tahoma;
    font-size:11px;
    width: 120px
}

.tableGridPOTrackDisableCell
{
    background-color: White;
    font-family:Arial, Tahoma;
    font-size:11px;
    width: 120px;
}

.tableGridPOTrackEventCell
{
    background-color: #FFFFE0;
    font-family:Arial, Tahoma;
    font-size:11px;
    width: 120px; 
}


.tableThinLineRow
{
    background-color:Maroon;
    color:#FFFFFF;   
    height:1
}

.tableThinGreyLineRow
{
    background-color:#E0E0E0;
    height:1
}


.tableButtonRow
{
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold
}

.tableRow
{
    height:24px
}


.tableBackgroundRow
{
    border-style:none;
    background-color:#DCDCDC;
}

.tableCaptionCell
{
    border-bottom-width:1px;
    border-bottom-color:#DCDCDC;
    border-bottom-style:solid;
    background-color:#FFFBD6;
    font-family:Arial, Tahoma;
    font-size:13px;
    font-weight:bold
}

.tableInputCell
{
    border-bottom-width:1px;
    border-bottom-color:#DCDCDC;
    border-bottom-style:solid;
    background-color:#FFFBD6;
    font-family:Arial, Tahoma;
    font-size:13px
}

.tableCaptionCellXSmallFont
{
    border-bottom-width:1px;
    border-bottom-color:#DCDCDC;
    border-bottom-style:solid;
    background-color:#FFFBD6;
    font-family:Arial, Tahoma;
    font-size:x-small;
    font-weight:bold
}

.tableInputCellXSmallFont
{
    border-bottom-width:1px;
    border-bottom-color:#DCDCDC;
    border-bottom-style:solid;
    background-color:#FFFBD6;
    font-family:Arial, Tahoma;
    font-size:x-small
}

.tableCommandCell
{
    background-color:#FFCC66;
    font-family:Arial, Tahoma;
    font-size:11px;
    font-weight:bold
}

.tableGridCell
{
    font-family:Arial, Tahoma;
    font-size:xx-small
}

.zeroMarginBody 
{
    font-family:Arial, Tahoma;
    font-size: 12px;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0
}




.submenu
{
                font-size:10px;
                font-family:Arial;
                font-weight: normal;
}


.submenu:link   {
                color: #000000;
                text-decoration: none;
                }
.submenu:active        {
                color: #000000;
                text-decoration: none;
                }
.submenu:visited       {
                color: #000000;
                text-decoration: none;
                }
.submenu:hover         {
                color: #FFFFFF;
                text-decoration: none;
                }
                

.menubar
{
                background-color:#386493;
}

.menu
{
                font-size:11px;
                font-family:Arial, Tahoma, Verdana;
                font-weight: bold;
                text-transform: capitalize;
				color: #FFFFFF;
                font-variant: small-caps;
                background-color:#386493;
                /*font-size: 0.9em;*/ 
}


.menu:link   {
                color: #FFFFFF;
                text-decoration: none;
                }
.menu:active        {
                color: #FFFFFF;
                text-decoration: none;
                }
.menu:visited       {
                color: #FFFFFF;
                text-decoration: none;
                }
.menu:hover         {
                color: #990000;
                text-decoration: none;
                }

.menuItem:link   {
                color: #FFFFFF;
                text-decoration: none;
                }
.menuItem:active        {
                color: #FFFFFF;
                text-decoration: none;
                }
.menuItem:visited       {
                color: #FFFFFF;
                text-decoration: none;
                }
.menuItem:hover         {
                color: #24A1BD;
                text-decoration: none;
                }


.pageHeader
{
    font-size: 1.2em;
    color: #3366cc;
    text-decoration: underline;
    font-weight: bold;
    text-transform: capitalize;
    font-family: Tahoma, Arial;
    background-color: transparent;
    font-variant: small-caps;
}



.loginPageHeaderRow
{
    background-color:#3A80A8;
    color:White;   
    font-family:Arial, Tahoma;
    font-size:x-small;
    font-weight:bold
}

.leftPage
{
    background-color:#3A80A8;
    color:White;   
    font-family:Arial, Tahoma;
    font-size:1.3em;
    
}

.commandHiddenButton {
    display: none;
}

.submenuItems {
              display: none;
              background: #333333;
              color: #FFFFFF;

}


 .submenuItems li {
               border-bottom: 1px solid #B6B6B6; 
              background: #444444;
              color: #FFFFFF;
             }

 .submenuItems a {
              display: block;
              color: #FFFFFF;
              padding: 12px 12px 12px 30px;
              transition: all 0.4s ease-out;
              font-family: 'Montserrat', sans-serif;
              font-size: 11px;
              text-overflow: ellipsis;
            }

 .submenuItems a:hover {
               background-color: #777777;
               color: #DDDDDD;     
               text-decoration: none;
            }

.commandHiddenButton {
    display: none;
}

.visibileMenu {
    background-image: url(../../image/menu2_20x20.png);
    background-repeat: no-repeat;
    background-position: center;
}

.overflowVisible {
    overflow: visible !important;
}

.ListBox {
    BORDER-LEFT: blue 1px solid; 
	BORDER-RIGHT: blue 1px solid;     
    BORDER-TOP: blue 1px solid; 
    BORDER-BOTTOM: blue 1px solid;
    FONT-SIZE: 12px;  
    color: #000000;   
    FONT-FAMILY: "lucida grande", tahoma, Microsoft JhengHei, Verdana, arial, sans-serif;
}



.commandButtonOrgan
{    
    FONT-SIZE: 12px; 
    border: none;
    background-color: #f7b96a;
    FONT-FAMILY: "lucida grande", tahoma, verdana, arial, sans-serif; 
    color: #FFFFFF;
    TEXT-ALIGN: center;
    border-radius: 5px;
    transition: all 0.5s;
}
 
.commandButtonOrgan:hover {background-color: #f7a945}

.commandButtonOrgan:active {
  background-color: #f7a945;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.commandButtonOrgan:disabled {
  background-color: #C0C0C0;
  transform: translateY(2px);
}