@font-face {
    font-family: Munchkin;
    src: url('../fonts/quasimodo.ttf');
}

@font-face {
    font-family: Arrow;
    src: url('../fonts/arrow.ttf');
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	color: #fff;
	background-color: gray;
}

body {
	font-family: 'Munchkin';
	color:#4a1813;
}

#content {
	margin: 0 auto;
	max-width: 100%;	
	height: 100%;	
}

#main {
	width: 375px;
	height: 647px;
}

.container {
	background: #f8cd97;
	padding: 0;
	margin: 0 auto;
	position: relative;
}


#info {
	height: 50px;
	margin: 0 auto;
	padding: 0;
	background-color: #4a1813;
}

#menu {
	float: left;
	margin: 0 auto;
	padding: 0;
}

#control {
	background: none;
	color: #fff;
	border: none;
	margin: 0 auto;
	padding: 0;
	width: 50px;
	height: 50px;
	font-family: inherit;
	font-weight: bold;
	font-size: 36px;
	line-height: 36px;
	cursor: pointer;
}

#gender { 
	float: left;
	padding: 0;
	margin: 0;
	height: 50px;
}

#male {
	background: url('../images/male.png');
	background-size: 50px 50px;
}

#female {
	display: none;
	background: url('../images/female.png');
	background-size: 50px 50px;
}

.genderIcon {
	margin: 0;
	padding: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	-webkit-appearance: none;
	border: none;
}

#tokenColor {
	float: left;
	margin: 0 auto;
	padding: 0;
	width: 175px;
	text-align: center;
}

#selectColor {
	margin: 0 auto;
	padding: 0;
	width: 80px;
	height: 50px;
	background: none;
	color: #fff;
	border: none;
	margin: 0 auto;
	padding: 0;
	font-family: inherit;
	font-weight: bold;
	font-size: 18px;
	cursor: pointer;
	text-transform:capitalize;
}

#colorDialog {
	display: none;
}

.colorDialog {
	width: 225px !important;
	font-family: 'Munchkin';
}

#colorMenu {
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

.colorRed, .colorOrange, .colorYellow, .colorGreen, .colorBlue, .colorViolet {
	width: 180px;
	height: 50px;
	margin: 0 auto;
	padding: 0;
	color: #fff;
	font-weight: bold;
	font-size: 18px !important;
	font-family: 'Munchkin' !important;
	border: none;
	cursor: pointer;
}

.colorRed {
	background-color: red;
}

.colorOrange {
	background-color: orange;
}

.colorYellow {
	background-color: yellow;
	color: #000 !important;
}

.colorGreen {
	background-color: green;
}

.colorBlue{
	background-color: blue;
}

.colorViolet {
	background-color: violet;
}

#combat {
	float: left;
	padding: 0;
	margin: 0 auto;
	height: 50px;
}

#fightMonster {
	background: url('../images/combat.png') 0 -50px no-repeat;
	margin: 0;
	padding: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
	-webkit-appearance: none;
	border: none;
	background-size: 50px 100px;
}

#roll {
	float: left;
	padding: 10px;
	margin: 0 auto;
	width: 30px;
	height: 30px;
}

#dice {
	background: #fff;
	color: #000;
	margin: 0 auto;
	padding: 4px 3px;
	width: 30px;
	height: 30px;
	vertical-align: top;
	cursor: pointer;
	-webkit-appearance: none;
	border: none;
	border-radius: 10%;
	-webkit-border-radius: 10%;
	box-shadow: 2px 2px 0px #222;
}

	#dice .dot {
		float: left;
		width: 8px;
		height: 8px;
		margin: 0;
		padding: 0;
		font-family: Arial;
		font-weight: bold;
		font-size: 16px;
		line-height: 8px;
	}

#monsterCombat {
	display: none;
	width: 355px;
	height: 215px;
	padding: 10px 10px 10px 10px;
	margin: 0 auto;
	background-color: #fef3e5;
	position: absolute;
	border-top: 1px solid #4a1813;
	border-bottom: 1px solid #4a1813;
	z-index: 999;
}

