@charset "utf-8";
/* CSS Document 

CSS for SPI by Susan Huang

*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	min-height: 100%;
	background-color: #ffffff;
}

html, body {
height: 100%;
}

h1, h2, h3, h4, h5 {
font-family: Arial, Helvetica, sans-serif;
}

img {
border: 0;
}

em {
position: absolute;
left: -9999em;
}

fieldset {
border: 0;
}

.handcursor{
cursor:hand;
cursor:pointer;
}

input {
padding: 1px 0 1px 2px;
font-size: 13px;
color: #666;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-khtml-box-sizing: content-box;
}

.clearDiv {
clear: both;
}

#wrap {
margin: 0 auto;
width:980px;
height: 100%;
height: auto;
background:url(../img/bg.gif) repeat-y;
}

/*
----------------------------------------------------------------------------------------------- INTERFACE (Header / Body / Footer / Nav)
*/

/* ============================== Header */
#header {
margin: 0 auto;
padding: 0 0px;
width: 960px;
height: 104px;
}


#header #left{
display: block;
float: left;
width: 960px;
height: 104px;
background-image:url(../img/header.gif);
}

#header #left a{
display: block;
width: 370px;
height: 104px;
}

/* ============================== Home - content - mid */

#flash {
display:block;
margin:auto;
padding: 0 0px;
width: 960px;
height: 385px;
text-align:center;
}

*html #flash {
display:block;
margin:auto;
padding: 0 0px;
width: 960px;
height: 335px;
text-align:center;
}

*+html #flash {
display:block;
margin:auto;
padding: 0 0px;
width: 960px;
height: 335px;
text-align:center;
}


#mid {
margin: 0 auto;
padding: 0px 0px;
width:960px;
height:240px;
border-top: #c0c0c0 3px solid;
border-bottom:  #e5e5e5 1px solid;
background: url(../img/bg_mid.gif) no-repeat;
}

#mid dl {
display:block;
float:left;
padding: 10px 5px;
width: 127px;
}

#mid dt {
margin:auto;
padding: 0 5px 0 0;
width: 105px;
height:75px;
}

#mid dd {
margin: 0 auto;
padding: 0 5px 0 0;
color: #194588;
font-size: 12px;
text-align:center;
}

a.listlink_title {
color: #194588;
font-weight:bold;
text-decoration:none;
}

a.listlink_title:hover {
text-decoration: underline;
}

#mid dd ul {
margin: 5px 0px 5px 25px;;
color: #273e6c;
font-size: 12px;
text-align:left;
}

#mid dd ul a.listlink_gray {
color: #656565;
font-size: 11px;
text-decoration:none;
line-height: 20px;
}

#mid dd ul a.listlink_gray:hover {
text-decoration: underline;
}

/* ============================== Home - content - about */

#about {
margin: 0 auto;
padding: 0px 0px;
width:960px;
height:250px;
background:url(../img/bg_about.gif) no-repeat;
}

#about #left {
display:block;
float:left;
margin: 0px;
padding: 20px 25px 5px 25px;
width:700px;
font-family:Arial, Helvetica, sans-serif;
}

.title_green {
color:#71b441;
font-size:18px;
font-weight:bold;
}

.title_deepgray {
color: #3e3e3e;
font-size:18px;
font-weight:bold;
}

#about #left p {
margin: 15px 0px;
color:#656565;
font-size: 12px;
line-height: 24px;
text-align:justify;
}

a.morelink_green {
color:#3c9720;
text-decoration:underline;
font-size:12px;
}

#about #right {
display:block;
float:left;
margin: 0px;
padding: 30px 0px 10px 0px;
width:210px;
}

/* ============================== Home - content - btm */
#btm {
margin: 0 auto;
padding: 0px 0px;
width:960px;
height:215px;
}

#btm #contain {
display:block;
float:left;
margin: 0px;
padding: 0px 0px;
}

#btm #contain dl{
display:block;
float:left;
padding: 10px 30px;
width: 260px;
}

