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>3 <head>4 <style>5 @font-face {6 font-family: 'Lato';7 font-style: normal;8 font-weight: 400;9 src: url(http://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');10}11@font-face {12 font-family: 'Lato';13 font-style: normal;14 font-weight: 700;15 src: url(http://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');16}17 18 19 20body, html {21font-size:12px;22/*font-family: Arial, Helvetica, sans-serif;*/23color:#00000024}25* {26margin: 0;27border: 0;28padding: 029}30.p {31padding: 0;32margin: 033}34.after {35clear: both;36display: block;37height: 0;38visibility: hidden39}40.floatLeft {41float:left42}43.floatRight {44float:right45}46a {47outline: none;48text-decoration: none;49cursor: pointer;50color:#00051}52.cur {53cursor: pointer54}55.floater {56float:left;57width:100%;58}59.margin {60margin:0 auto;61width:960px;62}63.floatermessage{64float:left;65width:100%;66padding-top:20px; 67}68.floatermessage p{69margin:0px; 70}71.msgcontact {72 float:left;73 width:960px;74 color:#e9193a; 75 background:url(../../images/sochivi/bg_cars.jpg) repeat-x top left;76 background-color:#f2f2f2;77 box-shadow: 0 0 4px #aa0000;78}79.msgcontact.two{80box-shadow: 0 0 4px #008800; 81}82.success {83 padding:24px 20px 16px 60px;84 background-image: url("../images/status-success.png");85 background-position: 15px 15px;86 background-repeat: no-repeat;87 color: #008800;88 float: left;89 margin-bottom: 15px;90}91.error {92 padding:20px;93 padding-left:60px;94 background-image: url("../images/status-alert.png");95 background-position: 15px 15px;96 background-repeat: no-repeat;97 color: #aa0000;98 float: left;99 margin-bottom: 15px;100}101.ligne_contact{102float:left;103width:100%;104border-bottom:1px solid #e8e8e8;105padding-top:15px;106padding-bottom:15px 107}108.heightemail{109height:15px110}111.main_contactus{112float:left;113width:100%;114padding-right:50px;115border-right:1px solid #e8e8e8 116}117.apply_courses{118color:#266169;119font-size:16px 120}121.select_multiple{122width:223px;123font-weight:normal;124font-size:12px;125height:100px;126}127.marital_status{128width:223px 129}130.first_name_apply{131width:163px 132}133.date_applyonline{134width:98px 135}136.newsletter_bottom_erro{137color:#aa0000 138}139.success_newsletter{140color:#008800 141}142.newsletter_bottom_erro{143float:left;144width:100%;145height:16px 146}147.mapma{148float:left;149width:100%;150padding-bottom:25px 151}152 153.mapma {154 height: 600px;155 margin: 0 auto;156 position: relative;157 width: 960px;158}159#map {160 height: 600px;161 right: 0;162 width: 100%;163}164.head_office{165float:right;166clear:both; 167}168.head_office_box{169float:right;170width:7px;171height:7px; 172margin-right:7px;173background:#f7be31;174margin-top:5px175}176.head_office_box.two{177background:#266169; 178}179.head_office_box.three{180background:#bcbcbc; 181}182.head_office_title{183float:right;184font-size:12px;185color:#6a6a6a;186width:100px187}188.library_color{189color:#266169 !important 190}191.sublibrray{192float:left;193width:90%;194padding-bottom:2px;195background:url(../images/cur_sublibrary.png) no-repeat center left;196padding-left:2%;197margin-left:3%;198}199.sublibrray a{200color:#5a5a5a;201}202.sublibrray.last{203margin-bottom:10px 204}205.site_map{206float:left;207width:100%;208padding-bottom:12px 209}210.site_map.last{211padding-bottom:30px 212}213.site_map_title{214float:left;215width:98%;216font-size:16px;217color:#ffffff;218background:#266169;219padding:8px 0px 8px 2%;220}221.site_map_title a{222color:#ffffff;223}224.site_map_description{225float:left;226width:94%;227padding:18px 4% 18px 2%;228background:#ededed;229font-size:14px;230color:#5a5a5a;231}232.site_map_description a{233color:#5a5a5a;234}235.site_map_description a:hover{236color:#266169;237}238.worldwide_map{239float:left;240width:960px;241height:397px;242padding-top:10px;243padding-bottom:40px;244position:relative;245background:url(../images/worldwide_map.png) no-repeat center center;246}247.branch_abso{248position:absolute;249z-index:20;250top:0px; 251cursor:pointer252}253.info_worldwide{254position:absolute;255z-index:50;256top:0px;257width:270px;258height:225px;259color:#266169;260background:#fff;261padding:10px;262display:none;263border:1px solid #666 264}265.branch_abso.one{266left: 259px;267top: 158px; 268}269.info_worldwide.one{270left: 269px;271top: -88px; 272}273.branch_abso.two{274left: 222px;275top: 195px;276}277.info_worldwide.two{278left: 232px;279top: -51px; 280}281.branch_abso.three{282right: 316px;283top: 151px; 284}285.info_worldwide.three{286right: 23px;287top: -94px; 288}289.branch_abso.four{290right: 326px;291top: 184px; 292}293.info_worldwide.four{294right: 131px;295top: -72px;296}297.branch_abso.five{298right: 371px;299top: 210px;300}301.info_worldwide.five{302right: 31px;303 top: -64px; 304}305.branch_abso.six{306right: 367px;307top: 208px; 308}309.info_worldwide.six{310right: 75px;311top: -37px; 312}313.branch_abso.seven{314right: 420px;315top: 176px;316}317.info_worldwide.seven{318 right: 84px;319 top: -34px; 320}321.branch_abso.eight{322right: 204px;323top: 251px;324display:none; 325}326.info_worldwide.eight{327right: 46px;328top: -34px;329}330.info_worldwide.nine{331right: -85px;332top: 5px; 333}334.branch_abso.nine{335position: absolute;336right: 340px;337top: 209px;338z-index: 20;339}340 341.desccomun{342height:135px;;343text-align:justify 344}345#featured .content article p.desccomun{346margin:6px 0px 0px 0px; 347}348.projects_slide{349float:left;350width:100%;351margin-bottom:5px 352}353 354.projects_title{355float:left;356width:98%;357height:27px;358font-family: 'Lato', sans-serif;359font-weight:700;360font-size: 16px ;361padding-top:8px;362color:#266169;363background:url(../images/bg_proj.jpg) repeat top left;364padding-left:2%;365cursor:pointer 366}367.projects_title_cur{368float:right;369width:20px;370height:13px;371margin-right:12px;372margin-top:2px;373background:url(../images/acc-drop.png) no-repeat 374}375.projects_title_cur.actproj{376background:url(../images/acc-dropped.png) no-repeat 377}378.projects_main{379float:left;380width:100%;381height:200px;382position:relative; 383display:none384}385 386.projects_main ul{387float:left;388padding:0 !important 389}390.projects_main ul li{391float:left;392list-style:none;393width:220px;394height:153px;395padding:6px;396margin-right:13px;397position:relative;398border:1px solid #dadada 399}400.projects_main ul li.last{401margin-right:0px 402}403.project_shape{404position:absolute;405z-index:20;406bottom:20px;407left:16px;408width:200px;409height:21px;410text-align:center;411font-size:14px;412color:#4a4a4a;413font-family: 'Lato', sans-serif;414background:url(../images/shape_proj.png) repeat-x top left 415}416.search_title{417float:left;418width:100%;419font-size:20px;420color:#f7be31;421padding-bottom:5px;422margin-bottom:5px;423border-bottom:1px solid rgb(38, 97, 105) 424}425.search_title_h3{426float:left;427width:100%;428color:#266169;429font-size:16px 430}431.search_desc{432float:left;433width:100%;434text-align:justify;435font-size:12px;436color:#686868;437padding-bottom:10px; 438}439.readmore_search a{440color:#266169 441}442.noresults{443float:left;444width:100%;445text-align:center;446font-size:24px;447color:#f7be31; 448}449.wardsabso{450position:absolute;451z-index:20;452top:90px;453right:0px; 454}455.relative_serv{456float:left;457width:220px;458height:270px;459position:relative;460overflow:hidden; 461}462.absolute_serv{463position:absolute;464z-index:20;465top:0px;466left:0px;467width:220px;468 469}470.image_contact{471float:left;472width:267px;473height:87px;474padding-top:5px;475padding-bottom:5px; 476}477/*///////////////////*/478.padding_b_15{479padding-bottom:15px480}481.no_image{482float:left;483width:100%;484height:80px;485color:#ffffff;486padding-top:63px;487font-size:16px;488background:#266169;489text-align:center490}491.image_conin{492float:left;493width:100%;494height:143px 495}496.ourlcient_box{497float:left;498width:231px;499margin:3px;500height:220px 501}502.ourlcient_box.last{503margin-right:0px 504}505.title_ourclient{506float:left;507width:100%;508color:#266169;509padding-top:5px; 510text-align:center 511}512.title_ourclient a{513color:#266169 514}515.title_ourclient a:hover{516color:#5a5a5a 517}518.projulrel{519float:left;520 521}522 523.histimg{524float:left;525width:179px; 526}527.histimg_img{528margin-bottom:10px; 529}530.histimg_title{531float:left;532width:100%;533color:#5a5a5a 534}535.histimg_desc{536float:right;537width:530px;538text-align:justify 539}540.iconworld{541float:left;542padding-right:8px; 543}544.iconworld.one{545padding-top:2px 546}547.iconworld.two{548padding-top:3px 549}550.iconworld.three{551padding-top:5px 552}553.awards_left{554float:left;555width:445px 556}557.awards_right{558float:right;559width:233px;560padding-top:40px 561}562.title_image_awards{563float:left;564width:100%;565text-align:center;566font-size:11px;567color:#266169;568padding-top:5px;569margin-top:5px;570margin-bottom:13px 571}572.awardimg{573float:left;574width:231px;575height:159px;576text-align:center;577padding-top:11px;578margin-bottom:13px;579border:1px solid #dadada 580}581.awardimg.one{582padding-top:7px;583height:163px 584}585.content_marquee{586float:left;587width:100%;588color:#5a5a5a;589padding-top:15px;590padding-bottom:15px;591background:#f3f3f3;592border-bottom:1px solid #bdc9cb; 593}594.content_marquee a{595color:#5a5a5a; 596}597.padding-top45{598padding-top:45px 599}600.button{601cursor:pointer 602}603 604 605@media (max-width: 973px) {606 607}608@media (max-width: 955px) {609 610}611@media (max-width: 940px) {612 613}614@media (max-width: 910px) {615 616}617@media (max-width: 830px) {618 619}620@media (max-width: 765px) {621 622}623@media (max-width: 735px) {624 625}626@media (max-width: 690px) { 627 628}629@media (max-width: 665px) { 630 631}632@media (max-width: 640px) {633 634}635@media (max-width: 620px) {636 637}638@media (max-width: 560px) {639 640}641@media (max-width: 535px) {642 643}644@media (max-width: 500px) {645 646}647 648@media (max-width: 420px) {649 650}651@media (max-width: 325px) {652 653}654 655 656 657/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 2, 2014 */658 659 660 661@font-face {662 font-family: 'oxygenbold_italic';663 src: url('oxygen-bolditalic-webfont.eot');664 src: url('oxygen-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),665 url('oxygen-bolditalic-webfont.woff2') format('woff2'),666 url('oxygen-bolditalic-webfont.woff') format('woff'),667 url('oxygen-bolditalic-webfont.ttf') format('truetype'),668 url('oxygen-bolditalic-webfont.svg#oxygenbold_italic') format('svg');669 font-weight: normal;670 font-style: normal;671 672}673 674 675 676 677@font-face {678 font-family: 'oxygenbold';679 src: url('oxygen-bold-webfont.eot');680 src: url('oxygen-bold-webfont.eot?#iefix') format('embedded-opentype'),681 url('oxygen-bold-webfont.woff2') format('woff2'),682 url('oxygen-bold-webfont.woff') format('woff'),683 url('oxygen-bold-webfont.ttf') format('truetype'),684 url('oxygen-bold-webfont.svg#oxygenbold') format('svg');685 font-weight: normal;686 font-style: normal;687 688}689 690 691 692 693@font-face {694 font-family: 'oxygenregular';695 src: url('oxygen-webfont.eot');696 src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),697 url('oxygen-webfont.woff2') format('woff2'),698 url('oxygen-webfont.woff') format('woff'),699 url('oxygen-webfont.ttf') format('truetype'),700 url('oxygen-webfont.svg#oxygenregular') format('svg');701 font-weight: normal;702 font-style: normal;703 704}705 706 707 708 709@font-face {710 font-family: 'oxygenitalic';711 src: url('oxygen-italic-webfont.eot');712 src: url('oxygen-italic-webfont.eot?#iefix') format('embedded-opentype'),713 url('oxygen-italic-webfont.woff2') format('woff2'),714 url('oxygen-italic-webfont.woff') format('woff'),715 url('oxygen-italic-webfont.ttf') format('truetype'),716 url('oxygen-italic-webfont.svg#oxygenitalic') format('svg');717 font-weight: normal;718 font-style: normal;719 720}721 722 723/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 3, 2014 */724 725 726 727@font-face {728 font-family: 'muliregular';729 src: url('muli-regular-webfont.eot');730 src: url('muli-regular-webfont.eot?#iefix') format('embedded-opentype'),731 url('muli-regular-webfont.woff2') format('woff2'),732 url('muli-regular-webfont.woff') format('woff'),733 url('muli-regular-webfont.ttf') format('truetype'),734 url('muli-regular-webfont.svg#muliregular') format('svg');735 font-weight: normal;736 font-style: normal;737 738}739 740 741 742 743@font-face {744 font-family: 'mulilight_italic';745 src: url('muli-lightitalic-webfont.eot');746 src: url('muli-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),747 url('muli-lightitalic-webfont.woff2') format('woff2'),748 url('muli-lightitalic-webfont.woff') format('woff'),749 url('muli-lightitalic-webfont.ttf') format('truetype'),750 url('muli-lightitalic-webfont.svg#mulilight_italic') format('svg');751 font-weight: normal;752 font-style: normal;753 754}755 756 757 758 759@font-face {760 font-family: 'mulilight';761 src: url('muli-light-webfont.eot');762 src: url('muli-light-webfont.eot?#iefix') format('embedded-opentype'),763 url('muli-light-webfont.woff2') format('woff2'),764 url('muli-light-webfont.woff') format('woff'),765 url('muli-light-webfont.ttf') format('truetype'),766 url('muli-light-webfont.svg#mulilight') format('svg');767 font-weight: normal;768 font-style: normal;769 770}771 772 773 774 775@font-face {776 font-family: 'muliitalic';777 src: url('muli-italic-webfont.eot');778 src: url('muli-italic-webfont.eot?#iefix') format('embedded-opentype'),779 url('muli-italic-webfont.woff2') format('woff2'),780 url('muli-italic-webfont.woff') format('woff'),781 url('muli-italic-webfont.ttf') format('truetype'),782 url('muli-italic-webfont.svg#muliitalic') format('svg');783 font-weight: normal;784 font-style: normal;785 786}787 788 789/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 4, 2014 */790 791 792 793@font-face {794 font-family: 'latolight';795 src:url('lato-bold-webfont.eot');796 src: url('lato-light-webfont.eot?#iefix') format('embedded-opentype'),797 url('lato-light-webfont.woff2') format('woff2'),798 url('lato-light-webfont.woff') format('woff'),799 url('lato-light-webfont.ttf') format('truetype'),800 url('lato-light-webfont.svg#latolight') format('svg');801 font-weight: normal;802 font-style: normal;803 804}805 806 807 808 809@font-face {810 font-family: 'latothin';811 src: url('lato-thin-webfont.eot');812 src: url('lato-thin-webfont.eot?#iefix') format('embedded-opentype'),813 url('lato-thin-webfont.woff2') format('woff2'),814 url('lato-thin-webfont.woff') format('woff'),815 url('lato-thin-webfont.ttf') format('truetype'),816 url('lato-thin-webfont.svg#latothin') format('svg');817 font-weight: normal;818 font-style: normal;819 820}821 822 823 824 825@font-face {826 font-family: 'latobold';827 src: url('lato-bold-webfont.eot');828 src: url('lato-bold-webfont.eot?#iefix') format('embedded-opentype'),829 url('lato-bold-webfont.woff2') format('woff2'),830 url('lato-bold-webfont.woff') format('woff'),831 url('lato-bold-webfont.ttf') format('truetype'),832 url('lato-bold-webfont.svg#latobold') format('svg');833 font-weight: normal;834 font-style: normal;835 836}837 838 839 840 841@font-face {842 font-family: 'latoregular';843 src: url('lato-regular-webfont.eot');844 src: url('lato-regular-webfont.eot?#iefix') format('embedded-opentype'),845 url('lato-regular-webfont.woff2') format('woff2'),846 url('lato-regular-webfont.woff') format('woff'),847 url('lato-regular-webfont.ttf') format('truetype'),848 url('lato-regular-webfont.svg#latoregular') format('svg');849 font-weight: normal;850 font-style: normal;851 852}853 854 855/*856 * What follows is the result of much research on cross-browser styling.857 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,858 * Kroc Camen, and the H5BP dev community and team.859 */860 861/* ==========================================================================862 Base styles: opinionated defaults863 ========================================================================== */864 865html,866button,867input,868select,869textarea {870 color: #222;871}872 873html {874 font-size: 1em;875 line-height: 1.4;876}877 878/*879 * Remove text-shadow in selection highlight: h5bp.com/i880 * These selection rule sets have to be separate.881 * Customize the background color to match your design.882 */883 884::-moz-selection {885 background: #b3d4fc;886 text-shadow: none;887}888 889::selection {890 background: #b3d4fc;891 text-shadow: none;892}893 894/*895 * A better looking default horizontal rule896 */897 898hr {899 display: block;900 height: 1px;901 border: 0;902 border-top: 1px solid #ccc;903 margin: 1em 0;904 padding: 0;905}906 907/*908 * Remove the gap between images, videos, audio and canvas and the bottom of909 * their containers: h5bp.com/i/440910 */911 912audio,913canvas,914img,915video {916 vertical-align: middle;917}918 919/*920 * Remove default fieldset styles.921 */922 923fieldset {924 border: 0;925 margin: 0;926 padding: 0;927}928 929/*930 * Allow only vertical resizing of textareas.931 */932 933textarea {934 resize: vertical;935}936 937/* ==========================================================================938 Browse Happy prompt939 ========================================================================== */940 941.browsehappy {942 margin: 0.2em 0;943 background: #ccc;944 color: #000;945 padding: 0.2em 0;946}947 948/* ==========================================================================949 Author's custom styles950 ========================================================================== */951 952body { font-family: 'oxygenregular'; }953section { width: 100%; position: relative; float: left; }954section .content { width: 960px; position: relative; margin: 0 auto; }955a { text-decoration: none; }956a:hover { opacity: 0.8; }957 958#head { }959#head .content .left { width: 590px; float: left; height: 113px; }960 #main-logo { display: block; background: url(../images/main-logo.jpg); width: 290px; height: 63px; margin-top: 33px; }961#head .content .right { width: 300px; float: right; }962#head .content .right ul { padding: 0; margin: 0; list-style: none; margin-top: 17px; float: right; }963#head .content .right ul li { float: left; background: url(../images/link-bar.png) left center no-repeat; padding: 0 10px; }964#head .content .right ul li a { color: #686868; font: 13px "oxygenregular"; }965#head .content .right ul li:nth-child(1) { background: 0; }966#head .content .right ul li:last-child { padding-right: 0; }967#head .content .right .search { text-align: right; float: right; margin-top: 10px; }968#head .content .right .search .searchtxt { 969 float: left; 970 height: 28px; 971 width: 200px; 972 border: 1px solid #cccccc; 973 border-top-left-radius: 20px;974 border-bottom-left-radius: 20px;975 box-sizing: border-box;976 outline: 0;977 padding: 4px 15px;978 font-size: 11px;979 color: #686868;980}981#head .content .right .search .searchbt { 982 height: 28px; 983 width: 35px; 984 background: url(../images/search-icon.png) 8px center no-repeat #266169; 985 border-top-right-radius: 20px;986 border-bottom-right-radius: 20px;987 border: 0; 988 outline: 0;989 cursor:pointer;990}991#menu { background: url(../images/menu-bg.png); margin-top: -17px; }992#menu .content { height: 46px; }993#menu .content ul { padding: 0; margin: 0; list-style: none; }994#menu .content ul li{ float: left; margin: 0 8px;font-size:15px }995#menu .content ul li:nth-child(1){ margin-left: 0; }996#menu .content ul li a{ color: #fff; text-transform: uppercase; padding: 15px 30px; display: block; }997#menu .content ul li a.active { background-color: #266169; }998#menu .content ul li:active a { background-color: #266169; }999#menu .content ul li a.has-child { background: url(../images/menu-arrow.png) 92% center no-repeat; }1000#menu .content ul li a.has-child.active { background: url(../images/menu-arrow.png) 92% center no-repeat;1001background-color:#266169 }1002#menu .content ul li:hover > .sub-menu { display: block; z-index: 20; }1003#menu .content ul li a:hover { background-color: #266169; opacity: 1; }1004#menu .content ul li .sub-menu { background-color: #eeedeb; position: absolute; display: none; padding-top: 10px; box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.3); }1005#menu .content ul li .sub-menu:hover < a{ color: #266169; background-color: transparent !important; }1006#menu .content ul li .sub-menu li { float: none; margin: 0; min-width: 220px; }1007#menu .content ul li .sub-menu li a { 1008 font: 12px 'muliregular'; 1009 color: #5a5a5a; 1010 padding: 5px; 1011 margin: 0 20px 0 20px; 1012 border-bottom: 1px solid #dbdbdb;1013 background-color: transparent !important;1014 padding-left: 10px;1015 background: url(../images/sub-menu-arrow-off.png) left no-repeat;1016 text-transform: capitalize;1017}1018#menu .content ul li .sub-menu li a:hover { color: #266169; background-color: transparent !important; background: url(../images/sub-menu-arrow-on.png) left no-repeat; }1019#menu .content ul li .sub-menu li a.active { color: #266169; background-color: transparent !important; background: url(../images/sub-menu-arrow-on.png) left no-repeat; }1020 1021 1022#menu .content ul li .sub-menu li .preview { 1023 background-color: #eeedeb; 1024 width: 320px; 1025 position: absolute; 1026 left: 100%;1027 top: 0; 1028 padding: 15px 20px 15px 0; 1029 height: 100%;1030 box-sizing: border-box; 1031 display: none;1032 box-shadow: 1px 1px 0px 1px rgba(0,0,0,0.3);1033}1034 1035#menu .content ul li .sub-menu li:hover .preview { display: block; }1036#menu .content ul li .sub-menu li .preview img { border: 3px solid #fff; }1037#menu .content ul li .sub-menu li .preview p { font: 12px 'Arial'; color: #5a5a5a; line-height: 17px; }1038#menu .content ul li .sub-menu li .preview .more { font: 12px 'Arial'; color: #5a5a5a; padding: 0; margin: 0; background: transparent; text-transform: none; color: #266169; border: 0; }1039 1040#slider { background: url(../images/slider-bg.png) #266169; overflow: hidden; }1041#slider .content { height: 360px; padding-bottom: 6px; }1042#slider .content .left { position: absolute; width: 360px; z-index: 2; height: 100%; background: url(../images/slide-cover.png) top right no-repeat; padding-right: 155px; }1043#slider .content .left .captions { height: 150px; width: 300px; }1044#slider .content .left .captions h1 { color: #fff; margin: 0; padding: 0; float: left; background: 0; font-size: 21px;1045width:112% }1046#slider .content .left .captions p { color: #fff; font-size: 12px; margin: 0; padding: 0; float: left; margin-top: 15px; background: 0; }1047#slider .content .left h1 { margin: 28px 0 12px 0; font-size: 16px; background: url(../images/slide-title-bg.png) right no-repeat; padding-right: 45px; height: 31px; width: 233px; }1048#slider .content .left h1 .title { float:left; color: #000; text-transform: uppercase; background-color: #f7be31; padding: 5px 10px; height: 31px; box-sizing: border-box; width: 100%; }1049#slider .content .left p { float:left; color: #fff; font-size: 12px; margin-top: 0; background: url(../images/slide-dot.png) bottom repeat-x; padding-bottom: 20px; }1050#slider .content .right { height: 360px; width: 620px; position: absolute;right: 0;top: 0; z-index: 1}1051#slider .content .right .flexslider { position: absolute;right: 0;top: 0; }1052#slider .content .right .slides { list-style: none; padding: 0; margin: 0; }1053#slider .content .right .slides li { height: 100%; }1054 1055#triangle { 1056border-bottom: 363px solid transparent;1057border-left: 174px solid #266169;1058position: absolute;1059top: 0;1060left: 339px;1061}1062 1063.flexslider { display: none; }1064.flexslider.active { display: block; }1065.flexsection { display: none; }1066.flexsection.active { display: block; }1067.flex-direction-nav { 1068 width: 80px; 1069 list-style: none; 1070 padding: 0; 1071 margin:0; 1072 background: url(../images/slide-nav-bg.png); 1073 width: 81px; 1074 height: 42px;1075 bottom: 24px;1076 right: -104px;1077 position: absolute; 1078}1079#navHolder { position: absolute;height: 50px;left: 301px;top: 310px; }1080 1081.flex-direction-nav li { float: left; }1082.flex-direction-nav .flex-prev {margin: 14px; width: 10px; height: 14px; display: block; float: left; background: url(../images/slide-nav-arrow-back.png); }1083.flex-direction-nav .flex-next {margin: 14px; width: 10px; height: 14px; display: block; float: left; background: url(../images/slide-nav-arrow-front.png); }1084 1085.flex-control-nav {1086 padding: 0;1087 list-style: none; 1088 margin:0; 1089 height: 20px;1090 bottom: 24px;1091 right: -443px;1092 top: 12px;1093 position: absolute; 1094 display: block; 1095}1096.flex-control-nav li { float:left; margin: 0 2px; }1097.flex-control-nav li a { margin-top: 3px; display: block; text-indent: 20px; width: 10px; height: 10px; border-radius: 20px; overflow: hidden; background-color: #fff;display:none }1098.flex-control-nav li a.flex-active{ background-color: #266169; }1099.flex-control-nav li:last-child { display: none; }1100 1101#current-section { float: left; }1102#section-nav { float: left; width: 100%; margin-top: 20px;}1103#section-nav ul { padding: 0; list-style: none; float: left; margin: 0; margin-top: 2px;}1104#section-nav ul li { float: left; margin-top: 3px; display: block;cursor:pointer; text-indent: 20px; width: 10px; height: 10px; border-radius: 20px; overflow: hidden; background-color: #fff; margin: 0 2px; }1105#section-nav ul li.active { background-color: #f7be31; }1106.next-section { float: left; height: 15px; width: 9px; background: url(../images/slide-nav-2.png) right; cursor: pointer; margin: 0 4px !important; display: block; }1107.prev-section { float: left; height: 15px; width: 9px; background: url(../images/slide-nav-2.png) left; cursor: pointer; margin: 0 4px !important; display: block; }1108 1109 1110#news { background-color: #f3f3f3; border: 1px solid #bdc9cb; border-left: 0; border-right: 0; }1111#news .content { height: 43px; box-sizing: border-box; overflow: hidden; margin: 0 auto; padding-top: 17px;}1112#news a:last-child{ border-right: 0; margin-right: 0; padding-right: 0; background : 0;}1113#news a { color: #5a5a5a; font-size: 12px; float: left; background:url(../images/link-bar.png) right center no-repeat; margin-right: 10px; padding-right: 10px; }1114 1115/*#featured { background: url(../images/shade-vertical.png) bottom center no-repeat #fff; }*/1116#featured .content { min-height: 290px; padding: 30px 0 30px 0; box-sizing: border-box; }1117#featured .content .left { width: 660px; padding: 0 40px 0 20px; box-sizing: border-box; float: left; }1118#featured .content .left img { float: left; }1119#featured .content .left article { float: right; width: 460px; }1120 1121#featured .content article h1 { font-size:20px; color: #266169; margin: 0; }1122#featured .content article p { font-size:12px; color: #5a5a5a; line-height: 17px; margin: 12px 0; }1123#featured .content article p.highlight { font-size:14px; color: #818181; margin: 6px 0 0 0; }1124#featured .content article .readmore { float:left; display: block; background: url(../images/readmore-bg.png) right no-repeat; padding-right: 10px; }1125#featured .content article .readmore:hover span{ color: #2e2e2e; }1126#featured .content article .readmore span { float:left; display: block; font:11px 'oxygenbold'; color: #000000; text-transform: uppercase; background:#f7be31; height: 23px; padding: 5px; box-sizing: border-box; }1127 1128#featured .content .right { width: 300px; box-sizing: border-box; float: right; padding-left: 30px; background: url(../images/shade-left.png) left no-repeat; min-height: 249px;}1129#featured .content .right article { float: right; }1130 1131#projects { background: url(../images/projects-bg.png) 100% , url(../images/shade-vertical.png) 100% no-repeat #fff; }1132#projects .content { width: 100%; min-height: 290px; padding: 50px 0 30px 0; box-sizing: border-box; overflow: hidden; }1133#projects .content h1 { font-size: 25px; color: #266169; text-align: center; }1134#projects .content .projects-carousel { height: 215px; margin: 0 auto !important; width: 100% !important; }1135#projects .content .projects-carousel li { margin: 0 14px 0 0; position: relative; overflow: hidden; }1136.liprojects{1137 margin: 0 14px 0 0; position: relative; overflow: hidden;1138}1139.contents { background: url(../images/proj-blur.png); height: 100% !important; width: 100%; position: absolute; top:-100%; height: 213px; }1140.contents h1 { color: #fff; font-size: 22px; font-weight: 300; margin: 55px auto 0 auto; }1141.contents h3 { color: #fff; font-size: 15px; font-weight: 300; text-align: center; margin-top: 10px; }1142.contents .center { display: block; width: 100%; text-align: center; }1143.contents .bt { border: 0; margin: 0 auto; background: url(../images/project-plus.jpg); width: 36px; height: 33px;cursor:pointer; }1144 1145#projects .content .nav { width: 100%; position: relative; margin-top: 30px; height: 40px; }1146#projects .content .nav .content { margin: 0 auto; width: 100px; padding: 0; }1147#projects .content .nav .content button { background: url(../images/car-nav.jpg); width: 37px; height: 33px; border: 0; }1148#projects .content .nav .content .prev { background-position: left; }1149#projects .content .nav .content .next { background-position: right; }1150 1151#footer { background: url('../images/slider-bg.png') #266169; }1152#footer .content { min-height: 100px; padding-top: 20px; }1153#footer .content .top { padding-bottom: 10px; background: url(../images/slide-dot.png) bottom repeat-x; }1154#footer .content .top .left { float: left; width: 700px; margin-top: 5px; }1155#footer .content .top .left ul { padding: 0; margin: 0; list-style: none; }1156#footer .content .top .left ul li { float: left; }1157#footer .content .top .left ul li a { line-height: 12px;color: #fff; font-size: 13px; display: block;border-right: 1px solid #fff;padding-right: 10px;margin-right: 10px; }1158#footer .content .top .left ul li:last-child a { border:0; margin: 0; }1159 1160#footer .content .top .right { float: right; text-align: right; }1161#footer .content .top .right .socials { background: url(../images/socials.png); width: 35px; height: 36px; float: left; margin: 0 2px; }1162#footer .content .top .right .socials:hover { opacity: 0.8; }1163#footer .content .top .right .socials.fb { background-position: left; }1164#footer .content .top .right .socials.tw { background-position: center; }1165#footer .content .top .right .socials.in { background-position: right; }1166 1167#footer .content .bottom { display: block; color: #a7bec1; font-size: 12px; padding-top: 17px; } 1168 1169 1170 1171/************************** PAGES ************************/1172#page { }1173#page .content { min-height: 300px; padding-top: 10px; padding-bottom: 30px; }1174#page .content a:hover { opacity: 1; }1175#page .content ul { padding: 0 0 0 20px; list-style: circle url("../images/bullet-1.png"); }1176#page .content ul li { color: #5a5a5a; font: 12px 'Arial'; line-height: 18px; }1177#page .content ol { padding: 0 0 0 20px; }1178#page .content ol li { color: #5a5a5a; font: 12px 'Arial'; line-height: 18px; }1179#page .dotted { background: url(../images/slide-dot.png) bottom repeat-x !important; }1180 1181 1182#page .content h1 { float:left;width:100%;font-size: 20px; color: #266169; text-transform: uppercase; margin-bottom: 12px; margin-top: 0;font-weight:normal; }1183#page .content h1 .projt{1184text-transform:none;1185float:left;1186width:597px;1187 1188}1189#page .content h1 a{1190color: #266169; 1191}1192#page .content h3 { font-size: 12px; color: #266169; }1193#page .content .serv-banner { background: url(../images/page-banner-bg.png); width: 100%; height: 320px; position: relative; float: left; padding: 6px; box-sizing: border-box; }1194#page .content .serv-banner h1 { position: absolute; bottom: 15px; background: url(../images/serv-banner-title-bg.png) no-repeat; width: 475px; text-align: left; padding: 4px 15px; font-size: 20px; color: #fff; }1195#page .content p { font: 12px 'Arial'; color: #5a5a5a; line-height: 17px; }1196#page .content .serv-banner { overflow: hidden; }1197#page .content .serv-banner .left { width: 720px; float: left; }1198#page .content .serv-banner .right { width: 220px; float: right; position: relative; }1199#page .content .serv-banner .right .services-carousel { margin-top: 15px; overflow: hidden; }1200#page .content .serv-banner .right button { position: absolute; width: 100%; height: 12px; z-index: 1; border: 0; }