/**
 *
 * Default stylesheet for the Kamarikuoro Kaamos website
 * 
 *
 */


/* Reset browser styles */
* {
    list-style-type: none;
	margin: 0;
	padding: 0;
}


/* General */

body {
    background-color: #e6e6e6; /* 10% black */
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.25em; /* makes 16px*1.25 = 20px line height */
}

a {
    color: #0092c4;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active, a:focus {
    outline: 0; /* Remove Firefox's dotted link borders */
}

a img {
    border: none; /* Remove Firefox's solid image link borders */
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

/* Layout */

#container {
    background: #fff url('/img/gasp.png') no-repeat -120px 250px;
    border-top: 12px solid #0092c4; /* Closest to colour used in original Illustrator file */
    /* border-top: 10px solid #0097BA; /* Closest to colour used in PDF */
    border-left: 1px solid #808080;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    margin: 0 auto;
    margin-bottom: 12px; /* Prevents bottom border from colliding with browser */
    overflow: hidden; /* Crop oversized elements inside */ 
    padding: 0 50px;
    width: 1100px;
}

#header {
    height: 200px;
    position: relative;
    text-align: left;
}

#member-info {
    position: absolute;
    top: 1em;
    right: 0;
}

#navigation {
    border-bottom: 1px solid #808080;
    clear: both;
    margin-bottom: 50px;
    text-align: right;
}

#sidebar {
    float: left;
    min-height: 500px;
    padding-bottom: 2em;
    width: 23%;
}

#content {
    float: right;
    padding-bottom: 2.5em; /* Makes 40px bottom padding */
    width: 67%;
}

#footer {
    border-top: 1px solid #808080;
    clear: both;
    margin-bottom: 40px;
    padding-top: 0.5em;
    text-align: right;
}

/* Inside the Header */
#banner {
    border: none;
    position: relative;
    top: 50px;
}

#header h1 {
    color: #4b4b4b;
    font-size: 1.25em; /* makes 20px text */
    font-weight: bold;
    letter-spacing: 0.5px;
	margin: 0; /* Preserves header div size */
	padding: 4em 0 0 0; /* Keeps distance from top */
	text-align: center;
	text-transform: none;
}

/* Member info */
#member-info {
    color: #4b4b4b;
    font-size: 1em; /* makes 16px text */
}


/* Navigation */

#navigation a {
    color: #808080; /* 30% black */
    letter-spacing: 2pt;
    text-transform: uppercase;
}

#navigation a.active {
    color: #4b4b4b; /* 60% black */
}

#navigation a:hover {
    color: #4b4b4b; /* Roll-over color */
    text-decoration: none;
}

/* Main menu position and separator */
ul#navigation-menu {
    padding-bottom: 0.5em;
    text-align: right;
}
#navigation-menu > li {
    display: inline; /* Arrange links horizontally with room for submenus */
    padding-left: 2em;
    position: relative;
}

/* Submenu position and style */
#navigation-menu ul {
    left: 0;
    padding-left: 2em;
    top: 2.25em; /* Empirical value for Safari & Firefox */
    position: absolute;
    text-align: left;
    width: 1110px; /* Avoids line breaks between sublinks */
}
#navigation-menu ul > li {
    display: inline;
}
#navigation-menu ul > li a {
    letter-spacing: 1pt;
    padding-right: 1em; 
    text-transform: lowercase;
}


/* Sidebar */

#sidebar h2 {
    color: #808080;
    font-size: 1.125em; /* makes 18px text */
    font-weight: normal;
    letter-spacing: 0.5px;
    margin: 2.23em 0 1.12em 0; /* makes 40-20px top-bottom margin */
    text-transform: none;
}

#sidebar p {
    color: #4b4b4b;
    font-size: 0.875em; /* makes 14px text */
	margin: 1.429em 0; /* makes 20px bottom margin */
}


/* Content */

#content {
    
}

#content h2 {
    color: #4b4b4b;
    font-size: 1.25em; /* makes 20px text */
    font-weight: normal;
    letter-spacing: 0.5px;
	margin: 2em 0 1em 0; /* makes 40-20px top-bottom margin */
	text-transform: none;
}

#content h3 {
    color: #4b4b4b;
    font-size: 1em; /* makes 16px text */
    font-weight: normal;
    letter-spacing: 0.5px;
	margin: 1.25em 0 0 0; /* makes 20px top margin */
	text-transform: none;
}

