/* STYLE.CSS
 *	archivo de configuración de estilos para WritingParents.org
 * 	author: Sergio Liendo
 */ /*/// propiedades generales /////////////////////*/
html,body,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,input,fieldset,table,th,td
	{
	margin: 0;
	padding: 0;
}

body {
	color: black;
	background-color: white;
	font-family: verdana;
	font-size: 12px;
	min-height: 300px;
	height: auto !important;

}

#wrapper {
	margin: 0;
	padding: 0;
	border: 5px #f2fdee solid;
	float: left !important;
	background-color: white;
	min-height: 300px;
	height: 100% !important;

	overflow: hidden;
}

logofont {
	font-family: "Lucida Handwriting", Verdana, Sans;
}

big {
	font-size: 120%;
}

/* BG-LAYER   -   CONT-LAYER
 * -----------------------------
 * representan el DIV conteniendo una imagen de fondo 
 * y el DIV del contenido, respectivamente 		*/
.bg-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.bg-layer img {
	width: 100%;
	height: 100%;
}

.cont-layer {
	position: absolute;
	float: left;
	width: 100%;
	z-index: 1;
}

p {
	color: black;
	text-align: justify;
	letter-spacing: 1px;
	margin: 0 0 0;
	padding: 0 22px 15px;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/*/// HEADER /////////////////////////////////*/
#header {
	position: relative;
	width: 1000px;
	height: 142px;
	background-color: rgb(153, 205, 255); /* celeste */
}

#header_left {
	float: left;
	width: 200px;
	height: 100%;
}

#header_middle {
	float: left;
	width: 96px;
}

#header_people {
	float: left;
	width: 147px;
}

#header_logo {
	float: left;
	width: 315px;
	background-color: rgb(153, 205, 255); /* celeste */
	color: navy;
	font-family: "Lucida HandWriting";
	font-size: 28px;
	text-align: left;
	vertical-align: 140px;
	padding-top: 100px;
	overflow: visible;
}

#header_left img,#header_middle img,#header_people img,#header_logo img{
	width: 100%;
	height: 142px;
}

#header_login {
	position: relative;
	float: left;
	width: 232px;
	height: 128px;
	margin: 7px 10px 7px 0;
}

/*----- LOGIN ---------------------------------------------------*/
div#login {
	position: relative;
	color: white;
	width: 205px;
	height: 118px;
	padding: 5px 5px 5px 10px;
	font-size: x-small;
	text-align: right;
}

#login ul {
	list-style: none;
	line-height: 25px;
}

#login li {
	font-size: x-small;
	_margin-top:2px;
	_margin-bottom:2px;
}

html>body #login li a {
	width: auto;
}

#login .text-input {
	color: #666666;
	font-size: 12px;
	text-align: right;
	width: 110px;
	padding: 2px;
	border: none;
	margin-top: 2px;
	height: 15px;
	vertical-align: top;
}

#login #forgot-writer {
	float: left;
	position: relative;
	top: 4px;
	width: 160px;
	height: 40px;
}
#forgot-writer ul{
	line-height: 14px;
	text-align: left;
	margin: 0;
	padding: 0;
	padding-top: 6px;
	border: none;
}
#forgot-writer ul li{
	font-size: 9px;
}

div#submit_login{
	float: left;
	position: relative;
	height: 24px;
	width: 45px;
}
div#submit_logout{
	float: left;
	position: relative;
	top: 20px;
	left: 130px;
	height: 24px;
	width: 80px;
}
div#submit_login span{
	float: left;
	position: relative;
	text-align: left;
}

.submit{
	float: left;
	position: relative;
	line-height: 20px;
	height: 18px;
	vertical-align: middle;
	color: navy;
	background-color: white;
	font-weight: bolder;
	text-align: center;
	paddin: 0;
	border: 0;	
}
div#submit_login input{
	width: 41px;
	top: 2px;
	left: 2px;
}
div#submit_logout input{
	width: 71px;
	height: 21px;
	top: 1px;
	left: 3px;
}

#login #title {
	font-size: large;
	font-weight: bolder;
}

#login #label_name {
	text-align: right;
}

#login a {
	color: white;
	font-weight: bold;
}

#login #hello{
	float: left;
	position: relative;
	text-align: center;
	width: 150px;
	margin: 0 30px;
}
/*///// PAGES - CHAPTERS  ////////////////////*/
.tabs_numbers {
	float: left;
	position: relative;
	line-height: 26px;
	font-size: 90%;
	vertical-align: middle;
	text-align: center;
	color: navy;
}

