html {
	height: 100%;
	margin:0;
	padding: 0;
}

body {
	background-color: #0D0000;
	height: 100%;
	margin: 0;
	padding: 30px 0 0 0;
	font-family: 'Open Sans', sans-serif;
}

button {
	cursor:pointer;
}

.statsDiv {
	position:fixed;
	left: 0;
	top: 0;
}

.statsDivHidden {
	position: fixed;
	left: 0;
	top: 0;
	visibility: hidden;
}

.mainWrapper {
	display: block;
	width:640px;
	margin-left: auto;
	margin-right: auto;
}

.buttonGroupDiv {
	display:block;
	width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.camButtonsDiv {
	float: left;
}

.patternButtonsDiv {
	display:block;
	float: right;
}

.finalCanvas {
	display:block;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.camVideo {
	display:block;
	position: absolute;
	visibility: hidden;
}

.mainHeadline {
	display:block;
	text-align: center;
	font-size: 24pt;
	font-family: 'Open Sans', sans-serif;
	color: #413b3d;
	padding-bottom: 0;
	margin: 0 0 10px 0;
}

.subHeadline {
	display:block;
	text-align: right;
	font-family: 'Open Sans', sans-serif;
	font-size: 9pt;
	color: #413b3d;
	padding: 0;
	margin-top: -1px;
	margin-bottom: 5px;
}

.camButtons {
	width:100px;
	height:40px;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 10pt;
	color: #3A5661;
	text-align: center;
	text-decoration: none;
	background: #1A2429;
	border: 0;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}

.camButtons:hover {
	color: #5e8f9b;
	background: #384c51;
}

.camButtons:disabled {
	color: rgba(47, 68, 81, 0.40);
	background: rgba(46, 58, 63, 0.59);
}

.camButtons:active {
	border: solid 1px #5e8f9b;
}

.patternButtons {
	margin: 0;
	padding: 0;
	line-height: 24px;
	width:40px;
	height:40px;
	background: #1A2429;
	border: 0;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	font-size: 10pt;
}

.patternButtons:hover {
	background-color: #384c51;
}

.glowPatternButton {
	background-image: url('../img/glowButton_dark.png');
	background-repeat: no-repeat;
	background-position: 6px 6px;
}

.glowPatternButton:hover {
	background-image: url('../img/glowButton.png');
}

.circlePatternButton {
	background-image: url('../img/circleButton_dark.png');
	background-repeat: no-repeat;
	background-position: 6px 6px;
}

.circlePatternButton:hover {
	background-image: url('../img/circleButton.png');
}

.horizPatternButton {
	background-image: url('../img/horizontalButton_dark.png');
	background-repeat: no-repeat;
	background-position: 5px 7px;
}

.horizPatternButton:hover {
	background-image: url('../img/horizontalButton.png');
}

.vertPatternButton {
	background-image: url('../img/verticalButton_dark.png');
	background-repeat: no-repeat;
	background-position: 7px 5px;
}

.vertPatternButton:hover {
	background-image: url('../img/verticalButton.png');
}

.randomPatternButton {
	background-image: url('../img/randomButton_dark.png');
	background-repeat: no-repeat;
	background-position: 7px 7px;
}

.randomPatternButton:hover {
	background-image: url('../img/randomButton.png');
}

