/* designed and coded for redcrown.net by larissa
released under CC BY-NC-SA 4.0 -- http://creativecommons.org/licenses/by-nc-sa/4.0/ */

:root {
/* text colors*/
--color-content:#2e222f;
--color-h1:#249da2;
--shadow-h1:#a9d6e9;
--color-h2:#249da2;
--shadow-h2:#a9d6e9;
--bold:#be4709;
--italic:#9db253;
--span:#be4709;
--link:#50B0BA;
--link-hover:#a75988;

/* images */
--img-border:#91324c;
--img-border-hover:#45181f;
}


/* styles */
body {
  background: url("../img/bg.png") #f5f5f5;
  font: 16px/24px Lato, "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
  color: var(--color-content);
  margin: 0px;
  }

div#container {
  margin: 0px auto 0px;
  width: 1000px;
  }

header {
  margin: 20px auto 0px;
  text-align: left;
  }
  
  header img {
    border-width: 0px;
    border-radius: 0px;
    padding: 0px;
    width: 1000px;
    height: 563px;
    box-shadow: 10px 10px 0px #E6E6E6;
    }
    header img:hover {
      box-shadow: 10px 10px 0px #E6E6E6;
    }
    header nav {
    width: 1000px;
    }
    header nav span {
    display: none;
    }
    
    header nav a {
    display: inline-block;
    }
    
    header nav ul {
    margin:0px;
    display:inline;
    padding:0px;
    }
    header nav ul li {
    display:inline;
    text-align:left;
    list-style-type: none;
    }
    
    header a#clear {
    float:right;
        padding:10px 0px 5px;
        width: 259px;
        height: 70px;
        background: url("../img/title-index.png") top left no-repeat;
        }
    header nav a#index {
        width: 63px;
        height: 63px;
        background: url("../img/rdm.png") 0px 0px no-repeat;
        opacity: 1;
        transition: opacity 2s ease;
    }
      header nav a#domain {
        width: 63px;
        height: 63px;
        background: url("../img/drk.png") 0px 0px no-repeat;
        opacity: 0.5;
        transition: opacity 2s ease;
        }
      header nav a#sites {
        width: 63px;
        height: 63px;
        background: url("../img/whm.png") top left no-repeat;
        opacity: 0.5;
        transition: opacity 2s ease;}
      header nav a#links {
        width: 63px;
        height: 63px;
        background: url("../img/cul.png") top left no-repeat;
        opacity: 0.5;
        transition: opacity 2s ease;}
      header nav a#clear:hover {
        background-position: -256px 0px; }
      header nav a#index:hover {
        opacity:1;}
      header nav a#domain:hover {
        opacity:1;}
      header nav a#sites:hover {
        opacity:1;}
      header nav a#links:hover {
        opacity:1; }

section {
  width: 1000px;
  margin: 0px auto 0px;
  text-align: left; }

h1 {
  font: 34px Pacifico, 'lucida sans unicode', arial, sans-serif;
  color: var(--color-h1);
  background: url("../img/hbg.png") bottom left repeat-x;
  margin: 0px 0px -12px;
  text-transform: lowercase;
  text-align: left;
  text-shadow: 2px 2px 5px var(--shadow-h1); }

h2 {
  margin: -10px 0px -10px;
  font: 30px Pacifico, 'lucida sans unicode', arial, sans-serif;
  color: var(--color-h2);
  text-shadow: 2px 2px 5px var(--shadow-h2);
  text-transform: lowercase; }
  h2.center {
    text-align: center;
    margin: 10px auto;
    clear: both; }

h3 {
  margin: -10px 0px 5px;
  font: 23px Pacifico, 'lucida sans unicode', arial, sans-serif;
  background: url("../img/hbg.png") bottom left repeat-x;
  color: #385f8b;
  text-shadow: 2px 2px 5px #5795bd;
  text-transform: lowercase; }

h4 {
  font: 20px/20px quicksand, Lato, "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
  font-weight: 700;
  margin: 0px; }

h5 {
  font: 16px/18px quicksand, Lato, "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
  margin: 0px;
  font-weight: 700;
  color: #000; }

h6 {
  font: 12px/14px Lato, "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
  margin: 0px 0px 20px;
  font-weight: 700;
  color: #555; }
  h6 a {
    color: #999 !important;
    text-decoration: underline !important; }
    h6 a:hover {
      color: #555 !important; }

/* links & text styles */
a {
  color:var(--link);
  font-weight: 900;
  cursor: crosshair; }

a:hover {
  color: var(--link-hover); }

b, strong {
  color: var(--bold);
  font-weight: 900; }

i, em {
  color: var(--italic);
  font-weight: 900; }

span {
  color: var(--span); }

abbr {
  border-bottom: 1px dotted #a69071; }

del {
  text-decoration: line-through; }

/* lists */
ol {
  margin-left: 20px;
  text-align: left; }
  ol li {
    padding: 0px 0px; }

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

/* utility classes */
.r {
  color: #C40E0C;
  font-weight: 400; }

.center {
  text-align: center;
  margin-bottom: -5px; }

p.right {
  text-align: right;
  line-height: 15px;
  margin-bottom: 0px;
  padding-bottom: 10px;
  clear: both; }

.small {
  font-size: 14px; }

.updated {
  font-size: 18px;
  text-align: center;
  color: #444; }

.network {
  font-size: 15px;
  line-height: 18px; }

.clear {
  clear: both; }

hr {
  clear: both;
  background: url("../img/hbg.png") top 2px left no-repeat;
  border: 0px;
  height: 8px;
  margin: 0px 0px -10px; }

/* images */
img, a img {
  margin: 0px 10px 10px 0px;
  box-shadow: 5px 5px 0px #ccc; }
  img:hover, a img:hover {
    box-shadow: 5px 5px 0px #999; }

.none {
  border: none;
  background: none;
  text-decoration: none;
  box-shadow: none; }

.none:hover {
  box-shadow: none; }

.left {
  float: left;
  margin: 0px 5px 5px 0px; }

img.right {
  float: right;
  margin: 10px 5px 5px 15px; }

.wide img {
  margin: 0px 20px; }

/* sites */
.row {
  margin: 0px auto;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  color: #888;
  clear: both; }
  .row a {
    color: #444;
    text-decoration: none; }
    .row a:hover {
      color: #999; }
  .row em {
    color: #777; }
  .row blockquote {
    color: #999;
    font-style: italic;
    font-weight: 400;
    margin: 0px;
    padding: 0px 5px;
    font-size: 14px;
    line-height: 18px; }

.half {
  width: 50%;
  float: left; }

.third {
  width: 33%;
  float: left; }

.quarter {
  width: 25%;
  float: left; }

.rbox {
  float: right;
  width: 75%; }

.text {
  float: right;
  width: 75%;
  font-size: 18px;
  line-height: 20px;
  font-style: italic; }

.big {
  font-size: 22px;
  line-height: 26px;
  width: 70%; }

/* plug */
table#plug {
  text-align: center;
  margin: -10px auto 5px;
  border-width: 0px;
  color: #385f8b;
  text-shadow: 2px 2px 5px #5795bd;
  font: 24px Pacifico, "lucida sans unicode", arial, sans-serif;
  letter-spacing: -2px;
  text-transform: lowercase;
  padding: 10px; }
  table#plug th {
    font-weight: normal; }
  table#plug td {
    padding: 3px 10px; }

/* links */
table#links {
  text-align: center;
  margin: 0 auto 5px;
  border-width: 0px; }
  table#links td {
    width: 33%;
    padding-right: 20px; }