﻿#formWrapper {
	background-image: url('form.png');
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 850px;
	height: 500px;
}
form {
	padding-left: 60px;
	padding-top: 14px;
	padding-bottom: 0;
	padding-right: 0;
	margin: 0;
}

input[type=range][orient=vertical]
{
	writing-mode: bt-lr; /* IE */
	width: 25px;
	height: 426px;
	padding: 0;
	margin: 0;
}

input[type="range"]::-moz-range-thumb {
    width:24px;
    height:24px;
}
input[type="range"]::-ms-thumb {
    width:24px;
    height:24px;
    z-index: 9999;
    display: block;
    background-color: transparent;
}

input[type="range"]::-moz-range-track {
    background-color: #000;
}
input[type="range"]::-ms-track {
    background-color: #000;
}

input[type="submit"] {
	margin-top: 0px;
	margin-left: 10px;
	padding: 15px 90px;
}

#login strong {
	font-size: 30px;
}

input.fox::-moz-range-thumb { background-image: url('fox.png'); }
input.fox::-ms-thumb { background-image: url('fox.png'); }
input.fox::-webkit-slider-thumb { background-image: url('fox.png'); }

input.falco::-moz-range-thumb { background-image: url('falco.png'); }
input.falco::-ms-thumb { background-image: url('falco.png'); }
input.falco::-webkit-slider-thumb { background-image: url('falco.png'); }

input.sheik::-moz-range-thumb { background-image: url('sheik.png'); }
input.sheik::-ms-thumb { background-image: url('sheik.png'); }
input.sheik::-webkit-slider-thumb { background-image: url('sheik.png'); }

input.marth::-moz-range-thumb { background-image: url('marth.png'); }
input.marth::-ms-thumb { background-image: url('marth.png'); }
input.marth::-webkit-slider-thumb { background-image: url('marth.png'); }

input.jiggly::-moz-range-thumb { background-image: url('jiggly.png'); }
input.jiggly::-ms-thumb { background-image: url('jiggly.png'); }
input.jiggly::-webkit-slider-thumb { background-image: url('jiggly.png'); }

input.peach::-moz-range-thumb { background-image: url('peach.png'); }
input.peach::-ms-thumb { background-image: url('peach.png'); }
input.peach::-webkit-slider-thumb { background-image: url('peach.png'); }

input.falcon::-moz-range-thumb { background-image: url('falcon.png'); }
input.falcon::-ms-thumb { background-image: url('falcon.png'); }
input.falcon::-webkit-slider-thumb { background-image: url('falcon.png'); }

input.ics::-moz-range-thumb { background-image: url('ics.png'); }
input.ics::-ms-thumb { background-image: url('ics.png'); }
input.ics::-webkit-slider-thumb { background-image: url('ics.png'); }

input.drmario::-moz-range-thumb { background-image: url('drmario.png'); }
input.drmario::-ms-thumb { background-image: url('drmario.png'); }
input.drmario::-webkit-slider-thumb { background-image: url('drmario.png'); }

input.pikachu::-moz-range-thumb { background-image: url('pikachu.png'); }
input.pikachu::-ms-thumb { background-image: url('pikachu.png'); }
input.pikachu::-webkit-slider-thumb { background-image: url('pikachu.png'); }

input.samus::-moz-range-thumb { background-image: url('samus.png'); }
input.samus::-ms-thumb { background-image: url('samus.png'); }
input.samus::-webkit-slider-thumb { background-image: url('samus.png'); }

input.ganon::-moz-range-thumb { background-image: url('ganon.png'); }
input.ganon::-ms-thumb { background-image: url('ganon.png'); }
input.ganon::-webkit-slider-thumb { background-image: url('ganon.png'); }

input.luigi::-moz-range-thumb { background-image: url('luigi.png'); }
input.luigi::-ms-thumb { background-image: url('luigi.png'); }
input.luigi::-webkit-slider-thumb { background-image: url('luigi.png'); }

input.mario::-moz-range-thumb { background-image: url('mario.png'); }
input.mario::-ms-thumb { background-image: url('mario.png'); }
input.mario::-webkit-slider-thumb { background-image: url('mario.png'); }

input.ylink::-moz-range-thumb { background-image: url('ylink.png'); }
input.ylink::-ms-thumb { background-image: url('ylink.png'); }
input.ylink::-webkit-slider-thumb { background-image: url('ylink.png'); }

input.link::-moz-range-thumb { background-image: url('link.png'); }
input.link::-ms-thumb { background-image: url('link.png'); }
input.link::-webkit-slider-thumb { background-image: url('link.png'); }

