/* CSS Documento para Sitio web Barro Rojo 2008
Diseņo Taller Visual */


/*================
ELEMENTOS HTML
=================*/
* { padding:0; margin:0;}
body { 
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF; 
font-size:10px;
letter-spacing:0.08em;
line-height:1.3em;
background-color:#111111;
position:relative;}


/*==================
SECCIONES DIV INICIO
=================*/
#wrapper{ 
width:960px;

background-color:#000000;
margin-top:0;
margin-right:auto;
margin-left:auto;
position:relative;}
#inicio #head {
background-color:#000000;
text-align:center;
height:75px;
padding-top:100px;}
#inicio #area{
text-align:center;
padding-top:55px;
}
#inicio #area p{
font-size:9px;
color:#AAAAAA;}
#linksfoot{
text-align:center;
margin-top:50px;}

h1{
font-family:"Times New Roman", Times, serif;
font-size:24px;
font-weight:normal;
font-variant:normal;
font-style:italic;
line-height:26px;
color:#FFFFFF;}
h1 a{
text-decoration:none;
color:#FFFFFF;}
h1 a:hover{
text-decoration:underline;}
h2{
font-size:16px;
font-weight:normal;}
h2 a{
color:#FFFFFF;}
h2 a:hover{
text-decoration:underline;}
h3{
font-size:14px;}
h3 a{
color:#FFFFFF;}
h3 a:hover{
text-decoration:underline;}
h4{
font-size:13px;
font-weight:normal;}
h5{font-size:13px;
font-weight:normal;
line-height:15px;}
h5 a{
color:#DDDDDD;
text-decoration:none;}
h5 a:hover{
text-decoration:underline;}
h6{font-size:11px;}
p {}
p a{
color:#FFFFFF;}
p a:hover{
text-decoration:underline;}


/*======================
SECCIONENES DIV INTERIOR
=======================*/
#head{
text-align:center;
padding-top:10px;}

#area{
position:relative;}
#portada #area #colizq{
background-color:#000000;
width:107px;
height:;
position:absolute;
left:0;}
#portada #area #colizq2{
width:194px;
position:absolute;
left:0px;
text-align:right;}
#portada #area #colizq2 textarea{
font-family:Arial, Helvetica, sans-serif;
line-height:1.2em;
font-size:13px;
color:#CCCCCC;
width:188px;
height:200px;
background-color:#000000;
border:none;
padding:5px;
overflow:hidden;}
#portada #area #colcontenido{
width:570px;
height:549px;
position:absolute;
left:194px;}
#historia #area #colcontenido{
width:570px;
position:absolute;
left:194px;}
#noticia #area #colcontenido{
width:570px;
position:absolute;
left:194px;}
#portada #area #colder2{
background-color:#000000;
width:192px;
padding-left:2px;
padding-right:2px; 
position:absolute;
left:764px;}
#portada #area #colder2 #baner_registro{
width:180px;
height:60px;
text-align:center;
background-color:#990000;
border:solid 2px #FFFFFF;}

#bloque_noticias{}
#bloque_noticias textarea{
font-family:Arial, Helvetica, sans-serif;
line-height:1.2em;
font-size:11px;
color:#CCCCCC;
width:150px;
height:200px;
background-color:#000000;
border:none;
padding:5px;
overflow:hidden;}

#portada #area #colder{
background-color:#000000;
width:0;
height:594px;
position:absolute;
left:960px;}

#integrantes #area{
width:960px;
height:549px;
background-image:url(images/back_int.jpg);
background-position:bottom left;
background-repeat:no-repeat;
position:absolute;}

#contacto #area{
width:960px;
height:549px;
background-image:url(images/back_int.jpg);
background-position:bottom left;
background-repeat:no-repeat;
position:absolute;}

#base{
color:#CCCCCC;
margin-top:549px;
text-align:center;
background-color:#000000;}
#historia #base{
color:#CCCCCC;
margin-top:auto;
text-align:center;
background-color:#000000;}
#noticia #base{
color:#CCCCCC;
margin-top:auto;
text-align:center;
background-color:#000000;}

