/* 
Theme Name: WOW BLIGOO
Theme URI: 
Author: Mario Miqueles

/* Este codigo esta licenciado con una licencia Creative Commons -  Atribucion - Licenciar Igual*/ 
/* http://creativecommons.org/licenses/by-nc-sa/2.5/us/ */

/*Para normalizar los valores antes de comenzar*/
* {
	margin:0;
	padding:0;
}
/*Fondo*/
/* aqui puedes cambiar la imagen o color de fondo de tu blog */
/* puedes usar cualquier imagen, recuerda usar la direccion absoluta de esa imagen como http://...
Si esta no estalojada en bligoo
*/
html { background: #c0130d url(background-html.jpg) repeat-x top left; }
body {
	color: #000;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	background:  url(background.jpg) no-repeat top center;
}
/*Tabla maestra*/
/*Este es el espacio que contiene el blog, puedes darle un ancho fijo o un ancho liquido en porcentaje*/

#main {
	height: auto;
	width: 1px;
	padding: 0;
	font-size:12px;
	text-align: left;
	margin: 0 auto -18px auto;
	background: none;
}
.main-body tr,
td,
table { vertical-align: top; }
/*Enlaces*/
/*Estos definen el estilo de los vinculos en toda la pagina*/

a {
	text-decoration: none;
	color: #c0130d;
}
a:hover {
	color: #c0130d;
	text-decoration: underline;
}
/*Encabezado*/
/*Encabezado o header es la parte superior del blog, el texto que da titulo al blog esta entre parrafos*/
#main-header-content {
	vertical-align:top;
	position: relative;
	color: #fff;
	height: 120px;
	background: none;
}
#main-header-content img { behavior: url("/media/bligoo/scripts/pngbehavior.htc"); }
#main-header-content a img { border: none; }
#main-header-content h1 { font-size: 20px; }
#main-header-content h1 a { color: #fff; }
#main-header-content h1:hover {
	color: #fff;
	text-decoration: underline;
}
/*Menu*/
/* Si quieres agregar un menu de navegacion en el encabezado 
de tu blog, solo agrega un listado (<ul><li>link del menu</li></ul>) en el 
html del encabezado, y las siguientes clases modificaran su estilo*/

#main-header-content ul {
	position:absolute;
	right:10px;
	top: 84px;
	font-size:11px;
}
#main-header-content ul li {
	text-align:center;
	display: inline;
	float: left;
	margin: 10px 0 0 2px;
	width: auto;
	padding: 7px 10px 10px 10px;
	background: #fff;
}
#main-header-content ul li a {
	padding:0;
	height: 25px;
	color: #000;
	text-decoration: none;
	font-size:12px;
}
#main-header-content ul li a:hover {
	color: #000;
	text-decoration: underline;
}
/*Articulos*/

/*Esta parte edita el estilo e los articulos, cada articulo tiene id con eso puedes dar un 
estilo distinto a uno en particular. Tambien puedes cambiar el color de fondo al espacio que agrupa a un articulo
para hacer cada articulo un bloque independiente.*/

