Template:HeroNav/styles.css

/* For Template:HeroNav */

/* Container for all icons */
.iconbox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	white-space: pre-wrap;
	text-align: center;
	padding: 10px;
	color: #F5F7D1;
	font-size: 90%;
	max-width: 1150px;
	margin: 0 auto; }
	
/* Container for single icon (a table) */
.iconhandler {
	border-collapse: collapse;
	margin: 0 10px 5px;
	line-height: 1.1; }
.iconhandler tr {
	vertical-align: top; }
/* Behaviour on smaller screens on Timeless */
@media only screen and (max-width:1412px) {
	body.skin-timeless .iconhandler {
    	margin: 0 10px; }
}
@media only screen and (max-width:1332px) {
	body.skin-timeless .iconhandler {
    	margin: 0 5px; }
}
@media only screen and (max-width:1284px) {
	body.skin-timeless .iconhandler {
    	margin: 0 3px; }
}
@media only screen and (max-width:1220px) {
	body.skin-timeless .iconhandler {
    	margin: 0; }
} 
	
.iconsize {
	width: 62px;
	height: 62px; }

/* Icon image (hover) */
.iconsize img {
	border: 3px solid #017087;
	margin: 2px;
	background: linear-gradient(#E7E7E7, #C6C7C6); }
.iconsize img:hover {
	border-color: #3FB9BE; }

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