.tabs_numbers .tab-title {
	font-size: 110%;
	font-weight: normal;
}

.tabs_numbers .tab-nav {
	font-weight: normal;
}

.tabs_numbers .tab-item-disable {
	color: gray;
}

.tabs_numbers .tab-item-this {
	font-weight: bold;
	font-size: 110%;
	color: navy;
}

.tabs_numbers#upper_only_tab {
	width: 389px;
	height: 100%;
}
.tabs_numbers#upper_tabs {
	width: 278px;
	height: 100%;
}

.tabs_numbers#lower_tabs {
	width: 35%;
	height: 100%;
}

.tabs_numbers#inner_tabs {
    width: 70%;
    height: 25px;
}

/*/// BARRA IZQUIERDA ///////////////////////*/
#leftbar {
	float: left;
	width: 180px;
	margin-bottom: 0;
	background-color: rgb(255, 185, 197); /* rosa */
	background-repeat: repeat-y;
	color: #ffc0cb;
	padding: 0 10px;
	padding-bottom: 30000px;
	margin-bottom: -30000px;
}

/*---- MENU ---------------------------------------------------*/
.menu {
	float: left;
	position: relative;
	width: 180px;
	margin: 0;
	margin-bottom: 10px;
}

.menu ul {
	width: 100%;
	list-style: none;
	line-height: 22px;
}

.menu li {
	position: relative;
	margin-top: 5px;
	vertical-align: middle;
	width: 180px;
	height: 23px;
	line-height: 23px;
	text-align: left;
}

.menu li a {
	display: block;
	width: 170px;
	padding-left: 10px;
	font-weight: bold;
	background: url("/wparents/gallery/img/box_white_23x180.gif") no-repeat;
}

.menu li a:hover, .menu li#current a{
	display: block;
	width: 100%;
	color: white;
	text-decoration: none;
	background: url("/wparents/gallery/img/box_blue_23x180.gif") no-repeat;
}

/*---- SEARCH  -----------------------------------------------*/
#search {
	float: left;
	position: relative;
	height: 30px;
	padding: 0;
}

#search #input_text {
	float: left;
	position: relative;
	width: 110px;
	height: 22px;
	margin: 4px;
	color: #888888;
	background-color: white;
	font-size: small;
	border: thick none;
}

#search #search_submit {
	float: left;
	position: relative;
	height: 22px;
	width: 51px;
	margin: 4px 0;
}

#search #submit_button {
	float: left;
	position: relative;
	color: navy;
	background-color: white;
	font-size: small;
	border: thick none;
	height: 20px;
	width: 45px;
	left: -2px;
}

/*----  MENSAJE ---------------------------------------------*/
.message_left {
	float: left;
	position: relative;
	width: 100%;
	height: 95px;
	margin: 20px 0;
	font-size: 120%;
	color: navy;
}

.message_left span {
	padding: 5px;
	display: block;
	font-size: 75%;
	font-weight: bold;
	text-align: justify;
}

/* cajas de leftbar */
.box_insert_left {
	float: left;
	position: relative;
	width: 100%;
	margin: 20px 0;
	font-size: 80%;
	color: navy;
}

.box_insert_left .cont-layer {
	margin: 0 5px;
	width: 95%;
}

.box_insert_left h1 {
	text-align: center;
	padding-top: 5px;
	font-size: 160%;
	font-weight: bold;
}

.box_insert_left ul {
	padding: 5px;
	list-style: none;
}

.box_insert_left li {
	width: 100%;
	display: inline-table;
	line-height: 20px;
	vertical-align: middle;
}

.box_insert_left li span,.box_insert_left li input {
	height: 18px;
	float: left;
}

/*----  TIPS ----------------------------------------------------*/
.box_insert_left#add_tip {
	position: relative;
	height: 180px;
	margin: 10px 0;
}

#add_tip #tip_title {
	width: 35px;
}

#add_tip #tip_title_input {
	width: 120px;
	margin-left: 5px;
	border: thick none;
	font-size: x-small;
	color: gray;
	text-align: right;
}

#add_tip #tip_chapter {
	width: 45px;
}

#add_tip #tip_chapter_input {
	/*margin-left: 30px;*/
	/*width: 85px;   <<<-- mantis 0003625*/
	width: 160px;
	border: thick none;
	font-size: x-small;
	color: gray;
	text-align: right;
}

#add_tip textarea {
	overflow: auto;
	border: thick none;
	width: 150px;
	height: 55px;
	font-size: small;
	color: gray;
	font-style: italic;
}