.main-body-content {
	margin: 0;
	padding: 70px 0 30px 0;
	width: 10px;
	border: 5px #000 solid;
	background: #fff;
}
.main-body-content .content {
	width: 480px;
	margin:0;
	padding: 10px;
	overflow: hidden;
}
.main-body-content .content-body img {
	border: none;
	padding:4px;
}
.main-body-content .content-body {
	font-size: 12px;
	text-align: justify;
	margin: 0 0 15 0;
}
.main-body-content .content-wrapper h2 a,
.main-body-content .content h2 a {
	font-size: 20px;
	font-weight: bold;
}
.content-top-left,
.content-top-right { height: 0; }
.main-body-content .post,
.main-body-content .poll {
	background: #fff;
	margin-bottom: -15px;
}
.profile-block {
	background: #fff;
	width: 480px;
}
.profile-block a img { background: #000; }
.profile-block-content { padding: 10px; }
.profile-block .key {
	font-weight: bold;
	font-size: 15px;
	display: block;
	margin-top: 5px;
}
.main-body-content .block-content .post,
.main-body-content .content-wrapper .post,
.main-body-content .block-content .pol,
.main-body-content .content-wrapper .poll {
	background: none;
	border: 0;
	margin: 0;
}

.profile-block a,
.main-body-content .post a,
.main-body-content .poll a {
	text-decoration: none;
	color: #c0130d;
}
.profile-block a:hover,
.main-body-content .post a:hover,
.main-body-content .poll a:hover {
	text-decoration: underline;
	color: #c0130d;
}
.content-wrapper {
	background: #fff;
	margin-bottom: -15px;
}
.content-wrapper .user-picture img {
	margin: 0 10px 5px 0;
	float: left;
	border: #000 2px solid;
	padding: 0;
}
.content-wrapper .user-picture {
	margin: 0;
	float: left;
	border: none;
	padding: 0;
}
.content-wrapper .taxonomy { display: none; }
.content-wrapper .links {
	text-align: left;
	padding: 10px 0 10px 10px;
	text-align: right;
}
.content-wrapper .ratings {
	text-align: left;
	padding: 3px 5px;
	text-align: right;
	background: #eaeaea;
	border: 1px #d4d4d4 solid;
}
#content-wrapper-0 {
	background: #fff url(lavozde.jpg) no-repeat top left;
	padding-top: 30px;
	clear: both;
	margin-top: -45px;
 *width: 500px;
}
#content-wrapper-3 { margin-bottom: 5px; }
#content-wrapper-5 { margin-bottom: 5px; }
#block-70956,
#block-70956 .block-content,
#block-70956 .content {
	width: 260px;
	padding-right: 25px;
}
#column-16 { *width:490px;
}
/*
#column-16 .block {
padding: 5px;
float: left;
width:230px;
*width:220px;
margin: 5px;
color: #000;
}
*/

#column-16 h2 { color: #000; }
#column-16 a { text-decoration: underline; }
#column-16 {
	clear: both;
	margin: 0;
	padding: 40px 0 0 0;
}
/*Acciones del articulo*/

/*Cada elemento dentro del articulo tiene una clase*/
/*Este div agrupa los links Escrito por y la fecha en que se publico el articulo*/
.submition-info {
	font-size: 10px;
	margin-bottom: 15px;
	color: #666;
}
.taxonomy {
	color: #666;
	font-size: 10px;
	text-align: center;
}
.links {
	padding: 0 0 10px 0;
	color: #666;
	font-size: 10px;
	text-align: center;
}
.add-faves {
	background: url(faves-icon.gif) no-repeat left;
	padding: 0 0 0 15px;
}
.add-comment {
	background: url(comment-icon.gif) no-repeat left;
	padding: 0 0 0 18px;
}
/*Es sencillo darle un estilo a las listas, incluso puedes poner como bullet una imagen*/

/*Listas*/

ul li {
	list-style-position: inside;
	list-style-type: disc;
}
.column li {
	color: #999;
	font-size:11px;
	list-style-image: none;
}
/*Estilo de titulos
Cuando hablamos de titulos nos referimos a los headings h1, h2, h3 que encabezan un articulo o un blidget
*/

.main-body h1 { font-size: 15px; }
.main-body h3 { font-size: 12px; }
/*Columna*/
/*Con Bligoo tienes hasta 4 columnas para ubicar tus blidgets,
cada columna tiene un id unico, asi que puedes cambiar el aspecto
indistintamente a cada columna, pero si quieres modificarlas
todas juntas prueba con la clase column*/

