@import url(http://fonts.googleapis.com/css?family=Permanent+Marker);
/* Tidal Styles */
/* Global styles */
body {
  background: url(../_images/bg.png) repeat-x #b3dfff;
  background-attachment: fixed; }

.clear {
  clear: both; }

/* --- pageHeader --- */
header#pageHeader {
  background: url(../_images/headerBG.png) no-repeat bottom white;
  height: 155px;
  padding: 3px; }
  header#pageHeader img#pageLogo {
    margin: 10px; }
  header#pageHeader p#siteNotice {
    padding: 5px;
    margin-right: 15px;
    float: right;
    font: 16px "Permanent Marker", cursive;
    color: #E1333C;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg); }
  header#pageHeader a.headerIcon {
    float: right;
    margin-left: 5px; }
    header#pageHeader a.headerIcon img {
      width: 32px;
      -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
      -webkit-border-radius: 6px;
      -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
      -moz-border-radius: 6px;
      -o-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
      -o-border-radius: 6px;
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
      border-radius: 6px; }
  header#pageHeader nav#pageNav {
    position: relative; }
    header#pageHeader nav#pageNav a {
      background: #FF9;
      text-align: center;
      display: block;
      float: left;
      width: 120px;
      margin: 5px;
      padding: 8px;
      color: #000;
      font: 18px/18px "Permanent Marker", cursive;
      -webkit-transform: rotate(2deg);
      -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
      -webkit-transition: all 0.05s ease-out;
      -moz-transform: rotate(2deg);
      -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
      -moz-transition: all 0.05s ease-out;
      -o-transform: rotate(2deg);
      -o-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
      -o-transition: all 0.05s ease-out;
      -ms-transform: rotate(2deg);
      transform: rotate(2deg);
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
      transition: all 0.05s ease-out; }
      header#pageHeader nav#pageNav a:hover {
        -webkit-transform: rotate(-2deg);
        -moz-transform: rotate(-2deg);
        -o-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg); }
    header#pageHeader nav#pageNav .newMarker {
      position: absolute;
      left: 140px;
      top: -10px;
      font: 16px/16px "Permanent Marker", cursive;
      background: white;
      border: 2px dashed grey;
      border-radius: 5px;
      color: black;
      padding: 5px;
      -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
      box-shadow: 0 2px 2px 2px rbga(0, 0, 0, 0.4);
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg); }

/* --- Sections --- */
/* --- comicSection --- */
section#comicSection {
  background: #8FB2CC; }
  section#comicSection div#currentPageTitle {
    text-align: center; }
    section#comicSection div#currentPageTitle h1 {
      display: inline-block;
      margin: 3px auto;
      font: 1.2em "Permanent Marker", cursive;
      color: #000;
      background: #FFF;
      padding: 3px 15px;
      border-radius: 15px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
      border: 1px dashed #BBBBBB; }
  section#comicSection .comicNav {
    clear: both;
    text-align: center;
    padding: 0;
    font: 18px/18px "Permanent Marker", cursive; }
    section#comicSection .comicNav.top {
      padding-top: 25px;
      padding-bottom: 10px; }
    section#comicSection .comicNav.bottom {
      padding: 4px; }
    section#comicSection .comicNav a {
      background: #FF6;
      color: #000;
      padding: 5px 25px;
      margin: 5px;
      width: 128px;
      -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
      -webkit-transition: all 0.15s ease-out;
      -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
      -moz-transition: all 0.15s ease-out;
      -o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
      -o-transition: all 0.15s ease-out;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
      transition: all 0.15s ease-out; }
      section#comicSection .comicNav a.selected {
        cursor: default; }
      section#comicSection .comicNav a:hover {
        color: #333;
        -webkit-transition: all 0.15s ease-in;
        -moz-transition: all 0.15s ease-in;
        -o-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in; }
  section#comicSection .likePanel {
    background: white url(../_images/paperBG.png);
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    width: 550px; }
  section#comicSection #sidebar > div {
    background: white url(../_images/paperBG.png);
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    border-radius: 8px; }
  section#comicSection #comments > div {
    background: white url(../_images/paperBG.png);
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    border-radius: 8px; }
  section#comicSection #comments #scribolIns {
    margin: 0 auto;
    padding: 0; }
    section#comicSection #comments #scribolIns .scribol {
      margin: 0 auto;
      display: block; }

section#comicSection footer, section#archive footer, section#comicSection header, div#extras footer {
  padding: 5px;
  clear: both; }

section#comicSection div.ad, section#archive footer div.ad, section#comicSection header div.ad, div#extras footer div.ad {
  display: block;
  margin: 0 auto;
  width: 728px; }

