body { 

background-image: no-repeat ; 

background-position: 0% 0% ;

background-image: url(../Images/Background2.jpg) ;

background-size: 100% 100% ;

background-attachment: scroll ;

background-color: #39E7EE ;

}


#MainImage { 
width: 90% ;
height: 160px ; 
position: relative ; 
top: 0% ; 
left: 4% ; 
background-image: url(../Images/OmnifariousWorld2.png) ; 
background-size: 100% 100% ;
}

 
 a:link  { 
color: #A4F1F6 ; 
}


 
 a:hover ,  a:focus { 
color: white ; 
}

 
 a:active { 
color: red ; 
}

 
 a:visited {   
color: #26D7A2 ;
}



#ButtonsPanel { 
height: auto ;
width: auto ; 
border: solid 2px ; 
border-radius: 7px ; 
background-image: url(../Images/TopPanel.jpg) ; 
background-size: 100% 100% ;
border-color: #53EDFF ; 
background-color: #53EDFF ; 
float: top ; 

-webkit-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 1em rgba(0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ;  
}



#MenuButton0 { 
border: solid 2px #29cbae ; 
width: 5.4% ; 
border-radius: 10px ; 
padding: 4px ; 
margin: 1px ; 
margin-top: 4px ;  
margin-left: 30% ;
float: left ;
background-image: url(../Images/LongButtons.png) ; 
background-size: 100% 100% ;
background-color: #00ffbf ; 

-webkit-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 2px (0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
}

#MenuButton1 {
border: solid 2px #53EDFF ;
width: 4% ; 
border-radius: 10px ;
padding: 4px ;
margin: 1px ; 
margin-left: 1% ; 
margin-top: 4px ;
float: left ; 
background-color: #00ffbf ; 
background-image: url(../Images/LongButtons.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 2px (0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
}

#MenuButton2 {
border: solid 2px #53EDFF ;
width: 7.4% ;
border-radius: 10px ;
padding: 4px;
margin: 1px ; 
margin-top: 4px ; 
margin-left: 1% ; 
float: left ; 
background-color: #53EDFF ; 
background-image: url(../Images/LongButtons.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 2px (0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
}

#MenuButton3 {
border: solid 2px #53EDFF ;
width: 4% ;
border-radius: 10px ;
padding: 4px ;
margin: 1px ;
margin-top: 4px ; 
margin-left: 1% ; 
float: left ; 
background-color: #00ffbf ; 
background-image: url(../Images/LongButtons.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 2px (0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
}







#MenuButton4 {
border: solid 2px #53EDFF ;
width: 4.9% ;
border-radius: 10px ;
padding: 4px ;
margin: 1px ;
margin-top: 4px ; 
margin-left: 1% ; 
float: left ; 
background-color: #00ffbf ; 
background-image: url(../Images/LongButtons.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 2px (0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 2px rgba( 0 , 70 , 70 , 1 ) ;  
}


#MainPanel { 
width: 70% ; 
height: 47.7em ; 
border: solid 2px #53EDFF ; 
border-radius: 4% ; 
margin-left: 0% ;
padding: 7px ; 
padding-left: 20px ; 
background-image: url(../Images/Panel.png) ; 
background-size: 100% 100% ; 
float: left ; 
color: black ;

-webkit-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 1em rgba(0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
}

#InsidePanel { 
width: 94% ; 
height: 42em ; 
border: solid 2px #53EDFF ; 
border-radius: 4% ; 
margin-top: 1% ;
margin-left: 0% ;
padding: 7px ; 
padding-left: 10px ; 
background-image: url(../Images/Panel2.png) ; 
background-size: 100% 100% ; 
background-attachment: scroll ; 
overflow: auto ;
float: left ; 
color: black ; 

-webkit-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 1em rgba(0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
}

#SecondElement { 
border: solid 2px #53EDFF ; 
height: 7% ;
width: 10% ; 
margin-left: 43% ; 
border-radius: 7px ;  
padding-left: 30px ; 
background-image: url(../Images/Panel.png) ; 
background-size: 100% 100% ;

-webkit-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 1em rgba(0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
}


#mainText { 
color: #C8FAD7  ;
font-style: bold ; 
font-size: 22px ; 
margin-left: 2% ;
}

img { 
width: 90% ; 
height: 60% ; 
padding: 0% ; 
border: 2px solid #53EDFF ; 
border-radius: 40px ; 
margin-left: 1% ; 
margin-top: 1% ; 
float: left  ;

-webkit-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 1em rgba(0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
}


#LastPanel {
width: 23% ;
height: 35em ;
border: solid 2px #53EDFF ;
border-radius: 4% ;
margin-left: 1% ; 
margin-top: 1% ;
padding: 7px ;
padding-left: 20px ;
background-image: url(../Images/Panel.png) ; 
background-size: 100% 100% ;
float: left ; 

-webkit-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
-ms-box-shadow: 2px 2px 1em rgba(0 , 40 , 70 , 1 ) ;
-moz-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1) ;  
-o-box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ;  
box-shadow: 2px 2px 1em rgba( 0 , 70 , 70 , 1 ) ; 
}

#ThirdElement { 
border: solid 2px #53EDFF ;
width: 30% ;
margin-left: 27% ; 
border-radius: 7px ;
padding: 2px ;
padding-left: 17px ; 
background-image: url(../Images/Panel.png) ; 
background-size: 100% 100% ;
}

#InvisblePanel {
width: 23% ;
height: 10em ;
margin-left: 1% ; 
margin-top: 2em ;
padding: 7px ;
padding-left: 20px ;
float: left ; 
}