div#submit_tip {
	float: left;
	position: relative;
	width: 60px;
	height: 20px;
	left: 30%;
	text-align: center;
	margin-top: -5px;
}

input#submit_tip_button {
	color: navy;
	background-color: white;
	border: none;
}

/*------ UPLOAD PHOTO --------------------------------------*/
#upload_photo {
	height: 85px;
}

#upload_photo #photo_load {
	width: 90%;
	background-color: white;
	font-weight: bold;
}

#upload_photo #photo_submit {
	background-color: white;
	font-weight: bold;
}

div#submit_photo {
	float: left;
	position: relative;
	width: 60px;
	height: 20px;
	margin-top: 10px;
	left: 30%;
	text-align: center;
}

input#submit_photo_button {
	color: navy;
	background-color: white;
	border: none;
}

/*////  COLUMNA INTERMEDIA  //////////////////*/
#middle-column {
	float: left;
	width: 96px;
	height: auto;
	background-color: white;
}

#middle-column img {
	width: 100%;
	height: 300px;
}

/*/// CONTENT ///////////////////////////////*/
.page-content {
	float: left;
	position: relative;
	width: 704px;
	padding-bottom: 30000px;
	margin-bottom: -30000px;
}

.page-content#chapters {
	background-color: white;
}

#header_footer {
	width: 704px;
	height: 31px;
}

#shadow_people {
	float: left;
	position: relative;
	display: block;
	width: 147px;
	height: 31px;
	overflow: hidden;
}

#shadow_people img {
	float: left;
	position: relative;
	width: 100%;
	height: 60px;
}

#content_header {
	float: left;
	position: relative;
	width: 100%;
	height: 100px;
	color: navy;
	background-color: #cdd5ea;
}

#content_title {
	float: left;
	position: relative;
	width: 450px;
	padding-top: 60px;
	padding-left: 10px;
}

#content_title h4,#content_title h2 {
	float: left;
	line-height: 30px;
	vertical-align: bottom;
}

#content_title_right {
	float: left;
	position: relative;
	width: 244px;
	height: 100%;
}

.epygraph {
	float: left;
	display: block;
	position: relative;
	font-size: 70%;
	font-weight: bold;
	font-style: italic;
}

#photo_epygraph {
	width: 119px;
	padding-right: 3px;
	/* ancho total: 119 + 3 = 122px */
	height: 90%;
	padding-top: 60px;
	vertical-align: bottom;
	text-align: right;
}

#photo_most_voted {
	float: left;
	position: relative;
	width: 122px;
	height: 100%;
}

#photo_most_voted img {
	width: 109px;
	height: 112px;

	margin-bottom: 0;
	margin-right: 0;
}

#tip_most_voted {
	padding: 10px 2px 10px 10px;
}

#tip_most_voted #tip_text {
	display: block;
	font-size: 90%;
	font-weight: bold;
	font-style: italic;
	line-height: 120%;
}

#tip_most_voted #tip_author {
	display: block;
	font-size: 80%;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	line-height: 80%;
}

#tip_epygraph {
	margin-top: 10px;
	width: 224px;
	padding: 0 10px 2px 10px;
	text-align: center;
}

/*---  geleria de imagenes  -----------------------*/
.gallery {
	float: left;
	position: relative;
	background-color: #cdd5ea;
	width: 100%;
	min-height: 400px;
	height: auto !important;
	height: 400px;
}

#gallery_photos {
	padding: 5px 3px 10px 3px;
	width: 698px;
}

.pic_frame {
	position: relative;
	float: left;
	width: 94px;
	height: 89px;
	margin: 0 0 5px 6px;
}

.pic_frame#first {
	margin-left: 2px;
}

.thumb {
	position: relative;
	padding: 4px 3px;
	width: 90px;
	height: 83px;
}

.votation {
	position: absolute;
	z-index: 2;
	width: 40px;
	height: 22px;
	margin-top: 69px;
	margin-left: 52px;
}

.a_vote {
	background-color: white;
	position: relative;
	float: left;
	z-index: 2;
	height: 20px;
	border: none;	
	margin-left:-47px;
}

.a_votep {
	background-color: white;
	position: relative;
	float: left;
	z-index: 2;
	height: 20px;
	border: none;	
	
}


.a_vote a {
	z-index: 2;
	background-color: white;
}

.a_vote img {	
	z-index: 2;
	width: 15px;
	height: 18px;
}

/*---  geleria de tips   -----------------------*/
#gallery_tips {
	padding: 5px 15px 20px 15px;
	width: 674px;
	min-height: 400px;
	height: auto !important;
	height: 400px;
}

