@import url('https://fonts.googleapis.com/css?family=Niramit');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300&display=swap');



* { font-family: arial;}
html,body{ padding: 0; margin:0; height:100%; background: #000000; }

form .forfutureuse{ display:none; }

.midDiv{background: #000000; position:absolute; left:0px; right:0px; top: 190px; padding: 10px; }
.midDiv:after { clear: both; }


.xpage{ background: #000000; width: 100%; z-index:-10; padding:10px;}
.xpage{ background: #000000; position:initial; z-index:-10; padding:0% 20% 0% 20%; min-width: 800px;}
.page{ background: #000000; position:initial; z-index:-10; min-width: 600px; max-width: 1100px;}
.page:after { content: ""; display: table; clear: both; }

.footbarDiv{clear:both; background: #000000; color:#999999; width: 100%; height: 75px; position:fixed; bottom:0px; text-align:center;  z-index:99; opacity: 0.95;}
.footbar  {clear:both; background: #000000; padding: 2px 10px 2px 10px; }
.footbar   * {color:#cccccc; text-decoration:none;}
#.footbar a:visited {color:#cccccc; text-decoration:none;}
#.footbar a:hover{color: #ffffff;}


	
@media (pointer:none), (pointer:coarse) {
	.midDiv{top: 250px;}
	.page{ background: #000000; position:initial; z-index:-10; padding:0px 20px 0px 20px; min-width: 800px; font-size:30p}
	.footbarDiv{eight: 75px; position:fixed; bottom:25px; }

}

.buttonlink {display:inline-block; border:1px solid #999999; padding:15px 40px; font-size:40px;}
.buttonlink:hover {border:1px dashed #ffffff;}


.headerContainer{background: #000000; width: 100%;position:absolute; height:160px; left:0px; top:0px; right:0px;overflow: hidden;}
.headerContainer:after { content: ""; display: table; clear: both; }

.headerRightImage {height:100px; padding:0px; border: 0px solid #000000; position:absolute; right: 20px; top:20px; }
.headerLeftImage {height:100px; padding:0px; border: 0px solid #000000; position:absolute; left: 20px; top:20px; z-order:5;}
.xheaderLeftImage :hover{ border:8px solid #ff0000;left: 10px;}
.headerMidImage {width: 100%; background: url(/header_mid_image.jpg) no-repeat center center; top: 0px; background-size: 45vw; height:160px; }





.slideshowDiv{background: #ffffff; left:0px; right:0px; }
.slideshowImg{-webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;}





.NoticeDiv{ position: fixed; top:30; left: 20%; width: 60%; height: 80px; z-index: +10;  transition: all 1s ease; transform: scale(3,3);}
.NoticeDivSmaller{ position: absolute; top:-60px; left: 0px; width: 1000px; z-index: +10;  transition: all 0.2s ease; -ms-transform: scale(0.2, 0.2); -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); border:2px;}
.newsstory {vertical-align: top; background-image:url(/images/news.jpg); width: 700px; padding: 5px; float: left; overflow: hidden;}
.newsstoryside { width: 19vw; padding: 5px; float: left; background: #fefefe; }
section:after { content: ""; display: table; clear: both; }
a.small {font-size: 9px;}

a {color: #999999;}
a:hover {color: #ffffff;}
a.big {font-size:40px;font-weight:700;color:#999999;text-decoration: none;}
a.big:hover {color:#ffffff;}

img { transition: transform .2s;}
img.zoom:hover { transform: scale(1.5); }


div.newsheadlines{ width: 17.2vw; max-width: 100%; height: 8vw; padding: 0.4vw; box-shadow: 0px 0px 8px white; border: 1px solid grey; font-size:0.9vw; overflow:hidden; -webkit-transition: 0.5s; transition: 0.5;}
div.newsheadlines:hover{box-shadow: 0px 0px 8px black; border: 1px solid black;background: #eeeeee;}
a.newsheadlines{text-decoration: none; color: #000000; display:inline-block; padding: 0.4vw;}
img.newsheadlineimg {box-shadow: 0px 0px 6px #000000; height: 3.4vw; min-height: 60px;}
.xheadlinesdiv{border: 1px solid #000000; padding: 10px; background: #ffffff;}
.xheadlinesdiv:hover{ padding: 10px; }

@media only screen and (max-width: 1000px) {
   div.newsheadlines{ width: 90vw; max-width: 700px; font-size: 12px; height: 90px; border: 1px solid #bbbbbb;}
   .newsstoryside { width: 95%; padding: 5px; overflow: hidden; }
}

@media (pointer:none), (pointer:coarse) {
   div.newsheadlines{ width: 95vw; max-width: 95vw; font-size: 20px; height: 150px; border: 2px solid #888888;}
   .newsstory {vertical-align: top; background-image:url(/images/news.jpg); width: 900px; overflow:hidden; padding: 5px;}
   img.newsheadlineimg {box-shadow: 0px 0px 6px #000000; height: 140px;}
}






.vw1.5 {font-size:1.5vw;}
.vw2 {font-size:2vw;}
.vw3 {font-size:3vw;}
.vw5 {font-size:5vw;}
.roundedborder{border: 2px solid #000000; -moz-border-radius: 11px; -khtml-border-radius: 11px; -webkit-border-radius: 11px;}

.LoginDiv{ position: fixed; bottom: 2; right: 2; }
.showcookienotice{ position: fixed; bottom: 2; left: 2;  z-index:100;}





input[type=submit] { background-color: #000000; color: #cccccc; text-align: center; text-decoration: none; display: inline-block; border:1px solid #999999; font-size: 14px; -webkit-border-radius: 5px; border-radius: 5px;}
input[type=submit].big { background-color: #000000; border: 1px solid grey; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 22px; -webkit-border-radius: 5px; border-radius: 5px;}
.redbutton { background-color: #000000; border: 1px solid grey; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; -webkit-border-radius: 5px; border-radius: 5px;}
input[type=submit]:hover { background-color: #ff0000; border: 1px solid grey; color: black;}
.redbutton:hover { background-color: #ff0000; border: 1px solid grey; color: black;}

.smallbutton { background-color: #000000; border: 1px solid grey; color: white; font-weight:700; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; -webkit-border-radius: 3px; border-radius: 3px;}
.smallbutton:hover{ background-color: #ff0000; border: 1px solid grey; color: black;}


@media (pointer:none), (pointer:coarse) {
	body {font-size:30px;}
	.page {font-size:30px;}
	input[type=submit] { background-color: #000000; border: 2px solid grey; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 60px; -webkit-border-radius: 5px; border-radius: 5px;}
	input[type=submit].big { background-color: #000000; border: 2px solid grey; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; -webkit-border-radius: 5px; border-radius: 5px;}
	.redbutton { background-color: #000000; border: 1px solid grey; color: white; text-align: center; text-decoration: none; display: inline-block; font-size: 30px; -webkit-border-radius: 5px; border-radius: 5px;}
	input[type=submit]:hover { background-color: #ff0000; border: 15px solid grey; color: black;}
	.redbutton:hover { background-color: #ff0000; border: 15px solid grey; color: black;}

	.smallbutton { background-color: #000000; border: 2px solid grey; color: white; font-weight:700; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; -webkit-border-radius: 3px; border-radius: 3px;}
	.smallbutton:hover{ background-color: #ff0000; border: 10px solid grey; color: black;}
	input[type=text],input[type=password],input[type=time],textarea { font-size:30px; padding:20px; border: 2px solid #000000;}
}

.msg0 {border: 1px solid #000000;
   border-radius: 5px;
   overflow:hidden;
   overflow:none;
   width: 100%;
   spacing:10px;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   -webkit-border-radius: 5px;
   z-index:99;
}

.msgH0 {font-size: 12px; font-family:arial; color: #ffffff; background-color: #11291d; font-weight: 700; text-align: center; }
.msgB0 {font-size: 11px; font-family:arial; color: #000000; background-color: #ffffff;}

.msg1 {border: 1px solid #ff0000;
   #behavior: url(border-radius.htc);
   #position: relative;
   border-radius: 5px;
   overflow:hidden;
   overflow:none;
   width: 100%;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   -webkit-border-radius: 5px;
   z-index:99;
}
.msgH1 {font-size: 12px; font-family:arial; color:#ffff00; background-color: #ff0000; font-weight: 900; text-align: center;}
.msgB1 {font-size: 10px; font-family:arial; color:#000000; background-color: #ffff00;}

.msg2 {border: 1px solid #ff0000;
   #behavior: url(border-radius.htc);
   #position: relative;
   border-radius: 5px;
   overflow:hidden;
   overflow:none;
   width: 100%;
   -moz-border-radius: 15px;
   -khtml-border-radius: 15px;
   -webkit-border-radius: 15px;
   z-index:99;
}
.msgH2 {font-size: 12px; font-family:arial; color:#ff0000; background-color: #ffff00; font-weight: 900; text-align: center;}
.msgB2 {font-size: 10px; font-family:arial; color:#ffff00; background-color: #ff0000;}

.msg3 {border: 0px; width: 100%; spacing:10px;z-index:99;}
.msgH3 {font-size: 12px; font-family:arial; color: #ffffff; background-color: #000000; font-weight: 700; text-align: center; }




.msg4 {border: 1px solid #ff0000;
   border-radius: 5px;
   overflow:hidden;
   overflow:none;
   width: 100%;
   -moz-border-radius: 5px;
   -khtml-border-radius: 5px;
   -webkit-border-radius: 5px;
}
.msgH4 {font-size: 12px; font-family:arial; color:#ffff00; background: #ff0000; font-weight: 900; text-align: center;}
.msgB4 {font-size: 10px; font-family:arial; color:#000000; background: #ffff00;}





div.indexbar {left:10px; right: 10px; top: 135px; text-align: center; position: absolute; z-index: +10;}
div.scrolling{ position: fixed; top: 0px; text-align: center; }

/*

*.drop {font-family: 'Niramit', sans-serif;font-size: 1.4vw; background:#f00000; }
a.drop { text-decoration: none; color: #ffffff;}
ul.drop { background: #ff0000; list-style: none; margin: 0; padding-left: 0; }
div.drop{  xmin-height: 3vw; }
li.drop { color: #ff0000; background: #000000; display: block; float: left;
	padding-left: 0.5vw; padding-right: 0.5vw; padding-top: 0.15vh; position: relative;
	text-decoration: none; text-align: center; font-weight: 700; transition-duration: 0.3s;
   border: 1px solid #eeeeee; min-height: 60px; display: block;}
li.drop a.drop { color: #000000; display: block; }
li.drop a.drop:hover { color: #ffffff; display: block; }
li.drop:hover,
li.drop:focus-within { color: #ffffff; background: #000000; cursor: pointer; display: block; }

li.drop:focus-within a { outline: none; }
ul.drop li.drop ul.drop { background: #777777; visibility: hidden; opacity: 0;
   min-width: 5vw; position: absolute; transition: all 0.3s ease;
   margin-top: 0.1vw; left: 0; display: none; }
ul.drop li.drop:hover > ul.drop,
ul.drop li.drop:focus-within > ul.drop,
ul.drop li.drop ul.drop:hover,
ul.drop li.drop ul.drop:focus { color: #ffffff; visibility: visible; opacity: 1; display: block; z-index: +10; }
ul.drop li.drop ul.drop li.drop { clear: both; width: 100%; }
nav.drop { font-family: monospace; font-size: 1.4vw;display: inline-block;}

@media screen and (min-width: 950px) {
  *.drop { font-size: 16px; min-height: 3vw; max-height: 33px; }
  div.drop li.drop { height: 55px;}
}

@media (pointer:none), (pointer:coarse) {
  *.drop { font-size: 18px; }
  li.drop { min-height: 50px;}
}

a.foot { text-decoration: none; }
nav.foot { font-family: monospace; }
ul.foot { background: green; list-style: none; margin: 0; padding-left: 0; }
div.foot{ min-height: 50px; }
li.foot { color: #ffffff; background: #000000; display: block; float: left;
	padding-left: 15px; padding-right: 15px; padding-top: 5px; position: relative;
	text-decoration: none; text-align: center; font-weight: 700; transition-duration: 0.3s;
   border: 1px solid ff0000; min-height: 45px; }
li.foot a.foot { color: #ffffff; }
li.foot:hover,
li.foot:focus-within { background: #000000; cursor: pointer; }
li.foot:focus-within a { outline: none; }
ul.foot li.foot ul.foot { background: #000000; visibility: hidden; opacity: 0;
   min-width: 5rem; position: absolute; transition: all 0.3s ease;
   margin-top: 1rem; left: 0; display: none;}
ul.foot li.foot:hover > ul.foot,
ul.foot li.foot:focus-within > ul.foot,
ul.foot li.foot ul.foot:hover,
ul.foot li.foot ul.foot:focus { visibility: visible; opacity: 0; display: block; z-index: +10; }
ul.foot li.foot ul.foot li.foot { clear: both; width: 100%; }

*/



table.sortable {border-spacing: 0px; color:#000000;}
   table.sortable thead {background-color:#111111; color:#ffffff;  }
   table.sortable th {text-align: left; color:#000000;}
   xtable.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {content:\" \\25B4\\25BE\"; }
   table.sortable tbody tr:nth-child(2n) td { background: #eeeeee;  color:#000000;}
   table.sortable tbody tr:nth-child(2n+1) td { background: #cccccc;  color:#000000;}
   td.sortable {padding: 1px 7px;}
   tr.sortable:hover td.sortable:hover {background: #eeffee;}
   
input[type=text].light,input[type=password].light,textarea.light {color:#000000;background:#cccccc;}
.drop {background:#333333;}
.clubtab {color:#aaaaaa;}

#@import "w3.css";

.msgB3 {font-family:arial; color: #ffffff; background-color: #000000;}
table,th,tr,td{font-family:arial; color: #ffffff; background-color: #000000; vertical-align:top;}
input[type=text],input[type=password],input[type=time],textarea {font-family:courier; color: #cccccc; background-color: #000000; border: 1px dashed #666666; padding: 1px 5px;}
table.sortable th {text-align: left; color:#ffffff;}