@charset "utf-8";
ul.job li{ position:relative; border-bottom: 1px solid #ccc;
    padding: 5px;}
ul.job .chk_radio,.skill_type,.skill_read{ position:absolute; left:35% }

/* Accesories */
.FontThai 	{ font-family: Ms Sans Serif; font-weight: bold;}
.FontEng	{ font-family: Arial, Helvetica, sans-serif;}
/*
|********************************************************************************************
| 															  					  Main Layout  
|********************************************************************************************
*/
body 		{
	margin: 0px;
	font: 11px Arial, Helvetica, sans-serif;
	color: #888;

}
#Header 	{ position: relative; width: 100%; height: auto; }
#HeaderLogo {
	position: relative;
	width: 257px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
}
#HeaderLogo img { margin:0px auto;}

.Container	{ width: 100%; height: auto; position:relative}

.Content 			{ width: 98%; height: auto; margin: 8px auto 0px;  background: #fbfbfb; border: 1px solid #CDCDCD; }

.ContentHomePageUser{ width: 98%; height: auto; margin: 8px auto 0px;  background: #fbfbfb; border: 1px solid #CDCDCD; }
.ContentCalendar 	{ width: 98%; height: auto; margin: 8px auto 0px;  background: #fbfbfb; border: 1px solid #FFF; }
.ContentHomePage	{ position: relative; float: left; width: 300px; height: auto; margin: 8px 0px 10px 12px;  background: #fbfbfb; border: 1px solid #cdcdcd; }
.ContentHomePage2	{ position: relative; float: left; width: 60%; height: auto; margin: 8px 0px 10px 8px; border: 1px solid #cdcdcd;}

.Footer 	{ position: relative; clear: both; margin: 10px auto; text-align: center; color: #0b55c4; background: url(../images/line2.gif) repeat-x center top;  }
.FooterMenu { position: relative; padding-top: 10px; }

/*
|--------------------------------------------------------------------------------------------
| 													                                     Menu
|--------------------------------------------------------------------------------------------
*/
#HeaderMenu 					{ position: relative; width: 100%; background: #f0f0f0; height: 27px; margin-top: 8px; border-bottom: 1px solid #CCC; border-top: 1px solid #CCC;  z-index: 999;}
#HeaderMenu li.menuleft 		{ position: relative; width: auto; margin: 2px 0 0 0; padding-left: 10px; padding-right: 10px; background: url(../images/line_y_menu.jpg) repeat-y right top; }
.MenuRight					  	{ position: absolute; width: auto; right: 10px; bottom: -8px; list-style: none; }
* html .MenuRight				{ position: absolute; width: auto; right: 10px; bottom: 5px; list-style: none; }
*:first-child+html .MenuRight 	{ position: absolute; width: auto; right: 10px; bottom: 5px; list-style: none; }
#HeaderMenu li#right 			{ float: right; width: auto; height: auto; padding-left: 5px; padding-right: 5px;  }
.DivLogout 						{ float: left; margin-top: 5px; margin-left: 3px; }
.PicLogout 						{ float: left; margin-top: 3px; }

.MenuSub 						{ width: 98%; height: 60px; margin: 8px auto 0px;  background: #fbfbfb; border: 1px solid #CDCDCD; position:relative }

.Title 							{ position: relative; width: 33%; height: auto; font-weight: bold; color: #0B55C4; z-index: 1; }
.TextTitle 						{ position: relative; top: -20px; font-size:22px; }
.Title span 					{ font-size: 16px; }

/* Menu Right */
.MenuManage 					{ position: absolute; width: auto; height: auto; right: 15px; top: 0px; }
.MenuManage ul					{ margin:0; padding:0; }
.MenuManage li 					{ position: relative; float: left; text-align: center; list-style: none; margin: 5px 3px 0 3px; } 
.MenuManage li .BtMenuManageCalendar			{ background: #f90;}

/* Menu Feature */
.MenuFeature 					{ position: relative; width: 98%; height: 25px; margin: 15px auto 0px; color: #333; border-bottom: 1px solid #e9e9e9; }
.FeatureDisplay 				{ position: relative; float:left; margin: 0 10px 10px 0; }
.FeatureSearch 					{ position: relative; float:right; margin-bottom: 10px; }
.FeaturePage 					{ position: relative; width: 640px; height: 30px; margin: 0 auto 20px;}


/* Page Section Link */
/*.page a:link		{ position: relative; float: left; font-size: 11px; font-weight: bold; color: #999; border: 1px solid #d1d1d1; width: auto; margin: 3px; text-align: center; padding: 5px 10px; }
.page a:visited	{ position: relative; float: left; font-size: 11px; font-weight: bold; color: #999; border: 1px solid #d1d1d1; width: auto; margin: 3px;  text-align: center; padding: 5px 10px;}
.page a:active	{ position: relative; float: left; font-size: 11px; font-weight: bold; color: #999; border: 1px solid #d1d1d1; width: auto; margin: 3px;  text-align: center; padding: 5px 10px;}
.page a:hover		{ position: relative; float: left; font-size: 11px; font-weight: bold; color: #0b55c4; border: 1px solid #0b55c4; width: auto; margin: 3px;  text-align: center; padding: 5px 10px;}
*/
/* Page Section Link */
/*.page		{
	position: relative;
	float: left;
	font-size: 11px;
	font-weight: bold;
	color: #999;
	border: 1px solid #d1d1d1;
	width: auto;
	margin: 3px;
	text-align: center;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.paging:visited	{  font-size: 11px; font-weight: bold; color: #999;  }
.paging:active	{  font-size: 11px; font-weight: bold; color: #999;}
.paging:hover	{  font-size: 11px; font-weight: bold; color: #0b55c4;  }
*/

/*.pagerDB {
	color: #999;
	clear: both;
	position: absolute;
}
*/

div.pagerDB {
	clear: both;
	text-align: center;
	margin: 3px;
	padding:5px 10px;
	position: relative;
	top: -3px;
}

div.pagerDB a {
	border: 1px solid #d1d1d1;
	padding:5px 10px;
	color: #999;
	font-size:11px;
	font-size: 11px;
	font-weight: bold;
	color: #999;
	margin:0px;
}
div.pagerDB a:hover {border: 1px solid #0b55c4; padding:5px 10px; margin: 0px; font-size: 11px; font-weight: bold; color: #0b55c4; text-decoration:none;}
div.pagerDB b {border: 1px solid #d1d1d1; padding:5px 10px; font-size:11px; margin: 0px; color: #999; background-color: #efefef;}

/*
|********************************************************************************************
| 												    	                       Section Center 
|********************************************************************************************
*/

/*
|--------------------------------------------------------------------------------------------
| 													                                    Index
|--------------------------------------------------------------------------------------------
*/
.DivLogin 				{ width: 480px; height: 173px; margin: 30px auto; padding-top: 50px; background: url(../images/login.jpg); border: 1px solid #cdcdcd; }
.DivDisable				{ width: 457px; height: 173px; margin: 80px auto; padding-top: 50px; background: url(../images/disable.jpg); border: 1px solid #cdcdcd; }
.TxtDisable				{ position: relative; width: 360px; margin: 55px auto 0; text-align: center; font-family: Ms Sans Serif; font-size: 20px; font-weight: bold; color: #0b55c4; }
.DivInput 				{ margin: 15px 0 0 150px; }
.DivLogin .username, 
.password 				{ font-size: 12px; color: #999; width: 150px; height: 18px; padding-left: 3px; background: url(../images/bg_text_put.jpg); 	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #777777;
	border-right-color: #bbbbbb;
	border-bottom-color: #dddddd;
	border-left-color: #bbbbbb;  }
.BtLogin 				{ width: 57px; height: 28px; margin-left: 165px; background: url(../images/bt/bt_login.jpg);
	cursor: pointer;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid; }
/*
|--------------------------------------------------------------------------------------------
| 													                                     Home
|--------------------------------------------------------------------------------------------
*/
.ContentHelp	{ position: relative; width: 100%; height: auto; margin: 10px; background: url(../images/line_y_menu.jpg) repeat-y right top; }
.ContentLeft 	{ position: relative; width: 40%; height: auto; margin: 10px; }
.ContentCenter 	{ position: relative; float: left; width: 98%; height: auto; margin: 10px auto; }
.ContentLeft p	{ position: relative; width: 100%; color: #0B55C4; }
#ContactDate	{ font-family: Arial; font-size: 10px; color: #F00;}
.ContentCenter iframe		{ position: relative; width: 516px ; height: 124px; border: 1px solid #d1d1d1;}



#HomePageUser		{
	position: relative;
	margin: 5px;
	width: 180px;
	height: 230px;
}
#HomePageUser .userlogin {
	position: absolute;
	height: 80px;
	width: 80px;
	top: 7px;
	left: 50px;
}

#HomePageShotKey 	{ position: absolute; left: 180px; top: 0px;  margin: 0px 5px 5px; width: auto; height: auto;}


#HomePageKey		{ position: relative; float: left; width: 50px; height: 50px; border: 1px solid #e1e1e1; margin: 5px 5px 25px;}

.HomePageKey:link	{ position: relative; float: left; /*border: 1px solid #e1e1e1;*/ width: 61px; height: 61px; margin: 5px 5px 25px; font-family: Ms Sans Serif; font-weight: bold; color: #999; }
.HomePageKey:visited{ position: relative; float: left; border: 1px solid #e1e1e1; width: 61px; height: 61px; margin: 5px 5px 25px; font-family: Ms Sans Serif; font-weight: bold; color: #999;}
.HomePageKey:active	{ position: relative; float: left; border: 1px solid #e1e1e1; width: 61px; height: 61px; margin: 5px 5px 25px; font-family: Ms Sans Serif; font-weight: bold; color: #999;}
.HomePageKey:hover	{ position: relative; float: left; border: 1px solid #0b55c4; width: 61px; height: 61px; margin: 5px 5px 25px; color:#0b55c4; font-family: Ms Sans Serif; font-weight: bold;}
#ShtKyTxtHome		{ position: relative; margin: 0; text-align: center; }
#ShtKyTxtHome:hover	{ color:#0b55c4;}



#HomeRanThong		{ position: relative; margin: 0; width: 700px; height: 190px; }
#HomeRanThongDetail { position: relative; float: left; margin: 0; width: 80%; height: auto; }
#RTD1				{ position: relative; width: 99%; height: 124px; margin: 5px; border: 1px solid #FF0000;}
#RTD2				{ position: relative; width: 99%; height: 45px; margin: 5px; border: 1px solid #d7d7d7; }



/*
|--------------------------------------------------------------------------------------------
| 													                                  Product
|--------------------------------------------------------------------------------------------
*/


/* Add Page */

.div_text_title {
	width: 98%;}

.div_text_title #left {
	position: relative;
	float:left;
	width: 100%;
	margin-top: 15px;
	margin-right: 10px;
	margin-bottom: 15px;
}
.div_text_title #right { position: relative; float:left; width: 60%; margin-top: 15px; margin-right: 10px; margin-bottom: 15px;}	



/*
|********************************************************************************************
|														  		                         Link
|********************************************************************************************
*/
.FontThaiLink:link			{ font-family: Ms Sans Serif; font-weight: bold; color: #0b55c4;}
.FontThaiLink:visited		{ font-family: Ms Sans Serif; font-weight: bold; color: #0b55c4;}
.FontThaiLink:active		{ font-family: Ms Sans Serif; font-weight: bold; color: #0b55c4;}
.FontThaiLink:hover			{ font-family: Ms Sans Serif; font-weight: bold; color: #0b55c4; text-decoration: underline;}

.LinkTitle:link			{ font-size: 22px; font-weight: bold; color: #0b55c4; }
.LinkTitle:visited		{ font-size: 22px; font-weight: bold; color: #0b55c4; }
.LinkTitle:active		{ font-size: 22px; font-weight: bold; color: #0b55c4; }
.LinkTitle:hover		{ font-size: 22px; font-weight: bold; color: #0b55c4; text-decoration: underline; }

a:link 					{ color: #333;text-decoration: none;}
a:visited  				{ color: #333;text-decoration: none;}
a:hover 				{ color: #999;text-decoration: none;}

.TxtFeatureNav				{ font-size: 11px; font-family: Arial; font-weight: normal; color: #333; }
.LinkFeatureNav:link		{ font-size: 11px; font-family: Arial; font-weight: normal; color: #333; }
.LinkFeatureNav:visited		{ font-size: 11px; font-family: Arial; font-weight: normal; color: #333; }
.LinkFeatureNav:active		{ font-size: 11px; font-family: Arial; font-weight: normal; color: #333; }
.LinkFeatureNav:hover		{ font-size: 11px; font-family: Arial; font-weight: normal; color: #F90; text-decoration: underline; }


/*
|********************************************************************************************
|														  		                  Text Colour
|********************************************************************************************
*/
#TextRed				{ color: #F00;}
.DateStamp				{ font-family: Arial; font-size: 8px; color: #CCC;}
.DateStampRed			{ font-family: Arial; font-size: 8px; color: #F00;}



/*
|--------------------------------------------------------------------------------------------
| 													        Link Menu Top - [ Used All Page ]
|--------------------------------------------------------------------------------------------
*/
.LinkPayMent:link		{ font-weight: bold; color: #F00; text-decoration: underline;}
.LinkPayMent:visited	{ font-weight: bold; color: #F00; text-decoration: underline;}
.LinkPayMent:active		{ font-weight: bold; color: #F00; text-decoration: underline;}
.LinkPayMent:hover		{ font-weight: bold; color: #f90; text-decoration: underline;}

.LinkMenuLeft:link		{ font-weight: bold; color: #0b55c4;}	
.LinkMenuLeft:visited	{ font-weight: bold; color: #0b55c4;}
.LinkMenuLeft:active	{ font-weight: bold; color: #0b55c4;}
.LinkMenuLeft:hover		{ font-weight: bold; color: #999;}

.LinkRightTop1:link		{ font-size: 11px; font-weight: bold; color: #999; }
.LinkRightTop1:visited	{ font-size: 11px; font-weight: bold; color: #999; }
.LinkRightTop1:active	{ font-size: 11px; font-weight: bold; color: #999; }
.LinkRightTop1:hover	{ font-size: 11px; font-weight: bold; color: #0b55c4; }

.LinkRightTop:link		{ position: relative; float: left; font-size: 11px; font-weight: bold; color: #999; border: 1px solid #e1e1e1; width: 50px; height: 50px; }
.LinkRightTop:visited	{ position: relative; float: left; font-size: 11px; font-weight: bold; color: #999; border: 1px solid #e1e1e1; width: 50px; height: 50px;}
.LinkRightTop:active	{ position: relative; float: left; font-size: 11px; font-weight: bold; color: #999; border: 1px solid #e1e1e1; width: 50px; height: 50px; }
.LinkRightTop:hover		{ position: relative; float: left; font-size: 11px; font-weight: bold; color: #0b55c4; border: 1px solid #0b55c4; width: 50px; height: 50px; }


.LinkRightTop img		{ position: relative; top:7px; }
.LinkRightTop p			{ position: relative; top: -5px;}

*:first-child+html .LinkRightTop p			{ position: relative; top: -10px;}



/*
|--------------------------------------------------------------------------------------------
| 													     Link Menu Footer - [ Used All Page ]
|--------------------------------------------------------------------------------------------
*/

.link_menu_footer:link 		{color: #0b55c4;text-decoration: none;font-size: 11px;}
.link_menu_footer:visited	{color: #0b55c4;text-decoration: none;font-size: 11px;}
.link_menu_footer:hover 	{color: #0b55c4;text-decoration: underline;font-size: 11px;}
.link_menu_footer:active 	{color: #0b55c4;text-decoration: none;font-size: 11px;}

/*
|********************************************************************************************
| 															  		                    Align
|********************************************************************************************
*/

.p1 {
	position: relative;
	float: left;
	width: 90%;
	height: auto;
	padding: 10px;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.right {
	float: right;
}

.line {
	position: relative;
	clear: both;
	height: 13px;
	margin-bottom: 5px;
	margin-top: 5 px;
	background: url(../images/line.gif) repeat-x;
}

.line1 {
	background: url(../images/line1.gif) repeat-y center top;
}

.line2 {
	width: 100%
}



/*
|********************************************************************************************
| 															  		                     Form
|********************************************************************************************
*/
.TxtInputIndex	 		{ width: 20px; color: #333; font-size: 11px; text-align: center; }
.DropDown 				{ color: #333; font-size: 11px; }
.TxtInput				{ color: #333; font-size: 11px; }
.TxtInputGray			{ color: #888; font-size: 11px; font-family: Ms Sans Serif; font-weight: bold; }
.InputForm				{ width:120px; }
/*
|********************************************************************************************
| 															  		                    Table
|********************************************************************************************
*/
.TableHover				{ border-collapse: collapse; width: 98%; border: 1px solid #e7e7e7; color: #0b55c4; background: #fff; margin: 10px auto; }
table.TableHover thead tr .headerSortDown, 
table.TableHover thead tr .headerSortUp 	{ background-color: #09F; }
caption 				{ text-align: left; background: transparent; }
td, th 					{ border: 1px solid #e7e7e7; padding: 3px; color: #0b55c4; } 
thead th, tfoot th 		{ border: 1px solid #e7e7e7; text-align: center; background: #f0f0f0; color: #0b55c4;  padding-top:6px; }
tbody td a:link 		{ background: transparent; text-decoration: none; color: #0b55c4; }  
tbody td a:hover 		{ background: transparent; text-decoration: underline; }
tbody td a:visited 		{ background: transparent; color: #0b55c4; }  
tbody th a 				{ text-decoration: none; font-weight:normal; color: #999999; }
tbody th a:hover 		{ background: transparent; color: #FFFFFF; }
tbody th, tbody td 		{ text-align: center; } 
tbody th				{ color: #0B55C4; }  
tfoot td 				{ border: 1px solid #e7e7e7; background: #f3f3f3; padding-top:6px; }
.odd 					{ background: #f9f9f9; } 
tbody tr:hover ,td:hover ,tbody tr:hover th,tbody tr.odd:hover th 	{ background: #ffffdd; }

tfoot tr:hover th,		
tfoot tr.odd:hover th 	{  }

.TableAlignLeft 		{ text-align: left; }  
.TableAlignCenter 		{ text-align: center; }
.TableAlignRight 		{ text-align: right; }

/* TableSorter */
table.tablesorter 							{ width: 98%; text-align: left;	border: 1px solid #e7e7e7; margin-top: 10px; margin-right: auto; margin-bottom: 15px; margin-left: auto; }
table.tablesorter thead tr th, 
table.tablesorter tfoot tr th 				{ padding: 4px; }
table.tablesorter thead tr .header 			{ background: url("tablesorter/bg.gif") no-repeat center right #F0F0F0; cursor: pointer; text-align: center; }
table.tablesorter tbody td 					{ padding: 4px; }
table.tablesorter thead tr .headerSortUp 	{ background-image: url("tablesorter/asc.gif"); }
table.tablesorter thead tr .headerSortDown 	{ background-image: url("tablesorter/desc.gif"); }
table.tablesorter thead tr .headerSortDown, 
table.tablesorter thead tr .headerSortUp 	{ background-color: #F90; color:#FFF; }

/*
|********************************************************************************************
| 															  		          Menu Super Fish 
|********************************************************************************************
*/
.sf-menu, .sf-menu * 			{ margin: 0; padding: 0; list-style: none; }
.sf-menu 						{ line-height: 1.0; }
.sf-menu ul 					{ position: absolute; top: -999em; width: 100%; }
/*.sf-menu ul li 				{ width: 50%; padding-top: 1px; padding-left: 3px; padding-bottom: 1px; }*/
/*.sf-menu li:hover 			{ visibility: inherit;   fixes IE7 'sticky bug'  }*/
.sf-menu li 					{ float: left; position: relative; }
.sf-menu a 						{ display: block; position:	relative; }
.sf-menu li:hover ul,
.sf-menu li.sfHover ul 			{ left: 0; top: 27px; z-index: 999; }
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul 	{ top: -999em; }
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul 	{ left:	10em; top: 0; }
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul 	{ top: -999em; }
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul 	{ left:	10em; top: 0; }
.sf-menu a 						{ text-decoration:none; }
.sf-menu a, .sf-menu a:visited  { color: #13a; }
.sf-menu li 					{ background: #f0f0f0; }
.sf-menu li li 					{ background: #f0f0f0; width: 100%;	}
.sf-menu li li li 				{ background: #e6e6e6; }

.sf-menu a:hover				{ color: #999; }
.sf-menu li:hover,					
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:active 				{ background: #d8d8d8; }

/*** arrows **/
.sf-menu a.sf-with-ul 			{ padding-right: 2.25em; min-width:	1px; }
.sf-sub-indicator 				{ position: absolute; display: block; right: .75em; top: 1.05em; /* IE6 only */ width: 10px; height: 10px; text-indent: -999em; 	overflow: hidden; background: url('../images/arrows-ffffff.png') no-repeat -10px -100px; }
a > .sf-sub-indicator 			{ /* give all except IE6 the correct values */ top: .8em; background-position: 0 -100px; /* use translucent arrow for modern browsers*/ }
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator 				{ background-position: -10px -100px; /* arrow hovers for modern browsers*/ }

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator 					{ background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator 				{ background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator 	{ background-position: -10px 0; /* arrow hovers for modern browsers*/ }

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../../mkool-admin/images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off 					{ background: transparent; }

.UserLogin{
	text-align: center;
	padding-top: 25px;
}
/*
|********************************************************************************************
| 															  		                Impromptu 
|********************************************************************************************
*/
.jqifade						{ position: absolute; background: #000;  }
div.jqi							{ width: 409px; position: absolute; background: #333; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
div.jqi .jqicontainer			{ font-weight: normal; }
div.jqi .jqiclose				{ display:none; position: absolute; top: 4px; right: -2px; width: 18px; cursor: default; color: #FFF; font-weight: bold; }
div.jqi .jqimessage				{ text-align: center; color: #FFF; }
div.jqi .jqibuttons				{ text-align: center; }
div.jqi button					{ padding: 3px 0px; margin: 0 10px; background-color: #333; border: solid 0px #333; color: #ffffff; font-size: 11px; }
div.jqi button:hover			{ background-color: #728A8C; }
div.jqi button.jqidefaultbutton	{ background-color: none; }
.jqiwarning .jqi .jqibuttons	{ }

.qwer{ position:relative; top:6px; color:#F00 }
textarea.list_menu {
	width: 400px;
	height: 100px;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables features
 */

/*
 *  File:         demo_table.css
 *  CVS:          $Id$
 *  Description:  CSS descriptions for DataTables demo pages
 *  Author:       Allan Jardine
 *  Created:      Tue May 12 06:47:22 BST 2009
 *  Modified:     $Date$ by $Author$
 *  Language:     CSS
 *  Project:      DataTables
 *
 *  Copyright 2009 Allan Jardine. All Rights Reserved.
 *
 * ***************************************************************************
 * DESCRIPTION
 *
 * The styles given here are suitable for the demos that are used with the standard DataTables
 * distribution (see www.datatables.net). You will most likely wish to modify these styles to
 * meet the layout requirements of your site.
 *
 * Common issues:
 *   'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
 *     no conflict between the two pagination types. If you want to use full_numbers pagination
 *     ensure that you either have "example_alt_pagination" as a body class name, or better yet,
 *     modify that selector.
 *   Note that the path used for Images is relative. All images are by default located in
 *     ../images/ - relative to this CSS file.
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables features
 */

.dataTables_wrapper {
	position: relative;
	clear: both;
	zoom: 1; /* Feeling sorry for IE */
}

.dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 30px;
	margin-left: -125px;
	margin-top: -15px;
	padding: 14px 0 2px 0;
	border: 1px solid #ddd;
	text-align: center;
	color: #999;
	font-size: 14px;
	background-color: white;
}

.dataTables_length {
	width: 40%;
	float: left;
}

.dataTables_filter {
	width: 50%;
	float: right;
	text-align: right;
}

.dataTables_info {
	width: 60%;
	float: left;
}

.dataTables_paginate {
	float: right;
	text-align: right;
}

/* Pagination nested */
.paginate_disabled_previous, .paginate_enabled_previous,
.paginate_disabled_next, .paginate_enabled_next {
	height: 19px;
	float: left;
	cursor: pointer;
	*cursor: hand;
	color: #111 !important;
}
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover,
.paginate_disabled_next:hover, .paginate_enabled_next:hover {
	text-decoration: none !important;
}
.paginate_disabled_previous:active, .paginate_enabled_previous:active,
.paginate_disabled_next:active, .paginate_enabled_next:active {
	outline: none;
}

.paginate_disabled_previous,
.paginate_disabled_next {
	color: #666 !important;
}
.paginate_disabled_previous, .paginate_enabled_previous {
	padding-left: 23px;
}
.paginate_disabled_next, .paginate_enabled_next {
	padding-right: 23px;
	margin-left: 10px;
}

.paginate_disabled_previous {
	background: url('../images/back_disabled.png') no-repeat top left;
}

.paginate_enabled_previous {
	background: url('../images/back_enabled.png') no-repeat top left;
}
.paginate_enabled_previous:hover {
	background: url('../images/back_enabled_hover.png') no-repeat top left;
}

.paginate_disabled_next {
	background: url('../images/forward_disabled.png') no-repeat top right;
}

.paginate_enabled_next {
	background: url('../images/forward_enabled.png') no-repeat top right;
}
.paginate_enabled_next:hover {
	background: url('../images/forward_enabled_hover.png') no-repeat top right;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
	margin: 0 auto;
	clear: both;
	width: 100%;
	
	/* Note Firefox 3.5 and before have a bug with border-collapse
	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) 
	 * border-spacing: 0; is one possible option. Conditional-css.com is
	 * useful for this kind of thing
	 *
	 * Further note IE 6/7 has problems when calculating widths with border width.
	 * It subtracts one px relative to the other browsers from the first column, and
	 * adds one to the end...
	 *
	 * If you want that effect I'd suggest setting a border-top/left on th/td's and 
	 * then filling in the gaps with other borders.
	 */
}

table.display thead th {
	padding: 3px 18px 3px 10px;
	border-bottom: 1px solid black;
	font-weight: bold;
	cursor: pointer;
	* cursor: hand;
}

table.display tfoot th {
	padding: 3px 18px 3px 10px;
	border-top: 1px solid black;
	font-weight: bold;
}

table.display tr.heading2 td {
	border-bottom: 1px solid #aaa;
}

table.display td {
	padding: 3px 10px;
}

table.display td.center {
	text-align: center;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables sorting
 */

.sorting_asc {
	background: url('../images/sort_asc.png') no-repeat center right;
}

.sorting_desc {
	background: url('../images/sort_desc.png') no-repeat center right;
}

.sorting {
	background: url('../images/sort_both.png') no-repeat center right;
}

.sorting_asc_disabled {
	background: url('../images/sort_asc_disabled.png') no-repeat center right;
}

.sorting_desc_disabled {
	background: url('../images/sort_desc_disabled.png') no-repeat center right;
}
 
table.display thead th:active,
table.display thead td:active {
	outline: none;
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */
table.display tr.odd.gradeA {
	background-color: #ddffdd;
}

table.display tr.even.gradeA {
	background-color: #eeffee;
}

table.display tr.odd.gradeC {
	background-color: #ddddff;
}

table.display tr.even.gradeC {
	background-color: #eeeeff;
}

table.display tr.odd.gradeX {
	background-color: #ffdddd;
}

table.display tr.even.gradeX {
	background-color: #ffeeee;
}

table.display tr.odd.gradeU {
	background-color: #ddd;
}

table.display tr.even.gradeU {
	background-color: #eee;
}


tr.odd {
	background-color: #E2E4FF;
}

tr.even {
	background-color: white;
}





/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Misc
 */
.dataTables_scroll {
	clear: both;
}

.dataTables_scrollBody {
	*margin-top: -1px;
	-webkit-overflow-scrolling: touch;
}

.top, .bottom {
	padding: 15px;
	background-color: #F5F5F5;
	border: 1px solid #CCCCCC;
}

.top .dataTables_info {
	float: none;
}

.clear {
	clear: both;
}

.dataTables_empty {
	text-align: center;
}

tfoot input {
	margin: 0.5em 0;
	width: 100%;
	color: #444;
}

tfoot input.search_init {
	color: #999;
}

td.group {
	background-color: #d1cfd0;
	border-bottom: 2px solid #A19B9E;
	border-top: 2px solid #A19B9E;
}

td.details {
	background-color: #d1cfd0;
	border: 2px solid #A19B9E;
}


.example_alt_pagination div.dataTables_info {
	width: 40%;
}

.paging_full_numbers {
	width: 400px;
	height: 22px;
	line-height: 22px;
}

.paging_full_numbers a:active {
	outline: none
}

.paging_full_numbers a:hover {
	text-decoration: none;
}

.paging_full_numbers a.paginate_button,
 	.paging_full_numbers a.paginate_active {
	border: 1px solid #aaa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 2px 5px;
	margin: 0 3px;
	cursor: pointer;
	*cursor: hand;
	color: #333 !important;
}

.paging_full_numbers a.paginate_button {
	background-color: #ddd;
}

.paging_full_numbers a.paginate_button:hover {
	background-color: #ccc;
	text-decoration: none !important;
}

.paging_full_numbers a.paginate_active {
	background-color: #99B3FF;
}

table.display tr.even.row_selected td {
	background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
	background-color: #9FAFD1;
}


/*
 * Sorting classes for columns
 */
/* For the standard odd/even */
tr.odd td.sorting_1 {
	background-color: #D3D6FF;
}

tr.odd td.sorting_2 {
	background-color: #DADCFF;
}

tr.odd td.sorting_3 {
	background-color: #E0E2FF;
}

tr.even td.sorting_1 {
	background-color: #EAEBFF;
}

tr.even td.sorting_2 {
	background-color: #F2F3FF;
}

tr.even td.sorting_3 {
	background-color: #F9F9FF;
}


/* For the Conditional-CSS grading rows */
/*
 	Colour calculations (based off the main row colours)
  Level 1:
		dd > c4
		ee > d5
	Level 2:
	  dd > d1
	  ee > e2
 */
tr.odd.gradeA td.sorting_1 {
	background-color: #c4ffc4;
}

tr.odd.gradeA td.sorting_2 {
	background-color: #d1ffd1;
}

tr.odd.gradeA td.sorting_3 {
	background-color: #d1ffd1;
}

tr.even.gradeA td.sorting_1 {
	background-color: #d5ffd5;
}

tr.even.gradeA td.sorting_2 {
	background-color: #e2ffe2;
}

tr.even.gradeA td.sorting_3 {
	background-color: #e2ffe2;
}

tr.odd.gradeC td.sorting_1 {
	background-color: #c4c4ff;
}

tr.odd.gradeC td.sorting_2 {
	background-color: #d1d1ff;
}

tr.odd.gradeC td.sorting_3 {
	background-color: #d1d1ff;
}

tr.even.gradeC td.sorting_1 {
	background-color: #d5d5ff;
}

tr.even.gradeC td.sorting_2 {
	background-color: #e2e2ff;
}

tr.even.gradeC td.sorting_3 {
	background-color: #e2e2ff;
}

tr.odd.gradeX td.sorting_1 {
	background-color: #ffc4c4;
}

tr.odd.gradeX td.sorting_2 {
	background-color: #ffd1d1;
}

tr.odd.gradeX td.sorting_3 {
	background-color: #ffd1d1;
}

tr.even.gradeX td.sorting_1 {
	background-color: #ffd5d5;
}

tr.even.gradeX td.sorting_2 {
	background-color: #ffe2e2;
}

tr.even.gradeX td.sorting_3 {
	background-color: #ffe2e2;
}

tr.odd.gradeU td.sorting_1 {
	background-color: #c4c4c4;
}

tr.odd.gradeU td.sorting_2 {
	background-color: #d1d1d1;
}

tr.odd.gradeU td.sorting_3 {
	background-color: #d1d1d1;
}

tr.even.gradeU td.sorting_1 {
	background-color: #d5d5d5;
}

tr.even.gradeU td.sorting_2 {
	background-color: #e2e2e2;
}

tr.even.gradeU td.sorting_3 {
	background-color: #e2e2e2;
}


/*
 * Row highlighting example
 */
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
	background-color: #ECFFB3;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
	background-color: #E6FF99;
}

.ex_highlight_row #example tr.even:hover {
	background-color: #ECFFB3;
}

.ex_highlight_row #example tr.even:hover td.sorting_1 {
	background-color: #DDFF75;
}

.ex_highlight_row #example tr.even:hover td.sorting_2 {
	background-color: #E7FF9E;
}

.ex_highlight_row #example tr.even:hover td.sorting_3 {
	background-color: #E2FF89;
}

.ex_highlight_row #example tr.odd:hover {
	background-color: #E6FF99;
}

.ex_highlight_row #example tr.odd:hover td.sorting_1 {
	background-color: #D6FF5C;
}

.ex_highlight_row #example tr.odd:hover td.sorting_2 {
	background-color: #E0FF84;
}

.ex_highlight_row #example tr.odd:hover td.sorting_3 {
	background-color: #DBFF70;
}


/*
 * KeyTable
 */
table.KeyTable td {
	border: 3px solid transparent;
}

table.KeyTable td.focus {
	border: 3px solid #3366FF;
}

table.display tr.gradeA {
	background-color: #eeffee;
}

table.display tr.gradeC {
	background-color: #ddddff;
}

table.display tr.gradeX {
	background-color: #ffdddd;
}

table.display tr.gradeU {
	background-color: #ddd;
}

div.box {
	height: 100px;
	padding: 10px;
	overflow: auto;
	border: 1px solid #8080FF;
	background-color: #E5E5FF;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
	margin: 0 auto;
	clear: both;
	width: 100%;
	
	/* Note Firefox 3.5 and before have a bug with border-collapse
	 * ( https://bugzilla.mozilla.org/show%5Fbug.cgi?id=155955 ) 
	 * border-spacing: 0; is one possible option. Conditional-css.com is
	 * useful for this kind of thing
	 *
	 * Further note IE 6/7 has problems when calculating widths with border width.
	 * It subtracts one px relative to the other browsers from the first column, and
	 * adds one to the end...
	 *
	 * If you want that effect I'd suggest setting a border-top/left on th/td's and 
	 * then filling in the gaps with other borders.
	 */
}

table.display thead th {
	padding: 3px 18px 3px 10px;
	border-bottom: 1px solid black;
	font-weight: bold;
	cursor: pointer;
	* cursor: hand;
}

table.display tfoot th {
	padding: 3px 18px 3px 10px;
	border-top: 1px solid black;
	font-weight: bold;
}

table.display tr.heading2 td {
	border-bottom: 1px solid #aaa;
}

table.display td {
	padding: 3px 10px;
}

table.display td.center {
	text-align: center;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables sorting
 */

.sorting_asc {
	background: url('../images/sort_asc.png') no-repeat center right;
}

.sorting_desc {
	background: url('../images/sort_desc.png') no-repeat center right;
}

.sorting {
	background: url('../images/sort_both.png') no-repeat center right;
}

.sorting_asc_disabled {
	background: url('../images/sort_asc_disabled.png') no-repeat center right;
}

.sorting_desc_disabled {
	background: url('../images/sort_desc_disabled.png') no-repeat center right;
}





/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */
table.display tr.odd.gradeA {
	background-color: #ddffdd;
}

table.display tr.even.gradeA {
	background-color: #eeffee;
}

table.display tr.odd.gradeC {
	background-color: #ddddff;
}

table.display tr.even.gradeC {
	background-color: #eeeeff;
}

table.display tr.odd.gradeX {
	background-color: #ffdddd;
}

table.display tr.even.gradeX {
	background-color: #ffeeee;
}

table.display tr.odd.gradeU {
	background-color: #ddd;
}

table.display tr.even.gradeU {
	background-color: #eee;
}


tr.odd {
	background-color: #E2E4FF;
}

tr.even {
	background-color: white;
}
tfoot tr th{ background-color: #CC9900}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Misc
 */
.dataTables_scroll {
	clear: both;
}

.dataTables_scrollBody {
	*margin-top: -1px;
}

.top, .bottom {
	padding: 15px;
	background-color: #F5F5F5;
	border: 1px solid #CCCCCC;
}

.top .dataTables_info {
	float: none;
}

.clear {
	clear: both;
}

.dataTables_empty {
	text-align: center;
}

tfoot input {
	margin: 0.5em 0;
	width: 100%;
	color: #444;
}

tfoot input.search_init {
	color: #999;
}

td.group {
	background-color: #d1cfd0;
	border-bottom: 2px solid #A19B9E;
	border-top: 2px solid #A19B9E;
}

td.details {
	background-color: #d1cfd0;
	border: 2px solid #A19B9E;
}


.example_alt_pagination div.dataTables_info {
	width: 40%;
}

.paging_full_numbers {
	width: 400px;
	height: 22px;
	line-height: 22px;
}

.paging_full_numbers span.paginate_button,
 	.paging_full_numbers span.paginate_active {
	border: 1px solid #aaa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 2px 5px;
	margin: 0 3px;
	cursor: pointer;
	*cursor: hand;
}

.paging_full_numbers span.paginate_button {
	background-color: #ddd;
}

.paging_full_numbers span.paginate_button:hover {
	background-color: #ccc;
}

.paging_full_numbers span.paginate_active {
	background-color: #99B3FF;
}

table.display tr.even.row_selected td {
	background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
	background-color: #9FAFD1;
}


/*
 * Sorting classes for columns
 */
/* For the standard odd/even */
tr.odd td.sorting_1 {
	background-color: #D3D6FF;
}

tr.odd td.sorting_2 {
	background-color: #DADCFF;
}

tr.odd td.sorting_3 {
	background-color: #E0E2FF;
}

tr.even td.sorting_1 {
	background-color: #EAEBFF;
}

tr.even td.sorting_2 {
	background-color: #F2F3FF;
}

tr.even td.sorting_3 {
	background-color: #F9F9FF;
}


/* For the Conditional-CSS grading rows */
/*
 	Colour calculations (based off the main row colours)
  Level 1:
		dd > c4
		ee > d5
	Level 2:
	  dd > d1
	  ee > e2
 */
tr.odd.gradeA td.sorting_1 {
	background-color: #c4ffc4;
}

tr.odd.gradeA td.sorting_2 {
	background-color: #d1ffd1;
}

tr.odd.gradeA td.sorting_3 {
	background-color: #d1ffd1;
}

tr.even.gradeA td.sorting_1 {
	background-color: #d5ffd5;
}

tr.even.gradeA td.sorting_2 {
	background-color: #e2ffe2;
}

tr.even.gradeA td.sorting_3 {
	background-color: #e2ffe2;
}

tr.odd.gradeC td.sorting_1 {
	background-color: #c4c4ff;
}

tr.odd.gradeC td.sorting_2 {
	background-color: #d1d1ff;
}

tr.odd.gradeC td.sorting_3 {
	background-color: #d1d1ff;
}

tr.even.gradeC td.sorting_1 {
	background-color: #d5d5ff;
}

tr.even.gradeC td.sorting_2 {
	background-color: #e2e2ff;
}

tr.even.gradeC td.sorting_3 {
	background-color: #e2e2ff;
}

tr.odd.gradeX td.sorting_1 {
	background-color: #ffc4c4;
}

tr.odd.gradeX td.sorting_2 {
	background-color: #ffd1d1;
}

tr.odd.gradeX td.sorting_3 {
	background-color: #ffd1d1;
}

tr.even.gradeX td.sorting_1 {

	background-color: #ffd5d5;
}

tr.even.gradeX td.sorting_2 {
	background-color: #ffe2e2;
}

tr.even.gradeX td.sorting_3 {
	background-color: #ffe2e2;
}

tr.odd.gradeU td.sorting_1 {
	background-color: #c4c4c4;
}

tr.odd.gradeU td.sorting_2 {
	background-color: #d1d1d1;
}

tr.odd.gradeU td.sorting_3 {
	background-color: #d1d1d1;
}

tr.even.gradeU td.sorting_1 {
	background-color: #d5d5d5;
}

tr.even.gradeU td.sorting_2 {
	background-color: #e2e2e2;
}

tr.even.gradeU td.sorting_3 {
	background-color: #e2e2e2;
}


/*
 * Row highlighting example
 */
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
	background-color: #ECFFB3;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
	background-color: #E6FF99;
}

.ex_highlight_row #example tr.even:hover {
	background-color: #ECFFB3;
}

.ex_highlight_row #example tr.even:hover td.sorting_1 {
	background-color: #DDFF75;
}

.ex_highlight_row #example tr.even:hover td.sorting_2 {
	background-color: #E7FF9E;
}

.ex_highlight_row #example tr.even:hover td.sorting_3 {
	background-color: #E2FF89;
}

.ex_highlight_row #example tr.odd:hover {
	background-color: #E6FF99;
}

.ex_highlight_row #example tr.odd:hover td.sorting_1 {
	background-color: #D6FF5C;
}

.ex_highlight_row #example tr.odd:hover td.sorting_2 {
	background-color: #E0FF84;
}

.ex_highlight_row #example tr.odd:hover td.sorting_3 {
	background-color: #DBFF70;
}


/*
 * KeyTable
 */
table.KeyTable td {
	border: 3px solid transparent;
}

table.KeyTable td.focus {
	border: 3px solid #3366FF;
}

table.display tr.gradeA {
	background-color: #eeffee;
}

table.display tr.gradeC {
	background-color: #ddddff;
}

table.display tr.gradeX {
	background-color: #ffdddd;
}

table.display tr.gradeU {
	background-color: #ddd;
}