style.css

body, * {
	margin: 0;
	padding: 0;
}

body {
	-webkit-transition: background linear .5s;
	-moz-transition: background linear .5s;
	-ms-transition: background linear .5s;
	transition: background linear .5s;
	background: #3498db;
	font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-weight: normal;
	color: #fff;
	text-align: center;
	font-size: 18px;
}

.settings {
	position: fixed;
	top: 20px;
	left: 20px;
	display: block;
	width: 20px;
	height: 20px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NTkzMDdGOTQzNTgxMUUzQTUzREJGMTREMzZGQzdCMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NTkzMDdGQTQzNTgxMUUzQTUzREJGMTREMzZGQzdCMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc1OTMwN0Y3NDM1ODExRTNBNTNEQkYxNEQzNkZDN0IzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc1OTMwN0Y4NDM1ODExRTNBNTNEQkYxNEQzNkZDN0IzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+CJhIvgAAAuJJREFUeNrsW9Fx2zAMVXz9jzaoOoG9QbRBvUHUCaoNog2qDZpuoA2iTFBlgjIbMBOw5B18p6aWDBKPlBz73eHDNk3yWSCJB9A3xpjskrDJLgxXwlfCV8Is7KwVgu/n1sq1E3aTrK0pa7+t9fReCB6tPVnT1lrhj/cv3LEEsMaaNv/jMaCvyhyH6yuXzhVFuDfT8JlobeYhJoxyaTXz2b21wVo106akJfBjps0bubgInxIQdvhs7ae1xlpH7TWtzb21LWOMATFRFGHupuKIfxfs/KvZpXdZfNwidusN6OluszSopB3cANSS22zuEhF+I29SSz3hOiHZg1t3goBGRLg+cYzEwlYSxW0C12y3ENkxaUVHGmwN59Shevf6fmUC6IVi72E0T01e4EXYBQkPZ6oCX6eOsDnCigKFGE9CjyKtQ7T1FUz6G43HUkt7g4MTFiUjsC9IaCDHZaulDjRoE6BoygmpGYKCSxgxYCWQcbtYc5hzr0EwUAvQ2JJlpen73gmAkDWlEEJdML4mDwnOeAwJXfmYp/milKZ4Cs9fNwNbh1xKnNDSnce/PJQTGj59tqhYumO2GyIQHjwCG4UirMDtkPkyr3ZcwjpbPzSScAFuFyNBWCAJc3VnjGQet887DmkO4dwjeVZGIOzT5+l5Ms7B9swCj50k8NgHhpbZOYaWEpmGEA9lSvHQXJo8VB81AbARhpKn8ECxcMk8R10O6okS7lI8H4u+ppJ4bvA/EdOpiyXx5rKWKWtGydK0c/Xhhtzr+V3Uc7syclOJ+ODA49im0pvloaaOnjmTlEuXrEy80EboreKk9eElKojBZBGEU29uixfEeQoFh1aaVUE84UPeKcU9jy9SwqhbPH0idxbnzFD3tLgbyGu28MW0VLpVnagIFIyzHZLkRxEezuVyKYpwNSEpUdeHNUnN1RAeT7YHVBG7UR81sBoJO5amcsShu2pOfcBLN7EIrxbXf7V8dPwVYAB+FLwQwmJ41wAAAABJRU5ErkJggg==);
	background-size: 20px 20px;
	overflow: hidden;
	z-index: 50;
	text-indent: -9999px;
	background-repeat: none;
}

