/*Setting a float to fix a float*/
/*Make dl independent and self contained make the parent div and the dl's independent*/
body {
    font-size: 16px;
}

#bridgelessons div , dt , dl , dd span li {
    padding:0;
    margin:0;
    line-height:0;
	text-align:left
}

/*dlboxing has width 25em (+.25px border width)*/
/*this containd 4em margin + 21em dl*/
#dl_container {
    float: left;
    font-size: 16px;
    width: 80%;
    padding: 0 0;
    border: 0px solid #C8CDD2;
}

    /*this contains two columns of 14em + 7em*/
/*dlboxing*/
    /*width % is 27em/31em*/

    #dl_container dl {
        float: left;
        width: 87.0967742%;
        margin: 2em 2em;
        padding: 0;
        display: inline;
        background: url(fauxcolumn_background1-02.png) repeat-y 25% 0;
    }

    /*the total of the dl is 350 px*/
    /*the width of the img is 88.3 px*/
    /*the margin of the dl is 40px (20 x 2)*/
    /*that leaves 350-88.3-40 = 221.7 for the dt*/
    /*now take off another 2px for the img border and 8 px for the margin and 8 for padding*/



    /*width input em is 20 em / 1.30 = 15.38461538 em*/

    /*width % is 15.38461538em/27em*/

    #dl_container dt {
        float: right;
        width: 70%;
        margin: 0;
        padding: 0;
        padding-left: 1em;
        font-size: 130%;
        letter-spacing: 1px;
        color: #627081;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /*background for the header*/
        background: red;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }


    /*width is 100px /216 */
    #dl_container dd {
        margin: 0;
        padding: 0;
        font-size: 100%;
        line-height: 1.5em;
        color: #666;
        padding: 0;
        margin: 0;
    }

    #dl_container dl .dd_img img {
        float: left;
        margin: 0 8px 0 0;
        padding: 4px;
        border: 1px solid #d9e0e6;
        border-bottom-color: #c8cd02;
        border-right-color: #c8cd02;
        background: transparent;
    }


    #dl_container dl .dd_smaller_img img {
        float: left;
        margin: 0 8px 0 0px;
        padding: 4px 10px 4px 10px;
        border: 1px solid #d9e0e6;
        border-bottom-color: #c8cd02;
        border-right-color: #c8cd02;
    }

    /*width input em is 20 em /.9 = 22.2222 em*/

    #dl_container dl .text {
        float: right;
        width: 70%;
        font-size: 90%;
        padding: 0;
        padding-left: 1.44444em;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }


.aspectbox1-1 {
    position: relative;
    width: 50%; /* desired width */
    text-align: center;
    background: green;
}

    /*padding-top provides the height for the element*/
    .aspectbox1-1:before {
        content: "";
        display: block;
        padding-top: 100%; /* initial ratio of 1:1*/
        background: red;
    }

.content {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 0%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: blue;
    background: url(https://www.bridgewebs.com/cbc/book1.jpg) no-repeat;
    background-position: top;
    background-size: 100%;
}

.content2 {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 0%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: blue;
    background: url(https://www.bridgewebs.com/cbc/book2.jpg) no-repeat;
    background-position: top;
    background-size: 100%;
}


.content3 {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 0%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: blue;
    background: url(https://www.bridgewebs.com/cbc/book3.png) no-repeat;
    background-position: top;
    background-size: 100%;
}

.content4 {
    position: absolute;
    text-align: center;
    vertical-align: middle;
    top: 0%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: blue;
    background: url(https://www.bridgewebs.com/cbc/payment_methods.png) no-repeat;
    background-position: top;
    background-size: 100%;
}

.aspectbox2-1 {
    position: relative;
    width: 50%; /* desired width */
    text-align: center;
    background: green;
}

    /*padding-top provides the height for the element*/
    .aspectbox2-1:before {
        content: "";
        display: block;
        padding-top: 50%; /* initial ratio of 1:1*/
        background: blue;
    }

.aspectbox1-2 {
    position: relative;
    width: 50%; /* desired width */
    text-align: center;
    background: green;
}

    /*padding-top provides the height for the element*/
    .aspectbox1-2:before {
        content: "";
        display: block;
        padding-top: 200%; /* initial ratio of 1:1*/
        background: magenta;
    }

.aspectbox4-3 {
    position: relative;
    width: 50%; /* desired width */
    text-align: center;
    background: green;
}

    /*padding-top provides the height for the element*/
    .aspectbox4-3:before {
        content: "";
        display: block;
        padding-top: 75%; /* initial ratio of 1:1*/
        background: violet;
    }

.aspectbox16-9 {
    position: relative;
    width: 50%; /* desired width */
    text-align: center;
    background: green;
}

    /*padding-top provides the height for the element*/
    .aspectbox16-9:before {
        content: "";
        display: block;
        padding-top: 56.25%; /* initial ratio of 1:1*/
        background: green
    }

.aspectboxA4-portrait {
    position: relative;
    width: 50%; /* desired width */
    text-align: center;
    background: green;
}

    /*padding-top provides the height for the element*/
    .aspectboxA4-portrait:before {
        content: "";
        display: block;
        padding-top: 141.42858%; /* initial ratio of 1:1*/
        background: #666
    }

.aspectboxA4-landscape {
    position: relative;
    width: 50%; /* desired width */
    text-align: center;
    background: green;
}

    /*padding-top provides the height for the element*/
    .aspectboxA4-landscape:before {
        content: "";
        display: block;
        padding-top: 70.70707%; /* initial ratio of 1:1*/
        background: #088
    }





.aspectbox1-1738 {
    position: relative;
    width: 50%; /* desired width */
    margin: 0;
    padding: 0;
    text-align: center;


}

    /*padding-top provides the height for the element*/
    .aspectbox1-1738:before {
        content: "";
        display: block;
        padding-top: 12em /* initial ratio of 1:1*/;

        /*background: url(twocol_bg.png) repeat-y 70% 0;
        background: url(twocol_bg.png) space 0 0;*/
    }

.text ul li {
    margin: 0;
    padding: 0;
    border: none;
    list-style-position: inside;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aspectbox145-189 {
    position: relative;
    width: 50%; /* desired width */
    text-align: center;
    background: green;
}

    /*padding-top provides the height for the element*/
    .aspectbox145-189:before {
        content: "";
        display: block;
        padding-top: 130.34%; /* initial ratio of 1:1*/
        background: magenta;
    }

.flex-container {
    display: flex;
    background-color: DodgerBlue;
    font-size:
}

    .flex-container > div {
        background-color: #f1f1f1;
        margin: 0px;
        padding: 0px;
        font-size: inherit;

    }
.shadow_outline {
    text-shadow: 0 0 4px white, 0 0 4px white, 0 0 4px white, 0 0 4px white 0 0 4px
}
}