.tip_frame {
	float: left;
	position: relative;
	width: 327px;
	height: 90px;
	padding: 10px 0 0 10px;
	margin-top: 10px;
	color: navy;
}

.tip_frame#first {
	padding-left: 0;
}

.tip_frame .cont-layer {
	width: 317px;
	padding: 5px;
}

#tip-header {
	width: 100%;
	height: 20px;
}

#tip-header #title {
	float: left;
	width: 50%;
	height: 100%;
	font-size: 110%;
	font-weight: bold;
}

#tip-from {
	float: left;
	position: relative;
	width: 50%;
	height: 100%;
	font-size: 80%;
	font-style: italic;
	font-weight: normal;
	text-align: right;
	vertical-align: middle;
}

#tip-from span {
	font-style: normal;
	font-weight: bold;
	font-size: 80%;
}

#tip-body {
	width: 60%;
	height: 60px;
	padding-top: 5px;
	font-size: 90%;
	font-weight: normal;
	line-height: 11.5px;

}

.tip_votation {
	float: left;
	position: absolute; z-index : 2;
	width: 80px;
	height: 20px;
	margin-top: 30px;
	margin-left: 260px;
	z-index: 2;	
}

.tip_votation .a_vote img {
	z-index: 2;
	width: 15px;
	height: 17px;
	padding-left: 2px;
}

/*----  FOOTER  --------------------------------------
#footer {
	position: relative;
	float: left;
	height: 35px;
	width: 1000px;
	color: white;
}

#footer-left {
	float: left;
	width: 296px;
	height: 100%;
}

#footer-left img {
	width: 100%;
	height: 100%;
}

#footer-links {
	float: left;
	width: 704px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	vertical-align: middle;
	background-color: #99ccff;
}

#footer a {
	color: white;
	font-weight: bold;
}
*/

#footer {
float: left;
position: relative;
height: 35px;
width: 1000px;
color: white;
}

#footer-left {
float: left;
width: 296px;
height: 100%;
}

#footer-left img {
width: 100%;
height: 100%;
}

#footer-links {
float: left;
position: relative;
top: -18px;
width: 704px;
height: 35px;
line-height: 35px;
vertical-align: middle;
background-color: #99ccff;
}
#footer-links *{
text-align: center;
}

#footer a {
color: white;
font-weight: bold;
}

/*****  para la pagina de chapters *****/
#intro-chapters {
	float: left;
	width: 100%;
}

#intro-chapters p {
	margin-top: -2px;
	padding-left: 5px;
	font-size: 110%;
	letter-spacing: 0.002em;
	color: navy;
}

.chapter_box {
	float: left;
	position: relative;
	width: 100%;
	height: 45px;
	margin-bottom: 20px !important;
	padding: 0;
}

.chapter_box .text {
	float: left;
	width: 88%;
	position: relative;
	height: 100%;
	padding: 3px;
	padding-left: 10px;
	color: navy;
}

.chapter_box .text ul {
	list-style: none;
}

.chapter_box .text strong {
	font-weight: 900;
}

.thumb-chapters {
	float: left;
	width: 7%;
	height: 45px;
}

.thumb-chapters img {
	height: 45px;	
	/* el ancho se ajusta automaticamente */
}

/* pagina de alinea's */
.gallery#gallery_chap_index {
	min-height: 400px;
	height: auto !important;
	height: 400px;
	padding-bottom: 20px;
}

#chap_list {
	float: left;
	position: relative;
	width: 664px;
	height: 108px;
	padding: 10px;
	margin: 5px 0;
	color: navy;
}

#chap_list #text_zone {
	float: left;
	position: relative;
	width: 437px;
	height: 98px;
	padding: 0 0 10px 10px;
}

#chap_list #photo_zone {
	float: left;
	position: relative;
	width: 227px;
	height: 100%;
}

/*#index_title {
	font-size: 120%;
	width: 100%;
	height: 20px;
}*/

#index_title {
float: left;
font-size: 120%;
width: 30%;
height: 20px;
}


#index_columns {
	width: 100%;
	height: 85px;
	padding-top: 5px;
}

#index_columns ul {
	float: left;
	width: 130px;
	padding-right: 2px;
	list-style: none;
	line-height: 13px;
	font-size: 80%;
	font-weight: normal;
}

#photo_zone #photo_zone_ep {
	width: 106px;
	height: 58px;
	padding-top: 50px; padding-right : 5px;
	text-align: right;
	padding-right: 5px; text-align : right;
	font-size: 70%;
}

#photo_zone #photo {
	float: left;
	width: 106px;
	padding-right: 10px;
}

