@import url(luna_core.css);

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


body {
  background: url(images/background.gif) top left repeat-x;
color: #999;
}

ul, li {
text-decoration: none;
list-style-type: none; 
}

.crumb {
  font-size: 1.1em;
}

.hsmall{
font-size: .8em;
}
h3 {
font-weight: lighter;
}


#logo {
  width: 308px;
  height: 97px;
  background-image: url(images/logo.gif);
}

#header {
  background: none;
}

/* 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;
color: #ccc;
position:relative;
z-index: 2;
}

#loginbar a:visited {
  color: #ccc;
}
/* these colours are the same as defined by 'a', but we unset a:visited */
#loginbar a:hover {
  color: #3333cc;
}
#loginbar a.in {
  background: none;
}
#loginbar a.out {
    background: none;
}

/*Position the content area*/
#ocwrapper {
top: -31px;
position: relative;
width:900px;
}

/*Position the navigation links*/

ul.primarynav, ul.secondarynav {
border-bottom: none;
top: -98px;
position: relative;
background: none;
}
ul.secondarynav {
top: -30px;
}

ul.secondarynav a {
  color: #333333;
}
ul.secondarynav a:visited {
  color: #333333;
}
ul.secondarynav a:hover {
  color: #3333cc;
}

ul.primarynav li {
  background: none;
}
ul.primarynav a {
  margin-right: 1px;
  padding: 1px 9px 7px 10px;
  float: left;
  color: #ffffff;
  font-size: 1em;
  text-decoration: none;
}
ul.primarynav a:visited {
  color: #ffffff;
}
ul.primarynav a:hover {
  color: #ffffff;
  background: #737180;
}
ul.primarynav li.home {
  border-right: none;
  background: none;
display:none;
}


/*---------------*\
|* contentheader *|
\*---------------*/
#contentheader {
  padding: 10px 10px 0px 10px;
  background:none;
}
#contentheader .error, #contentheader .message {
  margin: 0px 200px 0px 0px;
  padding: 2px;
  border: 1px solid #ffffff;
  font-size: 1em;
  text-align: center;
}
#contentheader .error {
  background: #8c3030;
}
#contentheader .message {
  background: #3a5841;
}
#contentheader .error *, #contentheader .message * {
  margin: 0px;
  padding: 0px;
}

/*---------------*\
|* contentfooter *|
\*---------------*/
#contentfooter {
  background: #999999;
}


/* Show the left sidebar */

#ocwrapper {
  border-left-width: 300px;
}

#ocwrapper {
/* background colour of left sidebar */
  border-left: 300px solid #fff;
/* background colour of right sidebar */
  border-right: 200px solid #ccc;
  background: none;
}


#leftsidebar {
margin-left: -270px;
  display: block;
background:none;
}
#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:900px;
margin-right:auto;
margin-left:auto;
}


/* 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).  If you want to change the columns
on the home page as well, then remember to set a rule for "#home dl" as well. */
/*
#category dl {
  width: 33%;
}
*/

/*-----------*\
|* searchbar *|
\*-----------*/


.searchbar {
  margin-bottom: 30px;
  padding: 5px 10px;
  border-bottom: none;
  background: none;
  position: relative;
	top: -70px;
	left: 320px;
clear:both;
}
.searchbar input.text, .searchbar input.submit {
  font-weight: normal;
	color: #565656;
	border: 1px solid #9c9c9c;
	width: 250px;
	padding: 2px;
	margin-bottom: 5px;
	text-align: left;
}

.form input{
	border: 1px solid #333;
	background: #fff;
	color: #333;
	font-size: 1em;
	padding-bottom: 2px;
}

/* setting this in mozilla causes rendering issues */
* html .searchbar input.submit {
  height: 21px;
}
/* these colours are the same as defined by 'a', but we unset a:visited */
.searchbar a {
  color: #999;
  font-size: 11px;
}
searchbar a:visited {
  color: #999;
}
.searchbar a:hover {
 color: #fff;
}



.column {
  width: 50%;
  border: 0px;
  margin: 0px;
  padding: 0px;
  color: black;
  background: white;
  float: left;
}
.right-border {
  border-right: 1px solid black;
}
.column .content {
  padding: 0px;
  margin: 0px;
}
.column .content h2 {
  height: 16px;
  border-bottom: 1px solid black;
  color: white;
  font-weight: bold;
  font-size: 1em;
  font-family: arial;
  padding: 0px 0px 0px 25px;
  margin: 0px;
}
.column .content h2 a,
.column .content h2 a:visited {
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
  color: white;
}
.column .content h2 a:hover {
  text-decoration: underline;
}
.column .content h2.artist {
  background: #666666 url(/images/artist.gif) top left no-repeat;
}
.column .content h2.stock {
  background: #666666 url(/images/stock.gif) top left no-repeat;
}
.column .content div.container {
  border-bottom: 1px dotted #bbbfa1;
  border-left: 1px solid black;
  height: 110px;
  overflow: hidden;
}
.column .content div.white {
  background: white;
}
.artist-thumb {
  padding: 5px 5px 6px 5px;
  margin: 0px;
  background: white;
  float: left;
}

.column .content div.artist-keywords,
.column .content div.artist-name,
.column .content div.artist-image,
.column .content div.artist-website {
  font-family: Arial,Verdana,Helvetica,sans-serif;
  border: 0px;
  padding: 30px 0px 0px 18px;
  color: black;
  font-size: 1em;
  margin: 2px 0px 0px 53px;
  height: 13px;
  overflow: hidden;
}
.column .content div.artist-image,
.column .content div.artist-website,
.column .content div.artist-website a,
.column .content div.artist-website a:visited {
  font-size: .9em;
  font-weight: normal;
  text-decoration: none;
  color: #666666;
  font-family: Arial,Verdana,Helvetica,sans-serif;
}
.column .content div.artist-image {
  font-size: 1em;
}
.column .content div.artist-image a,
.column .content div.artist-image a:visited {
  font-size: 1em;
  font-weight: bold;
  text-decoration: underline;
  color: #363668;
  font-family: Arial,Verdana,Helvetica,sans-serif;
}
.column .content div.artist-image a:hover,
.column .content div.artist-website a:hover {
  text-decoration: underline;
  color: black;
}

.clear:after {
  height: 0px;
  clear: both;
  display: block;
  visibility: hidden;
  content: ".";
}
.clear {
  display: inline-block;
}
/* start non ie/mac css \*/
* html .clear {
   height: 1%;
}
.clear {
    display: block;
}
/* end non ie/mac css */

body .column .content .no-border {
  border: 0px;
  padding-bottom: 1px;
}


/*---------------*\
|* contentfooter *|
\*---------------*/
#contentfooter {
  background: none;
}

/*--------*\
|* footer *|
\*--------*/
#footer {
  margin-top: 3px;
  padding: 5px;
  border-top: none;
  background: none;
}
#footer img {
  float: right;
}
#footer p {
  margin: 0px;
  padding: 10px 0px;
  color: #8a8d77;
  font-size: 9px;
}