@charset "utf-8";
/* CSS Document */

/* first for Internet Explorer < 9 */
@font-face {
	font-family: 'fancyFont';
	src: url('../fonts/ChartwellTextWebPro.eot');
	src: url('../fonts/ChartwellTextWebPro.eot?#iefix') format('embedded-opentype'), url('../fonts/ChartwellTextWebPro.woff') format('woff');
	font-weight:normal;
	font-style:normal;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: #666;
}
h1 {
	font-family: fancyFont, Helvetica, Arial, sans-serif;
	font-size: 48px;
	color: #333;
	padding:20px;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:-2px;
}
#canvas {
	width:300px;
	height:300px;
}
#canvas2 {
	width:300px;
	height:180px;
}
#main {
	width:680px;
	margin:0 auto;
	text-align:center;
}
ul {
	margin:30px 10px 10px 80px;
	text-align:left;
	width:200px;	
}
li {
	padding-bottom:20px;
}
h2{
	font-size:15px;
	font-weight:normal;	
}
.pieNum {
	position:absolute;
	margin-top:110px;
	width:300px;
	text-align:center;
	font-size:92px;
	font-weight:normal;
	letter-spacing:-2px;
	color: #333;
}
.pie2Num {
	position:absolute;
	margin-top:91px;
	width:300px;
	text-align:center;
	font-size:80px;
	font-weight:normal;
	letter-spacing:-2px;
	color: #333;
}
#perLeft, #daysLeft {
	font-family: fancyFont, Helvetica, Arial, sans-serif;
	line-height:76px;
}
#daysLeft {
	line-height:66px;
}
#secsHolder {
}
/*
#secsRemaining {
	font-size:120px;
	font-family: fancyFont, Helvetica, Arial, sans-serif;
	line-height:110px;
	letter-spacing:-3px;
	color: #333;
}
*/
.sub-label {
	font-size:15px;
	letter-spacing:0px;
	color: #666;
}
.sub-label-tall {
	font-size:15px;
	letter-spacing:0px;
	line-height:24px;
	color: #666;
}

.topSectionHolder {
	width:640px;
	padding:20px 0;
	border-top:1px solid #ccc;	
	margin:0 20px;
}

.sectionHolder{
	width:300px;
	padding:20px 0;
	border-top:1px solid #ccc;	
	margin:0 20px;
	float:left;
}

.deathText {
	font-size:80px;
	font-family: fancyFont, Helvetica, Arial, sans-serif;
	line-height:64px;
	letter-spacing:-2px;
	text-transform:uppercase;
	color: #333;
}
.deathTextLarge {
	font-size:170px;
	font-family: fancyFont, Helvetica, Arial, sans-serif;
	line-height:133px;
	letter-spacing:-4px;
	text-transform:uppercase;
	color: #333;
}
.deathTextSmall {
	font-size:40px;
	font-family: fancyFont, Helvetica, Arial, sans-serif;
	letter-spacing:-2px;
	line-height:30px;
	color: #666;
}
#stop-watch {
	width:100%;
	text-align:center;
	font-size:116px;
	font-family: fancyFont, Helvetica, Arial, sans-serif;
	line-height:106px;
	letter-spacing:-3px;
	color: #333;
}
.stop-watch-sub-label {
	font-size:15px;
	letter-spacing:0px;
	color: #666;
	line-height:15px;
	font-family: Helvetica, Arial, sans-serif;
}

#pitfall {
	height:80px;
	position:relative;
}
#land {
	height:40px;
	background-color:#bbb32e;
	margin-top:40px;
}
#sky {
	height:15px;
	background-color:#6a923d;
}
#david-crane {
	width:80px;
	height:80px;
	position:absolute;
	top:-50px;
	background:url(../images/david-crane.png) no-repeat;
	background-size:80px 80px;
	background-position:right;
	min-width:80px;
	max-width:640px;
}
	
@media only screen and (min-width: 768px) and (max-width: 991px) {
/*	#main {
		width:680px;
		margin:0 auto;
		text-align:center;
	}
	.sectionHolder{
		width:300px;
		padding:20px 0;
		border-top:1px solid #ccc;	
		margin:0 20px;
		float:left;
	}
	#daysHolder {
		float:none;		
		position:absolute;
		top:230px;
	}
	
*/
}

@media only screen and (max-width: 767px) {
	#main {
		width:300px;
		margin:0 auto;
		text-align:center;
	}
	.topSectionHolder, .sectionHolder{
		width:300px;
		padding:20px 0;
		border-top:1px solid #ccc;	
		margin:0 0;
		float:none;
	}
	
	/*#secsRemaining {
		font-size:66px;
		font-family: fancyFont, Helvetica, Arial, sans-serif;
		line-height:62px;
		letter-spacing:-2px;
	}*/
	
	#stop-watch {
		font-size:56px;
		font-family: fancyFont, Helvetica, Arial, sans-serif;
		line-height:52px;
		letter-spacing:-2px;
	}
	#pitfall {
		height:40px;
		position:relative;
	}
	#land {
		height:20px;
		background-color:#bbb32e;
		margin-top:20px;
	}
	#sky {
		height:7.5px;
		background-color:#6a923d;
	}
	#david-crane {
		width:40px;
		height:40px;
		position:absolute;
		top:-25px;
		background:url(../images/david-crane.png) no-repeat;
		background-size:40px 40px;
		background-position:right;
		min-width:40px;
		max-width:320px;
	}
	
}