@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 */

#logo {
  width: 450px;
  height: 80px;
  background-image: url(images/logoB.gif);
}

*/
/* 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: 25px;
}

*/
/* 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: 0px;
}

#rightsidebar {
  display: none;
}

#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: 150px;
}

#rightsidebar {
  margin-right: -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;
}

*/

/* If you change the globals category_cols or 

home_category_cols, then you will
need to change the width of the columns themselves.  

Note that IE sometimes has
problems if this value adds up to 100%, so keep the 

width a little under 100%.
For example, if you changed category_cols to 3, then 

this example would set
the width of the columns to 33% (99% total). */

/*

#category dl {
  width: 33%;
}

*/

/* link/bookmark status icons */

.local-item {
  background: transparent url(images/button-left.gif) top left no-repeat;
  font-weight: normal;
  font-size: 9px;
  color: #ffffff;
  vertical-align: text-top;
}

.local-item {
  background-color: #0aac97;
} 

.local-item span {
  padding: 0px 3px;
  background: transparent url(images/button-right.gif) top right no-repeat;
}

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

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

#footer p {
  margin: 0px;
  padding: 10px 0px;
  color: #778c8d;
  font-size: 9px;
}

.linklisting .linkdescription, .review .reviewcontent 

{
  margin: 0px 0px 5px 0px;
  padding: 5px;
  border: 1px solid #a1bfbf;
  background: #ecfafa;
  overflow: hidden;
}

.linklisting p.linkactions a, #detailed p.actions a, 

#jump_frame .actions a {
  padding: 1px 4px;
  border: 1px solid #a1bfbf;
  font-size: 9px;
  text-decoration: none;
}

.review .reviewhelpful input {
  padding: 0px 3px;
  border: 1px solid #a1bfbf;
  background: #ffffff;
  font-size: 9px;
}

.ftable {
  margin-top: 5px;
  border-bottom: 3px solid #a1bfbf;
  border-collapse: collapse;
  width: 100%;
/* ie5-5.5 don't inherit the font style properly */
  font-size: 11px;
}
.ftable th {
  background: #a1bfbf;
  text-align: left;
}
.ftable th, .ftable td {
  padding: 3px 5px;
}
.ftablecol {
  border-right: 1px solid #a1bfbf;
}

/* sub headings */
#content h3 {
  margin: 25px 0px 0px 0px;
  padding: 5px 0px 0px 0px;
  border-bottom: 1px dotted #a1bfbf;
}

#loginbar a.in {
  background: transparent url(images/loginb.gif) 

center right no-repeat;
}
#loginbar a.out {
  background: transparent url(images/loginb.gif) 

center right no-repeat;
}