@import url(luna_core.css);

/*
This file inherits from luna_core.css, so styles in this file will override
styles defined in it.  Changes to this file will NOT be overwritten during
upgrades.

Here's a quick tutorial on overriding styles.  Say you want to change the
background colour of the body.  Looking at luna_core.css, the colour is
defined in the rule:

    body {
      margin: 0px;
      padding: 0px;
      color: #33332e;
      background: #ffffff;
      font: normal 11px tahoma, geneva, verdana, sans-serif;
      text-align: center;
    }

To change the background colour of white (#ffffff) to gray (#dddddd), you would
add the following to this file:

    body {
      background: #dddddd;
    }

If you also wanted to change the font as well as the background, then you could
use:

    body {
      background: #dddddd;
      font: normal 12px times new roman;
    }

Also note that every template's body id is assigned the template name (without
the .html extension).  So if you want to change the h2 heading in the
category.html template, you can do this by:

    #category h2 { 
      color: red; 
      font-weight: bold; 
    }

To start you off, some sample overriding styles have been provided below.  Note
that you will have to uncomment the rules for them to work.
*/

/* Logo size and image source */

body {
text-align: left;
    }


#logo {
  margin-top: 16px;
  width: 500px;
  height: 30px;
  text-indent: 0;
  background: none;
  font: 26px;
}

#header {
  background: transparent no-repeat;
}

.searchbar {
  margin-bottom: 3px;
  padding: 5px 10px;
  border-bottom: 1px solid #57594b;
  background: #EAEAEA;
}

#footer {
  margin-top: 3px;
  padding: 5px;
  border-top: 1px solid #57594b;
  background: #EAEAEA;
}

a {
  color: red;
  text-decoration: none;
}
a:visited {
  color: #B22222;
  text-decoration: none;
}
a:hover {
  color: #5c5b66;
  text-decoration: underline;
}

.taglisting {
  margin: 0px 0px 5px 0px;
  padding: 10px;
  border: 1px solid #bbbfa1;
  background: #FFFAFA;
  overflow: hidden;
}

.linklisting .linkdescription, .review .reviewcontent {
  margin: 0px 0px 5px 0px;
  padding: 5px;
  border: 1px solid #bbbfa1;
  background: #FFFAFA;
  overflow: hidden;
}

p.linkactions {
  margin: 0px;
  text-align: right;
}

.big {
  font-size: 120%;
}

.verybig {
  font-size: 166%;
}

.veryverybig {
  font-size: 200%;
}

#ocwrapper {
/* background colour of left sidebar */
  border-left: 0px solid #FFFFFF;
/* background colour of right sidebar */
  border-right: 200px solid #FFFFFF;
  background: #FFFFFF;
}

.shadowtop, .shadowbottom {
  height: 0px;
  font-size: 1px;
  display: inline-block;
/* ie/mac fix \*/
  display: block;
/* end fix */
}
.shadowtopleft, .shadowtopright, .shadowbottomleft, .shadowbottomright {
  width: 0px;
  height: 0px;
  font-size: 1px;
}
/* If the height of your logo changes from the original, then you will probably
want to also change the vertical position of the login link */

#loginbar a {
  margin-top: 5px;
}

/* Show the left sidebar */

#ocwrapper {
  border-left-width: 200px;
}
#leftsidebar {
  display: block;
}
#contentheader .error, #contentheader .message {
  margin: 0px 200px 0px 200px;
}


/* Hide the right sidebar */
/*
#ocwrapper {
  border-right-width: -100px;
}
#rightsidebar {
  display: block;
}
#contentheader .error, #contentheader .message {
  margin: 0px;
}
*/

/* Change the right sidebar width.  Note that the sidebars have a 10px left or
right padding (left sidebar has a left padding and right sidebar has a right
padding), hence the 150px - 10px = 140px width */

#ocwrapper {
  border-right-width: 300px;
}
#rightsidebar {
  margin-right: -300px;
  width: 290px;
}
#ocwrapper {
  border-left-width: 150px;
}
#leftsidebar {
  margin-left: -150px;
  width: 140px;
}
#contentheader .error, #contentheader .message {
  margin: 0px 150px 0px 0px;
}


