*{
	font-family:'Courier New', Courier, Monaco, monospace;
	font-size:20px;
}

*[hide]{
	display:none;
}

body{
	background-image:url("./images/background.jpg");
	background-position:left top;
	background-attachment:fixed;
	background-repeat:repeat;
	width:400px;
	margin:10px auto auto auto;
	overflow:hidden;
}

header{
	width:100%;
	height:130px;
	padding:10px 0px 0px 0px;
	margin:0px;
	position:relative;
}

header .logo{
	width:350px;
	height:100px;
	margin:0px 25px;
	background-image:url("./images/background.png");
	background-position:0px 0px;
	background-repeat:no-repeat;
	position:absolute;
	left:0px;
	top:0px;
}

header .button{
	width:210px;
	height:30px;
	padding:0px;
	position:absolute;
	top:110px;
	background-image:url("./images/background.png");
	background-repeat:no-repeat;
	cursor:pointer;
}

header .button.left{
	background-position:0px -100px;
	left:0px;
	z-index:2;
}

header .button.right{
	background-position:-210px -100px;
	right:0px;
	z-index:1;
}

button{
	padding:5px;
	border:none;
	border-radius:5px;
	outline:none;
	font-size:25px;
	font-weight:bold;
	cursor:pointer;
	transition:all .5s;
	-webkit-transition:all .5s;
}

/* common style for generator and checker */

.panel, .newrow{
	width:100%;
	float:left;
	position:relative;
}

.newrow{
	margin:10px 0px;
}

.label{
	float:left;
	margin:0px 10px;
}

input{
	background:#FFF;
	height:25px;
	padding:5px;
	border:3px solid #FFF;
	border-radius:5px;
	outline:none;
	font-family:Monaco, "Courier New", Courier, monospace;
}

.tickbox{
	width:25px;
	height:25px;
	margin:0px 5px;
	background-image:url("./images/background.png");
	background-position:-350px 0px;
	background-repeat:no-repeat;
	overflow:hidden;
	float:left;
}

/* generator */

.panel .generator{
	width:100%;
	height:355px;
	background-color:rgba(60,194,244,.4);
	border-radius:0px 0px 10px 10px;
}

.generator .length{
	width:180px;
	float:right;
	margin:0px 10px 0px 0px;
}

.generator .tickbox{
	cursor:pointer;
}

.generator .tickbox[active]{
	background-position:-350px -25px;
}

.generator .scale{
	width:360px;
	height:5px;
	background-color:#FFF;
	margin:0px 0px 0px 17px;
	border-radius:5px 5px 0px 0px;
	float:left;
	overflow:hidden;
	border:2px solid #08B1EF;
	border-bottom:0px;
}

.generator .scale .score{
	width:0px;
	height:5px;
	transition:all .5s;
	-webkit-transition:all .5s;
}

.generator input.password{
	width:350px;
	margin:0px 17px;
	border-radius:0px 0px 5px 5px;
	border:2px solid #08B1EF;
	border-top:0px;
}

.generator button{
	color:#000;
	width:370px;
	margin:0px 15px;
	background:#0CCBED;
	box-shadow:0 0 0 1px rgba(0,102,255,.15) inset,0 0 12px rgba(0, 102, 255, 0.2) inset;
}

.generator button:hover{
	box-shadow:0 0 0 1px rgba(0,102,255,.4) inset,0 0 25px rgba(0, 102, 255, 0.7) inset;
}

.generator button:active{
	transition:all .1s;
	-webkit-transition:all .1s;
	background:#A6DCF0;
}

/* checker */

.panel .checker{
	width:100%;
	height:355px;
	background-color:rgba(138,232,20,.4);
	border-radius:0px 0px 10px 10px;
}

.checker table td{
	padding:10px 0px;
}

.checker table span{
	font-size:16px;
}

.checker .tickbox[value=true]{
	background-position:-375px 0px;
}

.checker .tickbox[value=false]{
	background-position:-375px -25px;
}

.checker .markingColor{
	width:10px;
	height:10px;
	margin:-3px 5px;
	background-image:url("./images/background.png");
	border:solid 2px #333;
	border-radius:100%;
}

.checker .password{
	width:350px;
	height:30px;
	margin:7px 17px 0px 17px;
	border:2px solid #68B503;
}

.checker .scale{
	width:360px;
	height:35px;
	margin:0px 17px;
	background-color:#FFF;
	border:2px solid #FFF;
	border-radius:5px;
	overflow:hidden;
}

.checker .scale .totalScore{
	width:0px;
	height:10px;
	margin:0px;
	padding:0px;
	float:left;
	background-color:rgba(102,102,102,1);
	transition:width .5s;
	-webkit-transition:width .5s;
}

.checker .scale .indvScore{
	width:0px;
	height:25px;
	margin:0px;
	padding:0px;
	float:left;
	transition:width .5s;
	-webkit-transition:width .5s;
}

/* settings */

.settings{
	width:25px;
	height:50px;
	position:absolute;
	top:5px;
	right:0px;
	cursor:pointer;
	overflow:hidden;
	transition:width .5s;
	-webkit-transition:width .5s;
}

.settings:hover{
	width:55px;
}

.settings .icon{
	width:50px;
	height:50px;
	background-image:url("./images/background.png");
	background-position:-350px -50px;
	background-repeat:no-repeat;
	transition:transform .5s;
	-webkit-transition:-webkit-transform .5s;
}

.settings .icon:hover{
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
}

.settingsPanel{
	width:400px;
	height:0px;
	border-radius:10px;
	background:rgba(0, 0, 0, 0.9);
	position:absolute;
	top:120px;
	transition:height 1s ease-out;
	-webkit-transition:height 1s ease-out;
	z-index:10;
	overflow:hidden;
	color:#FFF;
}

.settingsPanel .bar{
	width:180px;
	height:365px;
	margin:10px;
	float:left;
}

.settingsPanel button{
	width:180px;
	background-color:#F00;
	color:#FFF;
	float:left;
}

.settingsPanel .switch{
	width: 50px;
    height: 25px;
    background: #FFFFFF;
    float: left;
    margin-top: 30px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}

.settingsPanel .switch .pointer{
    width: 25px;
    height: 25px;
}

.settingsPanel .switch .pointer#true{
    background: rgba(153,204,0,1);
    margin-left: 0px;
}

.settingsPanel .switch .pointer#false{
    background: rgba(255,0,0,1);
    margin-left: 25px;
}

.settingsPanel .history{
	font-size:15px;
	word-break: break-all;
}

/* footer */

footer, .noscript{
	width:100%;
	font-family:'Times New Roman', Times, serif;
	font-style:italic;
	text-align:center;
	float:left;
	margin-top:15px;
	font-size:18px;
}