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 lang="en">3 <head>4 <style>5 6/* Tripod.com Colors & Components - If you want to use a color that's not in this list... don't. Seriously. 7 Making up new colors is why we can't have nice things.8 9 -- Colors --10 11 Logo Blue 4ca7d912 Logo Green 9ac54613 Footer Blue 1 #3c5561 lighter14 Footer Blue 2 rgb(45, 70, 82) darker, used for the top bar as well15 Page Background f2efe9 cream color16 Emph Blocks f5f4f0 lighter cream color, for emph blocks and header image areas, etc.17 Type 463434 very dark, almost black, red-brown18 Knockout Type f5f4f0 - fff cream or white19 Blue Border rgb(41, 134, 179)20 Green Border ...21 22 23 -- Styles --24 25 Borders 1px solid #d5d3ce very light gray-brown 1px borders.26 Lighter Border 1px solid #E7E6E3 For between list items, etc.27 Shadows 2px 2px 0 rgba(0, 0, 0, 0.11) basic 2px 45 degree shadow. No blur.28 inset 1px 1px 0 [color]; 1px inset 'shadow' in light color, for buttons.29 30 -- Fonts --31 32 Base / Overall Source Sans Pro For Headers and Body copy33 Fine Print Verdana For use on things like legal BS and tiny captions where the text will be less than 34 10-11px as Source Sans does not perform well at tiny sizes35 36*/37 38.authorsNote{margin:0 auto; padding:3.5%;}39 40/* HTML TAG RESETS */41html, body, form, fieldset, input, textarea, button, 42h1, h2, h3, h4, img, a img, p, label, table, tbody, 43thead, tfoot, tr, td{border:0; font-family:'Source Sans Pro', 'Gill Sans', Calibri, 'Franklin Gothic', sans-serif; font-size:100%; line-height:normal; margin:0; outline:0; padding:0} 44:focus, input[type="submit"]::-moz-focus-inner{outline:none}45header, article, aside, footer, nav, section{display:block}46nav ul, .flexslider ul{margin:0; padding:0; list-style:none}47 48/* *{-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box} turned this off because IE. FML. */49 50body{background:#f2efe9; color:#463434}51html, body{height:100%;}52 53/* Links */54a, .link{color:#388DAF}55a:hover, .link:hover{color:#5E838E; text-decoration:none}56 57.baseFooter a{color:rgb(250, 248, 245);}58.baseFooter a:hover{color:#fff; text-decoration:none}59 60/* Header Styles */61 h1, h2, h3, h4, .ultra, .mega, .alpha, .beta, .gamma, .delta{font-family:'Source Sans Pro', 'Gill Sans', Calibri, 'Franklin Gothic', sans-serif; letter-spacing:-.04em; line-height:1em; margin-bottom:3.5%}62 /* Header Helper Classes. The H tag itself should be utilized to create a proper document outline, while the classes below are what dictate it's appearance. */63 .ultra{font-size:4.8em; font-weight:700; line-height:.8em; text-transform:uppercase}64 .mega{font-size:3.6em; font-weight:300; text-transform:uppercase}65 h1, .alpha{font-size:2.4em; font-weight:300; text-transform:uppercase}66 h2, .beta{font-size:2.1em; font-weight:200; letter-spacing:-.03em; text-transform:capitalize}67 h3, .gamma{font-size:1.45em; font-weight:700; letter-spacing:-.01em; line-height:1.2em; text-transform:capitalize}68 h4, .delta{font-size:1.15em; font-weight:700; letter-spacing:-.01em; line-height:1.2em; text-transform:none}69 70/* text Styles */71 p, li, .base{font-size:1em; font-weight:normal; letter-spacing:0; line-height:1.3em; margin-bottom:15px; text-transform:none}72 73 .tiny, .mini{letter-spacing:0; line-height:1.1em; text-transform:none}74 .tiny{font-size:.85em}75 .mini{font-size:.7em}76 77 78hr{border:0; border-top:1px solid #d5d3ce; display:block; height:1px; margin:1em 0; padding:0}79 80::-moz-selection{background:#463434; color:#eee; text-shadow:none}81::selection{background:#463434; color:#eee; text-shadow:none}82 83/* Sitewide Classes */84 .clearfix:after, .navigation:after, .row:after{clear:both; content:"."; display:block; height:0; visibility:hidden}85 .clearfix{*zoom:1 /* triggers hasLayout */}86 .clr{clear:both; height:0; overflow:hidden}87 .float_left{float:left} /* I hate this class */88 .float_right{float:right} /* and this one */89 .hide, .ie6clr, .mobileShow{display:none} /* i don't even know what scott was doing */90 91/* Buttons */92 93/* Default Button Styling */94 .btn, .btnSm, .button, .sbutton{ 95 -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;96 cursor: pointer;97 color:#463434;98 display: inline-block;99 border:1px solid #d5d3ce;100 font-size: 1em;101 font-weight:400;102 line-height: normal;103 padding:5px 8px;104 text-decoration: none;105 -webkit-appearance: none;106 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.11), inset 1px 1px 0 rgba(255, 255, 255, 0.38);}107 a.btn:hover, a.btn:active, a.btn, a.btn:visited, a.btn:focus, a.button:hover, a.button:active, a.button, a.button:visited, a.button:focus{color: #463434;}108 109 .blue, .secondary{ /* Basic Buttons */110 background: #51aeda;111 border: 1px solid rgb(41, 134, 179); }112 .btn.blue:hover, .btn.secondary:hover{background: rgb(65, 157, 201); }113 .btn.blue:active, .btn.secondary:active{background: rgb(65, 157, 201); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.24); }114 115 .green{ /* Call to Action / Signup Button */116 background: #9ac546;117 border: 1px solid #8b976c;}118 .btn.green:hover{background: rgb(138, 180, 57); }119 .btn.green:active{background: rgb(138, 180, 57); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.24); }120 121 .red{122 background: #AC4825; 123 border: 1px solid #853113;124 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.11), inset 1px 1px #D6653D;125 color:#f5f4f0!important;}126 .red:hover{background: #AC4825; border: 1px solid #853113;127 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.11), inset 1px 1px #D6653D;}128 129 .cancel, .grey{background:#EFECE5; border:1px solid #C7BFA1; color:#3F3B31; text-decoration:none}130 .cancel:hover, .cancel:focus, .grey:hover, .grey:focus, .cancel.selected, .grey.selected{background:#F1EDDE; color:#3F3B31; text-decoration:none}131 132 133 .bigButton, .btnLg{ font-size:1.5em; }134 .btnSm{font-size:.9em;}135 136/* border-radius:2px Page Button */137 .freeSignupBtn.bigButton{color:#f5f4f0;}138 .tHeadBtn{text-decoration:none;}139 140/* Style Helper Classes */141 .rounded{-moz-background-clip:padding; -webkit-background-clip:padding-box; background-clip:padding-box; border-radius:2px} /* 2px round corners */142 .boxShadow{-moz-box-shadow:1px 1px 2px #444; -webkit-box-shadow:1px 1px 2px #444; box-shadow:1px 1px 2px #444} /* standard box shadow */143 .transition, a, input.button{-moz-transition:all 0.35s; -webkit-transition:all 0.35s; -o-transition:all 0.35s; transition:all 0.35s} /* transition ALL THE THINGS */144 145/* Apparently this is the 'nav' for the two links under the Tripod Website of the Month... ? */ 146.nav{overflow:hidden; margin:0 ;padding:10px 0}147 .nav li{border-right:1px solid; float:left; list-style:none; padding:0 10px}148 .nav a{text-decoration:none;}149 .nav li:last-child{border-right:0}150 151 152.relative{position:relative}153.overflow{overflow:hidden}154.txt_center{text-align:center}155.txt_left{text-align:left}156.txt_right{text-align:right}157.input{background:#f9f9ef; border:1px solid #C8C7B4; font-size:14px; padding:5px 10px}158.input:focus{background:#fff; border-color:#10A0AE}159.bold{font-weight:bold}160.multi4{-moz-column-count:4; -webkit-column-count:4; column-count:4; -moz-column-gap:15px; -webkit-column-gap:15px; column-gap:15px}161 .multi4 li{margin-bottom:20px}162.multi{-moz-column-count:2; -webkit-column-count:2; column-count:2; -moz-column-gap:20px; -webkit-column-gap:20px; column-gap:20px}163 .multi li{margin-bottom:10px}164 .multi li .input{width:80%}165 166/* Responsive Grid for Tripod.com 167 168 3.5% Gutters Horizontal Gutters.169 3.5% or 7% or 14% Vertical Gutters.170 Usage: .cols-X class goes on the parent DIV and .colX and .col go on each column. The parent div should also have the ROW class attached to it.171 172 Columns Layouts:173 174 column (gutter) column etc.. in percentages175 176 cols-2a 42.5 (3.5) 54 Two-Column Layout where the Right Column is slightly wider.177 cols-2b 54 (3.5) 42.5 Two-Column Layout where the Left Column is slightly wider.178 cols-2c 75 (3.5) 21.5 Two-Column with narrow right sidebar for section navigation. - Meant for the Interior Page Nav179 cols-2d 31.5 (3.5) 65 Two-Column with narrow left sidebar for highlighting content. - meant for the Features Page180 cols-2e 65 (3.5) 31.5181 cols-3 31 (3.5) 31 (3.5) 31 Three-Column equal width Layout.182 cols-3b 31 (3.5) 31 (3.5) 31 Three-Column unequal width Layout. Specific to the Home Page Footer183 cols-4 22.375 (3.5) 22.375 (3.5) 22.375 (3.5) 22.375q Four-Column equal width layout. 184 185 -- Usage --186 187 <div class="row cols-2">188 <div class="col col1"></div>189 <div class="col col1"></div>190 </div>191 192*/193 194.row{overflow:hidden; clear:both; margin:3.5% 0 0 0;}195.col{}196 197.cols-2 .col1{width:42.5%; float:left; margin-right:3.5%;}198.cols-2 .col2{width:54%; float:right;}199 200.cols-2b .col1{width:54%; float:left; margin-right:3.5%;}201.cols-2b .col2{width:42.5%; float:right;}202 203.cols-2c .col1{width:75%; float:left; margin-right:3.5%;}204.cols-2c .col2{width:21.5%; float:right;}205 206.cols-2d .col1{width:31.5%; float:left; margin-right:3.5%;}207.cols-2d .col2{width:65%; float:right;}208 209.cols-2e .col1{width:65%; float:left; margin-right:3.5%;}210.cols-2e .col2{width:31.5%; float:right;}211 212.cols-3 .col1{width:31%; float:left; margin-right:3.5%;}213.cols-3 .col2{width:31%; float:left; margin-right:3.5%;}214.cols-3 .col3{width:31%; float:left;}215 216.cols-3b .col1{width:10%; float:left; margin-right:3.5%;}217.cols-3b .col2{width:49%; float:left; margin-right:3.5%;}218.cols-3b .col3{width:32%; float:left;}219 220.cols-4 .col1{width:22.375%; float:left; margin-right:3.5%;}221.cols-4 .col2{width:22.375%; float:left; margin-right:3.5%;}222.cols-4 .col3{width:22.375%; float:left; margin-right:3.5%;}223.cols-4 .col4{width:22.375%; float:left;}224 225 /* Value Props226 : Three Block Vertical List of features used in various locations on the site. 227 Should be placed inside of a 54% or 42.5% column. Will not fit well in 228 anything more narrow */229 230 .valueProps{}231 .valueProps h1{font-size:1.8em; margin-bottom:7%;}232 .value{margin-bottom:7%;}233 .value h2{font-size:1.1em; margin-bottom:1%;}234 .value h2, .value p{padding-left:60px;}235 .value .lpSprite{float:left;}236 237 238/* Sticky Footer */239 240.pageWrap{ min-height:100%; margin-bottom:-60px; } /* equal to footer height */241.pageWrap:after{content:""; display:block;}242.baseFooter, .page-wrap:after{height:60px;}243 244/* Misc Classes */ 245 246.decNone{text-decoration:none;}247.noborder{border:0}248.padding{padding:0 15px 30px}249.pad{padding:15px}250.block{display:block}251.list{list-style:none; margin:0; padding:0}252.list li{margin-bottom:5px}253.list li:last-child{margin:0}254 .bullet.list{list-style:disc; padding-left:15px}255 ol.list{list-style:decimal; margin-left:6px; padding-left:15px}256 .bullet.list li:last-child, ol.list li:last-child{margin-bottom:10px}257.note{color:#5E838E; font-size:11px}258.red{color:#f00}259.imageBdr{border:2px solid #C8C7B4; margin:0 0 0 15px}260.imageBdr.float_left{margin:0 15px 15px 0}261.emphBlock{background:rgb(250, 248, 245); border:1px solid #d5d3ce;} /* no padding */262.emphBlock2{background:rgb(250, 248, 245); border:1px solid #d5d3ce; overflow:hidden; padding:1em;} /* padding */263.maxWidth{max-width:100%}264 265 266/* Site Header */267 .baseHeader{ 268 overflow:hidden; position:relative; margin-top:0;}269 .hp .baseHeader{padding:0}270 .logoContainer{padding:40px 0 1em;}271 .intH, #interior .logoContainer{272 background:#f5f4f0; 273 overflow:hidden; 274 padding:40px 0 1em;275 border-bottom:1px solid #d5d3ce;276 border-top: 1px solid #d5d3ce;277 margin-bottom:0;}278 #interior .baseHeader .logo {279 float: left;280 font-size: 6px;281 margin: 0;282 max-height: 40px;283 }284 #interior .baseHeader nav {285 float: right;286 overflow: hidden;287 width: 58%;288 height: 40px;289 padding:0;290 }291 .logoContainer{overflow:hidden;}292 .hp .baseHeader .intH{background-position:left bottom; padding:0; margin:14px 0 0 0; clear:both;}293 .baseHeader .logo{float:left; font-size:6px; margin:0; max-width:220px; width:40%}294 .hp .baseHeader .logo{max-width:300px; padding-top:10px}295 .baseHeader .logo span{left:-99999px; position:absolute; top:-99999px; visibility:hidden}296 .baseHeader .logo a{display:block; text-decoration:none}297 .baseHeader .logo a img{display:block; max-width:100%}298 .baseHeader nav{float:right; overflow:hidden; padding-top:10px; text-shadow:0 -1px 1px rgba(255,255,255,.4); width:58%}299 .hp .baseHeader nav{position:relative; top:10px}300 .hpImage{z-index:1;}301 .baseHeader nav ul{float:right}302 .baseHeader nav li{float:left; margin:0}303 .baseHeader nav a{304 color: #312f21;305 display: block;306 font-size: 16px;307 padding: 0 0 .3em;308 margin: .5em 1em;309 border-bottom: 1px solid #d5d3ce;310 text-align: center;311 text-decoration: none;}312 .baseHeader nav a:hover{313 text-decoration: none;314 color: #388DAF;315 border-bottom: 2px solid #388DAF;}316 .featuresPage .featuresLink, .pricingPage .pricingLink, .cpanel .cpLink{text-decoration:none}317 .baseHeader nav li:first-child a{border-left:0; padding-left:0}318 .baseHeader nav li:last-child a{border-right:0; padding-right:0}319 .baseHeader .media, .baseHeader .media img{overflow:visible}320.baseHeader .mImg{width:44.333%}321.baseHeader .mImg img{max-width:none; position:relative}322.baseHeader .mTxt{padding-top:4.5%; width:47.3%}323 324/* Login DropBox */325 326 .loginInside{327 background: rgb(245, 244, 240);328 border: 1px solid #d5d3ce;329 color: #463434;330 padding: 1em;331 position: absolute;332 right: .5em;333 top: 0;334 z-index: 9999;335 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.11), inset 1px 1px 0 rgba(255, 255, 255, 0.38);336 }337 .loginBOX fieldset{margin-bottom:5px}338 #lbSubmit{font-size:16px; padding:5px 10px}339 .logclose-btn{340 background: #AC4825;341 color: #463434;342 border: 0;343 -moz-border-radius: 20px;344 -webkit-border-radius: 20px;345 border-radius: 0;346 height: 25px;347 display: block;348 position: absolute;349 top: -1px;350 left: -25px;351 line-height: 25px;352 width: 25px;353 color: #f5f4f0;354 font-size: 1em;355 font-weight: 400;356 text-align:center;357 text-decoration: none;358 }359 .logclose-btn:hover{360 color: #f5f4f0;361 width: 27px;362 height: 27px; 363 }364 .lgnGroup{min-width:29em; overflow: hidden; margin-bottom: 1em;}365 .lgnGroup label{366 width: 25%;367 display: block;368 float: left;369 line-height: 1em;370 padding: .5em 0;371 border: 1px solid transparent;372 font-size: 1em;}373 .lgnGroup input{374 width: 68%;375 float: right;376 padding: .5em 2%;377 line-height: 1em;}378 .loginHR{margin:10px 0 8px}379 .loginHelp{float:left; list-style:none; margin:0; overflow:hidden; padding:0}380 .loginHelp li{border-right:1px solid #C8C7B4; float:left; margin:0 10px 0 0; padding-right:10px}381 .loginHelp li:last-child{border:0; margin:0; padding:0}382 .loginHelp a{line-height: 1.7em; padding: .3em 0; display: block;}383 .loginButton{384 position: absolute;385 bottom: 1em;386 right: 1em;387 font-size: 1.1em;388 line-height: 1.1em;389 padding: .3em .7em;}390 391/* Top Bar */392#topBar{background-color: #ddeff9; font-size:14px; height:45px; width:100%; z-index:999;margin-bottom: -10px;}393.topBarInfo{float:right;height: 70%;}394.hp #topBar {background-color: #fff;}395#topBar .member{396 display:block; line-height:1; padding:.6em 1em; margin-right:.5em;397 box-shadow: 0 2px 0 rgba(0, 0, 0, 0.11);398 background: #9ac546;399 color: rgb(250, 248, 245); 400 }401#topBar .member:hover{padding:1em 1.4em;}402#topBar .or{color:rgba(64, 78, 57, 0.59);}403#topBar .member a{color:#463434; text-decoration:none}404#topBar .member a:hover{color:#463434; text-decoration:none}405 406/* free sign up modal */407#freeBox{background:url(../images/black-80.png); background:rgba(0,0,0,.75); display:none; height:100%; left:0; position:fixed; top:0; width:100%; z-index:892}408 .freeBoxInner{margin:10% auto 0; max-width:600px; width:100%}409 #freeBoxFrame{background:#E6E4D8; border:1px solid #000; border-radius:5px; height:470px; overflow:auto; width:100%}410 #freeBoxFrame.iframeView2 {background:transparent; border:0;}411.free-close{float:right; margin-bottom:15px}412 413#page{overflow:hidden; position:relative}414.container{margin:0 auto; max-width:1100px; padding:0 15px; position:relative}415#divider{}416.hp #divider{margin-bottom:25px}417 418#content{overflow:hidden; padding: 0 1em 7% 1em;}419 420/* Footer Area Styling */421 .outro{border-top:1px solid #BCB49A; -moz-box-shadow:inset 0 0 22px rgba(0,0,0,.15); -webkit-box-shadow:inset 0 0 22px rgba(0,0,0,.15); box-shadow:inset 0 0 22px rgba(0,0,0,.15); padding:15px}422 .pricingPage .outro{display:none} /* Outro. No Screw the outro. It's useless. There are way too many Calls to Action on these pages */423 424 .baseFooter{background:#3c5561; color:rgb(250, 248, 245); padding:0; font-family:Verdana; font-size:11px;}425 .hp .baseFooter{height:auto;}426 .baseFooter a{text-decoration:none;}427 #.hp .footerList li{display:list-item;}428 .footerList{margin:0 auto; padding:5px 0 0; font-size: 200%;}429 .footerList.vertical{text-align:right;}430 .footerList.vertical li{display:list-item; list-style:none;}431 .footerList li{display:inline-block; *display:inline; margin:0 15px 5px 0; *zoom:1}432 .baseFooter .row{margin-bottom:3.5%;}433 .cols-3 .footerList li{display:block; padding: 0 0 1em 0;}434 .cols-3 .footerList a, a.featSiteLink{border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0 0 2px 0; text-decoration:none;}435 .baseFooter .col1, .baseFooter .col2{border-right:1px solid rgba(255, 255, 255, 0.12);}436 .baseFooter .col{margin-bottom: -1000px; padding-bottom: 1000px; }437 .blog{font-size:1.2em; padding:0 7% 0 0;}438 .blog .gamma{display:inline; font-weight: 600;}439 .blog h4.gamma{font-weight:300; margin-left:.6em;}440 .blog .blogContent{margin:1em 0;}441 442 .bookEnd{background:rgb(45, 70, 82); font-size:10px; overflow:hidden; position:relative; width:100%;}443 .bookEnd li{float:left; line-height:18px; list-style:none; margin:0 0 0 15px; padding-top:2px}444 .bookEnd li:first-child{margin:0}445 446 .bookEnd .social-list{float:right; padding:3px 0} 447 .social-list a{background:url(../images/socialSprite.png); display:inline-block; *display:inline; border-bottom:0; font-size:1px; height:21px; line-height:60px; opacity:.8; overflow:hidden; width:22px; *zoom:1}448 .social-list a:hover{opacity:1}449 .social-list .fbTP{background-position:-29px 0}450 .social-list .twTP{background-position:-57px 0}451 452 .callUs{float:right; padding-top:2px}453 a.featSiteLink{font-size:.75em; font-weight:200; float:right; display:inline-block; margin-left:1em;}454 455/* Media element styling */ 456.media, .media img{display:block; max-width:100%; overflow:hidden}457 .mImg, .mVid{float:left; width:32.333%}458 .mVid{border:2px solid #BCB49A}459 .mVid iframe{border:none; display:block; height:250px; width:100%}460 .mTxt{float:right; width:66.2%; position: absolute;461top: 0;462z-index: 100;}463 464.rev .mImg, .rev .mVid{float:right}465.rev .mTxt{float:left}466 467.mVideo .mVid{width:45%}468.mVideo .mTxt{width:51%}469 470/* Icons */471 472.icon{min-height:48px; padding:10px 15px 10px 56px; position:relative; width:175px}473.icon span{background:url(../images/tpIcons.png) no-repeat; height:50px; left:0; position:absolute; top:10px; width:50px}474 .icon.build span{background-position:-181px 4px}475 .icon.grow span{background-position:-241px 2px}476 .icon.addon span{background-position:-120px 4px}477 .icon.look span{background-position:0 4px}478 .icon.url span{background-position:-61px 4px}479 .icon.knowledge span{background-position:-296px 2px}480 .icon.phone span{background-position:-302px -55px}481 .icon.community span{background-position:-247px -55px}482 .icon.webDev span{background-position:-177px 3px}483 .icon.triHelp span{background-position:-61px 3px}484 .icon.zee span{background-position:-359px 2px}485.dBlock{color:#463434; display:block; text-decoration:none}486.dBlock:hover{background:#e7e5db; color:#463434}487.icon.hpBlock{display:block; margin:10px auto; padding:0; width:48px}488span.icon{background:url(../images/tpIcons.png) no-repeat}489 .icon.addons{background-position:-179px 0}490 .icon.smBus{background-position:-241px 0}491 .icon.mobileReady{background-position:-302px -57px}492 493/* flex slider 494 - used on home page and control panel sidebar495*/496.flexslider{min-height:50px}497 .flexslider .slides > li{display:none; -webkit-backface-visibility:hidden}498 .flexslider .slides img{display:block; max-width:100%}499 500.bz-slide{501 background: #fff;502 }503 504.bz-slide img{505 margin: 10px auto;506 }507.bz-slide p{508 padding:10px;509 font-size: .9em;510 }511.bz-slide a{512 margin:0 10px 10px 0;513 float: right;514 }515 516/* Clearfix for the .slides element */517 .slides:after{content:"."; clear:both; display:block; height:0; line-height:0; visibility:hidden}518 html[xmlns] .slides{display:block}519 * html .slides{height:1%}520 521 .viewMoreWS{padding-top:10px}522 523/* No JavaScript Fallback */524 .no-js .slides > li:first-child{display:block}525 .flexslider, .flex-container{position:relative; zoom:1}526 .flexslider .slides{zoom:1}527 .flexslider .slides > li{margin:0; position:relative}528 529/* Slider Controls */530 .flex-direction-nav{display:none}531 /* home page specific styling */532 .hp .flex-control-nav{bottom:-39px; position:absolute; right:1px}533 .flex-control-nav li{display:inline-block; *display:inline; margin:0 0 0 5px; zoom:1}534 .flex-control-nav li:first-child{margin:0}535 .flex-control-nav li a{536 background:rgba(81, 174, 218, 0.29); 537 border:1px solid rgba(41, 134, 179, 0.33); 538 -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px; 539 cursor:pointer; 540 display:block; 541 height:13px; 542 text-indent:-999em; 543 width:13px;544 box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.11), inset 1px 1px 0 rgba(255, 255, 255, 0.38);}545 .flex-control-nav li a:hover{background:#9ac546; border: 1px solid #8b976c;}546 .flex-control-nav li a.active{547 background: #51AEDA;548 cursor: pointer;549 border: 1px solid rgb(41, 134, 179);550 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.11), inset 1px 1px 0 rgba(255, 255, 255, 0.38);}551 552 ul.screenshots{overflow:hidden;list-style:none; padding: 3.5% 3.5% 0 3.5%;}553 .screenshots li{}554 .screenshots a{border: 1px solid rgba(0, 0, 0, 0.25); display:block; overflow:hidden}555 .screenshots img{display:block; max-width:100%}556 .screenshots .col{margin-bottom:3.5%;}557 .styleSlider h2{font-size: .9em; text-align: left; position: absolute; bottom: -22px; left: 1px; margin-bottom:0;}558 559/* Marketing Pages */560 .mPageTitle{border-bottom: 1px solid #E7E6E3; margin: 3.5% 0; padding: 0 0 1.75%;}561 562/* Features Tabbed Content */563 .sbInfo{margin-bottom:20px}564 .sbContent{display:none}565 .sbContent.sbShow{display:block}566 .sbCats{overflow:hidden}567 .sbCats li{float:left; margin:0 5px 0 0}568 .sbCats a{border-bottom:none; border-radius:3px 3px 0 0; display:block; padding:5px 10px; text-decoration:none}569 .sbCats .selected, .sbCats a:hover{border-bottom:none}570 .features .featureBlock nav a.add-btn{margin:0; padding:10px}571 572/* Video Player :used on 'Featured Sites' 'Features' and Home Page */573.videoHolder, .installWindow{background:#fff; background:rgba(255, 255, 255, .8); height:100%; left:0; position:fixed; top:0; width:100%; z-index:9999}574 .videoFrame{background:#F9F8EF; border:10px solid #C8C7B4; padding:15px; position:relative; margin:0 auto; top:15%; width:84%}575 .videoFrame iframe{border:0; display:block; height:451px; margin:0 auto; max-width:810px; width:100%}576 .videoClose{float:right; margin-bottom:5px; text-decoration:none}577 .videoClose:hover{text-decoration:underline}578 579/* Features Sidebar */580 581.featList{margin-bottom:1em;}582 583.featList li{padding:2% 0; border-top:1px solid #E7E6E3; position:relative; margin-bottom:0;}584.featList li:first-child{border-top:0;}585.featList li a{display:inline; padding:0;}586 587.featMore{display:none; font-size: .95em; margin: 3.5% 0 3.5% 3.5%; padding: 0 0 0 3.5%; border-left: 1px solid rgba(0, 0, 0, 0.1);}588 589.featMoreIcon{display:inline-block; cursor:pointer; font-weight:bold; font-size:1.5em; float:right; padding: 0% 0 2% 0!important;}590.featMoreIcon.fhide{display:none;}591 592.featZeebImg{max-width:100%; float:right; margin: 0 0 1em 0;}593 594/* Help & Features 3 Column Blocks */595 .helpDivide{border-bottom:1px solid #D4D4C5; margin-bottom:20px; padding-bottom:20px; overflow:hidden}596 .helpDivide:last-child{border:0}597 .helpDivide article, .col3feat{float:left; padding:0 1.5%; width:30%}598 599/* main help/article pages */600 .faq{display:none; margin-bottom:15px}601 .faq-btn, .add-btn{display:block; padding:5px; text-decoration:none}602 #faq0{display:block}603 604/* Pricing Page Table */605 .tablePrice{border-spacing:0; margin-bottom:10px; width:100%}606 .tablePrice td{607 background: #f5f4f0;608 border-top: 0;609 width: 25%;610 border-bottom: 1px solid #E7E6E3;611 border-right: 1px solid #d5d3ce;}612 .tablePrice th{vertical-align:bottom; border-bottom:1px solid #d5d3ce!important;}613 .tablePrice .blank{background:none; border:none}614 .tablePrice tfoot .blank{border-top:0}615 .tablePrice .feature{border-left:1px solid #d5d3ce; text-align:left}616 .tablePrice .tAction{background:0; border:0; border-top:0; padding:0;}617 .tablePricetbody{border-bottom:1px solid #d5d3ce;}618 619 620 .pHeader, .tablePrice th.mPlus, .tablePrice th.mFree, .tablePrice th.mPro{background:none; border:none; font-size:10px; padding:5px 0 0}621 .tablePrice .plans{color:#463434; padding:0; border:0;}622 .tablePrice .plans p{font-size:12px; margin:0}623 .tablePrice .planName{624 width: 100%;625 border-bottom: 0;626 color: #fff;627 font-size: 1.2em;628 overflow: hidden;629 background: rgba(48, 46, 46, 0.09);}630 .planName .tHead, .planName .planCostDesc{padding:5px;}631 .planName .tHead{float:left;}632 .planName .planCostDesc{float:right; text-align:right;}633 .tablePrice sup{font-size:.4em;}634 .tablePrice .planPrice{635 font-size:10em; 636 font-weight: normal;637 vertical-align: super;638 color: #fff;639 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.57);}640 .tablePrice .plans .tHead{font-family:Source Sans Pro, Arial, Helvetica, sans-serif;}641 .tablePrice .plans .description{642 padding: 12px;643 text-align: left;644 font-size: 1.4em;645 background: rgba(255, 255, 255, 0.32);}646 647 /* Free */648 .tablePrice .plans.mFree{background:#66A7BB; height:auto; }649 .tablePrice .mFree{background:#f5f4f0 }650 .mFree .planPrice{font-size:8em;}651 652 /* Personal */653 .tablePrice .plans.mPlus{background:#7eba95; height:auto; }654 .tablePrice .mPlus{background:#f5f4f0 }655 .mPlus .planPrice{font-size:9em;}656 657 /* Professional */658 .tablePrice .plans.mPro{background:#b1d166; height:auto; }659 .tablePrice .mPro{background:#f5f4f0 }660 .mPro .planPrice{font-size:10em;}661 662 .planPeriod{font-size: 0.15em;}663 664 665 .tablePrice .priceArea.mPro, .tablePrice .priceArea.mPlus, .tablePrice .priceArea.mFree{background:none}666 .space{color:#66A7BB; text-shadow:0 0 0 transparent;}667 668 .learnMore{display:block; overflow:hidden; padding:25px 15px}669 .learnMore strong{color:#393939; text-shadow:0 1px 1px rgba(255,255,255,.8)}670 .learnMore.selected{background:#f5f4f0}671 672 .tablePrice .infoRow{background:#f5f4f0}673 .tablePrice .infoRow td{background:#839097; color:#f5f4f0; border:0; border-left:1px solid #c8c7b4; border-right:1px solid #c8c7b4}674 .infoRow p, .fText{font-size:.9em; margin:0}675 .infoRow .toggle{border-bottom: 1px solid #E7E6E3;}676 677 #step2{display:none; margin:0 auto; padding:15px; overflow:hidden; max-width:860px}678 #windowbox-content{border:0; display:block; clear:both; height:660px; margin:0 auto; max-width:770px; width:100%}679 680 .planCall a{display:inline-block; text-decoration:none; vertical-align:bottom}681 682 .tAction{position:relative;}683 .tblBtn{684 width: 75%;685 border-radius: 0 0 2px 2px;686 border-top: 0;687 box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.11);}688 th.emptyTHmobile{vertical-align: top; text-align: left}689 .mobileShow .sbutton{float: left; margin: 0 .5em 0 0;}690 691 692 .testimonial{font-size:1em; width:100%; margin:0 auto; float:left;}693 .testimonial .txt_right{margin-bottom:25px}694 .testArrow{margin: 0 auto;}695 .testimonial .txt_right{696 border-top: 1px solid rgba(255, 255, 255, 0.05);697 margin-top: 1em;698 font-size: .9em;699 font-weight: 300;700 padding-top: .2em;}701 702 .cert{width:100%; float:right; text-align:right; margin-bottom:1em; overflow:hidden;}703 704/* Other Services Tables (Currently only used for Sitelock) */705 706 .table4{border-spacing:0; width:100%}707 .table4 td{border-bottom:1px solid #c8c7b4; border-right:1px solid #c8c7b4; height:34px; width:25%}708 .table4 .blank{border:none; border-right:1px solid #c8c7b4}709 .table4 .plans, .plans{background:#f7f7f3; border-top:1px solid #c8c7b4; height:95px}710 .table4 .plans p{margin:0}711 .prices{background:#655654; color:#e9e8e3; height:40px}712 .prices h3{margin:0}713 .table4 .tableAction{background:#f7f7f3; height:50px}714 .table4 .txt_left{border:none; border-right:1px solid #c8c7b4; font-weight:bold; text-indent:20px}715 .checkMark, .unAvailable, .oneTime, .mFeatureIcon{716 background: #A6C152 url(../images/tableIcons.png) no-repeat -20px 0px;717 display: inline-block;718 height: 21px;719 border-radius: 20px;720 line-height: 20px;721 margin: 0 auto;722 padding-left: 30px;723 text-align: left;724 width: 114px;}725 .unAvailable{background: #AD4824 url(../images/tableIcons.png) no-repeat -20px -20px;}726 .oneTime{background-position:0 -88px}727 .mFeatureIcon{background-position:0 -88px}728 .checkMark.noText, .unAvailable.noText, .oneTime.noText, .mFeatureIcon.noText{729 margin-top: 2px;730 padding: 0;731 width: 20px;732 height: 20px;}733 .mFeatureIcon.noText{background:#388DAF url(../images/tableIcons.png) no-repeat -20px -40px;}734 .selected .mFeatureIcon.noText{background-position: -20px -60px;}735 736 737/* Interior pages Sidebar & content area styling */738 739 .intNav{font-size:.9em;}740 .int{ padding: 1em; background:#f5f4f0; border:1px solid #d5d3ce;}741 .toc li, .intNasv li{list-style:none; margin-bottom:0; display:block; padding:5px; text-decoration:none}742 .toc li a, .intNav li a{padding:5px; text-decoration:none;}743 744 /* In the News & Press Kits Links */745 .newsListing{margin:0; padding:0;}746 .newsListing li{border-bottom:1px solid #d5d3ce; overflow:hidden; padding:0 0 3.5% 0; margin:0 0 3.5% 0;}747 .newsListing .readMore{float:right;}748 749 /* OLD CODE /* 9.20.13 -- I thought this wasn't needed but apparently there's some obscure stuff that may or may not be in use that dependes on the mainContnets class to not be broken. fml */750 751 .mainContents{width:65%}752 .cpSidebar.boxSize{width:30%;}753 754 .toggle{display:none}755 756 /* Site Status Box -- Area on the top of the logged-in sidebar for alerting users to upcoming outages or issues. */757 758 .tpStatus{ 759 /* border-bottom:1px solid #AC4825; */760 padding:5px;}761 .tpStatus h3{ 762 background: #AC4825; 763 color: white; 764 padding:5px 5px;765 font-weight:300;766 }767 .tpStatus .alert{}768 769/* google adwords promo page */770.googleInfo{float:left; padding:0 1.5% 0 0; width:65.5%}771.googlePromo{float:left; padding:0 0 0 1.5%; width:31.5%}772 /* -- Styles for the Box Holding the Promo Code -- */773 .adwordsCodeBlock{background:url(../images/bg.jpg) #EFEADE; border:1px solid #BCB49A; margin-bottom:20px; margin-top:3em; padding:15px}774 .adwordsCode{font-size:5em; text-align:center}775 .adWordsPromo .outro{display:none} /* Hide the Footer Outro */776 .googleCoupon{background:#fff; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; margin-bottom:1em; padding:.5em 1em; text-align:center}777 .googlePrimary{margin-bottom:0}778 .adwordsLogo{margin-top:1em; max-width:100%}779 .googleButton{font-size:2em; display:block; text-align:center} /* -- Adjustments to Button Style for 'Claim Your Credit' Button -- */780 781/* Zenbox */782 #zenbox_overlay{height:100%; left:0; position:fixed; top:0; width:100%; z-index:90000}783 #zenbox_overlay * {color:#333; font-size:12px; margin:0; padding:0}784 #zenbox_container{height:620px; margin:0 auto; position:relative; top:7%; width:638px; z-index:2}785 #zenbox_container .zenbox_header{position:relative; z-index:100}786 #zenbox_close{cursor:pointer; height:46px; position:absolute; right:0; top:-40px; width:46px}787 #zenbox_body{height:900px; margin-top:-18px; position:relative; width:615px}788 #zenbox_scrim{background:#000; background:rgba(0,0,0,.5); filter:alpha(opacity=42); left:0; position:absolute; top:0; width:100%; z-index:1}789 790/* Site of the Month */791 .sotmThumbs{overflow:hidden; padding:0}792 .sotmThumbs li{float:left; list-style:none; padding:5px 1% 0; width:48%}793 .sotmThumbs a, .sotmThumbs img{display:block}794 795/* error pages */796 #errorLeft{width:65%}797 #errorRight{padding-top:111px; width:33%}798 .errorCall{background:#fff no-repeat 15px 30px; display:block; margin-bottom:15px; min-height:70px; padding-left:260px}799 .errorCall.shopping{background-image:url(../images/shop.png)} /* WTF? */800 .errorCall.classifieds{background-image:url(../images/lycosLogo.jpg); background-position:15px 10px}801 .errorCall.tripod{background-image:url(../images/tripodLogo200.png)}802 803/* put this somewhere smarter */804#trafficFrame{border:0; height:600px; width:100%}805.pricing-row{background:#3c5561; margin-bottom:0; padding:3.5% 0; color:#f5f4f0;}806 807/* ----- Internet Explorer Fixes ----- */808.ieAll .helpDivide article{padding-right:3%}809 810/* ie7 fixes */811.ie7 .container{width:900px}812.ie7 .cols-3 .col{width:31.33%}813.ie7 #tweet li{padding-top:0}814.ie7 .all-toolsNav li{font-size:12px; width:109px}815.ie7 .cpInfoArea{position:relative; left:10px}816.ie7 .tool-Instances{height:auto; overflow:visible}817.ie7 .instance-Image, .ie7 .social-list{display:none}818.ie7 .instance{padding-left:5px; padding-right:5px}819.ie7 .instance-Title{width:75%}820.ie7 .instance-Actions{left:0; margin:0; top:0; width:20%}821.ie7 .callUs{float:left; padding-bottom:5px}822.ie7 #this-trafficFrame{height:900px}823.ie7 .col3feat{width:28.5%}824.ie7 .leftFocus.cols-2 .col2{37.5%}825.ie7 .hp .flex-control-nav{bottom:10px}826.ie7 .classicTool{width:29%}827.ie7 .loginBOX{width:440px}828.ie7 .loginBOX h2 .logclose-btn{position:absolute; top:10px; right:10px}829.ie7 .all-toolsNav.tabs-2 li{width:49.666%}830.ie7 .all-toolsNav.tabs-3 li{width:32.666%}831.ie7 .all-toolsNav.tabs-4 li{width:24.2%}832 833/* ie8 fixes */834.ie8 .col3feat{width:28.5%}835.ie8 .instance-dd{text-decoration:none}836.ie8 .classicTool{width:29%}837 838 839 840 841 842 843 844/* ----- Media Queries ----- */845@media screen and (min-width:700px) and (min-height:820px){846 .baseFooter{bottom:0; left:0; width:100%}847 .outro{background:#F3F2EA; bottom:60px; left:0; position:fixed; width:100%}848}849 850@media (max-device-width:480px), screen and (max-width:1023px){851 .baseFooter .container, .bookEndCenter{width:auto}852 .wnLink img{max-width:100%}853}854 855@media (max-device-width:480px), screen and (max-width:500px){ 856 .baseFeatures{min-height:1px}/* -- for pricing plan page -- */857 .mobileShow .sbutton{float:left; margin-right: 30%; margin-bottom: 1em;}858}859 860@media (max-device-width:480px), screen and (max-width:675px){861 body{font-size:80%}862 p, li, .base{font-size:1.2em}863 .bookEnd{font-size:10px}864 .button, .bigButton, .btn{font-size:14px}865}866 867@media (max-device-width:480px), screen and (max-width:760px){868 .cols-3{overflow:hidden}869 .cols-3 .col, .cols-2 .col{float:none; overflow:hidden; width:auto}870 .cols-3 .col1, .cols-2 .col1{padding:0}871 .cols-3 .col2, .cols-2 .col2{padding:0; text-align:left}872 .cols-3 .col3{padding:0}873 .cols-3 .col .emphBlock{padding:5px 10px}874 .cols-2.leftFocus .col1, .cols-2.leftFocus .col2{width:auto}875 876 #content.cols-2d .col1, #content.cols-2d .col2{width:100%; float:none;}877 #content.cols-2c .col1, #content.cols-2c .col2{width:100%; float:none;}878 879 .valueProps.col1{width:100%; float:none;}880 .styleSlider{display:none;}881 .planPrice{font-size:7em!important;}882 883 .col.col1 .btnSm{margin-bottom:25px}884 885 .sbCats{text-align:center}886 .sbCats li{display:inline-block; float:none; margin-bottom:5px}887 .sbCats a{border-radius:2px}888 889 .media, .media img{display:block; max-width:100%; overflow:hidden}890 .mImg, .mVid{float:none; width:auto}891 .mVid{border:2px solid #BCB49A}892 .mVid iframe{border:none; display:block; height:230px; width:100%}893 .mTxt{float:none; width:auto}894 895 .rev .mImg, .rev .mVid{float:none}896 .rev .mTxt{float:none}897 898 .mVideo .mVid{margin-bottom:15px; width:auto}899 .mVideo .mTxt{width:auto}900 901 .baseHeader .media{pading:10px; width:auto}902 .baseHeader .mImg{display:none}903 .baseHeader .mTxt{margin:0 auto; max-width:500px; padding-bottom:20px; width:90%}904 905 .emphBlock .txt_center.float_right{float:none}906 .emphBlock .beta.mb0{margin-bottom:15px}907 908 .mobileHide{display:none}909 .mobileShow{display:block}910 911 /* logged out */912 #hpLeft, #hpRight, .hpBlocks .callout{float:none; width:auto}913 .wnLink{background:#D4D4C5; padding:5px 5px 3px}914 .loginBOX{right:0}915 .loginBOX .input{width:200px}916 .baseHeader .hpContent .bigButton.blue.float_right{display:block; float:none; margin:15px auto 0; width:200px}917 .mainContents{float:none; width:auto}918 .mainArticle{padding:0}919 920 .helpBtnZbl{margin-top:10px!important}921 922 .flex-control-nav{bottom:0; top:auto}923 924 .planCall{width:auto}925 #content, #interior #cpContent, #content{padding:0 20px 150px}926 .mFree, .mPro, .mPlus{display:none}927 .mFree.planShow, .mPro.planShow, .mPlus.planShow{display:table-cell; width:100%}928 div.mFree.planShow, div.mPro.planShow, div.mPlus.planShow{display:block}929 .tablePrice .plans.mPro, .tablePrice .plans.mPlus{padding-top:5px}930 .tablePrice .feature{font-size:13px; width:50%}931 932 /* universal */933 #interior .cpSidebar .banner .lip{display:none}934 .mPageTitle{text-align:center}935 .helpPage .mPageTitle{margin:0}936 937 /* content & sidebar areas */938 #interior .cpSidebar{border:3px solid #C8C7B4; border-radius:0; float:none; width:auto} 939 #interior .cpSidebar .banner a, #interior .cpSidebar .banner{position:static; width:auto}940 #interior .cpSidebar .banner{padding:0}941 942 .helpDivide article, .helpDivide article:last-child{float:none; padding:15px 20px; width:auto}943 944 /* footer stuffs */945 .container{padding:0 10px}946 .footerList{overflow:hidden; list-style:none; padding-bottom:15px}947 .social-list{position:relative; top:0}948 .social-list li{margin:0 10px 15px 0}949 #interior .footerList{display:block;}950 #interior .footerList li {951 display: inline-block;952 font-size: .8em;953 margin: 0 15px 5px 0;}954 955 /* error pages */956 #errorLeft, #errorRight{float:none; width:auto}957 #errorRight{padding:0; text-align:center}958 .errorCall{padding:90px 15px 0}959}960 961@media (max-device-width:480px), screen and (max-width:896px){962 .styleSlider h2 {963 text-align: center;964 bottom: -48px;965 width: 100%;}966 }967 968@media (max-device-width:480px), screen and (max-width:820px){ 969/* header */970.baseHeader .logo{float:none; margin:0 auto; width:320px}971.baseHeader nav{float:none; margin:0 auto; width:90%}972.baseHeader nav ul{float:none; text-align:center}973.baseHeader nav li{float:none; display:inline-block; *display:inline; *zoom:1}974.baseHeader nav li a{border-right:none; font-size:14px!important; padding:0 8px!important}975#divider{margin-bottom:15px}976 977/* footer */978.footerList{padding:5px;}979.callUs{display:block; float:none}980.bookEnd{font-size:9px; padding:5px 0;}981.bookEnd li{display:inline-block; float:none; line-height:normal}982.bookEnd li:first-child{display:block}983.bookEnd .social-list{display:none}984.baseFooter .col.col1{985 width: 100%;986 float: none;987 overflow: hidden;988 margin-bottom: 1em;989 padding-bottom: 1em;990 border-bottom: 1px solid rgba(255, 255, 255, 0.1);991 }992.baseFooter .col.col2{clear:both; width:60%;}993.baseFooter .footerList li{ display: block; float: left; }994}995 996@media (max-device-width:480px), screen and (max-width:860px){997 .baseHeader .alpha{font-size:1.5em} /* alpha + delta Currently unused, left in for future use */998 .baseHeader .delta{font-size:1em}999 .baseHeader .mImg img{left:-50px;1000}}1001 1002 1003/* Below this line is new styling being introduced to Tripod in 2014. It is being kept separate so that 1004when the entire site is overhauled, older styles can more easily be removed. 1005 1006In order to prevent new styles from interfering with old in unexpected ways, things like buttons will be prefixed with nt-1007 1008These prfixes should be removed when the rest of the site is overhauled.1009 1010This separation is a temporary measure and should be rolled into the promary CSS as soon as possible.1011 1012*/1013 1014/* ------ !BUTTONS! ------ */1015 1016.nt-button-action{ 1017 background: #53ADDA;1018 color: #FFF;1019 border-radius: 20px;1020 border: 0px;1021 font-size: 20px;1022 height: 40px;1023 padding:0 45px; 1024 }1025.nt-button{ 1026 text-transform: uppercase;1027 font-weight: 700;1028 letter-spacing: .5px;1029 cursor: pointer;1030 }1031.nt-button-action:hover,1032.nt-button-action:focus,1033.nt-button-action:active{1034 background: #4693BA;1035 }1036 1037.nt-button-action, 1038.nt-button-action:hover,1039.nt-button-action:focus,1040.nt-button-action:active{1041 transition: background .3s ease;1042 -webkit-transition: background .3s ease;1043 -moz-transition: background .3s ease;1044 }1045 1046 1047/* ------ !PROMO-BANNER! ------ */1048 1049.messCenter{1050 display: none;1051 }1052 1053.promo-banner{1054 display: none;1055 background: #FFFEF9;1056 overflow: hidden;1057 position: relative;1058 padding:15px;1059 font-weight: 200;1060 border: 1px solid #B8B6B7;1061 margin:15px;1062 }1063.promo-banner .inner-block{1064 margin: 0 auto;1065 width: auto;1066 }1067.promo-banner h1{1068 text-align: left;1069 font-size:33px;1070 font-weight: 200;1071 text-transform: capitalize;1072 letter-spacing: .01px;1073 padding-right:20px;1074 }1075.superbold{ text-transform: uppercase;}1076.promo-banner .col1{1077 width: 50%;1078 float:left;1079 }1080.promo-banner .col2{1081 width: 50%;1082 float:right;1083 }1084 1085.promo-banner .col1 ul,1086.promo-banner .col2 ul{1087 padding: 0;1088 width: 100%;1089 padding: 0;1090 margin: 0 0 0 20px;1091 font-size:1em;1092 font-weight: 200;1093 }1094 1095@media screen and (max-width: 985px){1096 .promo-banner .col1,1097 .promo-banner .col2{1098 width: 100%;1099 }1100 .promo-banner .col2 ul{ margin:0;}1101}1102@media (max-device-width:480px), screen and (max-width:760px){1103 .promo-banner .col1,1104 .promo-banner .col2{1105 width: 50%;1106 }1107 .promo-banner .col2 ul{ margin: 0 0 0 20px;}1108 }1109.promo-banner li{1110 font-weight: 200;1111 list-style-image: disc;1112 margin-left: 20px;1113 padding:0 30px 0 0;1114 margin-bottom:5px;1115 }1116.promo-banner .col1 ul{1117 float: right;1118 }1119 1120.promo-banner .close{1121 position: absolute;1122 top: 5px;1123 right: 10px;1124 font-weight: 400;1125 font-size: 20px;1126 font-family: arial;1127 color: darkgray;1128 cursor: pointer;1129 }1130.promo-banner .close:hover{1131 color: black;1132 }1133 1134.promo-banner .nt-button-action{1135 margin: 20px auto 0 auto;1136 font-size:1.1em;1137 display: block;1138 }1139 1140 1141//India Regionalization Changes1142section#page {margin-top: 0px;}1143div.container nav ul{float: left;width: 100%; }1144#div.container nav li{margin-right: 15%; margin-top: 5px;}1145div.container nav li a {font-size: 120%;font-weight: bolder;}1146div.flexslider-container.emphBlock {border:none !important;}1147section#page {background-color: #ddeff9;}1148#.intH {display: none;}1149.intH {background-color: #ddeff9;border: none !important;}1150.intH img {margin-left: 20px;}1151.wow {color:#5aa7df ;font-weight: bolder;}1152.beta {text-align: center;}1153.logoContainer {background-color: #ffffff;}1154.baseHeader {margin: none;}1155div#page {border-top: 1px solid #c0c0c0;}1156div.bottom-box {display: none;}1157section.bookEnd {margin-top: 20px;1158div.cpanel-bottom.row {margin-bottom: -50px;height: 0px !important;}1159 </style>1160 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">1161 <title>1162 Create a Website | Tripod Web Hosting1163 </title>1164 <!--[if IE]>1165 1166<![endif]-->1167 </head>1168 <body class="interior">1169 <section class="" id="topBar">1170 <span class="float_right member">1171 <a title="Log out of your account">1172 Log out1173 </a>1174 </span>1175 <br class="clr">1176 </section>1177 <header class="baseHeader">1178 <div class="intH">1179 <div class="container">1180 <h1 class="logo">1181 <a title="Tripod.com">1182 <img alt="Tripod.com logo" src="rick.jpg">1183 <span>1184 Tripod.com1185 </span>1186 </a>1187 </h1>1188 <nav>1189 <ul>1190 <li>1191 <a class="featuresLink" title="Check out other great Tripod features">1192 Features1193 </a>1194 </li>1195 <li>1196 <a class="pricingLink" title="Tripod plan comparisons and pricing">1197 Pricing1198 </a>1199 </li>1200 <li>