/*
Theme Name: Pussycat PR
Theme URI: http://www.mercerua.com/
Description: Based on fifties ads illustrations and with a light and clean design this theme was especially designed for <a href="http://www.pussycatpr.com/"><strong>Pussycat PR Consultancy</strong></a> by <a href="http://www.mercerua.com/">Rua Design.</a>
Version: v.1
Author: Rua Design
Author URI: http://www.mercerua.com/
*/


/*
IMPORTANTE:

# para referirme a un ID (de cualquier tag: <div> <p> <form> etc) del html: id="nico" en css = #nico {}
. para referirme a una class del html: class="nico" en css = .nico {}
Para agrupar mas de un estilo bajo mismas caracteristicas uso una COMA: #nico, h1 {} en css = #nico y h1
Para especificar un determinado estilo dentro de una DIV, NO uso una COMA: #nico h1 {} en css = h1 dentro de DIV nico
*/


/* ESTILOS GENERALES: Reset de DEFAULTS para Margin & Padding */

/* Reseteo: <body> <headers> <p - parragraph> <hr - horizontal line> <form> y otros. Luego dentro de cada estilo le puedo reasignar un nuevo valor */
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form {
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}


/* ESTILOS <body> */

/* <body> estilo GENERAL de la WEB y sus TEXTO */
/* <body> envuelve TODO incl. DIV #page */
body {
	font-family: "Georgia", Times New Roman, Times, serif;
	font-size: 12px;
	line-height: 18px;
	color: #333333;
	/* Estos son rasgos del BOBY de la WEB */
	background-color: #1C2327;
	background-image: url(images/PPR_Page_fur_background.png);
	background-repeat: repeat;
	background-attachment: scroll;
	/* Using "text-align: center" here ensures in IE that the DIV #page_shadow_left_right -the one that nests all the page- will be centered on the BROWSER's window width */
	text-align: center;
	/* Starts everithing from top */
	vertical-align: top;
	margin-top: 0px;
}


/* ESTILOS <a> */

/* <a> estilo de ANCHOR TAG (los LINKS) */
a {
	color: #CC6600;
	text-decoration: none;
	/* This get rid of dotted lines around menu buttons in FireFox when clicked */
	outline: none;
	/* As this outline is a kind of accessibility thing that stand-out the buttons in your web is recommended not to deactivate it or apply it in specific states of the button, i.e. a:active so it will be still working on a:focus (Just in case, touching the a:focus css pseudo-class does not work in IE). See: http://webforumz.com/flash-and-multimedia-forum/46804-how-to-get-rid-of-lines.htm#post298108
NOTE: the really good thins about the 'outline' parameter is that yo can set it in different ways as the 'border' parameter but it does no use px of your design! */
}
a:hover {
	color: #666666;
	text-decoration: underline;
}

/* IMAGE LINK */
a img {
	/* Saco el DEFAULT border que tienen las link images */
	border: none;
}


/* ESTILOS de <h1> */

/* <h1> estilo de HEADER 1 (lo uso en el titulo del BLOG) */
h1 {
	color: #29424B;
	font-family: "Georgia", Times New Roman, Times, serif;
	font-size: 36px;
	line-height: 41px;
	font-weight: bold;
	background: url(images/header-icon.gif) no-repeat;
}
/* Apariencia de los link UNICAMENTE bajo el estilo <h1> */
h1 a{
	color: #29424B;
	text-decoration: none;
}
/* "a:hover" se refiere a cuando estoy arriba de un LINKS */
h1 a:hover{
	color: #ffffff;
	text-decoration: none;
}
/* "a:visited" se refiere a un LINK ya visitado */
h1 a:visited{
	color: #29424B;
	text-decoration: none;
}


/* ESTILOS de <h2> */

/* <h2> estilo de HEADER 2 (Uso: Titulo de los POSTS) */
h2 {
	color: #29424B;
	font-family: "Georgia", Times New Roman, Times, serif;
	font-size: 24px;
	font-style: normal;
	line-height: 30px;
	font-weight: normal;
	font-variant: normal;
	border-top-color: #BDBDA8;
	border-top-width: 1px;
	border-top-style: dotted;
	border-bottom-color: #BDBDA8;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
}
/* Apariencia de los link UNICAMENTE bajo el estilo <h2> */
h2 a {
	color: #29424b;
	text-decoration: none;
}
/* "a:hover" se refiere a cuando estoy arriba de un LINKS */
h2 a:hover {
	color: #6a7a80;
	text-decoration: none;
}
/* "a:visited" se refiere a un LINK ya visitado */
h2 a:visited {
	color: #29424b;
}


/* ESTILOS de <h3> */

/* <h3> estilo de HEADER 3 (Uso: Titulos en SIDEBAR & Sub-Headings in Pages) */
h3 {
	color: #29424B;
	font-family: "Georgia", "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 21px;
	font-weight: normal;
	text-transform: uppercase;
	/* PADDING: Space inside the box */
	padding: 5px 0px 15px 0px;
}


/* ESTILOS de <h4> */

/* <h4> estilo de HEADER 4 (Uso: Sub-Heading lines in Pages) */
h4 {
	color: #29424B;
	font-family: "Georgia", "Times New Roman", Times, serif;
	font-size: 13px;
	line-height: 19px;
	font-style: oblique;
	font-weight: normal;
	/* PADDING: Space inside the box */
	padding: 0px 0px 15px 0px;
}


/* ESTILOS de <strong> */

/* Determino peso de TAG html <strong> */
strong {
	font-weight: bold;
}


/* ESTILOS de <small> */

/* Determino size de TAG html <small> */
small {
	font-size: 10px;
	line-height: 16px;
}


/* ESTILOS de <i> (italic) */

/* Determino size de TAG html <small> */
i {
	font-style: oblique;
}


/* ESTILOS de <p>, <p a:visited> & <p img> */

/* <p> estilo de PARAGRAPH */
p {
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	padding: 0px 0px 15px 0px;
}
/* <p> estilo de LINKS VISITED dentro del paragraph */
p a:visited {
	/* NOTE: I'm keeping the same color, here I could change it or other settings */
	color: #CC6600;
}
/* <p> estilo de IMAGES dentro del paragraph */
p img {
	/* ANCHO MAX de las images en <p> */
	/* parrafo (474px) - padding (10px) - border (2px) = 462 */
	/* Si quisiera el 100% puedo poner: max-width: 100%; */
	max-width: 462px;
	/* If the 'max-width' is being used by the img 'height: auto' will set the proportional heigth for the img to not distor it */
	height: auto;
	/**/
	border: 1px dotted #DFDBD6;
	/* MARGIN: Space outside the box */
	/* Separa el texto de alrededor */
	margin: 2px 8px 3px 8px;
	/* PADDING: Space inside the box */
	padding: 5px;
	/**/
	background-color: #F9F9F9;
	/*
	Optional ROUNDED CORNERS for browsers that support it:
	*/
	-moz-border-radius: 4px; /* Mozilla FireFox */
	-khtml-border-radius: 4px; /* Apple */
	-webkit-border-radius: 4px; /* Apple */
	border-radius: 4px; /* CSS3 */
}


/* CLASSES ALIGN de WP para IMAGES, DIV, P, TABLE (WP 2.5 up) */

.alignleft {
	float: left;
}
.aligncenter, div.aligncenter {
	/* Uso "auto" para que se centre en IZQ y DER */
	margin-left: auto;
	margin-right: auto;
	display: block;
	/* Especifico "display: block;" aqui aunque tenga style especifico para "img.aligncenter" para que asi cualquier media (images/videos) queden centradas en el <p> */
	/* BLOCK: Displays the element as a block-level element with a line break before and after the element */
}
.alignright {
	float: right;
}
/* ".alignnone {float: none;}" no lo seteo pues no hace falta */
/* Podria incluirle tambien "display: block;" pero lo anulo pues de estar activo cualquier elemento .alignnone actuaria como "block" y no quiero eso. Lo asigno especificamente al style "img.alignone" */


/* ESTILOS de <img> */

/* <img> settings para las IMAGES */

/* NOTA: Puedo presindir de estos styles si no quiero dar rasgos especiales a las fotos. Se alinearian por los settings de ALGN */

img.alignleft {
	display: inline;
	/* INLINE: The element will be displayed as an inline element, with no line break before or after the element */
}
img.aligncenter, img.alignnone {
	/* Determino que "img.alignnone" sea igual que "img.aligncenter" */
	/* MARGIN: Space outside the box */
	margin: 8px auto;
	display: block;
	/* Ya esta en style ".aligncenter {}" pero lo repito para asignarlo a "img.alignnone {}" pues por defecto display es = "inline" y no lo quiero asi para "img.alignnone {}". Quiero que acutue como "block" para que se pueda centrar en <p> */
}
img.alignright {
	display: inline;
	/* INLINE: The element will be displayed as an inline element, with no line break before or after the element */
}


/* ESTILOS de <img> con WP CAPTION */

/* CAPTION FRAME */
.wp-caption {
	/* Esto sets the font style for all the captions alignments: left, center, right and none */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
	line-height: 14px;
	color: #CC6600;
	/* Fijo un ancho maximo del CAPTION FRAME en <p> */
	/* parrafo (474px) - su px border (2px) = 472 */
	max-width: 472px;
	/**/
	/* Esto centra TODO en el MARCO: IMAGE & CAPTION */
	/* Sirve para centrar la caption en las images .aligncenter & .alignnone que no se ven afectadas por el estilo ".wp-caption-text" */
	text-align: center;
	background-color: #F9F9F9;
	border: 1px dotted #DFDBD6;
	/* MARGIN is the space outside the box */
	/* Separa el texto de alrededor */
	margin: 2px 8px 3px 8px;
	/* PADDING: Space inside the box */
	/* Uso solo TOP para equiparar un DEFAULT que hay en LEFT & RIGHT */
	padding-top: 5px;
	/* Uso BOTTOM aqui para dar margen bajo la CAPTION a TODAS las clases de .align de images */
	padding-bottom: 5px;
	/*
	Optional ROUNDED CORNERS for browsers that support it:
	*/
	-moz-border-radius: 4px; /* Mozilla FireFox */
	-khtml-border-radius: 4px; /* Apple */
	-webkit-border-radius: 4px; /* Apple */
	border-radius: 4px; /* CSS3 */
}
/* IMAGE + CAPTION: .aligncenter & .alignnone */
/* Para estos ALIGN seteo un new MARGIN para que queden CENTRADOS en <p> */
.wp-caption.aligncenter, .wp-caption.alignnone {
	/* MARGIN: Space outside the box */
	margin: 8px auto;
}
/* IMAGE and IMAGE LINK in CAPTION FRAME */
.wp-caption img, .wp-caption a img {
	/* Fijo un ancho maximo de la IMAGE in CAPTION FRAME en <p> */
	/* parrafo (474px) - padding (10px) - border (2px) = 462. Lo mismo que para "p img" */
	max-width: 462px;
	/* If the 'max-width' is being used by the img 'height: auto' will set the proportional heigth for the img to not distor it */
	height: auto;
	/**/
	border: none;
	/* MARGIN is the space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	/* Uso BOTTOM aqui para dar margen bajo la IMAGEN a TODAS las clases de .align de images */
	padding: 0px 0px 4px 0px;
}
/* IMAGE LINK HOVER in CAPTION FRAME */
/* Seteo <a> para evitar que on-rollover aparesca el borde de 1 px de style "a:hover img" */
.wp-caption a:hover img {
	border: none;
}
/* CAPTION */
/* NOTE: Este estilo esta afectando SOLO a las images .alignleft & .alignright */
/* NOTE: Este estilo NO esta afectando a las images .aligncenter & .alignnone */
.wp-caption p.wp-caption-text {
	text-align: center;
	padding: 0px 4px 0px 4px;
	margin: 0;
}
.mceTemp dd {
/* SPECIAL STYLE: Reseteo el ESTILO de <dd> (seteado mas abajo) para la class ".mceTemp" pues me afecta la posicion de la caption en las fotos .aligncenter & .alignnone. Class ".mceTemp" es una class temporal que crea WP para albergar las fotos con caption .aligncenter & .alignnone. Lo unico que reseteo es que le elimino los 20px padding left */
	padding: 0px;
}


