body {font-size:12px;line-height:1.6;} a {color:#333;text-decoration:none;} a:hover {color:#0071b3;} a:active {color:#f00;} strong {font-weight:bold;} em, i {font-style:italic;} .clearFix:after, #tpUtils .search:after { content:"."; display:block; height:0; visibility:hidden; clear:both;} .clearFix { *zoom:1;} /*.clearFix { zoom:1; display:table;}*/ #tpHeader, #tpBody, #tpFooter { width:100%; height:auto; margin:0 auto; text-align:left;} /* tpHeader */ #tpHeader { height:80px; background-color:#fff;} #tpHeader .wrapperBox { width:960px; margin:0 auto; position:relative;} #tpLogo { display:inline-block; width:105px; height:40px; overflow:hidden; background:url(https://static.tp-link.com/res/style/images/tp-link_logo-new.png) no-repeat 0 0; margin:27px 0 0 15px;} #tpLogo strong { visibility:hidden;} /* tpNav */ #tpNav { width:530px; position:absolute; z-index:99999; left:250px; top:30px;} #tpNav a { color:#000;} #tpNav a:hover { color:#0071b3;} #tpNav > li { float:left; height:50px; line-height:50px; position:relative;} #tpNav > li > a { display:block; width:100%; height:33px; font-size:15px; font-weight:bold; padding-top:17px;} #tpNav > li > a:hover { color:#0071b3;} #tpNav > li > a span { padding:0 15px; line-height:1em;} #tpNav > li > a span.border { border-left:1px #666 solid;} #tpNav > li:hover + li > a span { border-color:#fff;} #tpNav > li:hover > a { background:none; background-color:#ededee; height:33px; border-bottom:1px #d2d2d2 solid;} #tpNav > li:hover > a span { border-color:#ededee;} #tpNav > li:hover .subNav { display:block;} /* .subNav */ #tpNav .subNav { position:absolute; left:0px; top:50px; display:none;} #tpNav .subNav li a { display:block; padding-right:7px; line-height:1em; white-space:nowrap;} #tpNav .subNav li a span {display:block; border:1px #d2d2d2 solid; border-top-color:#fff; padding:7px 43px 7px 15px;} #tpNav .subNav li a:hover span { background-color:#fff;} #tpNav .subNav li.borderBottom { height:7px; } #tpNav .subNav li.borderBottom a { background:none;} #tpNav .subNav li.borderBottom a span, #tpNav .subNav li.borderBottom a:hover span { background:none; border:none;} /* tpUtils */ #tpUtils { position:absolute; right:0; top:18px; text-align:right; color:#666; z-index:999;} #tpUtils .changes a, #tpUtils .location { color:#0071b3;} #tpUtils .changes a { font-weight:normal;} #tpUtils .changes a:hover { text-decoration:underline; color:#f00;} #tpUtils .changes span.vline { padding:0 2px; color:#ccc; font-weight:bold;} #tpUtils .langs strong { color:#666;} #tpUtils .flag img { vertical-align:baseline; border:none;} #tpUtils form { position:absolute; right:0; background-color:#fff;} #tpUtils .search { width:203px; overflow:hidden; border:1px #ccc solid; margin-top:5px; padding:0 0 0 10px; zoom:1;} #tpUtils .search span { float:left; width:170px; padding:3px 0;} #tpUtils .search input { border:none; background:none; line-height:1.2em; height:1.2em;} #tpUtils .search input.text { width:167px; font-size:13px; color:#666; } #tpUtils .search input.button { position:absolute; right:0; width:25px; height:24px; overflow:hidden; text-indent:-9999px; cursor:pointer;} #tpUtils .search input.button:hover { border:none; border-left:1px #ccc solid;} /* tpBody */ #tpBody {} #tpLocation, #tpBanner { width:960px; height:auto; margin:0 auto;} #tpLocation { width:968px; height:14px;} #tpLocation span { position:relative; top:-5px; padding-left:24px; height:1em; overflow:hidden;} #tpBody .wrapperBox { width:100%;max-width:960px; margin:0 auto;} #tpBanner { line-height:0;} /* tpConten */ #tpContent { width:910px; margin:30px 30px 50px; } /* tpNavCol */ #tpNavCol { width:210px; overflow:hidden; float:left;} #tpNavCol > ol { margin-bottom:21px;} #tpNavCol > ol > li > span, #tpNavCol li a { display:block;} #tpNavCol > ol > li > span { border:1px #d2d2d2 solid;border-top-color:#fff;} #tpNavCol > ol > li:first-child > span, #tpNavCol > ol > li[class="current"] + li > span { border-top-color:#d2d2d2;} #tpNavCol li a { height:auto; width:160px; padding-right:30px; line-height:1em; padding-left:18px;padding-top:5px;padding-bottom:5px;} #tpNavCol > ol > li > span {} #tpNavCol > ol > li > span a {font-weight:bold;} #tpNavCol > ol > li.current > span a {} #tpNavCol > ol > li > span a:hover {} #tpNavCol > ol > li.current > span a, #tpNavCol li.current li.current a { color:#0071b3;} #tpNavCol ol ol { display:none; padding:4px 0;} #tpNavCol li li { padding:3px 0; line-height:0;} #tpNavCol li li a { height:auto;line-height:1.2em; padding-top:0; padding-bottom:0; width:180px; padding-right:10px;} #tpNavCol li li a:hover {} #tpNavCol li.current ol { display:block;} #tpNavCol li.current li.current a { } /* tpContentCol */ #tpContentCol div.title { padding-bottom:38px;} #tpContentCol div.title h1 { font-size:20px;font-weight:bold;line-height:1.2;margin-bottom:16px;} #tpContentCol div.title p a { text-decoration:underline;} #tpContentCol div.title h1.larger { font-size:24px;} /* tpFooter */ #tpFooter { padding-top:22px;} #tpFooter .wrapperBox { width:920px; margin:0 auto; position:relative; font-size:11px; padding-bottom:1.5em;} #tpFooter p { position:absolute; right:0; top:-3px; color:#666;} #tpFooter ul li {float:left;padding:0 10px;border-left:1px #666 solid;line-height:1em;} #tpFooter ul li.borderNone { border:none;} #tpFooter ul li.copyright { float:right; border:none; padding-right:0;} #tpFooter ul li.icon { border:none; padding-left:0; position:relative; top:-7px;} #tpFooter ul li.icon a { display:block; width:22px; height:22px; overflow:hidden; text-indent:-9999px;} #tpFooter ul li.normal a { text-indent:0;} /* pageNav */ #pageNav { text-align:right; color:#000!important; width:100%;} #pageNav span { padding:0 2px;} #pageNav span strong { color:#0071b3; text-decoration:underline;} #pageNav a:hover { text-decoration:underline;} #pageNav .current, #pageNav .current a { color:#0071b3; text-decoration:underline;} #pageNav .current { font-weight:bold;} #pageNav .disabled { color:#666;} /* resultBox */ #resultBox, .lightBox { position:absolute; top:0; left:0; width:100%; height:100%; z-index:99999; text-align:center;} #resultBox .bgBox, .lightBox .bgBox { background-color:#E6E6E8; width:100%; height:100%; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7;} #resultBox .contentBox, .lightBox .contentBox { position:absolute;} #resultBox .contentBox .innerBox, .lightBox .contentBox .innerBox { background-color:#fff; border:1px #999 solid; border-width:0 2px 2px 0;} #resultBox .contentBox .innerBox .content, .lightBox .contentBox .innerBox .content { text-align:left; padding:1.5em; border:2px #ccc solid;} #resultBox .contentBox .innerBox .content p, .lightBox p { margin-bottom:1em; font-size:14px;} #resultBox .contentBox .innerBox .content .title, .lightBox .title { font-size:20px;font-weight:bold;line-height:1.2;padding-bottom:1em;} #resultBox .contentBox .innerBox .content .title strong {display:block; height:32px; padding-left:30px; line-height:32px;} #resultBox .contentBox .innerBox .content .title strong.failed, .lightBox .failed {padding-left:35px;} #resultBox .contentBox .innerBox .content a, .lightBox a { color:#0071b3;} #resultBox .contentBox .innerBox .content a:hover, .lightBox a:hover { text-decoration:underline;} #resultBox .contentBox .innerBox .content .note, .lightBox .note { color:#646464; font-size:12px;} #resultBox .contentBox .innerBox .content .button, .lightBox .button { text-align:center; margin-top:3em;} #resultBox .contentBox .innerBox .content input, .lightBox .input { border:1px #ccc solid; height:19px; font-size:12px; padding:0 1em;} .acountInfoBox { text-align:right; height:0em; padding:0 23px;} .acountInfoBox a { text-decoration:underline;} @media (max-width:736px) { body.mobile-web #tpBody.on { -webkit-transform: translateX(-83%); -moz-transform: translateX(-83%); -ms-transform: translateX(-83%); -o-transform: translateX(-83%); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } body.mobile-web #tpBody.leave { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } body.mobile-web #tpHeader.on { -webkit-transform: translateX(-83%); -moz-transform: translateX(-83%); -ms-transform: translateX(-83%); -o-transform: translateX(-83%); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } body.mobile-web #tpHeader.leave { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } body.mobile-web #tpFooter.on { -webkit-transform: translateX(-83%); -moz-transform: translateX(-83%); -ms-transform: translateX(-83%); -o-transform: translateX(-83%); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } body.mobile-web #tpFooter.leave { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } body.mobile-web .wtbBody.on { -webkit-transform: translateX(-83%); -moz-transform: translateX(-83%); -ms-transform: translateX(-83%); -o-transform: translateX(-83%); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } body.mobile-web .wtbBody.leave { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); -ms-transform: translateX(0); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } body{ background:none} .mobile-web #tpLocation{ display:none} .mobile-web #tpLocation, #tpBanner, #tpContent{ width:auto} .mobile-web #tpBanner img{ display:none; } .mobile-web #tpContent{ margin:30px 6% 0} .mobile-web #tpNavCol{ width:250px;} .mobile-web #tpNavCol li a{ width:180px; padding-bottom:10px; padding-top:10px} .mobile-web #tpNavCol > ol > li > span a{ font-size: 14px; font-weight:normal; background:#f5f5f7 url(https://static.tp-link.com/res/m/m_image/img/menuBar_Arrow.png) no-repeat 210px 50%/15px auto;} .mobile-web #tpNavCol > ol > li.current > span a{background-image: url(https://static.tp-link.com/res/m/m_image/img/menuBar_Arrow_on.png);} .mobile-web #tpContentCol div.title{ overflow:hidden} .mobile-web #tpContentCol div.title>select{ position:absolute;left:0; top:40px; padding:3px} .mobile-web .searchBox{ margin-top:80px;} .mobile-web #tpContentCol div.title h1{margin-bottom:0;} .mobile-web #tpContentCol div.title .selectBox, .mobile-web #tpContentCol div.title .textBox, .mobile-web #tpContentCol div.title .buttonBox, .mobile-web #tpContentCol div.title label{ margin-right:3px; margin-bottom:10px; display:block; float:left} .mobile-web #tpContentCol div.title .buttonBox{ margin-right:0px} .mobile-web #tpContentCol div.title label{ float:none;font-size: 16px;font-weight: bold;} .mobile-web #tpFooter{ background-color:#e6e6e8} .mobile-web #tpFooter .wrapperBox{ width:88%; margin:0 auto} .mobile-web #tpFooter ul li{ margin-bottom:10px} .mobile-web #tpFooter p{ position:relative; right:inherit; top:inherit;} .mobile-web #tpFooter ul li a{ display:block; line-height:2em} .mobile-web #tpFooter ul li.icon{ top:0} }