#btm #contain dt {
padding: 0 5px 10px 0;
color:#3e3e3e;
font-size:14px;
font-weight:bold;
}

#btm #contain dd{
color:#575757;
font-size:12px;
line-height:25px;
border-bottom:#c3c2c3 dashed 1px;
}

#btm #contain dd a{
color:#575757;
text-decoration:none;
}

#btm #contain dd a:hover{
text-decoration:underline;
}

/* ============================== Sub - content - leftmenu */
#subcontent{
margin: 0 auto;
padding: 0px 0px;
width:960px;
}

#subcontent #leftmenu{
float:left;
margin: 0px;
padding: 20px 0px 5px 0px;
width:250px;
height: 100%;
height: auto;
background:#eaf8ff;
}

#subcontent #leftmenu h2{
padding: 0 0 5px 65px;
color:#194588;
font-size:19px;
font-weight:bold;
}

#subcontent #leftmenu dl{
display:block;
float:left;
margin: 0px;
width:250px;
}

#subcontent #leftmenu dt {
padding: 5px 0 5px 50px;
color:#191919;
font-size:16px;
font-weight:bold;
background:#d1d1d1;
line-height:25px;
height:24px;
border-bottom: #bbc4c9 1px dashed;
}

#subcontent #leftmenu .sublist{
width:185px;
padding: 5px 0 5px 65px;
line-height:25px;
border-bottom: #bbc4c9 1px dashed;
height:25px;
}

#subcontent #leftmenu .sublist_over{
width:185px;
padding: 5px 0 5px 65px;
height:25px;
line-height:25px;
border-bottom: #bbc4c9 1px dashed;
background:#d1d1d1;
}

a.sublistText {
color:#194588;
font-size:16px;
font-weight:bold;
text-decoration:none;
}

/* ============================== Sub - content - right */

#subcontent #right{
display:block;
float:right;
width:710px;
}

#subcontent #right #big_photo{
display:block;
float:right;
}

#subcontent #right #des{
padding: 20px 20px;
width:670px;
}

#subcontent #right #des h1{
color:#f55600;
font-size:22px;
padding-bottom:18px;
}

#subcontent #right #des #desleft{
width:465px;
float:left;
color:#303030;
font-size:12px;
line-height:22px;
text-align:justify;
}

#subcontent #right #des #desright{
width:185px;
float:left;
padding-left:20px;
color:#115c9c;
font-size:9px;
}

#subcontent #right #des #desright img{
margin:5px 0px;
border:#7e7e7e 1px solid;
}

#subcontent #right #des h2{
padding-left:10px;
color:#ffffff;
font-size:16px;
width:650px;
height:30px;
line-height:30px;
background:#285c8d;
}

#subcontent #right #des h3{
padding-left:10px;
color:#ffffff;
font-size:16px;
width:650px;
height:30px;
line-height:30px;
background:#285c8d;
}

#subcontent #right #des #buy_box{
padding: 10px 10px;
display:block;
color:#333333;
font-size:12px;
line-height:20px;
width:640px;
border-bottom: #cccccc 1px dashed;
}

#subcontent #right #des #buy_box img{
float:left;
margin-right:20px;
}

.text_blue{
color:#194588;
font-size:12px;
}

.text_blue_2{
color:#194588;
font-size:12px;
line-height:30px;
}

.text_blue_big{
color:#194588;
font-size:12px;
line-height:26px;
font-weight:bold;
}

.text_gray{
color:#333;
font-size:12px;
line-height:24px;
}

#subcontent #right #des h4{
margin-top:10px;
margin-bottom:10px;
padding-left:10px;
color:#ffffff;
font-size:12px;
width:650px;
height:25px;
line-height:25px;
background:#88b8d8;
}

#subcontent #right #des h4 a{
color:#194588;
font-size:12px;
line-height:25px;
}

#subcontent #right #des h4 a:hover{
color:#ff6600;
font-size:12px;
line-height:25x;
}

/* ============================== Product page Round Top */

