engineyard/todo

body { background-color: #f8f8f8; color: #333; margin:0; padding:0; font-family:"Lucida Grande", helvetica, arial, sans-serif; font-size: 13px; line-height: 18px; }

h1,h2,h3,h4,h5,h6 { font-weight:normal; letter-spacing:-1px; margin:0; padding:0; margin-bottom:.7em; color:#777;}
ul, ol {margin:0; padding:0; list-style-position:inside;}
h2 {font-size:18px;}

#header {height:77px; background:#a00 url("/images/header.png") scroll repeat-x 0 0; position:relative; overflow:visible;}
#header h1 {color:#FFF; position:absolute; left:40px; top:20px; font-size:18px;}
#header h1 span.intro {display:block; font-weight:bold; margin-bottom:4px; font-size:22px;}
#header h1 span.intro span {font-weight:normal; font-size:.65em}
#header p.sample {color:#fff; margin:0; padding:0; position:absolute; top:30px; right:30px;}
#content { background:#f8f8f8 url("/images/clouds.png") scroll repeat-x 0 -5px; padding:50px 35px 0 35px;}
#foot {padding:0 35px; color:#888; max-width:1200px;}

#tabs {background:#fff; margin-top:20px; box-shadow: 0px 2px 5px #ccc; -moz-box-shadow: 0px 2px 5px #ccc; max-width:1200px;}
#tabs div.new-task {overflow:auto;}
#tabs div.new-task form {overflow:auto;}
#tabs div.split-fields { overflow:auto; padding:10px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;
  background:#bad5e8;
  background: -webkit-gradient(linear, left top, left bottom, from(#bad5e8), to(#80b2d3));
  background: -moz-linear-gradient(top,  #bad5e8,  #80b2d3);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bad5e8', endColorstr='#80b2d3');
}

#tabs div.split-fields div.field {float:left; width:80%; margin:0; padding:0; }
#tabs div.split-fields div.button {float:right; width:18%;}

#tabs div.split-fields div.field input {width:100%; font-size:16px; padding:4px; border:2px solid #def0fc; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; background:#def0fc;}
#tabs div.split-fields div.field input:focus {background:#FFF;}
#tabs div.split-fields div.button input {border:2px solid #80b2d3; border-radius:4px; background:#fff; color:#80b2d3; line-height:23px; height:34px; cursor:pointer; text-align:center; width:98%;}
#tabs div.split-fields div.button input:hover { color:#000; border-color:#500;}

#tabs p.delete-list {margin:0; padding:0; overflow:auto; margin-top:18px; font-size:11px;}
#tabs p.delete-list a { box-shadow:inset 0 0 4px #bbb; display:block; line-height:20px; background:#f3f3f3; color:#aaa;  float:right; width:100px; text-decoration:none; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding:2px 4px; text-align:center;}
#tabs p.delete-list a:hover {color:#FFF; background:#C00; }

ul.tasks {list-style-type:none; }
ul.tasks li { margin-bottom:.4em; padding:8px 9px; font-size:14px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; position:relative;

  background:#dedede;
  background: -webkit-gradient(linear, left top, left bottom, from(#bad5e8), to(#c9e1f2));
  background: -moz-linear-gradient(top,  #bad5e8,  #c9e1f2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bad5e8', endColorstr='##c9e1f2');
}

ul.tasks li p.delete-task {position:absolute; top:9px; right:9px; margin:0; padding:0; line-height:1em;}
ul.tasks li p.delete-task a {text-decoration:none; display:block; padding:2px 4px; background:#73a0bc; color:#FFF; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;}
ul.tasks li p.delete-task a:hover { background:#8ab5d1;}

ul.finished-tasks li p.delete-task a {background:#d5d5d5; color:#aaa;}
ul.finished-tasks li p.delete-task a:hover {background:#bbb; color:#666;}
ul.finished-tasks li p.delete-task {position:absolute; top:6px; right:6px; margin:0; padding:0; line-height:1em;}
ul.finished-tasks li {
  font-size:11px;
  color:#999;
  padding:5px 9px;
  background: #eee;
  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
  background: -moz-linear-gradient(top,  #f5f5f5,  #eee);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#eee');
}

ul.pending-tasks { margin:20px 0; }
ul.pending-tasks div.boolean { display:inline; }

.hidden{ display:none; }

p#alert {background:#C00; margin:0; padding:6px 10px; color:#FFF; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; }

.logo { width: 250px; height: 54px; float: left; padding-top: 15px; }
.copyright { font-size:11px; line-height:1.3em; width:300px; float:right; }
.copyright a {color:#369;}

/* Overrides */
#tabs .ui-widget-header {border-color:#ccc !important;}
#tabs div.tab {padding:14px !important;}
#tabs .ui-tabs-selected a {color:#000 !important; font-weight:bold;}
#tabs .ui-tabs-nav {font-size:11px; padding-left:10px; padding-top:10px; -webkit-border-radius:0; border-radius:0;}