html,body{
width:100%;
height:100%;
margin:0;
padding:0;
-ms-text-size-adjust:none;
-webkit-text-size-adjust: none;
font-family:Arial, Helvetica, Sans-Serif;
font-size:16px;
color:#888;
background-color:#F8F8F8;
background-image:url('../lock-bg-5.png');
background-repeat:repeat;
background-position:top center;
}
.center{
width:1000px;
margin:0 auto;
position:relative;
}
input,textarea,button,#remember{
width:490px;
height:30px;	
border:solid #ccc 1px;
font-family:Arial, Helvetica, Sans-Serif;
font-size:16px;
box-sizing:content-box;
padding:0 5px;
margin:0;
resize:none;
outline:none;
color:#888;
background-color:#fff;
}
textarea{
height:80px;
padding:5px;
}
input[type=checkbox]{
width:16px;
height:16px;
border:none;
padding:5px;
float:left;
margin:0 6px 0 3px;	
}
input[type=button],input[type=submit],button[type=button],button[type=submit]{
cursor:pointer;
font-weight:bold;
background-color:#559313;
color:#fff;
outline:none;	
}
input::placeholder,textarea::placeholder{
color:#ccc;
font-style:italic;	
}
.bold{
font-weight:bold;	
}
.small{
font-size:10px;
}
.medium{
font-size:16px;
}
.large{
font-size:20px;
}
.massive{
font-size:30px;
}
#login{
width:502px;
margin:0 auto;
padding-top:200px;
}
.welcome{
padding-bottom:10px;
text-align:center;	
}
#remember{
padding-top:10px;
height:25px;
}
.header{
padding-top:10px;	
}
.header form{
float:right;	
}
.header button{
width:auto;
padding:0px 10px 7px 10px;
background-color:#db0002;
color:#fff;
font-size:20px;
}
.header button[type=button]{
background-color:#559313;
margin-left:5px;
}
.header .large{
font-size:25px;	
color:#db0002;
font-weight:bold;
float:left;
padding:2px 0 0 2px;
}
.header:before{
content:"";
display:block;
float:left;
height:32px;
width:32px;
background-image:url('../lock-32.png');
background-repeat:repeat;	
}
.error{
color:#db0002;
text-align:center;
padding:10px;	
}
.red{
background-color:#db0002;
}
.green{
background-color:#559313;
}
.blue{
background-color:#07078e;
}
.red,.green,.blue{
color:#fff;	
}
#records{
padding-top:10px;
}
#newrecord{
width:978px;
padding:10px;
margin:0 auto;
display:none;
position:fixed;
top:0;
background-color:#559313;
color:#fff;	
border:solid #ccc 1px;
border-top:0;
}
#newrecord input[type=button]{
background-color:#559313;
margin-left:10px;
padding:0 13px;
float:right;
width:auto;
color:#fff;
}
#newrecord .massive{
padding-bottom:5px;
float:left;
}
#newrecord form{
clear:both;	
}
#removerecord{
width:978px;
padding:10px;
margin:0 auto;
display:none;
position:fixed;
top:0;
background-color:#db0002;
color:#fff;	
border:solid #ccc 1px;
border-top:0;
}
#removerecord input[type=button]{
background-color:#db0002;
margin-left:10px;
padding:0 13px;
float:right;
width:auto;
color:#fff;
}
#removerecord input[type=submit]{
background-color:#db0002;
}
#deletename{
font-weight:bold;	
}
.search{
padding-top:10px;
}
.search input{
width:808px;
}
.search input[type=submit]{
width:170px;
}
.record{
border:solid #ccc 1px;
background-color:#fff;
padding:5px;
margin:2px 0;	
}
.info{
padding-top:5px;
display:none;
clear:left;	
}
.info:after,.record:after,.header:after,.letters:after{
content:"";
display:block; 
clear:both;	
}
.info_header{
clear:left;
float:left;
width:15px;
margin-right:5px;
margin-bottom:2px;
}
.header button[type=submit]:before,.header button[type=button]:before,.edit:before,.delete:before,.username:before,.password:before,.extra:before{
background-image:url('../icons2.png');
background-repeat:no-repeat;
background-position:10px 10px;
content:"";
display:block;
height:15px;
width:15px;	
}
.header button[type=submit]:before{
background-position:0px 2px;
}
.header button[type=button]:before{
background-position:-15px 2px;
}
.edit:before{
background-position:-44px 4px;
}
.delete:before{
background-position:-30px 3px;
}
.username:before{
background-position:-60px 0px;
}
.password:before{
background-position:-75px 0px;
}
.extra:before{
background-position:-90px 0px;
}
.info_content{
float:left;	
width:898px;
}