input.dk::-moz-range-thumb { background-image: url('dk.png'); }
input.dk::-ms-thumb { background-image: url('dk.png'); }
input.dk::-webkit-slider-thumb { background-image: url('dk.png'); }

input.yoshi::-moz-range-thumb { background-image: url('yoshi.png'); }
input.yoshi::-ms-thumb { background-image: url('yoshi.png'); }
input.yoshi::-webkit-slider-thumb { background-image: url('yoshi.png'); }

input.zelda::-moz-range-thumb { background-image: url('zelda.png'); }
input.zelda::-ms-thumb { background-image: url('zelda.png'); }
input.zelda::-webkit-slider-thumb { background-image: url('zelda.png'); }

input.roy::-moz-range-thumb { background-image: url('roy.png'); }
input.roy::-ms-thumb { background-image: url('roy.png'); }
input.roy::-webkit-slider-thumb { background-image: url('roy.png'); }

input.mewtwo::-moz-range-thumb { background-image: url('mewtwo.png'); }
input.mewtwo::-ms-thumb { background-image: url('mewtwo.png'); }
input.mewtwo::-webkit-slider-thumb { background-image: url('mewtwo.png'); }

input.gnw::-moz-range-thumb { background-image: url('gnw.png'); }
input.gnw::-ms-thumb { background-image: url('gnw.png'); }
input.gnw::-webkit-slider-thumb { background-image: url('gnw.png'); }

input.ness::-moz-range-thumb { background-image: url('ness.png'); }
input.ness::-ms-thumb { background-image: url('ness.png'); }
input.ness::-webkit-slider-thumb { background-image: url('ness.png'); }

input.bowser::-moz-range-thumb { background-image: url('bowser.png'); }
input.bowser::-ms-thumb { background-image: url('bowser.png'); }
input.bowser::-webkit-slider-thumb { background-image: url('bowser.png'); }

input.pichu::-moz-range-thumb { background-image: url('pichu.png'); }
input.pichu::-ms-thumb { background-image: url('pichu.png'); }
input.pichu::-webkit-slider-thumb { background-image: url('pichu.png'); }

input.kirby::-moz-range-thumb { background-image: url('kirby.png'); }
input.kirby::-ms-thumb { background-image: url('kirby.png'); }
input.kirby::-webkit-slider-thumb { background-image: url('kirby.png'); }

@media screen and (-webkit-min-device-pixel-ratio:0) {  
	form {
		padding-top: 0 !important;
		margin-top: -13px !important;
	}

	/* CSS Statements that only apply on webkit-based browsers (Chrome, Safari, etc.) */  
	input[type=range][orient=vertical] {
		-webkit-appearance: none; /* Webkit */
		-webkit-transform: rotate(-90deg);
		width: 426px !important;
		height: 25px !important;
		background: transparent;
	}
	
	input[type=range][orient=vertical]::-webkit-slider-runnable-track {
		width: 426px;
		height: 3px;
		background: #000;
		border: none;
		border-radius: 3px;
	}
	
	input[type="range"]::-webkit-slider-thumb  {
		-webkit-appearance: none;
		-webkit-transform: rotate(90deg);
		opacity: 1;
		width:24px;
		height:24px;
		position: relative;
		top: -9px;
		z-index: 99;
	}
	
	input.fox {
		margin-left: -205px !important;
	}
	
	input.falco {
		margin-left: -400px !important;
		margin-top: 223px !important;
	}
	
	input.sheik, input.marth, input.jiggly, input.peach, input.link, input.dk,
	input.falcon, input.ics, input.drmario, input.pikachu, input.yoshi, input.gnw,
	input.samus, input.ganon, input.luigi, input.mario, input.ylink {
		margin-left: -400px !important;
	}
	
	input.roy {
		margin-left: 365px !important;
		margin-top: -29px !important;
	}
	
	input.mewtwo {
		margin-left: 395px !important;
		margin-top: -29px !important;
	}
	
	input.zelda {
		margin-left: 425px !important;
		margin-top: -29px !important;
	}
	
	input.ness {
		margin-left: 455px !important;
		margin-top: -29px !important;
	}
	
	input.bowser {
		margin-left: 485px !important;
		margin-top: -29px !important;
	}
	
	input.pichu {
		margin-left: 515px !important;
		margin-top: -29px !important;
	}
	
	input.kirby {
		margin-left: 545px !important;
		margin-top: -29px !important;
	}
	
	input[type="submit"] {
		margin-top: 205px;
	}
}