@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: 250px;
  height: 80px;
  background-image: url(images/logo.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%;
}
*/

/* ======================== Begin custom Mods ========================= */

/*------------------*\
|* global interface *|
\*------------------*/

body {
  color: #000000;
  background: #000000;
  font: normal 11px tahoma, verdana, arial, sans-serif, "ms sans serif";
}
/*  font: normal 11px tahoma, geneva, verdana, sans-serif; */

a {
  color: #00008b;
}
a:visited {
  color: #00008b; 
}
a:hover {
  color: #8b0000; 
  text-decoration: underline;
}

h2 {
  font-size: 12px;
  font-weight: bold;
  font-family: verdana, arial, "ms sans serif";
  color: #000000;
  margin: 0px;
  background: #4682B4;
  padding: 2px 0px 2px 4px;
}
#content h2 {
  display: none;
}
#content #content_top h2 {
  margin-top: 5px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  border-bottom: 2px solid #4682B4;
  background: none;
  padding: 2px 0px 2px 0px;
  display: block;
}

.crumb {
  display: none;
}
#content_top .crumb {
  font-size: 9px;
  display: block;
  margin-top: 2px;
  margin-bottom: 2px;
}

#content_top .error, #content_top .message {
  margin: 10px 0px 10px 0px; 
  padding: 2px;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}
#content_top .error {
  background: #8c3030;
}
#content_top .message {
  background: #3a5841;
}
#content_top .error *, #content_top .message * {
  margin: 0px;
  padding: 0px;
}

#detailed p.linknav {
  display: none;
}
#content_top p.linknav {
  float: right;
  w\idth: 150px;
  display: block;
}

h3 {
  font-size: 12px;
}

h4 {
  font-size: 13px;
}

#wrapper {
  margin: 0px auto;
  width: 100%;
  text-align: left;
  }

/*--------*\
|* header *|
\*--------*/

#logo {
  float: left;
  width: 190px;
  height: 72px;
  background: transparent url(images/logo.gif) top left no-repeat;
  margin-top: 0px;
  margin-left: 10px;
}

#header {
  text-align: center;
  height: 80px;
  background: none;	/* Should be none. Test with ffff00-yellow */
}

#loginbar {
  text-align: left;
  width: 200px;
  background: none;	/* Should be none. Test with FFA500-orange */
  margin-top: 10px;
  font: normal 12px verdana, arial, "ms sans serif";
}

#loginbar a {
  padding: 0px 0px 0px 22px;
  color: #212126;
  text-decoration: none;
}

/* I have to override the images or I get Luna Login/Logout icons  */
/* Besides, it's fuckin backwords. If I am logged in, I want to show */
/* the log out icon. If logged out, show login icon */

/* This is the open lock */
#loginbar a.in {
  color: #DCDCDC;
  margin: 10px 60px 0px 70px;
  background: transparent url(images/logout.gif) top left no-repeat;
}
#loginbar a.in:hover {
  color: #ffff00;
  text-decoration: underline;
}

/* This is the closed lock */
#loginbar a.out {
  color: #DCDCDC;
  margin: 12px 60px 0px 70px;
  background: transparent url(images/login.gif) top left no-repeat;
}
#loginbar a.out:hover {
  color: #ffff00;
  text-decoration: underline;
}

/* Custom styles */

#loginbar a.signup {
  color: #DCDCDC;
  margin: 12px 60px 0px 70px;
  background: transparent url(images/signup.gif) top left no-repeat;
}
#loginbar a.signup:hover {
  color: #ffff00;
  text-decoration: underline;
}

#loginbar p {
  text-align: center;
  padding: 0px 0px 0px 0px;
  color: #4682B4;
  font-weight: bold;
}


/*------------*\
|* navigation *|
\*------------*/
.navbar {
  padding: 0px 10px 0px 10px;
  margin-bottom: 0px;
}
ul.primarynav, ul.secondarynav {
  border-bottom: none;
}

/*---------*\
|* content *|
\*---------*/
 #ocwrapper {
/* background colour of left sidebar */
  border-left: 200px solid #000000;
/* background colour of right sidebar */
  border-right: 200px solid #000000;
  background: #000000;
} 

#leftsidebar {
  display: block;
  padding: 0px 0px 10px 9px;
}

#rightsidebar {
  text-align: left;
  padding: 0px 10px 0px 0px;
}

#content {
  margin: 0px 10px 10px 10px;
  padding: 5px 10px 10px 10px;
  background: #ececec;
  border: 2px solid #4682B4;
}
#content h3 {
  margin: 0px 0px 0px 0px;
  padding: 5px 0px 0px 0px;
  border-bottom: 1px dotted #bbbfa1;
}

#modify_select #links, #bookmark_list #links {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-top: none;
  background: #ececec;
  color: #000000;
}

/*-----------------*\
|* global elements *|
\*-----------------*/

/* Eliminate Shadows */
.shadowtop, .shadowbottom {
  height: 0px;
  display: none;
}

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

