/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* MAIN STYLE */

.zclip {
	background-color: red;
    left: 0 !important;
    position: relative !important;
    top: -11px !important;
}

@font-face {
    font-family: 'led_counter_7regular';
    src: url('../font/led_counter-7-webfont.eot');
    src: url('../font/led_counter-7-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/led_counter-7-webfont.woff') format('woff'),
         url('../font/led_counter-7-webfont.ttf') format('truetype'),
         url('../font/led_counter-7-webfont.svg#led_counter_7regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Disabling default's aspect on focus  */
input:focus, select:focus, textarea:focus, button:focus, [contenteditable="true"]:focus, span:focus {
    outline:none;
	outline-color:transparent;
	outline-width:0;
}

/* Changing user's cursor on hover main interactive's elements */
a:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, label:hover, .switch:hover {
	cursor:pointer;
}

/* No link's style */

a, a:hover, a:focus, a:active {
	color: inherit;
	text-decoration: none;
}

/* Changing text's selection color */
::selection {
	background:#002FA7;
	color:#e1f3ff;
}

/* Re-establishing the next block position after the use of float  */
.clear {
	display: block;
	clear: both;
}

.clearfix:after {
	visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}

body {
	background:#1e2226 url('../img/background.svg') no-repeat center top;
	background-size:100%;
	color:#effdff;
	font-family: 'Roboto', sans-serif;
	font-size:0.9em;
}

.no-svg body {
    background:#1e2226 url('../img/background.png') no-repeat center top;
}

#page {
	width:786px;
	height:746px;
	margin:auto;
	background-color:#23262a;
	border-radius:100%;
	margin-top:-100px;
	background: rgba(58,62,66,1);
	background: -moz-linear-gradient(top, rgba(58,62,66,1) 0%, rgba(41,45,48,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(58,62,66,1)), color-stop(100%, rgba(41,45,48,1)));
	background: -webkit-linear-gradient(top, rgba(58,62,66,1) 0%, rgba(41,45,48,1) 100%);
	background: -o-linear-gradient(top, rgba(58,62,66,1) 0%, rgba(41,45,48,1) 100%);
	background: -ms-linear-gradient(top, rgba(58,62,66,1) 0%, rgba(41,45,48,1) 100%);
	background: linear-gradient(to bottom, rgba(58,62,66,1) 0%, rgba(41,45,48,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3e42', endColorstr='#292d30', GradientType=0 );
}

#container {
	margin:auto;
	width:500px;
	padding-top:150px;
}

header {
	position:relative;
	margin:0px 22px 40px 22px;
}

h1 {
	font-weight:bold;
	font-size:1.4em;
}

h1 i {
	font-style: normal;
	font-family: 'led_counter_7regular', sans-serif;
	text-rendering:geometricPrecision;
	font-size:1.2em;
	text-transform:uppercase;
}

input[type="button"], input[type="submit"], input[type="reset"]  {
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:bold;
	background-color:#4f5357;
	color:#effdff;
	border:2px solid #3d4145;
	border-radius:5px;
	-webkit-transition: all 0.2s; /* Safari */
	transition: all 0.2s;
}

input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .copied {
	background-color:#23262a;
	border:2px solid #3d4145;
	color:#3d4145;
}

input[type="reset"] {
	border-radius:100%;
	background:#4f5357 url('../img/refresh.svg') no-repeat center;
	background-size:50%;
	width:32px;
	height:32px;
	border:2px solid #3d4145;
	position:absolute;
	right:0;
	text-indent: 200%;
}

.no-svg input[type="reset"] {
    background:url('../img/refresh.png') no-repeat;
}

input[type="reset"]:active {
	background-color:#23262a;
	border:2px solid #3d4145;
}

/* OPTIONS : PART 1*/

#main-area {
	border:2px solid #d4e5ff;
	border-radius:20px;
	overflow:hidden;
}

#password-option, #password-generated {
	background-color:#313539;
	-moz-box-shadow: inset 0px 0px 10px 5px #25282c;
	-webkit-box-shadow: inset 0px 0px 10px 5px #25282c;
	-o-box-shadow: inset 0px 0px 10px 5px #25282c;
	box-shadow: inset 0px 0px 10px 5px #25282c;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#25282c, Direction=NaN, Strength=10);
}