/* ESTILOS de <blockquote> */

/* Apariencia de una blockquote */
blockquote {
	background-color: #FBF7EF;
	border-top: 1px dotted #BDBDA8;
	border-bottom: 1px dotted #BDBDA8;
	/* MARGIN: Space outside the box */
	margin: 10px 25px 25px 25px;
	/* PADDING: Space inside the box */
	padding-bottom: 5px;
}
/* Settings <p> en un blockquote  */
blockquote p {
	/* MARGIN: Space outside the box */
	/* I use 14px on the left margin because as <p> is margined to the left on the right its generate a optical bigger margin */
	margin: 10px 10px 10px 15px;
	/* PADDING: Space inside the box */
	padding: 5px;
}
/* Apariencia de un blockquote dentro de un blockquote */
blockquote blockquote {
	/* I'm using the same colour as the outside background */
	background-color: #EFEBE0;
	/* MARGIN: Space outside the box */
	margin: 0px 30px;
	/* Estas 2 no influyen en Firefox/Safary si las saco */
	width: auto;
	float: none;
}


/* ESTILOS de <ul> & <ol> solo DIV #content */

/* <ul> Unordered List */
#content ul {
	color: #29424B;
	line-height: 22px;
	/* No DEFAULT bulleted style of the items on the menu */
	list-style: url(images/PPR_List_Item_style_dash_3x4.png);
	list-style-position: inside;
	/* MARGIN: Space outside the box */
	margin-bottom: 30px;
	/* PADDING: Space inside the box */
	padding-left: 25px;
}
#content ul ul {
	/* MARGIN: Space outside the box */
	margin-bottom: 0px;
}
/* <ol> Ordered List */
#content ol {
	color: #29424B;
	line-height: 22px;
	/* No DEFAULT bulleted style of the items on the menu */
	list-style: decimal;
	list-style-position: inside;
	/* MARGIN: Space outside the box */
	margin-bottom: 30px;
	/* PADDING: Space inside the box */
	padding-left: 25px;
}
#content ol ul {
	/* No DEFAULT bulleted style of the items on the menu */
	list-style: lower-latin;
	list-style-position: inside;
	/* MARGIN: Space outside the box */
	margin-bottom: 0px;
}
#content ol ul ul {
	/* No DEFAULT bulleted style of the items on the menu */
	list-style: lower-roman;
	list-style-position: inside;
}


/* ESTILOS de <dd> */

/* <dd> Definition Description: This tag is used to describe an item in a "definition list" <dl>. <dt> tag es el titulo o palabra a definir. */
dd {
	padding-left: 20px;
}
/*
Example <dl><dt><dd>:

<dl>
	<dt>Coffee</dt>
		<dd> Black hot drink</dd>
	<dt>Milk</dt>
		<dd> White cold drink</dd>
</dl>

 */
 

/* ESTILOS de <table> */

/* <table> tag is rarely used. But for example WordPress calendar uses it so it is better to have it styled if you add one */
table {
	font-family: "Georgia", Times New Roman, Times, serif;
	font-size: 12px;
}


/* ESTILOS de class "clear" */

.clear {
	clear: both;
	margin: 0px;
	padding: 0px;
}






/* ESTILO PAGE */

/* Settings GENERALES de DIV PAGE: La que anida toda el BLOG: Header + Content + Sidebar + Footer */
#page {
	/* ANCHO TOTAL DETERMINADO EN DISENO = 800px */
	width: 800px;
	/**/
	text-align: left;
	/**/
	background-color: #FFFFFF;
	/**/
	/* MARGIN: Space outside the box */
	/* Me separo 7px por lado de DIV #page_white_frame pues ese es el ancho que determino tendra mi white frame a CADA LADO de DIV #page */
	margin: 0px 7px;
}

/* ESTILOS PAGE SHADOW + WHITE FRAME */

/* ESTILOS DIVs: #page-shadow-left-right & #page-white-frame */

/* IMPORTANT: The following TWO style correspond to two new DIVs included arround the DIV #page to be able to host 1) a white frame all around it, and 2) a shadow on the LEFT and RIGHT sides of the page (ouside the white frame). These new DIVs nest the DIV #page, but I include its styles below the style for the DIV #page becuase DIV #page is the wide reference for all the others DIVs, including these TWO NEW DIVs. */

/* Settings DIV PAGE SHADOW LEFT-RIGHT */
/* NOTE: This DIV nests DIVs #page_white_frame and #page */
#page-shadow-left-right {
	/* USO ANCHO TOTAL de DIV #page (800px) + 14px de marco blanco a IZQ/DER de #page + 16px de sombra a IZQ/DER de #page-white-frame = 830px */
	width: 830px;
	/**/
	background-image: url(images/PPR_Shadow_right_left_830x1_TRANSPARENT.png);
	background-repeat: repeat-y;
	background-position: 0px top;
	/* MARGIN: Space outside the box */
	margin: 0px auto;
	/* 0px para NO separarme de DIVs externas: #page_shadow_top y #page-shadow-bottom, que son las que contienen las partes TOP y BOTTOM de la sombra. "auto" en IZQ/DER para que quede centrada en el ancho de la window del BROWSER (solo funciona si el parametro 'width' de esta DIV fue seteado) */
}

/* Settings DIV PAGE WHITE FRAME */
/* NOTE: This DIV nests DIV #page */
#page-white-frame {
	/* USO ANCHO TOTAL de DIV #page (800px) + 8px de marco blanco a IZQ/DER de #page = 816px */
	width: 814px;
	/**/
	background-color: #FFFFFF;
	background-image: url(images/PPR_Hands_background_234x245_TRANSPARENT.png);
	background-repeat: no-repeat;
	/* I set the img using coordinates but I could set its position just with: background-position: right top; */
	/* position-right = DIV widht (814px) - img width (234px) = 580px. position-top = 0px distance from the top of the DIV */
	background-position: 580px 0px;
	/* MARGIN: Space outside the box */
	/* Me separo 8px IZQ/DER de DIV #page-shadow-left-right pues ese es el ancho de mi sombra a CADA LADO de DIV #page-white-frame. En TOP/BOTTOM uso 0px para NO separarme de las DIVs externas: #page-shadow-top y #page-shadow-bottom */
	margin: 0px 8px;
	/* PADDING: Space inside the box */
	/* Solo en TOP uso 7px para separarme INTERNAMENTE de la DIV #page el equivalente al ancho de mi WHITE FRAME */
	/* En LEFT/RIGHT no uso pues el WHITE FRAME ahi lo logro con el width 14px mas ancho que el de DIV #page */
	/* En BOTTOM no uso pues mi WHITE FRAME bottom lo incluyo en la DIV #page-shadow-bottom pues al no ser recto no lo puedo lograr solo con padding */
	padding: 7px 0px 0px 0px;
}


/* ESTILOS DIVs: #page-shadow-bottom */

/* IMPORTANT: The following style correspond to a new EXTERNAL DIVs NOT NESTED by the DIV #page. This DIV goes just at the BOTTOM of the DIV #page_shadow_left_right and hosts the shadow images of the bottom of the page */

/* SHADOW BOTTOM (External DIV) */

/* NOTE: This DIV goes at the BOTTOM of the DIV #page-shadow-left-right */

#page-shadow-bottom {
	/* USO ANCHO DIV #page-shadow-left-right */
	width: 830px;
	/* USO ALTO de la background img de sus DIVs internas */
	height: 21px;
	/**/
	/* MARGIN: Space outside the box */
	margin: 0px auto;
	/* 0 para NO separarme de DIV #page-shadow-left-right que esta pegada arriba de esta ni de DIV #credits que esta abajo. "auto" IZQ/DER me CENTRA en el ancho de la window del BROWSER (solo funciona si el parametro 'width' fue seteado) y seguir asi a DIV #page-shadow-left-right */
}

/* DIVs INSIDE DIV #page-shadow-bottom */

/* IMPORTANT: The following FIVE DIVs are nested inside de DIV #page-shadow-bottom to build the rounded bottom of the page. See 'footer.php' */

#page-shadow-bottom-left {
	/* USO ALTO la Background img que contiene */
	width: 22px;
	height: 21px;
	/**/
	background-image: url(images/PPR_Shadow_bottom_left_22x21_TRANSPARENT.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	float: left;
	/* MARGIN: Space outside the box */
	margin: 0px;
}
#page-shadow-bottom-centre {
	/* USO ANCHO DIV #page-shadow-left-right (830px) - #page-shadow-bottom-left (22px) - #page-shadow-bottom-right (22px) = 786px */
	width: 786px;
	/* USO ALTO de DIV #page-shadow-bottom-left or #page-shadow-bottom-right */
	height: 22px;
	/**/
	float: left;
	/* MARGIN: Space outside the box */
	margin: 0px;
}
#page-shadow-bottom-centre-top {
	/* USO ANCHO DIV #page-shadow-bottom-centre */
	width: 786px;
	/* USO ALTO DIV #page-shadow-bottom-centre (21px) - alto #page-shadow-bottom-centre (7px) = 14 px */
	height: 14px;
	/**/
	background-color: #FFFFFF;
	/* MARGIN: Space outside the box */
	margin: 0px;
}
#page-shadow-bottom-centre-bottom {
	/* USO ANCHO DIV #page-shadow-bottom-centre */
	width: 786px;
	/* USO ALTO la Background img que contiene */
	height: 7px;
	/**/
	background-image: url(images/PPR_Shadow_bottom_1x7_TRANSPARENT.png);
	background-repeat: repeat-x;
	background-position: 0px top;
	/* MARGIN: Space outside the box */
	margin: 0px;
}
#page-shadow-bottom-right {
	/* USO MEDIDAS de la background img */
	width: 22px;
	height: 21px;
	/**/
	background-image: url(images/PPR_Shadow_bottom_right_22x21_TRANSPARENT.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	float: left;
	/* MARGIN: Space outside the box */
	margin: 0px;
}