/* links */
.linklisting {
  margin: 0px 0px 10px 0px;
  padding: 3px 5px 2px 8px;
  border: 2px solid #4682B4;
  background: #ececec;
  height: auto;
  overflow: hidden;
  color: #000000;
}

.linklisting .linkrating {
  font-size: 9px;
  text-decoration: none;
  font-weight: normal;
  float: right;
  text-align: right;
}

.linklisting p.linkurl a {
  color: #009900;
  font-size: 10px;
  text-decoration: none;
  font-weight: normal;
}

.linklisting p.music_style {
  margin: 2px 0px 2px 0px;
  color: #4F4F4F;
  font-size: 10px;
  text-decoration: none;
  font-weight: normal;
}

.linklisting p.linkactions {
  margin: 0px 0px 0px 160px;
}

.linklisting p.mp3 {
  margin: 0px;
  clear: left;
}

.playit {
  margin: 0px;
  text-align: left;
}

/* link/bookmark status icons */
.new-item, .updated-item, .popular-item, .unpaid-item, .expired-item, .free-item, .bookmark-public, .bookmark-default {
  background: none;
  font-weight: normal;
  font-size: 9px;
  color: #000000;
  vertical-align: text-top;
}
.new-item {
  color: red;
}
.updated-item {
  color: #c5a600;
}
.popular-item {
  color: green;
}
.unpaid-item {
  color: #555555;
}
.expired-item {
  color: #92589c;
}
.free-item {
  color: red;
}

.new-item span, .updated-item span, .popular-item span, .unpaid-item span, .expired-item span, .free-item span, .bookmark-public span, .bookmark-default span {
  padding: 0px 3px;
  background: none;
}

/* paging */
.paging {
  float: right;
  margin-top: -2px;
  width: 200px;
}
.paging a {
  color: #FFCC33;
}
.paging a:visited {
  color: #FFCC33; 
}
.paging a:hover {
  color: #8b0000; 
}

.row.required {
  background: #ececec;
}

/*--------*\
|* footer *|
\*--------*/

#footer {
  margin-top: 0px;
  padding: 0px;
  border-top: 1px solid #000000;
  background: #000000;
  text-align: center;
}
#footer img {
  float: none;
}
#footer p {
  color: #DCDCDC;
  font-size: 9px;
}



/* This is for the category dividers everywhere */
/* Adds a cool folder next to category grouping divider. */
/* cool.html, new.html, search_results.html */
.category {
  font-size: 12px;
  font-weight: bold;
  background: transparent url(images/folder-c.gif) top left no-repeat;
  padding-left: 0px;	/* can use either padding or text-indent */
  text-indent: 20px;
}

#cool .category a, #new .category a, #search_results .category a{
  color: #FFFFFF;
}
#infobox .category, #new_date_view .category {
  font-weight: normal;
}
#infobox .category a, #new_date_view .category a,
#add .category a, #home .category a{
  color: #00008b;
}
#infobox .category a:visited, #new_date_view .category a:visited,
#add .category a:visited, #home .category a:visited {
  color: #00008b; 
}
#infobox .category a:hover, #new_date_view .category a:hover,
#add .category a:hover, #home .category a:hover {
  color: #8b0000; 
  text-decoration: underline;
}
#add #content #seperate_cats h2 {
  text-align: center;
  border: none;
  color: #4682B4;
}

#infobox {
  margin: 0px 0px 15px 0px;
  padding: 2px 4px 6px 6px;
  border: 2px solid #4682B4;
  background-color: #ececec;
}

#infobox p {
  margin-top: 6px;
  margin-left: 0px;		/* Indent All icon on left */
  margin-bottom: 4px;
  padding-bottom: 0px;
}

.home_icon {
  font-size: 12px;
  font-weight: normal;
  background: transparent url(images/home-no_border.gif) top left no-repeat;
  padding-left: 20px;
}
.cat_icon {
  font-size: 12px;
  font-weight: normal;
  background: transparent url(images/folder-c.gif) top left no-repeat;
  padding-left: 18px; /* Offset by 2 in case of no indent wanted above */
}
/* Indent FOLDER icon on left */
#infobox .cat_icon{
  margin-left: 8px;	/* Use 2 if no indent wanted */
}

.add_link_icon {
  font-size: 12px;
  font-weight: normal;
  background: transparent url(images/add-no_border.gif) top left no-repeat;
  padding-left: 20px;
}
.modify_link_icon {
  font-size: 12px;
  font-weight: normal;
  background: transparent url(images/modify-no_border.gif) top left no-repeat;
  padding-left: 20px;
}
.newsletter_icon {
  font-size: 12px;
  font-weight: normal;
  background: transparent url(images/new-no_border.gif) top left no-repeat;
  padding-left: 20px;
}
.find_icon {
  font-size: 12px;
  font-weight: normal;
  background: transparent url(images/find-no_border.gif) top left no-repeat;
  padding-left: 20px;
}
.compose_icon {
  font-size: 12px;
  font-weight: normal;
  background: transparent url(images/compose-no_border.gif) top left no-repeat;
  padding-left: 20px;
}
.doc_icon {
  font-size: 12px;
  font-weight: normal;
  background: transparent url(images/document.gif) top left no-repeat;
  padding-left: 20px;
}

