/* CSS Document */ @import url("nav.css"); @import url("form.css"); body{ margin: 0px; padding: 0px; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #656565; background-color: FFF; line-height: 150%; text-align: center;} h1 {font-size: 2.0em;} h2 { color: 3B3433;} h3 {font-size: 1.2em; color: #3B3433; margin:0;} h4 {font-size: 1em} p{ margin: 0px; font-size: 0.9em;} .font_red{ font-size: 2em; color: ED1C24;} .font_gray{ font-size: 2.4em; font-weight: bold; color: 1C86AF;} a:link, a:visited{ color: #656565; text-decoration: none;} a:hover{ color: #A8996F; text-decoration: underline;} /* ---------------------------------------------------------------------------------------------------------- --------- Main LayOut Styles ------------------------------------------------------------------------------------------------------------------- */ #wrapper{ margin: 20px auto; padding: 0px; width: 1000px;} #header{ position: relative;} #MainMenu{ height:20px; clear: both;} #container{ margin-top: 3px; margin-bottom: 6px; height: 474px;/*position: relative;*/ border: 1px solid #DDDDDD; overflow: hidden; clear: both;} #contentwrapper{ float: left; width: 100%;} #contentcolumn{ margin-left: 400px; /*Set left margin to LeftColumnWidth*/} #contentcolumn_inner{ margin: 30px 40px 0 0; text-align: left;} #leftcolumn{ float: left; width: 400px; /*Width of left column*/ margin-left: -1000px; /*Set left margin to -(MainContainerWidth)*/} #leftcolumn_inner{ margin:30px 20px 0 50px; text-align: left;} #footer{ margin: 0px; padding: 0px; FONT-SIZE: 0.85em; text-align: left; clear: both;} #SubLeftCol{ margin: 0px; padding: 0px; /*position: relative;*/ float: left; width: 758px; height: 474px;} #SubLeftColInner{ padding:30px 0 0 45px; text-align:left;} #SubRightCol{ width: 240px; float: right; background-color: #F0F0F0; height: 474px;} #SubRightColInner{ padding: 20px; text-align:left;} /*#ColRight{ width: 240px; float: right; background-color: #ececec; height: 474px;}*/ /* ---------------------------------------------------------------------------------------------------------- --------- Header Styles ------------------------------------------------------------------------------------------------------------------- */ #logo{ width: 180px; height: 73px; float: left;}/**/ #VersionBox{ float: right;} #VersionBox ul{ list-style: none;} #VersionBox ul li{ float: left; margin-left: 10px; font-size: 0.85em;} #VersionBox ul li a.stay{ padding: 0px 3px; background-color: #A8996F; color: #fff; } #VersionBox ul li a:hover{ text-decoration: none;} /* ---------------------------------------------------------------------------------------------------------- --------- INDEX Styles ------------------------------------------------------------------------------------------------------------------- */ #primary{ margin: 0px 10px 0px 0px; width: 748px; background-color: #ffffff; float: left;} #secondary{ width:240px; height: 474px; /*position: absolute; top: 0px;*/ margin-right: 0px; float: right;} #featurePro{ margin: 0px 0px 8px 0px; padding: 0px;} #featurePro .Box{ margin: 0px 5px; overflow: hidden; clear: both;} #featurePro .title{ margin-bottom: 6px; width: 134px; height: 13px; } #featurePro img{ margin-right: 5px; float: left;} #featurePro .line{ padding: 0px; background-image: url("../image/line.gif");height: 1px; overflow: hidden;} #featurePro a{ font-size: 0.8em; font-weight: bold; letter-spacing: 0.4; line-height: 0.9;} #featurePro p{ margin-top: 5px; font-size: 85%; line-height: 1.2;} .AdBox{ margin-bottom: 2px; clear: both; border: 1px solid #AAAAAA; width: 215px; height: 128px;} /* ---------------------------------------------------------------------------------------------------------- --------- COMPANY Styles ------------------------------------------------------------------------------------------------------------------- */ #CompanyBox{ margin: 0px; padding: 0px; position: relative; width: 998px; height: 474px;} #CompanyBox #Title{ padding: 50px 0px 30px 48px; text-align: left;} #CompanyBox #Content{ margin-left: 42px ; width: 940px;} #CompanyBox .ParamBox{ float: left; width: 210px; margin-right: 20px; text-align: left;} #CompanyBox p{ text-align: left;} /* ---------------------------------------------------------------------------------------------------------- --------- STORY Styles ------------------------------------------------------------------------------------------------------------------- */ #story_innerTube{ margin: 0px; padding: 0px; position: relative; background-image: url("../image/sec_02.jpg"); width: 998px; height: 474px;} #story_innerTube .EditBox{ magin: 0px; padding: 0px 20px 0px 60px; position: absolute; top: 130px; left: 0px; width: 998px; background-color: #000; filter: Alpha(opacity=60, finishopacity=100, style=0, startx=0, starty=300, finishx=300, finishy=0); -moz-opacity:0.6; text-align: left;} #story_innerTube .ParamBox{ margin-right: 60px; float: left; widows: 140px;} /* Story_醣蛋白 */ #AntarcticineInnerTube{ margin: 0px; padding: 0px; position: relative; background-image: url("../image/story_bg.jpg"); width: 998px; height: 474px;} #AntarcticineInnerTube .Title{ padding: 101px 0px 30px 63px; text-align: left;} #AntarcticineInnerTube .ParamBox{ margin: 0px 0px 0px 63px; text-align: left;} #AntarcticineInnerTube .Param{ margin-right: 40px; width: 250px; float: left;} #AntarcticineInnerTube .Param p{ color: 3B3433; line-height: 1.3;} #AntarcticineInnerTube .Param b{ color: fff;} #AntarcticineInnerTube .Param h3{ color: 294962; font-size: 1.2em;} #AntarcticineInnerTube .Param ul{ margin-top: 0px; margin-left: 15px; list-style-image: url(../image/arrow.gif);} #AntarcticineInnerTube .Param ul li{ margin-bottom: 10px; } #AntarcticineInnerTube .Param .back{ margin-top: 15px; background: url("../image/arrow_back.gif") no-repeat; background-position: center left; padding-left: 8px;} #AntarcticineInnerTube .Param .back a{ font-weight: bold; color: #fff;} #AntarcticineInnerTube .Param .back a:hover{ color: #1C86AF;} /* Composition_醣蛋白 */ #Composition_innerTube, #Composition_PhyinnerTube{ margin: 0px; padding: 0px 50px 0px 90px; position: relative; background-image: url("../image/water.jpg"); width: 998px; height: 474px;} #Composition_innerTube .ParamBox_L{ margin: 45px 30px 0px -10px; float: left;} #Composition_innerTube .ParamBox_R{ margin: 20px 0px 0px 0px; padding-top: 28px; float: left; width: 540px; text-align: left;} #Composition_innerTube ul{ list-style: square;} #Composition_innerTube ul li{ font-weight: bold; line-height: 1.5;} #Composition_innerTube ul li ul{ list-style-image: url(../image/arrow.gif);} #Composition_innerTube ul li ul li{ margin-bottom: 1.2; font-weight: normal; } /* Composition_葛根 */ #Composition_PhyinnerTube .Phy_Title{ margin: 51px 30px 0px 0px; float: left; width: 306px;} #Composition_PhyinnerTube .PhyParamBox{ margin: 65px 20px 0px 0px; float: left; width: 220px; text-align: left; text-align: left;} #Composition_PhyinnerTube .h3{ color:#A8996F; font-size: 2em; font-weight: bold; line-height: 1.2;} /* Composition_膠原蛋白 */ #Composition_CollageninnerTube{ margin: 0px; padding: 0px 50px 0px 0px; position: relative; background-image: url("../image/water.jpg"); width: 998px; height: 474px;} #Composition_CollageninnerTube .Title{ padding: 50px 45px 0px 30px; float: left; width: 232px;} #Composition_CollageninnerTube .ParamBox{ padding: 38px 0px 0px 0px; float: left; width: 635px; text-align: left;} #Collagen ul{ margin-left: 10px; padding-left: 10px; list-style-image: url("../image/arrow.gif"); background-position: center left;} #Collagen ul li{ margin-bottom: 8px;} #Collagen .ImageBox{ float: right;} .pagination{ padding: 10px 2px; margin: 0px; clear: both;} .pagination ul{ margin: 0; padding: 0; text-align: right; /*Set to "left" or "right" to left/right align pagination interface*/font-size: 100%;} .pagination li{ list-style-type: none; display: inline; padding-bottom: 1px;} *:first-child+html .pagination li{ /*IE7 only CSS hack*/margin-right: 4px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE7 */} * html .pagination li{ /*IE6 and below CSS hack*/margin-right: 4px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE6 and below browsers*/} .pagination a, .pagination a:visited{ padding: 0 5px; border: 1px solid #DCD6C5; text-decoration: none; color: #A8996E; font-weight: bold;} .pagination a:hover, .pagination a:active{ border: 1px solid #1C86AF; color: #fff; background-color: #1C86AF;} .pagination a.currentpage{ /*Style for currently selected page link*/background-color: #A8996E; color: #FFF !important; border-color: #A8996E; font-weight: bold; cursor: default;} .pagination a.disabled, .pagination a.disabled:hover{ /*Style for "disabled" previous or next link*/ background-color: white; cursor: default; color: #333; border-color: transparent;} .pagination a.prevnext{ /*Style for previous and next link*/font-weight: bold;} /* Composition_生肽 */ #Composition_PeptidesinnerTube{ margin: 0px; padding: 0px 50px 0px 90px; position: relative; background-image: url("../image/water.jpg"); width: 998px; height: 474px;} #Composition_PeptidesinnerTube .Tilte{ margin-right: 40px; padding: 50px 0px 0px 60px; float: left;} #Composition_PeptidesinnerTube .ParamBox{ padding: 50px 0px 0px 0px; float: left; width: 620px; text-align: left;} #Com_Nav{ position: absolute; top: 428px; left: -40px; text-align: left;} #Com_Nav ul{ padding-left: 10px; color: #A8996E;} #Com_Nav ul li{ margin-left: 5px; margin-right: 10px; background-image: url("../image/arrow.gif") ; background-position: center left; background-repeat: no-repeat; padding-left: 16px; float: left;} #Com_Nav ul li a:hover{ text-decoration: underline;} #Com_Nav ul li a.stay{ padding: 0px 5px; color: #fff; border-bottom: 3px solid #1C86AF; display: block; background: #1C86AF;} .hidden{ text-indent: -5000px;} .inner{ margin: 0px; padding: 18px 15px 12px 5px; text-align: left;} /* ---------------------------------------------------------------------------------------------------------- --------- PRODUCTS Styles ------------------------------------------------------------------------------------------------------------------- */ #ProductinninnerTub{ margin: 0px; padding: 0px 0px 20px 60px; position: relative; /*background-image: url("../image/product_bg.jpg");*/ width: 758px; height: 474px; text-align: left; float:left;} #ProductinninnerTub #Title{ margin: 45px 0px 15px 0;} #ProductList { margin-left: -65px; } #ProductList ul{ margin: 0px 0px 0px 50px; padding: 0px; list-style: none;} #ProductList li { float: left; width: 120px; height:200px; margin: 0px 5px 0 5px; text-align: center;} #ProductList img{ margin-bottom: 8px; border: 1px solid #ccc;} #ProductList h3 span { margin-bottom: -15px; font-size: 0.65em; display: block; line-height:1.2em;} #ProductList h3 span a{ color: 3B3433; font-weight: bold;} #ProductList h3 span a:hover{ color: 1C86AF;} #ProductList dl { margin: 0px; text-align: center;} #ProductList dt { padding: 2px 0; text-align: center;} #ProductList dd { padding: 2px 0; background-color: #FFFF00;} #ProductList dt a{ background: url("../image/arrow.gif") no-repeat; background-position: top left; padding-left: 16px; font-size:0.8em;} #ProductDtailinninnerTub{ margin: 0px; padding: 40px 20px 0px 20px; /*position: relative;*/ float: left; width: 758px; height: 474px;} #ProductDtailinninnerTub #ColLeft{ padding: 0px 30px; width: 380px; /*border: 1px solid #ccc;*/ text-align: left; float: left;} #ProductDtailinninnerTub #ColLeft img{ margin-top: 8px; width: 300px;/*border: 1px solid #ccc;*/} #ProductDtailinninnerTub #ColLeft h2{ font-size: 1.45em;} #ProductDtailinninnerTub #ColMiddle{ width: 318px; /*border: 1px solid #ccc;*/ text-align: left; float: left; border:1xp solid #ccc;} #ProductDtailinninnerTub #ColMiddle h4{ border-top: 1px dotted #DDDDDD; border-bottom: 1px dotted #DDDDDD; background: url("../image/arrow_next.gif") no-repeat; background-position: center left; padding-left: 13px; color: #3B3433;} #ProductDtailinninnerTub #ColMiddle p a{ color: A7986E; font-size: 1.2em; font-weight: bold;} .mypets{ /*header of 1st demo*/cursor: hand; cursor: pointer; padding: 2px 5px; border-top: 1px dotted ddd; border-bottom: 1px dotted ddd;} .openpet{ /*class added to contents of 1st demo when they are open*/background: white;} .technology{ /*header of 2nd demo*/cursor: hand; cursor: pointer; margin: 10px 0; border-top: 1px dotted ddd; border-bottom: 1px dotted ddd; text-align: left; font-weight: bold;} .openlanguage{ /*class added to contents of 2nd demo when they are open*/color: 3B3433; text-align: left;} .closedlanguage{ /*class added to contents of 2nd demo when they are closed*/color: 3B3433;} #divBox { width:680px; height:370px; overflow:auto; /* 以下為樣式設定可省略不要 */ border:0px solid #ccc; scrollbar-arrow-color: #ccc; scrollbar-face-color: #FFF; scrollbar-track-color: #FFF; scrollbar-highlight-color: #ccc; scrollbar-shadow-color: #ccc; scrollbar-3dlight-color: #FFF; scrollbar-darkshadow-color: #FFF; } /* ---------------------------------------------------------------------------------------------------------- --------- Contact Styles ------------------------------------------------------------------------------------------------------------------- */ #InquiryBox{ margin: 0px; padding: 0px; /*position: relative;*/ float: left; width: 758px; height: 474px;} #InquiryBox #Title{ margin-right: 20px; padding: 46px 0px 10px 40px; text-align: left; float: left;} #InquiryBox #Content{ margin-top: 25px; float: left; width: 400px; border-left: 1px dashed #ddd; padding-left: 20px;} #InquiryBox .ParamBox{ float: left; width: 280px; margin-right: 20px; text-align: left;} #InquiryBox .ParamBox ul{ margin: 0px; margin-left: 15px; list-style-image: url(../image/arrow.gif);} * html #InquiryBox .ParamBox ul li{ /*IE6 and below CSS hack*/margin-left: 0px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE6 and below browsers*/} #InquiryBox .ParamBox ul li{ margin-left: /**/-33px; margin-bottom: 8px; padding-left: 5px;} #InquiryBox p{ text-align:justify;} /* ---------------------------------------------------------------------------------------------------------- --------- Contact Styles ------------------------------------------------------------------------------------------------------------------- */ #ContactBox, #TipsBox{ margin: 0px; padding: 0px; /*position: relative;*/ float: left; width: 758px; height: 474px; } #ContactBox #Title, #TipsBox #Title{ padding: 70px 0px 30px 50px; text-align: left;} #ContactBox #Content, #TipsBox #Content{ margin-left: 50px; text-align: left;} #ContactBox .ParamBox{ float: left; width: 280px; margin-right: 20px; text-align: left;} #ContactBox .ParamBox ul{ margin: 0px; margin-left: 15px; list-style-image: url(../image/arrow.gif);} * html #ContactBox .ParamBox ul li{ /*IE6 and below CSS hack*/margin-left: 0px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE6 and below browsers*/} #ContactBox .ParamBox ul li{ margin-left: /**/-33px; margin-bottom: 8px; padding-left: 5px;} #ContactBox p{ text-align:justify;} /* ---------------------------------------------------------------------------------------------------------- --------- LINK Styles ------------------------------------------------------------------------------------------------------------------- */ #LinkBox{ margin: 0px; padding: 0px; /*position: relative;*/ float: left; width: 758px; height: 474px;} #LinkBox #Title{ padding: 70px 0px 30px 50px; text-align: left;} #LinkBox #Content{ margin-left: 42px;} #LinkBox .ParamBox{ float: left; width: 280px; margin-right: 20px; text-align: left;} #LinkBox .ParamBox ul{ margin: 0px; margin-left: 15px; list-style-image: url(../image/arrow.gif);} * html #LinkBox .ParamBox ul li{ /*IE6 and below CSS hack*/margin-left: 0px; /*IE bug causes default spacing between links to disappear, so added it explicitly in IE6 and below browsers*/} #LinkBox .ParamBox ul li{ margin-left: /**/-33px; margin-bottom: 8px; padding-left: 5px;} #LinkBox p{ text-align:justify;} /* ---------------------------------------------------------------------------------------------------------- --------- skin care tips Styles ------------------------------------------------------------------------------------------------------------------- */ .tip table{ width: 88%;} .tip table th{ margin-bottom: 10px; padding: 5px; border-bottom: 3px solid #A7986E; text-align: left; font-size: 0.9em;} .tip table td{ margin-bottom: 10px; padding: 5px; border-bottom: 1px dashed #ccc; font-size: 0.8em;} #TipsBox h3{ line-height: 0px; color: #A7986E;} #List{ margin-top:10px;} #List ul{ margin:0; padding:0; list-style:none;} #List li{ padding: 5px 0; border-bottom:1px dotted #aaa; background-image:url(../image/arrow.gif); background-repeat:no-repeat; background-position: left 10px;} #List li a{ padding-left:15px; color: #0099CC; font-size:0.9em;} #List li a:hover{ color: #A8996F; text-decoration:none;}