﻿@charset "UTF-8";

/* ------------------------------------------------------------------------- */
/*
   Page Layout                     Source Layout
   -----------                     -------------
body            0          body                       0
  #page_title   1          #page_title                1
  #menu_holder  3          #menu_holder               3
    #menu_box   4          #main_cell                 2
      #menu     5          #page_index/#short_page  auto
  #main_cell    2          #gallery/#page_section   auto
#footer         1          #menu                      5
                           #footer                    1
                           #menu_box                  4

h1  secondary page titles
h2  section titles / index titles
h3  sub-section titles (rare)
h4  dates / email addresses
b   bold
h5  same size but silver

*/
/* ------------------------------------------------------------------------- */
/* WHOLE DOCUMENT -------------------------------- (Иōtρăd2 / Ĕlbō Grēs) --- */

/* topmost element */
body
{
  width                 : 100%;
  height                : auto;
  padding               : 0;
  margin                : 0;
  z-index               : 0;
  border                : none;
  background-color      : rgb(120,147,192);
  background-image      : url(./flower-back.jpg);
  background-attachment : fixed;
  background-position   : top center;
  background-repeat     : repeat;
  text-align            : justify;
  font-family           : "papyrus",
                          "lucida calligraphy",
                          "garamond",
                          "courier new",
                           cursive,
                           serif;
  font-size             : 150%; /* default 150% */
  line-height           : 1.3em;
  color                 : rgb(0,255,236);
}

a { background-color : inherit;
    background-image : inherit;
    text-decoration  : none;
    color            : white; }
a:link    { color : rgb(0,255,128);   }
a:visited { color : rgb(160,196,255); }
a:hover   { color : silver;           }
a:active  { color : white;            }

h1, h2, h3, h4, h5 { width             : auto;
                     height            : auto;
                     padding           : 0;
                     margin            : 1em 0 1em 0;
                     background-color  : transparent;
                     background-image  : none;
                     text-align        : left;
                     font-weight       : bold;
                     text-decoration   : none;
                     color             : silver; }
h1 { font-size  : 1.90em; }
h2 { font-size  : 1.67em; }
h3 { font-size  : 1.40em; }
h4 { font-size  : 1.25em; }
h5 { font-size  : 1.00em; }
h1.center, h2.center, h3.center, h4.center, h5.center { text-align : center; }

img { border : none;}

p {  padding     : 0;  
     margin      : 0 0 1em 0;
     text-indent : 1.5em; }

br { margin      : 0;
     padding     : 0; }

b.under { font-weight     : normal;
          text-decoration : underline; }
          
li
{
  padding             : 0em .4em 0em .4em;
  margin              : .4em .4em .4em 0em;
  z-index             : 1;
  background-color    : black;
  background-image    : url(./vl_grad_b.jpg);
  background-position : top left;
  background-repeat   : repeat-y;
  border              : .05em solid rgb(0,64,128);
  list-style-image    : url(./ft_bullet.gif);
  color               : rgb(0,255,236);
}

/* -------------------------------------------------------------------------- */
/* PAGE TITLE (h1 header, in body) ------------------------------------------ */

#page_title 
{
  width               : auto;
  height              : auto;
  padding             : .5em 0 .5em 0;
  margin              : 0em 0em 0em 0em;
  z-index             : 1; 
  border              : none;
  background-color    : rgb(0,32,80);
  background-image    : url(./h_grad_b.jpg);
  background-position : center left;  
  background-repeat   : repeat;
  text-align          : center;
  font-size           : 2.4em;
  font-weight         : bold;
  color               : silver;
}

/* -------------------------------------------------------------------------- */
/* MAIN CELL (in body) ------------------------------------------------------ */

#main_cell
{
  width               : auto;
  height              : auto;
  margin              : .75em;
  padding             : .5em;
  z-index             : 2;
  border              : none;
  background-color    : black;
  background-image    : url(./vr_grad_b.jpg);
  background-position : top right;
  background-repeat   : repeat-y;
}

