/* CSS Document */

/* Primary Elements */

html, body { 
 background-color: #FFF;
 font-family: 'Open Sans', sans-serif;
}

/* VER 2.0 Div Elements */

#poksheader {
	position:fixed;
	text-align: center;
	word-spacing: 25px;
	line-height:45px;
	top:50px;
	left:0px;
	width:100%;
}

#pokscontent {
	position: absolute;
	font-size: 25px;
	text-align: center;
	line-height:40px;
	top: 16%;
	left: 0px;
	width:100%;
}

#poksheadera {
	position:fixed;
	text-align: center;
	word-spacing: 25px;
	line-height:45px;
	top:40px;
	left:0px;
	width:100%;
}

#pokscontenta {
	position: absolute;
	color: 000;
	font-size: 18px;
	text-align: center;
	top: 20px;
	width: 98%;
}

.logincovidnote {
	text-align: center;
	font-size: 40px;
	color: black;
}

/* VER 1.0 Div Elements */

#centerlogo {
 position:absolute;
 text-align: center;
 word-spacing: 25px;
 line-height:1px;
 top:50px;
 left: 0;
 width: 100%;
}

#topleftlogo {
 position:absolute;
 text-align: left;
 word-spacing: 25px;
 line-height:1px;
 top:5px;
 left:5px;
}

#loginlogo {
 position:absolute;
 text-align: center;
 word-spacing: 0px;
 line-height:1px;
 top:17%;
 left: 0;
 width: 100%;
}

#headermenu {
	position: fixed;
	color: lightgrey;
	font-size: 20px;
	text-align: right;
	top: 10px;
	right:10px;
	width: 100%;
	opacity: 1;
}

#resultstext {
	position: fixed;
	color: 000;
	font-size: 14px;
	text-align: left;
	top: 20%;
	left:25%;
	width: 50%;
}

#centertext {
	position: absolute;
	color: 000;
	font-size: 30px;
	text-align: center;
	top: 150px;
	left:5%;
	width: 90%;
}

#resultstexta {
	position: absolute;
	color: 000;
	font-size: 14px;
	text-align: center;
	top: 30px;
	left:5%;
	width: 90%;
}

/*-------------------START OF FORM ELEMENTS DESIGN-------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  font-size: 80px;
  text-align:center;
  border: 3px solid #000;
  border-right: none;
  padding: 5px;
  height: 140px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #363636;
}

.loginButtona {
  color: #fff;
  border-radius: 5px 5px 5px 5px;
  background: #000;
  border: 1px solid #000;
  width: 50%;
  height: 60px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
}

.loginInputa {
  width: 100%;
  border: 3px solid #000;
  font-size: 30px;
  text-align:center;
  padding: 10px;
  height: 30px;
  border-radius: 5px 5px 5px 5px;
  outline: none;
  color: #363636;
}

.loginInput {
  margin: 0 -10px;
  width: 100%;
  font-size: 40px;
  text-align:center;
  border: 3px solid #000;
  padding: 10px;
  height: 90px;
  border-radius: 3px 3px 3px 3px;
  outline: none;
  color: #363636;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 200px;
  height: 156px;
  border: 1px solid #000;
  background: #000;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.loginButton {
  color: #fff;
  background: #000;
  border: 1px solid #000;
  width: 100%;
  height: 150px;
  font-size: 60px;
  text-align: center;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 90%;
  font-size: 40px;
  text-align:center;
  position: absolute;
  top: 50%;
  left: 50%;
  line-height:125px;
  transform: translate(-50%, -50%);
}

.wrapsearch{
  width: 80%;
  font-size: 40px;
  text-align:center;
  position: absolute;
  top: 15%;
  left: 50%;
  line-height:45px;
  transform: translate(-50%, -50%);
}

/*Resize the wrap to see the Results etc*/
.wrapresults{
  width: 80%;
  font-size: 30px;
  text-align:center;
  position: absolute;
  top: 40%;
  left: 50%;
  line-height:45px;
  transform: translate(-50%, -50%);
}

.wrapresultssearch{
  width: 100%;
  font-size: 20px;
  text-align:center;
  position: absolute;
  left: 0px;
  top: 0px;
  line-height:45px;

}

/*Adminareawrapthing*/
.wrapa{
  width: 50%;
  position: absolute;
  top: 55%;
  left: 50%;
  line-height:75px;
  transform: translate(-50%, -50%);
}

