body {
    border              : 0;
    margin              : 0 5%;
    padding             : 0;
    width               : 90%;
    min-width           : 450px;
}

#header {
    float               : left;
    clear               : both;
    width               : 100%;

    /* border              : 1px solid #ff9999; */
    /* margin              : 0.25em; */

    /* color               : #cccccc; */
}

#footer {
    float               : left;
    clear               : both;
    width               : 100%;

    /* background-color    : #663300; */
    /* border              : 1px solid #663300; */
    /* margin              : 0.25em; */
}

.container {                                  /* Right column background */
    position            : relative;
    clear               : both;
    float               : left;
    width               : 100%;
    overflow            : hidden;

    /* background-color    : #00ff00; */
    /* border              : 1px solid #00ff00; */
    /* margin              : 0.25em; */
}

.colmid,                                    /* Center column background */
.colleft,                                   /* Left column background   */
.colright {
    position            : relative;
    float               : left;
    width               : 100%;

    /* margin              : 0.25em; */
}

.col1, .col2, .col3 {
    position            : relative;
    float               : left;
    overflow            : hidden;

    /* margin              : 0.25em; */
}

/*
** Three column
*/

.threecol .colmid {
    /* background-color    : #0000ff; */
    /* border              : 1px solid #0000ff; */
    right               : 20%;
}

.threecol .colleft {
    /* background-color    : #ff6600; */
    /* border              : 1px solid #ff6600; */
    right               : 60%;
}

.threecol .col1 {
    /* background-color    : #990066; */
    /* border              : 1px solid #990066; */
    width               : 56%;
    left                : 102%;
}

.threecol .col2 {
    /* background-color    : #ff0000; */
    /* border              : 1px solid #ff0000; */
    width               : 16%;
    left                : 26%;
}

.threecol .col3 {
    /* background-color    : #66ccff; */
    /* border              : 1px solid #66ccff; */
    width               : 16%;
    left                : 95%;
}

/*
** Blog Style
*/

.blogstyle .colmid {
    /* border              : 1px solid #0000ff; */
    right               : 25%;
}

.blogstyle .colleft {
    /* border              : 1px solid #ff6600; */
    right               : 25%;
}

.blogstyle .col1 {
    /* border              : 1px solid #990066; */
    width               : 46%;                  /* Center col width - 2 * padding */
    left                : 52%;                  /* 100% + left padding of center col */
}

.blogstyle .col2 {
    /* border              : 1px solid #ff0000; */
    width               : 21%;                  /* Left col width - 2 * padding */
    left                : 56%;                  /* Right col width + 2 * center col padding + Left col padding */
}

.blogstyle .col3 {
    /* border              : 1px solid #66ccff; */
    width               : 21%;
    left                : 60%;
}

/*
** Two column (left)
*/

.twocolleft .colmid {
    /* border              : 1px solid #0000ff; */
    right               : 0%;
}

.twocolleft .colleft {
    /* border              : 1px solid #ff6600; */
    right               : 75%;
}

.twocolleft .col1 {
    /* border              : 1px solid #990066; */
    width               : 71%;                  /* Center col width - 2 * padding */
    left                : 102%;                 /* 100% + left padding of center col */
}

.twocolleft .col2 {
    /* border              : 1px solid #ff0000; */
    width               : 21%;                  /* Left col width - 2 * padding */
    left                : 6%;                  /* Right col width + 2 * center col padding + Left col padding */
}

.twocolleft .col3 {
    /* border              : 1px solid #66ccff; */
    display             : none;
    width               : 21%;
    left                : 60%;
}

/*
** Two column (right)
*/

.twocolright .colmid {
    /* border              : 1px solid #0000ff; */
    right               : 0%;
}

.twocolright .colleft {
    /* border              : 1px solid #ff6600; */
    left               : 75%;
}

.twocolright .col1 {
    /* border              : 1px solid #990066; */
    width               : 71%;                  /* Center col width - 2 * padding */
    left                : -73%;                 /* 100% + left padding of center col */
}

.twocolright .col2 {
    /* border              : 1px solid #ff0000; */
    display             : none;
    width               : 21%;                  /* Left col width - 2 * padding */
    left                : 2%;                  /* Right col width + 2 * center col padding + Left col padding */
}

.twocolright .col3 {
    /* border              : 1px solid #66ccff; */
    width               : 21%;
    left                : -69%;
}

/*
** Two column (doublepage)
*/