#Copyright { font-size: 20px ;
margin-bottom: 20px ;
margin-left: 40% ; 
padding-top: 1% ; 
}

Button { 
margin-top: 30px ; 
margin-left: 1% ; 
padding-top: 2px ;
color: black ; 
border-right: none ; 
border-top: none ; 
border-left: -7px ; ; 
border-bottom: -7px ;
border-color: black ; 
border-radius: 20px ; 
border-color: #53EDFF ;
background-color: rgba(20 , 170 , 170 , 0.7 ) ;  
padding-top: 1em ; 
padding-bottom: 1em ; 
width: 90% ; 
} 

#hoveredButton2   {  
width: 30% ; 
float: left ; 
}


 

#MailUsers {   
background-image: url(../Images/ForumsImages/ForumPanel.png) ; 
border: solid 1px #53EDFF ;
border-radius: 10px ; 
margin: 1% ;  
margin-left: 0% ; 
height: 97% ;  
width: 20% ; 
float: left ; 
overflow: auto ;
}


#ChatUser {   
padding: 0% ;
width: 97% ;  
height: 10% ; 
margin: 2% ; 
margin-top: 7% ;
}

#ChatUserImage   {   
width: 40% ; 
height: 77% ;
}

#SelectUser {   
margin-left: 2% ; 
margin-top: 12% ;  }


#MailSection {   
border-left: solid 1px #53EDFF ;
margin: 1% ;  
margin-left: 0.2% ;
height: 97% ;  
width: 77% ; 
float: left ;
}



#ChatWindow   {  
background-image: url(../Images/ForumsImages/ForumPanel.png) ; 
border: solid 2px #53EDFF ; 
border-radius: 20px ;
width: 99% ; 
height: 57.7% ;  
margin: 1% ; 
margin-top: 1% ; 
overflow: auto ;
}

  
#ChatMate   {
width: 90% ; 
min-height: 30% ;  
height: auto ;
margin: 2% ; 
margin-left: 4% ; 
}

#ChatMateInfo {  
height: 90px ;
width: 14% ;  }

#ChatMateName   {    
height: 10% ;
width: 20% ; 
margin-top: 7px ; 
margin-left: 7% ; 
float: left ;
}

#Message   {    
margin-left: 16% ;
margin-top: -90px ; 
width: 79% ;  }