/* ESTILOS HEADER */

/* DIV #header */

#header {
	/* uso ANCHO TOTAL. Como luego indico "clear: both" (y nada se pondra a su alrededor) podria omitir este valor y su ancho sera el de la DIV #page */
	width: 800px;
	/* El alto de esta DIV = Alto background img (224px) + alto DIV #header_menu (70px) = 294px */
	height: 294px;
	/**/
	/* "relative" permite que la DIV header quede arriba de la DIV content y sidebar. No entiendo como funciona */
	position: relative;
	/* clear: sets the sides of an element where other floating elements are not allowed. Value: left, right, both, none */
	/* both: No floating elements allowed on either the left or the right side */
	clear: both;
	background-image: url(images/PPR_Header_background_800x224.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}


/* HEADER: Horizontal Menu */

/* DIV #header_menu */

#header_menu {
	/* uso ANCHO TOTAL */
	width: 800px;
	height: 70px;
	/**/
	float: left;
	background-image: url(images/PPR_Menu_background_800x70.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	/* Como esta DIV esta dentro de la DIV #header le debo indicar donde quiero que se posisiono dentro de ella. Para ello uso "Positioning" en el menu del estilo. Con 'absolute' y 0px de margen to tne bottom la ubico pegada al botom de DIV #header */
	position: absolute;
	bottom: 0px;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */
}


/* HEADER: Horizontal Menu: Settings <ul> <li> Tags */

/* <ul> Unordered List: Settings de lista como TOTAL */
#header_menu ul {
	/* No DEFAULT bulleted style of the items on the menu */
	list-style: none;
	/* This strips the DEFAULT spacing of the <ul> tag */
	/* MARGIN: Space outside the box */
	margin: 0px 0px 0px 29px;
	/* PADDING: Space inside the box */
	padding: 0px;
}
/* <li> Listed Items: Settings de CADA ITEM de la lista */
#header_menu li {
	/* float determina orden en que se lista el menu: izq-der o der-izq */
	float: left;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */	
}
/* <a> Anchor Tag: Settings de CADA ITEM LINK dentro de <ul><li> */
#header_menu ul li a {
	font-family: "Georgia", Times New Roman, Times, serif;
	font-size: 12px;
	line-height: 14px;
	color: #314549;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	/* "block" tells to the links to act as invisible boxes, so I can apply to them other settings */
	border-right: 1px solid #CC8F49;
	/* Here I can include a BACKGROUND IMG to the buttons of the menu using: background-image, background-repeat, background-color, etc. */
	/* Margen entre elementos del menu */
	/* MARGIN: Space outside the box */
	margin: 17px 0px 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 10px;
}
/* "a:hover" Cuando estoy arriba de un LINK */
#header_menu ul li a:hover {
	color: #5F767B;
	line-height: 13px;

}
/* "a:active" Cuando hago click en un LINK */
#header_menu ul li a:active {
	color: #CC6600;
}
/* "a:focus" Cuando el LINK ha sido clicado y se esta prosesando su instruccion. Funciona solo para FireFox */
#header_menu ul li a:focus {
	color: #CC6600;
}
/* "a:visited" se refiere a un LINK ya visitado
#header_menu ul li a:visited {}
*/


/* HEADER: Horizontal Menu: WP CLASSES for CURRENT PAGE */

/* WordPress DEFAULT CALSSES NAMES para menus de PAGES generados con "wp_list_pages()" */
/* http://codex.wordpress.org/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items */

/* Settings button CURRENT PAGE */
#header_menu .current_page_item a {
	color: #CC6600;
	text-decoration: underline;
}
#header_menu .current_page_item a:hover {
	/* Uso el mismo color de 'a'. Asi cuando estoy sobre el boton de la current page no cambia el color */
	color: #CC6600;
	line-height: 14px;
	cursor: default;
}
/* Settings button PARENT CURRENT PAGE */
/* Estos los seteo para que cuando este en una Child page del Main Menu, igual me detaque la pagina madre en el Main Menu */
/* Repito settings otorgados anteriormente, en el fondo me refiero a los mismos botones */
#header_menu .current_page_parent a {
	color: #CC6600;
	text-decoration: underline;
}
#header_menu .current_page_parent a:hover {
	/* Uso el mismo color de 'a'. Asi cuando estoy sobre el boton de la current page no cambia el color */
	color: #CC6600;
	line-height: 14px;
	cursor: default;
}
/* Settings button ANY ANCESTOR OF CURRENT PAGE */
/* Estos los seteo para que cuando este en una Grand Child page (or deeper) del Main Menu, igual me detaque la pagina madre en el Main Menu */
/* Repito settings otorgados anteriormente, en el fondo me refiero a los mismos botones */
#header_menu .current_page_ancestor a {
	color: #CC6600;
	text-decoration: underline;
}
#header_menu .current_page_ancestor a:hover {
	/* Uso el mismo color de 'a'. Asi cuando estoy sobre el boton de la current page no cambia el color */
	color: #CC6600;
	line-height: 14px;
	cursor: default;
}







/* ESTILO DIV CONTENT+SIDEBAR */

/* DIV que anida a la DIV #content + DIV #sidebar */
#content-and-sidebar {
	/* uso ANCHO TOTAL (800px) */
	width: 800px;
	/**/
	/* NOTE: Solo en "hidden" me previsualiza los settings al background */
	overflow: hidden;
	background-image: url(images/PPR_Main_Pattern_800x225.png);
	background-repeat: repeat-y;
	background-position: 0px bottom;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* #margin: -20px 0px 0px 0px; IE NOTE: This will only apply to Microsoft Internet Explorer browsers */
	/* _margin: -20px 0px 0px 0px; IE NOTE: This will only apply to IE browsers 6.0 and older */
	/* PADDING: Space inside the box */
	padding: 0px;
}







/* ESTILOS DIV CONTENT */

/* DIV CONTENT: Envuelve el contenido CENTRAL de la web: Loop de posts + Navigation Bars */
#content {
	/* ANCHO TOTAL (800px) - #sidebar (258px) - #sidebar-left (8px) = 534px */
	width: 534px;
	/**/
	float: left;
	/* Esconder lo que se salga de los margenes de esta DIV */
	overflow: hidden;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	/* No uso padding-top pues quiero que DIV .post quede pegada al top de esta DIV #content */
	/* No uso padding-bottom pues quiero que DIV #content-and-sidebar que anida esta DIV quede pegada a DIV #footer */
	padding: 0px;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */
}

/* Settings de <h2> HEADING 2 solo el DIV #content */
#content h2 {
	/* MARGIN: Space outside the box */
	margin: 0px 0px 6px 0px;
	/* PADDING: Space inside the box */
	padding: 3px 0px 5px 0px;
}







/* NAVIGATION */

/* NAVIGATION: DIVs Bottom Post, Bottom Page, Post Before Comments */

/* NAVIGATION: Post Bottom */
#navigation-bottom {
	/* width: Toma el de DIV #content que lo anida */
	/* height: Tomo el alto de la Background img que contiene (84px) - padding top/bottom de esta DIV (21px) = 63 */
	/* DEBO INDICAR SU HEIGHT si quiero que quede pegada a la DIV #footer pues los px de padding se sumaran al alto de la imagen */
	height: 63px;
	/**/
	background-image: url(images/PPR_Navigation_Bottom_background_534x84.jpg);
	background-repeat: no-repeat;
	background-position: 0px top;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding-top: 21px;
	/* padding-top is needed to center the navigation buttons in the middle of the BRACKGROUND IMG */
}

/* NAVIGATION: Page Bottom - EMPT DIV */
#navigation-bottom-page {
	/* width: Toma el de DIV #content que lo anida */
	/* height: Tomo el alto de la Background img que contiene (84px) */
	/* DEBO INDICAR SU HEIGHT si quiero que se vea -pues es EMPTY- y quede pegada a la DIV #footer  */
	height: 40px;
	/**/
	background-image: url(images/PPR_Navigation_Page_Bottom_background_534x40.jpg);
	background-repeat: no-repeat;
	background-position: 0px top;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 0px;
}

/* NAVIGATION: Before Comments Section on each Post */
/* IMPORTANT: This DIV is inside the CLASS .post -which has its own padding LEFT/RIGHT that narrows the general wide of the #content 30px per side- so if I want to put here a Background img as wide as the DIV #content and see it completely without being cut on its left and right margins (bacause of the .post padding) I have to set some things to 'move' this DIV to the left. 1) Set its position as 'relative' and 2) set its position in relation to the its 'left' margin as many px to the left as the padding from the CLASS .post is taking from the DIV #content (-30px) and then 3) I MUST indicate the 'width' that I want to give to this DIV, otherwise the DIV would be moved to the left but its wide would continue being the width of #content less the padding LEFT/RIGHT of .post.  IN this case the width that I want correspond to the #content width */
#navigation-before-comments {
	position: relative;
	left: -30px;
	/* USO ANCHO de #content = 534px (Mismo que de la imagen de Background img que contiene */
	width: 534px;
	/* height: Tomo el alto de Background img que contiene (50px) - padding TOP (21px) = 29px */
	height: 29px;
	/**/
	background-color: #FFFFFF;
	background-image: url(images/PPR_Navigation_Middle_background_534x50.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 21px 0px 15px 0px;
	/* top = 21 para centrar los botones en height de la pastilla y bottom = 15 para generar white margin at the bottom when the backround img ends and push the following DIV #comments-section-header */
}

/* NAVIGATION: Settings DIVs CLASSES */

