/*      TYPOGRAPHIE
*
*       Elements principaux de la page
*           - header / menu footer / h / a ...
*
*       Page d'accueil "home.php"
*           
*       Page des chapitres "displayPosts.php"
*
*       Page d'un chapitre et ses commentaires "displayPost.php"
            - affichage d'un chapitre
*           - formulaire ajout de commentaire
*           - affichage et action sur les commentaires
*
*       Page contact "contact.php"
*           - formulaire de contact
*
*       Pages administrateur login.php / admin.php
*           - formulaire de connection
*           - Tous les formulaires pour le CRUD
*           - tinyMce
*       
/*___________________________________________________________________________*/
/*
*
*       Elements principaux de la page
*
*/
@font-face
{
    font-family:'NotoSerif';
    src: url('../fonts/NotoSerif-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    background-image: url("../images/backgroundAlaska.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color:#464646;
    width: 100%;
    color: black;
    display: flex;
    
    flex-direction: column;
    overflow-x: hidden;
    font-family: 'NotoSerif';
    margin: 0;
}

h1 {
    display: flex;
    justify-content: space-around;
    font-size: 90px;
    font-weight: bold;
    color: white;
    margin-bottom: 0;
}
.titleSection {
    display: none;
}
#titleBook {
    display: flex;
    justify-content: space-around;
    font-size: 50px;
    color: black;
    margin-bottom: 0;
}

h2 {
    display: flex;
    justify-content: space-around;
    font-size: 40px;
    color: black;
    margin-bottom: 30px;
    text-align: center;
}

#menu {
    background-color: black;
    opacity: 0.6;
    width: 100%;
    height: 100px;
    display: flex;
    margin-top: 20px;
    position: relative;
    z-index: 20;
}

#menuNavigation {	
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    font-size: 25px;
    width: 100%;
    margin: auto;
    padding: 0;
    align-items: center;
}

.menuAdmin:hover > ul {
    background-color:white;
    padding: 5px;
    display: block;
}

.sousMenu {
    display: none;
    position: absolute;
    list-style-type: none;
    font-size: 15px;
}

.sousMenu a {
    color: black;
    font-size: 15px;
    z-index: 5;
}

a:hover {	
    text-decoration: none;	
}

a {	
    text-decoration: none;	
    color: white;	
}
/*
*      
*    home.php       
*
*/
.linkAllTickets {
    color: aqua;
}

#contentPresentation {
    background-color: white;
    opacity: 0.8;
    width: 90%;
    min-height: 500px;
    margin: auto;
    margin-top: 5%;
    position: relative;
    display: flex;
    align-items: center;
}

#jeanForteroche {
    display: flex;
    width: 50%;
    position: relative;
    margin: 5px;
}

#contentPhoto {
    display: flex;
   align-items: center;
}

.photoAuthor {
    width: 100%;
    display: flex;
    z-index: 1;
}

#contentText {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: justify;
    padding: 15px;
}

#library {
    background-color: white;
    opacity: 0.8;
    margin-top: 20px;
    
}

#library h3 {
    font-size: 35px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#library h4 {
    font-size: 25px;
}

#oneLibrary {
    width: 90%;
    min-height: 500px;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#photoBook {
    display: flex;
    width: 50%;
    position: relative;
    margin: 5px;
}

#nameBookOne {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photoBook {
    width: 100%;
    display: flex;
    z-index: 1;
}

.imgBook {
    width: 60%;
    margin: auto;
}

#infosBookOne {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 50px;
    margin-left: 50px;
    text-align: justify;
}
/*
*
*       displayPosts.php
*
*/
.contentPosts {
    width: 90%;
    margin: auto;
    margin-top: 40px;
    border: 2px solid black;
    margin-bottom: 20px;
    background-color: white;
}

#post {
    padding: 20px;
}

#titleListTicket {
    display: flex;
    justify-content: space-around;
    font-size: 40px;
    color: black;
}

.more {
    color: green;
    font-size: 10px;
}
.titleTickets {
    background-color: #B7C9F3;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 2px solid black;
}

.titleTicket {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 40px;
    font-size: 25px;
    text-align: center;
}

.titleTicket a {
    color: black;
}

.postContent {
    margin-left: 30px;
    margin-right: 30px;
}

.postText {
    width: 90%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.linkComment {
    margin-left: 5px;
    margin-bottom:5px;
    color: black;
}

.link {
    color: black;
}
/*
*
*       displayPost.php
*
*
*/
#commentDisplay {
    width: 70%;
    margin: auto;
    border: 2px solid black;
    margin-bottom: 0px;
    background-color: white;
}

#formAddComment {
    width: 70%;
    margin: auto;
    border: 2px solid black;
    margin-bottom: 20px;
    background-color: ghostwhite;
}

#formAddComment p {
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;
}

#citation {
    border: 1px solid black;
    border-radius: 5px;
    text-align: center;
    flex-direction: column;
    margin: auto;
    display: flex;
    width: 65%;
    margin-bottom: 20px;
    padding: 5px;
}

