/**
Main stylesheet for Arti by www.SooperThemes.com
Author: Jurriaan Roelofs

TABLE OF CONTENTS:
0. Variables and Mixins
1. Typography
2. Layout styling
3. Drupal Elements

*/
/**
 * [ 0 ] VARIABLES AND MIXINS
 */
/**
 * [ 1 ] TYPOGRAPHY
 */
body {
  font: 13px/1.5em helvetica, arial, verdana, sans-serif;
  background: url("../images/grid-paper.png");
  color: #444;
}

.mast {
  background: #fff;
}

#page {
  margin-top: 20px;
  margin-bottom: 120px;
  padding-top: 1px;
  padding-bottom: 1px;
}

a:link,
a:visited {
  color: #54beff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, arial, verdana, sans-serif;
  font-weight: normal;
  line-height: 1em;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 20px;
}

h1.site-name {
  font-size: 370%;
}
h1.site-name a {
  text-decoration: none;
}

h1 {
  font-size: 218%;
}

h2 {
  font-size: 164%;
}

h3 {
  font-size: 145%;
}

h4, nav {
  font-size: 118%;
}

.voice2,
.comment .content {
  font-family: "Times New Roman", Times, Georgia, serif;
  font-style: italic;
  line-height: 1.3em;
}

/**
 * [ 2 ] LAYOUT STYLING
 */
a.logo {
  display: block;
  float: left;
}

h1.site-name {
  float: left;
}

.main:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .main {
  height: 1%;
}
*:first-child + html .main {
  min-height: 1%;
}

.main img {
  border: 2px solid #bebebe;
}

.grid-inner h2 {
  margin: 10px 0;
  line-height: 1em;
}

@media screen and (max-width:768px) {
  .grid-inner h2 {
    margin: 5px 0;
  }
}
@media screen and (max-width:320px) {
  .grid-inner h2 {
    margin: 3px 0;
  }
}
.region-content-top,
.region-content-bottom {
  background: #fff;
  clear: both;
}

.region-content-top {
  border-bottom: 1px solid #bebebe;
}

.region-content-bottom {
  border-top: 1px solid #bebebe;
}

/**
 * [ 3 ] DRUPAL ELEMENTS
 */
/**
 * Primary & Secondary navigation
 */
.masthead {
  clear: both;
  padding: 1px 0;
}
.masthead:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .masthead {
  height: 1%;
}
*:first-child + html .masthead {
  min-height: 1%;
}
.masthead .grid-inner {
  padding: 1px 0;
  float: left;
}
.masthead .grid-inner.secondary-menu {
  float: right;
}
.masthead .menu,
.masthead .links {
  text-align: left;
  float: left;
}
.masthead .menu li,
.masthead .links li {
  display: inline;
  margin-right: 0.5em;
}
.masthead .menu li a,
.masthead .links li a {
  text-decoration: none;
  color: #aaa;
}
.masthead .menu li a:hover, .masthead .menu li a:focus,
.masthead .links li a:hover,
.masthead .links li a:focus {
  color: #54beff;
}
.masthead .menu#secondary-menu,
.masthead .links#secondary-menu {
  text-align: right;
  float: right;
}

/**
 * Nodes
 */
.node .field-type-taxonomy-term-reference .field-item a {
  margin: 0 3px 5px 0;
  text-decoration: none;
  font-size: 80%;
  padding: 4px 15px;
  background: #f3f3f3;
  color: #aaa;
  display: inline;
  border-radius: 15px;
  line-height: 2em;
  float: left;
}
.node .field-type-taxonomy-term-reference .field-item a:hover {
  background-color: #eee;
}
.node .field-type-taxonomy-term-reference .field-item a.active {
  color: #f3f3f3;
  background: #444;
}
.node .author {
  margin: 0 3px 5px 0;
  text-decoration: none;
  font-size: 80%;
  padding: 4px 15px;
  background: #f3f3f3;
  color: #aaa;
  display: inline;
  border-radius: 15px;
  line-height: 2em;
  float: right;
}
.node .author:hover {
  background-color: #eee;
}
.node .author.active {
  color: #f3f3f3;
  background: #444;
}
.node footer .links {
  list-style: none;
  list-style-type: none;
  width: 100%;
  margin: 20px 0;
}
.node footer .links:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
* html .node footer .links {
  height: 1%;
}
*:first-child + html .node footer .links {
  min-height: 1%;
}
.node footer .links li {
  display: inline;
}
.node footer .links a {
  margin: 0 3px 5px 0;
  text-decoration: none;
  font-size: 80%;
  padding: 4px 15px;
  background: #f3f3f3;
  color: #aaa;
  display: inline;
  border-radius: 15px;
  line-height: 2em;
  font-size: 100%;
}
.node footer .links a:hover {
  background-color: #eee;
}
.node footer .links a.active {
  color: #f3f3f3;
  background: #444;
}
.node .field-label {
  clear: both;
}
.node .content {
  width: 100%;
}

/**
 * Comments
 */
.comment {
  font-size: 15px;
  border-top: 1px dotted #aaa;
  padding-top: 10px;
}
.comment h3 {
  font-size: 15px;
  color: #444;
}
.comment h3 a {
  color: #444;
  text-decoration: none;
}
.comment header {
  margin: 0 3px 5px 0;
  text-decoration: none;
  font-size: 80%;
  padding: 4px 15px;
  background: #f3f3f3;
  color: #aaa;
  display: inline;
  border-radius: 15px;
  line-height: 2em;
  float: left;
}
.comment header:hover {
  background-color: #eee;
}
.comment header.active {
  color: #f3f3f3;
  background: #444;
}
.comment footer {
  float: right;
}
.comment footer .links {
  list-style: none;
  list-style-type: none;
  display: inline;
}
.comment footer .links li {
  display: inline;
}
.comment footer .links li a {
  margin: 0 3px 5px 0;
  text-decoration: none;
  font-size: 80%;
  padding: 4px 15px;
  background: #f3f3f3;
  color: #aaa;
  display: inline;
  border-radius: 15px;
  line-height: 2em;
}
.comment footer .links li a:hover {
  background-color: #eee;
}
.comment footer .links li a.active {
  color: #f3f3f3;
  background: #444;
}
.comment .content {
  clear: both;
  margin-left: 0;
  margin-right: 0;
}