html,body {height:100%;}

body {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #eeeeee 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #eeeeee 0%,#ffffff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #eeeeee 0%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #eeeeee 0%,#ffffff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	font-size:18px;
}

header,footer {
	color:rgba(22,147,165,.6);
	text-align:center;
	padding:10px 0;
}

header,section,footer {
	margin:0 auto;
	max-width:360px;
}

a {
	color:rgba(22,147,165,.6);
	text-decoration:none;
}
a:hover {
	color:rgba(22,147,165,1);
}

/* title */
hgroup {line-height:.8;}
hgroup a {color:rgba(22,147,165,.6);}
hgroup a:hover {color:rgba(22,147,165,1);text-decoration:none;}
h1,h4 {margin:0;}
h1 i {margin:0 0 0 2px;position:relative;top:2px;}
h3 {font-size:16px;}
h4 {font-size:9px;font-weight:400;margin:1px 0 0 0;}

h2.title {
	font-size:16px;font-weight:normal;text-align:center;margin:5px 0;
	padding:0;
}

/* SECTION */

.notfound {text-align:center;}
.index {text-align:center;}
.index .icon-play-circle {font-size:96px;}

.timer {
	text-align:center;
}

.segments ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

.segments .time_logged {
	color:rgba(22,147,165,1);
	display:inline-block;
	font-weight:bold;
	min-width:60px;
	margin-right:10px;
	font-family:'courier',sans-serif;
}

.segments .time_logged .seconds, .seconds {
	background:rgba(22,147,165,.15);
	border-radius:3px;
/*	box-shadow:1px 1px 0 rgba(0,0,0,.2);*/
	color:rgba(22,147,165,1);
	display:inline-block;
	font-size:12px;
	font-style:normal;
	font-weight:normal;
	margin:0 3px;
	padding:2px 2px 1px;
	position:relative;
	bottom:1px;
	text-transform:uppercase;	
}
.segments li:first-child .sep {font-size:18px;position:relative;top:-12px;margin:0 2px 0 1px;}
.segments li:first-child .seconds {position:relative;bottom:3px;opacity:1;}

.segments .timer {
	position:absolute;
	left:-23px;
	top:50%;
	margin-top:-10px;
}

.segments li:nth-child(2) {
	border:0;
}

.segments li {
	background:#fff;
	border-top:1px solid rgba(0,0,0,.04);
	box-shadow:1px 1px 1px rgba(0,0,0,.2);
	padding:8px 8px 6px;
	position:relative;
	line-height:1.3;
	margin:0 25px;
}

.segments li span {
	
}
.segments .memo {
	padding:0;
}

.segments li .timer a {color:rgba(22,147,165,.3);}
.segments li .timer a:hover i {
	font-size:22px;
	margin-left:-3px;
	-moz-transition:all 250ms ease-in-out;
	-webkit-transition:all 250ms ease-in-out;
	-o-transition:all 250ms ease-in-out;		
	transition:all 250ms ease-in-out;
	color:rgba(22,147,165,1);
}

li.heading + li {border-top:0;}
.segments li.heading,
.segments li.total {
	background:none;
	border:0;
	box-shadow:none;
	margin-top:10px;
	margin-bottom:0;
	padding:0;
}
.segments li.heading h3 {
/*	background:#fff;
	box-shadow:1px 1px 1px rgba(0,0,0,.1);*/
	padding:3px 5px 2px;
	margin:0;
	font-weight:normal;
	text-transform:uppercase;
	font-size:12px;
	font-family:courier,sans-serif;
	display:inline-block;
}

.segments li.total {
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color:rgba(0,0,0,.7);
}
.segments li.total .seconds {color:rgba(0,0,0,.7);background:none;position:static;padding:0;display:inline;margin:0;font-size:10px;}
.segments li.total .seconds:before{content:":";}
.segments li.total strong {font-size:12px;text-transform:uppercase;}
.segments li.total i {color:rgba(22,147,165,.7);margin:0 5px;}