#navegacion{
width:958px;
height:25px;
font-size:12px;
margin-right:auto;
margin-left:auto;
line-height:1em;
background-color:#525B66;
position:relative;}
#titulo_historia{
position:absolute;}
#titulo_noticias{
position:absolute;
left:764px;}
#links_navegacion{
width:570px;
text-align:center;
position:absolute;
left:194px;
padding-top:5px;
padding-right:10px;
padding-bottom:6px;
padding-left:10px;}
#navegacion a{
text-decoration:none;
padding-top:5px;
padding-right:10px;
padding-bottom:6px;
padding-left:10px;}
#navegacion a:hover{
background-color:#212125;}
#integrantes #navegacion{
width:570px;}
#integrantes #links_navegacion{
left:0;}
#db_integrantes{
height:500px;
width:300px;
position:absolute;
font-size:12px;
margin-top:15px;
left:300px;
line-height:1.7em;
letter-spacing:0.02em;}
#integrantes #db_integrantes p{
background-color:#525B66;
margin-bottom:4px;
padding-left:4px;}
#integrantes #db_integrantes em{
font-size:10px;}
#db_datos_integrantes{
width:330px;
height:500px;
font-size:12px;
line-height:1.5em;
position:absolute;
margin-top:15px;
left:630px;}
#menureper{
width:940px;
height:17px;
font-size:10px;
color:#FFFFFF;
margin-right:auto;
margin-left:auto;
line-height:1em;
background-color:#990000;
position:relative;}
#links_repertorio{
margin-left:auto;
margin-right:auto;
width:570px;
text-align:center;
position:absolute;
padding-top:3px;
padding-right:10px;
padding-bottom:4px;
padding-left:10px;}
#menureper a{
text-decoration:none;
padding-top:3px;
padding-right:10px;
padding-bottom:4px;
padding-left:10px;}
#menureper a:hover{
background-color:#212125;}

#texto_historia{
width:400px;
margin-left:auto;
margin-right:auto;
text-align:justify;}
#texto_noticia{
width:570px;
margin-left:auto;
margin-right:auto;
text-align:justify;}

/*=======
ESTILOS AMOR
==========*/
#amor #area{
width:1125px;
height:549px;
margin-right:auto;
margin-left:auto;
position:absolute;
left:27px;
background-image:url(images/back_amor.jpg);
background-repeat:no-repeat;
background-position:center;
}
#logoamor{
text-align:center;}
#menuamor{
width:598px;
height:19px;
margin-right:auto;
margin-left:auto;
text-align:center;}
#menuamor p{
background-image:url(images/back_menuamor.jpg);
background-position:left;
background-position:top;
background-repeat:repeat-x;}
#menuamor a{
padding-top:20px;
padding-right:80px;
padding-bottom:20px;
padding-left:80px;}

#sinopsisamor{
width:310px;
margin-top:50px;
margin-right:auto;
margin-left:auto;
font-family:"Courier New", Courier, mono;
font-size:13px;
line-height:1.1em;}

/*=======
ESTILOS AMOR FOTOS
==========*/
#amor #datosfoto{
width:200px;
height:auto;
font-size:11px;
position:absolute;
left:870px;
margin-top:350px;}
#amor #datosfoto p{
text-align:left;}
#amor #boxfoto{
width:595px;
height:396px;
text-align:center;
position:absolute;
left:265px;}
#amor #boxfoto img{
}
#amor #muestrasfoto{
width:108px;
height:400px;
position:absolute;
left:870px;}
#amor #muestrasfoto img{
padding:2px;}

/*===============
ESTILOS PAISAJE
=================*/
#paisaje #wrapper #area{
width:958px;
height:549px;
margin-right:auto;
margin-left:auto;
position:absolute;
left:105px;
text-align:center;
background-image:url(images/back_paisaje.jpg);
background-repeat:no-repeat;
background-position:center;
background-position:top;
background-position:left;}
#paisaje #area #linkspaisaje{
width:595px;
height:21px;
text-align:right;
margin-top:100px;
margin-right:auto;
margin-left:auto;
font-size:12px;
background-color:#662D87;}
#paisaje #area #linkspaisaje a{
font-size:12px;
text-decoration:none;
margin-right:105px;
padding-top:0px;
padding-right:10px;
padding-bottom:7px;
padding-left:10px;}
#paisaje #area #linkspaisaje a:hover{
background-color:#551C77;}

