/*
   =====================================================
   CASCADING STYLE SHEET for the SP-XXL WEBSITE (SCREEN)
   =====================================================
*/

html                    {margin: 0; width: 100%; padding: 0; background: white;}

body                    {margin: 0; font: small Verdana, Arial, Helvetica, sans-serif;
                         color: #000080; background: #f2f2f2; padding: 1% 0;
                         width: 100%;
                        }

a                       {color: #0000ff; text-decoration: underline;}
a:visited               {color: #990000;}
a:hover                 {background: #aa0000; border-bottom: 3px solid #00ee00;
                         color: #ffcc66;   border-top:    3px solid #00ee00;}

/*

    -----------------------------------------------------------------
    ID "page" is the container that looks like a white sheet of paper
    -----------------------------------------------------------------
*/

#page                   {margin: 1% auto; width: 95%; border-width: 1px 4px 4px 1px;
                         border-style: solid; border-color: black; background: white;}

/*
    ------------------------------------------------------------------
    ID "top_frame" holds the SP-XXL logo and the pictures of computers
    ------------------------------------------------------------------
*/

#top_frame              {margin: 0 auto; padding: 0.5% 0 0.5% 5%; width: 93%; float: left;}
#top_frame li           {list-style: none; float: left; width: 33%; height: 52px; padding: 0;}
#top_left_frame         {background: url('../../images/spxxl_new_logo_small.jpg') no-repeat left center;}
#top_mid_frame          {text-align: center; vertical-align: top;}
#top_right_frame        {background: url('../images/computers.gif') no-repeat right center;}

/*
    ----------------------------------------------------------
    ID "message_frame" holds the text "the user group for ..."
    ----------------------------------------------------------
*/

#message_frame          {margin: 0 auto; padding: 0 1%; background: #eeeeff; text-align: right;
                         width: 60%; font-weight: bold; clear: left;}

/*
    ---------------------------
    ID "page_name" is just that
    ---------------------------
*/

#page_name              {margin: 0 auto; padding: 0 1%; background: #eeeeff; text-align: left;
                         width: 60%; clear: left;}

/*
    ---------------------------------------------------
    ID "stop_press" is just that - a stop-press message
    ---------------------------------------------------
*/

#stop_press             {margin: 0 auto; padding: 0 1%; background: #eeeeff; width: 95%;}

/*
    -----------------------------------------------------------------------------------------
    ID "footer_frame" contains the "W3C validator" logo and the "contact" and "reviewed" text
    -----------------------------------------------------------------------------------------
*/

#footer_frame           {margin: 0.5% auto; padding: 0 0.75em;}

/*
    -------------------------------------------------------------------------
    CLASS "six_wide" is a six element wide set of buttons for navigation etc.
    -------------------------------------------------------------------------
*/

.six_wide               {margin: 0 ; padding: 0 1% 0 2%; width: 100%;}
.six_wide li            {list-style: none; float: left; width: 16.05%; 
                         padding: 0.25em 0; text-align: center;
                         border-bottom: 3px solid #eeffee;
                         border-top:    3px solid #eeffee;
                         font-weight: bold;}

/*
    -----------------------------------------------------
    CLASS "v_nav" is a set of buttons for navigation etc.
    -----------------------------------------------------
*/

.v_nav                  {margin: 0 ; padding: 0 1% 0 2%; width: 100%;}
.v_nav    li            {list-style: none; float: left; width: 100%;
                         padding: 0.25em 0; text-align: center;
                         border-bottom: 3px solid #eeffee;
                         border-top:    3px solid #eeffee;
                         font-weight: bold;}

/*
    ------------------------------------------------------------------
    CLASS b[1..n] describe the buttons (background, highlighting etc.)
    ------------------------------------------------------------------
*/

.b1                     {background: #ffeeee;}
.b2                     {background: #eeffee;}
.b3                     {background: #eeeeff;}
.b4                     {background: #ffe0e0;}
.b5                     {background: #e0ffe0;}
.b6                     {background: #e0e0ff;}

.b1 a:hover             {background: #aa0000; border-bottom-color: #00ee00; color: #ffcc66;}
.b2 a:hover             {background: #00aa00; border-bottom-color: #00ee00; color: #ffcc66;}
.b3 a:hover             {background: #0000aa; border-bottom-color: #00ee00; color: #ffcc66;}
.b4 a:hover             {background: #aa0000; border-bottom-color: #00ee00; color: #ffcc66;}
.b5 a:hover             {background: #00aa00; border-bottom-color: #00ee00; color: #ffcc66;}
.b6 a:hover             {background: #0000aa; border-bottom-color: #00ee00; color: #ffcc66;}


/*
    --------------------------------------------
    ID "content" is the main content of the page
    --------------------------------------------
*/

.content                {padding: 0.25em 0.75em 0.75em; background: white; text-align: justify;}

.validator              {margin: 1%;}

.pullquote              {float: right; width: 30%; margin: 1%;
                         color: #990000; background: #f7fff0; font-weight: bold;
                         border: solid #887766; border-width: 5px 0; padding: 1em;}

.odd                    {background-color: #ffeeee;}
.even                   {background-color: #eeffee;}	
				 		
.clear_left:            {clear: left;}
.clear_right:           {clear: fight;}
.clear_both:            {clear: both;}