#photo_zone #photo img {
	width: 106px;
	max-height:auto;	
}

/*.alinea {
	float: left;
	position: relative;
	width: 664px;
	height: 160px;
	padding: 10px;
	margin: 5px 0;
	color: navy;
}

.alinea .cont-layer#first_child {
	width: 664px;
	height: 160px;
	padding: 10px;
}*/

.alinea {
    float: left;
    position: relative;
    width: 664px;
    height: 100px;
    padding: 10px;
    margin: 5px 0;
    color: navy;
}

.alinea .cont-layer#first_child {
    width: 664px;
    height: 100px;
    padding: 10px;
}

.alinea #text_zone {
	float: left;
	position: relative;
	width: 582px;
	height: 98px;
}

.alinea #options_zone {
	float: left;
	position: relative;
	width: 82px;
	height: 98px;
}

.alinea #options_zone ul {
	list-style: none;
	width: 100%;
}

#alinea_title {
	float: left; font-size : 80%;
	width: 55%;
	height: 20px;
	font-size: 80%;
}

#alinea_last {
	float: left;
	position: relative;
	width: 45%;
	right: 50px; font-size : 80%;
	height: 20px;
	text-align: right;
	font-size: 80%;
}

#alinea_body {
	float: left;
	position: relative;
	width: 90%;
	padding-top: 3px;
	font-size: 90%;
	font-weight: normal;
	line-height: 12px;
	text-align: justify;
}

#options_zone {
	float: left;
	position: relative;
	width: 100%;
	min-height: 60px;
}

.mini_button {
	float: left;
	position: relative;
	width: 100%;
	height: 10px;
	margin-top: 3px;
	color: white;
	font-size: 75%;
}

.mini_button .cont-layer {
	width: 90%; text-align : right;
	padding-right: 45px;
	line-height: 10px;
	vertical-align: middle;
	text-align: right;
}

span#chap_num_header {
	float: left;
	height: 35px;
	line-height: 35px;
	vertical-align: bottom;
	font-size: 120%;
}

span#chap_title_header {
	float: left;
	height: 35px;
	line-height: 35px;
	vertical-align: bottom;
	font-size: 16px;
	font-family: "Lucida Handwriting", verdana, sans;
}

.message_error
{
	background-color:#FFFFFF;
	color:#FFFFFF;
	height: 0px;
	font-size: 0px;
}

/* moodalbox CSS */

div#mb_overlay {
position: absolute;
left: 0;
width: 100%;
background-color: #ffffff;
cursor: pointer;
}

div#mb_center, div#mb_bottom {
position: absolute;
left: 50%;
overflow: hidden;
background-color: #DDD;
z-index:1;
}

div#mb_center {
background-color: #FFF;
}

div#mb_contents {
width: 400px;
height: 400px;
border: 10px solid #DDD;
overflow: auto;
background-color: #99ccff;
visibility: hidden;
}

.mb_loading {
background: #DDD url("/wparents/gallery/img/loading.gif") no-repeat center center;
}

#mb_error {
font-size: 1.2em;
color: #CD0000;
font-weight: bold;
text-align: center;
padding: 0.5em;
font-family: Verdana, Helvetica, sans-serif;
}

#mb_error em {
font-size: 0.8em;
}

div#mb_bottom {
font-family: Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #666;
line-height: 1.4em;
text-align: left;
border: 10px solid #DDD;
border-top-style: none;
}

a#mb_close_link {
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url("../../../gallery/img/closelabelf.gif") no-repeat center;
margin: 5px 0;
}

div#mb_caption {
margin-right: 71px;
}

div#paragraph-read-button
{
	background: url("../../../gallery/img/bgbuttons.jpg") no-repeat;
	color: white;
	font-size: 10px;
	text-align: center;
}

/*====================================================================================
	Added styles for Blog system
====================================================================================*/

DIV.componentheading
{
	visibility: hidden;
}

TABLE.blog
{
	width: 100%;
	color: #000099;
}	
	TABLE.blog TD SPAN.article_separator
	{
		width: 2px;
		font-size:1px;
		background-color: #000099;
	}
		
		TABLE.blog TD TD.contentheading
		{
			color: #000099;
			font-weight: bold;
			font-size: 1.2em;
		}
		
		TABLE.blog TD TD.createdate, TABLE.blog TD SPAN.small
		{
			color: #4882FF; /* #da87ca */
			font-size: 0.8em;
		}
		
		TABLE.blog TD.contentpaneopen TD, TABLE.blog TD.contentpaneopen TD P
		{
			font-size: 1em;
			color: #000099;
		}