@import url("reset.css"); 

/*	GLOBAL GENERAL STYLES */

		body { font-family: Helvetica, Arial, sans-serif; font-size: 62.5%; position: relative; background: #aacca5 url('../../images/diag-stripes2.png');}


		h1 { font-size: 1.5em; color: #7f9bbe; border-bottom: 1px solid #a1c79b; text-shadow: 0 2px 2px rgba(0, 0, 0, .15); padding-bottom: .25em; letter-spacing: -.05em;}
		h2 { font-size: 1.28571428571428571428em; color: #404040; color: rgba(0, 0, 0, .75); text-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
		
		a { color: #7f9bbe; color: rgba(127, 155, 190, 1); text-decoration: underline; }
		a:hover { text-decoration: none; }
		
	
		.group:after {
		    content: ".";
		    display: block;
		    height: 0;
		    clear: both;
		    visibility: hidden;
		}
		
		.group { zoom: 1; }
		
		.wrap { width: 920px; margin: 0 auto; position: relative; height: 100%; padding: 0 10px;}
		
		.error { color: #C00; padding: .5em 0;}
		.success { padding: .5em 0; font-weight: bold; text-align: center; }
		


		#head, #foot { clear: both; }
		#head { height: 90px; font-size: 1.2em; }
		#head h1 { position: absolute; left: 0; bottom: -23px; width: 325px; height: 100px; z-index: 1; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; border: none; }
		#head h1 a { display: block; background: transparent url('../../images/todootz-logo.png') 0 0 no-repeat; text-indent: -9999px; width: 100%; height: 100%; }
		
		#foot { padding-top: 2em; border-top: 1px solid #999; border-top: 1px solid rgba(0, 0, 0, .5); padding: 30px 0; color: #191919; color: rgba(0, 0, 0, .9); font-size: 1.2em; line-height: 1.25;}
		#foot #foot-nav { float: left; width: 50%; }
		#foot p { margin-bottom: .75em; line-height: 1.3; }
		#foot a { color: #191919; color: rgba(0, 0, 0, .9); }
		#foot #twitter { float: right; width: 50%; }
		#foot #twitter h4 { font-size: 1.16666666666666666666em; background: transparent url('../../images/twitter_48.png') right top no-repeat; float: left; padding: 18px 48px .5em 0; margin-top: -18px; }
		#foot #twitter em { display: block; clear: left; }
		#foot #twitter-feed { margin-top: .5em; }
		
		#foot .twittList li { margin-bottom:0.5em; padding-left:1em; text-indent:-1em; }
		
		
		
		#wrap { position: relative; width: 100%; background: #EEE url('../../images/wrap-bkgd.gif') 0 0 repeat-x; -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, .5); box-shadow: 0 -1px 3px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, .5); z-index: 1; border-top: 1px solid #999; border-top: 1px solid rgba(0, 0, 0, .5); z-index: 10; padding-bottom: 2em; color: #666;}

		#list-wrap { font-size: 1.4em; position: relative; padding-top: 1.5em; }
		#list-wrap ul { list-style-type: none; margin: 1em 0; padding: 0; }
		
		.editable form { display: inline; }
		.inline-label { position: relative; }
		.inline-label label { position: absolute; left: 6px; top: 6px; z-index: 1; font-size: 11px; color: #999; }
		
		
/*		.delete-confirm { position: absolute; top: 50%; left: 50%; width: 350px; height: 100px; margin-left: -175px; margin-top: -50px; background: #FAFAFA; color: #C00; padding: 2em 2em 0; text-align: center;  font-size: 1.4em; line-height: 1.4; border: 2px solid #CCC; z-index: 1000; }*/
		.delete-confirm p { margin-bottom: 1em; }
		.delete-confirm button { margin: 0 .5em; }
		.delete-confirm .buttons { text-align: center; }
		
		
		#simplemodal-overlay { background-color: #404040; background-color: rgba(0, 0 ,0, .75); }
		#simplemodal-container { background-color: #FFF; border: 2px solid #999; }
		#simplemodal-data { margin: 2em; color: #c00; font-size: 1.4em; width: 300px; font-weight: bold; line-height: 1.3;}
		#simplemodal-container a.modalCloseImg {
			background:url('../../images/x.png') no-repeat;
			width:25px;
			height:29px;
			display:inline;
			z-index:3200;
			position:absolute;
			top:-15px;
			right:-18px;
			cursor:pointer;
		}


/*	INDIVIDUAL LIST STYLES */

		/* New Item Box */
		
		#new-item { background-color: #bfcdde; background-color: rgba(127, 155, 190, .5); border: none; width: 600px; padding: 10px; margin-bottom: 1em; 
			border-radius: 			.5em; 
			-webkit-border-radius: 	.5em; 
			-moz-border-radius: 	.5em;
			-webkit-box-shadow: 	0 0 4px rgba(0,0,0,.5);
			-moz-box-shadow: 		0 0 4px rgba(0,0,0,.5);
			box-shadow:				0 0 4px rgba(0,0,0,.5);
		}
		
		#new-item h2 { color: #191919; color: rgba(0, 0, 0, .9); text-shadow: 0 2px 1px rgba(255, 255, 255, .5); padding-bottom: .25em; }

		#new-item input, #new-item textarea { width: 100%; height: 20px; outline: none; background: none; border: 1px solid #999; font-size: 13px; background-color: #FFF; }
		#new-item textarea { height: 3em; }
		#new-item .new { position: relative; margin-bottom: .5em; }
		#new-item label { position: absolute; left: 1em; top: 8px; font-size: .75em; color: #999;}
		
		#new-item .list-item-title, #new-item .list-item-tags { float: left; width: 285px; }
		#new-item .list-item-title { margin-right: 20px; }
		#new-item .list-item-tags { padding-left: 0; }
		#new-item .list-item-notes { clear: both; width: 520px; float: left; margin-bottom: 0; }
		
		#new-item .list-item-title label, #new-item .list-item-notes label { /*left: 5em;*/ }
		#new-item #insert { color: #666; width: 60px; margin-left: 10px; float: left; height: 24px; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
		#new-item #insert:hover { background-color: #efefef;}


		
		/* List Items */
		
		.list-container { float: left; width: 600px; clear: left; border: 1px solid #CCC; -moz-border-radius: 10px; border-radius: 10px; padding: 10px; background: #FFF; }

		#list-title { margin: 0 0 .5em; font-size: 1.2em; }
		

		.list { padding: 10px; background: #eee; 
			border-radius: 			.5em; 
			-moz-border-radius:		.5em; 
			-webkit-border-radius:	.5em;
			
			-webkit-box-shadow: 	0 0 4px rgba(0,0,0,.5);
			-moz-box-shadow: 		0 0 4px rgba(0,0,0,.5);
			box-shadow:				0 0 4px rgba(0,0,0,.5);
		
		}

		#list-items>li, #completed-items>ul>li { margin: 0; padding: 8px 0 5px 40px; border-bottom: 1px solid #999; position: relative; }
		
		ul.list-item-tags { margin: .5em 0 0; font-size: .8571em;  display: none; float: left; clear: left; }

		.list-item { overflow: hidden; }
		.list-item.active { background-color: #FFC;}
			
			#list-items .list-item.active ul.list-item-tags { display: block; }
			#list-items .list-item.active .list-item-tools .list-item-delete { display: block; }
			
		.list-item .list-item-title { text-shadow: 0 1px 2px rgba(255, 255, 255, 1); float: left; font-weight: bold; max-width: 330px; }

		.list-item-tags li { float: left; margin-right: .5em; }
		.list-item-tags a { color: #FFF; display: block; background: transparent url('../../images/tag-buttons.png') top right no-repeat; height: 14px; padding: 4px 15px 2px 6px; text-align: right; display: block; float: left; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, .3); -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
		.list-item-tags a.tag-delete { display: block; float: left; width: 20px; height: 0; padding: 20px 0 0; overflow: hidden; text-indent: -9999px; background: transparent url('../../images/tag-buttons.png') 0 0 no-repeat; }
		.list-item-tags li.highlight a { background-position: 100% -19px; }
		.list-item-tags li.highlight a.tag-delete { background-position: 0 -19px;}

		.new-tag form { display: inline; }
		.new-tag { position: relative; }
		.new-tag label { position: absolute; left: 1em; top: 6px; font-size: .75em; color: #999; }
		.new-tag input { width: 150px; }
		
		#list-items .list-item-notes, #completed-items .list-item-notes { clear: left; float: left; font-size: .857em; font-style: italic; clear: both; padding-top: .5em; color: #666; font-weight: normal; }
		#list-items .list-item-notes.empty, #complted-items .list-item-notes.empty { display: none; }
		#list-items .list-item.active .list-item-notes.empty, #completed-items .list-item.active .list-item-notes.empty { display: block; }
		
		#list-items .list-item-tools, #completed-items .list-item-tools { position: absolute; left: 5px; top: 0; width: 30px; height: 100%; /*text-align: right; *//*display: none; */}
		#list-items .list-item-tools a, #completed-items .list-item-tools a { width: 24px; height: 24px; display: block; text-indent: -9999px; background: transparent url('../../images/tool-icons.png') 0 0 no-repeat; }

		#list-items .list-item-complete { background-position: 0 0; }
		#list-items .list-item-complete:hover { background-position: 0 -24px; }
		
		#list-items .list-item-tools .list-item-delete, #completed-items .list-item-tools .list-item-delete { background-position: 0 -48px; display: none; }
		.list-item.highlight { background-color: #FFF; }
			.list-item.highlight .list-item-title { text-shadow: 0 1px 5px rgba(0, 0, 0, .3); }
			.list-item.active.highlight .list-item-title { text-shadow: none; }

		.list-item .close-item { position: absolute; top: 0; right: 5px; display: none; z-index: 5; }
		.list-item.active .close-item, .list-item.highlight .close-item { display: block; }
		.list-item.highlight .close-item a { background: transparent url('../../images/tool-icons.png') 0 -120px no-repeat; text-indent: -9999px; display: block; width: 24px; height: 24px; }
		.list-item.active .close-item a { background: transparent url('../../images/tool-icons.png') 0 -96px no-repeat; text-indent: -9999px; display: block; width: 24px; height: 24px; }



		/* first tag */

		.first-tag { float: right; margin-right: 40px; margin-top: -5px; font-size: 0.8571em;}
		.first-tag a { color: #FFF; display: block; background: transparent url('../../images/tag-buttons.png') top right no-repeat; height: 14px; padding: 4px 15px 2px 6px; text-align: right; display: block; float: left; text-decoration: none; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, .3); -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
		.first-tag .tag-end { background: transparent url('../../images/tag-buttons.png') -20px 0 no-repeat; width: 10px; height: 0; padding: 20px 0 0; overflow: hidden; }
		
		.list-item.active .first-tag { display: none; }
		
		

		/* end first tag */

		
		
		
			
		#remaining-items { margin-bottom: 10px; }
		
		
		
		/*	Tags Box */
		#list-tags { width: 220px; float: right; max-height: 600px; overflow-y: auto; }
		#list-tags li { display: block; margin-bottom: .35em; }
		


		/* Completed Items */
		#completed-items h3 { position: relative; }
		#toggleItems { position: absolute; right: 0; text-align: right; font-size: .75em; font-weight: normal; }
		#completed-items ul { width: 100%; display: none; }
		#completed-items>ul>li { color: #666; }
		#completed-items .list-item-tools .list-item-incomplete { background-position: 0 -24px; }
		#completed-items .list-item-tools .list-item-incomplete:hover { background-position: 0 0; }
		#completed-items del { text-decoration: none; }
		
		#completed-items .list-item.active { padding-bottom: 2em; }
		#completed-items .list-item.active .list-item-tools .list-item-delete { display: block; }

		
		
		
		
		
		/*	Account Box	*/
		
		#account-info { background: #FFF; position: absolute; bottom: -1px; right: 10px; padding: 1em 1.5em .75em; z-index: 15; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .5); border-bottom: none;
			border-top-left-radius: 				1em;
			border-top-right-radius:				1em;
			-webkit-border-top-left-radius: 		1em;
			-webkit-border-top-right-radius:		1em;
			-moz-border-radius-topleft:		 		1em; 
			-moz-border-radius-topright: 			1em; 
			
			box-shadow: 0px -2px 2px rgba(0, 0, 0, .5);
			-moz-box-shadow: 0px -2px 2px rgba(0, 0, 0, .5);
			-webkit-box-shadow: 0px -2px 2px rgba(0, 0, 0, .5);
			
		}
		
		#account-info a { color: #191919; color: rgba(0, 0, 0, .9); }
		
		
		#account-info h3 { float: left; color: #191919; color: rgba(0, 0, 0, .9); padding-right: 1em; }
		#account-info div { float: left; }
		#account-info div h4 { display: inline; padding-right: 1em; }
		#account-info #my-lists { display: none; margin: 0; padding: 1em 1.5em; position: absolute; top: 2em; left: -1px; right: -1px; z-index: 20; background: #FFF; border: 1px solid #999; border-top: none; /*width: 198px;*/ 
			
			border-bottom-left-radius: 				1em;
			border-bottom-right-radius:				1em;
			-webkit-border-bottom-left-radius: 		1em;
			-webkit-border-bottom-right-radius:		1em;
			-moz-border-radius-bottomleft:		 	1em; 
			-moz-border-radius-bottomright: 		1em; 
			
		}
		#account-info #my-lists li { margin: 0 0 1em; padding: 0; }
		#account-info #my-lists li a { background: transparent url('../../images/application_view_list.png') 0 0 no-repeat; padding: 1px 0 1px 20px; }
		#account-info #my-lists li a#new-list-toggle { background: transparent url('../../images/add.png') 0 0 no-repeat; padding: 1px 0 1px 20px;}
		#account-info #add-new-list { display: none; padding-top: .5em;}
		#account-info #add-new-list div, #account-info form { height: 2em; }
		#account-info input[type='text'] { width: 120px; }
		#account-info #my-lists li a#new-list-cancel { display: none; background: none; padding: 0; }
		#account-info .error { padding-top: .5em; display: block; }
		
		
		
		
		
		
		/*	My Lists Styles */
		
		ul#lists { width: 600px; border-top: 1px solid #CCC; padding-top: .5em; }
		ul#lists li { margin-bottom: .5em; border-bottom: 1px solid #CCC; padding-bottom: .5em; }
		ul#lists li a { float: left; }
		ul#lists li a.delete-list, ul#lists li a.rename-list, ul#lists li a.cancel { float: right; }
		
		.count, .delete-list, .rename-list, .cancel { float: right; font-size: .85714285714285714285em; color: #999; }
		.remaining, .delete-list, .rename-list, .cancel { border-right: 1px solid #CCC; padding-right: 1em; margin-right: 1em; }
		.remaining, .completed, .delete-list { background: transparent url('../../images/tool-icons.png') 0 0 no-repeat; padding: 2px 1em 2px 2.5em; }
		.remaining { background-position: 0 -4px; }
		.completed { background-position: 0 -28px; }
		.delete-list { background-position: 0 -52px; text-decoration: none; padding-left: 2em; }
		.delete-list:hover { text-decoration: underline; }
		.count span span { display: none; }
		.rename-list, .cancel { padding: 2px 1em;}
		
		#list-name { width: 560px; }
		
		#new-list { margin-top: 1em; }
		#new-list h4, #new-list p { margin-bottom: .5em; }
		
		
		
		
		/* Home Page Styles	*/
		#app-intro { float: left; width: 590px; /*color: #fff;*/ padding: 10px; }
		#home #user { float: right; width: 270px; background-color: #bfcdde; background-color: rgba(127, 155, 190, .5); padding: 10px; -border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
			#sign-up { margin-bottom: 10px; }
		#home #log-in { border-bottom: 1px solid #FFF; border-bottom: 1px solid rgba(255, 255, 255, .8); padding-bottom: .5em; }
		
		#app-intro h1, #home h2 { margin-bottom: 1em; }
		#home p { margin-bottom: .75em; line-height: 1.3; }
		
		#user h2 { margin: 1em 0 .5em;}
		
		#user .form-row { margin-bottom: .25em; }
		#user .form-row.error { padding-top: 0; }
		#user .form-row input { width: 260px; }
		#user input[type='submit'] { float: right; margin-top: .5em;}
		#user .form-row.error label { color: #c00; }
		
		#user input#reg-email { width: 225px; }
		#user #signup-email input[type='submit'] { margin-top: 0; width: auto; }
		
		

		
		/*	Settings Page	*/
		
		#settings #password, #settings #email { width: 280px; float: left; margin-right: 20px; background-color: #bfcdde; background-color: rgba(127, 155, 190, .5); padding: 10px; color: #404040; color: rgba(0, 0, 0, .75); margin-top: 1em; border: 2px solid #bfbfbf; border: 2px solid rgba(0, 0, 0, .25); 
			
			-moz-border-radius:		1em;
			-webkit-border-radius:	1em;
			border-radius:			1em;
			
		}
		
		#settings #list-wrap { margin-bottom: 2em; }
		
		#settings #list-wrap label { width: 100px; margin-right: 1em; font-size: .85714285714285714285em; float: left; text-align: right; padding-top: 6px; }
		#settings #list-wrap input[type='text'], #settings #list-wrap input[type='password'] { width: 160px; }
		#settings #list-wrap h3 { margin-bottom: .5em; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, .9); -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, .9); }
		
		#settings input[type='submit'] { float: right; margin-top: 1em; }
		#settings #list-wrap label.checkbox { width: auto; cursor: pointer; }
		#settings input[type='checkbox'] { margin-right: .5em; margin-left: 1em; }
		
		
		
		
		
		
		#twitter-feed .time { color: #666; }