/*<!--
/////////////////////////////////////////////////////////////
/// Escapausorus v1 (2020)
///	A quick and dirty framework to create small adventure game (certified vanilla JS)
/// Author: Stéphanie Mader (http://smader.interaction-project.net)
/// GitHub: https://github.com/RedNaK/escaposaurus
///	Licence: MIT
////////////////////////////////////////////////////////////
-->*/

/*by default there is no margin or padding anywhere*/
*{ margin: 0px; padding: 0px; }
a{color:#cc1010;}
body{
	filter: sepia(.6);
	font-family: AnonymousBold;

	cursor: url('img/loupe.png'), auto;
}

button, a:link, a:visited, a:active {
	cursor: url('img/loupeBig.png'), auto;
}

.overlay-btn {

}

/*on veut la lightbox devant*/
.lightbox-container {
	z-index:302;
}

video{max-width: 960px;}

@font-face {
    font-family: Roboto;
    src: url('img/fonts/Roboto/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: Odibee;
    src: url('img/fonts/Odibee_Sans/OdibeeSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: Paul;
    src: url('img/fonts/Paul/Pauls_Ransom_Note.ttf') format('truetype');
}

@font-face {
    font-family: Kid;
    src: url('img/fonts/Kid/earwig_factory_rg.otf') format('truetype');
}

@font-face {
    font-family: Kid2;
    src: url('img/fonts/Kid/BlackCasper.ttf') format('truetype');
}

@font-face {
    font-family: Baskvill;
    src: url('img/fonts/Bask/BASKVILL.ttf') format('truetype');
}

@font-face {
	font-family: Anonymous;
	src: url('img/fonts/Anonymus/AnonymousPro-Regular.ttf') format('truetype');
}

@font-face {
	font-family: AnonymousBold;
	src: url('img/fonts/Anonymus/AnonymousPro-Bold.ttf') format('truetype');
}

@font-face {
	font-family: CourrierRegular;
	src: url('img/fonts/Courrier/CourierPrime-Regular.ttf') format('truetype');
}

@font-face {
	font-family: CourrierBold;
	src: url('img/fonts/Courrier/CourierPrime-Bold.ttf') format('truetype');
}

#home-gameTitle {
	color:#000000;
	font-family: Kid;
	font-size: 80px;
}

#home-gameDescription {
	color:#000000;
	font-family: Baskvill;
	font-size: 30px;
	font-weight: bold;
}

#home-mission {
	color:#000000;
	font-family: Baskvill;
	font-size: 30px;
}

/*size of the countainer defined to fit most used screen resolution*/
/*main div container*/
#main-container{
	max-width: 100vw;
	max-height:100vh;
	margin: auto;
	height:100%;
	border:1px solid #cc1010;
	text-align: center;
	position:relative;

	background: url(img/office.png);
	background-position: center;
	background-color:#cc1010;
	background-repeat: no-repeat;
	background-size: cover;
}

#main-container-index{
	max-width: 100vw;
	max-height:100vh;
	margin: auto;
	height:100%;
	border:1px solid #cc1010;
	text-align: center;
	position:relative;
}

#container-homeMission{
	width:100vw;
	height:100vh;
	/*background-color:rgb(233, 230, 186);*/
	/*padding-top:20px;*/
	/*padding-bottom:20px;*/

	background: url(img/map_monde.jpg );
	background-position: center;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-size: cover;
}

#div-homeMission{
	background-color:#dcdcdc;
	border:2px solid #cc1010;
	border-radius: 10px;
	padding:5px;
}

#os-name{
	color:#000000;
	font-size:70px;
	font-weight: bold;
	padding:0px;
	background-color:#cc1010;
	font-family: Kid;
}

#main-game-div{
	width:100%;
}

.window-btn{
	transition: background-color 0.2s ease-out, text 0.2s ease-out;
	border-radius: 5px;

}

/*shared style for app*/
.app-title{
	height:50px;
	background-color: #cc1010;
	border:1px solid white;
	color: white;
	text-align:center;
	border-radius: 10px 10px 0 0;
}

.app-title-span{
	font-family: Odibee ;
	font-size:30px;
}

/*call app*/
#callApp{
	width:500px;
	height:auto;
	padding:0 0 0 0;
	margin:50 100 12 50;
	background-color:#fff;
	border:2px solid black;
	overflow: auto;
	border-radius: 10px;

	transition: opacity 0.5s ease-out;
}

#callApp-help, #callApp-prompt{
	font-size:18px;
	padding:10px;
	text-align: center;
	background-color:#ccc;
	color:black;
}

.contact-list{
	padding:10px;
	text-align: left;
}

.contact-div{
	font-size:16px;
	text-align: left;
	margin-bottom:5px;
	font-weight: bold;
	transition: background-color 0.2s ease-out, text 0.2s ease-out;
	cursor: url('img/loupeBig.png'), auto;
}

.contact-div:hover{
	background:#cc1010;
	color:#fff;
}

.contact-avatar{
	width:36px;
	height:36px;
	margin-right:5px;
}

.no-call{
	font-weight: normal;
	font-style: italic;
	color: #000000;
}

.already-called{
	font-weight: normal;
}

/* udisk app*/
#folderApp{
	width:30vw;
	height:60vh;
	overflow: auto;
	padding:0 0 0 0;
	margin:50 0 0 150;
	background-color:#fff;
	border:2px solid black;
	border-radius: 10px;

	transition: opacity 0.5s ease-out;
}

#folderApp-content{
	padding:10px;
	text-align: left;

}

