body {
	background: #333;
	font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size:15px;
	color: #888;
	min-width: 400px;
}

.div {
	border: 1px solid #111;
}

.header {
	font-family: "HelveticaNeue", Helvetica, Arial, Verdana, sans-fserif;
	font-size: 22px;
	color: #CCC;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.7);
	float:left;
}

/* Generic */


.allContent {
	width: 968px;
	height: auto;
	min-height: 50px;
}

.lowerContent {
	width: 968px;
	height: auto;
	float: left;
	background: #444;
	clear:both;
}

.scoreContent {
	width: 426px;
	height: auto;
	float: left;
	border: 1px solid #111;
}

.score {
	width: 280px;
	height: 260px;
	background: #444;
	float: left;
	padding: 4px;
}

.period {
	width: 128px;
	height: 260px;
	background: #444;
	float: right;
	padding: 4px;
}

/* Clock/timers */


.clock {
	width: 100%;
	height: 44px;
	position: relative;
	padding: 2px;
	text-align: center;
}

.enterTime {
	position: absolute;
	left: 0px;
	top: 8px;
	width: 50px;
	height: 20px;
	
	text-align: center;
	font-weight: 200;
	font-size: 16px;
	background: #222;
	color: #DDD;
	border-color: #444;
	border-radius: 4px;
}

.resetClock {
	position: absolute;
	left: 58px;
	top: 6px;
	width: 38px;
	height: 26px;
	
	font-weight: 200;
}

.timeValue {
	position: absolute;
	left: 100px;
	width: 60px;
	height: 24px;
	top: 6px;
	
	color: #FF8C00;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.7);
	background: #222;
	border: 1px solid #666666;
	font-size: 18px;
	font-weight: 400;
	padding: 2px;
}


.teamName {
	width: 100%;
	padding: 2px;
	box-sizing: border-box;
	font-size: 22px;
	text-align: center;
	background: #222;
	color: #DDD;
	border-color: #444;
}


.startClock {
	position: absolute;
	left: 170px;
	width: 56px;
	height: 36px;
	font-weight: 400;
	font-size: 18px;
}

.clockContent {
	width: 99%;
	height: 80px;
	background: #444;
	float: left;
	padding: 4px;
	border-top: 1px solid #111;
}

.macroContent {
	height: auto;
	width: auto;
	clear:both;
}

/* Hockey/Lacrosse */

.penaltyTable {
	width:200px;
	text-align:center;
	background-color:#444;
}

.penaltyTable td {
	height:22px;
	text-align:center;
}

.penaltyTable tr {
	background-color:#555;
}

.penalty {
	width: 200px;
	height: 354px;
	float: left;
	background: #444;
	border: 1px solid #111;
	padding: 2px;
}

/* Volleyball */

.volleyballScore {
	width: 381px;
	height: 260px;
	background: #333;
	float: left;
	padding: 4px;
	border-top: 1px solid #111;
}

.volleyballServe {
	width: 180px;
	height: 260px;
	background: #222;
	float: left;
	border: 1px solid #111;
	padding: 4px;
}

/* Basketball */

.basketballHomeScore {
	width: 410px;
	height: 260px;
	background: #444;
	float: left;
	padding: 4px;
	border-top: 1px solid #111;
}

.basketballPeriod {
	width: 120px;
	height: 260px;
	background: #444;
	float: left;
	border: 1px solid #111;
	padding: 4px;
}

.basketballTimeOutBox {
	width: 400px;
	height: 80px;
	float: left;
	padding: 4px;
}

.basketballVisitorScore {
	width: 412px;
	height: 260px;
	background: #444;
	float: right;
	padding: 4px;
	border-top: 1px solid #111;
}

.basketballGameClockBox {
	width: 400px;
	height: 80px;
	float: right;
	padding: 4px;
}

.basketballPossession {
	width: 128px;
	height: 80px;
	float: left;
	padding: 4px;
}

/* Hockey / Lacrosse */

.hlScoreContent {
	width: 546px;
	height: auto;
	float: left;
}

