@font-face {
  font-family: Koodak;
  src: local('Koodak'), local('B Koodak'), url('includes/koodak.ttf');
}

body {
 font-family:Koodak,sans-serif;
 font-weight:normal;
 font-size:medium;
 color:#008000;
 background:#ddeeff url('images/background.jpg') repeat-x fixed top;
 direction: rtl;
 text-align:right;
 margin:0;
 padding:0;
}

input, textarea, button {
 font-size:medium;
}
select {
 font-size:large;
}

iframe {
 max-width:100%;
}

table td {
 vertical-align:top;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}

#header {
 vertical-align:bottom;
 background:url('images/header_bg.png') no-repeat top left;
 width:100%;
 height:300px;
 min-height:250px !important;
 position:fixed;
 left:0px;
 top:0px;
 z-index:-2;
}

#logo {
 position:fixed;
 top:0px;
 right:0px;
 z-index:100;
}

#pageTitle {
 color:#1E90FF;
 width:280px;
 font-weight:normal;
 font-size:2em;
 text-align:center;
 position:fixed;
 top:70px;
 left:310px;
 z-index:10;
}

#mainContent {
 margin:110px 30px 120px 150px;
}

#mainContent ul.list {
 list-style:inside url('images/liststyle.png');
 font-size:18px;
 margin:0px 40px 10px 10px;
 padding:0px;
 list-style-position:outside;
}
#mainContent ul.list li {
 margin:10px 0px;
}
div.listContainer {
 float:right;
 min-width: 20em;
 margin:0px 0px 20px 30px;
 background:#fff;
 border-radius: 10px;
 box-shadow: gray 1px 1px 2px;
}
.masonry {
 width: 100%;
 column-count: 3;
 column-gap: 1em;
}
.masonry div.listContainer {
 display: inline-block;
 margin: 0 0 1em;
 width: 100%;
 float:none;
}
div.listContainer h2 {
 font-weight:normal;
 font-size:22px;
 margin:0px;
 padding:10px 10px 5px 0px;
 border-bottom:1px solid #dd0000;
}
div.listContainer h2 a {
 color:#DD0000;
}
div.listContainer li.last {
 border-top:1px solid #ddd;
 padding-top:5px;
 font-weight:bold;
}
div.listContainer .adhere {
 margin-bottom:10px;
}

#mainContent div.control {
 position:fixed;
 top:175px;
 left:210px;
 text-align:right;
 width:200px;
 font-size:14px;
}
#mainContent #rating {
 text-align:right;
 direction:ltr;
 float:left;
}

#mainContent div.listBookmarks {
  direction:rtl;
  text-align:right;
  top:175px;
}
#mainContent div.listBookmarks ul {
  margin:0px;
  padding:0px;
  list-style-position:inside;
  margin-right:10px;
}
#mainContent div.listBookmarks div.sortOrderMenu {
  margin:10px 10px 0px 0px;
  font-size:14px;
}

#mainContent div.mainText {
 font-size:20px;
 line-height:200%;
 color:#A00000;
 margin:0px 30px 0px 350px;
}
#mainContent div.mainText .wp-post-image {
 max-width: 100%;
 height: auto;
}
#mainContent div.mainText h3 {
 color:#DD0000;
 border-bottom: 1px solid #DD0000;
}
#mainContent .post div.mainText img {
 clear: both;
 float:left;
 margin:10px 10px 10px 0px;
}
#mainContent .post div.mainText img.wp-post-image {
 border-radius:10%;
}
#mainContent div.matalComments {
 line-height:150%;
 color:#c30;
 margin:20px 30px 0px 350px;
}
a.anchor {
  display: block;
  height: 100px;
}

#navigation, #poemNav, #audioPlayer {
 margin-top:1em;
 position:fixed;
 left:0px;
 bottom:0px;
 z-index:100;
 color:white;
}
#audioPlayer {
 left:170px;
 bottom:202px;
}
.audiolinks {
  direction:rtl;
}
#poemNav {
 left:170px;
 bottom:100px;
}
#navigation a {
 color:white;
}
div.navItem {
 text-align:center;
 font-size:14px;
 font-weight:bold;
 float:right;
 margin:10px;
}