/*=======
ESTILOS PAISAJE FOTOS
==========*/
#paisaje #datosfoto{
width:175px;
height:220px;
font-size:11px;
position:absolute;
left:5px;
margin-top:0px;}
#paisaje #datosfoto p{
text-align:right;}
#paisaje #boxfoto{
width:595px;
height:396px;
position:absolute;
left:181px;}
#paisaje #muestrasfoto{
width:108px;
height:400px;
position:absolute;
left:780px;}
#paisaje #muestrasfoto img{
padding:2px;}


/*===============
ESTILOS VIENTO
=================*/
#viento #area{
width:958px;
height:549px;
margin-right:auto;
margin-left:auto;
left:107px;
background-image:url(images/back_viento.jpg);
background-repeat:no-repeat;
background-position:center;}

#menuviento{
font-size:12px;
width:460px;
height:21px;
position:absolute;
margin-top:300px;
left:20px;}
#areagaleria #menuviento{
font-size:12px;
width:460px;
height:21px;
position:absolute;
margin-top:90px;
left:300px;}
#menuviento #uno{
text-align:center;
width:230px;
height:21px;
position:absolute;}
#menuviento #dos{
text-align:center;
width:230px;
height:21px;
position:absolute;
left:230px;
margin-top:25px;}
#menuviento a{
text-decoration:none;}
#sinopsisviento{
width:300px;
height:300px;
position:absolute;
left:500px;
margin-top:50px;}
#sinopsisviento textarea{
color:#CCCCCC;
width:300px;
height:400px;
border:none;
padding:4px;
background-color:#000000;}

/*=======
ESTILOS VIENTO FOTOS
==========*/
#viento #areagaleria{
width:958px;
height:549px;
position:absolute;
left:107px;
background-image:url(images/back_viento_galeria.jpg);
background-repeat:no-repeat;
background-position:center;}

#viento #datosfoto{
width:200px;
height:220px;
position:absolute;
left:30px;
margin-top:110px;}
#viento #datosfoto p{
text-align:right;}
#viento #boxfoto{
width:595px;
height:396px;
position:absolute;
left:241px;
margin-top:110px;}
#viento #muestrasfoto{
width:108px;
height:400px;
position:absolute;
left:846px;
margin-top:110px;}
#viento #muestrasfoto img{
padding:2px;}

/*================
ESTILOS ADMINISTRADOR
=================*/
#administrador #area{
width:960px;
height:549px;
background-image:url(images/back_int.jpg);
background-position:bottom left;
background-repeat:no-repeat;
position:absolute;}
#administrodor #navegacion{
width:570px;}
#administrador #links_navegacion{
margin-left:0;}
#administrador #db_integrantes p{
background-color:#525B66;
margin-bottom:4px;
padding-left:4px;}
#administrador #db_integrantes em{
font-size:10px;}
#tipo4{ font-family:"Times New Roman", Times, serif; font-size:22px; color:#AAAAAA;
line-height:22px;}
/*================
ESTADOS DE LINK
=================*/
a {
text-decoration:underline;
color:#BBBBBB;}

/*================
CLASS
=================*/


/*================
FORMULARIOS
=================*/
#contacto #area {
text-align:center;}
#contacto #area form{
width:300px;
height:250px;
text-align:right;
padding-top:30px;
padding-right:50px;
background-color:#111111;
margin-right:auto;
margin-left:auto;
margin-top:30px;
}
#contacto #area h1, h2, h3{
line-height:2em;}
#contacto #area form textarea{
width:200px;
height:90px;}
#contacto #area form label{
vertical-align:top;}
#contacto #area form div{
margin-top:10px;}
#contacto #area form input:focus, textarea:focus{
background-color:#CCCCCC;}

/*================
DIRECCION
=================*/