#overlay-index{
	position:absolute;
	z-index:310;
	left:0%;
	top:0%;

	width:100%;
	height:100%;
	border:1px solid white;
	background-color:#000;
	text-align: center;
}

/*the "windows" we open for video and message/password*/
#callVideo-window,
#UIvid-window{
	position:absolute;
	z-index:305;
	left:20%;
	top:10%;
	border:1px solid white;
	background-color:#000;
	width:1000px;
	text-align: center;
	border-radius: 10px;
}

.btn-closecall {
	border-radius: 10px;
}

#notnowPrompt-window,
#passPrompt-window,
#wrongPassword,
#newContact-window,
#calling-window,
#nocall-window,
#solution-window,
#credit-window{
	position:absolute;
	z-index:300;
	left:45%;
	top:35%;
	border:1px solid white;
	background-color:#000;
	width:200px;
	border-radius: 10px;
}
#message-window {
	position:absolute;
	z-index:300;
	left:30%;
	top:10%;
	border:1px solid white;
	background-color:#000;
	width:auto;
	border-radius: 10px;
}

#solution-window,
#credit-window{
	background-color:#777;
}

#solution-window{
	top:20%;
	width:400px;
}

#credit-window{
	top:5%;
	left: 35% ;
	width: 500px;;
}

/*we override part of the lightbox style*/
.lightbox-image{
	max-height:90vh;
}

#notnowPrompt-window button,
#passPrompt-window button,
#wrongPassword button,
#newContact-window button,
#UIvid-window button,
#callVideo-window button,
#calling-window button,
#message-window button,
#nocall-window button,
#solution-window button,
#credit-window button,
#overlay-index button{
	color:#fff;
	background-color: #cc1010;
	border: none;
	padding:3px;
	margin:3px;
	font-family: Roboto ;
	font-size:14px;
	font-weight:bold;
}

#notnowPrompt-window button:hover,
#passPrompt-window button:hover,
#wrongPassword button:hover,
#newContact-window button:hover,
#UIvid-window button:hover,
#callVideo-window button:hover,
#calling-window button:hover,
#message-window button:hover,
#nocall-window button:hover,
#solution-window button:hover,
#credit-window button:hover,
#overlay-index button:hover{
	background-color: #fff;
	color:#000;
}

.message-content{
	text-align:center;
	color:#fff;
	padding:5px;
	font-size:15px;

}

.solution-content{
	text-align:center;
	color:#fff;
	padding:5px;
	font-size:18px;
	background-color:#ccc;
}

.credit-content{
	text-align:center;
	color: #000000;
	padding:5px;
	background-color:#ccc;
}

#passwordInput{
	text-align:center;
	color:black;
	margin:5px;
}

#footer{
	height:38px;
	width:100%;
	background-color:#cc1010;
	position: absolute;
	padding-top:3px;
	padding-bottom:3px;
	bottom: 0;
	text-align: center;
}

.footer-button{
	color:#000;
	background-color: #fff;
	margin-right:5px;
	padding: 1px 5px;
	margin-top: 3px;
	font-family: Anonymous ;
	font-size:16px;
	font-weight:bold;
	border-radius: 5px;
	border: 1px solid #000000;
	transition: background-color 0.2s ease-out, text 0.2s ease-out;
}

.footer-button:hover{
	color:#000;
	background-color: #aaa;
}

#password{
	font-size:14px;
}

.hidden {
	display: none;
}

/*to stylize placeholder in text input in different browser...*/
::-webkit-input-placeholder { /* Edge */
  color: grey;
  text-align:center;
}

:-ms-input-placeholder { /* Internet Explorer */
  color: grey;
  text-align:center;
}

::placeholder {
  color: grey;
  text-align:center;
}


/*class that deals with the udrive content, tread carefully, it is working ok but very capricious*/
ul{
    margin: 0px 0px 0px 20px;
    list-style: none; line-height: 2em; font-family: Arial;
}

.arbo, .folder{
    font-size: 16px;
    position: relative;
}

.arbo:before{
    position: absolute;
    left: -15px;
    top: 0px;
    content: '';
    display: block;
    border-left: 1px solid #000;
    height: 1em;
    border-bottom: 1px solid #000;
    width: 10px;
}

.folder-name{
	background: url("img/iconFolder.png") left center no-repeat;
	content: '';
	display:inline-block;
	padding-left:20px;
	height:25px;
	color:black;

	font-family: Anonymous ;
	font-size:16px;
	font-weight:bold;
}

.folder-name:hover{
	text-decoration: none;
}

.protected-name{
	background: url("img/iconPassword.png") left center no-repeat;
	cursor: url('img/loupeBig.png'), auto;
	content: '';
	display:inline-block;
	padding-left:20px;
	height:25px;

	font-family: Anonymous ;
	font-size:16px;
	font-weight:bold;
}

.protected-name:hover{
}

.file-name{
	background: url("img/iconFile.png")left center no-repeat;
	content: '';
	display:inline-block;
	padding-left:20px;
	height:25px;

	font-family: Anonymous ;
	font-size:16px;
	font-weight:bold;
}

.file-name:hover{
}


.arbo:after{
    position: absolute;
    left: -15px;
    bottom: -7px;
    content: '';
    display: block;
    border-left: 1px solid #000;
    height: 100%;
}
    
.rootLI{
	font-size: 16px;
	margin: 0px 0px 0px -20px;
}

.arbo:last-child:after{ display: none }

/*for the animation of the windows we open and close*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0);
  }
}