@import 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800';
/*	IMAGE REPLACEMENT
	----------------------------------- */
.ir {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: transparent;
}
/*	CLEARFIX
	----------------------------------- */
.cf {
  *zoom: 1;
}
.cf:before,
.cf:after {
  display: table;
  content: "";
}
.cf:after {
  clear: both;
}
/*	BOX-SIZING

	The box-sizing CSS property is used to alter the default CSS box model used to 
	calculate widths and heights of elements. It is possible to use this property to 
	emulate the behavior of browsers that do not correctly support the CSS box model specification.

	Values:
		content-box | padding-box | border-box

	Default:
		border-box

	More Info:
		https://developer.mozilla.org/En/CSS/Box-sizing
	----------------------------------- */
/*	BOX-SHADOW

	The box-shadow CSS property accepts one or more shadow effects as a comma-separated list. 
	It allows casting a drop shadow from the frame of almost any element. 
	If a border-radius is specified on the element with a box shadow, the box shadow takes on the same 
	rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows 
	(the first specified shadow is on top).

	More Info:
		https://developer.mozilla.org/en/CSS/box-shadow
	----------------------------------- */
/*	BORDER-RADIUS MIXINS

	The border-radius CSS property allows Web authors to define how rounded border corners are. 
	The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.
	----------------------------------- */
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}
body {
  width: 520px;
  margin: 0 auto;
  font: 62.5% "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: url(../img/rough_diagonal.png) repeat;
  -webkit-font-smoothing: antialiased;
}
body #todoapp {
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-left-radius: 5px;
  -webkit-box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.2);
  background: #fff;
  padding: 20px;
  margin-bottom: 40px;
}
body #todoapp header h1 {
  font-size: 3.6em;
  font-weight: bold;
  text-align: center;
  padding: 0 0 10px 0;
  margin: 20px 0;
}
body #todoapp header #create-todo input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 2.4em;
  width: 100%;
  padding: 7px 10px;
  margin: 0;
}
body #todoapp div.content div#todos ul#todo-list {
  margin: 10px 0 0 0;
  list-style-type: none;
}
body #todoapp div.content div#todos ul#todo-list li {
  *zoom: 1;
  margin-left: -20px;
  margin-right: -20px;
  padding: 10px 20px;
}
body #todoapp div.content div#todos ul#todo-list li:before,
body #todoapp div.content div#todos ul#todo-list li:after {
  display: table;
  content: "";
}
body #todoapp div.content div#todos ul#todo-list li:after {
  clear: both;
}
body #todoapp div.content div#todos ul#todo-list li.editing {
  background: #DDD;
}
body #todoapp div.content div#todos ul#todo-list li.editing .view {
  display: none;
}
body #todoapp div.content div#todos ul#todo-list li.editing .edit-input {
  display: block;
}
body #todoapp div.content div#todos ul#todo-list li .edit-input {
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 2.2em;
  font-weight: normal;
  width: 100%;
}
body #todoapp div.content div#todos ul#todo-list li:hover {
  background: #EEE;
}
body #todoapp div.content div#todos ul#todo-list li input.edit-input {
  display: none;
}
body #todoapp div.content div#todos ul#todo-list li input[type=checkbox] {
  float: left;
  margin: 6px 5px;
}
body #todoapp div.content div#todos ul#todo-list li div.view {
  *zoom: 1;
  position: relative;
}
body #todoapp div.content div#todos ul#todo-list li div.view:before,
body #todoapp div.content div#todos ul#todo-list li div.view:after {
  display: table;
  content: "";
}
body #todoapp div.content div#todos ul#todo-list li div.view:after {
  clear: both;
}
body #todoapp div.content div#todos ul#todo-list li div.view span {
  float: left;
  width: 400px;
  margin-left: 10px;
  font-size: 1.7em;
  font-weight: 600;
  line-height: 1.3em;
  text-shadow: 0px 1px 0px #FFFFFF;
}
body #todoapp div.content div#todos ul#todo-list li div.view span small {
  display: block;
  font-size: .65em;
  font-weight: 300;
}
body #todoapp div.content div#todos ul#todo-list li div.view a.destroy {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background: url(destroy.png) no-repeat;
  background-position: 0px 0px;
}
body #todoapp div.content div#todos ul#todo-list li div.view a.destroy:hover {
  background-position: 0px -20px;
}
body #todoapp div.content div#todos ul#todo-list li div.view.done span {
  text-decoration: line-through;
}
body #todoapp div.content div#todo-stats {
  background: #CCC;
  margin: 1px -20px -20px -20px;
  padding: 10px 20px;
  *zoom: 1;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  border-bottom-left-radius: 4px;
}
body #todoapp div.content div#todo-stats:before,
body #todoapp div.content div#todo-stats:after {
  display: table;
  content: "";
}
body #todoapp div.content div#todo-stats:after {
  clear: both;
}
body #todoapp div.content div#todo-stats .todo-count {
  padding: 5px 0;
  text-shadow: 0px 1px 0px #FFF;
}
body #todoapp div.content div#todo-stats a#clear-completed {
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-bottomright: 20px;
  border-bottom-right-radius: 20px;
  -webkit-border-bottom-left-radius: 20px;
  -moz-border-radius-bottomleft: 20px;
  border-bottom-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topright: 20px;
  border-top-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  border-top-left-radius: 20px;
  float: right;
  font-weight: bold;
  background: #999;
  padding: 6px 12px 4px 12px;
  text-decoration: none;
  color: #FFF;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
body div#credits {
  text-align: center;
  color: #888;
  font-size: 1.4em;
  line-height: 1.4em;
}
body div#credits a {
  color: #000;
}