/*
--------------Default Styles--------------
#tableid -> .table-default
#tableid thead tr th -> .head-default
#tableid tbody tr td -> .body-default
#tableid caption -> .caption-default
--------------Default Styles--------------
*/
.table-default
{
	width: 300px;
	margin: 1em auto;
	border-collapse: collapse;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	border-right: 1px solid #A2A2A2;
}
.head-default
{
	font-weight: normal;
	color: #FEFEFE;
	text-align: center;
	border: 1px solid #A3A3A3;
	padding: 0.4em 1em 0.3em;
	background-color: #E977AF;
	font-family: 'Raleway', sans-serif;	
}
.body-default
{
	color: #000000;
	padding: 9px;
	border: 1px solid #A3A3A3;
	text-align: left;
	background-color: #F9DFEC;

}
.body-default a { color:#c60070;}
.caption-default
{
	color: #646464;
	font-size: 0.94em;
	letter-spacing: 0.1em;
	margin: 1em 0 0;
	padding: 0;
	caption-side: top;
	text-align: center;
}
/*
--------------Default Styles--------------


--------------Hover and Stripped Styles--------------
-- Hover Head --
#tableid thead tr th -> .hoverhead-default
#tableid tbody tr td -> .hoverheadtd-default
-- Hover Body --
#tableid tbody tr -> .hoverbody-default
-- Stripped --
#tableid tbody tr -> .odd-default
--------------Hover and Stripped Styles--------------
*/
.odd-default
{
	color: #000000;
	background-color: #FFFFFF;
}
.hoverhead-default
{
	color: #FFFFFF;
	cursor: default;
	background-color: #B2B2B2;
	text-decoration: underline;
	border-left: 1px solid #B2B2B2;
}
.hoverheadtd-default
{
	color: #020202;
	background-color: #DADBDB;
}
.hoverbody-default
{
	color: #BFBFBF;
	background-color: #262626;
	cursor: default;
}
li {
	color: #c60070;
}
li span {
	color:#000000;
}
/*
--------------Hover and Stripped Styles--------------


--------------Numeration Styles--------------
#tableid tbody tr-> .num-default
extend: .num-default:hover
--------------Numeration Styles--------------

*/
.num-default
{
	color: #827272;
	cursor: pointer;
	background-color: #DBDBDB;
	padding: 9px;
	text-align: center;
	border: 1px solid #FFFFFF;
}
.num-default:hover
{
	background-color: #5B5B5B;
	color: #FFFFFF;
}
/*
--------------Numeration Styles--------------

--------------Sorting Styles--------------
*/
.clickable-default
{
	cursor: pointer;
}
.sorted-default
{
	color: #FFFFFF;
	background-color: #3C3C3C;
}
.onclick-default
{
	font-weight: bold;
}
.sort-img
{
	float: right;
	height: 13px;
}
/*
--------------Sorting Styles--------------

--------------Pagination Styles--------------
*/
.pagination
{
	width: 300px;
	margin: -0.3em auto 1em;
	font-family: 'Raleway', sans-serif;
}
.page-list
{
	display: inline;
}
.page-item
{
	display: inline;
	padding: 0px 5px;
	margin: 0px 2px;
	border: 1px solid #7C7C7C;
	color: #020202;
	cursor: pointer;
}
.page-item:hover
{
	background-color: #191919;
	color: #FFFFFF;
}
.selected-page-item
{
	background-color: #121212;
	color: #FFFFFF;
}
#pag-info
{
	float: left;
	margin-left: 15px;
}
#pag-btn
{
	float: right;
}
/*
--------------Pagination Styles--------------

--------------Highlight Style--------------
*/
.highlight-default
{
	color: #E977AF;
}
.clicklight-default
{
	color: #E977AF;
}
/*
--------------Highlight Style--------------

--------------Edit Box Style--------------
*/
.editcell
{
	color: #020202;
	background-color: #FFFFFF;
	height: 25px;
	text-align: center;
	padding: 8px 0 0;
	font-family: 'Raleway', sans-serif;
}
.editcell:hover
{
}
UL.btn
{
	border: 0px solid #000000;
	width: 146px;
	margin: 10px 0 0;
}
UL.btn LI
{
	display: inline;
	margin: 1px;
	border: 1px solid #AAAAAA;
	padding: 3px;
}
UL.btn LI:hover
{
	background-color: #020202;
}
UL.btn LI A
{
	color: #FFFFFF;
	text-decoration: none;
}
UL.btn LI A:hover
{
	text-decoration: underline;
	cursor: pointer;
}
/*
--------------Edit Box Style--------------


--------------Highlight Word--------------
*/
.hlight
{
	font-weight: bold;
}
/*
--------------Highlight Word--------------
*/
#wrapper { 
	width:100%;
	max-width: 955px;
	margin:0 auto; 
	font-family: 'Open Sans', sans-serif; 
	font-size:14px;

}
#mydata { 
	width:100%;
	max-width: 955px;
}




/* 
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)  {

	/* Force table to not be like tables anymore */
	#mydata table, #mydata thead, #mydata tbody, #mydata th, #mydata td, #mydata tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	#mydata thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	#mydata tr { border: 1px solid #ccc; }
	
	#mydata td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	#mydata 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
	*/
	#mydata td:nth-of-type(1):before { content: "Project Title"; }
	#mydata td:nth-of-type(2):before { content: "Investigators"; }
	#mydata td:nth-of-type(3):before { content: "Organization"; }
	#mydata td:nth-of-type(4):before { content: "State/ Country"; }
	#mydata td:nth-of-type(5):before { content: "Affiliate"; }
	#mydata td:nth-of-type(6):before { content: "Mechanism"; }
}

/* NEW STYLES 2018-10-02 */
.pink-title {
	background-color: #E977AF;
	color: #fff;
}