/* classic sliding doors example css as seen on http://www.alistapart.com/articles/slidingdoors/*/
/*  MPM NOTE:  this version uses fancy tab graphics found in on-line reference mentioned on page 232 of CSS: Missing Manual book   */
/*  These and other graphics were downloaded and saved in C:\Work\Z-Misc\Dreamweaver\CSS_Missing_Manual\CSSTabMenus\CSSmenus.  Also see   */
/*  Chapter 9 directory of exercises from that book for a file called sliding_doors.html, with lovely blue tabs, AND  */
/*  a file called temp.html with a sample deploy of the tabs used here for the VMT app......  MPM, July 10, 2012  */

  body {
    background:#fff;
    margin:0;
    padding:0;
    color:#000;
    font:x-small/1.5em Georgia,Serif;
    voice-family: "\"}\""; voice-family:inherit;
    font-size:small;
    } html>body {font-size:small;}
    
   

  .tabs {
    float:left;
    width:40%;  
    background:#fff url("bg.gif") repeat-x bottom;
    font-size:89%;
    line-height:normal; 
    margin-top: 0;
		color: #2d006b;
    }
    
  .tabs th {
    text-align: left;
   }
    
  .tabs ul.tabs-list {                                  /*  Governs the row of tabs at top.  the "14px" aligns the left edge of the tab row with the table edge  */
    margin:0;
    padding:10px 10px 0 0;
    list-style:none;
    }
    

 .tabs ul.tabs-list li {               
    display: inline;
    margin:0;
    padding:0 ;  
    }
    
    
  .tabs ul.tabs-list a {                                /* NOTE:  The left picture goes with the "a" tag, which is the outside tag because I added inner "span" tags below.       */
    float: left; 
    background:url("tableft.gif") no-repeat left top;              /* Also note:  this represents a rearrangement of the tags/CSS from the base "sliding-doors"    */
    padding:0 0 0 0;                                              /* module in the AccessibleTabs grid thing, in which the images were added to the "li" and "a"  */
    text-decoration:none;                                           /*  tags--I couldn't make that work.  But this corresponds to the "temp" file version found   */
    font-weight:bold;                                               /*  in the following directory:  C:\Work\Z-Misc\Dreamweaver\CSS_Missing_Manual\CSS_MM_TUTORIALS\chapter_09\sliding_doors */   
    color:#12127d;          /* this is color of tab text */         /*  and it DOES work properly!     MPM, July 9, 2012  */
   }
    

 .tabs ul.tabs-list a span {                            /* NOTE:  I added the "span" tags to the text within the tabs--the right picture goes with the inner tag ("span")   */
    float: left;
    display:block;
    background:url("tabright.gif") no-repeat right top; 
    padding: 5px 15px 4px 6px;
 
 }
    
    
  /* Commented Backslash Hack
     hides rule from IE5-Mac \*/
  .tabs ul.tabs-list a  span {float:none;}
  /* End IE5-Mac hack */
  .tabs ul.tabs-list a:hover span {
    color:#333;
    }
    
 
  .tabs ul.tabs-list .current a {                                   /*  This is the parallel use of the "a" tag from above, this time getting the lower half of it (-42px is halfway down) */
/*    background-image:url("tableftJ.gif");    */                /*  see Pixy method, page 229-30 in "CSS: Missing Manual" book.  
 /*   background-image: url("tabrightJ.gif");  */                /*  Note:  DON'T NEED TO REPEAT REFERENCE TO BACKGROUND IMAGES TO DO THIS   */
	color: #ff0000;
    background-position: 0 -42px;
 /*   padding-bottom:5px;    */
    }
    
   .tabs ul.tabs-list .current a  span {                               /*  See above--this is the parallel image for the "span" tag (right picture)--again lowered by -42px  */
         background-position: 100% -42px;
    /*     color: #9d0d0d;  */
         color: #2d006b;
   }


    .js .tabs .current-info,
    .js .tabs .accessibletabsanchor,
    .js .tabs .tabhead  {                                             /*position each individual tab's heading (default class .tabhead) off-screen*/ 
        position:absolute;
        left:-999em;
    }
    .js .tabs .content{
        clear:both;
        margin:3em 1em 1em 1em;
    }
    .js .tabs{
        width:500px;       
    }

  
    .tabs{
        padding: 0;
        
    }
    
    .about{
        clear:both;
        padding:2em;
    }