﻿.Box
{
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.TL, .TR, .BL, .BR, .ML, .MR
{
    position: relative;                                     /* Image relative to div & not whole web page.*/
}
.TL, .TR, .BL, .BR
{
    background-image: url('Images/BlackBorder.gif');        /* Use this image for the four corners */
    height: 30px;                                           /* Height of the four courner images */
}
.TR, .BR
{
    margin-left: 30px;                                      /* Move the right hand corners away from the left side */
    margin-top: -30px;                                      /* Move the right hand corners vertically up to match left hand corners */
}
.TL, .BL
{
    margin-right: 30px;                                     /* Move the left hand corners away from the right side */
}
.TL, .ML
{
    background-position: 0% 0px;                            /* Show the top left corner of the picture */
}
.TR, .MR
{
    background-position: 100% 0px;                          /* Show the top right corner of the picture */
}
.ML, .MR
{
    background-repeat: repeat-y;                            /* Left and Right border images repeat vertically */
    width:100%;                                             /* Dont change */
}
.MR
{
    float: right;                                           /* Put this Div onto RIGHT hand side */
    background-image: url('Images/BlackBorder-Right.gif');  /* Use this image for left column */
}
.ML
{
    float: left;                                            /* Put this Div onto left hand side */
    background-image: url('Images/BlackBorder-Left.gif');   /* Use this image for left column */
}
.MM
{
    width:100%;
    float: left;                                            /* Put this Div onto left hand side */
}
.Content
{
    padding: 0px 30px;                                      /* Put some room between border and text on sides (but not top and bottom)*/
}    
.BL
{
    background-position: 0% -30px;                          /* Show the bottom left corner of the picture */
    clear: both;                                            /* Remove the float effect of the previous Divs */
}
.BR
{
    background-position: 100% -30px;                        /* Show the bottom right corner of the picture */
    clear: both;                                            /* Remove the float effect of the previous Divs */
}

