/*
   New Perspectives on HTML and CSS
   Tutorial 5
   Case Problem 3

   Dome Table Style Sheet
   Author: Herns Pierre-Louis 
   Date:   12/16/2015

   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 domespecs table*/

.demo {

	color: white;
}



table {		
	/*float: right;*/
	border-collapse: collapse; 
	font-size: 16px; 
	margin-top: 0px; 
	margin-bottom: 20px; 
	margin-left: 20px;
	background-image: url("images/tableback.png");
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: cover;
	}
	
caption { 
	font-size: 18px;
	margin-bottom: 10px; 
	letter-spacing: 5px;  
	caption-side: top;
	text-align: center 
	}
	
thead   { 
    border-bottom: 2px solid gray; 
	background: url("images/top.jpg");
    background-repeat: repeat-x;	
	}
	
thead tr{
	height: 40px;
	}
	
thead th{	
    padding-top: 0px; 
	padding-right: 5px; 
	padding-bottom: 0px; 
	padding-left: 5px;
	letter-spacing: 2px;
	}
	
thead th:first-of-type  { 
	background: url("images/topleft.jpg"); 
    background-position: top left; 
	background-repeat: no-repeat; 
	} 
	
thead th:last-of-type  {
	background: url("images/topright.jpg"); 
	background-position: top right; 
	background-repeat: no-repeat; 
	}	

tfoot  { 
	border-top: 2px solid gray; 
	background: url("images/bottom.jpg"); 
	text-align: center; 
	}
	
tfoot tr{
	height: 40px;
	}
	
tfoot td:first-of-type  { 
	background: url("images/bottomleft.jpg"); 
    background-position: left bottom; 
	background-repeat: no-repeat; 
	} 
	
tfoot td:last-of-type {
	background: url("images/bottomright.jpg");
    background-position: right bottom; 
	background-repeat: no-repeat; 	
	}

tbody tr { 
	height: 50px; 
	border-bottom: 1px dotted gray; 
	}
	
tbody tr td:first-of-type { 
	background: url("images/left.jpg"); 
	background-position: top left; 
	background-repeat: repeat-y;
	} 

tbody tr td:last-of-type { 
	background: url("images/right.jpg"); 
	background-position: top right; 
	background-repeat: repeat-y;
	align: right;
	} 	

	
 tbody tr:nth-child(even){
	background-color: rgb(152, 228, 215);
	opacity: 60%;
	}

 tbody tr:nth-child(odd){
	background-color: rgb(255, 255, 255);
	opacity: 60%;
	}
	
col.firstColumn{
	width: 20%;
}

col.middleColums{
	width: 28%;
}

col.lastColumn{
	width: 22%;
}