/*
 * Theme Name: JuanPerro.net
 */

 @import 'css/resets.css';
 
 
*, *::before, *::after {
    box-sizing: border-box;
}

body {
	margin: 0; 
	padding: 0;
	background-color: #fff;
	color: #333;	
	font-family: 'Playfair Display', serif;
	font-size: 100%;	
	line-height: 150%;	
}



/* Positioning */
.clear { clear: both; }
.alignleft { float: left; }
img.alignleft, iframe.alignleft, .wp-caption.alignleft { margin: 10px 15px 10px 0; }
.alignright { float: right; }
img.alignright, iframe.alignright, .wp-caption.alignright { margin: 10px 0px 10px 15px; }
.aligncenter, .center { margin: auto; text-align: center; }
span.aligncenter, img.aligncenter { display: block; }
.alignnone { float: none; display: block; }

/* Headings */
h1, h2, h3, h4, h5, h6, .title { margin: 0 0 15px; font-size: 24px; line-height: 32px; font-weight: 700; }
.title { display: block; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, a.title, .title a { text-decoration: none; }
p + .title, p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 { margin-top: 25px; }
.title.small { margin: 0; font-size: 14px; line-height: 18px; font-weight: 400; }

/* Hyperlinks */
a { color: #6FB7F7; }
a:hover { color: #0087FF; text-decoration: none; }
a img { border: none; }
a.more { display: block; }
a.edit { font-size: 34px; text-decoration: none; }
a.post-edit-link { text-decoration: none; }

/* Misc. */
p { margin: 0 0 15px; }
p + ul { margin-top: -10px; }
ul { padding: 0 0 0 17px; margin: 0 0 15px; list-style-type: square; }
u { text-decoration: none; padding-bottom: 1px; border-bottom: 1px dotted #4e4e4e; }
.b { font-weight: bold; }
.rc, .roundedcorners { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; -khtml-border-radius: 8px; }
.screen-reader-text { display: none; }
.block { display: block; }
.no { display: none; visibility: hidden; }
.anchor { position: relative; top: -80px; }
.price, .big { line-height: 36px; font-size: 24px; font-weight: bold; }
img, iframe, .wp-caption { max-width: 100%; height: auto; }
iframe { min-height: 450px; }
.wp-caption { font-size: 14px; line-height: 20px; }
hr { height: 8px; border: none; }


/* Tables */
.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }


/* Structure */
.wrap, #main, .innerwrap { width: 1160px; margin: 0 auto; }

header { background-color: #fff; text-align: center; }
header #logo img { margin: 10px auto 20px; }
header .flags { float: right; margin-top: 10px; }

header hr { margin: 0; }

header nav { display: block; position: relative; vertical-align: middle; text-align: center; background-color: #006FEF; color: #fff; }
header nav ul { list-style: none; padding: 0; margin: 0; }
header nav ul li { display: inline-block; position: relative; } 
header nav ul li a { display: block; white-space: nowrap; padding: 5px 15px; font-family: Arial, sans-serif; font-weight: 700; text-transform: uppercase; text-decoration: none; color: #fff; }
header nav ul li a:hover { color: #FFE900; }
header nav .sub-menu { display: none; }


#main { margin: 20px auto; }

#content { float: none; width: auto; }
.sidebar #content { float: left; width: 850px; }
#sidebar { float: right; width: 275px; }

article { margin: 0 0 25px; padding: 0 0 5px; border-bottom: 1px dotted #ccc; }
article hgroup { margin: 0 0 15px; }
article .meta { font-size: 14px; text-transform: uppercase; }
article .meta a { text-decoration: none; color: #8d4f5b; }
article .meta a:hover { color: #6FB7F7; }
article .meta .cat { margin-right: 20px; } 
article .postimg { display: block; float: right; width: 150px; height: 150px; margin: 0 0 10px 15px; }
article .postimg img { width: 100%; height: auto; }

.single article h1.title { font-size: 56px; line-height: 64px; font-weight: normal; }

.archive article { margin-bottom: 30px; padding: 40px 0; }
.archive article .title { font-weight: normal; }
.archive article .meta { text-align: right; margin-bottom: 5px; }
.archive article img.postimg { float: left; width: 30%; }
.archive article .content { float: right; width: 60%; padding-top: 20px; font-size: 14px; line-height: 20px; }


.tax-description { margin: 20px 0; }


/* Navigation */
.navi { margin: 20px 0; }
.navi .next { float: right; }
.navi .previous { float: left; }


/* Comments */
#comments { margin: 50px 0 30px; }
#comments textarea, #comments input { width: 100%; max-width: 100%; font: normal 14px/20px 'Playfair Display', serif; color: #333; border: 1px solid #f0f0f0; }
#comments input { padding: 5px 0; }
#comments input#submit { border: 1px solid #f0f0f0; }
#comments input#submit:hover { cursor: pointer; background-color: #6FB7F7; color: #fff; }
#comments input:hover, #comments input:focus, #comments textarea:hover, #comments textarea:focus { border-color: #6FB7F7; }
#comments ol { padding: 0 0 0 15px; }


/* Sidebar Box */
aside .box, aside .widget_text, aside .widget_nav_menu { margin: 0 auto 20px; padding: 3px 20px 10px; border: 1px solid #ddd; }
aside .widget_nav_menu a { color: #616161; text-decoration: none; font-style: oblique; }
aside .widget_nav_menu a:hover { color: #6FB7F7; }
aside .widget_nav_menu ul { list-style: none; padding-left: 0; line-height: 26px; }
aside .title, aside .widget_text .title { display: block; margin: 10px auto 15px; font-size: 16px; line-height: 20px; font-weight: bold; text-align: center; }
aside .title span, aside .widget_text .title span { margin: auto; padding: 0 10px; background-color: #fff; }


.error { padding: 20px; margin-bottom: 20px; border: 3px solid #6FB7F7; background-color: #E8F4FF; text-shadow: 1px 1px 0 #fff; }


footer { margin-top: 50px; color: #666; }
footer .innerwrap { padding: 20px 0; }


/* Responsive */
@media all and (max-width: 1280px) {
	#wrap { width: 97%; margin: 0 auto; }
	.wrap, #main, .innerwrap { width: 100%; }
	.sidebar #content { width: 73%; }
	aside#sidebar { width: 25%; }	
}