/*********************************************************
   CSS: DirdamMadrid
	Ocio Infantil
	Fecha : 07 de Julio de 2010
	Autor : Jose Luis Alvarez
 *********************************************************/

body {
	background: url(img/fndirdam.png) repeat;
	margin: 0px;
	padding: 16px 0;
	font: 11px "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
	color: #282828;
	text-align: center;
}
p{
font: 16px "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
text-indent:1cm;
text-align:justify;
line-height:20px;
}
img {
	border-style: none;
}
img.pic_left{
float:left;
padding:5px;
margin:0 8px 8px 8px;
border:1px  #CCCCCC solid;
}
img.pic_right{
float:right;
padding:5px;
margin:0 8px 8px 8px;
background-color: #EEEEEE;
border:1px  #CCCCCC solid;
}


a {
	color: #2E9FED;
	text-decoration: none;
}
a:hover {
	color: #1471B1;
}

h3{
font-size:18px;
color: #003366;
}
h4{
font-size:13px;
padding:2px;
margin:0px;
color: #003366;
border-bottom:1px #999999 dashed;
}
#contenedor {
	position: relative;
	width: 950px;
	margin: 0 auto;
	padding: 0px;
	text-align: left;
}

#cabecera {
	width: 950px;
	height: 226px;
	background: url(img/cabecera.png) no-repeat;
	/* background: #CFDEEA url(img/background.gif) repeat-x top center; */
}

/* Elementos de control de la Cabecera */
#admhead {
	position: absolute;
	top: 0px;
	width: 950px;
	margin: 0 auto;
	padding: 0px;
	font: bolder 10px Verdana, Geneva, Helvetica, sans-serif;
	color: #00008B;
	background-color: transparent;
}

.admin{text-align: center; }
.admin a:link, .admin a:visited { color: Navy; text-decoration: none; }
.admin a, .admin a:hover { color: #6495ED; text-decoration: none; }

#area {
	width: 950px;
	height: 54px;
	background: url(img/area.gif) repeat-x;
}

#main {
	margin: auto;
	background: url(img/bg_main.png) repeat-y;
	width: 950px;
	height: auto; 
}

#titulo {
background: url(img/bannerhead.jpg) no-repeat;
background-position:15px 0px;
padding:10px;
width: 950px;
height:80px; 
}
#titulo h1{
padding:5px 0 0 20px;
margin:0px;
font-weight:bold;
font-size:14px;
color: #F0E68C;
}

#BoxIzq {
float:left;
padding:0 30px 30px 30px;
width: 625px;
height:auto;
}
#BoxDch{
float:left;
padding:5px;
width: 225px;
height:auto;
}

.resalta {
font: bolder 20px;
color: #003366;
}
.item_box{
width:auto;
height:auto;
padding:10px 0 5px 0;
border-bottom:1px #666666 dashed;
}

.espacio{
	width:auto; 
	height:2px; 
	clear:both; 
	padding-bottom:2px;
}

.boxmsg{
	border:solid 1px #DEDEDE; 
	background: #FFFFCC;
	color:#222222;
	padding:4px;
	font: 16px "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
	line-height: 1,5em;
	text-align: justify;
}

.ayuda {
	padding: 2px 10px 2px 20px;
 	font-family: Tahoma, Georgia, Verdana, "Times New Roman", Arial, Times, serif;
	font-size: 10px;
	font-weight: bold;
	color: Maroon;
}


#txtListas{
height:auto;
padding: 5px;
}

#txtListas ul {
font: 16px "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
line-height: 1,5em;
text-indent: 15px;
list-style-position: outside;
list-style-type: square;
padding: 6px;
margin: 2px;
}

/* --------------- Mapa de Situación ------------------------- */
/* Encuadre del mapa */

#mapa {
	position: relative;
	z-index:10;
	width: 610px;
	height: 460px;
	border: 1px solid Black;
	background-color: White;
	margin: 5px;
}

#mapainterior {
	width: 600px;
	height: 450px;
	border: 1px solid Black;
	background-color: White;
	margin: 4px;
}