/* Apariencia de class de DIV que anida los botones de navegacion hacia otros post */
.navigation {
	/* width: Toma el de DIV #content que lo anida. Lo centro en 535px con padding IZQ-DER */
	/**/
	font-size: 10px;
	clear: both;
	/* Clear: sets the sides of an element where other floating elements are not allowed. Value: left, right, both, none. Both: No floating elements allowed on either the left or the right side */
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	padding: 0px 30px;
}
.navigation a, .navigation a:visited {
	color: #29424b;
}
.previous-entries {
	float: left;
}
.previous-entries a {
	padding-left: 17px;
	background: url(images/PPR_Navigation_arrow_left_12x12_TRANSPARENT.png) no-repeat left center;
}
.next-entries {
	float: right;
}
.next-entries a {
	padding-right: 17px;
	background: url(images/PPR_Navigation_arrow_right_12x12_TRANSPARENT.png) no-repeat right center;
}
/* Class para <p> que anida link BACK TO TOP incluido en DIV navigation */
.navigation-back-to-top {
	font-size: 10px;
	text-align: center;
	/* PADDING: Space inside the box */
	/* Reseteo valores de <p>. Ver "ESTILOS de <p>" */
	padding-top: 25px;
	padding-bottom: 0px;
}
/* Class para <a> BACK TO TOP incluido en DIV navigation */
.navigation-back-to-top a {
	padding-right: 8px;
	background-image: url(images/PPR_Navigation_go_to_top_arrow_5x7.png);
	background-repeat: no-repeat;
	background-position: right;

}






/* POST BACKGROUND DIV */

#posts-loop-background {
	/* TEMPORARY SETTING */
	background-color: transparent;
	background-image: url(images/PPR_Post_background_534x1.gif);
	/* background-image: url(images/PPR_Post_background_535x1_GUIDES.jpg); */
	background-repeat: repeat-y;
	background-position: 0px top;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}







/* ESTILOS CLASS DIV post */

/* CLASS DIV #post */
/* This DIV envuelve cada post como unidad: Date/Title/Category & Comments/Content (Text) */
.post {
	/* IMPORTANT: The padding px are ADDED to the window dimensions */
	/* IMPORTANT: The border px are ADDED to the window dimensions */
	/**/
	/* USO ANCHO DIV #content (534px) - padding LEFT/RIGHT de esta DIV (30px) = 474px */
	width: 474px;
	/**/
	clear:both;
	/* PADDING: Space inside the box */
	padding: 10px 30px;
}


/* POST: GENERAL CLASSES */

/* POST: HEADING */

/* FULL DATE del post: Date + Author */
.post-full-date {
	/* width: Toma el de CLASS .post que lo anida. Pero lo reindico igualmente para IE */
	width: 474px;
	/**/
	/* No entiendo por que, pero para que este border top tenga los 534px de ancho debe estar bien seteato el padding de class .navigation */
	border-top-color: #666666;
	border-top-width: 1px;
	border-top-style: dotted;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */	
}

/* DATE del post */
.post-date-line {
	font-size: 11px;
	font-style: oblique;
	line-height: 14px;
	text-align: left;
	color: #999999;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	padding: 3px 0px 3px 0px;
	/**/
	float: left;
}
/* AUTHOR del post */
.post-author-line {
	font-size: 11px;
	font-style: oblique;
	line-height: 14px;
	text-align: right;
	color: #D0D0C2;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	padding: 3px 0px 3px 0px;
	/**/
	float: right;
}
/* TITULO del post */
.post-title {
	/* Debo indicar el width para que los dotted borders TOP-BOTTOM ocupen todo el ancho de la columna */
	/* Ancho #content (534px) - .post padding IZQ-DER (60px) = 474px */
	width: 474px;
	/**/
	float: left;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */	
}
/* CATEGORIES en que el post esta publicado */
.post-category {
	font-size: 10px;
	/* This colour affects only the non-link elements: the commas and the | symbol */
	color: #999999;
	float:left;
}
/* COMMENTS si hay o no hay */
.post-comments {
	font-size: 10px;
	/* This colour affects only the non-link elements: the | symbol */
	color: #999999;
	float: left;
}


/* POST: BODY (Text) */

.post-entry {
	/* width: Toma el de CLASS .post que lo anida. Pero lo reindico igualmente para IE  */
	width: 474px;
	/**/
	clear: both;
	/* Sin esto el contenido del Post me queda flotando al lado del Titulo */
	/* Clear: sets the sides of an element where other floating elements are not allowed. Value: left, right, both, none. Both: No floating elements allowed on either the left or the right side */
	/* PADDING: Space inside the box */
	padding: 20px 0px 30px 0px;
	/* Pongo este padding para separar el contenido del post de la seccion de Comments. Se aprecia SOLO cuando ya estoy dentro del post */
}
.post-entry a {
	text-decoration: underline;
}


/* POST: LINKS 'Edit Post' & 'Read More'  */

/* EDIT POST */
/* This is a DEFAULT WP CLASS name created by the WP 'edit_post_link()' tag that generates the link <a> 'edit' for the posts. I detected this class using the FireFox web developer tools bar */
.post-edit-link  {
	font-size: 10px;
}
/* READ MORE */
/* This is a DEFAULT WP CLASS name created by the WP 'the_content();' tag that -apart of display the post content- generates the 'read more' link <a> for the posts. I detected this class using the FireFox web developer tools bar. IMPORTANT: To bypass the '.post-entry a' 'text-decoration: underline;' setting and be able to the reach and reset the element that is associated to this CLASS I have to use the CLASS name after 'a.' and without any space between */
a.more-link {
	text-decoration: none;
}
.more-link:hover {
	text-decoration: underline;
}


/* POST: SEARCH INPUT RESULT MESSAGES */

/* Message: SEARCH INPUT FOUND! */
.post-search-found {
	/* NOTE: This CLASS is used for a DIV OUTSIDE de POSTS LOOP (and so, outside de DIV CLASS .post), so I have to set the margings again to imitate the CLASS .post the get the content of this DIV displayed correctly */
	/* USO ANCHO DIV #content (534px) - padding LEFT/RIGHT de esta DIV (30px) = 474px  */
	width: 474px;
	/**/
	color: #CC6600;
	/* MARGIN: Space outside the box */
	margin: 0px 0px -5px 0px;
	/* I use '-5px' to reduce the excess of margin generated by the <p> padding-bottom and the .post padding-top */
	/* PADDING: Space inside the box */
	padding: 0px 30px 0px 30px;
}
/* Message: SEARCH INPUT NOT FOUND... */
.post-search-not-found {
	/* width: Toma el de CLASS .post que lo anida */
	/**/
	color: #CC6600;
	clear: both;
	/* Clear: sets the sides of an element where other floating elements are not allowed. Value: left, right, both, none. Both: No floating elements allowed on either the left or the right side */
	/* PADDING: Space inside the box */
	padding: 10px 0px 0px 0px;
}


/* ESTILOS NO UTILIZADOS */
/* ESTILOS NO UTILIZADOS */

.post-calendar {
	background: url(images/mini-calendar.gif) no-repeat left center;
	padding-left: 18px;
	float: right;
	font-size: 95%;
	color: #999999;
}
.post-content {
	clear: both;
	padding-top: 10px;
}

/* ESTILOS NO UTILIZADOS */
/* ESTILOS NO UTILIZADOS */


/* POST: PASSWORD PROTECTED post DEFAULT <form> en DIV #content CLASS .post-entry */

/* Settings del DEFAULT paragraph de WP para los password protected posts */

/* NOTE: The DEFAULT message that appears for the PASSWORD PROTECTED posts can be modify from the core file: 'post-template.php' located in the folder 'wp-includes'. Also from the: 'comment-template.php' file you can modify the DEFAULT message that appears in the 'comment counter section' for the PASSWORD PROTECTED posts */

/* MESSAGE Settings <p> en <form> */
#content .post-entry form p {
	text-align: center;
	/* PADDING: Space inside the box */
	padding: 15px 0px 5px 0px;
}
/* TITULO "Password" Settings <label> en <form> */
#content .post-entry form p label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
}
/* PASSWORD-WINDOW & SUBMIT-BUTTON Settings <input> tags en <form> */
#content .post-entry form p input {
	font-size: 12px;
	text-align: center;
	/* MARGIN: Space outside the box */
	margin: 5px 0px;
}
/* PASSWORD-WINDOW only */
/* NOTE: This way: [type=""] to select what kind of <input> (text, password or submit) I want to isolate is not affecting IE */
#content .post-entry form p input[type="password"] {
	/* NOTE: I change the font just to have a smaller window for the password. The default font generates a bigger window */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
/* SUBMIT-BUTTON only */
/* NOTE: This way: [type=""] to select what kind of <input> (text, password or submit) I want to isolate is not affecting IE */
#content .post-entry form p input[type="submit"] {
	font-size: 11px;
}


/* POST: SHARE-THIS PLUGIN */

/* Settings generales de DIV */
#post-sharethis-plugin {
	font-size: 11px;
	text-align: center;
	clear: both;
	/* PADDING: Space inside the box */
	padding-top: 15px;
	/* MARGIN: Space outside the box */
	margin: 0px;
}
/* Settings <a> en DIV */
/* This resets default values of the Share-This button */
/* Note: this settings could be inside the style of the DEFAULT Share-This class 'a.stbutton' below. I use them here in case that class changes its name */
#post-sharethis-plugin a {
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
}
#post-sharethis-plugin a:hover {
	text-decoration: underline;
}
/* This is the Share-This DEFAULT class for the button generated */
/* I call it to reset it dafault padding as I am not usig the button with the Share-This icon on the left */
/* To kwon how I took off the Share-This icon see, in the 'plugins' folder, the file: 'ShareThis_Generated_Code.js' > '//Icon style:' note.
/* I detected this class using the FireFox web developer tools bar */
#post-sharethis-plugin a.stbutton {
	padding: 0px;
}
/* NOTE: If I were using in the js the 'default' style for the Share-This button, the Share-This icon would appear next to the Share-This link nested in this Share-This DEFAULT class: .stico_default {} */


/* POST: ESTILOS COMMENTS & RESPOND */

/* STYLES COMMENTS SECTION HEADER */

