style.scss

/*
Theme Name: Tar Heel Reader
Theme URI: http://tarheelreader.org
Description: Started life as HtmlReset
Author: Gary Bishop
Author URI: http://www.cs.unc.edu/~gb/;
Version: 1
*/

$captionFontSize: 1.8em;
$pageLinkFontSize: 0.8em;
$carolinaBlue: #56A0D3;

@import "css/reset";
@import "css/mixins";
@import "css/classes";
//@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis:400,700);

/* new Linux- and Windows-friendly sans-serif font stack: http://mky.be/fontstack */
body {
    font-family: Helmet, Freesans, Arial, Helvetica, Verdana, sans-serif;
    font-size: 100%;
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
    background: #F5F6F7;
}

/* using local fonts? make sure to read up on Paul Irish's
    Bulletproof @font-face syntax: http://mky.be/font-face/bulletproof/ */

a {color: #03f;}
.no-touch a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*  j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: $carolinaBlue;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* And here begins the Wordpress fun.
-------------------------------------------------------------------------------*/
.content-wrap {
    margin: 0 auto 1em;
    overflow: auto;
    width: 48em;
    // This next line causes shift right on iPad. Why do we need it?
    padding: 0.5em;
    padding-top: 0.25em;

    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    border: 1px solid $carolinaBlue;

    -webkit-box-shadow: 0 0 0.2em $carolinaBlue;
    -moz-box-shadow: 0 0 0.2em $carolinaBlue;
    box-shadow: 0 0 0.2em $carolinaBlue;

    .post {
      max-width: 100%;
      padding: 0.5em 1em;
    }

     /* This is not the navigation menu that is used for navigation around the site.
        This is for "next", "previous" links for navigation around posts/collections
     */
    .navigation {
      margin-top: 1em;
      width: 100%;
      a {
        @include decoratedButton(0.1em, #DCDCDC, 0.5em, 0, #EDEDED, #DFDFDF, 1em, 0.25em, 0.5em, #585858, #EFEFEF, $carolinaBlue, 0, 8em);
      }

      .next-posts, .next {
        float: right;
      }

      .prev-posts, .back {
        float: left;
      }
    }
}

.page-wrap {
    display: none;
    margin: 0;
    padding: 0;
}

.active-page {
    display: block;
}

// The following styles apply to the Home, Books You Wrote, Collections, Login, Announcements, FAQ, and Photo Credits pages
.home-page, .server-page, .your-books-page, .collections-page, .login-page {
/*
  h1, h2 {
    color: #676767;
    font-size: 1.8em;
    font-weight: normal;
    padding-left: 0.25em;
  }

  h2 {
    font-size: 1.6em;
    border-bottom: 2px solid $carolinaBlue;
    a {
      color: $carolinaBlue;
    }
  }
*/

  p {
    text-align: left;
    margin: 1em 0.5em;

    &.message {
      color: $carolinaBlue;
      font-size: 1.25em;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    }
  }

  a {
    text-decoration: none;
  }
}

.tinyicon {
    width: 1em;
    height: 1em;
 }


.home-page {
  // styles for the links that appear on the front page
  .homeLinkList {
      text-align: center;
      overflow: auto;

      li {
        margin: 1.5em 0;
        width: 50%;
        float: left;
        .homeLink {
           @include decoratedButton(0.1em, #61A0B3, 0.5em, 0.25em, $carolinaBlue, #286DA3, 1.25em, 1em, 2em, #DDD, #81BEF0, #FFF, 0.5s, 10em);
         }
      }

      & + p {
        clear: both;
      }
    }

  .languages {
    border: 1px solid #777;
    margin-left: 1em;
    padding-top: 0.025em; // helps center text just a bit; might be unnecessary. Line-height doesn't seem to work

    -webkit-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.1);

    color: #333;
    font: small-caps 300 1.25em arial, sans-serif;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0.25);

    height: 1.5em;
    min-height: 1.5em;
    width: 10em;
    min-width: 10em;
    vertical-align: middle;
  }

  .goButton {
    background: url(/theme/images/globe.png) no-repeat center center;
    border: 0.15em solid #DDD;
    margin-left: 0.5em;

    width: 6em;
    &:hover{
      background: url(/theme/images/globe.png) no-repeat center center, $carolinaBlue;
    }
  }
}

// Applies to Home, Help, Announcements, and Photo Credits
.server-page {
  .photoCreditsBox {
    width: 5em;
    height: 5em;
    display: inline-block;
  }

  .photoCredits td.pcText {
      word-wrap: break-word;
      text-align: left;
  }
  .photoCredits td {
      padding: 0.5em 1em;
      text-align: center;
      vertical-align: middle;
  }

  .downloadLinks {
      h2 {
        margin: 0.5em 0;
      }
      a {
        display: block;
        margin: 0.25em;
      }
   }
}

@media print {
    .photoCredits {
        h3 {
            page-break-before: always;
        }
        p {
            display: none;
        }
    }
    .content-wrap {
        border: none;
        box-shadow: none;
    }
}

.login-page {
  p > a {
    display: inline-block;
    width: 9em;
  }
}

// these pages use .thr-book-list; make sure there is no horizontal padding
.favorites-page, .find-page {
  .content-wrap {
    padding-left: 0;
    padding-right: 0;
    & > p {
      margin: 1em;
      color: $carolinaBlue;
      font-size: 1.1em;
    }
  }

  .navigationMenu {
     width: 95%; // no padding on .find-page; make the width a little smaller
  }

  .description {
      display: none;
  }

   // styles for "More Books" and "Previous Books" buttons
  .findPageNavButton {
     -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
     box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);

     -webkit-border-radius: 0.5em;
     -moz-border-radius: 0.5em;
     border-radius: 0.5em;
     border: 0.1em solid #DCDCDC;

     font-family: 1.1em "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
     text-align: center;
     text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
     text-decoration: none;

     cursor: pointer;
     padding: 0.25em 0.5em;
     width: 8em;
   }
}

