Revision as of 16:01, 20 September 2013

/* CSS placed here will be applied to all skins */

#homebtns {
    text-align: center;
}

/* make main links on homepage look more like buttons */
#homebtns a {
    display: inline-block;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #fafafa;
    font-family: 'gill sans','gill sans mt','gill sans mt pro','century gothic',corbel,sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
    padding: 0.5em 1em;
    min-width: 6em;
    margin: 0.5em;
    color: black;
}
#homebtns a:hover {
    background-color: #f5f5f5;
}

/* make table cells of class 'box' stand out */
td.box {
    border: 1px solid #ccc;
    background-color: white;
    padding: 1ex 1em;
}

/* make spans of class 'box' stand out */
span.box {
    border: 1px solid #ccc;
    background-color: white;
    padding: 1em;
}

/* have line separating collections box, and make font size reasonable */
table.collectionsbox {
    border-top:1px solid #dddddd;
    font-size:0.75em;
}

/* enable side-by-side of maintext and translation elements,
 * floated so that js can easily enable crit app notes
 * (see LemmaNotes and ToggleNotes extension for that part) */
.textwithtranslation #maintext {
    float: left;
    width: 54%;
    padding-right: 3%; /* space for linenums */
    border-right:thin solid #ccc;
}
.textwithtranslation #translation {
    float: right;
    width: 39%;
    padding-left: 2%; /* space for linenums */
}

/* space for linenums  */
.textwithouttranslation #maintext {
    padding-left: 2%; /* space for linenums */
    padding-right: 3%; /* space for linenums */
}

/* Correct for the fact that the Greek font is slightly smaller than Latin fonts */
#maintext :lang(grc) {
    font-size: 1.125em;
}

.linenumleft, .linenumright, .chapternumleft, .chapternumright {
    font-size: 0.8em;
}

/* style toggle notes and highlights buttons (from ToggleNotes extension) */
#togglenotes, #togglehighlights {
    display: block;
    width: 12em;
    margin: auto 0em auto auto;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    padding: 0.7ex 1em;
    cursor: pointer;
    font-size: medium;
    clear: right;
}

#togglenotes:hover, #togglehighlights {
    background-color: #fafafa;
}

/* Modify lemmanote placement to sit in the right hand column (for ToggleNotes extension) */
#maintext .lemmanote {
        /* proportional to #maintext (55%; set in Common.css) */
        margin-right: -80%;  /* 80% of 55% : 44% */
        width: 70%;          /* 70% of 55% : 50% */
}
#guide .lemmanote {
        /* proportional to #guide (75%; set in Common.css) */
        margin-right: -35%;  /* 40% of 75% : ~25% */
        width: 30%;          /* 35% of 75% : 22.5% */
}

/* for 2 column guides */
#guide {
    float: left;
    width: 75%;
    padding-right: 1%;
    border-right:thin solid #ccc;
    clear: both;
}
#notes {
    float: right;
}


div.highlightbox {
    float: right;
    clear: right;
    width: 22%;
    text-align: right;
}

div.highlightbox p {
    font-size: 0.75em;
}

div.highlightbox #togglehighlights {
    width: 100%;
}

/* don't have bullet points or indentation for bib items */
#bibliography li {
    list-style-type: none;
}
#bibliography ul, #bibliography li {
    margin-left: 0px;
}

/* have mdash bullets for child bib items */
#bibliography ul li ul li:before {
    content:"――";
}

/* ensure poems are always left aligned, not justified */
.poem {
    text-align: left;
}

.poemmod p { 
    padding-left: 16em;
    text-indent: -16em;
    margin-bottom: 0px;
}

/* hide toolbox and search from footer */
.footer #toolbox {
    display: none;
}

.footer #search {
    display: none;
}

/* Two column homepage layout that changes to stacked once things get narrow */

#homemain {
    width: 60%;
    float: left;
    padding-right: 0.5em;
    padding-bottom: 1em; /* as slideshow spacer is a little unreliable */
}

#newsbox {
    float:right;
    width:33%;
    padding: 0.5em 1em;
    border: thin solid #ccc;
    /* ensure it is above slideshow in unlikely case that it overlaps */
    background-color: white;
    z-index: 1;
    position: relative;
}

#newsbox ul li, #newsbox div a {
    font-size: 0.75em;
}

#newsbox > h3 {
    margin-top: 0em;
}


@media(max-width: 60em) {
  #homemain {
    width: 65%;
  }

  #newsbox {
    width: 28%;
  }
}

@media(max-width: 50em) {
  #homemain, #newsbox {
    width: 96%; /* 100% can cause scrollbars */
    float: none;
  }

  #newsbox {
    border: none;
    border-top: thin solid #ccc;
  }

  #newsbox ul li, #newsbox div a {
    font-size: 1em;
  }
}

@media(max-width: 30em) {
  /* Have guide and texts with translation as only one column.
   * (lemmanotes are handled by @media queries in css in LemmaNotes and ToggleNotes extensions) */
  #guide {
    float: none;
    width: 100%;
    padding-right: 0;
    border-right: none;
  }

  .textwithtranslation #maintext {
    float: none;
    width: 100%;
    border-right: none;
    border-bottom: thin solid #ccc;
  }

  .textwithtranslation #translation {
    display: block !important; /* ensure it's never hidden */
    float: none;
    width: 100%;
  }
}