@linkContainerSize: 13vmin;
@borderDiameter: 0.8;
@borderWidth: 0.05 * @borderDiameter;
@iconFontSize: 0.6 * @borderDiameter;
@iconTopMargin: 0.22 * @borderDiameter;
@active: 0.9;
@titleHorizontalOffset: 1.15vw;

@activeBorderMargin: @linkContainerSize * @borderDiameter * ((1 - @active) / 2);

/* Links */
a.link {
    width: @linkContainerSize;
    height: @linkContainerSize;
}

    a.link > b {
        width: @linkContainerSize * @borderDiameter;
        height: @linkContainerSize * @borderDiameter;
        border-width: @linkContainerSize * @borderWidth;
        border-style: solid;
    }

        a.link > b > i {
            font-size: @linkContainerSize * @iconFontSize;
            top: @linkContainerSize * (@iconTopMargin - @borderWidth);
        }


    a.link:active > b {
        width: @linkContainerSize * @borderDiameter * @active;
        height: @linkContainerSize * @borderDiameter * @active;
        border-width: @linkContainerSize * @borderWidth * @active;
        top: @activeBorderMargin;
        left: @activeBorderMargin;
    }

        a.link:active > b > i {
            font-size: @linkContainerSize * @iconFontSize * @active;
            top: @linkContainerSize * (@iconTopMargin - @borderWidth) * @active;
        }

    a.link > p.alt {
        font-size: @linkContainerSize * @borderDiameter * 0.2;
        top: @linkContainerSize * @borderDiameter * (-0.2 - @borderWidth);
        margin-right: @titleHorizontalOffset;
    }

    a.link:active > p.alt {
        font-size: @linkContainerSize * @borderDiameter * 0.2 * @active;
        top: @linkContainerSize * @borderDiameter * (-0.2 - @borderWidth) * @active + @activeBorderMargin;
    }
	
    a.link > b > i.small {
        font-size: @linkContainerSize * @borderDiameter * 0.5;
        top: @linkContainerSize * (@iconTopMargin - @borderWidth) * 0.4;
    }

    a.link:active > b > i.small {
        font-size: @linkContainerSize * @borderDiameter * 0.5 * @active;
        top: @linkContainerSize * (@iconTopMargin - @borderWidth) * 0.4 * @active;
    }
	
    a.link > b > i > span.temperature {
        font-size: @linkContainerSize * @borderDiameter * 0.3;
        top: @linkContainerSize * 0.4;
    }

    a.link:active > b > i > span.temperature {
        font-size: @linkContainerSize * @borderDiameter * 0.3 * @active;
        top: @linkContainerSize * 0.4 * @active;
    }

/*Icon Corrections*/
#Google > b > i {
    top: @linkContainerSize * 0.17;
}
#Google:active > b > i {
    top: @linkContainerSize * 0.17 * @active;
}

#Facebook > b > i {
    top: @linkContainerSize * 0.2;
    left: @linkContainerSize * 0.18;
}
#Facebook:active > b > i {
    top: @linkContainerSize * 0.2;
    left: @linkContainerSize * 0.18 * @active;
}

#Pluralsight > b > i {
    top: @linkContainerSize * 0.13;
    left: @linkContainerSize * 0.1;
}
#Pluralsight:active > b > i {
    top: @linkContainerSize * 0.13 * @active;
    left: @linkContainerSize * 0.1 * @active;
}

#Marktplaats > b > i {
    top: @linkContainerSize * 0;
	font-size: @linkContainerSize * @iconFontSize * 1.35;
	font-weight: bold;
}
#Marktplaats:active > b > i {
    top: @linkContainerSize * 0 * @active;
	font-size: @linkContainerSize * @iconFontSize * 1.35 * @active;
	font-weight: bold;
}

#GooglePlus > b > i {
    top: @linkContainerSize * 0.17;
    left: @linkContainerSize * 0.12;
}
#GooglePlus:active > b > i {
    top: @linkContainerSize * 0.17 * @active;
    left: @linkContainerSize * 0.12 * @active;
}

#AFAS > b > i {
    left: @linkContainerSize * 0.04;
}
#AFAS:active > b > i {
    left: @linkContainerSize * 0.04;
}

/* Wheater info popup */
.weatherInfo {
    top: @linkContainerSize;
}