.segments li:first-child {
	margin-bottom:10px;
	background:none;
	border:0;
	text-align:center;
	box-shadow:none;
	font-size:48px;
	padding:8px 0 6px;
	margin:0;
}

.segments li.nofocus {
	margin:15px 0 0;
}
.segments li.nofocus + li.heading {
	margin-top:0;
}

.segments li:first-child span {
	padding-bottom:0;
	cursor:default;
}

.segments li:first-child .seconds {
	font-size:18px;
	font-weight:bold;
	line-height:16px;
	padding-top:4px;
}
.segments li:first-child .timer i,
.segments li:first-child i.icon-stop {
	font-size:42px;
}
.segments li:first-child .timer a:hover i {font-size:42px;margin-left:0;}

.segments li span > .icon-pencil {display:none;}
.segments li:first-child span > .icon-pencil {display:inline-block;}

.segments li:first-child .timer {position:static;left:0;}
.segments li:first-child .timer a {color:rgba(22,147,165,.8);}
.segments li:first-child .memo {display:block;font-size:18px;}
.segments li:first-child a {opacity:1;}
.segments li:first-child .time_logged {color:#222;min-width:0;margin-right:0;}

.segments .delete {
	position:absolute;
	right:-23px;
	top:50%;
	margin-top:-10px;
}
.segments li.deleting {
	background-color:rgba(204,0,0,.5);
	-moz-transition:background-color 200ms ease-in-out;
	-webkit-transition:background-color 200ms ease-in-out;
	-o-transition:background-color 200ms ease-in-out;
	transition:background-color 200ms ease-in-out;			
}

.segments .delete a {opacity:0;}
.segments li:hover .delete a {color:#c00;opacity:.3;}
.segments li:hover .delete a:hover {color:#c00;opacity:1;}
.segments li:first-child .delete {display:none;}

.links {
	font-size:12px;
	margin-top:15px;
	text-align:center;
}
.links i {font-size:10px;}
.links a {color:#bbb;}

.hidden {display:none;}
.invisible {visibility:hidden;}

.right {float:right;}
.left {float:left;}

/* FORMS */
section.edit li .edit-memo {
	cursor:pointer;
}

form.edit-memo {
	display:inline;
}

span.edit-memo i {font-size:14px;}

form input {
	display:inline;
	border:0;
	background:#fff;
	box-shadow:inset 2px 2px 2px rgba(22,147,165,.2);
	border:1px solid rgba(22,147,165,.3);
	border-radius:3px;
	height:18px;
	padding:3px 5px 2px;
	position:relative;
	top:-1px;
	width:45%;
	font-weight:normal;
	font-size:15px;
}
form input:focus {
	border:1px solid rgba(22,147,165,.6);
}
form button {
	background:none;
	border:0;
	color:rgba(22,147,165,.6);
	padding-left:2px;
	font-size:18px;
}
form button:hover {
	color:rgba(22,147,165,1);
}
button span {font-size:12px;}

.message {color:rgba(22,147,165,1);font-size:10px;margin:3px 0 0;}

.info {
	position:absolute;
	top:-50px;
	right:20px;
	height:10px;
	border-left:1px solid rgba(22,147,165,.3);
}

.info:hover {border-left:1px solid rgba(22,147,165,.6)}
.info > a {position:relative;top:9px;left:-8px;}

#information {
	padding:0 15px;
	background:#eee;
	border:1px solid rgba(0,0,0,.1);
	margin:0 0 10px;
}
#information h3 {margin-bottom:0;}
#information h3 span {text-transform:uppercase;font-size:13px;}
#information ul {padding:0 0 0 20px;margin:0 0 15px;}
#information li {font-size:14px;margin-top:10px;list-style-type:square;}

/* FOOTER */
footer {
	padding-top:0;
	font-size:10px;
}

@media only screen and (max-width: 867px) {
	.segments .delete a {color:#c00;opacity:.1;}
}