body.new section:not(#welcome),
body.working section:not(#countdown),
body.log section:not(#alert),
body.list section:not(#list) {
	display: none;
}

body.settings-open #settings {
	display: block !important;
	position: absolute;
	z-index: 100;
	width: 100%;
	left: 0;
	right: 0;
	top: 0;
}
	body.settings-open.new #next-form,
	body.settings-open.list #next-form,
	body.settings-open.log #cycle-form {
		display: none;
	}
	#settings .overlay {
		background: #ecf0f1;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
	}
	#settings .content {
		width: 130px;
		padding: 15px;
		background: #fff;
		border-radius: 2px;
		margin: 55px 0 0 10px;
		z-index: 101;
		position: relative;
		color: #000;
	}
	#settings .content:before {
		content: "";
		border: 8px solid transparent;
		border-bottom: 8px solid #fff;
		position: absolute;
		top: -16px;
		left: 12px;
	}
	#settings .content:after {
		content: "";
		display: block;
		height: 0;
		width: 0;
		clear: both;
	}
	#settings label {
		font-weight: bold;
		font-size: 15px;
		display: block;
		margin: 0 0 10px;
	}
	#settings input[type=text] {
		display: block;
		width: 60px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 2px;
		height: 36px;
		text-align: center;
		font-size: 15px;
		padding: 5px 10px;
		font-family: sans-serif;
		-webkit-font-smoothing: antialiased;
		color: rgba(0,0,0,.8);
		background: #fff;
		border: 2px solid rgba(0,0,0,.2);
		outline: none;
		float: left;
	}
	#settings input[type=text]:focus {
		box-shadow: none;
		border: 2px solid rgba(0,0,0,.5);
	}
	#settings input[type=submit] {
		display: block;
		float: left;
		width: 60px;
		text-align: center;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 2px;
		height: 36px;
		font-size: 15px;
		padding: 5px 10px;
		font-family: sans-serif;
		-webkit-font-smoothing: antialiased;
		color: #fff;
		font-weight: bold;
		background: #1abc9c;
		border: none;
		outline: none;
		margin-left: 10px;
		cursor: pointer;
	}

section {
	-webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-fill-mode: both;
    -webkit-animation-name: boom;
    
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-fill-mode: both;
    -moz-animation-name: boom;
    
    -ms-animation-duration: .5s;
    -ms-animation-timing-function: ease-in-out;
    -ms-animation-fill-mode: both;
    -ms-animation-name: boom;

    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-name: boom;
}

body.new {
	color: rgba(255,255,255,.65);
	background: #1abc9c;
	font-size: 24px;
}
	body.new h1 {
		font-size: 36px;
		line-height: 36px;
		color: #fff;
		margin: 0 0 18px;
	}
	body.new p {
		margin: 0 0 36px;
	}
	body.new .btn-start {
		background: #e74c3c;
		display: inline-block;
		color: #fff;
		font-weight: bold;
		padding: 15px 25px;
		font-size: 18px;
		border-radius: 2px;
		text-decoration: none;
	}
	body.new #welcome {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 640px;
		margin: -85px 0 0 -320px;
	}

body.working {
	background: #2c3e50;
}
	body.working #countdown {
		top: 50%;
		left: 50%;
		width: 640px;
		position: absolute;
		margin: -105px 0 0 -320px;
	}
	body.working #timer {
		color: #fff;
		font-size: 150px;
		font-weight: 400;
		margin: 0 0 36px;
	}
		body.working #timer span { font-weight: lighter;}
	body.working a {
		color: #ecf0f1;
		border: 2px solid #ecf0f1;
		padding: 12px 20px;
		text-decoration: none;
		border-radius: 2px;
		font-weight: 600;
		opacity: .2;
		font-size: 15px;
	}
		body.working a:hover {
			color: #2ecc71;
			border: 2px solid #2ecc71;
			opacity: 1;
		}
	body.working a#cancel {
		border: none;
		position: fixed;
		font-weight: normal;
		top: 20px;
		right: 20px;
	}
		body.working a#cancel:hover {
			color: #e74c3c;
		}