/* divider to clear all floats (like embeded images) */
div.divider { clear : both; }

/* same as divider, but also makes a horizontal seperator for page sections */
div.section { clear         : both;
              width         : auto;
              height        : 3em;
              margin        : 0em .5em 3em .5em;
              border-bottom : .2em solid rgb(64,0,128); }

/* makes the black of the main cell go past floated items at end, reguires ANY text inside it */
div.page_extender { clear               : both; 
                    background-color    : transparent;
                    background-image    : none;
                    font-size           : .5em;
                    color               : black; }

/* -------------------------------------------------------------------------- */
/* MENU --------------------------------------------------------------------- */

/* text wrap around floated menu (in body after page_title before main_cell) */
#menu_holder { width               : 8.8em;
               height              : 14.9em;
               z-index             : 3;
               background-color    : transparent;
               background-image    : none;
               border              : none;
               float               : right; }
               
/* This is a 256 x 512 (1:2 ratio) png image that resizes with font */
#menu_box    { width               : 8.5em;
               height              : 15em;
               margin              : 0;
               padding             : 0;
               z-index             : 4;
               background-color    : transparent;
               background-image    : none;
               border              : none;
               overflow            : visible;
               position            : absolute;
               right               : 0em;
               top                 : 3.65em;
               text-align          : center;
               border              : none; }
               
#menu        { width               : 7.5em;
               height              : auto;
               margin              : 0;
               padding             : .1em;
               z-index             : 5;
               background-color    : transparent;
               background-image    : none;
               border              : none;  
               overflow            : visible;
               position            : absolute;
               right               : .4em;
               top                 : 3.95em;
               text-align          : center; }
               
span.menu_title     { width            : 99%;
                      height           : auto;
                      line-height      : 1.8em;
                      padding          : 0 0 0 0;  
                      margin           : .4em 0 .1em 0;
                      display          : block;  
                      z-index          : auto;
                      border           : .05em solid rgb(64,64,128);
                      background-color : black;
                      background-image : none;
                      text-align       : center;
                      font-size        : .9em;
                      font-weight      : bold;
                      text-decoration  : none;
                      color            : silver; }
a.menu_item         { width            : 99%;
                      line-height      : 1.8em;
                      padding          : 0 0 0 0;
                      margin           : .15em 0 0 0;
                      display          : block;  
                      z-index          : auto;  
                      background-color : rgb(24,24,60);
                      background-image : none;
                      border           : .05em solid black;
                      text-align       : center;
                      font-size        : .7em;
                      color            : white;
                      cursor           : pointer; }
a.menu_item:link    { background-color : rgb(24,24,60);
                      background-image : none;
                      border           : .05em solid black;
                      color            : rgb(0,255,128); }
a.menu_item:visited { background-color : rgb(24,24,60);
                      background-image : none;
                      border           : .05em solid black;
                      color            : rgb(160,196,255); }
a.menu_item:hover   { background-color : black;
                      background-image : none;
                      border           : .05em solid gray;
                      color            : silver; }
a.menu_item:active  { background-color : black;
                      background-image : none;
                      border           : .05em solid white;
                      color            : white; }
                      
/* -------------------------------------------------------------------------- */
/* PAGE INDEX (MAIN) -------------------------------------------------------- */

#page_index { width      : auto;
              height     : auto;
              min-height : 14em;
              padding    : 0;  
              margin     : 0 7.3em 0 0; 
              text-align : center; }
              
/* Index Entry  */
a.ie         { padding          : .1em .2em .1em .2em;
               margin           : .1em .2em .1em .2em;
               line-height      : 2em;
               border           : .05em solid rgb(32,64,32);
               background-color : rgb(24,24,60); }
