/*
 * CSS 
 */
 
/* Estructura */
body {
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	color: #e2001a;
	margin: 0px;
	font-size: 15px;
	text-align:justify;	
	background: #C4CE1F url('../img/fondo.jpg') center top repeat-x;
}

a { color:#e2001a;font-weight:bold; text-decoration:none; }
a:active {color:#e2001a;font-weight:bold; text-decoration:none;}
a:hover {color:#e2001a;font-weight:bold; text-decoration:none; }

.nav {position: relative; float: left; height: 25px; text-align: center;}
.nav img {width: 80%; height: 80%;}
a.nav:hover {border-bottom: 2px solid red;}

.wrapper { margin:15px auto; width:803px; height:696px;}
.wrapper2 { margin:15px auto; width:647px; height:109px; background: url('../img/bg2.png') no-repeat; padding: 60px 0px 50px 150px; font-size: 18px;}

.levelA { margin: 15px auto auto auto; width:803px; height:121px;}
.cab { margin: -5px auto auto auto; width:803px; height:29px; background: url('../img/bg_1.png') no-repeat;}

.content { display:table; margin:0px auto auto auto; width: 723px; min-height:100px; background: url('../img/bg_2.png') repeat-y; padding: 0px 40px 0px 40px;}
.pie { margin:0px auto auto auto; width:803px; height:31px; background: url('../img/bg_3.png') no-repeat;}

.grafia { position: relative; float: left; width: 150px; height: 175px; padding: 10px 10px 10px 10px; text-align: center; cursor:hand; display:none;}
.grafia img {width: 142px; height: 155px;}
.grafia p {width: 150px; height: 20px; margin: 2px 0px 0px 0px; font-size: 17px; cursor:hand;}

.vocabulary {position: relative; float: left; width: 600px; height: 40px; margin: 0px 0px 0px 19px; padding: 0px; cursor: hand;  display:none; color: #E2001A; font-size: 28px; font-weight: bold;}


.cancion {position: relative; float: right; width: 647px; text-align: center; font-size: 18px; color: #e2001a; font-weight:bold; display:none; cursor:hand; margin-right: 66px; }

.stories { position: relative;width: 500px; float: left; text-align: left; margin-left: 0px; cursor:hand;}
.stories p { margin: 0px 0px 5px 0px;width: 500px;  font-size: 15px;}


.historia { position: relative; float: left; width:700px; margin:0px 0px 10px 10px; padding: 0px; text-align: center; display:none; cursor:pointer; }
.historia img {text-align: center;}
.historia .sound2 { margin: 5px 0px 25px 0px; width:700px; padding:0px 10px 0px 0px;  font-size: 17px; }

.routines { position: relative;width: 500px; float: left; text-align: left; margin-left: 0px; cursor:hand;}
.routines p { margin: 0px 0px 5px 0px; width: 500px; cursor:hand; font-size: 17px;}


.rutinas { position: relative; float: left; width: 250px; min-height: 350px; padding: 10px 15px 0px 15px; text-align: left; display:none;}
.rutinas .sound  { margin: 3px 0px 5px 0px; width:270px; padding:0px 10px 0px 0px;  cursor:hand;}



p.wrapper2 {padding: 60px 0px 0px 160px; font-size: 22px;}

.charlie { position: relative; float: left; width: 156px; height: 221px; background: url('../img/charlie.png') no-repeat; margin: -25px;}
.charlie2 { position: relative; float: left; width: 540px; height: 85px; background: url('../img/charlie2.png') no-repeat; padding: 15px 0px 0px 114px;}
.charlie2 p {  color: #E2001A; font-size: 28px;font-weight:bold;}
.titulo { position: relative; float: left; width: 445px; height: 58px; background: url('../img/titulo.png') no-repeat;  margin:25px 25px 25px 58px;}

.home { position: relative; float: left; width: 156px;  height: 221px;}
a.home {position: relative;float: left; background: url('../img/home.png') no-repeat; display: block; width:49px;height:45px; background-position:0px 0px; text-align: center;}
a.home:hover {position: relative;float: left;  background: url('../img/home.png') no-repeat; display: block; width:49px;height:45px; background-position: 0px -45px;}
p.home {margin: 43px auto; width:49px;height: 15px; }


a.EMOTIONS { position: relative; float: left; background: url('../img/emotions.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position: 0px 0px; text-align: center;}
a.EMOTIONS:hover {position: relative;float: left;  background: url('../img/emotions.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;}
p.EMOTIONS {margin: 115px auto;  width:113px; height: 18px;}

a.ANIMALS { position: relative; float: left; background: url('../img/animals.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.ANIMALS:hover {position: relative;float: left;  background: url('../img/animals.jpg') no-repeat; display: block; 113px;height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;}
p.ANIMALS {margin: 115px auto; width:113px; height: 18px;}



a.THEBODY { position: relative; float: left; background: url('../img/body.jpg') no-repeat; display: block; width:132px;height:113px;margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.THEBODY:hover {position: relative;float: left;  background: url('../img/body.jpg') no-repeat; display: block; width:132px;height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;} 
p.THEBODY {margin: 115px auto;  width:113px; height: 18px;}

a.CLOTHES { position: relative; float: left; background: url('../img/clothes.jpg') no-repeat; display: block; width:112px; height:112px;margin: 20px 0px 10px 0px; background-position:0px 2px; text-align: center;}
a.CLOTHES:hover {position: relative; float: left;  background: url('../img/clothes.jpg') no-repeat; display: block; width:112px;height:112px;margin: 20px 0px 10px 0px; background-position: 0px -110px;}
p.CLOTHES {margin: 115px auto; width:113px; height: 18px;}



a.COLOURS { position: relative; float: left; background: url('../img/colours.jpg') no-repeat; display: block; width:112px; height:112px;margin: 20px 0px 10px 0px; background-position:0px 10px; text-align: center;}
a.COLOURS:hover {position: relative;float: left;  background: url('../img/colours.jpg') no-repeat; display: block; width:112px;height:112px;margin: 20px 0px 10px 0px; background-position: 0px -102px;}
p.COLOURS {margin: 115px auto; width:113px; height: 18px;}

a.FAMILY { position: relative; float: left; background: url('../img/family.jpg') no-repeat; display: block; width:113px;height:113px; margin: 20px 0px 10px 0px; background-position:0px 5px; text-align: center;}
a.FAMILY:hover {position: relative;float: left;  background: url('../img/family.jpg') no-repeat; display: block; width:113px;height:113px; margin: 20px 0px 10px 0px; background-position: 0px -108px;}
p.FAMILY {margin: 115px auto; width:113px;  height: 18px;}



a.FOOD { position: relative; float: left; background: url('../img/food.jpg') no-repeat; display: block; width:112px;height:112px;margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.FOOD:hover {position: relative;float: left;  background: url('../img/food.jpg') no-repeat; display: block; width:112px;height:112px;margin: 20px 0px 10px 0px; background-position: 0px -112px;} 
p.FOOD {margin: 115px auto; width:113px; height: 18px;}

a.SCHOOL { position: relative; float: left; background: url('../img/bg_school.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.SCHOOL:hover {position: relative;float: left;  background: url('../img/bg_school.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;}
p.SCHOOL {margin: 115px auto;  width:113px; height: 18px;}


a.NATURE { position: relative; float: left; background: url('../img/nature.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.NATURE:hover {position: relative;float: left;  background: url('../img/nature.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;}
p.NATURE {margin: 115px auto; width:113px;  height: 18px;}

a.NUMBERS { position: relative; float: left; background: url('../img/numbers.jpg') no-repeat; display: block;width:113px;height:113px;margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.NUMBERS:hover {position: relative;float: left;  background: url('../img/numbers.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;}
p.NUMBERS {margin:  115px auto; width:113px; height: 18px;}



a.CELEBRATIONS { position: relative; float: left; background: url('../img/celebrations.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.CELEBRATIONS:hover {position: relative;float: left;  background: url('../img/celebrations.jpg') no-repeat; display: block; width:113px;height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;} 
p.CELEBRATIONS {margin:  115px auto; width:113px; height: 18px;}

a.HOUSE { position: relative; float: left; background: url('../img/house.jpg') no-repeat; display: block; width:113px; height:113px; margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.HOUSE:hover {position: relative;float: left;  background: url('../img/house.jpg') no-repeat; display: block;  width:113px; height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;}
p.HOUSE {margin: 115px auto;  width:113px; height: 18px;}

a.GREETINGS { position: relative; float: left; background: url('../img/greetings.jpg') no-repeat; display: block; width:113px; height:113px; margin: 20px 0px 10px 0px; background-position:0px 0px; text-align: center;}
a.GREETINGS:hover {position: relative;float: left;  background: url('../img/greetings.jpg') no-repeat; display: block;  width:113px; height:113px;margin: 20px 0px 10px 0px; background-position: 0px -113px;}
p.GREETINGS {margin: 115px auto;  width:113px; height: 18px;}


a.TOYS { position: relative; float: left; background: url('../img/toys.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position:0px 0px; text-align: center;}
a.TOYS:hover {position: relative;float: left;  background: url('../img/toys.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position: 0px -113px;} 
p.TOYS {margin: 115px auto;  width:113px; height: 18px;}

a.WEATHER { position: relative; float: left; background: url('../img/weather.jpg') no-repeat; display: block;width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position:0px 0px; text-align: center;}
a.WEATHER:hover {position: relative;float: left;  background: url('../img/weather.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position: 0px -113px;}
p.WEATHER {margin: 115px auto;  width:113px;  height: 18px;}


a.SIZES { position: relative; float: left; background: url('../img/sizes.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position:0px 0px; text-align: center;}
a.SIZES:hover {position: relative;float: left;  background: url('../img/sizes.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position: 0px -113px;} 
p.SIZES {margin: 115px auto;  width:113px; height: 18px;}

a.TRANSPORT { position: relative; float: left; background: url('../img/transport.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position:0px 0px; text-align: center;}
a.TRANSPORT:hover {position: relative;float: left;  background: url('../img/transport.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position: 0px -113px;} 
p.TRANSPORT {margin: 115px auto;  width:113px; height: 18px;}

a.SEASONS { position: relative; float: left; background: url('../img/seasons.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position:0px 0px; text-align: center;}
a.SEASONS:hover {position: relative;float: left;  background: url('../img/seasons.jpg') no-repeat; display: block; width:113px; height:113px;margin: 20px 0px 10px 0px;  background-position: 0px -113px;} 
p.SEASONS {margin: 115px auto;  width:113px; height: 18px;}


.titular {font-size: 24px; font-weight:bold; color:#e2001a; min-width:324px; text-align: left; line-height: 26px;}

.GLOSARIO {font-size: 22px;}
.GLOSARIOGRIS {font-size: 22px; color: #C0C0C0;}