#formTitle {
    margin: 0;
    padding: 10px;
    background-color: #B7C9F3;
    color: black;
    font-size: 20px;
    text-align: center;
    
}

#formContent {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 10px;
}

.dateInfos {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0;
    font-size: 14px;
    font-style: italic;
}

#submitComment {
    width: 60%;
    font-size: 15px;
    padding: 5px;
    margin: 20px;
    margin: auto;
    border-radius: 5px;
    background-color: #90abea;
}

#AllCommentDisplay {
    margin-bottom: 10px;
}

#commentAuthorContent {
    background-color: #B7C9F3;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

#commentAuthor {
    padding-left: 5%;
    
}

#commentAuthor strong {
    font-size: 15px;
}

#commentContent {
    padding-left: 5%;
    font-size: 15px;
}

#comment {
    width: 80%;
    height: 90px;
}

#actionComment {
    display: flex;
    justify-content: flex-end;
    background-color: aliceblue;
}

#actionComment p {
    padding-right: 10px;
}

#linkDeleteComment {
    color: black;
    margin-left : 10px;
}
/*
*
*   formContact.php
*
*/
#blocFormContact {
    margin: auto;
    width: 80%;
    text-align: center;
}

#formContent input {
    margin: 3px;
}

#formContact {
    background-color: #B7C9F3;
    margin-bottom: 20px;
    width: 80%;
    margin: auto;
    right: 10%;
    top: 10%;
    margin-top: 20px;
}

#formContactInput { 
    margin-left: 20px;
    margin-right: 20px;
}

#formContactInput input {
    margin-bottom: 10px;
}

#inputContact {
    width: 20%;
}

#inputContactName, #inputContactFirstName {
    width: 30%;
}
 
#inputContactEmail, #inputContactTitle {
    width: 50%;
}

#inputContactMessage {
    width: 100%;
}

#buttonSend {
    max-width: 30%;
    border-radius: 10px;
    padding: 5px;
    margin-top: 15px;
}
/**
*
*   adminLogin.php
*
*/
#formConnection {
    width: 70%;
    margin: auto;
    border-radius: 0px 30px 0 30px;;
    margin-top: 50px;
    margin-bottom: 20px;
    background-color:  #B7C9F3;
}

#formConnectionContent {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto;
}

#report {
    color: green;
}

#reportSignal {
    color:red;
}

#listComments {
    list-style-type: none;
}
/*
*
*   admin.php
*
*/
.blockAdmin {
    padding-bottom: 25px;
    border-bottom: 3px solid #B7C9F3;
}

.blockAdmin h3 {
    font-size: 25px;
    text-align: center;
}

#addPost, .fa-readme, .fa-keyboard {
    color: green;
}
#addPost {
    margin-left: 10%;
}
.fa-plus {
    font-size: 20px;
    margin-left: 8px;
}

.welcomeAdmin {
    text-align: center;
}

.adminPage {
    width: 90%;
    margin: auto;
    margin-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: white;
    padding-bottom: 15px;
}

.adminLink{
    color: black;
}
.buttonActionAdmin {
    min-width: 80%;
    padding-top: 5px;
    padding-bottom: 5px;
}
.fab, .fas {
    font-size: 20px;
}
.adminLinkDelete {
    color: orangered;
}

.adminLinkReport {
    color: red;
}

table {
    width:100%;
    border-collapse: collapse;
    table-layout: fixed;
    padding: 8px;
}

table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: rgb(86, 94, 204);
    color: white;
    font-size: 17px;
    overflow: hidden;
    font-weight: 500;
    }

table tr:hover {
    background-color:rgb(73, 169, 225);

}

.tableCommentHead{
    background-color: rgba(255,255,255,0.3);
}

.tableCommentContent{
    overflow-x:auto;
    margin-top: 0px;
    border: 1px solid rgba(255,255,255,0.3);
}

td{
    padding: 15px;
    text-align: center;
    vertical-align:middle;
    font-weight: 300;
    font-size: 18px;
    border-bottom: solid 1px rgba(255,255,255,0.1);
    overflow: hidden;
}

.fa-trash-alt {
    color: red;
}

.alertDelete {
    color: red;
}
/*
*
*       formAddPost.php
*
*/
#form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    margin: auto;
    margin-top: 50px;
}

#form form {
    width: 80%;
    background-color: #B7C9F3;
    opacity: 0.8;
    margin-bottom: 10px;
}

.labelTitle {
    margin: 0;
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
}
#form p {
    margin-top: 0;
    color: white;
}

.labelContent {
    margin: 0;
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 20px;
}
#mytextarea {
    width: 100%;
    height: 200px;
}

#formButton {
    display: flex;
    margin: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: #90abea;
}
/*
*
*       footer.php
*
*/
footer {
    background-color: black;
    opacity: 0.6;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

#menuFooter {
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
    align-items: center;
    font-size: 25px;
}

#webCreator {
    color: white;
    width: 100%;
    margin: auto;
    text-align: center;
    font-size: 14px;
}

#infosFooter {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}