/* *** include css/base/main.css */

/* Stop Mac IE loading these files -> \*/

/* ** MODULES **
 *
 * @name: modules.css
 * @author: Neil Jenkins
 *
 */

/* @group Label Overlay */

label.overLabel {
	padding-right: 1ex;
}

label.overLabel:after {
	content: ':';
}

.JSEnabled label.overLabel {
	position: absolute;
	z-index: 1;
	left: 2ex;
	bottom: 50%;
	margin-bottom: -1ex;
	margin-left: -2px;
	cursor: text;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.JSEnabled #search label.overLabel {
	right: 4em;
}

.JSEnabled label.overLabel:after {
	content: '...';
}

/* @end */

/* @group Auto-expand */

.inputGhost {
	position: absolute;
	white-space: pre;
	left: -2000px;
}

.JSEnabled textarea.autoExpand {
	overflow: hidden;
}

.textAreaGhost {
	position: absolute;
	top: -2000px;
	left: -2000px;
	white-space: -moz-pre-wrap;  /* Mozilla, doesn't suport the standard attribute pre FF3 */
	white-space: pre-wrap;       /* CSS3 */
	word-wrap: break-word;		 /* Internet Explorer */
}

/* @end */

/* @group Tokenising Text Box */

ul.holder {
	border-width: 1px;
	border-style: solid;
	padding: 3px;
	overflow: hidden;
	cursor: text;
}

ul.holder li {
	float: left;
	list-style-type: none;
	margin: 1px 0;
}

ul.holder li.token-input input {
	border: none !important;
	outline: none;
	line-height: 1;
	padding: 0.25em 3px;
	width: 31px;
	margin-right: -30px;
	margin-bottom: -2px;
}

ul.holder li.token-box {
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding: 0 16px 1px 5px;
	cursor: default;
	position: relative;
	z-index: 10;
}

#webkit ul.holder li.token-box {
	min-height: 17px;
}

li.token-box a.token-menu {
	display: block;
	position: absolute;
	right: 1px;
	top: 2px;
	width: 12px;
	height: 16px;
}

li.token-box a.token-menu span {
	cursor: pointer;
	width: 7px;
	height: 7px;
	margin: 3px 2px;
	display: block;
}

/* @end */

/* @group AutoComplete Text Box */

ul.autoComplete-holder {
	display: none;
	position: absolute;
	margin: 0;
	opacity: 0.9;
	z-index: 1000;
}

ul.autoComplete-holder li {
	padding: 5px 12px;
	cursor: default;
	list-style: none;
	border-style: solid;
	border-width: 0 1px 1px;
}

/* @end */

/* @group Spell Check */

.spellCheck {
	padding: 0 1px 2px;
	white-space: pre;
	white-space: -moz-pre-wrap;  /* Gekco, pre FF3 */
	white-space: pre-wrap;       /* CSS3 */
	word-wrap: break-word;
}

.modeRichText .spellCheck {
	white-space: normal;
}

.spellCheck-unknown {
	cursor: pointer;
	border-bottom: 1px dotted;
	color: red;
}

.spellCheck-corrected {
	cursor: pointer;
	border-bottom: 1px dotted;
	color: blue;
}

.spellCheck input {
	padding: 3px;
	width: 6em;
	border-width: 1px;
	border-style: solid;
}

/* @end */

/* @group Menu */

#menu {
	margin: 0;
	padding: 3px 0;
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	box-shadow: 0 10px 30px rgba(128, 128, 128, 0.5);
	-moz-box-shadow: 0 10px 30px rgba(128, 128, 128, 0.5);
	-webkit-box-shadow: 0 10px 30px rgba(128, 128, 128, 0.5);
	position: absolute;
	z-index: 10;
}

#menu li {
	list-style: none;
	padding: 1px 10px;
	border-width: 1px 0;
	border-style: solid;
}

#menu li:hover {
	text-shadow: 1px 1px 1px #4173CC;
}

/* @end */

/* @group Keyboard Menu */

/* Hide the textbox in these two modes */
.keyboardMenu-firstLetter, .keyboardMenu-shortcut {
	position: absolute;
	left: -2000px;
}

.keyboardMenu {
	position: fixed;
	z-index: 1000;
	top: 5em;
	left: 50%;
}

.keyboardMenu div {
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
	overflow: hidden;
	border: 1px solid;
	position: relative;
	left: -50%;
	padding: 0 5px;
}

.keyboardMenu h2 {
	background: none;
	padding: 5px;
	text-align: center;
	border-bottom: 1px solid;
}

.keyboardMenu label {
	text-align: center;
	display: block;
	margin: 4px 4px 2px;
}

.keyboardMenu input {
	opacity: 0.7;
	border: 1px solid;
	padding: 5px;
	margin: 0 5px;
	width: 90%;
}

.keyboardMenu h3 {
	margin: 8px;
	text-align: center;
}

.keyboardMenu ul {
	padding: 5px 5px 1px;
	margin: 0 0 10px 0;
	list-style: none;
	overflow: hidden;
	position: relative;
}

.keyboardMenu li {
	padding: 3px 11px 3px 27px;
	background-repeat: no-repeat;
	cursor: pointer;
	white-space: pre;
}

.keyboardMenu li.selected, .keyboardMenu li:hover {
	outline-width: 1px;
	outline-style: solid;
	background-color: #222;
}

.keyboardMenu span {
	float: left;
	width: 1.5em;
}

/* @end */

