nav {
  padding: 15px;
  text-align: center;

}
nav > ul {
  list-style: none;
  padding: 0;
  margin: 0px;
  display: inline-block;
  background: lightgrey; 
  border-radius: 5px;
}
nav > ul > li {
  float: left;
  width: 300px;
  height: 65px;
  
  line-height: 65px;
  position: relative;
  text-transform: uppercase;
  font-size: 19px;
  color: blue;
  cursor: pointer;
  
}
a[href] {color: teal}
a[href]:hover { color: red}

nav > ul > li:hover {
  background: navy;
  border-radius: 5px;
}

ul.drop-menu {
  position: absolute;
  top: 65px;
  left: auto;
  width: 100%;
  padding: 0;
}
ul.drop-menu li {
  background: lightgrey;
  color: gold;
}
ul.drop-menu li:hover {
  background: navy;
}
ul.drop-menu li:last-child {
  border-radius: 0px 0px 15px 15px;
}

ul.drop-menu li {
  display: none;
}

li:hover > ul.drop-menu li {
  display: block;
}

li:hover > ul.drop-menu li {
opacity: 0
animation: 
name: menu-1
durations: 2000ms
timinng-function: ease-in-out
fill-mode: forwards

}

#div4	{position: absolute;  left: 350px; height:900px; width: 1000px; 
	   font-size: 19px; 

           top:250px; 

	}

#div2-votre_presence	{
position: absolute;  
left: 0px; 
height:900px; 
width: 1000px; 
font-size: 19px;
top:485px; 

}

#div2	{position: absolute;  left: 300px; height:1800px; width: 1000px; 
	   font-size: 19px;
           top:300px; 

	}
	
#div1_text2	{
position: relative; 
background: ; 
color: white; 
left: 10px;


}
	
#div1_text_SignUp{
position: relative; 
background: ; 
color: white; 
margin: 0px auto;
top: 0px;
font-size: 50px;  
-webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;

}
	
#div1_text	{
position: relative; 
background: ; 
color: white; 
margin: 0 auto;
top: 0px;
font-size: 125px;  
-webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;

}

@-webkit-keyframes spinny {
  0% {
    -webkit-transform: rotatey(0deg) scale(1);
            transform: rotatey(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotatey(45deg) scale(1);
            transform: rotatey(45deg) scale(1);
  }
  100% {
    -webkit-transform: rotatey(360deg) scale(1);
            transform: rotatey(360deg) scale(1);
  }
}

@keyframes spinny {
  0% {
    -webkit-transform: rotatey(0deg) scale(1);
            transform: rotatey(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotatey(45deg) scale(1);
            transform: rotatey(45deg) scale(1);
  }
  100% {
    -webkit-transform: rotatey(360deg) scale(1);
            transform: rotatey(360deg) scale(1);
  }
}

#div1_SignUp{
position: absolute; 
background: navy;   
color: white;

top: 0px; 
left: 0px; 
width: 750px; 
height:300px; 	
border-radius: 25px 25px 0px 0px;

}
  
#div1	{
position: absolute; 
background: navy;   
color: white;
font-size: 75px; 
top: 0px; 
left: 0px; 
width: 1593px; 
height:300px; 	
border-radius: 25px 25px 0px 0px;

			
}
@-webkit-keyframes  {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes  {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
}

#div1inner-votre_presence	{
position: absolute; 
background: lightgrey; 
color: blue; 
top: 300px; 
left:0px; 
width: 300px; 
font-size: 19px;  
height:1138px;
border-radius: 0px 25px 25px 25px;
}

#div1inner	{
position: absolute; 
background: lightgrey; 
color: blue; 
top: 0px; 
left:0px; 
width: 300px; 
font-size: 19px;  height:2338px;
border-radius: 0px 25px 25px 25px;

	}
#navigation-votre_presence	{
position: absolute; 
background: ghostwhite; 
left: 300px; 
height:100px; 
width: 1293px;
top:300px;
border-radius: 25px 0px 25px 25px;

	}
#navigation	{
position: absolute; 
background: ghostwhite; 
left: 300px; 
height:100px; 
width: 1293px;
top:0px;
border-radius: 25px 0px 25px 25px;

	}

input.error {
  border: 1px dotted red;
}

label.error {
  color: red;
  display: inline;
  float: none;
  font-style: italic;
  margin-left: 10px;
  width: auto;
}

#messages div.error {
  background: #FBE3E4;
  border-color: #FBC2C4;
  color: #8A1F11;
}

#messages p {
  margin: 0;
}

#messages div.success {
  background: #E6EFC2;
  border-color: #C6D880;
  color: #264409;
}

#messages div {
  border: 2px solid;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 0.7em;
  font-style: italic;
  min-height: 16px;
  padding: 5px 28px;
  position: relative;
  text-align: center;
}

#messages {
  left: 33px;
  position: relative;
  top: 25px;
  width: 698px;
}

img.error {
  float: right;
  padding-left: 20px;
}

.error_message {
  font-style: italic;
}

form input, form textarea {
  margin: 5px 0 5px 5px;
}

