/* 
Theme Name:   	Nombre del Template
Theme URI: 		Direccion del Template
Author: 			Nombre del Autor
	
/* Este codigo esta licenciado con una licencia Creative Commons - Atribución 3.0 Unported*/
/* http://creativecommons.org/licenses/by/3.0/deed.es_CL */


/* ------------------------------------------------------------------------------------------*/

/* NORMALIZAR
Con esta propiedad normalizamos los valores antes de comenzar
*/

* {margin:0; padding:0;}

/* ------------------------------------------------------------------------------------------*/

/*  FONDO o BACKGROUND
Aqui puedes cambiar la imagen o color de fondo de tu sitio, 
puedes usar cualquier imagen solo recuerda usar la direccion absoluta de ella como http://www.direccion.cl/...
si esta no esta alojada en bligoo
*/

body {
background:#FFF url(bg2.jpg) top repeat;
color:#BDAFA8;
text-align:center;
font:12px arial,helvetica,verdana,sans-serif;
}

/* ------------------------------------------------------------------------------------------*/

/* TABLA MAESTRA
Este es el espacio que contiene el sitio, 
puedes darle un ancho fijo o un ancho liquido en porcentaje
*/

#main {
	height: auto;
	text-align:left;
	padding-left:10px;
	padding-right:10px;
	margin:0 auto;
	border-collapse: collapse;
}

.main-body tr, td, table {
	vertical-align: top;
}

/* ------------------------------------------------------------------------------------------*/

/* ENLACES O LINKS
Estos definen el estilo de los links en todo el sitio
*/

a {
color:#FFFFFF;
}

a:hover {
	color:#BDAFA8;
	text-decoration: underline;
}

/* ------------------------------------------------------------------------------------------*/

/* HEADER o ENCABEZADO
Es la parte superior del blog, el texto que da titulo al blog esta entre parrafos
*/

#main-header-content {
	padding: 30px;
	vertical-align:top;
	position: relative;
	color: #fff;
	height: auto;
	margin:auto;
	background:url(footer.gif) top left repeat-x;
}

#main-header-content h1 a {
	font-size: 25px;
	color: #fff;
 filter:glow(color=#000000, strength=10);
height: 12;
}

#main-header-content h1 a:hover {
	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;
	bottom: 0;
}

#main-header-content ul li {
	text-align:center;
	display: inline;
	float: left;
	margin: 0 1px;
	width: auto;
	padding: 10px;
	background: #fff;
}

#main-header-content ul li a {
	height: 25px;
	color: #000;
	text-decoration: none;
}

#main-header-content ul li a:hover {
	color: #ff6600;
}

/* ------------------------------------------------------------------------------------------*/

/* ARTICULOS o POST
Esta parte edita el estilo de los articulos, cada articulo tiene una clase pero ademas un id unico, 
con eso puedes dar un estilo distinto a cada post en particular. 
*/

.main-body-content  {
	padding: 0;
	margin: 0;
	padding: 15px;
	width: 400px;
}

.main-body-content .content {
	text-align:left;
	width:400px;
	padding-left:10px;
	padding-right:10px;
	margin:0 auto;
	overflow: hidden;
}

.main-body-content .content-body img {
	border: none;
}

.main-body-content .content-body {
	text-align: justify;
	margin: 0 0 15px 0;
}

.main-body-content .content-wrapper  {
	margin: 0 0 15px 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;
}

/* ------------------------------------------------------------------------------------------*/

/* ACCIONES DE ARTICULOS
Cada elemento dentro del articulo tiene una clase ...
*/

/* Da estilo a "escrito por" y  fecha en que se publico el articulo */
.submition-info { 			
	font-size: 10px;
	margin-bottom: 15px; 
	color: #666;
}

/* Da estilo a los tags o etiquetas  de los articulo */
.taxonomy {					
	color: #666;
	font-size: 10px;
}

/* Da estilo a los links de editar, agregar a favoritos, comentar, etc de los articulo */
.links {
	padding: 0 0 10px 0;	
	color: #666;
	font-size: 10px;
}

/* Da estilo al link de agregar a favoritos */
.add-faves {					
	background: url(faves-icon.gif) no-repeat left;
	padding: 0 0 0 15px;
}

/* Da estilo al link de comentar */
.add-comment {				
	background: url(comment-icon.gif) no-repeat left;
	padding: 0 0 0 18px;
}

/* ------------------------------------------------------------------------------------------*/

/* LISTAS
Es sencillo darle un estilo a las listas, incluso puedes poner como bullet una imagen
*/