/* @group Modal Dialog */

body.modal {
	overflow: hidden;
}

.dimScreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	z-index: 10;
}

.modalDialog {
	margin-left: -15em;
	width: 30em;
	border-style: solid;
	border-width: 1px;
	border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
	-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 20%;
	left: 50%;
	text-align: center;
	z-index: 10;
}

.modalDialog input {
	width: 90%;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
}

.modalDialog ul.holder {
	margin: 10px 20px;
	width: auto;
}

.modalDialog-actions {
	padding: 10px;
	text-align: right;
}

.modalDialog-actions button {
	margin-left: 5px;
}

/* @end */

/* @group Tabs */

ul.tabs {
	clear: both;
	padding: 0 3ex;
	list-style: none;
	margin: 1em 0 0;
}

.tabs li {
	display: block;
	float: left;
	margin: 0 0.5ex;
}

.tabs li a {
	text-decoration: none;
	display: block;
	padding: 4px 2ex 4px;
	border: 1px solid;
	border-bottom: none;
	position: relative;
}

.tabs li a:hover {
	padding: 5px 2ex 4px;
	margin-top: -1px;
}

.tabs li a.selected, .tabs li a.selected:hover {
	padding: 5px 2ex 5px;
	margin: -1px 0;
}

.tabsBottom {
	clear: both;
	border-bottom: 1px solid;
	margin-bottom: 1em;
}

/* @end */

/* @group Notifications */

.notification {
	overflow: hidden;
	width: 20em;
	margin-bottom: 1em;
	padding: 0 1em;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	background: #000;
	border: 2px solid #000;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.notification:hover {
	border-color: #fff;
}

.notification h4 {
	font-size: 120%;
	margin: 1ex 0;
}

.notification p {
	margin: 1ex 0;
}

/* @end */

/* @group Yubikey */

.yubiKeyInput {
	background: url("../images/yubiright_16x16.gif") no-repeat scroll 2px 50% white;
	padding-left: 20px !important;
}

/* @end */

/* ** MAILBOX SCREEN **
 *
 * @name: mailbox.css
 * @author: Neil Jenkins
 *
 */

/* @group Content Table */

.contentTable th.flag a, .contentTable th.attachment a{
	display: none;
}

.contentTable .flag {
	text-align: center;
	width: 20px;
}

.contentTable .flag span {
	display: block;
	width: 17px;
	height: 18px;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: -1000px;
}

.contentTable .from {
	width: 15em;
}

.JSEnabled td.from {
	cursor: pointer;
}

.contentTable .flags {
	float: left;
	margin-left: -3ex;
	margin-right: -.5ex;
	width: 2.5ex;
	text-align: right;
	position: relative;
}

.contentTable .lowpriority, .contentTable .highpriority {
	float: left;
}

.truedomainlogo {
  margin: 0px 5px -2px 0px;
}

.contentTable .subject {
	padding-left: 3.5ex;
}

.snippet:before {
	content:  ' - ';
}

.contentTable .preview td {
	border-top: hidden;
	white-space: normal;
}

.contentTable .attachment {
	width: 18px;
}

.contentTable .attachment a {
	display: block;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	text-indent: -1000px;
	overflow: hidden;
}

.contentTable .date {
	width: 6.7em;
	padding-left: 1.5ex;
}

.contentTable .size {
	width: 4em;
	padding-left: 1ex;
}

tr.folderName h3 {
	margin: 0;
	padding: 0.4ex 0 0.2ex;
	text-indent: 0.7ex;
}

tr.folderName td {
	padding: 1ex 0 0;
}

/* IMAP Deleted messages */
tr.deleted td {
	text-decoration: line-through;
}

/* @end */

/* @group Sidebar */

/* Need the > to exclude IE6, which messes up royally */
#mailbox #sidebar ul > li span.overflow, #message #sidebar ul > li span.overflow {
	right: 40px;
}

/* [Empty] links */
#sidebar a.empty {
	position: absolute;
	top: 6px;
	right: 40px;
}

#sidebar #filterFolders {
	display: none;
}

.JSEnabled #sidebar #filterFolders {
	display: block;
	padding: 3px 17px 3px 5px;
}

.JSEnabled #filterFolders label.overLabel {
	margin-bottom: -1.3ex;
	margin-left: 2px;
}

#filterFolders input {
	width: 100%;
	margin-left: -1px;
	padding: 4px 3px;
	border-width: 1px;
	border-style: solid;
}

ul.isFiltering a.expandCollapseLink,
ul.isFiltering a.empty,
ul.isFiltering li.selected {
	display: none;
}

ul.isFiltering ul.hidden {
	display: block !important;
}

.messageTotal, li:hover li .messageTotal {
	display: none;
}

li:hover .messageTotal, a:hover .messageTotal {
	display: inline;
}

/* @end */

/* ** ADDRESS BOOK **
 *
 * @name: addressbook.css
 * @author: Neil Jenkins
 *
 */

/* @group Standard Elements */

hr {
	height: 1px;
	border: none;
	margin: 1em;
}

/* @end */

/* @group Contact Entry in Table */

td.contacts {
	padding-left: 1ex;
}
td.contacts * {
	margin-right: 3px;
}

td.contacts div {
	margin: 0 0 1px 0;
}

.contacts span.contactPhone, .contacts  a.contactEmail {
	margin-right: 5px;
}

/* @end */

/* @group Expanded Details */

tr.expandedDetails td.chevron {
	background-position: right 1.4em;
}