.center {
  text-align: center;
}

div.user_profile p {
  font-size: 20px;
  color: blue;
}

div.user_profile p.contact_info {
  clear: both;
}

div.user_profile ul {
  font-size: 18px;
}

#Staff_Pic	{
  position: relative;
  border: solid;
  border-color: #ddd #aaa #aaa #ddd;
  border-width: 1px 2px 2px 1px;
  float: right;
  margin: 0 0 10px 25px;
  padding: 8px;
  width: 200px;
  height: 400px;
  top: 100px;
  left: 100px
}

div.user_profile img.user_pic {
  border: solid;
  border-color: #ddd #aaa #aaa #ddd;
  border-width: 1px 2px 2px 1px;
  float: right;
  margin: 0 0 10px 25px;
  padding: 8px;
  width: 200px;
  height: 300px;
}
div.user_profile {
  background-color: #CCC;
  position: relative;
  border-radius: 10px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 15px;
  padding: 10px 20px;
  width: 1000px;
  left: 360px;
  top:  150px;
  -moz-border-radius: 10px;
}

div.user_profile h1 {
  border-bottom: 1px dotted black;
  font-size: 24px;
}
div#error_content {
 padding: 20px 5px 20px 40px;
  position: absolute;
left: 0px;
top: 300px;  
width: 675px;
}


div#welcome_content	{
 padding: 20px 5px 20px 40px;
  position: relative;
top: 350px;  
left: 150;
width: 875px;
}

div#content {
  padding: 20px 5px 20px 40px;
  position: relative;
top: 250px;  
width: 675px;
}
img.delete_user {
  border: 0;
}

#topic-votre_presence	{
background-image: url('');
  background-repeat: no-repeat;
  background-position: left top;
  color: black;
  font-family: Arial, Arial, Helvetica, sans-serif;
  font-size: .8em;
  height: 70px;
  left: 350px;
  padding: 2px 0 0 4px;
  position: relative;
  top: 50px;
  width: 150px;
}
#error_topic	{
 background-image: url('.png');
  background-repeat: no-repeat;
  background-position: 
  color: black;
  font-family: Arial, Arial, Helvetica, sans-serif;
  font-size: .9em;
  height: 30px;
  left: 50px;
  padding: 2px 0 0 4px;
  position: relative;
  top: 5px;
  width: 600px;
}
#topic {
  background-image: url('arrow.png');
  background-repeat: no-repeat;
  background-position: left top;
  color: black;
  font-family: Arial, Arial, Helvetica, sans-serif;
  font-size: .9em;
  height: 30px;
  left: 28px;
  padding: 2px 0 0 4px;
  position: relative;
  top: 5px;
  width: 150px;
}

#topicAll_SignUp	{
 background-image: url('http://www.haitionline.biz/sign_me_up_or_in.png');
  background-repeat: no-repeat;
  background-position: left top;
  color: white;
  font-family: Arial, Arial, Helvetica, sans-serif;
  font-size: .6em;
  height: 30px;
  left: 315px;
  padding: 5px 0 10px 25px;
  position: relative;
  top: 310px;
  width: 150px;

}

#topicAll {
  background-image: url('http://www.haitionline.biz/sign_me_up_or_in.png');
  background-repeat: no-repeat;
  background-position: left top;
  color: white;
  font-family: Arial, Arial, Helvetica, sans-serif;
  font-size: .6em;
  height: 30px;
  left: 315px;
  padding: 5px 0 10px 25px;
  position: relative;
  top: 150px;
  width: 150px;
}

#req {
color: red;

}
#title {position: relative; background: ;  left: 320px; top: 0px;  width: 300px; 
	             height:100px; 
}

#welcome_title_text2	{position: relative; background: ; color: green; font-size: 20px; top: 250px; left: 300px;
 -webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;

}

#welcome_title_text	{position: relative; background: ; color: green; font-size: 30px; top: 0px; left: 200px;
 -webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;

}
#error_title_text	{position: relative; background: ; color: Blue; font-size: 20px; top: 0px; left: 0px;
 -webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;

}

#topic_txt-votre_presence	{
position: absolute; 
color: white; 
top: 0px; 
left: 30px;

}

#topic_txt	{position: absolute; color: white; top: 0px; left: 32px;

}
#welcome_txt	{position: absolute; color: white; top: 149px; left: 60px;
}
#error_txt	{position: absolute; color: red; top: 143px; left: 20px;

}

#error_txt2	{color: orange;
}
#error_txt3	{color: red; 

}

body    { background: blue; 

}



div.SignIn > div.Show_3d1{
opacity: 0;
display: none;
}

div.Resgister > div.Show_3d2{
opacity: 0;
display: none;
}

div.Resgister:hover > div.Show_3d1 a[href] {

}
div.SignIn:hover > div.Show_3d1{
opacity: 0;
display: none;

left 300px;
 
 transform: center 100px;
          transform: center 100px;


}

