/* CSS Document */
body{background-image:url(../img/bg_mvp.jpg);background-repeat:repeat-x;background-color:#000;margin:0px;padding:0px;color:#000;font-family:Verdana, Geneva, sans-serif;font-size:13px}
a{color:#FFF}
a:hover{color:#ffd40b}
h3{margin:0px}
.fila{
background:#FFF;
}

.fila:hover{
background:#afeafd;
} 

#cabecera{width:818px; height:82px;margin:auto;margin-top:10px}
#logo{width:251px; height:72px;margin-top:6px;background-image:url(../img/logo_vmp.png);background-repeat:no-repeat;float:left;cursor:pointer}
#menu{width:550px; height:72px;float:right}
#info{width:500px;height:30px;color:#FFF;font-family:Verdana, Geneva, sans-serif;font-size:14px;font-weight:bold;float:right}
#enlace-celular{width:167px;float:left;background-image:url(../img/icono-enlace-celular.png);background-repeat:no-repeat;padding-left:25px;height:25px;padding-top:5px}
#enlace-login{width:270px;float:right;background-image:url(../img/icono-enlace-login.png);background-repeat:no-repeat;height:25px;padding-top:2px;margin-right:-55px}

#submenu-mp3{width:120px;float:left;padding-left:9px;text-align:center}
#submenu-videomusical{width:120px;float:left;text-align:center}
#submenu-peliculas{width:120px;float:left;text-align:center}
#submenu-contacto{width:120px;float:left;text-align:center}


/* Ajuste para el contenedor padre */
#login {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el nombre y los botones */
    font-size: 14px;
    color: #FFF;
    height: 30px;
}

/* Estilo unificado para ambos botones */
#logout, #cambiar_usuario {
    text-decoration: none;
    color: #FFF;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px; /* Un poco más pequeño para que quepa en una fila */
    white-space: nowrap;
}

#logout { background-color: #f60707c5; }
#cambiar_usuario { background-color: #2981e4; }



/*Cabecera*/


#banner{width:791px;height:334px;background-image:url(../img/banner-index.jpg);background-repeat:no-repeat;margin:auto;margin-top:20px;
	border:10px solid #505055;
	-khtml-border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

/*
#banner-texto{
	width:100%;
	margin:auto;
	margin-top:150px;
	height:83px;
	background-image:url(../img/banner-texto-index.png);
	background-position:center;
	background-repeat:no-repeat;
	color: #D6D6D6;
}
*/

#banner-boton{width:244px;margin:auto;margin-top:15px;height:42px;background-image:url(../img/banner-enlace-index.png);background-position:center;background-repeat:no-repeat;text-align:center;padding-top:17px;font-family:Verdana, Geneva, sans-serif;font-weight:bold;font-size:20px;text-shadow: 0.1em 0.1em 0.2em black}

#paginacion{width:100%;height:25px;margin:auto;margin-top:8px;float:left;text-align:center;margin-bottom:25px}
.pag-enlace{text-decoration:none;background-color:#CCC;color:#000;font-weight:bold;padding:8px;}
/*Contenido*/

#contenido{width:791px;margin:auto;margin-top:15px}
#contenido-a{width:791px;height:200px;}
#contenido-b{width:791px;height:363px;margin-top:15px}
#bienvenido{width:400px;height:200px;float:left}
#tweet{width:320px;height:200px;float:right;padding:20px}
#subtitulo-bienvenido{width:260px;height:36px;background-image:url(../img/subtitulo-bienvenido.png);background-repeat:no-repeat}
#contenido-bienvenido{margin-top:5px;text-align:justify;color:#c9c9c9;font-family:Verdana, Geneva, sans-serif;font-size:14px}

#subtitulo-servicios{width:100%;height:45px;background-image:url(../img/subtitulo-nuestro-servicio.png);background-repeat:no-repeat}
#descripcion-servicios{width:100%;height:317px;padding-top:10px}

#ds1{width:233px;height:285px;border:#999 solid 1px;float:left}
#ds2{width:233px;height:285px;border:#999 solid 1px;float:left;margin-left:42px}
#ds3{width:233px;height:285px;border:#999 solid 1px;float:right}

.ds-imagen{width:100%;height:150px;background-color:#000;text-align:center;padding-top:18px}
.ds-imagen:hover{background-color:#ffd40b}
.ds-imagen img{cursor:pointer}
.ds-descripcion{width:223px;height:106px;background-color:#212121;text-align:justify;font-family:Verdana, Geneva, sans-serif;font-size:14px;color:#c8c8c8;padding:5px}

#pie{background-color:#000;width:100%;height:48px;border-top:#CCC solid 1px;clear:left}
#pie-contenido{width:791px;margin:auto;margin-top:7px}
#pie-copyright{float:left;font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#FFF;width:558px;margin-top:7px}
#pie-icono-social{float:right;width:89px;cursor:pointer}
#pie-icono-facebook{float:left;}
#pie-icono-twitter{float:left}



/**** Entrar  ****/

#menu-entrar {
	list-style:none;
	width:270px;	
	height:24px;
	z-index:109;
	margin:0px;
}

#menu-entrar li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	border:none;
	padding: 2px 1px 8px 1px;	
}


#menu-entrar li:hover {
	padding: 2px 1px 8px 1px;
	
}

#menu-entrar li a {
	vertical-align:middle;
	display:block;
	outline:0;
	text-decoration:none;
}

#logout{
	font-size: 14px;
	background-color: #f60707c5;
	padding: 4px;
	border-radius: 12px;
}