tr.expandedDetails td.checkbox {
	padding-top: 1.15em;
	vertical-align: top;
}

tr.expandedDetails td.contactDetails {
	padding: 0 25px 0 1ex;
}

/* Contact's Name */
.expandedDetails h3 {
	max-width: 19.3em;
}

p.contactActions {
	margin-top: -3px;
}

/* Contact Details List */
.expandedDetails dl {
	border-width: 1px;
	border-style: solid;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	min-width: 40em;
	margin: 1em 0;
	padding: 1em;
	position: relative;
	width: 80%;
}

/* The info titles */
.expandedDetails dt {
	position: absolute;
	left: 1em;
	width: 7em;
	text-align: right;
	text-shadow: #eee 1px 1px 1px;
	text-transform: lowercase;
  white-space: normal;
}

/* And the actual data */
.expandedDetails dd {
	margin-left: 8em;
	white-space: normal;
}

/* @end */

/* @group Sidebar */

/* Bring the cut-off point for an li in so the text
 * doesn't run under either of the two buttons.
 */
#addressBook #sidebar ul > li span.overflow {
	right: 6em;
}

/* Contains the hr dividing the two groups sections */
span.divider {
	display: block;
	height: 1.4em;
	text-align: center;
}

/* @end */

/* @group Edit Contact */

.editContact {
	width: 42.5em;
	margin: 0 auto;
}

/* Contact's Name */
p.contactName {
	/* Ensure the block contains all floats */
	overflow: hidden;
}

.contactName label {
	float: left;
	margin: 0 1ex 0 0;
}

.contactName input {
	display: block;
	width: 11em;
	padding: 2px 3px;
}

.contactName #title {
	width: 3em;
}

.backToAddressBook {
	margin-top: 1em;
	line-height: 1.5;
}

/* Section titles */
.editContact h3 {
	text-transform: capitalize;
	border: none;
	margin: 1em 0 0 0;
}

.editContact fieldset {
	position: relative;
	width: 39.5em;
	background: #eee;
	border: 1px solid #888;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin-bottom: 1em;
	padding: 1em;
}

.editContact fieldset div {
	position: relative;
	padding: 0.4ex 0 0.4ex 12.5em;
	overflow: hidden;
}

.editContact fieldset label {
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 11.5em;
	text-align: right;
	text-shadow: #eee 1px 1px 1px;
	text-transform: lowercase;
}

.editContact fieldset label select {
	position: relative;
	top: -3px;
}

.editContact fieldset input, .editContact fieldset textarea {
	padding: 2px;
	width: 24.5em;
	margin-right: 1ex;
	float: left;
}

.editContact fieldset input[type=checkbox] {
	width: auto;
	margin-top: 0.5ex;
}

#webkit .editContact fieldset input[type=checkbox] {
	margin-top: 0.9ex;
}

.editContact fieldset button {
	position: relative;
	top: -3px;
}

.editContact fieldset textarea {
	height: 3em;
	padding: 3px;
}

/* @end */

/* ** MESSAGE SCREEN **
 *
 * @name: message.css
 * @author: Neil Jenkins
 *
 */

/* @group Navigation and Actions */

.backToMailbox {
	position: absolute;
	left: 0;
}

#message .nextPrev {
	position: relative;
	float: none;
	text-align: center;
	margin-top: 1em;
	line-height: 1.5;
}

.deleteNextPrev { 
	display: block;
	position: absolute; 
	right: 0; 
	top: 0;
}

.jumpAfterAction {
	margin: -0.35em 0 -0.85em;
	text-align: right;
}

.jumpAfterAction select {
	margin: 0;
	padding: 0;
}

.msgDeleteGap {
	display: none;
}
@media screen and (min-width: 1200px) {
	.msgDeleteGap {
		display: inline;
		padding-left: 6px;
	}
}

/* @end */

/* @group Message Header */

.messageFlag {
	background-position: left center;
	background-repeat: no-repeat;
	float: left;
	width: 18px;
	min-height: 18px;
	height: 2em;
	margin-right: 1ex;
}

#isReplied {
	font-size: 2em;
	height: 1em;
}

#message h1 {
	cursor: auto;
	float: none;
	margin-bottom: 0.2ex;
}

#message .truedomain {
	padding: 5px;
	margin-bottom: 0.4em;
	border-left: 1px solid #AFD67D;
}

#message .truedomain img {
	margin: 0px 5px -2px 5px;
}

#message dl {
	cursor: auto;
	margin: 0 0 1em;
	position: relative;
	padding: 5px;
	/* Contain floats */
	overflow: hidden;
}

#message pre.fullHeaders {
  cursor: auto;
	padding: 5px;
}

#message dt {
	min-width: 5em;
	padding-right: 1em;
	text-align: right;
	float: left;
	clear: left;
}

#message dd {
	padding-left: 6em;
}

.viewOptions {
	position: absolute;
	right: 5px;
	bottom: 5px;
}

.viewFullHeaders {
	position: absolute;
	right: 5px;
	top: 5px;
}

/* @end */

/* @group Message Body */

.messageBody {
	cursor: auto;
}

.defangedMessage {
	overflow: auto;
	min-height: 30em;
}
.JSEnabled .defangedMessage {
	min-height: 10em;
}

/* Firefox bug cuts off content when too large */
#gecko .defangedMessage {
	max-height: 32000px;
}

/* Opera bug looses scroll bars when content too large */
#presto pre {
	max-height: 64000px;
	overflow: auto;
}