#direccion {
	width: 600px;
	border: 1px solid #5F9EA0;
	background-color: #eff3da;
	margin: 40px 0px 5ox 0px;
	padding: 5px;
	/*font: Tahoma, Arial, Verdana, Geneva, Helvetica, sans-serif;*/
	font-size: 11px;
	text-align: center;
	color: #696969;
}

/* Alertas */
#alerta {   
	background: #eff3da url(img/icon_info.gif) no-repeat center;   
	background-position: 15px 50%; /* x-pos y-pos */  
	text-align: left;   
	padding: 5px 20px 5px 45px;   
	border-top: 2px solid #5F9EA0;   
	border-bottom: 2px solid #5F9EA0;   
	font-size: 11px;
	color:#000000;   
}  

/* Pie de Pagina */
#pie {
text-align:center;
font-size:10px;
color:#000033;
background: url(img/pie.png) no-repeat;
background-position:0px 0px;
padding-top:10px;
width: 950px;
height:100px;
}

#pie a {
	background: none;
	padding: 0px;

}

#madeby{
width:200px;
height:85px;
float:right;
padding-right:30px;
text-align:center;
}
#madeby a{
text-decoration:none;
color:#666666;
}

/* ================================================================ 
CSS del menu principal
================================================================== */
#menu {
	position: absolute;
	top: 190px;
	left: 15px;
	width: 920px;
	height:43px; 
	margin: 0px;
	padding: 0px;
	list-style:none; 
	font-family:verdana, arial, sans-serif; 
	font-size:12px; 
	background: url(img/menufondo.png) repeat-x; 
	border-top:1px solid #d1e9fb;
	z-index: 100; }
	
#menu li {
	float:left; 
	width:102px;  /* Cada opcion de menu ocupa 110px x 43px */
	height:43px; }

#menu li a {
	display:block; 
	float:left; 
	width:110px; 
	height:43px; 
	line-height:35px; 
	text-decoration:none; 
	color:#000; }

#menu li a span {
	display:block; 
	height:35px; 
	width:100px; 
	float:left; 
	text-align:center; 
	background:transparent; }
	
	/* P0 P1 y P2 son los efectos de sombra de cada elemento del menu principal */
#menu li a b.p0 {
	float:left; 
	display:block; 
	width:8px; 
	height:35px; 
	background:transparent; }
#menu li a b.p1 {
	clear:left; 
	float:left; 
	display:block; 
	height:8px; 
	width:100px; 
	background:transparent; 
	font-size:1px; }
#menu li a b.p2 {
	float:left; 
	display:block; 
	height:8px; 
	width:8px; 
	background:	transparent; 
	font-size:1px; }
 
#menu li a:hover {
	position:relative; 
	visibility:visible; 
	cursor:pointer; 
	line-height:32px;}
 
#menu li:hover {position:relative;}
#menu li:hover > a {line-height:33px;}
 
#menu li:hover a b.p0 {background: url(img/menudcha.png);}
#menu li:hover a b.p1 {background: url(img/menuinf.png);}
#menu li:hover a b.p2 {background: url(img/menusup.png);}
 
#menu li a:hover span {background: url(img/greytab.png);}
#menu li:hover > a span {background: url(img/greytab.png);}
 
 /* Submenus pad1 abre submenu primer elemento pad2 cierra submenu ultimo elemento*/
#menu ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px; width:0; height:0; border-top:0;}
 
#menu table {border-collapse:collapse; padding:0; margin:0 0 -1px 0; border:0;}
 
#menu :hover ul {left:0; top:35px; width:150px; z-index:500;}
#menu :hover ul ul {position:absolute; left:-9999px;}
 
#menu :hover ul :hover ul {left:110px; top:0;}
 
#menu :hover ul li {height:25px; width:150px;} /* tamaño del item del submenu */
/* Apertura y Cierre de cada submenu */
#menu :hover ul li.pad1 {height:8px; width:150px; background:transparent;}
#menu :hover ul li.pad2 {height:8px; width:150px; background:transparent;}