#ChatImage {  
border: none ; 
float: none ; -
-webkit-box-shadow: 0px 0px 0em rgba( 0 , 0 , 0 , 0 ) ; 
-ms-box-shadow: 0px 0px 0em rgba(0 , 0 , 0 , 0 ) ;
-moz-box-shadow: 0px 0px 0em rgba( 0 , 0 , 0 , 0) ;  
-o-box-shadow: 0px 0px 0em rgba( 0 , 0 , 0 , 0 ) ;  
box-shadow: 0px 0px 0em rgba( 0 , 0 , 0 , 0 ) ; 
} 




#ChatSection {   
border-top: solid 1px #53EDFF ;
margin: 1% ; 
margin-top: 2% ; 
margin-left: 1% ;
height: 27% ;  
width: 97% ; 
float: left ;
}

#BrowseChatImg {   
width: 40% ; 
}

#SendMessage , #DeleteMessages   {  
margin-left: 22% ; 
width: 20% ;
height:  40px ;
}

#DeleteMessages {  
margin-left: 40% ; 
margin-top: 17em ; width: 27% ;
display: none ;
}

#TypeText    { 
margin: 1% ;   
width: 97% ; 
height: 140px ; 
font-size: 17px ;
}

#MailImage { 
border: none ; 
border-radius: 0 ;
margin-left: -20px ; 
margin-top: -9px ;
padding-right: 20px ; 
width: 12% ; 
height: 6em ; 
float: left ; 

-webkit-box-shadow: 0px 0px 0em rgba( 0 , 0 , 0 , 0 ) ; 
-ms-box-shadow: 0px 0px 0em rgba(0 , 0 , 0 , 0 ) ;
-moz-box-shadow: 0px 0px 0em rgba( 0 , 0 , 0 , 0) ;  
-o-box-shadow: 0px 0px 0em rgba( 0 , 0 , 0 , 0 ) ;  
box-shadow: 0px 0px 0em rgba( 0 , 0 , 0 , 0 ) ; 
}

#LoginName {     
margin: 20px ;  }

#PassName   {    
margin:20px ; }

#EmailName {    
margin: 20px ; display: none ; }

#AvatarImg   {   
margin-top : 20px ;
margin-left: 12% ;
width: 70% ; 
height: 200px ; border-radius : 60px ;
}

#LogNames , #RealName  {   
margin-right: 7% ;  
padding-left : 30% ; 
padding-bottom:   7px ;
border-bottom : solid 2px #53EDFF ; 
border-radius : 20px ;
font-size : 20px ;
color : black ;  
}

#Logout    {   
margin-left: 23% ; 
margin-top : 27px ; 
width: 40% ; 
height: 40px ;
}


#Messages {  
margin-left: -10px ;
margin-top : 50px ; 
padding: 7px ;
font-size: 20px ;  
border: solid 2px #53EDFF ; 
border-radius: 20px ;  
background-image: url(../Images/Panel2.png) ; 
}

#WrongError {   
color: red ; 
font-size: 20px ; 
margin-top: 0px ; 
margin-left: 10%  ; 
height: 30px ; 
display: none ;
}

#RegH {   
margin-left: 37% ;  
font-style: oblique ; 
}

#RegError { 
color: red ;  
font-size: 17px ; 
margin-left: 27% ; /* display: none */
}


 #Important { 
 margin: 20px ; 
 margin-left: 14% ; 
 margin-top: 20px ; 
 float: left ;
 }

 #Unimportant {  
 margin: 20px ; 
 margin-left: 55% ; 
 margin-top: -370px ; 
 float: left ;
 }

 #RegSubmit  {  
 font-size: 30px ; 
 padding : 10px ;
 width: 30% ;
 margin-left: -7% ; 
 margin-top: 377px ; 
}

#LoginName , #PassName , #EmailName {  
margin-left: 14% ;
}

