@charset "utf-8";
/* CSS Document */

@import url('styles/reset.css');
@import url('styles/960.css');
@import url('styles/text.css');

body{
font-family:Georgia, "Times New Roman", Times, serif;
}
#logo{
background:url(images/magia-css_logo.gif) no-repeat;
height:110px;
width:210px;
border-right:10px solid #00c0ff;
}
#logo h1{
text-indent:-9999px;
}
#clase{
padding:20px 0 0;
}
#clase h2{
line-height:30px;
font-size:30px;
color:#525252;
font-style:italic;
}
#contenido{
padding:30px 0;
}
/*desde aqui editamos*/
.contenedor{
position:relative;
width:500px;
height:250px;
border:#FF6600 5px solid;
}
.contenedor img{
position:absolute;
top:0;
left:0;
z-index:2;
}
.contenedor .texto{
position:absolute;
top:0;
left:0;
z-index:2;
padding:50px 0 10px;
}
.contenedor .texto h4{
background:#FF6600;
color:#FFFFFF;
display:inline;
padding:5px;
}
.contenedor .texto p{
background:#FF6600;
color:#FFFFFF;
margin:20px 0;
padding:5px;
width:90%;
}
.contenedor .textoh{
position:absolute;
left:0;
top:0;
z-index:-1;
width:100%;
height:100%;
text-align:center;
background:#333333;
color:#FFFFFF;
opacity:.9;
}
.contenedor .textoh a{
margin-top:115px;
display:block;
color:#FFFFFF;
text-decoration:none;
font-size:16px;
}
.contenedor:hover .textoh{
z-index:3;
}

/*tutorial 2*/
#suscribete{
position:relative;
background:#00c0ff;
width:500px;
height:150px;
}
#title{
position:absolute;
top:10px;
left:-27px;
background:url(images/ribbon-back.gif) bottom repeat-x #074e64;
color:#FFFFFF;
font-style:italic;
font-size:30px;
padding:2px 15px 2px 40px;
}
#title .ribbon{
position:absolute;
background:url(images/ribbon-tail.gif) no-repeat;
width:27px;
height:27px;
left:0;
bottom:-27px;
}
#suscribete .texto{
margin-left:190px;
padding:15px 0 0;
}
#suscribeform{
position:relative;
margin-top:20px;
padding:0 20px 0;
}
#suscribeform .text{
border:5px solid #06465a;
font-size:20px;
color:#999999;
position:relative;
top:20px;
float:left;
padding:5px 10px;
}
#suscribeform .button{
border:none;
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-size:20px;
background:none;
}
#suscribe-enviar{
position:relative;
bottom:-10px;
float:right;
background:url(images/suscribe-back.gif) repeat-x bottom #fd7e03;
padding:20px 10px 30px;
*padding:20px 10px 25px;
}

#suscribe-enviar .ribbon{
position:absolute;
bottom:0;
left:-10px;
background:url(images/suscribe-tail.gif) no-repeat;
height:10px;
width:10px;
}