.twocol .colmid {
    /* border              : 1px solid #0000ff; */
    right               : 0%;
}

.twocol .colleft {
    /* border              : 1px solid #ff6600; */
    right               : 50%;
}

.twocol .col1 {
    /* border              : 1px solid #990066; */
    width               : 46%;                  /* Center col width - 2 * padding */
    left                : 52%;                 /* 100% + left padding of center col */
}

.twocol .col2 {
    /* border              : 1px solid #ff0000; */
    width               : 46%;                  /* Left col width - 2 * padding */
    left                : 56%;                  /* Right col width + 2 * center col padding + Left col padding */
}

.twocol .col3 {
    /* border              : 1px solid #66ccff; */
    display             : none;
    width               : 21%;
    left                : -73%;
}

/*
** One column (onepage)
*/

.onecol .colmid {
    /* border              : 1px solid #0000ff; */
    right               : 0%;
}

.onecol .colleft {
    /* border              : 1px solid #ff6600; */
    right               : 0%;
}

.onecol .col1 {
    /* border              : 1px solid #990066; */
    width               : 96%;                  /* Center col width - 2 * padding */
    left                : 2%;                 /* 100% + left padding of center col */
}

.onecol .col2 {
    /* border              : 1px solid #ff0000; */
    display             : none;
    width               : 46%;                  /* Left col width - 2 * padding */
    left                : 52%;                  /* Right col width + 2 * center col padding + Left col padding */
}

.onecol .col3 {
    /* border              : 1px solid #66ccff; */
    display             : none;
    width               : 21%;
    left                : -73%;
}

/**************************************************************************
** Album layout with list elements
*/

#album li {
    /* border              : 1px solid #333333; */
    /* background-color    : #9fcfff; */
    float               : left;
    margin              : 5px;
    padding             : 5px;
    width               : 100px;
    height              : 100px;
    text-align          : center;
}

#album li:hover {
    border              : 1px solid #ffffff;
}

#album li div.photoContainer img {
    border              : 4px solid #ffffff;
    margin              : 5px 0;
}

#album li p {
    font-size           : x-small;
    color               : #ffffff;
    float               : left;
    clear               : both;
    padding             : 0.75em 0.25em 0.25em 0.25em;
}

/**************************************************************************
**
*/

div.photo {
    /* border              : 1px solid #333333; */
    /* background-color    : #9fcfff; */
    float               : left;
    margin              : 5px;
    padding             : 5px;
    width               : 100px;
    height              : 100px;
    /* Prevents the div from collapsing */
    overflow            : hidden;
    display             : block;
    /* display             : table-cell; */
}

div.photo div.photoContainer {
    /* background-color    : #cccccc; */
    clear               : both;
    text-align          : center;
    vertical-align      : middle;
    width               : 100%;
}

div.photo div.photoContainer div.photoFrame {
    display             : inline-block;
    background-color    : #ffffff;
    border              : 1px solid #999999;
    padding             : 4px;
}

div.photo div.photoContainer div.photoFrame img {
    border              : 1px solid #333333;
}

div.photo div.photoText {
    font-size           : x-small;
    color               : #ffffff;
    float               : left;
    clear               : both;
    padding             : 0.75em 0.25em 0.25em 0.25em;
}

/**************************************************************************
**
*/

.overlay {
    position            : fixed;
    height              : 101%;
    width               : 100%;
    top                 : 0px;
    left                : 0px;
    padding             : 0px;
}

.overlay .background {
    background-color    : #000000;
    position            : fixed;
    height              : 101%;
    width               : 100%;
    top                 : 0px;
    left                : 0px;
    padding             : 0px;
    /* IE */
    filter              : alpha( opacity = 75 );
    /* Mozilla */
    -moz-opacity        : 0.75;
    opacity             : 0.75;
    z-index             : 100;
}

.overlay .picture {
    position            : fixed;
    height              : 101%;
    width               : 100%;
    text-align          : center;
    /* IE */
    filter              : alpha( opacity = 100 );
    /* Mozilla */
    -moz-opacity        : 1.0;
    opacity             : 1.0;
    z-index             : 110;
}

.overlay .picture img {
    border              : 10px solid #ffffff;
    position            : relative;
    margin              : 2em 0;
}

.overlay .picture .button {
    border              : none;
    margin              : 0 0.25em;
}

.overlay .picture span.button:hover {
    border              : none;
    background-color    : none;
    padding             : 0;
}

.overlay .picture .button img {
    border              : none;
}