/*
Theme Name: Shamatha
Author: Web Unity Design
Author URI: http://www.webunitydesign.com
Description: This is a clean and uncluttered theme inspired by peace. The name "Shamatha" refers to the Sanskrit word to mean peaceful abiding which was core to the design inspiration. May you find peace and tranquility in an everchanging world!
Version: 1.0.8
Tags: light, gray, white, one-column, right-sidebar, responsive-layout, custom-background, custom-menu, editor-style, featured-images, rtl-language-support, sticky-post, translation-ready
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shamatha

Shamatha WordPress theme, Copyright (C) 2014 Web Unity Design
Shamatha WordPress theme is licensed under the GPL.

RaleWay Light Font - http://www.fontsquirrel.com/fonts/Raleway
License: Distributed under the terms of the SIL Open Font License 1.1
Copyright: Matt McInerney, https://www.theleagueofmoveabletype.com/, Pablo Impallari, http://www.impallari.com/     

*/

@font-face
{
	font-family: zen;
	src: url(fonts/Raleway-Light.otf);
}

body {
	padding: 0;
	margin: 0;
	background: -moz-linear-gradient(top,  #F7F7F7 90%,  #DFDFDF 95%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(#F7F7F7,0.9),color-stop(#DFDFDF,0.95));
	background: -webkit-linear-gradient(top,  #F7F7F7 90%,  #DFDFDF 95%);
	background: -o-linear-gradient(top,  #F7F7F7 90%,  #DFDFDF 95%);
	font-family: zen;
	background-attachment: fixed;
	height: 100%;
	background-repeat: no-repeat;
}

table {
	border-collapse: collapse;
}

table th, table tbody, table td, table {
  border: 1px solid #222222;
}

pre {
	overflow: scroll;
}

#wrapper img, #wrapper iframe, #sidebar .widget select, embed {
	max-width: 100%;
	max-height: 100%;
	height: 100%;
}

#wrapper {
	width: 60%;
	margin: 0 auto;
	padding: 0 1%;
	color: #5C5A5C;
}

header {
	border-bottom: solid 0.1em #D4D2D4;
	display: inline-block;
	width: 100%;
}

#tagline {
	font-size: 1.2em;
	margin: 0;
}

header, footer {
	padding: 3% 0;
	margin: 2% 0;
}

footer {
	clear: both;
}

#main-nav {
	padding-top: 4%;
	width: 100%;
}

#main-nav ul {
	padding: 0;
	margin: 0;
}

#main-nav ul li {
	display: inline;
	margin: 0 5% 0 0;
	padding: 1%;
	position: relative;
	float: left;
}

#main-nav ul li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background-color: #DFDFDF;
	text-align: center;
	display: none;
}

#main-nav ul li:hover {
	background-color: #DFDFDF;
}

#main-nav ul li:hover > ul {
	display: block;
}

#main-nav ul li > ul li {
	display: block;
	margin: 2% 0;
	padding: 15% 0;
	width: 100%;
}

#main-nav ul li > ul li:hover {
	background-color: #DAD7D0;
}

#main-nav ul li > ul li > ul {
	position: absolute;
	left: 100%;
	top: 0;
	width: 96%;
}

h1 {
	color: #222222;
}

a {
	color: #5C5A5C;
	text-decoration: none;
}

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

#sidebar {
	width: 17%;
	float: right;
	margin: 0 1%;
	padding: 0 2%;
	border-left: solid 0.1em #D4D2D4;
	overflow: hidden;
}

.feed {
	width: 72%;
	float: left;
	margin: 0 1%;
	padding: 0 1%;
}

.post {
	margin: 0 0 4% 0;
	padding: 1% 2%;
	border-bottom: solid 0.1em #D4D2D4;
}

.postmeta-nav {
	overflow: hidden;
}

#postnav {
	border-bottom: solid 0.1em #D4D2D4;
	border-top: solid 0.1em #D4D2D4;
	overflow: hidden;
	margin: 2% 0;
}

#postnav p {
	overflow: hidden;
}

.post-featured {
	margin: 2% auto;
	width: 50%;
}

.page-featured {
	margin: 2% auto;
	width: 40%;
}

.post-featured img,
.page-featured img {
	width: 100%;
	height: 100%;
}

.read-more {
	color: #111;
}

#pagination {
	overflow: hidden;
}