#monsterNumbers {
	width: 48%;
	float: left;
}

#playerNumbers {
	width: 48%;
	float: right;	
}

	#monsterNumbers label, #playerNumbers label {
		font-family: inherit;
		font-weight: normal;
		font-size: 18px;
		margin: 0 0 0 5px;
	}

	#monsterNumbers input, #playerNumbers input {
		font-family: inherit;
		font-weight: normal;
		font-size: 18px;
		color: #4a1813;
		width: 40px;
		margin: 0 0 5px 5px;
		padding: 0 0 0 5px;
	}

input#monsterLevel {
	margin-left: 54px;
}

input#monsterTotal, input#playerTotal {
	margin-left:49px;
}

input#playerStrength {
	margin-left: 66px;
}

input#playerHelper {
	margin-left: 44px;
}
	
#monsterHeading, #playerHeading {
	margin: 0 0 5px 0;
	font-weight: bold;
	font-size: 21px;
}

#totalNumbers {
	margin: 0 auto;
	padding: 5px 0 0 0;
	width: 100%;
	clear: both;
	font-weight: bold;
	font-size: 21px;
}

#combatTotal {
	font-family: inherit;
	font-weight: bold;
	font-size: 18px;
	width: 40px;
	margin: 0 auto;
	padding: 0 0 0 5px;
	color: #4a1813;
}

#combatOutcome {
	display: none;
	font-family: inherit;
	font-weight: bold;
	font-size: 21px;
	margin: 0 auto;
	width: 125px;
	text-align: center;
	float: right;
}

#rollDice {
	display: none;
	width: 355px;
	height: 215px;
	padding: 10px;
	margin: 0 auto;
	background-color: #fef3e5;
	position: absolute;
	border-top: 1px solid #4a1813;
	border-bottom: 1px solid #4a1813;
	z-index: 999;
}

#bigRoll {
	width: 100%;
	height: 130px;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
}

#bigDice {
	background: #f8cd97;
	color: #4a1813;
	margin: 0 auto;
	padding: 3px 0 0 3px;
	width: 130px;
	height: 130px;
	cursor: pointer;
	-webkit-appearance: none;
	border: 3px solid #4a1813;
	border-radius: 10%;
	-webkit-border-radius: 10%;
}

	#bigDice .dot {
		float: left;
		width: 40px;
		height: 40px;
		margin: 0;
		padding: 0;
		font-family: Arial;
		font-weight: bold;
		font-size: 84px;
		line-height: 40px;
	}

#runAway {
	width: 100%;
	height: 67px;
	margin: 0 auto;
	padding: 8px 0 0 0;
	text-align: center;
	font-family: inherit;
	font-weight: normal;
	font-size: 18px;
}

	#runAway p {
		margin: 8px 0 0 0;	
	}

#escape {
	font-weight: bold;
	font-size: 36px;
	line-height: 36px;
}

#escapeResult {
	display: none;
	font-weight: bold;
	font-size: 36px;
	line-height: 36px;
	padding: 16px 0 0 0;
}

#escapePossible {
	display: none;
	font-weight: bold;
	font-size: 36px;
	line-height: 36px;
}

#strength {
	background: #fef3e5;
	margin: 0 auto;
	padding: 10px;
	height: 215px;
	text-align: center;
	border-top: 1px solid #4a1813;
	border-bottom: 1px solid #4a1813;
}

#currentStrength {
	font-size: 180px;
	font-weight: bold;
	margin: 0 auto;
	padding: 0;
	line-height: 200px;
}

#epic {
	margin: 0 auto;
	padding: 0;
	position: absolute;
}

#epicBox {
	vertical-align: middle;
	margin: 0 auto;
}

#epic label {
	font-family: inherit;
	font-weight: normal;
	font-size: 21px;	
}

