Template:HeroSkill/styles.css

/* For Templates:HeroSkill */

/* Container */
.skillcontainer {
	margin: 5px auto 10px;
	overflow: hidden;
	background: #053849;
	border: 3px solid #3FB9BE; }
.skillcontainer td {
	vertical-align: top; }
	
/* Skill description (initially visible part) */
.skillheader {
	vertical-align: middle !important;
	padding: 0 10px 3px;
	background: #3FB9BE;
	font-weight: bold;
	color: #FBFAD9; }
.skillname {
	font-size: 24px;
	line-height: 1.6;
	font-family: 'MuseoSans500';
	font-weight: bold;
	text-transform: uppercase; }
.skillicon {
	width: 130px;
	padding: 0;
	vertical-align: top;
	background: #0D5467; }
.skillstat {
	font-size: 95%;
	padding: 5px 10px;
	white-space: nowrap;
	width: 110px;
	vertical-align: middle !important; }
.skillstat img {
	width: 17px;
	height: auto; }
.skillinfo {
	font-size: 95%;
	float: right;
	text-align: right;
	line-height: 1.3; }
.skilldesc {
	padding:5px 10px;
	background:#0D5467; }
body.skin-vector .skilldesc { /* On Vector */
	font-size: 110%; }

/* Toggle */
.upgradetoggle {
	cursor: pointer;
	text-align: center;
	font-size: 90%;
	color: #D1E7E8; }
	
/* Upgrades */
.skillpath {
	border-collapse: collapse;
	/*width: 100%;*/ }
.skillpath th {
	background: #1A7D93;
	padding: 5px; }
.skillpath td {
	background: #154352;
	padding: 5px; }

.pathcaption {
	font-size: 90%;
	color: #D1E7E8;
	line-height: 1; }

/* On desktop */
@media only screen and (min-width: 501px) {
	.pathmobile, .descmobile {
		display: none; }
	.leftleft {
		width: 24.5%; }
	.updtypeleft {
		float: left;
		margin: 2px 10px 2px 2px; }
	.updtyperight {
		float: right;
		margin: 2px 2px 2px 10px; }
	.pathdescright, .pathdescleft {
		width: calc(100% - 85px); }
	.pathdescright {
		float: right; }
	.pathdescleft {
		float: left; }
}
/* On mobile */
@media only screen and (max-width: 500px) { 
	.skillstat {
		width: 100% !important; }
	.pathdesktop, .descdesktop {
		display: none; }
	.leftleft {
		width: 50%; }
	.updtypeleft, .updtyperight {
		width: 100%;
		text-align: center;
		margin: 5px 0; }
}

/* [[Category:Styling pages]] */