/* @end */

/* @group Attachments */

/* Use #message to differentiate from
 * #compose #attachments
 */

#main ul.files {
	margin: 0;
	/* Fix IE6 list background bug: */
	position: relative;
}

#message #attachments li, #compose #attachments .file {
	background-repeat: no-repeat;
	list-style: none;
	margin: 1em 0;
	padding-left: 40px;
	min-height: 32px;
}

#message #attachments button {
	margin-right: 1ex;
}

#message #attachments input {
	vertical-align: middle;
	position: relative;
	top: -2px;
}

#message #attachments select {
	margin-left: 1ex;
}

span.attachmentDetails {
	display: block;
}

span.attachmentDetails a {
	margin: 2px;
}

div.attachedImage {
	clear: both; /* Fix IE print bug */
	overflow: hidden;
	margin: 1ex 0;
	position: relative;
}

.attachedImageInfo {
	position: absolute;
	left: 155px;
}

.shadow {
	position: relative;
	float: left;
	border-left: 1px solid #dcd7c8;
	border-right: 1px solid #dcd7c8;
}

.shadow img {
	display: block;
	border: none;
	border-left: 1px solid #b4afa3;
	border-right: 1px solid #b4afa3;
	padding: 5px 5px 9px 5px;
	background: #fff;
}

.shadow .topleft {
	width: 2px;
	height: 4px;
	position: absolute;
	top: 0;
	left: -1px;
}

.shadow .topright {
	width: 2px;
	height: 4px;
	position: absolute;
	top: 0;
	right: -1px;
}

.shadow .bottomleft {
	width: 4px;
	height: 4px;
	position: absolute;
	bottom: 0;
	left: -1px;
}

.shadow .bottomright {
	width: 4px;
	height: 4px;
	position: absolute;
	bottom: 0;
	right: -1px;
}

#selectAttachments {
	margin: 1ex 0;
}

.attachedMessage {
	clear: both; /* Fix IE print bug */
	border-width: 0 0 0 2px;
	border-style: solid;
	padding-left: 1em;
	margin: 1.5ex 0;
}

#message .attachedMessage dl {
	margin-top: 1ex;
}

/* @end */

/* ** COMPOSE SCREEN **
 *
 * @name: compose.css
 * @author: Neil Jenkins
 *
 */

/* @group Save Draft Status */

#lastSaved {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	margin-top: -.5em;
	margin-left: 3em;
	text-align: center;
}

/* @end */

/* @group Message Headers */

.messageHeaders {
	border: none;
	padding-bottom: 2ex;
	position: relative;
}

.messageHeaders div {
	position: relative;
	margin: 0 3ex 0 10ex;
	padding-top: 1ex;
}

#saveNewNames {
	position: absolute;
	margin: 0;
	top: 0;
	right: 1.2em;
}

#saveNewNames label {
	position: static;
	width: auto;
	padding: 0;
}

#saveNewNames input {
	margin-left: 0.5ex;
}

#addCcBcc {
	padding: 0;
	margin: 0.2ex 10.1ex -0.7ex;
}

.messageHeaders label{
	position: absolute;
	width: 13ex;
	left: -14ex;
	padding-top: 0.7ex;
	text-align: right;
}

/* Should be .messageHeaders input[type=text] but this
 * isn't supported by IE6
 */
#messageSubject, #messageTo, #messageCc, #messageBcc {
	width: 100%;
	padding: 4px 3px;
	border-width: 1px;
	border-style: solid;
}

#compose ul.holder {
	margin: 0;
	width: 100%;
}

/* @end */

/* @group Message Body */

#textActions, #spellCheckResume {
	border-width: 1px 1px 0;
	border-style: solid;
	margin: 1ex 0 0;
}

#spellCheckResume {
	padding: 5px;
}

#messageBody {
	padding: 1ex;
	border-width: 1px;
	border-style: dotted solid solid;	
}

#messageBody textarea {
	border: 0;
	width: 100%;
}

#messageBody.modePlainText iframe {
	display: none;
}

#messageBody.modeRichText {
	padding: 0;
}

#messageBody.modeRichText .spellCheck {
	margin: 1ex;
}

#messageBody.modeRichText textarea {
	display: none;
}

/* Setting display: none may cause JS errors */
#HTMLEditor.hidden {
	display: block !important;
	position: absolute;
	left: -5000px;
}

/* @end */

/* @group Options and Attachments */

#showMessageOptions {
	float: right;
}

#messageOptions span {
	display: block;
	float: left;
	padding: 1ex 0;
	margin-right: 3ex;
	white-space: nowrap;
}

#messageOptions div {
	clear: left;
	margin-bottom: 1em;
}

#messageOptions select {
	margin-left: 0.5ex;
}

#messageOptions input {
	margin-right: 1ex;
}

#attachments {
	clear: both;
	margin: 1em 0;
}

#attachOriginal {
	margin: 1ex 0;
}

/* Tweak checkbox position for Gecko */
#gecko #compose input[type=checkbox] {
	vertical-align: text-bottom;
}

#attachments input {
	margin-right: 0.5ex;
}

/* Shouldn't need this class but IE6 doesn't support input[type=file]. Grr. */
#attachments .attachFile input {
	margin: 1ex 0;
	padding: 0.7ex 0;
}

.attachmentButtonWrapper {
	float: left;
	margin-right: 1ex;
	position: relative;
	overflow: hidden;
}