.column {
	vertical-align: top;
	padding: 15px;
	width: auto;
}
.column a img { border: none; }
#column-0 { }
#column-1 { }
#column-2 {
	background: #000;
	border-left: #c0130d 3px solid;
	padding: 10px;
}
#column-2 .block { width:200px; }
.column .block-content {
	margin:0;
	padding: 0;
}
#column-2 .block h2 {
	text-transform: uppercase;
	color: #fff;
	padding: 0 0 5px 0;
	font-size: 13px;
}
#column-3 {
	background: #ffef44 url(column-2-back.jpg) repeat-y top left;
	width:140px;
}
#column-3 .block {
	width: 180px;
	padding: 0 0 5px 0;
	color:#000;
}
#column-3 ul li { color: #000; }
#column-3 h2 {
	font-size: 13px;
	font-weight: bold;
	color: #000;
	text-transform: uppercase;
}
#column-3 .last-poll { width: 180px; }
#column-3 .last-poll form {
	width: 180px;
	color: #000;
}
#column-3 .last-poll h3 { margin: 10px 0 10px 0; }
#column-3 h2 { padding: 0 0 5px 0; }
#column-3 .content { color: #000; }
#column-3 .submition-info,
#column-3 .user-picture,
#column-3 .taxonomy { display:none; }
#column-3 .content .horizontal-item-0,
#column-3 .content .horizontal-item-1,
#column-3 .content .horizontal-item-2,
#column-3 .content .horizontal-item-3,
#column-3 .content .horizontal-separator-1,
#column-3 .content .horizontal-separator-2,
#column-3 .content .horizontal-separator-3,
#column-3 .content .horizontal-separator-4 { display:none; }
#column-3 .links { text-align: left; }
#column-4 { }
#column-5 {
	background: #000 url(users-background.jpg) no-repeat;
	margin:15px 0 0 0;
	_margin:4px 0 0 4px;
	padding:0;
	height: 107px;
	width: 952px;
	overflow: visible;
	_overflow: hidden;
}
#column-5 .block {
	background: none;
	margin:0;
	padding:5px;
	width: 940px;
	border: none;
	overflow: hidden;
	height: 88px;
}
#column-5 .block h2 {
	color: #eac412;
	padding: 0 0 3px 0;
}
#column-5 .online-external-users { border:0; }
#column-5 .online-external-users img {
	background: url(avatar-back.gif) no-repeat;
	border: none;
	padding: 3px;
}
#column-5 .online-community-members img {
	background: url(avatar-back.gif) no-repeat;
	border: none;
	padding: 3px;
}
#column-5 .online-members-title { display: none; }
#column-6 {
	margin: 0;
	padding: 0;
	text-align: center;
	border: #000 5px solid;
	background: #fff;
}
#column-6 .block { border: none; }
/*Blidgets*/
/*Los blidgets son las pequenas cajas que contienen informacion
 y se pueden mover entre las columnas del blog, puedes editar 
todos los blidgets con la misma clase o si prefieres 
personalizar cada blidget con su propio estilo usando los id 
unicos del blidget, por ejemplo:
#2xxx{} donde xxx es el numero de id del blidget.
Dentro del blidget hay varias clases que definen el estilo del contenido que 
despliega ese blidget en espeacial, tambien hay 4 espacios para que puedas 
dejar los blidgets con bordes redondeados*/

/* Bloques */
.block {
	vertical-align: top;
	margin: 10px 0 10px 0;
	padding: 0 0 10px 0;
	color:#999;
	font-size:11px;
	border-bottom: #fff 1px solid;
}
.block h2 {
	color: #575757;
	font-size: 14px;
}
.block a { }
.block a:hover { }
/*Comentarios
Cada comentario es un bloque independiente con clase coment y dentro de ese div
hay varias clases con elementos interiores como la fecha en que se publico, la imagen de avatar, etc.
Ademas sobre el nombre del autor del comentario hay una clase distinta que identifica al autor del comentario
como miembro del blog, usuario de bligoo, autor del post y due/o del blog;
*/

.coment {
	margin: 0 0 -1px 0;
	padding: 10px;
	border: #ccc 1px solid;
	background: #F7F7F7;
}
.content .coment h2 a { font-size: 15px; }
/*Cuando se publica un comentario que no has leido, puedes diferenciarlo del resto*/

.comment-new { background: #f7f5cc; }
.coment .links {
	border: 0;
	padding: 0;
}
/*Respuesta a comentarios*/

.answers { }
/*Mensajes
Los mensajes se despliegan despues de publicar un articulo o un comentario, o cuando guardas un CSS.
Estos tienen una clase unica y un id por el tipo de mensaje, como #alerts.
Los mensajes se despliegan en listas.
*/

.messages {
	background: #000;
	border: 4px;
	border-color: #fff;
	border-style: solid;
	font-weight: bold;
	color: #fff;
	padding: 10px;
	width: 480px;
	margin: 0 0 15px 0;
}
.messages li {
	list-style-type: none;
	list-style-image: none;
	text-align: center;
}
/*Imagenes de usuarios*/

/*Avatar del autor del post usado en los articulos */

.user-picture {
	margin: 0 10px 10px 0;
	float: left;
	border: #000 2px solid;
}
.online-external-users img,
.online-community-members img {
	border: #000 2px solid;
	margin: 0 3px 3px 0;
}
#comment-user-info { }
#comment-audit-info { }
#comment-publishing-info { }
#audiencies { }
.group {
	background: #F7F7F7;
	border: 1px #eee solid;
	padding: 10px;
}
.group h3 a {
	font-size: 11px;
	font-weight: normal;
}
.group h3 a:hover {
	font-size: 11px;
	font-weight: normal;
}
/*Audiencias*/

#audiencies {
	background: #f6f6f6;
	border: 1px #eee solid;
	padding: 10px;
	margin-bottom: 15px;
	margin-top: 15px;
	font-size: 11px;
 color: #333333  line-height: 2.2em;
}
.group td {
	font-size: 11px;
	color: #333333;
	padding-top: 20px;
	border-bottom: 1px #eee solid;
	border-top: 1px #eee solid;
}
/* Paginador
El paginador es un conjunto de numeros que aparecen en la parte inferior del blog, con estos 
numeros puedes navegar entre las paginas del blog que se han escrito ,es visible solo si 
tienes mas de una pagina escrita en el blog, por defecto Bligoo deja 10 articulos por pagina */