/* Da estilo a las listas */
ul li {
	list-style-position: inside;
	list-style-type: disc;
}

/* Da estilo a las listas de las columnas, este puede ser distinto a las listas del contenido */
.column ul li {
	color: #333;
	list-style-type: circle;
}

/* ------------------------------------------------------------------------------------------*/

/* TITULOS
Cuando hablamos de titulos nos referimos a los headings h1, h2, h3 que encabezan un articulo o un blidget
*/

h1 {
font-size:22px;
}

h2 {
font-size:16px;
font-weight:400;
color:#FFFFFF;
}

h3 {
font-size:16px;
font-weight:400;
color:#FFFFFF;
margin-bottom:5px;
}

h4 {
font-size:14px;
}

h5 {
font-size:10px;
color:#BDAFA8;
padding-left:1px;
font-weight:400;
margin-bottom:5px;
}

h5 a:link, h5 a:visited{
color:#BDAFA8;
}

h5 a:hover{
color:#BDAFA8;
}

/* ------------------------------------------------------------------------------------------*/

/* COLUMNAS
En Bligoo tienes hasta 4 columnas verticales para ubicar tus blidgets, 
(existe una 5ta que los esconde, por si quieres dejar blidgets ahi temporalmente sin sacarlos de tu sitio)

Existen tambien columnas horizontales, estas se encuentran bajo el header, sobre el footer
y entre cada post de tu sitio, puedes utilizarlas para poner Blidgets y lograr nuevas diagramaciones

Las columnas tienen la clase .column , pero ademas un id unico, 
asi que puedes cambiar el aspecto indistintamente a cada columna
*/

.column {
	vertical-align: top;
	color:#BDAFA8;
	line-height:1.3em;
	margin:10px 0 0 33px;
	padding:2px;
}

#column-0{}
#column-1{}
#column-2{}
#column-3{}
#column-4{}
#column-5{
width: 728px;}
#column-6{}
#column-7{}

/* ------------------------------------------------------------------------------------------*/

/* BLIDGETS
Los blidgets son las pequenas cajas que contienen informacion
y se pueden mover entre las columnas del sitio, 
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:
*/

.block {
	width: 210px;
	vertical-align: top;
	background:#000000;
	margin-bottom:10px;
	padding:10px;
	overflow: hidden;
}

.block h2 {
	color: #ff6000;
	font-size: 14px;
}

/* Deseas darle bordes redondeados  o darle mas estilo a tus Blidgets ??
Prueba utilizando las clases que se ubican arriba y abajo de cada uno de ellos
*/

#block-94431 {
width: 728px;
}

.block-top-right {}
.block-top-left {}
.block-bottom-right {}
.block-bottom-left {}

/* ------------------------------------------------------------------------------------------*/

/* 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: #000 1px solid;
	background: #363636;
}

.content .coment h2 a { 
	font-size: 15px;
}

.coment .links{
	border: 0;
	padding: 0;
}

/* Da estilo a los comentarios nuevos, puedes diferenciarlos por color, o lo que desees */
.comment-new{
	background: #464646;
}

/* Da estilo a las respuestas a comentarios, puedes diferenciarlos por color, o lo que desees */
.answers {
	background: #373737;
	}

/* ------------------------------------------------------------------------------------------*/

/* 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.
*/

.messages {
	background: #f7f5cc;
	border: 1px;
	border-color: #999;
	border-style: solid;
	font-weight: bold;
	color: #333333;	
	padding: 10px;
	width: 380px;
	margin: 0 0 15px 0;
}

.messages li{
	list-style-type: none;
	list-style-image: none;
	text-align: center;
}

#alerts {}
#errors{}
	
/* ------------------------------------------------------------------------------------------*/


/* IMAGENES DE USUARIOS
Es el avatar de qeu se despliega en diferentes instancias del post usado en los articulos 
*/

.user-picture {
	margin: 0 10px 10px 0;
	float: left;
	border: #666 3px solid;
}


/* Da estilo a los avatars de los usuarios del Blidgets de usuarios conectados */
.online-external-users img, 
.online-community-members img {
	border: #666 3px solid;
	margin: 0 3px 3px 0;
}

/* ------------------------------------------------------------------------------------------*/

/* GRUPOS DE ACCIONES
Son los grupos de acciones que se encuentran colapsados bajo los articulos o comentarios 
dentro del sitio
*/

.group {
	background: #292929;
	border: 1px #000 solid; 
	padding: 10px;
	margin: 10px 0;
}

