/* =============================================================
Simple:Press
Ranks Info Plugin CSS
============================================================= */

#spMainContainer table#spRankInfo,
#spMainContainer table#spRankInfoSpecial {
    width: 100%;
    border: 1px solid #888;
    padding: 10px;
    font-size: 0.9em;
    margin: 20px 0 40px;
}

#spMainContainer table#spRankInfo th,
#spMainContainer table#spRankInfoSpecial th,
#spMainContainer table#spRankInfo td,
#spMainContainer table#spRankInfoSpecial td {
    border: 1px solid #ccc;
    text-align: center;
    padding: 5px;
}

#spMainContainer table#spRankInfo th,
#spMainContainer table#spRankInfoSpecial th {
    font-weight: bold;
    padding: 7px;
    background: #eee;
}

#spMainContainer table#spRankInfo td.spRankMembers,
#spMainContainer table#spRankInfoSpecial td.spRankMembersSpecial {
    font-size: 0.8em;
}

#spMainContainer table.spMemberData {
    width: 100%;
}

@media screen and (max-width: 480px)  {
	#spMainContainer table#spRankInfo table,
    #spMainContainer table#spRankInfo thead,
    #spMainContainer table#spRankInfo tbody,
    #spMainContainer table#spRankInfo th,
    #spMainContainer table#spRankInfo td,
    #spMainContainer table#spRankInfo tr,
	#spMainContainer table#spRankInfoSpecial table,
    #spMainContainer table#spRankInfoSpecial thead,
    #spMainContainer table#spRankInfoSpecial tbody,
    #spMainContainer table#spRankInfoSpecial th,
    #spMainContainer table#spRankInfoSpecial td,
    #spMainContainer table#spRankInfoSpecial tr {
		display: block;
	}

	#spMainContainer table#spRankInfo table.spMemberData,
    #spMainContainer table#spRankInfo table.spMemberData thead,
    #spMainContainer table#spRankInfo table.spMemberData tbody,
    #spMainContainer table#spRankInfo table.spMemberData th,
    #spMainContainer table#spRankInfo table.spMemberData td,
    #spMainContainer table#spRankInfo table.spMemberData tr,
	#spMainContainer table#spRankInfoSpecial table.spMemberData,
    #spMainContainer table#spRankInfoSpecial table.spMemberData thead,
    #spMainContainer table#spRankInfoSpecial table.spMemberData tbody,
    #spMainContainer table#spRankInfoSpecial table.spMemberData th,
    #spMainContainer table#spRankInfoSpecial table.spMemberData td,
    #spMainContainer table#spRankInfoSpecial table.spMemberData tr {
		display: inline;
	}

   	#spMainContainer table#spRankInfo thead tr,
   	#spMainContainer table#spRankInfoSpecial thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	#spMainContainer table#spRankInfo tr,
	#spMainContainer table#spRankInfoSpecial tr {
	   border: 1px solid #ccc;
    }

	#spMainContainer table#spRankInfo table.spMemberData tr,
	#spMainContainer table#spRankInfo tr.spRankMembers,
	#spMainContainer table#spRankInfo tr.spRankMembers td,
	#spMainContainer table#spRankInfoSpecial table.spMemberData tr,
	#spMainContainer table#spRankInfoSpecial tr.spRankMembersSpecial,
	#spMainContainer table#spRankInfoSpecial tr.spRankMembersSpecial td {
	   border: none;
    }

	#spMainContainer table#spRankInfo tr.spInlineSection,
	#spMainContainer table#spRankInfoSpecial tr.spInlineSection {
	   display: none;
    }

	#spMainContainer table#spRankInfo table.spMemberData td,
	#spMainContainer table#spRankInfoSpecial table.spMemberData td {
	   border: none;
    }

	#spMainContainer table#spRankInfo tr.spRankData td,
	#spMainContainer table#spRankInfoSpecial tr.spRankDataSpecial td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	#spMainContainer table#spRankInfo tr.spRankData td:before,
	#spMainContainer table#spRankInfoSpecial tr.spRankDataSpecial td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 5px;
		left: 5px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
        text-align: left;
	}

	/* Label the data */
	#spMainContainer table#spRankInfo tr.spRankData td:nth-of-type(1):before { content: attr(data-label); }
	#spMainContainer table#spRankInfo tr.spRankData td:nth-of-type(2):before { content: attr(data-label); }
	#spMainContainer table#spRankInfo tr.spRankData td:nth-of-type(3):before { content: attr(data-label); }
	#spMainContainer table#spRankInfo tr.spRankData td:nth-of-type(4):before { content: attr(data-label); }
	#spMainContainer table#spRankInfo tr.spRankData td:nth-of-type(5):before { content: attr(data-label); }

	#spMainContainer table#spRankInfoSpecial tr.spRankDataSpecial td:nth-of-type(1):before { content: attr(data-label); }
	#spMainContainer table#spRankInfoSpecial tr.spRankDataSpecial td:nth-of-type(2):before { content: attr(data-label); }
	#spMainContainer table#spRankInfoSpecial tr.spRankDataSpecial td:nth-of-type(3):before { content: attr(data-label); }

	#spMainContainer table#spRankInfoSpecial tr.spRankMembersSpecial td:nth-of-type(4):before { content: ""; }
}