@charset "utf-8";
/* CSS Document */
.pearl_tblstyle
{ 
    margin:10px;
    width: 100%; 
    border-collapse: inherit; 
    border-style: solid;
    margin : 10px;
}

.pearl_tblstyle tr th {
    text-transform: capitalize;
}

.pearl_tblstyle tr td {
    cursor: pointer;
}

.pearl_tblstyle th.header { 
      background-image: url(../img/bg.gif); 
      cursor: pointer; 
      font-weight: bold; 
      background-repeat: no-repeat; 
      background-position: center left; 
      padding-left: 12px; 
      border-right: none; 
      margin-left: -1px; 
} 
.pearl_tblstyle th.header.headerSortUp { 
    background-image: url(../img/asc.gif); 
/*    background-color: #3399FF; */
} 
.pearl_tblstyle th.header.headerSortDown { 
    background-image: url(../img/desc.gif); 
/*    background-color: #3399FF; */
} 

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	.pearl_tblstyle thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	
	.pearl_tblstyle tr td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.pearl_tblstyle 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;
                content : '';
	}
	
	/*
	Label the data
	*/
	.pearl_tblstyle td:before { content:  attr(data-content);display: inline-block; }
	
}
/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			width: 320px; }
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { 
			width: 495px; 
		}
	}
        
/**************** Pagination ************/


/*  table styling */
.myTable {
    border-collapse: inherit;
    border: 1px solid #ccc;
    width:90%;
}

.myTable tr td {
   
    padding: 5px;
}
.myTable tr.odd td {
    background-color: #ccc;
}
/*  table styling   */
th.header { 
    background-image: url(img/bg.gif); 
    cursor: pointer; 
    font-weight: bold; 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding:5px 5px 10px;  
    margin-left: -1px;
    font-size:14px;
    text-align: left;
    text-indent: 12px;
} 
th.header.headerSortUp { 
    background-image: url(img/asc.gif); 
    background-color: #cccccc;
    background-repeat: no-repeat;
} 
th.header.headerSortDown { 
    background-image: url(img/desc.gif); 
    background-color: #cccccc;
    background-repeat: no-repeat;
} 
.pager li,
.btn {
    border-radius : 2px;
    display: inline-block;
    width:60px;
    height:30px;
    line-height: 30px;
    cursor: pointer;
    margin-right: 4px;
    background: #ccc;
    text-align:center;
}

.goTo {
    padding : 0;
    margin : 10px 0;
}
.pager .goTo li:hover,
.pager .goTo li.active {
    background: #000;
    color: #fff;
}
.pager .pagedisplay {
    height: 30px;
    border-radius: 2px;
    border: 1px solid #ccc;
    width: 60px;
    padding: 5px;
    text-align: center;
    display: inline-block;
    margin-bottom: 0;
}
/* pager wrapper, div */
.tablesorter-pager {
	padding: 5px;
}
/* pager wrapper, in thead/tfoot */
td.tablesorter-pager {
	background-color: #ccc;
	margin: 0; /* needed for bootstrap .pager gets a 18px bottom margin */
}
/* pager navigation arrows */
.tablesorter-pager img {
	vertical-align: middle;
	margin-right: 2px;
	cursor: pointer;
}

/* pager output text */
.tablesorter-pager .pagedisplay {
	padding: 0 5px 0 5px;
	width: auto;
	white-space: nowrap;
	text-align: center;
}

/* pager element reset (needed for bootstrap) */
.tablesorter-pager select {
	margin: 0;
	padding: 0;
}

/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.tablesorter-pager.disabled {
	display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.tablesorter-pager .disabled {
	/* visibility: hidden */
	opacity: 0.5;
	filter: alpha(opacity=50);
	cursor: default;
}
.pager .pagesize {
    border: 1px solid #ccc;
    border-radius: 2px;
    height :30px;   
    width: 52px;
    text-align: center;
    margin: 0;
    padding-bottom: 0;
    padding-top: 0;
}

.pager {
    margin: 10px;
}