@import url("reset.css");
@import url("fonts/fonts.css");
@import url("buttons.css");

body { color: #333; background: #fff; font-family: "helvetica neue", helvetica, arial, sans-serif;}

a { text-decoration: none; color: #0C8480; font-weight: bold; }
a:hover { text-decoration: underline; }

#wrapper { 
	margin: 0 auto;
	width: 800px;
}

header { margin: 0 0 20px 0; background: #EEEEEE; }
	h1 {
		color: #fff;
		font-size: 2em;
		background: #0C8480;
		display: inline-block;
		zoom: 1; /* ie7 hack for display:inline-block */
		*display: inline;
		padding: 10px;
	}
		h1 a { color: #fff; }
			header a:hover { text-decoration: none; }
	.landing header { margin-top: 100px; }
		.landing .button { float: right; margin: 10px 156px 0 0; }

nav {
	width: 199px;
	float: left;
	padding: 10px 0 0 0;
}
	nav img { width: 179px; }
	nav h2 { margin: 20px 0 0 0; }
	nav ul { font-size: .8em; margin: 5px 0 0 10px; }
		nav li { padding: 5px; }

section { 
	float: left;
	width: 590px;
	min-height: 400px;
	padding: 0 0 10px 10px;
	border-left: 1px solid #DADADA;
}
	article {
		padding: 10px;
		border-bottom: 1px solid #DADADA;
		position: relative;
	}
	article.completed { border-right: 3px solid #8FBE00; }
	article.ongoing { border-right: 3px solid #E6222F; }
		article img { float: left; padding-right: 5px; height: 60px; width: 60px; }
		article p { margin: 5px 0; }
		article footer { font-size: .7em; display: inline; }
			article ul { list-style: none; }
				article li { display: inline; margin-right: 5px;}
		article aside {
			top: 10%;
			right: 0;
			width: 0;
			height: 80%;
			overflow: hidden;
			position: absolute;
			font-size: 3.3em;
			vertical-align: top;
			color: #fff;
			text-shadow: 0px 1px 1px #4d4d4d;
		}
		article.completed aside, article.completed figcaption { background: #8FBE00; }
		article.ongoing aside, article.ongoing figcaption { background: #E6222F; }
			article aside ul { padding-top: 10px\9; }
				article aside li { padding: 0 0 0 20px; padding-left: 10px\9; margin: 0; }
					article aside a {
						color: #fff;
						text-shadow: 0px 1px 1px #4d4d4d;
					}
					article aside a:hover { text-decoration: none; color: #E1E1E1;}
		article figcaption {
			position: absolute;
			bottom: 7px;
			left: 2px;
			/*left: 4px;*/
			text-align: center;
			padding: 3px 0;
			font-size: .6em;
			color: #fff;
			width: 63px;
			opacity: .9;
			-webkit-box-shadow: 1px -1px 3px rgba(50, 50, 50, 0.75);
			-moz-box-shadow: 1px -1px 3px rgba(50, 50, 50, 0.75);
			box-shadow: 1px -1px 3px rgba(50, 50, 50, 0.75);
		}
			article figcaption:after {
				content: ' ';
				position: absolute;
				width: 0;
				height: 0;
				left: 0px;
				top: -8px;
				border-width: 4px 4px;
				/*top: -6px;
				border-width: 3px 3px;*/
				border-style: solid;
			}
				article.completed figcaption:after { border-color: transparent #5B7900 #5B7900 transparent; }
				article.ongoing figcaption:after { border-color: transparent #8B101A #8B101A transparent; }
	#newItem { padding: 10px 0; }
	#newItemForm { text-align: center; }
		#itemGoal {
			border: 1px solid #DADADA;
			font-size: 1.2em;
			width: 85%;
			*width: 82%;
			padding: 6px;
			box-shadow: 0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
			-moz-box-shadow: 0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
			-webkit-box-shadow: 0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
			border-color: #C2C0C0 #CCCACA #D1CFCF;
			outline: none;
			box-sizing:border-box;
			-moz-box-sizing:border-box;
			-webkit-box-sizing:border-box
		}

footer {
	clear: both;
	font-size: .7em;
	margin: 10px 0;
}

.searchform {
	float: right;
	margin: 10px 20px 0 0;
}
.searchform .searchfield {
	padding: 6px;
	background: #fff;
	width: 183px;
	border: 1px solid;
	box-shadow: 0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
	-moz-box-shadow: 0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
	-webkit-box-shadow: 0 1px #fff, inset 0 1px rgba(34,25,25,0.05);
	border-color: #C2C0C0 #CCCACA #D1CFCF;
	outline: none;
}

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
 }
 
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */