@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

*{
  padding:0;
  margin:0;
}

body{
  font-family:'Open Sans',sans-serif;
}
fieldset{
  width:400px;
  margin:0 auto;
  margin-top:8px;
  margin-bottom:2%;
  transition:opacity 1s;
  -webkit-transition:opacity 1s;

}
h1{
  background:#004A3E;
  padding:20px 0; /*PADDING TODOS OS LADOS DE 20PX*/
  font-size:140%;
  font-weight:300;
  text-align:center;
  color:#fff;
}
form{
  background:#f0f0f0;
  padding:6% 4%;
}
input[type="password"]{
  width:76%;
  height:20px;
  margin-bottom:4%;
  border:1px solid #ccc;
  padding:4% 4% 4% 4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}
.iconPassword{
  width:20px;
  height:20px;
  background-color:#369;
  float:left;
  padding:4% 4% 4% 4%;
  margin-bottom:4%;
  background-repeat:no-repeat;
   background-image:url(https://cdn4.iconfinder.com/data/icons/font-awesome-2/2048/f09c-32.png);
  background-position:center;
  border:1px solid #ccc;
}
.iconUser{
  width:20px;
  height:20px;
  background-color:#369;
  float:left;
  padding:4% 4% 4% 4%;
  margin-bottom:4%;
  background-repeat:no-repeat;
   background-image:url(https://cdn4.iconfinder.com/data/icons/font-awesome-2/2048/f007-32.png);
  background-position:center;
  border:1px solid #ccc;
}
input[type="text"]{
  width:76%;
  height:20px;
  margin-bottom:4%;
  border:1px solid #ccc;
  padding:4% 4% 4% 4%;
  font-family:'Open Sans',sans-serif;
  font-size:95%;
  color:#555;
}
input[type="submit"]{
  width:100%;
  background:#369;
  border:0;
  padding:4%;
  font-family:'Open Sans',sans-serif;
  font-size:100%;
  color:#fff;
  cursor:pointer;
  transition:background .3s;
  -webkit-transition:background .3s;
}

input[type="submit"]:hover{
  background:#009;
}
::-webkit-input-placeholder {

}

.chkbox {
	margin:			0 0 10px 20px;
}
/* ラベルのスタイル　*/
.chkbox label {
	padding-left:		38px;			/* ラベルの位置 */
	font-size:		16px;
	line-height:		20px;
	display:		inline-block;
	cursor:			pointer;
	position:		relative;
}

/* ボックスのスタイル */
.chkbox label:before {
	content:		'';
	width:			20px;			/* ボックスの横幅 */
	height:			20px;			/* ボックスの縦幅 */
	display:		inline-block;
	position:		absolute;
	left:			0;
	background-color:	#fff;
	box-shadow:		inset 1px 2px 3px 0px #000;
	border-radius:		6px 6px 6px 6px;
}
/* 元のチェックボックスを表示しない */
.chkbox input[type=checkbox] {
	display:		none;
}
/* チェックした時のスタイル */
.chkbox input[type=checkbox]:checked + label:before {
	content:		'\2713';		/* チェックの文字 */ 
	font-size:		20px;			/* チェックのサイズ */
	color:			#fff;			/* チェックの色 */
	background-color:	#CCC;			/* チェックした時の色 */
}