/* DIV #comments-section-header */
/* IMPORTANT: This DIV comes just below the DIV #navigation-before-comments and their settings are almost the same. This DIV has a Background img as wide as the DIV #content but this this DIV is inside a DIV under the CLASS .post that narrows the general wide of the #content 30px per side because of its padding setting. Refer to the style: #navigation-before-comments to understand how to set this DIV in order to gain back those 30px padding LEFT/RIGHT from the CLASS .post and get the Background img of this DIV displayed without cuts. */
#comments-section-header {
	position: relative;
	left: -30px;
	/* USO ANCHO de #content (534px, mismo que de Background img que contiene) */
	width: 534px;
	/* height: h3 line-height (21px) + img height x 2 (6px) + padding-bottom .comments-hr-line (25px) + 10px que dejo de margen bajo titulo h3 = 63px */
	height: 62px;
	/**/
	background-color: #FFFFFF;
	background-image: url(images/PPR_Comments_header_background_534x3.png);
	background-repeat: no-repeat;
	background-position: 0px bottom;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 0px;
}
#comments-section-header h3 {
	/* PADDING: Space inside the box */
	padding: 0px 30px;
	/* Para alinear el titulo correctamente con la el texto */
}
/* CLASS de HORIZONTAL LINE <hr /> tag */
.comments-hr-line {
	/* Height '0' because I don't want the <hr> itself, I just want to set it with a top border line */
	height: 0;
	/* This are the actual settings for the line I want to see. I'm using its border as the line anf nor the actual <hr> becuase I want it to be 'dotted' not 'solid' */
	border-top: 1px dotted #DDDDDD;
	/* But I must to specify that I don't want any border on the other sides */
	border-bottom: none;
	border-left: none;
	border-right: none;
	/* And finally, to get the correct visual effect, I have to match the background color of the <hr> elemet with the background where it's placed, otherwise I would see the different backround color between the dots of the line. I could use white, but better I'm  using 'transparent' instead */
	background-color: transparent;
	/* MARGIN: Space outside the box */
	/* margin-bottom para separ <hr /> de header <h3> */
	margin: 0px 0px 25px 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}

/* STYLES SECCION DONDE SE PUBLICAN LOS COMMENTS */

/* TITULOS: Cantidad de Comments & Leave a Reply */
#comments-section {
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 0px;
}
/* TITULOS: Cantidad de Comments & Leave a Reply */
#comments-section h3 {
	border-top: 1px dotted #CCCCCC;
	border-bottom: 1px dotted #CCCCCC;
	padding: 5px 0px;
}
/* <ol> Ordered List de COMMENTS. Reseteo <ol> padding-left de DIV #content */
#comments-section ol {
	/* PADDING: Space inside the box */
	padding: 0px 20px;
}
/* CLASS de <ol> Ordered List de COMMENTS */
.comment-list {
	/* MARGIN: Space outside the box */
	margin: 20px 0px;
}
/* <li> Listed Items de la <ol> de comments */
.comment-list li{
	padding: 5px 10px 5px 20px;
	position: relative;
}
/* Style FIRST comment (or ODD comments) */
.comment-list .comment-altenating-class {
	background: #FBF7EF;
	border-top: 1px dotted #BDBDA8;
	border-bottom: 1px dotted #BDBDA8;
	margin: 10px 0px;
	/*
	IMPORTANT:
	This class name "comment-altenating-class" is the value of a var in "comments.php".
	This var is used to swap the style of every other following comment (atarting by the first one).
	So the comments go between this style and "" style (unknown). That's why I can difference them between ODD and EVEN.
	But I can touch only this style, I have no access to the EVEN comments style becuase they have the "" style.
	*/
}
/* CLASS de AUTHOR'S ICON */
/* Avatar or Gravatar is an icon of a user in a shared online reality (forum, chat, website) */
/* Lo llamo con la funcion php "get_avatar();" pero para este Blog la anulo */
.comment-list .avatar {
	position: absolute;
	top: 5px;
	right: 5px;
	border: solid 1px #ededed;
	padding: 1px;
	background: #fff;
}
/* AUTOR del comment */
/* Nested en una HTML tag <strong>. Pero le agrego settings. Ver: 'ESTILOS de <strong>' */
.comment-list strong, .comment-list strong a, .comment-list strong a:visited {
	text-transform: capitalize;
	color: #CC6600;
}
/* METADATA del comment: Date, Time, Edit Link */
/* Esta nested en una HTML tag <small>. Pero le agrego settings. Ver: 'ESTILOS de <small>' */
.comment-list small {
	/* 'display: block;' Hace que la linea de texto se coloque abajo como si hubiese un </ br> sin haberlo */
	display: block;
	/* PADDING: Space inside the box */
	padding: 5px 0px;
}
/* METADATA del comment: Date, Time, Edit Link */
/* Esta nested en una HTML tag <small>. Pero le agrego settings. Ver: 'ESTILOS de <small>' */
.comment-list cite {
	color: #CC6600;
	/* 'display: block;' Hace que la linea de texto se coloque abajo como si hubiese un </ br> sin haberlo */
	display: block;
	/* MARGIN: Space outside the box */
	margin: 5px 0px 10px 0px;
}
/* COMMENTS MESSAGE: 'Closed comments', 'This post has no comments' & 'Password is needed to view...' (comments.php) */
.comments-message {
	color: #CC6600;
}
/* COMMENTS MESSAGE: 'Closed comments' use only when commets were already posted in the post */
.comments-message-centered {
	color: #CC6600;
	text-align: center;
}
/* CLASS de HORIZONTAL LINE <hr /> tag */
/* NOTE: Para esta DIV #comments-section reseteo SOLO los settings que necesito cambiar de la CLASS original. La CLASS original esta seteada para la DIV #comments-section-header en 'single.php'. La <hr /> que usa esta CLASS re-setteado esta dentro del file 'comments.php' y SOLO aparece cuando esta seteada la opcion: 'Users must be registered and logged in to comment' en el cp del blog. Pues esta <hr /> lo que hace es separar los comments que tiene el post del mensaje que aparecera -en lugar de la ventana para escribir un comment directamente- alertando que para escribir un comment se debe estar 'logged in'. */
#comments-section .comments-hr-line {
	border-top-color: #999999;
	/* PADDING: Space inside the box */
	margin-top: 5px;
}

/* STYLES SECCION DONDE INGRESO LOS COMMENTS */

/* FORM <form> INPUT COMMENTS */
.comment-form-class {
	/* PADDING: Space inside the box */
	padding: 25px 20px 15px 20px;
	/* MARGIN: Space outside the box */
	margin: 0px;
}
/* Reseteo valores de <p> para class .comment-form-class de <form> */
.comment-form-class p {
	/* PADDING: Space inside the box */
	padding: 0px 0px 10px 0px;
	/* MARGIN: Space outside the box */
	margin: 0px;
}
/* Apariencia de TITULOS <label> tag: Nombre, Mail, Website */
/* Estan nested en una HTML tag <label> dentro de la <form> */
/* Reseteo valores de <label> ver: "ESTILOS de <label> <input> <textarea>" */
/* NOTE: words 'Name' 'Mail' 'Website' are nested in a HTML tag <strong> */
/* NOTE: word 'required' is nested in a HTML tag <cite> that defines a citation. Default value: Oblique. */
.comment-form-class label{
	/* font-family: Usa la de <body> */
	font-size: 10px;
	color: #666666;
}
/* Apariencia de TEXT WINDOWS <input> tag (type=text) */
.comment-form-class input {
	width: 150px;
	/* Este width reescribe parameter 'size' de la tag <input> */ 
	/**/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	background: #F7F6F2;
	border: 1px solid #BDBDA8;
	/* PADDING: Space inside the box */
	padding: 3px;
	/* MARGIN: Space outside the box */
	margin: 3px 7px 0px 0px;
	/*
	Optional ROUNDED CORNERS for browsers that support it:
	*/
	-moz-border-radius: 4px; /* Mozilla FireFox */
	-khtml-border-radius: 4px; /* Apple */
	-webkit-border-radius: 4px; /* Apple */
	border-radius: 4px; /* CSS3 */
}
/* Apariencia de COMMENT TEXTAREA <textarea> tag */
.comment-form-class textarea {
	/* Ancho #content (534px) - .post padding IZQ-DER (60px) - #comment-form-class padding IZQ-DER (40px) - padding interno IZQ-DER (6px) - border (2px) = 426px */
	width: 426px !important;
	/* 
	PAREMETER OFF: Is no longer useful since I applied the '!important' PROPERTY. A rule that has the '!important' property will always be applied by force. So in this case, this is what 'cancels' the resizable textareas in Safari.
	IMPORTANT: Tambien determino el 'max-width' becuase in some browsers (i.e. Safari) you can resize them manually, so this way the window can only be resized in its 'height' but its 'width' stays fixed. BUT, the browsers count this 'max-width' in a different way as they count the 'width' parameter. For the 'width' most of them include the 'padding' and 'border' px (as I calculated the 'width' of the window above) but for the 'max-width', Safari for example does not count those px in the equation so, in this case, if using Safari you still can increase manually the wide of the window 8px (which is the 6px padding interno IZQ-DER + 2px border of the window) 
	max-width: 434px;
	*/
	height: 120px !important;
	/* Este 'width' & 'height' reescriben parameters 'cols' & 'rows' de la tag <textarea> */
	/**/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 15px;
	background: #F7F6F2;
	border: 1px solid #BDBDA8;
	/* PADDING: Space inside the box */
	padding: 3px;
	/* MARGIN: Space outside the box */
	margin: 3px 0px;
	/*
	Optional ROUNDED CORNERS for browsers that support it:
	*/
	-moz-border-radius: 4px; /* Mozilla FireFox */
	-khtml-border-radius: 4px; /* Apple */
	-webkit-border-radius: 4px; /* Apple */
	border-radius: 4px; /* CSS3 */
}
/* COMMENT TEXTAREA & INPUT: onfocus > cuando hago click en ellos */
/* NOTE: Con 'input[type="text"]' me refiero solo a los 'INPUT' elements de la <form> but with its parameter type="text", es decir, los que son INPUT TEXT WINDOWS (ver "coments.php"). But this way: [type=""] to select what knd of <input> I want to isolate is not affecting IE. That's way is better to use the input id */
 */
.comment-form-class textarea:focus, .comment-form-class input[type="text"]:focus {
	background: #FFFFFF;
}
/* Apariencia de SUBMIT BUTTON <submit> tag */
/* Para <submit> me dirijo a el por su id, pues ni no no puedo aplicarle 'background' or 'float'  */
.comment-form-class #comment-submit-button {
	/* Uso medidas of the button background image */
	width: 144px;
	height: 28px;
	/**/
	color: #FFFFFF;
	font-family: "Georgia", Times New Roman, Times, serif;
	font-size: 12px;
	line-height: 12px;
	background-color: #BDBDA8;
	background-image: url(images/PPR_Comments_submit_background_bottom_1x28.png);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	border: 1px solid #BDBDA8;
	/* float: right para que quede a la derecha */
	float: right;
	/* PADDING: Space inside the box */
	padding: 0px;
	/* MARGIN: Space outside the box */
	margin: 0px;
}
.comment-form-class #comment-submit-button:hover {
	background-image: url(images/PPR_Comments_submit_background_top_1x28.png);

}







