/* This trick allows media to be "flexible".
 * They will scale down as their parent gets scaled down. */
img, video, canvas, iframe {
  max-width: 100%;
  margin-bottom: 20px;
}

article blockquote {
    quotes: "«", "»", "“" "”" "‘" "’";
}

article blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
    float: left;
}

article blockquote:after {
    color: #ccc;
    content: close-quote;
    font-size: 4em;
    /*vertical-align: -0.1em;*/
    float: right;
}

article blockquote
{
    font-size: 1.1em;
    text-align: justify;
    font-style: oblique;
}

.nav li a.join-button
{
    color: white;
}

h1, h2
{
    text-align: center;
}

h1#librecommelart
{
    background-image: url("images/LILA_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    /* http://css-tricks.com/css-image-replacement/
       This technic might require a hack for older IE. */
    /*min-width: 400px;*/
    height: 0px;
    padding: 130px 0 0 0;
    overflow: hidden;
}

h2#associationlila
{
    display: none;
}

div#lila-presents p
{
    font-size: large;
    font-weight: bold;
}

#lila-object
{
    /* using lilac color. Having our own color scheme?! */
    border: 2px #C8A2C8 dotted;
    border-radius: 10px;

    text-align: justify;
    max-width: 800px;

    /* http://www.thesitewizard.com/css/center-div-block.shtml */
    margin-left: auto;
    margin-right: auto;

    padding-left: 10px;
    padding-right: 10px;
}

.projects-block
{
    box-shadow: 4px 4px 0px #7e8698;
}

.news-block, .projects-block
{
    /* http://www.thesitewizard.com/css/center-div-block.shtml */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.news-block h3
{
    text-align: center;
}

.news-list
{
    /*-webkit-column-count: 2;
    -moz-column-count: 2;*article
    column-count: 2;

    column-fill: auto;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

    -webkit-column-rule: 3px outset black;
    -moz-column-rule: 3px outset black;
    column-rule: 3px outset black;

}

article.news
{
    background-color: #f8f3f3;
    border-width: 2px;
    /*border-style: ridge;*/
}

article.news h4, section.projects h4
{
    background-color: #cfc5c5;
    text-align: left;
    margin-bottom: 0;
}

article.news h5, section.projects h5
{
    margin-top: 0;
    background-color: #aca8a8;
}

article.news h5 time, section.projects h5 time
{
    font-variant: small-caps;
    font-style: oblique;
}

section.projects h3
{
    text-align: center;
}

article.news dt, #project-page dt, #project-page-right dt
{
    font-weight: bold;
    color: #0f1a37;
}

article.news dd, #project-page dd, #project-page-right dd
{
    padding: 0 0 0 15px;
    margin: 0 0 5px 10px;
    border-left: thin dashed #0f1a37;
}

#news-nav
{
    text-align: center;
}

#news-nav ul li
{
    display: inline;
}

#news-nav-current
{
    font-weight: bold;
}

/************* Contents ********/
.figure
{
    text-align: center;
}

.figure img
{
    /*border: 2px solid black;*/
    /*box-shadow: 2px 2px 0 grey;*/
    margin-bottom: 0;
    display: inline-block;
}

.figure p.caption
{
    display: inline-block;
    vertical-align: middle;
    border: 2px solid grey;
    font-style: italic;
}

/************* Projects ********/

.project-page
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

.project-page h3
{
    text-align: center;
}

div.donate-button
{
    font-size: large;
    color: white;
    text-align: center;
    text-transform: capitalize;
    display: block;
}

.project-title-hidden
{
    display: none;
}

/************* Footer ********/

#footer
{
    text-align: center;
    font-size: small;
    font-variant: small-caps;
    font-style: oblique;

    border-top: 1px #C8A2C8 dashed;
    margin-top: 30px;
}

#footer p.left
{
    float: left;
    position: relative;
    top: 0;
    width: 33%;
}

#footer p.middle
{
    float: left;
    position: relative;
    top: 0;
    width: 33%;
}

#footer p.right
{
    float: right;
    position: relative;
    top: 0;
    width: 33%;
}

#contact-form {
    margin: 0 auto;
    text-align: center;
}

form.paypal
{
    text-align: center;
}

/* antibot system. */
.nospam { display:none;}

.alert {
    margin: 0 auto;
    text-align: center;
}

.invalid-input {
    border: 1px solid red;
}