@import url(common.css);

/* Content */
#content {position:relative; width:760px; background:#F6F6F6;}
#content h1 {display:none;}
#content .iportkeyBackground {position:relative; width:760px; height:359px; background:url(../images/main/bg_iportkey_main.jpg) no-repeat top left;}
#content .iportkeyBackground .ipodScreenAni {position:absolute; width:144px; height:216px;  margin:68px 0 0 52px; background:url(../images/main/bg_about_animation.gif) no-repeat top left; text-indent:-9000px;}
#content .iportkeyBackground .buyButton {position:absolute; width:106px; height:102px; margin:16px 0 0 611px; background:url(../images/main/btn_buy_now.gif) no-repeat center; text-indent:-9000px;}
#content .iportkeyBackground .buyButton a {float:left; width:106px; height:102px; background:url(../images/main/btn_buy_now.gif) no-repeat top left; text-indent:-9000px;}

/* iPortkey Charateristics */
#content .characterWrap {position:relative; width:758px; border-left:solid 1px #E0E0E0; border-right:solid 1px #E0E0E0;}
#content .characterWrap h2 {display:none;}
#content .characterWrap .characteristics {position:relative; width:760px; _width:728px; height:123px; margin:0 17px 0 17px; _margin:0 13px 0 16px;}
#content .characterWrap .characteristics ul {float:left; width:760px;}
#content .characterWrap .characteristics li {float:left; width:181px; height:123px; margin-right:1px; list-style-type:none;}
#content .characterWrap .character1 {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic.gif) no-repeat 0px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character1 a {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic.gif) no-repeat 0px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character1 a:hover {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic_over.gif) no-repeat 0px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character2 {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic.gif) no-repeat -182px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character2 a {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic.gif) no-repeat -182px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character2 a:hover {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic_over.gif) no-repeat -182px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character3 {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic.gif) no-repeat -364px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character3 a {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic.gif) no-repeat -364px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character3 a:hover {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic_over.gif) no-repeat -364px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character4 {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic.gif) no-repeat -546px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character4 a {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic.gif) no-repeat -546px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterWrap .character4 a:hover {float:left; width:181px; height:123px; background:url(../images/main/img_characteristic_over.gif) no-repeat -546px 0px; text-indent:-9000px; overflow:hidden;}
#content .characterContWrap {position:relative; width:724px; padding:53px 17px 0 17px ; border-left:solid 1px #E0E0E0; border-right:solid 1px #E0E0E0;}
#content .characterContWrap p {position:absolute; top:26px; width:530px; padding:5px 0 0 2px; border-top:solid 1px #DADADA;}
#content .characterContWrap .characterCont1 {position:relative; width:526px; min-height:150px; _height:150px; padding:4px 0 30px 192px; background:url(../images/main/bg_character_01.gif) no-repeat top left; line-height:18px;}
#content .characterContWrap .characterCont1 h3 {position:absolute; height:22px; padding-left:2px; color:#707070; font-weight:bold; font-size:14px; border-bottom:solid 1px #818181; z-index:10;}
#content .characterContWrap .characterCont2 {position:relative; width:526px; min-height:150px; _height:150px; padding:4px 0 30px 192px; background:url(../images/main/bg_character_02.gif) no-repeat top left; line-height:18px;}
#content .characterContWrap .characterCont2 h3 {position:absolute; height:22px; padding-left:2px; color:#707070; font-weight:bold; font-size:14px; border-bottom:solid 1px #818181; z-index:10;}
#content .characterContWrap .characterCont3 {position:relative; width:526px; min-height:260px; _height:260px; padding:4px 0 30px 192px; background:url(../images/main/bg_character_03.gif) no-repeat top left; line-height:18px;}
#content .characterContWrap .characterCont3 h3 {position:absolute; height:22px; padding-left:2px; color:#707070; font-weight:bold; font-size:14px; border-bottom:solid 1px #818181; z-index:10;}
#content .characterContWrap .characterCont4 {position:relative; width:526px; min-height:190px; _height:190px; padding:4px 0 30px 192px; background:url(../images/main/bg_character_04.gif) no-repeat top left; line-height:18px;}
#content .characterContWrap .characterCont4 h3 {position:absolute; height:22px; padding-left:2px; color:#707070; font-weight:bold; font-size:14px; border-bottom:solid 1px #818181; z-index:10;}