.edit{
background-color:#559313;	
}
.delete{
background-color:#db0002;
}
.edit,.delete{
border:solid #ccc 1px;
cursor:pointer;	
height:16px;
float:right;
margin-left:5px;
color:#fff;
padding:1px 5px 7px 5px;
font-size:16px;
font-weight:bold;
}
.username:before,.password:before,.extra:before{
border:solid #ccc 1px;
border-radius:5px;
background-color:#559313;
}
.name{
font-size:22px;
float:left;
width:885px;
}

input,textarea,button,#newrecord,#removerecord,.record,.edit,.delete,#ajaxerror,.letter,#remember{
border-radius:6px;	
}
.search input[type=text]{
border-right:none;
border-top-right-radius:0;
border-bottom-right-radius:0	
}
.search input[type=submit]{
border-left:none;
border-top-left-radius:0;
border-bottom-left-radius:0	
}
input[type=button],input[type=submit],button[type=button],button[type=submit],.record,.edit,.delete,.letter{
background-image:url('../transover.png');
background-position:0 -20px;
background-repeat:repeat-x;	
}

#login input,#newrecord input[type=text],#newrecord textarea,#remember{
margin-bottom:5px;	
}

#ajaxerror{
width:978px;
padding:10px;
margin:0 auto; 
position:fixed;
top:0; 
display:none;
background-color:#db0002;
color:#fff;
font-weight:bold;
border:solid #ccc 1px;	
}
#ajaxerrormessage{
display:none;	
}
#ajaxerror span{
display:inline-block;
padding-top:7px;	
}
#ajaxerror input{
background-color:#db0002;
float:right;
margin-left:10px;
width:auto;	
}
.index,.letter{
font-size:24px;
font-weight:bold;
padding:5px 6px 0 6px;
color:#db0002;	
}
.index{
cursor:pointer;	
display:inline-block;
}
.letter{
float:left;
cursor:pointer;
padding:5px 0;
width:109px;
background-color:#559313;
color:#fff;
text-align:center;
margin:1px;
}
.letter:hover{
background-color:#db0002;	
}
.letter.all{
float:none;
width:auto;	
}
.results{
padding:9px 6px 0 0;
font-size:20px;
color:#559313;
float:right;	
}
#editload,#searchload{
content:"";
display:block;
background-image:url('../load.gif');
height:11px;
width:16px;	
margin:10px 10px 0 0;
display:none;
}
#editload{
float:left;
margin:10px 0 0 10px;	
}
.copyright{
text-align:center;
font-size:10px;	
}
.copyright a, .copyright a:visited, .copyright a:hover, .copyright a:active {
text-decoration:none;
color:inherit;
}

@media only screen and (max-width : 1000px) {
.center{width:460px;}
input,textarea,#remember{width:448px;}	
#login{width:460px;padding-top:50px;}
#newrecord,#removerecord,#ajaxerror{width:438px;}
#newrecord input,#newrecord textarea,#removerecord input{width:426px;}
.search input{width:348px;}
.search input[type=submit]{width:90px;}
.info_content{width:358px;}
.name{width:345px;}
.letter{width:44px;}
.index{padding-top:15px;padding-bottom:3px;}
.results{padding-top:19px;padding-bottom:3px;}
}