.hlHomeScore {
	width: 200px;
	height: 260px;
	background: #444;
	float: left;
	padding: 4px;
	border-top: 1px solid #111;
}
.hlVisitorScore {
	width: 200px;
	height: 260px;
	background: #444;
	float: right;
	padding: 4px;
	border-top: 1px solid #111;
}

.hlPeriod {
	width: 120px;
	height: 260px;
	background: #222;
	float: left;
	border: 1px solid #111;
	padding: 4px;
}

/* Soccer */

.soccerHomeContent {
	width: 260px;
	height: 260px;
	float: left;
	background: #444;
	border: 1px solid #111;
	padding: 4px;
}

.soccerVisitorContent {
	width: 260px;
	height: 260px;
	float: left;
	background: #444;
	border: 1px solid #111;
	padding: 4px;
}


.soccerClock {
	width: auto;
	height: 80px;
	background: #444;
	padding: 4px;
	border-top: 1px solid #111;
}

/* Football */

.footballTeamContent {
	width: 240px;
	height: 360px;
	float: left;
	background: #444;
	border: 1px solid #111;
	padding: 4px;
}

.fbScoreContent {
	width: 506px;
	height: auto;
	float: left;
	border: 1px solid #111;
}

.fbscore {
	width: 360px;
	height: 260px;
	background: #444;
	float: left;
	padding: 4px;
}

.quarter {
	width: 128px;
	height: 260px;
	background: #444;
	float: right;
	padding: 4px;
}

.downs {
	width: 200px;
	height: 360px;
	background: #444;
	border: 1px solid #111;
	float: right;
	padding: 4px;
}

.fbclock {
	width: 498px;
	height: 90px;
	background: #444;
	float: left;
	padding: 4px;
	border-top: 1px solid #111;
}



/* buttons */


button {
	display: inline-block;
	padding: 4px 8px;
	margin: 0;
	cursor: pointer;
	border: 1px solid #111;
	overflow: visible;
	font: bold 13px arial, helvetica, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	color: #CCC;
	background-color: #555;
	transition: background-color .2s ease-out;
	background-clip: padding-box; /* Fix bleeding */
	border-radius: 6px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .7),
	0 2px 2px -1px rgba(0, 0, 0, .5),
	0 1px 0 rgba(255, 255, 255, .3) inset;
	text-shadow: 0 1px 0 rgba(80,80,80, .7);
}


button:hover {
	color: white;
}

button:active {
	color: white;
	background: #FF8C00;
}


.scoreButton { /* used to increase/decrease a score with score text box feedback (return value) */
	font-size: 24px;
	font-weight: 400;
	width: 48px;
	height: 40px;
  	margin-right: 2px;
  	margin-left: 2px;
}

.nonScoreButton { /* button used for custom functions not set at page load */
	color: #DDD;
	background: #444;
	width: 48px;
	height: 40px;
}

.nonScoreButton.active {
	background: #FF8C00;
}

.smallScoreButton {
	font-size: 18px;
	font-weight: 400;
	height: 32px;
	padding: 2px 16px;
}

.soccerTimeValue {
	color: #FF8C00;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.7);
	background: #222;
	border: 1px solid #111;
	padding: 2px;
	width: 68px;
	font-size: 18px;
	font-weight: 400;
}

.macroButton {
	color: #DDD;
	font-weight: 200;
	background: #444;
	width: 120px;
	height: 40px;
}

.possessionButton {
	color: #DDD;
	font-weight: 200;
	background: #555;
	width: 120px;
	height: 40px;
}

.possessionButton.active {
	background: #888;
}


.scoreBoardButton {
	background: #444;
	width: 140px;
	height: 40px;
}

.valueBox {
	color: #FF8C00;
	padding: 2px;
	width: 50px;
	font-size: 28px;
	font-weight: 400;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	background-color: #222;
	border-radius: 4px;
	border: 1px solid #666666;
	display: inline-block;
}

input[type=text]:focus {
  background-color: #333;
  color: white;
}

input[type=number]:focus {
  background-color: #333;
  color: white;
}

.smallValueBox {
	color: #FF8C00;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.7);
	background: #111;
	border: 1px solid #111;
	float: right;
	padding: 2px;
	width: 30px;
	font-size: 18px;
	font-weight: 400;
}

.refresh {
	float: right;
}