#menu :hover ul li.pad1 b.p7 {display:block; width:141px; height:7px; font-size:1px; float:left; background:#58a6cd; border-top:1px solid #a9cfe2; border-left:1px solid #a9cfe2;}
#menu :hover ul li.pad1 b.p3 {display:block; width:8px;   height:8px; font-size:1px; float:right; background: url(img/right2.png);}

#menu :hover ul li b.p4 {display:block; width:8px; height:25px; float:right; background: url(img/side2.png);}
#menu :hover ul li.pad2 b.p5 {display:block; width:142px; height:8px; font-size:1px; float:left; background: url(img/bottom2.png);}
#menu :hover ul li.pad2 b.p6 {display:block; width:8px; height:8px; font-size:1px; float:left; background: url(img/corner2.png);}
#menu :hover ul li a {height:25px; line-height:15px; padding-left:10px; width:131px; background:#58a6cd; border-left:1px solid #a9cfe2;}
#menu :hover ul li a.fly {background:#58a6cd url(pro10/arrow.png) no-repeat 120px 5px;}
 
#menu :hover ul.green li.pad1 b.p7 {background:#85c226; border-top:1px solid #c5e98d; border-left:1px solid #c5e98d;}
#menu :hover ul.green li a {background:#85c226; border-left:1px solid #c5e98d;}
 
#menu :hover ul.pink li.pad1 b.p7 {background:#f19abd; border-top:1px solid #f9d0e0; border-left:1px solid #f9d0e0;}
#menu :hover ul.pink li a {background:#f19abd; border-left:1px solid #f9d0e0;}
 
#menu :hover ul li a:hover {color:#fff;}
#menu :hover ul li:hover > a {color:#fff;}
 
#menu :hover ul :hover ul li.pad1 b.p7 {background:#bab3d5; border-top:1px solid #e1deed; border-left:1px solid #e1deed;}
#menu :hover ul :hover ul li a {background:#bab3d5; border-left:1px solid #e1deed;}
 
#menu :hover ul :hover ul.orange li.pad1 b.p7 {background:#ef9a5a; border-top:1px solid #f8cfb1; border-left:1px solid #f8cfb1;}
#menu :hover ul :hover ul.orange li a {background:#ef9a5a; border-left:1px solid #f8cfb1;}

#menu :hover ul :hover ul.rojo li.pad1 b.p7 {background: #F08080; border-top:1px solid #f8cfb1; border-left:1px solid #f8cfb1;}
#menu :hover ul :hover ul.rojo li a {background: #F08080; border-left:1px solid #f8cfb1;}
 
</style>
 
<!--[if lte IE 6]>
<style type="text/css">
#menu li a:hover b.p0 {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/right2.png', sizingMethod='crop');
}
#menu li a:hover b.p1 {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bottom2.png', sizingMethod='crop');
}
#menu li a:hover b.p2 {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/corner2.png', sizingMethod='crop');
}
#menu li a:hover ul li.pad1 b.p3 {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/right2.png', sizingMethod='crop');
}
#menu li a:hover ul li b.p4  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img0/side2.png', sizingMethod='crop');
}
#menu li a:hover ul li.pad2 b.p5  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bottom2.png', sizingMethod='crop');
}
#menu li a:hover ul li.pad2 b.p6  {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/corner2.png', sizingMethod='crop');
}
</style>
<![endif]-->

/* Formulario de contacto */

form {
  margin: auto;
  padding: 20px;
  /* font-size: 100%;
  min-width: 560px;
  max-width: 620px; */
  width: 620px;
}

form fieldset {
  clear: both;
  font-size: 100%;
  border-color: Navy;  /* Color azul de la linea */
  border-width: 1px 0 0 0;
  border-style: solid none none none;
  padding: 10px;
  margin: 0 0 0 0;
}

form fieldset legend {
  font-size: 120%;
  font-weight: normal;
  color: Navy;   /* Color azul de la Legend */
  margin: 0 0 0 0;
  padding: 0 5px;
}

