@CHARSET "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
    color: #333;
    background-color: #eceeed;
    font-family: "Verdana", "Arial", sans-serif;
	font-size: 11px;
}

img {
    border: 0;
    vertical-align: middle;
}

img.floatLeft {
    float:left;
}
img.floatRight {
    float:right;
}   

#page {
    width: 800px;
    margin: 10px auto;
    text-align: left;
}

/* BEGIN header elements */

#header {
    background-image: url(/cp/img/MirthApplianceHeadr_800px.png);
    background-repeat: no-repeat;
    height: 80px;
    padding: 10px;
    background-color: #fff;
    border: solid #eee;
    border-width: 0 2px 0px 0;
}

#headerStatusBox {
    float: right;
    margin: -5px;
}

#headerStatusBox .statusBoxItem {
    text-align: center;
    background: #e0e2e1;
    font-size: 6pt;
    line-height: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

#headerBottomText {
	/* IE compat fix */
	/* use absolute positioning here instead of relative */
	position: absolute;
	top: 90px;
	width: 780px;
}

#headerBottomText #model {
    width: 30%;
    color: white;
    font-weight: bold;
}

#headerBottomText #applianceName {
    width: 50%;
    text-align: center;
    color: black;
    font-weight: bold;
}

#headerBottomText #logout {
    font-size: 8pt;
    width: 20%;
    text-align: right;
    color: black;
    text-decoration: none;
}

/* END header elements */


/* Hmenu menu bar */
#menuBar {
    font-size: 8pt;
    float: left;
    text-align: left;
    width: 100%;
    color: #888888;
    /*background: url(/cp/images/buttonbg.png) repeat-x;*/
	/*border: solid #eee;
    border-width: 0 2px 2px 0;*/
}


/* BEGIN content elements */

#content {
    background-color: #fff;
    border: solid #eee;
    border-width: 1px 2px 2px 0px; /* IE compat fix: for whatever reason, MUST have a top border of at least 1px */
}

#content #contentInside {
	padding: 0px 20px 20px 20px; /* want 0px top padding for IE6, override below */
   text-align: center;
}
/* IE compat fix */
/* use css child selector syntax to adjust padding for all browsers but IE6 */ 
#content > #contentInside {
    padding: 20px;
}

/* END content elements */


/* BEGIN various text elements */

h2 {
    margin: 0 0 5px 0;
    font-size: 150%;
}

h3 {
    margin: 0 0 5px 0;
    font-size: 130%;
}

.smalltext {
    font-size: 9px;
    color: black;
    display: inline;
}

.error {
    color: black;
    background-color: #ffbbbb;
    padding: 5px;
    /*text-align: left;*/
    /*width: 75%;*/
}

.warnings {
    color: black;
    background-color: #ffffbb;
    padding: 5px;
    width: 75%;
}

.info {
    color: black;
    background-color: #bbffbb;
    padding: 5px;
    width: 75%;
}

.red {
	color: #dd5050;
   font-weight: bold;
}

.green {
	color: #55aa55;
   font-weight: bold;
}

/* END various text elements */


/* BEGIN grey boxes */

.status {
    padding: 8px 10px 8px 10px;
    background-color: #f3f5f4;
}

.status-right {
    padding: 8px 10px 8px 10px;
    background-color: #f3f5f4;
    text-align: right;
}

.status-small {
    padding: 8px 10px 8px 10px;
    background-color: #f3f5f4;
    white-space: nowrap;
}

.status-small-right {
    padding: 5px 10px 5px 10px;
    background-color: #f3f5f4;
    text-align: right;
    white-space: nowrap;
}

/* END grey boxes */


/* BEGIN containers, lists, and forms */

.container {
	background-color: #f3f5f4;
    /*background-color: #FFF8F2;*/
	border: 1px solid #f0f0f0;
	padding: 0px 25px 10px 25px;
}

/* For IE6, we use the "tripswitch" workaround to
   make up for the lack of display: table support */
/* http://www.tanfa.co.uk/archives/show.asp?var=300 */
/* http://www.brunildo.org/test/InlineBlockLayout.html */

/* IE6 tripswitch workaround part 1 */
.container {
   display: inline-block;
}
/* IE6 tripswitch workaround part 2 */
.container {
	display: inline;
}
/* IE6 tripswitch workaround part 3, restore settings for all other browsers
   (IE6 doesn't support css child selectors and won't see this) */
* > .container {
	display: table;  /* this will make the container shrink to fit */
}