#password-option {
	padding: 40px 60px 40px 100px;
}

#password-generated {
	padding: 40px 60px 40px 60px;
}

#password-option section {
	float:left;
	padding-top:24px;
}

#password-option aside {
	float:right;
}

#password-generated {
	overflow-y: auto;
	height:256px;
}

#password-generated ul li {
	list-style-type:decimal;
	margin-bottom: 20px;
}

input[type="text"], input[type="number"], .generated {
	padding:5px;
	text-align:center;
	font-family: 'led_counter_7regular', sans-serif;
	text-rendering:geometricPrecision;
	background:#d4e5ff url('../img/led-pattern.png');
	border:2px solid #3d4145;
	color:#002FA7;
	border-radius:5px;
	-moz-box-shadow: inset 1px 1px 10px 0px #7171de;
	-webkit-box-shadow: inset 1px 1px 10px 0px #7171de;
	-o-box-shadow: inset 1px 1px 10px 0px #7171de;
	box-shadow: inset 1px 1px 10px 0px #7171de;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#7171de, Direction=134, Strength=30);
}

.generated {
	width:70%;
	padding:12px;
	font-size:1.8em;
	float:left;
	word-wrap: break-word;
}

input[name="copy"] {
	padding:16px;
	float:left;
	display: block;
}

input[type="text"]:focus, input[type="number"]:focus, .generated:focus {
	background-color:#e1f3ff;
}

/* Hide input number's spin box on Chrome & Firefox */
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

#input-password {
	margin-left:5%;
	margin-bottom:20px;
}

label[for="password"] {
	margin-right:10px;
}

input[name="password"] {
	font-size:1.8em;
	width:40px;
	height:40px;
}

input[name="character"] {
	font-size:3.25em;
	width:88px;
	height:76px;
	float:left;
}

input[name="generate"] {
	padding:11px 34px;
}

#input-character {
	position:relative;
	margin-top:10px;
	margin-bottom:40px;
}

#character-buttons {
	width:45px;
	float:left;
}

input[name="more"], input[name="less"] {
	height:45px;
	width:45px;
	font-size:30px;
	font-weight:normal;
}

/* OPTIONS : PART 2*/

input[type="checkbox"] {
	position:absolute;
	visibility:hidden;
}

#option-number, #option-lowercase, #option-uppercase {
	margin-bottom:20px;
}

#password-option ul label {
	position:relative;
}

[type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before {
	content:'';
	width:10px;
	height:10px;
	border-radius:100%;
	position:absolute;
	left:-20px;
	margin-top:2px;
}

[type="checkbox"]:checked + label:before {
	background-color:#d4e5ff;
	-moz-box-shadow: inset 0px 1px 1px 0px #002FA7, 0px 0px 7px 1px #d4e5ff;
	-webkit-box-shadow: inset 0px 1px 1px 0px #002FA7, 0px 0px 7px 1px #d4e5ff;
	-o-box-shadow: inset 0px 1px 1px 0px #002FA7, 0px 0px 7px 1px #d4e5ff;
	box-shadow: inset 0px 1px 1px 0px #002FA7, 0px 0px 7px 1px #d4e5ff;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#002FA7, Direction=180, Strength=1);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#d4e5ff, Direction=NaN, Strength=7);
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}

[type="checkbox"]:not(:checked) + label:before {
	background-color:#464f59;
	-moz-box-shadow: inset 0px 1px 1px 0px #23262a;
	-webkit-box-shadow: inset 0px 1px 1px 0px #23262a;
	-o-box-shadow: inset 0px 1px 1px 0px #23262a;
	box-shadow: inset 0px 1px 1px 0px #23262a;
}

.switch {
	width:50px;
	height:25px;
	margin-top:10px;
	display:block;
	background-color:#2b3034;
	border-radius:30px;
	-moz-box-shadow: inset 0px 1px 5px 1px #25282c;
	-webkit-box-shadow: inset 0px 1px 5px 1px #25282c;
	-o-box-shadow: inset 0px 1px 5px 1px #25282c;
	box-shadow: inset 0px 1px 5px 1px #25282c;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#25282c, Direction=180, Strength=5);
	position:relative;
}

.switch span {
	width:22px;
	height:22px;
	display:block;
	background-color:#4f5357;
	border:2px solid #3d4145;
	border-radius:100%;
	-webkit-transition: all 0.2s; /* Safari */
	transition: all 0.2s;
}

.switch-on {
	position:absolute;
	left:0;
}

.switch-off {
	position:absolute;
	left:24px;
}

/* RESPONSIVE DESIGN */

@media screen and (min-width: 1600px) {
	
	body {
		font-size:1.1em;
	}
	
	#page {
		width:986px;
		height:946px;
		margin-top:-120px;
	}
	
	#container {
		padding-top:200px;
		width:600px;
	}

	input[name="refresh"] {
		width:42px;
		height:42px;
	}
	
	input[name="character"] {
		font-size:2.8em;
		width:98px;
		height:86px;
	}
	
	input[name="more"], input[name="less"] {
		height:50px;
		width:50px;
	}

	input[name="generate"] {
		padding:14px 42px;
	}
	
	.switch {
		width: 70px;
		height: 40px;
	}
	
	.switch span {
		width:36px;
		height:36px;
	}
	
	.switch-off {
		left:30px;
	}

	#password-generated {
	height:332px;
	}

	.generated {
		padding:16px;
		width:73%;
	}

	input[name="copy"] {
		padding:22px 20px;
	}
}

