﻿/* CSS Document */
body{margin:0px; padding:0px; /*background:url(../images/bg-main.jpg);*/ font-family:Arial;}
.font1{font:normal 12px Arial; color:#666666;}
.hed1{font:bold 14px arial; color:#333333;}
.logo{width:1000px; height:85px; margin:0px auto; position:relative;}
.logo_in{width:250px; height:85px; float:left;}
.right_header{
width:350px;
float:right;
text-align:right;
color:#333333;
padding:40px 0 0 0;
font:normal 12px arial;
}
.footer{width:100%; margin:auto; text-align:center; font:normal 12px Arial, Helvetica, sans-serif; color:#666666; /*padding:6px 279px;*/ border-top:solid 1px #999999;}
.right_header a{
margin:0 5px 0 5px;
text-decoration:underline;
color:#333333;
}
.right_header a.logout{
background:url(../images/user_logout.png) no-repeat right;
padding-right:20px;
}

.main_div{margin:auto; width: 1000px; position:relative; background:url(../images/menu_bg.png) no-repeat #fefefe;}
.menu_main{width:1000px; height:35px; margin:auto; position:relative;}
.body_data{width:970px; margin:auto; position:relative; margin:15px; }
.n-success{background-color: #A3E6BD;
    background-image: url("../images/notification-tick.gif");}
.notification{background-position: 20px 10px;
    background-repeat: no-repeat;
    border: 1px solid #FFFFFF;
    display: block;
    margin-bottom: 12px;
    padding: 10px 20px 10px 45px;}	
.n-information{background-color: #9FDDEA;
    background-image: url("../images/notification-information.gif");}
.n-attention{ background-color: #F9E497;
    background-image: url("../images/notification-exclamation.gif");}
.n-error{background-color: #FFC6CA;
    background-image: url("../images/notification-slash.gif");}	
/*textbox*/
.text_box_main{width:970px; height:37px; margin:5px auto;}
.text_box_text{width:220px; height:18px; float:left; font:bold 12px Arial; color:#666666; text-align:right; margin:5px 0px;}
.text_box_text_double{height:18px;/* float:left;*/ font:bold 12px Arial; color:#666666; text-align:right; margin:5px 0px;}
.text_box_text_product{width:168px; height:18px; float:left; font:bold 12px Arial; color:#666666; text-align:right; margin:5px 0px;}
.text_box_text_view{width:130px; height:18px; float:left; font:bold 12px Arial; color:#666666; text-align:left; margin:5px 0px;}
.text_box{width:710px; height:35px; float:left; margin-left:5px;}
.input{-moz-border-radius: 3px 3px 3px 3px;
	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset;
    	border: 1px solid #CCCCCC;
    	color: #424242;
    	font-family: Arial;
    	font-size: 12px;
    	outline: medium none;
    	padding: 5px;}
.login_button_main{width:500px; height:35px; margin-left:95px; text-align:center;}
.input:focus 
, textarea:focus
, select:focus{border: 1px solid #80bfff;
	 -moz-box-shadow: 0 0 3px #80bfff, 0 1px 2px rgba(0, 0, 0, .15) inset;
    -webkit-box-shadow: 0 0 3px #80bfff, 0 1px 2px rgba(0, 0, 0, .15) inset;
    box-shadow: 0 0 3px #80bfff, 0 1px 2px rgba(0, 0, 0, .15) inset;}
/*input error textbox */
.input.error, textarea.error{background-image: url("img/txt-error.gif");
    border-color: #D35757;}
.error {
    color: #B70B0B;
	}
	
.login_button_main{width:800px; height:45px; margin-left:95px; text-align:center;}
div.uploader {
  position: relative;
  float: left;
  overflow: hidden;
  cursor: default;
}

div.uploader span.action {
  float: left;
  display: inline;
  padding: 2px 0px;
  overflow: hidden;
  cursor: pointer;
}

div.uploader span.filename {
  padding: 0px 10px;
  float: left;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

div.uploader input {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  float: right;
  height: 25px;
  border: none;
  cursor: default;
}
/* Uploader */
div.uploader {
  width: 190px;
  margin-bottom: 20px;
  cursor: pointer;
}

div.uploader span.action {
  width: 85px;
  text-align: center;
  text-shadow: #fff 0px 1px 0px;
  background-color: #fff;
  font-size: 11px;
  font-weight: bold;
}

div.uploader span.filename {
  color: #777;
  width: 82px;
  border-right: solid 1px #bbb;
  font-size: 11px;
}

div.uploader input {
  width: 190px;
}

div.uploader.disabled span.action {
  color: #aaa;
}

div.uploader.disabled span.filename {
  border-color: #ddd;
  color: #aaa;
}
div.uploader {
  background-position: 0px -297px;
  height: 28px;
}

div.uploader span.action {
  background-position: right -409px;
  height: 24px;
  line-height: 24px;
}

div.uploader span.filename {
  height: 24px;
  /* change this line to adjust positioning of filename area */
  margin: 2px 0px 2px 2px;
  line-height: 24px;
}

div.uploader.focus,
div.uploader.hover,
div.uploader:hover {
  background-position: 0px -353px;
}

div.uploader.focus span.action,
div.uploader.hover span.action,
div.uploader:hover span.action {
  background-position: right -437px;
}

div.uploader.active span.action,
div.uploader:active span.action {
  background-position: right -465px;
}

div.uploader.focus.active span.action,
div.uploader:focus.active span.action,
div.uploader.focus:active span.action,
div.uploader:focus:active span.action {
  background-position: right -493px;
}

div.uploader.disabled {
  background-position: 0px -325px;
}

div.uploader.disabled span.action {
  background-position: right -381px;
}
div.selector, 
div.selector span, 
div.checker span, 
div.radio span, 
div.uploader, 
div.uploader span.action {
  background-image: url(../images/sprite.png);
  background-repeat: no-repeat;
  background-position: -76px -260px;
}
.selector, 
.radio, 
.checker, 
.uploader, 
.selector *, 
.radio *, 
.checker *, 
.uploader *{
	margin: 0;
	padding: 0;
}
div.selector select {
	position: absolute;
	opacity: 0;
  height: 25px;
  border: none;
  background: none;
}
div.footer {
margin:auto;
 font-family:calibri; 
 font-size:12px; 
 padding-top:20px;
 text-align:center;
 width:100%;
}

/*


/*menu*/
/*---------------- menu----------------------*/
.menu {font-size:11px;padding:0px 10px 0 10px; float:left; width:880px;}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none; height:34px;}

/* style the sub-level lists */
.menu ul ul {width: auto;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {float:left;height:34px;line-height:34px;}

/* style the sub level list items */
.menu ul ul li {display:block;width: auto;height:auto;position:relative;line-height:1em;}

/* style the links for the top level */
.menu a, .menu a:visited {display:block;float:left;height:100%;font-size:12px;text-decoration:none;color:#fff;padding:0 21px 0 17px;}
.menu a.current{background-color:#81BEF7;}
/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {display:block;background:#57c0e8; border-bottom:1px #81dafc solid; color:#fff;width:15em;height:100%;line-height:1em;padding:1em 1em;}
.menu ul table ul a, .menu ul table ul a:visited  {width:15em; w\idth:12em;}


/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; left:0; top:0; font-size:1em; z-index:-1;}
.menu ul ul table {lef\t:-1px;}
.menu ul ul table ul.left {margin-lef\t:2px;}

.menu li:hover {position:relative;}
* html .menu a:hover {position:relative;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#57c0e8;}
/* style the fourth level background */
.menu ul ul ul ul a, .menu ul ul ul ul a:visited {background:#57c0e8;}
/* style the sub level 1 background */
.menu ul :hover a.sub1 {background:url(../images/arrow.gif) no-repeat right #309dc7;}
/* style the sub level 2 background */
.menu ul ul :hover a.sub2 {background:url(../images/arrow.gif) no-repeat right #088bb4;}

/* style the level hovers */
/* first */
.menu a:hover {color:#fff;background-color:#81BEF7;}
.menu :hover > a {color:#fff;background-color:#81BEF7;}
/* second */
.menu ul ul a:hover{color:#fff;background:url(../images/menu_bg_a.gif) repeat-x center;}
.menu ul ul :hover > a {color:#fff;background:url(../images/menu_bg_a.gif) repeat-x center;}
/* third */
.menu ul ul ul a:hover {background:url(../images/menu_bg_a.gif) repeat-x center;}
.menu ul ul ul :hover > a {background:url(../images/menu_bg_a.gif) repeat-x center;}
/* fourth */
.menu ul ul ul ul a:hover {background:url(../images/menu_bg_a.gif) repeat-x center;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:34px;left:0;width:14em; z-index:999;}

/* position the third level flyout menu */
.menu ul ul ul{left:12.8em;top:0;width:13em;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-14em;}


/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {visibility:visible; height:auto; padding-bottom:3em; background:transparent url(images/trans.gif);}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
/*grid*/
a, 
a:visited { 
	color:#0063be; text-decoration: none; 
	}

a:hover, a:active { 
	text-decoration: none; 
	}
div.module div.module-table-body { 
	background: url(../images/module-body-right-bg.gif) no-repeat scroll bottom right; 
	padding: 0; 
	float: left; 
	width: 100%; 
	}
div.module h2 { 
    /* Sliding right image */
    background: url(../images/module-header-left-bg.gif) no-repeat scroll top left; 
	display: block;
	float: left;
	height: 32px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	margin-right: 0px;
	padding-right: 0px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	/* FONT PROPERTIES */
	text-decoration: none;
	color: #444444;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	width: 100%;
	margin-bottom: 0;
	letter-spacing: normal
	}
div.module h2 span { 
	/* Background left image */ 
	background: url(../images/module-header-right-bg.gif) no-repeat top right; 
	display: block;
	line-height: 20px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	padding: 7px 0 5px 18px;
}
div.module table {
	width: 100%; 
	margin: 0 0 10px 0;
	border-left: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	}

div.module table.tr {
	border-collapse: separate;
	border-right: 1px solid #aaaaaa;
	border-left: 1px solid #aaaaaa;
	}

div.module table th {
	background-color: #eeeeee;
	color: #444444;
	padding: 5px;
	text-align: left;
	border-right: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	}
	
div.module table td {
	background-color: #ffffff;
	padding: 5px;;
	border-right: 1px solid #d9d9d9;
	}

div.module table tr.odd td { /* You can use this style if you want to do zebra-colored tables with other technique than Table Sorter script used here */
	background-color: #f1f5fa;
	}
	
.table-apply {
	width: 40%; float: right; text-align: right; margin-right: 10px;
	}
table.tablesorter {
	/*font-family:arial;
	/*background-color: #CDCDCD;*/
	/*margin:10px 0pt 15px;*/
	/*font-size: 8pt;*/
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	/*background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;*/
}
table.tablesorter thead tr .header {
	background-image: url(../images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#f1f5fa;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(../images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(../images/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #dddddd;
}
.pager {
	display: block; padding: 0px 10px 10px 10px;  width: 40%; float: left; 
	}

.pager .first,
.pager .prev,
.pager .next,
.pager .last {
	margin-bottom: -2px;
	}
	
/* -------------------- Pagination -------------------- */

.pagination { margin-bottom: 20px; float: right; font:normal 12px arial; }
.pagination a.button { margin-right: 10px; }
.pagination a.last { margin-right: 0; }
.pagination .numbers { float: left; padding-top: 3px; margin-right: 15px; }
.pagination .numbers span { padding: 0 5px 0 5px; } 
.pagination .current { font-weight: bold; }
/* button outside a module box */
a.button {
    /* Sliding right image */
    background: transparent url(../images/button-right-bg-m.gif) no-repeat scroll top right; 
	display: block;
	float: left;
	height: 26px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	padding-right: 11px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	/* FONT PROPERTIES */
	text-decoration: none;
	color: #444444;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	}
	
a.button span {
	/* Background left image */ 
	background: transparent url(../images/button-left-bg-m.gif) no-repeat top left; 
	display: block;
	line-height: 15px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	padding: 4px 0 7px 10px;
	}

a.button:hover { 
	background-position: bottom right; color:#0063be; 
	}

a.button:hover span{
	background-position: bottom left;
	color:#0063be;
	}
/* -------------------------------------------------------------- 
   Search
-------------------------------------------------------------- */	
#search
	{
		position: absolute;
		right:17px;
		top: 2px;
	}
	
	#search input
	{
		background: #fff;
		width: 200px;
		color: #999;
		padding: 7px;
		margin-right: .25em;
	}
	
	#search .submit
	{
		background: url(../images/search-icon.png) no-repeat 0 0;
		border: none !important;
		cursor:pointer;
		height: 30px;
		padding:0;
		position:absolute;
		right: 5px;
		top:9px;
		width:20px;
		
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	
	#search button
	{
		position: relative;
		top: -1px;
		*top: 3px;
	}