/* Change width of document */

#wrapper {
  width: 95%;
}


/* Don't want the shadows? */

.shadowtop, .shadowbottom, .shadowleft, .shadowright {
  background: none;
}
.shadowtopleft, .shadowtopright, .shadowbottomleft, .shadowbottomright {
  width: auto;
  height: auto;
  float: none;
  background: none;
}

.hButton {
background-color: #CC0000;
color: #FFFFFF;
font-family: arial;
}
a.button {
        font-weight: bold;
	font-size: 9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 4px 8px 5px 5px;
	border-top: 1px solid white;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid white;
	text-align: center;
	min-width: 75px;
	text-transform: uppercase;
}
a.button:link { 
	background-color: #CC0000; 
	color: #FFF;
	text-decoration: none;
	}
a.button:visited {
	background-color: #CC0000; 
	color: #CCC;
	text-decoration: none;
	}
a.button:hover { 
	background-color: #999999; 
	color: red;
	border-color: black white white black;
	text-decoration: none;
	}
a.button:active { 
	background-color: #CC0000; 
	color: red; 
	text-decoration: none;
	}
a.buttonclicked {
        font-weight: bold;
	font-size: 9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 4px 8px;
	border-top: 1px solid white;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid white;
	text-align: center;
	min-width: 75px;
	text-transform: uppercase;
	color: red;
}
a.buttonclicked:visited {
	background-color: #999999; 
	color: #red;
	text-decoration: none;
	}
a.buttonclicked:link { 
	background-color: #999999; 
	color: #red;
	text-decoration: none;
	}
input { 
	text-decoration: none;
        text-align: left;
	}
li { 
  margin: 0px 0px 5px 0px;
  padding: 1px;
}

/* search highlighting */
.searchhl-1, .searchhl-2, .searchhl-3, .searchhl-4, .searchhl-5 {
  font-weight: bold;
}
.searchhl-1 {
  color: #000000;
}
.searchhl-2 {
  color: #000000;
}
.searchhl-3 {
  color: #000000;
}
.searchhl-4 {
  color: #000000;
}
.searchhl-5 {
  color: #000000;
}

input.text, input.password, textarea, .searchbar input.text, .searchbar input.submit {
  padding: 1px 0px 1px 2px;
  border: 1px solid #57594b;
  margin-right: 5px;
  text-align: left;
}

/* 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{
	width:160px;
	height:14px;
	margin:0 0 20px 0;
	padding:0;
	list-style:none;
	clear:both;
	position:relative;
	background: url(./images/star-matrix-10.gif) no-repeat 0 0;
}

/* add these classes to the ul to effect the change to the correct number of stars */
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
.sixstar  {background-position:0 -96px}
.sevenstar  {background-position:0 -112px}
.eightstar  {background-position:0 -128px}
.ninestar  {background-position:0 -144px}
.tenstar  {background-position:0 -160px}
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.six  a {left:80px;}
ul.rating li.seven  a {left:96px;}
ul.rating li.eight  a {left:112px;}
ul.rating li.nine  a {left:128px;}
ul.rating li.ten  a {left:144px;}
ul.rating li a:hover {
	z-index:2;
	width:160px;
	height:14px;
	overflow:hidden;
	left:0;	
	background: url(./images/star-matrix-10.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -192px;}
ul.rating li.two a:hover {background-position:0 -208px;}
ul.rating li.three a:hover {background-position:0 -224px}
ul.rating li.four a:hover {background-position:0 -240px}
ul.rating li.five a:hover {background-position:0 -256px}
ul.rating li.six a:hover {background-position:0 -272px}
ul.rating li.seven a:hover {background-position:0 -288px}
ul.rating li.eight a:hover {background-position:0 -304px}
ul.rating li.nine a:hover {background-position:0 -320px}
ul.rating li.ten a:hover {background-position:0 -336px}
/* end rating code */
h3{margin:0 0 2px 0;font-size:110%}