@charset "UTF-8";
/*
HPS INTELLIGENCE SOFTWARE
GUI Designed By:
Jaturong-Slice2CSS

email: jaturong@slice2css.com
mobile: +66(0)81-620-1219
--
CSS Structure By:
Radiz-Slice2CSS

email: radiz@slice2css.com
mobile: +66(0)84-103-8552
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li{
list-style:none;}
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	
}

* {margin: 0; padding: 0;}

body {
    font-family: Arial, Tahoma, san-serif, serif;
    font-size: 12px;
    background: #000 url(../images/bg/bg_body.jpg) repeat-x;
}

a {color: #666; text-decoration: none;}
/*a:hover {color: #0092bf; text-decoration: none; font-weight: bold;}*/

#lightEffect {width: 100%; background: url(../images/bg/bg_lightEffect.jpg) top center no-repeat; margin: 0 auto}
#mainContainer {width: 950px; margin: 0 auto;}

#headerWrapper {width: 938px; height: 94px; padding: 24px 0 0 12px; position: relative; margin-bottom: 60px;}
#headerWrapper h1 {width: 280px; height: 82px; background: url(../images/bg/bg_logo-trans.png) no-repeat;}
#headerWrapper h1 a {width: 280px; height: 82px; display: block; text-decoration: none;}
#headerWrapper h1 a:hover {text-decoration: none;}
#headerWrapper h1 span {visibility: hidden;}
  
/* Start mainNavigation */
#headerWrapper ul#mainNavigation {width: 487px; height: 38px; margin: 0; padding: 0; position: absolute; top: 42px; right: 10px;}
#headerWrapper ul#mainNavigation li {list-style: none;  position: relative; float: left;}
#headerWrapper ul#mainNavigation li a {display: block; height: 38px; text-decoration: none; background-position: 0 0; background-repeat: no-repeat;}
 
#headerWrapper ul#mainNavigation li#home a {width: 91px; background-image: url(../images/navigation/home.jpg); background-repeat: no-repeat;}
#headerWrapper ul#mainNavigation li#product a {width: 116px; background-image: url(../images/navigation/product.jpg); background-repeat: no-repeat;}
#headerWrapper ul#mainNavigation li#service a {width: 101px; background-image: url(../images/navigation/services.jpg); background-repeat: no-repeat;}
#headerWrapper ul#mainNavigation li#about a {width: 96px; background-image: url(../images/navigation/about.jpg); background-repeat: no-repeat;}
#headerWrapper ul#mainNavigation li#contact a {width: 83px; background-image: url(../images/navigation/contact.jpg); background-repeat: no-repeat;}
  
#headerWrapper ul#mainNavigation li a:hover {background-position: 0 -38px;}
#headerWrapper ul#mainNavigation li span {visibility: hidden;}
  
/* Start subNavigation */
#headerWrapper ul#subNavigation {width: 643px; height: 30px; margin: 0; padding: 0; position: absolute; top: 88px; right: 38px;}
#headerWrapper ul#subNavigation li {float: left; position: relative; list-style: none;}
#headerWrapper ul#subNavigation li a {display: block; height: 30px; text-decoration: none; background-position: 0 0; background-repeat: no-repeat;}
  
#headerWrapper ul#subNavigation li#job a {width: 152px; background-image: url(../images/navigation/job.jpg); background-repeat: no-repeat;}
#headerWrapper ul#subNavigation li#newsEvents a {width: 113px; background-image: url(../images/navigation/newsEvents.jpg); background-repeat: no-repeat;}
#headerWrapper ul#subNavigation li#forums a {width: 74px; background-image: url(../images/navigation/forums.jpg); background-repeat: no-repeat;}
#headerWrapper ul#subNavigation li#gallery a {width: 133px; background-image: url(../images/navigation/gallery.jpg); background-repeat: no-repeat;}
#headerWrapper ul#subNavigation li#download a {width: 99px; background-image: url(../images/navigation/downloads.jpg); background-repeat: no-repeat;}
#headerWrapper ul#subNavigation li#weblink a {width: 72px; background-image: url(../images/navigation/links.jpg); background-repeat: no-repeat;}
  
