@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;
    }

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 .htm extension).  So if you want to change the h2 heading in the
home.htm template, you can do this by:

    #home 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;
}
*/

/* Change width of document */
/*
#wrapper {
  width: 750px;
}
*/

/* Don't want the shadows? */
/*
.shadowtop, .shadowbottom, .shadowleft, .shadowright {
  background: none;
}
.shadowtopleft, .shadowtopright, .shadowbottomleft, .shadowbottomright {
  width: auto;
  height: auto;
  float: none;
  background: none;
}
*/

/*--------*\
|* footer *|
\*--------*/
#footer {
  margin-top: 3px;
  padding: 5px;
  border-top: 1px solid #57594b;
  background: #C8D7E7;
  color: #33332E;
}
#footer img {
  float: right;
}
#footer p {
  margin: 0px;
  padding: 10px 0px;
  color: #33332E;
  font-size: 9px;
  text-align: left;
}

#footer a {
	color: #33332E;
}

/*-----------*\
|* searchbar *|
\*-----------*/
.searchbar {
  margin-bottom: 3px;
  padding: 5px 10px;
  border-bottom: 1px solid #57594b;
  background: #C8D7E7;
/* ie doesn't like the nav div being cleared, so we'll clear it using the searchbar */
  clear: both;
}
.searchbar input.text, .searchbar input.submit {
  margin-right: 5px;
}
.searchbar input.submit {
  padding: 0px 3px;
  height: 21px;
  line-height: 1em;
}
/* these colours are the same as defined by 'a', but we unset a:visited */
.searchbar a {
  color: #212126;
  font-size: 10px;
}
.searchbar a:hover {
  color: #5c5b66;
}
.searchbar .username {
  padding-top: 4px;
  float: right;
}

/*-------------*\
|* folder list *|
\*-------------*/
/* remove the extra padding on the right shadows */
#folderlistwrapper .shadowright {
  background: url(images/shadow-right-np.gif) right repeat-y;
}
#folderlistwrapper .shadowtopright {
  width: 11px;
  background: url(images/shadow-topright-np.gif) bottom right no-repeat;
}
#folderlistwrapper .shadowbottomright {
  width: 11px;
  background: url(images/shadow-bottomright-np.gif) top right no-repeat;
}

#folderlist {
  margin: 0px 4px 0px 10px;
  border: 1px solid #ffffff;
  background: #C8D7E7;
}
#folderlist h2 {
  margin: 0px;
  padding: 3px 5px;
  border-bottom: 1px solid #ffffff;
  color: #ffffff;
  background: #2361A0;
  font-size: 12px;
}

#folderlist .dtree, #folderlist #folderstree {
  padding: 3px 0px 3px 3px;
/* the width has to be set for the overflow to work in ie */
  width: 150px;
  overflow: hidden;
  white-space: nowrap;
}
#folderlist .dtree img, #folderlist #folderstree img {
  vertical-align: middle;
}
#folderlist .dtree a.node, #folderlist .dtree a.nodeSel {
  padding: 1px 2px 1px 2px;
}

#folderlist .currentfolder {
  font-weight: bold;
}
#folderlist .unreadmessages {
  font-weight: bold;
}

#folderlist a {
  text-decoration: none;
  color: #212126;
}
#folderlist a:hover {
  text-decoration: underline;
}

#folderlist .mailboxusage {
  margin: 0px auto;
  padding: 7px 7px 6px 7px;
  background: #ffffff;
}
#folderlist .mailboxusagebar {
  margin-top: 1px;
  border: 1px solid #000000;
  width: 95px;
  height: 10px;
  heigh\t: 8px;
  font-size: 1px;
  float: left;
}
#folderlist .mailboxusagebar div {
  margin-top: 1px;
  height: 6px;
  font-size: 1px;
}
#folderlist .mailboxusage label {
  font-size: 10px;
  float: right;
}
#folderlist .mailboxalert {
  background: #8c3030;
}
#folderlist .mailboxwarning {
  background: #cc6613;
}
#folderlist .mailboxok {
  background: #3a5841;
}

/* links */
a {
  color: #212126;
}
a:visited {
  color: #5c5b66;
}
a:hover {
  color: #5c5b66;
  text-decoration: none;
}

/*---------*\
|* content *|
\*---------*/
#ocwrapper {
/* background colour of left sidebar */
  border-left: 170px solid #e2e1eb;
/* background colour of right sidebar */
  border-right: 0px solid #e2e1eb;
  background: #ffffff;
}

.noauth h2 {
  color: #ffffff;
  background: #2461A0;
  text-transform: uppercase;
  font-size: 11px;
  padding: 3px 4px;
  margin-top: 0px;
}

.row.required, .row.highlighted {
  background: #C8D7E7;
}

#contentheader .message {
  background: #2361A0;
}