#Logs , #MailLogs   {    
padding-top: 1em ; 
padding-bottom: 1em ; 
width: 40% ; 
margin-left: 23% ;
}

#SendToMailPassword {  
margin-top: 2px ; margin-left: 
width: 70% ; 
display: none ; 
}



th {   
padding: 7px ;
border: solid 2px #63DFBE ;  
border-right: none; 
border-top: none ; 
border-left: none;
}

#TableImg {   
width: 70px ; 
height: 70px ; 
margin-left: 2% ;
}

#Su {    
text-decoration: none ; 
}

#UsersTable {  width: 70% ;
display: none ; 
}


}





































































































































































































































































@media(max-width: 1200px )   { 

#MainPanel {
width: 66% ;
}

#LastPanel {
width: 27% ;
}

#InvisblePanel {
width: 27% ;
}


}

@media(max-width: 1150px )   { 

#MainPanel {
width: 65% ;
}

#LastPanel , #InvisblePanel {
width: 27.7% ;
}

#SendMessage { 
margin-left: 20% ;
width: 20% ; 
}

}


@media ( max-width: 1020px )   {  
#MenuButton0 { width: 5.4% ;   }
#MenuButton1 { width: 4.2% ;   }
#MenuButton2 { width: 7.7% ;   } 
#MenuButton3 { width: 3.7% ;   } 
#MenuButton4 { width: 5.5% ;   }

#MainPanel { 
width: 64% ;  
}

#SendMessage { 
width: 20% ; 
margin-left: 10% ;
}

}

@media (max-width: 900px)   { 

#LastPanel , #InvisblePanel { 
width: 27% ;                 
}

#DeleteMessages   { width: 40% ;
}

}

@media (max-width: 830px)   { 
#MenuButton0 { width: 7% ;   }
#MenuButton1 { width: 4.4% ;   }
#MenuButton2 { width: 9% ;   } 
#MenuButton3 { width: 3.7% ;   } 
#MenuButton4 { width: 6.2% ;   }

#MainPanel { 
width: 62% ;  
}

#DeleteMessages   { width: 30% ;
}

#Copyright { 
float: left ; 
}

}













@media ( max-width: 807px )        { 

#MenuButton0 { width: 7.7% ; margin-left: 17%  ;  }
#MenuButton1 { width: 5.7% ; margin-left: 4%  ;  }
#MenuButton2 { width: 10.7% ; margin-left: 4%  ;  } 
#MenuButton3 { width: 4.7% ; margin-left: 4%  ;   } 
#MenuButton4 { width: 7.2% ; margin-left: 4%  ;   }
}

@media ( max-width: 740px )        { 

#MainPanel { 
margin-left: 1% ; 
margin-top: 12em ;
width: 94% ;
}


#LastPanel { 
margin-top: -61em ; 
margin-left: 2% ;
width: 92% ; 
height: 170px ; 
border-radius: 40px ; background-size: 100% 400% ;  
}



#InvisblePanel {
height: 1em ; 
width: 1em ; 
display: none ;
}

#Copyright   { 
margin-top: -0.2em ;
}

#ThirdElement { margin-left: 30% ;
width: 20% ;	
}

#LoginName {     
font-size: 14px ;
margin: 2px ; 
margin-top: -10px ;
margin-left: 0% ;  
}

#PassName   {    
font-size: 14px ;
margin-left: 0% ; 
}

#EmailName {    
margin-left: 0% ; 
}

#hoveredButton0 , #hoveredButton1  { 
font-size: 12px ;
width: 27% ; 
margin-left: 70% ;  
float: left ; 
margin-top: -155px ;
}



#hoveredButton1  { 
margin-top: -110px ; 
float : left ;
}

#Messages { 
width: 30% ;	
}

#AvatarImg   {   
width: 20% ; 
height: 120px ;  
margin-top: -20px ;
margin-left: 0% ; 
float: left ;
}

#LogNames {     
width: 10% ;
margin-left: -20% ;  
margin-top: 100px ;
float: left ; 
padding: 10px ;
}