.invisible {
	opacity: 0;
	position: absolute;
	cursor: default;
}

/* @end */

/* @group Sidebar */

.autoAdd i {
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	margin-top: 2px;
	padding: 0 1ex;
}

/* @end */

#help h2.title {
  margin-top: 15px;
  margin-bottom: 15px;
}

#help blockquote {
  margin: 1em 0;
  border-left: 2px solid #144fae;
  padding-left: 1em;
}

#help dt {
  margin-top: 1em;
}

#help dd {
  margin-left: 1em;
}

#help .inlinemediaobject {
  float: left;
  margin-right: 10px;
}

#help p {
  /* http://css-discuss.incutio.com/?page=ClearingSpace */
  overflow: hidden;
  _overflow: visible;
  _overflow-x: hidden;
  _height: 0;
}


/* ** FILES SCREEN **
 *
 * @name: files.css
 * @author: Neil Jenkins
 *
 */

#files td.name {
	padding-left: 23px;
}	

/* Bit of a hack but no way round it that I can see at
 * the moment. Because they have <input>s in the row 
 * increasing its line-height, we have to move the label 
 * down to line up properly.
 */
#files .inline label {
	margin-top: 0.4ex;
}

/* Photo comments */

#files .comment {
	width: 24em;
}

#files .comment label {
	display: block;
}

#files .comment input, #files .comment textarea {
	padding: 3px;
	width: 20em;
	margin-bottom: 1ex;
}

.contentTable .website {
	width: 6.7em;
	padding-left: 1.5ex;
}

/* ** FORMS **
 *
 * @name: form.css
 * @author: Neil Jenkins
 *
 */

/* @group Standard Elements */

.forms h3 {
	margin-top: 1em;
}

.forms .description h3 {
	margin-top: 0;
}

.forms fieldset ul {
	list-style: square;
	margin: 0.5ex 5ex 1ex;
}

.forms textarea {
	border-width: 1px;
	border-style: solid;
	padding: 2px;
}

/* @end */

/* @group Description Boxes */

.description {
	clear: both;
	border-width: 1px;
	border-style: solid;
	margin: 7px 0;
	padding: 1ex 2ex;
}

.description p {
	margin: 1ex 0;
}

/* @end */

/* @group Continuous-form Table */

table.continuous {
	table-layout: auto;
}

table.continuous td, table.continuous th {
	padding: 4px 1ex;
}

table.continuous input {
	width: 95%;
	padding: 3px;
}

table.continuous select {
	width: 95%;
}

table.continuous .shortAs {
	width: 1%;
	text-align: center;
}

table.continuous th.shortAs {
	text-align: left;
}

table.continuous .shortAs input {
	width: auto;
	padding: 0;
}

/* @end */

/* @group Information Stanzas */

table.optionsWithInfo {
	table-layout: auto;
	width: 100%;
}

.optionsWithInfo th {
	vertical-align: top;
	padding: 1ex 1em;
	white-space: nowrap;
	text-align: right;
	width: 10em;
}

.optionsWithInfo td {
	vertical-align: top;
	font-size: 11px;
	padding: 1ex;
}

.optionsWithInfo td.nowrap {
	white-space: nowrap;
}

.optionsWithInfo .shortAs {
	width: 1%;
	text-align: center;
}

.optionsWithInfo input {
	margin-right: 5px;
}

.optionsWithInfo input[type=text].short {
	width: 10em;
}

.optionsWithInfo textarea, .optionsWithInfo input[type=text], .optionsWithInfo input[type=password] {
	width: 20em;
	padding: 2px;
}

/* @end */

/* @group Discrete Form (no info) */

.inline div {
	padding: 1ex 0 1ex 12em;
	clear: both;
	position: relative;
	overflow: hidden;
}

.inline label {
	width: 11em;
	float: left;
	margin: 0 0 0 -12em;
	text-align: right;
	font-size: 1em;
	font-weight: bold;
}

.inline p {
	margin: 1ex 0;
}

.wideBox input[type=text], .wideBox input[type=password], .wideBox textarea {
	margin-right: 0;
	width: 98%;
}

.inline input, .inline button {
	margin-right: 1ex;
	vertical-align: middle;
	position: relative;
	bottom: 1px;
}

.inline input[type=text], .inline input[type=password] {
	padding: 2px;
}

/* Full width inputs. Used in Notepad */

.fullWidth label {
	display: block;
	margin-bottom: 5px;
}

.fullWidth input, .fullWidth textarea {
	width: 99%;
	margin-bottom: 10px;
}

/* Sort by (div in sidebar) */

.sortBy {
	margin: 0.5em 1em 0.5em;
	padding: 0.5em 0;
	border-top: 1px solid;
	text-align: center;
}

/* @end */

/* ** OPTIONS SCREEN **
 *
 * @name: options.css
 * @author: Neil Jenkins
 *
 */

#options #main div {
	margin-top: 1ex;
	width: 25%;
	float: left;
}

#options h3 {
	margin: 0 18px;
}

#options dl {
	margin: 0 18px;
}

#options dt {
	padding: 1ex 0 0.5ex;
}

#options dd {
	margin: 0 0 1em 1em;
}
/* ** OPTIONS SCREEN **
 *
 * @name: options.css
 * @author: Neil Jenkins
 *
 */

#service .serviceLevels th, #service .serviceLevels td, #service .servicePeriods th, #service .servicePeriods td {
	text-align: center;
}

#service td.noCenter {
	text-align: left;
	padding-left: 1ex;
}



