/*
   Filename:         layout.css
   Supporting Files: background1.jpg
*/

/* Layout styles for desktop screen display */

/* Body styles */

body {
   background: url("/media/background2.jpg") round;
   margin: 0px auto;
   width: 1000px;
}

.username {
   position: absolute;
   z-index: 1;
   right: 30px;
   top: 15px;
   background-color: #EEEEEE;
   padding: 10px;
   border-radius: 5px;
   display: flex;
   gap: 10px;
}

.username-text:hover {
   cursor: pointer;
}

.username-down-chevron:hover {
   cursor: pointer;
}

.username-up-chevron:hover {
   cursor: pointer;
}

.dropdown {
   position: absolute;
   z-index: 1;
   right: 30px;
   top: 65px;
   background-color: #EEEEEE;
   padding: 10px;
   border-radius: 5px;
}

.hidden {
   display: none !important;
}

.shown {
   display: inline;
}

.dropdown {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.dropdown-button {
   padding: 10px;
   border-radius: 5px;
}

.dropdown-button:hover {
   background-color: #DDDDDD;
   cursor: pointer;

}

.delete-account-dropdown {
   color: red;
}

.confirm-account-delete {
   z-index: 1;
   position: absolute; 
   top: 200px;
   left: 0; 
   right: 0; 
   margin-left: auto; 
   margin-right: auto; 
   width: 500px; /* Need a specific value to work */
   height: 150px;
   background-color: #EEEEEE;
   padding: 45px;
   border-radius: 5px;
}

.confirm-text {
   font-size: 1.5rem;
}

.confirm-buttons {
   margin-top: 30px;
   display: flex;
   justify-content: space-evenly;
}

.confirm-button {
   padding: 15px;
   border-radius: 5px;
}

.confirm-button:hover {
   background-color: #DDDDDD;
   cursor: pointer;
}

.delete-account {
   border: 1px solid black;
   color: red;
}

/* Header styles */
header {
   width: 100%;
   align-items: center;
}

/* Welcome's message */
#Welcome {
}
#Welcome img {
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 70px;

	-moz-box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
	box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
}

.wrapper {
    width: 95%;
    height: 98%;
    padding: 5px;
    margin: 0 auto;
    background-color: #ddd;
}
.banner {
    height: 50px;
    width: 100%;
}
.banner p {
    font-size: 100%;
    line-height: 1.2em;
    float: left;
    display: inline-block;
}
.controls {
    height: 100px;
    margin: 5px 0px;
    position: relative;
}
#historyMsg {
  height: 290px;
  background-color: #fff;
  overflow: auto;
  padding: 2px;
}
#historyMsg p{
  font-size: 15px;
}
#roominfo {
    width: 80%;
    height: 200px;
    background-color: #fff;
    overflow: auto;
    padding: 2px;
}

#roominfo th, #roominfo td {
   padding: 0 15px;
}

.timespan {
    color: #ddd;
}
.items {
    height: 30px;
}
#colorStyle {
    width: 50px;
    border: none;
    padding: 0;
}
#messageInput {
    width: 80%;
    max-width: 440px;
    height: 50px;
    max-height: 90px;
    float: left;
}
#sendBtn {
    width: 19%;
    height: 40px;
    float: right;
}


/* Navigation list in header */
header nav {
  background-color: gray;

  -o-background-size: 50%;
  -moz-background-size: 40%;
  -webkit-background-size: 40%;
  background-size: 40%;

  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;

  height: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

header nav li {
   display: block;
   float: left;
   line-height: 50px;
   text-align: center;
   width: 25%;
}

header nav li a {
   color: white;
   font-variant: small-caps;
   font-size: 36px;
   font-family: 'Trebuchet MS', Helvetica, sans-serif;
   text-decoration: none;
}

header nav li a:hover {
   color: rgb(230, 252, 171);
}

/* Vertical navigation list styles */

nav.vertical {
   background: white;
   float: left;
   width: 25%;
   height: 450px;
   margin-left: 50px;
}

nav.vertical table {
  width:70%;
  margin-top: 50px;
  margin-left:15%;
  margin-right:15%;
}

/* Main section styles */
section#main {
   background: ivory;
   float: left;
   position: relative;
   top: 0px;
   left: 50px;
   width: 90%;
   height: 480px;
}

section#main table,#loginForm,#registerUserForm {
  width:50%;
  margin-top: 50px;
  margin-left:20%;
  margin-right:30%;
}

#registerUserForm h1,#loginForm h1 {
   font-size: 2rem;
   margin-bottom: 20px;
}

section#create {
   background: ivory;
   position: relative;
   margin: 20px auto 0;
   top: 0px;
   left: 0px;
   width: 65%;
   height: 450px;
}

section#create h1 {
   font-size: 42px;
   font-family: 'Times New Roman', Times, serif;
   text-align: center;
   padding-top: 10px;
   width: 100%;
}

#chatInGame {
  position: absolute;
  width: 250px;
  height: 300px;

  top: 450px;
  left: 70%;
  /* top: 130%;
  left: 250%; */
}
#askPR {
  position: absolute;
  width: 250px;
  height: 150px;

  top: 100%;
  left: 50%;
  /* top: 130%;
  left: 250%; */
}

/* Page footer styles */
footer {
   margin-top: 200px;
   font-size: 10px;
   border-top: 1px solid rgb(18, 15, 22);
   padding-bottom: 20px;
   padding-top: 10px;
   word-spacing: 5px;
   text-indent: 5px;
}

footer span {
   float: right;
   margin-right: 10px;
}

#errors {
   height:1.3em;
   color:#ee1111;
}