/* ---------------------------------------------------------------------------------------------------------- Output device: screen, projection Structure: display; position; z-index; float; clear; width; height; overflow; margin; padding; border; background; align; font; Content: 1) HTML tags 2) HTML styles 3) Layout 4-1) Page: Homepage 5) Others ---------------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------------- 1) HTML tags ---------------------------------------------------------------------------------------------------------- */ body {background:url("../design/bg.gif") 0 0 repeat-x; font:0.8em/1.5 "verdana", arial, sans-serif;} h1, h2, h3, h4, h5, h6, p, address, blockquote, table, dl, fieldset {margin:15px 0;} /* ---------------------------------------------------------------------------------------------------------- 2) HTML styles ---------------------------------------------------------------------------------------------------------- */ ul.ul-01 {margin:15px 0; list-style:none;} ul.ul-01 li {padding:2px 0 2px 25px; background:url("/design/ul-01.gif") 0 50% no-repeat; font-size:85%;} ul.ul-02 {margin:0px 0; list-style:none;} ul.ul-02 li {padding:0px 0 0px 25px; background:url("../design/ul-01.gif") 0 50% no-repeat; font-size:85%;} ul.ul-03 {margin:0px 0; list-style:none;} ul.ul-03 li {padding:0px 0 0px 25px; background:url("../design/ul-01.gif") 0 50% no-repeat; } ul.ul-04 {margin:0px 0 0px -15px; list-style:none;} ul.ul-04 li {padding:0px 0 0px 20px; background:url("../design/ul-04.gif") 0 50% no-repeat; } ul.ul-list {margin:15px 0; list-style:none;} ul.ul-list li {padding:1px 0;} ul.ul-list span.date {padding-right:10px;} trader { font-size:100%; color:ff6600;} /* ---------------------------------------------------------------------------------------------------------- 3) Layout ---------------------------------------------------------------------------------------------------------- */ #main {width:960px; margin:0 auto; overflow:hidden;} #header {position:relative; height:60px; padding:20px 20px 15px 20px;} #logo {margin:0;} #nav {font:85% "verdana", arial, sans-serif; position:absolute; top:30px; right:20px; margin:0;} #nav span {margin:0 8px;} #nav #nav-active {font-weight:bold; color:#3399cc; text-decoration:none;} #tray {position:relative; width:960px; height:45px; background:url("../design/tray.gif") 0 0 no-repeat; overflow:hidden; font:bold 90%/1 "verdana", tahoma, sans-serif;} #tray ul {margin:0 20px; list-style:none;} #tray li {display:inline;} #tray li a {display:block; float:left; padding:17px 20px 17px 18px; background:url("../design/tray-separator.gif") 100% 0 no-repeat; text-decoration:none;} #tray li a:hover {background:url("../design/tray-hover.gif");} #tray li#tray-active a {background:url("../design/tray-active.gif");} #search {position:absolute; top:8px; right:20px;} #search div {position:relative; width:185px;} #search #search-input {position:absolute; top:0; left:0; width:150px; height:30px; background:url("../design/search-input.gif") 0 0 no-repeat; overflow:hidden;} #search #search-input input {width:136px; margin:8px; border:0; font:100%/1 "verdana", arial, sans-serif;} #search #search-submit {position:absolute; top:0; right:0; width:30px;} #footer {clear:both; padding:20px 20px 40px 20px; font-size:85%;} #footer p {margin:0;} /* ---------------------------------------------------------------------------------------------------------- 4-1) Page: Homepage ---------------------------------------------------------------------------------------------------------- */ #col-top {width:960px; height:5px; margin-top:15px; background:url("../design/col-top.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden;} #col-bottom {width:960px; height:5px; margin-bottom:15px; background:url("../design/col-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden;} #col {position:relative; padding:15px 30px 15px 20px; background:url("../design/col.gif") 0 0 repeat-y;} #col trader { font-size:100%; color:ff6600;} #ribbon {position:absolute; top:-5px; left:0; width:100px; height:100px; background:url("../design/ribbon.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden; z-index:10;} #col-browser {position:relative; float:left; width:280px; height:230px; background:url("../design/main.gif") 0 0 no-repeat;} #col-browser img {position:absolute; top:35px; left:20px;} #col-background {position:relative; float:left; width:280px; height:250px; background:url("../design/prodlistbg.gif") 0 0 no-repeat;} #col-background img {position:absolute; top:260px; left:0px;} #col-background2 {position:relative; float:left; width:230px; height:250px; background: 0 0 no-repeat;} #col-background2 img {position:absolute; top:0px; left:0px;} #col-background2 tr.d0 td {background-color: #ffffff; color: black; padding:3px;} #col-background2 tr.d1 td {color: black; padding:3px; } #col-background tr.d0 td {background-color: #ffffff; color: black; padding:10px;} #col-background tr.d1 td {color: black; padding:10px; } #col-browser_mb {position:relative; float:left; width:280px; height:230px; background:url("../design/main_mb.gif") 0 0 no-repeat;} #col-browser_mb img {position:absolute; top:35px; left:20px;} #col-browser_af {position:relative; float:left; width:280px; height:230px; background:url("../design/main_af.gif") 0 0 no-repeat;} #col-browser_af img {position:absolute; top:35px; left:20px;} #col-browser_sfs {position:relative; float:left; width:280px; height:230px; background:url("../design/main_sfs.gif") 0 0 no-repeat;} #col-browser_sfs img {position:absolute; top:35px; left:20px;} #col-browser_sb {position:relative; float:left; width:280px; height:230px; background:url("../design/main_sb.gif") 0 0 no-repeat;} #col-browser_sb img {position:absolute; top:35px; left:20px;} #col-browser_df {position:relative; float:left; width:280px; height:230px; background:url("../design/main_df.gif") 0 0 no-repeat;} #col-browser_df img {position:absolute; top:35px; left:20px;} #col-text {float:right; width:600px; padding-top:15px; line-height:1.7;} #col-prodtext {float:right; width:600px; padding-top:0px; line-height:1.7;} #col-prodtext img {position:relative; right:-20px; } #col-prodtext2 {float:right; width:680px; padding-top:0px; line-height:1.7;} #col-prodtext2 #cert {float:right; } #slogan {position:relative; width:430px; height:33px; overflow:hidden; margin:0; padding:0; font-size:180%;} #slogan span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../tmp/slogan.gif") 0 0 no-repeat;} #slogan_af {position:relative; width:430px; height:37px; overflow:hidden; margin:0; padding:0; font-size:180%;} #slogan_af span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../design/slogan_af.gif") 0 0 no-repeat;} #slogan_mb {position:relative; width:430px; height:37px; overflow:hidden; margin:0; padding:0; font-size:180%;} #slogan_mb span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../design/slogan_mb.gif") 0 0 no-repeat;} #slogan_sfs {position:relative; width:430px; height:37px; overflow:hidden; margin:0; padding:0; font-size:180%;} #slogan_sfs span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../design/slogan_sfs.gif") 0 0 no-repeat;} #slogan_sb {position:relative; width:430px; height:37px; overflow:hidden; margin:0; padding:0; font-size:180%;} #slogan_sb span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../design/slogan_sb.gif") 0 0 no-repeat;} #slogan_df {position:relative; width:430px; height:37px; overflow:hidden; margin:0; padding:0; font-size:180%;} #slogan_df span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../design/slogan_df.gif") 0 0 no-repeat;} #slogan_oo {position:relative; width:430px; height:37px; overflow:hidden; margin:0; padding:0; font-size:180%;} #slogan_oo span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../design/slogan_oo.gif") 0 0 no-repeat;} #slogan_bp {position:relative; width:430px; height:37px; overflow:hidden; margin:0; padding:0; font-size:180%;} #slogan_bp span {display:block; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; margin:0; padding:0; background:url("../design/slogan_bp.gif") 0 0 no-repeat;} #btns {margin-top:25px; margin-bottom:0;} #col1-top {width:960px; height:5px; margin-top:15px; background:url("../design/col-top.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden;} #col1-bottom {width:960px; height:5px; margin-bottom:15px; background:url("../design/col-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden;} #col1 {position:relative; padding:15px 30px 15px 20px; background:url("../design/col.gif") 0 0 repeat-y;} #cols2-top {width:960px; height:5px; margin-top:15px; background:url("../design/cols2-top.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden;} #cols2-bottom {width:960px; height:5px; margin-bottom:15px; background:url("../design/cols2-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden;} #cols2 {background:url("../design/cols2.gif") 0 0 repeat-y;} #cols2 #col-left {float:left; width:595px; padding:20px;} #cols2 #col-right {float:right; width:268px; margin-right:1px; padding:20px;} #cols2 #col-left h4, #cols2 #col-right h4 {margin:0; font-size:100%;} #cols2 #col-left .title {background:url("../design/dot.gif") 0 50% repeat-x;} #cols2 #col-left .title h4 {display:inline; padding-right:10px;} #cols2 #col-left .title span {padding-left:10px;} #cols2 .box {margin-top:15px;} #cols2 #col-right h4 {background:url("../design/dot-02.gif") 0 50% repeat-x;} #cols2 #col-right h4 span {padding-right:10px;} #cols2 .col-right-img {float:left; width:65px;} #cols2 .col-right-text {float:right; width:190px;} #cols2 .col-right-text p {margin:0;} #cols3-top {width:960px; height:5px; margin-top:15px; background:url("../design/cols3-top.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden;} #cols3-bottom {width:960px; height:5px; margin-bottom:15px; background:url("../design/cols3-bottom.gif") 0 0 no-repeat; font-size:0; line-height:0; overflow:hidden;} #cols3 {background:url("../design/cols3.gif") 0 0 repeat-y;} .col {float:left; width:308px; padding:0 1px; margin-right:15px;} .col.last {margin-right:0;} .col h3 {margin:0; padding:7px 15px 12px 50px; background:url("../design/cols3-title.gif") 20px 40% no-repeat; font-size: 140%;} .col-text {padding:20px; border-top:1px solid #DFDFDF;} .col-text p {margin:0;} .col-text ul {margin-bottom:0;} .col-more {padding:10px 10px 1px 0; text-align:right;} #cols4-top {width:960px; height:5px; margin-top:10px; font-size:0; line-height:0; overflow:hidden;} #cols4-bottom {width:960px; height:5px; margin-bottom:15px; font-size:0; line-height:0; overflow:hidden;} #cols4 #col-left {float:left; width:600px; padding:0px;} #cols4 #col-right {float:right; width:330px; margin-right:1px; padding:0px;} #cols4 #col-left h4, #cols2 #col-right h4 {margin:0; font-size:100%;} #cols4 #col-left .title {background:url("../design/dot.gif") 0 50% repeat-x;} #cols4 #col-left .title h4 {display:inline; padding-right:10px;} #cols4 #col-left .title span {padding-left:10px;} #cols4 .box {margin-top:0px;} #cols4 #col-right h4 {background:url("../design/dot-02.gif") 0 50% repeat-x;} #cols4 #col-right h4 span {padding-right:10px;} #cols4 .col-right-img {float:left; width:65px;} #cols4 .col-right-text {float:right; width:190px;} #cols4 .col-right-text p {margin:0;} #cols5-top {width:900px;} #cols5-bottom {width:900px; } #cols5 {} #cols5 #col-left {float:left; width:316px; padding:0px;} #cols5 #col-right {float:right; width:580px; margin-right:1px; padding:0px;} #cols5 #col-left h4, #cols5 #col-right h4 {margin:0; font-size:100%;} #cols5 #col-left h2, #cols5 #col-right h2 {margin:0; color:#3399cc; } #cols5 #col-left .title {background:url("../design/dot.gif") 0 50% repeat-x;} #cols5 #col-left .title h4 {display:inline; padding-right:10px;} #cols5 #col-left .title span {padding-left:10px;} #cols5 .box {margin-top:0px;} #cols5 #col-right table {border:0;} #cols5 #col-right tr.d0 td {background-color: #ffffff; color: black; padding:10px;} #cols5 #col-right tr.d1 td {color: black; padding:10px; } /* ---------------------------------------------------------------------------------------------------------- 5) Others ---------------------------------------------------------------------------------------------------------- */ .ico-comment {padding-left:18px; background:url("../design/ico-comment.gif") 0 50% no-repeat;} .ico-rss {padding-left:18px; background:url("../design/ico-rss.gif") 0 50% no-repeat;} .ico-arrow {padding:0px 0 0px 25px; background:url("../design/ul-01.gif") 0 50% no-repeat;} .smaller {font-size:85%;} /* ----------- stylized Wholsale form----------- "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;*/