#poemNav a {
 color:#0000ff;
}

#search {
 position:fixed;
 top:5px;
 left:0px;
 text-align:left;
 vertical-align:middle;
 z-index:100;
}
#query {
 float:left;
 height:25px;
 font-size:12px;
 font-weight:bold;
 padding:0px 10px;
 margin-top:2px;
 color:#00f;
 background-color:#ddeeff;
 border:none;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
#searchButton {
 float:left;
 border:none;
 background:none;
 cursor:pointer;
}

#add textarea, #add input{
 font-family:sans-serif;
}

#add input.submitButton, .ufbl-form-submit {
 padding:5px 30px;
}

#tree {
 background:url('images/tree.png') no-repeat bottom;
 /*background:url('http://atalmataltootooleh.com/wp-content/themes/matal/images/haji_firooz2.png') no-repeat bottom left;
 background:url('http://atalmataltootooleh.com/wp-content/uploads/68185737-196x300.png') no-repeat bottom left;
 background:url('http://atalmataltootooleh.com/wp-content/uploads/christmas_tree.png') no-repeat bottom left;*/
 width:100%;
 width:300px;
 min-width:250px !important;
 height:356px;
 min-height:356px !important;
 position:fixed;
 left:0px;
 bottom:40px;
 z-index:10;
}

#footer {
 vertical-align:bottom;
 background:url('images/footer_repeat.png') repeat-x top;
 width:100%;
 height:70px;
 min-height:70px !important;
 position:fixed;
 left:0px;
 bottom:0px;
}
#footnote {
 font-family:sans-serif;
 font-size:9px;
 font-weight:bold;
 direction:ltr;
 text-align:right;
 padding-right:10px;
 padding-top:60px;
 color:#ccc;
}
#footnote a {
 color:white;
}

/* IE hacks */
#header, #logo, #pageTitle {
 _position:absolute;
}
#navigation, #poemNav, #search {
 _position:absolute;
}
div.navItem {
 _float:left;
}
#navigation a {
 _color:#0000ff;
}
#tree, #footnote, #footer {
 _display:none;
}
#mainContent {
 _margin-bottom:10px;
}
#search {
 _top:30px;
}
#browserNote {
 display:none;
 _display:block;
 _position:absolute;
 _top:0px;
 _left:10px;
 _z-index:1000;
 _padding:0px 5px;
 _background-color:#ffffff;
 _border:2px dashed red;
}

.admin {
  text-align:left;
  position:fixed;
  top:40px;
  left:50px;
  direction:ltr;
}

