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="">3 <head>4 <meta content="IE=edge" http-equiv="X-UA-Compatible">5 <!-- Force IE-Edge if available -->6 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">7 <meta content="width=device-width, initial-scale=1.0" name="viewport">8 <title>9 News Releases | AltaLink10 </title>11 <!-- GENERAL STYLES -->12 <!-- URL redirect with an anchor. -->13 <!-- PRINT STYLES -->14 <!-- FAVICON -->15 <!-- JQUERY -->16 <!-- PREFIX FREE17 -->18 <!-- INPUT AUTO RESIZE -->19 <!-- TABULOUS -->20 <!-- AUDIO JS -->21 <!-- TOOLTIPSTER -->22 <!-- VERTICAL-TIMELINE -->23 <!-- MASONRY -->24 <!-- FANCYBOX -->25 <!-- NAV -->26 <!-- JQUERY FUNCTIONS -->27 <meta content="Stay up to date with the latest in the energy industry with AltaLink's news releases, featured stories, publications, and quick facts." name="description">28 <meta content="AltaLink news, news releases, feature stories, quick facts, media contact, publications" name="keywords">29 <!-- MATCHMEDIA POLYFILL -->30 <!-- GOOGLE ANALYTICS -->31 <style type="text/css">32 .fancybox-margin{margin-right:0px;}33 </style>34 <meta content="AymqwRC7u88Y4JPvfIF2F37QKylC04248hLCdJAsh8xgOfe/dVJPV3XS3wLFca1ZMVOtnBfVjaCMTVudWM//5g4AAAB7eyJvcmlnaW4iOiJodHRwczovL3d3dy5nb29nbGV0YWdtYW5hZ2VyLmNvbTo0NDMiLCJmZWF0dXJlIjoiUHJpdmFjeVNhbmRib3hBZHNBUElzIiwiZXhwaXJ5IjoxNjk1MTY3OTk5LCJpc1RoaXJkUGFydHkiOnRydWV9" http-equiv="origin-trial">35 </head>36 <body class="general" style>37 <div class="header-container">38 <div class="pre-header">39 <div class="search">40 <form action="/search.cfm" autcomplete="false" method="get" name="frmSearch" style="display:inline;">41 <label>42 <input name style="display:none;" type="submit" value>43 </label>44 <input id="site-search" maxlength="100" name="search" onblur="this.placeholder = 'SEARCH...'" onfocus="this.placeholder = ''" placeholder="SEARCH..." type="text">45 </form>46 </div>47 </div>48 <header>49 <a class="main-logo" title="Home Page">50 <!--<img src="rick.jpg" alt="AltaLink">-->51 </a>52 <div id="menu-icon">53 <p>54 MENU55 </p>56 </div>57 <nav>58 <ul class="nav-level-1">59 <li class="nav-section-about">60 <a class="section">61 About Us62 </a>63 <div class="supernav">64 <div class="section-title">65 <h2>66 About Us67 </h2>68 <a class="button">69 More70 </a>71 </div>72 <ul class="nav-level-2">73 <li>74 <a class="">75 Company Overview76 </a>77 </li>78 <li>79 <a class="section">80 Governance81 </a>82 <ul class="nav-level-3">83 <li>84 <a>85 Management86 </a>87 </li>88 <li>89 <a>90 Board of Directors91 </a>92 </li>93 <li>94 <a>95 Regulatory Information96 </a>97 </li>98 <li>99 <a>100 Code of Ethics & Business Conduct101 </a>102 </li>103 </ul>104 </li>105 <li>106 <a class="">107 History108 </a>109 </li>110 <li>111 <a class="">112 Vision & Core Principles113 </a>114 </li>115 </ul>116 </div>117 </li>118 <li class="nav-section-sustainability">119 <a class="section">120 Sustainability121 </a>122 <div class="supernav">123 <div class="section-title">124 <h2>125 Sustainability126 </h2>127 <a class="button">128 More129 </a>130 </div>131 <ul class="nav-level-2">132 <li>133 <a class="section">134 Environmental, Social, Governance (ESG)135 </a>136 <ul class="nav-level-3">137 <li>138 <a>139 ESG Overview140 </a>141 </li>142 <li>143 <a>144 Environmental145 </a>146 </li>147 <li>148 <a>149 Social150 </a>151 </li>152 <li>153 <a>154 Governance155 </a>156 </li>157 </ul>158 </li>159 <li>160 <a class="section">161 Community Investment162 </a>163 <ul class="nav-level-3">164 <li>165 <a>166 Linked to Our Communities167 </a>168 </li>169 <li>170 <a>171 Powerful Giving172 </a>173 </li>174 <li>175 <a>176 Powerful Employees177 </a>178 </li>179 <li>180 <a>181 Powerful Education182 </a>183 </li>184 </ul>185 </li>186 <li>187 <a class="">188 Indigenous Relations189 </a>190 </li>191 </ul>192 </div>193 </li>194 <li class="nav-section-projects">195 <a class="section">196 Projects197 </a>198 <div class="supernav">199 <div class="section-title">200 <h2>201 Projects202 </h2>203 <a class="button">204 More205 </a>206 </div>207 <ul class="nav-level-2">208 <li>209 <a class="">210 About AltaLink Transmission Projects211 </a>212 </li>213 <li>214 <a class="">215 Project Map216 </a>217 </li>218 <li>219 <a class="">220 Project Listing221 </a>222 </li>223 <li>224 <a class="section">225 For Landowners226 </a>227 <ul class="nav-level-3">228 <li>229 <a>230 Overview231 </a>232 </li>233 <li>234 <a>235 On Your Land236 </a>237 </li>238 <li>239 <a>240 Farming & Power Lines241 </a>242 </li>243 <li>244 <a>245 Consultation Process246 </a>247 </li>248 </ul>249 </li>250 </ul>251 </div>252 </li>253 <li class="nav-section-environment">254 <a class="section">255 Environment256 </a>257 <div class="supernav">258 <div class="section-title">259 <h2>260 Environment261 </h2>262 <a class="button">263 More264 </a>265 </div>266 <ul class="nav-level-2">267 <li>268 <a class="">269 AltaLink's Policy270 </a>271 </li>272 <li>273 <a class="">274 Vegetation Management275 </a>276 </li>277 <li>278 <a class="section">279 Avian Protection Plan280 </a>281 <ul class="nav-level-3">282 <li>283 <a>284 Avian Protection Plan285 </a>286 </li>287 <li>288 <a>289 Avian Collisions290 </a>291 </li>292 <li>293 <a>294 Avian Electrocutions295 </a>296 </li>297 <li>298 <a>299 Raptor Nests300 </a>301 </li>302 </ul>303 </li>304 </ul>305 </div>306 </li>307 </ul>308 <ul class="tools mobile-tools">309 <li>310 <a class="twitter" target="_blank">311 </a>312 </li>313 <li>314 <a class="facebook" target="_blank">315 </a>316 </li>317 <li>318 <a class="youtube" target="_blank">319 </a>320 </li>321 <li>322 <a class="linkedin" target="_blank">323 </a>324 </li>325 </ul>326 </nav>327 <ul class="tools reg-tools">328 <li>329 <a class="twitter" target="_blank">330 </a>331 </li>332 <li>333 <a class="facebook" target="_blank">334 </a>335 </li>336 <li>337 <a class="youtube" target="_blank">338 </a>339 </li>340 <li>341 <a class="linkedin" target="_blank">342 </a>343 </li>344 </ul>345 <div class="header-bottom-bar">346 </div>347 </header>348 </div>349 <main>350 <div class="content-container clearfix">351 <h1>352 News353 </h1>354 <div class="content">355 <div class="content-top">356 </div>357 <div class="content-left">358 <h2>359 News Releases360 </h2>361 <p style="padding-bottom: 0;">362 </p>363 <p>364 May 6, 2015365 </p>366 <div>367 <h4>368 Town and residents work with AltaLink on collaborative tower solution369 </h4>370 <p>371 CANMORE, Alberta – Feedback from Canmore residents and cooperation with the Town of Canmore has resulted in the ability for AltaLink to continue to supply reliable power to the region without adding height to the existing372 <a class="glossaryName tooltip-4 tooltipstered">373 telecommunications tower374 </a>375 in the town.376 </p>377 <p>378 Interference with the Canmore telecommunications tower’s radio signal was determined to be a risk to the reliability of the electric system in the area. In January, AltaLink presented a project to Canmore residents that involved increasing the height of the existing tower, built in 2010, by approximately 20 metres in order for it to attain a clear signal.379 </p>380 <p>381 Throughout consultation with stakeholders and at the open house AltaLink hosted on January 28, residents expressed concern about increasing the tower height.382 </p>383 <p>384 “Our goal is always to find the best solution for a project. Working with the Town of Canmore, we determined that managing the height of the trees obstructing the telecommunications tower’s signal path would allow us to ensure the reliability of the telecommunications network without increasing the tower’s height,” said Jorge Gimon, project manager at AltaLink.385 </p>386 <p>387 Nearby residents will be receiving notices informing them of the cancellation of the project. Information on the original proposed project can be found388 <a>389 here390 </a>391 </p>392 <p>393 <em>394 Headquartered in Calgary, with offices in Edmonton, Red Deer and Lethbridge, AltaLink is Alberta's largest electricity395 <a class="glossaryName tooltip-35 tooltipstered">396 transmission397 </a>398 provider.399 </em>400 </p>401 <h4>402 For more information please contact:403 </h4>404 <p>405 <strong>406 Peter Brodsky407 </strong>408 <br>409 Manager, External Communications410 <br>411 AltaLink412 <br>413 <strong>414 Phone:415 </strong>416 [PHONE REDACTED]417 <br>418 <strong>419 Cell:420 </strong>421 [PHONE REDACTED]422 <br>423 <strong>424 E-mail:425 </strong>426 <a>427 [EMAIL REDACTED]428 </a>429 </p>430 </div>431 <p class="button">432 <a>433 Return to News Releases434 </a>435 </p>436 <p>437 </p>438 </div>439 <div class="content-right open">440 <ul class="side-nav" style="display: block;">441 <li class="active first">442 <a>443 News Releases444 </a>445 </li>446 <li>447 <a>448 COVID-19 Updates449 </a>450 </li>451 <li>452 <a>453 Feature Stories454 </a>455 </li>456 <li>457 <a>458 Media Contact459 </a>460 </li>461 </ul>462 </div>463 <div class="content-bottom">464 </div>465 </div>466 </div>467 </main>468 <footer>469 <div class="footer-top-bar">470 </div>471 <a class="privacy">472 Privacy / Legal473 </a>474 <a class="em-login" target="_blank">475 Employee Login476 </a>477 <a class="cs-site" target="_blank">478 Contractor Safety Site479 </a>480 </footer>481 <div class="subfooter">482 <p>483 ©2023 AltaLink484 </p>485 <!--<p>©2023 AltaLink <a target="_blank">Site by Media Dog</a></p> -->486 </div>487 <style>488 /*------------------------------489 490 ALTALINK STYLESHEET491 ________________________________________________________________________________________492 0. Font Faces493 1. General / Reset494 2. Header495 3. Project Page496 4. Content Page497 5. Project Listing498 6. Map499 7. Home Page500 8. Footer501 9. Misc502 10. Responsive Cases 1550 & 1450 (From 100% width to 1249px) - Small Monitors503 11. Responsive Case 1249 (From 1249px width to 1075px) - Small Monitors & Large Tablets504 12. Responsive Case 1075 (From 1075px width to 750px) - Small Tablets505 13. Responsive Cases 750, 600, & 500 (From 750px width to 100%) - Mobile506 507------------------------------*/508 509/*------------------------------510 0. FONT FACES 511------------------------------*/512 513@font-face {514 font-family: 'Avenir LT Std 85 Heavy';515 font-style: normal;516 font-weight: normal;517 src: local('Avenir LT Std 85 Heavy'), url('../fonts/AvenirLTStd-Heavy.woff') format('woff');518}519 520@font-face {521 font-family: 'Avenir LT Std 35 Light';522 font-style: normal;523 font-weight: normal;524 src: local('Avenir LT Std 35 Light'), url('../fonts/AvenirLTStd-Light.woff') format('woff');525}526 527@font-face {528 font-family: 'Avenir LT Std 65 Medium';529 font-style: normal;530 font-weight: normal;531 src: local('Avenir LT Std 65 Medium'), url('../fonts/AvenirLTStd-Medium.woff') format('woff');532}533 534@font-face {535 font-family: 'Avenir LT Std 55 Roman';536 font-style: normal;537 font-weight: normal;538 src: local('Avenir LT Std 55 Roman'), url('../fonts/AvenirLTStd-Roman.woff') format('woff');539}540 541/*------------------------------542 1. GENERAL / RESET543------------------------------*/544 545 * {546 margin: 0;547 padding: 0;548 font-size: 100%;549 line-height: 110%;550 box-sizing: border-box;551 -webkit-text-size-adjust: none;552 }553 html {554 min-height: 100%;555 } 556 body {557 margin: 0;558 padding: 0;559 height: 100%;560 background-color: #4b6684;561 background: #5c688b url(../images/main-bg.jpg) center top no-repeat;562 background-size: cover;563 background-attachment: fixed;564 color: #111;565 font-family: 'Avenir LT Std 55 Roman', Helvetica, arial, sans-serif;566 font-size: 1.4em;567 line-height: 120%;568 font-smoothing: antialiased;569 } 570 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {571 display: block;572 }573 table {574 border-collapse: collapse;575 border-spacing: 0;576 }577 ol, ul {578 list-style: none;579 }580 audio, canvas, video {581 display: inline-block;582 *display: inline;583 *zoom: 1;584 }585 img {586 border: 0;587 vertical-align: top;588 }589 h1 { 590 margin: 0;591 padding: 0; 592 font-family: 'Avenir LT Std 55 Roman', Helvetica, arial, sans-serif;593 font-weight: normal;594 color: #000;595 font-size: 30px;596 line-height: 130%;597 }598 h2 { 599 margin: 0;600 padding: 0; 601 font-family: 'Avenir LT Std 55 Roman', Helvetica, arial, sans-serif;602 font-weight: normal;603 color: #000;604 font-size: 25px;605 line-height: 130%;606 }607 h3 {608 margin: 0;609 padding: 0;610 font-family: 'Avenir LT Std 55 Roman', Helvetica, arial, sans-serif;611 font-weight: normal;612 color: #000;613 font-size: 20px;614 line-height: 130%;615 }616 h4 {617 margin: 0;618 padding: 0 0 20px 0;619 font-family: 'Avenir LT Std 65 Medium', Helvetica, arial, sans-serif;620 font-weight: normal;621 color: #000;622 font-size: 20px;623 line-height: 130%;624 }625 hr {626 height: 2px;627 border: none;628 background: #ff1d25;629 margin: 0;630 clear: both;631 } 632 p { 633 margin: 0;634 padding: 0;635 line-height: 130%;636 } 637 a:hover, a:active, a:focus, object { 638 outline: none; 639 } 640 a {641 text-decoration: none;642 color: #777; 643 transition: color .18s;644 }645 a:hover {646 color: #f15c63;647 }648 form, 649 input {650 margin: 0;651 padding: 0;652 border-radius:0; 653 } 654 textarea {655 margin: 0;656 padding: 0;657 border-radius:0; 658 overflow: auto;659 vertical-align: top;660 resize: none;661 }662 blockquote {663 margin: 5px 0 40px 0; 664 padding: 5% 5% 2% 5%;665 background: #fff;666 box-shadow: 1px 1px 6px rgba(0,0,0,0.2);667 transform: skewY(-1deg);668 }669 .content blockquote > * {670 transform: skewY(1deg);671 }672 .content blockquote p {673 font-size: 19px;674 }675 sup,676 sub {677 font-size: 13px;678 line-height: 10px;679 }680 .content .smallPrint sup {681 font-size: 10px682 }683 /*strong {684 font-family: 'Avenir LT Std 65 Medium', Helvetica, arial, sans-serif;685 }*/686 687/*------------------------------688 2. HEADER 689------------------------------*/690 .home .header-container {691 position: absolute;692 top: 0;693 left: 0;694 right: 0;695 z-index: 10;696 }697 /*Pre Header*/698 .pre-header {699 display: block;700 width: 100%;701 background: rgba(255, 255, 255, 0.55);702 }703 .pre-header .search {704 text-align: center;705 }706 .pre-header .search svg {707 width: 18px;708 height: 18px;709 display: inline-block;710 margin-bottom: -3px;711 cursor: pointer;712 zoom:1;713 }714 .pre-header .search input {715 display: inline-block;716 zoom:1;717 background: none;718 border: none;719 color: #fefefe;720 font-family: 'Avenir LT Std 35 Light', Helvetica, arial, sans-serif;721 font-size: 14px;722 letter-spacing: .6px;723 width: 80px;724 transition: .2s;725 padding: 3px 3px 3px 3px;726 margin: 3px 3px 3px 3px;727 }728 .pre-header .search input:focus {729 border: none;730 outline: none;731 padding: 6px 3px;732 font-size: 16px;733 }734 .pre-header .search input::-webkit-input-placeholder { color: #fefefe; }735 .pre-header .search input::-moz-placeholder { color: #fefefe; }736 .pre-header .search input:-moz-placeholder { color: #fefefe; }737 .pre-header .search input:-ms-input-placeholder { color: #fefefe; }738 /*Header*/739 header {740 background-color: #fefefe;741 background: rgba(250, 250, 250, 0.95);742 opacity: 1;743 width: 100%;744 display: table;745 position: relative;746 padding: 16px 2.5%;747 z-index: 10;748 margin-bottom: 40px;749 }750 .main-logo {751 display: table-cell;752 text-align: left;753 vertical-align: middle;754 padding-top: 4px;755 }756 .main-logo img,757 .main-logo svg {758 width: 258px;759 /*padding: 18px 0 15px 30px;760 width: 100%;*/761 height: 54px;762 }763 /*Nav*/764 #menu-icon {765 display: none;766 }767 nav {768 display: table-cell;769 text-align: center;770 vertical-align: middle;771 padding-bottom: 4px;772 /*width: 70%;*/773 }774 nav > ul {775 width: 100%:776 margin: 0;777 padding: 0;778 }779 nav > ul > li {780 display: inline-block;781 font-size: 14px;782 font-family: 'Avenir LT Std 85 Heavy', Helvetica, arial, sans-serif;783 letter-spacing: .7px;784 text-transform: uppercase;785 line-height: 1;786 }787 nav > ul > li > a {788 color: #101216;789 padding: 6px 15px;790 transition: color .3s;791 border-bottom: 1px solid rgba(241, 92, 99, 0);792 }793 nav > ul > li:hover > a {794 color: #f15c63;795 padding-bottom: 39px;796 }797 nav > ul > li > a.active {798 border-bottom: 1px solid #f15c63;799 }800 nav > ul > li:hover > a.active {801 border-bottom: none;802 }803 /*Super Nav*/804 .supernav {805 display: none;806 position: absolute;807 left: 0;808 width: 100%;809 min-height: 200px;810 padding: 40px 0 30px 0;811 background-color: #fefefe;812 background: url(../images/supernav-bg.png) no-repeat center bottom;813 background-size: cover;814 margin-top: 39px;815 z-index: 3;816 overflow: hidden;817 }818 .section-title {819 display: inline-block;820 vertical-align: top;821 margin-right: 3%;822 margin-top: 30px;823 }824 .supernav h2 {825 font-family: 'Avenir LT Std 85 Heavy', Helvetica, arial, sans-serif;826 font-size: 32px;827 letter-spacing: .5px;828 padding-bottom: 20px;829 color: #5c5154;830 min-width: 190px;831 }832 .supernav .button {833 font-family: 'Avenir LT Std 35 Light', Helvetica, arial, sans-serif;834 font-size: 26px;835 padding: 0 24px 0 0;836 background: url(../images/arrow-right-thin-darkgray.png) no-repeat right 4px;837 margin-left: 25%;838 color: #555253;839 opacity: .85;840 transition: .1s;841 }842 .supernav .button:hover {843 padding: 0 27px 0 0px;844 opacity: 1;845 }846 /*fix*/847 .nav-section-news .section-title .button {848 margin-left: 20px;849 }850 .nav-section-projects .section-title,851 .nav-section-careers .section-title {852 margin-top: 15px;853 }854 .supernav ul {855 display: inline-block;856 text-align: left;857 padding-bottom: 30px;858 margin-top: -10px;859 vertical-align: middle;860 }861 .supernav ul li {862 text-transform: none;863 letter-spacing: .5px;864 font-family: 'Avenir LT Std 35 Light', Helvetica, arial, sans-serif;865 font-size: 20px;866 padding: 10px 0 0 0;867 }868 .supernav ul li a {869 color: #ee3a43;870 padding: 0 0 0 23px;871 margin-left: 0;872 transition: .15s;873 position: relative;874 }875 .supernav ul li a:hover {876 color: #555253;877 }878 .supernav ul li a:before {879 content: url(../images/bullet-thick-black.png);880 opacity: .25;881 transition: .1s;882 position: absolute;883 left: -4px;884 }885 .supernav ul li a:hover:before {886 opacity: .5;887 left: 0px;888 }889 .supernav > ul > li > ul,890 .supernav > ul > li > ul > li > ul {891 display: none;892 }893 894 /*Tools*/895 .tools {896 display: table-cell;897 text-align: right;898 vertical-align: middle;899 }900 .tools > li {901 display: inline-block;902 margin: 0 4px;903 }904 .tools > li svg path {905 transition: .3s;906 }907 .tools > li .twitter svg {908 height: 20px;909 width: 24px;910 }911 .tools > li .facebook svg {912 height: 20px;913 width: 10px;914 }915 .tools > li .youtube svg {916 height: 20px;917 width: 28px;918 }919 .tools > li .linkedin svg {920 height: 20px;921 width: 20px;922 }923 .tools > li .glossary svg {924 height: 10px;925 width: 74px;926 margin: 0 0 5px 0;927 }928 .tools > li svg:hover path {929 fill: #111;930 }931 #glossary-icon {932 display: none;933 }934 .mobile-tools {935 display: none;936 }937 938 /*Bottom Bar*/939 .header-bottom-bar {940 width: 100%;941 height: 34px;942 background: url(../images/header-bottom-bar.png) center top no-repeat;943 position: absolute;944 background-size: cover;945 bottom: -34px;946 left: 0;947 z-index: 2;948 }949 950/*------------------------------951 3. PROJECT PAGE952------------------------------*/953 main {954 min-height: 700px;955 padding-top: 25px;956 padding-bottom: 30px;957 }958 .home main {959 padding-top: 0;960 padding-bottom: 0;961 }962 main h1 {963 color: #fffefe;964 font-size: 38px;965 margin-bottom: 50px;966 font-family: 'Avenir LT Std 35 Light', Helvetica, arial, sans-serif;967 }968 .content-container {969 width: 1400px;970 margin: 0 auto 60px auto;971 }972 .content {973 display: table;974 position: relative;975 margin-top: 40px;976 width: 100%;977 }978 .content-top,979 .content-bottom {980 width: 99.8%; /*1400*/981 margin: 0 1px;982 position: absolute;983 left: 0px;984 }985 .content-top {986 height: 40px;987 background: url(../images/content-top-project.png) center bottom no-repeat;988 background-size: contain;989 top: -40px;990 }991 .content-bottom {992 height: 60px;993 background: url(../images/content-bottom-project.png) center top no-repeat;994 background-size: contain;995 bottom: -60px;996 }997 .content-left {998 display: table-cell;999 background: #ffffff;1000 padding: 25px 40px 30px 40px;1001 width: 58.9%;1002 min-height: 400px;1003 }1004 .project .content-left #tabs {1005 min-height: 250px;1006 }1007 1008 1009 .content-right {1010 display: table-cell;1011 background: rgba(255, 255, 255, 0.90);1012 padding: 25px 4.5% 25px 3.5%;1013 width: 41.1%;1014 vertical-align: top;1015 }1016 /*Headings*/1017 .content h2 {1018 margin: 10px 0 15px 0;1019 text-transform: uppercase;1020 font-family: 'Avenir LT Std 55 Roman', Helvetica, arial, sans-serif;1021 color: #000;1022 font-size: 29px;1023 }1024 .content h3 {1025 margin: 15px 0 15px 0;1026 text-transform: uppercase;1027 font-family: 'Avenir LT Std 55 Roman', Helvetica, arial, sans-serif;1028 font-size: 22px;1029 color: #fff;1030 padding: 10px 20px 8px 18px;1031 background: #f15c63;1032 letter-spacing: .7px;1033 }1034 .content h4 {1035 padding: 10px 0 15px 0;1036 }1037 1038 /*Paragraphs*/1039 .content p {1040 font-size: 16px;1041 line-height: 140%;1042 letter-spacing: .5px;1043 padding-bottom: 19px;1044 color: #444;1045 }1046 .project-overview {1047 color: #444;1048 line-height: 140%;1049 font-size: 17px;1050 }1051 .content .project-overview li {1052 margin-top: 6px;1053 }1054 1055 /*Links*/1056 .content a {1057 color: #f15c63;1058 border-bottom: 1px solid rgba(241, 92, 99, 0);1059 transition: .2s;1060 }1061 .content a:hover {1062 color: #000;1063 border-bottom: 1px solid rgba(241, 92, 99, .6);1064 }1065 1066 /*LISTS*/1067 /*Unordered list*/1068 .content ul,1069 .content ol {1070 margin-bottom: 10px;1071 }1072 .content ul li ul,1073 .content ol li ul {1074 margin: 10px 0 0 0;1075 }1076 .content ul li,1077 .content ol li {1078 font-size: 17px;1079 line-height: 140%;1080 letter-spacing: .5px;1081 padding: 0 0 10px 35px;1082 background: url(../images/bullet-thick-grey.png) no-repeat 5px 3.5px;1083 }1084 .content-left > ul li:first-letter,1085 #tabs_container li:first-letter,1086 .content ol li:first-letter {1087 text-transform: uppercase;1088 }1089 /*PDF*/1090 .content .pdf li {1091 padding: 1px 0 15px 35px;1092 background: url(../images/bullet-pdf.png) no-repeat left 1px;1093 background-size: 20px auto;1094 }1095 .content ul .pdf {1096 padding: 1px 0 15px 35px;1097 background: url(../images/bullet-pdf.png) no-repeat left 1px;1098 background-size: 20px auto;1099 }1100 /*External Website*/1101 .content ul .web {1102 padding: 0 0 16px 35px;1103 background: url(../images/bullet-web.png) no-repeat left -1px;1104 background-size: 20px auto;1105 }1106 /*Ordered Lists*/1107 .content ol {1108 list-style-type: none;1109 counter-reset: standard-counter;1110 padding-top: 4px;1111 }1112 .content ul li ol,1113 .content ol li ol {1114 margin: 17px 0 0 0;1115 }1116 .content ol > li {1117 position: relative;1118 padding: 0 0 17px 45px;1119 background: none;1120 }1121 .content ol > li:before {1122 content: counter(standard-counter);1123 counter-increment: standard-counter;1124 position: absolute;1125 left: 0;1126 top: -6px;1127 font-family: 'Avenir LT Std 85 Heavy', Helvetica, arial, sans-serif;1128 width: 32px;1129 height: 28px;1130 text-align: center;1131 border: none;1132 background: rgba(241, 92, 99, 0.9);1133 padding: 6px 0 0 0;1134 margin: 0;1135 color: #fff;1136 }1137 /*Definition list*/1138 .content dl {1139 margin-bottom: 30px;1140 margin-left: 15px;1141 border-left: 2px solid #eee;1142 }1143 .content dl dt {1144 text-transform: uppercase;1145 font-size: 18px;1146 padding: 0 0 0 21px;1147 margin: 15px 0 0 -6px;1148 background: url(../images/bullet-gray-dot.png) no-repeat left 3px;1149 background-size: 10px 10px;1150 }1151 .content dl dd {1152 font-size: 16px;1153 padding: 3px 0 3px 15px;1154 }1155 .content dl a {1156 color: #777;1157 }1158 1159 /*Tables*/1160 .table-container {1161 padding-bottom: 20px;1162 }1163 table {1164 width: 100%;1165 font-size: 18px;1166 text-align: center;1167 }1168 table tr {1169 border-bottom: 1px solid #f15c63;1170 }1171 table th,1172 table td {1173 padding: 15px;1174 }1175 table th {1176 font-family: 'Avenir LT Std 85 Heavy', Helvetica, arial, sans-serif;1177 text-transform: uppercase;1178 }1179 table td {1180 border-left: 1px solid #f15c63;1181 border-right: 1px solid #f15c63;1182 }1183 .sub-table-row {1184 background: #eee;1185 font-size: 16px;1186 }1187 .content table td ul {1188 margin-bottom: 0;1189 }1190 .content table td li {1191 text-align: left;1192 } 1193 1194 /*Images*/1195 .content img {1196 margin: 15px 0;1197 width: 100%;1198 height: auto;1199 }1200 .content .image-left {