/* CONTENT SPECIALS PAGES */

/* DOTTED HORIZONTAL LINE <hr /> tag */
.dotted-hr-line {
	/* Height '0' because I don't want the <hr> itself, I just want to set it with a top border line */
	height: 0;
	/* This are the actual settings for the line I want to see. I'm using its border as the line anf nor the actual <hr> becuase I want it to be 'dotted' not 'solid' */
	border-top: 1px dotted #BDBDA8;
	/* But I must to specify that I don't want any border on the other sides */
	border-bottom: none;
	border-left: none;
	border-right: none;
	/* And finally, to get the correct visual effect, I have to match the background color of the <hr> elemet with the background where it's placed, otherwise I would see the different backround color between the dots of the line. I could use white, but better I'm  using 'transparent' instead */
	background-color: transparent;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 15px 0px 30px 0px;
	padding: 0px;
}

/* PAGE: 'Contact' */
.page-contact-networks-background {
	background-color: #FFFFFF;
	text-align: center;
	border-top: 1px dotted #BDBDA8;
	border-bottom: 1px dotted #BDBDA8;
	/* PADDING: Space inside the box */
	padding: 10px;
}
.page-contact-networks-background a {
	text-decoration: none;
}


/* PAGE: 'Case Studies' */
/* NOTE: This DIV is EMPTY is only to be stylesed with the 'Case Studies' logos img at the background */
#page-case-studies-logos-banner {
	/* As this DIV is EMPTY I must indicate its dimensions. I use the background img ones */
	widows: 474px;
	height: 403px;
	/**/
	background-image: url(images/PPR_Case_Studies_logos_474x403.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}







/* ESTILOS SIDEBAR-LEFT (EMPTY) */

/* These DIVs go just before DIV #content inside the #content-and-sidebar inside 'index.php' or relatives templates */

/* IMPORTANT: This 3 DIVs only exist to match the design on the left hand side of the posts section with the look of the MAIN SIDEBAR on the right of the blog. As these DIVs have no content, but I want them to be displayed as tall as the MAIN SIDEBAR on the right, the height of these DIVs depends on a JavaScript function that will take the height parameter of the #sidebar DIV and give it to the DIV #sidebar-left-inner-div content inside the DIV #sidebar-left. That JavaScript code must go under the last element that the code is using as reference, so it is placed inside 'sidebar.php' just after the tag </div> that close the DIV #sidebar */

/* This DIV is EMPTY and just contains the DIVs that contains the BACKGROUND IMGS needed to match the design with the MAIN SIDEBAR on the right */
#sidebar-left {
	/* ANCHO TOTAL (800px) - #content (550px) = 250px */
	width: 8px;
	height:auto;
	/**/
	float: left;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}

/* This DIV is EMPTY and just contains the BACKGROUND IMG that 'shadows' the post section on the left hand side */
#sidebar-left-inner-div {
	/* ANCHO TOTAL (800px) - #content (550px) = 250px */
	width: 8px;
	height:auto;
	/**/
	background-color: #FFFFFF;
	background-image: url(images/PPR_Sidebar_Left_background_8x1_TRANSPARENT.png);
	background-repeat: repeat-y;
	background-position: 0px top;
	float: left;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}


/* This DIV is EMPTY and just contains the BACKGROUND IMG that 'close' the DIV #sidebar-left */
#sidebar-left-bottom-img-div {
	/* ANCHO TOTAL (800px) - #content (550px) = 250px */
	width: 8px;
	/* USO ALTO la Background img que contiene */
	height: 8px;
	/**/
	background-image: url(images/PPR_Sidebar_Left_bottom_8x8_TRANSPARENT.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	float: left;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}







/* ESTILOS SIDEBAR */

/* DIV #sidebar */

/* Settings generales de DIV SIDEBAR */
#sidebar {
	/* ANCHO TOTAL (800px) - #sidebar-left (8px) - #content (534px) = 258px */
	width: 258px;
	/**/
	background-color: #FFFFFF;
	background-image: url(images/PPR_Sidebar_Right_background_8x1_TRANSPARENT.png);
	background-repeat: repeat-y;
	background-position: 0px top;
	float: left;
	overflow: hidden;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 15px 0px 10px 0px;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH becuase some browsers will take that padding as extra pixel of the WIDTH of the DIV */	
}


/* SIDEBAR: Internal DIVs Settings */

/* NEW STYLE - NEW DIV: Settings de class de DIV que anida TODO dentro de DIV #sidebar */
/* Con esta DIV seteo solo los MARGINS que NO puedo hacer con PADDING en #sidebar becuase of "float: left;"  */
.sidebar-content {
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px 30px;
}

/* Titles: IMG <img> */
.sidebar-title-img {
	/* USO ANCHO #sidebar (258px) - padding .sidebar-content (60px) = 198px */
	width: 198px;
	/* USO ALTO la Background img que contiene */
	height: 28px;
	/**/
	clear: both;
}

/* OFF: I'm no using in the sidebar the Titles <h3> I am using Titles <img> instead */
/* Titles: TXT <h3> */
#sidebar h3 {
	/* TEMPORARY STYLES */
	font-family: "BrodyD", Dom Casual, Hudson;	
	font-size: 24px;
	font-weight: normal;
	/*
	ORIGINAL STYLES:
	line-height: 22px;
	font-size: 18px;
	font-style: oblique;
	*/
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 20px 0px 0px 0px;
}

/* Horizontal Line <hr> */
.sidebar-hr-line {
	/* Height '0' because I don't want the <hr> itself, I just want to set it with a top border line */
	height: 0;
	/* This are the actual settings for the line I want to see. I'm using its border as the line anf nor the actual <hr> becuase I want it to be 'dotted' not 'solid' */
	border-top: 1px dotted #666666;
	/* But I must to specify that I don't want any border on the other sides */
	border-bottom: none;
	border-left: none;
	border-right: none;
	/* And finally, to get the correct visual effect, I have to match the background color of the <hr> elemet with the background where it's placed, otherwise I would see the different backround color between the dots of the line. I could use white, but better I'm  using 'transparent' instead */
	background-color: transparent;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px 0px 30px 0px;
	padding: 0px;
}

/* CLASS DIV Description */
#sidebar-description {
	padding: 0px 0px 30px 0px;
}
/* DIV que contiene la WP Tagline a desplegar */
.sidebar-description-wp-tagline {
	font-size: 13px;
	line-height: 18px;
	color: #404040;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 15px 0px 0px 0px;
}

/* CLASS DIV Search */
#sidebar-search {
	padding: 0px 0px 30px 0px;
}

/* CLASS DIV Categories */
#sidebar-categories {
	padding: 0px 0px 40px 0px;
}

/* CLASS DIV Archives */
#sidebar-archives {
	/* NOTE: This margin-bottom will be added to the #sidebar padding-bottom */
	margin: 0px 0px 40px 0px;
	padding: 0px;
}

/* CLASS DIV Pages */
#sidebar-pages {
	/* NOTE: This margin-bottom will be added to the #sidebar padding-bottom */
	margin: 0px 0px 40px 0px;
	padding: 0px;
}

/* CLASS DIV Quotes */
#sidebar-quote {
	/* NOTE: This margin-bottom will be added to the #sidebar padding-bottom */
	margin: 0px 0px 40px 0px;
	padding: 0px;
}

/* CLASS TXT Quotes */
.sidebar-quote-text {
	font-size: 12px;
	line-height: 17px;
	color: #CC6600;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
}
/* CLASS TXT Author */
.sidebar-quote-author {
	font-size: 11px;
	line-height: 16px;
	font-style: oblique;
	text-align: left;
	color: #999999;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin-top: 15px;
}
/* CLASS TXT Author */
.sidebar-quote-author a {
	/* Keep the same colour than for the author */
	color: #999999;
}
.sidebar-quote-author a:hover {
	/* Change the rollover colour */
	color: #666666;
}



/* SIDEBAR: Estilos SEARCHBAR */

/* DIV que contiene SEARCH <form> */
#searchbar-area {
	/* USO ALTO del <submit> button de la <form> #search-submit-button */
	height: 21px;
	/* ANCHO #sidebar - padding LEFT/RIGHT .sidebar_content (60px) = 198px */
	width: 198px;
	/**/
	float:left;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 1px 0px;
	/* IMPORTANT: The padding px are ADDED to the DIV dimensions */
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */
}


/* SEARCHBAR: Form & Form Elements */

/* Genaral Settigs de FORM <form> tag */
#search-form {
	/* USO ALTO de DIV #searchbar-area que la contiene */
	height: 21px;
	/* USO ANCHO de DIV #searchbar-area que la contiene */
	width: 198px;
	/**/
	background-color: #FFFFFF;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 0px;
	/* IMPORTANT TRICK: I'm placing this img here as part of a little trick I'm using for the different states of the submit button of the <form>. Refer to the style below: #search-form #search-submit-button:active*/
	background-image: url(images/PPR_Search_button_on_33x21.png);
	background-repeat: no-repeat;
	background-position: right 0px;	
}

/* OFF: TITULO <label> tag  */
/* NOTE: At the end I have 'switched off' the <label> element in my <form>. I'm not using it  */
#search-form label {
	/* Text */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #666666;
	/* Element */
	float: left;
}

