/* @group base */

/* @group -reset */
/* This area resets many existing styles that browsers have, and makes the whole stylesheet easier to work with */

*{margin:0; padding:0}
html,body , 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, .btn{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
a img, frameset{border:0}
q:before, q:after{content:""}
q{quotes:"" ""}

q:before, q:after{content:""}
q{quotes:"" ""}
a img{border:none}
iframe{margin: 10px 0}

/* @end */

/* @group -utility */
/* Utility styles, like clearfix, that are useful and re-useable */

a img, frameset{border:0}
.clearfix:after, .col:after, .wrap-outer:after, .wrap-inner:after, form:after, form .form-field:after, form .form-field .multi-field:after, form .wide-label:after, #header:after, #footInner:after, #page:after, #content:after, #aside:after, .section:after, .colOuter:after, .tabNav:after {content:".";display:block;height:0;clear:both;visibility:hidden}
.clear{clear:both}
.left{float:left !important}
img.left, a.left img{margin:0 16px 16px 0}
.right{float:right !important}
img.right, a.right img{margin:0 0 16px 16px}
img.border { border: 1px solid #6e6e6e;}
.hide{display:none}
.small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em}
.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em}
.skip-nav{display:none}
.caption { font-size: .833em; /* 10px, if parent is 12px */ margin: 10px 0 0 0}
.highlight { color: #cb262d; }
img.frame { padding: 5px; background-color: #fff; }
.margin-bottom { margin-bottom: 2em; }
.noborder{ border: none !important; }
.nobg { background-image: none !important;}
.nomargin { margin: 0 !important;}

/* @end */

/* @group -fonts */

body, textarea {
 font-family: Times New Roman, Times, Georgia, serif;
}
.listToDo-status {
	font-family: Helvetica, Arial, sans-serif;
}

/* @end */

/* @group -headers */
h1, h2, h3, h4, h5, h6 { 
  margin: 0 0 1em 0;
}
h1 {
  font-size: 30px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 17px;
}
h4 {
  font-size: 15px;
}
h5 {
  font-size: 13px;
}
h6 {
  font-size: 12px;
}
/* @end */

/* @group -links */

a{color:#FF0000; text-decoration:none}
a:focus, a:hover{color:#000;text-decoration:underline}

/* @end */

/* @group -lists */
ul {
  margin: 15px 0 15px 30px;
  position: relative;
}
ol {
  margin: 15px 0 15px 50px;
}
ul li {
  position: relative;
}
li {
  margin: 0 0 5px 0;
}
/* @end */

/* @group -text markup */
p{margin:0 0 .75em}
p img{margin:0.5em 0 }
p img.right{float:right;margin:0 0 1.5em 1.5em}
p.center{ text-align: center; }
strong{font-weight:bold}
em, dfn{font-style:italic}
dfn{font-weight:bold}
sup, sub{line-height:0}
abbr, acronym{border-bottom:1px dotted #666; letter-spacing:0.1em}
address{margin:0 0 1.5em;font-style:italic}
del{color:#666}
pre, code{margin:1.5em 0;white-space:pre}
pre, code, tt{font:1em 'andale mono', 'lucida console', monospace;line-height:1.5}
blockquote {
  margin: 0 0 10px 0;
}

/* @end */

/* @group structure */

body {
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  background-color: #E3E3E3;
  color: #453F34;
}
#page {
	margin: 100px auto;
	background-color: #fff;
	text-align: left;
	width: 350px;
}

/* @group -header */

#header {
	margin: 30px 30px 5px 30px;
	background: url(../images/struct/bg-tinyBorder.png) bottom left repeat-x;
	text-align: center;
	padding: 35px 0 10px;
}
#header h1 {
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1px;
}
#hdToDo {
	width: 201px;
	height: 45px;
	text-indent: -9999px;
	background-color: red;
	margin: 0 auto 10px;
}
#hdToDo a {
	background: url(../images/struct/bg-hdToDo.png) 0 0 no-repeat;
	width: 201px;
	height: 45px;
	text-indent: -9999px;
	display: block;
	outline: none;
}
/* @end */

/* @group -content*/

#content {
  padding: 30px 30px 30px 30px;
}
.listToDo {
	list-style-type: none;
	margin-bottom: 0;
}
.listToDo-item {
	line-height: 20px;
	font-size: 13px;
	text-transform: uppercase;
	padding: 0 0 10px 12px;
	letter-spacing: .5px;
}
.listToDo-status {
	width: 21px;
	height: 11px;
	float: left;
	margin-left: -40px;
	position: relative;
	top: 5px;
  text-align: center;
  overflow: hidden;
  font-size: 7px;
  font-weight: 700;
  line-height: 11px;
  padding: 0 3px;
}
.listToDo-done {
	text-indent: -9999px;
	background: #fff url(../images/struct/bg-listToDo-done.png) 0 0 no-repeat;
}
.listToDo-pending {
  background-color: #E3E3E3;
  color: #B7B7B7;
}
.listToDo-item ul {
	list-style-type: square;
	margin: 10px 10px 5px 15px;
	font-size: 10px;
}
/* @end */

/* @group -footer */

#footer {
	background: url(../images/struct/bg-tinyBorder.png) top left repeat-x;
	padding: 20px 0 5px;
	margin: 0 30px 15px 30px;
}
#footAuthor {
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1px;
}

/* @end */

/* @group pages */

.pageHome {
	background: url(../images/backgrounds/bg-pageHome.jpg) top center repeat-x;
}
.pageHome a {
	color: #ff0000;
}
.pageHome #hdToDo {
	background-color: #453F34;
}

.pageCode {
	margin-top: 100px;
	margin-bottom: 100px;
	background: #191919 url(../images/backgrounds/bg-pageCode.jpg) top center no-repeat;
}

.pageCode #hdToDo {
	background-color: #191919;
}

/* @end */