/* --- extras page --- */
div#extras {
  background-color: #FFFFFF;
  padding: 5px 35px; }
  div#extras h1 {
    font: 32px "Permanent Marker", cursive;
    border-bottom: 3px solid #B36462; }
  div#extras section > h2 {
    font: 24px "Permanent Marker", cursive;
    margin-left: 30px;
    border-bottom: 3px solid #B36462;
    clear: both; }
  div#extras p {
    font-size: 14px;
    background: #FF9;
    padding: 4px;
    -webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); }
  div#extras section#avatars img {
    margin: 20px;
    width: 110px;
    border: 1px solid black; }
  div#extras section#fanart figure {
    margin: 20px;
    padding: 15px;
    float: left;
    -webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); }
    div#extras section#fanart figure figcaption {
      font: 16px "Permanent Marker", cursive;
      text-align: center; }
  div#extras section#characters div {
    background-color: #FF9;
    width: 756px;
    margin: 15px auto;
    -webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    clear: both; }
    div#extras section#characters div h2 {
      font: 1.6em "Permanent Marker", cursive;
      line-height: 1.6ex;
      padding: 5px;
      margin: 15px;
      display: block; }
    div#extras section#characters div p {
      background: none;
      -webkit-box-shadow: none; }
    div#extras section#characters div:first-of-type {
      color: #333333;
      font-size: .8em;
      line-height: 0; }
    div#extras section#characters div img {
      padding: 5px 5px 15px 5px;
      margin: -18px 15px 25px -15px;
      float: left;
      width: 180px;
      background: #EEEEEE;
      -webkit-transform: rotate(4deg);
      -webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
      -webkit-transition: all 150ms ease;
      -moz-transition: all 150ms ease;
      -ms-transition: all 150ms ease;
      -o-transition: all 150ms ease;
      transition: all 150ms ease; }
    div#extras section#characters div:nth-of-type(3n-2) img {
      -webkit-transform: rotate(-7deg);
      -moz-transform: rotate(-7deg);
      -o-transform: rotate(-7deg);
      -ms-transform: rotate(-7deg);
      transform: rotate(-7deg); }
    div#extras section#characters div:nth-of-type(3n-1) img {
      -webkit-transform: rotate(-3deg);
      -moz-transform: rotate(-3deg);
      -o-transform: rotate(-3deg);
      -ms-transform: rotate(-3deg);
      transform: rotate(-3deg); }
    div#extras section#characters div:hover img {
      -webkit-transform: rotate(-10deg) translateY(-20px) scale(1.1);
      -moz-transform: rotate(-10deg) translateY(-20px) scale(1.1);
      -o-transform: rotate(-10deg) translateY(-20px) scale(1.1);
      -ms-transform: rotate(-10deg) translateY(-20px) scale(1.1);
      transform: rotate(-10deg) translateY(-20px) scale(1.1); }

/* --- Archive Page --- */
section#archive {
  padding-top: 5px;
  background: url(../_images/comicSectionBG.jpg); }
  section#archive .archiveNav {
    clear: both;
    text-align: center;
    padding: 0;
    font: 18px/18px "Permanent Marker", cursive; }
    section#archive .archiveNav.top {
      padding-top: 25px;
      padding-bottom: 10px; }
    section#archive .archiveNav.bottom {
      padding: 4px; }
    section#archive .archiveNav a {
      background: #FF6;
      color: #000;
      padding: 5px 25px;
      margin: 5px;
      width: 128px;
      -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
      -webkit-transition: all 0.15s ease-out;
      -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
      -moz-transition: all 0.15s ease-out;
      -o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
      -o-transition: all 0.15s ease-out;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15);
      transition: all 0.15s ease-out; }
      section#archive .archiveNav a.selected {
        cursor: default; }
      section#archive .archiveNav a:hover {
        color: #333;
        -webkit-transition: all 0.15s ease-in;
        -moz-transition: all 0.15s ease-in;
        -o-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in; }
  section#archive > a {
    margin: 5px;
    float: left;
    height: 250px;
    width: 120px;
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    -o-transition: all 0.15s ease;
    transition: all 0.15s ease; }
    section#archive > a img {
      width: 120px; }
    section#archive > a:hover {
      -webkit-transform: scale(1.3) rotate(2deg);
      -moztransform: scale(1.3) rotate(2deg);
      -o-transform: scale(1.3) rotate(2deg);
      -ms-transform: scale(1.3) rotate(2deg);
      transform: scale(1.3) rotate(2deg); }
    section#archive > a p {
      padding: 3px;
      color: #000;
      font: 12px/18px "Permanent Marker", cursive;
      background: #FF6;
      -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
      -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
      -o-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); }

@media screen and (max-width: 768px) {
  header#pageHeader {
    height: 120px; }
    header#pageHeader img#pageLogo {
      margin: 5px;
      width: 340px; }

  section#archive a {
    width: 118px; } }