body.log {
	background: #2ecc71;
}
	body.log #alert {
		width: 480px;
		text-align: left;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -80px 0 0 -240px;
	}
	body.log #void {
		position: fixed;
		top: 20px;
		right: 20px;
		color: #fff;
		padding: 12px 20px;
		text-decoration: none;
		opacity: .5;
		font-size: 15px;
	}
		body.log #void:hover {
			opacity: 1;
		}
	body.log input[type=text] {
		display: block;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 2px;
		height: 48px;
		font-size: 21px;
		padding: 10px 15px;
		font-family: sans-serif;
		-webkit-font-smoothing: antialiased;
		color: rgba(0,0,0,.8);
		background: #fff;
		border: none;
		outline: none;
	}
		body.log input[type=text]:focus {
			box-shadow: 0px 0px 0px 2px rgba(0,0,0,.5);
		}
	body.log label {
		font-size: 15px;
		float: left;
		margin: 15px 0 0 0;
	}
	body.log label:first-child {
		font-size: 21px;
		display: block;
		font-weight: bold;
		margin: 0 0 18px;
		float: none;
	}
	body.log input[type=submit] {
		background: #e74c3c;
		float: right;
		font-family: sans-serif;
		border: none;
		color: #fff;
		font-weight: bold;
		padding: 15px 25px;
		font-size: 18px;
		border-radius: 2px;
		text-decoration: none;
		-webkit-font-smoothing: antialiased;
		cursor: pointer;
	}
	body.log #new {
		margin-right: 5px;
	}