#paginador {
	font-size: 10px;
	padding-top: 10px;
	padding-bottom: 15px;
	margin: 0 auto 0 auto;
	text-align: center;
	border-top:3px solid black;
	clear: both;
 *width:505px;
}
#paginador .pagina {
	padding: 6px;
	background: #000;
	text-decoration: none;
	color:#fff;
}
#paginador a:hover {
	color: #fff;
	text-decoration: none;
}
#paginador .flecha {
	padding: 6px;
	background: #ffee36;
}
#paginador .pagina-actual {
	padding: 6px;
	font-size: 10px;
	vertical-align: top;
	background: #000;
	color: #fff;
}
/*Pie de pagina
o Footer, es sencillo cambiar el aspecto, el siguiente id es el que se encarga del pie de pagina*/


#main-footer-content {
	color: #fff;
	background: none;
	font-size: 10px;
	padding: 15px 0 40px 0;
	height: auto;
	text-align: center;
}
#main-footer-content a {
	color: #000;
	text-decoration: underline;
}
/*Formularios
En bligoo encontraras varios formularios, escribir un post, 
registrase en una comunidad, ingresar como usuario al blog, etc. */
.label { }
.key { }
.main-body-content form {
	clear: both;
	background: #fff;
	width: 480px;
	padding: 10px;
}
.form { width: 470px; }
.form-item {
	margin-bottom: 15px;
	width: 460px;
}
.form-item textarea { width: 470px; }
.form-item .text-field {
	border: #999 1px solid;
	padding: 2px 0 2px 0;
}
.form-button {
	color: #fff;
	font-weight: normal;
	background: #575757;
	padding: 2px;
	margin: 10px 0 0 5px;
	border-top: 1px #999 solid;
	border-right: 1px #333 solid;
	border-bottom: 1px #575757 solid;
	border-left: 1px #575757 solid;
}
.form-item .description {
	font-size: 11px;
	font-style: italic;
	color: #fff;
	background: #a7a7a7;
	margin: 5px 0 0 0;
	padding: 10px 5px;
}
.block-content .form-item,
.password-field { width: 200px; }
.block-content form { width: 200px; }
/*estilos para aplicables solo a comunidades*/


/*Perfiles
Los perfiles que se despliegan dentro del blog estan compuestos por cajas
con id unicas que indican el tipo de informacion que contienen.
Recomendamos dar el mismo ancho del #main-body-content o .content-body a estos bloques para que no se desforme
esa pagina*/

.profile-block {
	width: 480px;
	margin: 0 0 20px 0;
	padding: 0;
}
.blogprofile-actions { }
.tab-container {
	margin: 10px 0 -2px 15px;
	padding: 0px;
}
#tabs { margin: 0; }
#tabs ul li { }
#tabs td {
	color:#000;
	font-weight: bold;
	text-decoration:none;
	background:#fff;
	padding: 5px 5px 10px 5px;
}
#tabs a { color:#000; }
#tabs a:hover { color:#333; }
#tabs .active-tab {
	color:#fff !important;
	background:#000;
}
#tabs .active-tab a { color:#fff; }
.list-table {
	width: 400px;
	text-align: left;
	padding: 10px 0 0 0;
}
.list-table a { text-decoration:none; }
.list-table .unread { font-weight: bold; }
.most-read-posts .block-content { width: 200px; }
.most-read-posts li {
	list-style-type: none;
	margin: 0 0 10px 0;
}
.most-read-posts li img { width: 200px; }
.last-comments li {
	list-style-type: none;
	margin: 0 0 30px 0;
	clear: both;
}
.last-comments a { *margin:0 0 0 -8px;
}
.last-comments li img {
	border: #c0130d 2px solid;
	float: left;
	margin: 0 10px 0 0;
}
#column-7 {
	padding:0;
	margin: -16px 0 45px 8px;
}
/*Fin Bligoo Css*/