#reminders {
	margin: -12px auto;
	padding: 0;
	height: 31px;
	position: relative;
	clear: both;
}

#bigItem {
	margin: 0 0 0 -3px;
	padding: 0;
	width: 120px;
	float: left;
}

#bigItemBox {
	vertical-align: middle;
	margin: 0 auto;
}

#bigItem label {
	font-family: inherit;
	font-weight: normal;
	font-size: 21px;	
}

#twoHands {
	margin: 0 auto;
	padding: 0;
	width: 120px;
	float: right;
}

#twoHandsBox {
	vertical-align: middle;
	margin: 0 auto;
}

#twoHands label {
	font-family: inherit;
	font-weight: normal;
	font-size: 21px;	
}

#stats {
	height: 348px;
	padding: 0 0 12px 10px;
	margin: 0 auto;
}

#level {
	position: relative;
	float: left;
	width: 100px;
	height: 165px;
	padding: 8px 10px 0 0;
	text-align: center;
}

#hands {
	position: relative;
	float: left;
	width: 135px;
	height: 165px;
	padding: 8px 10px 0 0;
	text-align: center;
}

#gear {
	position: relative;
	float: left;
	width: 100px;
	height: 165px;
	padding: 8px 10px 0 0;
	text-align: center;
}

#curse {
	position: relative;
	float: left;
	width: 100px;
	height: 165px;
	padding: 8px 10px 0 0;
	text-align: center;
}

#other {
	position: relative;
	float: left;
	width: 135px;
	height: 165px;
	padding: 8px 10px 0 0;
	text-align: center;
}

#run {
	position: relative;
	float: left;
	width: 100px;
	height: 165px;
	padding: 8px 10px 0 0;
	text-align: center;
}

#levelLabel, #handsLabel, #gearLabel, #curseLabel, #otherLabel, #runLabel {
	margin: 0;
	padding: 0;
	font-size: 28px;
	font-weight: bold;
}

#gearLabel {
	margin-right: 5px;
}

#currentLevel, #currenthands, #currentGear, #currentCurse, #currentother, #currentRun {
	font-size: 45px;
	font-weight: bold;
	margin: 0 auto;
	padding: 0;
	line-height: 50px;
}

.counterUp{
	background: none;
	color: #4a1813;
	border: none;
	margin: 0 0 0 6px;
	padding: 0;
	font-size: 70px;
	font-weight: bold;
	font-family: 'Arrow';
	line-height: 35px;
	cursor: pointer;
}

.counterDown{
	background: none;
	color: #4a1813;
	border: none;
	margin: 5px 7px 0 0;
	padding: 0;
	font-size: 70px;
	font-weight: bold;
	font-family: 'Arrow';
	line-height: 35px;
	cursor: pointer;
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg); 
	-o-transform:rotate(-180deg); 
	transform:rotate(-180deg);
}

/* buttons & ui */
#controlDialog, #resetDialog {
	display: none;
	min-height: 0px !important;
	padding: 10px 0;
}

.controlDialog, .resetDialog {
	font-family: 'Munchkin';
	width: 290px !important;	
}

.controlDialog button.ui-button-text-only,
.resetDialog button.ui-button-text-only {
	width: 225px !important;
	font-family: 'Munchkin';	
}

.ui-front {
	z-index: 9999 !important;
}				

.ui-dialog .ui-dialog-buttonpane {
    text-align: center !important;
    border-width: 0px 0 0 0 !important;
    margin-top: 0px !important;
    padding: .0em 0 1em 0 !important;
}

.ui-dialog-buttonset {
	float: none !important;
}

.ui-widget-overlay {
	background: #000 !important;
	opacity: .5 !important;
	filter: Alpha(Opacity=50) !important;
}

.ui-widget-shadow {
	background: #000 !important;
	opacity: .5 !important;
	filter: Alpha(Opacity=50) !important;
}

