/*
   New Perspectives on HTML and CSS
   Final Project

   Records Table Style Sheet
   Author: Daniel Milton
   Date:   05/29/2016

   Filename:         dtable.css
   Supporting files: bottom.jpg, bottomleft.jpg, bottomright.jpg,
                     left.jpg, right.jpg, tableback.jpg,
                     top.jpg, topleft.jpg, topright.jpg

*/

*/

/* Styles for the Records table */

table.recordsSpecs{

   font-size: 16px;
   margin-bottom: 20px;
   margin-left: 20px;
   float: right;
   border-collapse: collapse;
   background-image: url(tableback.png) bottom-right corner no-repeat;
   background-size: 80px;
   padding-top: 0px;
   padding-bottom: 0px;
   padding-left: 5px;
   padding-right: 5px;
   
}

/* Table caption style */

table.caption {

   font-size: 18px;
   letter-spacing: 5px;
   text-align: center;
   margin-bottom: 10px;

}

/* Table header style */

table.recordsSpecs thead tr {

  border-bottom: 2px solid gray;
  background-image: url(top.jpg) horizontal-top repeat-y;
  height: 40px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 5px;
  padding-right: 5px; 
  letter-spacing: 2px;

}

div#first-data-cell tr {

  background-image: url(left.jpg) top-left corner repeat-y vertically;

 } 
  
div#last-data-cell tr {

  background-image: url(right.jpg) top-right corner repeat-y vertically;

 } 
 
div#first-of-type{

  background-image: url(topleft.jpg) top-left corner no-repeat;

}

div#last-of-type{

  background-image: url(topright.jpg) top-right corner no-repeat;

}

/* Table body styles */

table.recordsSpecs tbody tr {

  height: 50px;
  border-bottom: 1px dotted gray; 
  text-align: right;
  
}

div#nth-of-type even tr {

  background-color: rgb(152, 228, 215, 0.6)
  
}
 
 div#nth-of-type odd tr {

  background-color: rgb(255, 255, 255, 0.6)
  
}
 
 table.recordsSpecs col.firstColumn {

   width: 22%;

 }
 
 table.recordsSpecs col.middleColumns {

   width: 28%;

 }
 
 table.recordsSpecs col.lastColumn {

   width: 22%;

 }
 
 /* Table footer style */

table.footer {

   border-top: 2px solid gray;
   text-align: center;
   background-image: url(bottom.jpg) horizontally-bottom repeat;
   height: 40px;

}

 div#first-of-type{
  background-image: url(bottomleft.jpg) bottom-left corner no-repeat;

}

div#last-of-type{

  background-image: url(bottomright.jpg) bottom-right corner no-repeat;