/* ** CORE LAYOUT **
 *
 * @name: core.css
 * @author: Neil Jenkins
 *
 */

/* @group Basic Reset */

/* First reset the margins and padding on all elements
 * plus a few other standard reset rules
 */

* {
	margin: 0;
	padding: 0;
	outline: none;
}

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}

fieldset {
	border: none;
}

/* Opera bug */
a span {
	text-decoration: inherit;
}

/* @end */

/* @group Standard Elements */

/* We need to set the height on the html and body element
 * to ensure the page is long enought to cement the footer
 * to the bottom of the screen.
 */

html {
	height: 100%;
}

body {
	height: 100%;
	/* Show the standard pointer instead of text cursor */
	cursor: default;
}

form#memail {
	height: 100%;
}

h3 {
	border-bottom: 1px solid;
	margin-bottom: 5px;
	clear: both;
}

h4 {
	margin: 1ex 0;
}

p {
	clear: both;
	margin: 1em 0;
}

#main ul, #main ol {
	margin: 1ex 5ex;
}

pre {
	white-space: -moz-pre-wrap;  /* Mozilla, doesn't suport the standard attribute pre FF3 */
	white-space: pre-wrap;       /* CSS3 */
	word-wrap: break-word;		 /* Internet Explorer */
}

iframe {
	border: none;
}

select {
	padding: 1px 0;
	margin-right: .25ex;
}

option {
	padding: 0 1ex 1px;
}

input[type=checkbox] {
	padding: 2px;
}

/* Button styles */

button {
	padding: 1px 1ex;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

/* @end */

/* @group Standard Classes */

.clear {
	clear: both;
	display: block;
}

.hidden {
	display: none !important;
}

/* @end */

/* @group Height Wrapper */

/* Ensure that the content other than the footer
 * is at least the height of the screen
 * This is necessary to glue the footer to the
 * bottom of the screen.
 */

#heightWrapper {
	position: relative;
	min-height: 100%;
	min-width: 780px;
	overflow: hidden;
}

/* @end */ 

/* @group Page Header */

#pageHeader {
	position: relative;
	height: 3.5em;
	border-bottom: 2px solid;
	margin-bottom: .5ex;
}

#pageHeader a {
	padding: 2px;
}

/* Menu structure:
 *	<ul id="navigation">
 *		<li><a>Link Name</a></li>
 *	</ul>
 *	
 * A selected tab will have a <span> instead of an <a>
 */
#navigation {
	margin: 0;
	list-style: none;
	position: absolute;
	bottom: -2px;
	left: 1em;
}

#navigation li {
	float: left;
	border-width: 1px 1px 0 1px;
	border-style: solid;
	margin-right: 5px;
	padding-bottom: 2px;
}

#navigation li.selected {
	padding-bottom: 0;
}

#navigation span, #navigation a {
	float: left;
}

#navigation li a, #navigation li span {
	padding: 2px 10px 2px;
	border-top-width: 3px;	
	border-top-style: solid;	
}

#navigation li.selected a, #navigation li.selected span {	
	padding-bottom: 4px;
}

#navigation a:hover {
	text-decoration: underline;
}

/* div#admin is the options/help/logout text */

#admin {
	text-align: right;
	padding: 1ex;
}

/* @end */

/* @group Status Messages */

/* Status messages in the source will be a div.statusMessage
 * just below the #pageHeader
 */

div.statusMessage, div.errorMessage {
	border-width: 1px;
	border-style: solid;
	margin: 0.4ex 1ex;
	position: relative;
	top: 0.4ex;
	padding: 0.5ex;
	text-align: center;
}

div.statusFolder {
	margin: 0 0 3px;
	text-align: left;
	top: 0;
	font-size: 0.75em;
}

/* @end */

/* @group Main Content Layout */

#mainWrapper {
	/* First two lines ensure the div is the width of the page */
	float: left;
	width: 100%;
	/* The negative margin ensures it is invisible in terms of
	 * horizontal page layout terms. Therefore the left floated
	 * sidebar will float right over the top of it as though it
	 * wasn't there and into the correct position on the left
	 */
	margin-right: -100%;
}

#main {
	/* We now need to set a left margin big enough to hold
	 * the sidebar so it doesn't overlap.
	 * By giving it a ridiculously big bottom padding
	 * and a negative bottom margin we ensure
	 * that the #main div appears to run all the way
	 * to the bottom of the page so it is never shorter
	 * than the sidebar.
	 */
	margin: 0.75em 0 -996.5em 16.75em;
	padding: 1px 1.5em 1000em 1.6em;
	position: relative;
	z-index: 1;
}

#main.noSidebar {
	margin-left: 2em;
}

#sidebar {
	float: left;
	position: relative;
	width: 16.25em;
	padding: 0 0 3.5em .5em;
	margin: 3.5ex 0 0 0;
}

/* If sidebarHidden class, hide sidebar by default with approximate values */
html.sidebarHidden #sidebar {
 	margin-left: -16.25em;
	left: 7px;
}
html.sidebarHidden #main {
 	margin-left: 0.5em;
	left: 7px;
}

/* Footer */
#copyright {
	/* Negative margin pull it up the exact height of the div so that
	 * it overlays the bottom of #heightWrapper. Since #heightWrapper
	 * is at least the height of the page, this effectively glues
	 * the footer to the bottom of the screen.
	 */
	margin-top: -3.3em;
	padding: 0.6em 0;
	overflow: hidden;
	text-align: center;
	width: 100%;
	border-top: 1px solid;
	position: relative;
	z-index: 10;
}

