/**********************************************************************\
|*                                                                    *|
|* Cascading Style Sheet (.css) for XVILLE.NET                        *|
|*                                                                    *|
|* 08/2009                                                            *|
|* 10/2009 added table for picture centering w/ caption               *|
|* 05/2010 removed invalid position: left; from BODY                  *|
\**********************************************************************/

/**  The body just has a lacy background.  Only a bit shows on the   **/
/**  left and right because the "wrapper" overlays it.               **/

BODY        {
            background-image: url(images/bgcooltile.gif);
            background-color: #e0e0e0;
            font: 110% georgia, sans-serif;
            line-height: 1.88889;
            color: #333333; 
            margin: 0;
            padding: 0;
            }

/**  The wrapper is 90% the width of the body and in a purplish      **/
/**  color.   The yellowish body shows on either side.               **/

DIV.wrapper {
            text-align: left;
            width: 90%;
            margin: 0 auto;
            background: #e0e0e0;
            border: #5E2020 1px solid;
            }

/**  The main division is just a secondary wrapper to give another   **/
/**  border after the title and ribbon of links.  It colors text     **/
/**  and picture borders green when the mouse hovers over a link.    **/

DIV.main    {text-align: left; position: relative; margin: 10px 
                 30px 0px 30px; }

DIV.main A:hover{color: green   }

/**  Long quotes are indented and in italics                         **/

DIV.quote   {text-align: left; position: relative; margin: 10px 
                 50px 0px 50px; font-style: italic; }

/**  Pictures "float" to the side of text with a suitable border.    **/
/**  When you hover over them, the border yellows so you know you    **/
/**  can click for a larger picture.                                 **/

DIV.picleft    {float: left; margin: 10px 10px 10px 10px; border: 3px 
                solid #666; padding: 1px }
DIV.picleft  A:hover {color: yellow }

DIV.picright   {float:right; margin: 10px 10px 10px 10px; border: 3px 
                solid #666; padding: 1px } 
DIV.picright A:hover {color: yellow; }

/**  BUT there is no float: center, so centered pictures are put     **/
/**  into a table to achieve a similar effect.  Setting the          **/
/**  margins to auto is what centers the table and lets the border   **/
/**  collapse around both picture and caption.                       **/

TABLE.piccent { border-width: 3px; border-style: solid; 
                border-collapse: collapse;
                margin-left: auto; margin-right: auto;
              }

TABLE.piccent TR { margin: 0px;                            }
TABLE.piccent TR TD {border-style: none ; margin: 0px;     }
TABLE.piccent TR TD A { margin: 0px;                       }
TABLE.piccent TR TD A:hover { color:yellow;                }

/**  Picture caption style                                           **/

DIV.caption    {font: normal bolder 0.8em Serif, Sans-Serif; 
                 text-align: center;  } 

/**  The title is centered in a division (maybe to the right of a    **/
/**  floated picture) but each line is a different size.             **/

DIV.txtcenter {text-align: center}
SPAN.title1 { font: normal bolder 2.0em Serif, Sans-Serif; }
SPAN.title2 { font: normal bolder 1.7em Serif, Sans-Serif; }
SPAN.title3 { font: normal bolder 1.2em Serif, Sans-Serif; }
SPAN.title4 { font: normal bolder 1.0em Serif, Sans-Serif; }
SPAN.title5 { font: normal bolder 1.5em Serif, Sans-Serif; color: maroon; }
SPAN.title6 { font: normal bolder 1.2em Serif, Sans-Serif; color: maroon; }

/**  There is a ribbon of links near the top.                        **/

DIV.ribbon {
           font: bold 12px Arial;
           width: 100%; /*leave this value as is in most cases*/
           overflow: hidden; 
           }

/**  It is composed of a horizontal Unordered List (UL)              **/

DIV.ribbon UL{
             margin: 0;
             padding: 0;
             float: left;
             width: 100%; /*width of menu 100%*/
             border: 1px solid #564c66; /*dark purple border*/
             border-width: 1px 0;
             background: black url(images/indentbg.gif) center repeat-x;
             }

/**  Each List Item (LI) is clickable.                               **/

DIV.ribbon UL LI {
                 display: inline;
                 }

/**  Inside each LI is an Anchor (A)                                 **/

DIV.ribbon UL LI A { 
                    float: left;
                    color: white;                /** i.e. text color **/
                    padding: 5px 11px;
                    text-decoration: none;
                    border-right: 1px solid #564c66; 
                    /**       dark purple divider between menu items **/
                   }

/**  We don't care if the item has been already visited - BUT if you **/
/**  hover over it, the text yellows to show it is a link (and also  **/
/**  does a funky shift of position).                                **/

DIV.ribbon UL LI A:hover{
                        color: yellow; 
                        padding-top: 6px;    
                        /**             shift text down 1px on hover **/
                        padding-bottom: 4px; 
                                     /** & change the background     **/
                        background: black url(images/indentbg2.gif) 
                        center repeat-x;
                        }

/**  Fixed font for certain types of tables                          **/

DIV.fixed   { font-size: large ; font-weight: bolder; font-family: 
                                  Courier, "Courier New", monospace;
                    line-height: 90%              }

/**  The footer is just an e-mail address centered.                  **/

.footer     {
             font-size: medium;
             text-align: center;
             padding: 15px;
            }