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 /* -----------------------------------------------------------------------6 Blueprint CSS Framework 0.77 http://blueprintcss.googlecode.com8 * Copyright (c) 2007-2008. See LICENSE for more info.9 * See README for instructions on how to use Blueprint.10 * For credits and origins, see AUTHORS.11 * This is a compressed file. See the sources in the 'src' directory.12----------------------------------------------------------------------- */13/* reset.css */14html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}15body {line-height:1.5;}16table {border-collapse:separate;border-spacing:0;}17caption, th, td {text-align:left;font-weight:normal;}18table, td, th {vertical-align:middle;}19blockquote:before, blockquote:after, q:before, q:after {content:"";}20blockquote, q {quotes:"" "";}21a img {border:none;}22/* typography.css */23body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}24h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}25h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}26h2 {font-size:2em;margin-bottom:0.75em;}27h3 {font-size:1.5em;line-height:1;margin-bottom:1em; /*margin-top:1em */}28h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}29h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}30h6 {font-size:1em;font-weight:bold;}31h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}32p {margin:0 0 1.5em;}33p img {float:left;margin:0em 1.5em 1.5em 0;padding:0;}34p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}35a:focus, a:hover {color:#000;}36a {color:#009;text-decoration:underline;}37blockquote {margin:1.5em;color:#666;font-style:italic;}38strong {font-weight:bold;}39em, dfn {font-style:italic;}40dfn {font-weight:bold;}41sup, sub {line-height:0;}42abbr, acronym {border-bottom:1px dotted #666;}43address {margin:0 0 1.5em;font-style:italic;}44del {color:#666;}45pre, code {margin:1.5em 0;white-space:pre;}46tt {display:block;margin:1.5em 0;line-height:1.5;}47pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}48li ul, li ol {margin:0 1.5em;}49ul, ol {margin:0 1.5em 1.5em 1.5em;}50ul {list-style-type:disc;}51ol {list-style-type:decimal;}52dl {margin:0 0 1.5em 0;}53dl dt {font-weight:bold;}54dd {margin-left:1.5em;}55table {margin-bottom:1.4em;width:100%;}56th {font-weight:bold;background:#C3D9FF;}57th, td {padding:4px 10px 4px 5px;}58tr.even td {background:#E5ECF9;}59tfoot {font-style:italic;}60caption {background:#eee;}61.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}62.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}63.hide {display:none;}64.quiet {color:#666;}65.loud {color:#000;}66.highlight {background:#ff0;}67.added {background:#060;color:#fff;}68.removed {background:#900;color:#fff;}69.first {margin-left:0;padding-left:0;}70.last {margin-right:0;padding-right:0;}71.top {margin-top:0;padding-top:0;}72.bottom {margin-bottom:0;padding-bottom:0;}73 74/* grid.css */75.container {width:950px;margin:0 auto;}76.showgrid {background:url(src/grid.png);}77div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}78div.last {margin-right:0;}79.span-1 {width:30px;}80.span-2 {width:70px;}81.span-3 {width:110px;}82.span-33 {width:50px;float:left; }83.span-4 {width:150px;}84.span-5 {width:190px;}85.span-6 {width:230px;}86.span-7 {width:270px;}87.span-8 {width:310px;}88.span-88{width:345px;89 float:left;}90.span-9 {width:350px;}91.span-10 {width:390px;}92.span-11 {width:418px;}93/*.span-11 {width:430px;}*/94.span-12 {width:470px;}95.span-13 {width:510px;}96.span-14 {width:550px;}97.span-15 {width:590px;}98.span-16 {width:630px;}99.span-17 {width:670px;}100.span-18 {width:710px;}101.span-19 {width:750px;}102.span-20 {width:790px;}103.span-21 {width:830px;}104.span-22 {width:870px;}105.span-23 {width:910px;}106.span-24, div.span-24 {width:950px;margin:0;}107.append-1 {padding-right:40px;}108.append-2 {padding-right:80px;}109.append-3 {padding-right:120px;}110.append-4 {padding-right:160px;}111.append-5 {padding-right:200px;}112.append-6 {padding-right:240px;}113.append-7 {padding-right:280px;}114.append-8 {padding-right:320px;}115.append-9 {padding-right:360px;}116.append-10 {padding-right:400px;}117.append-11 {padding-right:440px;}118.append-12 {padding-right:480px;}119.append-13 {padding-right:520px;}120.append-14 {padding-right:560px;}121.append-15 {padding-right:600px;}122.append-16 {padding-right:640px;}123.append-17 {padding-right:680px;}124.append-18 {padding-right:720px;}125.append-19 {padding-right:760px;}126.append-20 {padding-right:800px;}127.append-21 {padding-right:840px;}128.append-22 {padding-right:880px;}129.append-23 {padding-right:920px;}130.prepend-1 {padding-left:40px;}131.prepend-2 {padding-left:80px;}132.prepend-3 {padding-left:120px;}133.prepend-4 {padding-left:160px;}134.prepend-5 {padding-left:200px;}135.prepend-6 {padding-left:240px;}136.prepend-7 {padding-left:280px;}137.prepend-8 {padding-left:320px;}138.prepend-9 {padding-left:360px;}139.prepend-10 {padding-left:400px;}140.prepend-11 {padding-left:440px;}141.prepend-12 {padding-left:480px;}142.prepend-13 {padding-left:520px;}143.prepend-14 {padding-left:560px;}144.prepend-15 {padding-left:600px;}145.prepend-16 {padding-left:640px;}146.prepend-17 {padding-left:680px;}147.prepend-18 {padding-left:720px;}148.prepend-19 {padding-left:760px;}149.prepend-20 {padding-left:800px;}150.prepend-21 {padding-left:840px;}151.prepend-22 {padding-left:880px;}152.prepend-23 {padding-left:920px;}153div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;}154div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}155.pull-1 {margin-left:-40px;}156.pull-2 {margin-left:-80px;}157.pull-3 {margin-left:-120px;}158.pull-4 {margin-left:-160px;}159.pull-5 {margin-left:-200px;}160.pull-6 {margin-left:-240px;}161.pull-7 {margin-left:-280px;}162.pull-8 {margin-left:-320px;}163.pull-9 {margin-left:-360px;}164.pull-10 {margin-left:-400px;}165.pull-11 {margin-left:-440px;}166.pull-12 {margin-left:-480px;}167.pull-13 {margin-left:-520px;}168.pull-14 {margin-left:-560px;}169.pull-15 {margin-left:-600px;}170.pull-16 {margin-left:-640px;}171.pull-17 {margin-left:-680px;}172.pull-18 {margin-left:-720px;}173.pull-19 {margin-left:-760px;}174.pull-20 {margin-left:-800px;}175.pull-21 {margin-left:-840px;}176.pull-22 {margin-left:-880px;}177.pull-23 {margin-left:-920px;}178.pull-24 {margin-left:-960px;}179.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17, .pull-18, .pull-19, .pull-20, .pull-21, .pull-22, .pull-23, .pull-24 {float:left;position:relative;}180.push-1 {margin:0 -40px 1.5em 40px;}181.push-2 {margin:0 -80px 1.5em 80px;}182.push-3 {margin:0 -120px 1.5em 120px;}183.push-4 {margin:0 -160px 1.5em 160px;}184.push-5 {margin:0 -200px 1.5em 200px;}185.push-6 {margin:0 -240px 1.5em 240px;}186.push-7 {margin:0 -280px 1.5em 280px;}187.push-8 {margin:0 -320px 1.5em 320px;}188.push-9 {margin:0 -360px 1.5em 360px;}189.push-10 {margin:0 -400px 1.5em 400px;}190.push-11 {margin:0 -440px 1.5em 440px;}191.push-12 {margin:0 -480px 1.5em 480px;}192.push-13 {margin:0 -520px 1.5em 520px;}193.push-14 {margin:0 -560px 1.5em 560px;}194.push-15 {margin:0 -600px 1.5em 600px;}195.push-16 {margin:0 -640px 1.5em 640px;}196.push-17 {margin:0 -680px 1.5em 680px;}197.push-18 {margin:0 -720px 1.5em 720px;}198.push-19 {margin:0 -760px 1.5em 760px;}199.push-20 {margin:0 -800px 1.5em 800px;}200.push-21 {margin:0 -840px 1.5em 840px;}201.push-22 {margin:0 -880px 1.5em 880px;}202.push-23 {margin:0 -920px 1.5em 920px;}203.push-24 {margin:0 -960px 1.5em 960px;}204.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17, .push-18, .push-19, .push-20, .push-21, .push-22, .push-23, .push-24 {float:right;position:relative;}205.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}206hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}207hr.space {background:#fff;color:#fff;}208.clearfix, .container {display:inline-block;}209.clearfix:after, .container:after {content:".";display:block;height:0;clear:both;visibility:hidden;}210* html .clearfix, * html .container {height:1%;}211.clearfix, .container {display:block;}212.clear {clear:both;}213 214/* forms.css */215label {font-weight:bold;}216fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}217legend {font-weight:bold;font-size:1.2em;}218input.text, input.title, textarea, select {margin:0.5em 0;border:1px solid #bbb;}219input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}220input.text, input.title {width:300px;padding:5px;}221input.title {font-size:1.5em;}222textarea {width:350px;height:125px;padding:5px;}223.form_error, .notice,.message, .success, .error {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}224.form_error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}225.notice {background:#FFF6BF;color:#514721;border-color:#FFD324; margin:1em}226.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}227.error {background:#ffbbbb;color:#FF0000;border-color:#FF0000;}228.message {color:#842DCE;border-color:#C6D880;}229.message a{color:#842DCE}230.unreadmessage {color:#FF00FF;border-color:#C6D880;}231.unreadmessage a{color:#FF00FF}232.form_error a {color:#8a1f11;}233.notice a {color:#514721;}234.success a {color:#264409;}235h3 strong{margin-top: 1em}236button237{238 color:red;239}240 241.notery_results242{243 float: left;244 margin: 10px 0;245 width: 718px; 246}247.snotery_results_leftcol248{249 float:left;250 width:180px;251}252.notery_results_list253{254 border: 1px solid #EEEEEE;255 margin-right: 5px;256 padding-right: 24px;257 height: 333px;258 overflow: auto;259 padding:5px;260}261.notery_results_list .notary_details262{263 width: 139px;264}265#notary_info266{267 float: left;268 padding-left: 5px;269 width: 532px;270}271.notify_header272{273 float: left;274 margin-top: 10px;275 width: 305px;276 color: #7C9DAD;277 font-size: 16px;278}279.notary_rating280{281 float:left;282 width:487px;283 height: 300px;284 overflow: auto;285 width: 305px;286} 287.notary_rating #star {288 border: 1px solid #E1E7EB;289 clear: both;290 float: left;291 /*height: 39px;*/292 padding: 5px 0;293 width: 303px;294}295 296.notary_rating #star #star_client {297 float: left;298 font-weight: bold;299 margin: 10px 10px 0px 10px;300 padding: 0;301 text-align: left;302 width: 195px;303}304 305.notary_rating #star #star_feedback_comment {306 float: left;307 margin: 10px 10px 10px 10px;308 padding: 0;309 text-align: left;310 width: 270px; 311}312 313 314.comment_line {315border-top: 1px dashed #000000;316 height: 1px;317 margin-left: 10px;318 width: 15%;319}320 321.feedback_showmore322{ 323 clear: both;324 float: right;325 margin: 10px 27px;326 text-decoration: none;327}328.notary_deyails329{330 float:left;331 width:222px;332}333.conform_area334{335 float: left;336 width: 300px;337}338.conform_notery339{340 float:left;341}342.conform_area .person_img343{344 float: left;345 margin: 5px 0 0 48px;346 clear:both;347}348.loan_founded_order349{350 float: left;351 width: 718px;352}353 354.loan_founded_order_list355{356 border: 2px solid #888888;357 float: left;358 margin: 3px;359 padding: 10px;360 width: 693px;361}362 363.accept_order {364 float: left;365 height: 123px;366 position: relative;367 width: 321px;368 }369 370.accept_order img{ margin-top:6px;}371.accept_button372{373 bottom: 0;374 position: absolute;375}376 377.eft_info h3 {padding:15px 0 0 49px!important; }378.eft_info .formleft {width:119px!important;}379 380#modal {left:auto!important; margin:0 auto!important; border:1px solid #333; width:712px!important; height:730px!important; top:23%!important; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; box-shadow:0 5px 5px #666}381 382.nf_work_agree p{ font:normal 13px Arial, Helvetica, sans-serif; padding:0 0 15px 0; margin:0!important} 383 384 385/* Work agreement */386.agreement_company {387 border-bottom: 1px solid #000000;388 padding: 0 50px;389}390 391 392.my_fees_bg { background:#fff; padding:25px 10px; margin:10px 0; display:inline-block; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}393.my_fees_bg h1 {font:bold 24px Arial, Helvetica, sans-serif!important; color:#7C9DAD; text-align:center; border:0!important; margin:-5px 0 10px 0!important}394.my_fees_bg h1 span { color:#009900}395.my_fees_bg table {float:left; width:230px; margin:0 12px 0 0}396.my_fees_bg .table1 { width:100px;}397.my_fees_bg table tr td {font:bold 14px arial}398.my_fees_bg table .green { color:#009900; text-decoration:none}399.my_fees_bg table .border { border-bottom:1px solid #000!important; border:0}400.my_fees_bg table span.star {background:url("/images/star.png") no-repeat; width:13px; height:14px; display:block; float:right; margin-right:85px}401a.star {background:url("/images/star.png") no-repeat; width:13px; height:14px; display:inline-block;}402.my_fees p u.head1 { font:bold 12px Arial, Helvetica, sans-serif}403.my_fees p u.head2 { font:bold 14px Arial, Helvetica, sans-serif}404.my_fees p {font:normal 13px Arial, Helvetica, sans-serif; padding:0 0 15px 0; margin:0!important}405 406 407.eft_info h3 {408 padding: 15px 0 0 26px !important;409}410 411/**Nes customer Open orders view **/412.container{ margin:0 auto; width:1170px;}413.table-view{ border:1px solid #c6cbcf; border-bottom:0px solid #a7a7a7; background:#eaf0f4; padding:10px; border-radius:10px; margin-top:20px;}414.default-tabs{ border:5px solid #005672;}415.default-tabs table{ border-collapse:collapse; border:1px solid #ccc;margin-left: 0;}416.default-tabs table th, td{border-collapse:collapse; border:1px solid #333;}417.default-tabs table th, td a{ text-decoration:none; color:#06F;}418.default-tabs table th, td a:hover{ text-decoration:none; color:#06F; text-decoration: underline;}419 420.default-tabs .white-bg{ background:#fff;}421.default-tabs .light-blue{ background:#ccecf8;}422.default-tabs .mid-light-blue{ background:#99d8f0; }423.default-tabs .dark-blue{ background:#66c4e9; }424.default-tabs .light-green{ background:#a1da8b;}425.default-tabs .light-red{ background:#FF674F;}426.default-tabs .mid-light-green{ background:#61c250;}427.default-tabs .dark-light-green{ background:#3c8a2e; }428 429 430 431 432.table-view .listing-view{ padding:0; margin-bottom:-5px;}433.table-view .listing-view li{ list-style:none; display:inline-block; border-radius:10px 10px 0px 0px; }434.table-view .listing-view li a.light-blue{ background:#ccecf8; border-radius:10px 10px 0px 0px;}435.table-view .listing-view li a.mid-light-blue{ background:#99d8f0; border-radius:10px 10px 0px 0px;}436.table-view .listing-view li a.dark-light-blue{ background:#66c4e9; border-radius:10px 10px 0px 0px;}437.table-view .listing-view li a.light-green{ background:#a1da8b; border-radius:10px 10px 0px 0px;}438.table-view .listing-view li a.light-red{ background:#FF674F; border-radius:10px 10px 0px 0px;}439.table-view .listing-view li a.mid-light-green{ background:#61c250; border-radius:10px 10px 0px 0px;}440.table-view .listing-view li a.dark-light-green{ background:#3c8a2e; border-radius:10px 10px 0px 0px;}441 442 443.table-view .listing-view li{ color:#000; text-decoration:none; font-weight:700; text-transform:uppercase; border-radius:13px 13px 0px 0px; background:#fff; border:1px solid #a3abaf;}444.table-view .listing-view li a{padding:10px 20px; display:inline-block; color:#000; text-decoration:none;}445.table-view .listing-view li.ui-state-active{border:5px solid #005672 !important; border-bottom:0;}446 447.container a{text-decoration: underline; color: #000};448 449.list-view{ border-bottom:0px solid #a7a7a7; background:#eaf0f4; padding:10px; border-radius:10px; margin-top:20px;}450 451/*.btn-link a{ background:#0c6f8f; padding:8px 15px; border-radius:5px; color:#fff; text-decoration:none; }*/452/*.btn-link a:hover{ background:#0c6f8f;}*/453 454.box-list{ background:#fff; border:1px solid #d0d0ce; border-radius:5px; -webkit-border-radius:5px; padding:10px;}455ul.list-arrow-menu{456 margin: 20px 0px;457 background:#fff;458 padding:0;459}460 461ul.list-arrow-menu li {462 display: inline-block;463 line-height: 24px;464 margin:0px 0px 0 0;465 position: relative;466 text-align:center;467 468}469ul.list-arrow-menu li a{ text-align:center; }470ul.list-arrow-menu li:before {471 content: " ";472 height: 0;473 width: 0;474 position: absolute;475 left: -3px;476 border-style: solid;477 border-width: 24px 0 24px 24px;478 border-color: transparent transparent transparent #9a9995;479 z-index: 0;480}481 482ul.list-arrow-menu li:first-child:before {483 border-color: transparent;484}485 486ul.list-arrow-menu li a:after {487 content: " ";488 height: 0;489 width: 0;490 position: absolute;491 right: -24px;492 border-style: solid;493 border-width: 24px 0 24px 24px;494 border-color: transparent transparent transparent #fff;495 z-index: 10;496 top:0;497}498 499ul.list-arrow-menu li.active a {500 background: #0c6f8f;501 z-index: 100;502 color:#fff;503 504}505 506 507ul.list-arrow-menu li.active-not a{ background:#F5F4F0; margin-left:-2px;}508ul.list-arrow-menu li.active-not a:after {509 border-left-color: #F5F4F0;510}511 512ul.list-arrow-menu li.active a:after {513 border-left-color: #0c6f8f;514}515ul.list-arrow-menu li.active-first a{ background:#19ffff; margin-left:-2px;}516ul.list-arrow-menu li.active-first a:after {517 border-left-color: #19ffff;518}519ul.list-arrow-menu li.active-second a{ background:#0099de; margin-left:-2px;}520ul.list-arrow-menu li.active-second a:after {521 border-left-color: #0099de;522}523 524ul.list-arrow-menu li.active-third a{ background:#0066ff; color:#fff; margin-left:-2px;}525ul.list-arrow-menu li.active-third a:after {526 border-left-color: #0066ff;527}528 529ul.list-arrow-menu li.active-four a{ background:#000076; color:#fff; margin-left:-2px; text-align:center;}530ul.list-arrow-menu li.active-four a:after {531 border-left-color: #000076;532 533}534 535ul.list-arrow-menu li a {536 display: block;537 background: #fff;538 color:#000;539 text-decoration:none;540 padding-right:20px;541 padding-left:35px;542}543 544ul.list-arrow-menu li a:hover {545 background: #9bdbf6;546 color:#000;547}548 549ul.list-arrow-menu li a:hover:after {550 border-color: transparent transparent transparent #9bdbf6;551}552.f-left{ float:left;}553.upload-list{ float:left; font-size:16px;}554.clearfix{ clear:both; content:""; display:table;}555.list-details { font-size:16px; margin-bottom:0px;}556.list-details:after{ clear:both; content:""; display:table;}557.list-details label{ width:200px; float: left; font-weight:bold;}558.list-details p{float: left; padding-top:0;}559.text-area-style{ width:60%; margin-bottom:15px; font-family:Arial, Helvetica, sans-serif;}560.link-style a{ color:#1dbef2; font-size:20px; margin-right:15px; text-decoration:underline;}561.link-style a:hover{ color:#1dbef2; text-decoration:none;}562.fileUpload {563 position: relative;564 overflow: hidden;565 margin: 10px;566 float:left;567 margin-right:8%;568}569 570.fileUpload span{ background:#002060; color:#fff; padding:15px 30px; border-radius:10px; display:block; font-size:22px;}571.rft_btn {572 text-decoration: none !important;573 background-color: #A1DA8B !important;574 color: #154B66 !important;575 padding: 2px 6px 2px 6px;576 border: 1px solid #333333;577}578 579.customer-notes {580 border: 1px solid #1f1f0f;581 border-radius: 4px;582 max-height: 120px;583 overflow-y: auto;584 padding: 10px !important;585 width: 70%;586}587.customer-notes span{margin:0 0 15px 0;display: block;background:#D9EAF4 !important;}588.customer-notes label{width:auto;}589 590.span-26.last > form {591 text-align: right;592 margin-right: 5px;593}594 595a.arr-default{596 cursor:default;597 text-decoration:none;598}599 600 601 602body {603 /*background: #f4f3ed url(../images/home_bg.png) repeat-x;*/604 font-family: "Trebuchet MS", "MS Trebuchet", Helvetica, Arial, sans-serif;605}606 607#home_header {608 background-color: #252423;609 color: #fff;610 float: none;611 margin: auto;612 overflow: hidden;613 padding-top: 15px;614}615ul.inline_list {616 margin:0px 0px 10px 0px;617}618ul.inline_list li {619 list-style:none;620 display:inline;621 margin:0px 25px 0px 0px;622}623#home_navigation {624 text-align:right;625 margin-top:60px;626}627#home_navigation ul li a {628 color:#f5e8c0;629 font-size:15px;630 text-decoration:none;631}632#home_navigation ul li a:hover {633 text-decoration:underline;634}635#callout {636 float: none;637 margin: 20px auto;638 overflow: hidden;639}640#search_and_sign h1 {641 margin:0px;642}643#search_and_sign p {644 font-size:16px;645 font-style: italic;646}647div#callout div#register {648 background: #FFF url(../images/register_bg.png) no-repeat;649 height:214px;650}651div#callout div#register h2 {652 font-style:italic;653 font-size:22px;654 color:#FFF;655 padding:30px 0px 0px 200px;656 margin:0px;657}658div#callout div#register p {659 color:#262423;660 font-size:15px;661 font-style:italic;662 padding:0px 0px 0px 200px;663 margin:0px;664}665div#callout div#register p.register {666 padding: 0 20px 0 216px;667 margin:0px;668}669div#callout div#register p.register_test{670 color: white;671 float: left;672 font-size: 13px;673 margin: -18px 0 0 217px;674}675div#callout div#register p.register img {676 margin-top:10px;677}678div#callout div#register p.member {679 text-align:right;680 margin:50px 35px 0px 0px;681}682#check_status{position: absolute;683 height: 200px;684 width: 400px;685 margin: -100px 0 0 -200px;686 top: 50%;687 left: 50%;688background-color: red;}689div#callout div#register p.member a {690 text-decoration:none;691 color:#16516e;692 font-size:10px;693 font-weight:bold;694}695 696div#callout div#register p.member a:hover {697 text-decoration:underline;698}699div#columns {700 float: none;701 margin: 45px auto;702 overflow: hidden;703}704div#columns label {705 color:#4c4c4b;706 font-size:11px;707}708div#columns div#info, div#columns div#search {709 border-right:1px dotted #cdccc7;710}711div#columns div#info h3 {712 color:#4788a9;713 font-size:22px;714 font-family:Georgia;715 font-style:italic;716 font-weight:bold;717 margin:0px 20px 0px 0px;718 padding:0px 0px 8px 5px;719 border-bottom: 1px solid #cdccc7;720}721div#columns div#info p {722 color:#252422;723 font-size:12px;724 margin:0px 20px 0px 0px;725 padding:10px 0px 8px 7px;726}727div#columns div#search h3, div#columns div#login h3 {728 color:#a0522d;729 font-size:22px;730 font-family:Georgia;731 font-style:italic;732 font-weight:bold;733 margin:0px 20px 0px 5px;734 padding:0px 0px 8px 5px;735 border-bottom: 1px solid #cdccc7;736}737div#columns div#search form {738 margin:15px 0px 0px 10px;739}740div#columns input.text_field {741 height:20px;742 width:180px;743 margin:3px 0px 10px 0px;744}745div#columns div#search p {746 color:#b1b0ac;747 font-size:11px;748 margin:5px 5px 0px 10px;749}750div#columns div#search p a{751 color:#0e7192;752 text-decoration:none;753}754div#columns div#search p a:hover {755 text-decoration:underline;756}757div#columns div#login div#form {758 background:url(../images/login_form_bg.png) no-repeat;759 margin-top:8px;760 margin-left:2px;761 height:176px;762}763div#columns div#login div#form form {764 padding:6px 0px 10px 13px;765}766.accept_order {767 float: left;768 height: 123px;769 position: relative;770 width: 321px;771}772.accept_button773{774 bottom: 0;775 position: absolute;776}777#footer {778 float: none;779 margin: 55px auto 0;780 overflow: hidden;781}782#footer ul li{783 margin:0px 3px 0px 3px;784}785#copyright p {786 text-align:right;787 margin:0px 25px 0px 0px;788}789/* Footer */790ul.footer li a {791 color:#696969;792 text-decoration:none;793 margin-right:3px;794 margin-left:0px;795}796 797ul.footer li a:hover {798 text-decoration:underline;799}800.homepage_icon{801 float:left;802 width:50px;803}804.homepage_icon .facebook{805 background:url(../images/facebook.png) no-repeat;806 width:44px;807 height:46px;808 text-indent:100px;809 float:left;810 margin:50px 0px 5px 0px;811}812.homepage_icon .twitter{813 background:url(../images/twitter_icon.png) no-repeat;814 width:47px;815 height:45px;816 text-indent:100px;817 float:left;818 margin:5px 0px 5px 0px;819}820.homepage_icon .linkedin{821 background:url(../images/linkedin_icon.png) no-repeat;822 width:45px;823 height:45px;824 text-indent:100px;825 float:left;826 margin:5px 0px 5px 0px;827}828 829.container{width:100% !important;}830 831 832.dhtmlwindow{833position: absolute;834border: 2px solid #999999;835visibility: hidden;836background-color: white;837 838 -moz-box-shadow: 0px 0px 20px #666666;839 -webkit-box-shadow: 0px 0px 20px #666666;840 box-shadow: 0px 0px 20px #666666;841 padding:10px 0px 10px 15px;842 843 844}845 846.drag-handle{ /*CSS for Drag Handle*/847padding: 1px;848text-indent: 3px;849font: bold 14px Arial;850background-color: #FFFFFF;851color: white;852cursor: move;853overflow: hidden;854width: auto;855filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);856-moz-opacity: 1;857opacity: 1;858}859 860.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle*/861position: absolute;862right: 1px;863top: 2px;864cursor: hand;865cursor: pointer;866}867 868* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/869width: 100%;870}871 872 873.drag-contentarea{ /*CSS for Content Display Area div*/874border-top: 1px solid white;875background-color: white;876color: black;877max-height: 650px !important;878overflow: auto; 879}880.drag-contentarea form881{882 float: left;883 margin-bottom: 10px;884 width: 635px;885}886 887.order_mane {888 clear: both;889 float: left;890 margin: 10px 0;891}892 893.order_mane span894{895 float: left;896 width: 110px;897}898 899.order_mane input900{901 border: 1px solid #AFB9BC;902 box-shadow: 0 0 6px #D1D1D1 inset;903 /* float: left;*/904 padding: 4px;/*margin-bottom:19px;*/905}906.drag-contentarea form center907{908 clear:both;909}910 911.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/912border-top: 1px solid gray;913background-color: #F8F8F8;914height: 13px; /*height of resize image*/915}916 917 918.drag-resizearea{ /*CSS for Resize Area itself*/919float: right;920width: 13px; /*width of resize image*/921height: 13px; /*height of resize image*/922cursor: nw-resize;923font-size: 0;924}925 926.order_number {927 float: left;928 margin: 0 0 10px 5px;929 padding: 0 10px 10px;930 width: 30px;931}932.order_list933{934 float: left;935 text-align: left;936 width: 636px;937}938.order_list h1939{940 margin:0;941}942.order_list li943{944 list-style-type:none;945}946 947.order_credentials {948 float: left;949}950.work_details {951 float: left;952 width: 317px;953}954 955 956.order_details_box label {957 font-weight: bold;958}959 960.sign_details {961 clear: both;962 float: left;963 964 width: 97%;965}966.order_details {967 float: left;968 margin-right: 20px;969 width: 296px;970 margin-bottom:15px;971}972.order_details_box {973 border: 1px solid #C6C6C6;974 padding: 10px;975}976 977.notary_number_head h1978{979 margin:0 0 10px 0;980 color: #6A97AF;981 font-size: 23px;982 font-weight: bold;983}984 985.notary_number {986 color: #77BB41;987 font-weight: bold;988}989.notary_number b990{991 color:#2978FF;992}993 994 995.view_det_left1 {996 float: left;997 padding: 10px;998 width: 332px;999}1000 1001.view_det_left1 > span {1002 color: #6A97AF;1003 font-size: 21px;1004 font-weight: bold;1005}1006 1007.view_det_left1 label {1008 font-weight: bold;1009}1010 1011.view_det_left1 span1012{1013 1014}1015 1016.center_head h11017{1018 color: #567789;1019 font-size: 24px;1020 1021}1022.center_head h1 span1023{1024 color:#222f54;1025}1026.center_subhead1027{1028 color: #2475AC;1029 font-weight: bold;1030 margin: 0 auto;1031 width: 100%;1032}1033.view_det_left1 span1034{1035 color:#597AB2;1036}1037.view_det_right1 span1038{1039 color:#597AB2;1040 font-size: 18px;1041 font-weight: bold;1042}1043 1044 1045 1046 1047 1048/* Edit */1049 1050.check_status_button {1051 /* border: medium none !important;1052 float: right;1053 height: 28px;1054 margin-right: 250px;1055 margin-top: -31px !important;1056 padding: 0 !important;1057 width: 120px; margin-left:15px;*/1058 1059 1060 1061 border: medium none !important;1062 height: 28px;1063 margin: -30px 0 0 10px !important;1064 padding: 0 !important;1065 position: absolute;1066 width: 120px;1067 z-index: 5;1068}1069 1070.staus_timeline{ text-align:center;}1071 1072.staus_timeline > p {1073 float: left;1074 font-weight: bold;1075 margin-bottom: 15px;1076}1077 1078 1079 1080/*New Login Page*/1081body{background-color:#fff;}1082.nw-head{background-color:#252422;color:#fff;display:inline-block;padding: 15px 0;width:100%;}1083.nw-container{overflow: hidden;width:980px;margin:auto;}1084.nw-logo{width:40%;float:left;}1085.nw-menu{width:60%;float:right;text-align:right;}1086.nw-menu ul{list-style-type:none;margin: 30px 0;}1087.nw-menu ul li{display:inline-block; margin: 0 5px;padding: 0 10px;}1088.nw-menu ul li a{color:#fff;font-size: 16px;text-decoration:none;}1089.nw-menu ul li a:hover{text-decoration:underline;}1090 1091.cnt-top{margin:15px auto;}1092.nw-signup{box-sizing:border-box;float:left;padding: 30px 0;width:66.66%;}1093.nw-login{border-left: 1px solid #cccccc;box-sizing:border-box;float:left;padding-left: 40px;width:33.33%;}1094 1095.nw-cmt-img {1096 float: left;1097 width: 35%;1098}1099.nw-signup-cnt {1100 float: left;1101 width: 65%;1102}1103.nw-signup-cnt > h6 {1104 font-size: 16px;1105 font-weight: normal;1106 margin: 20px 0 5px;1107}1108.nw-signup-cnt h3 {1109 font-size: 22px;1110 font-weight: normal;1111 margin: 15px 0 25px;1112}1113.nw-buts {1114 margin: 15px 0;1115}1116.nw-buts > span {1117 display:inline-block;margin-right: 15px;text-align:center;font-size: 14px;font-weight: bold;1118}1119.nw-notary {1120 color: #4b99c4;1121}1122.nw-cust {1123 color: #f94848;1124}1125.nw-buts > span > a {1126 border-radius: 4px;1127 color: #fff;display: block;1128 padding: 10px 20px;1129margin-top:10px;1130 text-decoration: none;1131 text-transform: uppercase;1132}1133.nw-buts > span.nw-notary > a {background-color:#6bb9e4;}1134.nw-buts > span.nw-cust > a {background-color:#f94848;}1135 1136.nw-login > span {1137 display: block;1138 margin: 0 0 15px;1139}1140.nw-login > span > label {display:block;margin: 10px 0;}1141.nw-input {1142 border: 1px solid #d2d2d2;1143 border-radius: 4px;1144 box-sizing: border-box;1145 padding: 10px 7px;1146 width: 220px;1147}1148.nw-frgt-pass{font-size:12px;font-style:italic;margin-right: 30px;}1149.nw-frgt-pass > a{color:#2994cf;}1150.nw-button {1151 background: #303030 none repeat scroll 0 0;1152 border: medium none;1153 border-radius: 4px;1154 color: #fff;1155 cursor: pointer;text-transform:uppercase;font-size:14px;1156 padding: 10px 20px;1157}1158.cnt-bot{background-color: #f5f5f5;margin:10px 0;}1159.nw-cnt-three {1160 float: left;1161 margin: 20px 0;1162 width: 33.33%;1163}1164.nw-cnt-three > h6 {1165 font-size: 20px;1166 font-weight: normal;1167 margin: 10px 0;1168}1169 1170.nw-cnt-three > ul {1171 list-style-type: none;1172 margin: 10px 0;1173 padding: 0;1174}1175 1176.nw-cnt-three > ul > li {background-image: url("../images/list-bullet.png");background-repeat:no-repeat;background-position:left center;1177 line-height: 24px;1178 padding-left: 20px;1179}1180.nw-srch .nw-button{padding:10px;}1181.nw-social {1182 margin: 15px 3px;1183}1184.nw-social > span {1185 margin-right: 8px;1186}1187.nw-footer {1188 font-size: 12px;1189 margin: 15px auto;1190}1191 1192.nw-footer a{margin: 0 5px;text-decoration:none;color:#000;}1193.nw-lft-cnt {1194 float: left;1195 width: 80%;1196}1197.nw-rgt-cnt {1198 float: right;1199 text-align: right;1200 width: 20%;