body 	{
background-color:#f18973; font-family: Arial, Helvetica, sans-serif;
}
h1 {text-align:right;background-color:#d5f4e6}
h2 {text-align:centre;background-color:#d5f4e6}
#img1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}
#img2 {
  width:180px; height:110px;
  float:right;
}
div { width: 220px; height:150px;
  border: 2px solid red;
  padding: 10px;
  margin: 20px;}
#div1 {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 95%;
  border: 2px solid green;
  animation-name: color;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#div2 {
  border-radius: 40px;
  animation-name: color;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#div3{

  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}
#div4 {
	position: relative;
	animation-name:example;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}
#div5 {

  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}
#div6 {

  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#div7 {

  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}
#div8 {

  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
#div9 {
	position:relative;
	left:30px;
	top:30px;
}
#div10 {
	position:absolute;
	left:77%;
	}
ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
}
a { 
	font-family: Arial, Helvetica, Sans-serif;
	color: #000;
	text-decoration: none;
	font-size: 0.9em;
	display:block;
	padding:6px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	background-color:#EAEAEA;
}
a:hover {
	color:#FFF;
	background-color:#666;
	border-right-width:5px;
	border-right-style:solid;
	border-right-color:#36F;
}

@keyframes example{
  0%   {left:0px; top:0px;background-color: green;}
  25%  {left:77%; top:0px;}
  50%  {left:77%; top:194px;}
  75%  {left:0px; top:194px;}
  100% {left:0px; top:0px;background-color: blue;}
}

@keyframes color{
  from {background-color: green;}
  to {background-color: blue;}
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.azul {color:blue}
.verde {color:green}