/*!
* @author Steven Masala [me@smasala.com]
* Github: https://github.com/smasala/responsive-tables-js
* @license: MIT https://tldrlegal.com/license/mit-license
* Responsive Tables
* @version 1.0.0
*/

table.responsive span[data-type="responsive"]{
	display:none;
}

@media only screen and (max-width:768px){
	table.responsive span[data-type="responsive"]{
		display:inline-block;
		width:45%;
		color:#a8a8a8;
		vertical-align:top;
	}
	
	table.responsive, table.responsive thead, table.responsive tbody, table.responsive th, table.responsive td, table.responsive tr { 
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		display: block; 
	}
	
	html.ie9 table.responsive, html.ie9 table.responsive thead, html.ie9 table.responsive tbody, html.ie9 table.responsive th, html.ie9 table.responsive td, html.ie9 table.responsive tr{
		float: left;
		clear: both;
		width: 100%
	}
	
	table.responsive tr { 
		border: 1px solid #ccc;
	}
	
	table.responsive td{
		border: none;
	}
	
	table.responsive th{
		display:none;
	}


/*****************Tinytable Style******************/

body {}
#tablewrapper {width:100%; margin:0 auto}
#tableheader {height:55px;width:100%;}
#tableheader option{padding-left:4px;font-size:13px;}
.search {float:left; padding:6px; border:1px solid #c6d5e1;}
#tableheader select {float:left; font-size:13px; width:125px; padding:2px 4px 4px;}
#tableheader input {float:left; font-size:13px; width:300px; padding:2px 4px 4px; margin-left:4px;}
.details {float:right; padding-top:12px}
.details div{float:left; margin-left:15px; font-size:17px}
.tinytable {width:100%; border:1px solid #c6d5e1;}
.tinytable th {text-align:center; border:1px solid #c6d5e1;}
.tinytable th h3 {font-size:15px; padding:8px 8px 8px}
.tinytable td {padding:4px 6px 6px; border:1px solid #c6d5e1; text-align: center;}
.tinytable .head h3 {background:url(sort_columns.png) 16px center no-repeat; cursor:pointer; padding-left:6px}

.tinytable .desc h3 {background:url(sort_descending.png) 16px center no-repeat; cursor:pointer; padding-left:6px}
.tinytable .asc h3 {background:url(sort_ascending.png) 16px  center no-repeat; cursor:pointer; padding-left:6px}


.tinytable tfoot {background:#fff; font-weight:bold}
.tinytable tfoot td {padding:6px 8px 8px}

#tablefooter {height:15px; margin-top:20px;width:100%;}
#tablenav {float:left;}
#tablenav img {cursor:pointer; padding:4px}
#tablenav div {float:left; margin-right:15px}
#tablelocation {float:right; font-size:18px;background: none repeat scroll 0 0 ;border: 1px solid #C6D5E1;padding: 6px;}
#tablelocation select {margin-right:3px; background-color:#f7fbfe;width:70px;}
#tablelocation option{background-color:#ecf2f6;}
#pagedropdown{width:70px; height:24px;background-color:#f7fbfe;}

#pagedropdown option{background-color:#ecf2f6;}
#tablelocation div {float:left; margin-left:15px}
.page {margin-top:2px; font-style:normal;}


/***Heading pannel contact***/
.heading-color{	background:#019dd8;border-bottom:1px solid #54c9f5;}

/*****************Button Style******************/

.btn-reset {}
.txt-txt{font-size:17px;}

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .2em 1em .35em;
	text-shadow: 0px 1px 3px rgba(150, 150, 150, 1);
	-webkit-border-radius: .1em; 
	-moz-border-radius: .1em;
	border-radius: .1em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
/* blue */
.blue {

	
}
.blue:hover {
	background: #007ead;

}
.blue:active {
	color: #80bed6;
	background: #00adee;

}

   /* 
	Max width before this PARTICULAR table gets nasty
	This query will take effect for any screen smaller than 760px
	and also iPads specifically.
	*/
	@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	.tinytable{margin-top:50px;}
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		.tinytable td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/

		td:nth-of-type(1):before { content: "ID"; }
		td:nth-of-type(2):before { content: "State"; }
		td:nth-of-type(3):before { content: "State Abbreviation"; }
		td:nth-of-type(4):before { content: "State Voter Information Website"; }
		td:nth-of-type(5):before { content: "vote411.org Website"; }
	}
	


	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { padding: 0; margin: 0; width: 320px; }
		#tableheader input{margin-top:10px;}	
			
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
		
	}
	
	
	
	/*Preview*/
.preview-top{width:100%; height:30px;}
.sub-preview{width:768px;height:30px;margin:0 auto;}
.button-top{float:left; margin:0 auto;}

.red {
	

}
.green {
	

}
.blueTop {
	
	background: #0095cd;
	width:20px; height:16px;
}


	
}