body { font-size: 14px; }

.mono { font-family: "Liberation Mono", "DejaVu Mono", "Courier New", monospace; }
body, 
.sans { font-family: "Liberation Sans", "DejaVu Sans", Helvetica, sans-serif; }
.serif { font-family: "Liberation Serif", "DejaVu Serif", Georgia, serif; }


h1 { font-size: 200%; line-height: 1.5em; }
h2 { font-size: 100%; line-height: 1.5em; }
small { }

.h2bullet { color: #d00; font-weight: bolder; }

/*
 * ======================================================================
 * vertical-rhythm
 * ======================================================================
 */
body { line-height: 1.5em; }

#logo { height: 6em; }
#header tr td#utilities
{
    text-align: right;
    vertical-align: top;
    line-height: 1.2em;
    padding-top: 0.5em;
}
#sections { padding-top: 1.5em; margin-bottom: 1.5em; }
#sections div { padding: 0.5em 0; }

div#variant,
div#goals h2,
p { margin-top: 1.5em; }
p#goalsnote { margin-top: 0; margin-bottom: 1.5em; }
.padded { padding: 1.5em; }
.rounded { -moz-border-radius: 14px; -webkit-border-radius: 14px; }


div.checkbox { position: relative; overflow: visible; }
input.checkbox { position: absolute; bottom: -0.5em; right: -0.5em; }

div.goalbuttons { margin-top: 1.5em; }
div.goalsection table tr th, 
div.goalsection table tr td { 
    line-height: 1.5em; 
}
div.goalsection h3 { margin-top: 1.5em; line-height: 3em; }
div.goalsection table { margin-bottom: 1.5em; }

#sidebar div { margin-bottom: 1.5em; }
#skyscraper { margin-bottom: 1.5em; }

/*
 * ======================================================================
 * widget style
 * ======================================================================
 */

/* <input type="text" /> stylings should go here. */

/*
 * ======================================================================
 * colour and typography
 * ======================================================================
 */

/* logo */
#logo { padding: 1em 0 0 2em; }
.heart { color: #d33; }
#tagline { color: #fff; margin-left: 4em; }
#logo-byld {
    font-weight: 100;
    letter-spacing: 0.1em; font-size: 300%; line-height: 0.4em;
    color: #fff;
}
#logo-org { color: #888; }

/* search */
#searchbox { border-color: #444; }
#search form { color: #fff; }

#utilities img { border: 1px solid #000; }

/* sections */
#sections div { background: #ccc; border-bottom: 1px solid #444; }
#sections div.selecteditem { border-bottom: 1px solid #f8f8f8; }

/* text color on white background */
#sections div.selecteditem a,
h1, h2, h3, small, div, p, td, th { color: #777; }

/* text color on gray background */
.column,
div.goalsection table tr th,
div.goalsection table tr td,
.button { color: #777; }

/* other text colors */
#utilities ul li,
div.goal-rel { color: #999; }

a { color: #555; }

.column,
div#variant,
div.goalsection table tr.odd th,
div.goalsection table tr.odd td { background: #ddd; }
#searchbox,
div.goalsection table tr.even th,
div.goalsection table tr.even td { background: #eee; }
div.goalsection h3 { background: #d00; color: #fff; }

#sections div.selecteditem, 
body { background: #f8f8f8; }
#footer { background: #ccc; }
#content,
#detailcontainer { background: #f8f8f8; }
.button { background: #ddd; }

#sectioncontainer,
#sections,
#header { background: #444; }

div#messages {
    text-align: center;
    font-weight: bolder;
    color: #840;
    border-bottom: 2px solid #c80;
    background: #fc0;
    padding: 0.5em; 
}

/*
 * ======================================================================
 * rounded corners and other borders on some page elements.
 * ======================================================================
 */

div.goalsection h3 { 
    padding-left: 1.5em;
    -moz-border-radius: 0.75em 0.75em 0 0; 
    -webkit-border-top-right-radius: 0.75em;
    -webkit-border-top-left-radius: 0.75em;
}

div.goalsection table tr.final td:first-child {
    -moz-border-radius: 0 0 0 0.75em; 
    -webkit-border-bottom-left-radius: 0.75em;
}

div.goalsection table tr.final td:last-child {
    -moz-border-radius: 0 0 0.75em 0; 
    -webkit-border-bottom-right-radius: 0.75em;
    width: 1.5em;
}

#sections div  { 
    -moz-border-radius: 0.75em 0.75em 0 0; 
    -webkit-border-top-right-radius: 0.75em;
    -webkit-border-top-left-radius: 0.75em;
}

/*
 * ======================================================================
 * grid layout styles.
 * ======================================================================
 *
 * Settling for 12 columns right now.
 */

div#variant,
div#goals,
div#detailheader,
div#index,
div.content,
div.goalbuttons,
div.goalsection { margin-left: 2em; margin-right: 2em; }

#sections { padding-left: 1em; overflow: hidden; }
#sections div {
    float: left;
    margin: 0 0.5em;
    width: 7em;
    text-align: center;
}
#sections div#search {
    float: none;
    width: auto;
    border: 0;
    background: #444;
}

#header { width: 100%; }
#header tr td { vertical-align: middle; }

div#container { overflow: hidden; }

/* 3 columns = 25%. */
#sectionsidebar,
#logo,
#sidebar { width: 25%; }
#sidebar { float: left; }
#sidebar div { margin-left: 1em; }

/* ad, so fixed-width (expands to the size of the ad). */
#skyscraper { float: right; }
#sectionspacer,
#skyscraper div { margin-right: 1em; }

div#content,
div#detailcontainer { overflow: hidden; }

div.goalsection table { width: 100%; }
div.goalsection table tr th, 
div.goalsection table tr td { padding-left: 1em; text-align: left; }
div.goalsection table tr th.first, 
div.goalsection table tr td.first { padding-left: 1.5em; }
td.collection { width: 2%; }



/*
 * ======================================================================
 * work in progress styles.
 * ======================================================================
 */

.fullwidth { width: 100%; }

#utilities img { float: right; margin: 0 1em; }
#searchbox {
    margin: 0 1em;
    border-width: 1px;
    border-style: solid;
}



/* sidebar
 * ----------------------------- */
#sidebar { }
#gotm {  overflow: auto; }

/* main column
 * ----------------------------- */
#detailcontainer {  }
#cover { float: left; }

/* footer
 * ----------------------------- */
#footer {  
    clear: both; 
    padding: 1em 1em 3em 1em;
    margin: 2em 0 0 0; 
}


.button { 
    width: 8em; border: 0; 
    float: right; text-align: center; 
    margin-right: 1em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
}

p { clear: both; }

#avatarnick { padding: 0 1em; }

/* 
 * debug styles. 
 */
#vruler { float: left; display: none; }
#ruler { display: none; }
table.rulercolumn td { border-right: 1px solid #a22; background: #c44; color: #a22; text-align: center; }
#ruler { overflow: auto; width: 100%; }