/* Indent FOLDER icon on left */
#content .add_link_icon, #content .find_icon {
  margin-left: 8px;	/* indent */
}

#minisearchbox {
  margin: 0px 0px 15px 0px;
  padding: 2px 4px 0px 0px;
  border: 2px solid #4682B4;
  background-color: #ececec;
}

#minisearchbox p {
  margin: 6px 0px 0px 0px;
  text-align: center;
  font: normal 11px tahoma, geneva, verdana, sans-serif;
}

#minisearchbox input.text, #minisearchbox textarea {
  margin: 6px 10px 0px 4px;
  padding: 1px 0px 1px 2px;
  width: 106px;
  border: 1px solid #57594b;
  background-color: #FFFFFF;
}


#new_date_view {
  padding: 0px 0px 0px 0px;
  margin-top: 0px;
}
#new_date_view p {
  margin-top: 6px;
  margin-left: 6px;		/* indented folder icon on left */
  margin-bottom: 4px;
  padding-bottom: 0px;
}

#add_choose {
  padding: 6px 6px 6px 10px;
  margin: 0px 0px 0px 0px;
}
#add_choose .category, #home .category, #add .category, #category .category{
  padding: 0px 0px 0px 0px;
  margin: 6px 0px 0px 0px;
}
#desc {
  font-size: 10px;
  color: #000000;
  font-weight: normal;
  margin: 0px 0px 0px 0px;
  padding: 0px 8px 6px 0px;
}

/* These are for SearchFeed results */
#search_feed_wrapper {
  margin: 0px 0px 10px 0px;
  padding: 4px 0px 4px 0px;
  background: none;
  text-align: left;
}
#search_feed_wrapper ul{
  margin: 0px 0px 8px 0px;
  padding: 0px 20px 0px 10px;
}
#search_feed_wrapper li{
  list-style: none;
}
#search_feed_wrapper a{
  font-weight: bold;
  color: #4682B4;
}
#search_feed_wrapper a:hover{
  color: #FFCC33;
}

/* Wraps message in a box */
#search_feed_message {
  font-size: 12px;
  font-weight: bold;
  font-family: verdana, arial, "ms sans serif";
  color: #ffffff;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
  padding: 4px 0px 5px 4px;
  border: 2px solid #4682B4;
}

.link {
  color: #4682B4;
  font-weight: bold;
}
.descript {
  color: #FFFFFF;
  font-weight: normal;
}

/* Re-Override GL's override of h4 on the home page. */
/* Make it match .linklisting h4.linktitle so the */
/* random_link's title will display properly on home page. */
#home #content .linklisting h4 {
  margin: 2px 0px 0px 0px;
  font-weight: bold;
  font-size: 13px;
}

#category dl {
  margin: 0px 0px 0px 0px;
  width: 33%;
  float: left;
}

#home dl, #add dl,#new_date_view dl {
  margin: 0px 0px 0px 0px;
  width: 49%;
  float: left;
}
/*---------------------------------*\
|* NEW                  *|
\*---------------------------------*/
/* For banners ads */
#bannerads {
  text-align: center;
  vertical-align: text-top;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0px 0px 0px 0px;
}

#sidebar_ads {
  margin: 0px 0px 15px 0px;
  padding: 0px 0px 0px 0px;
  background: none;
  text-align: center;
}

#link_content {
  margin: 0px 10px 0px 10px;
  color: #4682B4;
}

#contentwrapper_bottom {
  text-align: left;
  margin: 0px 10px 0px 10px;
}
#contentwrapper_bottom .image{
  text-align: center;
}

#contentwrapper_bottom .paging {
  float: none;
  padding-right: 20px;
  padding-bottom: 4px;
  width: auto;
  text-align: right;
}

#linkimage {
  float: left;
  margin: 2px 8px 0px 0px;
}

/*-------------------------------------------------------*\
|* min-width for center column. Plus fix for IE Windows. *|
|* http://www.webreference.com/programming/min-width/    *|
\*-------------------------------------------------------*/

.width {
  width: 98%;
  min-width: 900px;
  margin: 0px auto;
  text-align: left;
}

* html .minwidth {
	padding-left: 900px;
}
* html .container {
	margin-left: -900px;
	position: relative;
}

/*\*/
* html .minwidth, * html .container, * html .layout  {
	height: 1px;
}
/**/

/* End min-width ----------------------------------------*/


/*--------------------------------------------------------------*\
|* Fix disappearing right shadow in IE Windows, which appeared  *|
|* whin I split <div id="contentwrapper" class="shadowleft">.   *|
|* into 2 separate divs                                         *|
\*--------------------------------------------------------------*/
.shadowright {
position: relative;
}
/* End disappearing shadow fix ---------------------------------*/