body {
    font: 100.0% "Trebuchet MS", sans-serif;
    margin: 0;
    margin-bottom: 2.5em;
}

.left {
    width: 180px;
    float: left;
    padding: 0 0 0 0.5em;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    /*background-color: #303030;*/
    /*border: 1px solid green;*/
}

.right {
    float: none; /* not needed, just for clarification */
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 0 0.5em;
    height: 100%;
    /*background-color: #404040;*/
    /*border: 1px solid red;*/
}

/* Main Page header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3em;
    padding: 0.1em;
    font-size: 24pt;
    border: none;
}

/* Child Page header */
.headerChild {
    /*position: fixed;*/
    top: 0;
    left: 0;
    right: 0;
    /*height: 3em;*/
    padding: 0.1em;
    font-size: 24pt;
    border: none;
}

.code_background {
    background-image: url("../images/dv2.jpg");
    -ms-background-size: 100%;
    background-size: cover;
    background-repeat: repeat-x;
    background-color: #404040;
    background-color: rgba(0, 0, 0, 0.7);
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    /*background-color: #505050;*/
    /*border: 1px solid blue*/
}

.content {
    position: fixed;
    top: 3em;
    bottom: 2em;
    left: 0;
    right: 0;
    overflow: hidden;
    /*border: 1px solid #ff1493;*/
}

.thing {
    height: 5em;
    width: 95%;
    border: 1px solid #ff00ff;
    margin: 0.5em 0 0 0;
}

.homePageBackground {
    background-image: url("images/background.png");
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 35em;
}

/*=== Creates a Vertical tab for jQuery tabs ==============================*/
.ui-tabs-vertical {
    width: 100%;
    height: 100%;
    padding: 0;
    background-image: url("../css/images/background.png");
}

.ui-tabs-vertical .ui-tabs-nav {
    /*padding: .2em .1em .2em .2em;*/
    /*float: left;*/
    /*width: 12em;*/
    width: 190px;
    float: left;
    padding: 0 0 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

    .ui-tabs-vertical .ui-tabs-nav li {
        /*clear: left;*/
        width: 100%;
        height: 5em;
        border-bottom-width: 1px !important;
        border-right-width: 0 !important;
        margin: 0 -1px .5em 0;
    }

        .ui-tabs-vertical .ui-tabs-nav li a {
            display: block;
            height: 4em;
            width: 100%;
        }

        /* the actual tab activated */
        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
            padding-bottom: 0;
            padding-right: .1em;
            border-right-width: 1px;
            margin-bottom: .5em;
        }

/* Right side */
.ui-tabs-vertical .ui-tabs-panel {
    width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/*===========================================================================*/

.square-select {
    cursor: pointer;
    position: relative;
    width: 30%;
    height: 40%;
    border: 1px solid blue;
    background: black;
    display:inline-block;
    margin: 0.5em;
    /*
      SOLVED: When adding the vertical align, the div does not shift down when content
      is added. Damn.
    */
    vertical-align: top;
}

    .square-select:hover {
        background: #404040;
        background: rgba(64,64,64,0.5);
    }

.square-select.a:link {
        text-decoration: none;
    }
    .square-select.a:visited {
        text-decoration: none;
    }

.product-select-label {
    height: 50%;
    width: 100%;
    background: #000000;
    background: rgba(0, 0, 32, 0.7);
    position: absolute;
    bottom: 0;
    overflow: hidden;
}
.product-select-label h3 {
    display: block;
    padding: 0;
    margin: 0;
}

.VisualGPSViewSelect {
    background-image: url("../VisualGPSView/images/VisualGPSView.png");
    -ms-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
}

.VisualGPSViewSelect:hover {
        background-color: #404040;
        background-color: rgba(64, 64, 64, 0.5);
        background-image: url("../VisualGPSView/images/VisualGPSView.png");
        -ms-background-size: 90%;
        background-size: 90%;
        background-repeat: no-repeat;
    }

.NMEATime2Select {
    background-image: url("../NMEATime2/images/NMEATime2-1.png");
    -ms-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
}

.NMEATime2Select:hover {
        background-color: #404040;
        background-color: rgba(64, 64, 64, 0.5);
        background-image: url("../NMEATime2/images/NMEATime2-1.png");
        -ms-background-size: 90%;
        background-size: 90%;
        background-repeat: no-repeat;
    }

.VisualGPSSelect {
    background-image: url("../VisualGPS/images/VisualGPS.png");
    -ms-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
}

.VisualGPSSelect:hover {
        background-color: #404040;
        background-color: rgba(64, 64, 64, 0.5);
        background-image: url("../VisualGPS/images/VisualGPS.png");
        -ms-background-size: 90%;
        background-size: 90%;
        background-repeat: no-repeat;
    }

.VisualGPSXPSelect {
    background-image: url("../VisualGPSXP/images/VisualGPSXP.png");
    -ms-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
}

.VisualGPSXPSelect:hover {
        background-color: #404040;
        background-color: rgba(64, 64, 64, 0.5);
        background-image: url("../VisualGPSXP/images/VisualGPSXP.png");
        -ms-background-size: 90%;
        background-size: 90%;
        background-repeat: no-repeat;
    }

.NMEATimeSelect {
    background-image: url("../NMEATime/images/NMEATime.png");
    -ms-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
}

.NMEATimeSelect:hover {
        background-color: #404040;
        background-color: rgba(64, 64, 64, 0.5);
        background-image: url("../NMEATime/images/NMEATime.png");
        -ms-background-size: 90%;
        background-size: 90%;
        background-repeat: no-repeat;
    }

.ClockMazeSelect {
    background-image: url("../ClockMaze/images/ClockMaze.png");
    -ms-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
}

    .ClockMazeSelect:hover {
        background-color: #404040;
        background-color: rgba(64, 64, 64, 0.5);
        background-image: url("../ClockMaze/images/ClockMaze.png");
        -ms-background-size: 90%;
        background-size: 90%;
        background-repeat: no-repeat;
    }

.product-content {
    width: 100%;
    height: auto;
    /*border: 1px solid cyan;*/
    border-top: 1px solid #555555;
    margin: 0;
    display: inline-block;
}

.product-image {
    float: left; 
    vertical-align: top; 
    margin: 0.5em;
}

.agreeDialog {
    width: 300px;
    height: 300px;
    overflow: auto;
}

.product-header {
    /*border: 1px solid cyan;*/
    background-color: #000000;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1.0em;
    font-size: x-large;
    font-weight: bold;
}

.product-screen-shot {
    width: 30%;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    float: left;
}

.product-screen-shot-smaller {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.VisualGPS {
    font-style: italic;
    font-weight: bold;
}