a.ie:link    { color            : rgb(0,255,128); }
a.ie:visited { color            : rgb(160,196,255); }
a.ie:hover   { border           : .05em solid silver;
               background-color : black;
               color            : silver; }
a.ie:active  { border           : .05em solid white;
               background-color : black;
               color            : white; }

/* -------------------------------------------------------------------------- */
/* IMAGE CONTROL ------------------------------------------------------------ */

/*g embeded images, base should be 160:120 or at least x(4:3) */
div.embeded_image_left, div.embeded_image_right 
{
  width               : auto;
  height              : auto;
  padding             : .5em .5em 0em .5em;
  margin              : .2em .2em 0em .2em; 
  overflow            : hidden;
  text-align          : center;
  border              : .05em solid rgb(0,64,128);
}

div.embeded_image_left  { float : left; }
div.embeded_image_right { float : right;}
                                    
div.embeded_image_left a img, div.embeded_image_right a img  { width  : 7em;
                                                               height : auto;}
/* banner buttons, base should be 144x48 */ 
a.banner_button img { width   : 7em;
                      padding : .5em .5em 0em .5em;}

/*gallery picture*/
div.gp             { width            : 9em;
                     height           : 8em;
                     padding          : .2em;
                     margin           : .1em;  
                     overflow         : hidden; 
                     float            : left;
                     border           : .1em solid rgb(64,64,64);
                     text-align       : center;}
                     
div.gp a img       { width            : 8.9em; 
                     display          : block;}
                     
/* -------------------------------------------------------------------------- */
/* FOOTER (MAIN) ------------------------------------------------------------ */

#footer { width               : auto;
          height              : auto;
          margin              : 0;
          padding             : 1.75em 1em 1.75em 1em;
          z-index             : 1; 
          border              : none;
          background-color    : rgb(0,32,80);
          background-image    : url(./h_grad_b.jpg);
          background-position : center left;  
          background-repeat   : repeat-x;
          clear               : both; 
          text-align          : center;
          font-weight         : 900;
          font-size           : .5em;
          line-height         : 4em;}
          
#footer a        { width            : auto;
                   height           : auto;
                   margin           : auto .5em auto .5em;
                   padding          : .4em;
                   background-color : transparent;
                   background-image : none;
                   border           : .2em solid black;}

#footer a:hover  { background-color : black;
                   border-color     : gray;
                   color            : gray;}
#footer a:active { background-color : black;
                   border-color     : white;
                   color            : white;}
                   
#top_button, #top_button:link, #top_button:visited
{
  border-color     : rgb(0,224,192);
  color            : rgb(0,224,192);
}

#update_box, #update_box:link, #update_box:visited
{
  border-color     : silver;
  color            : silver;
}

#copy, #copy:link, #copy:visited
{
  border-color     : rgb(96,96,192);
  color            : rgb(96,96,192);
}

/* -------------------------------------------------------------------------- */
/* SPLASH PAGE -------------------------------------------------------------- */

#splash_page        { min-height       : 110%;
                      z-index          : 2;
                      background-color : black;
                      background-image : none;
                      color            : white; }
                      
#splash_link, #splash_link:link, #splash_link:visited {
                      width               : 400px;
                      height              : 554px;
                      background-color    : inherit;
                      background-image    : url(./ft_splash_long.jpg);
                      background-repeat   : no-repeat;
                      background-position : 0px 0px;
                      position            : absolute;
                      left                : 50%;
                      top                 : 50%;
                      margin-left         : -200px;
                      margin-top          : -260px;
                      overflow            : hidden;  
                      font-size           : 84px;
                      color               : white; }
                      
#splash_link:hover  { background-position : 0px -554px;  }
#splash_link:active { background-position : 0px -1108px; }

#tube_box { width       : 128px;
            height      : 96px;
            position    : absolute;
            right       : 16px;
            bottom      : -128px; }



/* END STYLESHEET ----------------------------------------------------------- */
/* -------------------------------------------------------------------------- */