/*
Theme Name: Magazi

Theme URI: http://tioreo.com/magazi/

Description: A smart and stylish magazine theme. Fading column design for blog/news section. Responsive, liquid layout for all kind of devices. Including post formats, custom header, widget areas in header, sidebar and footer, 2 menus, width 1366px. Prepared for Microformats.
Magazi WordPress theme, Copyright (C) 2015 Robert Toth
Magazi WordPress theme is licensed under the GPL.
Resource Graphics: screenshot.png, Copyright (C) 2015 Robert Toth. Licensed only as screenshot for Magazi Wordpress theme. Other forms of use must have permission from copyright holder. 
Resource Fonts: Lato, Copyright (c) 2010-2014, Łukasz Dziedzic (dziedzic@typoland.com), with Reserved Font Name Lato.
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is available with a FAQ at:
http://scripts.sil.org/OFL
Author: Robert Toth
Author URI: http://toth-illustration.com
Version: 1.7.5
Copyright: Robert Toth, http://tioreo.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Resource All graphic objects, example: screenshot.png
Tags: gray, white, right-sidebar, two-columns, fluid-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, sticky-post, threaded-comments
*/

/*-----Magazi, WORD PRESS STYLESHEET------*/

/*RESET*/

html,
body,
ol,
ul,
li{
	margin:0;
	padding:0;
	border:0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style:none;
}

/*CLEAR*/

.clear-all{
	clear: both;
}

/*CUSTOM FONTS*/

@font-face{
	font-family: "Lato";
	src: local('Lato-Regular'),
		url("fonts/Lato/Lato-Regular.ttf") format('truetype');
}

@font-face{
	font-family: "Lato";
	src: local('Lato-Italic'),
		url("fonts/Lato/Lato-Italic.ttf") format('truetype');
	 font-style: italic;
}

@font-face{
	font-family: "Lato";
	src: local('Lato-Bold'),
		url("fonts/Lato/Lato-Bold.ttf") format('truetype');
	font-weight: bold;
}

/*RESPONSIVE ELEMENTS*/

@media screen and (min-width: 1px) and (max-width: 600px){

	body{
	font-size: 13px;
	}

.single h1, .page h1, .blog h1, .archive h1, .search h1, .single .postmetadata, .single .postmetadata2, .page .postmetadata, .page .postmetadata2, .blog .postmetadata, .blog .postmetadata2, .archive .postmetadata, .archive .postmetadata2, .search .postmetadata, .search .postmetadata2{
	display:inline;
	font-size:170%;
	}

	#footer .widget{
		width:94%;
		padding:3%;
	}

	#content,
	#sidebar{
		width:100%;
	}
}

@media screen and (min-width: 601px){

	body{
	font-size: 16px;
	}

	#content{
		width: 70%;
	}

	.blog h1,
	.archive h1,
	.search h1,
	.blog .postmetadata,
	.blog .postmetadata2,
	.archive .postmetadata,
	.archive .postmetadata2,
	.search .postmetadata,
	.search .postmetadata2{
		display:inline;
		font-size:170%;
	}

	.single h1,
	.page h1,
	.single .postmetadata,
	.single .postmetadata2,
	.page .postmetadata,
	.page .postmetadata2{
		display:inline;
		font-size:300%;
	}

	#sidebar{
		width: 30%;
	}

	#sidebar .widget{
		margin: 0 20px;
	}

	#footer .widget{
		width: 21%;
		padding: 2%;
	}

	/*EXTRA FEATURE 2, The blockquote will be 50% of post size to the left

	.single blockquote,
	.page blockquote{
	width: 44% !important;
	margin: 1% 2% 1% 0 !important;
	float:left;
	}*/


	/*EXTRA FEATURE, The last posts on the blog page will be presented as columns*/

	.blog .post:nth-child(n+5),
	.archive .post:nth-child(n+6){
		width: 45% !important;
		margin: 1% 5% 1% 0 !important;
		float:left;
		height: 450px;
 		position: relative;
	}

	.blog .post:nth-child(n+5) h1,
	.archive .post:nth-child(n+6) h1{
		font-size:150%;
	}


	.blog .post:nth-child(n+5):after,
	.archive .post:nth-child(n+6):after{
  		position: absolute;
  		bottom: 0;  
  		height: 100%;
  		width: 100%;
  		content: "";
  		background: linear-gradient(to top,
     		rgba(255,255,255, 1) 10%, 
     		rgba(255,255,255, 0) 40%
  		);
  		pointer-events: none; /* so the text is still selectable */
	}

}