#content h4 {
    color: #4b4b4b;
    font-size: 0.875em; /* makes 14px text */
    font-weight: bold;
}

#content p {
    color: #4b4b4b;
    font-size: 0.875em; /* makes 14px text */
	margin-bottom: 1.429em; /* makes 20px bottom margin */
	text-align: justify;
}

#content img {
    border: 1px solid #9a9a9a;
}


/* --- Inside the sidebar --- */

#sidebar p.event {}

#sidebar span.event-title {
    font-weight: bold;
}

#sidebar span.event-readmore {
    display: block;
    margin-top: 1.429em; /* makes 20px top margin */
}


/* --- Inside the content --- */

/* Flash and Auth messages */

#content div.message {
    border: 1px dashed #808080;
    color: #4b4b4b;
    font-size: 1em; /* Makes 16px text */
    margin: 1.25em 0; /* Makes 20px top-bottom margin */
    padding: 1.25em 1em; /* Makes 20px top-bottom padding */
    width: auto;
}

#content div#flashMessage {
    background-color: #e6f8fb;
}

#content div#authMessage {
    background-color: #fcb7a0;
}


/* Captcha */

#content div#recaptcha_widget_div {
    font-size: 0.875em;
    margin-left: 7em;
}

#content div#recaptcha_widget_div img {
    border: none;
}

#content div#recaptcha_widget_div input {
    height: inherit;
}


/* Events */

#content div.event {
    clear: both;
    margin: 0 0 1.25em 0; /* makes 20px bottom margin */
    overflow: hidden; /* Stretch div to accommodate floated poster */
    width: 100%; /* Needed by some browsers for stretching */
}

#content h3.event-title {
    margin: 0 0 1.25em 0; /* makes 20px bottom margin */
}

#content p.event-facts,
#content p.event-description,
#content p.event-morefacts {
    text-align: left;
}

#content p.event-description {
    font-style: italic;
}

#content p.event-morefacts {}


/* Images */

#content img.title-image {
    font-size: 1.25em; /* makes 20px text */
    margin: 2em 0 1em 0; /* makes 40-20px top-bottom margin */
}

#content img.singers-image {
    float: left;
    margin-right: 2em;
    width: 320px; /* Required for float */
}

#content img.portrait {
    float: left;
    height: 240px;
    margin: 0 1.25em 0.25em 0;
}

#content img.event-poster {
    float: left;
    margin: 0 1.25em 1.25em 0;
    max-height: 290px;
    max-width: 205px;
}


/* Repertoire */

#content div.repertoire-epoch h3 {
    margin: 0 0 1.25em 0; /* Makes 20px bottom margin */
}

#content div.repertoire-epoch h3.epoch-works-toggler {
    color: #0092c4;
    cursor: pointer;
    text-decoration: none;
}

#content div.repertoire-epoch h3.epoch-works-toggler:hover {
    text-decoration: underline;
}

#content div.repertoire-epoch p {
    margin-left: 1.5em;
    text-indent: -1.5em;
}

#content div.repertoire-epoch p:first-line {
    font-weight: bold;
}


/* Image gallery */

#content div.photo-album {
    overflow: hidden; /* Stretch to accommodate floated photo divs */
}

#content div.photo-album h3 {
    margin: 0 0 1.25em 0; /* Makes 20px bottom margin */
}

#content div.photo-album h3.photo-album-toggler {
    color: #0092c4;
    cursor: pointer;
    text-decoration: none;
}

#content div.photo-album h3.photo-album-toggler:hover {
    text-decoration: underline;
}

#content div.photo-album-image {
    float: left;
}

#content div.photo-album img {
    margin: 0 20px 20px 0;
}

/* Sorting, Filtering & Pagination */

#content div.sortbar {
    border: 2px dashed #f3f3f3; /* 5% black */
    padding: 1em;
    margin: 1em 0;
}

#content span.filter-action {
    color: #808080;
}

#content p.paginator-info {
    color: #808080;
    margin: 1.429em 0; /* makes 20px top-bottom margin */
}

#content p.paginator-links {
    margin: 1.429em 0; /* makes 20px top-bottom margin */
    text-transform: lowercase;
}


/* Home page */

#content p.title-quote {
    color: #808080;
    font-size: 1em; /* makes 16px text */
    letter-spacing: 1px;
    text-align: left;
}


/* Posts & Messages */

#content p.post-title {
    font-size: 1em; /* makes 16px text */
    font-weight: normal;
    margin-bottom: 0;
    margin-top: 2.5em; /* makes 40px top margin */
}

