/*	Este es el titulo que se ve unicamente de en area central (columna central)*/
.bloquecontenido-titulo{
	text-align: center;	
	padding: 4px 10px 4px 40px;
	font-family: "Tempus Sans ITC";
	color: #ffffff;
	font-weight: bold;
	background: url(imagenes/subtitulo_fondo.png) #0099CC;
	background-position: 5px 2px;
	border: 1px solid #236e87
}

.bloquecontenido-subtitulo{
	padding:0px 10px 10px 10px;
	text-align:left;	
	height:18px;
	font-family: "Tempus Sans ITC";
	color:#ffffff;
	position:absolute;
	font-weight:bold;
}

/*	[inicio]Este es el contenido que se ve unicamente de en area central (columna central)*/
.bloquecontenido-contenido{
	font-family: "Tempus Sans ITC";
	color:#ffffff;
	padding: 7px 7px 7px 7px;
}


.separador-horizontal {
	border-top-width: 4px;
	border-bottom-width: 4px;
	border-top-style: double;
	border-bottom-style: double;
	border-top-color: #E1A60A;
	border-bottom-color: #E1A60A;
	padding: 8px 8px 8px 8px;
	}

.titulo-pagina{
	font: 13px/1.5em bold italic arial, serif;
	padding: 10px 25px 0px 25px;
	background: url(http://delibertad.com/portal/template/images/bg_header.gif) repeat-x;
	margin: 0px -10px 0px -10px;
	height: 30px;
	color: #ffffff;
}

.bloque-ss{
	color: #000;
	padding: 10px 10px 10px 10px;
	
}

#contenido-tiendas-hogsmeade{
	color: #000;
}

#contenido-tiendas-hogsmeade a{
	color: #000;
}

/*	[inicio] esta clase prepara el formato de la pagina para todas publicaciones de noticias, webs y mas	*/
.publicacion-titulo {
	padding-top: 8px;
	color: #000000;
	font-size:20px;
	font-weight:bold;
}

.publicacion-contenido {
	padding: 30px 0px 70px 15px;
	color: #000000;
	width: 470px;
}

.publicacion-comentarios{
	margin-top:30px;
	padding: 20px 50px 0px 30px;
	color: #000000;
	width:468px;
}

.publicacion-separador{
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	padding-top: 70px;
	text-align:center;
	font-size:16px;
	font-weight:bold;
}

.publicacion-anuncios{
	width: 468px;
	padding-left: 15px;
	background-color: #DCDCDC;
	font-weight: bold;
	margin-bottom:8px;
}

.publicacion-encabezado{
	margin-top:150px;
	padding: 20px 100px 30px 100px;
	color: #000000;
}

.comentario-contenido{
	border: 1px solid #A4A4A4;
	margin-bottom:-1px;
}

.comentario-burbuja{
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	background: bottom right;
}

.comentario-autor{
	padding: 10px 0px;
	text-align: right;
}
/*	[fin]Este es el contenido que se ve unicamente de en area central (columna central)*/

/* [inicio] propiedades para la la pagina de firmas */
.titulo-firma{
	background: url(imagenes/marcador.gif) no-repeat top right;
	height: 52px;
	padding-top: 20px;
	padding-right: 45px;
}

.firma-comilla-superior{
	background: url(imagenes/comillas.gif) no-repeat top left;
	width: 100%;
	height: 52px;
}

.contenido-firma{
	padding-left: 54px;
	margin-top: -30px;
}
/* [fin] propiedades para la la pagina de firmas */


/*	[inicio]clase de formatos: mensajes de error, areas de colores)*/
.mensaje-error{
	color:#000000;
	padding: 6px 20px 4px 30px;
	text-align: center;
	border: 1px solid #303030;
	background: url(http://harrypotteralive.com/imagenes/error.png) #FFA07A no-repeat top left;
	background-position: 15px 6px;
}

.columna-subtitulo{
	color: #000000;
	background-color: #D7DF01;
	text-align: center;
	font-size:16px;
	padding: 3px 5px 3px 5px;
	margin-bottom:7px;
}

.area-tareas{
	background-color:#D0F5A9;
	border: 1px solid #58FA58;
	text-align: right;
	padding-right:30px;
	color:#000000;
}

.area-negra{
	background-color: #000000;
	border: #596a4c solid 1px;
	color: #ffffff; 
	
	padding: 10px 10px 10px 10px;
}

.banner{
	text-align: left;
}
/*	[fin]clase de formatos: mensajes de error, areas de colores)*/


/*	[inicio] esta serie de clases sirve para darle sombra a los div y a las imagenes	*/
.shadow{
	border:1px dashed #CCFF66;
	padding: 10px 10px 10px 10px;
	background-color: #333333;
}

/*	[fin] esta serie de clases sirve para darle sombra a los div y a las imagenes	*/





/*	[inicio] esta serie de clases sirve para los tabs que cambian con ajax	*/
.fadecontentwrapper{ /* Total width: 350px+5px+5px=360px Read relative width relations for the other two containers below! */
position: relative;
width: 100%;
height: 170px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
}

.fadecontent{ /*style for each fade content DIV within wrapper. Total width: 330px+10px+10px=350px (".fadecontentwrapper" width minus its padding and borders, if any) */
position: absolute;
background: #333333;
padding: 10px;
visibility: hidden;
width: 100%;
}

.fadecontenttoggler{ /*style for DIV used to contain toggler links. Total width: 350px+5px+5px=360px */
width: 100%;
border-top-width: 0;
overflow: hidden;
}

.fadecontenttoggler a{ /*style for every navigational link within toggler */
text-decoration: none;
border-right: 1px solid #CCFF66;
padding: 0 5px;
float: left;
display: block;
font-weight: bold;
color: white;
}

.fadecontenttoggler a:hover{
background: black;
color: white;
}

.fadecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.fadecontenttoggler a.prev, .fadecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
color: #ffffff;
}

