/* **** NOTES **** */
/* I have tried to comment this style sheet as much as possible to show you where things take place. 
There is a large utilization of descendant selectors, so if you are not familiar with those, hopefully the 
comments will help. 
*/

/* Global Styles */
html,body{margin:0;padding:0}
body{font: 76% Arial, Verdana, serif, sans-serif;}

/* TEXT STYLES */
p{padding:0 5px 0px; font-size: 1em; line-height: 1.3em; letter-spacing: 1px;}
h1 { font-size: 2.5em; margin-top: 0;  text-transform:uppercase; letter-spacing: 1px;}
h1#title { font-size: 2.5em; color: #fff; margin-top: 0;  text-transform:uppercase; letter-spacing: 1px;}
h2 { font-size: 2em; color: #444; line-height: 1.3em; letter-spacing: -1px;}
h3 { font-size: 1.5em; color: #777;}
h4 { font-size: 1.25em; color: #aaa;}
h5 {font-size: 1em; font-weight:bold; color: #000;}
h1,h2,h3,h4,h5 {padding:0 5px 0px;}
#navigation p, #extra p {color:#fff;}
a:link { color: #444; text-decoration:none; border-bottom: none; padding:1px;}
a:visited {color: #444; text-decoration:none; border-bottom: none;}
a:hover {background-color: #777; color:#fff; }
acronym {border-bottom: 1px dotted #bbb; cursor:help; } 
label.header {font-size:larger; color: #bbb; font-weight:bold; text-transform:uppercase; margin-bottom: 0; padding-bottom:0; } 
   /* label.header is the label for the search box but can be used for other forms by using class="header" in a label */
form,submit { padding:0; margin:0; } /* removes extraneous padding around the form */
code { border: 1px dotted #bbb; border-left: 3px solid #bbb; background-color: #ddd; padding: 1em; margin-left: 3ex; color:#777;}
blockquote { border: 1px solid #bbb; background-color: #ddd;  margin: 3ex; font-style:italic;}

/* IMAGE LINK */
div#imagelink a:link { color: #000; text-decoration:none; border-bottom: 0px solid #fff; padding:1px;}
div#imagelink a:visited {color: #000; text-decoration:none; border-bottom: 0px solid #fff; }
div#imagelink a:hover {background-color: #fff; color:#000;}

/* PES IMAGE */
div#pesimg a {vertical-align: middle;}
div#pesimg a:link { color: #fff; text-decoration:none; border-bottom: 0px solid #fff; padding:1px;}
div#pesimg a:visited {color: #fff; text-decoration:none; border-bottom: 0px solid #fff; }
div#pesimg a:hover {background-color: #000; color:#fff;}

/* TABLES */ 
table {border: 2px solid #444; border-collapse:collapse; width:90%; margin-left: 3ex; vertical-align: top;}
td {background-color: #fff; padding:3px; border: 1px solid #fff; vertical-align: top;}
th {text-align:left;border: 1px solid #fff; vertical-align: top;}
thead th {color:#fff; font-size:1.5em; background-color: #777 ; padding: 10px 6px; vertical-align: top;}
tbody th {color:#fff; font-size:1.15em; background-color: #aaa ; padding: 6px; vertical-align: top;}
tbody th.sub {font-size: 1.15em; color:#000; background-color: #ddd; padding: 6px; vertical-align: top;}

div#mtg h3 {color: #7a7;}
div#wow h3 {color: #77a;}
div#ygo h3 {color: #a77;}
div#epic h3 {color: #a7a;}
div#hun h3 {color: #aa7;}
div#cha h3 {color: #c97;}

div#mtg h4 {color: #ada;}
div#wow h4 {color: #aad;}
div#ygo h4 {color: #daa;}
div#epic h4 {color: #dad;}
div#hun h4 {color: #dda;}
div#cha h4 {color: #fca;}

img {border: none;}
div.info {height: 1px; width: 1px; overflow: auto; visibility: hidden;}