.infoContainer {  /* <div class="container infoContainer"> */
	background-color: #bbffbb;
	border: 1px solid #f0f0f0;
	margin-bottom: 10px;
}

.warningContainer {  /* <div class="container warningContainer"> */
	background-color: #ffffbb;
	border: 1px solid #f0f0f0;
   margin-bottom: 10px;
}

.errorContainer {  /* <div class="container errorContainer"> */
	background-color: #ffbbbb;
	border: 1px solid #f0f0f0;
   margin-bottom: 10px;
}

.container .heading {
    z-index:1;
	background-color: #e0e2e1;
    /*background-color: #FFD4B3;*/
    font-weight: bold;
	font-size: 120%;
	text-align: left;
	padding: 5px;
	/*margin: 0px -25px 10px -25px;*/ /* minus values should match the padding in .container */
    position: relative;
    left: -25px;
    margin-right: -50px;
    margin-bottom: 10px;
} 

.infoContainer .infoHeading {  /* <div class="heading infoHeading"> */
	background-color: #a8eca8;
	text-align: center;
}

.warningContainer .warningHeading {  /* <div class="heading warningHeading"> */
	background-color: #ececa8;
	text-align: center;
}

.errorContainer .errorHeading {  /* <div class="heading errorHeading"> */
	background-color: #eca8a8;
	text-align: center;
}

.container .subheading {
   text-align: left;
   padding: 5px;
   /*margin: -10px -25px 10px -25px;*/ /* minus values should match the padding in .container and .heading */
    position: relative;
    left: -25px;
    margin-right: -50px;
}

/* .list style should be used on a table <table class="list"> */
/* http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders */
.container .list {
	border-collapse: collapse;
	border-top: none;
    margin-left: auto;
    margin-right: auto;
}

.container th {
	padding-left: 5px;
	padding-right: 5px;
}

.container .list tr {
}

.container .list tr td {
   padding: 2px 5px 2px 5px;
   text-align: left;
   white-space: nowrap;
   border-top: solid 1px #e0e2e1;
   border-bottom: solid 1px #e0e2e1;
}

.container .list tr .buttonRow {
   text-align: center;
   border-bottom: none;
   /*column-span: all;  apparently too new */ 
}

/* .form style should be used on a table <table class="form"> */
.container .form {
    margin-left: auto;
    margin-right: auto;
}

.container .form tr {
}

.container .form tr td {
	padding: 2px 5px 2px 5px;
	text-align: left;
   white-space: nowrap;
}

.container .form .label {
	vertical-align: top;
	text-align: right;
}

.container .form tr .buttonRow {
	text-align: center;
	border-bottom: none;
	/*column-span: all;  apparently too new */ 
}

.container .heading .spinner {
   float: right;
   text-align: right; 
   display: none;
   padding-left: 25px;
}

.container .heading .ng-spinner {
    float: right;
    text-align: right;
    padding-left: 25px;
}

/* END containers, lists, and forms */


/* BEGIN hints */

.hint-container {
    z-index:2;
    float: left;
    width: 100%;
    position: relative;
}

.hint-container .hint {
    display: none;
    position: absolute;
    right: -185px;
    width: 150px;
    margin-top: -24px;
    border: 1px solid #c93;
    padding: 10px;
    background: #ffc url(/cp/images/pointer.gif) -100px -100px no-repeat;
    white-space: normal;
    font-size: 85%;
    text-align: left;
    font-weight: normal;
}

.hint-container .hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(/cp/images/pointer.gif) left top no-repeat;
}

.nohint {
}

/* END hints */


/* BEGIN footer elements */

#footer {
    clear: both;
    padding: 0 2px;
    color: #aaa;
    background-color: inherit;
    font-size: 80%;
    list-style: none;
    text-align: right;
}

#footer #footerCopyright {
    font-size: 12px;
    color: #36648B;
	float: left;
    text-align: left;
}

#footer #footerDate {
    font-size: 12px;
    color: #36648B;
	float: right;
    text-align: right;
}

/* END footer elements */

/* http://stackoverflow.com/questions/159914/css-javascript-use-div-to-grey-out-section-of-page */
.greyedOut {
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 100;
    background-repeat:no-repeat;
    background-position:center;
}

.terminalOutput {
    text-align: left;
    font-family: "Menlo", "Consolas", "Courier New", monospace;
    font-size: small;
    word-break: break-all;
    white-space: pre-wrap;
}

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