/*Generic Buttons*/
.button {
  background-color: #ff000c; /* Red */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

.button1 { /* IN BODY BIG BUTTONS */
  background-color: #ff000c; /* Red */
  color: black; 
  border: 2px solid #ff000c; /* Red */
  width: 100%;
  height: 150px;
  font-size: 60px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.button2 { /* DASHBOARD CANCEL BUTTONS */
  background-color: #ff000c; /* Red */
  color: black; 
  border: 2px solid #ff000c; /* Red */
  width: 100%;
  height: 100%;
  font-size: 30px;
  text-align: center;

}

.button3 { /* FOOTER BUTTONS */
  background-color: #ff000c; /* Red */
  color: black; 
  border: 2px solid #ff000c; /* Red */
  width: 100%;
  height: 50px;
  font-size: 25px;
  text-align: center;
}

.button4 { /* BROWSE SONGLIST BUTTON */
  background-color: #000; /* Red */
  color: lightgrey; 
  border: 2px solid #000; /* Red */
  width: 100%;
  height: 150px;
  font-size: 60px;
  text-align: center;
}


/*----------------END OF FORM ELEMENTS DESIGN-------------------*/

#footer {
	position: fixed;
	color: lightgrey;
	font-size: 12px;
	text-align: center;
	bottom: 15px;
	left:0;
	width: 100%;
	opacity: 1;
}

#actionbar {
	position: fixed;
	font-size: 25px;
	text-align: center;
	bottom: 0px;
	left: 0px;
	width:100%;
	height:120px;
	word-spacing: 50px;
	background-color: #000; /* Black */
}

#actionbara {
	position: fixed;
	font-size: 15px;
	text-align: center;
	bottom: 0px;
	left: 0px;
	width:100%;
	height:50px;
	word-spacing: 50px;
	background-color: #000; /* Black */
}

.actionbarmover {

}

#dashbrowse {
	position: fixed;
	font-size: 25px;
	text-align: middle;
	line-height:100px;
	bottom: 120px;
	height: 150px;
	left: 0px;
	width:100%;
}

.elementalmenu{
  position:absolute;
  top: 0; bottom: 0; left: -130px; right: 0;
  margin: auto;
  height: 98px; /*requires explicit height*/
}

.elementalmenua{
  position:absolute;
  top: 0; bottom: -68px; left: 0; right: 0;
  margin: auto;
  height: 98px; /*requires explicit height*/
}

#notifyuser {
	position: fixed;
	color: red;
	font-size: 70px;
	font-weight: bold;
	font-variant-caps: all-small-caps;
	text-align: center;
	bottom: 140px;
	left:0;
	width: 100%;
	opacity: 1;
}

#bottomfadedlogo {
	position: fixed;
	text-align: left;
	bottom: -10px;
	left:0;
	opacity: 0.5;
}

.confirmbuttonwidth {
	text-indent: -40px;
	word-spacing: 120px;
}

/* Table Style */

.styled-table {
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 30px;
    font-family: sans-serif;
	width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
    background-color: #000;
    color: #ffffff;
    text-align: center;
	font-size: 50px;
	font-variant-caps: all-small-caps;
	height: 130px;
}

.styled-table th,
.styled-table td {
    padding: 8px 7px;
	height: 90px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #000;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 5px solid #000;
}

/* Admin Table Style */

.styled-atable {
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 20px;
    font-family: sans-serif;
	width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-atable thead tr {
    background-color: #000;
    color: #ffffff;
    text-align: center;
	font-size: 25px;
	font-variant-caps: all-small-caps;
	height: 30px;
}

.styled-atable th,
.styled-atable td {
    padding: 4px 3px;
	height: 20px;
}

.styled-atable tbody tr {
    border-bottom: 1px solid #000;
}

.styled-atable tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-atable tbody tr:last-of-type {
    border-bottom: 5px solid #000;
}

/* Admin Table FOR SONG LIST */

.styled-atable2 {
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 20px;
    font-family: sans-serif;
	width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-atable2 thead tr {
    background-color: #000;
    color: #ffffff;
    text-align: center;
	font-size: 25px;
	font-variant-caps: all-small-caps;
	height: 30px;
}

.styled-atable2 th,
.styled-atable2 td {
    padding: 4px 3px;
	height: 20px;
}

.styled-atable2 tbody tr {
    border-bottom: 1px solid #000;
}

/*
.styled-atable2 tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
*/

.styled-atable2 tbody tr:last-of-type {
    border-bottom: 5px solid #000;
}


/* Link Colouring */

A:link { COLOR: lightgrey; TEXT-DECORATION: none; font-weight: normal }
A:active { COLOR: red; TEXT-DECORATION: none }
A:visited { COLOR: lightgrey; TEXT-DECORATION: none }
A:hover { COLOR: #ff9600; TEXT-DECORATION: none; font-weight: none }

.brightness {
    display: inline-block;
}
.brightness:hover {
    opacity: .5;
}