* {padding: 0;margin: 0;} 
html { font-size:100.01%; border-top: #202020 10px solid;}
body { font-size:75%;}
body { margin : 0 auto; background-color: #555; color: #fcfcfc; font-family: 'Segoe UI Light',Arial, sans-serif; line-height: 2em;}
.error {color:red; font-size: .9em; font-style:italic; text-align:center; clear: both;}
#wrapper {margin : 2em auto; font-size:1.3em; max-width: 600px;}
header {max-height:60px;}
h1 {font-size:44px; font-weight:normal; text-align:center; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1); color:#202020; line-height:1em;}
#chromeframe {margin:0;margin-bottom:15px;padding:5px 10px 0 5px;text-align:center; font-size: 12px; font-weight: bold;color:#fff;}
#firstcontent {margin-top: 1.5em;}
ol { list-style-type: none;color: #ccc;}
ol li {position: relative;font: bold italic 30px/1.5 Helvetica, Verdana, sans-serif;margin-bottom: 20px;}
li p {font: 12px/1.5 Helvetica, sans-serif;padding-left: 60px;}
span {position: absolute;}
form {margin: 0 auto; max-width: 330px; margin-bottom: 1.5em;}
button, input {margin:15px 0;width : 320px;text-align: center; clear: both;}
button{font-size:1em;padding: .75em;color:#fff;}
input{
	background-color:#303030;
	border-radius: .4em;
	box-shadow: 0 -1px 0 0px #000;
	border: none;
	height:27px;
	color:#fff;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	}
button{
	border:none;
	background: #363535;
	background: -webkit-gradient(linear, left top, left bottom, from(#3a3a3a), to(#303030));
	background: -moz-linear-gradient(bottom,  #303030,  #3a3a3a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3a3a3a', endColorstr='#303030');
	border-radius: .2em;
	box-shadow: 0 0px 1px rgba(255,255,255,0.1);
	color:#fff;
	}
	button:hover{
		background: #363535;
		background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b), to(#303030));
		background: -moz-linear-gradient(bottom,  #303030,  #4b4b4b);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b', endColorstr='#303030');
	}
	button:active{border:none;box-shadow: 0 0px 2px rgba(255,255,255,0.2);}
input:focus:required:invalid {color:#000;}
footer { clear: both;color:#888;font-size: .8em; text-align:center; padding-top: 20px;border-top:1px solid #4a4a4a;text-shadow: 1px 1px 0 #333;}
footer a { color: #202020; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);}
footer a:hover { color: #54a6de; }
/* keyframes  in header*/
.animated {
		-webkit-animation-duration: 2s;
		-moz-animation-duration: 2s;
		-o-animation-duration: 2s;
	animation-duration: 2s;
		-webkit-animation-iteration-count: infinite;
		-o-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
@-webkit-keyframes shake {
	0%, 100% {-webkit-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
	0%, 100% {-moz-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
	0%, 100% {-o-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.animated.shake {
	-webkit-animation-name: shake;
	-moz-animation-name: shake;
	-o-animation-name: shake;
	animation-name: shake;
}
/* Responsive */
@media (max-width:480px){
	html,body {font-size: 10px;}
	button, input {width : 99%;}
	h1 {font-size:24px;}
	#wrapper {margin : 1em auto;}
	#firstcontent, #secondcontent, footer { display:none;}
}