#content p.post-content {
    width: 61.8%; /* Golden ratio */
}

#content span.post-date {
    color: #808080;
}


/* Contact page */

#content div.contact-person {
    float: left; /* Make boxes line up nicely */
    margin: 1.25em 0; /* Makes 20px top-bottom margin */
    width: 25%;
}


/* Member & Event lists */

#content div.member-card,
#content div.event-card {
    margin: 1.25em 0; /* makes 20px top-bottom margin */
    overflow: hidden;
}

#content div.member-card.inactive {

}

#content div.member-card p,
#content div.event-card p {
    float: left;
    text-align: left;
    width: 30%;
}

#content div.event-card p {
    width: 70%;
}

#content div.member-card span.member-office {
    color: #808080;
    font-weight: normal;
    text-transform: lowercase;
}

#content div.member-card p.member-address {
    width: 50%;
}

#content div.member-card p.member-actions,
#content div.event-card p.event-actions {
    width: 20%;
}


/* Tables */

table {
    border-collapse: collapse; /* Remove space usually reserved for borders */
    text-align: left;
}

table th,
table td {
    vertical-align: top; /* Align cell content to top */
    padding-right: 2em;
}

table th:last-child,
table td:last-child {
    padding-right: 0;
}

table th {
    color: #4b4b4b;
    font-size: 0.875em; /* makes 14px text */
    font-weight: bold;
}

/* Apply to all table header rows but the first */
table tr:not(:first-child) > th {
	padding-top: 1.429em; /* makes 20px bottom margin */
}

table td {
    color: #4b4b4b;
    font-size: 0.875em; /* makes 14px text */
}

table.singers-table {
    width: auto;
}

table.singers-table th,
table.singers-table td {
    width: 50%;
}


/* Forms */

form {
    border-left: 1px solid #808080;
    padding-left: 1em;
    /* width: 61.8%; /* Golden ratio */
}

form fieldset {
    /* background-color: #f3f3f3; */
    border: none;
    color: #4b4b4b;
    /* padding: 0 1em; */
}

form fieldset > legend {
    font-size: 0.875em; /* makes 14px text */
    font-weight: bold;
    padding-bottom: 1.43em; /* makes 20px bottom padding */
}

form label {
    color: #808080;
    display: block;
    float: left;
    font-size: 0.875em; /* makes 14px text */
    margin-right: 1em;
    text-align: right;
    width: 6em;
}

form div.required label {
    color: #4b4b4b;
}

form input {
    height: 1.125em;
    vertical-align: bottom;
}

form input,
form textarea {
    border: 1px solid #808080;
    color: #4b4b4b;
    font-family: "Lucida Grande", Verdana, Arial, sans-serif; /* Remind Firefox of sans-serif font */
    font-size: 1em; /* makes 16px text */
}

form select {
    margin: 0 2px;
}

form span.datetime-field {
    font-size: 0.875em; /* Makes 14px text */
}

form div {
    margin-bottom: 1.25em; /* makes 20px bottom margin */
    min-height: 1.25em; /* Avoids cutoff for content with less than 20px row height */
    width: 100%; /* Needed by some browsers for stretching */
}

form div.error-message {
    color: #f63;
    font-size: 0.875em; /* makes 14px text */
    font-style: italic;
    margin-bottom: 0; /* Prevent double margin for error message divs */
    margin-left: 7em;
}

form > div.submit input {
    background: #fff;
    border: none;
    color: #0092c4;
    cursor: pointer;
    font-size: 0.875em; /* makes 14px text */
    height: auto;
    line-height: inherit; /* overrides browser standard for input line heights */
    margin-left: 7em;
}

form > div.submit input:hover {
    text-decoration: underline;
}

/* Filter mini-forms */
form.filter-form {
    border: none;
    margin-bottom: 1.25em; /* makes 20px bottom margin */
    padding-left: 0;
}
form.filter-form span {
    font-size: 0.875em; /* makes 14px text */
}
form.filter-form div {
    display: inline;
    margin-left: 0.5em;
}
form.filter-form label {
    color: #4b4b4b;
    float: none;
    display: inline;
    margin-left: 0.5em;
    text-align: left;
}
form.filter-form > div.submit input {
    margin-left: 1em;
}


/* --- Inside the Footer --- */

#footer p.byline {
    color: #9a9a9a;
    text-transform: lowercase;
}

#footer img.intra-link {
    vertical-align: bottom;
}