/* @group #main dropshadow */

.l {
	position: absolute;
	top: 5px;
	left: -6px;
	bottom: 10px;
	width: 6px;
	border-right: 1px solid #757575;
}

.t {
	position: absolute;
	top: -5px;
	left: 4px;
	height: 4px;
	right: 9px;
	border-bottom: 1px solid #b0b0b0 ;
}

.t.l {
	top: -5px;
	left: -6px;
	height: 10px;
	width: 10px;
	border: none;
}

.t.r {
	left: auto;
	right: 0;
	height: 5px;
	width: 9px;
	border: none;
}

.b.l {
	display: none;
}

/*.b.l {
	position: relative;
	float: left;
	margin: -5px 0 0 -2em;
	left: -1px;
	height: 10px;
	width: 7px;
	border: none;
	background: #efefef url(../images/mainshadow/shadow-bottomleft.png);	
}*/

/* @end */

/* @end */

/* @group Title and Actions */

/* Header and next/prev link positioning */

h1 {
	float: left;
	margin-top: .4ex;
}

.noSidebar h1 {
	float: none;
	text-align: center;
}

.nextPrev {
	margin: 1.7ex 0 0;
	float: right;
	line-height: 2;
}

/* Action bar styles */

.actions {
	clear: both;
	border-width: 1px;
	border-style: solid;
	padding: 0 5px;
	margin: 7px 0;
	line-height: 1.9;
	position: relative;
	/* Overflow ensures div expands to contain
	 * floats. Doesn't actually hide anything.
	 */
	overflow: hidden;
}

.actions select {
	vertical-align: middle;
}

.primaryActions {
	margin: 5px 0;
	float: left;
	position: relative;
	z-index: 10;
}

.primaryActions button {
	margin-right: 5px;
}

.secondaryActions {
	margin: 5px 0;
	float: right;
	position: relative;
}

.secondaryActions button {
	margin-left: 5px;
}

.secondaryActions select {
	margin-right: 5px;
}

/* Text input for redirect/create subfolder etc. */
.actions i input {
	width: 20em;
	border: 1px solid;
	padding: 3px;
	vertical-align: middle;
}

/* @end */

/* @group Content Table */

.contentTableWrapper {
	min-height: 300px;
}

.contentTable {
	table-layout: fixed;
	min-width: 40em;
	width: 100%;
	clear: both;
}

.contentTable th {
	padding: 5px 0;
	text-align: left;
	overflow: hidden;
	border-bottom: 1px solid;
}

/* A div inside the <th> is used in the 
 * address book for the sorting <select>
 */
.contentTable th div {
	float: right;
	margin-right: 5px;
}

.contentTable td {
	border-bottom: 1px solid;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 3px 0;
	text-align: left;
}

/* Class for when you want a td to wrap */
.contentTable td.wrap {
	white-space: normal;
}

/* Keyboard selected indicator
 * Note: ordering and specificity is imporant here,
 * ".JSEnabled .chevron" must be before ".disableKeyboardShortcuts .chevron" */

.JSEnabled .chevron {
	width: 11px;
	background-position: right center;
	background-repeat: no-repeat;
}

.chevron, .disableKeyboardShortcuts .chevron {
	width: 1px; /* Opera doesn't like 0px, make it 1px */
}

.contentTable .keyboardSelected .chevron {
	background-image: url(../images/misc/chevron.gif);
}

/* For <td>s containing a checkbox only */
.contentTable .checkbox {
	text-align: center;
	width: 25px;
}

/* div.actionsBottom contains the div.itemsToDisplay and a div.nextPrev */
.actionsBottom {
	padding: 2px 0;
	border-top: 1px solid;
	margin-top: -1px;
	overflow: hidden;
}

.itemsToDisplay {
	float: left;
	margin-top: 0.3ex;
	padding: 5px 10px;
}

.itemsToDisplay a, .itemsToDisplay b {
	margin-right: 10px;
}

.actionsBottom .nextPrev {
	padding: 2px 10px;
	margin: 0;
}

.backTo {
	margin-top: 1em;
	line-height: 1.5;
}

/* @end */

/* @group Sidebar */

h2 {
	padding: 4px 23px 3px 12px;
	overflow: hidden;
	position: relative;
}

div.collapseContainer {
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
}

/* Container for the expand/collapse image */
h2 div {
  display: none;
}

h2.collapsable div {
  	display: block;
	position: absolute;
	top: 50%;
	margin-top: -7px;
	right: 8px;
	width: 15px;
	height: 15px;
}

/* View selection */
ul.sidebarList, ul.folderTree { 			
	padding: 2px 0;
	overflow: hidden;
}

/* Give subfolders a small indentation */
ul.sidebarList ul,
ul.folderTree ul {
	margin-left: 7px;
}

/* Move/Copy option */
#moveCopyOption {
	text-align: center;
	border-top: 1px solid #888;
	padding-top: 1.5ex;
	margin: 1ex 0.75em 0;
}

#moveCopyOption select {
	padding: 0;
}

/* General sidebar list styling */
#sidebar li {
	position: relative;
	display: block;
	list-style: none;
	white-space: nowrap;
}

ul.sidebarList a,
ul.sidebarList li span.selected,
ul.folderTree .folder {
 	display: block;
	border-width: 1px 0 1px 4px;
	border-style: solid;
	padding: 5px 0 4px 1em;
	height: 1.2em;
	line-height: 1.2em;
	overflow: hidden;
	position: relative;
}

