.callOut-main {
    height: 20px; /* variable */
    left: 9px;
    position: absolute;
    top: 0;
    width: 50px; /* variable */
}
.callOut-bot {
    border-bottom: 2px #008bad solid;
    bottom: 0;
    display: inline-block;
    left: 0;
    position: absolute;
    width: 60%; /* this plus mid must equal main width */
}
.callOut-mid {
    border-right: 2px #008bad solid;
    bottom: 0;
    display: inline-block;
    height: 100%;
    position: absolute;
    right: 40%; /* same as top width */
    width: 40%; /* same as right; this plus bot must equal main width */
}
.callOut-top {
    border-top: 2px #008bad solid;
    bottom: 0;
    display: inline-block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 40%; /* same as mid position/width */
}
.fullWidthCallout {
    width: 100%;
}
.arrow-up .callOut-bot {
    border-bottom: 2px #008bad solid;
    bottom: 0;
    display: inline-block;
    position: absolute;
    width: 100%;
}
.arrow-up .callOut-mid {
    border-right: 2px #008bad solid;
    bottom: 0;
    display: inline-block;
    left: 0; 
    height: 100%;
    position: absolute;
    width: 100%;
}
.callOut-top:after,
.arrow-up div.callOut-mid:after {
    background-size: 10px 10px;
    content: ' ';
    height: 10px;
    position: absolute;
    width: 10px;
    z-index: 2;
}
.callOut-top:after {
    background-image: url('/notebooks/img/arrowhead-right.svg');
    right: -9px;
    top: -6px;
}
.arrow-up div.callOut-mid:after {
    background-image: url('/notebooks/img/arrowhead-up.svg');
    right: -6px;
    top: -9px;
}
.flippedX {
    left: auto;
    right: 9px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    -webkit-backface-visibility: hidden;
}
.flippedY {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
    -webkit-backface-visibility: hidden;
}
.flippedXY {
    left: auto;
    right: 9px;
    -moz-transform: scale(-1);
    -o-transform: scale(-1);
    -webkit-transform: scale(-1);
    transform: scale(-1);
    filter: Flip;
    -ms-filter: "Flip";
    -webkit-backface-visibility: hidden;
}