body {
	padding-top:40px;
		
	background-color:#d0dbe3;

	font-family:Arial, sans-serif;
	font-size:14px;
	color:#000;
	text-align:center;
}
@media (prefers-color-scheme: dark) {
body {
	background-color:#030615;

	color:#FFF;
}
}

#container {
	clear:both;
	margin:0px auto;
}


#BackToTop {
	visibility:hidden;
	position:fixed;
	right:10px;
	bottom:10px;	
    z-index:100;
}

a {
	color:#000;
	font-weight:bold;
}
@media (prefers-color-scheme: dark) {
a {
	color:#FFF;
}
}

a:hover {
	text-decoration:none;
}

h1 {
	font-size:35px;
}

h2 {
	font-size:25px;
}

p {
	margin:10px;
}

img {
	border:none;
    max-width:100%;
}

ul {
	text-align:left;
	list-style-type:none;
	padding-left:10px;
}

li {
	margin:5px;
}

#new_today {
	position:absolute;
	top:-9px;
	left:-10px;
	z-index:1;
}
@media (prefers-color-scheme: dark) {
#new_today {
	top:-10px;
}
}

.title {
	color:#0068d1;
	font-size:18px;
}
@media (prefers-color-scheme: dark) {
.title {
	color:#3ea6ff;
}
}

.date {
	color:#777;
}
@media (prefers-color-scheme: dark) {
.date {
	color:#909090;
}
}

.site {
	font-size:16px;
    color:#009933;
}
@media (prefers-color-scheme: dark) {
.site {
    color:#04ca46;
}
}

.selected {
	color:#FF0000;
	text-decoration:none;
	font-weight:bold;
}

.box {
	position:relative;
	display:inline-block; *display: inline; zoom: 1;
	margin:8px;
	padding:5px;
	background-color:#FFF;
	border:1px solid #C9C9C9;
	border-radius: 20px;
	vertical-align:top;
	box-shadow:0px 0px 4px #CCC;
}
@media (prefers-color-scheme: dark) {
.box {
	background-color:#252836;
	border:1px solid #2e2f35;
}
}

.paging {
	font-size:16px;
    padding:20px;
    line-height:28pt;
}

.button {
	background-color:#0068d1;
	border-radius: 5px;
    border:0px;
    color:#FFF;
    font-weight:bold;
	text-decoration:none;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    margin:3px;
}
@media (prefers-color-scheme: dark) {
.button {
	background-color:#39F;
}
}

.button2 {
	border-radius: 10px;
    border:2px #0068d1 solid;
    color:#000;
    font-weight:bold;
	text-decoration:none;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    margin:3px;
}
@media (prefers-color-scheme: dark) {
.button2 {
	border:2px #39F solid;
    color:#FFF;
}
}

#top_panel {
	position:fixed;
    left:0px;
    top:0px;
    z-index:100;
    width:100%;
    height:30px;
    background-color:#FFF;
	border-radius: 10px;
    border-bottom:1px solid #C9C9C9;
}
@media (prefers-color-scheme: dark) {
#top_panel {
    background-color:#252836;
    border-bottom:1px solid #2e2f35;
}
}

#top_left {
	position:absolute;
	top:7px;
	left:10px;
}

#top_right {
	position:absolute;
	top:7px;
	right:10px;
}

#top_middle {
	position:absolute;
	top:7px;
	left:50%;
	width:150px;
	margin-left:-75px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#top_middle {
	top:0px;
}
}

#left_panel {
	position:absolute;
	height:100%;
	left:0px;
	top:30px;
	width:200px;
}

.left_box {
	position:relative;
	margin-top:10px;
	background-color:#FFF;
	width:100%;
	border-radius: 10px;
	border:1px solid #C9C9C9;
	border-left-style:none;
}
@media (prefers-color-scheme: dark) {
.left_box {
	background-color:#252836;
	border:1px solid #2e2f35;
    border-left-style:none;
}
}

.left_box .title {
	font-size:16px;
}

#filters {
	position:absolute;
	top:0px;
	right:30px;
}

#counter {
	position:absolute;
	top:5px;
	left:30px;
}

.ui-autocomplete {
  padding:0;
  list-style:none;
  background-color:#fff;
  width:218px;
  border:1px solid #B0BECA;
  max-height:350px;
  overflow-y:scroll;
}
.ui-autocomplete .ui-menu-item a {
  border-top:1px solid #B0BECA;
  display:block;
  padding:4px 6px;
  color:#353D44;
  cursor:pointer;
}
.ui-autocomplete .ui-menu-item:first-child a {
  border-top:none;
}
.ui-autocomplete .ui-menu-item a.ui-state-hover {
  background-color:#D5E5F4;
  color:#161A1C;
}

/* star rating code - use lists because its more semantic */
/* No javascript required */
/* all the stars are contained in one matrix to solve rollover problems with delay */
/* the background position is just shifted to reveal the correct image. */
/* the images are 16px by 16px and the background position will be shifted in negative 16px increments */
/*  key:  B=Blank : O=Orange : G = Green * /
/*..... The Matrix ....... */
/* colours ....Background position */
/* B B B B B - (0 0)*/
/* G B B B B - (0 -16px)*/
/* G G B B B - (0 -32px)*/
/* G G G B B - (0 -48px)*/
/* G G G G B - (0 -64px)*/
/* G G G G G - (0 -80px)*/
/* O B B B B - (0 -96px)*/
/* O O B B B - (0 -112px)*/
/* O O O B B - (0 -128px)*/
/* O O O O B - (0 -144px)*/
/* O O O O O - (0 -160px)*/


/* the default rating is placed as a background image in the ul */
/* use the background position according to the table above to display the required images*/
.rating{
	margin: 0 auto;
	width:80px;
	height:16px;
	padding:0;
	list-style:none;
	clear:both;
	position:relative;
	background: url(/images/icons/star-matrix.gif) no-repeat 0 0;
}
/* add these classes to the ul to effect the change to the correct number of stars */
.s0 {background-position:0 0}
.s1 {background-position:0 -16px}
.s2 {background-position:0 -32px}
.s3 {background-position:0 -48px}
.s4 {background-position:0 -64px}
.s5 {background-position:0 -80px}
ul.rating li {
	cursor: pointer;
	/*ie5 mac doesn't like it if the list is floated\*/
	float:left;
	/* end hide*/
	text-indent:-999em;
}
ul.rating li a {
	position:absolute;
	left:0;
	top:0;
	width:16px;
	height:16px;
	text-decoration:none;
	z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ul.rating li a:hover {
	z-index:2;
	width:80px;
	height:16px;
	overflow:hidden;
	left:0;	
	background: url(/images/icons/star-matrix.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}
/* end rating code */

#underlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	-moz-opacity:0.5;
	opacity:.50;
	filter:alpha(opacity=50);
}
#lightbox{
	padding:10px;
	display:none;
	position:absolute;
	top:100px;
	left:25%;
	width:50%;
	background-color:#fff;
}

#scrolltotop{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;font-size:20px;background-color:#EEEEEE;background-color:rgba(238, 238, 238, 0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}