.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #285c8d; border-right:1px solid #285c8d;}
.b1,.b1b{margin:0 5px; background:#285c8d;}
.b2,.b2b{margin:0 3px; border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px; margin:0 1px;}
.d1{background:#285c8d;}

/* ============================== Product part */
#subcontent #right #des #product_box{
padding: 10px 0px;
display:block;
color:#333333;
font-size:12px;
line-height:20px;
width:670px;
height:110px;
background: url(../img/products/bg_new_product.gif) no-repeat;
}

#subcontent #right #des #product_box #np{
float:left;
padding: 5px 10px;
display:block;
width:113px;
text-align:center;
}

a.linktext_blue {
font-size:10px;
color: #265081;
text-decoration:underline;
}

a.linktext_blue:hover {
color: #f55600;
text-decoration:underline;
}

#subcontent #right #des h5{
padding-left:10px;
margin-bottom:5px;
color:#2c74a5;
font-size:16px;
width:660px;
height:30px;
line-height:30px;
border-bottom: 1px #cccccc dashed;
}

#subcontent #right #des #top{
margin:5px;
width:660px;
height:20px;
text-align:right;
}

.pbox_top{
background-color:#29ad45;
line-height:16px;
color:#ffffff;
font-size:10px;
text-align:center;
}

.pbox_row1{
background-color:#d6ffec;
/*height:85px;*/
color:#333333;
font-size:10px;
text-align:center;
line-height:25px;
}

.pbox_row1 img{
background-color:#d6ffec;
text-align:center;
margin:5px;
}

.pbox_row2{
background-color:#ecfff5;
/*height:85px;*/
color:#333333;
font-size:10px;
text-align:center;
line-height:25px;
}

.pbox_row2 img{
background-color:#ecfff5;
margin:5px;
text-align:center;
}

/* ============================== Support Matrix part */
.suppbox_top{
background-color:#285c8d;
height:30px;
color:#ffffff;
font-size:12px;
text-align:center;
}

.suppbox_row1{
background-color:#cccccc;
height:30px;
color:#333333;
font-size:12px;
text-align:center;
}

.suppbox_row2{
	background-color:#E7E7E7;
	height:30px;
	color:#333333;
	font-size:12px;
	text-align:center;
}

/* ============================== footer */
#footer {
margin: 0 auto;
width:900px;
height:370px;
padding: 20px 30px;
background: #e2e2e2;
border-top: #a3a3a3 3px solid;
color: #757575;
font-size:12px;
}

#footer .box_b {
float:left;
width:155px;
padding: 0 5px 0 0px;
}

#footer .box_b h3 a{
color:#9f9f9f;
text-decoration:underline;
font-weight:bold;
line-height:30px;
}

#footer .box_b h3 a:hover {
color:#333333;
}

#footer .box_b ul{
list-style-type:none;
line-height:30px;
}

#footer .box_b ul li a {
color:#9f9f9f;
text-decoration: none;
font-size:11px;
}


#footer .box_b ul li a:hover {
text-decoration: underline;
}

#footer .box_s {
float:left;
width:120px;
padding: 0 0px 0 10px;
}

#footer .box_s h3 a{
color:#9f9f9f;
text-decoration:underline;
font-weight:bold;
line-height:30px;
}

#footer .box_s h3 a:hover {
color:#333333;
}

#footer .box_s ul{
list-style-type:none;
line-height:30px;
}

#footer .box_s ul li a {
color:#9f9f9f;
text-decoration: none;
font-size:11px;
}


#footer .box_s ul li a:hover {
text-decoration: underline;
}

/* ============================== CSS from SPI */
.subHeadPurple{
padding-left:3px;
color:#2c74a5;
font-size:12px;
font-weight:bold;
}

.newpro_table li{
padding-left:15px;
list-style:none;
color:#333333;
}

.newpro_table li a{
font-size:12px;
color:#333333;
text-decoration:none;
}

.newpro_table li a:hover{
text-decoration:underline;
}