/* The +/- link for expanding/collapsing subfolders */
a.expandCollapseLink {
	text-decoration: none;
	position: absolute;
	cursor: pointer;
	left: 0;
	top: 0;
	width: 1em;
	height: 1.2em;
	padding: 7px 0 5px 5px;
	line-height: 1.2;
	text-align: center;
	z-index: 1;
}

/* Container of the move etc. button */
#sidebar li i {
	position: absolute;
	top: 0.1em;
	right: 10px;
	line-height: 1.6;
}

#sidebar li button {
	position: relative;
	vertical-align: middle;
	line-height: 1;
	padding: 1px 3px;
}

/* Safari tweak */
#webkit #sidebar li button {
	padding: 4px 7px;
}

/* Opera tweak */
#presto #sidebar li button {
	padding: 4px 7px;
}

/* <span> to prevent text spilling out of li */
#sidebar ul li span.overflow {
	position: absolute;
	padding: 5px 2px;
	top: 0;
	left: 1em;
	bottom: 0;
	right: 1.5em;
	overflow: hidden;
	text-overflow: ellipsis;	
}

/* For <li> with a single button only in it */
li.listButton {
	padding: 5px 0 0;
	text-align: center;
}

/* Search module for sidebar */
div#search {
	padding: 2px 4px 2px 4px;
}

#searchContainer {
	padding: 0 32px 5px 7px;
	position: relative;
}

/* Firefox tweak */
#gecko #searchContainer {
	padding-right: 38px;
}

#searchContainer > div {
	position: relative;
}

#searchContainer input {
	width: 100%;
	margin-left: -7px;
	padding: 4px 3px;
	border-width: 1px;
	border-style: solid;
}

#search button.actionSearch, #search input#searchBtn {
	margin-left: 2px;
	padding: 0 2px;
	position: absolute;
	left: 100%;
	top: -1px;
}

/* Safari tweak */
#webkit #search button.actionSearch {
	padding: 2px 2px 3px;
	top: 0;
}

/* Opera tweak */
#presto #search button.actionSearch {
	padding: 1px 2px 2px;
}

/* Reduce the padding a fraction so we get the
 * rounded button style rather than the rectangular
 * button style on Firefox Mac.
 */
#search button.actionSearch div {
	padding: 2px 0;
}

/* #searchOptions contains the two links
 * below the search bar
 */
#searchOptions, #filterLinks {
	margin-right: 6px;
	position: relative;
	top: -2px;
	left: 1px;
}
#filterLinks #filterRead {
  display: none;
}

#searchOptions a {
	white-space: nowrap;
}

/* Saved searches list */
#search ul {
	margin: 0 -4px;
	padding-top: 0.5ex;
	border-top: 1px dotted;
}

/* Resource Usage div */
#resourceUsage {
	padding: 2px 10px;
}

/* Titles in the resource usage div */
h5 {
	clear: both;
	margin-top: 0.5ex;
}

/* .resource structure:
		<div class="resource">
			<div class="chart sizeX">
				<div></div>
			</div>
			<span class="percent">Y%</span>
			<span class="figures">etc.</span>
		</div>
		
	where X is the % used to the nearest 5%.
*/

.resource {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding-bottom: .4em;
}

/* Create a simple bar chart */
.chart {
	height: 1em;
	margin: 5px 10px 2px;
	border: 1px solid;
	text-align: left; /* For IE - otherwise it bizarrely centres the div */
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.chart div {
	height: 100%;
	border-right: 1px solid;
	border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
}

/* Put a nice em dash in between .percent and .figures
 * Does not show up in IE.
 */
.percent:after {
	content: ' \2014 ';
}

/* Bar chart widths */
.size0 div { display: none; }

.size5 div { width: 5%; }

.size10 div { width: 10%; }

.size15 div { width: 15%; }

.size20 div { width: 20%; }

.size25 div { width: 25%; }

.size30 div { width: 30%; }

.size35 div { width: 35%; }

.size40 div { width: 40%; }

.size45 div { width: 45%; }

.size50 div { width: 50%; }

.size55 div { width: 55%; }

.size60 div { width: 60%; }

.size65 div { width: 65%; }

.size70 div { width: 70%; }

.size75 div { width: 75%; }

.size80 div { width: 80%; }

.size85 div { width: 85%; }

.size90 div { width: 90%; }

.size95 div { width: 95%; }

.size100 div { width: 100%; }

/* Div on which to drag to resize the sidebar */
#resizeHandle {
	text-indent: -1000px;
	position: absolute;
	z-index: 1;
	width: 15px;
	right: -9px;
	top: 0;
	height: 100%;
	cursor: e-resize;
	cursor: col-resize;
}

/* Hide sidebar link */
a#hideSidebar {
	display: block;
	margin: 1ex 1.5ex 0 .5ex;
}

a#hideSidebar.active {
	text-align: right;
}

/* @end */

/* @group Control Selection */

/* This code prevents the user accidentally selecting text in
 * the sidebar or page header in Safari or other CSS3 compliant
 * browsers.
 */

#sidebar, #pageHeader {
	cursor: default;
	-webkit-user-select: none;
	user-select: none; /* CSS 3 */	
}

input[type=text], textarea {
	cursor: text;
	-webkit-user-select: text;
	user-select: text; /* CSS 3 */	
}

/* @end */