@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: 2%; 
      border-right: 1px solid #dad9c7; 
      margin-left: -1px; 
} 
.pearl_tblstyle th.headerSortUp { 
    background-image: url(../img/asc.gif); 
/*    background-color: #3399FF; */
} 
.pearl_tblstyle th.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; 
		}
	}