/* LAYOUT ONLY!! */
#container {
        width: 1000px;
        border: 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
        padding: 0px; /*10px;*/
        background-color: white;
}
#header {
        padding: 0px;
        margin-bottom: 0;
        background-color: white;
        text-align: center;
        color:#FF0000;
}
#content {
        margin-left: 175px;
        padding: 5px;
        background-color: #FFFFFF;
        float: left;
        width: 860px;
        margin: 0 0 0 0;
        display: inline;
        overflow: auto;
        position: relative;
        margin-top: 0px;
}
#menu {
        float: left;
        width: 128px;
        margin: 0;
        margin-right: 0px;
        padding: 1px;
        background-color: #FFFFFF;
}

#menu2 {
        float: right;
        width: 110px;
        margin: 0;
        margin-right: 0px;
        padding: 1px;
        background-color: #FFFFFF;
}

#footer {
        clear: both;
        padding: 1px;
        margin-top: 0px;
        background-color: white;
        text-align: center;
        color: white;
}

/* THE LEFT MENU */
ul#navlist
{
        width: 126px;
        padding: 0px;
        border: 1px solid #FFFFFF;
        border-top: 1px;
        margin: 0px;
        font: 11px verdana,helvetica,arial,sans-serif;
        background: #FFFFFF;
        color:white;
}

/* THE LEFT MENU BOLD FONT */
ul#navlist4
{
        width: 126px;
        padding: 0px;
        border: 1px solid #FFFFFF;
        border-top: 1px;
        margin: 0px;
        font: 11px verdana,helvetica,arial,sans-serif;
        font-weight: bold;
        background: #FFFFFF;
        color: #48586f;
}

ul#navlist3
{
        width: 108px;
        padding: 0px;
        border: 1px solid #ffb400;
        border-top: 1px solid #ffb400;
        margin: 0px;
        background: #fcf7e1;
        font-weight: bold;
        font: 11px verdana,helvetica,arial,sans-serif;
        color:red;
}

ul#navlist3 li
{
        list-style: none;
        margin: 0px;
        border: 0px;
        border-top: 0px solid  #ffb400;
}


ul#navlist li
{
        list-style: none;
        margin: 0px;
        border: 0px;
        border-top: 0px solid  #FFFFFF;
}


ul#navlist li a
{
        display: block;
        width: 118px;
        padding: 4px 4px 4px 4px;
        border: 0px;
        border-right: 0px solid  #FFFFFF;
        background: #FFFFFF;
        text-decoration: none;
        text-align: left;

}

ul#navlist li a:link { color: #2C200A; }
div#navcontainer li a:visited { color: #2C200A; }

ul#navlist3 li a:link { color: #2C200A; }
div#navcontainer3 li a:visited { color: #2C200A; }

ul#navlist33 li a:link { color: red; }
div#navcontainer33 li a:visited { color: red; }

ul#navlist li a:hover
{
        border-color: #FFFFFF;
        color: #ffffff;
        background: #9ab0cf;
}


/* THIS IS USED TO DISPLAY A SELECTED GROUP IN THE MENU */
#active a:link, #active a:visited, #active a:hover
{
        border-color:#D4CCBF;
        color:#D4CCBF;
        background: #fcf7e1;
}


/* THE TOP MENU */
#navcontainer2 ul
{
        padding-left: 0;
        margin-left: 0;
        background-color: #FFFFFF;
        border: 0px;
        border-bottom:1px solid gray;
        border-top:0px solid #FF6C00;
        color: #3e4599;
        float: left;
        text-align: right;
        width: 100%;
        font: 12px verdana,helvetica,arial,sans-serif;
}

#navcontainer2 ul li { display: inline;}
#navcontainer2 ul li a
{
        padding-bottom: 3px;
        padding-left:10px;
        background-color: #FFFFFF;
        color: #FF6C00;
        text-decoration: none;
        float: left;
        border-right: 0px solid white;
        border-top: 0px solid gray;
}

