/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*TEMPLATE PART*/
header{
display: flex;
justify-content: space-around;
margin-top: 15px;
}
textArea{
border: 3px solid rgb(14, 53, 105);
}
#logo{
margin-top:0px;
}
h1{
font-size: 2em;
text-align: center;
margin-top: 100px;
}
#menu{
display: flex;
list-style-type: none;
margin-top: 29px;
}
body{
font-family: "Dosis", sans-serif;
width: 100%;
background-size: 50%;
background-image: linear-gradient(#9b9b9b 1%,#d5e5ea, #f8f8f8 19%),url("../images/background.jpg");
}
.textArea{
height: 500px;
width: 80%;
resize: none;
margin: 20px;
position: relative;
left: 100px;
}
.textAreaDiv{
width: 100%;
}
.textAreaDiv label{
position: relative;
left: 120px;
}
#menu li{
font-size: 1.3em;
margin-right: 32px;
}
#menu a{
color: rgb(27, 35, 59);
}
footer{
width: 100%;
margin-top: 186px;
text-align: center;
height: 80px;
background-color: rgb(63, 63, 63);
}
footer a{
color: white;
position: relative;
top: 40%;
}
footer a:hover{
color: white;
position: relative;
top: 40%;
}
input{
border-radius: 100px;
padding: 11px;
border: 2px solid rgb(14, 53, 105);
}
.messageForm{
display: flex;
flex-direction: column;
align-items: center;
font-size: 2em;
}
.messageForm label{
margin-top: 20px;
margin-bottom: 20px;
}
.messageForm div{
margin-bottom: 20px;
}
#logo{
width: 20%;
position: relative;
right: 10%;
}
/*HOME PART*/
#addPlaylistButton{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
#playlistButton2{
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.optionListedVideo{
margin-bottom: 10px;
}
#playlistTitleInput{
width: 200px;
border: 4px solid;
}
#videoList{
white-space: nowrap;
}
.divTitle{
overflow: hidden;
}
#ListedVideosAndButton{
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
}
#player{
position: relative;
top: -31px;
}
.videoIdContainer{
display: none;
}
#makeList{
display: flex;
justify-content: space-around;
margin-top: 100px;
}
#videoList{
display: flex;
flex-direction: column;
width: 100%;
}
.divListedVideo{
border: 1px black solid;
padding: 10px;
margin-bottom: 47px;
border-radius: 2px;
box-shadow: 10px 5px 5px #3a484e;
background-color: white;
}
.divListedVideo span{
margin-right: 10px;
}
#results{
background-color: #d5e5ea;
width: 100%;
height: 1000px;
overflow: hidden;
overflow-y: visible;
display: flex;
flex-wrap: wrap;
border: 4px solid rgb(60, 62, 50);
width: 80%;
padding: 20px;
font-size: 0.8em;
font-family: 'Montserrat';
font-weight: 900;
}
#results img{
height: 112px;
}
#results img:hover{
cursor: pointer;
}
.insertionLine{
border: 2px dotted black;
position: relative;
bottom: 74px;
height: 10px;
}
.resultContainer{
width: 32%;
}
#results div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
}
#searchTool{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
#search{
border: 4px solid;
width: 200px;
}
/*CONTACT PART*/
#mailInputIndication{
color: red;
font-size: 0.6em;
display: none;
text-align: center;
}
/*WATCH PART*/
#divWatchPlaylist{
margin-top: 200px;
margin-bottom: 100px;
}
#watchPlaylist{
position: relative;
margin-left: 13%;
}
#playlistTitle{
font-size: 6em;
text-align: center;
margin-top: 25px;
position: relative;
bottom: 104px;
}
/*INSTRUCTIONS PART*/
#instructions{ margin-left: 26%;
text-align: center;
font-size: 26px;
width: 80%;
margin: auto;
line-height: 46px;
background-color: white;
}
#instructions_photo{
margin-left: 34%;
height: 303px;
}
/*ADMIN CONNEXION PART*/
#enterLogin{
text-align: center;
font-family: "Goudy Bookletter 1911", sans-serif;
}
#adminLogo{
width: 28%;
}
/*MAILBOX PART*/
#logout{
margin-left: 78%;
position: relative;
top: 0px;
}
td{
width: 20%;
text-align: center;
margin-bottom: 10px;
}
.listedMessage{
display: flex;
justify-content: space-around;
}
#listedMessages{
min-height: 170px;
width: 100%;
}
#messageList{
background-color: white;
margin-left: 1%;
margin-right: 25%;
margin-top: 100px;
width: 97%;
border: 4px double rgb(0, 0, 0);
height: 230px;
padding-top: 15px;
}
#messageListFooter{
display: flex;
flex-direction: column;
align-items: center;
position: relative;
top: -61px;
}
/*VUE MESSAGE*/
#seeMessage{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 10px;
margin-top: 100px;
font-size: 1.2em;
}
#responseForm{
width: 58%;
height: 263px;
border: 1px solid rgb(77, 49, 23);
}
#textArea2{
width: 100%;
height: 263px;
padding: 17px;
}
#seeMessage h3{
margin-bottom: 20px;
font-weight: 800;
font-size: 2em;
text-align: center;
background-color: rgba(255, 255, 255, 0.74);
}
#seeMessage div{
margin-bottom: 50px;
width: 58%;
text-align: center;
padding: 17px;
border: 2px solid grey;
background-color: white;
}
#messageListInput{
margin-top: 40px;
background-color: rgb(170, 0, 0);
color: rgb(255, 255, 255);
}
@media all and (max-width: 768px)
{
/*TEMPLATE PART*/
#logo{
position: initial;
bottom: 57px;
}
.input-group{
display: initial;
}
#menu{
position: relative;
left: 50px;
margin-top: 64px;
font-size: 1.2em;
}
/*HOME PART*/
#ListedVideosAndButton {
margin-bottom: 49px;
width: 74%;
}
span.glyphicon {
font-size: 1.5em;
}
.insertionLine{
bottom: 89px;
height: 20px;
}
.resultContainer{
width: 50%;
}
#ListedVideosAndButton{
margin-bottom: 49px;
width: 50%;
}
#player{
top: -75px;
}
#makeList{
flex-direction: column;
width: 100%;
align-items: center;
}
/*MAILBOX PART*/
#logout{
margin-left: 32%;
}
#messageListFooter{
top: -42px;
}
/*WATCH PART*/
#watchPlaylist{
position: relative;
left: 3%;
bottom: 50px;
margin-bottom: 320px;
}
#playlistTitle{
font-size: 4em;
text-align: center;
position: relative;
bottom: 17px;
margin-bottom: 100px;
}
/*INSTRUCTIONS*/
#instructions_photo {
margin-left: 23%;
margin-bottom: 20px;
margin-top: 100px;
}
#instructions{
font-size: 2.2em;
}
/*CONTACT PART*/
.textAreaDiv label{
width: 70%;
text-align: center;
}
.textArea{
height: 500px;
width: 76%;
resize: none;
}
/*LOGIN PART*/
#enterLogin{
margin-top: 100px;
font-size: 20px;
margin-bottom: 36%;
}
}
@media all and (max-width: 375px)
{
/*TEMPLATE PART*/
#logo{
width: 80%;
margin-top: 0px;
}
#menu{
position: relative;
left: 10px;
margin-bottom: 64px;
margin-top: 20px;
font-size: 1.1em;
}
header{
align-items: center;
flex-direction: column;
}
/*HOME PART*/
.resultContainer{
width: 100%;
}
#player{
top: -97px;
height: 252px;
width: 373px;
}
#ListedVideosAndButton{
width: 68%;
}
/*WATCH PART*/
#watchPlaylist{
width: 100%;
height: 279px;
top: 4px;
bottom: 0px;
left: 0px;
margin-bottom: 190px;
}
#playlistTitle{
font-size: 2em;
position: relative;
bottom: 17px;
margin-bottom: 30px;
}
/*INSTRUCTIONS PART*/
#instructions{
font-size: 1.4em;
}
#instructions img{
width: 15%;
}
#instructions_photo {
margin-left: 3%;
height: 230px;
margin-top: 34px;
}
/*CONTACT PART*/
.messageForm label{
width: 100%;
text-align: center;
}
#menu li{
color: rgb(14, 53, 105);
margin-right: 19px;
}
.textArea{
left: 21px;
}
.textAreaDiv label{
left: -10px;
}
/*MAILBOX PART*/
#logout{
margin-left: 13%;
}
#messageList{
height: 300px;
}
#messageListFooter{
top: 11px;
}
#listedMessages{
min-height: 208px;
}
/*LOGIN PART*/
#enterLogin{
height: 383px;
}
}