// implement the same content padding
#maincontent > * {
    margin-left: @mobile-pad;
    margin-right: @mobile-pad;

    @media @bp3 {
    	max-width: 60rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.wdn-band {
    max-width: 100% !important; //important is required to overpower the wildcard selector above
    clear: both;

    #maincontent > *& {
        margin: 0;
    }

    .wdn-inner-wrapper {
        .clear-fix();
        padding-left: @mobile-pad;
        padding-right: @mobile-pad;

        @media @bp3 {
            padding-left: 0;
            padding-right: 0;
            width: 60rem;
        	margin: 0 auto;
        }

        .wdn-text-band& {
        	max-width: 50rem;
        }

        #maincontent & {
            padding-top: 2.369em;
            padding-bottom: 2.532em;

            @media @bp2 {
                padding-top: 3.157em;
                padding-bottom: 3.375em;
            }

            &.wdn-inner-padding-sm {
                padding-top: 1.333em;
                padding-bottom: 1.425em;

                @media @bp2 {
                    padding-top: 1.777em;
                    padding-bottom: 1.899em;
                }
            }

            &.wdn-inner-padding-lg {
                padding-top: 4.209em;
                padding-bottom: 4.449em;

                @media @bp2 {
                    padding-top: 5.61em;
                    padding-bottom: 5.997em;
                }
            }

            &.wdn-inner-padding-no-top {
                padding-top: 0;
            }

            &.wdn-inner-padding-no-bottom {
                padding-bottom: 0;
            }

            &.wdn-inner-padding-none {
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }

    .wdn-stretch { // Use this class for presentational elements that stretch the full-width of the band
        max-width: 100%;
        width: 100%;
    }

    .wdn-center {
        text-align: center;
    }
}