/* RESPONSIVE images & media */

#header img,
#footer img,
.widget img,
.comment img,
.post img{
	max-width: 100%; /* Fluid images for posts, comments, and widgets */
	height: auto;
}

img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */

}
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
	max-width: 100%;
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}

/* Make sure videos and embeds fit their containers */
embed,
iframe,
object,
video {
	max-width: 100%;
}
.entry-content .twitter-tweet-rendered {
	max-width: 100% !important; /* Override the Twitter embed fixed width */
	height: auto;
}

/*IMAGES*/

a img{
	border: 0;
}

img.alignleft,
img.aligncenter,
img.alignright {
	padding: 3px;
	border: none;
	margin-top: 10px;
}

.alignleft {
	display: inline;
	float: left;
	margin-right: 10px;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 10px;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 10px auto;
}

.wp-caption {
	text-align: center;
	max-width:700px;
	border-bottom:1px solid #DDD;
	margin-top:10px;
}

#content .wp-caption{
	max-width:95%;
}

.wp-caption-text {
	margin:0px;
	max-width:700px;
	margin:0px 0px 5px 0px;
	font-size:90%;
	font-style:italic;
}

.gallery-caption {
	font-size:90%;
	max-width:290px;
	margin:0px 0px 5px 0px;
	text-align: center;
	font-style:italic;
}

.gallery a img{
	border: 1px solid #E9E9E9 !important;
}

.gallery-item{
	float:left;
	margin-right:2px;
	padding:0;
}


/*BASIC*/

body{
	font-family: Lato, Helvetica, sans-serif;
	line-height:160%;
	color:#222;
	font-weight:normal;
}

#wrapper{
	max-width:1326px;
	margin: 0px auto 0px;
	padding-right: 20px;
	padding-left: 20px;
	background:#FFF;
}

#content{
	float:left;
}

#content-broad{
	float:left;
	width: 94%;
	padding: 1% 3%;
	min-height:300px;
}


#cat-description{
	border-bottom: 1px solid #DDD;
	margin:10px 0;
}

#cat-description h2{
	color:#AAA;
}


#header{
	display:block;
	width:100%;
}

#header-text{
	position:relative;
	display:block;
	text-align:left;
	z-index: 9999;
	padding:10px 0;
}


.site-title{
	font-size:160%;
	font-weight:bold;
	text-transform:uppercase;
	line-height:110%;
	color:#222;
	display:inline;
}

.site-description{
	font-size:150%;
	text-transform:uppercase;
	margin:5px 0px;
	color:#AAA;
	display:inline;

}
 
/*LINKS*/

a:link,
a:visited{
	color:#3299BB;
	text-decoration:none;
}

a:hover{
	color:#54BBDD;
	text-decoration:none;
}

/*HEADINGS*/
 
h1,
h2,
h3,
h4,
h5,
h6{
	font-weight:bold;
	line-height:110%;
	margin:0 0 10px 0;
	color:#222;
}


h1{
	font-size:190%;
}

h2{
	font-size:170%;
}

h3{
	font-size:150%;
}

h4{
	font-size:130%;
}

h5{
	font-size:120%;
}

h6{
	font-size:110%;
}


h1 a,
h1 a:hover,
h1 a:visited{
	color:#222;
	text-decoration:none;
}


/*NAVIGATION MENUS*/

.nav{
	width:100%;
	display:block;
	position:relative;
	padding:0px;
	text-transform:uppercase;
	font-size:90%;
}

#primmenu{
	float:right;
	background:#F3F3F3;
	border-top:1px solid #DDD;
}

#secmenu{
	float:left;
	background:#222;
}

#secmenu li{
	float:left;
	position:relative;
}

#primmenu li{
	float:right;
	position:relative;
}

.nav a{
	display:block;
	text-decoration:none;
    	padding:5px 10px;
}

#primmenu a{
	color:#999;

}

#primmenu a:hover{
	color:#3299BB;
}

#secmenu a{
	color:#FFF;
}

