/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 27 juil. 2019, 15:08:42
    Author     : omogenot
*/

body {
    background-color: #351D1B;
    padding-left: 25%;
    padding-top: 5px;
    color: wheat;
}

a {
    text-decoration: none;
    color: chocolate;
    font-size: 18px;
}

textarea {
  resize: none;
}

fieldset {
    border: 2px solid wheat;
    border-radius: 6px;
    color: wheat;
    padding: 10px;
}

button, input.button, input.submit {
    border-radius: 12px;
}

#frame {
    width: 800px;
    height: 750px;
    background-color: #452D2B;
    background-image: url("img/Shona-Banner.PNG");
    background-repeat:no-repeat;
    background-position: top;
}

#banner {
    height: 100px;
}

#title {
    padding-left: 100px;
    font-size: 36px;
    color: wheat;
}

#subtitle {
    font-size: 22px;
}

#content {
    height: 700px;
}

#notebook {
    transform: rotate(-15deg) translate(-2em, 2em);
    transform-origin: 0 0;
    float: left;
    position: absolute;
    left: 320px;
    top: 150px;
    height: 700px;
    width: 400px;
    background-image: url("img/cahier-image2.png");
    background-repeat:no-repeat;
    background-position: top;
    opacity: 0.80;
}

#notetext {
    color: #452D2B;
    font-size: 18px;
    padding-left: 65px;
    padding-right: 5px;
}

.picture {
    padding-top: 33px;
    padding-left: 25px;
    width: 186px;
    height: 176px;
}

#picture1, #picture2 {
    transform: rotate(15deg) translate(-2em, 2em);
    transform-origin: 0 0;
    vertical-align: top;
    float: right;
    position: absolute;
    left: 950px;
    background-color: #452D2B;
    background-image: url("img/polaroid2.png");
    background-repeat:no-repeat;
    background-position: top;
    width: 260px;
    height: 277px;
    color: #452D2B;
    font-size: 14px;
}

#picture1 {
    top: 90px;
}

#picture2 {
    top: 360px;
}

/* The Modal (background) */
div.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 90; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 160px;
}

/* Modal Content/Box */
div.modal-dialog {
    background-color: wheat;
    margin: 5px auto; /* 15% from the top and centered */
    border: 2px solid #95010F;
    width: 420px; /* Could be more or less, depending on screen size */
    height: 150px;
    color: brown;
    text-align: center;
    vertical-align: central;
    font-size: 24px;
}

#FIRSTNAME {
    visibility: hidden;
}