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.8k
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">2<html xmlns="">3 <head>4 <style>5 <!--6 7body {8 padding: 0px;9 height:100%; /* this is the key! */10 background:#364267 url(../images/BodyBGrd.gif) repeat-x ;11 background-attachment: fixed;12 text-align:left;13 /* font-family:Verdana, Arial, Helvetica, sans-serif; */14 font-family:"Times New Roman", Times, serif; 15 font-size: 15px; 16 color: black;17 border-top:7px solid #cdb380;18 19 20}21 22#banner {23 width: 950px;24 height: 235px;25 background: url('../images/homebackgroundtest1.png') top left no-repeat;26 padding-top:2px;27 padding-right:60px;28 position:absolute;29 top:0; left:0;30}31 32 33#SOHP {34 position: absolute;35 left: 0px;36 top: 25px;37 width: 133px;38 height: 105px;39 background-color: transparent;40 background-image: url("../images/crest.png");41 background-repeat: no-repeat;42 background-attachment: scroll;43 background-position: 50% 50%;44 background-clip: border-box;45 background-origin: padding-box;46 background-size: auto auto;47 font-size: 24px;48 font-family: "Times New Roman",Times,serif;49 font-style: italic;50 font-weight: normal;51 text-align: center;52 margin-left: 0pt;53 padding-left: 0pt;54 }55 56 #SignOral, #SignOral a, #SignOral a:hover, #SignOral a:visited {57 font-family:"Times New Roman", Times, serif;58 font-style:italic;59 font-size: 11px; 60 color: #CDB380;61 padding-top: 5px;62 top:125px; 63 width: 133px;64 position:absolute; 65 text-align: center;66 }67 68 #CaseStudy {69 font-family:"Arial Narrow", Arial; font-stretch: condensed;, Helvetica, sans-serif;70 font-size: 11px; 71 font-style: normal;72 color: #ffffff; 73 border-top: 1px #ffffff dotted;74 top:147px; 75 left:15px;76 position:absolute; 77 text-align: center;78 width: 105px;79 }80 81#mainnav {position:absolute; text-align:left; top:75px; left:140px; width: 765px;}82 83#topnav {position:absolute; text-align:right; top:2px; right:110px;}84 85#pagetitle, .pagetitle {86 width: 774px;87 height:45px;88 background-image:url(/images/pagetitle.png);89 margin: 25px 45px 0 140px; 90 text-align:justify; 91 font-size: 33px;92 font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-stretch: condensed;93 font-weight: 800;94 color: #CDB380;95 word-spacing: -1px;96 letter-spacing: -1px;97 text-shadow: #020330 3px 3px 3px;98 line-height: 39px;99 text-transform:uppercase;100 border-bottom: #ffffff 1pt dotted;101 102}103 104 105#mainnav p, #topnav p, #topnav a, #topnav a:visited {106 font-family:"Arial Narrow", Arial; font-stretch: condensed;, Helvetica, sans-serif;107 font-size:18px;108 font-weight:normal;109 color:white;110 text-transform:uppercase;111 line-height: 2em;112 margin-bottom:-8px;113}114 115#MainNavTitles {116 font-family: "Arial Narrow", Arial, Helvetica, sans-serif;117 font-stretch: condensed;118 font-size: 18px; 119 font-weight: 900;120 color: #fff;121 text-transform:uppercase;122 margin-top: 10px;123 }124 125#topnav p, #topnav a, #topnav a:visited {font-size:11px; letter-spacing:1px;}126 127 #wrap {128 width: 960px;129 padding-top:197px;130 position:relative;131 margin:0 auto;132 /* background: url('../images/minotheaderbottom.gif') bottom left no-repeat;133 margin-bottom:20px; */134 135}136 137/*138#toc {139position:fixed;140top:189px;141left:10px;142width:170px;143background-color:white;144padding:10px;145border: 1px solid #999999;146}147*/148 149 150#toc {151position:absolute;152top:197px;153left:0px;154width:185px;155background-color:#cdb380;156padding:10px;157z-index:1000;158}159 160 161#tocright {162position: absolute;163top:230px;164right:-5px;165width:170px;166background-color:#cdb380;167padding:10px 15px 10px 25px;168z-index:2;169border: 1px solid #F7E4C5;170-moz-border-radius: 0px 6px 6px 0px;171border-radius: 0px 6px 6px 0px;172-moz-box-shadow: 0 0 8px 8px rgba(17, 18, 66, 0.8);173-webkit-box-shadow: 0 0 8px 8px rgba(17, 18, 66, 0.8);174box-shadow: 0 0 8px 8px rgba(17, 18, 66, 0.8);175}176 177 178#content {179 position:relative;180 z-index:10;181 padding:40px;182 margin-bottom: 20px;183}184 185 186.narrow {width:475px;}187.wide {width:675px;}188.wider {width:650px;}189.left {left:0;}190.right {left:195px;}191 192.full-alt { width: 825px; }193.full {width:880px;}194 195.whitebg {196 background-color: #fff;197 border: 0px #000000 solid;198 -moz-border-radius: 0px;199 border-radius: 0px;200 -moz-box-shadow: 5px 5px 5px rgba(17, 18, 66, 0.5);201 -webkit-box-shadow: 5px 5px 5px rgba(17, 18, 66, 0.5);202 box-shadow: 5px 5px 5px rgba(17, 18, 66, 0.5);203 position:relative;204 205 /* background-image: url(../images/gray.jpg); 206 background-repeat: repeat-x; */207}208 209.whitebg:before {210 content:"";211 position:absolute;212 top:0;213 right:0;214 border-width:0 23px 23px 0;215 border-style:solid;216 border-color:#e7e7e7 #111242;217 display:block;218 width:0;219}220 221.whitebg:before {222 ...223 -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 2px 2px rgba(0,0,0,0.2);224 -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 2px 2px rgba(0,0,0,0.2);225 box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 2px 2px rgba(0,0,0,0.2);226}227 228 229.homebg {230 background-image: url(../images/homeb52head960.png);231 background-repeat: no-repeat;232 background-color:white;233 -moz-border-radius: 0px;234 border-radius: 0px;235 -moz-box-shadow: 5px 5px 5px #141545;236 -webkit-box-shadow: 5px 5px 5px #141545;237 box-shadow: 5px 5px 5px #141545;238 position:relative;239}240.homewide {241 background-image: url(../images/homeb52head111.png);242 background-repeat: no-repeat;243 background-color:white;244 -moz-border-radius: 0px;245 border-radius: 0px;246 -moz-box-shadow: 5px 5px 5px #141545;247 -webkit-box-shadow: 5px 5px 5px #141545;248 box-shadow: 5px 5px 5px #141545;249 position:relative;250}251 252 253.homebg:before {254 content:"";255 position:absolute;256 top:0;257 right:0;258 border-width:0 30px 30px 0;259 border-style:solid;260 border-color:#E0E0E0 #141545;261 display:block;262 width:0;263}264 265.homebg:before {266 ...267 -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);268 -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);269 box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);270}271 272 273 274.aboutbg:before {275 content:"";276 position:absolute;277 top:0;278 right:0;279 border-width:0 30px 30px 0;280 border-style:solid;281 border-color:#E0E0E0 #141545;282 display:block;283 width:0;284}285 286.aboutbg:before {287 ...288 -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);289 -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);290 box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);291}292.aboutbg {293 background-image: url(../images/aboutbg.png);294 background-repeat: no-repeat;295 background-color:white;296 -moz-border-radius: 0px;297 border-radius: 0px;298 -moz-box-shadow: 5px 5px 5px #141545;299 -webkit-box-shadow: 5px 5px 5px #141545;300 box-shadow: 5px 5px 5px #141545;301 position:relative;302}303 304#bottombar {305 width:100%;306 background-color:#cdb380;307 border-bottom:1px solid black;308 height:20px;309 position: relative;310 bottom: 0;311 }312 313#footer {314 width: 915px;315 margin:0 auto;316 height: 16px;317 padding:2px 10px 2px;318}319 320 321#footer p {margin:0; padding-bottom:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#111142;}322 323.blackbg {324 background-image: url(../images/50p.png); 325 background-repeat: repeat;326 327}328 329#nextmap, #mapback { position:absolute; bottom:40px; }330#nextmap { right:40px; }331#mapback { left:40px; }332 333 334#mapprint p, #mapback p, #nextmap p {text-indent:0; font-family:Arial, Helvetica, sans-serif; font-weight:normal;}335 336#nextmap p, #mapprint p {text-align:right;}337 338#mapoutline {width:875px; border:1px solid black; margin-bottom:50px;}339#mapwait {width:875px; background: url(/images/ajax-loader-blue.gif) 50% 50% no-repeat;}340 341 342.floatright {float:right; padding-left:20px; padding-bottom: 3px;}343.floatleft {float:left; padding-right:20px; padding-bottom: 3px;}344 345 346 347 348<!-- narrative test-->349 350 351#bannertest {352 width: 960px;353 height: 235px;354 background: url('../images/homebackgroundtest1.png') top left no-repeat;355 padding-top:2px;356 position:absolute;357 top:0; left:0;358}359 360#tocrighttest h6{ 361 font-family:"Arial Narrow", Arial; font-stretch: condensed;, Helvetica, sans-serif;362 font-size: 18px; 363 font-weight: 900;364 padding-bottom:15px;365 text-indent:0;366 text-transform:uppercase;367 color:#e4e4e4;368 text-align:center;369 text-shadow: #EBD3AA 1px 1px 1px;370 }371 372#tocrighttest a:link, #tocrighttest a:hover {373 color: #e4e4e4;374 }375.narrativetoctest, .narrativetoctest a:link { 376 color: #e4e4e4;377 text-align: left;378 text-indent:0px;}379 380#tocrighttest {381position: fixed;382float:right;383top:150px;384right:50px;385width:170px;386background-color:none;387padding:10px;388z-index:1000;389border: 0px solid #F7E4C5;390color: #e4e4e4;391}392 393 #wraptest {394 width: 960px;395 padding-top:197px;396 position:absolute;397 margin:0 auto;398 399}400 401 402 403<!-- end test -->404 405 406 407<!--408/* DEFAULT STYLES */409 410* {margin:0; padding:0;}411 412img {border:none;}413 414img.centered {display:block; margin:30px auto 5px;}415 416.imgborder {417 border: 1px solid black;418}419 420 421hr {background-color:#89938b; color: #89938b; height:1pt; margin:20px auto; border: 0; ;}422 423/* HEADLINE STYLES */424 425h1, h2, h3, h4, h5 {426font-family:Arial, Helvetica, sans-serif;427}428 429h1 {430 font-size: 26px; 431 color: #111142; 432 text-shadow: #e4e4e4 2px 2px 2px; 433 text-transform:uppercase; 434 text-align:center; 435 margin: 20px auto 30px auto;436 }437h2 {font-size: 20px; margin:15px 0 15px 0; color: #000; font-weight: bold;}438h3 {font-size: 17px; margin:15px 0 5px 0;}439h4 {font-size: 16px; padding-bottom: 4px;}440h5 {font-size: 14px; font-style: italic; line-height: 1.2em; padding-bottom: 7px;}441h6 {442 font-family:"Arial Narrow", Arial; font-stretch: condensed;, Helvetica, sans-serif;443 font-size: 14px; 444 font-weight: bold;445 padding: 8px 0px;446 text-indent:0;447 text-transform:uppercase;448 color:#033649;449 text-align:left;450 text-shadow: #EAD8BB 1px 1px 1px;451 }452.header {453margin-bottom:30px;454margin-top: 60px;455text-transform:uppercase;456text-align:center;457 458}459.PaperHead { line-height: 1.2em; margin: 0 auto 5 auto; padding: 0; text-align: center;}460.withsubtitle {margin-bottom:5px;}461.subtitle {margin-bottom:30px; font-style:italic;}462.bio a {font-weight:bold; font-size: 14px;}463 464 465/* LINK STYLES */466 467a:link468{ 469 color: #2e4ba0;470 text-decoration: none;471}472a:visited 473{ color: #2e4ba0;474 text-decoration: none;475}476 477a:hover478{ color: #2e4ba0;479 text-decoration: underline;480}481 482a:active {483 color: #033649;484 text-decoration: underline;485 486}487 488 489/* PARAGRAPH STYLES */490 491p { line-height: 1.5em;492 text-align: justify; 493 text-indent: 28px;494 color: #1a1a1a;495 padding-bottom: 15px;496}497 498p.bodytext {499 text-align:center;500 line-height: 1.0em;501 padding: 40px;502}503 504blockquote, {505 margin: 10px 10px;506 padding: 10px;507 text-indent: 0px;508 font-size: 95%;509 }510 511blockquote p, blockquote ul { 512 line-height: 1.4em;513 text-align: justify; 514 text-indent: 0px;515 margin:0px 50px;516 color: #3d3d3d;517 }518blockquote li {519 padding-bottom: 10px;520 }521 522ol, ul { padding:2px 10px; margin:0 5px;}523li { line-height: 1.2em; }524 525p.normal{font-weight:normal;}526p.italic {font-style:italic}527p.thick {font-weight:bold;}528 529dt, dd {font-size:11px; line-height:12px; margin-bottom:3px;}530dl {531 font-family:Arial, Helvetica, sans-serif;532 padding: 1px 5px 7px 0px;533 font-size: 10px;534 margin-left: 35px;535 text-indent: -23px;536 }537 538dd {none}539 540 541/* RIGHT MENU */542 543#toc h6, #tocright h6{ 544 font-family:"Arial Narrow", Arial; font-stretch: condensed;, Helvetica, sans-serif;545 font-size: 18px; 546 font-weight: 900;547 padding-bottom:15px;548 text-indent:0;549 text-transform:uppercase;550 color:#033649;551 text-align:center;552 text-shadow: #EBD3AA 1px 1px 1px;553 }554 555#tocright a, #tocright a:hover {556 color: #033649;557 }558 559.intromenu a sup, .sitemap a sup {font-weight:normal;}560.intromenu a, .intromenu a:hover, .intromenu a:visited {color:#033649;}561 562 563.tocmain {564 font-family:"Arial Narrow", Arial; font-stretch: condensed;, Helvetica, sans-serif;565 font-size: 19px; 566 font-weight: bold;567 padding-bottom:10px;568 padding-right: 10px;569 text-indent:0;570 text-transform:uppercase;571 color:#033649;572 text-align:center;573 text-shadow: #EBD3AA 1px 1px 1px;574 }575.intromenu, ul.intromenu, li.intromenu{576 line-height: 1.3em;577 text-align: left; 578 text-indent: 0px; 579 padding-left:6px;580 padding-right:4px;581 margin-bottom:5px;582 padding-bottom:6px;583 border-bottom:thin dotted #EBD3AA;584 color:#033649;585 font-family:Arial, Helvetica, sans-serif;586 font-size:13px;587 }588 589.dropmenus {590 line-height: 14px;591 text-align: left; 592 text-indent: 0px; 593 padding: 5px;594 border-top:thin dotted #EBD3AA;595 color:#033649;596 font-family:Arial, Helvetica, sans-serif;597 font-size:13px;598 line-height: 14px;599 } 600.tocitems, .tocitems a, .tocitems a:active, .tocitems ul, .tocitems li {601 text-align: left; 602 text-indent: 0px; 603 padding-left:0px;604 color:#033649;605 font-family:Arial, Helvetica, sans-serif;606 font-size:11px;607 padding-bottom: 2px;608 list-style-type:none;609 } 610 611/* IMAGE CONTAINERS */612 613.imagecontainer {614 margin-top:20px; 615 text-align:left; 616 width:625px; 617 margin-left:auto; 618 margin-right:auto;619}620 621.imagecontfloatr {622 padding-left: 28px;623 margin-bottom: -20px; 624 text-align:left; 625 width:300px; 626 margin-left:auto; 627 margin-right:auto;628 float: right;629}630.imagecontfloatl {631 padding-right: 28px;632 margin-bottom: -20px; 633 text-align:left; 634 width:300px; 635 margin-left:auto; 636 margin-right:auto;637 float: left;638}639 640.caption {font-weight:bold; line-height: 12px; text-indent:0; font-size:11px; font-family:Arial, Helvetica, sans-serif; margin-bottom:15px; padding-top: 5px;}641.introbg .caption, .backbg .caption {width:auto;}642a.captionlink {text-decoration:none;}643 644sup { height: 0;645 line-height: 1;646 vertical-align: baseline;647 _vertical-align: bottom;648 position: relative;649 bottom: 1ex;650 font-size:75%;651}652a sup {font-weight:bold; font-size:83%; text-decoration:none;}653h2 a sup {font-size:60%; padding-left:3px;}654h1 a sup {font-size:50%; padding-left:3px; bottom:2ex;}655 656 657.endnote {658 padding-top: 8px;659 clear:both;660 margin:0 auto;661 overflow:auto;662 text-align:left;663 line-height:1.5em;664 font-size: 14px;665 font-family: Arial, Helvetica, sans-serif;666 text-indent: 0px;667 668 }669.endnotes {670 padding-bottom:8px; 671 margin-bottom:8px; 672 border-bottom:1px dotted black;673 font-size: 12px;674 }675 676 677.small {font-size:10px;}678 679.bio {680 font-size:12px;681 padding-top:15px;682 padding-bottom:0px;683 text-indent:0;684 text-transform:none;685}686 687.biobox {margin: 0px 15px; padding: 0px;}688.biop, .biop p {margin: 0px; padding: 0px 0px 10px 0px;}689.bioimgleft {float: left; margin: 5px 20px 2px 0px;}690.bioimgright {float: right; margin: 10px 0px 2px 20px;}691 692 693 694.endnav {695margin-top:15px;696text-transform:uppercase;697font-family:Arial, Helvetica, sans-serif;698text-indent:0;699font-size:14px;700font-weight:bold;701text-align:right;702}703 704.clearboth {clear:both;}705 706.javalink {cursor:pointer;}707 708 709.app2 {margin:20px 40px 40px 40px; font-weight:bold;}710 711 712.doclinks a:link {713 line-height:20px;714 text-decoration: none;715 }716.doclinks ol, .doclinks li {717 color: black;718 line-height: 1.2em;719 padding-bottom: 5px;720}721.horizontalbox a:link, .horizontalbox a:hover, .horizontalbox a:visited, 722 723.doclinks a:hover, .horizontalbox a:hover { text-decoration: underline; }724 725.doclinks {726 float:right; 727 width:200px; 728 padding: 10px 15px 25px 15px;729 margin:10px 0 5px 20px; 730 line-height:20px;731 }732 733.horizontalbox {padding:14px; margin-bottom:20px;734 clear:both; min-height:120px; 735 line-height:1.5em;736 border: 1px solid #6d5835;737 }738 739.doclinks, .horizontalbox {740 background-color:#eaedf2;741 font-family: Arial, Helvetica, sans-serif; 742 font-size: 12px; 743 border: 0px solid #111242;744 -moz-box-shadow: 3px 3px 3px #dddddd;745 -webkit-box-shadow: 3px 3px 3px #dddddd;746 box-shadow: 3px 3px 3px #dddddd;747 }748.doclinks:hover, .horizontalbox:hover {749 -moz-box-shadow: 3px 3px 3px #dddddd;750 -webkit-box-shadow: 3px 3px 3px #dddddd;751 box-shadow: 3px 3px 3px #dddddd;752}753 754.doctext {width: 100%; }755.doctable {font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height:16px;}756 757.radarscopelinks {758 width: 97%;759 height: 70px;760 padding:15px; 761 margin:10px 0 5px 0px; 762 font-family: Arial, Helvetica, sans-serif; 763 font-size: 13px; 764 line-height:16px;765 text-align:center;766 }767.radarscopebottom {768 height: 250px;769 background-color:#eaedf2;770 font-family: Arial, Helvetica, sans-serif; 771 font-size: 12px; 772 border: 0px solid #111242;773 -moz-box-shadow: 3px 3px 3px #dddddd;774 -webkit-box-shadow: 3px 3px 3px #dddddd;775 box-shadow: 3px 3px 3px #dddddd;776 clear: both; 777 margin: 15px 0 50px 0; 778 padding: 15px;779 }780.radarscopebottombar {padding-left: 30px; padding-bottom: 10px; line-height: 2em; text-indent: 0px;}781#radarscopeindexbox { 782 background-color:#eaedf2;783 font-family: Arial, Helvetica, sans-serif; 784 font-size: 12px; 785 border: 0px solid #111242;786 -moz-box-shadow: 3px 3px 3px #dddddd;787 -webkit-box-shadow: 3px 3px 3px #dddddd;788 box-shadow: 3px 3px 3px #dddddd;789 clear: both; 790 height: 85px; 791 margin: 0 0 10px 0; 792 padding: 0 13px;793 }794.radarscopeindex {width: 55px; float:left; margin: 15px 0px 5px 0; padding: 0 3px;height: 75px; text-align: center; font-family: Arial, Helvetica, Sans-serif; font-size: 13px; }795.radarscopeindex a:hover, .radarscopeindex a:active {796 padding: 38px 0px 18px 0px; 797 background-color: #b9c0cc; 798 height: 85px;799 -moz-border-radius: 5px;800 -webkit-border-radius: 5px;801 border-radius: 5px;802 }803#wrap2 {clear:both; }804 805.interviewmug {float:left; text-align:center;}806.interviewmug img {border: 1px solid #6d5835;}807.interviewmug p {text-align:left; text-indent:0; font-size: 85%; font-weight: 900; margin-left:5px;}808.interviewlist {margin-left:130px; width:335px;}809.interviewlist ol, li {padding-bottom: 7px;}810.interviewlinks {float:right; width:150px; margin-bottom:20px;}811.interviewlinks p {text-align:left; margin-left:30px; text-indent:0; line-height:normal;}812 813.interviewpopup {text-align:right; float:left; width:232px; padding-top:15px;}814.interviewpopup p {text-align:right; font-weight:bold;}815.interviewnote {padding:8px 15px; margin-top:10px; margin-bottom:20px; background-color:#EAD2A8; border: solid 1px #bfbfbf;}816.interviewnote p {text-indent:0;}817 818.mapbox {padding:14px; margin-bottom:20px; background-color:#EAD2A8; border:solid 1px #101042; clear:both; min-height:120px;}819.mappage a {text-decoration:none;}820.mappage a:hover {text-decoration:underline;}821.mapmug {float:left; text-align:center; margin-right: 15px; clear: both; }822.mapmug p {text-align:left; text-indent:0;}823.maplist {margin-left:120px; margin-bottom: 20px; margin-top: 5px; width:275px; height: 160px;}824.maplist ol, .maplist li { line-height: 1.5em; margin-left: 5px;}825.maplinks {float:right; width:150px; margin-bottom:20px;}826.maplinks p {text-align:left; margin-left:30px; text-indent:0; line-height:normal;}827 828.maptext { margin-top: 5px; margin-bottom: 70px;}829.maptext p, p.maptext { padding-bottom: 0px; text-indent:0; margin-bottom: 15px; }830 831.mappopup {text-align:right; float:left; width:232px; padding-top:15px;}832.mappopup p {text-align:right; font-weight:bold;}833.mapnote {padding:8px 15px; margin-top:10px; margin-bottom:20px; background-color:#e2d5c0; border: solid 1px #bfbfbf;}834.mapnote p {text-indent:0;}835 836.mapsbox2 { }837.mapsbox {838 background-color:#eaedf2;839 width: 375px;840 font-family: Arial, Helvetica, sans-serif; 841 font-size: 12px; 842 border: 0px solid #111242;843 -moz-box-shadow: 3px 3px 3px #dddddd;844 -webkit-box-shadow: 3px 3px 3px #dddddd;845 box-shadow: 3px 3px 3px #dddddd;846 margin: 0 0 15px 0; 847 padding: 10px 15px;848 clear: none;849 }850.mapsbox:hover {851 -moz-box-shadow: 3px 3px 3px #dddddd;852 -webkit-box-shadow: 3px 3px 3px #dddddd;853 box-shadow: 3px 3px 3px #dddddd;854}855.mapsbox a:link, .mapsbox a:hover, .mapsbox a:visited {856 line-height:1.3em;857 }858.mapsbox a:hover{ text-decoration: underline; }859.mapsdownloadbox {860 width: 170px;861 float: right;862 padding: 15px;863 margin-top: 5px;864 margin-left: 20px;865 margin-bottom: 10px;866 text-align: right;867 background-color:#eaedf2;868 font-family: Arial, Helvetica, sans-serif; 869 font-size: 12px; 870 border: 0px solid #111242;871 -moz-box-shadow: 3px 3px 3px #dddddd;872 -webkit-box-shadow: 3px 3px 3px #dddddd;873 box-shadow: 3px 3px 3px #dddddd;874 }875.mapsdownloadbox img { float:right; margin-left: 5px; }876.mapviewer { margin-bottom: 50px; }877.mapviewer img { border:1px solid black; }878.stellarium { text-align: right; margin-top: -45px; }879 880.map-image { width: 100%; }881 882.imagebox {883 padding:0 40px; 884 margin:0; 885/* background-color:#e2d5c0; 886 border-right:solid 1px #cdb380; */887 clear:both; min-height:120px; 888 text-align:center; 889 padding-bottom: 20px;890 }891 892/* TABLE STYLES */893td { 894 line-height: 1.4em;895 /* text-align: justify; */896 text-indent: 0px;897 margin:0px 50px;898 color: #3d3d3d;899 }900 901.sample th, .sample td {902 padding:5px 7px;903 border-collapse:collapse;904 vertical-align:top;905}906 907table.sample {border:1px solid gray; border-collapse:collapse; width: 100%; margin: 0px; }908 909 910.dataplate {text-indent:0;}911 912 913p.arc_dis {914 line-height: 0.7cm;915 font-family: Times New Roman, serif; 916 font-size: 16px; 917 font-style: regular;918 color: black; 919 text-align: justify; 920 text-indent: 20px; 921 padding-left: 40px;922 padding-right: 40px;923 padding-top: 10px;924 padding-bottom: 10px;925 926}927 928/* */929 930 931 932p.arcsource {933 line-height: 1.2em;934 font-size: 13px; 935 font-style: italic;936 color: gray; 937 text-indent: 0px;938}939 940.radartext {text-indent:0; text-align:left;}941 942ol.arc {text-indent:0; padding-left:40px;}943 944li.arc2{line-height:1.5em; margin-bottom:15px;}945 946li.arc2 a:link947{ color: #2e4ba0; text-decoration: none;}948li.arc2 a:visited 949{ color: #2e4ba0; text-decoration: none;}950li.arc2 a:hover951{ color: #2e4ba0; text-decoration: underline;}952li.arc2 a:active {953 color: #033649; text-decoration: underline;}954 955 956/* .maptext {957 line-height: 0.7cm;958 font-family: Times New Roman, serif; 959 font-size: 15px; 960 font-style: regular;961 color: white; 962 text-align: left; 963 padding-left: 40px;964 padding-right: 30px;965 padding-top: 10px;966 padding-bottom: 10px;967 968}969 970.maptext2 {971 line-height: 0.7cm;972 font-family: Times New Roman, serif; 973 font-size: 15px; 974 font-style: regular;975 color: white; 976 text-align: justify; 977 padding-left: 20px;978 padding-right: 30px;979 padding-top: 10px;980 padding-bottom: 10px;981 982} */983 984 985 986p.contact {987 line-height: 0.6cm;988 font-family: helvetica; 989 font-size: 15px; 990 font-style: regular;991 color: black; 992 text-align: left; 993 padding-left: 50px;994 padding-right: 80px;995 padding-top: 10px;996 padding-bottom: 5px;997}998 999p.dataplatefoot {1000 line-height: 0.6cm;1001 font-family: helvetica; 1002 font-size: 12px; 1003 font-style: regular;1004 color: black; 1005 text-align: left; 1006 padding-left: 50px;1007 padding-top: 20px;1008 padding-bottom: 0px;1009 1010}1011 1012p.bib {1013 line-height: 1.5em;1014 font-family: Times New Roman, serif; 1015 font-size: 16px; 1016 font-style: regular;1017 color: black; 1018 text-align: left; 1019 padding-bottom: 25px;1020}1021p.fps {1022 line-height: 0.5cm;1023 font-family: Times New Roman, serif; 1024 font-size: 16px; 1025 font-style: regular;1026 color: black; 1027 text-align: left; 1028 text-indent: 0px; 1029 padding-left: 80px;1030 padding-right: 80px;1031 padding-top: 0px;1032 padding-bottom: 0px;1033}1034 1035 1036li.an { 1037 font-size: 15px;1038 line-height: 0.7cm;1039 padding-top: 0px;1040 padding-bottom: 0px;1041 text-align: left;1042 margin-left: 150px;1043 }1044 1045ol.map { 1046 font-size: 15px;1047 line-height: 0.7cm;1048 text-align: left;1049 color: white;1050 padding-left: 60px;1051 padding-top: 5px;1052 padding-bottom: 30px;1053 margin-left: 0px;1054 }1055 1056 1057 1058li.main { 1059font-size: 15px;1060 line-height: 0.7cm;1061 padding-top: 0px;1062 padding-bottom: 0px;1063 text-align: left;1064 margin-left: 0px;1065 }1066 1067 1068ul.witness { font-size: 15px;1069 text-align: left;1070 line-height: 0.7cm;1071 padding-top: 0px;1072 padding-bottom: 0px;1073 padding-left: 0px;1074 padding-right: 40px;1075 margin-left: 30px;1076 1077 }1078 1079 1080a.float:link1081{ color: black;1082 text-decoration: none;1083 font-family: Times New Roman, serif; 1084 font-size: 16px; 1085 1086}1087 1088a.float:visited 1089{ color: black;1090 text-decoration: none;1091 font-family: Times New Roman, serif; 1092 font-size: 16px; 1093}1094 1095a.float:hover1096{ color: #333333;1097 text-decoration: underline;1098 font-family: Times New Roman, serif; 1099 font-size: 16px; 1100 1101}1102 1103a.float:active {1104 color: black;1105 text-decoration: underline;1106 font-family: Times New Roman, serif; 1107 font-size: 16px; 1108 1109}1110 1111 1112a.info:link1113{ color: white;1114 text-decoration: underline;1115 font-family: Times New Roman, serif; 1116 font-size: 12px; 1117 font-style: normal;1118 letter-spacing: 1px1119}1120 1121a.info:visited 1122{ color: white;1123 text-decoration: underline;1124 font-family: Times New Roman, serif; 1125 font-size: 12px; 1126 font-style: normal;1127 letter-spacing: 1px1128}1129 1130a.info:hover1131{ color: gray;1132 text-decoration: underline;1133 font-family: Times New Roman, serif; 1134 font-size: 12px; 1135 font-style: normal;1136 letter-spacing: 1px1137}1138 1139a.info:active 1140{ color: white;1141 text-decoration: underline;1142 font-family: Times New Roman, serif; 1143 font-size: 12px; 1144 font-style: normal;1145 letter-spacing: 1px1146 1147}1148 1149 1150a.drop:link1151{ color: #ffffff;1152 text-decoration: none;1153}1154 1155a.drop:visited 1156{ color: #ffffff;1157 text-decoration: none;1158}1159 1160a.drop:hover1161{ color: #ffffff;1162 text-decoration: underline;1163}1164 1165a.drop:active {1166 color: #ffffff;1167 text-decoration: underline;1168 1169}1170 1171p.copy {1172 font-family: Times New Roman, serif; 1173 line-height: 0.9cm;1174 font-size: 12px; 1175 font-style: regular;1176 color: #333333; 1177 text-align: right; 1178 text-align: middle;1179 padding-left: 0px;1180 padding-right: 0px;1181 padding-top: 9px;1182 padding-bottom: 10px;1183 1184}1185 1186 1187 1188p.topnav {1189 line-height: 0.9cm;1190 font-family: Times New Roman, serif; 1191 font-size: 15px; 1192 font-style: regular;1193 color: black; 1194 text-align: left; 1195 text-indent: 0px; 1196 padding-left: 80px;1197 padding-right: 80px;1198 padding-top: 10px;1199 padding-bottom: 20px;1200