/* SEARCH WINDOW <input> tag */
/* NOTE: I'm pointing this element by its 'id=' but I could call it just by its tag, in this case it would be: '#search-form input[type="text"] {}'. Becuase is an <input> tag I have to indicate to which 'type' of <input> elements of the <form> I'm referring to. For example the submit button is an <input> element as well but 'type=submit' */
#search-form #search-input-window {
	/* As I want it just 20px high I have to consider the 2px 'border' that I will set to it becuase the 'border' px are added to its 'height' value parameter. So the 'height' is 20 - 2px = 18px (FOR SAFARI) // And 18px - 3px padding-top = 15px (FOR FIREFOX, OPERA) */
	/* IMPORTANT: The padding px are ADDED to the window dimensions */
	/* IMPORTANT: The border px are ADDED to the window dimensions */
	height: 15px;
	/* ANCHO #search-form (198px) - #search-submit-button (33px) - its own padding LEFT/RIGHT (10px) - and its own border (2px) = 153px - some 7 px I want to leave before the submit button == 146px  */
	width: 146px;
	/* Text */
	/* font-family: I'm using the browser default; */
	font-size: 10px;
	line-height: 10px;
	color: #000000;
	/* Element */
	/* NOTE: As I'm floating the submit button 'right' I MUST indicate this element to float 'left', otherwise in FireFox both elements will not stand on the same line (in Safari & Opera they will)  */
	float: left;
	border: 1px solid #999999;
	background-color: #F1F1F1;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 3px 5px 0px 5px;
	/* I use padding LEFT/RIGHT to separate the input text to the window inner edges */
}
/* SPECIAL MODIFICATIONS: For SAFARI ONLY */
/* NOTE: As Firefox and Safari read the above settings for #search-input-window in a different way (Safari automatically sets in the vertical middle the text inside the input-window so it doesn't need padding-top to do this, but Firefox doesn't di so it needs some padding-top pixels to center the text inside the window height) I use the pseudo-selector ":first-of-type" which is only read by Safari to set some settings ONLY FOR SAFARI. IMPORTANT: In order to this new parameters be used by Safari instead of the first parameters already set for #search-input-window, they must be placed after the ones I want overwrite. The second ones will take precedence over the first ones because it occurs later in the stylesheet. This is how the .css works. */
/* EXPLANATION: The ":first-of-type" pseudo-selector matches the first occurrence of any element of a particular type in the document. Since you only ever have one body element, "body" and "body:first-of-type" are equivalent. Safari is the only browser that recognizes it, the other browsers will skip it. So by this way I can set same orders only for Safari. Sourse: http://css-tricks.com/forums/viewtopic.php?f=2&t=196#p995 */
body:first-of-type #search-form #search-input-window {
	height: 18px !important;
	padding: 0px 5px !important;
	/* NOTE: A rule that has the '!important' property will always be applied by force. Doesn't matter if it is in second or first place */
}
#search-form #search-input-window:focus {
	background-color: #F9F9F9;
}

/* SUBMIT BUTTON <submit> tag */
/* NOTE: I'm pointing this element by its 'id=' but I could call it just by its tag, in this case it would be: '#search-form input[type="submit"] {}'. Becuase is an <input> tag I have to indicate to which 'type' of <input> elements of the <form> I'm referring to. For example the search window is an <input> element as well but 'type=text' */
#search-form #search-submit-button {
	/* USO MEDIDAS de Background img que contiene */
	width: 33px;
	height: 21px;
	/* Text */
	/* NOTE: El texto del boton esta en la img y no en su 'value=""' parameter de la tag <input> */
	/* Element */
	float: right;
	/* This is to get rid of a DEFAULT border value that the input[type="submit"] elements have */
	border: none;
	/* Background & Image */
	background-color: transparent;
	background-image: url(images/PPR_Search_button_off_33x21.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 0px;
}
/* SUBMIT BUTTON: ACTIVE STATE <submit> tag */
#search-form #search-submit-button:active {
	/* Reseto valores Background img */ 
	background-image: none;
/* IMPORTANT TRICK: For this button I'm using two images for its different states. But there is a trick! For its normal state I'm using 'PPR_Search_button_off_33x21.png' called above, but for its 'active' state I'm not calling any img, indeed I'm uncalling the 'normal' state img to see what is under this button because I have placed the second state img of this button as a static Backround img of #search-form (see above) instead of calling this img on the 'active' state of the button. I did this to avoid the 1 sec blink generated by delay that need the second img to be loaded when I click the button if calling it by its ':active' style */
}


/* SIDEBAR: MENU de Lista <ul> <li> tags for: PAGES & CATEGORIES */

/* NOTE: Los sub-niveles heredan los settings de los niveles superiores si es que no se resetean sus valores */

/* <ul> Unordered List: PARENTS LEVEL */
#sidebar ul {
	/* Este color es para el txt que no sea link: (cantidad) */
	color: #CC6600;
	font-size: 12px;
	/* Alto de linea para separar los items estre si */
	line-height: 30px;
	/* No DEFAULT bulleted style of the items on the menu */
	list-style: none;
	/* BORDERS */
	border-top: none;
	border-bottom: 1px solid #BCBCBC;
	/* MARGIN: Space outside the box */
	margin: 15px 0px 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}
/* <li> Listed Items: Settings de CADA item PARENT del menu */
#sidebar ul li{
	/* BORDERS */
	border-top: 1px dotted #BCBCBC;
	border-bottom: none;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 13px;
}
/* Settings LINKS */
/* Lo seteo aqui y los sub-levels lo heredan */
#sidebar ul li a, #sidebar ul li a:visited {
	color: #404040;
	text-decoration: none;
}
#sidebar ul li a:hover {
	color: #737373;
	text-decoration: underline;
}

/* SPECIALS MODIFICATIONS */

/* MENU PAGES: first level of SUB-PAGES only */
/* En el MENU de PAGES uso una IMG for list-style no asi en el menu de CATEGORIES */
/* NOTE: Me dirijo a el por el 'id' asignada a la tag <ul> que envuelve el menu */
/* NOTE: Solo reseteo los valores que deseo midificar de '#sidebar ul' que es la que otorga los genelar settings pata todos los <ul> en #sidebar */
#sidebar #menu-pages-internal-pages {
	/* No DEFAULT bulleted style of the items on the menu */
	list-style-position: inside;
	list-style-image: url(images/PPR_Sidebar_menu_pages_arrow_9x7.png);
	/* NOTE: If an img is used for list-style always is good to indicate a 'list-style-type' as secon option if the img is missing */
	list-style-type: circle;
}

/* MENU PAGES: FIRST LEVEL PAGE only */
/* En el MENU de PAGES el primer boton (el que indica la SECCION) corresponde a un segundo menu que SOLO lista ese boton */
/* NOTE: Me dirijo a el por el 'id' asignada a la tag <ul> que envuelve el menu */
/* NOTE: Solo reseteo los valores que deseo midificar de '#sidebar ul' que es la que otorga los genelar settings pata todos los <ul> en #sidebar */
/* NOTE: See below the WP styles styles for this '#menu-pages-first-level-only' menu as well */
#sidebar #menu-pages-first-level-only {
	text-transform: uppercase;
	text-decoration: none;
	/* MARGIN: Space outside the box */
	margin: 15px 0px -16px 0px;
}
#sidebar #menu-pages-first-level-only li {
	border-top: 1px solid #BCBCBC;
}
#sidebar #menu-pages-first-level-only li a {
	color: #CC6600;
}



/* <ul> Unordered List: CHILD LEVEL */
#sidebar ul ul {
	font-size: 10px;
	/* Alto de linea para separar los items estre si */
	line-height: 26px;
	/* Cambio el color de fondo */
	background: #F9F9F9;
	/* No DEFAULT bulleted style of the items on the menu */
	list-style-position: inside;
	list-style-image: url(images/PPR_Sidebar_menu_categories_dash_3x4.png);
	/* NOTE: If an img is used for list-style always is good to indicate a 'list-style-type' as secon option if the img is missing */
	list-style-type: decimal;
	/* BORDERS */
	border-top: none;
	border-bottom: none;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 0px;
}
/* <li> Listed Items: Settings de CADA item CHILD del menu */
#sidebar ul ul li{
	/* BORDERS */
	border-top: 1px dotted #E6E6E6;
	border-bottom: none;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 0px 0px;
	/* PADDING: Space inside the box */
	/* On the LEFT, I push 13px the texts away from the margins */
	padding: 0px 10px 0px 13px;
}


/* <ul> Unordered List: GRAND-CHILD LEVEL */
#sidebar ul ul ul {
	/* Cambio el color de fondo */
	background: #FFFFFF;
	/* No DEFAULT bulleted style of the items on the menu */
	list-style-position: inside;
	list-style-image: url(images/PPR_Sidebar_menu_categories_dash_3x4.png);
	/* NOTE: If an img is used for list-style always is good to indicate a 'list-style-type' as secon option if the img is missing */
	list-style-type: decimal;
	/* BORDERS */
	border-top: none;
	border-bottom: none;
	/* MARGIN: Space outside the box */
	/* As I want the 'white box' of this category aligned with the 'gray box' of the parent category I have to push its margins as many px the '#sidebar ul ul li' the padding LEFT/RIGHT has, but in the other direction */
	margin: 0px -10px 0px -13px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 0px;
}
/* <li> Listed Items: Settings de CADA item GRAND-CHILD del menu */
#sidebar ul ul ul li {
	/* BORDERS */
	border-top: 1px dotted #E6E6E6;
	border-bottom: none;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 0px 0px;
	/* PADDING: Space inside the box */
	/* On the LEFT, I push 13px the texts away from the margins, but I have to add the -13px margin, so the final padding LEFT is 26px */
	padding: 0px 10px 0px 26px;
}


/* SIDEBAR: WP CLASSES: Pages Menu & Categories Menu */

/* WordPress DEFAULT CALSSES NAMES para menus de PAGES */
/* Generados con "wp_list_pages()" */

/* http://codex.wordpress.org/Template_Tags/wp_list_pages#Markup_and_styling_of_page_items */

/* MENU PAGES var $menu */
/* En el muenu de PAGES corresponde los botones de de sub-pages de la SECCION en que me ecuentro */

/* Corresponde a los children de la current page */
#sidebar .page_item {
	font-weight: normal;
}
/* Corresponde a la current page */
#sidebar .current_page_item {
	font-weight: bold;
}
/* Corresponde al parent de la current page */
#sidebar .current_page_parent {
	font-weight: bold;
}
/* Corresponde any ancestor de la current page */
#sidebar .current_page_ancestor {
	font-weight: bold;
}

/* MENU PAGES var $menu_first_level_page_only */
/* En el muenu de PAGES corresponde AL boton level padre de la SECCION en que me ecuentro */

/* Corresponde a los children de la current page */
#sidebar #menu-pages-first-level-only .page_item {
	font-weight: normal;
}
/* Corresponde a la current page */
#sidebar #menu-pages-first-level-only .current_page_item {
	font-weight: normal;
}
/* Corresponde al parent de la current page */
#sidebar #menu-pages-first-level-only .current_page_parent {
	font-weight: normal;
}
/* Corresponde any ancestor de la current page */
#sidebar #menu-pages-first-level-only .current_page_ancestor {
	font-weight: normal;
}


/* WordPress DEFAULT CALSSES NAMES para menus de CATEGORIES */
/* Generados con "wp_list_categories()" */

/* http://codex.wordpress.org/Template_Tags/wp_list_categories#Markup_and_Styling_of_Category_Lists */

/* Corresponde a los children de la current category */
#sidebar .cat-item {
font-weight: normal;
}
/* Corresponde a la current category */
#sidebar .current-cat {
font-weight: bold;
}
/* Corresponde al parent de la current category */
#sidebar .current-cat-parent {
font-weight: normal;
}




/* SIDEBAR: MENU Drop Down <select> tag */

