SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.7k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">2<html lang="en" xml:lang="en" xmlns="">3 <head>4 <style>5 /* @license6 * MyFonts Webfont Build ID 2369095, 2012-09-20T14:15:08-04007 * 8 * The fonts listed in this notice are subject to the End User License9 * Agreement(s) entered into by the website owner. All other parties are 10 * explicitly restricted from using the Licensed Webfonts(s).11 * 12 * You may obtain a valid license at the URLs below.13 * 14 * Webfont: Korolev Compressed Light by Device15 * URL: http://www.myfonts.com/fonts/device/korolev/compressed-light/16 * Copyright: Copyright (c) 2010 by Rian Hughes / Device. All rights reserved.17 * 18 * Webfont: Korolev Compressed Thin by Device19 * URL: http://www.myfonts.com/fonts/device/korolev/compressed-thin/20 * Copyright: Copyright (c) 2010 by Rian Hughes/Device. All rights reserved.21 * 22 * 23 * License: http://www.myfonts.com/viewlicense?type=web&buildid=236909524 * Licensed pageviews: 10,00025 * 26 * © 2012 Bitstream Inc27*/28 29 30 31 32 @font-face {33 font-family: 'Korolev';34 src: url('242647_0_0.eot');35 src: url('242647_0_0.eot?#iefix') format('embedded-opentype'),36 url('242647_0_0.woff') format('woff'),37 url('242647_0_0.ttf') format('truetype');38 font-weight: 200;39 font-stretch: extra-condensed;40}41 42 43@font-face {44 font-family: 'Korolev';45 src: url('242647_1_0.eot');46 src: url('242647_1_0.eot?#iefix') format('embedded-opentype'),47 url('242647_1_0.woff') format('woff'),48 url('242647_1_0.ttf') format('truetype');49 font-weight: 100;50 font-stretch: extra-condensed;51}52 53 54/* @license55 * MyFonts Webfont Build ID 2376049, 2012-10-02T00:43:42-040056 * 57 * The fonts listed in this notice are subject to the End User License58 * Agreement(s) entered into by the website owner. All other parties are 59 * explicitly restricted from using the Licensed Webfonts(s).60 * 61 * You may obtain a valid license at the URLs below.62 * 63 * Webfont: Korolev Compressed Medium by Device64 * URL: http://www.myfonts.com/fonts/device/korolev/compressed-medium/65 * Copyright: Copyright (c) 2010 by Rian Hughes / Device. All rights reserved.66 * Licensed pageviews: 10,00067 * 68 * 69 * License: http://www.myfonts.com/viewlicense?type=web&buildid=237604970 * 71 * © 2012 Bitstream Inc72*/73 74@font-face {75 font-family: 'Korolev';76 src: url('244171_0_0.eot');77 src: url('244171_0_0.eot?#iefix') format('embedded-opentype'),78 url('244171_0_0.woff') format('woff'),79 url('244171_0_0.ttf') format('truetype');80 font-weight: normal;81 font-stretch: extra-condensed;82}83 84 85 86/* @license87 * MyFonts Webfont Build ID 2368440, 2012-09-19T15:35:21-040088 * 89 * The fonts listed in this notice are subject to the End User License90 * Agreement(s) entered into by the website owner. All other parties are 91 * explicitly restricted from using the Licensed Webfonts(s).92 * 93 * You may obtain a valid license at the URLs below.94 * 95 * Webfont: Proxima Nova S Semibold by Mark Simonson96 * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-semibold/97 * Licensed pageviews: 50,00098 * 99 * Webfont: Proxima Nova A Semibold by Mark Simonson100 * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-semibold/101 * Licensed pageviews: unspecified102 * 103 * Webfont: Proxima Nova Semibold by Mark Simonson104 * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/semibold/105 * Licensed pageviews: unspecified106 * 107 * 108 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2368440109 * Webfonts copyright: Copyright (c) Mark Simonson, 2005. All rights reserved.110 * 111 * © 2012 Bitstream Inc112*/113 114@font-face {115 font-family: 'Proxima Nova';116 src: url('2423B8_2_0.eot');117 src: url('2423B8_2_0.eot?#iefix') format('embedded-opentype'),118 url('2423B8_2_0.woff') format('woff'),119 url('2423B8_2_0.ttf') format('truetype');120 font-weight: bold;121}122 123/* @license124 * MyFonts Webfont Build ID 2368444, 2012-09-19T15:42:32-0400125 * 126 * The fonts listed in this notice are subject to the End User License127 * Agreement(s) entered into by the website owner. All other parties are 128 * explicitly restricted from using the Licensed Webfonts(s).129 * 130 * You may obtain a valid license at the URLs below.131 * 132 * Webfont: Proxima Nova A Regular by Mark Simonson133 * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/a-regular/134 * Licensed pageviews: unspecified135 * 136 * Webfont: Proxima Nova S Regular by Mark Simonson137 * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/s-regular/138 * Licensed pageviews: 10,000139 * 140 * Webfont: Proxima Nova Regular by Mark Simonson141 * URL: http://www.myfonts.com/fonts/marksimonson/proxima-nova/regular/142 * Licensed pageviews: unspecified143 * 144 * 145 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2368444146 * Webfonts copyright: Copyright (c) Mark Simonson, 2005. All rights reserved.147 * 148 * © 2012 Bitstream Inc149*/150 151@font-face {152 font-family: 'Proxima Nova';153 src: url('2423BC_2_0.eot');154 src: url('2423BC_2_0.eot?#iefix') format('embedded-opentype'),155 url('2423BC_2_0.woff') format('woff'),156 url('2423BC_2_0.ttf') format('truetype');157 font-weight: normal;158}159 160 161 162/* @license163 * MyFonts Webfont Build ID 2368449, 2012-09-19T15:49:18-0400164 * 165 * The fonts listed in this notice are subject to the End User License166 * Agreement(s) entered into by the website owner. All other parties are 167 * explicitly restricted from using the Licensed Webfonts(s).168 * 169 * You may obtain a valid license at the URLs below.170 * 171 * Webfont: Arlt Blanca by PampaType172 * URL: http://www.myfonts.com/fonts/pampatype/arlt/blanca/173 * Copyright: Copyright © 2005 by PampaType. All rights reserved.174 * Licensed pageviews: 10,000175 * 176 * Webfont: Arlt Blanca Italic by PampaType177 * URL: http://www.myfonts.com/fonts/pampatype/arlt/blanca-italic/178 * Copyright: Copyright © 2005 by PampaType. All rights reserved.179 * Licensed pageviews: unspecified180 * 181 * Webfont: Arlt Blanca Versalita by PampaType182 * URL: http://www.myfonts.com/fonts/pampatype/arlt/blanca-versalita/183 * Copyright: Copyright © 2008 by PampaType. All rights reserved.184 * Licensed pageviews: unspecified185 * 186 * 187 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2368449188 * 189 * © 2012 Bitstream Inc190*/191 192 @font-face {193 font-family: 'Arlt Blanca';194 src: url('2423C1_0_0.eot');195 src: url('2423C1_0_0.eot?#iefix') format('embedded-opentype'),196 url('2423C1_0_0.woff') format('woff'),197 url('2423C1_0_0.ttf') format('truetype');198 font-style: normal;199}200 201@font-face {202 font-family: 'Arlt Blanca';203 src: url('2423C1_1_0.eot');204 src: url('2423C1_1_0.eot?#iefix') format('embedded-opentype'),205 url('2423C1_1_0.woff') format('woff'),206 url('2423C1_1_0.ttf') format('truetype');207 font-style: italic;208}209 210@font-face {211 font-family: 'Arlt Blanca Small Caps';212 src: url('2423C1_2_0.eot');213 src: url('2423C1_2_0.eot?#iefix') format('embedded-opentype'),214 url('2423C1_2_0.woff') format('woff'),215 url('2423C1_2_0.ttf') format('truetype');216 font-style: normal;217}218 219/* @license220 * MyFonts Webfont Build ID 2369311, 2012-09-20T21:27:54-0400221 * 222 * The fonts listed in this notice are subject to the End User License223 * Agreement(s) entered into by the website owner. All other parties are 224 * explicitly restricted from using the Licensed Webfonts(s).225 * 226 * You may obtain a valid license at the URLs below.227 * 228 * Webfont: Arlt Gris Versalita by PampaType229 * URL: http://www.myfonts.com/fonts/pampatype/arlt/gris-versalita/230 * Licensed pageviews: 10,000231 * 232 * Webfont: Arlt Gris by PampaType233 * URL: http://www.myfonts.com/fonts/pampatype/arlt/gris/234 * Licensed pageviews: unspecified235 * 236 * Webfont: Arlt Gris Italic by PampaType237 * URL: http://www.myfonts.com/fonts/pampatype/arlt/gris-italic/238 * Licensed pageviews: unspecified239 * 240 * 241 * License: http://www.myfonts.com/viewlicense?type=web&buildid=2369311242 * Webfonts copyright: Copyright © 2008 by PampaType. All rights reserved.243 * 244 * © 2012 Bitstream Inc245*/246 247@font-face {248 font-family: 'Arlt Gris';249 src: url('24271F_1_0.eot');250 src: url('24271F_1_0.eot?#iefix') format('embedded-opentype'),251 url('24271F_1_0.woff') format('woff'),252 url('24271F_1_0.ttf') format('truetype');253 font-style: normal;254}255 256@font-face {257 font-family: 'Arlt Gris';258 src: url('24271F_2_0.eot');259 src: url('24271F_2_0.eot?#iefix') format('embedded-opentype'),260 url('24271F_2_0.woff') format('woff'),261 url('24271F_2_0.ttf') format('truetype');262 font-style: italic;263}264 265@font-face {266 font-family: 'Arlt Gris Small Caps';267 src: url('24271F_0_0.eot');268 src: url('24271F_0_0.eot?#iefix') format('embedded-opentype'),269 url('24271F_0_0.woff') format('woff'),270 url('24271F_0_0.ttf') format('truetype');271 font-style: normal;272}273 274 275 276/*277*************************************************278 279FETCH280General Screen Styles281 282Created by the wacky troop at Happy Cog283http://www.happycog.com/284 285*************************************************286*/287 288/*------------------------------------------- 289 General Selectors290-------------------------------------------*/291* { margin: 0; padding: 0; line-height: 1.45; font-style: normal; font-weight: normal; }292html { height: 100%; background: #fff; }293body { font: normal 62.5% "Lucida Grande", "Trebuchet MS", Arial, sans-serif; background: #759ec9 url(/i/screen/body-bg.jpg) repeat-x 0 bottom; border-top: 18px solid #103256; }294body.home { background: #fff; }295 296body {297 text-rendering: optimizeLegibility;298 font-variant-ligatures: common-ligatures, discretionary-ligatures;299 font-variant-alternates: stylistic(1);300 -moz-font-feature-settings:"liga=1", "dlig=1", "ss01=1";301 -ms-font-feature-settings:"liga", "dlig", "ss01" 1;302 -o-font-feature-settings:"liga", "dlig", "ss01" 1; 303 -webkit-font-feature-settings:"liga", "dlig", "ss01" 1;304 font-feature-settings:"liga", "dlig", "ss01" 1;305}306 307/* block level */308 309h1 { color: #3b3b3b; font: 36px "Arlt Gris Small Caps", Georgia, serif; margin: 0; }310#page-head h1, #page-head h1 a { color: #fff; }311 #page-head h1 a { font-weight: normal; background: none; }312div.intro.head { padding-top: 9px; padding-bottom: 9px; }313.intro.head h1 { color: #173a5f; padding-top: 9px; }314.intro.left { float: left; width: 272px; padding-right: 32px; margin-right: 3px; }315.intro.right { float: left; width: 271px; padding-left: 32px; margin-left: 3px; }316h2 { color: #173a5f; font-size: 18px; margin: 0 0 23px; padding: 0 0 12px; border-bottom: 1px solid #e7ebef; }317 h2.entry span { color: #333; font-size: 13px; display: block; }318h3, .left-balloon h3, .right-balloon h3 { color: #4f4f4f; font-size: 24px; line-height: 24px; font-family: "Arlt Blanca", Georgia, serif; font-weight: normal; font-style: italic; padding: 0 0 2px; border-bottom: 1px solid #e7ebef; margin: 0 0 18px; }319h3 * { color: #4f4f4f; font-size: 24px; line-height: 24px; font-family: "Arlt Blanca", Georgia, serif; font-weight: normal; font-style: italic; }320.main h3 { padding-top: 12px; }321.main h3:first-child { padding-top: 0; }322.sub h3 { margin-bottom: 12px; }323form h3 { color: #173a5f; font-size: 14px; font-style: normal; text-transform: none; font-family: "Proxima Nova"; border: none; padding: 0; margin: 0; line-height: 1.4; font-weight: bold; }324h4{ color: #173a5f; font-size: 13px; font-weight: bold; text-transform: uppercase; margin: 0 0 5px; }325h4.entry { font-size: 14px; color: #333; font-weight: normal; text-transform: none; margin: 0 0 10px; }326.news-list h4.entry { font-size: 18px; padding: 13px 0 0 50px; min-height: 53px; }327 h4.entry a { color: #173a5f; font-weight: normal; background-image: none; }328 .news-list h4.entry, .news-list h4.entry a, .news-list h4.entry span { line-height: 1.2; }329 h4.entry span { font-size: 12px; }330h5, #content .label-head { color: #173a5f; font-size: 12px; font-weight: bold; margin: 0 0 5px; border: none; padding-bottom: 0; }331h6 { font-size: 11px; color: #173a5f; margin: 0 0 5px; }332 333p, ul, dl, ol, address, table, div.vcard { font-size: 12px; color: #333; margin: 0 0 1.7em; }334ul ul, ul ol, ol ul, ol ol { margin-left: 1.7em; }335.sub p { line-height: 1.3; margin-bottom: 1.2em; }336address, .mailing-address { margin-bottom: 1.4em; }337 338.section .main p + ul { margin: -15px 0 1em; }339.section .main p + ul.end-para { margin: -15px 0 1.7em; }340 341.main p.more { margin-top: -5px; }342.section ul + p.more { margin-top: -10px; }343.section .main p + ul + p.more { margin-top: 0; }344 345.left-balloon ol, .right-balloon ol, .left-balloon ul, .right-balloon ul { margin-left: 30px; }346ul li { list-style-type: none; background: transparent url(/i/screen/list-marker.gif) no-repeat 0 0.5em; padding: 0 0 0 11px; margin: 0 0 4px; }347 348dt { font-size: 14px; line-height: 1.2; margin: 18px 0 2px; }349dt.first { margin-top: 0; }350 dt a { color: #173a5f; font-weight: normal; background-image: none;line-height: 1.2; }351 352blockquote { background: transparent url(/i/screen/dog-rule-bluish-bottom.png) repeat-x 0 bottom; text-align: center; padding: 0 0 5px; margin: 0 0 1.2em; background-size: 394px 5px; }353 blockquote p { font-size: 16px; color: #036; padding: 0 15px; }354 blockquote p.first { background: transparent url(/i/screen/dog-rule-bluish-top.png) no-repeat 0 0; padding-top: 33px; background-size: 394px 10px; }355 blockquote span.first { background: transparent url(/i/widgets/open-quote.png) no-repeat 0 0; padding-left: 31px; background-size: 32px 32px; background-position: 0% -9px; }356 blockquote span.last { background: transparent url(/i/widgets/close-quote.png) no-repeat right 0; padding-right: 35px; background-size: 32px 32px; background-position: 100% -9px; }357 blockquote cite { font-size: 13px; color: #434344; }358 blockquote cite span { display: block; }359 blockquote cite span, blockquote cite span a { font-size: 12px; color: #036; }360 blockquote cite span a { font-weight: normal; }361 362table { text-align: left; width: 100%; }363 th { color: #173a5f; font-weight: bold; }364 thead th, thead td { background: transparent url(/i/screen/table-border.gif) repeat-x 0 bottom; padding: 0 0 5px; }365 tbody td { padding: 5px 0; }366 tbody th { font-weight: bold; color: #333; }367 tfoot td { background: transparent url(/i/screen/table-border.gif) repeat-x 0 0; padding: 10px 0 0; }368 369 370/* inline */371 372em { font-style: italic; }373strong { font-weight: bold; }374 375a { color: #0ba6ff; font-weight: bold; text-decoration: none; background: transparent url(/i/screen/link-bg.gif) repeat-x 0 bottom; }376a:hover, a:focus { color: #03669f; background-image: url(/i/screen/link-bg-hover.gif); }377 378a.alt, p.more a, span.more a, blockquote cite span a, .inline-wrap a, .tag-head a, .close-balloon, ul.thread-info li a, .user-comment a, .comments .author a { color: #173a5f; background-image: url(/i/screen/link-bg-alt.gif); }379 380#product-feature span.more a { color: #edf2f4; }381 382a.alt:hover, a.alt:focus, p.more a:hover, p.more a:focus, span.more a:hover, span.more a:focus, blockquote cite span a:hover, blockquote cite span a:focus, h4.entry a:hover, h4.entry a:focus, dt a:hover, dt a:focus, .inline-wrap a:hover, .inline-wrap a:focus, .tag-head a:hover, .tag-head a:focus, #product-feature span.more a:hover, #product-feature span.more a:focus, .close-balloon:hover, .close-balloon:focus, ul.thread-info li a:hover, ul.thread-info li a:focus, .user-comment a:hover, .user-comment a:focus, .comments .author a:hover, .comments .author a:focus { color: #759ec9; background-image: url(/i/screen/link-bg-alt-hover.gif); }383 384img { display: block; }385img.centered { margin-left: auto; margin-right: auto; }386 387a img { border: none; }388 389#content code { font: 12px/1 'Courier New', Courier, monospace; font-weight: bold; }390#content pre.code { 391 margin-bottom: 1.7em;392 line-height: 1.45;393 background: #e3ecf4; padding: 1.7em 11px; /*margin: 0 0 15px; width: 613px;*/394}395 396#content .code { 397 font: 12px/1 'Verdana', sans-serif;398 color: #000;399}400 401#content .code span.comment {402 color: #007400;403}404 405#content .code span.literal {406 color: #C41A15;407}408 409#content .code span.keyword {410 color: #A90D91;411}412 413#content .code span.local, #content .code span.field {414 color: #000;415}416 417#content .code span.project {418 color: #3E6D74;419}420 421#content .code span.project.function, #content .code span.project.constant {422 color: #25464A;423}424 425#content .code span.system {426 color: #5B2599;427}428 429#content .code span.system.function, #content .code span.system.constant, #content .code span.system.variable, #content .code span.system.class {430 color: #2E0D6D;431}432 433/* AppleScript Syntax Highlighting */434 435#content .applescript.code span.keyword {436 color: #000; font-weight: bold;437}438 439#content .applescript.code span.variable {440 color: #3F7F00; font-weight: bold;441}442 443#content .applescript.code span.class {444 color: #0000FF; font-style:italic;445}446 447#content .applescript.code span.literal {448 color: #000;449}450 451#content .applescript.code span.command {452 color: #0000FF;453}454 455#content .applescript.code span.property {456 color: #6B04D3;457}458 459#content span.applescript.substitution,460#content .applescript.code .substitution {461 color: #FF6FCF; text-transform: uppercase;462}463 464 465sub, sup { line-height: 0; }466 467form input[type="submit"], form input#edit-order {468 background: #173b61;469 color: white;470 padding: 2px 10px 0px;471 font-family: "Korolev", sans-serif;472 font-weight: 200;473 font-size: 18px;474 text-transform: uppercase;475 border-radius: 5px;476 -moz-border-radius: 5px;477 border: none;478 font-stretch: extra-condensed;479 letter-spacing: 2px; 480 cursor: pointer;481}482 483form input#edit-order, form input.edit-order {484 background: white;485 color: #0ba6ff;486 font-weight: normal;487}488 489form ul.fields { margin-bottom: 1.3em; }490.search form ul.fields { margin-top: 1.3em; }491form .inline-items { float: left; }492form .fields li { background: none; padding-left: 0; margin: 0 0 10px; clear: left; }493form li.inline { background: none; padding-left: 0; float: left; margin: 0 25px 0 0; clear: none; }494.cart .section li.inline, form .address li.inline { width: 192px; margin: 0 0 10px 10px; }495.cart .section li.inline input, form .address li.inline input { width: 188px; }496.cart .section li, form .address li { width: 394px; }497.cart .section li input[type='text'], form .address li input[type='text'] { width: 390px; }498.cart .section li.inline input[type='text'], form .address li.inline input[type='text'] { width: 188px; }499.cart .section textarea { width: 392px; }500.cart .section li.bordered { width: 382px; padding: 6px 10px 6px 0; }501.cart .section li.radio.bordered .note { margin-left: 23px; margin-top: 6px; margin-bottom: 4px; margin-right: 13px; }502.cart .section li.radio ul { margin: 10px 0 0 0; }503.cart .section li li { width: 359px; }504.cart .section li.bordered li input { width: 342px; }505.cart .section li.bordered input.bordered { position: absolute; left: -20px; top: 10px; }506.cart .section li.bordered input.bordered#payment-cc { top: 12px; }507.cart .section li.first, form .address li.first { margin-left: 0; }508form .section .main p + ul.address { margin-top: 0; }509.cart .section li.submit { margin-top: 30px; }510#content form li.inline-limited { width: 120px; }511#content form li.inline-limited input { width: 116px; }512#content form li.with-limit { width: 264px; }513#content form li.with-limit input { width: 260px; }514#content form li.limited input { width: 100px; }515form .inline-items li.submit { margin: 1.4em 0 0; }516 form label { display: block; margin: 0 0 2px; }517 form li.inline label { margin-bottom: 2px; }518 form .required label { font-weight: bold; }519 form .required .not-required label { font-weight: normal; }520 form ul li label.required { font-weight: bold; }521 form.search-form label, form span.note, form p.note, form div.note p, form div.note .vcard { color: #858585; }522 form span.note { display: block; margin-bottom: 5px; line-height: 1.1; }523 form label span { display: inline; }524 form select { min-width: 158px; }525 form .inline select { width: 158px; margin-bottom: 3px; }526 form select[name=cc-exp-month] { min-width: 154px; }527 form .inline select[name=cc-exp-month] { width: 154px; margin-bottom: 3px; }528 .expiration-date-menu { white-space: nowrap; }529 form label.radio input[type="radio"] { margin-right: 10px; height: 17px; }530 form label.radio { font-weight: normal; }531 ul.fields li.radio { margin-left: -20px; }532input, textarea, select { color: #333; width: 100%; }533textarea { font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif; font-size: 11px; margin-bottom: 7px;}534input[type="checkbox"], input[type="radio"] { width: auto; }535form li.submit input, table input, table select { width: auto; }536 537/* Form that looks like a link */538.link-form {539 font-size: 11px;540}541#buy-upgrade-paypal {542 padding-left: 29px; 543 margin-bottom: 1.7em;544}545form span.submit-link input { 546 border: none; 547 width: auto; 548 color: #0ba6ff; 549 font-weight: bold; 550 text-decoration: none; 551 background: transparent url(/i/screen/link-bg.gif) repeat-x 0 bottom; 552 font-size: 12px; 553 height: 17px; 554 cursor: pointer; 555 letter-spacing: normal; 556 text-transform: none; 557 font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif; 558 border-radius: 0px; 559 padding: 0px; 560 text-align: left;561}562form span.submit-link input:hover, form span.submit-link input:focus { color: #03669f; background-image: url(/i/screen/link-bg-hover.gif); }563 564form.button-dark span.submit-link input { 565 border: none; 566 width: auto; 567 font-weight: normal; 568 text-decoration: none; 569 background: none; 570 font-size: 12px; 571 height: 17px; 572 cursor: pointer; 573 letter-spacing: normal; 574 text-transform: none; 575 font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif; 576 border-radius: 0px; 577 padding: 0px; 578 text-align: left;579}580form.button-dark span.submit-link input:hover, form span.submit-link input:focus { background: none; }581 582table #fetch-serial-number-name label,583table #fetch-serial-number label,584table #fetch-serial-number-name-noscript label,585table #fetch-serial-number-noscript label586 { text-align: left; margin-left: 22px; margin-right: 10px; }587table #fetch-serial-number-name input,588table #fetch-serial-number input,589table #fetch-serial-number-name-noscript input,590table #fetch-serial-number-noscript input591 { width: 100%; }592#content form li.with-year { width: 158px; }593.inline-label label, .radio label { display: inline; margin-left: 5px; }594li.radio { margin-bottom: 20px; }595 .radio label { font-weight: bold; }596 .radio ul { padding-left: 23px; padding-right: 13px; margin: 10px 0; }597 .radio ul label { font-weight: normal; display: block; margin-left: 0; }598 .radio ul li.required label { font-weight: bold; }599 .inline-label *, .radio * { vertical-align: middle; }600 .radio ul * { vertical-align: top; }601li.register-to label { display: inline; margin-left: 5px; }602li.bordered { border: 1px solid #d1d8df; padding: 10px 10px 0 0; position: relative; left: 20px; }603 li.bordered input.bordered, li.bordered span.bordered { position: absolute; left: -20px; top: 13px; }604fieldset { border: none; padding: 15px 71px 20px; margin-left: -71px; margin-right: -71px;}605 legend { color: #173a5f; font-size: 12px; }606 legend span.step { display: inline; border-right: 1px solid #b0c8e0; padding-right: 7px; margin-right: 10px; }607 legend strong { font-size: 13px; text-transform: uppercase; }608.radio label img { display: inline; margin-left: 5px; } 609 #content .paypal-label span { display: block; padding-left: 66px; }610form p { margin-bottom: 1.2em; }611#fetch-quantity { width: 50px; }612#fetch-upgrade-quantity { width: 50px; }613#fetch-cd-quantity { width: 50px; }614.serial fieldset { padding-top: 0; }615#phone { width: 200px; }616 617/*------------------------------------------- 618 Global combinations619-------------------------------------------*/620#mast h1 a, a.sub-app-store-roadshow, a.take-a-tour, .previous-arrow, .next-arrow, #product-feature a.pf-app-store, #content .rss, .add-topic, span.sticky, #content .add-reply { display: block; text-indent: -9999px; }621 622#mast h1 a, a.sub-app-store-roadshow, a.take-a-tour, .previous-arrow, .next-arrow, #product-feature a.pf-app-store, #content .rss, .add-topic, span.sticky, #content .add-reply { background-color: transparent; background-position: 0 0; background-repeat: no-repeat; }623 624/*\*/ #mast h1 a, a.sub-app-store-roadshow, a.take-a-tour, .previous-arrow, .next-arrow, #product-feature a.pf-app-store, #content .rss, .add-topic , #content .add-reply { overflow: hidden; } /**/625 626div.intro:after, div.section:after, .nav-footer:after, .end-wrap:after, li.radio ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }627 628#logo, .hide, .product-mascot img { position: absolute; left: -9999px; }629 630.hide-block { visibility: hidden; }631 632 633/*------------------------------------------- 634 Global Elements 635-------------------------------------------*/636p.more { margin-bottom: 1.7em; }637 p.more span:after, span.more span:after { content: " \2192"; }638 p.more:hover span:after, span.more:hover span:after { color: #03669f; }639 p.more a, span.more a { font-size: 11px; font-weight: normal; text-transform: uppercase; padding-bottom: 1px; }640 span.more a { text-transform: none; }641 642.right { float: right; margin: 0 0 10px 40px; }643img.right { margin: 0 0 5px 5px; }644 645img.floatleft { float: left; margin: 5px 10px 5px 10px; }646img.floatright { float: right; margin: 5px 10px 5px 10px; }647 648 649.callout-wrap { text-align: center; margin: 0 0 19px; }650.intro .callout-wrap { margin-top: -7px; text-align: left; }651.intro h1 + .callout-wrap { margin-top: 0; }652#content .callout-wrap p { font-size: 12px; color: #333; line-height: 17px; margin: 0 0 16px 29px; }653 #content .callout-wrap p a { font-weight: normal; }654#content li.callout-wrap p { color: #666; text-transform: uppercase; margin: 0 0 3px; line-height: 1.1; font-family: "Proxima Nova"; }655 656.callout-wrap-alt .button { position: relative; left: -11px; }657.callout-wrap-alt p { font-size: 11px; }658 .callout-wrap-alt p a { color: #173a5f; background-image: url(/i/screen/link-bg-alt.gif); font-weight: normal; }659 .callout-wrap-alt p a:hover, .callout-wrap-alt p a:focus { color: #759ec9; background-image: url(/i/screen/link-bg-alt-hover.gif); }660 661.callout-wrap-social { margin-top: 2em; }662 663.callout-list { border-bottom: 1px solid #d1d8df; }664 .callout-list h3 { text-align: center; border: none; }665 .callout-list li { border-top: 1px solid #d1d8df; background: none; padding: 18px 0 0; }666 .callout-list li.callout-wrap { padding: 16px 20px 0; }667 .callout-list li.first { border-top: none; padding-top: 6px; }668 669.callout-list.products h3 { padding-right: 0px; text-align: center; }670.callout-list.products ul.products { padding-bottom: 0; }671.callout-list.products ul.products li.product { padding-left: 0px; }672.callout-list.products ul.products li.product ul { padding: 0; text-align: center; }673.callout-list.products li.product { display: block; background: none; }674.callout-list.products li.product div { text-indent: -9999px; }675.callout-list.products li.product li { background: none; border-top: none; padding-top: 0; }676.callout-list.products li.product.fetch div { background: transparent url(/fetch/i/screen/fetch-dark-glow-256.png) no-repeat 0 0; background-position: -1px -13px; height: 165px; width: 246px; position: relative; left: -21px; }677.callout-list.products li.product.fetch div:hover, .callout-list.products .product.fetch div:focus { background-position: -1px -313px; }678.callout-list.products li.product.roadshow div { background: transparent url(/roadshow/i/screen/roadshow-dark-glow-256.png) no-repeat 0 0; background-position: -30px -5px; height: 165px; width: 142px; position: relative; left: 19px; }679 .callout-list.products li.product.roadshow div:hover, .callout-list.products li.product.roadshow div:focus { background-position: -30px -305px; }680.callout-list.products li.product div a { width: 100%; height: 100%; display: block; background: none; }681.callout-list.products ul ul { margin-left: 0; }682.callout-list.products ul li a { text-transform: uppercase; font-family: "Proxima Nova"; font-weight: bold; }683 684 685.inline-wrap { text-align: center; }686.intro .inline-wrap { position: relative; }687 .inline-wrap a { font-size: 10px; text-transform: uppercase; background-image: none; font-family: "Proxima Nova"; font-weight: bold; }688 689.callout-block { width: 682px; position: relative; left: 40px; margin: 11px 0 30px; border: 5px solid white; border-radius: 15px; box-shadow: 0px 0px 10px #888; background: #eff4f7; }690 .callout-block .callout-copy { padding: 0 0 0 0; min-height: 100px; }691 .callout-block .callout-copy * { position: relative; left: 38px; width: 249px; }692 .callout-block .callout-copy * *, .callout-block .callout-copy h3 { position: static; }693 .callout-block .callout-copy h3 { padding: 15px 364px 0 38px; border: none; margin: 0 0 15px; width: 280px; }694 .callout-block .callout-copy.products h3 { padding: 28px 38px 0 38px; }695 .callout-block .callout-copy ul { margin: 0; }696 .callout-block .callout-copy ul li a { text-transform: uppercase; font-family: "Proxima Nova"; font-weight: bold; }697 .callout-block ul { margin: 0; }698 699.callout-block.support .callout-copy { min-height: 127px; }700 701.callout-block .callout-copy.products h3 { width: 682px; padding-right: 0px; }702.callout-block .callout-copy.products h3 * { width: 606px; padding-right: 38px; }703.callout-block .callout-copy.products * { width: 606px; padding-right: 0px; }704.callout-block .callout-copy.products * * { width: auto; }705.callout-block .callout-copy.products ul.products { height: 223px; padding-bottom: 1.3em; }706.callout-block .callout-copy.products ul.products li.product { border-right: 1px solid white; border-left: 1px solid #d2d7d9; height: 230px; padding-left: 0px; }707.callout-block .callout-copy.products ul.products li.product ul { padding-left: 20px; padding-right: 20px; padding-bottom: 15px; text-align: center; }708.callout-block .callout-copy.products ul.products li:first-child { border-left: none; }709.callout-block .callout-copy.products ul.products li:last-child { border-right: none; }710.callout-block .products li.product { float: left; display: block; width: 300px; background: none; }711.callout-block .products li.product div { text-indent: -9999px; }712.callout-block .products li.product li { background: none; }713.callout-block .products li.product div { background-size: 258px 557px; }714.callout-block .products li.product.fetch div { background: transparent url(/fetch/i/screen/fetch-dark-glow-256.png) no-repeat 0 0; background-position: -2px -13px; height: 165px; width: 246px; position: relative; left: 27px; background-size: 257px 557px; }715.callout-block .products li.product.fetch div:hover, .callout-block .products .product.fetch div:focus { background-position: -2px -313px; }716.callout-block .products li.product.roadshow div { background: transparent url(/roadshow/i/screen/roadshow-dark-glow-256.png) no-repeat 0 0; background-position: -30px -5px; height: 165px; width: 142px; position: relative; left: 85px; background-size: 257px 557px; }717.callout-block .products li.product.roadshow div:hover, .callout-block .products li.product.roadshow div:focus { background-position: -30px -305px; }718.callout-block .products li.product div a { width: 100%; height: 100%; display: block; background: none; }719 720.callout-list-alt { position: absolute; top: 14px; left: 284px; }721ul.callout-list-alt {722 background-image: linear-gradient(left, transparent 0px, transparent 155px, white 155px, white 156px, #c6cacc 156px, #c6cacc 157px, transparent 157px, transparent 254px, white 254px, white 255px, #c6cacc 255px, #c6cacc 256px, transparent 256px);723 background-image: -o-linear-gradient(left, transparent 0px, transparent 155px, white 155px, white 156px, #c6cacc 156px, #c6cacc 157px, transparent 157px, transparent 254px, white 254px, white 255px, #c6cacc 255px, #c6cacc 256px, transparent 256px);724 background-image: -moz-linear-gradient(left, transparent 0px, transparent 155px, white 155px, white 156px, #c6cacc 156px, #c6cacc 157px, transparent 157px, transparent 254px, white 254px, white 255px, #c6cacc 255px, #c6cacc 256px, transparent 256px);725 background-image: -webkit-linear-gradient(left, transparent 0px, transparent 155px, white 155px, white 156px, #c6cacc 156px, #c6cacc 157px, transparent 157px, transparent 254px, white 254px, white 255px, #c6cacc 255px, #c6cacc 256px, transparent 256px);726 background-image: -ms-linear-gradient(left, transparent 0px, transparent 155px, white 155px, white 156px, #c6cacc 156px, #c6cacc 157px, transparent 157px, transparent 254px, white 254px, white 255px, #c6cacc 255px, #c6cacc 256px, transparent 256px);727}728 .callout-list-alt li { float: left; padding: 12px 13px 0; width: 130px; background: none; margin: 0; }729 .callout-list-alt .cw1 { width: 104px; padding: 10px 13px 0 39px; }730 .callout-list-alt .cw2 { width: 73px; padding-top: 10px; }731 .callout-list-alt .cw3 { width: 100px; padding-top: 13px;}732 733.results-head { color: #173a5f; text-transform: uppercase; letter-spacing: 1px; font-family: "Proxima Nova"; font-weight: bold; }734 .results-head strong { color: #052344}735 736 737.tag-head strong { color: #173a5f; font-weight: bold; text-transform: uppercase; padding-right: 7px; margin-right: 3px; border-right: 1px solid #92b3d4; font-weight: bold; font-family: "Proxima Nova"; }738.tag-head a { font-weight: normal; }739 740.pages { margin-bottom: 25px; }741.nav-header .pages, .nav-footer .pages { float: right; margin-bottom: 0; }742 .pages ol { display: inline; white-space: nowrap; }743 .pages, .pages li { font-size: 12px; }744 .nav-header .pages, .nav-header .pages li, .nav-footer .pages, .nav-footer .pages li { color: #173a5f; }745 .pages li { display: inline; font-weight: bold; }746 .pages ol span { position: absolute; left: -9999px; }747 748 .pages .back a { font-size: 12px; }749 .pages li.back { margin-right: 8px; }750 .pages .back a:before { content: '\0000AB'; padding-right: 4px; }751 752 .pages .next a { font-size: 12px; }753 .pages li.next { margin-left: 8px; }754 .pages .next a:after { content: '\0000BB'; padding-left: 4px; }755 756 .nav-header form select, .results-head form input { width: auto; }757 .nav-header form p.submit { margin: 5px 0 0 0; }758 759.url { color: #858585; }760 761.results { position: relative; left: 25px; padding-right: 20px; margin-bottom: 45px; color: #173a5f; }762 .results * { font-weight: bold; }763 .results li { margin-bottom: 17px; line-height: 1.1; }764 .results a { line-height: 1.2; }765 .results li a b { color: #0161ac; }766 .results li a:hover b, .results li a:focus b { color: #03669f; }767 .results .url { display: block; margin: 1px 0 2px; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow-mode: ellipsis; }768 .results p { margin: 2px 0; font-weight: normal; }769 .results p b { color: #000; }770 771.comment-preview-head { display: none; }772 773.comments { margin-top: 16px; padding: 0; }774.comments h3 { padding: 0; border-bottom: 1px solid #e7ebef; padding: 0 0 17px; }775ul#comments li { background: none; padding-left: 0; margin: 0 0 21px; border-bottom: 1px solid #e7ebef; }776 .comments .author { font-weight: bold; padding-right: 8px; margin: 0 5px 0 23px; border-right: 1px solid #d1d8df; color: #666; }777 .comments .meta { margin: 0 0 1.7em; color: #999; }778 779 780div.entry-date { position: absolute; top: 4px; left: 0; padding-right: 6px; border-right: 1px solid #d1d8df; }781 782div.entry p { margin-bottom: 1em; }783 784div.segment { padding: 0 0 6px; margin: 0 0 16px; }785 786#content .rss { width: 16px; height: 16px; background-image: url(/i/widgets/rss.png); float: left; margin-right: 10px; margin-top: 2px; background-size: 16px 66px; }787#content .rss:hover, #content .rss:focus { background-position: 0 -50px; }788 789.news-list li { position: relative; background: none; padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid #d1d8df; }790 .news-list li p.more { margin: -10px 0 0; }791 .news-list li p { margin-bottom: 1em; }792 793 794.left-balloon, .right-balloon { display: none; }795 796div.draft-warning {797 position: fixed;798 left: 0px;799 top: 0px;800 width: 100%; 801 height: 18px; 802 background-image: repeating-linear-gradient(-45deg, black 0px, black 30px, yellow 30px, yellow 60px, black 60px); 803 background-image: -o-repeating-linear-gradient(-45deg, black 0px, black 30px, yellow 30px, yellow 60px, black 60px); 804 background-image: -moz-repeating-linear-gradient(-45deg, black 0px, black 30px, yellow 30px, yellow 60px, black 60px); 805 background-image: -webkit-repeating-linear-gradient(-45deg, black 0px, black 30px, yellow 30px, yellow 60px, black 60px); 806 background-image: -ms-repeating-linear-gradient(-45deg, black 0px, black 30px, yellow 30px, yellow 60px, black 60px); 807 z-index: 99;808}809 810/*------------------------------------------- 811 Image Replacements/Callouts812-------------------------------------------*/813#content .button-light { border: 3px solid white; width: 120px; height: 35px; display: block; border-radius: 9px; box-shadow: 0px 0px 10px #888; background: #eff4f7; margin-bottom: 10px; margin-top: 25px; color: #5199fb; font-family: "Proxima Nova"; font-size: 14px; text-transform: uppercase; font-weight: bold; padding-left: 35px; margin-left: 10px; margin-right: 10px; line-height: 15px; padding-top: 7px; background-repeat: no-repeat; background-position: 0px 0px; }814 #content .button-light:hover, #content a.button-light:focus { background: #28385f; background-repeat: no-repeat; background-position: 0px -100px; }815 816#content li.callout-wrap a { font-family: "Arlt Blanca Small Caps", Georgia, serif; font-size: 60px; font-weight: normal; background: none; color: #7d98c5; line-height: 30px; text-align: center; width: 132px; height: 50px; margin: 0 auto 3px; }817 #content li.callout-wrap a span { line-height: 30px; display: block; }818 #content li.callout-wrap a span.line2 { margin-bottom: 5px; }819 #content li.callout-wrap a:hover, #content li.callout-wrap a:focus {color: #334776; }820 821#content .button-dark { border: 3px solid white; width: 198px; height: 37px; display: block; border-radius: 9px; box-shadow: 0px 0px 10px #888; background: #173b61; margin-bottom: 10px; margin-top: 10px; padding-left: 43px; margin-left: 10px; margin-right: 10px; line-height: 15px; padding-top: 16px; background-repeat: no-repeat; }822#content .button-dark span, #content .button-dark .submit-link input[type="submit"] { color: white; font-family: "Proxima Nova"; font-size: 17px; text-transform: uppercase; font-weight: normal; }823#content .button-dark:hover span, #content a.button-dark:focus span, #content .button-dark:hover .submit-link, #content .button-dark:focus .submit-link { border-bottom: 1px dotted white; }824#content .button-dark:hover span.line2, #content a.button-dark:focus span.line2 { border-bottom: none; }825#content .button-dark span.line2 { text-transform: none; color: #0ba6ff; font-family: "Lucida Grande", "Trebuchet MS", Arial, sans-serif; font-size: 12px; line-height: 10px; }826#content .button-dark.two-line { padding-top: 8px; height: 45px; }827 828#content .intro-download-fetch { margin-top: 0px; }829#content .intro-download-fetch, #content a.intro-download-fetch:hover, #content a.intro-download-fetch:focus { background-image: url(/i/widgets/green-down-arrow-large.png); background-size: 30px 115px; }830#content .intro-download-fetch { background-position: 8px 19px; }831#content .intro-download-fetch:hover, #content a.sub-upgrade-now:focus { background-position: 8px -81px; }832 833#content .buy-now, #content a.buy-now:hover, #content a.buy-now:focus { background-image: url(/i/widgets/green-dollar-sign-large.png); background-size: 20px 80px; }834#content .buy-now { background-position: 15px 12px; }835#content .buy-now:hover, #content a.buy-now:focus { background-position: 15px -38px; }836#content .upgrade-now, #content a.upgrade-now:hover, #content a.upgrade-now:focus { background-image: url(/i/widgets/green-right-arrow-large.png); background-size: 15px 130px; }837#content .upgrade-now { background-position: 15px 11px; }838#content .upgrade-now:hover, #content a.upgrade-now:focus { background-position: 15px -89px; }839 840#content .pc-users span.line1 { font-size: 38px; line-height: 19px; margin-bottom: 5px; }841 842#content .read-faqs span.line1 { font-size: 56px; line-height: 28px; }843#content .read-faqs span.line2 { font-size: 46px; line-height: 48px; }844#content .message-board span.line1 { font-size: 44px; line-height: 22px; }845#content .message-board span.line2 { font-size: 60px; line-height: 30px; }846#content .online-help span.line1 { font-size: 40px; line-height: 20px; }847#content .online-help span.line2 { font-size: 64px; line-height: 32px; }848#content .email-web span.line1 { font-size: 56px; line-height: 28px; }849#content .email-web span.line2 { font-size: 56px; line-height: 28px; }850 851#content .read-faqs-alt span.line1 { font-size: 36px; line-height: 26px; }852#content .read-faqs-alt span.line2 { font-size: 30px; line-height: 20px; }853#content .email-web-alt span.line1 { font-size: 34px; line-height: 18px; }854#content .email-web-alt span.line2 { font-size: 34px; line-height: 18px; }855#content .message-board-alt span.line1 { font-size: 30px; line-height: 15px; }856#content .message-board-alt span.line2 { font-size: 40px; line-height: 20px; }857 858#content .take-a-tour { border: none; width: 263px; height: 203px; background-image: url(/fetch/i/screen/take-a-tour.png); }859 .take-a-tour:hover, a.take-a-tour:focus { background-position: 0 -203px; }860 861#content .sub-download-fetch, #content a.sub-download-fetch:hover, #content a.sub-download-fetch:focus { background-image: url(/i/widgets/green-down-arrow-small.png); background-size: 24px 113px; }862#content .sub-download-fetch { background-position: 5px 15px; }863#content .sub-download-fetch:hover, #content a.sub-download-fetch:focus { background-position: 5px -85px; }864 865#content .sub-buy-now, #content a.sub-buy-now:hover, #content a.sub-buy-now:focus { background-image: url(/i/widgets/green-dollar-sign-small.png); background-size: 17px 72px; }866#content .sub-buy-now { padding-top: 15px; height: 27px; background-position: 10px 10px; }867#content .sub-buy-now:hover, #content a.sub-buy-now:focus { padding-top: 15px; height: 27px; background-position: 10px -40px; }868#content .sub-upgrade-now, #content a.sub-upgrade-now:hover, #content a.sub-upgrade-now:focus { background-image: url(/i/widgets/green-right-arrow-small.png); background-size: 14px 124px; }869#content .sub-upgrade-now { padding-top: 15px; height: 27px; background-position: 10px 8px; }870#content .sub-upgrade-now:hover, #content a.sub-upgrade-now:focus { background-position: 10px -92px; }871 872#content .release-notes-content .sub-download-fetch { margin-top: 20px; margin-bottom: 20px; }873 874#content .sub-app-store-roadshow { border: none; width: 227px; height: 66px; background-image: url(/i/screen/app-store-badge-225.png); background-size: 227px 66px; margin: 10px; }875 876 877/*------------------------------------------- 878 Structure879-------------------------------------------*/880body.home #header-wrap1 { padding-bottom: 10px; position: relative; }881#header-wrap1 { 882 background-image: linear-gradient(top, white 0px, white 5px, #e5edf2 5px, #e5edf2 8px, white 8px, white 49px, #e5edf2 49px, #e5edf2 52px, white 52px, white 57px, rgba(191, 191, 191, .25) 57px, rgba(237, 242, 244, 0) 67px);883 background-image: -o-linear-gradient(top, white 0px, white 5px, #e5edf2 5px, #e5edf2 8px, white 8px, white 49px, #e5edf2 49px, #e5edf2 52px, white 52px, white 57px, rgba(191, 191, 191, .25) 57px, rgba(237, 242, 244, 0) 67px);884 background-image: -moz-linear-gradient(top, white 0px, white 5px, #e5edf2 5px, #e5edf2 8px, white 8px, white 49px, #e5edf2 49px, #e5edf2 52px, white 52px, white 57px, rgba(191, 191, 191, .25) 57px, rgba(237, 242, 244, 0) 67px);885 background-image: -webkit-linear-gradient(top, white 0px, white 5px, #e5edf2 5px, #e5edf2 8px, white 8px, white 49px, #e5edf2 49px, #e5edf2 52px, white 52px, white 57px, rgba(191, 191, 191, .25) 57px, rgba(237, 242, 244, 0) 67px);886 background-image: -ms-linear-gradient(top, white 0px, white 5px, #e5edf2 5px, #e5edf2 8px, white 8px, white 49px, #e5edf2 49px, #e5edf2 52px, white 52px, white 57px, rgba(191, 191, 191, .25) 57px, rgba(237, 242, 244, 0) 67px);887}888#home-elevator-wrap { background: #edf2f4; }889#product-feature-top-wrap { background: #edf2f4; }890 891#content-wrap, #content, #header { width: 774px; margin: 0 auto; }892 893 #home-elevator { width: 833px; margin: 0 auto; }894 895 #content-wrap { background: transparent url(/i/screen/content-wrap-bg.jpg) repeat-y 0 0; }896 .home #content-wrap { background: none; }897 898 #content { background: transparent url(/i/screen/content-bg.jpg) no-repeat 0 bottom; padding: 6px 0 0; }899 .home #content { background: none; position: relative; top: -20px; }900 901 #product-head, div.intro, #page-head, div.nav-header, div.nav-footer, div.end-wrap { width: 613px; position: relative; left: 13px; }902 div.nav-header { min-height: 17px; }903 904 .section { clear: both; width: 606px; position: relative; left: 84px; }905 .forum-head { position: relative; margin-top: 12px; }906 .forum-head h3 a { background: none; }907 .forum .section, .forum-head { width: 684px; left: 41px; }908 .divided { background: transparent url(/i/screen/divider.gif) repeat-y 415px 0; padding: 15px 0 0; }909 910 .main { width: 394px; float: left; margin-right: 30px; }911 .alt .main { margin: 0 0 0 30px; }912 .split .main, .split .sub { width: 288px; }913 914 .sub, .column { width: 182px; float: left; }915 916 .column { margin-right: 30px; }917 918 div.entry { padding: 0 0 0 46px; position: relative; min-height: 75px;}919 920 921 922/*------------------------------------------- 923 Header924-------------------------------------------*/925#header { position: relative; min-height: 57px; }926 927#mast h1 { position: absolute; left: 315px; z-index: 100; top: 50%; margin: -47px 0 0; }928 #mast h1 a { width: 141px; height: 99px; border: none; background-image: url(/i/screen/fetchsoftworks-dark-glow-256.png); background-position: 5px 2px; background-size: 131px 238px; }929 #mast h1 a:hover { background-position: 5px -148px; }930 931#nav { margin: 0; }932#nav li { position: absolute; top: 28px; height: 24px; margin: -15px 0 0; background: none; padding: 8px 21px 0 0; border-right: 1px solid #e6e8ea; }933 #nav li a, #nav li span { height: 10px; border: none; }934 #nav li a:hover, #nav li a:focus, #nav li span:hover, #nav li span:focus { background-position: 0 -10px; }935 936#nav li.products-nav span { height: 18px; margin: -15px 0 0; background: none; padding: 12px 21px 0 0; border-right: 1px solid #e6e8ea; }937#nav li ul { position: absolute; z-index: 100; border: 1px solid #e6e8ea; padding: 0px 0px; background: white; margin: 10px 0 0 -59px; }938#nav li#nav-roadshow-top ul, #nav li#nav-fetch-top ul, #nav li#nav-products ul { margin-top: 5px; }939#nav li#nav-roadshow-top ul { margin-left: -19px; width: 156px; }940#nav li#nav-fetch-top ul { margin-left: -19px; width: 156px; }941#nav li#nav-products ul { padding-top: 0px; position: relative; margin-left: -59px; width: 156px; }942#nav li ul li { position: static; border: none; margin: 0px; padding: 0px; margin: 6px 18px 6px 18px; height: 27px; top: 0px; width: 120px; line-height: 28px; }943#nav li ul li a { margin: 0px; }944 945#nav #nav-fetch-top { left: 63px; top: 28px; height: 27px; width: 84px; }946 #nav #nav-fetch-top.products-nav { height: 27px; }947 li#nav-fetch-top a { width: 80px; background-image: url(/fetch/i/screen/fetch-32.png); height: 27px; margin-top: -9px; padding-left: 39px; padding-top: 8px; padding-bottom: 6px; background-repeat: no-repeat; background-position: 0px 0px; background-size: 32px 127px; }948 li#nav-roadshow-top #nav-fetch-top a { background-image: url(/fetch/i/screen/fetch-32.png); background-position: 0px 0px; background-size: 32px 127px; }949 li#nav-products ul li#nav-fetch-top a { width: 100%; }950 li#nav-roadshow-top ul li#nav-fetch-top a { width: 100%; margin-top: -9px; }951 li#nav-fetch-top a:hover, li#nav-fetch-top a:focus, li#nav-roadshow-top #nav-fetch-top a:hover, li#nav-roadshow-top #nav-fetch-top a:focus { background-position: 0px -100px; }952#nav #nav-roadshow-top { left: 26px; top: 28px; height: 27px; width: 121px; }953 li#nav-roadshow-top a { width: 117px; background-image: url(/roadshow/i/screen/roadshow-25.png); height: 27px; margin-top: -9px; padding-left: 39px; padding-top: 8px; padding-bottom: 6px; background-repeat: no-repeat; background-position: 4px 1px; background-size: 25px 125px; }954 li#nav-fetch-top #nav-roadshow-top a { background-image: url(/roadshow/i/screen/roadshow-25.png); background-position: 4px 1px; background-size: 25px 125px; }955 li#nav-roadshow-top a:hover, li#nav-roadshow-top a:focus, li#nav-fetch-top #nav-roadshow-top a:hover, li#nav-fetch-top #nav-roadshow-top a:focus { background-position: 4px -99px; }956#nav #nav-news { left: 187px; padding-right: 21px; }957 #nav-news a { width: 37px; }958#nav #nav-blog { left: 268px; border: none; }959 #nav-blog a { width: 34px; }960#nav #nav-products { left: 111px; top: 28px; width: 36px; }961 #nav-products a { width: 32px; }962#nav #nav-store { left: 467px; padding-right: 21px; }963 #nav-store a { width: 41px; }964#nav a { font-family: "Proxima Nova"; text-transform: uppercase; font-weight: bold; font-size: 13px; background: none; letter-spacing: 1px; color: #576c73; }965#nav a:hover { color: #09213f; }966 967.search-wrap { padding: 19px 16px 15px 552px; }968form.search { text-align: right; }969form.search input { width: auto; margin-top: 1px; }970form.search #searchtext { width: 114px; margin-right: 0px; top: 0; }971form.search input[type="submit"] {972 font-family: "Proxima Nova"; text-transform: uppercase; font-weight: bold; font-size: 13px; background: none; letter-spacing: 1px; color: #5a95dc;973}974 975 976 977/*------------------------------------------- 978 Product and Page Header979-------------------------------------------*/980#product-head, #page-head { background: #173b61; padding: 0 65px 20px 69px; position: relative; top: -6px; }981#page-head { padding-bottom: 9px; padding-top: 9px; margin-bottom: 1px; }982 983h2.elevator { clear: both; min-height: 94px; border: none; padding-bottom: 0; margin: 0; color: white; font-family: "Arlt Blanca", Georgia, serif; font-size: 36px; font-weight: normal; margin-bottom: 6px; }984h2.elevator span.line1, h2.elevator span.line2 { display: block; }985h2.elevator span.line1 { height: 40px; }986#product-head.brief h2.elevator { display: none; }987h2.fetch-elevator { width: 400px; height: 70px; }988h2.roadshow-elevator { width: 400px; height: 79px; }989 990body.fetch a.product-mascot { position: absolute; top: 31px; left: 432px; text-indent: -9999px; background-image: url(/fetch/i/screen/[EMAIL REDACTED]); height: 165px; width: 264px; background-position: -10px -20px; background-size: 385px 630px; }991body.fetch a.product-mascot:hover, a.product-mascot:focus { background-position: -10px -320px; }992body.roadshow a.product-mascot { position: absolute; top: 11px; left: 472px; text-indent: -9999px; background-image: url(/roadshow/i/screen/[EMAIL REDACTED]); height: 185px; width: 264px; background-position: -10px 0px; background-size: 385px 630px; }993body.roadshow a.product-mascot:hover, a.product-mascot:focus { background-position: -10px -300px; }994body.fetch #product-head.brief a.product-mascot { display:none; }995body.roadshow #product-head.brief a.product-mascot { display:none; }996 997#product-nav { float: left; margin-bottom: 25px; }998#product-head.brief #product-nav { margin-bottom: 16px; }999 #product-nav li { background: none; padding: 0; margin: 0 6px 0 0; float: left; }1000 #product-nav li a { padding-top: 15px; height: 30px; padding-left: 12px; padding-right: 12px; border: none; display: block; border: none; background: #071930; border-bottom-left-radius: 5px 10px; border-bottom-right-radius: 5px 10px; color: #6a8eb3; font-family: "Korolev", sans-serif; font-weight: 200; font-stretch: extra-condensed; text-transform: uppercase; font-size: 18px; text-align: center; letter-spacing: 2px; }1001 #product-nav li a span.version { vertical-align: super; font-size: 14px; letter-spacing: 0px; position: relative; top: 4px; font-weight: 200; }1002 #product-nav li a {1003 1004 background-image: linear-gradient(bottom, #214d7a 66%, #122942 100%);1005 background-image: -o-linear-gradient(bottom, #214d7a 66%, #122942 100%);1006 background-image: -moz-linear-gradient(bottom, #214d7a 66%, #122942 100%);1007 background-image: -webkit-linear-gradient(bottom, #214d7a 66%, #122942 100%);1008 background-image: -ms-linear-gradient(bottom, #214d7a 66%, #122942 100%);1009 }1010 1011 #product-nav li a:hover, #product-nav li a:focus { 1012 color: white;1013 1014 background-image: linear-gradient(top, #40638b 33%, #759ec9 100%);1015 background-image: -o-linear-gradient(top, #40638b 33%, #759ec9 100%);1016 background-image: -moz-linear-gradient(top, #40638b 33%, #759ec9 100%);1017 background-image: -webkit-linear-gradient(top, #40638b 33%, #759ec9 100%);1018 background-image: -ms-linear-gradient(top, #40638b 33%, #759ec9 100%);1019 }1020 1021 body.fetch #nav-fetch a, body.roadshow #nav-roadshow a { color: white; font-size: 24px; padding-top: 37px; height: 36px; background: #071930; }1022 body.fetch #nav-fetch a:hover, body.fetch #nav-fetch a:focus, body.roadshow #nav-roadshow a:hover, body.roadshow #nav-roadshow a:focus {1023 background-image: linear-gradient(bottom, #326499 0%, #0A2648 100%);1024 background-image: -o-linear-gradient(bottom, #326499 0%, #0A2648 100%);1025 background-image: -moz-linear-gradient(bottom, #326499 0%, #0A2648 100%);1026 background-image: -webkit-linear-gradient(bottom, #326499 0%, #0A2648 100%);1027 background-image: -ms-linear-gradient(bottom, #326499 0%, #0A2648 100%);1028 }1029 1030 body.fetch #nav-fetch a span.version, body.roadshow #nav-roadshow a span.version { font-size: 18px; color: #1599e4; }1031 body.fetch #nav-fetch a:hover, body.fetch #nav-fetch a:focus, body.roadshow #nav-roadshow a:hover, body.roadshow #nav-roadshow a:focus { background-position: 0 -73px; }1032 1033#product-nav-local { border-bottom: 1px solid #4d647d; padding: 16px 0 12px; margin: 0; width: 607px; background: transparent url(/i/screen/dog-rule-light.png) no-repeat 0 0; position: relative; left: 2px; height: 17px; background-size: 607px 10px; }1034#product-head.brief #product-nav-local { clear: both; position: static; }1035 #product-nav-local li { background: none; padding: 0; float: left; margin-bottom: 0; }1036 #product-nav-local li a { height: 13px; border: none; font-family: "Proxima Nova", "Lucida Grande", "Trebuchet MS", Arial, sans-serif; text-transform: uppercase; color: white; font-weight: normal; font-size: 13px; background: none; letter-spacing: 1px; }1037 #nav-about-fetch { margin-left: 71px; }1038 #nav-about-roadshow { margin-left: 71px; }1039 #nav-about-fetch a { width: 91px; }1040 #nav-about-roadshow a { width: 129px; }1041 #nav-download { margin-left: 47px; }1042 #nav-download a { width: 80px; }1043 #nav-buy-upgrade { margin-left: 45px; }1044 #nav-buy-upgrade a { width: 100px; }1045 #nav-support { margin-left: 44px; }1046 #nav-support a { width: 60px; }1047 body.about-fetch #nav-about-fetch a, body.about-roadshow #nav-about-roadshow a, body.download #nav-download a, body.license-buy #nav-buy-upgrade a, body.support #nav-support a { color: #5199fb; }1048 #product-nav-local li a:hover, #product-nav-local li a:focus { border-bottom: 1px dotted #b6d1fc; color: #b6d1fc; }1049 1050 1051 1052/*------------------------------------------- 1053 Intro/Pages Wrap1054-------------------------------------------*/1055div.intro { background: #e3ecf4; padding: 26px 65px 0 69px; margin: 0 0 15px; }1056div.nav-header, div.nav-footer, div.end-wrap, fieldset legend { background: #e3ecf4; padding: 12px 67px 11px 67px; margin: 0 0 15px; width: 613px; }1057fieldset legend span.moz-legend-wrap { width: 593px; display: block; }1058fieldset legend { margin: 0 -71px 0 -71px; display: block; } 1059div.end-wrap { padding-top: 21px; }1060 div.intro p { color: #464749; font-size: 13px; line-height: 22px; }1061 div.intro p.more { margin-top: -1.4em; }1062 div.nav-header p, div.nav-footer p { margin: 0; }1063 div.intro p.first:first-line { color: #173a5f; font-weight: bold; }1064 1065 div.intro .right ul { position: relative; left: 15px; }1066 div.intro .right .callout-wrap + ul { left: 29px; }1067 div.intro .right li { text-transform: uppercase; }1068 1069.sub-nav { width: 204px; float: left; margin: 0 27px 0 0; }1070 1071.sub-nav li { background: none; padding: 2px 0 0; margin: 0px; }1072 .sub-nav li a { color: #173a5f; font-size: 12px; text-transform: uppercase; background: transparent url(/i/screen/sub-nav-bottom.gif) repeat-x 0 bottom; display: block; padding: 4px 0 6px 14px; }1073 .sub-nav li:last-child a { background: none; }1074 .sub-nav li.selected a { background-color: #fff; padding: 4px 0 5px 14px; }1075 .sub-nav li a:hover, .sub-nav li a:focus { color: #1599e4; background-color: #f1f6fa; }1076 .sub-nav li ul { padding-left: 14px; margin: 3px 0 10px; }1077 .sub-nav li li { border: none; background: transparent url(/i/screen/list-marker.gif) no-repeat 0 0.5em; padding: 0 0 0 11px; margin: 0 0 2px; }1078 #content .sub-nav li li a { font-size: 11px; background: transparent; padding: 0; display: inline; color: #0ba6ff; background: transparent url(/i/screen/link-bg.gif) repeat-x 0 bottom; }1079 #content .sub-nav li li a:hover, #content .sub-nav li li a:focus { color: #03669f; background-image: url(/i/screen/link-subnav-bg-hover.gif); }1080 #content .sub-nav li li.selected a { color: #173a5f; background: none; font-weight: bold; }1081 1082.sub-nav-content { margin-left: 231px; }1083 1084#content .previous-arrow, #content .next-arrow { display: none; }1085 1086/* screenshot thumbnail carousel for Fetch 186x134 thumbnails */1087.carousel-wrap { width: 201px; height: 149px; background: #7d7d7d; border: 5px solid white; border-radius: 15px; box-shadow: 0px 0px 10px #888; margin: 5px 13px; position: relative; overflow: hidden; }1088 .carousel-hide { width: 200px; height: 144px; position: relative; top: 0px; left: 1px; overflow: hidden; }1089 .carousel-wrap .player { width: 100%; height: 100%; display: none; }1090 .carousel-wrap img { position: absolute; top: 0; left: 0; box-shadow: 0px 0px 4px 4px #666; margin: 7px; }1091 .carousel-wrap img.img2 { left: -226px; }1092 .carousel-wrap img.img3 { left: -452px; }1093 .carousel-wrap img.img4 { left: -678px; }1094 .carousel-wrap img.img5 { left: -904px; }1095 .carousel-wrap img.img6 { left: -1130px; }1096 .carousel-wrap img.img7 { left: -1356px; }1097 .carousel-wrap img.img8 { left: -1582px; }1098 1099.carousel ul, div.intro .carousel ul { left: 0; }1100.carousel ul li, div.intro .carousel ul li { background: none; width: 213px; margin: 0 12px; padding: 0; }1101.carousel ul li a, div.intro .carousel ul li a { background: transparent url(/i/screen/sub-nav-bottom.gif) repeat-x 0 bottom; display: block; width: 213px; padding: 4px 0; }1102.carousel ul li:last-child a, div.intro .carousel ul li:last-child a { background: none; }1103.carousel a { font-size: 10px; text-transform: uppercase; background-image: none; }1104 1105/* screenshot thumbnail carousel for Roadshow 221x171 thumbnails */1106.roadshow .carousel-wrap { width: 287px; height: 214px; background: transparent no-repeat 0 0; border: none; box-shadow: none; margin: 5px 5px; }1107 .roadshow .carousel-hide { width: 277px; height: 214px; top: 0px; left: 5px; }1108 .roadshow .carousel-wrap img { box-shadow: none; margin: 0; }1109 .roadshow .carousel-wrap img.img2 { left: -287px; }1110 .roadshow .carousel-wrap img.img3 { left: -574px; }1111 .roadshow .carousel-wrap img.img4 { left: -861px; }1112 .roadshow .carousel-wrap img.img5 { left: -1148px; }1113 .roadshow .carousel-wrap img.img6 { left: -1435px; }1114 .roadshow .carousel-wrap img.img7 { left: -1722px; }1115 .roadshow .carousel-wrap img.img8 { left: -2009px; }1116 1117.roadshow .carousel ul li, .roadshow div.intro .carousel ul li { width: 277px; }1118.roadshow .carousel ul li a, .roadshow div.intro .carousel ul li a { width: 277px; }1119 1120#zoom_close { background: none; }1121 1122 1123/*------------------------------------------- 1124 Main1125-------------------------------------------*/1126.alt .main blockquote:first-child { margin-top: 29px; } 1127 1128 1129/*------------------------------------------- 1130 Footer1131-------------------------------------------*/1132#footer { clear: both; width: 730px; padding: 18px 0 70px 20px; background: transparent url(/i/screen/footer-top.gif) no-repeat 84px 0; margin-top: 35px; }1133 #footer p { color: #838386; font-family: "Arlt Gris", Georgia, serif; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; float: left; line-height: 1.7; min-width: 480px; }1134 #footer ul { float: right; margin-top: -2px; width: 210px; text-align: right; }1135 #footer ul li { display: inline; background: none; }1136 #footer ul li.first { padding-left: 0; }1137 #footer ul li a { color: #173a5f; font-size: 10px; font-weight: bold; text-transform: uppercase; border: none; background: none; font-weight: bold; font-family: "Proxima Nova"; }1138 #footer ul li a:hover, #footer ul li a:focus { color: #759ec9; background: transparent url(/i/screen/link-bg-alt-hover.gif) repeat-x 0 bottom; }1139 #footer ul li.selected a { color: #838386; background: none; }1140 1141 1142/*------------------------------------------- 1143 Forum1144-------------------------------------------*/1145 1146.forum-head { clear: both; float: left; }1147.separate { border-bottom: 1px solid #e7ebef; margin-bottom: 10px; }1148 .forum-head p { margin-bottom: 5px; }1149 p.user { color: #999; float: left; width: 400px; margin-bottom: 10px; }1150 p.user a { font-size: 11px; }1151 .forum-head p.back a, .forum-foot p.back a { font-size: 11px; }1152 .forum-foot p.right.back { clear: both; }1153 .forum .section .pages { float: right; margin-bottom: 15px; }1154 .forum-head h3 { float: left; border: none; margin-bottom: 2px; margin-right: 10px; }1155 #content .add-topic { background-image: url(/i/widgets/add-new-topic.jpg); width: 126px; height: 32px; position: relative; top: -0.5em; }1156 #content .add-reply { background-image: url(/i/widgets/add-reply.jpg); width: 98px; height: 32px; float: left; position: relative; top: -0.5em; margin-bottom: 10px; }1157 1158.forum-head .pages { float: right; margin-bottom: 17px; margin-left: 20px; }1159.forum .pages .back a:before { background: white; }1160.forum .pages .next a:after { background: white; }1161 1162.forum h4 { font-size: 15px; margin-bottom: 10px; }1163 .forum h4 span { font-size: 13px; color: #999; text-transform: none; }1164 1165.forum table { border-collapse: collapse; font-size: 11px; }1166 .forum thead th { color: #759ec9; text-transform: uppercase; font-size: 11px; padding: 5px 0 14px 15px; background-image: url(/i/screen/forum-th-border.gif); }1167 .forum tbody tr { color: #666; background: #f8fcff url(/i/screen/table-border.gif) repeat-x 0 bottom; }1168 .forum tbody tr.alt { background-color: #fff; }1169 .forum tbody tr.sticky { background-color: #abe0ff; }1170 .forum td { padding: 10px 0 8px 15px; }1171 .forum td a { color: #173b61; background: none; font-size: 12px; }1172 .forum td a:hover, .forum td a:focus { color: #0d91df; background: none; }1173 .forum th:first-child + th, .forum th:first-child + th + th, .forum td:first-child + td, .forum td:first-child +td + td, .forum th.remove-favorite, .forum td.remove-favorite { text-align: center; }1174 1175 span.sticky { background-image: url(/i/screen/flag.gif); width: 16px; height: 20px; float: left; margin-right: 10px; position: relative; top: -2px; }1176 span.closed { color: #163b61; font-size: 9px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; padding: 1px; margin-right: 5px; border: 1px solid #163b61; }1177 1178.forum .end-wrap { width: 650px; padding-left: 28px; }1179 .forum label { font-weight: bold; }1180 .markup { color: #999; font-size: 11px; }1181 1182div.thread-obsolete { background: #f07067; border: 2px solid #e7ebef; padding: 10px 15px; margin: 0 9px 12px; font-size: 14px; } 1183ul.thread-list { border-top: 1px solid #e7ebef; margin: 0 0 12px; float: left; }1184 ul.thread-list li { background: none; padding-left: 0; background: #f8fcff; border-bottom: 1px solid #e7ebef; clear: both; float: left; padding: 20px 15px; width: 100%; }1185 ul.thread-list li.alt { background: #fff; }1186 ul.thread-list li li { border: none; padding: 0 0 3px; float: none; }1187 ul.thread-list h5 { font-size: 14px; color: #666; width: 105px; float: left; overflow: hidden; }1188 ul.thread-list h5 span { font-size: 12px; color: #999; display: block; line-height: 1.8; }1189 ul.thread-list .user-comment { width: 525px; float: right; }1190 1191 ul.thread-list blockquote { border-left: 7px solid #b6cde4; background: none; text-align: left; margin-bottom: 20px; padding: 0; }1192 ul.thread-list blockquote p { font-size: 12px; color: #333; margin-bottom: 10px; }1193 1194ul.thread-info li { background: none; color: #999; }1195 ul.thread-info strong { color: #666; }1196 1197#content .user-comment ul { position: relative; left: 15px; }1198 #content .user-comment li { padding: 0; margin: 0; list-style-type: disc; }1199 1200.thread-list .meta { color: #999; text-transform: uppercase; }