@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

html, body {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    background-color: #345;
}

body.waiting {
    cursor: progress;
}

#container {
    width: 100%;
    height: 100%;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.tile {
    float: left;
    position: relative;
}

.tile .title {
    position: absolute;
    margin: 0px 20px 0px 20px;
    padding-top: 20px;
    padding-bottom: 3px;
    border-bottom: solid 8px rgba(0, 0, 0, 0.4);
    text-align: left;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    letter-spacing: 0.05em;
    font-weight: bold;
    z-index: 10;
}

.resize-text {
    overflow: scroll;
}

.width-1 {  width:   8.33%; }
.width-2 {  width:  16.66%; }
.width-3 {  width:  25.00%; }
.width-4 {  width:  33.33%; }
.width-5 {  width:  41.66%; }
.width-6 {  width:  50.00%; }
.width-7 {  width:  58.33%; }
.width-8 {  width:  66.66%; }
.width-9 {  width:  75.00%; }
.width-10 { width:  83.33%; }
.width-11 { width:  91.66%; }
.width-12 { width: 100.00%; }

.height-1 {  height:   8.33%; }
.height-2 {  height:  16.66%; }
.height-3 {  height:  25.00%; }
.height-4 {  height:  33.33%; }
.height-5 {  height:  41.66%; }
.height-6 {  height:  50.00%; }
.height-7 {  height:  58.33%; }
.height-8 {  height:  66.66%; }
.height-9 {  height:  75.00%; }
.height-10 { height:  83.33%; }
.height-11 { height:  91.66%; }
.height-12 { height: 100.00%; }


@media (min-width: 640px) {
    html, body {
        height: 100%;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .tile {
        float: inherit;
        display: block;
    }
    .tile .title {
        display: block;
        position: relative;
    }
    .width-1,
    .width-2,
    .width-3,
    .width-4,
    .width-5,
    .width-6,
    .width-7,
    .width-8,
    .width-9,
    .width-10,
    .width-11,
    .width-12 {
            width: 100%;
    }

    .height-1,
    .height-2,
    .height-3,
    .height-4,
    .height-5,
    .height-6,
    .height-7,
    .height-8,
    .height-9,
    .height-10,
    .height-11,
    .height-12 {
        height: auto;
    }
}