#base{

 text-align:center;

 font-size:80%;

}

#main{

 width:430px;

 background-color:#FFFFFF;

 text-align:center;

 margin:2px auto;

 padding:auto;

 color:#000;

}

#item{

 width:425px;

 text-align:center;

 pdding:5px 3px;

 margin:0;

 color:#333333;

}



.clear{

	clear: both;

}

.clear hr{

	display: none;

}

.item1{

 float:left;

 width:130px;

 background-color:#DDDDDD;

 margin:2px 5px;

 padding:5px;

 text-align:right;

}

.item2{

 float:left;

 margin:2px 0;

 padding:5px;

 border:1px;

 text-align:left;

 border-color:#663;

 color:#000;

}

.item3{

 background-color:#0066CC;

 width:390px;

 text-align:left;

 margin:2px 5px;

 padding:5px;

}

.item4{

 text-align:left;

 margin:2px 5px;

 padding:5px;

 width:480px;

 border:1px solid #FFF;

}



p{

@font-size:14px;

@color:#FFF;

}



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

 #main{

  width:100%;

 }

 #item{

  width:100%;

 }

 .item1{

  width:30%;

 }

 input[type="text"] {

  width:150px;

 }

 input[type="password"] {

  width:150px;

 }

}