#menu-entrar li:hover .enlace-entrar {
	color:#ffd40b;
}
#menu-entrar li .enlace-entrar {
	color:#FFF;
}

.submenu-entrar{
	color:#000;
	margin:7px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop down */
	text-align:left;
	padding:15px 5px 5px 9px;
    background-color:#FFF;
	z-index:300;
	width: 235px;
	border:10px solid #CCC;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#menu-entrar li:hover .submenu-entrar{
	left:-100px; /*este item controla la posicion del menu entrar*/
	top:auto;
}



/******   botones    *****/

.button, .button:visited {
    background-color: #222; /* Quitamos la URL y dejamos solo el color */
    display: inline-block; 
    padding: 5px 10px 6px; 
    color: #000; 
    text-decoration: none;
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}
 
	.button:hover							{ background-color: #111; color: #000; }
	.button:active							{ top: 1px; }
	.small.button, .small.button:visited 			{ font-size: 11px}
	.button, .button:visited,
	.medium.button, .medium.button:visited 		{ font-size: 13px; 
												  font-weight: bold; 
												  line-height: 1; 
												  text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
												  }
												  
	.large.button, .large.button:visited 			{ font-size: 16px; 
													  padding: 8px 14px 9px; }
													  
	.super.button, .super.button:visited 			{ font-size: 34px; 
													  padding: 8px 14px 9px; }
	
	.pink.button, .magenta.button:visited		{ background-color: #e22092; }
	.pink.button:hover							{ background-color: #c81e82; }
	.green.button, .green.button:visited		{ background-color: #b4ce46; }
	.green.button:hover						    { background-color: #a6cb09; }
	.red.button, .red.button:visited			{ background-color: #e62727; }
	.red.button:hover							{ background-color: #cf2525; }
	.orange.button, .orange.button:visited		{ background-color: #FC0; }
	.orange.button:hover						{ background-color: #F9EB46; }
	.blue.button, .blue.button:visited		    { background-color: #2981e4; }
	.blue.button:hover							{ background-color: #09F; }
	.yellow.button, .yellow.button:visited		{ background-color: #ffb515; }
	.yellow.button:hover						{ background-color: #fc9200; }

/*Campo de texto*/
.txt-login{border:#999 solid 1px;width:220px;height:20px}


/*Registro de usuarios*/

#formulario-registro{
	width:782px;margin:auto;margin-top:15px;
	background-color:#FFF;
	border:5px solid #999;
	-khtml-border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#form-pasos{width:782px;
margin:auto;
margin-top:5px;
height:169px;
background-image:url(../img/fondo-pasos.png);
background-repeat:no-repeat;
background-position:center}

.txt-registro{border:#999 solid 1px;width:320px;height:20px}


/********    Musica  ********/
#submenu-musica{margin-top:22px;margin-bottom:10px}
#titulo-categoria{width:98px;height:31px;background-image:url(../img/categoria.png);background-repeat:no-repeat;float:left;}
#titulo-genero{width:179px;height:29px;background-image:url(../img/genero-pelicula.png);background-repeat:no-repeat;float:left;margin-right:10px}
#select-categoria{width:230px;height:30px;float:left}
#icono-check{width:35px;height:30px;float:left;visibility:hidden}
#titulo-check{width:83px;height:30px;background-image:url(../img/solo-check.png);background-repeat:no-repeat;float:left;visibility:hidden}
#buscar{width:302px;height:30px;float:right}

.buscar {
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#818181;
	border:solid 1px #999;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	height:28px;
	padding-left:10px;
	width:255px
}

.styled-select select {
   background-color:#E5E5E5;
   width: 220px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 30px;
   -webkit-appearance: none;
   
   	border:solid 1px #999;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
  
 #subcuerpo{width:865px;height:728px;background-image:url(../img/fondo-reproductor.jpg);background-repeat:no-repeat;margin-left:-35px}
 #artista{ width:300px;height:300px}
 #general-subcuerpo{height:55px;margin-bottom:10px;}
 #cabecera-subcuerpo{height:460px}
 #pie-subcuerpo{height:200px;bottom:0px}
 #titulo-musica-temporada{width:160px; height:23px;background-image:url(../img/titulo_musica_temporada.png);background-repeat:no-repeat;background-position:bottom;float:left;margin-left:20px;padding-top:30px}
 #titulo-video-temporada{width:160px; height:23px;background-image:url(../img/titulo_videoclip.png);background-repeat:no-repeat;background-position:bottom;float:left;margin-left:20px;padding-top:30px}
 #titulo-artista{width:126px;height:23px;background:url(../img/titulo_artista_banda.png) no-repeat bottom;float:right;margin-right:20px;padding-top:30px}
 #cabecera-reproductor{width:470px;height:53px;background:url(../img/cabecera-reproductor.png) no-repeat;float:left;margin-left:20px;text-align:center;padding-left:30px;padding-top:12px}

 #cabecera-reproductor-logout{width:470px;height:53px;background:url(../img/cabecera-reproductor.png) no-repeat;float:left;margin-left:20px;text-align:center;padding-left:30px;padding-top:12px;color:#FFF;}
 #bolaparlante1{background-image:url(../img/parlanteb.gif);width:142px;height:139px;float:left;margin-left:30px}
 #bolaparlante2{background-image:url(../img/parlantea.gif);width:160px;height:155px;float:left;margin-left:45px;margin-top:25px}
 #bolaparlante3{background-image:url(../img/parlantea.gif);width:160px;height:155px;float:left;margin-left:113px;margin-top:25px}
 #bolaparlante4{background-image:url(../img/parlanteb.gif);width:142px;height:139px;float:right;margin-right:25px}
 
 
 
/****************    Página contacto     ****************************/

#contenedor-contacto{width:929px;height:360px;margin:auto;clear:left;color:#CCC;margin-top:25px}

#contenedor-ubicacion{width:929px;height:610px;margin:auto;clear:left}

#directorio-contacto{width:270px;margin:0;height:290px;float:left;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#FFF;text-align:justify}

#img-contacto{width:235px;margin:0;height:254px;float:left;}

#mensaje-contacto{width:280px;margin-left:20px;float:left;font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#333}

#img-ubicacion{width:530px;height:590px;margin:0;float:left}



.txt {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #000;
	border:solid 2px #666;
	height:22px;
	padding-left:10px;
	width:260px;
}

.txtarea {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #000;
	border:solid 2px #666;
	width:240px;
	padding-left:15px;
	padding-right:15px;
}

#titulo-contacto{width:260px;height:51px;background: url(../img/titulo-contactenos.png) no-repeat;float:left}

/*****   Estio para la pagina de peliculas   *****/


#subcuerpo-pelicula{margin-left:-35px;}
#banner-top-pelicula{width:812px;height:256px;margin:auto;background:url(../img/fondo_top_pelicula.png) no-repeat center;}
#cuerpo-pelicula{width:811px;height:480px;margin:auto;margin-top:30px}
#listapelicula{width:811px;margin:auto;margin-top:10px;height:inherit;float:left;margin-bottom:90px;color:#FFF}


.galeria{width:128px;height:178px;float:left;margin:17px;cursor:pointer;text-align:center;margin-top:47px}
.marca-agua{margin-top:-125px;margin-left:45px;position:absolute;cursor:pointer}

/*
.img-sombra{

	padding:3px;
	border:4px solid #999;
	margin-top:5px;
	width:118px;
	height:178px;
	}
*/

#reproductor-pelicula
{
	width:100%;
	float:left;
	height:480px
}

#peliculas-relacionadas
{
	width:275px;
	float:left;
	height:384px;
	overflow:hidden
}

#titulo-pelicula-reproduccion
{
	height:32px;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:bold;
	font-size:18px;
	color:#FFF;
	padding-top:3px;
	color:#FBE233
}

#titulo-pelicula-relacionadas
{
	margin:auto;
	width:174px;
	height:24px;
	background:url(../img/peliculas_realcionadas.png) no-repeat center;
	clear:left;
	margin-bottom:20px
}
 
.opt-pel-relacionado{width:215px;height:90px;margin:auto;border:#666 solid 1px;clear:left;padding:10px;background: #333;cursor:pointer}
.opt-pel-relacionado:hover{border:#CCC solid 1px;background-color:#666}




/*****   Estio para la pagina sesion  *****/




#contenido-sesion
{width:900px;
background-color:#FFF;
border:#333 solid 2px;
margin:auto
}