*
{
margin:0px;
padding:0px;
}
  
body{
background-color: #1373c0;
position:relative;
font-family:verdana;
} 
                                
#loginform
{
width:550px;
height:auto;
position:relative;
margin:150px auto;
}

input
{
display:block;
margin:15px auto 15px;
border-radius:5px;
background: #333333;
width:85%;
padding:7px 20px 10px 7px;
border:none;
color:#eee;                       
box-shadow:inset 0px 1px 5px #272727;
font-size:0.8em;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease; 
}

input:focus
{
background: #777;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;  
box-shadow: 0px 0px 7px 1px #161718;
}

button
{
background: #ff5f32;
border-radius:50%;
border:10px solid #222526;
font-size:0.8em;
color:#fff;
font-weight:bold;
cursor:pointer;
width:85px;
height:85px;
position:absolute;
right: -49px;
top: 50px;
text-align:center;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

button:hover
{
background:#222526;
border-color:#ff5f32;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

button i
{
font-size:20px;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

button:hover i
{
color:#ff5f32;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}
  
*:focus{outline:none;}
::-webkit-input-placeholder {
color:#929999;
}

:-moz-placeholder { /* Firefox 18- */
color:#929999; 
}

::-moz-placeholder {  /* Firefox 19+ */
color:#929999;  
}

:-ms-input-placeholder {  
color:#929999; 
}

h1
{
text-align:center;
color:#fff;
font-size:12px;
padding:5px 0px;
}

#note
{
color:#ff5f32;
font-size: 0.8em;
text-align:left;
padding-left:6px;
margin-top:-7px;
}

#facebook
{
text-align:left;
float:left;
background: #44962e;
padding:8px 10px 20px 10px;
width:172px;
height:172px;
border-radius:3px;
cursor:pointer;
box-shadow: 1px 1px 5px 2px #6f7158; 
margin-right:10px;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

#facebook2
{
clear:both;
text-align:left;
float:left;
background:#ecea47;
padding:8px 10px 10px 10px;
width:172px;
height:10px;
border-radius:3px;
cursor:pointer;
box-shadow: 1px 1px 5px 2px #b1b67f; 
margin-top:10px;
margin-right:10px;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

#kab2
{
font-size: 11px;
color: #333;
text-align: left;
font-family: tahoma;
margin-top:-4px;
font-weight: bold;
}

#facebook:hover
{
box-shadow: 0px 0px 0px 0px #6f7158;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

#facebook2:hover
{
box-shadow: 0px 0px 0px 0px #b1b67f;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

#mainlogin:hover
{
box-shadow: 0px 0px 0px 0px #161718;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

.fa-facebook
{
color:#fff;
font-size:7em;
display:block;
}

a
{
color:#333;
text-decoration:none;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

a:hover
{
color:#ff5f32;
margin-left:5px;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

#mainlogin
{
float:left;
width:280px;
height:160px;
padding:10px 15px;
position:relative;
background:#555555;
border-radius:3px;
box-shadow: 1px 1px 10px 2px #363738; 
margin-right:10px;
-webkit-transition:0.5s ease;
-moz-transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
transition:0.5s ease;
}

#sid
{
font-weight: bold;
color: #fff;
font-size: 18px;
text-align: right;
text-shadow:0px 0px 2px #777;
margin-top:1px;
padding-right:7px;
}

#connect
{
font-weight: bold;
color: #fff;
font-size: 13px;
text-align: right;
text-shadow:0px 0px 2px #777;
margin-top:-7px;
padding-right:7px;
}

#desa
{
font-weight: bold;
font-size: 14px;
color: #fff;
text-align: left;
font-family: verdana;
padding-top:40px;
}

#kec
{
font-size: 11px;
color: #fff;
text-align: left;
font-family: verdana;
font-style: italic;
margin-top:-1px;
}

#kab
{
font-size: 11px;
color: #fff;
text-align: left;
font-family: verdana;
font-style: italic;
margin-top:-4px;
}

#logo
{
margin-top:-63px;
margin-left:-28px;
}

#or
{
position:absolute;
left: -25px;
top: 15px;
background:#333333;
text-shadow:0 2px 0px #121212;
color:#ff5f32;
width:40px;
height:40px;
text-align:center;
border-radius:50%;
box-shadow: 1px 1px 3px 2px #363738; 
font-weight:bold;
line-height:38px;
font-size: 13px;
}