/* Microsoft Edge Browser 12+ (All) - @supports method */
@supports (-ms-accelerator:true) {
	#levelLabel, #handsLabel, #gearLabel, #curseLabel, #otherLabel, #runLabel {
		margin-bottom: -10px;
	}   
	
	#currentLevel, #currenthands, #currentGear, #currentCurse, #currentother, #currentRun {
		line-height: 100px;
	}

	.counterUp, .counterDown {
		line-height: 17.5px;
	}

}

/*	iPhone 4	*/
@media only screen 
and (device-width : 320px) 
and (device-height : 480px)
and (orientation : portrait) 
{ 
	#main {
		width: 320px;
		height: 460px;
		zoom: 1;
	}

	#tokenColor {
		float: left;
		margin: 0 auto;
		padding: 0;
		width: 120px;
		text-align: center;
	}

	#monsterCombat {
		display: none;
		width: 300px;
		height: 225px;
		padding: 10px 10px 10px 10px;
		margin: 0 auto;
		background-color: #fef3e5;
		position: absolute;
		border-top: 1px solid #4a1813;
		border-bottom: 1px solid #4a1813;
		z-index: 999;
	}

		#monsterNumbers label, #playerNumbers label {
			font-family: inherit;
			font-weight: normal;
			font-size: 16px;
			margin: 0 0 0 5px;
		}

		#monsterNumbers input, #playerNumbers input {
			font-family: inherit;
			font-weight: normal;
			font-size: 16px;
			color: #4a1813;
			width: 30px;
			margin: 0 0 7px 0px;
			padding: 0 0 0 5px;
		}

	input#monsterLevel {
		margin-left: 44px;
	}

	input#monsterEnhancer {
		margin-left: 1px;
	}

	input#monsterTotal, input#playerTotal {
		margin-left:40px;
	}

	input#playerStrength {
		margin-left: 55px;
	}

	input#playerHelper {
		margin-left: 35px;
	}
	
	#monsterHeading, #playerHeading {
		margin: 0 0 5px 0;
		font-weight: bold;
		font-size: 18px;
	}

	#totalNumbers {
		margin: 0 auto;
		padding: 2px 0 0 0;
		width: 65%;
		clear: both;
		font-weight: bold;
		font-size: 18px;
	}

	#combatTotal {
		font-family: inherit;
		font-weight: bold;
		font-size: 16px;
		width: 40px;
		margin: 0 auto;
		padding: 0 0 0 5px;
		color: #4a1813;
	}

	#combatOutcome {
		display: none;
		font-family: inherit;
		font-weight: bold;
		font-size: 18px;
		margin: 0 auto;
		padding: 5px 0 0 0;
		width: 110px;
		text-align: center;
		float: none;
	}

	#rollDice {
		display: none;
		width: 300px;
		height: 225px;
		padding: 10px;
		margin: 0 auto;
		background-color: #fef3e5;
		position: absolute;
		border-top: 1px solid #4a1813;
		border-bottom: 1px solid #4a1813;
		z-index: 999;
	}

	#runAway {
		width: 100%;
		height: 85px;
		margin: 0 auto;
		padding: 10px 0 0 0;
		text-align: center;
		font-family: inherit;
		font-weight: normal;
		font-size: 16px;
	}

		#runAway p {
			margin: 10px 0 0 0;	
		}
	
	#strength {
		background: #fef3e5;
		margin: 0 auto;
		padding: 5px;
		height: 88px;
		text-align: center;
		border-top: 1px solid #4a1813;
		border-bottom: 1px solid #4a1813;
	}

	#currentStrength {
		font-size: 80px;
		font-weight: bold;
		margin: 0 auto;
		padding: 0;
		line-height: 88px;
	}

	#reminders {
		margin: -23px auto;
		padding: 0;
		height: 23px;
		clear: both;
	}

	#bigItem {
		margin: 0 2px 0 0;
		padding: 0;
		width: 100px;
		float: left;
	}

	#bigItem label {
		font-family: inherit;
		font-weight: normal;
		font-size: 16px;	
	}

	#twoHands {
		margin: 0 auto;
		padding: 0;
		width: 100px;
		float: right;
	}

	#twoHands label {
		font-family: inherit;
		font-weight: normal;
		font-size: 16px;	
	}

	#stats {
		height: 298px;
		padding: 0 0 12px 10px;
		margin: 0 auto;
	}

	#level {
		position: relative;
		float: left;
		width: 80px;
		height: 140px;
		padding: 5px 10px 0 0;
		text-align: center;
	}

	#hands {
		position: relative;
		float: left;
		width: 120px;
		height: 140px;
		padding: 5px 10px 0 0;
		text-align: center;
	}

	#gear {
		position: relative;
		float: left;
		width: 80px;
		height: 140px;
		padding: 5px 10px 0 0;
		text-align: center;
	}

	#curse {
		position: relative;
		float: left;
		width: 80px;
		height: 140px;
		padding: 10px 10px 0 0;
		text-align: center;
	}

	#other {
		position: relative;
		float: left;
		width: 120px;
		height: 140px;
		padding: 10px 10px 0 0;
		text-align: center;
	}

	#run {
		position: relative;
		float: left;
		width: 80px;
		height: 140px;
		padding: 10px 10px 0 0;
		text-align: center;
	}

	#levelLabel, #handsLabel, #gearLabel, #curseLabel, #otherLabel, #runLabel {
		margin: 0;
		padding: 0;
		font-size: 24px;
		font-weight: bold;
	}


	#currentLevel, #currenthands, #currentGear, #currentCurse, #currentother, #currentRun {
		font-size: 36px;
		font-weight: bold;
		margin: 0 auto;
		padding: 0;
		line-height: 43px;
	}

	.counterUp{
		background: none;
		color: #4a1813;
		border: none;
		margin: 0 0 0 6px;
		padding: 0;
		font-size: 60px;
		font-weight: bold;
		font-family: 'Arrow';
		line-height: 30px;
		cursor: pointer;
	}

	.counterDown{
		background: none;
		color: #4a1813;
		border: none;
		margin: 5px 7px 0 0;
		padding: 0;
		font-size: 60px;
		font-weight: bold;
		font-family: 'Arrow';
		line-height: 30px;
		cursor: pointer;
		-webkit-transform:rotate(-180deg);
		-moz-transform:rotate(-180deg); 
		-o-transform:rotate(-180deg); 
		transform:rotate(-180deg);
	}
}

