@import 'common.less';

@top-bar-height-px: 100px;
@top-bar-height-em: unit(@top-bar-height-px / @font-size-px, em);
@top-bar-menu-horizontal-margin-em: unit(@global-space-px / @font-size-px, em);
@top-bar-menu-vertical-padding-em: unit((@top-bar-height-px - @menu-link-size-px) / 2 / @font-size-px, em);
@tob-bar-menu-item-horizontal-margin-px: 35px;
@tob-bar-menu-item-horizontal-margin-em: unit(@tob-bar-menu-item-horizontal-margin-px / @font-size-px, em);
@top-bar-flags-vertical-padding-em: unit((@top-bar-height-px - @flag-height-px) / 2 / @font-size-px, em);
@bottom-bar-height-px: 150px;
@bottom-bar-height-em: unit(@bottom-bar-height-px / @font-size-px, em);
@flag-height-px: 32px;
@banner-height-px: 897px;
@banner-logo-margin-px: 200px;
@banner-logo-margin-em: unit(@banner-logo-margin-px / @font-size-px, em);

.top-bar {
	min-height: @top-bar-height-em;
}

.top-bar-column {
    float: left;
}

.top-bar-column:nth-child(1) {
    width: 77.777777%;
    text-align: left;
}

.top-bar-column:nth-child(2) {
    width: 22.222222%;
    text-align: right;
}

.bottom-bar {
    min-height: @bottom-bar-height-em;
}

.top-bar-menu {
    margin-left: @top-bar-menu-horizontal-margin-em;
    padding-top: @top-bar-menu-vertical-padding-em; // vertically centered
    padding-bottom: @top-bar-menu-vertical-padding-em; // vertically centered
    li {
        margin-right: @tob-bar-menu-item-horizontal-margin-em;
        display: inline-block;
    }
    li:last-child {
        margin-right: 0;
    }
    a {
        font-size: @menu-link-size-em;
    }
}

.top-bar-flags {
    margin-right: @global-space-em;
    padding-top: @top-bar-flags-vertical-padding-em; // vertically centered
    padding-bottom: @top-bar-flags-vertical-padding-em; // vertically centered
    li {
        display: inline;
    }
}

.banner {
    .center();
    max-width: @page-width-px;
}

.content-column-container {
    .center();
    max-width: @page-width-px;
}

.content-column {
    @horizontal-margin-perc: unit(@global-space-px * 100 / @page-width-px, %);
    @vertical-margin-em: unit(@global-space-px / @font-size-px, em);
    @padding-perc: unit(@global-space-px * (100 - @horizontal-margin-perc) / @page-width-px, %);
    @width-perc: unit((100 - (4 * @horizontal-margin-perc)) / 3, %);
    margin-left: @horizontal-margin-perc;
    margin-bottom: @vertical-margin-em;
    padding: @padding-perc;
    width: @width-perc;
    float: left;
}

.content-column:last-child {
    @horizontal-margin-perc: unit(@global-space-px * 100 / @page-width-px, %);
    margin-right: @horizontal-margin-perc;
}