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 xmlns="" xmlns:fb="">3 <head>4 <style>5 @font-face {6 font-family: 'Roboto';7 font-style: italic;8 font-weight: 100;9 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOiCnqEu92Fr1Mu51QrEzAdKg.ttf) format('truetype');10}11@font-face {12 font-family: 'Roboto';13 font-style: italic;14 font-weight: 300;15 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TjASc6CsE.ttf) format('truetype');16}17@font-face {18 font-family: 'Roboto';19 font-style: italic;20 font-weight: 400;21 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');22}23@font-face {24 font-family: 'Roboto';25 font-style: italic;26 font-weight: 500;27 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51S7ACc6CsE.ttf) format('truetype');28}29@font-face {30 font-family: 'Roboto';31 font-style: italic;32 font-weight: 700;33 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsE.ttf) format('truetype');34}35@font-face {36 font-family: 'Roboto';37 font-style: normal;38 font-weight: 100;39 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgVxIIzc.ttf) format('truetype');40}41@font-face {42 font-family: 'Roboto';43 font-style: normal;44 font-weight: 300;45 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype');46}47@font-face {48 font-family: 'Roboto';49 font-style: normal;50 font-weight: 400;51 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');52}53@font-face {54 font-family: 'Roboto';55 font-style: normal;56 font-weight: 500;57 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc9.ttf) format('truetype');58}59@font-face {60 font-family: 'Roboto';61 font-style: normal;62 font-weight: 700;63 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');64}65@font-face {66 font-family: 'Roboto';67 font-style: normal;68 font-weight: 900;69 src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBBc9.ttf) format('truetype');70}71 72 73 74/** **************************************************************************75 76 This is stylesheet for the default template for OnlineSchools.com77 78 FILE: style.css - v1.0 - 2011APR0479 80*** **************************************************************************/81 82/** Remove browser outlines from active or focused elements ******************/83*:active, *:focus {84 outline: none;85}86 87/** Custom CSS logic to truncate text with ellipsis **************************/88.ellipsis {89 white-space: nowrap;90 overflow: hidden;91 -o-text-overflow: ellipsis;92 -moz-binding: url('/assets/xml/ellipsis.xml#ellipsis');93 text-overflow: ellipsis;94}95 96/** HTML *********************************************************************/97html {98 margin:0;99 padding:0;100 height:100%;101}102 103/** BODY *********************************************************************/104body {105 margin:0 auto;106 padding:0;107 width:100%;108 overflow-x:hidden; /* For the nav and footer bleed */109 font:12px arial,sans-serif;110 text-align:left;111 color:#363636;112}113 114/** Adsense ******************************************************************/115.adsense_728 {116 text-align:center;117 margin:auto;118 height:100px;119 clear:both;120 margin-top:10px;121}122 123#left_adsense_160x600 {124 margin-top:10px;125}126 127.adsense_300 {128 text-align:center;129 margin:auto;130 clear:both;131 margin-bottom:20px;132}133/** Anchors ******************************************************************/134a {135 color:#0097D3;136 text-decoration:none;137}138 139a:hover {140 color:#6C9516;141 text-decoration:underline;142}143 144a.green {145 color:#6C9516;146 background:none;147}148 149a.green:hover {150 text-decoration:underline;151}152 153a.white {154 color:#FFF !important;155}156 157a.underline {158 text-decoration:underline;159}160 161#mod_qa_article_body a {162 text-decoration:underline !important;163}164#body_container .pseudo_select_menu a, #body_container .pseudo_select_menu a:hover {165 color:#333;166}167 168#body_container .pseudo_select_menu_gray a, #body_container .pseudo_select_menu_gray a:hover {169 color:#FFF;170}171 172a.colored_buttons_big:hover {173 color:#FFF;174}175 176/** Images *******************************************************************/177.clickable:hover {178 cursor:pointer;179}180img {181 border:none;182 outline:none;183}184 185.text_bottom {186 vertical-align:text-bottom;187}188 189/* global */190.fineprint {191 font-size: 10px;192 color: #000000;193}194.container {195 border: 1px solid #CDCDCD;196 -webkit-border-radius: 5px;197 -moz-border-radius: 5px;198 border-radius: 5px;199}200.section {201 margin:10px 0px;202}203 204/* Legacy crap */205.double_line {206 display:none;207}208 209 210/** Lists ********************************************************************/211ul {212 list-style:none;213 clear:both;214}215 216hr.gray {217 background-color:#CCC;218 height:1px;219 border:0;220}221 222/** Form Elements ************************************************************/223form {224 margin-top:20px;225}226 227textarea {228 color:#333;229 font-family:Arial, sans-serif;230}231 232.light_text {233 color:#BDBDBD;234}235 236label {237 238}239 240input, select, option, .button {241 font-family:Arial, sans-serif;242}243 244input[readonly] {245 background-color:#F0F0F0;246 color:#666;247 font-weight:bold;248 padding-left: 5px;249 padding-right:20px;250 font-size:12px;251 font-weight:bold;252 font-style:italic;253 margin:4px 0;254 background-image:url('/images/templates/default/icons/lock-12px.gif');255 background-position:right center;256 background-repeat:no-repeat;257}258 259input.button {260 margin-top:20px;261}262 263.full_width {264 width:100%;265}266 267.half_width {268 width:50%;269}270 271.form_row {272 clear: both;273 padding: 3px;274}275.form_left_col {276 float: left;277 width: 110px;278}279.form_right_col {280 float: left;281}282 283#contact_form {284 background-color:#ededed;285 padding:15px;286 width:279px;287 overflow:hidden;288 position:relative;289}290 291#contact_form form {292 margin:5px 0px 0px;293 width:100%;294}295 296#contact_form .form_label {297 color:#272767;298 display:block;299 margin-top:7px;300}301 302#contact_form .form_input, #form-body input[type=text], #form-body textarea {303 border: 1px solid #CDCDCD;304 -webkit-border-radius: 5px;305 -moz-border-radius: 5px;306 border-radius: 5px;307 margin-top: 5px;308 width: 98%;309 padding: 2px;310}311 312#contact_form .form_submit {313 background-color: #F78628;314 border: 1px solid #F78628;315 -webkit-border-radius: 5px;316 -moz-border-radius: 5px;317 border-radius: 5px;318 color: #fff;319 float: right;320 margin: 7px 0px 0px;321 padding: 3px 5px;322}323 324/** Article Pages ************************************************************/325.mod_qa_share, .article_share, .mod_blog_share, .static_share {326 float:left;327 margin:0 10px 10px 0328}329/* Placeholder image removed from here mod_bog_)article _image*/330.mod_blog_article_image {331 width: 216px;332 height: 140px;333 padding-right: 0px;334 float: left;335}336#mod_blog_articles .mod_blog_article_content .mod_blog_article_text {337 margin-left: 15px;338 width: 285px;339 float: left;340 margin-bottom: 10px;341}342.mod_blog_article_content .mod_blog_article_text p {343 height: 115px;344 overflow: hidden;345}346.mod_blog_article_social_bookmark {347 clear: both;348 padding-top: 10px;349}350.mod_social_bookmark_left {351 float: left;352 margin-right: 10px;353}354.mod_blog_article_comment_count {355 float: left;356 padding: 2px 0px 0px 25px;357}358 359.mod_blog_article, .mod_qa_article {360 border: 1px solid #EEE;361 -webkit-border-radius: 8px;362 -moz-border-radius: 8px;363 border-radius: 8px;364 clear: both;365 margin: 15px 0px;366 padding: 15px 15px 25px 15px;367 background: #ffffff;368 background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);369 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0));370 background: -webkit-linear-gradient(top, #ffffff 0%,#f0f0f0 100%);371 background: -o-linear-gradient(top, #ffffff 0%,#f0f0f0 100%);372 background: -ms-linear-gradient(top, #ffffff 0%,#f0f0f0 100%);373 background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 100%);374 cursor: pointer;375}376 377.mod_blog_article:hover, .mod_qa_article:hover {378 border:1px solid #CCC;379 background: #fdfdfd;380 background: -moz-linear-gradient(top, #fdfdfd 0%, #f0f0f0 100%);381 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#f0f0f0));382 background: -webkit-linear-gradient(top, #fdfdfd 0%,#f0f0f0 100%);383 background: -o-linear-gradient(top, #fdfdfd 0%,#f0f0f0 100%);384 background: -ms-linear-gradient(top, #fdfdfd 0%,#f0f0f0 100%);385 background: linear-gradient(to bottom, #fdfdfd 0%,#f0f0f0 100%);386}387#article_page .mod_blog_article_author {388 padding: 5px 350px 0px 0px;389 font-style:italic;390 margin: 0 10px 0 15px;391 float:right;392}393#article_page .article_content .mod_blog_article_dateline394{395 float: left;396 margin-right: 10px;397 font-style:italic;398 padding: 5px 10px 0px 0px;399}400.mod_blog_article_print a {401 background: url('/images/templates/default/icons/print.gif') left 2px no-repeat;402 padding-left: 17px;403 margin-right: 20px;404 color: #222;405 text-decoration: none;406}407.mod_blog_article_email a {408 background: url('/images/templates/default/icons/email.gif') left 2px no-repeat;409 padding-left: 17px;410 color: #222;411 text-decoration: none;412}413/* This div displays a list of tags which are linked to pages we don't support on onlineschools.com.414 Example: Tags: grade_4, grade_5.... links to os.com/topic/grade_4 which doesn't exist and we don't415 have any intention of showing at this time */416.mod_blog_article_tags {417 display:none !important;418}419/** Comment *******************************************************************/420#article_page .mod_blog_comment_form {421 border-top:1px solid #AAAAAA;422}423#article_page .mod_comment_listing {424 border-top: 1px solid #AAAAAA;425 clear: both;426 padding: 0 10px;427}428#article_page .mod_comment_item {429 padding: 10px 0;430}431#article_page .mod_comment_item .mod_comment_info {432 font-weight: bold;433}434/** Pagination **************************************************************/435.mod_pagination_wrapper {436 font-size:11px;437 margin-bottom:5px;438 padding:10px;439 margin:10px 0;440 float:right441}442 443.mod_pagination_wrapper a {444 -webkit-border-radius: 4px;445 -moz-border-radius: 4px;446 border-radius: 4px;447 margin: 0 2px;448 padding: 2px 5px;449 border: 1px solid #AAA;450 font-size: 1.2em;451}452 453.mod_pagination_wrapper a:hover {454 text-decoration:none;455 border:1px solid #000;456 background-color:#527111;457 color:#FFF;458 cursor:pointer459}460 461.mod_pagination_wrapper a.current_page {462 background-color: #EEE;463 border: 1px solid #527111;464 -webkit-border-radius: 4px;465 -moz-border-radius: 4px;466 border-radius: 4px;467 color: #666;468}469 470/* Visuals */471div.news_visual_image{472 clear:both;473 width:605px;474 text-align:center;475 border:1px solid #D5D5D5;476}477div.news_visual_image img{478 max-width:605px;479}480 481div.news_visual_embed{482 width:593px;483 padding:5px;484 text-align:left;485 vertical-align:top;486}487div.news_visual_embed h3{488 width:100%;489 text-align:left;490 font-size:14px;491}492div.news_visual_embed textarea{493 width:450px;494 height:65px;495}496div.news_visual_embed input{497 width: 110px;498 text-align: center;499 margin: 0px;500 padding: 3px 5px;501 font-size: 12px;502 vertical-align: top;503 cursor: pointer;504 background: #DDD;505 border: 0;506 -webkit-border-radius: 8px;507 -moz-border-radius: 8px;508 border-radius: 8px;509}510div.news_visual_embed input.hover, div.news_visual_embed input:hover{511 color:#000a8b;512}513div.news_visual_embed div#copy_embed_container{514 position:relative;515 float:right;516 right:10px;517 top:5px;518 width:110px;519 height:20px;520}521 522img.infographic_thumb {523 max-height:200px;524 min-height:200px;525 width:105px;526 margin:10px;527 border:1px solid #CCC;528 box-shadow:0px 2px 8px #BBB;529 -moz-box-shadow:0px 2px 8px #BBB;530 -webkit-box-shadow:0px 2px 8px #BBB;531 padding:2px;532}533img.infographic_thumb:hover {534 border:1px solid #0097D3;535}536 537/** Header *******************************************************************/538#header {539 position:relative;540 height:130px;541 margin:auto;542 543}544 545#header_content {546 position:relative;547 height:90px;548 width:980px;549 margin-left: auto;550 margin-right: auto;551}552 553#header_logo {554 background-image:url('/images/templates/default/sprite_header_footer.jpg');555 height:100px;556 width:475px;557 position:absolute;558 left:0px;559 top:0px;560}561 562#header_search {563 background-image:url('/images/templates/default/sprite_header_footer.jpg');564 background-position:-160px -140px;565 width:310px;566 height:28px;567 position:absolute;568 top:70px;569 right:0px;570 text-align:left;571}572 573#header_search input {574 width:275px;575 position:relative;576 top:3px;577 left:4px;578 border:none;579}580 581#header_search img {582 float:right;583 position:relative;584 top:3px;585 left:-3px;586}587 588#header_like {589 background-image:url('/images/templates/default/sprite_header_footer.jpg');590 background-position:0px -100px;591 position:absolute;592 text-align:right;593 top:70px;594 right:203px;595 width:120px;596}597 598#header_like .fb_like {599 width: 45px;600 height:20px;601 position:relative;602 top:2px;603 z-index:2;604}605 606#header_ask {607 background-image:url('/images/templates/default/sprite_header_footer.jpg');608 background-position:0px -120px;609 position:absolute;610 text-align:right;611 top:68px;612 right:10px;613 width:143px;614}615 616#header_nav_wrapper {617 background: #82b51a; /* Old browsers */618 /* IE9 SVG, needs conditional override of 'filter' to 'none' */619 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgyYjUxYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1MzczMTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);620 background: -moz-linear-gradient(top, #82b51a 0%, #537310 100%); /* FF3.6+ */621 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82b51a), color-stop(100%,#537310)); /* Chrome,Safari4+ */622 background: -webkit-linear-gradient(top, #82b51a 0%,#537310 100%); /* Chrome10+,Safari5.1+ */623 background: -o-linear-gradient(top, #82b51a 0%,#537310 100%); /* Opera 11.10+ */624 background: -ms-linear-gradient(top, #82b51a 0%,#537310 100%); /* IE10+ */625 background: linear-gradient(to bottom, #82b51a 0%,#537310 100%); /* W3C */626 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82b51a', endColorstr='#537310',GradientType=0 ); /* IE6-8 */627 628 height: 39px;629 margin-top: 10px;630 position:relative;631 width: 200%; /* Force the nav to bleed so we don't see the shadow edges */632 left: -50%; /* Readjust the nav back to the center */633 -webkit-box-shadow: 0px 2px 5px #666;634 -moz-box-shadow: 0px 2px 5px #666;635 box-shadow: 0px 2px 5px #666;636}637 638#header_nav {639 height:39px;640 width:980px;641 background-image:url('/images/templates/default/sprite_nav.jpg');642 background-position:0px 0px;643 background-repeat:no-repeat;644 position:relative;645 left:25%;646 list-style:none;647 margin:0;648 padding:0;649}650 651#header_nav li {652 height:39px;653 margin-right:13px;654 float:left;655 cursor:pointer;656}657 658#header_nav li a{659 display:block;660 height:39px;661}662 663#header_nav #home_tab, #header_nav #home_tab a {664 width:102px;665}666 667#header_nav #elementary_tab, #header_nav #elementary_tab a {668 width:182px;669}670 671#header_nav #middle_school_tab, #header_nav #middle_school_tab a {672 width:147px;673}674 675#header_nav #high_school_tab, #header_nav #high_school_tab a {676 width:131px;677}678 679#header_nav #college_tab, #header_nav #college_tab a {680 width:96px;681}682 683#header_nav #grad_tab, #header_nav #grad_tab a {684 width:133px;685 686}687#header_nav #blog_tab, #header_nav #blog_tab a {688 width:110px;689 margin-right:0;690}691 692/** Footer *******************************************************************/693#footer {694 height: 90px;695 margin-top: 10px;696 background: #82b51a;697 background: -moz-linear-gradient(top, #82b51a 0%, #517012 100%);698 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82b51a), color-stop(100%,#517012));699 background: -webkit-linear-gradient(top, #82b51a 0%,#517012 100%);700 background: -o-linear-gradient(top, #82b51a 0%,#517012 100%);701 background: -ms-linear-gradient(top, #82b51a 0%,#517012 100%);702 background: linear-gradient(to bottom, #82b51a 0%,#517012 100%);703 position: relative;704 width: 100%;705 text-align: center;706}707 708#footer_content {709 height:90px;710 width:980px;711 position:relative;712 list-style:none;713 margin:auto;714 padding:0;715 font-weight:bold;716 color:#FFF;717}718 719#footer_content #footer_nav {720 position:absolute;721 top:10px;722 left:0px;723}724 725#footer_nav a, #footer_sub_nav a {726 color:#FFF;727 text-decoration:none;728}729 730#footer_nav a:hover, #footer_sub_nav a:hover {731 text-decoration:underline;732}733 734#footer_sub_nav a {735 font-size:.8em;736}737 738#footer_content #footer_sub_nav {739 position:absolute;740 top:35px;741 left:0px;742}743#footer_sub_nav a.blue {744 color:#242568;745}746 747#footer_content #footer_copyright {748 position:absolute;749 top:60px;750 right:0px;751 font-size:.8em;752 font-weight:normal;753}754 755/** Breadcrumbs **************************************************************/756#breadcrumbs {757 font-weight:bold;758}759 760.breadcrumb_spacer {761 margin:0 5px;762}763 764#breadcrumbs a {765 766}767 768/** Report Card Styles ******************************************************/769.report_card_header {770 background: url(/images/templates/default/report_cards/sprite_main.png) no-repeat scroll -420px -100px transparent;771 float:right;772 height:27px;773 margin-bottom:-1px;774 padding-left:14px;775 text-align:center;776}777 778.report_card_header span {779 color: #242663;780 display: block;781 font: bold 18px/18px helvetica,arial,sans-serif;782 padding: 6px 0px 0px 0px;783 width: 175px;784}785 786.report_card_container {787 background: #f5b219;788 background: -moz-linear-gradient(top, #f5b219 0%, #ef6914 100%);789 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5b219), color-stop(100%,#ef6914));790 background: -webkit-linear-gradient(top, #f5b219 0%,#ef6914 100%);791 background: -o-linear-gradient(top, #f5b219 0%,#ef6914 100%);792 background: -ms-linear-gradient(top, #f5b219 0%,#ef6914 100%);793 background: linear-gradient(to bottom, #f5b219 0%,#ef6914 100%);794 border-color:transparent;795 -webkit-border-radius: 5px 0px 5px 5px;796 -moz-border-radius: 5px 0px 5px 5px;797 border-radius: 5px 0px 5px 5px;798 clear:both;799 padding:5px 5px 10px;800}801 802.report_card_search_left_rail {803 float:left;804}805 806.report_card_filter_menu_wrapper {807 background: #6ed5e4;808 background: -moz-linear-gradient(top, #6ed5e4 0%, #0f90c7 100%);809 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6ed5e4), color-stop(100%,#0f90c7));810 background: -webkit-linear-gradient(top, #6ed5e4 0%,#0f90c7 100%);811 background: -o-linear-gradient(top, #6ed5e4 0%,#0f90c7 100%);812 background: -ms-linear-gradient(top, #6ed5e4 0%,#0f90c7 100%);813 background: linear-gradient(to bottom, #6ed5e4 0%,#0f90c7 100%);814 padding-bottom: 10px;815 padding-left: 0;816 padding-right: 13px;817 padding-top: 0;818 width: 175px;819 height: auto;820 overflow:hidden;821 -webkit-border-radius: 8px;822 -moz-border-radius: 8px;823 border-radius: 8px;824 margin-top: 10px;825 border: 1px solid #0F90C7;826}827 828.incognito {829 background:none;830 border:none;831}832 833.report_card_filter_menu_wrapper .report_card_filter_line_wrapper {834 font-size:0.9em;835}836 837.report_card_filter_menu_wrapper .line_item_label {838 margin-right:8px !important;839}840 841#body_container .report_card_filter_menu_wrapper h3 {842 padding-bottom:15px;843 font-size:1.4em !important;844}845 846#report_card_search_results {847 float:right;848 width:760px;849 position:relative;850 padding-bottom:20px;851 padding-left: 10px;852}853 854#report_card_search_results #top_row {855 margin-bottom:0;856 padding-bottom:0;857}858 859#report_card_search_results h1 {860 font-size:2.1em;861 color:#242568;862 font-weight:normal;863}864 865#report_card_search_results h5 {866 font-size:1.5em;867 color:#242568;868 font-weight:normal;869 margin:0;870 padding:0;871}872 873.report_card_barrier {874 border: 3px solid #F6C350;875 border-width: 3px 1px 0px;876 -webkit-border-radius: 10px 10px 0px 0px / 5px 5px 0px 0px;877 -moz-border-radius: 10px 10px 0px 0px / 5px 5px 0px 0px;878 border-radius: 10px 10px 0px 0px / 5px 5px 0px 0px;879 display: block;880 height: 4px;881 margin: 5px 0px;882}883 884.report_row {885 color:#FFF;886 display:block;887 padding-left:26px;888 height:28px;889 margin:0px 10px;890 line-height:28px;891}892 893.report_row.even {894 background-color: #E89314;895}896 897.report_address {898 height:auto;899 line-height:16px;900}901 902.report_address a{903 color:#000a8b;904}905.report_row strong {906 padding-right:3px;907}908 909.report_row .icon {910 background:url(/images/templates/default/report_cards/sprite_main.png) no-repeat scroll -400px 0px transparent;911 display:block;912 float:left;913 margin-left:-22px;914 overflow:hidden;915}916 917/* Individual rows */918.report_level .icon {919 background-position:-400px -40px;920 width:12px;921 height:16px;922 margin-left:-19px;/* 26 - (26-12)/2 = 19*/923 margin-top:6px; /* (28-16)/2 = 6*/924}925 926.report_location .icon {927 background-position:-400px -20px;928 width:14px;929 height:14px;930 margin-left:-20px;/* 26 - (26-14)/2 = 20*/931 margin-top:7px; /* (28-14)/2 = 7*/932}933 934.report_tuition .icon {935 background-position:-400px -120px;936 width:11px;937 height:17px;938 margin-left:-19px;/* 26 - (26-12)/2 = 19*/939 margin-top:6px; /* (28-16)/2 = 6*/940}941 942.report_schedule .icon {943 background-position:-400px 0px;944 width:16px;945 height:16px;946 margin-left:-21px;/* 26 - (26-16)/2 = 21*/947 margin-top:6px; /* (28-16)/2 = 6*/948}949 950.report_status .icon {951 background-position:-400px -100px;952 width:17px;953 height:19px;954 margin-left:-21px;/* 26 - (26-16)/2 = 21*/955 margin-top:5px; /* (28-18)/2 = 5*/956}957 958.report_grad_rate .icon {959 background-position:-400px -80px;960 width:22px;961 height:15px;962 margin-left:-24px;/* 26 - (26-22)/2 = 24*/963 margin-top:7px; /* (28-14)/2 = 7*/964}965 966.report_address .icon {967 background-position:-400px -60px;968 width:15px;969 height:17px;970 margin-left:-20px;/* 26 - (26-14)/2 = 20*/971 margin-top:-2px;972}973 974.report_keys {975 padding:10px 5px 0px;976 width:100%;977 overflow:hidden;978}979 980.report_key {981 display:block;982 float:left;983 padding-left:10px;984}985 986.report_key .dollar {987 background: url(/images/templates/default/report_cards/sprite_main.png) no-repeat scroll -400px -179px transparent;988 display:block;989 float:left;990 height:14px;991 width:7px;992}993 994.report_card_data_disclaimer {995 font-style: italic;996 font-size: 0.90em;997 color: #666;998}999 1000/** Report card IPEDS disclaimer */1001span.report_card_ipeds_disclaimer{1002 display:block;1003 clear:both;1004 font-size:10px;1005 color:#AAA;1006 text-align:center;1007}1008 1009/** Gray box on the left rail of the edu_level/search pages */1010#why_online_schools_box {1011 background-color: #EFEFEF;1012 -webkit-border-radius: 8px;1013 -moz-border-radius: 8px;1014 border-radius: 8px;1015 padding-right: 7px;1016 padding-left: 8px;1017 padding-top: 2px;1018 padding-bottom: 10px;1019 margin-top: 10px;1020 color: #242568 !important;1021 width: 175px;1022 font-size: 0.9em;1023}1024 1025#why_online_schools_box h3 {1026 font-size:1.5em;1027 font-weight:normal;1028 margin-left:10px;1029}1030 1031#why_online_schools_box ul {1032 margin:0;1033 padding:0;1034 list-style: disc outside none;1035 width:85%;1036 position:relative;1037 left:20px;1038}1039 1040#why_online_schools_box ul li {1041 margin-bottom:10px;1042 margin-left:0;1043}1044 1045/** Google Site Search *******************************************************/1046table.gsc-search-box1047{1048 width: 400px !important;1049}1050 1051#gsc-i-id11052{1053 background-image: none !important;1054}1055 1056.cse .gsc-control-cse, .gsc-control-cse {1057 padding: 0 !important;1058 width: 100%;1059 float:right;1060}1061 1062.cse .gsc-branding, .gsc-branding {1063 display: none;1064}1065 1066.cse .gsc-control-cse div, .gsc-control-cse div {1067 position: normal;1068}1069 1070/* Selector for entire element. */1071.cse .gsc-control-cse, .gsc-control-cse {1072}1073 1074.cse .gsc-control-cse:after, .gsc-control-cse:after {1075 content:".";1076 display:block;1077 height:0;1078 clear:both;1079 visibility:hidden;1080}1081 1082.cse .gsc-resultsHeader, .gsc-resultsHeader {1083 border:none;1084}1085 1086/* Search button */1087.cse #btn_search, #btn_search {1088 cursor:pointer;1089 border:none;1090 padding: 0 0 0 0px;1091 position:relative;1092 z-index:10;1093 bottom:15px;1094}1095 1096/* Inactive tab */1097.cse .gsc-tabHeader.gsc-tabhInactive, .gsc-tabHeader.gsc-tabhInactive {1098 border-bottom: none;1099 color: #666666;1100 background-color: #e9e9e9;1101 border: 1px solid;1102 border-color: #e9e9e9;1103 border-bottom: none;1104}1105 1106/* Active tab */1107.cse .gsc-tabHeader.gsc-tabhActive, .gsc-tabHeader.gsc-tabhActive {1108 background-color: #FFFFFF;1109 border: 1px solid;1110 border-top: 2px solid;1111 border-color: #e9e9e9;1112 border-top-color: #FF9900;1113 border-bottom: none;1114}1115 1116/* This is the tab bar bottom border. */1117.cse .gsc-tabsArea, .gsc-tabsArea {1118 margin-top: 1em;1119 border-bottom: 1px solid #e9e9e9;1120}1121 1122/* Inner wrapper for a result */1123.cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result {1124 padding: .25em;1125 border: 1px solid;1126 border-color: #ffffff;1127 margin-bottom: 1em;1128}1129 1130/* Result hover event styling */1131.cse .gsc-webResult.gsc-result:hover,.gsc-webResult.gsc-result:hover {1132 border: 1px solid;1133 border-color: #FFFFFF;1134}1135 1136/*Promotion Settings*/1137/* The entire promo */1138.cse .gs-promotion.gs-result, .gs-promotion.gs-result {1139 background-color: #FFFFFF;1140 border: 1px solid;1141 border-color: #336699;1142}1143 1144/* Promotion image */1145.cse .gs-promotion.gs-result .gs-promotion-image, .gs-promotion.gs-result .gs-promotion-image {1146}1147 1148/* Promotion title */1149.cse .gs-promotion.gs-result a.gs-title:link,.gs-promotion.gs-result a.gs-title:link {1150 color: #0000CC;1151}1152 1153.cse .gs-promotion.gs-result a.gs-title:visited, .gs-promotion.gs-result a.gs-title:visited {1154 color: #0000CC;1155}1156 1157.cse .gs-promotion.gs-result a.gs-title:hover,.gs-promotion.gs-result a.gs-title:hover {1158 color: #0000CC;1159}1160 1161.cse .gs-promotion.gs-result a.gs-title:active, .gs-promotion.gs-result a.gs-title:active {1162 color: #0000CC;1163}1164 1165/* Promotion snippet */1166.cse .gs-promotion.gs-result .gs-snippet, .gs-promotion.gs-result .gs-snippet {1167 color: #000000;1168}1169 1170/* Promotion url */1171.cse .gs-promotion.gs-result .gs-visibleUrl, .gs-promotion.gs-result .gs-visibleUrl {1172 color: #008000;1173}1174 1175#cse {1176 margin:0px;1177 padding:0px;1178 vertical-align:top;1179 float:right;1180 clear:right;1181 width:400px;1182}1183 1184#cse form {1185 margin-top:6px;1186}1187 1188#q {1189 margin-left:10px;1190}1191 1192/** Tabs *********************************************************************/1193.tab {1194 background: url(/images/templates/default/report_cards/sprite_main.png) no-repeat scroll -420px 0 transparent;1195 float:right;1196 height:37px;1197 margin-left:-4px;1198 padding-left:10px;1199 width:100px;1200 overflow:hidden;