/* Content Title Bar / Content Wrap */ 
#content .titleBar {position:relative; width:740px; height:50px; padding-left:20px; background:#B6B6B6;}
#content .contentWrap {position:relative; width:758px; border-left:solid 1px #E0E0E0; border-right:solid 1px #E0E0E0;}

	/* Customer Support */
	#content .titleBar .supoortTitle {position:relative; width:738px; height:50px; padding-left:20px; _padding-left:0px; background:url(../images/main/txt_customer_support.gif) no-repeat center left; text-indent:-9000px;}
	#content .contentWrap .messageBox {position:relative; min-height:753px; _height:753px; padding-top:70px; text-align:center;}
	#content .contentWrap .messageBox .questionMark {position:relative; height:155px; text-align:center; background:url(../images/main/img_question_mark.gif) no-repeat center top; text-indent:-9000px;}
	#content .contentWrap .messageBox .messageDesc {position:relative; font-size:16px; font-weight:bold; line-height:24px;}
	#content .contentWrap .messageBox .emailBtn {position:relative; height:30px; margin-top:30px; padding:14px 0 0 15px; color:#FFFFFF; font-weight:bold; background:url(../images/main/btn_email_gray.gif) no-repeat center;}
	#content .contentWrap .messageBox .emailBtn a {color:#FFFFFF; font-weight:bold;}
	#content .contentWrap .messageBox .emailBtn a:hover {text-decoration:underline;}

	/* Release note */
	#content .titleBar .releaseTitle {position:relative; width:738px; height:50px; padding-left:20px; _padding-left:0px; background:url(../images/main/txt_release_note.gif) no-repeat center left; text-indent:-9000px;}
	#content .contentWrap .contentBox {position:relative; min-height:825px; _height:825px; padding-top:33px; padding-left:20px;}
	#content .contentWrap .contentBox .leftContent {float:left; width:180px; padding-top:170px; background:url(../images/main/bg_iportkey_01.gif) no-repeat top left;}
	#content .contentWrap .contentBox .leftContent .btn {position:relative; width:113px; height:30px; margin-left:35px; background:url(../images/main/btn_dark_gray.gif) no-repeat top center; text-align:center; color:#FFFFFF; font-weight:bold;}
	#content .contentWrap .contentBox .leftContent .btn a {float:left; width:113px; height:30px; padding-top:6px; background:url(../images/main/btn_dark_gray.gif) no-repeat top center; text-align:center; color:#FFFFFF; font-weight:bold;}
	#content .contentWrap .contentBox .centerContent {float:left; width:546px; padding-left:4px; letter-spacing:0.05em;}
	#content .contentWrap .contentBox .centerContent h2 {float:left; width:89px; height:22px; margin-bottom:10px; background:url(../images/main/txt_iportkey.gif) no-repeat top left; text-indent:-9000px;}
	#content .contentWrap .contentBox .centerContent p {clear:both; position:relative;}
	#content .contentWrap .contentBox .centerContent .about {color:#A3A3A3; font-weight:bold; line-height:18px;}
	#content .contentWrap .contentBox .centerContent .subContent {position:relative; margin-top:38px;}
	#content .contentWrap .contentBox .centerContent .subContent h3 {position:relative; color:#A3A3A3; font-size:14px; font-weight:bold;}
	#content .contentWrap .contentBox .centerContent .subContent ul {position:relative;}
	#content .contentWrap .contentBox .centerContent .subContent li {position:relative; margin:5px 0 18px 0; list-style-type:none; line-height:18px;}
	#content .contentWrap .contentBox .centerContent .subContent li .subTitle {position:relative; color:#336699;}
	#content .contentWrap .contentBox .centerContent .subContent li .subDesc {position:relative; padding-left:5px; color:#A3A3A3;}
