/* shared, used to unify browsers that support CSS correctly */
* {
	box-sizing: border-box;
}
body {
	width: 100%;
	height: 100%;
}


/* toolbar */
.toolBarBody {
	border: 0;
	margin: 0;
	
	background: buttonface;
}
.coolButton {
	font: menu;
	padding-left: 20px;
	padding-right: 20px;
}
.toolBarBody .separator {
	width: 2px;
	height: 22px;
	border-left: 1px solid buttonshadow;
	border-right: 1px solid buttonhighlight;
}
.toolBarBody td {
	text-align: center;
}
.toolBarBody img {
	width: 20px;
	height: 20px;
}


/* messageTree */
.messageTreeBody {
	margin: 0;
	cursor: default;
	border: 0;
	background: url( "images/treeback.gif" );
	border-bottom: 2px inset window;
}
.messageTreeBody input {
	width: 16px;
	height: 15px;
	padding: 0;
	position: relative;
	left: 0;
	top: -4px;
}
.treeView {
	font: menu;
	color: windowtext;
	overflow: visible;
	width: 550px;
	border: 0;
}
.treeView .item {
	width: 573px;
}
.treeView .icon {
	border: 0;
	margin: 0;
	width: 16px;
	height: 16px;
}
.treeView .plus {
	width: 18px;
	text-align: right;
	height: 16px;
}
.treeView .subject {
	overflow: hidden;
	width: 50px;
	height: 16px;
}
.treeView .name {
	overflow: hidden;
	width: 150px;
	height: 16px;
	padding-left: 5px;
	position: relative;
	top: 2px;
}
.treeView .date {
	overflow: hidden;
	width: 120px;
	height: 16px;
	padding-left: 5px;
	position: relative;
	top: 2px;
}
.treeView .item .item {
	display: none;
}
.treeView a {
	color: windowtext;
	text-decoration: none;
	font-weight: bold;
	cursor: hand;
}
.treeView a:visited {
	color: windowtext;
	text-decoration: none;
	font-weight: normal;
}
.treeView a:active {
	background: highlight;
	color: highlighttext;
}
.headerTable {
	background: buttonface;
	font: icon;
	width: 100%;
	color: buttontext;
	table-layout: fixed;
	background: threeddarkshadow;
	border-left: 1px solid threedshadow;
	border-right: 1px solid threedlightshadow;
	border-top: 1px solid threedshadow;
}
.headerTable TD {
	background: buttonface;
	padding-left: 5px;
	padding-right: 5px;
	border-top: 1px solid threedhighlight;
	border-left: 1px solid threedhighlight;
	border-right: 1px solid threedshadow;
	border-bottom: 1px solid threedshadow;
}
.headerTable #subjectHeader {
	width: 300px;
}
.headerTable #fromHeader {
	width: 150px;
}
.headerTable #sentHeader {
	width: 120px;
}
#scrollDiv {
	border-left: 1px solid threedshadow;
	border-right: 1px solid threedlightshadow;
	border-bottom: 0 inset window;
	overflow: auto;
	width: 100%;
	height: 93%;
}


/* blank.html */
.messageBody {
	border: 0;
	margin: 0;
	cursor: default;
	background: buttonface;
}
.dark {
	background: buttonshadow;
	color: white;
	font: icon;
	text-align: right;
	width: 70px;
	padding: 0;
	padding-right: 3px;
}
.bright {
	background: buttonface;
	color: windowtext;
	font: icon;
	text-align: left;
	padding: 0;
	padding-right: 3px;
	padding-left: 10px;
}
.bright a, .bright a:hover, .bright a:visited, .bright a:active {
	color: blue;
	text-decoration: underline;
}
#top {
	background: buttonface;
	overflow: hidden;
	width: 100%;
	height: 0;
	margin: 0;
	font-size: 1px;	/* I don't remember what this was needed for but I'll leave it in */
}
#middle {
	background: buttonface;
	overflow: hidden;
	width: 100%;
	height: 5px;
	margin: 0;
}
#contentArea {
	position: relative;
	top: 2px;
	width: 100%;
	border: 0 inset buttonface;
	height: 100%;
}


/* editMessage.html */
.editorBody {
	border: 0;
	margin: 0;
	cursor: default;
	background: buttonface;
}
#topToolBar {
	background: buttonface;
	width: 100%;
}
#headerTable {
	border: 1px solid black;
	width: 100%;
	background: window;
}
.dark {
	background: buttonshadow;
	color: white;
	font: icon;
	text-align: right;
	width: 70px;
	padding-right: 3px;
}
input {
	border: 1px solid window;
	font: icon;
	color: buttonshadow;
	cursor: hand;
	width: 100%;
}
.inputBlock {
	padding-left: 4px;
	padding-right: 4px;
	padding-bottom: 1px;
}
.toBlock {
	color: windowtext;
	font: icon;
	padding: 2px;
	padding-left: 4px;
	padding: right: 4px;
}
#middle {
	background: buttonface;
	overflow: hidden;
	width: 100%;
	height: 2px;
	margin: 0;
}
#visibleText {
	position: relative;
	top: -1px;
	width: 100%;
	border: 2px inset buttonface;
	height: 100%;
}
#editbar {
	font-weight: bold;
	border: 3px solid buttonface;
	width: 100%;
}
#editBar td {
	width: 22px;
	height: 22px;
	padding-top: 0;
	padding-bottom: 0;
}
#editbar img {
	width: 16px;
	height: 16px;
	margin-left: 2px;
	margin-right: 2px;
}
.richTextEditorBody {
	margin: 0pt;
	padding: 0pt;
	border: none;
}
#textEdit {
	width: 100%;
	height: 100%;
	border: none;
}
.editorBody select {
	font: icon;
	width: 80px;
}
#palette {
	position: absolute;
	display: none;
	margin-top: 11px;
	margin-left: 2px;
	height: 186px;
	width: 172px;
}
.editorBody .separator {
	width: 2px;
	height: 18px;
	border-left: 1px solid buttonshadow;
	border-right: 1px solid buttonhighlight;
}
.editorBody #switchDiv {
	font: icon;
	padding: 3px;
	padding-left: 5px;
}
.editorBody a {
	color: blue;
}

/* oeBar */

.oeBar {
	margin: 0;
	background: buttonshadow;
	color: window;
	overflow: hidden;
	font: menu;
	cursor: default;
	border-width: 2px;
	border-style: inset;
}
.scrollButton {
	position: absolute;
	height: 16px;
	width: 100%;
	overflow: hidden;
	font-family: webdings;
	font-size: 10px;
	text-align: center;
	background: buttonface;
	color: buttontext;
	display: none;
	cursor: default;
	border: 1px solid buttonface;
	z-index: 2px;
}
.oeBarButton {
	width: 100%;
	padding: 2px;
	text-align: center;
	border: 1px solid buttonshadow;
}
#oeBarContainer {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.arrow {
	font-family: webdings;
	color: black;
	padding: 0;
	font-size: 10px;
	height: 11px;
	width: 10px;
	overflow: hidden;
	margin-bottom: 2px;
	margin-top: -3px;
	padding: 0;
	padding-top: 0;
	padding-bottom: 2px;
}


.coolBar {
	background: buttonface;
	border-top: 1px solid buttonhighlight;
	border-left: 1px solid buttonhighlight;
	border-bottom: 1px solid buttonshadow;
	border-right: 1px solid buttonshadow;
	padding: 2px;
	font: menu;
}
.coolButton {
	border: 1px solid buttonface;
	padding: 1px;
	text-align: center;
	cursor: default;
}
.coolButton IMG {
	filter: gray();
}
