body
{
 font: normal 110% "Segoe UI",Arial,Helvetica,Verdana,Tahoma,sans-serif;
 background-image: url(../images/background.png);
 margin: 0;
}

a, .sorthead
{
 color: #0000ff;
 text-decoration: none;
}

a:hover, .sorthead:hover { text-decoration: underline; }

a:active
{
 color: #ff0000;
 text-decoration: underline;
}

a img { border: 0; }

pre { font-size: 1.2em; }

form { display: table; }

.formlike { padding-top: 6px; }

.fieldset
{
 border: 2px solid gray;
 padding: 0.5em;
 margin: 2px;
}

.legend
{
 margin-top: -16px;
 padding: 0 2px;
 display: table;
}

table.amazon { border-collapse: collapse; }
.amazon td, .amazon th { border: 1px solid black; padding: 0 3px; }
.amazon th { text-align: center; }


/* color definition classes */

.Shareware, #topmenu { background-color: #B0D8FF; }
.Freeware { background-color: #ACE78C; }
.Public { background-color: #FFA0A0; }
.alt { background-color: #FFFF68; }

#sidebar .Shareware, .Shareware aside, .tabs .Shareware, .index, main { background-color: #E6EFFF; }
#sidebar .Freeware, .Freeware aside, .tabs .Freeware, .news { background-color: #C8FFC8; }
#sidebar .Public, .Public aside { background-color: #FFC0C0; }

#topmenu .Shareware, .titlebar.Shareware, .vid th.Shareware { background: #80c8ff url(../images/B0D8FF.gif); }
#topmenu .Freeware, .titlebar.Freeware, .vid th.Freeware { background: #90cf50 url(../images/ACE78C.gif); }
#topmenu .Public, .titlebar.Public, .vid th.Public { background: #ff7070 url(../images/FFA0A0.png); }
#topmenu .alt { background: #ffff55 url(../images/FFFF78.gif); }

#topmenu, .titlebar
{
 margin: 0;
 height: 25px;
 text-align: center;
 vertical-align: middle;
 white-space: nowrap;
}

.thumbnail a { background-color: transparent; }
#topmenu a, .titlebar { color: #ffffff; }
a.Shareware { color: #0000ff; }
a.Freeware { color: #007f00; }
a.Public { color: #ff0000; }


/* classes that relate to the presentation of the title area */

#navskip
{
 position: absolute;
 left: -1000px;
 top: -1000px;
 width: 1px;
 height: 1px;
 text-align: left;
 overflow: hidden;
}

#navskip:focus, #navskip:active, #navskip:hover
{ 
 position: absolute; 
 left: 0; 
 top: 0; 
 width: auto; 
 height: auto; 
 overflow: visible;
 background-color: #FF3;
 border: 1px dotted #000;
}

header
{
 text-align: center;
 color: #FFFFFF;
 height: 177px;  /* 200px - padding */
 padding-top: 23px;
 font: bold 1.25em 'Times New Roman', Garamond;
}

#title { max-width: 100%; }

#slogan
{
 font-family: 'Courier New', Courier;
 margin: 8px;
}

#gamecount { font-size: larger; }


/* classes that relate to the menus */

nav
{
 margin-bottom: 1.5em;
}

#topmenu { width: 100%; }

#topmenu div
{
 float: left;
 height: 25px;
 text-align: center;
 margin-bottom: 20px;
 font-weight: bold;
}

#sidebar
{
 float: left;
 width: 220px;
 margin: 0 20px 0 15px;
}

#sidebar fieldset { width: 185px; }
#sidebar h2 { font-size: 1.0em; }
#sidebar a { margin-right: 0.25em; }
#sidebar div { padding: 8px; }
#sidebar section { border-radius: 12%; }

/* general body classes */

main
{
 margin: 0 20px;
 padding: 12px;
 line-height: 1.33;
 display: block;
 text-align: justify;
 background-color: #E6EFFF;
 overflow: hidden;
}

section { margin-bottom: 1.5em; }

figcaption { text-align: center; }

#content table { text-align: left; }

.title { font: bold 1.2em 'Times New Roman', Garamond; }

#detailedview, #thumbnailview { display: none; }

article, .news
{
 margin: 0 -12px -12px -12px;
 padding: 8px;
}

.titlebar
{
 margin: -12px -12px 0 -12px;
}

aside
{
 float: right;
 margin-left: 12px;
 margin-top: 20px;
 padding: 8px;
 max-width: 25%;
 text-align: left;
}

.downloads td { padding: 0 20px 0 0; }

.section
{
 clear: left;
 border-bottom: 1px solid #969696;
 font-family: Verdana, 'Sans Serif';
}

.u { text-decoration: underline; }

.thumbnail
{
 float: left;
 margin-right: 20px;
 width: 162px;
 height: 175px;
 text-align: center;
}

.help
{
 background-color: #0000ff;
 border-radius: 15px;
 padding: 0.25em 1em;
 color: #ffffff;
 white-space: nowrap;
}

footer
{
 margin-top: 20px;
 font-weight: bold;
 text-align: center;
 clear: both;
}

@media screen and (max-width: 768px)
{
 #sidebar, main, aside
 {
  float: none;
  width: auto;
  margin: 0 0 32px 0;
  max-width: 100%;
 }
}