#headerWrapper ul#subNavigation li a:hover {background-position: 0 -30px;}
#headerWrapper ul#subNavigation li span {visibility: hidden;}
 
#advertiseWrapper {width: 950px; height: 303px;}
.productPicture {width: 542px; height: 303px; float: left; padding-left: 45px;}
.productDetails {width: 334px; float: right; padding-top: 60px;}
.productDetails h2 {font-size: 40px; color: #B7E15E ;}
.productDetails p {color: #ffffff;}
	
#contentWrapper {width: 920px; background-image: url(../images/bgcon.png); padding: 0 15px 0 15px; color: #ffffff; overflow:hidden;}
#contentWrapper:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#contentWrapper h2{color: #B7E15E;}


.contentSection {margin-bottom: 10px; overflow: hidden;}
.contentSection:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.customercontent{padding:15px 13px 15px 0px}
.customerhead{width:890px;height:31px; padding:0px;}
.customerhead h3{text-align:right; color:#ffffff}

.customermenu{width:180px; height:500px;margin-top:-5px;}

.customerbody{width:726px; height:500px;}
.customerbodycontent{padding:0px; width:670px; margin-left:0px;margin-top:0px;}

.customerbodycontent h4{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
font-size:24px;
font-weight:bold;
line-height:26px;
padding:0 0 22px;
color:#CCFFFF;
}
.customerbodycontent h3{height:30px;color:#B7E15E }
.customerbodycontent input{width:300px}
.adminbodycontent{padding:15px; width:695px; margin-left:15px;margin-top:10px;}
.customerpackgagecontent{padding:15px; width:900px; margin-left:0px;margin-top:5px;}
 .customershow{padding:10px}
 .customervideocontent{padding:3px 15px 15px 10px; width:709px; margin-left:0px;margin-top:0px;}
 .customervideocontentdetail{width:900px;height:440px ;border:solid 0px #003366;margin-top:10px}
 .customerprofiledetail{width:900px;height:440px;margin-top:0px;border:solid 0px #A8D4D9}
 .customerindexcontent{background-color:#EFF5FB;width:727px;height:500px ;border:solid 2px #A8D4D9;}
 .fontheadcollum{color:#B7E15E;font-weight:bold;text-decoration:none;background: url(../images/line_under.png);height:30px}
h2 {font-size: 25px; color: #444; font-weight: bold; margin-bottom: 20px;  padding-top: 30px;}
h2 em {font-style: normal; font-weight: normal; font-size: 20px; color: #8b8b8b; display: block;}

/* Start leftColumn */
.leftColumn {width: 630px;}
.leftColumn:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
  
.leftColumn h3 {font-size: 15px; color: #CCFFFF ; padding-bottom: 5px; border-bottom: 2px #d8d8d8 solid; margin-bottom: 20px;}
.leftColumn h4 {color: #B7E15E ;}
.leftColumn h2 {color: #B7E15E ;}
.leftColumn h2 em{color:#FFFFFF;}

 .bodycustomer {height:500px}
 .bodycustomer h3{font-size: 15px; color: #B7E15E ; padding-bottom: 5px; border-bottom: 1px #d8d8d8 solid; width:300px}
#eventsession {width: 620px; padding-left: 10px; overflow: hidden;}
#eventsession:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#eventsession p, #whatnews .showpic {margin-bottom: 10px;}
#whatnews {width: 345px; float: left;}
#whatnews ol {list-style: none;}
#whatnews ol:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#whatnews .showpic li {display: block; float: left; width: 142px; height: 104px; margin-right: 10px; /margin-bottom: 10px; border: 2px #d8d8d8 solid; list-style: none;}
#whatnews .showpic:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#newproducts {width: 260px; float: right; overflow:visible; }
#newproducts ol {list-style: none;}
#newproducts ol:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
			
#newproducts ol li:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
#newproducts ol li h4 {padding-top: 25px; margin-bottom: 20px;}
#newproducts ol li h4 em {font-style: normal; color: #6c6c6c; display: block;}
#newproducts ol li img {float: left;}
			
.moreDetails a {color: #69ba01; text-decoration: none;}
.moreDetails a:hover {color: #B7E15E ; text-decoration: none;}

.leftColumn .productContent-fLeft, 
.leftColumn .productContent-fRight {width: 272px; padding-bottom: 10px;}

.leftColumn .productContent-fLeft h5,
.leftColumn .productContent-fRight h5 {font-size: 14px; color: #B7E15E ; margin-bottom: 10px;}

.leftColumn .productContent-fLeft p,
.leftColumn .productContent-fRight p {margin-bottom: 10px;}

.leftColumn .productContent-fLeft p.learnMore,
.leftColumn .productContent-fRight p.learnMore {margin-top: 10px; border-top: 1px solid #efefef; padding-top: 5px;}

.leftColumn .productContent-fLeft {float: left;}
.leftColumn .productContent-fRight {float: right; margin-right: 25px; _display: inline;}
	  
/* Start rightColumn */
.rightColumn {width: 260px; float: right;}
.rightColumn h3 {font-size: 15px; color: #CCFFFF ; padding-bottom: 5px; border-bottom: 2px #d8d8d8 solid; margin-bottom: 20px;}
.rightColumn h4 {color: #B7E15E ;}
.rightColumn p {margin-bottom: 10px;}
.rightColumn ol {list-style: none;}
.rightColumn ol:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
	
.rightColumn #loginBox {width: 259px; height: 166px; margin: 15px 0 38px; background: url(../images/bg/bg_login_box-trnas.png) no-repeat; color: #fff; position: relative;}
.rightColumn #loginBox h2 {font-size: 12px; color: #656565; padding: 10px 0 0 10px; margin-bottom: 5px!important;}
.rightColumn #loginBox label {width: 60px; display: block; text-align: right; margin-right: 10px; float: left;}
.rightColumn #loginBox ul {list-style: none; padding: 5px;}
.rightColumn #loginBox ul li {margin-bottom: 5px; _margin-bottom: -12px; margin-left:15px}
.rightColumn #loginBox ul li:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.rightColumn #loginBox .aligncenter {padding-left:85px}
.rightColumn #loginBox input[type='text'] {width: 135px; height: 20px; background: #c9c9c9;}
.rightColumn #loginBox input[type='password'] {width: 135px; height: 20px; background: #c9c9c9;}
.rightColumn #loginBox .reminder {font-size: 10px!important; position: absolute; top: 140px; /top: 148px; _top: 143px;  left: 5px;}
.rightColumn #loginBox .reminder a {color: #fff; text-decoration: none; font-weight: normal;}
.rightColumn #loginBox .reminder a:hover {color: #d2fffe; text-decoration: none; font-weight: normal;}
	
.rightColumn .productContent {width: 272px; padding-bottom: 35px;}
.rightColumn .productContent h5 {font-size: 14px; color: #B7E15E ; margin-bottom: 10px;}
.rightColumn .productContent p {margin-bottom: 10px;}
.rightColumn .productContent p.learnMore {margin-top: 10px; border-top: 1px solid #efefef; padding-top: 5px;}

/* Footer */		
#footer {clear: both; border-top: 1px solid #d8d8d8; padding: 25px 0 25px 15px; margin-top: 0px;}
.footer-reflex {width: 950px; height: 36px; margin: 0 auto 30px; background: url(../images/bg/footer_shadow-trans.png) no-repeat;}	

/* Other */	
.headerContent {font-size: 14px; font-weight:bold;  color: #FFFFF ; margin-bottom: 10px;}
.productList ul { margin-bottom:20px; margin-top:2px;}
.productList ul li { list-style:circle; margin-left:15px; margin-bottom:5px;}
.systemRequirement{border:solid 1px #999999; padding:5px; background-color:#f2f2f2;}

/* Menu ma*/
#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background: url(../images/bgleft.png) no-repeat;
color: #333;
height: 500px;
}

* html #blueblock{  
w\idth: 147px;  
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#blueblock li.current a {
background-color: #99cc99;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #669966;
background-color: #009966;
color: #fff;
text-decoration: none;
width: 100%;
 
}

html>body #blueblock li a{  
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #99ff99;
background-color: #99cc99;
color: #fff;
}
.set_button {
background-color:#E6E6FA;
border:1px solid #C0C0C0;
font-family:"Helvetica";
font-size:11px;
width:100px;
text-align:center;
}
.set_button:hover {
cursor:hand;
}


/*globalnav*/

#globalnav {
	position:relative;
	float:left;
	width:721px;
	padding:0 0 1.75em 0em;
	margin:0;
	list-style:none;
	line-height:1em;
	 background:url(../images/tab-line.png) repeat-x bottom;
    font-size:12px;
    display:block;
	height:35px;
}

#globalnav LI {
	float:left;
	margin:0;
	padding:0;
}

#globalnav A {
    padding:6px 10px 6px 10px;
    color:#444444;
    width:117px;
    display:block;
    text-align:center;  
	 border:solid 1px #D7DCE1;
    border-bottom:solid 2px #A8D4D9;
    background-color:#edf2fb;
}
#globalnav A  img{
    height:24px;
    width:24px;
	border:0px;
}
#globalnav A  div{ 
 font-family:Verdana, Arial, Sans-Serif;
    font-weight:bold;
    white-space:nowrap;
    line-height:145%;
    font-size:92%;
}
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
	border:solid 2px #A8D4D9;
    border-bottom-color:#ffffff;
    background-color:#ffffff;
	
}

#globalnav A.here:link,
#globalnav A.here:visited {
	position:relative;
	z-index:102;
}


#globalnavcase {
	position:relative;
	float:left;
	width:721px;
	padding:0 0 1.75em 0em;
	margin:0;
	list-style:none;
	line-height:1em;
	 background:url(../images/tab-line.png) repeat-x bottom;
    font-size:12px;
    display:block;
	height:35px;
}

#globalnavcase LI {
	float:left;
	margin:0;
	padding:0;
}

#globalnavcase A {
    padding:6px 10px 6px 10px;
    color:#444444;
    width:97px;
    display:block;
    text-align:center;  
	 border:solid 1px #D7DCE1;
    border-bottom:solid 2px #A8D4D9;
    background-color:#edf2fb;
}
#globalnavcase A  img{
    height:24px;
    width:24px;
	border:0px;
}
#globalnavcase A  div{ 
 font-family:Verdana, Arial, Sans-Serif;
    font-weight:bold;
    white-space:nowrap;
    line-height:145%;
    font-size:92%;
}
#globalnavcase A:active,
#globalnavcase A.here:link,
#globalnavcase A.here:visited {
	border:solid 2px #A8D4D9;
    border-bottom-color:#ffffff;
    background-color:#ffffff;
	
}

#globalnavcase A.here:link,
#globalnavcase A.here:visited {
	position:relative;
	z-index:102;
}
/*subnav*/

#globalnav UL {
	position:absolute;
	left:0;
	top:1.5em;
	float:left;
	background:#bbb;
	width:100%;
	margin:0;
	padding:0.25em 0.25em 0.25em 1em;
	list-style:none;
	border-top:1px solid #fff;
}

#globalnav UL LI {
	float:left;
	display:block;
	margin-top:1px;
}

#globalnav UL A {
	background:#bbb;
	color:#fff;
	display:inline;
	margin:0;
	padding:0 1em;
	border:0
}

#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
	color:#444;
}
#LatestTop {
background-color:#F0F5FB;
border-top:1px solid #DCDCDC;
margin:13px 0 0;
min-height:108px;
overflow:auto;
padding:0;
}
.LatestBox {
float:left;
font-family:Verdana,Arial;
font-size:11px;
padding:6px;
width:23%;
}
.LatestBox h1 {
font-family:Geneva,Arial,Helvetica,sans-serif;
font-size:16px;
margin:0;
color:#0000FF;
text-decoration:none;
font-weight:bold;
line-height:28px;
width:243px;
}
ul.LatestList {
font-family:Verdana,Arial,Sans-Serif;
font-size:10px;
list-style-image:url(../images/ArrowBlue.png);
list-style-type:circle;
margin:0 0 0 22px;
padding:2px 0 0;
color:#000080;
}
#Tabs {
height:42px;
left:0;
margin:0 0 -10px;
overflow:hidden;
position:relative;
width:950px;
color:#B7E15E !important;
font-weight:bold;
text-decoration:none;
/*background:transparent url(../images/line_unselectedsubnav.png) repeat-x scroll center bottom;*/
}
#Tabs ul {
margin-left:0;
position:relative;
width:3000px;
}
#Tabs li div.subNavMenuPreFill {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/line_unselectedsubnav.png) repeat-x scroll center bottom;
 
}
.subNavMenuPreFill {
height:45px;
width:20px;
}
#Tabs li div.subNavMenuFill {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/line_unselectedsubnav.png) repeat-x scroll center bottom;
}
.subNavMenuFill {
height:45px;
width:960px;
}
#Tabs li {
float:left;
text-transform:uppercase;
}
#Tabs li > a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
 background:transparent url(../images/line_unselectedsubnav.png) repeat-x scroll center bottom;
}
#Tabs li a {
display:block;
height:20px;
padding:6px 8px 10px;
 background:transparent url(../images/line_unselectedsubnav.png) repeat-x scroll center bottom;
}
#Tabs ul li span a {
 color:#ffff33;
}
 
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#Tabs li.active span a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/line_selectedsubnav.png) no-repeat scroll center bottom;
}
 
