html {
    /**
     * This is the orange color of the left and right frame.
     * This workaround is neccessary due to false
     * "min-height"-interpretion of Firefox:
     *
     * <div style="min-height: 100%">
     *    <div style="min-height: 100%">
     *    </div>
     * </div>
     *
     * This code will enlarge the outer div to 100%, but
     * leave the inner div as small as possible. You can
     * workaround this by setting "height: 100%" to the outer
     * div, but this will let the inner div overflow the
     * outer one if there is much contents in it.
     */
    background-color: #e8e8e8;
    background-image: url(../../img/template/background.gif);
    background-repeat: repeat-y;
    background-position: 50% 50%;
}

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}

body {
    /**
     * Sets orange background colors for left and right border
     */
    position: relative;
    left: 0px;
    top: 0px;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
/*    background-color: #ffc000; */
}

#frameIE55compatibility {
    /**
     * well, our contribution to microsoft browsers...
     */
    min-height: 100%;
    height: 100%;
}

#frameLeft {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 219px; /* @see frameTop.right and frameMain.margin-right */
    height: 100%;
}

#frameRight {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px; /* @see frameTop.left and frameMain.margin-left */
    height: 100%;
    background-color: #ffc000; 
}

#frameTop {
    /**
     * Absolute positioned top frame.
     */
    position: absolute;
    left: 219px;  /* frameLeft.width + 1 */
    right: 200px; /* frameRight.width + 1 */
    top: 0px;
    height: 20px; /* @see frameContents.padding-top */
}

#frameBottom {
    /**
     * This frame doesn't need to be places absolute
     * because it should come after the content area.
     * Static positioning is sufficient.
     */
    clear: both;
    z-index: 10000;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

#frameMain {
    /**
     * Sets white background color for the contents area.
     */
    min-height: 100%;
    padding-left: 1px;
    padding-right: 1px;
    margin-left: 219px; /* frameLeft.width */
    margin-right: 200px; /* frameRight.width */
    margin-bottom: -39px; /* frameBottom.height */
    background-color: #ffffff;
}

#frameMain-outer {
    position: relative;
    min-height: 100%;

    /* for IE7 and Firefox */
    background-image: url('../../img/template/background-frameMain-outer.png');
    background-repeat: repeat-y;
    background-position: 219px 0;
}

#frameMainInfo {
    min-height: 100%;
    margin-left: 0px; /* frameLeft.width */
    margin-right: 0px; /* frameRight.width */
    margin-bottom: 40px; /* frameBottom.height */
    background-color: #ffffff;
}

#frameContents {
    /**
     * Ensure that frameTop and
     * frameBottom doesn't overlap
     */
    padding-top: 20px; /* frameTop.height */
    padding-bottom: 40px; /* frameBottom.height */
    min-height: 650px;
}

#end-of-page {
  clear: both;
}