/* begin styles for RSS Feed 

     This is the most basic style to use for a list with no bullets */

.rss-box {
	width: 450px;
	padding:0;
	text-align:center;
}
li.rss-item img { border: 10px solid #000; }
.rss-title,
rss-title a {
	margin: 0px 0;
	padding: 0;
}
.rss-items {
	margin:0;
	padding:0;
}
.rss-item {
	list-style-type:none;
	font-size: x-small;
	margin-bottom: 1em;
}
/*-----------------------------------------------------*/
#header-wow-logo { float:left; }
#header-wow-name-form {
	float:left;
	width:350px;
}
#header-wow-name-label {
	float:left;
	width:350px;
}
#header-wow-name-field {
	float:left;
	width:350px;
}
#header-wow-form-id { padding:10px; }
.header-form-button {
	background-color:black;
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	border:2px solid white;
	cursor:pointer;
}
#input-site-name { width:255px; }
#block-118172 img {
	padding:0;
	margin:0;
}
#column-16 #block-118172 {
	margin:0;
	padding:0;
	margin-left:-2px;
	border:0;
}
/* Ellos han leido tus articulos */
#column-16 #block-118112 { }
/* Lo ultimo escrito por tus contactos */
#column-16 #block-118110 {
	float:left;
	background:none;
	border:0;
	width:230px;
*width:210px;
}
#column-16 #block-118110 li {
	list-style-type:none;
	margin:10px 0;
}
#column-16 #block-118110 li .column-user-content-icon {
	float:left;
	padding:0px 10px 5px 0;
}
#column-16 #block-118110 li .column-user-content-icon img {
	width:48px;
	height:48px;
}
/* Wow te recomienda los siguientes articulos */
#column-16 #block-118111 {
	float:left;
	padding: 10px;
	margin: 10px 0 0 0;
	width:230px;
*width:210px;
}
#column-16 #block-118111 li {
	list-style-type:none;
	margin:10px 0;
}
#column-16 #block-118111 li .column-user-content-icon {
	float:left;
	padding:0px 10px 5px 0;
}
.community-most-popular-users .block-content img {
	border: 2px solid;
	margin:3px;
}
/* mini blog */
#wrapper-mini-public-response {
	background:#000 url(top-mini-blog.jpg) no-repeat top;
	height:380px;
	width:390px;
	*width:400px;
	padding:66px 5px 5px 5px
}
#wrapper-mini-public-response h2 {
	color:#ffffff;
	text-transform:uppercase;
	padding:5px 0 10px 0;
}
#wrapper-mini-public-response #block-69762 h2 { color:#EAC412; }
#wrapper-mini-public-response #block-69762 {
	width:369px;
	*width:380px;
	background: #000 url(users-back-mini.jpg) no-repeat;
	padding:5px;
	border:1px solid #666;
	height:98px;
}
#wrapper-mini-public-response #block-69762 .online-external-users img {
	background: url(avatar-back.gif) no-repeat;
	border: none !important;
	padding: 3px !important;
}
#wrapper-mini-public-response #block-69762 .online-community-members img {
	background: url(avatar-back.gif) no-repeat;
	border: none !important;
	padding: 3px !important;
}
#wrapper-mini-public-response #block-128883 {
	width:170px;
	*width:190px;
	float:left;
	border-bottom:0;
	border-left: 1px solid #666;
	border-bottom:1px solid #666;
	margin:-10px 0 0 0;
	padding:5px 10px;
	height:230px;
}
#wrapper-mini-public-response #block-128883 li{
*padding:0 !important;
*margin:0 !important;
}
#wrapper-mini-public-response #block-129270 {
	width:170px;
	*width:190px;
	float:left;
	border-bottom:1px solid #666;
	border-right: 1px solid #666;
	margin:-10px 0 0 0;
	padding:5px 10px 5px 9px;
	height:230px;
}
#wrapper-mini-public-response #block-129270 li {
	list-style-type:circle;
	margin:5px 0;
	padding:0 0 5px 0;
}
/* fin mini blog */

#block-117088 {
padding: 20px 0 0 10px;
z-index: 100;
position: relative;
overflow: visible !important;
}

#block-117088 .block-content {
padding: 20px 0 0 10px;
}

#wrapper-content {
padding: 50px 0 0 0;
}
.main-body-content-wrapper {
padding: 20px 0 0 0;
}