#pagination p {
	padding: 2%;
	margin: 0;
}

.left {
	float: left;
}

.right {
	float: right;
}

#page {
	margin: 4% 0;
}

#commentbox {
  margin: 0 auto;
  padding: 2%;
}

#comments {
	padding: 2%;
}

#commentbox input,
#commentbox textarea {
	width: 96%;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.comment-list .comment {
	margin: 1% 0;
	padding: 1% 0;
	list-style: none;
}

/* =WordPress Core
-------------------------------------------------------------- */
.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;
}

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

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
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

.sticky {
	background-color: #D6D2D0;
}
.gallery-caption {}
.bypostauthor {}

@media screen and (max-width: 380px) {
	#wrapper {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	header {
		text-align: center;
	}

	#main-nav {
		width: 100%;
	}

	#main-nav ul {
		padding: 0;
		margin: 0;
	}

	#main-nav ul li {
		display: block;
		width: 100%;
		float: left;
	}

	#main-nav ul li.current-menu-item ul,
	#main-nav ul li.current-menu-item ul li ul,
	#main-nav ul li.current-menu-parent ul,
	#main-nav ul li.current-menu-parent ul li ul,
	#main-nav ul li.current-page-ancestor ul,
	#main-nav ul li.current-page-ancestor ul li ul {
		display: block;
		position: static;
		left: -100%;
	}

	#main-nav ul li.current-menu-item ul li,
	#main-nav ul li.current-menu-parent ul li,
	#main-nav ul li.current-menu-ancestor ul li {
		float: left;
		padding: 0;
	}

	#main-nav ul li.current-menu-item > ul li,
	#main-nav ul li.current-menu-parent > ul li,
	#main-nav ul li.current-page-ancestor > ul li
	 {
		margin: 2% 0 0 0;
		position: relative;
		padding: 1% 0;

	}

	#main-nav ul li.current-menu-item > ul li > ul li,
	#main-nav ul li.current-menu-parent > ul li > ul li,
	#main-nav ul li.current-menu-ancestor > ul li > ul li {
		margin: 2% 2% 0 2%;
	}

	.blog {
		width: 96%; 
	}

	#sidebar {
		display: none;
	}

	#commentbox,
	#comments,
	.feed {
		width: 96%;
	}
}

@media screen and (min-width: 381px) and (max-width: 480px) {
	#wrapper {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	header {
		text-align: center;
	}

	#main-nav {
		width: 100%;
	}

	#main-nav ul {
		padding: 0;
		margin: 0;
	}

	#main-nav ul li {
		display: block;
		width: 100%;
		float: left;
	}

	#main-nav ul li.current-menu-item ul,
	#main-nav ul li.current-menu-item ul li ul,
	#main-nav ul li.current-menu-parent ul,
	#main-nav ul li.current-menu-parent ul li ul,
	#main-nav ul li.current-page-ancestor ul,
	#main-nav ul li.current-page-ancestor ul li ul {
		display: block;
		position: static;
		left: -100%;
	}

	#main-nav ul li.current-menu-item ul li,
	#main-nav ul li.current-menu-parent ul li,
	#main-nav ul li.current-menu-ancestor ul li {
		float: left;
		padding: 0;
	}

	#main-nav ul li.current-menu-item > ul li,
	#main-nav ul li.current-menu-parent > ul li,
	#main-nav ul li.current-page-ancestor > ul li
	 {
		margin: 2% 0 0 0;
		position: relative;
		padding: 1% 0;

	}

	#main-nav ul li.current-menu-item > ul li > ul li,
	#main-nav ul li.current-menu-parent > ul li > ul li,
	#main-nav ul li.current-menu-ancestor > ul li > ul li {
		margin: 2% 2% 0 2%;
	}

	#sidebar {
		display: none;
	}

	.blog {
		width: 96%;
	}
	
	#commentbox,
	#comments,
	.feed {
		width: 96%;
	}
}

@media screen and (min-width: 481px) and (max-width: 640px) {
	#wrapper {
		width: 96%;
	}

	header {
		text-align: center;
	}

	#main-nav {
		width: 100%;
	}

	#main-nav ul li {
		margin: 0 3% 0 0;
	}
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
	#wrapper {
		width: 90%;
	}

	header {
		text-align: center;
	}

	#main-nav {
		width: 100%;
	}

	#main-nav ul li {
		margin: 0 3% 0 0;
	}
}