/* Settings Drop Down Menu <select> tag  */
#sidebar select {
	width: 148px;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 15px 0px 15px 0px;
	padding: 0px 0px 0px 6px;
}
/* Settings Options of the Drop Down Menu <option> tag  */
/* NOTE: This settings are only read by FireFox, not Safari or Opera  */
#sidebar select option {
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 0px 0px 0px 14px;
}


/* - NEW DIV - */
/* SIDEBAR: DIV #sidebar-bottom-img-div (EMPTY) */

/* IMPORTANT: This DIV goes just below of the DIV #sidebar inside 'sidebar.php' */
/* This DIV is EMPTY and just contains the BACKGROUND IMG that 'close' the DIV #sidebar */

#sidebar-bottom-img-div {
	/* IGUAL ANCHO QUE DIV #sidebar: ANCHO TOTAL (800px) - #sidebar-left (8px) - #content (534px) = 258px */
	width: 258px;
	/* USO ALTO la Background img que contiene */
	height: 12px;
	/**/
	float: right;
	background-image: url(images/PPR_Sidebar_Right_bottom_258x12_TRANSPARENT.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}






/* ESTILOS FOOTER */

/* - NEW DIV - */
/* FOOTER: DIV #footer-top-img-div (EMPTY) */

/* IMPORTANT: This DIV is ouside DIV #footer, just on top of it! inside 'footer.php' */
/* This DIV is EMPTY and just contains the BACKGROUND IMG that 'close' the post section and start the footer section */

#footer-top-img-div {
	/* IGUAL ANCHO QUE DIV #footer */
	/* Como luego indico "clear: both" (y nada se pondra a su alrededor) podria omitir este valor y su ancho sera el de la DIV #page */
	width: 800px;
	/* USO ALTO la Background img que contiene */
	/* DEBO INDICAR SU HEIGHT pues como es una EMPTY DIV sino no aparece */
	height: 61px;
	/**/
	background-image: url(images/PPR_Footer_background_800x61.png);
	background-repeat: no-repeat;
	background-position: 0px top;
	/**/
	clear: both;
	/*
	clear: sets the sides of an element where other floating elements are not allowed. Value: left, right, both, none.
	left: No floating elements allowed on the left side.
	right: No floating elements allowed on the right side.
	both: No floating elements allowed on either the left or the right side.
	none: DEFAULT. Allows floating elements on both sides.
	*/
	/* MARGIN: Space outside the box */
	margin: 0px;
	/* PADDING: Space inside the box */
	padding: 0px;
}


/* DIV #footer */

#footer {
	/* uso ANCHO TOTAL (800px) */
	/* Como luego indico "clear: both" (y nada se pondra a su alrededor) podria omitir este valor y su ancho sera el de la DIV #page */
	width: 800px;
	/**/
	background-color: #FFFFFF;
	clear: both;
	/*
	clear: sets the sides of an element where other floating elements are not allowed. Value: left, right, both, none.
	left: No floating elements allowed on the left side.
	right: No floating elements allowed on the right side.
	both: No floating elements allowed on either the left or the right side.
	none: DEFAULT. Allows floating elements on both sides.
	*/
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 15px;
	color: #999999;
	/* PADDING: Space inside the box */
	padding: 20px 0px 8px 0px;
}
/* Links en footer */
#footer a {
	color: #777777;
	list-style: none;
}
/* Heading 4 <h4> en footer */
#footer h3 {
	color: #777777;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-weight: normal;
	text-transform: capitalize;
	clear: both;
	/* PADDING: Space inside the box */
	padding: 0px 0px 20px 0px;
}


/* FOOTER: DIVs inside #footer */

/* LEFT SIDE: 542px */

/* DIV LEFT AREA: Left & Middle Column */
#footer-left-area {
	/* ANCHO TOTAL (800px) - #sidebar (258px) = 542px */
	width: 542px;
	/**/
	float: left;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */		
}

/* LEFT COLUMN */
.footer-left-column {
	width: 230px;
	/**/
	float: left;
	/* MARGIN: Space outside the box */
	/* Uso padding .post (30px) + width #sidebar-left (8px) = 38px */
	margin: 0px 0px 0px 38px;	
	/* PADDING: Space inside the box */
	padding: 5px 0px 10px 0px;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */		
}
small.recent-posts-date {
	font-size: 9px;
	line-height: 15px;
}

/* MIDDLE COLUMN */
.footer-middle-column {
	width: 230px;
	/**/
	float: left;
	/* MARGIN: Space outside the box */
	/* Uso padding .post (30px) on right and 14px on left, because: (30+230+14)+(38+230) = 542px the wide of DIV #footer-left-area */
	margin: 0px 30px 0px 14px;
	/* PADDING: Space inside the box */
	padding: 5px 0px 10px 0px;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */
}
/* <a> Links: I want the comments author names to be 'capitalize'  */
.footer-middle-column a {
	text-transform: capitalize;		
}

/* BOTTOM COLUMN */
.footer-bottom-column {
	/* ANCHO #footer-left-area (542px) - padding IZQ/DER (68px) = 474px */
	width: 474px;
	/**/
	border-top: 1px dotted #DDDDDD;
	clear: both;
	float: left;
	/* MARGIN: Space outside the box */
	/* Same margin left .footer-left-column (38px) and same margin right .footer-middle-column (30px) */
	margin: 0px 30px 0px 38px;
	/* PADDING: Space inside the box */
	padding: 20px 0px 15px 0px;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */
}
.footer-bottom-column a {
	padding: 0px 2px;
}
.footer-bottom-column a:hover {
	color: #FFFFFF !important;
	background-color: #999999;
	text-decoration: none;
}
.footer-bottom-column h3 {
	/* PADDING: Space inside the box */
	padding: 0px 0px 8px 0px !important;
	background-image: url(images/PPR_Footer_icon_tag_31x24.png);
	background-repeat: no-repeat;
	background-position: 45px 0px;
}

/* RIGHT SIDE: 258px */

/* DIV RIGHT AREA: Right Column */
#footer-right-area {
	/* USO ANCHO #sidebar (258px) - border-left (1px) = 257px */
	width: 257px;
	/**/
	border-left: 1px dotted #666666;
	float: left;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */		
}
/* RIGHT COLUMN */
.footer-right-column {
	/* USO ANCHO #footer-right-area (257px) - margin (30px) - padding (50px) = 177px */
	width: 177px;
	/**/
	/* MARGIN: Space outside the box */
	margin: 0px 30px 0px 0px;
	/* PADDING: Space inside the box */
	/* Uso padding TOP/BOTTOM para que el dotted border left sea mas alto que el alto del texto */
	padding: 5px 0px 5px 50px;
/* TIP: Never use LEFT/RIGHT PADDING for floating DIVs with a definitive WIDTH. Some browsers take that padding as extra px of the WIDTH of the DIV */	
}


/* FOOTER: Settings tags <ul> <li> inside #footer */
 
/* Apariencia Last posts: Listado General */
.recent-posts {
	/* No DEFAULT bulleted style of the items on the menu */
	list-style: none;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 0px;
}
/* Apariencia Last posts: Each item */
.recent-posts li{
	background-image: url(images/PPR_Footer_icon_post_20x23.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	/* PADDING: Space inside the box */
	padding: 0px 0px 16px 30px;
}
/* Apariencia Last posts: Each item LINK VISITED */
.recent-posts a:visited {
	text-decoration: line-through;
}
/* Apariencia Last Commnets: Listado General */
.recent-comments {
	/* No DEFAULT bulleted style of the items on the menu */
	list-style: none;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin: 0px;
	padding: 0px;
}
/* Apariencia Last Commnets: Each item */
.recent-comments li{
	background-image: url(images/PPR_Footer_icon_comment_20x23.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	/* PADDING: Space inside the box */
	/* I use a bit more padding bottom for the <li> items for the lasts comments than for the lasts posts, 'optical' adjustments! */
	padding: 0px 0px 18px 30px;
}
/* Apariencia Last Commnets: Each item LINK VISITED */
.recent-comments a:visited {
	text-decoration: line-through;
}


/* FOOTER: Networks */

.link-facebook {
	height: 17px;
	/**/
	font-size: 10px;
	line-height: 17px;
	display: block;
	background-image: url(images/PPR_Networks_facebook_16x16.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 22px;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 7px 0px;
}
.link-myspace {
	height: 17px;
	/**/
	font-size: 10px;
	line-height: 17px;
	display: block;
	background-image: url(images/PPR_Networks_myspace_16x16.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 22px;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 7px 0px;
}
.link-twitter {
	height: 17px;
	/**/
	font-size: 10px;
	line-height: 17px;
	display: block;
	background-image: url(images/PPR_Networks_twitter_16x16.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 22px;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 7px 0px;
}
.link-flickr {
	height: 17px;
	/**/
	font-size: 10px;
	line-height: 17px;
	display: block;
	background-image: url(images/PPR_Networks_flickr_16x16.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 22px;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 7px 0px;
}
.link-linkedin {
	height: 17px;
	/**/
	font-size: 10px;
	line-height: 17px;
	display: block;
	background-image: url(images/PPR_Networks_linkedin_16x16.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 22px;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 7px 0px;
}
.link-skype {
	height: 17px;
	/**/
	font-size: 10px;
	line-height: 17px;
	display: block;
	background-image: url(images/PPR_Networks_skype_16x16.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/* PADDING: Space inside the box */
	padding: 0px 0px 0px 22px;
	/* MARGIN: Space outside the box */
	margin: 0px 0px 7px 0px;
}


/* FOOTER: Tags */

.footer-tags {
	text-transform: capitalize;
}


/* Setting de <hr class="clear" /> que uso en el FOOTER */
hr.clear {
	visibility: hidden;
}






/* ESTILOS CREDITS */

/* Settings generales DIV #credits */
#credits {
	/* uso ANCHO TOTAL (800px) - margenes generales IZQ/DER (60px) = 740px */
	width: 750px;
	/**/
	font-size: 10px;
	line-height: 15px;
	color: #999999;
	/* MARGIN: Space outside the box */
	/* Uso "auto" en izq y der para que quede centrado para centrar en el ancho de la window */
	margin: 0px auto;
	padding-bottom: 25px;
}
#credits a {
	color: #666666;
}
#credits a:hover {
	text-decoration: underline;
}
/* Settings para class de credits RSS */
.credits-rss {
	background-image: url(images/PPR_Feed_icon_12x12.png);
	background-repeat: no-repeat;
	background-position: left center;
	/* MARGIN: Space outside the box */
	/* PADDING: Space inside the box */
	margin-left: 10px;
	padding: 0px 0px 2px 18px;
}
