/* REVISED STYLES */

/* These styles are for the general hyperlinks on all pages */
a:link {color:black}    /* unvisited link */
a:visited {color:black}    /* unvisited link */
a:active {color:green}  /* selected link */

/* these  style the tables*/
table {margin:auto; border-spacing: 5px; max-width: 800px;}  /* applies the style, centre, the entire table, max-width at 600px to limit max width */
td {padding-top: 0px; padding-bottom: 0px; text-align: center; max-width: 100%;} /* applies the style to all data cells in the table */ /* applies the style, centre, the entire table, max-width at 100% to auto adjust to fit narrow screens */
tr {margin:auto; max-width: 100%;} /* applies the style to the entire table */ 

td button {background-image: linear-gradient(red, orange, yellow); font-size: 10pt; font-weight: bold; border: 5px solid blue; margin: 5px; padding: 10px; border-radius: 30%; width: 175px} /* modifies the table button */
td button a {text-decoration: none;}
td button a:hover {background-color: white; color:blue; transition-duration: 0.5s;}

td button1 {background-image: linear-gradient(red, orange, yellow); font-size: 10pt; font-weight: bold; border: 5px solid green; margin: 5px; padding: 12px; border-radius: 30%; width: 50%;} /* modifies the table button */
td button1 a {text-decoration: none;}
td button1 a:hover {color:white; transition-duration: 0.5s;}
 
td button2 {background-image: linear-gradient(white, yellow); font-size: 12pt; font-weight: bold; border: 5px solid brown; margin: 4px; padding: 10px; border-radius: 10%; width: 50%;} /* modifies the table button */
td button2 a {text-decoration: none;}
td button2 a:hover {color:blue; transition-duration: 0.5s; }

td buttonh {background-color: white; font-size: 14pt; width: 50%; border-radius: 1%; padding: 2px;} /* modifies the table button */
td buttonh a {text-decoration: none;}
td buttonh a:hover {color:blue; transition-duration: 0.5s; font-weight: bold;}

td button3 {background-image: linear-gradient(green, yellow); font-size: 12pt; font-weight: bold; border: 5px solid brown; margin: 5px; padding: 12px; border-radius: 30%; width: 50%;} /* modifies the table button */
td button3 a {text-decoration: none;}
td button3 a:hover {color:white; transition-duration: 0.5s; }

td.fact {background-color: silver; font-size: 15pt; border: 6px solid blue; border-radius: 30px; padding: 20px;} 

td.fable {text-align:left; background-color: burlywood; font-size: 15pt; color: black; border: 6px solid blue; border-radius: 30px; padding: 20px;} 

td.recipe {text-align: left; background-color: yellowgreen; font-size: 15pt; border: 6px solid blue; border-radius: 30px; padding: 20px;} 

td.about {background-color: saddlebrown; font-size: 15pt; font-weight: bold; border: 6px solid blue; border-radius: 30px; padding: 25px; color: white} 

td.game {background-image: url('images_cyo/hbackground.jpg'); font-size: 15pt; text-align: left; border: 6px solid blue; border-radius: 30px; padding: 20px;} 

td.factit {background-color: burlywood; font-size: 15pt; border: 6px solid blue; border-radius: 30px; padding: 20px;} 

td.trivia {background-color: skyblue; font-size: 15pt; font-weight: bold; border: 6px solid green; border-radius: 30px; padding: 20px;}
td.fvid {background-color: gainsboro; font-size: 15pt; font-weight: bold; border: 6px solid blue; border-radius: 30px; padding: 20px;} 

td.trivia p {display:none;}
td:hover p {display:block;}  /* displays answer on hover */


p.answer {font-size: 18pt; color: brown; font-weight: normal; font-style: italic;}

td.comment {background-color: goldenrod; font-size: 15pt; font-weight: bold; border: 6px solid green; border-radius: 30px; padding: 25px; color: black}

/* Styles for the buttons and headings outside the tables 
button {border-radius:6px; (margin:10px - spacing outside the button); font-size: 12pt; 
		(padding: 3px - spacing inside the button;)}
*/

button {border-radius:6px; margin:6px; font-size: 10pt; padding: 3px}
button a {text-decoration: none;}
button:hover {background-color: yellow; color:black; transition-duration: 0.5s;}  /* Change top menu button color on hover */


/* h1 parameters -    */
h1 {border: width: 600px; margin:auto; color: white; font-size: 15pt; text-shadow: 3px 3px 2px black, 0 0 25px blue, 0 0 5px green; padding: 5px; text-align: center;}

h3 {border: width: 600px; margin:auto; text-align:center; color:aliceblue; text-shadow: 3px 3px 2px black, 0 0 5px blue, 0 0 5px green; padding: 9px;}  /* Styles the fact title */
p4 {color: black; font-size: 24pt;}
h2 {text-align: center; color: black; font-size: 16pt;}

/* these  define the boxes for the content*/
 /* applies the style, centre, the entire table, max-width at 100% to auto adjust to fit narrow screens */
#topbox {position: fixed; top: 0px; left: 0px; height: 50px; width: 100%; background-image: linear-gradient(aqua,blue); text-align: center; overflow: auto; font-size: 24pt; color: white; text-shadow: 5px 5px 5px black, 0 0 25px red, 0 0 5px green; padding: 5px;}

#contentbox {position: fixed; top: 50px; left: 0px; height: 100%; width: 100%; overflow: auto; background-image: url('images_facts/background.jpg');}

#factbox {position: fixed; top: 50px; left: 0px; height: 100%; width: 100%; margin:auto; overflow: auto; background-image: url('images_facts/factround.jpg');}

#fablebox {position: fixed; top: 50px; left: 0px; height: 100%; width: 100%; margin:auto; overflow: auto; background-image: url('images_fables/factround.jpg');}

#hauntbox {position: fixed; top: 50px; left: 0px; height: 100%; width: 100%; margin:auto; overflow: auto; background-image: url('images_cyo/sand.jpg');}