/*	iPhone 5	*/
@media only screen 
and (device-width : 320px) 
and (device-height : 568px)
and (orientation : portrait) 
{ 
	#main {
		zoom: 0.846984;
	}
}

/*	iPhone 6	*/
@media only screen 
and (device-width : 375px) 
and (device-height : 667px)
and (orientation : portrait) 
{ 
	#main {
		zoom: 1;
	}
}

/*	iPhone 6 Plus	*/
@media only screen 
and (device-width : 414px) 
and (device-height : 736px)
and (orientation : portrait) 
{ 
	#main {
		zoom: 1.104;
	}
}

/*	iPad - Portrait	*/
@media only screen 
and (device-width : 768px) 
and (device-height : 1024px)
and (orientation : portrait) 
{ 
	#main {
		zoom: 1.551776;
	}
}

/*	iPad - Landscape	*/
@media only screen 
and (device-width : 768px) 
and (device-height : 1024px)
and (orientation : landscape) 
{ 
	#main {
		zoom: 1.156104;
	}
}

/*	Steve's & Dave's phones	*/
@media only screen 
and (device-width : 360px) 
and (device-height : 640px)
and (orientation : portrait) 
{ 
	#main {
		zoom: 0.96;
	}
}

/*	Steve's ASUS Memo Pad 7 ME170CX	*/
@media only screen 
and (device-width : 600px) 
and (device-height : 1024px)
and (orientation : portrait) 
{ 
	#main {
		zoom: 1.469864;
	}
}