body.list {
	background: #3498db;
	position: relative;
}
	body.list #actions {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		z-index: 10;
		box-shadow: inset 30px 0px 30px 100px #3498db;
	}
	body.list #actions span {
		width: 100%;
		text-align: center;
		position: absolute;
		bottom: 30px;
		left: 0;
		display: none;
		pointer-events: all;
		font-size: 15px;
	}
		body.list #actions span .confirm {
			border: 2px solid #fff;
			padding: 5px 10px;
			font-weight: bold;
			border-radius: 2px;
			color: #fff;
			text-decoration: none;
			margin-left: 15px;
			opacity: .5;
		}
		body.list #actions span .cancel {
			text-decoration: none;
			color: #fff;
			padding: 0 10px;
			margin-left: 5px;
			opacity: .5;
		}
		body.list #actions span .confirm:hover,
		body.list #actions span .cancel:hover {
			opacity: 1;
		}
	body.list #list {
		padding: 50px 0;
	}
	body.list .btn-start {
		background: #e74c3c;
		display: block;
		font-family: sans-serif;
		border: none;
		color: #fff;
		font-weight: bold;
		padding: 15px 0px;
		width: 200px;
		font-size: 18px;
		border-radius: 2px;
		text-decoration: none;
		pointer-events: all;
		position: absolute;
		top: 20px;
		margin: 0 0 0 -100px;
		box-shadow: 0px 0px 0px 4px #3498db;
		left: 50%;
	}
	body.list #reset {
		position: absolute;
		pointer-events: all;
		display: block;
		width: 150px;
		border: 2px solid rgba(255,255,255,.5);
		border-radius: 2px;
		line-height: 36px;
		height: 36px;
		font-weight: bold;
		background: #3498db;
		font-size: 14px;
		color: rgba(255,255,255,.5);
		text-decoration: none;
		bottom: 20px;
		margin: 0 0 0 -77px;
		left: 50%;
		box-shadow: 0px 0px 0px 4px #3498db;
		-webkit-transition: opacity linear .1s;
		-moz-transition: opacity linear .1s;
		-ms-transition: opacity linear .1s;
		transition: opacity linear .1s;
	}
		body.list #reset:hover {
			border: 2px solid #fff;
			color: #fff;
		}
	body.list #done {
		position: relative;
		padding: 60px 0 50px;
	}
	body.list:before {
		content: "";
		width: 4px;
		position: absolute;
		height: 100%;
		left: 50%;
		top: 0;
		bottom: 0;
		margin-left: -2px;
		border-radius: 5px;
		background: rgba(0,0,0,.3);
		z-index: -1;
	}
	body.list li {
		list-style: none;
		position: relative;
	}
	body.list li h6 {
		background: #3498db;
		border: 4px solid #246a99;
		color: #246a99;
		display: inline-block;
		font-size: 12px;
		padding: 3px 10px;
		border-radius: 15px;
		margin: 0 0 18px;
	}
	body.list li h6:after {
		content: "";
		display: block;
		clear: both;
		height: 0;
		width: 0;
	}
	body.list p {
		background: #fff;
		color: rgba(0,0,0,.7);
		display: inline-block;
		max-width: 500px;
		border-radius: 2px;
		font-size: 24px;
		padding: 15px 20px;
		margin: 0 0 36px;
		position: relative;
	}
		body.list li .delete {
			background: #246a99;
			background-repeat: no-repeat;
			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxQjRDODI3OTQzRkUxMUUzQUZCNkIzNzM5REFDODUxNCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxQjRDODI3QTQzRkUxMUUzQUZCNkIzNzM5REFDODUxNCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjFCNEM4Mjc3NDNGRTExRTNBRkI2QjM3MzlEQUM4NTE0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjFCNEM4Mjc4NDNGRTExRTNBRkI2QjM3MzlEQUM4NTE0Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ggYa4QAAAcpJREFUeNrsmdFRwzAMhlMWwBsQJiBMgDcgTEC6ASNklIzQDegGlA3CBmECY3PqHQ9pUGPJcS6/7vTSs1V/8fmXLO+cc8WWbAdgAAMYwAAGMIABDGAAAxjAKYFL74136/3ovfPeZxizKAJwpFs3bk1EzFoh5q9LAPfustUz4lXehwvxwu9mSWDjpm0gAG68cgL2bDZmzTfKGnFL569kjDXeDzQna9EKQnL3z5hPEp9hYkz4ME+M/7uPEi+BM1w7nh0nYnTMGG85iFZBC+FYNzK3jZi7GPA1u9T+mdMw5xyk1ildaQXReWaM29M5fGeM5Zz/xUpLQ+LzwBj7zVDkL++VFKxWLR2gTwzl5nwQS7GyvzxUtNMxOfVRGlb7thSgP2bO3dNlQd4EVXrMuSosmmtTpaXYHC2Wa5espYsrFbbXXox2x8Myc22a85tAtOYq9QsVMasBLimlzE1LKjlYs/DgVlurLzykS0vROloDOIjNa86Xh7VcD7vcCo9NNQBStnjaHBoAm2riGcauDNRv5sQ6MeJl3Zc+51LOjoTdr2mOnuGpZd5j2qDwmCYdU7RruZrnUjyIAxjAAAYwgAEMYAADGMAABvCY/QgwAF4adkZD7jppAAAAAElFTkSuQmCC);
			background-position: center;
			cursor: pointer;
			background-size: 20px 20px;
			display: block;
			position: absolute;
			top: -15px;
			right: -15px;
			font-size: 12px;
			padding: 0px;
			width: 30px;
			height: 30px;
			text-indent: -999px;
			overflow: hidden;
			border-radius: 15px;
		}
		body.list p:before {
			content: "";
			border: 8px solid transparent;
			border-bottom: 8px solid #fff;
			position: absolute;
			top: -16px;
			left: 50%;
			margin-left: -8px;
		}
		body.list p small {
			display: block;
			font-size: 11px;
			text-transform: uppercase;
			opacity: .3;
			padding: 10px 0 0 0;
		}


#by {
	position: fixed;
	bottom: 20px;
	left: 20px;
	background: rgba(0,0,0,.2);
	border-radius: 2px;
	text-transform: uppercase;
	font-size: 10px;
	color: rgba(255,255,255,.5);
	text-decoration: none;
	z-index: 100;
	padding: 5px 8px;
}
#by strong {
	color: #fff;
}
.twitter-share-button {
	position: fixed;
	bottom: 20px;
	right: 0px;
	z-index: 100;
	font-size: 1px;
	color: rgba(255,255,255,.0);
}

.notificationLevel {
    color: white;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

.notificationLevel.default {
    background: orange;
}

.notificationLevel.allowed {
    background-color: green;
}

.notificationLevel.denied {
    background-color: red;
}

@-webkit-keyframes boom {
	100% { opacity: 1;}
	0% {opacity: 0;}
}

@-moz-keyframes boom {
	100% { opacity: 1;}
	0% {opacity: 0;}
}

@keyframes boom {
	100% { opacity: 1;}
	0% {opacity: 0;}
}