html, body {
    margin:0;
    padding:0;
    background:#f2f2f2;
    
    font-size:10px;
    font-family:"Oswald",sans-serif;
}

a {
    color:#33f;
}

#wrap {
    width:100%;
    max-width:740px;
    margin:20px auto 0 auto;
    padding:0 10px;
    
    box-sizing:border-box;
}

#import {
    display:block;
}

#import.inactive { display:none; }

#import .overlay:before {
    display:block;
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    
    background:rgba(255,255,255,.95);
    z-index:99;
}


#importf {
    position:absolute;
    width:300px;
    height:250px;
    top:calc(50% - 125px);
    left:calc(50% - 150px);
    
    z-index:111;
    text-align:center;
}


#importf h2 {
    font-size:3em;
}


#addtodo {
    max-width:500px;
    width:100%;
    margin:0 auto;
}

#addtodo input {
    width:100%;
    font:1.9em/1.6em "Oswald",sans-serif;
    padding:3px 5px;
    box-sizing:border-box;
}

::-webkit-input-placeholder {
   text-align:center;
}
::-moz-placeholder {
   text-align:center;
}
:-moz-input-placeholder {
   text-align:center;
}

.td-list {
    padding:0;
    
    font-size:1.75em;
    line-height:1.3em;
    
    list-style-type:none;
}

.finished.visible {
    display:block;
}

.finished {
    display:none;
}

#toggle-finished {
    content:'Done';
    display:block;
    margin-top:4em;
    padding-bottom:1em;
    text-align:center;
    
    font-size:1.85em;
    line-height:1em;
    color:#77a;
    
    cursor:pointer;
}

#toggle-finished:before {
    content:'±';
    display:inline-block;
    margin-right:10px;
    font-size:1.55em;
    
    color:#111;
}


.td-list li {
    position:relative;
    min-height:20px; 
    margin-bottom:.55em;
    padding: 10px 80px 10px 90px;
    
    background:#f6f6f6;
    color:#333;
    border-top:2px solid #b9b9b9;
    border-bottom:2px solid #a9a9a9;
    box-sizing:border-box;
}

.td-list li h2 {
    padding:0;
    margin:0;
    
    font-size:1em;
    line-height:1.1em;
    font-weight:100;
    hyphens:auto;
    -webkit-hyphens:auto;
}

.td-list li:nth-of-type(2n) {
    background:#f9f9f9;
}

.desc {
    padding-top:5px;
    font:100 .95em/1.2em "Open Sans",sans-serif;
    
    hyphens:auto;
}

.actions {
    height:100%;
    top:0;
    left:0;
    right:0;
    font-size: 40px;
    line-height: 40px;
    
    color:#777;
}

.mark-done,
.mark-delete {
    position:absolute;
    top:0;
    bottom:0;
    display:block;
    
    width:75px;
    
    background:rgba(0,0,0,.05);
    box-sizing:border-box;
    
    text-align:center;
}

.mark-done:hover,
.mark-delete:hover {
    background:rgba(155,155,155,.05);
    color:#000;
}

.mark-delete:hover {
    color:#a00;
}

.mark-done {
    left:0;
}

.mark-delete {
    right:0;
    font-size:60px;
}



.mark-done:after {
    content:'✔';
    display:block;
    height:40px;
    transform: translateY(calc(50% - 20px));
}

.finished .mark-done:after {
    content:'↩';
}

.mark-delete:after {
    content:'×';
    display:block;
    height:40px;
    transform: translateY(calc(50% - 25px));
}

.mark-done:hover,
.mark-delete:hover {
    cursor:pointer;
}

.edit-form {
    display:none;
    padding-left:40px;
    box-sizing:border-box;
}

.edit-form input[type="text"],
.edit-form textarea {
    padding:2px 5px;
    box-sizing:border-box;
}

.edit-title {
    display: block;
    width: 100%;
    max-width: 500px;
    font-size: 1.1em;
}

.edit-desc {
    width:100%;
    min-height:100px;
    margin-top:10px;
    max-width:500px;
    font-size:1em;
}


.edit-submit {
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

.close-inline {
    position: absolute;
    top: 12px;
    left: 85px;
    cursor: pointer;

}

.close-inline:after {
    display:block;
    content:'✖';
    font-size:1.3em;
    color:#a00;
}

.active-edit h2,
.active-edit .desc {
    display:none;
}

.active-edit .edit-form {
    display:block;
}

#bottom {
    width:100%;
    margin:50px 0;
    
    text-align:center;
    
    font-size:1.4em;
}

#bottom a {
    display:inline-block;
    margin-right:15px;
    text-decoration:none;
}