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>2<html class="" lang="de">3 <head>4 <style>5.clearfix {6 *zoom: 1;7}8.clearfix:before,9.clearfix:after {10 display: table;11 content: "";12 line-height: 0;13}14.clearfix:after {15 clear: both;16}17.hide-text {18 font: 0/0 a;19 color: transparent;20 text-shadow: none;21 background-color: transparent;22 border: 0;23}24.input-block-level {25 display: block;26 width: 100%;27 min-height: 30px;28 -webkit-box-sizing: border-box;29 -moz-box-sizing: border-box;30 box-sizing: border-box;31}32article,33aside,34details,35figcaption,36figure,37footer,38header,39hgroup,40nav,41section {42 display: block;43}44audio,45canvas,46video {47 display: inline-block;48 *display: inline;49 *zoom: 1;50}51audio:not([controls]) {52 display: none;53}54html {55 font-size: 100%;56 -webkit-text-size-adjust: 100%;57 -ms-text-size-adjust: 100%;58}59a:focus {60 outline: thin dotted #333;61 outline: 5px auto -webkit-focus-ring-color;62 outline-offset: -2px;63}64a:hover,65a:active {66 outline: 0;67}68sub,69sup {70 position: relative;71 font-size: 75%;72 line-height: 0;73 vertical-align: baseline;74}75sup {76 top: -0.5em;77}78sub {79 bottom: -0.25em;80}81img {82 /* Responsive images (ensure images don't scale beyond their parents) */83 84 max-width: 100%;85 /* Part 1: Set a maxium relative to the parent */86 87 width: auto\9;88 /* IE7-8 need help adjusting responsive images */89 90 height: auto;91 /* Part 2: Scale the height according to the width, otherwise you get stretching */92 93 vertical-align: middle;94 border: 0;95 -ms-interpolation-mode: bicubic;96}97#map_canvas img,98.google-maps img {99 max-width: none;100}101button,102input,103select,104textarea {105 margin: 0;106 font-size: 100%;107 vertical-align: middle;108}109button,110input {111 *overflow: visible;112 line-height: normal;113}114button::-moz-focus-inner,115input::-moz-focus-inner {116 padding: 0;117 border: 0;118}119button,120html input[type="button"],121input[type="reset"],122input[type="submit"] {123 -webkit-appearance: button;124 cursor: pointer;125}126label,127select,128button,129input[type="button"],130input[type="reset"],131input[type="submit"],132input[type="radio"],133input[type="checkbox"] {134 cursor: pointer;135}136input[type="search"] {137 -webkit-box-sizing: content-box;138 -moz-box-sizing: content-box;139 box-sizing: content-box;140 -webkit-appearance: textfield;141}142input[type="search"]::-webkit-search-decoration,143input[type="search"]::-webkit-search-cancel-button {144 -webkit-appearance: none;145}146textarea {147 overflow: auto;148 vertical-align: top;149}150@media print {151 * {152 text-shadow: none !important;153 color: #000 !important;154 background: transparent !important;155 box-shadow: none !important;156 }157 a,158 a:visited {159 text-decoration: underline;160 }161 a[href]:after {162 content: " (" attr(href) ")";163 }164 abbr[title]:after {165 content: " (" attr(title) ")";166 }167 .ir a:after,168 a[href^="javascript:"]:after,169 a[href^="#"]:after {170 content: "";171 }172 pre,173 blockquote {174 border: 1px solid #999;175 page-break-inside: avoid;176 }177 thead {178 display: table-header-group;179 }180 tr,181 img {182 page-break-inside: avoid;183 }184 img {185 max-width: 100% !important;186 }187 @page {188 margin: 0.5cm;189 }190 p,191 h2,192 h3 {193 orphans: 3;194 widows: 3;195 }196 h2,197 h3 {198 page-break-after: avoid;199 }200}201/*202 203 */204.btn {205 display: inline-block;206 *display: inline;207 /* IE7 inline-block hack */208 209 *zoom: 1;210 padding: 4px 12px;211 margin-bottom: 0;212 font-size: 14px;213 line-height: 20px;214 text-align: center;215 vertical-align: middle;216 cursor: pointer;217 color: #333333;218 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);219 background-color: #f5f5f5;220 background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);221 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));222 background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);223 background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);224 background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);225 background-repeat: repeat-x;226 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);227 border-color: #e6e6e6 #e6e6e6 #bfbfbf;228 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);229 *background-color: #e6e6e6;230 /* Darken IE7 buttons by default so they stand out more given they won't have borders */231 232 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);233 border: 1px solid #cccccc;234 *border: 0;235 border-bottom-color: #b3b3b3;236 -webkit-border-radius: 4px;237 -moz-border-radius: 4px;238 border-radius: 4px;239 *margin-left: .3em;240 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);241 -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);242 box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);243}244.btn:hover,245.btn:focus,246.btn:active,247.btn.active,248.btn.disabled,249.btn[disabled] {250 color: #333333;251 background-color: #e6e6e6;252 *background-color: #d9d9d9;253}254.btn:active,255.btn.active {256 background-color: #cccccc \9;257}258.btn:first-child {259 *margin-left: 0;260}261.btn:hover,262.btn:focus {263 color: #333333;264 text-decoration: none;265 background-position: 0 -15px;266 -webkit-transition: background-position 0.1s linear;267 -moz-transition: background-position 0.1s linear;268 -o-transition: background-position 0.1s linear;269 transition: background-position 0.1s linear;270}271.btn:focus {272 outline: thin dotted #333;273 outline: 5px auto -webkit-focus-ring-color;274 outline-offset: -2px;275}276.btn.active,277.btn:active {278 background-image: none;279 outline: 0;280 -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);281 -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);282 box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);283}284.btn.disabled,285.btn[disabled] {286 cursor: default;287 background-image: none;288 opacity: 0.65;289 filter: alpha(opacity=65);290 -webkit-box-shadow: none;291 -moz-box-shadow: none;292 box-shadow: none;293}294.btn-large {295 padding: 11px 19px;296 font-size: 17.5px;297 -webkit-border-radius: 6px;298 -moz-border-radius: 6px;299 border-radius: 6px;300}301.btn-large [class^="icon-"],302.btn-large [class*=" icon-"] {303 margin-top: 4px;304}305.btn-small {306 padding: 2px 10px;307 font-size: 11.9px;308 -webkit-border-radius: 3px;309 -moz-border-radius: 3px;310 border-radius: 3px;311}312.btn-small [class^="icon-"],313.btn-small [class*=" icon-"] {314 margin-top: 0;315}316.btn-mini [class^="icon-"],317.btn-mini [class*=" icon-"] {318 margin-top: -1px;319}320.btn-mini {321 padding: 0 6px;322 font-size: 10.5px;323 -webkit-border-radius: 3px;324 -moz-border-radius: 3px;325 border-radius: 3px;326}327.btn-block {328 display: block;329 width: 100%;330 padding-left: 0;331 padding-right: 0;332 -webkit-box-sizing: border-box;333 -moz-box-sizing: border-box;334 box-sizing: border-box;335}336.btn-block + .btn-block {337 margin-top: 5px;338}339input[type="submit"].btn-block,340input[type="reset"].btn-block,341input[type="button"].btn-block {342 width: 100%;343}344.btn-primary.active,345.btn-warning.active,346.btn-danger.active,347.btn-success.active,348.btn-info.active,349.btn-inverse.active {350 color: rgba(255, 255, 255, 0.75);351}352.btn-primary {353 color: #ffffff;354 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);355 background-color: #006dcc;356 background-image: -moz-linear-gradient(top, #0088cc, #0044cc);357 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));358 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);359 background-image: -o-linear-gradient(top, #0088cc, #0044cc);360 background-image: linear-gradient(to bottom, #0088cc, #0044cc);361 background-repeat: repeat-x;362 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);363 border-color: #0044cc #0044cc #002a80;364 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);365 *background-color: #0044cc;366 /* Darken IE7 buttons by default so they stand out more given they won't have borders */367 368 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);369}370.btn-primary:hover,371.btn-primary:focus,372.btn-primary:active,373.btn-primary.active,374.btn-primary.disabled,375.btn-primary[disabled] {376 color: #ffffff;377 background-color: #0044cc;378 *background-color: #003bb3;379}380.btn-primary:active,381.btn-primary.active {382 background-color: #003399 \9;383}384.btn-warning {385 color: #ffffff;386 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);387 background-color: #faa732;388 background-image: -moz-linear-gradient(top, #fbb450, #f89406);389 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));390 background-image: -webkit-linear-gradient(top, #fbb450, #f89406);391 background-image: -o-linear-gradient(top, #fbb450, #f89406);392 background-image: linear-gradient(to bottom, #fbb450, #f89406);393 background-repeat: repeat-x;394 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);395 border-color: #f89406 #f89406 #ad6704;396 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);397 *background-color: #f89406;398 /* Darken IE7 buttons by default so they stand out more given they won't have borders */399 400 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);401}402.btn-warning:hover,403.btn-warning:focus,404.btn-warning:active,405.btn-warning.active,406.btn-warning.disabled,407.btn-warning[disabled] {408 color: #ffffff;409 background-color: #f89406;410 *background-color: #df8505;411}412.btn-warning:active,413.btn-warning.active {414 background-color: #c67605 \9;415}416.btn-danger {417 color: #ffffff;418 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);419 background-color: #da4f49;420 background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);421 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));422 background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);423 background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);424 background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);425 background-repeat: repeat-x;426 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);427 border-color: #bd362f #bd362f #802420;428 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);429 *background-color: #bd362f;430 /* Darken IE7 buttons by default so they stand out more given they won't have borders */431 432 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);433}434.btn-danger:hover,435.btn-danger:focus,436.btn-danger:active,437.btn-danger.active,438.btn-danger.disabled,439.btn-danger[disabled] {440 color: #ffffff;441 background-color: #bd362f;442 *background-color: #a9302a;443}444.btn-danger:active,445.btn-danger.active {446 background-color: #942a25 \9;447}448.btn-success {449 color: #ffffff;450 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);451 background-color: #5bb75b;452 background-image: -moz-linear-gradient(top, #62c462, #51a351);453 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));454 background-image: -webkit-linear-gradient(top, #62c462, #51a351);455 background-image: -o-linear-gradient(top, #62c462, #51a351);456 background-image: linear-gradient(to bottom, #62c462, #51a351);457 background-repeat: repeat-x;458 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);459 border-color: #51a351 #51a351 #387038;460 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);461 *background-color: #51a351;462 /* Darken IE7 buttons by default so they stand out more given they won't have borders */463 464 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);465}466.btn-success:hover,467.btn-success:focus,468.btn-success:active,469.btn-success.active,470.btn-success.disabled,471.btn-success[disabled] {472 color: #ffffff;473 background-color: #51a351;474 *background-color: #499249;475}476.btn-success:active,477.btn-success.active {478 background-color: #408140 \9;479}480.btn-info {481 color: #ffffff;482 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);483 background-color: #49afcd;484 background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);485 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));486 background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);487 background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);488 background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);489 background-repeat: repeat-x;490 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);491 border-color: #2f96b4 #2f96b4 #1f6377;492 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);493 *background-color: #2f96b4;494 /* Darken IE7 buttons by default so they stand out more given they won't have borders */495 496 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);497}498.btn-info:hover,499.btn-info:focus,500.btn-info:active,501.btn-info.active,502.btn-info.disabled,503.btn-info[disabled] {504 color: #ffffff;505 background-color: #2f96b4;506 *background-color: #2a85a0;507}508.btn-info:active,509.btn-info.active {510 background-color: #24748c \9;511}512.btn-inverse {513 color: #ffffff;514 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);515 background-color: #363636;516 background-image: -moz-linear-gradient(top, #444444, #222222);517 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));518 background-image: -webkit-linear-gradient(top, #444444, #222222);519 background-image: -o-linear-gradient(top, #444444, #222222);520 background-image: linear-gradient(to bottom, #444444, #222222);521 background-repeat: repeat-x;522 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);523 border-color: #222222 #222222 #000000;524 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);525 *background-color: #222222;526 /* Darken IE7 buttons by default so they stand out more given they won't have borders */527 528 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);529}530.btn-inverse:hover,531.btn-inverse:focus,532.btn-inverse:active,533.btn-inverse.active,534.btn-inverse.disabled,535.btn-inverse[disabled] {536 color: #ffffff;537 background-color: #222222;538 *background-color: #151515;539}540.btn-inverse:active,541.btn-inverse.active {542 background-color: #080808 \9;543}544button.btn,545input[type="submit"].btn {546 *padding-top: 3px;547 *padding-bottom: 3px;548}549button.btn::-moz-focus-inner,550input[type="submit"].btn::-moz-focus-inner {551 padding: 0;552 border: 0;553}554button.btn.btn-large,555input[type="submit"].btn.btn-large {556 *padding-top: 7px;557 *padding-bottom: 7px;558}559button.btn.btn-small,560input[type="submit"].btn.btn-small {561 *padding-top: 3px;562 *padding-bottom: 3px;563}564button.btn.btn-mini,565input[type="submit"].btn.btn-mini {566 *padding-top: 1px;567 *padding-bottom: 1px;568}569.btn-link,570.btn-link:active,571.btn-link[disabled] {572 background-color: transparent;573 background-image: none;574 -webkit-box-shadow: none;575 -moz-box-shadow: none;576 box-shadow: none;577}578.btn-link {579 border-color: transparent;580 cursor: pointer;581 color: #0088cc;582 -webkit-border-radius: 0;583 -moz-border-radius: 0;584 border-radius: 0;585}586.btn-link:hover,587.btn-link:focus {588 color: #005580;589 text-decoration: underline;590 background-color: transparent;591}592.btn-link[disabled]:hover,593.btn-link[disabled]:focus {594 color: #333333;595 text-decoration: none;596}597/* ---------------------------------------------------------- */598.center {599 text-align: center;600}601.floatLeft {602 float: left;603}604.floatRight {605 float: right;606}607.imgFloatLeft {608 float: left;609 margin: 10px 20px 10px 0;610}611.imgFloatRight {612 float: right;613 margin: 10px 0 10px 20px;614}615.large {616 font-size: 120%;617 line-height: 1.6em;618}619.left {620 text-align: left;621}622.marginLeft {623 margin-left: 20px;624}625.marginRight {626 margin-right: 20px;627}628.noBorder,629table.noBorder,630table.noBorder td {631 border: 0;632}633.noMargin {634 margin: 0;635}636.noPadding {637 padding: 0;638}639.right {640 text-align: right;641}642.small {643 font-size: 90%;644 line-height: 1.8em;645}646.withBorder {647 -webkit-box-shadow: 0px 0px 10px #888888;648 -moz-box-shadow: 0px 0px 10px #888888;649 box-shadow: 0px 0px 10px #888888;650 border: 5px solid #f5f5f5;651 margin: 5px;652}653.withShadow {654 -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);655 -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);656 box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);657}658.kleineSchrift {659 font-size: 85%;660}661.grosseSchrift {662 font-size: 200%;663}664/* ---------------------------------------------------------- */665* {666 -webkit-box-sizing: border-box;667 -moz-box-sizing: border-box;668 box-sizing: border-box;669}670html,671body {672 margin: 0;673 padding: 0;674 width: 100%;675 height: 100%;676}677/* ---------------------------------------------------------- */678a {679 line-height: inherit;680 font-weight: inherit;681 text-decoration: underline;682}683a.btn,684a.btn:visited {685 text-decoration: none;686}687iframe {688 border: 0;689}690p {691 margin: 0 0 1em 0;692}693b,694strong {695 font-weight: bold;696}697em,698i {699 font-style: italic;700}701hr {702 clear: both;703 display: block;704 height: 1px;705 border: 0;706 border-top: 1px solid #ddd;707 margin: 1em 0;708 padding: 0;709}710img {711 border: 0;712 -moz-box-sizing: border-box;713 -webkit-box-sizing: border-box;714 box-sizing: border-box;715}716table th,717table td,718table.table td,719table.table th {720 vertical-align: middle;721 padding: 0.5em;722 border: 1px solid #ddd;723}724table {725 border-collapse: collapse;726 border-spacing: 0;727 width: 100%;728}729textarea {730 resize: vertical;731}732pre {733 background: #f2eed0;734 padding: 10px;735 margin: 1px;736 color: #333;737 font-family: monospace;738 font-size: 13px;739}740/* ---------------------------------------------------------- */741img {742 border: 0;743 -moz-box-sizing: border-box;744 -webkit-box-sizing: border-box;745 box-sizing: border-box;746}747img.imgFloatLeft {748 float: left;749 margin: 0 2em 1em 0;750}751img.imgFloatRight {752 float: right;753 margin: 10px 0 10px 20px;754}755img.large {756 width: 460px;757 height: auto;758}759img.marginLeft {760 margin-left: 20px;761}762img.marginRight {763 margin-right: 20px;764}765img.max-image {766 width: 100%;767 height: auto;768}769img.medium {770 width: 300px;771 height: auto;772}773img.small {774 width: 140px;775 height: auto;776}777/* ---------------------------------------------------------- */778.container:after {779 clear: both;780}781.container {782 position: relative;783}784/* ---------------------------------------------------------- */785h1,786h2,787h3,788h4,789h5,790h6,791p,792table,793blockquote {794 margin: 0 0 1em 0;795}796h1,797h2,798h3,799h4,800h5,801h6 {802 font-size: 1.2em;803 line-height: 140%;804 font-weight: bold;805}806h1 a,807h2 a,808h3 a,809h4 a,810h5 a,811h6 a {812 font-weight: inherit;813 font-size: inherit;814 color: inherit;815}816h1 {817 font-size: 1.5em;818}819h2 {820 font-size: 1.3em;821}822/* ---------------------------------------------------------- */823ul,824ol {825 margin: 0 0 1em 0;826 padding: 0;827}828ul {829 list-style: disc outside;830}831ul li,832ol li {833 margin-bottom: 0.3em;834}835ol {836 list-style: decimal outside;837}838ol,839ul {840 margin-left: 1em;841 padding-left: 1em;842}843ol ol,844ul ul {845 margin: 0.5em 0 0.5em 2em;846}847ul ul li,848ul ol li,849ol ol li,850ol ul li {851 margin-bottom: 5px;852}853td ul,854td ol {855 margin-top: 5px;856 margin-bottom: 5px;857}858ol > li {859 counter-increment: root;860}861ol > li > ol {862 counter-reset: subsection;863 list-style-type: none;864}865ol > li > ol > li {866 counter-increment: subsection;867}868ol > li > ol > li:before {869 content: counter(root) "." counter(subsection) " ";870}871/* ---------------------------------------------------------- */872br.clear {873 clear: both;874 line-height: 5px;875 height: 5px;876 font-size: 5px;877}878br.clear:after {879 content: "";880}881/* ---------------------------------------------------------- */882pre {883 background: #f2eed0;884 padding: 10px;885 margin: 1px;886 color: #333;887}888/* ---------------------------------------------------------- */889#map_canvas {890 width: 100%;891 height: 400px;892 -webkit-box-shadow: 0px 0px 10px #888888;893 -moz-box-shadow: 0px 0px 10px #888888;894 box-shadow: 0px 0px 10px #888888;895 border: 5px solid #f5f5f5;896 margin: 5px;897}898.routenplanung {899 margin: 2em 0;900}901/* ---------------------------------------------------------- */902div.attm {903 margin: 10px 0 20px 0;904 padding: 5px;905 webkit-box-shadow: 0 0 10px #999;906 -moz-box-shadow: 0 0 10px #999;907 box-shadow: 0 0 10px #999;908 border: 5px solid #f5f5f5;909 background-color: #f5f5f5;910 background-position: center;911 background-repeat: no-repeat;912 margin: 0;913 padding: 0;914}915div.attm img {916 background-color: #fff;917 background-position: center;918 background-repeat: no-repeat;919 border: 3px solid #fff;920}921ul.attm {922 margin: 10px 0 20px 0;923 padding: 5px;924 webkit-box-shadow: 0 0 10px #999;925 -moz-box-shadow: 0 0 10px #999;926 box-shadow: 0 0 10px #999;927 border: 5px solid #f5f5f5;928 background-color: #f5f5f5;929 background-position: center;930 background-repeat: no-repeat;931 margin: 0;932 padding: 0;933}934ul.attm li {935 list-style: none;936}937ul.attm li img {938 margin-left: 15px;939 margin-right: 10px;940}941ul.attm li a {942 margin: 0;943 padding: 5px;944 display: block;945 text-decoration: none;946 border-bottom: 1px solid #fff;947}948ul.attm li a:hover {949 background: #eee;950}951.horizontalNavigation,952.horizontalNavigation ul {953 margin: 0;954 padding: 0;955 list-style: none;956 font-family: 'Times New Roman', Verdana, Arial, Helvetica, sans-serif;957}958.horizontalNavigation li {959 cursor: pointer;960 display: inline;961 padding: 0 10px 0 0;962 margin: 0px;963 line-height: 30px;964}965.horizontalNavigation a {966 display: inline;967 text-decoration: none;968 padding: 0;969 margin: 0;970 color: #d9a501;971 text-transform: uppercase;972}973.horizontalNavigation b {974 font-weight: bold;975}976.horizontalNavigation a.active {977 color: #c2003c;978}979.horizontalNavigation li a:hover {980 color: #c2003c;981}982/* ------------------------------------------------------------------------------------983 Allgemein984 ------------------------------------------------------------------------------------ */985.textFormatP {986 font: normal 14px/24px "Open Sans", serif;987 color: #333333;988}989.textFormatH1 {990 font: normal 30px/42px "Times New Roman", Verdana, Arial, Helvetica, sans-serif;991 color: #d9a501;992}993.textFormatH2 {994 font: normal 18px/28px "Times New Roman", Verdana, Arial, Helvetica, sans-serif;995 color: #c2003c;996}997body,998p,999h1,1000h2,1001h3,1002a,1003td,1004th {1005 font: normal 14px/24px "Open Sans", serif;1006 color: #333333;1007 text-rendering: optimizelegibility;1008 -webkit-font-smoothing: antialiased;1009 -webkit-text-size-adjust: 100%;1010 -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);1011 text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;1012}1013a,1014a:active,1015a:hover {1016 text-decoration: underline;1017 color: #333333;1018}1019a:hover {1020 color: #c2003c;1021}1022.footer {1023 margin-top: 10px;1024 padding: 10px 0 0 0;1025 border-top: 1px solid #ccc;1026 text-align: center;1027 line-height: 10px;1028}1029.footer p {1030 font-size: 12px;1031 padding: 0;1032 margin: 0;1033}1034.footer p a {1035 font-size: 12px;1036 text-decoration: none;1037 color: #d9a501;1038}1039.footer p a:hover {1040 color: #c2003c;1041}1042.indexTeaser {1043 text-align: center;1044}1045.indexTeaser h1 {1046 font-size: 50px;1047 font-style: italic;1048 margin: 10px 0;1049}1050.frameBuchung {1051 width: 940px;1052 height: 600px;1053}1054.content p {1055 margin: 5px 0 20px 0;1056}1057.seite-preise .spalte {1058 width:445px;1059 height:600px;1060 float:left;1061}1062.seite-preise p {1063 line-height: 20px;1064 margin: 0 0 10px 0;1065}1066.seite-preise h2 {1067 margin: 25px 0 5px 0;1068}1069.seite-preise table td {1070 border: 0;1071 vertical-align: top;1072 padding: 2px 0;1073}1074.seite-preise table td:first-of-type {1075 width: 140px;1076}1077.seite-en-tarif .spalte {1078 width:445px;1079 height:700px;1080 float:left;1081}1082.seite-en-tarif p {1083 line-height: 20px;1084 margin: 0 0 10px 0;1085}1086.seite-en-tarif h2 {1087 margin: 25px 0 5px 0;1088}1089.seite-en-tarif table td {1090 border: 0;1091 vertical-align: top;1092}1093.seite-en-tarif table td:first-of-type {1094 width: 140px;1095}1096html,1097body {1098 width: 100%;1099 height: 100%;1100}1101#body {1102 margin: 0;1103 padding: 0;1104}1105#map_canvas {1106 width: 100%;1107 height: 600px;1108 margin: 20px 0;1109 -webkit-box-shadow: 0px 0px 10px #888888;1110 -moz-box-shadow: 0px 0px 10px #888888;1111 box-shadow: 0px 0px 10px #888888;1112 border: 5px solid #f5f5f5;1113 margin: 5px;1114}1115.btnMaps {1116 text-align: center;1117 margin: 20px 0 0 0;1118}1119.graphic,1120#prevBtn,1121#nextBtn,1122#slider1prev,1123#slider1next {1124 margin: 0;1125 padding: 0;1126 display: block;1127 overflow: hidden;1128 text-indent: -8000px;1129}1130#content {1131 position: relative;1132}1133#slider ul {1134 margin: 0;1135 padding: 0;1136 list-style: none;1137}1138#slider li {1139 margin: 0;1140 padding: 0;1141 list-style: none;1142}1143#slider li {1144 width: 940px;1145 height: 600px;1146 overflow: hidden;1147}1148#prevBtn,1149#nextBtn,1150#slider1next,1151#slider1prev {1152 display: block;1153 width: 50px;1154 height: 100px;1155 position: absolute;1156 left: 30px;1157 top: 358px;1158 z-index: 1000;1159}1160#nextBtn,1161#slider1next {1162 left: 900px;1163}1164#prevBtn a,1165#nextBtn a,1166#slider1next a,1167#slider1prev a {1168 display: block;1169 position: relative;1170 width: 50px;1171 height: 100px;1172 background: url(../media/buttonPrev.png) no-repeat 0 0;1173}1174#nextBtn a,1175#slider1next a {1176 background: url(../media/buttonNext.png) no-repeat 0 0;1177}1178 1179.indexBuchung {1180 display: block;1181height: 64px;1182position: relative;1183cursor: pointer;1184opacity: 1;1185top: 0;1186left: 0;1187margin: 0;1188padding: 10px 10px;1189overflow: visible;1190border: 0 none rgb(177,106,2);1191border-bottom: 4px solid rgb(177,106,2);1192text-align: right;1193text-transform: uppercase;1194-o-text-overflow: clip;1195text-overflow: clip;1196white-space: nowrap;1197background: -webkit-linear-gradient(-90deg, rgb(213,157,9) 0, rgb(225,157,60) 100%), rgb(253, 218, 134);1198background: -moz-linear-gradient(180deg, rgb(213,157,9) 0, rgb(225,157,60) 100%), rgb(253, 218, 134);1199background: linear-gradient(180deg, rgb(213,157,9) 0, rgb(225,157,60) 100%), rgb(253, 218, 134);1200background: -webkit-linear-gradient(-90deg, rgb(253,218,134) 0, rgb(225,157,60) 100%), rgb(253, 218, 134);