#secmenu a:hover{
	color:#3299BB;
}


.nav ul ul{
	display:none;
    	position:absolute;
    	top:100%;
    	float:left;
	text-align:left;
    	z-index:99999;
	background:#222;
}
 
.nav ul ul ul{
	top:0%;
	left:210px;
	left:0px;
}
 
.nav ul ul a{
	height:auto;
	padding:10px 15px;
	width:200px;
}
 
.nav li:hover > a,.nav ul ul:hover > a{
	/*background:#FFF;*/
}
 
.nav ul li:hover > ul{
    display:block;
}


/*POST*/

.post-title{
	padding:10px 0;
	display:block;
	clear: both;
	position:relative;
	border-bottom: 10px solid #EEE;
}

.post{
	margin:10px 0;
	overflow: hidden;
	border-bottom:1px solid #DDD;
}

.post-broad{
	width: 94%;
	padding: 3%;
	float: left;
	overflow: hidden;
}

.post-404 {
	width: 94%;
	padding: 3%;
	min-height: 400px;
	float: left;
	overflow: hidden;
}

.entry{
	clear:both;
}

.single .entry{
	border-bottom:1px solid #DDD;
}

.entry ul{
	padding:0px 0px 0px 15px;
}


.entry ul li{
	list-style-type: square;
	margin: 20px 0px 20px 20px;
}

.entry ul ul li{
	list-style-type: circle;
	margin-left:20px;
}

.entry ol li{
	list-style: decimal;
	margin-left:20px;
}


/*POSTMETADATA*/

.postmetadata{
	line-height:110%;
	color:#AAA;
}


.postmetadata2{
	line-height:110%;
	color:#CCC;
}

.postmetadata{
	font-weight:bold;
}

.postmetadata2{
	font-style:italic;
	font-weight:normal;
}

.postmetadata a, 
.postmetadata a:visited{
	color:#AAA;
	text-decoration: none; 
}

.postmetadata2 a,
.postmetadata2 a:visited{
	color:#CCC;
	text-decoration: none; 
}

 
.postmetadata a:hover,
.postmetadata2 a:hover{
	color:#3299BB;
	text-decoration: none; 
}

.sticky .entry{
	border-top:10px solid #cf132e;
}

blockquote{
	padding: 20px 10px;
	margin:10px 0 10px 0;
	font-size:120%;
        font-style:italic;
	background:#EEE;
	border-top:1px solid #DDD;
	border-bottom:1px solid #DDD;
}


blockquote:before{ 
	display: block; 
	float: left;
	margin:5px;
	font-size:400%;
	/*content: "\201D";*/
	content: "\201C";
} 

blockquote:after{ 
	display: block; 
	margin:5px;
	float: right; 
	content: "\201D";
	font-size:400%;
}


address{
	display: block;
	font-style:normal;
	margin:10px 10px 20px 0px;
	padding:10px;
    	background:#EEE;
	border-top:1px solid #DDD;
	border-bottom:1px solid #DDD;
}

pre{
	padding:10px; 
        letter-spacing:normal;
	color:#222;
  	overflow: auto;
    	background:#EEE;
	border-top:1px solid #DDD;
	border-bottom:1px solid #DDD;
 	white-space: pre-wrap;       /* css-3 */
 	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 	white-space: -pre-wrap;      /* Opera 4-6 */
 	white-space: -o-pre-wrap;    /* Opera 7 */
 	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.pagenumber{
	max-width:300px;
	clear:both;
	padding:5px 20px;
	margin-top: 10px;
}

.pagenumber a{
	padding:5px 10px;
	margin: 0px 5px;
	background:#F7F7F7;
}

.pagenumber a:hover{
	background:#FFF;
}

.navigation{
	width:100%;
    	clear:both;
	padding:10px 0 5px 0;
}

.navigation a,
.navigation a:visited{
	color:#222;
	font-weight:bold;
}

.navigation a:hover{
	color:#3299BB;
	
}

.edit{
	float:right;
	padding:5px 0;
	font-size:80%;
}

/*FORMATS*/


.format-aside .entry{
	border-top: 10px solid #f0c337;
}

.format-chat .entry{
	border-top: 10px solid #963d89;
}

.format-audio .entry{
	border-top: 10px solid #298171;
}

.format-video .entry{
	border-top: 10px solid #222;
}

.format-link .entry{
	border-top: 10px solid #3299BB;
}

.format-image .entry{
	border-top: 10px solid #EEE;
}

.format-quote .entry{
	border-top: 10px solid #d65130;
}

.format-gallery .entry{
	border-top: 10px solid #EEE;
}

.format-status .entry{
	border-top: 10px solid #a9d044;
}

/*SIDEBAR & BANNER*/

#banner{
	width:94%;
	padding:3%;
	display:block;
	text-align:center;
	clear:both;
}

