/* Abyss fanpage CSS file */

@font-face {font-family: 'LT Museum';
            src :url(LTMuseum-Bold.ttf);
            font-weight: bold;
            font-style: normal;}

/* Font by LyonsType licensed under SIL Open Font License, from https://lyonstype.neocities.org/fonts */

body { font-family: Tahoma, arial, sans-serif;
       font-size: 14px;
       line-height: 1.5;
       margin: 0;
       padding: 0;
       background: #e3f6b5 url(images/gingham_200.png); }

h1, h3 { font-family: "LT Museum", "Copperplate Gothic Bold", garamond, serif;
         font-weight: normal;
         margin-left: 10px; }

h2 { font-family: "LT Museum", "Copperplate Gothic Bold", garamond, serif;
     font-weight: normal;
     margin-left: 20px;
     margin-bottom: 0px; }
/* separate entry for h2 so it's indented */

div#wrapper { width: 738px;
              margin: 10px auto;
              background-color: #feffdb;
              border: 2px solid #e9e32b; }


/* index page has a unique layout design */

.index nav { text-align: center;
             line-height: 1.5;
             font-size: 16px;
             margin: 5px;
             padding: 5px;
             border-top: 1px solid #e9e32b;
             border-bottom: 1px solid #e9e32b; }

/* need to format the section instead of the article bc the nav is inside the article */
.index section { margin: 10px;
                 padding: 0px 10px; }

.index header { height: 295px;
                margin: 20px;
                background: #feffdb url(images/s_toa_logo.png) center no-repeat; }
/*image is official game logo, copyright bandai namco */

.index h1 { text-align: center;
            margin-left: 0px; }

/* end of index-specific formatting */


/* all content pages will have the same general layout */

.content header { height: 90px;
                  margin: 0;
                  background: #feffdb url(images/banner.png) center no-repeat; }

/* my nav floats on the left side */
.content nav { float: left;
               position: sticky; /* makes it scroll to the top of the screen and then stay there */
               top: 10px;
               width: 100px;
               height: 98vh; /* makes it not quite the height of the browser window, to keep it visually within the wrapper div and still have a full-height border */
               line-height: 1.5;
               background-color: #feffdb;
               margin: 5px;
               padding-left: 10px;
               border-right: 1px solid #e9e32b; }

.content article { float: right;
                   width: 600px;
                   padding-right: 10px; }

.content section { padding-bottom: 5px; }

/* end of content page-specific formatting */

/* my line break */
hr { height: 1px;
     color: #e9e32b;
     background-color: #e9e32b;
     border-width: 0; }

/* to force some sections (the ones with image floats) to a certain size */
section#sized { height: 300px; }

/* using left/right spans to do fun things with image alignment */
span#left { float: left;
            width: 300px; }

span#right { float: right;
            width: 300px; }

/* to make links in the navbar the same font as my headers */
nav a { font-family: "LT Museum", "Copperplate Gothic Bold", garamond, serif; }

a { color: #2a7800;
    text-decoration: none;
    padding-bottom: 1px; }

a:visited { color: #878900; }

a:hover, a:focus, a:active { color: #51c513; }

table, th, td { margin-left: 30px;
                line-height: 1.2;
                padding: 0px 5px; }

table { padding-top: 5px; }
/* giving just the entire table object a bit of padding */

footer { clear: both;
         font-size: 80%;
         line-height: 1.3;
         text-align: center;
         padding-top: 3px;
         border-top: 1px solid #e9e32b; }