.favorites-page {
  // don't display the 'Press to Search' button on phones for the favorites page
  .searchShowButton {
    display: none !important;
  }
}

//.entry { margin-left: 1em;} why do we need this?
.entry a { text-decoration: none;}
.entry a:hover { text-decoration: underline;}

.postmetadata {}

p {
    margin: 0.5em;

    &.notLoggedIn {
      color: #555;
      font-size: 1.25em;
      margin: 1.5em;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);

      a {
        display: block;
        margin: 0.5em 1em;
        width: 7em;
      }
    } // end .notLoggedIn
}

li {
    margin-left: 1.2em;
    margin-bottom: 0.5em;
}

h1, h2 {
  margin: 0.25em 0;
}

h2 {
    font-size: 1.3em;
}

.thr-find-next {
    float: right;
    margin: 1em 1.2em 0 0;

}

.thr-find-back {
    float: left;
    margin: 1em 0 0 1em;
}

.thr-back-link {
    //left: 0px;
    left: 1em;
}

.thr-next-link {
    //right: 0px;
    right: 1em;
}

.thr-next-link, .thr-back-link {
    @include decoratedButton(1px, #DCDCDC, 0.5em, 0, #EDEDED, #DFDFDF, 1em, 0.25em, 0.5em, #585858, #EFEFEF, $carolinaBlue, 0, 6em);

    position: absolute; // fixed works fine but isn't supported before ios5?
    bottom: 0.5em;

    font-size: $pageLinkFontSize;
    height: 4em;

    img {
        margin: 0.5em auto 0.25em auto;
        width: 1.5em;
        height: 1.5em;
        display: block;
    }
}

.thr-page-number {
    position: absolute;
    top: 1em;
    right: 1em;
    font-size: 1em;
}

/* This default page design is for browsers wtihout media queries.
   It is designed to fit in 768 by 600 pixels, that is 48em by 37.5em
*/
.thr-book-page {
    text-align: center;
    height: 100%;

    .content-wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: none;

        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;

        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

   .header {
      height: 0;
      min-height: 0;
      border-top: 0;

      .thr-well-icon { // make the home icon less opaque
        opacity: 0.6;
      }
    }

    h1 {
        font-size: 2em;
        &.title {
          height: 2.5em;
        }
        width: 24em;
        max-width: 100%;
        margin: 2em auto;
        margin-bottom: 1.5em;
        overflow: none;
        word-break: break-word;
    }

    .decoratedList { // changing background color of list items in choices looks ugly with large border-radius
        -webkit-border-radius: 0.1em;
        -moz-border-radius: 0.1em;
        border-radius: 0.1em;
    }

    .navigationMenu {
      margin: 4em auto;
      width: 80%;
    }

    .thr-question {
        margin: 0.5em auto;
        margin-top: 2em;
    }

    .thr-pic-box {
        width: 29em;
        height: 29em;
        margin: auto;
        margin-top: 0.5em;
    }

    .thr-caption-box {
        width: 36em;
        height: 6.5em;
        overflow: hidden;
        margin: 0 auto;
    }

    .thr-caption {
        font-size: $captionFontSize;
        line-height: 1.2em;
        word-break: break-word; // wrap text if needed
        margin: 0;
    }

    .thr-choices {
        width: 18em; // make the list a bit bigger so that the text fits in nicely
        margin: 0.5em auto 1em;
        font-size: 2em;
        text-align: left;

        li {
            .thr-stars {
                width: 3em; // font-size is 2em so these are halved
                height: 1em;
                margin-right: 1em;
            }
        }

        a {
            text-decoration: none;
            font-weight: normal;
            color: inherit;
        }
    }
}

.reading-controls {
    label {
        display: block;
        margin-top: 1em;
        padding-bottom: 0.25em;
    }
    select {
        width: 10em;;
        display: block;
    }
    input {
        margin-top: 1em;
        display: block;
        width: 10em;
        &[type=submit] {
          @include decoratedButton(0.1em, #61A0B3, 0.5em, 0, $carolinaBlue, #286DA3, 1.1em, 0.1em, 1em, #EEE, #81BEF0, #FFF, 0, 10em);
        }
    }
}

.js .find-page .favoriteYesIcon, .js .favorites-page .favoriteYesIcon {
  display: block;
}

.no-js .find-page .thr-favorites-icon, .no-js .favorites-page .thr-favorites-icon {
  display: none;
}

.front-page.favoriteYes .favoriteYesIcon {
  display: block;
}

.front-page.favoriteNo .favoriteNoIcon {
  display: block;
}

.js .thr-pic {  // hide the picture initially when javascript is enabled so we can size it without a jump
    display: none;
}

.next-posts {}
.prev-posts {}

.help {
    width: 2em;
    height: 2em;
    float: right;
    cursor: pointer;
}

.help-text {
    display: none;
}

.error-messages p {
    display: none;
    color: red;
}

.error-messages p.show-error {
    display: block;
}

/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

.searchForm label, .sidebar label {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

.flashplayer {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
}

.busyBlocker {
    display: none;
    position: absolute;
    width: 50%;
    left: 25%;
    z-index: 20;
}

.busyMessage {
    font-size: 1.5em;
    margin: auto;
    padding: 1em;
    background: #FFF;
    border: 2px solid red;
    text-align: center;
    div {
        display: none;
    }
}

.isBusy .busyMessage .loadingMessage {
    display: block;
}

.isError .busyMessage .errorMessage {
    display: block;
}

.request-failed {
    margin: 2em;
    color: red;
    background: white;
    font-weight: bold;
}

img.favoriteYes, img.favoriteNo {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.chooseFavorites li.favoriteYes img.favoriteYes {
  display: block !important;
}

.chooseFavorites li.favoriteNo img.favoriteNo {
  display: block !important;
}

p.unsupported, p.classic {
  display: none;
}

.unsupported p.unsupported, .classic p.classic {
  display: block;
  background-color: #FCC;
}

.js .loading {
  a.thr-well-icon {
    -webkit-animation: rotation 3s infinite linear;
    -moz-animation: rotation 3s infinite linear;
    -o-animation: rotation 3s infinite linear;
    animation: rotation 3s infinite linear;
  }
  div.header:after {
    content: 'Loading...';
    position: absolute;
    left: 3em;
    top: 0.5em;
    font-size: 2em;
  }
  div.content-wrap {
    pointer-events: none;
    opacity: 0.7;
  }
  a {
    pointer-events: none;
  }
}

@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}

@import "css/fileuploader";
@import "css/writebooks";
@import "css/yourbooks";
@import "css/collections";
@import "css/allmediaqueries";
@import "css/map-page";
@import "css/ie";
@import "css/offline";