/* CSS for data-table at PriceOfSprawl.com
   Web site designed & built by Mariella Smith 
   InSightGraphicDesign.net. © 2011, all rights reserved. 
   ########################################################################## */

/* -------------------------------------------
   Color guide for data table
   -------------------------------------------
  #404980 = Darkest blue border
  #99A2CC = Medium border
  #666a80 = Darkest blue gray - subhead
  #acb6e6 = Dark blue gray -- no use?
  #bfcaff = Dark blue - th background
  #d9e0ff = Med blue - tr dark
  #f7f9ff = Very Light blue - tr light
  #b3ffbf = Med-lt green - highlight row

   -------------------------------------------
   Table Widths - set on table & #wrapper-data
   -------------------------------------------  
   767px = cell widths: 11 columns combined width
   110px = padding: 11 x 10px padding (5px ea. side)
    16px = borders: 10 x 1px border-right + 1 x 2px border-right + 2 x 2px ea. side
  ________
   893px = TOTAL width of table --> 930 new width 2014
    15px scrollbar on right sides
  ________
   908px  Outer scroll div --> 945 new width 2014

   __________________________________________________________________________ */

/* -------------------  Type  ----------------------- */

#buildout-data, /* My div holding the table, instructions, search */
#buildout-data p { 
	font-family:'FontSiteSansLightCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 16px;
	line-height: 18px;
	color: #000;
	vertical-align: bottom;
}

td {
	font-family:'FontSiteSansLightCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 14px;
	/*line-height: 16px;*/
	color: #000;
	text-align: right; /* table cells right-aligned exept .location & .water columns */
	vertical-align: bottom;
}
th,
.location {
	font-family:'FontSiteSansBoldCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 16px;
	line-height: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	vertical-align: bottom;
}
.subhd-t {
	font-family:'FontSiteSansLightCondensed', 'Helvetica Condensed', Verdana, sans-serif;
	font-size: 14px;
	/*line-height: 16px;*/
	font-weight: normal;
	letter-spacing: normal;
	vertical-align: bottom;
}
th {
	text-align: right;
}
.location,
.water {
	text-align: left;
}

.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}

/* -------------  Structure, Borders & Backgrounds  ----------------- */

#wrapper-data { /* left-aligned wrapper for data-table.html */
	position: relative;
	width: 945px;
	padding: 0 20px;
	background-color:#ffffff;
	border-bottom: 2px solid #454857; 
	border-left: 2px solid #454857;
	border-right: 2px solid #454857;
	margin: 0 auto;
}

#buildout-data {  /* My div holding the table */
	float: left;
	margin-bottom: 20px;
	background-color: #ffffff;  /* bg for whole table */
}
#buildout-table_wrapper { /* DataTables-created div */
}

#buildout-actions { /* My div holding instructions above table*/
	width: auto;
}
.chart-download-button { /* My buttons */
	float: left;
	margin: -5px 15px 5px 0;
}
#buildout-info{
	float: left;
	margin-bottom: -34px;
}
/* Negative bottom margin on #buildout-info pulls search div up into Actions divs. (negative margin on the actions div won't work) */

#buildout-table_filter {  /* DataTables-created div holds search filter */
	width: auto;
	clear: left; /* so it won't squeeze up to right of info */
	margin: 0 20px 15px 0;
	vertical-align: bottom;
}
#buildout-table_filter input {
	margin-left: 6px;
}
.dataTables_scrollBody {/* DataTables-created div */
	border-bottom: 2px solid #404980;
	border-top: 2px solid #99A2CC;
}
table {
	border-collapse: collapse;
	width: 930px;
	border: 2px solid #404980; /* border on whole table */
	table-layout: fixed;
}
thead {
	border: none; /* border on head */
}
.col-ltr th { /* column heading letters */
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 12px;
	color: #d9e0ff;
	text-align: center;
	padding-top: 2px;
	padding-bottom: 3px;
	background-color: #404980;
}
th, td {
	border: 1px solid #404980; /* border on each cell */
	padding: 5px;
}
th {
	background-color: #BFCAFF;
	cursor:pointer;
}
.location {
	border-right: 2px solid #404980;
}
.odd {
   background-color: #d9e0ff;
}
.even {
   background-color: #f7f9ff;
}
tbody tr:hover {
	background-color: #ffb3b3;
}


/* ----------------  Column Widths  -------------------- */

#city-county, .city-county {
	width: 40px;
}
.location {
	width: 122px;
}
#pop-inc, .pop-inc {
	width: 70px;
}
#pop-current, .pop-current {
	width: 70px;
}
#pop-buildout, .pop-buildout {
	width: 70px;
}
#water, .water {
	width: 65px;
}
#prop-valu-2007, .prop-valu-2007 {
	width: 50px;
}
#edu-total, .edu-total {
	width: 92px;
}
#edu-student, .edu-student {
	width: 58px;
}
#roads-total, .roads-total {
	width: 85px;
}
#roads-home, .roads-home {
	width: 45px;
}
/* TOTAL Column Widths = 767px */