/*
   New Perspectives on HTML and CSS
   Final Project

   Financial Table Style Sheet
   Author: David Lucas
   Date:   November 6, 2015

   Filename:         ftable.css
   Supporting files: bottom.jpg, bottomleft.jpg, bottomright.jpg,
                     left.jpg,right.jpg, vader.png,
                     top.jpg, topleft.jpg, topright.jpg

*/


/* Styles for the financial table */

table.financials {
	background: url(vader.png) center no-repeat;
	background-size: 40%;
	border-collapse: collapse;
	font-size: 16px;
	float: right;
	margin-bottom: 20px;
	margin-left: 20px;
}


/* Table header styles */

table.financials thead tr {
	background: url(top.jpg) top repeat-x;
	border-bottom: 2px solid blue;
	padding: 0px 5px 0px 0px;
	letter-spacing: 2px;
	color: blue;
}

thead tr th:first-of-type {
	background: url(topleft.jpg) top left no-repeat;
}

thead tr th:last-of-type {
	background: url(topright.jpg) top right no-repeat;
}

table.financials thead tr {
	height: 40px;
	text-align: left;
}


/* Table Body Styles */

tbody tr td:first-of-type {
	background: url(left.jpg) top left repeat-y;
	width: 22%;
}

tbody tr td:last-of-type {
	background: url(right.jpg) top right repeat-y;
	text-align: left;
	width: 22%;
}

table.financials tbody tr {
	height: 50px;
	border-bottom: 1px dotted blue;
}

table.financials tbody td {
	padding: 0px 5px 0px 5px;
	vertical-align: top;
}

tbody tr:nth-of-type(2n) {
	background-color: rgba(152, 228, 215, 0.6);
}

tbody tr:nth-of-type(odd) {
	background-color: rgb(255, 255, 255, 0.6);
}

table.financials col.middleColumn {
	width: 28%;
}

/* Styles for the table caption */

table.financials caption {
	font-size: 28px;
	letter-spacing: 5px;
	caption-side: top;
	text-align: center;
	margin-bottom: 10px;
	color: red;
}

/* Table Footer Styles */

table.financials tfoot {
	border-top: 2px solid blue;
	text-align: center;
	background: url(bottom.jpg) bottom repeat-x;
}

table.financials tfoot tr {
	height: 40px;
	color: blue;
}

tfoot tr td:first-of-type {
	background: url(bottomleft.jpg) top left no-repeat;
}

tfoot tr td:last-of-type {
	background: url(bottomright.jpg) top right no-repeat;
}