/* WordPress */
#mainContent .post {margin-bottom:30px;}
#mainContent div.comments, #mainContent div#respond {
  margin:10px 30px 0px 350px;
  color:#c30;
  overflow-wrap: break-word;
}
#mainContent div.comments h3, #mainContent div#respond h3 {
  color:#c30;
}
#mainContent #comments {
  padding:1em;
  font-size:small;
}
#mainContent #comments h3 {
  text-decoration: underline;
}
#mainContent #comments input {
  font-size: small;
}
#mainContent #comments .comment-meta, #mainContent #comments .comment-reply-link {
  font-size: x-small;
}
#mainContent #comments .comment-reply-link {
  font-weight:bold;
}
#mainContent #comments .unapproved {
  color: #ff0000;
  display:block;
  margin-bottom: 0.5em;
  font-size:larger;
}
#mainContent #comments .unapproved:before {
  content: ">>> ";
}
#mainContent #comments .unapproved:after {
  content: " <<<";
}
input#email, input#url {direction: ltr}
div.comment-meta {font-size:12px;color:#666;margin-bottom:10px;}
span.comment-reply-link {font-size:14px;}
li.comment {
  margin-top:10px;
}
.slb_details {display:none !important}
.ufbl-error {
  color:#f00;
  font-size: smaller;
}
.ufbl-form-message {
  color:green;
}
.ufbl-error-message {
  color:#f00;
}
.ufbl-form-submit {
  margin:1em 0;
}

@media only screen and (max-width: 1024px) {
 .masonry {
  width: 100%;
  column-count: 2;
 }
}

/* Amazon */
.amazon-auto-links {
	border: 1px solid #2392c1;
	border-radius: 5px;
	padding: 0.5em;
  width: 70%;
  direction: ltr;
  text-align: left;
}
.amazon-auto-links::before {
	content: 'خرید از آمازون';
	display: block;
	color: #2392c1;
	padding-bottom: 0.5em;
  direction: rtl;
  text-align: right;
}
.amazon-products-container-list .amazon-auto-links-product-image {
	width: auto;
}
.amazon-products-container-list .amazon-product-thumbnail {
	padding: 0 15px;
}
.amazon-products-container-list .amazon-product-title {
	margin-top
	margin-bottom: 2px;
}
.amazon-products-container-list .amazon-product-title a {
	font-size: 18px;
}
.amazon-products-container-list .pricing-disclaimer {
	display: none;
}

/* Small screens */
@media only screen and (max-width: 700px) {
  #logo img {width:150px}
  #tree {display:none}
  div.navItem img {width:32px}
 #mainContent {margin:55px 20px 70px 40px}
 #mainContent div.mainText {margin:0.5em}
 #mainContent div.mainText img {float: none; max-width: 100%; height: auto; margin:0.5em}
  #mainContent div.control, #audioPlayer, #pageTitle {
    position:static;
    text-align: right;
    padding:0;
    margin: 1em 0.5em;
    left:10px;
    clear:both;
  }
  #poemNav {left:10px}
  #mainContent div.comments, #mainContent div#respond, #mainContent div.matalComments {margin-left:10px}
 .masonry {
  width: 100%;
  column-count: 1;
 }
}

/* Phones */
@media only screen and (max-width: 460px) {
 input, textarea, button, select {
  font-size:large;
 }
 table {
  max-width: 100%;
 }
 table td {
  vertical-align:top;
  display:block;
 }
 #header {
  background:url('images/mobile_header_bg.png') no-repeat top left;
  width:100%;
  height:200px;
  min-height:200px !important;
  /*position:absolute;*/
 }
 #mainContent {
  margin:60px 1em 0;
 }
 #mainContent div.control {
  text-align:left;
  direction:ltr;
  width:100%;
  clear:both;
  font-size:x-small;
 }
 #mainContent div.control a.a2a_dd {
  float:right;
 }
 div.listContainer {
  width:100%;
  margin:0px 0px 20px 50px;
 }
 #audioPlayer {
  margin-top:10px;
 }
 #mainContent div.matalComments {
  font-size:small;
 }
 #navigation, #poemNav {
  position:static;
  margin:1em auto;
  clear:both;
 }
 #navigation {
  margin-top:2em;
 }
 div.navItem {
  margin:0 4px;
 }
 div.navItem img {
  width:32px;
 }
 #contactForm, #contactForm table, #usp_form {
  width:100% !important;
 }
 #contactForm input,  #contactForm select, #contactForm textarea,
 #usp_form input,  #usp_form select, #usp_form textarea {
  width:90% !important;
 }
 #footer {
  clear:both;
  width:100%;
  height:50px;
  min-height:50px !important;
  position:static;
 }
 #footnote {
  padding-top:30px;
 }
 .androidPromo {
  margin: 5px 20px;
  padding: 15px 0;
  background: url(http://atalmataltootooleh.com/wp-content/themes/matal/images/android-logo.png);
  background-size: 50px;
  background-repeat: no-repeat;
  min-height: 20px;
 }
 .masonry {
  width: 100%;
  column-count: 1;
 }
}