#banner .widget{
	margin:0 auto 0;
	clear:both;
}

.widget h2{
	font-size:120%;
}

.widget a, 
.widget a:visited{
	color:#AAA;
}
 
.widget a:hover{
	color:#3299BB;
}

#sidebar{
	float:right;
	position:relative;
}

#sidebar .widget{
	padding: 10px 0;
	border-bottom:1px solid #DDD;
}

/*EXTRA FEATURE 3, Every second sidebar widget will be light grey

#sidebar .widget:nth-child(even){
	background:#F3F3F3;
}*/

fieldset {
	border:1px solid #DDD;
	padding:10px;
	margin:10px 0px;
}

legend {
	font-weight:bold;
}

/*BUTTONS & FORMS*/

input,
textarea{
	display:block;
	font-size: 100%;
	font-family: inherit;
	overflow: auto;
	margin: 10px 0px;
	padding:3px;
	border:none;
	background:#F3F3F3;
	border:1px solid #DDD;
}


select{
	font-size: 100%;
	border: none;
	overflow: auto;
	background:#F3F3F3;
	color:#222;
	padding: 3px;
	height: 30px;
}

#searchform input{
        font-size:100%;
	margin:0px 0px 10px 0px;
	padding:3px 5px;
	max-width:300px;
	color:#AAA;
}


#searchsubmit {
    display: none;
}

input[type="file"] {
	background:#FFF;
}

input[type="submit"],
input[type="reset"]{
        font-size: 100%;
	color:#FFF;
	background:#0077AA;
	margin: 10px 0px;
	padding: 5px 10px;
	border: none;
	font-weight: normal;
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px; 
  	border-radius: 3px;
}

input[type="submit"]:hover,
input[type="reset"]:hover{
	background:#3299BB;
}

input[type="submit"]:active,
input[type="reset"]:active{
	background:#43AACC;
}

/*TABLE*/

table{
	background:#FFF;
	text-align:left;
	margin:10px 0;
	border:none;
}

table th{
	font-weight:bold;
	padding:5px;
	border-bottom:1px solid #DDD;
}

table tr{

}

table td{
	font-weight:normal;
	padding:5px;
	border-bottom:1px solid #DDD;
}


/*LINE*/

hr{
	height:10px;
	background:#EEE;
	border:0;
	margin:5px;
}

/* SCREEN READERS*/

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color:#f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color:#21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*COMMENTS*/

#comments {
	clear:both;
}

ol.commentlist li{
	margin:0px;
	overflow:hidden;
}

ol.commentlist li.comment{ 
	clear:both;
	margin-top:40px;
}

ol.commentlist li.odd{ 
}

ol.commentlist li.even{ 
}

.commentlist li.bypostauthor{
}

ol.commentlist .pingback,
ol.commentlist .trackback {
	padding:10px;
}

ol.commentlist li.comment ul li{ 
	list-style:square;
	margin-left:20px;
}

ol.commentlist li.comment ol li{ 
	list-style:decimal;
	margin-left:20px;
}

/*FOOTER*/


#footer{
	max-width:1366px;
	margin: 0px auto 0px;
	padding:0px;
	display:block;
    	clear: both;
	background:#222;
	color:#999;
	font-size:90%;
}


#footer h2{
	color:#FFF;
}

#footer .widget{
	float:left;
}

#footer .widget ul{
	margin-left:0px;
}

#footer a:hover{
	color:#FF9900;
}

#credits{
	font-size:90%;
	clear: both;
	text-align:center;
	padding:5px 10px 5px 0px;
	color:#AAA;
	background:#333;
}

#credits a, 
#credits a:visited{
	color:#FFF;
}

#credits a:hover{
	color:#FF9900;
}