label {
  font-size: 12px;
  	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
   font-weight:bold;
	color: Navy;
}

input, select, textarea {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  color: #666666;
}

textarea {
  overflow: auto;
}

form div {
  clear: left;
  display: block;
  width: 550px;
  zoom: 1;
  margin: 5px 0 0 0;
  padding: 1px 3px;
}

form fieldset div.notes {
  width: 600px;
  height: auto;
  margin: 0 0 10px 10px;
  padding: 5px;
  border: 1px solid #666666;
  background-color: #E0FFFF; /* color de fondo de la caja */
  color: Navy;
  font-size: 88%;
}

form fieldset div.notes h4 {
  background-image: url(img/icon_info.gif);
  background-repeat: no-repeat;
  background-position: top left;
  padding: 3px 0 3px 27px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: Navy;
  color: Navy;
  font-size: 110%;
}

form fieldset div.notes p {
  margin: 0em 0em 1.2em 0em;
  color: #5C5C5C;
}

form fieldset div.notes p.last {
  margin: 0em;
  font-size: 1.2em;
}

form div fieldset {
  clear: none;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  margin: 0 0 0 144px;
  padding: 0 5px 5px 5px;
  width: 197px;
}

form div fieldset legend {
  font-size: 100%;
  padding: 0 3px 0 9px;
}

form div label {
  display: block;
  float: left;
  width: 130px;
  padding: 3px 5px;
  margin: 0 0 5px 0;
  text-align: right;
}

form fieldset legend {
  font-weight: bold;
}

form label {
  font-weight: bold;
}

form div select, form div textarea {
  	padding: 1px 3px;
  	margin: 0 0 0 0;
  	color: #666666;
	border: 1px solid Navy;
	background: #DFEAF4;
}

form div input.inputText {
  	padding: 1px 3px;
  	margin: 0 0 0 0;
  	color: #666666;
	border: 1px solid Navy;
	background: #DFEAF4;
}

.formok {
	margin-bottom: 5px;
	padding: 0px;
  font-size: 14px;
  	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
   font-weight:bold;
	color: Teal;
}

/* Tablas para presentacion de datos para mantenimiento y Administracion */
/* Formato para las Tablas */
table.tbmanten {
	border: 1px solid Navy;
	border-right: 2px solid Navy;
	border-bottom: 2px solid Navy;
	width: 90%;
	margin: 20px auto;
}
table.tbmanten caption {
	font: bold 10px "Trebuchet MS", Tahoma, Arial, sans-serif;
	color: #0c749b;
	text-align: center;
	margin: 10px auto;
}

table.tbmanten th {
	font: bold 11px Verdana, Tahoma, Arial, sans-serif;
	color: #FFD700;
	background: #0c749b;
	text-align: left;
	padding: 3px;
	border: 1px solid Navy;
}

table.tbmanten tbody {
	font: bold 10px;
	color: #fff;
	background: #B0C4DE;
	text-align: left;
	padding: 3px;
	border: 1px solid Navy;
}

table.tbmanten tbody tr.cabecera {
	font: bold 10px;
	color: #535353;
	background: #FEFFF1;
	text-align: left;
	padding: 3px;
	border-top: 1px solid #eee;
}

table.tbmanten tbody td {
	font: 11px "Trebuchet MS", Tahoma, Arial, sans-serif;
	text-align: left;
	padding: 2px;
	color: Navy;
}

table.tbmanten tbody td.par {
	background: #B0C4DE;
}
table.tbmanten tbody td.impar {
	background: #ADD8E6;
}

table.tbmanten td.noactivo {
	background: #F5DEB3;
}

table.tbmanten a:link, table.tbmanten a:visited {
	color: Maroon;
}

table.tbmanten a:hover {
	color: #B22222;
	text-decoration: none;
}




/* Definicion de las cajas de contenido de la ficha */
/* Se establece de una longitud dada a 770px y centrada en la pantalla */
/* Su situación la establezco a 100 px del margen superior para dejar espacio a la cabecera */
/* Es sumamente importante establecer la position a relative para referenciar los elementos */
#Galeria{
	width: 550px;
	margin-left: auto;
	margin-right: auto;
	padding: 3px 0 3px 0;
	border: 1px dashed #00008B;
	background-color: transparent;
	text-align: justify;
	margin-bottom: 10px;
	font: bolder 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
}

