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"],input[type="radio"]{
width:16px;
height:16px;
border:none;
padding:0;
float:left;
margin:0 6px 0 3px;	
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
appearance:none;
}
input[type="checkbox"]:before,input[type="checkbox"]:checked:before,input[type="checkbox"]:checked:after,input[type="radio"]:before,input[type="radio"]:checked:before,input[type="radio"]:checked:after{
position:absolute;
content:"";
height:16px;
width:16px;
margin:0 6px 0 0;
border-radius:6px;	
background-color:#fff;
border:solid #ccc 1px;
}
input[type="checkbox"]:checked:before,input[type="radio"]:checked:before{
background-color:#559313;
}
input[type="checkbox"]:checked:after,input[type="radio"]:checked:after{
background-color:transparent;
}

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:20px;
}
#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,#removerecord,#backup{
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;
}
#removerecord{
background-color:#db0002;
}
#newrecord button[type="button"],#removerecord button[type="button"],#backup button[type="button"]{
background-color:#559313;
margin-left:10px;
padding:0 13px;
float:right;
width:auto;
color:#fff;
}
#removerecord button[type="button"]{
background-color:#db0002;	
}
#newrecord .massive,#removerecord .massive,#backup .massive{
margin-bottom:5px;
float:left;
}
#newrecord form{
clear:both;	
}
#removerecord input[type="submit"]{
background-color:#db0002;
}
#removerecord div:nth-child(3),#backup div:nth-child(3),#backup div:nth-child(5){
clear:left;	
background-color:#fff;
color:#888;
margin-bottom:5px;
width:480px;
}
#removerecord span{
display:block;
padding-top:5px;
}
#deletename{
font-weight:bold;	
}
.search{
padding-top:10px;
}
.search input[type="text"]{
width:801px;
float:left;
padding-left:12px;
padding-top:2px;
}
.search input[type="submit"]{
width:170px;
height:63px;
float:right;
}
.search label{
float:left;
padding:3px 2px 0 2px;
color:#fff;
color:#559313;
}
.search:after,.search div:after{
content:"";
display:block;
clear:left;	
}
.search div{
height:26px;
padding:5px 5px 0px 5px;
//background-color:#559313;
border:solid #ccc 1px;
border-radius:5px;
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-right-radius:0;
margin-top:-1px;
display:inline-block;
border-top:none;
border-right:none;
width:808px;
float:left;
}
.all{
padding:1px 6px;
margin-left:7px;
margin-top:-1px;
float:right;
border:solid #ccc 1px;
border-radius:5px;
cursor:pointer;
font-size:16px;
}
.record{
border:solid #ccc 1px;
background-color:#fff;
padding:5px 5px 5px 10px;
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;
}
.record.selected{
background-color:#db0002;
color:#fff;	
}
.record.selected .info,.record.show .info{
display:block;
}
.header button[type="submit"]:before,.header button[type="button"]:before,.edit:before,.delete:before,.username:before,.password:before,.extra:before,#newrecord button[type="button"]:before,#removerecord button[type="button"]:before,#backup button[type="button"]:before,#ajaxerror button[type="button"]:before,#newrecord .massive:before,#removerecord .massive:before,#backup .massive:before,input[type="checkbox"]:checked:after,input[type="radio"]:checked:after{
background-image:url('../icons3.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,#newrecord .massive:before{
background-position:-15px 2px;
}
.header button[name="bu"]:before,#backup .massive:before{
background-position:-75px 2px;
}
.header button[name="bu"],#backup,#backup button[type="button"],#backup input[type="submit"]{
background-color:#AAA;	
}
.edit:before{
background-position:-44px 4px;
}
.delete:before,#removerecord .massive:before{
background-position:-30px 3px;
}
#newrecord button[type="button"]:before,#removerecord button[type="button"]:before,#backup button[type="button"]:before,#ajaxerror button[type="button"]:before{
background-position: -30px 0px;
}
#newrecord .massive.editrec:before{
background-position:-44px 3px;
}
.username:before{
background-position:-60px 0px;
}
.password:before{
background-position:-75px 0px;
}
.extra:before{
background-position:-90px 0px;
}
input[type="checkbox"]:checked:after,input[type="radio"]:checked:after{
background-position:-105px 1px;	
height:16px;
width:16px;	
}
#newrecord .massive:before,#removerecord .massive:before,#backup .massive:before{
float:left;
margin-right:5px;
margin-top:1px;	
}
#newrecord .massive,#removerecord .massive,#removerecord div,#backup .massive,#backup div{
border:solid #ccc 1px;
padding:5px;
border-radius:5px;
}
#removerecord div:nth-child(3),#backup div:nth-child(3),#backup div:nth-child(5){
padding:10px;	
}
.info_content{
float:left;	
width:958px;
padding-left: 5px;
}
.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:919px;
}
input,textarea,button,#newrecord,#removerecord,#backup,.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;
border-bottom-left-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,.all,input[type="checkbox"]:checked:before,input[type="radio"]:checked:before{
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 button{
background-color:#db0002;
float:right;
margin-left:10px;
width:auto;	
}
.index,.letter,.no_results{
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-top:9px;
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;	
padding:10px 0 5px 0;
}
.copyright a, .copyright a:visited, .copyright a:hover, .copyright a:active {
text-decoration:none;
color:inherit;
}
#download{
margin-top:10px;
background-color:#fff;
color:#888;	
}
#download a{
color:#db0002;
}

@media only screen and (max-width : 1000px) {
.center{width:460px;}
input,textarea,#remember{width:448px;}	
#login{width:460px;padding-top:50px;}
#newrecord,#removerecord,#backup,#ajaxerror{width:438px;}
#newrecord input,#newrecord textarea,#removerecord input,#backup input{width:426px;}
#removerecord div:nth-child(3),#backup div:nth-child(3),#backup div:nth-child(5){width:416px;}
.search input[type="text"]{width:341px;}
.search input[type="submit"]{width:90px;}
.search div{width:348px;}
.search label{font-size:12px;padding-top:4px;}
.search label input{margin-left:1px;margin-top:-2px;}
.record.selected .name,.record.show .name{padding-bottom:20px;}
.info_content{width:413px;}
.name{width:379px;}
.letter{width:44px;}
.index{padding-top:15px;padding-bottom:3px;}
.results{padding-top:19px;padding-bottom:3px;}
}