/*================================= * Author: Patrick.Chen@TP-LINK.COM * Created: 2011-02-11 * Last Modified: 2013-11-11 //=================================*/ sup { -webkit-text-size-adjust:none;/*for chrome*/ font-size:0.6em; vertical-align:baseline; position:relative; top:-0.4em;} /*Default Page*/ #tpContentCol .content { padding-bottom:4em;} #tpContentCol .content .default { padding-top:25px;} #tpContentCol .content .default li { width:33%; float:left; overflow:hidden; padding-bottom:2em; background-position:0 0; background-repeat:no-repeat;} #tpContentCol .content .default li h2 { height:60px;overflow:hidden;padding-left:61px;padding-right:20px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; line-height:1em;position:relative;} #tpContentCol .content .default li h2 a { position:absolute; bottom:14px; width:150px;} #tpContentCol div.content .clear { float:none; clear:both; height:0; padding:0; margin:0;} /*#tpContentCol div.content .productList, #tpContentCol div.content .productList li { width:671px;}*/ #tpContentCol div.content .productList li { } #tpContentCol div.content .productList li h2 { background:#f5f5f7 url(../images/menuBarColor.jpg) repeat; border:1px #ccc solid;font:bold 14px/0 "Trebuchet MS", Arial, Helvetica, sans-serif;padding:12px 8px;margin-bottom:28px;} #tpContentCol div.content .productList li li { float:left; width:223px; overflow:hidden; padding-bottom:28px; line-height:0; position:relative;} #tpContentCol div.content .productList li li.clear { padding:0; width:100%; float:none;} #tpContentCol div.content .productList li li span { display:block; width:96%; overflow:hidden;/* border:1px red solid;*/} #tpContentCol div.content .productList li li span.productImage { height:113px; position:relative;} #tpContentCol div.content .productList li li span.productImage img { position:absolute; bottom:0; left:0;} #tpContentCol div.content .productList li li span.productName { font-weight:bold; line-height:1em; padding:10px 0 4px 0;} #tpContentCol div.content .productList li li span.productName .discontinued { font-style:italic; font-size:0.9em; color:#666; font-weight:normal;} #tpContentCol div.content .productList li li span.productModel { line-height:1em;} #tpContentCol div.content .productList li li span.productStatus { line-height:1em; position:absolute; top:5px; left:0; width:82%; text-align:right;} /*Product Information*/ body#productInformation #tpContent { width:900px; margin-left:32px;} #basic, #details, #more { position:relative;} /* #basic*/ #basic { padding-left:480px; min-height:335px; background:url(../images/productinfo_basic_line.jpg) no-repeat 50% 100%;} #basic h1, #highlights { width:420px;} #basic h1 { margin-bottom:45px; font:normal 18px/1 "Trebuchet MS", Arial, Helvetica, sans-serif;} #basic h1 .productName { font-weight:bold; font-size:21px;} #basic h1 .productModel { display:block; padding-top:5px;} #basic h1 a.discontinued { color:#666; font-weight:normal; font-size:12px; font-style:italic;} #basic h1 a.discontinued:hover { text-decoration:underline; color:#0071b3;} /* #highlights*/ #highlights { padding-bottom:3em; } #highlights h2 { color:#0071b3; font:normal 18px/1 "Trebuchet MS", Arial, Helvetica, sans-serif;} #highlights ul { padding:15px 0 0 1.1em;} #highlights li { list-style:disc outside; padding-bottom:3px; font-size:14px; line-height:1.4em;} /* tpProductGallery*/ #tpProductGallery, #awards { width:450px; overflow:hidden; position:absolute; left:0; top:0; } #tpProductGallery { height:310px; line-height:0;} #tpProductGallery #gallery { position:relative; width:100%; height:100%;} #tpProductGallery #gallery .productStatus { position:absolute; top:10px; right:10px;} #tpProductGallery ul { padding:0; margin:0;} #tpProductGallery #showArea { width:100%; height:268px; text-align:center;} #tpProductGallery #listArea { width:auto; height:42px; text-align:right; zoom:1; position:absolute; right:0; bottom:0;} #tpProductGallery #listArea:after, #tpProductGallery #awards li:after { content:"."; display:block; clear:both; height:0; visibility:hidden;} #tpProductGallery #listArea li { display:inline; float:left; width:42px; height:42px; overflow:hidden; margin-left:4px;} #tpProductGallery #listArea li a { display:block; width:40px; height:40px; overflow:hidden; border:1px #ccc solid; text-align:center;} #tpProductGallery #listArea li a:hover, #tpProductGallery #listArea li.current a { border-color:#0071b3;} #tpProductGallery #awards { width:100%; height:auto; overflow:hidden; line-height:1em; border-width:1px 0 0 1px; border-color:#fff; border-style:solid;} #tpProductGallery #awards h2 { width:100%; position:absolute; left:0; top:0; z-index:10; line-height:1em; background:url(../images/awards.gif) no-repeat 0 0; } #tpProductGallery #awards h2 a { display:block; width:56px; height:56px; overflow:hidden; line-height:999px;} #tpProductGallery #awards h2 a.close { visibility:hidden; width:15px; height:16px; overflow:hidden; background:url(../images/close.gif) no-repeat 0 0; position:absolute; top:3px; right:8px;} #tpProductGallery #awards h2 a.close:hover { background-position:-15px 0;} #tpProductGallery #awards div { visibility:hidden; height:280px; width:444px; overflow:auto; position:relative; top:23px;} #tpProductGallery #awards ul { margin-left:40px; padding-right:1em;} #tpProductGallery #awards li { line-height:1.4em; margin-bottom:1em; position:relative; zoom:1;} #tpProductGallery #awards li .img { float:left;} #tpProductGallery #awards li p.content { margin-left:90px; *float:left; *margin-left:10px;} #tpProductGallery #awards.current { height:100%; border-color:#eee; background:#fff url(../images/awardsArea-Shadow.gif) no-repeat 100% 100%;} #tpProductGallery #awards.current h2 .close, #tpProductGallery #awards.current div { visibility:visible;} /* #details*/ #details { width:702px; border:1px #ccc solid; float:left; min-height:814px;} #details i, #details em { font-style:italic;} #details h2 { font:bold 16px/1 "Trebuchet MS", Arial, Helvetica, sans-serif; width:20%;overflow:hidden;background-color:#f5f5f7;text-align:center;position:absolute;top:0;} #details h2 a {display:block;border:1px #ccc solid;border-top:none;border-left-color:#fff;padding:7px 0;} #details a:hover { text-decoration:underline;} #details h2 a:hover { text-decoration:none;} #overviewTitle { left:-1px;} #details h2#overviewTitle a { border-left-color:#ccc;} #details h2#overviewTitle { border-left:none; width:141px;} #featuresTitle { left:140px;} #specificationsTitle { left:280px;} #applicationTitle { left:420px;} #downloadTitle { left:560px;} #details h2#downloadTitle { width:143px;} #details .content { margin-top:46px; padding:0.8em 30px 60px 30px; display:none;} #details .content h3 { font:20px/1 "Trebuchet MS", Arial, Helvetica, sans-serif; padding:14px 0;} #details .content p { margin-bottom:1em;} #details .content li { margin-left:1em; list-style:disc outside; margin-bottom:0.6em;} #details .current .content { display:block;} #details .current h2 a { background-color:#fff; color:#0071b3; cursor:default;} #specifications .content table, .specifications .content table { width:100%; background-color:#f5f5f7; border-spacing:0; border-collapse:collapse; margin-bottom:1em;} #specifications .content td, #specifications .content th, .specifications .content td, .specifications .content th { padding:3px 1em; border:1px #ccc solid;} #specifications .content th, .specifications .content th { font-weight:bold; color:#666;} #specifications .content thead th, .specifications .content thead th { background-color:#eee; color:#333; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} #download .content h3, #details .download .content h3 { background:url(../images/document.jpg) no-repeat 0 0; padding-left:45px; font-size:21px; padding-bottom:0.8em;} #download .content li#image h3, #details .download .content li#image h3 { background-image:url(../images/image.jpg);} #download .content li#software h3, #details .download .content li#software h3 { background-image:url(../images/software.jpg);} #download .content h3 span, #details .download .content h3 span { font-size:12px; font-weight:normal;} #download .content li, #details .download .content li { list-style:none; width:33%; overflow:hidden; float:left; margin:0; padding:0;} #download .content li li, #download .content li li li, #details .download .content li li, #details .download .content li li li { float:none; width:auto; border:none;} #download .content ul, #details .download .content ul { padding-bottom:2em;} #download .content ul ul, #details .download .content ul ul { padding-bottom:0;} #download .content li ol, #details .download .content li ol { padding-left:45px;} #download .content li li, #details .download .content li li { background:url(../images/triangle.jpg) no-repeat 0 0.5em; padding-left:0.8em; margin-bottom:0.8em; line-height:1.2em; padding-right:2em;} #download .content li li li, #details .download .content li li li { background:none; padding:0; margin-bottom:0.2em;} #download .content li li a img, #details .download .content li li a img { border:1px #ccc solid;} #download .content li li a:hover img, #details .download .content li li a:hover img { border-color:#0071b3;} #download .content li li dl dt, #details .download .content li li dl dt { float:left; font-weight:bold; padding-right:0.5em; margin-bottom:7px; color:#000; } #download .content li li dl dd, #details .download .content li li dl dd { float:left; } #download .content li li dl dd li, #details .download .content li li dl dd li { line-height:1em; margin-bottom:7px; } #download .content li#document li dl dd li, #details .download .content li#document li dl dd li { background:url(../images/dot.gif) no-repeat 0 0.25em; padding-left:7px; } #download .content li#document li dl dt, #download .content li#document li dl dd, #details .download .content li#document li dl dt, #details .download .content li#document li dl dd { float:none; } #download .content li#document li dl dd, #details .download .content li#document li dl dd { position:relative; left:-7px; } #download .content li#document, #details .download .content li#document { width:34%;} #download .content li#software .note a, #details .download .content li#software .note a { color:#cd500a; text-decoration:underline; line-height:1.2em!important;} #download .content li#software .note a:hover, #details .download .content li#software .note a:hover { color:#f00;} #download .content p.note, #details .download .content p.note { background:url(../images/pencil.jpg) no-repeat 0 0; padding-left:24px; padding-top:5px;} #details.noapp h2 { width:175px;} #details.noapp h2#overviewTitle { width:176px;} #details.noapp #featuresTitle { left:175px;} #details.noapp #specificationsTitle { left:350px;} #details.noapp #application { display:none;} #details.noapp #downloadTitle { left:525px; width:178px;} #application a.faq {background: url("../images/faqIcon.jpg") no-repeat scroll 0 0 transparent; padding-left:1.8em; color:#C00; text-decoration:underline;} /* #more*/ #more { width:187px; overflow:hidden; float:right; } #relatedProduct, #faq, #productSpotlight, #printerCmpList, #more .spotlightBox { border:1px #ccc solid; margin-bottom:7px;} #more h2 {font:bold 16px/1 "Trebuchet MS", Arial, Helvetica, sans-serif; width:100%;overflow:hidden;background-color:#f5f5f7;text-align:center;border-bottom:1px #ccc solid;padding:7px 0;} #relatedProduct li { background:url(../images/relatedproduct_gradient-line.jpg) no-repeat 50% 100%; padding-bottom:20px;} #relatedProduct li span { display:block; line-height:1em; text-align:center;} #relatedProduct li span.productImage { padding-top:20px; padding-bottom:5px;} #relatedProduct li span.productName { padding-bottom:5px; padding-left:5px; padding-right:5px;} #relatedProduct li span.productModel { font-weight:bold;} #printerCmpList h2, #more .spotlightBox h2 { font-size:15px;} #printerCmpList .content a, #more .spotlightBox .content a { display:block; width:100%; height:auto; overflow:hidden;} #printerCmpList .content a { height:157px; background:url(../images/printer-server.jpg) no-repeat 0 0; line-height:999px; text-indent:999px;} #faq { background:url(../images/faq.jpg) no-repeat 50% 58px; text-align:center;} #faq .content { padding:10px;} #faq .content a { line-height:1.2em; display:block; padding-top:110px;} #productSpotlight p, #more .spotlightBox p { width:100%; overflow:hidden; line-height:1.2em;} #productSpotlight p a, #productSpotlight p a span, #more .spotlightBox p a, #more .spotlightBox p a span { display:block;} #productSpotlight p a span, #more .spotlightBox p a span { padding:5px 5px 5px 1.2em; background:url(../images/triangle.gif) no-repeat 0.5em 0.8em;} #productSpotlight p a:hover span, #more .spotlightBox p a:hover span { background-image:url(../images/triangle_on.gif);} .productSpotlight { display:block; width:110px; max-width:220px; height:21px; overflow:visible; white-space:nowrap; background:url(../images/spotlightbtn.png) no-repeat 0 0; padding-left:0.8em; margin-top:1em;} .productSpotlight a { display:block; height:100%; font-size:12px; line-height:21px; padding-right:20px; background:url(../images/spotlightbtn.png) no-repeat 100% 50%;} #productSpotlightBox { padding-top:1.5em;} #productSpotlightBox li { width:210px; overflow:hidden; float:left; margin-left:17px; border:1px #ccc solid; border-bottom:none; background-color:#f8f8fa;} #productSpotlightBox li.first { margin-left:0;} #productSpotlightBox ul { zoom:1; background:url(../images/spotlightbg.png) repeat-x 0 100%; padding-bottom:1px; margin-bottom:1.5em;} #productSpotlightBox ul:after { content:"."; display:block; clear:both; height:0; visibility:hidden;} #productSpotlightBox li span { display:block;} #productSpotlightBox .image { width:100%; height:70px; overflow:hidden; text-align:center;} #productSpotlightBox .title a { display:block; padding:5px 1em 5px 1.2em; background:url(../images/triangle.gif) no-repeat 0.5em 0.8em; line-height:1.2em;} #productSpotlightBox .title a:hover { background-image:url(../images/triangle_on.gif);} #productSpotlightBox .r1 { background-repeat:no-repeat;} #productSpotlightBox .r2 { background-image:url(../images/spotlightbg_2.png); background-repeat:no-repeat;} /*Hot Bus and New Comers*/ #tpContentCol .content .normalList { width:100%; border-spacing:0; border:none; border-collapse:collapse;} #tpContentCol .content .normalList td { vertical-align:middle; padding:29px 0;} #tpContentCol .content .normalList .border td { border-top:1px #ccc solid;} #tpContentCol .content .normalList td span { display:block;} #tpContentCol .content .normalList td br { display:none;} #tpContentCol .content .normalList td .productImage { width:183px;} #tpContentCol .content .normalList td .productImage a { display:block; width:160px; margin-right:23px; text-align:center;} #tpContentCol .content .normalList td .title { font:bold 16px/1 "Trebuchet MS", Arial, Helvetica, sans-serif; color:#0071b4;} body#newComers #tpContentCol .content .normalList td .title { color:#3e8824;} #tpContentCol .content .normalList td .productName { font-weight:bold; line-height:1em; padding:1em 0 0.2em 0;} .liveCameraDemo { border:none;display:block; width:130px; overflow:visible;padding-top:5px;} .liveCameraDemo a { display:block; width:auto; height:26px;overflow:visible;line-height:27px;color:#ff9933;font-size:12px;text-decoration:none;white-space:nowrap;background:url(../images/btn_camera.gif) no-repeat 0 0;padding:0;margin:0;} .liveCameraDemo a strong { font-weight:bold; display:block; height:100%; background:url(../images/btn_camera.gif) no-repeat 100% 0; margin-left:1em; padding-right:1em;} .liveCameraDemo a:hover { background-position:0 -26px; color:#ff0000;} .liveCameraDemo a:hover strong { background-position:100% -26px;} #tpContentCol div.content .productList li li span.liveCameraDemo { width:130px;overflow:visible;} #liveCameraDemo { position:absolute; left:0; top:280px;} .proware { font-size:14px;} .proware h2 a { color:#0164fd;} .proware .title a:hover { text-decoration:underline;} #pnlNote a { color:#0066cc;} #pnlNote a:hover { text-decoration:underline;} #more .buynow h2 { background:none; border:none; } .buynow { position:relative; height:200px; } #more .buynow { overflow:visible; } .buynow .clipBox { width:170px; height:130px; margin:5px auto; overflow:hidden; margin-top:10px; position:relative; left:7px; top:-6px; } .buynow ul { width:auto; *zoom:1; } .buynow ul:after { content:"."; display:block; clear:both; height:0; visibility:hidden; } .buynow ul li { width:85px; overflow:hidden; float:left; margin-bottom:10px; } .buynow ul li a { display:block; width:75px; max-height:65px; overflow:hidden; margin:0 auto; text-align:center; position:relative; } .buynow .button { position:absolute; top:95px; z-index:5; cursor:pointer; } .buynow .button, .buynow .button a { font:normal 30px/1 Tahoma, Geneva, sans-serif; color:#aaa; text-decoration:none; } .buynow .button a:hover { color:#000; } .buynow .prev { left:0px; } .buynow .next { right:0px; } .buynow .large { position:absolute; z-index:10 left:0; top:0; background-color:#fff; border:1px #ccc solid; border-bottom:2px #000 solid; border-right:1px #000 solid; cursor:pointer; } .buynow .large img { border:5px solid #fff; }