@font-face {
    font-family: "OswaldLight";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Oswald-Light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Oswald-Light-webfont.woff") format("woff"), url("../fonts/Oswald-Light-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "OswaldBook";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Oswald-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Oswald-Regular-webfont.woff") format("woff"), url("../fonts/Oswald-Regular-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "OswaldBold";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Oswald-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Oswald-Bold-webfont.woff") format("woff"), url("../fonts/Oswald-Bold-webfont.ttf") format("truetype");
}
@font-face {
    font-family: "OswaldStencilRegular";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Oswald-Stencil-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Oswald-Stencil-webfont.woff") format("woff"), url("../fonts/Oswald-Stencil-webfont.ttf") format("truetype");
}

* {margin:0; padding:0; outline:0}
body {font:12px Verdana,Arial; margin:25px; background-color:#e6edf2; overflow-x:hidden}

#tablewrapper {width:100%; margin:0 auto}

#tableheader {height:55px;width:100%;}

#tableheader option{padding-left:4px;font-size:13px; background-color:#ecf2f6;}

.search 
{
    float:left; 
}

#tableheader select {float:left; height: 30px; font-size:13px; width:125px; padding:2px 4px 4px; background-color:#f7fbfe;}

#tableheader input {
	float: left;
	font-size: 13px;
	height: 23px;
	width: 225px;
	padding: 2px 4px 4px;
	margin-left: 10px;
	border: 1px solid #c4c2c2;
	border-radius: 3px;
	background-color: #f7fbfe;
}

.details {float:right; padding-top:12px}

.details div{
	float:left;
	margin-left:15px; 
	font-size:14px;

}

	.details div.number-records-text{
		margin-top:5px;
	}

	.tinytable {
		width: 100%;
		border-left: 1px solid #c6d5e1;
		border-top: 1px solid #c6d5e1;
		border-bottom: none
	}

.tinytable th {
    border: solid 1px #b60c18;
	background: #D4202B; 
    text-align:left; color:#fff;  
    border-right:none
}

.tinytable th h3 {
	font-size:16px; 
	padding:12px; 
	line-height: 22px; 
	font-weight:400; 
	text-transform:none;
    margin-bottom: 0;
}

	.tinytable td {
		padding: 12px 6px;
		text-align: center;
		border-bottom: 1px solid #c6d5e1;
		border-right: 1px solid #c6d5e1
	}

.tinytable .head h3 {background:url(../../images/tabsresp/sort.gif) 7px center no-repeat; cursor:pointer; padding-left:18px}

.tinytable .desc, .sortable .asc {background-color:#b60c18;)}

.tinytable .desc h3 {background:url(../../images/tabsresp/desc.gif) 7px center no-repeat; cursor:pointer; padding-left:18px}

.tinytable .asc h3 {background:url(../../images/tabsresp/asc.gif) 7px  center no-repeat; cursor:pointer; padding-left:18px}

.tinytable .head:hover, .tinytable .desc:hover, .tinytable .asc:hover {color:#fff}

.tinytable .evenrow td {background:#fff}

.tinytable .oddrow td {background:#ecf2f6}

.tinytable td.evenselected {background:#ecf2f6}

.tinytable td.oddselected {background:#dce6ee}

.tinytable tfoot {background:#fff; font-weight:bold}

.tinytable tfoot td {padding:6px 8px 8px}

.tinytable td a{color:#0194cb;}

#tablefooter {height:15px; margin-top:20px;width:100%;}

#tablenav {float:left;}

#tablenav img {cursor:pointer}

#tablenav div {float:left;padding: 6px 6px 0 0; margin-right:15px}

#tablelocation 
{
    float:right;
    font-size:18px;
	padding: 6px 6px 0 0;
	}

#tablelocation select {margin-right:3px; background-color:#f7fbfe; width:70px; height:30px;}

#tablelocation option{background-color:#ecf2f6;}

#pagedropdown{width:70px; height:30px;background-color:#f7fbfe;}

#pagedropdown option{background-color:#ecf2f6;}

#tablelocation div {float:left;margin-left:15px}

.page {margin-top:2px; font-style:normal;}

#selectedrow td {background:#c6d5e1}

.txt-page{font-family:BebasNeuewebfont, sans-serif; font-size:17px;}

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

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

.btn-reset {}
.txt-txt {
	font-size: 14px;
	color: #222;
}

.button {
	display: inline-block;
	zoom: 1;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	padding: .2em 1em .35em;
	font-size: 14px;
	text-transform: uppercase;
	border:0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
/* blue */
.blue {
	color: #fff;
	border: solid 1px #b60c18;
	background: #D4202B;
	text-transform:none;
	
}
.blue:hover {
	background: #b60c18;

}
.blue:active {
	color: #fff;
	background: #990307;

}

   /* 
	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: "Name"; }
		
	}
	
	/* 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:900px;height:30px;margin:0 auto;}
.button-top{float:left; margin:0 auto;}

.red {
	
	background: #e1071c;
	width:20px; height:16px;
}
.green {
	
	background: #19d905;
	width:20px; height:16px;
}
.blueTop {
	
	background: #0095cd;
	width:20px; height:16px;
}