body{  background: linear-gradient(180deg, #111 0%, #000 100%);
  color: #fff;margin:0px;padding:0px;font-family:Arial}

header{overflow:hidden;}
header .headercontent{max-width:1440px;margin:0px auto;position:relative;overflow:hidden;}
header .plbanner{max-height:130px;margin:0px auto;display: block;margin-bottom:10px;float:left;}
header nav{position:absolute;bottom:9px;right:0px;width:80%;}

.page{max-width:1440px;margin:0px auto;}
.page.Admin{width:90%;}


 .main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background-color: #111; /* dark background for menu */
    border-bottom: 2px solid #e63946; /* subtle highlight under menu */
  }

  .main-menu li {
    margin: 0;
  }

  .main-menu a {
    display: block;
    padding: 14px 20px;
    color: #f1f1f1; /* light text */
    text-decoration: none;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
  }

  .main-menu a:hover, .main-menu a.active {
    background-color: #e63946; /* accent color on hover */
    color: #fff;
  }

/* Container */
.login-container {
  max-width: 350px;
  margin: 80px auto;
  padding: 30px;
  background: #111;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.7);
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
}

/* Header */
.login-header {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Inputs */
.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
  border: 1px solid #333;
  border-radius: 8px;
  background: #222;
  color: #fff;
  font-size: 1rem;
  transition: border 0.3s ease, background 0.3s ease;
}

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus {
  border: 1px solid #4caf50; /* green dart highlight */
  background: #1a1a1a;
  outline: none;
}

/* Submit Button */
.login-container input[type="submit"] {
  width: 100%;
  padding: 12px 15px;
  margin-top: 15px;
  background: #4caf50;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}



.login-container input[type="submit"]:hover {
  background: #45a049;
}

.rules {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #f0f0f0;
  line-height: 1.7;
  font-size: 1.05rem; /* slightly bigger */
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Headings */
.rules h1,
.rules h2,
.rules h3 {
  color: #ff4444; /* red accent */
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 700;
  text-transform: uppercase;
}

.rules h1 {
  font-size: 2.2rem;
  border-bottom: 2px solid #ff4444;
  padding-bottom: 0.4rem;
}

.rules h2 {
  font-size: 1.6rem;
  border-left: 4px solid #ff4444;
  padding-left: 0.5rem;
}

.rules h3 {
  font-size: 1.3rem;
  font-weight: 600;
}

/* Section contrast backgrounds */
section {
  background: rgba(255, 255, 255, 0.05); /* subtle light overlay */
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3) inset;
}

/* Paragraphs & lists */
.rules p {
  margin: 0.5em 0;
}

.rules li ul{
  margin: 0.5em 0 1em 1.2em;
  padding: 0;
  list-style-type: disc;
  padding-left:30px;
}

.rules li ul li {
  margin-bottom: 0.4em;

}

/* Tables */
.rules table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 1rem; /* match body text size */
  background: #222;
  border-radius: 6px;
  overflow: hidden;
}

.rules table th,
.rules table td {
  border: 1px solid #444;
  padding: 10px;
  text-align: left;
}

.rules table th {
  background: #333;
  color: #ffcccc;
  text-transform: uppercase;
  font-weight: 600;
}

.rules table tr:nth-child(even) {
  background: #2a2a2a;
}

.rules table tr:hover {
  background: #333;
}

/* Mobile-friendly tables */
@media (max-width: 768px) {
  .rules {
    padding: 10px;
    font-size: 1rem; /* keep readability on small screens */
  }

  .rules table,
  .rules table thead,
  .rules table tbody,
  .rules table th,
  .rules table td,
  .rules table tr {
    display: block;
    width: 100%;
  }

  .rules table tr {
    margin-bottom: 1rem;
    background: #2a2a2a;
    border-radius: 6px;
    padding: 8px;
  }

  .rules table td {
    border: none;
    padding: 6px 0;
    position: relative;
  }

  .rules table td:before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    color: #ff8888;
    margin-bottom: 4px;
  }
}
.rules ul {
  list-style: none; /* removes bullets */
  padding-left: 0;  /* removes default padding */
}

.rules li {
  margin-bottom: 10px; /* spacing between players */
}

.rules li strong {
  display: block;
  font-size: 1.15em;       /* slightly bigger font */
  color: #4CAF50;          /* green accent color */
  text-shadow: 1px 1px 2px #000; /* subtle shadow for contrast */
  border-bottom:1px solid #666;
  width:80%;
  padding-left:30px;
}
.ui-tabs .ui-tabs-panel{overflow:hidden;}


.blocksection {
  width: 46%;              /* make block half the page width */
  min-height: 170px;       /* static height */
  border: 2px solid #444;  /* dark border for visibility */
  margin: 20px auto;       /* center horizontally with spacing */
  background: #f9f9f9;     /* light background for contrast */
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* subtle shadow */
  float:left;
  margin: 10px;
}

.blocksectioncontent{overflow:hidden;}

.blocksectiontitle {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 10px;
  color:#333;
  font-variant: small-caps;
}

.blocksectiondescription {
  font-size: 12px;
  margin-bottom: 30px;
  color: #333;
  border:1px solid #333;
  background-color:#f3f3f1;
  padding:10px;
  font-weight:normal;
  height:36px;

}

.blocksectionform {
  text-align: center;
}

.blocksectionform input[type="submit"] {
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  background: #0073e6;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  min-width:250px;
}

.blocksectionform input[type="submit"]:hover {
  background: #005bb5;
}


.versuscards{overflow:hidden;width:1450px;margin:0px auto;}
.versuscardout{float:left;margin:0px 20px 20px 0px;box-shadow: 2px 2px 2px #666;padding:2px;}


.versuscard{overflow:hidden;position:relative;width:450px;}
.versuscard .versuscardbackground img{width:100%;}
.versuscard .versuscardcontent{position:absolute;top:20px; left:0px;width:100%;}
.versuscard .versuscardtop{overflow:hidden;}
.versuscard .playerfieldphoto img{display:block;margin:0px auto;border:3px solid #fff;}
.versuscard .playerinfo{width:40%;}
.versuscard .playerinfo img{width:130px;border-radius:75px;}
.versuscard .playerinfo1{float:left;}
.versuscard .playerinfo2{float:right;}
.versuscard .playernames{width:80%;margin:0px auto;background-color:rgba(200,200,200,0.9);color:#000;clear:both;padding:2px 20px;text-align:center;font-weight:bold;font-size:1.2em;margin-top:10px;font-family:'Roboto Condensed';}
.versuscard .versuscardbottom{margin-top:2px;font-size:0.9em;}
.versuscard .playerstatcontent{text-align:center;}
.versuscard .vs{padding:0px 10px;}

.trapezoid {
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0% 100%);
}

.carousel-container table{font-family:Arial !important;}
.carousel-container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.carousel {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-slide {
    flex: 0 0 100%;
}

.carousel-slide .premieretree{scale:0.70;background:none;margin-top:-200px;text-transform: uppercase;}
.carousel-slide .standings{width:97%;}



h1.slides {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  color: #e0e0e0;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 3px;
  margin: 0;
  padding: 10px 0 30px 0px;

  /* Inset / beveled look */
  text-shadow:
    1px 1px 1px #111,    /* subtle depth */
    -1px -1px 1px #555,  /* highlight edge */
    2px 2px 4px #000;    /* outer shadow */
  
  border-top: 2px solid #333;
  border-bottom: 2px solid #111;
}

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

footer{background-color:#333;padding:20px;text-align:center;margin-top:40px;}