body {
	background-color:#9c9c9c;
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
} 

/* layout */
#app {
	margin-left:auto;
	margin-right:auto;
	width:292px;
	height:328px;
	background-color:#9c9c9c;
	padding:13px;
} .clear {
	clear:both;
} #minWrap { /* wraps the box of minute counters */
	float:right;
	padding-top:17px;
} #circleWrap {
	width:80px;
	float:left;
} #back {
	float:right;
	font-family:"Lucida Console", Monaco, monospace;
	color:black;
	position:relative;
	text-decoration:none;
	float:right;
	height:40px;
	width:40px;
	padding:5px;
	border-radius:25px;
	background-color:#222;
	background-repeat:no-repeat;
	background-position:center;
	border: 1px solid rgba(0,0,0,0.50);
	border-top: 1px solid rgba(0,0,0,0.001);
	box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.10);
	cursor: pointer;
} #back img {
	transform: scale(.5);
	-ms-transform: scale(.5);
	-webkit-transform: scale(.5);
	padding: 5px 12px;
	position: absolute;
	clip: rect(0px,102px,64px,44px);
	left: -46px;
	top: -8px;
} #countdown {
	float:right;
	font-size:20px;
	padding:10px;
	width:30px;
	margin:3px 30px;
	background-color:#696969;
	text-align:center;
} #tenWrap {
	height:134px;
}

/* Look and Feel */
.min { /* boxes that mark the minutes */
	width:19px;;
	margin:2px;
	border:5px solid #bbb;
	float:left;
} .ten { /* ten minute marker */
	position:relative;
	height:120px;
	background-color:blue;
} .two { /* two minute marker */
	position:relative;
	height:23px;
	background-color:#ff8000;
} .circle { /* generic circle button */	
	margin:9px;
	opacity:0.5;
	width:98px;
	height:98px;
	border-style:solid;;
	border-width:6px;
	border-radius: 55px;
	box-shadow: 0 0 10px rgba(0,0,0,0.35),
				0px 1px 3px rgba(0,0,0,0.18),
				inset 0px -3px 0px rgba(0,0,0,0.35),
				inset 0px 14px 14px rgba(255,255,255,0.10);
	cursor: pointer;
} .circle:active {
	box-shadow: 0 0 10px rgba(0,0,0,0.35),
				0px 2px 1px rgba(255,255,255,0.50),
				inset 0px 1px 4px rgba(0,0,0,0.35),
				inset 0px -14px 14px rgba(255,255,255,0.10);
	cursor: pointer !important;
} .circle p { /* START/STOP/RESET text inside circles */
	font-family:"Lucida Console", Monaco, monospace;
	font-weight: bold;
	color: white;
	font-size:16px;
	height:1em;
	margin-top:-8px;
	top:50%;
	width:1em;
	left:50%;
	position:relative;
} #stop p {
	margin-left:-20px;
} #start p {
	margin-left:-26px;
} .click { /* button is clickable */
	opacity:1;
} #start { /* start button */
	background-color:#7ea73f;
	border-color:white;
} #stop { /* stop button */
	background-color:#c90000;
	border-color:white;
} #timeBox { /* box for minute countdown */
	background-color:#696969;
	border:6px solid #cecece;
	width:280px;
	height:68px;
} #timeUnit { /* one minute that moves acros timeBox */
	background-color:white;
	border-right:6px solid #cecece;
	width:0px;
	height: 8px;
	padding: 22px 0px 38px 0px;
	font-size: 20px;
} #help { /* info button */
	position:relative;
	float:right;
	height:40px;
	width:40px;
	padding:5px;
	border-radius:25px;
	background-color:#222;
	background-repeat:no-repeat;
	background-position:center;
	border: 1px solid rgba(0,0,0,0.50);
	border-top: 1px solid rgba(0,0,0,0.001);
	box-shadow: 0 0 10px rgba(0,0,0,0.35),
				0px 1px 3px rgba(0,0,0,0.18),
				inset 0px -3px 0px rgba(0,0,0,0.35),
				inset 0px 14px 14px rgba(255,255,255,0.10);
	cursor: pointer;
} #help img {
	transform: scale(.5);
	-ms-transform: scale(.5);
	-webkit-transform: scale(.5);
	padding: 5px 12px;
	position: absolute;
	clip: rect(0px,51px,59px,1px);
	left: -18px;
	top: -8px;
}

/* Audio */
.audio {
	display:none;
}