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>2<html class="no-js" lang="en">3 <!--<![endif]-->4 <head>5 <style>6/* HTML5 â° Boilerplate */7 8html, body, div, span, object, iframe,9h1, h2, h3, h4, h5, h6, p, blockquote, pre,10abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,11small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,12fieldset, form, label, legend, caption,13article, aside, canvas, details, figcaption, figure,14footer, header, hgroup, menu, nav, section, summary,15time, mark, audio, video {16 margin: 0;17 padding: 0;18 border: 0;19 font-size: 100%;20 font: inherit;21 vertical-align: baseline;22}23i,em {font-style:italic;}24article, aside, details, figcaption, figure,25footer, header, hgroup, menu, nav, section {26 display: block;27}28 29blockquote, q { quotes: none; }30blockquote:before, blockquote:after,31q:before, q:after { content: ''; content: none; }32ins { background-color: #ff9; color: #000; text-decoration: none; }33mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }34del { text-decoration: line-through; }35abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }36/*table { border-collapse: collapse; border-spacing: 0; }*/37hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }38input, select { vertical-align: middle; }39 40body { font:13px/1.231 sans-serif; *font-size:small; } 41select, input, textarea, button { font:99% sans-serif; }42pre, code, kbd, samp { font-family: monospace, sans-serif; }43 44html { overflow-y: scroll; }45a:hover, a:active { outline: none; }46ul, ol { margin-left: 2em; }47ol { list-style-type: decimal; }48nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }49small { font-size: 85%; }50strong, th { font-weight: bold; }51/*td { vertical-align: top; }*/52 53sub, sup { font-size: 75%; line-height: 0; position: relative; }54sup { top: -0.5em; }55sub { bottom: -0.25em; }56 57pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }58textarea { overflow: auto; }59.ie6 legend, .ie7 legend { margin-left: -7px; } 60input[type="radio"] { vertical-align: text-bottom; }61input[type="checkbox"] { vertical-align: bottom; }62.ie7 input[type="checkbox"] { vertical-align: baseline; }63.ie6 input { vertical-align: text-bottom; }64label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }65button, input, select, textarea { margin: 0; }66input:valid, textarea:valid { }67input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }68.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }69 70::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }71::selection { background:#FF5E99; color:#fff; text-shadow: none; }72a:link { -webkit-tap-highlight-color: #FF5E99; }73 74button { width: auto; overflow: visible; }75.ie7 img { -ms-interpolation-mode: bicubic; }76 77body, select, input, textarea { color: #444; }78a { color: #607890; }79a:hover { color: #E6AD04; outline: none; }80body, html {81 min-height: 100%;82}83 84 85/* GENERAL */86h1, h2, h3, h4, h5, h6 {87 padding: 0px;88 margin: .4em 0em .1em 0em;89 line-height: 130%;90 /* font-weight: bold; */91 /* font-family: "Droid Sans"; */92 /* font-family: var(--futura-pt);93 font-style: normal; */94}95 96/* NEW JUNE 2022 */97h1 { 98 font-family: var(--globe-gothic) !important;99 font-style: normal !important;100 font-weight: 700 !important;101}102 103h2 {104 font-size: 2.5rem !important;105 font-weight: 400 !important;106}107 108h3 {109 font-weight: 300 !important;110}111 112h4 {113 font-weight: 500 !important;114 color: var(--galactic-navy) !important;115}116 117.heavyText {118 color: var(--galactic-navy) !important;119}120 121/* NEW JUNE 2022 */122h2, h3, h4, h5, h6 {123 /* font-weight: bold; */124 /* font-family: "Droid Sans"; */125 font-family: var(--futura-pt);126 font-style: normal;127 font-weight: 300;128}129 130p {131 padding: 0px;132 margin: .8em 0em .2em 0em;133}134ul {135 padding: .4em 0 .3em;136}137.flex-direction-nav a {138 transition: .3s ease;139}140 141 142/* NEW EDITS MAY 2022 (BCG SAM) */143/*144 These are how the different text elements are setup within Tspark for referance:145 Page Head = h1146 Title = h2147 Subtitle = h3148 Small heading = h4149 Normal = p150 Lighter text151 Heavier text152 Red text153*/154 155:root {156 /* Colors */157 --space-black: #000;158 --innovare-teal: #017a9c;159 --flight-blue: #77c7d3;160 --cloud-white: #fff;161 --research-red: #c94457;162 --mission-maroon: #60131e;163 --galactic-navy: #0d2839;164 --ai-apple: #dfff00; 165 166 /* Adobe Fonts */167 --globe-gothic: "ltc-globe-gothic", sans-serif;168 --futura-pt: "futura-pt", sans-serif; 169}170 171 172/* Test on the our team page. Remove when done. */173#cmsRegion7C7423A6-163C-DE64-AD1D2116EBB97D62 h1 {174 /* font-family: var(--globe-gothic);175 font-style: normal;176 font-weight: 700; */177}178 179#cmsRegion7C7423A6-163C-DE64-AD1D2116EBB97D62 > section > article.bio.clearfix.first > h2 {180 /* font-family: var(--futura-pt);181 font-style: normal;182 font-weight: 500; */183}184 185 186/* END TESTING */187 188.img-crop {189 width: 200px;190 height: 190px;191 overflow: hidden;192 position: relative;193 float: left;194}195.newsstory .image-crop img, .eventimg img {196 max-width: none !important;197 display: block;198 border-radius: 6px;199}200#container img.width100 {201 width: 100%;202 height: auto;203}204#container img.height100 {205 height: 100%;206 width: auto;207}208 209/*210 // ========================================== \\211 || ||212 || Template Styles ||213 || ||214 \\ ========================================== //215*/216body {217 background-color: #333;218 font-family: Calibri,"Droid Sans",Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;219 font-size: 14px;220}221 222#container {223 position: relative;224 width: 100%;225 float: left;226 clear: both;227}228 229.cWidth {230 width: 1000px;231 margin: 0 auto;232}233 234/*235 * Top Header236*/237 238header {239 background: url('/images/bac_footer.jpg') top center no-repeat #000;240 padding: 10px 0;241 color: #fff;242}243form[role="search"] {244 float: right;245 clear: both;246 margin: 0 0 2.5em;247 width: 430px;248}249header [role="search"] {250 width: 100%;251}252header form p {253 margin-top: .4em;254}255.searchForm {256 position: relative;257}258header a {259 text-decoration: none;260 color: inherit;261}262.searchForm .searchinput {263 border-radius: 4px;264 background: #fff;265 border: 0;266 float: right;267 height: 2em;268 padding: 0.27em 2.8em 0.1em 1em;269 box-sizing: border-box;270}271.searchForm input[type="image"] {272 position: absolute;273 top: 0.15em;274 right: 1.3em;275}276 277 278/*279 * Navigation280*/281.mainNav {282 clear: both;283 padding: 0;284 float: none;285 position: relative;286 z-index: 20;287}288.mainNav ul, .mainNav li, .mainNav .menu-pulldown {289 padding: 0;290 margin: 0;291 display: block;292 list-style-type: none;293 width: auto;294}295.mainNav .menu-pulldown {296 width: 100%;297}298nav.mainNav li {299 float: left;300 z-index: 10;301 width: auto;302 height: 2.6rem;303 z-index: 10;304 position: relative;305}306nav.mainNav li a {307 display: block;308 padding: 0.6em .8em;309 width: auto;310 height: auto;311 font-family: inherit;312 font-weight: normal;313 text-transform: none;314 text-decoration: none;315 font-size: 1.2em;316 color: #999;317}318nav.mainNav li.activeLink a, nav.mainNav li a:hover, nav.mainNav li a:focus {319 /* background-color: #e6ad04; */320 background-color: var(--flight-blue);321 text-decoration: none;322 color: #fff; 323}324nav.mainNav ul ul {325 position: absolute;326 width: 180px;327 left: 0;328 top: 2.6rem;329}330nav.mainNav ul ul ul {331 top: 0;332 left: 180px;333}334nav.mainNav li li {335 float: none;336 width: auto;337 height: auto;338}339nav.mainNav li li a {340 background: #222;341}342 343.mainNav li.level1:last-of-type {344 float: right;345}346.mainNav li.level1:last-of-type a {347 background-color: #13547b;348 border-radius: 3em;349 color: #fff;350}351.mainNav ul.level2 {352 display: none;353}354 355 356.mainNav li li.hasSubmenu > a:after {357 background: url("/images/icon_mobile_nav_arrow.png") bottom right no-repeat transparent;358 content: "";359 float: right;360 display: block;361 width: 20px;362 height: 20px;363 position: relative;364 top: 3px;365 -webkit-transform: rotate(-90deg);366 -moz-transform: rotate(-90deg);367 -ms-transform: rotate(-90deg);368 transform: rotate(-90deg);369}370 371 372/*373 * Banner374*/375header[role="banner"] {376 padding: 0;377 background: none;378}379header[role="banner"] .flexslider {380 border: 0;381 padding: 0;382 border-radius: 0;383 max-height: 415px;384 overflow: hidden;385}386.flexslider .flex-control-nav {387 background: none;388}389.flexslider .flex-control-nav li a {390 border: 2px solid #fff;391}392/*393 * Boxes on homepage394*/395 396.boxes .box {397 padding: 20px;398 height: 135px;399 box-sizing: border-box;400 overflow: auto;401 text-align: center;402 font-family: "Merriweather Sans", sans-serif;403 font-weight: 100;404}405.boxes .box.tall {406 height: 270px;407}408.boxes .lightblue {409 /* background-color: #5293ba; */410 background-color: var(--flight-blue);411}412.boxes .blue {413 /* background-color: #13547b; */414 background-color: var(--innovare-teal);415}416.boxes .yellow {417 /* background-color: #e6ad04; */418 background-color: var(--ai-apple);419}420.boxes .yellow a {421 color: #fff;422}423.boxes .yellow a:hover, .boxes .yellow a:focus {424 text-decoration: underline;425 color: #111;426}427 428#cmsRegion54C3803C-163C-DE64-ADCAE2A445FD2ECC > .featuredStoriesModule > .cmsEventsList li {429 background-color: var(--ai-apple);430}431 432#cmsRegion54C3803C-163C-DE64-ADCAE2A445FD2ECC h3 {433 color: var(--space-black);434}435 436.cmsEventsList li {437 /* background-color: var(--ai-apple) !important; */438}439 440.box .yellowbutton {441 background-color: #e6ad04;442 display: block;443 width: 100%;444 box-sizing: border-box;445 padding: .3em;446 text-transform: uppercase;447 text-decoration: none;448 text-align: center;449 color: #fff;450}451 452.box h3 {453 margin: .9em 0 .3em;454 font: normal 2em/1.1em "Merriweather Sans", sans-serif;455 text-align: center;456 color: #fff;457}458.box p {459 padding: 0;460 margin: 0;461}462.box h3+p {463 margin-top: 0;464}465.box a {466 text-decoration: none;467 color: inherit;468}469.box a:hover, .box a:focus {470 color: #E6AD04;471}472 473.box .featuredStoriesModule {474 margin: 0 -15px;475}476.box .cmsEventsList li .eventdetail {477 display: block;478}479.box .eventstartend, .box .eventlocation, .box .eventdescription {480 display: none;481}482.box .cmsEventsList {483 margin: 0;484 padding: 0;485}486.box .cmsEventsList li {487 background-color: #e7bd4d;488 position: relative;489 margin: .2em 0 0;490 padding: 17px;491 display: block;492 list-style-type: none;493 text-align: left;494 color: #555;495}496.box .cmsEventsList li a {497 display: block;498 width: 100%;499 text-transform: uppercase;500 text-decoration: none;501 font-weight: bold;502 color: #333;503}504 505 506.box .cmsEventsList li .featuredNewsMore{507 /* background: url('/images/bac_event_link.jpg') no-repeat right center #E8D557; */508 /* background: url('/images/bac_event_link.jpg') no-repeat right center var(--ai-apple); */509 510 position: absolute;511 top: 0;512 right: 0;513 bottom: 0;514 font-size: 0;515 width: 23px;516}517 518.box .cmsEventsList li .featuredNewsMore:after {519 content: " ";520 position: absolute;521 /* background: #000; */522 width: 15px;523 height: 15px;524 top: 25px;525 left: -2px;526 float: left;527 box-shadow: -1px 1px 0 black;528 transform: rotate(-135deg);529}530 531 532/* Second Try */533/* .box .cmsEventsList li .featuredNewsMore{534 width: 0;535 height: 0;536 border: 50px solid transparent;537 border-bottom: 70px solid black;538 position: relative;539 top: -50px;540}541 542.box .cmsEventsList li .featuredNewsMore:after {543 content: '';544 position: absolute;545 left: -50px;546 top: 70px;547 width: 0;548 height: 0;549 border: 50px solid transparent;550 border-top: 70px solid black;551} */552 553 554.box .cmsEventsList p { margin: 0; padding: 0; }555 556 557/*======================================================558** | footer, duh | **559======================================================== */560 561footer {562 border-top: 10px solid #fff;563 background-color: #111;564 padding: 2.5em 0 0;565 color: #ccc;566}567footer h3 {568 margin: 1em 0 0;569 padding: 0;570 text-transform: uppercase;571 font-weight: bold;572 color: #fff;573}574footer ul, footer li {575 padding: 0;576 margin: 0;577 list-style-type: none;578}579footer ul ul {580 margin-left: 0;581}582footer a {583 text-decoration: none;584 color: #ccc;585}586 587footer li a {588 text-transform: uppercase;589 text-decoration: none;590 font-weight: 700;591 font-size: 1.15rem;592 line-height: 1.15em;593 padding: 0.5em;594 display: block;595 color: #fff;596}597footer li li a { 598 text-transform: none;599 font-weight: 100;600 font-size: 1rem;601}602 603.addthiszone {604 float: right;605 width: 300px;606}607 608.addthiszone:before {609 display: inline-block;610 vertical-align: middle;611 float: left;612 padding: 8px;613 content: "Share this page:";614}615 616footer img {617 margin: 0 6px;618}619 620.copyright {621 background: #000;622 border-top: 1px solid #fff;623 padding: 1em;624 margin-top: 2.5em;625 font: normal .78em "Merriweather Sans", sans-serif;626}627.copyright a {628 text-decoration: underline;629}630.copyright .last {631 text-align: right;632}633.copyright p {634 padding: 0;635}636 637/*638 // ========================================== \\639 || ||640 || END Template Styles, begin helper classes ||641 || ||642 \\ ========================================== //643*/644 645.mainNav li li.addArrow > a:after {646 background: none transparent;647 border-width: 7px;648 border-style: solid;649 border-color: transparent transparent transparent #fff;650 content: "";651 width: 0;652 height: 0;653 float: right;654 display: block;655 position: absolute;656 top: 40%;657 right: 10px;658}659/*Reusable grid*/660.clearfix:before,661.clearfix:after,662.gridcol:before,663.gridcol:after {664 content: "";665 display: table;666} 667.clearfix:after,668.gridcol:after {669 clear: both;670}671.clearfix, .gridcol {672 zoom: 1; /* For IE 6/7 (trigger hasLayout) */673}674.gridcol {675 676}677.gridcol [class*="col-"] {678 padding: 0 15px;679 float: left;680 clear: none;681 -webkit-box-sizing: border-box;682 -moz-box-sizing: border-box;683 box-sizing: border-box;684 min-height: 1px;/*keeps it from collapsing fully. allows other columns to float alongside.*/685}686.gridcol [class*="col-"]:last-child {687 float: right;/*so edges always line up.*/688}689.gridcol.edges {690 margin-left: -15px;691 margin-right: -15px;692 box-sizing: content-box;693}694.gridcol .col-1 {695 width: 4.1666%;696}697.gridcol .col-2 {698 width: 8.3%;699}700.gridcol .col-3 {701 width: 12.5%;702}703.gridcol .col-4 {704 width: 16.666%;705}706.gridcol .col-5 {707 width: 20.8333%;708}709.gridcol .col-6 {710 width: 25%;711}712.gridcol .col-7 {713 width: 29.1666%;714}715.gridcol .col-8 {716 width: 33.333%;717}718.gridcol .col-9 {719 width: 37.5%;720}721.gridcol .col-10 {722 width: 41.666%;723}724.gridcol .col-11 {725 width: 45.8333%;726}727.gridcol .col-12 {728 width: 50%;729}730.gridcol .col-13 {731 width: 54.1666%;732}733.gridcol .col-14 {734 width: 58.333%;735}736.gridcol .col-15 {737 width: 62.5%;738}739.gridcol .col-16 {740 width: 66.666%;741}742.gridcol .col-17 {743 width: 70.8333%;744}745.gridcol .col-18 {746 width: 75%;747}748.gridcol .col-19 {749 width: 79.1666%;750}751.gridcol .col-20 {752 width: 83.333%;753 padding: 0 .5%;754}755.gridcol .col-21 {756 width: 87.5%;757}758.gridcol .col-22 {759 width: 91.666%;760 padding: 0 .5%;761}762.gridcol .col-23 {763 width: 95.8333%;764}765.gridcol .col-24 {766 width: 100%;767}768 769#container .show-900, #container .show-1000, #container .show-800, #container .show-700, #container .show-600, #container .show-500, #container .show-400 {770 display: none;771}772@media screen and (max-width: 1100px) {773 .gridcol.break-1100 > [class*="col-"]{774 float: none;775 clear: both;776 width: auto;777 padding: 1%;778 }779 #container .hide-1100 {780 display: none;781 }782 #container .show-1100 {783 display: block;784 }785}786@media screen and (max-width: 1000px) {787 #container .show-1000 {788 display: block;789 }790 #container .hide-1000 {791 display: none;792 }793 #container .gridcol.break-1000 > [class*="col-"]{794 float: none;795 clear: both;796 width: auto;797 padding: 1%;798 }799}800@media screen and (max-width: 900px) {801 #container .show-900 {802 display: block;803 }804 #container .hide-900 {805 display: none;806 }807 #container .gridcol.break-900 > [class*="col-"]{808 float: none;809 clear: both;810 width: auto;811 padding: 1%;812 }813}814@media screen and (max-width: 800px) {815 #container .hide-800 {816 display: none;817 }818 #container .show-800 {819 display: block;820 }821 #container .gridcol.break-800 > [class*="col-"]{822 float: none;823 clear: both;824 width: auto;825 padding: 1%;826 }827 .gridcol .col-md-1 {828 width: 4.1666%;829 }830 .gridcol .col-md-2 {831 width: 8.3%;832 }833 .gridcol .col-md-3 {834 width: 12.5%;835 }836 .gridcol .col-md-4 {837 width: 16.666%;838 }839 .gridcol .col-md-5 {840 width: 20.8333%;841 }842 .gridcol .col-md-6 {843 width: 25%;844 }845 .gridcol .col-md-7 {846 width: 29.1666%;847 }848 .gridcol .col-md-8 {849 width: 33.333%;850 }851 .gridcol .col-md-9 {852 width: 37.5%;853 }854 .gridcol .col-md-10 {855 width: 41.666%;856 }857 .gridcol .col-md-11 {858 width: 45.8333%;859 }860 .gridcol .col-md-12 {861 width: 50%;862 }863 .gridcol .col-md-13 {864 width: 54.1666%;865 }866 .gridcol .col-md-14 {867 width: 58.333%;868 }869 .gridcol .col-md-15 {870 width: 62.5%;871 }872 .gridcol .col-md-16 {873 width: 66.666%;874 }875 .gridcol .col-md-17 {876 width: 70.8333%;877 }878 .gridcol .col-md-18 {879 width: 75%;880 }881 .gridcol .col-md-19 {882 width: 79.1666%;883 }884 .gridcol .col-md-20 {885 width: 83.333%;886 padding: 0 .5%;887 }888 .gridcol .col-md-21 {889 width: 87.5%;890 }891 .gridcol .col-md-22 {892 width: 91.666%;893 padding: 0 .5%;894 }895 .gridcol .col-md-23 {896 width: 95.8333%;897 }898 .gridcol .col-md-24 {899 width: 100%;900 }901}902@media screen and (max-width: 700px) {903 #container .hide-700 {904 display: none;905 }906 #container .show-700 {907 display: block;908 }909 #container .gridcol.break-700 > [class*="col-"] {910 float: none;911 clear: both;912 width: auto;913 padding: 1%;914 }915}916@media screen and (max-width: 600px) {917 #container .hide-600 {918 display: none;919 }920 #container .show-600 {921 display: block;922 }923 .gridcol.break-600 > [class*="col-"]{924 float: none;925 clear: both;926 width: auto;927 padding: 1%;928 }929}930@media screen and (max-width: 500px) {931 .hide-500 {932 display: none;933 }934 #container .show-500 {935 display: block;936 }937 .gridcol.break-500 > [class*="col-"]{938 float: none;939 clear: both;940 width: auto;941 padding: 1%;942 }943 .gridcol .col-md-1 {944 width: 4.1666%;945 }946 .gridcol .col-md-2 {947 width: 8.3%;948 }949 .gridcol .col-md-3 {950 width: 12.5%;951 }952 .gridcol .col-md-4 {953 width: 16.666%;954 }955 .gridcol .col-md-5 {956 width: 20.8333%;957 }958 .gridcol .col-md-6 {959 width: 25%;960 }961 .gridcol .col-md-7 {962 width: 29.1666%;963 }964 .gridcol .col-md-8 {965 width: 33.333%;966 }967 .gridcol .col-md-9 {968 width: 37.5%;969 }970 .gridcol .col-md-10 {971 width: 41.666%;972 }973 .gridcol .col-md-11 {974 width: 45.8333%;975 }976 .gridcol .col-md-12 {977 width: 50%;978 }979 .gridcol .col-md-13 {980 width: 54.1666%;981 }982 .gridcol .col-md-14 {983 width: 58.333%;984 }985 .gridcol .col-md-15 {986 width: 62.5%;987 }988 .gridcol .col-md-16 {989 width: 66.666%;990 }991 .gridcol .col-md-17 {992 width: 70.8333%;993 }994 .gridcol .col-md-18 {995 width: 75%;996 }997 .gridcol .col-md-19 {998 width: 79.1666%;999 }1000 .gridcol .col-md-20 {1001 width: 83.333%;1002 padding: 0 .5%;1003 }1004 .gridcol .col-md-21 {1005 width: 87.5%;1006 }1007 .gridcol .col-md-22 {1008 width: 91.666%;1009 padding: 0 .5%;1010 }1011 .gridcol .col-md-23 {1012 width: 95.8333%;1013 }1014 .gridcol .col-md-24 {1015 width: 100%;1016 }1017}1018@media screen and (max-width: 500px) {1019 .gridcol .col-sm-1 {1020 width: 4.1666%;1021 }1022 .gridcol .col-sm-2 {1023 width: 8.3%;1024 }1025 .gridcol .col-sm-3 {1026 width: 12.5%;1027 }1028 .gridcol .col-sm-4 {1029 width: 16.666%;1030 }1031 .gridcol .col-sm-5 {1032 width: 20.8333%;1033 }1034 .gridcol .col-sm-6 {1035 width: 25%;1036 }1037 .gridcol .col-sm-7 {1038 width: 29.1666%;1039 }1040 .gridcol .col-sm-8 {1041 width: 33.333%;1042 }1043 .gridcol .col-sm-9 {1044 width: 37.5%;1045 }1046 .gridcol .col-sm-10 {1047 width: 41.666%;1048 }1049 .gridcol .col-sm-11 {1050 width: 45.8333%;1051 }1052 .gridcol .col-sm-12 {1053 width: 50%;1054 }1055 .gridcol .col-sm-13 {1056 width: 54.1666%;1057 }1058 .gridcol .col-sm-14 {1059 width: 58.333%;1060 }1061 .gridcol .col-sm-15 {1062 width: 62.5%;1063 }1064 .gridcol .col-sm-16 {1065 width: 66.666%;1066 }1067 .gridcol .col-sm-17 {1068 width: 70.8333%;1069 }1070 .gridcol .col-sm-18 {1071 width: 75%;1072 }1073 .gridcol .col-sm-19 {1074 width: 79.1666%;1075 }1076 .gridcol .col-sm-20 {1077 width: 83.333%;1078 padding: 0 .5%;1079 }1080 .gridcol .col-sm-21 {1081 width: 87.5%;1082 }1083 .gridcol .col-sm-22 {1084 width: 91.666%;1085 padding: 0 .5%;1086 }1087 .gridcol .col-sm-23 {1088 width: 95.8333%;1089 }1090 .gridcol .col-sm-24 {1091 width: 100%;1092 }1093}1094@media screen and (max-width: 400px) {1095 .hide-400 {1096 display: none;1097 }1098 #container .show-400 {1099 display: block;1100 }1101 .gridcol.break-400 > [class*="col-"]{1102 float: none;1103 clear: both;1104 width: auto;1105 padding: 1%;1106 }1107}1108 1109 1110 1111 1112/*======================================================1113** | forms - labels above inputs | **1114======================================================*/1115.container .verticalstyle label {1116 display: block;1117 font-weight: normal;1118 line-height: 2.4em;1119 color: #444;1120}1121.container .verticalstyle .block:after {1122 display: table;1123 clear: both;1124 content: "";1125}1126.container .verticalstyle .block, .container .verticalstyle .fm-line {1127 position: relative;1128 margin: 10px 0;1129}1130.container .verticalstyle .block:first-of-type {1131 margin-top: 0;1132}1133.container .verticalstyle input, .container .verticalstyle select, .container .verticalstyle textarea {1134 background-color: #fff;1135 border: 1px solid #ddd;1136 border-radius: .3rem;1137 color: #555;1138 width: 100%;1139 float: none;1140 font-weight: normal;1141 padding: 3px 10px;1142 height: 32px;1143 box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.1) inset;1144 border-left-color: #4189C8;1145 border-left-width: 2px;1146 -webkit-box-sizing: border-box;1147 -moz-box-sizing: border-box;1148 box-sizing: border-box;1149 -webkit-transition: .2s ease;1150 -moz-transition: .2s ease;1151 -ms-transition: .2s ease;1152 -o-transition: .2s ease;1153 transition: .2s ease;1154}1155.container .verticalstyle input[type="checkbox"], .container .verticalstyle input[type="radio"] {1156 width: auto;1157 margin: 0 5px;1158 height: 1.3em;1159}1160.container .verticalstyle .fm-radio input, .container .verticalstyle .fm-checkbox input {1161 float: left;1162}1163.container .verticalstyle .fm-radio label, .container .verticalstyle .fm-checkbox label {1164 float: left;1165 line-height: 1.3em;1166}1167.container .verticalstyle select option {1168 padding: .2em;1169}1170.container .verticalstyle .required {1171 position: absolute;1172 top: .1em;1173 right: 0;1174}1175.container .verticalstyle [class*="col-"] .required {1176 right: 15px;1177}1178 1179.container .verticalstyle .invalid input, .container .verticalstyle .invalid select, .container .verticalstyle .invalid textarea {1180 border-left-color: #980707;1181 color: #AE0B0B;1182 box-shadow: -3px 0px 5px -2px rgba(152, 7, 7, 0.3) inset;1183 border-left-width: 2px;1184}/*1185.container .verticalstyle .valid input, .container .verticalstyle .valid select, .container .verticalstyle .valid textarea {1186 border-left-color: #108f36;1187 color: #108f36;1188 box-shadow: -3px 0px 5px -2px rgba(24, 147, 47, 0.3) inset;1189 border-left-width: 2px;1190}*/1191#container .container .verticalstyle .cmsError .alert {1192 background-color: transparent;1193 padding: 0;1194 color: #980707;1195 font-size: .9em;1196 float: right;1197}1198 1199 1200/*======================================================