#Logs , #MailLogs    { 
width: 17% ;	
margin-left: 0% ; 
margin-top: -12px ;
padding: 2px ; 
float: left ; 
}

#Logs {   
margin-left: 34% ; 
margin-top: -70px ; 
padding: 12px ; 
 }

#Logout    {  
width: 17% ;	
margin-left: 14% ; 
margin-top: 40px  ; 
padding: 2px ; 
float: left ; 
}

#Messages , #License {  
width: 20% ;
margin-left: 70% ; 
margin-top: -60px ; 
font-size: 16px ;
}

#License {  
margin-left: 70% ; 
margin-top: -60px ; 
width: 22% ; 
float: left ;	
}



#WrongError {   
font-size: 20px ; 
}

}



@media (max-width: 650px )   { 

#MenuButton0 { width: 12% ; margin-left: 10% ;  }
#MenuButton1 { width: 9% ;   }
#MenuButton2 { width: 16% ;   } 
#MenuButton3 { width: 7.7% ;   } 
#MenuButton4 { width: 9.2% ;   }

#MainImage   { 
background-image: url(../Images/OmnifariousWorld.png) ; 
background-size: 100% 100% ;  
height: 140px ;
}

#SecondElement { 
margin-left: 34% ;
}

#ThirdElement { 
width: 17% ;	
}

#Login , #Pass { 
width: 100px ;	
}

#EmailName {  
font-size: 14px ; 
width: 60% ;
}

#Copyright { 
margin-left: 30% ;
margin-top: -2em ; 
font-size: 17px ; 
padding: 20px ;
}

Button {
width: 20% ;
}

body {
background-image: url(../Images/BackgroundSmall2.jpg) ; 
}

}

@media (max-width: 555px )   {   


#MainPanel {   
height: 640px ; 
margin-left: 0% ;
}

#InsidePanel { 
height: 550px ; 
}

#LastPanel { 
margin-top: -53.4em ; }

#Messages , #License {  
width: 20% ;
font-size: 14px ;
}

#hoveredButton0 , #hoveredButton1  { 
font-size: 10px ;
width: 34% ; 
margin-left: 66% ; 
}

#AvatarImg   {  
height: 90px ;	
}


#LoginName {  
font-size: 14px ;
}



#Logs {   
margin-left: 140px ; 
margin-top: -70px ; 
padding: 10px ; 
width: 70px ;
}

#SecondElement { 
margin-left: 34% ;
width: 17% ; 
padding: 1px ; 
}

#ThirdElement { 
margin-left: 34% ;
width: 20% ; 
}

#EmailName {  
font-size: 12px ;
}

#MailUsers { 
width: 20% ; 
float: left ;
}

#ChatWindow { 
height:  50% ; 
width: 90% ;
}

#TypeText { 
width: 90% ;
}

#SendMessage { 
margin-left: 0% ;
}

#hoveredButton2 { 
margin-top: 47px ; 
}

}      

@media (max-width: 555px )   { 

#ChatWindow { 
width: 120% ; 
}

#TypeText { 
width: 120% ;
}

#BrowseChatImg { 
width: 20% ;  }

#SendMessage { 
font-size: 12px ; 
padding: 7px ;
}



#DeleteMessages   { width: 47% ;
}

#MailUsers { 
display: none ;
}	

}

@media (max-width: 400px)    {


#MenuButton0 { width: 16% ; margin-left: 0.7% ;  }

#MenuButton1 { width: 11% ; margin-left: 0.7% ;  }

#MenuButton2 { width: 22% ; margin-left: 0.7% ;  } 

#MenuButton3 { width: 9% ;  margin-left: 0.7% ;  }

#MenuButton4 { width: 13% ; margin-left: 0.7% ;  }   




#SecondElement { 
margin-left: 40% ;
width: 30% ; 
}

#Logs { 
margin-left: 120px ; 
padding: 2px ; 
width: 50px ;
}





}