@import url('https://fonts.googleapis.com/css?family=Reem+Kufi&display=swap');

body, p, h1, h2, h3, ul {
  margin:0;
}

ul li {
  list-style-type:square;
}

a {
  color:inherit;
  text-decoration:none;
}

header, section, footer {
  display:block;
}

h1 {
  text-align:center;
  font-size:32px;
  font-family:'MI';
  color:#2b271d;
}

h2 {
  color:#2b271d;
}

p {
  font-size:18px;
}

img {
  max-width:100%;
}

body {
  height:100%;
  width:100%;
  background-color:#8a9d5c;
  color:#5c5133;
  background-image:url('/img/layout/bg.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
  font-family: 'Reem Kufi', sans-serif;
  font-size:18px;
}

hr {
  border:none;
  height:0;
  border-bottom:1px solid #0000006e;
}

/************************************************************************************************************************/

#wrapper {
  position:absolute;
  display:block;
  height:100%;
  width:100%;
}

#top, #mid, #btm {
  display:block;
	position:relative;
  width:100%;
}

#top {
  height:130px;
  background-color:rgba(0,0,0,0.65);
  border-bottom:1px solid #000;
  box-sizing:border-box;
}

#mid {
  min-height:calc(100% - 310px);
}

#btm {
  height:180px;
  border-top:1px solid #000;
  box-sizing:border-box;
  text-align:center;
  color:#b0c545;
  background-color:rgba(0,0,0,0.65);
}

nav {
  height:130px;
  line-height:130px;
  text-align:center;
  font-family:'MI';
  font-size:28px;
  color:#fcae26;
}

nav a {
  display:inline-block;
  margin:0 10px;
}

nav a:hover {
  text-shadow:0 0 3px #fcae26;
}

.content-w {
  position:relative;
  width:1600px;
  max-width:100%;
  margin:0 auto;
}

#mid .content-w {
  border:1px solid #000;
  box-sizing:border-box;
  background-color:rgba(204,207,157,0.8);
  min-height:100px;
  padding:20px;
  box-sizing:border-box;
}

#mid .content-w:nth-child(n+2) {
  margin-top:20px;
}

.left {
  padding-right:10px;
}

.right {
  padding-left:10px;
}

.full, .onefourth, .onethird, .half, .twothird, .threefourth {
  display:inline-block;
  vertical-align:top;
  box-sizing:border-box;
  text-align:center;
  padding:15px;
  
  background-color:#f5f3e87d;
  border:1px solid #0000006e;
  margin:10px;
}

.full {
  width:calc(100% - 20px);
}

.onefourth {
  width:calc(25% - 20px);
}

.onethird {
  width:calc(33% - 20px);
}

.half {
  width:calc(50% - 20px);
}

.twothird {
  width:calc(67% - 20px);
}

.threefourth {
  width:calc(75% - 20px);
}

/* ------------------------------------------------------------------------------- */

form table {
  margin:0 auto;
  max-width:100%;
  width:400px;
}

form table tr td {
  height:32px;
}

form table tr td:first-child {
  text-align:right;
  font-weight:bold;
}

form table tr td:nth-child(2) {
  width:200px;
  text-align:center;
}

form table tr td:nth-child(2) input, form table tr td:nth-child(2) select {
  width:200px;
}

input, select {
  border:1px solid #333;
  box-sizing:border-box;
  padding:0 8px;
  height:32px;
  border-radius:3px;
  background-color:#eee;
}

input [type=submit] {
  cursor:pointer;
}

/* ------------------------------------------------------------------------------- */

/*************************************/

.notif {
	display: table;
	position: relative;
	min-height: 45px;
	width: 50%;
	margin: 20px auto;
	text-align: left;
	box-sizing: border-box;
	background-color: #f5f3e87d;
	border: 1px solid #0000006e;
}

.notificon, .notifmsg {
  display:table-cell;
  vertical-align:middle;
}

.notificon {
  width:75px;
  text-align:center;
  padding:15px 0;
  color:#eee;
}

.notifmsg {
  padding:15px;
}

.msg_info {
  /*border-color:#104f55;*/
}

.msg_info .notificon {
  background-color:#104f55;
}

.msg_scs {
  /*border-color:#aed04f;*/
}

.msg_scs .notificon {
  background-color:#aed04f;
}

.msg_warn {
  /*border-color:#e39534;*/
}

.msg_warn .notificon {
  background-color:#e39534;
}

.msg_err {
  /*border-color:#c54129;*/
}

.msg_err .notificon {
  background-color:#c54129;
}

.msg_event {
  /*border-color:#876d4e;*/
}

.msg_event .notificon {
  background-color:#876d4e;
}

/*************************************/

.wolfselector img, .wolfselector span {
  display:inline-block;
}

.wolfselector img {
  max-width:49%;
}

.wolfselector span {
  height:32px;
  width:49%;
  box-sizing:border-box;
  line-height:32px;
}

.wolfselector span.m {
  background-color:#eee;
}

.wolfselector span.f {
  background-color:#eee;
}

/*Hide radio*/
.wolfselector [type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.wolfselector [type=radio] + img, .wolfselector [type=radio] + span {
  cursor: pointer;
}

/* Style on check */
.wolfselector [type=radio] + img, .wolfselector [type=radio] + span {
  border:1px solid transparent;
  border-radius:2px;
}

.wolfselector [type=radio] + img {
  border:1px solid transparent;
}

.wolfselector [type=radio] + span {
  border:1px solid #000;
  border-radius:3px;
}

.wolfselector [type=radio]:checked + img {
  border-color:#eee;
  background-color:rgba(0,0,0,0.2);
}

.wolfselector [type=radio]:checked + span {
  border-color:#333;
  font-weight:bold;
}

.wolfselector [type=radio]:checked + span.m {
  background-color:#addaf0;
}

.wolfselector [type=radio]:checked + span.f {
  background-color:#f2acac;
}