.bgdark { background-color: #10232C; }
.bgmedium { background-color: #101010; }
.bglight { background-color: #222222; }
.bghead { background-color: #333333; }

.thumb-row { width: 1060px; height: 240px; clear: both; }
.thumb-header { width: 1040px; height: 40px; margin: 5px auto; }
.thumb-header-left { width: 70px; height: 40px; float: left; margin: 5px 0 5px 5px; }
.thumb-header-right { background-color: #90becd; width: 860px; height: 26px; float: left;      margin: 5px 0 5px 3px; padding-bottom: 4px; padding-left: 10px; border-top: 7px solid #bdd9e1; border-bottom: 7px solid #bdd9e1; }
.thumb-header-right h2 { color: #fff; font-size: 18pt; font-weight: normal; margin: 0; padding: 0; }

.thumb-header-ad {  width: 472px; float: left;  margin: 5px 0 5px 70px;  }
.thumb-header-ad img { border: 2px solid #90becd;}
.thumb-header-ad a:hover img { border: 2px solid #f00;}

div.thumb { font-size: 7pt; font-family: Verdana, Arial, Helvetica, sans-serif; text-align: center; width: 175px; height: 230px; float: left; margin: 3px 0px 6px; }
div.thumb a img { background-color: #6f89aa; width: 165px; height: 220px; margin-top:2px; border: 2px solid #90becd; }
img.generic { background-color: #6f89aa; border: solid 2px #000; }
div.thumb a:hover img { border: solid 2px #c00; }
div.thumb a:hover  {color:black;} /* dummy to fix IE6 hover bug */

a:hover img.generic { border: solid 2px #f00; }
a.textlink { color: #fff; }
a.textlink:hover { color: #D6E5F5; }
.ds32 /*agl rulekind: base;*/ { color: #fff; font-size: 12px; font-family: verdana; font-weight: bold; }
a:link { color: white; }

#panel1 { margin-bottom: 5px; padding-top: 5px; padding-bottom: 5px; width: 170px; height: auto; margin-top: 5px; }
#toplist1 { margin-bottom: 5px; width: 170px; }
#recommended { padding-top: 5px; padding-bottom: 15px; width: 170px; height: auto; }
#recommended2 { margin-top: 5px; padding-top: 5px; padding-bottom: 15px; width: 170px; height: auto; }
#panel-left { text-align: center; width: 170px; height: auto; float: left; clear: both; }
#bkmark1, #bkmark2, #bkmark3, #bkmark4 { color: #fff; font-size: 18pt; background-color: #90becd; width: 164px; height: 26px; float: left;       margin-top: 5px; margin-right: 0; margin-bottom: 5px; padding-bottom: 4px; padding-left: 10px; border-top: 7px solid #bdd9e1; border-bottom: 7px solid #bdd9e1; }
#bkmark1 a, #bkmark2 a, #bkmark3 a, #bkmark4 a { color: #fff; text-decoration: none; }
#bkmark1 a:hover, #bkmark2 a:hover, #bkmark3 a:hover, #bkmark4 a:hover { text-decoration: underline; }

#thumbs1 { padding-left: 5px; width: 1051px; height: 1255px; margin-top: 0px; margin-right: auto; margin-left: auto; }
#thumbs2 { padding-left: 5px; width: 1051px; height: 1255px; margin-top: 5px; margin-right: auto; margin-left: auto; }
#thumbs3 { padding-left: 5px; width: 1051px; height: 1255px; margin-top: 5px; margin-right: auto; margin-left: auto; }
#thumbs4 { padding-left: 5px; width: 1051px; height: 1255px; margin-top: 5px; margin-right: auto; margin-left: auto; }
#thumbsfooter { text-align: center; margin: 5px auto 0; padding-top: 1px; padding-bottom: 5px; padding-left: 5px; width: 1051px; height: auto; }
#panel-main { margin-right: 0; margin-bottom: 0; margin-left: 4px; padding: 0; width: 1056px; height: auto; float: left; }
body { color: #fff; font-family: tahoma, arial, sans-serif; background-repeat: repeat-y; background-position: center; background-image: url(/artwork/bg-graded-wide-lso.gif)  }
#container { margin: 0 auto; width: 1235px; height: auto; }

#header { width: 1235px; height: 125px; margin-bottom: 3px; }
#header-main { width: 630px; height: 125px; float: left; margin-left: 5px; 
       font-family: verdana, Helvetica, Arial, sans-serif; text-align: left; font-size:10pt;}
#header-left { width: 245px; height: 125px; float: left; }
#header-right { width: 345px; height: 125px; float: right; margin-right: 5px; }
#header-main h1 { color: #fff; font-size: 12pt; text-align: left; margin-top: 5px; margin-right: 2px; margin-left: 6px; }
#header p { color: #ccc; font-size: 9pt; text-align: left; margin: 6px ; }
#header-bottom { padding-top: 5px; padding-right: 10px; width: 890px; height: 5px; clear: both; }

.toplistl h2 { color: #fff; font-size: 10pt; text-align: center; margin: 4px; padding:5px; }
.toplistlul { padding: 0 0 1em; font-family: verdana, Helvetica, Arial, sans-serif; text-align: left; width: 170px; }
.toplistlul ul { list-style: none; margin: 0; padding: 0; }
.toplistlul li { border-bottom: 1px solid #D1E0F4; }
.toplistlul li.first { border-top: 1px solid #D1E0F4; }
.toplistlul li a { display: block; padding: 5px; color: #fff; font-size: 11pt; font-weight: bold; text-decoration: none; width: 160px; margin: 0; }
.toplistlul li a:hover { background-color: #386e7c; }

.toplistsul { padding: 0 0 0em; font-family: verdana, Helvetica, Arial, sans-serif; text-align: left; width: 220px; }
.toplistsul ul { list-style: none; margin: 0; padding: 0; }
.toplistsul li a { display: block; padding: 5px; color: #fff; font-size: 13pt; font-weight: normal; text-decoration: none; width: 210px; margin: 0; }
.toplistsul li a:hover { text-decoration: underline; }

.float-left { float: left; }
.toplistrow {margin: 10px 0px 10px 150px;}
.toplistrow ul { list-style-type: none; padding:0; margin:0; display: inline; }
.toplistrow ul li { padding-right: 17px; padding-left: 17px; display: inline; }
.toplistrow ul li.first { border-left:none; }
.toplistrow ul li a { text-align:left; font-size: 12pt; font-weight: bold; text-decoration:none; }
.toplistrow ul li a:visited { color: #fff; }
.toplistrow ul li a:hover { text-decoration:underline; }

#panel1 h2, #recommended h2, #recommended2 h2 { color: #fff; font-size: 9pt; text-align: center; margin: 4px; padding:2px; }

#linksul { padding: 0 0 1em; font-family: verdana, Helvetica, Arial, sans-serif; text-align: left; width: 170px; }
#linksul ul { list-style: none; margin: 0; padding: 0; }
#linksul li { border-top: 1px solid #D1E0F4; }
#linksul li.last { border-bottom: 1px solid #D1E0F4; }
#linksul li a { display: block; padding: 3px; color: #fff; font-size: 8pt; font-weight: normal; text-decoration: none; width: 164px; margin: 0; }
#linksul li a:hover { background-color: #386e7c; }
#links h2 { color: #fff; font-size: 9pt; text-align: center; margin: 4px; padding:2px; }

/* the magic centred variable width div... */
.toplistbottom { text-align: center; width: 100%; clear: both; float:left; overflow:hidden;}
.toplistbottom h3, .toplistbottom h2 { margin-top: 40px; font-size: 14pt; }
.tlbinner {clear:left; float:left; position:relative; left:50%; }
.tlcol { font-weight: bold; text-align: left; width: 200px; float: left; margin-bottom: 10px; position:relative; right:50%;}
.tlcol ol {font-size:10pt;  }
.tlcol ol li {  }
.tlcol ol li a { font-size: 10pt; font-weight: bold; text-decoration:none;}
.tlcol ol li a:hover {text-decoration:underline;}

.toplistother {width: 70%; text-align: center; margin: 20px auto; }
.toplistother ul {list-style: none; margin: 5px 0px; padding: 0px;}
.toplistother ul li {display: inline; padding-left: 10px; font-weight: bold; }
.toplistother ul li a {text-decoration:none;}
.toplistother ul li a:hover {text-decoration:underline;}

.midad { width: 1010px; text-align: center; margin:20px auto; padding:10px;}
.midad img {border: 2px solid #000;}
.midad a:hover img {border: 2px solid #f00;}
.midad a { color: #fff; font-size: 12pt; font-weight: bold; padding:9px; text-decoration:none;}
.midad a:hover { text-decoration:underline;}

#btmad { width: 1010px; text-align: center; clear:both; margin:20px auto; padding:10px;}
#btmad a { color: #fff; font-size: 12pt; font-weight: bold; padding:9px; text-decoration:none;}
#btmad a:hover { text-decoration:underline;}
#btmad img {border: 2px solid #000;}
#btmad a:hover img {border: 2px solid #f00;}