div.Resgister:hover > div.Show_3d2 a[href] {
target: _blank;
}
div.Resgister:hover > div.Show_3d2{
opacity: 0;
display: none;
 
left 300px;
 
  transform: center 60px;
          transform: center 60px;


}

@-webkit-keyframes note {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg);
            transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg);
  }
  50% {
    -webkit-transform: rotate(-10deg) rotateX(-2deg);
            transform: rotate(-10deg) rotateX(-2deg);
    opacity: 1;
  }
  70% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes note {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg);
            transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg);
  }
  50% {
    -webkit-transform: rotate(-10deg) rotateX(-2deg);
            transform: rotate(-10deg) rotateX(-2deg);
    opacity: 1;
  }
  70% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

#overlay_inner  { 
background-color: orange;

text-align: center;
cursor: pointer;
border-radius: 25px 25px 25px 25px;

} 

#overlay_H {
position: absolute;
opacity: .2;
background-color: navy;
top: 0px;
margin: 0px auto; 
height:1200px; 
width: 1600px; 
border-radius: 25px 25px 25px 25px;
transition: 10s ease;
}

#main_index:hover #overlay_H{
position: absolute; 
background: navy; 
opacity: .8;
transition: 10s ease;

border-radius: 25px 25px 30px 30px;
margin: 0px auto; 
height:1200px; 
width: 1600px; 


}

#main_index  {
position: relative; 
background: ghostwhite; 
opacity: 1;
transition: 10s ease;
background-image: url('http://www.haitionline.biz/Hbg.gif');
background-repeat: no-repeat;
background-position: left top;
border-radius: 25px 25px 30px 30px;
margin: 140px auto; 
height:1200px; 
width: 1600px; 


}

#main-votre_presence	{
position: relative;  
background: ghostwhite; 
margin: 0px auto; 
height:1438px; 
width: 1595px;
border-radius: 25px 25px 25px 25px;
}

#main-retournez     { 
position: relative; 
background: ghostwhite; 
margin: 0px auto; 
height:1000px; 
width: 750px;
border-radius: 25px 25px 25px 25px
}

#main-registrez     { 
position: relative; 
background: ghostwhite; 
margin: 0px auto; 
height:1400px; 
width: 750px;
border-radius: 25px 25px 25px 25px;

}
#error-main {
position: relative; 
background: ghostwhite; 
margin: 0px auto; 
height:800px; 
width: 800px; 
}

#welcome_main	{
position: relative; 
background: ghostwhite; 
margin: 0px auto; 
height:1238px; 
width: 1200px; 
}

#main     { 
position: relative; 
background: blue; 
margin: 0px auto; 
height:4738px; 
width: 1600px; 
top: 0px;
border-radius: 25px 25px 25px 25px;
}

#main_content     { 
position: relative; 
background: ghostwhite; 
top: 300px; left: 0px; 
height:2338px; 
width: 1593px; 
border-radius: 25px 25px 25px 25px;
}

#main2	{ position: absolute; 
background-position: 
top: 500px; 
left: 250px; 
width: 300px; 
height: 200px;

}

#tag1	{position: absolute; color: ; top: 12px; left: 10px; width: 150px; height: 30px;
}
#error_tag1	{position: absolute; color: ; top: 150px; left: 10px; width: 200px; height: 50px;
}

@-webkit-keyframes spinnySI {
  0% {
    -webkit-transform: rotatey(0deg) scale(1);
            transform: rotatey(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotatey(45deg) scale(1);
            transform: rotatey(45deg) scale(1);
  }
  100% {
    -webkit-transform: rotatey(360deg) scale(1);
            transform: rotatey(360deg) scale(1);
  }


}

@keyframes spinnySI {
  0% {
    -webkit-transform: rotatey(0deg) scale(1);
            transform: rotatey(0deg) scale(1);
  }
  50% {
    -webkit-transform: rotatey(45deg) scale(1);
            transform: rotatey(45deg) scale(1);
  }
  100% {
    -webkit-transform: rotatey(360deg) scale(1);
            transform: rotatey(360deg) scale(1);
  }

  
}

#SU	{position: absolute; left: 0px; height: 100px; width: 400px;
 -webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;

 

}
#SU_T	{position: absolute; color: white; left: 50px; top: 50px; font-size: 35px;
-webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;
}

#SI	{position: absolute; left: 500px; height: 100px; width: 400px;
 -webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;

}
#SI_T	{position: absolute; color: white; left: 550px; top: 50px; font-size: 35px;

 -webkit-animation:   20s linear infinite;
          animation:  20s linear infinite;
}

#Text1	{position: relative;  color: black; left: 20px;

}
#Text2	{position: relative; color: red; left: 25px;


}

#signup{
  
  height: 300px;
  left: 10px;
  padding: 10px 10px; 25px; 25px;
  position: absolute;
  font-size: 20px; 
  
  top: 750px;
  width: 1100px;

}

#social_home	{position: relative; background: ; font-size: 20px;
 color: green; top: 0px; left: 295px;
}

#SB	{position: absolute; top: 450px; left: 0px; height: 300px;width: 900px;



}

select {width: 350px; font-size: 10pt}