#navcontainer2 ul li a:hover
{
        background-color: #FFFFFF;
        text-decoration: none;
        color: red;
/*      font: bold 11px verdana,helvetica,arial,sans-serif;*/
}

/* TEXT MAKEUP AND OTHER COSMETICS HERE!!! */

#hideable {
        background-color: white;
}

/* image properties */
.imgleft {
          float: left;
      padding: 8px 10px 8px 0px;
}

.imgright {
          float: right;
      padding: 8px 0px 8px 10px;
}

img {
          border-width: 0px;
}

/* this image is used in details.php and browse.php, all other images should not have borders */
.borderimg {
      border-style:solid;
      border-color: #808080;
      border-width: 1px;

}

.borderimg2 {
      border-style:solid;
      border-color: Gray;
      border-width: 1px;

}

/* general settings */
html {
    height: 100%;
}

body {
        height: 100%;
        font: 11px Verdana,Tahoma,Arial,sans-serif;
        background: gray;
    	background-image: url(gfx/vgbackgroung.jpg);
        margin-top: 0; 
}

/* the headings you can use */
h1, h2, h3, h4, h5, h6, h7
{
        /* color: #333333; */
        margin: 0px;
        padding: 0px;
        color: red;
}
h1 {
         /* left menu */
         font-size: 12px;
     font-weight: bold;
         color: #545454;
}
h2 { /* page headers */
     font-size: 12px;
     font-weight: bold;
     color: #454545;
}
h3 { /* slogan under logo */
         position: relative;
         color: #454545;
         font: 12px verdana,helvetica,arial,sans-serif;
}
h4 { /* back to admin options, and other text links like that */
         font-size: 12px;
         text-align: center;
         font-weight: normal;
         color: green;
}
h5 { /* old price */ 
         font-size: 12px; 
         font-weight: normal;
         text-decoration: line-through;  
         position: relative;
         color: #454545;
} 
h6 { /* the headers in editsettings.php */
     font-size: 12px;
         text-align: justify;
     font-weight: bold;
     border-top: 1px solid;
     border-bottom: 1px solid;
         background-color: gray;
     color: white;
     /*text-transform: uppercase;*/


/* how the links should behave (apart from the menu) */
a { text-decoration: none; }
a:link { color: gray; }
a:visited { color: gray; }
a:active { color: gray; }
a:hover { color: gray; }

/* a link class that is pretty plain */
a.plain { text-decoration: none; }
a.plain:link { color: black; }
a.plain:visited { color: black; }
a.plain:active { color: black; }
a.plain:hover { color: black; }

/* single pixel borders on input boxes */
input, textarea
{
   background-color: #ffffff;
   border-width: 1px;
   border-style: solid;
   border-color: black;
}

/* text in tables */
td, th {
        font: 11px Verdana,Tahoma,Arial,sans-serif;
}
/* tables of this class have no border */
table#borderless {
        border-collapse: collapse;
        border-style: outset;
}
table.borderless th,
table.borderless td {
        border: 0px;
        padding: 5px;
        border-style: hidden;
        vertical-align: top;

}

/* a class that describes how tables should look */
.datatable {
                border: 0;
                border-collapse: collapse;
                margin-left:auto;
                margin-right:auto;
}
.datatable td {
                border: 0;
                padding: 5px;
                text-align: left;
                vertical-align: top;
}
.datatable th {
                border: 0;
                background-color: gray;
                font-weight: bold;
                color: white;
                text-align: left;
                padding: 2px;
}
.datatable caption {
                font-size: 14px;
                font-weight: bold;
                color: black;
                text-align: left;
                padding-top: 5px;
                padding-bottom: 5px;
                margin-left: auto;
                margin-right: auto;
text-decoration: none;
}
.datatable tr.altrow {
                background-color: white;
                color: #000000;
}
/*.datatable tr:hover, .datatable tr.hilite {
                background-color: white;
                color: red;*/
text-decoration: none;
}

/* (?) popup properties */
a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:red;
    color:#000;
    text-decoration:none;
    font-size: 11px;
    font-weight: normal;
}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1em; left:-11em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: left
text-decoration: none;
}