/* Galeria de imagenes Multimedia */
/* Establece la posicion de la imagen inicial de presentación */
#imgaleria {
	position: relative;
	background: transparent url(img/imgfnd.jpg) no-repeat 80px 5px;
	margin-bottom: 5px;
	z-index: 1;
	border: 1px #00008B;
}

/* Presenta una frontera entre las imagenes expuestas y el scroll para su posicion correcta */
#renglon {
	height:360px; 
	width:5px;
}

#scrollbox {
	width:500px; 
	height:80px; 
	background:#f4f4f4; 
	overflow:auto; 
	border:1px solid #aaa; 
	margin-left:auto;
	margin-right:auto;
}


/* Limitacion de la presentacion de las imagenes reducidas o thumbmails */
#miniaturas {
	width:3000px; 
	height:50px;
}

/* Presentacion de la galeria de miniaturas */
a.galeria, a.galeria:visited {
	display:block; 
	color:#000; 
	text-decoration:none; 
	border:1px solid #000; 
	width:67px; 
	height:50px; 
	margin:3px; 
	float:left;
	font-size:11px;
}

a.slide {	
	width: 67px; 
	height: 50px;
}

/* Presentacion de la galeria de fotos según se hace el hover */
a.galeria span {
	display: block;
	position: absolute;
	left: -99999px;
	top: 5px;
	width: 500px;
	height: 300px;
	padding:5px; 

	font-style:italic; 
	color:#000; 
	background:#fff;
	overflow: hidden;
	z-index: 100;
	font-size:11px;
}
a.galeria span img {
	border:1px 
	solid #000;
}

.piefoto {
	position: absolute;
	left: 18px;
	top: 310px;
}

a.galeria:hover {
	white-space:normal; 
	border:1px solid #fff;
}
a.galeria:hover img {
	border:1px solid #000; 
	z-index:100;
}

a.galeria:active img, a.galeria:focus img{
	border:1px solid #000; 
	z-index:50;
}

a.galeria:hover span{
	display: block;
	position: absolute;
	width: 400px;
	height: 350px;
	padding: 3px;
	border: border:1px solid #000;
	top: 5px;
	left: 18px;
	font: bolder 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center;
	color: Navy;
	background: #EEE8AA;
	z-index: 100;
}

a.galeria:active {
	border:1px solid #eee;
}

a.galeria:active span, a.galeria:focus span {
	display: block;
	position: absolute;
	width: 400px;
	height: 350px;
	padding: 3px;
	border: thin solid Maroon;
	top: 5px;
	left: 18px;
	font: bolder 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center;
	color: Navy;
	background: #E6E6FA;
	z-index: 50;
}


/* Formulario del Login de Administrador */
#formlogin {
	font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", "Lucida Grande", verdana, arial, helvetica;
   font-weight:bold;
   border: 2px solid #0c749b;
   width:90%;
	padding: 10px;
}
#formlogin legend{
	font-size: 15px;
	color: #0c749b;
}
#formlogin ol{
    list-style:none;
}
#formlogin ol li{
    padding-bottom:5px;
	 color: Maroon;
}
#formlogin ol li label{
    width:120px;
    float:left;
    text-align:left;
	 color: Navy;
}
#formlogin input,  #formlogin textarea, #formlogin select{
    border: 1px solid Navy;
	 background: #ADD8E6;
	 color: Black;
}
#formlogin input.btn {
    padding:3px;
	 margin: auto;
    color: #191970;
    background-color: #ADD8E6;
    border: 1px solid Navy;
}

#formlogin .recomendar{
	font-family: "Trebuchet MS", Georgia, Verdana, "Times New Roman", Arial, Times, serif;
   font-weight:bold;
	font-size: 15px;
	color: #0c749b;
	padding-left: 15px;
}