#Tabs li.active span a {
color:#FFFFFF !important;
text-decoration:none;
}
 
#Tabs li a {
display:block;
height:29px;
padding:6px 8px 10px;
}
#nav-border {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/bg_global_nav.png) no-repeat scroll 0 0;
height:42px;
left:0;
position:absolute;
top:0;
width:960px;
}
#nav {
height:36px;
margin-bottom:-5px;
overflow:hidden;
padding:0 0 0 17px;
position:relative;
width:950px;
z-index:1000;
background:transparent url(../images/bg_global_nav.png) no-repeat scroll 0 0;
}

#nav #menu li.menu-Home {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/icon_house_unselected.png) no-repeat scroll center center;
height:31px;
padding:0;
width:43px;
}
#nav ul li {
cursor:pointer;
display:block;
float:left;
margin:0;
position:relative;
}
#nav li, #nav li a {
-x-system-font:none;
font-family:Arial,Helvetica,Sans-serif;
font-size:14px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:16px;
}
#nav li.active, #nav #menu li a {
height:15px;
margin-bottom:1px;
margin-top:1px;
text-decoration:none;
}
#nav li a:hover, #nav li.active {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/selected_global_nav.png) repeat scroll 0 0;
color:#FFFFFF;
}

#nav li.active, #nav li a {
display:block;
padding:7px 10px 9px 11px;
}
#nav #menu #GlobalNavHomeLink {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/icon_house_unselected.png) no-repeat scroll center center;
height:31px;
padding:0;
width:43px;
}
a {
color:#B7E15E;
font-weight:bold;
text-decoration:none;
}
#nav #menu li.menu-Home.active, #nav #menu li.menu-Home:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/icon_house_selected.png) no-repeat scroll center center;
z-index:100000;
}
#VideoIcon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/videotraining.png) no-repeat scroll center center;
}
#CaseIcon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/case.png) no-repeat scroll center center;
}
#EventIcon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/event.png) no-repeat scroll center center;
}
#AdviseIcon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../images/advise.png) no-repeat scroll center center;
}
.contentIcon {
	float:left;
	height:32px;
	margin-right:12px;
	width:32px;
}
.indexcase{
	padding-left:60px;
	 
}
.indexcase li{
	list-style-type: circle;
	 
}
.indexcase li a{
	color:#FFFFFF;
	font-weight:normal;
	
	 
}
.video{
padding-left:90px;
overflow:visible; 
position:absolute;
padding-top:40px;
width:400px;
height:100px;
}
.video h3 {font-size: 15px; color: #CCFFFF ; padding-bottom: 5px; border-bottom: 2px #d8d8d8 solid; margin-bottom: 20px;  }