@charset "utf-8";
body,
td,
th {
    color: #000;
    background: url(../images/tibetan-prayer-flags.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif
}

a[href^="http://"] {
    content: url(../images/external.png) center right no-repeat!important;
    padding-right: 10px
}

.centre,
nav,
aside {
    text-align: center
}

header,
footer {
    min-height: 100px;
    max-height: 120px
}

h1 {
    font-size: 2vw;
    color: #801b23
}

h2 {
    font-size: 1.5vw;
    color: #801b23
}

h5 {
    color: #801b23
}

.main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
    margin: 1px;
    min-height: 72em;
    padding: 1px
}

.main > article {
    background: #ffc;
    border: 1px solid #801b23;
    border-radius: 7pt;
    -webkit-box-flex: 3;
    -webkit-flex: 3 1 80%;
    -ms-flex: 3 1 80%;
    flex: 3 1 80%;
    max-height: 72em;
    overflow-y: auto;
    margin: 4px;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    padding: 5px
}

.main > nav {
    background: #801b23;
    border: 1px solid #801b23;
    margin: 4px;
    border-radius: 7pt;
    -webkit-box-flex: 1;
    -webkit-flex: 1 6 12em;
    -ms-flex: 1 6 12em;
    flex: 1 6 12em;
    max-height: 72em;
    min-width: 150px;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    padding: 5px
}

.main > aside {
    background: #801b23;
    border: 1px solid #000;
    border-radius: 7pt;
    -webkit-box-flex: 1;
    -webkit-flex: 1 6 12em;
    -ms-flex: 1 6 12em;
    flex: 1 6 12em;
    margin: 4px;
    max-height: 72em;
    min-width: 150px;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
    padding: 5px
}

header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #ffc;
    border: 3px solid #801b23;
    border-radius: 7pt;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    flex: 1 1 0;
    margin: 1px;
    max-width: 100%;
    min-height: 100px;
    padding: 5px
}

footer {
    align-items: center;
    background: #ffc;
    border: 3px solid #801b23;
    border-radius: 7pt;
    color: #801b23;
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    margin: 1px;
    min-height: 100px;
    padding: 1px
}

.i100 {
    max-height: 80px;
    width: auto
}

.cover {
    float: left;
    max-height: 200px
}

.fa-cover {
    float: right;
    max-Height: 200px
}

.limage {
    width: 80%;
    height: auto
}

.simage {
    width: 50%;
    height: auto
}

.mimage {
    width: 30%;
    height: auto
}

.old {
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
}

.new {
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
}

@media all and (max-width: 900px) {
    .main,
    page {
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
    }
    .main > aside,
    .main > nav {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
        width: 47%
    }
    .main > nav,
    .main > aside,
    header,
    footer {
        max-height: 50px;
        min-height: 50px
    }
    h1 {
        color: #801b23;
        font-size: 2vw
    }
    h2 {
        font-size: 2vw;
        color: #801b23
    }
    .i100 {
        max-height: 45px;
        width: auto
    }
}

@media all and (max-width: 770px) {
    .i100 {
        max-height: 40px;
        width: auto
    }
    h1 {
        font-size: 3vw
    }
    h2 {
        font-size: 3vw
    }
    footer {
        font-size: 2vw
    }
    .cover {
        float: left;
        max-height: 130px
    }
    .fa-cover {
        float: right;
        max-height: 130px
    }
}

@media all and (max-width: 320px) {
    .i100 {
        max-height: 30px;
        width: auto
    }
    h1 {
        font-size: 4vw
    }
    h2 {
        font-size: 4vw
    }
    footer {
        font-size: 2vw
    }
    .cover {
        float: left;
        max-height: 100px
    }
    .fa-cover {
        float: right;
        max-height: 100px
    }
}