/*
Theme Name: SusanaTorneroNarradora
Theme URI: 
Author: Bouman Studios
Author URI: http://www.boumanstudios.com/
Author Design: Bouman Studios
Author Design URI: http://www.boumanstudios.com/
Description: Theme original para la web profesional de narradora de Susana Tornero.
Version: 1.0
*/

@import url(https://fonts.googleapis.com/css?family=Lora:400,700);
/* CSS Document */
HTML, BODY{ margin:0; padding:0; background:#CCC}
BODY{font-family: 'Lora', sans-serif; font-size:16px}
.fleft{float:left}
.fright{float:right}
.center{text-align:center}
hr{margin:20px auto; border-bottom:thin solid #000}

h1{ font-size:48px; font-weight:bold; margin:0;}
h2{ font-size:16px; color:#3c3c3c;  margin:0; font-weight:normal}
h3{ font-size:24px; color:#3c3c3c;  font-weight:normal}
	h3.blogtitle{ margin-bottom:0px}
h4{ font-size:14px; color:#000;  font-weight:normal; margin:9px auto 0px}
	h4 SPAN{ font-size:12px; color:#000;  font-weight:normal}
.fecha{ font-size:12px; color:#000;  font-weight:normal; margin-bottom:20px}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

/* Enlaces */
a, a:visited{ color:#C33; text-decoration:none;}
a:hover{ text-decoration:underline}

UL, LI {display:inline}
UL.menu a, UL.menu a:visited{padding:5px 14px; margin:0 7px; color:#3c3c3c; text-decoration:none; font-size:14px}
UL.menu a:hover{ font-weight:bold}

.widget LI{display:block;}
.widget-title{margin-bottom:-5px}

/* Estructura */
#web{ margin:0 auto; max-width:900px; padding:0 10px}
#lang{ text-align:right; font-size:12px; text-transform:uppercase; margin:10px 0 10px;}
#name{ text-align:center}
#menu{margin-bottom:10px;}
	#menu A, #menu A:hover{ color:#000; text-decoration:none}
.opciones{ text-align:center;}
.mmedios{margin-top:-30px;}
.ulmmedios{ }
#content{ margin-bottom:15px; line-height:24px; text-align:justify;}
	#contentpost{ max-width:60%; text-align:justify; float:left; margin-top:-20px }
	#imgpost{ float: left; margin-left:3%}
	.imgtoppost{ text-align:center}
	.contenttoppost{ max-width:100%; padding:0 5%; text-align:justify; }
#footer{ clear:both; text-align:right; font-size:12px; padding-bottom:15px}

#contentpost-8{ max-width:100%; text-align:justify; float:left; margin-top:-20px }
#contentpost-4{ max-width:80%; text-align:justify; margin-top:-20px;}

.contblog{ float:left; max-width: 65%;}
#sidebar{ float:left; margin-left:25px; max-width: 250px;padding: 8px;}

ul#widget {
    list-style-type:circle;
}

/* BLOG */
.blog{ margin-top:20px; padding-bottom:20px; border-bottom:thin solid #000}
.imgblog{ float:left;}
.postblog{ margin-left:25px; font-size:14px; color:#858585; line-height:18px; max-width:385px}
.navigation{font-size:15px; font-weight:bold; margin-top:25px}

/*navigation */
.pagenavi {
    margin: 0 0 20px 30px;
    padding: 5px 1px 5px;
    float:left;
    width: 98%;
}
.pagenavi a {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #666;
    background-color: inherit;
}
.pagenavi a:hover {
    border: 1px solid #444;
    color: #444;
    background-color: #eee;
}
.pagenavi span.pages {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    color: #825a2d;
    font-weight:bold;
    border: 1px solid #999;
    background-color: inherit;
}
.pagenavi span.current {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    font-weight:bold;
    border: 1px solid #666;
    color: #444;
    background-color: #eee;
}
.pagenavi span.expand {
    padding: 5px 6px 4px 6px;
    margin: 3px;
    border: 1px solid #ccc;
    color: #444;
    background-color: inherit;
}
.pagenavi .first, .pagenavi .last {
    border: 1px solid #aaa;
}
.pagenavi .single_page {
border: 1px dashed #ccc;
}

/* Slider */
.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; }
.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; }
.rslides li:first-child { position: relative; display: block; float: left; }
.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }

@media only screen and (max-width: 930px) {
	#content{margin:0 auto}
	#contentpost{ max-width:100%; padding:0 5%}
	#imgpost{ float: none; text-align:center}
	
	.opciones{float: left; text-align:center; width:100%}
	.mmedios{margin-top:-10px}
	.ulmmedios{ margin-top:0px}
	#name{ float:none;text-align:center}
	#menu{margin-bottom:0px; }
	.menu-principal-container UL, .menu-principal-container LI{ -webkit-padding-start: 0px; width:100%; padding:10px 0; background: #E6E6E6}
	.menu-principal-container LI:hover{background:#C33;}
	a.menu, a.menu:visited{ padding:0 0px 0; margin:0 0; color:#000; text-decoration:none; font-size:20px;}
	a.menu:hover{ border-bottom: none}
	UL.menu a {margin-bottom:50px}
	/* new */
	.blog{ margin:20px 5% 0}
	.imgblog{float:none;}
	.imgblog IMG{ width:100%}
	.postblog{ margin:0 auto; max-width:100%; font-size:16px; color:#858585; line-height:20px;}
	
	.contblog{float:none; max-width:85%}
	#sidebar{float:none; margin: 0 auto;}
	}
@media only screen and (max-width: 530px) {
	.menu-principal-container LI {display:block}
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}