/* style.css - Soapbox Derby Guides */

@import url("definitions.css");
/* @import url("base.css") */
/* @import url("screenonly.css") screen and (min-width: 768px); */

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
}

header, footer {
    background-color: #004080;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

header h1 {
    margin: 0;
    font-size: 1.8em;
}

main {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h2 {
    color: #004080;
    margin-top: 1.5em;
}

h3 {
    color: #0066cc;
    margin-top: 1em;
}

ul {
    margin: 0.5em 0 1em 1.5em;
}

ul li {
    margin-bottom: 0.5em;
}

footer p {
    margin: 0;
    font-size: 0.9em;
}

.goat {
  text-align: right;
}

	/* Table elements */
table {				/* table container */
  table-layout: fixed;
  width: 50%;
  border: 1px solid black;
  border-spacing: 10px;
  border-collapse: collapse;
}

th {				/* table header */
  height: 70px;
  vertical-align: center;
  text-align: left;
  background-color: lightgray;
}


td {				/* table data cell */
  vertical-align: center;
  padding: 5px;
  border: 1px solid black;
}

tr {				/* table row */
    height: 10px;
	width: 300px;
    background-color: lightgray;
}

tr:nth-child(even) {background-color: #f2f2f2;}
tr:hover {background-color: coral;}



	/* Button */
.button {
            position: relative;
            display: inline-block;
            text-align: center;
            margin: 5px;			/* was 20 */
            padding: 5px;			/* was 10 */
            border: 1px solid green;
            border-radius: 5px;
}

.button a {
            color: green;
            text-decoration: none;
}

.button .button-tooltip {
            visibility: hidden;
            width: 180px;			/* was 120 */
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
}

.button:hover {
            background-color: green;
}

.button:hover a {
            color: #fff;
}

.button:hover .button-tooltip {
            visibility: visible;
            opacity: 1;
}





    /* Tooltip container */
.tooltip {
            position: relative;
            display: inline-block;
            text-align: center;
			color: Gray;
}

.tooltip a {
            color: Teal;
            text-decoration: none;
}

.tooltip .ttt {		/* ToolTip Text  */
            visibility: hidden;
      width: 300px;		/* How big a box to put tooltip text into */
      background-color: #555;
      color: #fff;
      text-align: left;	/* was center */
      border-radius: 5px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%; /* Position above the word */
      left: 50%;
      transform: translateX(-50%);
	  opacity: 0;
	  transition: opacity 0.5s ease;
	  font-size: 12px !important;  
   /* pointer-events: none; /+ Optional: avoid blocking mouse events */	 
}

.tooltip:hover {
            background-color: #FFFFFF; /* White */ /* Bright White #FDFEFF */
}

.tooltip:hover a {
            color: Orange;
}

.tooltip:hover .ttt {
            visibility: visible;
            opacity: 1;
}

.tooltip .ttt::after {	/* ToolTip arrow */
      content: "";
      position: absolute;
      top: 100%; /* Arrow at the bottom of the tooltip */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
}

.ttt a {    /* ToolTip Text anchor tag */
		color: GreenYellow;
		cursor: pointer;
	/*	text-decoration: none;	*/
}

.copyright::before {
	content: "\00A9";
	display: inline;
}
.copyright::after {
	content: "2025 Soapbox Derby Race Committee. All rights reserved.";
}



/* 	content: "\1F410";  Unicode for a Goat  */



		  
/* Examples of setting colors	*/
/*
p {  color: Blue; }
p {  color: #04AA6D; }  <- Green 
p {  color: rgb(255, 87, 51); }
p {  color: hsl(9, 100%, 60%); }
*/
/*
p::first-letter {
  font-size: 200%;
  font-weight: bold;
  color: #8A2BE2;
}
*/
/* 
See https://www.w3schools.com/csS/css3_buttons.asp for CSS Button styling.

.button {   padding: 15px 32px;	}
.button2 {background-color: #008CBA;}
( html -> <button class="button button2">Blue</button> )

.button4 {font-size: 20px;}
.button2 {padding: 12px 28px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #04AA6D;
}
.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #04AA6D;
  color: white;
}
.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
*/