/*
 * Font definitons
 */

@font-face{
    font-family: Gentium;
    src: url('../fonts/GenBasR.ttf');
}
@font-face{
    font-family: Gentium; 
    src: url('../fonts/GenBasB.ttf');
    font-weight: bold;
}
@font-face{
    font-family: Gentium; 
    src: url('../fonts/GenBasI.ttf');
    font-style: italic;
}
@font-face{
    font-family: Gentium; 
    src: url('../fonts/GenBasBI.ttf');
    font-style: italic;
    font-weight: bold;
}
@font-face{
    font-family: Kingthings; 
    src: url('../fonts/Kingthings_Flourishes.ttf');
}

/*
 * Text elements
 */

h1 {
    font-size: 6em;
    font-weight: normal;
}
h2 { font-size: 2em; }
h3 { font-size: 1em; }
p, ul, ul li, label { font-size: 1em; }

a:link {
    text-decoration: none;
    color: #0479a7;
}
a:visited {
    text-decoration: none;
    color: #638fa2;
}
a:hover, a:active, a:focus {
    text-decoration: underline;
    color: #0479a7;
}

/*
 * Toplevel document elements
 */

html {
    padding: 1em;
}
body {
    font-family: Gentium;
    background-color: #f4f3eb;
}

/*
 * Page title
 */

#header {
    width: 100%;
    margin-bottom: 2em;
    overflow: hidden;
}
#title {
    position: relative;
    display: inline-block;
    margin: 0;
    font-size: 6em;
    font-weight: normal;
}
#title_flourish {
    display: inline;
    font-family: Kingthings;
    vertical-align: 0.1em;
}
#title_line {
    position: absolute;
    bottom: 0.25em;
    left: 2.3em;
    display: inline-block;
    border-bottom: 2px solid black;
    width: 100em;
    vertical-align: 0.2em;
}

/*
 * Stories
 */

.story {
    position: relative;
    clear: both;
}
.story_title {
    font-size: 1.5em;
}
.story_bottom {
    font-family: Kingthings;
    font-size: 2em;
    margin: 2em auto 2em;
    width: 3.5em;
}

/* hack: tables don't get broken up by columns */
.nobreak {
    display: table;
}

@media all and (min-width: 1000px) {
    .story_body {
	-moz-column-count: 2;
    }
}

/*
 * Story timestamps
 * For this neat trick, see:
 * http://learningjquery.com/
 * http://css-tricks.com/date-display-with-sprites/
 */

.story_timestamp {
    position: relative;
    width: 50px;
    height: 50px;
    margin-right: 10px;
    float: left;
}
.month, .day, .year {
    position: absolute;
    text-indent: -1000em;
    background-image: url(/html/images/dates.png);
    background-repeat: no-repeat;
}

.month {top:2px; left:0; width:32px; height:24px}
.day {top:25px; left:0; width:32px; height:25px}
.year {bottom:0; right:0; width:17px; height:48px}

.m-01 {background-position:0 4px}
.m-02 {background-position:0 -28px}
.m-03 {background-position:0 -57px}
.m-04 {background-position:0 -90px}
.m-05 {background-position:0 -121px}
.m-06 {background-position:0 -155px}
.m-07 {background-position:0 -180px}
.m-08 {background-position:0 -216px}
.m-09 {background-position:0 -246px}
.m-10 {background-position:0 -273px}
.m-11 {background-position:0 -309px}
.m-12 {background-position:0 -340px}
.d-01 {background-position: -50px 0}
.d-02 {background-position: -50px -31px}
.d-03 {background-position: -50px -62px}
.d-04 {background-position: -50px -92px}
.d-05 {background-position: -50px -123px}
.d-06 {background-position: -50px -154px}
.d-07 {background-position: -50px -185px}
.d-08 {background-position: -50px -216px}
.d-09 {background-position: -50px -248px}
.d-10 {background-position: -50px -278px}
.d-11 {background-position: -50px -309px}
.d-12 {background-position: -50px -340px}
.d-13 {background-position: -50px -371px}
.d-14 {background-position: -50px -402px}
.d-15 {background-position: -50px -434px}
.d-16 {background-position: -50px -465px}
.d-17 {background-position: -100px 0}
.d-18 {background-position: -100px -31px}
.d-19 {background-position: -100px -62px}
.d-20 {background-position: -100px -92px}
.d-21 {background-position: -100px -123px}
.d-22 {background-position: -100px -154px}
.d-23 {background-position: -100px -185px}
.d-24 {background-position: -100px -216px}
.d-25 {background-position: -100px -248px}
.d-26 {background-position: -100px -278px}
.d-27 {background-position: -100px -309px}
.d-28 {background-position: -100px -340px}
.d-29 {background-position: -100px -371px}
.d-30 {background-position: -100px -402px}
.d-31 {background-position: -100px -434px}
.y-2006 {background-position: -150px 0}
.y-2007 {background-position: -150px -50px}
.y-2008 {background-position: -150px -100px}
.y-2009 {background-position: -150px -150px}
.y-2010 {background-position: -150px -200px}
.y-2011 {background-position: -150px -250px}
.y-2012 {background-position: -150px -300px}
.y-2013 {background-position: -150px -350px}
.y-2014 {background-position: -150px -400px}
.y-2015 {background-position: -150px -450px}
.y-2016 {background-position: -150px -500px}


/*
 * Images (with captions, in stories)
 */

.story_image {
    border: 0px solid #444444;
    padding: 3px;
    width: 400px;
    text-align: right;
    font-size: xx-small;
    margin-bottom: 30px;
    margin-left: 20px;
}
.story_image_cc {
    padding-top: 3px;
    padding-bottom: 0;
}

/*
 * Story comments
 */

.comments {
    margin-left: 60px;
}
.comment {
    padding: 1em;
    margin-bottom: 1em;
    background-color: #ebe9db;
    -moz-border-radius: 9px;
}
.comment_header {
    height: 1.6em;
}
.comment_timestamp {
    float: right;
    font-size: 1.2em;
    font-style: italic;
    color: #beb789;
}
.comment_body {
    padding-left: 2em;
}

.new_comment_link {
    float: right;
    font-style: italic;
    padding-right: 1em;
}
.new_comment {
    display: none;
/*    position: absolute;
    right: 2em;*/
}
.new_comment > form {
}
.new_comment > form > * {
}
.new_comment > form > textarea {
    height: 12em;
    width: 30em;
}

@media all and (min-width: 1000px) {
    .comments {
/*	-moz-column-count: 2; */
    }
}

/*
* { border: 1px solid red !important; }
*/