.fadecontenttoggler a.prev:hover, .fadecontenttoggler a.next:hover{
color: white;
background: #000000;
}

.fadecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background: #000000;
color: white;
}

/*	[fin] esta serie de clases sirve para los tabs que cambian con ajax	*/





/*	[inicio] esta serie de clases sirve para el menu vertical de navegacion	*/

.arrowlistmenu{
width: 100%; /*width of menu*/
}

.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(imagenes/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #0174DF;
background: url(imagenes/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #084B8A;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #F7FE2E;
background-color: #000000;
}

/*	[fin] esta serie de clases sirve para el menu vertical de navegacion	*/




/*	[inicio] esta serie de clases sirven para crear dos Divs horizonrales, de tamano dinamico	*/
#parent_div {
    width:400px;
    padding:6px 0;
    margin:auto;
 }
#parent_div:after {
    content:'';
    display:block;
    clear:both;
 }
#left_child {
    float:left;
    display:inline; /*required by IE6*/
    width:150px;
    margin:0 3px 0 6px;
 }
#right_child {
    float:left;
    display:inline; /*required by IE6*/
    width:215px;
    margin:0 6px 0 3px;
 } 
#left_child p,#right_child p {
    font-family:sans-serif;
    font-size:0.8em;
    text-align:justify;
    margin:4px;
 }
/*	[fin] esta serie de clases sirven para crear dos Divs horizonrales, de tamano dinamico	*/


/*	[inicio] esta unica clase sirve para darle formato a los tooltips	*/
.ajaxtooltip{
position: absolute; /*leave this alone*/
display: none; /*leave this alone*/
width: 300px;
left: 0; /*leave this alone*/
top: 0; /*leave this alone*/
background: lightyellow;
border: 2px solid gray;
border-width: 1px 2px 2px 1px;
padding: 5px;
color:#000000;
}
/*	[fin] esta unica clase sirve para darle formato a los tooltips	*/



/*	[inicio] esta serie de clases sirve para darle estructura tabless a los foms	*/
.feedbackform{
padding: 5px;
}

div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: 100%; /*width of form rows*/
overflow: hidden;
padding: 5px 0;
}

div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 120px; /*width of label (left column)*/
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px; /*spacing with right column*/
}

div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
margin-bottom: 10px; /* space following the field */
}

div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 250px;
}

div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: 300px;
height: 150px;
}

div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}

div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: 80px;
}
/*	[fin] esta serie de clases sirve para darle estructura tabless a los foms	*/

 
 
/*	[inicio] esta serie de clases sirve para darle estructura a las tablas */
.tabla-contenido{
	color: #000000;
}
/*	[fin] esta serie de clases sirve para darle estructura a las tablas */


/* [inicio]darle a las listas un modo horizontal*/
#navegador-tareas li
{
display: inline;
list-style-type: none;
padding-right: 10px;
color:#0174DF;
}
/* [fin]darle a las listas un modo horizontal*/


/* [inicio]serie de clases para darle formato al menu principal */
#contendor-navegacion-principal{
	padding:0px 0px 0px 210px;
}

#menu-navegacion-principal li{
	display: inline;
	list-style-type: none;
}

#menu-navegacion-principal a{
	color: #ffffff;
}
/* [fin]serie de clases para darle formato al menu principal */


/* [inicio]serie de clases para darle formato a la barra de navegacion */
#barra-navegacion-izquierda{
	float: left;
	width: 20px;
	text-align: left;
	background: url(imagenes/nav-i.png) left;
	height: 36px;
}

#barra-navegacion-derecha{
	float: right;
	width: 20px;
	text-align:  right;
	background: url(imagenes/nav-d.png) right;
	height: 36px;
}

#barra-navegacion{
	margin-left: 20px;
	margin-right: 20px;
	height: 36px;
	background: url(imagenes/nav.png);
	color: #ffffff;
}

#barra-navegacion-lista-izquierda{
	text-align: left;
	float: left;
	padding-top:7px;
}

#barra-navegacion-lista-derecha{
	text-align: right;
	float: right;
	padding-top:7px;
}

#barra-navegacion a{
	color: #ffffff;
	font-family:"Tempus Sans ITC";
    text-decoration: none;
	font-weight: normal;
	font-size:12px;
}
#barra-navegacion a:hover{
	color: #D7DF01;
}
/* [fin]serie de clases para darle formato a la barra de navegacion */

/* [inicio] serie de clases para darle formato al encabezado	*/
#encabezado{
	color:#fff;
	height: 220px;	
	background: url(imagenes/encabezado_fondo.png);
	margin-left: 10px;
	margin-right: 10px;
}

#encabezado-extremoi{
	background: url(imagenes/encabezado-i.png) left;
	float:left;
	height: 220px;
	width: 10px;
	margin-left: -10px;
}

#encabezado-centro{
	height: 220px;
	margin-right: 10px;
	float: left;
}

#encabezado-extremod{
	background: url(imagenes/encabezado-d.png) right;
	float: right;
	height: 220px;
	width: 10px;
	margin-right: -10px;
}
/* [fin] serie de clases para darle formato al encabezado	*/




/*	[inicio] serie clases para las tiendas	*/
.contenedor-tienda-categoria{
	height: 65px;
	color: #000;
	background: url(imagenes/cabezadepuerco.gif) left no-repeat;
	padding-left: 100px;
	padding-top: 25px;
}
/*	[fin] serie clases para las tiendas	*/