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 7 8 Blueprint CSS Framework 1.09 http://blueprintcss.org10 11 * Copyright (c) 2007-Present. See LICENSE for more info.12 * See README for instructions on how to use Blueprint.13 * For credits and origins, see AUTHORS.14 * This is a compressed file. See the sources in the 'src' directory.15 16----------------------------------------------------------------------- */17 18/* reset.css */19html {margin:0;padding:0;border:0;}20body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}21article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}22body {line-height:1.5;background:white;}23table {border-collapse:separate;border-spacing:0;}24caption, th, td {text-align:left;font-weight:normal;float:none !important;}25table, th, td {vertical-align:middle;}26blockquote:before, blockquote:after, q:before, q:after {content:'';}27blockquote, q {quotes:"" "";}28a img {border:none;}29:focus {outline:0;}30 31/* typography.css */32html {font-size:100.01%;}33body {font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;}34h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}35h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}36h2 {font-size:2em;margin-bottom:0.75em;}37h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}38h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}39h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}40h6 {font-size:1em;font-weight:bold;}41h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}42p {margin:0 0 1.5em;}43.left {float:left !important;}44p .left {margin:1.5em 1.5em 1.5em 0;padding:0;}45.right {float:right !important;}46p .right {margin:1.5em 0 1.5em 1.5em;padding:0;}47a:focus, a:hover {color:#09f;}48a {color:#06c;text-decoration:underline;}49blockquote {margin:1.5em;color:#666;font-style:italic;}50strong, dfn {font-weight:bold;}51em, dfn {font-style:italic;}52sup, sub {line-height:0;}53abbr, acronym {border-bottom:1px dotted #666;}54address {margin:0 0 1.5em;font-style:italic;}55del {color:#666;}56pre {margin:1.5em 0;white-space:pre;}57pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}58li ul, li ol {margin:0;}59ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}60ul {list-style-type:disc;}61ol {list-style-type:decimal;}62dl {margin:0 0 1.5em 0;}63dl dt {font-weight:bold;}64dd {margin-left:1.5em;}65table {margin-bottom:1.4em;width:100%;}66th {font-weight:bold;}67thead th {background:#c3d9ff;}68th, td, caption {padding:4px 10px 4px 5px;}69tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}70tfoot {font-style:italic;}71caption {background:#eee;}72.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}73.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}74.hide {display:none;}75.quiet {color:#666;}76.loud {color:#000;}77.highlight {background:#ff0;}78.added {background:#060;color:#fff;}79.removed {background:#900;color:#fff;}80.first {margin-left:0;padding-left:0;}81.last {margin-right:0;padding-right:0;}82.top {margin-top:0;padding-top:0;}83.bottom {margin-bottom:0;padding-bottom:0;}84 85/* forms.css */86label {font-weight:bold;}87fieldset {padding:0 1.4em 1.4em 1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}88legend {font-weight:bold;font-size:1.2em;margin-top:-0.2em;margin-bottom:1em;}89fieldset, #IE8#HACK {padding-top:1.4em;}90legend, #IE8#HACK {margin-top:0;margin-bottom:0;}91input[type=text], input[type=password], input.text, input.title, textarea {background-color:#fff;border:1px solid #bbb;}92input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus {border-color:#666;}93select {background-color:#fff;border-width:1px;border-style:solid;}94input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}95input.text, input.title {width:300px;padding:5px;}96input.title {font-size:1.5em;}97textarea {width:390px;height:250px;padding:5px;}98form.inline {line-height:3;}99form.inline p {margin-bottom:0;}100.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}101.error, .alert {background:#fbe3e4;color:#8a1f11;border-color:#fbc2c4;}102.notice {background:#fff6bf;color:#514721;border-color:#ffd324;}103.success {background:#e6efc2;color:#264409;border-color:#c6d880;}104.info {background:#d5edf8;color:#205791;border-color:#92cae4;}105.error a, .alert a {color:#8a1f11;}106.notice a {color:#514721;}107.success a {color:#264409;}108.info a {color:#205791;}109 110/* grid.css */111.container {width:670px;margin:0 auto;}112.showgrid {background:url(src/grid.png);}113.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17 {float:left;margin-right:10px;}114.last {margin-right:0;}115.span-1 {width:30px;}116.span-2 {width:70px;}117.span-3 {width:110px;}118.span-4 {width:150px;}119.span-5 {width:190px;}120.span-6 {width:230px;}121.span-7 {width:270px;}122.span-8 {width:310px;}123.span-9 {width:350px;}124.span-10 {width:390px;}125.span-11 {width:430px;}126.span-12 {width:470px;}127.span-13 {width:510px;}128.span-14 {width:550px;}129.span-15 {width:590px;}130.span-16 {width:630px;}131.span-17 {width:670px;margin-right:0;}132input.span-1, textarea.span-1, input.span-2, textarea.span-2, input.span-3, textarea.span-3, input.span-4, textarea.span-4, input.span-5, textarea.span-5, input.span-6, textarea.span-6, input.span-7, textarea.span-7, input.span-8, textarea.span-8, input.span-9, textarea.span-9, input.span-10, textarea.span-10, input.span-11, textarea.span-11, input.span-12, textarea.span-12, input.span-13, textarea.span-13, input.span-14, textarea.span-14, input.span-15, textarea.span-15, input.span-16, textarea.span-16, input.span-17, textarea.span-17 {border-left-width:1px;border-right-width:1px;padding-left:5px;padding-right:5px;}133input.span-1, textarea.span-1 {width:18px;}134input.span-2, textarea.span-2 {width:58px;}135input.span-3, textarea.span-3 {width:98px;}136input.span-4, textarea.span-4 {width:138px;}137input.span-5, textarea.span-5 {width:178px;}138input.span-6, textarea.span-6 {width:218px;}139input.span-7, textarea.span-7 {width:258px;}140input.span-8, textarea.span-8 {width:298px;}141input.span-9, textarea.span-9 {width:338px;}142input.span-10, textarea.span-10 {width:378px;}143input.span-11, textarea.span-11 {width:418px;}144input.span-12, textarea.span-12 {width:458px;}145input.span-13, textarea.span-13 {width:498px;}146input.span-14, textarea.span-14 {width:538px;}147input.span-15, textarea.span-15 {width:578px;}148input.span-16, textarea.span-16 {width:618px;}149input.span-17, textarea.span-17 {width:658px;}150.append-1 {padding-right:40px;}151.append-2 {padding-right:80px;}152.append-3 {padding-right:120px;}153.append-4 {padding-right:160px;}154.append-5 {padding-right:200px;}155.append-6 {padding-right:240px;}156.append-7 {padding-right:280px;}157.append-8 {padding-right:320px;}158.append-9 {padding-right:360px;}159.append-10 {padding-right:400px;}160.append-11 {padding-right:440px;}161.append-12 {padding-right:480px;}162.append-13 {padding-right:520px;}163.append-14 {padding-right:560px;}164.append-15 {padding-right:600px;}165.append-16 {padding-right:640px;}166.prepend-1 {padding-left:40px;}167.prepend-2 {padding-left:80px;}168.prepend-3 {padding-left:120px;}169.prepend-4 {padding-left:160px;}170.prepend-5 {padding-left:200px;}171.prepend-6 {padding-left:240px;}172.prepend-7 {padding-left:280px;}173.prepend-8 {padding-left:320px;}174.prepend-9 {padding-left:360px;}175.prepend-10 {padding-left:400px;}176.prepend-11 {padding-left:440px;}177.prepend-12 {padding-left:480px;}178.prepend-13 {padding-left:520px;}179.prepend-14 {padding-left:560px;}180.prepend-15 {padding-left:600px;}181.prepend-16 {padding-left:640px;}182.border {padding-right:4px;margin-right:5px;border-right:1px solid #ddd;}183.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #ddd;}184.pull-1 {margin-left:-40px;}185.pull-2 {margin-left:-80px;}186.pull-3 {margin-left:-120px;}187.pull-4 {margin-left:-160px;}188.pull-5 {margin-left:-200px;}189.pull-6 {margin-left:-240px;}190.pull-7 {margin-left:-280px;}191.pull-8 {margin-left:-320px;}192.pull-9 {margin-left:-360px;}193.pull-10 {margin-left:-400px;}194.pull-11 {margin-left:-440px;}195.pull-12 {margin-left:-480px;}196.pull-13 {margin-left:-520px;}197.pull-14 {margin-left:-560px;}198.pull-15 {margin-left:-600px;}199.pull-16 {margin-left:-640px;}200.pull-17 {margin-left:-680px;}201.pull-1, .pull-2, .pull-3, .pull-4, .pull-5, .pull-6, .pull-7, .pull-8, .pull-9, .pull-10, .pull-11, .pull-12, .pull-13, .pull-14, .pull-15, .pull-16, .pull-17 {float:left;position:relative;}202.push-1 {margin:0 -40px 1.5em 40px;}203.push-2 {margin:0 -80px 1.5em 80px;}204.push-3 {margin:0 -120px 1.5em 120px;}205.push-4 {margin:0 -160px 1.5em 160px;}206.push-5 {margin:0 -200px 1.5em 200px;}207.push-6 {margin:0 -240px 1.5em 240px;}208.push-7 {margin:0 -280px 1.5em 280px;}209.push-8 {margin:0 -320px 1.5em 320px;}210.push-9 {margin:0 -360px 1.5em 360px;}211.push-10 {margin:0 -400px 1.5em 400px;}212.push-11 {margin:0 -440px 1.5em 440px;}213.push-12 {margin:0 -480px 1.5em 480px;}214.push-13 {margin:0 -520px 1.5em 520px;}215.push-14 {margin:0 -560px 1.5em 560px;}216.push-15 {margin:0 -600px 1.5em 600px;}217.push-16 {margin:0 -640px 1.5em 640px;}218.push-17 {margin:0 -680px 1.5em 680px;}219.push-1, .push-2, .push-3, .push-4, .push-5, .push-6, .push-7, .push-8, .push-9, .push-10, .push-11, .push-12, .push-13, .push-14, .push-15, .push-16, .push-17 {float:left;position:relative;}220div.prepend-top, .prepend-top {margin-top:1.5em;}221div.append-bottom, .append-bottom {margin-bottom:1.5em;}222.box {padding:1.5em;margin-bottom:1.5em;background:#e5eCf9;}223hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 1.45em;border:none;}224hr.space {background:#fff;color:#fff;visibility:hidden;}225.clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}226.clearfix, .container {display:block;}227.clear {clear:both;}228 229 230/* -----------------------------------------------------------------------231 232 233 Blueprint CSS Framework 1.0234 http://blueprintcss.org235 236 * Copyright (c) 2007-Present. See LICENSE for more info.237 * See README for instructions on how to use Blueprint.238 * For credits and origins, see AUTHORS.239 * This is a compressed file. See the sources in the 'src' directory.240 241----------------------------------------------------------------------- */242 243/* print.css */244body {line-height:1.5;font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;color:#000;background:none;font-size:10pt;}245.container {background:none;}246hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}247hr.space {background:#fff;color:#fff;visibility:hidden;}248h1, h2, h3, h4, h5, h6 {font-family:"Helvetica Neue", Arial, "Lucida Grande", sans-serif;}249code {font:.9em "Courier New", Monaco, Courier, monospace;}250a img {border:none;}251p img.top {margin-top:0;}252blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}253.small {font-size:.9em;}254.large {font-size:1.1em;}255.quiet {color:#999;}256.hide {display:none;}257a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}258a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}259 260 261/*262 * jQuery UI CSS Framework 1.8.16263 *264 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)265 * Dual licensed under the MIT or GPL Version 2 licenses.266 * http://jquery.org/license267 *268 * http://docs.jquery.com/UI/Theming/API269 */270 271/* Layout helpers272----------------------------------*/273.ui-helper-hidden { display: none; }274.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }275.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }276.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }277.ui-helper-clearfix { display: inline-block; }278/* required comment for clearfix to work in Opera \*/279* html .ui-helper-clearfix { height:1%; }280.ui-helper-clearfix { display:block; }281/* end clearfix */282.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }283 284 285/* Interaction Cues286----------------------------------*/287.ui-state-disabled { cursor: default !important; }288 289 290/* Icons291----------------------------------*/292 293/* states and images */294.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }295 296 297/* Misc visuals298----------------------------------*/299 300/* Overlays */301.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }302 303 304/*305 * jQuery UI CSS Framework 1.8.16306 *307 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)308 * Dual licensed under the MIT or GPL Version 2 licenses.309 * http://jquery.org/license310 *311 * http://docs.jquery.com/UI/Theming/API312 *313 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=ffffff&bgTextureHeader=23_fine_grain.png&bgImgOpacityHeader=15&borderColorHeader=d4d1bf&fcHeader=453821&iconColorHeader=b83400&bgColorContent=eceadf&bgTextureContent=23_fine_grain.png&bgImgOpacityContent=10&borderColorContent=d9d6c4&fcContent=1f1f1f&iconColorContent=222222&bgColorDefault=f8f7f6&bgTextureDefault=23_fine_grain.png&bgImgOpacityDefault=10&borderColorDefault=cbc7bd&fcDefault=654b24&iconColorDefault=b83400&bgColorHover=654b24&bgTextureHover=23_fine_grain.png&bgImgOpacityHover=65&borderColorHover=654b24&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=eceadf&bgTextureActive=23_fine_grain.png&bgImgOpacityActive=15&borderColorActive=d9d6c4&fcActive=140f06&iconColorActive=8c291d&bgColorHighlight=f7f3de&bgTextureHighlight=23_fine_grain.png&bgImgOpacityHighlight=15&borderColorHighlight=b2a266&fcHighlight=3a3427&iconColorHighlight=3572ac&bgColorError=b83400&bgTextureError=23_fine_grain.png&bgImgOpacityError=68&borderColorError=681818&fcError=ffffff&iconColorError=fbdb93&bgColorOverlay=6e4f1c&bgTextureOverlay=16_diagonal_maze.png&bgImgOpacityOverlay=20&opacityOverlay=60&bgColorShadow=000000&bgTextureShadow=16_diagonal_maze.png&bgImgOpacityShadow=40&opacityShadow=60&thicknessShadow=5px&offsetTopShadow=0&offsetLeftShadow=-10px&cornerRadiusShadow=18px314 */315 316 317/* Component containers318----------------------------------*/319.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 0.8em; }320.ui-widget .ui-widget { font-size: 1em; }321.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }322.ui-widget-content { border: 1px solid #d9d6c4; background: #eceadf url(images/ui-bg_fine-grain_10_eceadf_60x60.png) 50% 50% repeat; color: #1f1f1f; }323.ui-widget-content a { color: #1f1f1f; }324.ui-widget-header { border: 1px solid #d4d1bf; background: #ffffff url(images/ui-bg_fine-grain_15_ffffff_60x60.png) 50% 50% repeat; color: #453821; font-weight: bold; }325.ui-widget-header a { color: #453821; }326 327/* Interaction states328----------------------------------*/329.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cbc7bd; background: #f8f7f6 url(images/ui-bg_fine-grain_10_f8f7f6_60x60.png) 50% 50% repeat; font-weight: bold; color: #654b24; }330.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #654b24; text-decoration: none; }331.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #654b24; background: #654b24 url(images/ui-bg_fine-grain_65_654b24_60x60.png) 50% 50% repeat; font-weight: bold; color: #ffffff; }332.ui-state-hover a, .ui-state-hover a:hover { color: #ffffff; text-decoration: none; }333.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #d9d6c4; background: #eceadf url(images/ui-bg_fine-grain_15_eceadf_60x60.png) 50% 50% repeat; font-weight: bold; color: #140f06; }334.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #140f06; text-decoration: none; }335.ui-widget :active { outline: none; }336 337/* Interaction Cues338----------------------------------*/339.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #b2a266; background: #f7f3de url(images/ui-bg_fine-grain_15_f7f3de_60x60.png) 50% 50% repeat; color: #3a3427; }340.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #3a3427; }341.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #681818; background: #b83400 url(images/ui-bg_fine-grain_68_b83400_60x60.png) 50% 50% repeat; color: #ffffff; }342.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }343.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }344.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }345.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }346.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }347 348/* Icons349----------------------------------*/350 351/* states and images */352.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }353.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }354.ui-widget-header .ui-icon {background-image: url(images/ui-icons_b83400_256x240.png); }355.ui-state-default .ui-icon { background-image: url(images/ui-icons_b83400_256x240.png); }356.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }357.ui-state-active .ui-icon {background-image: url(images/ui-icons_8c291d_256x240.png); }358.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_3572ac_256x240.png); }359.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_fbdb93_256x240.png); }360 361/* positioning */362.ui-icon-carat-1-n { background-position: 0 0; }363.ui-icon-carat-1-ne { background-position: -16px 0; }364.ui-icon-carat-1-e { background-position: -32px 0; }365.ui-icon-carat-1-se { background-position: -48px 0; }366.ui-icon-carat-1-s { background-position: -64px 0; }367.ui-icon-carat-1-sw { background-position: -80px 0; }368.ui-icon-carat-1-w { background-position: -96px 0; }369.ui-icon-carat-1-nw { background-position: -112px 0; }370.ui-icon-carat-2-n-s { background-position: -128px 0; }371.ui-icon-carat-2-e-w { background-position: -144px 0; }372.ui-icon-triangle-1-n { background-position: 0 -16px; }373.ui-icon-triangle-1-ne { background-position: -16px -16px; }374.ui-icon-triangle-1-e { background-position: -32px -16px; }375.ui-icon-triangle-1-se { background-position: -48px -16px; }376.ui-icon-triangle-1-s { background-position: -64px -16px; }377.ui-icon-triangle-1-sw { background-position: -80px -16px; }378.ui-icon-triangle-1-w { background-position: -96px -16px; }379.ui-icon-triangle-1-nw { background-position: -112px -16px; }380.ui-icon-triangle-2-n-s { background-position: -128px -16px; }381.ui-icon-triangle-2-e-w { background-position: -144px -16px; }382.ui-icon-arrow-1-n { background-position: 0 -32px; }383.ui-icon-arrow-1-ne { background-position: -16px -32px; }384.ui-icon-arrow-1-e { background-position: -32px -32px; }385.ui-icon-arrow-1-se { background-position: -48px -32px; }386.ui-icon-arrow-1-s { background-position: -64px -32px; }387.ui-icon-arrow-1-sw { background-position: -80px -32px; }388.ui-icon-arrow-1-w { background-position: -96px -32px; }389.ui-icon-arrow-1-nw { background-position: -112px -32px; }390.ui-icon-arrow-2-n-s { background-position: -128px -32px; }391.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }392.ui-icon-arrow-2-e-w { background-position: -160px -32px; }393.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }394.ui-icon-arrowstop-1-n { background-position: -192px -32px; }395.ui-icon-arrowstop-1-e { background-position: -208px -32px; }396.ui-icon-arrowstop-1-s { background-position: -224px -32px; }397.ui-icon-arrowstop-1-w { background-position: -240px -32px; }398.ui-icon-arrowthick-1-n { background-position: 0 -48px; }399.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }400.ui-icon-arrowthick-1-e { background-position: -32px -48px; }401.ui-icon-arrowthick-1-se { background-position: -48px -48px; }402.ui-icon-arrowthick-1-s { background-position: -64px -48px; }403.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }404.ui-icon-arrowthick-1-w { background-position: -96px -48px; }405.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }406.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }407.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }408.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }409.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }410.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }411.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }412.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }413.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }414.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }415.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }416.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }417.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }418.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }419.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }420.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }421.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }422.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }423.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }424.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }425.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }426.ui-icon-arrow-4 { background-position: 0 -80px; }427.ui-icon-arrow-4-diag { background-position: -16px -80px; }428.ui-icon-extlink { background-position: -32px -80px; }429.ui-icon-newwin { background-position: -48px -80px; }430.ui-icon-refresh { background-position: -64px -80px; }431.ui-icon-shuffle { background-position: -80px -80px; }432.ui-icon-transfer-e-w { background-position: -96px -80px; }433.ui-icon-transferthick-e-w { background-position: -112px -80px; }434.ui-icon-folder-collapsed { background-position: 0 -96px; }435.ui-icon-folder-open { background-position: -16px -96px; }436.ui-icon-document { background-position: -32px -96px; }437.ui-icon-document-b { background-position: -48px -96px; }438.ui-icon-note { background-position: -64px -96px; }439.ui-icon-mail-closed { background-position: -80px -96px; }440.ui-icon-mail-open { background-position: -96px -96px; }441.ui-icon-suitcase { background-position: -112px -96px; }442.ui-icon-comment { background-position: -128px -96px; }443.ui-icon-person { background-position: -144px -96px; }444.ui-icon-print { background-position: -160px -96px; }445.ui-icon-trash { background-position: -176px -96px; }446.ui-icon-locked { background-position: -192px -96px; }447.ui-icon-unlocked { background-position: -208px -96px; }448.ui-icon-bookmark { background-position: -224px -96px; }449.ui-icon-tag { background-position: -240px -96px; }450.ui-icon-home { background-position: 0 -112px; }451.ui-icon-flag { background-position: -16px -112px; }452.ui-icon-calendar { background-position: -32px -112px; }453.ui-icon-cart { background-position: -48px -112px; }454.ui-icon-pencil { background-position: -64px -112px; }455.ui-icon-clock { background-position: -80px -112px; }456.ui-icon-disk { background-position: -96px -112px; }457.ui-icon-calculator { background-position: -112px -112px; }458.ui-icon-zoomin { background-position: -128px -112px; }459.ui-icon-zoomout { background-position: -144px -112px; }460.ui-icon-search { background-position: -160px -112px; }461.ui-icon-wrench { background-position: -176px -112px; }462.ui-icon-gear { background-position: -192px -112px; }463.ui-icon-heart { background-position: -208px -112px; }464.ui-icon-star { background-position: -224px -112px; }465.ui-icon-link { background-position: -240px -112px; }466.ui-icon-cancel { background-position: 0 -128px; }467.ui-icon-plus { background-position: -16px -128px; }468.ui-icon-plusthick { background-position: -32px -128px; }469.ui-icon-minus { background-position: -48px -128px; }470.ui-icon-minusthick { background-position: -64px -128px; }471.ui-icon-close { background-position: -80px -128px; }472.ui-icon-closethick { background-position: -96px -128px; }473.ui-icon-key { background-position: -112px -128px; }474.ui-icon-lightbulb { background-position: -128px -128px; }475.ui-icon-scissors { background-position: -144px -128px; }476.ui-icon-clipboard { background-position: -160px -128px; }477.ui-icon-copy { background-position: -176px -128px; }478.ui-icon-contact { background-position: -192px -128px; }479.ui-icon-image { background-position: -208px -128px; }480.ui-icon-video { background-position: -224px -128px; }481.ui-icon-script { background-position: -240px -128px; }482.ui-icon-alert { background-position: 0 -144px; }483.ui-icon-info { background-position: -16px -144px; }484.ui-icon-notice { background-position: -32px -144px; }485.ui-icon-help { background-position: -48px -144px; }486.ui-icon-check { background-position: -64px -144px; }487.ui-icon-bullet { background-position: -80px -144px; }488.ui-icon-radio-off { background-position: -96px -144px; }489.ui-icon-radio-on { background-position: -112px -144px; }490.ui-icon-pin-w { background-position: -128px -144px; }491.ui-icon-pin-s { background-position: -144px -144px; }492.ui-icon-play { background-position: 0 -160px; }493.ui-icon-pause { background-position: -16px -160px; }494.ui-icon-seek-next { background-position: -32px -160px; }495.ui-icon-seek-prev { background-position: -48px -160px; }496.ui-icon-seek-end { background-position: -64px -160px; }497.ui-icon-seek-start { background-position: -80px -160px; }498/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */499.ui-icon-seek-first { background-position: -80px -160px; }500.ui-icon-stop { background-position: -96px -160px; }501.ui-icon-eject { background-position: -112px -160px; }502.ui-icon-volume-off { background-position: -128px -160px; }503.ui-icon-volume-on { background-position: -144px -160px; }504.ui-icon-power { background-position: 0 -176px; }505.ui-icon-signal-diag { background-position: -16px -176px; }506.ui-icon-signal { background-position: -32px -176px; }507.ui-icon-battery-0 { background-position: -48px -176px; }508.ui-icon-battery-1 { background-position: -64px -176px; }509.ui-icon-battery-2 { background-position: -80px -176px; }510.ui-icon-battery-3 { background-position: -96px -176px; }511.ui-icon-circle-plus { background-position: 0 -192px; }512.ui-icon-circle-minus { background-position: -16px -192px; }513.ui-icon-circle-close { background-position: -32px -192px; }514.ui-icon-circle-triangle-e { background-position: -48px -192px; }515.ui-icon-circle-triangle-s { background-position: -64px -192px; }516.ui-icon-circle-triangle-w { background-position: -80px -192px; }517.ui-icon-circle-triangle-n { background-position: -96px -192px; }518.ui-icon-circle-arrow-e { background-position: -112px -192px; }519.ui-icon-circle-arrow-s { background-position: -128px -192px; }520.ui-icon-circle-arrow-w { background-position: -144px -192px; }521.ui-icon-circle-arrow-n { background-position: -160px -192px; }522.ui-icon-circle-zoomin { background-position: -176px -192px; }523.ui-icon-circle-zoomout { background-position: -192px -192px; }524.ui-icon-circle-check { background-position: -208px -192px; }525.ui-icon-circlesmall-plus { background-position: 0 -208px; }526.ui-icon-circlesmall-minus { background-position: -16px -208px; }527.ui-icon-circlesmall-close { background-position: -32px -208px; }528.ui-icon-squaresmall-plus { background-position: -48px -208px; }529.ui-icon-squaresmall-minus { background-position: -64px -208px; }530.ui-icon-squaresmall-close { background-position: -80px -208px; }531.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }532.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }533.ui-icon-grip-solid-vertical { background-position: -32px -224px; }534.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }535.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }536.ui-icon-grip-diagonal-se { background-position: -80px -224px; }537 538 539/* Misc visuals540----------------------------------*/541 542/* Corner radius */543.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 6px; -webkit-border-top-left-radius: 6px; -khtml-border-top-left-radius: 6px; border-top-left-radius: 6px; }544.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 6px; -webkit-border-top-right-radius: 6px; -khtml-border-top-right-radius: 6px; border-top-right-radius: 6px; }545.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 6px; -webkit-border-bottom-left-radius: 6px; -khtml-border-bottom-left-radius: 6px; border-bottom-left-radius: 6px; }546.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 6px; -webkit-border-bottom-right-radius: 6px; -khtml-border-bottom-right-radius: 6px; border-bottom-right-radius: 6px; }547 548/* Overlays */549.ui-widget-overlay { background: #6e4f1c url(images/ui-bg_diagonal-maze_20_6e4f1c_10x10.png) 50% 50% repeat; opacity: .60;filter:Alpha(Opacity=60); }550.ui-widget-shadow { margin: 0 0 0 -10px; padding: 5px; background: #000000 url(images/ui-bg_diagonal-maze_40_000000_10x10.png) 50% 50% repeat; opacity: .60;filter:Alpha(Opacity=60); -moz-border-radius: 18px; -khtml-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; }/*551 * jQuery UI Resizable 1.8.16552 *553 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)554 * Dual licensed under the MIT or GPL Version 2 licenses.555 * http://jquery.org/license556 *557 * http://docs.jquery.com/UI/Resizable#theming558 */559.ui-resizable { position: relative;}560.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }561.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }562.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }563.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }564.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }565.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }566.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }567.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }568.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }569.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*570 * jQuery UI Selectable 1.8.16571 *572 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)573 * Dual licensed under the MIT or GPL Version 2 licenses.574 * http://jquery.org/license575 *576 * http://docs.jquery.com/UI/Selectable#theming577 */578.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }579/*580 * jQuery UI Accordion 1.8.16581 *582 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)583 * Dual licensed under the MIT or GPL Version 2 licenses.584 * http://jquery.org/license585 *586 * http://docs.jquery.com/UI/Accordion#theming587 */588/* IE/Win - Fix animation bug - #4615 */589.ui-accordion { width: 100%; }590.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }591.ui-accordion .ui-accordion-li-fix { display: inline; }592.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }593.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }594.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }595.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }596.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }597.ui-accordion .ui-accordion-content-active { display: block; }598/*599 * jQuery UI Autocomplete 1.8.16600 *601 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)602 * Dual licensed under the MIT or GPL Version 2 licenses.603 * http://jquery.org/license604 *605 * http://docs.jquery.com/UI/Autocomplete#theming606 */607.ui-autocomplete { position: absolute; cursor: default; } 608 609/* workarounds */610* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */611 612/*613 * jQuery UI Menu 1.8.16614 *615 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)616 * Dual licensed under the MIT or GPL Version 2 licenses.617 * http://jquery.org/license618 *619 * http://docs.jquery.com/UI/Menu#theming620 */621.ui-menu {622 list-style:none;623 padding: 2px;624 margin: 0;625 display:block;626 float: left;627}628.ui-menu .ui-menu {629 margin-top: -3px;630}631.ui-menu .ui-menu-item {632 margin:0;633 padding: 0;634 zoom: 1;635 float: left;636 clear: left;637 width: 100%;638}639.ui-menu .ui-menu-item a {640 text-decoration:none;641 display:block;642 padding:.2em .4em;643 line-height:1.5;644 zoom:1;645}646.ui-menu .ui-menu-item a.ui-state-hover,647.ui-menu .ui-menu-item a.ui-state-active {648 font-weight: normal;649 margin: -1px;650}651/*652 * jQuery UI Button 1.8.16653 *654 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)655 * Dual licensed under the MIT or GPL Version 2 licenses.656 * http://jquery.org/license657 *658 * http://docs.jquery.com/UI/Button#theming659 */660.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */661.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */662button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */663.ui-button-icons-only { width: 3.4em; } 664button.ui-button-icons-only { width: 3.7em; } 665 666/*button text element */667.ui-button .ui-button-text { display: block; line-height: 1.4; }668.ui-button-text-only .ui-button-text { padding: .4em 1em; }669.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }670.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }671.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }672.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }673/* no icon support for input elements, provide padding by default */674input.ui-button { padding: .4em 1em; }675 676/*button icon element(s) */677.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }678.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }679.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }680.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }681.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }682 683/*button sets*/684.ui-buttonset { margin-right: 7px; }685.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }686 687/* workarounds */688button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */689/*690 * jQuery UI Dialog 1.8.16691 *692 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)693 * Dual licensed under the MIT or GPL Version 2 licenses.694 * http://jquery.org/license695 *696 * http://docs.jquery.com/UI/Dialog#theming697 */698.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }699.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }700.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 701.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }702.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }703.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }704.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }705.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }706.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }707.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }708.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }709.ui-draggable .ui-dialog-titlebar { cursor: move; }710/*711 * jQuery UI Slider 1.8.16712 *713 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)714 * Dual licensed under the MIT or GPL Version 2 licenses.715 * http://jquery.org/license716 *717 * http://docs.jquery.com/UI/Slider#theming718 */719.ui-slider { position: relative; text-align: left; }720.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }721.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }722 723.ui-slider-horizontal { height: .8em; }724.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }725.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }726.ui-slider-horizontal .ui-slider-range-min { left: 0; }727.ui-slider-horizontal .ui-slider-range-max { right: 0; }728 729.ui-slider-vertical { width: .8em; height: 100px; }730.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }731.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }732.ui-slider-vertical .ui-slider-range-min { bottom: 0; }733.ui-slider-vertical .ui-slider-range-max { top: 0; }/*734 * jQuery UI Tabs 1.8.16735 *736 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)737 * Dual licensed under the MIT or GPL Version 2 licenses.738 * http://jquery.org/license739 *740 * http://docs.jquery.com/UI/Tabs#theming741 */742.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */743.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }744.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }745.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }746.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }747.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }748.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */749.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }750.ui-tabs .ui-tabs-hide { display: none !important; }751/*752 * jQuery UI Datepicker 1.8.16753 *754 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)755 * Dual licensed under the MIT or GPL Version 2 licenses.756 * http://jquery.org/license757 *758 * http://docs.jquery.com/UI/Datepicker#theming759 */760.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }761.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }762.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }763.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }764.ui-datepicker .ui-datepicker-prev { left:2px; }765.ui-datepicker .ui-datepicker-next { right:2px; }766.ui-datepicker .ui-datepicker-prev-hover { left:1px; }767.ui-datepicker .ui-datepicker-next-hover { right:1px; }768.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }769.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }770.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }771.ui-datepicker select.ui-datepicker-month-year {width: 100%;}772.ui-datepicker select.ui-datepicker-month, 773.ui-datepicker select.ui-datepicker-year { width: 49%;}774.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }775.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }776.ui-datepicker td { border: 0; padding: 1px; }777.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }778.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }779.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }780.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }781 782/* with multiple calendars */783.ui-datepicker.ui-datepicker-multi { width:auto; }784.ui-datepicker-multi .ui-datepicker-group { float:left; }785.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }786.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }787.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }788.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }789.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }790.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }791.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }792.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }793 794/* RTL support */795.ui-datepicker-rtl { direction: rtl; }796.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }797.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }798.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }799.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }800.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }801.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }802.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }803.ui-datepicker-rtl .ui-datepicker-group { float:right; }804.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }805.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }806 807/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */808.ui-datepicker-cover {809 display: none; /*sorry for IE5*/810 display/**/: block; /*sorry for IE5*/811 position: absolute; /*must have*/812 z-index: -1; /*must have*/813 filter: mask(); /*must have*/814 top: -4px; /*must have*/815 left: -4px; /*must have*/816 width: 200px; /*must have*/817 height: 200px; /*must have*/818}/*819 * jQuery UI Progressbar 1.8.16820 *821 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)822 * Dual licensed under the MIT or GPL Version 2 licenses.823 * http://jquery.org/license824 *825 * http://docs.jquery.com/UI/Progressbar#theming826 */827.ui-progressbar { height:2em; text-align: left; }828.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }829 830 831 832body{background:url(/images/design/background.png);font-family:'Helvetica Neue', Verdana, Arial, Helvetica, sans-serif;font-size:15px}#corner-image{background:url(/images/design/corner.png) no-repeat;width:290px;height:290px;position:absolute;left:0px;top:0px;z-index:-10}#header-image{background:url(/images/design/header.png) no-repeat;width:273px;height:55px;margin-top:70px;margin-left:162px;cursor:pointer}#header-byline{margin-left:179px;margin-bottom:70px;color:#aaa;font-size:15px;text-shadow:1px 1px 1px #ddd}#sidebar-left{text-align:right;padding-right:18px}.link-post-link{font-weight:bold}.link-post-body{margin-left:0em;color:#222}.link-post-body h3{font-size:1em;font-weight:bold}.link-post{margin-bottom:3em}.link-post h2 a,.link-post a.link-post-link{color:#800004}.link-post-body{margin-top:0.25em}.link-post a{color:#500002}.post-body{margin-bottom:3em}.post-date{margin-top:0.75em;margin-bottom:0.75em;color:#888}.post-author{margin-bottom:0.75em;color:#888}.post-author a{color:#666}a{text-decoration:none;color:#800004;border-bottom:1px solid #ddd}a:hover{color:#cc0000;background-color:#eee;border:none}blockquote{border-left:10px solid #ccc;padding:0px 0.75em 0px 0.75em;margin:0px 3em 0px 0px}.site-blurb{color:#888;padding:3em}.site-blurb .emphasised{color:#333}.another-article{margin-top:0.75em;margin-bottom:0.75em;float:right}label{display:block}.social-link-box{float:right}.link-post-body .social-link-box{position:relative;top:-0.5em}.social-link{color:#888;position:relative;bottom:10px}.light{color:#888}.errorExplanation{color:#aa6666;border:1px solid #aa6666;padding:1em;-webkit-border-radius:0.5em;-moz-border-radius:0.5em;border-radius:0.5em;background-color:rgba(255,200,200,0.3);margin-bottom:1em}.errorExplanation h2{font-size:125%;color:#ee6666}h2{font-size:1.5em}table tr:nth-child(even) td{background:transparent}.light-callout{color:black;background-color:#fafad2;border:1px solid #aaa;opacity:0.6;filter:alpha(opacity=60);padding:0.5em;margin-bottom:0.5em}ol li{margin-bottom:0.25em}833 </style>834 <title>835 Play/life balance - swombat.com on startups836 </title>837 <meta content="authenticity_token" name="csrf-param">838 <meta content="F+eNuKPy/0Bpwot7ogd6VTylY/kmh9iNv3guXbV0uSOrrGcPoYV9GoYPhgUoSrh9QUDvk33TznkE+2Js/85QDA==" name="csrf-token">839 <!--[if lt IE 8]>840 841 <![endif]-->842 <meta content="authenticity_token" name="csrf-param">843 <meta content="jeyfuFQn9e+hOosKIAfOBaRz6SPk9t/pfbODXl7TvNQxp3UPVlB3tU73hnSqSgwt2ZZlSb+iyR3GMM9vFGlV+w==" name="csrf-token">844 <meta content="IE=8,chrome=1" http-equiv="X-UA-Compatible">845 </head>846 <body>847 <div class="container">848 <div class="span-16">849 <div id="header-image" onclick="document.location = '/'">850 <h1 style="display: none">851 swombat.com852 </h1>853 </div>854 <h2 id="header-byline">855 daily articles for founders856 </h2>857 </div>858 <div class="span-4" id="sidebar-left">859 <a>860 all posts861 </a>862 <br>863 <a>864 latest865 </a>866 <br>867 <br>868 <b>869 <a>870 founder's library871 </a>872 </b>873 <br>874 <br>875 <div align="right">876 <p class="light small hyphenate">877 <b>878 More recent articles of mine can be found on879 <a>880 danieltenner.com881 </a>882 </b>883 </p>884 <p class="light small hyphenate">885 Swombat.com is no longer actively maintained, but all the posts here are still available for your use. The original objective was to regularly summarise and comment on the best articles for founders each day, as well as occasionally post our my own thoughts and advice, so that you could read the most useful articles while focusing on building your own startup.886 </p>887 </div>888 </div>889 <div class="span-12" id="content">890 <div class="light-callout">891 Running a startup in the UK (or with a UK subsidiary)? Get in touch with my company,892 <a>893 GrantTree894 </a>895 . We help with government funding.896 </div>897 <div class="link-post">898 <a class="link-post-link">899 Play/life balance900 </a>901 902 <a class="s-link" id="post-447-s-link">903 ✶904 </a>905 <div class="link-post-body">906 <p>907 <a>908 Greg Bayer909 </a>910 :911 </p>912 <blockquote>913 <p>914 Working for a startup usually means putting in more hours than others. Â Recently, I spent two days on less than 3 hours of sleep in order to push out our new Pulse.me release.915 </p>916 <p>917 Chasing after dreams is an essential part of my life. Â The feeling of fulfillment I get from doing so makes me a much happier / more content person, and this in turn positively affects my relationships.918 </p>919 </blockquote>920 <p>921 I've argued before that922 <a>923 hours are not a measure of productivity924 </a>925 , but that's not Greg's claim in this post. He's saying, quite rightly, that working on your startup is not work, it's play - and so, unlike working stupid hours on a job, working stupid hours on a startup is a blessing, not a curse.926 </p>927 <p>928 I'm reminded of an old saying:929 </p>930 <blockquote>931 <p>932 Why work for someone else from nine to five for a daily wage, when you can work twenty-four hours a day for yourself for free?933 </p>934 </blockquote>935 <p>936 So which view is right?937 <em>938 is939 </em>940 worth pursuing with far more energy than the typical job - but life is what happens while you're busy working on your startup.941 </p>942 <p>943 I'll finish with an observation: I feel most happy, most rested, and most productive when I have had a solid 8 hours of sleep, starting and ending at the same time each day. This plus a good task list has more effect on my productivity than anything else - other than, perhaps, the pressure of an immediate deadline.944 </p>945 <p class="follow-callout">946 If you read this far, you should947 <a>948 follow me on twitter here949 </a>950 .951 </p>952 <div class="social-link-box">953 <a class="social-link">954 Retweet955 </a>956 <br>957 </div>958 <div style="clear:both">959 </div>960 </div>961 <!--div class="another-article">→ <a >Don&#39;t let me know how I can help</a></div-->962 <div class="post-date">963 Friday, 03 June 2011964 </div>965 <div align="right" class="another-article">966 <b>967 More from the968 <a>969 library970 </a>971 :972 </b>973 <br>974 →975 <a>976 Recruiting in the Valley: the recruiter honeypot977 </a>978 <br>979 →980 <a>981 The Startup resume982 </a>983 <br>984 →985 <a>986 Focus on the power users987 </a>988 <br>989 </div>990 </div>991 </div>992 <div id="corner-image">993 <noscript>994 <p>995 <img alt="Clicky" height="1" src="rick.jpg" width="1">996 </p>997 </noscript>998 </div>999 </div>1000 </body>1001</html>1002