.group td {
	font-size: 11px;
	color: #5d5d5d;
	padding-top: 20px;
	border-bottom: 1px #eee solid;
	border-top: 1px #eee solid;
}

.group h3, 
.group h3 a {
	font-size: 11px;
}

.group h3 a:hover{
	font-size: 11px;
}

#comment-user-info{} 
#comment-audit-info{} 
#comment-publishing-info{}
#audiencies {}


/* ------------------------------------------------------------------------------------------*/

/* PAGINADOR
El paginador es un conjunto de numeros que aparecen en la parte inferior del sitio, con estos 
numeros puedes navegar entre las paginas del sitio que se han escrito 
Es visible solo si tienes mas de una pagina escrita, por defecto Bligoo deja 10 articulos por pagina */

#paginador { 
	font-size: 10px;
	padding-top: 30px; 
	padding-bottom: 30px;
	margin: 10px auto; 
	text-align: center;
}

#paginador .pagina { 
	padding: 2px 0px; 
	background: #000; 
	text-decoration: none; 
}

#paginador a:hover {
	 color: #000;
	 text-decoration: none;
}

#paginador .flecha { 
	padding: 2px 2px; 
	border: solid 1px #eee;
}

#paginador .pagina-actual {
	padding: 2px 6px; 
	font-size: 10px; 
	vertical-align: top; 
	background: #eee; 
	color: #000;
}

/* ------------------------------------------------------------------------------------------*/

/* FOOTER o PIE DE PAGINA
Es el bloque que va al final del sitio
*/

#main-footer-content {
	color:#BDAFA8;
	font-size: 10px;
	height: auto;
	padding-top:10px;
	padding-bottom:60px;
	margin:auto;
	background:url(footer.gif) top left repeat-x;
}

/* ------------------------------------------------------------------------------------------*/

/* FORMULARIOS
En bligoo encontraras varios formularios, escribir un post, 
registrase en una comunidad, ingresar como usuario, etc. 
*/

.label{}
.key{}

.main-body-content form {
	width: 400px;
     clear: both;
}

.form {
        width: 400px;
}

.form-item {
        margin-bottom: 15px;
        width: 370px;
}

.form-item textarea {
        width: 400px;
}

.form-item .text-field {
        border: #999 1px solid;
        padding: 2px 0 2px 0;
}

.form-button {
	color: #000; 
	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: #000000;
	background: #a7a7a7;
  margin: 5px 0 0 0;
  padding: 10px 5px;
}

.block-content .form-item, .password-field {
	width: 200px;
}

.block-content form  {
	width: 200px;
}

/* ------------------------------------------------------------------------------------------*/

/* PERFILES 
Los perfiles que se despliegan dentro del sitio 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: 380px;
	margin: 0 0 20px 0;
	padding: 0;
}

.blogprofile-actions{}

/* ------------------------------------------------------------------------------------------*/

/* TABS Y LISTAS DE INFO
En Bligoo puedes desplegar directamente en tu sitio tus mensajes personales, tus articulos, borradores, etc.
Puedes configurar y dar estilo a los tabs y los listados de informacion que ordenan este contenido
*/

.tab-container { 
	margin: 10px 0 -1px 15px;
	padding: 0px;
}

#tabs{
	margin: 0;
}

#tabs td  {
	color:#fff;
	font-weight: bold;
	text-decoration:none;
	background:#999;
	border-top: 1px #ccc solid;
	border-right: 1px #666 solid;
	padding: 5px 5px 10px 5px;
}

#tabs a {
	color:#fff;
}

#tabs a:hover{
	color:#333;
}

#tabs .active-tab  {
	color:#fff !important;
	background:#575757 ;
	border-top: 1px #999 solid;
	border-right: 1px #333 solid;
}

#tabs .active-tab a {
	color:#fff;
}

.list-table{
	width: 380px;
	text-align: left;
	border-top: #999 1px solid;
	padding: 10px 0 0 0;
}

.list-table a{
	text-decoration:none;
}

.list-table .unread { 
	font-weight: bold;
}


/*Fin Bligoo Css*/



/* IMPORTANTE
Las clases e ID indicados en este archivo, son solo algunos de los que existen en los sitios de Bligoo
Casi la mayoria de los emelentos qeu se despliegan tienen clases o ID para poder editarlos y personalizarlos
Si deseas saber cuales son, para asi lograr dise0?9os mucho mas personalizados, te recomendamos
trabajar con Firefox y las extensiones FIREBUG o WEBDEVELOPER.
Visita tambien el sitio diseno.bligoo.com para mas informacion 
*/