@charset "utf-8"; 
/*=======common==========*/
* {
    margin: 0;
	padding: 0;
}
p {
    margin: 10px 0;
}
ul {
    list-style: none;
}
img {
	border: 0;
	display: block;
}
.clear {
	clear: both;
	height: 0;
	font-size: 0;
	overflow: hidden;
}
a {
	color: #1A6088;
	text-decoration: none;
	cursor: pointer; /*for Opera*/
}
a:hover {
    color: #428FBA;
	text-decoration: underline;
}
body {
    text-align: center;
	font-size: 12px;
	line-height: 160%;
	color: #555;
	background: #FFF url(../images/bg-body-sub.gif) repeat-x;
}
.p-index {
    background: #FFF url(../images/bg-body.gif) repeat-x;
}
/*==========head===========*/
#head-wrap {
    margin: 0 auto;
	text-align: left;
	width: 988px;
	height: 265px;
}
.p-index #head-wrap {
	width: 987px;
	border-right: 1px #D7E1E3 solid;
	background: url(../images/banner-index.jpg) no-repeat right 42px;
}
.p-intro #head-wrap {
	background: url(../images/banner-intro.jpg) no-repeat 190px 60px;
}
.p-career #head-wrap {
	background: url(../images/banner-career.jpg) no-repeat 190px 60px;
}
.p-tech #head-wrap {
	background: url(../images/banner-technical.jpg) no-repeat 190px 60px;
}
.p-products #head-wrap {
	background: url(../images/banner-products.jpg) no-repeat 190px 60px;
}
.p-culture #head-wrap {
	background: url(../images/banner-culture.jpg) no-repeat 190px 60px;
}
.p-view #head-wrap {
	background: url(../images/banner-view.jpg) no-repeat 190px 60px;
}
.p-joinus #head-wrap {
	background: url(../images/banner-joinus.jpg) no-repeat 190px 60px;
}
.p-contact #head-wrap {
	background: url(../images/banner-contact.jpg) no-repeat 190px 60px;
}
#nav {
    width: 190px; 
}
#nav li {
    height: 28px;
	float: left; /* for IE5.x to get rid of the blank of ul and li */
	background: url(../images/bg-nav.gif) repeat-y;
}
#nav li a {
    display: block;
    height: 23px;
	width: 190px; /* for FF and Opera */
}
#nav li a span {
    display:block; 
    overflow: hidden; 
    width: 0; 
    height: 1px; /*for IE5.5*/
}
#nav #home {
    height: 41px; /* for FF and Opera */
}
#nav #home a {
	height: 41px;
	background: url(../images/logo.gif) no-repeat;
}
#nav #intro a {
	background: url(../images/nav.gif) no-repeat;    
}
#nav #intro a:hover,
.p-intro #nav #intro a {
    background: url(../images/nav.gif) no-repeat 0 -23px;
}
#nav #career a {
    background: url(../images/nav.gif) no-repeat 0 -46px;
}
#nav #career a:hover,
.p-career #nav #career a {
    background: url(../images/nav.gif) no-repeat 0 -69px;
}
#nav #tech a {
    background: url(../images/nav.gif) no-repeat 0 -92px;
}
#nav #tech a:hover,
.p-tech #nav #tech a {
    background: url(../images/nav.gif) no-repeat 0 -115px;
}
#nav #products a {
    background: url(../images/nav.gif) no-repeat 0 -138px;
}
#nav #products a:hover,
.p-products #nav #products a {
    background: url(../images/nav.gif) no-repeat 0 -161px;
}
#nav #culture a {
    background: url(../images/nav.gif) no-repeat 0 -184px;
}
#nav #culture a:hover,
.p-culture #nav #culture a {
    background: url(../images/nav.gif) no-repeat 0 -207px;
}
#nav #view a {
    background: url(../images/nav.gif) no-repeat 0 -230px;
}
#nav #view a:hover,
.p-view #nav #view a {
    background: url(../images/nav.gif) no-repeat 0 -253px;
}
#nav #joinus a {
    background: url(../images/nav.gif) no-repeat 0 -276px;
}
#nav #joinus a:hover,
.p-joinus #nav #joinus a {
    background: url(../images/nav.gif) no-repeat 0 -299px;
}
#nav #contactus a {
    background: url(../images/nav.gif) no-repeat 0 -322px;
}
#nav #contactus a:hover,
.p-contact #nav #contactus a {
    background: url(../images/nav.gif) no-repeat 0 -345px;
}
/*==========main===========*/
#main-wrap {
	margin: 0 auto;
	width: 988px;
	text-align: left;
	background-image: url(../images/bg-main-sub.gif);
	background-repeat: repeat-y;
}
.p-index #main-wrap {
	background: url(../images/bg-main.gif) repeat-y;
}
#main-wrap h2 {
    font-size: 12px;
	line-height: 32px;
	height: 32px;
	text-align: center;
}
#main-wrap h2 span {
    display:block; 
    overflow: hidden; 
    width: 0; 
    height: 1px; /*for IE5.5*/
}
#col-l {
    float: left;
    width: 190px;
}
#col-l #colour {
	float: left;
	width: 190px;
	height: 30px;
	background-image: url(../images/list-contact.gif);
	background-repeat: no-repeat;
}
.p-index #col-l h2 {
	background: url(../images/title-contact.gif) no-repeat center center;
}
.p-intro #title-sub {
	background: url(../images/title-intro.gif) no-repeat center center;
}
.p-career #title-sub {
	background: url(../images/title-career.gif) no-repeat center center;
}
.p-tech #title-sub {
	background: url(../images/title-tech.gif) no-repeat center center;
}
.p-products #title-sub {
	background: url(../images/title-products.gif) no-repeat center center;
}
.p-joinus #title-sub {
	background: url(../images/title-joinus.gif) no-repeat center center;
}
#col-l li {
    margin: 10px 0 10px 20px;
	padding: 0 0 0 10px;
	background: url(../images/list-subnav.gif) no-repeat 0 center;
}
#contact {
    margin: 40px 20px 0;
	line-height: 20px;
    border-top: 1px #DDD solid;
}
#col-l img {
    margin: 10px auto;
	border: 4px #DDD solid;
}
#col-l p {
	margin: 12px;
}
#col-c img {
	border: 4px #ffffff solid;
	float: left;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: -4px;
}
.blank{
	color: #FFFFFF;
}
#col-c p {
	margin: 12px;
}
#col-c {
	float: left;
    width: 580px;
}
#col-c #colour {
	float: left;
	width: 580px;
	height: 30px;
	background-image: url(../images/clear-intro.gif);
	background-repeat: repeat-x;
}
#col-c h2 {
	background: url(../images/title-intro.gif) no-repeat 20px center;
}
#col-c #t-intro {
	background: url(../images/title-intro01.gif) no-repeat 20px center;
}
#col-c #t-cooperate {
	background: url(../images/title-coop.gif) no-repeat 20px center;
}
#col-c #t-career01 {
	background: url(../images/title-career01.gif) no-repeat 20px center;
}
#col-c #t-career02 {
	background: url(../images/title-career02.gif) no-repeat 20px center;
}
#col-c #t-career03 {
	background: url(../images/title-career03.gif) no-repeat 20px center;
}
#col-c #t-career04 {
	background: url(../images/title-career04.gif) no-repeat 20px center;
}
#col-c #t-j2ee {
	background: url(../images/title-j2ee.gif) no-repeat 20px center;
}
#col-c #t-asset {
	background: url(../images/title-asset.gif) no-repeat 20px center;
}
#col-c #t-weeds {
	background: url(../images/title-weeds.gif) no-repeat 20px center;
}
#col-c #t-quality {
	background: url(../images/title-quality.gif) no-repeat 20px center;
}
#col-c #t-culture {
	background: url(../images/title-culture.gif) no-repeat 20px center;
}
#col-c #t-view {
	background: url(../images/title-view.gif) no-repeat 20px center;
}
#col-c #t-jobs {
	background: url(../images/title-jobs.gif) no-repeat 20px center;
}
#col-c #t-interview {
	background: url(../images/title-interview.gif) no-repeat 20px center;
}
#col-c #t-contact {
	background: url(../images/title-contact.gif) no-repeat 20px center;
}
#col-c p {
    margin: 10px 20px;
	text-indent: 2em;
	text-align: justify;
	text-justify: inter-ideograph; /* for IE */
}
.p-culture #col-c h3,
.p-joinus #col-c h3 {
    font-size: 12px;
	margin: 10px 20px;
	padding-top: 10px;
	border-top: 1px dashed #AAA;
}
.p-culture #col-c p,
.p-joinus #col-c p {
    text-indent: 0;
}
#col-r {
    float: left;
	width: 218px;
}
#col-r #colour {
    float: left;
	width: 218px;
	height: 30px;
	background-image: url(../images/right-joinus.gif);
	background-repeat: no-repeat;
}
#col-r #colour2 {
    float: left;
	width: 220px;
	height: 30px;
	background-image: url(../images/right-blank.gif);
	background-repeat: no-repeat;
}
.p-index #c-joinus {
    background: url(../images/title-joinus.gif) no-repeat 20px center;
}
.p-index #c-career {
    border: 1px solid #DFE1E0;
    background: #F4F6F5 url(../images/title-career.gif) no-repeat 20px center;
}
#col-r ul {
    padding: 15px;
}
#col-r li {
    padding: 3px 0;
}
#col-r p {
    text-align: center;
	margin: 0;
}
#a-more {
	margin: 0 auto;
    display: block;
	width: 152px;
	height: 83px;
	background: url(../images/pic-more.jpg) no-repeat;
}
#col-r a span {
    display:block; 
    overflow: hidden; 
    width: 0; 
    height: 1px; /*for IE5.5*/
}
/*==========bottom===========*/
#bottom-wrap {
    width: 100%;
	line-height: 30px;
	background: #DDD;
	border-bottom: 1px #999 dashed;
}
#bottom-wrap p {
    margin: 0;
}
/*==========generic===========*/
.ta-c {
    text-align: center;
}