@media screen and (max-width: 768px) {

	body {
		font-size:1.0em;
		background:#313539;
	}

	#page {
		border-radius:0;
		width:100%;
		height:auto;
		margin:auto;
		background:none;
	}
	
	#container {
		padding-top:10%;
		width:auto;
	}
	
	#main-area {
		margin :5% 10% 5% 10%;
	}

	#input-password {
		margin:0 20% 0 20%;
		position:relative;
	}		
	
	#password-option {
		
		padding:10%;
	}
	
	header {
		margin: 0% 10% 10% 10%;
	}
	
	input[name="refresh"] {
		width:42px;
		height:42px;
	}
	
	header h1 {
		text-align:center;
		margin:0;
	}
	
	input[name="refresh"] {
		right:10%;
		top:15%;
	}
	
	input[name="character"] {
		font-size:2.8em;
		width:98px;
		height:86px;
	}
	
	input[name="more"], input[name="less"] {
		height:50px;
		width:50px;
	}

	input[name="generate"] {
		padding:14px 42px;
	}
	
	.switch {
		width: 70px;
		height: 40px;
	}
	
	.switch span {
		width:36px;
		height:36px;
	}
	
	.switch-off {
		left:30px;
	}

	#password-generated {
	overflow-y: inherit;
	height:auto;
	}

	.generated {
	width:67%;
	}

	input[name="copy"] {
	padding:18px;
	}
}

@media screen and (max-width: 600px) {
	
	input[name="refresh"] {
		width:42px;
		height:42px;
	}	
	
	#main-area {
		margin :5% 20%;
	}
	
	#password-option section {
		float:none;
		padding-top:0px;
		width:166px;
		margin:auto;
	}
	
	#password-option aside {
		float:none;
		width:122px;
		margin:auto;
	}
	
	input[name="generate"] {
		margin-top:40px;
		display:block;
		width:165px;
		margin-left:auto;
		margin-right:auto;
	}

	.generated {
	width:86%;
	}

	input[name="copy"] {
	width:100%;
	}
}

@media screen and (max-width: 400px) {
	
	input[name="refresh"] {
		width:32px;
		height:32px;
	}
	
	#main-area {
		margin :5% 10%;
	}
	
	#input-password {
		margin:0 10% 0 20%;
	}		
	
	#password-option section {
		width:148px;
	}
	
	input[name="character"] {
		font-size:2.8em;
		width:88px;
		height:76px;
	}
	
	input[name="more"], input[name="less"] {
		height:45px;
		width:45px;
	}

	input[name="generate"] {
		padding:11px 34px;
		width:150px;
	}

	.generated {
		width:78%;
	}
	
	.switch {
		width: 50px;
		height: 25px;
	}
	
	.switch span {
		width:22px;
		height:22px;
	}
	
	.switch-off {
		left:24px;
	}

}