body { 
  margin: 5px;
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
}
a:link{
	text-decoration:none;
}
.header {
	overflow: hidden;
	background-color: lightblue;
    border-radius:40px;
	text-align:center;
	margin:10px;
	
}
#zaitun_filter{
	display:none;
}
#zaitun_length{
	display:none;
}

.naming{
	 color:green;
	font-size:250%;
	border-radius:20px;
	font-weight:bold;
	text-align:center;

}
@media only screen and (max-width: 700px) {
  .naming{
 font-size:200%;
 color:green;
}}

@media only screen and (max-width: 500px) {
  .naming{
	 color:green;
	font-size:200%;
}}
 @media only screen and (max-width: 370px) {
  .naming{
 font-size:200%;
 color:green;
}}
  
 @media only screen and (max-width: 320px) {
  .naming:hover{
	 color:green;
	font-size:7px;
}}
.issn{
	font-size:100%;
	color:red;
	font-weight:bold;
	text-align:center;
}

@media only screen and (max-width: 741px) {
  .issn{
 font-size:70%;
 color:red;
}}
@media only screen and (max-width: 440px) {
  .issn{
 font-size:50%;
 color:red;
}}
 
@media only screen and (max-width: 450px) {
.issn{
font-size:50%;
color:red;
}}
@media only screen and (max-width: 457px) {
  .issn{
	font-size:50%;
	color:red;
}}  
  
.logo{
	 float:left;
	 width:100px; 
	 height:100px; 
	 padding:0px; 
	 border-radius:25px;
}
 @media only screen and (max-width: 700px) {
  .logo{
	width:70px; 
	height:70px; 
}}

ul .menus{
	list-style:none;
	
}
ul li.menus{
	background-color:#fff;
	border-right:1px solid lightgreen;
	text-align:center; 
	float:left;
	color:#000;
	font-size:12px;
	font-weight:bold;
}
ul li.menus:hover{
	background-color:#ffb;
	color:red;
}

ul li.accounts{
	background-color:#77FFAA;
	min-width:60px; 
	border:1px solid white;
	text-align:center; 
	float:left;
	color:red;
	margin:1px;
	font-size:14px;
	border-radius:20px 5px;
}
ul li.accounts:hover{
	background-color:lightblue;
	color:red;
}

.ok{
	background-color:white;; 
	border-top:1px solid lightgreen;
	text-align:left; 
	color:#0000ff;
	font-size:14px;
	list-style:none;
	padding:4px;
	font-weight:bold;
	font-type:arial;
}
a:link:hover {
	text-decoration:none;
}


.ok:hover{
	background-color:#DfFFf4;
	color:red;
}


.left-menu{
	min-width:130px;
}
.middle-menu{
	min-width:200px;
}
.right-menu{
	min-width:120px;
}
@media only screen and (max-width: 386px) {
  .test{
  width:220px;
  text-align:left;
}}
@media only screen and (max-width: 500px) {
  .test{
  width:220px;
  text-align:left;
}}
@media only screen and (max-width: 800px) {
  .test{
  width:220px;
  text-align:left;
}}
.dating{
	color:#000; 
	font-size:100%;
	font-weight:bold;
	text-align:center;
}
@media only screen and (max-width: 670px) {
  .dating{
  font-size:60%;
}}
@media only screen and (max-width: 370px) {
	 .dating{
	  font-size:60%;
	   text-align:center;
}}


.error{
	color:red;
	font-size:15px;
	
}

input.done[type=text] {
    width: 100%;
    padding: 10px;
    margin: 0px;
	font-size:20px;
	color:#000;
    box-sizing: border-box;
	border:1px solid #000;
}
input.done[type=password] {
    width: 100%;
    padding: 10px;
    margin: 0px;
	font-size:20px;
	color:#000;
    box-sizing: border-box;
	border:1px solid #000;
}
.error{
	color:red;
	font-size:15px;
}
input.middle-menue[type=text] {
    width: 100%;
    padding: 10px;
    margin: 0px auto;
	font-size:15px;
	color:#000;
    box-sizing: border-box;
	border:1px solid #000;
	
}

input.stay[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 16px;
	float:left;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    
}
@media only screen and (max-width: 1048) {
	 .stay{
	 width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}}