@charset  "utf-8";

HTML {
  font-size: 100%;
  font-family: Verdana,Arial,Helvetica,sans-serif;
}

/*to force IE to scale fonts gradually*/
BODY {
  margin: 0;
  padding: 0;
  font-size: 1em;
  width: 100%;
}

#skip a,#skip a:hover,#skip a:visited {
  position: absolute;
  left: 0;
  top: -500px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#skip a:active,#skip a:focus {
  position: static;
  width: auto;
  height: auto;
}

IMG {
  border: none;
}

img,div,a {
  behavior: url(/iepngfix.htc);
}

.img_align_bottom {
  vertical-align: bottom;
/*To do: can this be not a class but global?*/
}

H1,H2,H3,H4,H5,H6 {
  margin: 0;
  padding: 0;
}

H1,H2 {
  margin-top: 10px;
}

a {
  outline: none;
}

FORM {
  margin: 0;
  padding: 0;
  border: none;
}

p {
/* TODO: if this is not ever wrapped within a different font-family, it can be removed */
  font-family: Verdana,Arial,Helvetica,sans-serif !important;
}

.sub_text {
  font-size: 70%;
  position: relative;
  top: -.5em;
}

#testHistory H2 {
/* TODO: is it possible to standardize all H2s to one color?  See ticket 1439 */
  color: #31679F;
}

.remove4desktop {
  display: none;
}

.remove4mobile {
}

/* IE7 and below */
@media all and (max-device-width: 800px) {
.remove4mobile {
  display: none;
}

.remove4desktop {
  display: inline;
}
}

/* NOTE: mobile version of same-name classes should always go AFTER the desktop version, because IE6-8 is going to take the last one seen, and IE6-8 doesn't see the media query. */
/* TODO: see if float left, used in admin/resetCredentials, can be applied to all mobileNewlines */
.mobileNewline {
  display: inline;
}

@media (max-device-width: 800px) {
  .mobileNewline {
    clear: right !important;
    float: left !important;
    margin-left: 0 !important;
  }
  SELECT.minute, SELECT.hour, SELECT.day, SELECT.month{
    display: block;
  }
}

.rounded-corners,.submit_btn,.message_btn,.upload_btn,.sub_btn {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

.noborder {
  border-width: 0 !important;
}

@media (max-device-width: 800px) {
.wrapped_line_leading {
  line-height: 50%;
}
}

.bg_layer {
  background: url(../images/bg_gradient.gif?v=726) repeat-y center top;
  width: 100%;
}

@media (max-device-width: 800px) {
.bg_layer {
  background: url(../images/bg_gradient.gif?v=726) repeat-y center top;
  width: 100%;
  min-width: 320px;
}
}

.bg_image_layer {
  background: url(../images/bg_middle.jpg?v=726) no-repeat center top;
  min-height: 600px;
  width: 100%;
}

@media (max-device-width: 800px) {
.bg_image_layer {
  min-height: 356px;
  width: 100%;
}
}

.bg_header_layer {
/*TODO: delete
background:url(../images/bg_header_layer.gif?v=726) repeat-x  left top;*/
}

.main_wrap {
  width: 78%;
  margin: auto;
  padding: 10px 0 0;
  position: relative;
  min-height: 100%;
}

@media (max-device-width: 800px) {
.main_wrap {
  width: 92%;
  margin: auto;
  padding: 0;
  position: relative;
  min_height: 100%;
}
}

.header {
  margin-bottom: 15px;
  width: 100%;
}

@media (max-device-width: 800px) {
.header {
  margin-bottom: 15px;
  width: 100%;
}
}

.header_right {
  margin-right: 25px;
  float: right;
  padding: 0;
  width: 30%;
  text-align: right;
  font-size: 105%;
  color: #1A7EA1;
}

@media (max-device-width: 800px) {
.header_right {
  margin: auto;
  margin-top: 0;
  margin-right: 12px;
  width: 100%;
  float: left;
  padding: 0;
  text-align: center;
}
}

* HTML .header_right {
  margin-right: 12px;
}

.header_right A {
  color: #1A7EA1;
  text-decoration: none;
}

.header_right SPAN {
  font-size: 80%;
  color: #ADAEAE;
}

H1 {
  font-family: "Palatino Linotype","Times New Roman";
  font-size: 120%;
  color: #068CAF;
  text-transform: uppercase;
  font-weight: 400;
}

.pKBLogo {
/* this is used in both an image and a div.  It won't validate for both, so if that's important, separate into two classes */
  width: 402px;
  height: 67px;
  margin: 0;
  padding: 0;
  float: left;
}

.institutionLogo {
  margin: 0;
  padding: 0;
  float: left;
}

.logo,.logoImg {
  max-width: 463px;
  width: 100%;
  margin: 0;
  padding: 2% 0 3%;
}

.logoImg {
  padding: 0;
}

.logo img {
  width: 100%;
}

@media (max-device-width: 800px) {
.pKBLogo {
  width: 265px;
  height: 44px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.institutionLogo {
  margin: 0;
  position: absolute;
  left: 256px + 1em;
  bottom: 0;
}

.logo,.logoImg {
  width: 264px;
  height: 86px;
  margin: 0 0 5px;
}

.logoImg {
  padding: 5px 20px 20px 5px;
}
}

/* TODO: deprecated, but see note in aboveHeaderLogo */
/*.logo_form
{
  width: 402px;
  height: 67px;
  margin: 0px;
  float: left;
}
@media (max-device-width: 800px) {
.logo_form {
  width:100%;
  margin:0px;
  float:left;
}}
*/
.contents_wrap {
}

@media (max-device-width: 800px) {
.contents_wrap {
/*TODO: can you take out width? */
  width: 90%;
  padding: 0;
}
}

.contents_wrap_form {
/*TODO: rename to something meaningful, remove overlap with other classes.*/
  width: 98%;
  padding: 20px 0 10px;
  margin: 0;
}

@media (max-device-width: 800px) {
.contents_wrap_form {
  width: 98%;
  padding: 20px 10px 10px 0;
  margin: 0;
}
}

.contents_wrap H2,.contents_wrap_form H2 {
  font-family: "Palatino Linotype","Times New Roman";
  font-size: 110%;
  color: #068CAF;
  font-weight: 400;
}

.contents_wrap P,.contents_wrap_form P {
  font-size: 80%;
  background: transparent;
/*color: #7A7B7C; */
  padding: 5px 20px 10px 0;
/* TODO remove this as part of ticket "remove removal of <p> padding */
}

.contents_wrap A,.contents_wrap_form A {
  color: #1D4852;
}

.contents_wrap A:hover,.contents_wrap_form A:hover {
  text-decoration: none;
}

.nowrap {
  white-space: nowrap;
}

.footer {
  background: url(../images/bg_footer_btm.gif?v=726) no-repeat center top;
  height: 130px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.footer_wrap {
  width: 450px;
  text-align: center;
  margin: auto;
  padding-top: 60px;
  font-family: tahoma,Arial,Helvetica,sans-serif;
  font-size: 70%;
  color: #123C4C;
}

@media (max-device-width: 800px) {
.footer {
  background: url(../images/bg_footer_btm.gif?v=726) no-repeat center top;
  height: 30px;
  width: 100%;
  margin: 0;
  padding: 0;
  min-width: 320px;
}

.footer_wrap {
  width: 320px;
  text-align: center;
  margin: auto;
  padding-top: 60px;
  font-size: 70%;
  color: #123c4c;
}
}

.form_container {
  margin: 0;
  padding: 0 10px;
  width: 96%;
  margin-top: 10px;
}

.list_row_bold,.list_row
/* TODO: only used in one place,look at substituting something else there */ {
  clear: both;
  margin: 0;
  padding: 3px 0;
  height: 28px;
}

#discussionCenterInbox TR.list_row_bold TD {
  font-weight: 700;
}

.nowrap TD {
  white-space: nowrap;
}

.form_row_noheight
/* TODO: this doesn't do much, see if it can be removed */\A\A{\A    clear: both;\A    margin: 0px;\A    padding: 1px 0px;\A    width: 100%;\A}\A.wide_spaced {\A    padding-top: 25px;\A}\A.wide_spaced_instruction {\A    padding-top: 25px;\A    text-align: center;\A    /* TODO: needed? */\A    \A    width: 95%;\A}\A.form_label,\A.form_label_left {\A    text-transform: uppercase;\A    padding-right: 5px;\A    color: #636363;\A    font-size: 70%;\A    text-align: right;\A    width: 10%;\A}\A.form_label_left {\A    text-align: left !important;\A}\A.form_label_15,\A.form_column_25 {\A    display: block;\A    float: left;\A}\A.form_label_15 {\A    width: 15%;\A    font-size: 70%;\A    text-transform: uppercase;\A    padding: 5px 0px;\A    color: #636363;\A}\A.form_column_25 {\A    width: 25%;\A    font-size: 70%;\A    padding-top: 0px;\A    padding-left: 5px;\A}\A@media (max-device-width: 800px) {\A    .form_column_25 {\A        padding-top: 5px;\A    }\A}\A.form_element_with_description {} .form_input\A/* TODO: this class still needed? */\A\A{\A    float: left;\A    border: 1px solid #068CAF;\A}\A.checkbox {\A    margin-bottom: 0px !important;\A    padding-bottom: 0px !important;\A    margin-right: 5px;\A}\A@media (max-device-width: 800px) {\A    .checkbox {};\A}\A/* TODO: integrate with separate rule below */\A\ATABLE INPUT,\ATABLE SELECT {\A    float: left;\A    /*TODO: review: was showing up on checkboxes in IE6, schedule tab for clinicians */\A    /*border: 1px solid #068caf;*/\A    \A    ;\A}\ATABLE textarea\A/* TODO review: mobile didn't apply this to textarea */ {
/*TODO: review; this was breaking schedule tab for clinicians */
/*width:94%; of table cell. leave room for border*/
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 3%;
  padding-right: 3%;
}

TABLE SELECT {
/* width: 100%; */
  *zoom: 1;
/* makes dropdown wide enough in IE7 and below by fixing the hasLayout bug */
  width: auto;
}

.form_table {
  margin-top: 10px;
  width: 100%;
}

TABLE.form_table TD {
  vertical-align: top;
}

TABLE.form_table DIV.error {
  margin-bottom: 5px;
/* TODO: move this to TD, not error, and remove placeholding empty error div in both manageProfile.JSPs */
  clear: left;
}

TABLE#login {
  width: 30%;
  margin-left: 43%;
}

@media (max-device-width: 800px) {
table#login {
  width: 80%;
  margin-left: 10%;
}
}

TABLE#addCommonTestResultsInnerTable INPUT {
  border: 1px solid #B5C8DC;
  background: #B5C8DC;
  margin-bottom: 5px;
  padding: 3px 0;
/* override the global setting */
}

/* TODO: how much of this can be folded into list_table? */
TABLE#managePlans {
  margin-top: 5px;
  background-color: #fff;
}

TABLE.editPlan,TABLE#editPersonalHealthPlanTemplate {
  margin-top: 20px;
  width: 100%;
}

TABLE#discussionCenterInbox TD {
  padding: 10px;
  vertical-align: top;
}

TABLE#patientPersonalInfo H2 {
  padding-top: 20px;
}

TABLE#patientPersonalInfo td.form_label {
  text-align: left !important;
  font-weight: 700;
}

/* TODO: are these two equivalent? */
TABLE#patientPersonalInfo input.name {
  width: 90%;
}

/* TODO: why doesn't  text-align:left; work for all tds in a table, which would fix this? */
TABLE#clinicianRegistration TD.form_label,TABLE#patientInvitation TD.form_label,TABLE#createPatient TD.form_label {
  width: 25%;
  text-align: left;
}

TABLE#patientInvitation {
  width: 80%;
}

TABLE#composeMedicationPart2 {
  margin-bottom: 40px;
}

TABLE#manageProfile {
  width: 60%;
}

TABLE#create_phplan, {
  width: 60%;
}

@media (max-device-width: 800px) {
TABLE#create_phplan {
  margin-top: 10px;
}
}

TABLE#invite_clinician {
  width: 60%;
  margin-top: 20px;
}

@media (max-device-width: 800px) {
TABLE#invite_clinician {
  width: 90%;
/* TODO: can this be the same as create_phplan? */
  margin-top: 20px;
}
}

/* TODO: needed for both table and td? */
/* TODO: make a global class, not ids */
TABLE#patients,TABLE#colleagues,TABLE#patientTeam {
  vertical-align: text-top;
}

TABLE#patients TD,TABLE#colleagues TD,TABLE#patientTeam TD {
  vertical-align: text-top;
}

TABLE#startCallPatientList TD#patient_list,TABLE#composeMedication TD#patient_list {
/* TODO: rename patient_list to person_list */
  vertical-align: text-top;
}

TABLE#myDiagnoses {
  width: 95%;
}

TABLE#myFiles {
  width: 95%;
}

TABLE#patientTeam {
  width: 100%;
/* just gives old IE 'hasLayout' status */
}

SELECT#securityQuestion {
  *zoom: 1;
/* makes dropdown wide enough in IE7 and below by fixing the hasLayout bug */
  width: auto;
}

@media (max-device-width: 800px) {
.securityAnswer {
  width: 30%;
/* on mobile, tends to be as wide as the dropdown above.  Too wide. */
}
}

TD.radio {
  padding: 0;
}

.radio INPUT {
  width: 13px !important;
  float: left;
  padding: 0 !important;
  border-style: none;
}

.radio LABEL {
  float: left;
  display: block;
  font-size: 70%;
  text-transform: uppercase;
  padding: 7px 10px 0 0 !important;
  *padding: 0 10px 0 5px !important;
  color: #636363;
}

SELECT.salutation {
  width: 80px;
}

SELECT.allergySelect {
  width: auto;
  margin-left: 10px;
}

@media (max-device-width: 800px) {
SELECT.allergySelect {
  width: 75px;
}
}

*+html SELECT.doseUnits {
  height: 40px !important;
}

/* IE7 only */
SELECT.doseUnits {
  width: 60px !important;
}

@media (max-device-width: 800px) {
SELECT.doseUnits {
  width: 45px !important;
}
}

.measurement_units {
  padding-left: 5px;
  padding-right: 0;
}

SELECT.minute,SELECT.hour,SELECT.day,SELECT.month {
  margin-right: 2%;
  float: left;
}

SELECT.minute {
  width: 12%;
}

SELECT.hour {
  width: 12%;
}

SELECT.day {
  width: 27%;
}

SELECT.month {
  width: 30%;
}

INPUT.year {
  width: 25%;
  border:1px solid #ccc;
  height:20px;
}

.calendar_icon {
  width: 21px;
  height: 20px;
  border: none;
}

.tiniest_icon {
  width: 11px;
  height: 11px;
  border: none;
}

.quantity_field {
  float: left;
  width: 25%;
  font-size: 100%;
}

.icon_decorated_row {
/* NOTE: y-axis of background must be coordinated with span and H2 padding */
  background: url(../images/bg_blue_circle.png?v=726) no-repeat 0 21px;
  padding: 26px 0 10px;
  font-family: "Palatino Linotype","Times New Roman";
  clear: both;
}

div.icon_decorated_row {
/* for when it is not used in a table */
  margin-top: 20px;
}

div.icon_decorated_row.button_row {
/* emulate the height, but without icon */
  background: transparent;
  font-family: inherit;
/* won't work on IE6, but whatever */
}

.icon_decorated_row SPAN {
  font-size: 20px;
  color: #FFF;
  padding: 26px 15px 5px 10px;
  display: inline;
  width: auto;
  line-height: 1em;
}

.icon_decorated_row H2 {
  font-size: 100%;
  color: #115068;
  margin: 0;
  padding: 21px 0 0;
  text-transform: uppercase;
  font-weight: 400;
  display: inline;
  width: auto;
}

/* TODO: rename to just width60 */
.input_for_icon_decorated_form {
/* TODO: check where this overlaps with regular table inputs */
  width: 60%;
}

/* TODO: list_text is a bad name.  It's actually used in selects. */
.list_text,.security_question,.id_type_select {
  border: 1px solid #068CAF;
  float: left;
}

@media (max-device-width: 800px) {
.list_text,.security_question,.id_type_select {
  margin-left: 20px;
/* TODO : why this? does not appear in desktop. */
}
}

.id_type_select {
/* needed for IE6, which doesn't expand wide select options out to read full width when clicked. */
/* modern browsers do this intelligently.  IE6 just expands to full width at initial screen display. */
  width: auto;
}

@media (max-device-width: 800px) {
.id_type_select {
  width: 100%;
}
}

.security_question {
  width: 72%;
}

.font_80 {
  font-size: 80%;
}

.left_space {
  margin-left: 30px;
}

.form_textarea {
  border: 1px solid #068CAF;
  font-size: 80%;
}

.message_container
/* this doesn't do much.  get rid of it. */\A\A{\A    padding: 0px 0px;\A    width: 98%;\A    margin-top: 10px;\A}\A/* TODO resolve the confusion between message_container TABLE and messages_table */\A\A.messages_table {\A    font-size: 1em !important;\A    border: none !important;\A    color: #656565;\A}\A@media (max-device-width: 800px) {\A    .messages_table {\A        margin: 10px 0px 0px 0px;\A    }\A    ;\A}\A.messages_table P {\A    padding-bottom: 5px;\A    line-height: 1.4em;\A}\A.messages_table A {\A    text-decoration: none;\A}\A.messages_table TH {\A    font-size: 1.2em !important;\A}\A.list_table {\A    margin: 30px 0px 0px;\A    border: 1px solid #123C4C;\A    border-collapse: collapse;\A}\A.schedule_wrap .list_table {\A    margin: 0px;\A}\A.list_table TH {\A    font-size: 1em;\A    color: #31679F;\A    vertical-align: top;\A    text-align: left;\A    text-transform: uppercase;\A    padding: 8px 5px;\A    background: #E9F0F7;\A    font-weight: bold !important;\A    white-space: nowrap;\A}\A@media (max-device-width: 800px) {\A    .list_table th {\A        white-space: normal;\A    }\A    ;\A}\A.list_table TH A {\A    color: #FFF;\A    text-decoration: none;\A}\A.list_table TD {\A    font-size: 75%;\A    color: #123C4C;\A    vertical-align: top;\A    text-align: left;\A    padding: 6px 5px;\A    font-weight: normal;\A}\A.list_table th img {\A    vertical-align: middle;\A}\A/* stats table  */\A\Atable.list_table td.green {\A    background: #018022;\A}\Atable.list_table td.amber {\A    background: #E06807;\A}\Atable.list_table td.red {\A    background: #811200;\A    color: white;\A}\A.message_container CAPTION {\A    font-size: 80%;\A    text-align: left;\A    padding-bottom: 5px;\A}\A.pagination {\A    float: right;\A    width: auto;\A    font-size: 80%;\A    padding: 10px 0px 0px;\A}\A#managePlans input.submit_btn {\A    margin: 0px;\A}\A.contents_form {\A    width: 100%;\A    clear: both;\A    padding: 10px 0px;\A}\A.left_float {\A    float: left !important;\A}\A.center_align {\A    text-align: center;\A}\A.black_font A {\A    color: #000000;\A}\A.black_font A:hover {\A    color: #FFFFFF;\A    text-decoration: none;\A}\A/*Main Navigation*/\A/* TODO: for mobile only (it doesn't need to support IE6),make main navigation use CSS3 rounded corners. Involves setting background colors for active,span,etc. */
.main_navigation {
  min-height: 50px;
  background: #1A7EA1;
  border-bottom: 5px solid #87AEC9;
}

@media (max-device-width: 800px) {
.main_navigation {
  background: #1A7EA1;
  border-bottom: #87AEC9 solid 5px;
}
}

.main_navigation UL.left_side {
  margin: 0 0 0 -6px;
/* match left margin to padding on hover & active */
  padding: 0;
  float: left;
  width: 73%;
}

.main_navigation UL.left_side LI {
  color: #FFF;
  font-size: 110%;
  list-style: none;
  display: inline;
  margin: 0;
  *margin-left: 6px;
/* prevents cropping of left side of hover/active highlighting in IE6 */
  line-height: 2em;
}

.main_navigation UL.left_side LI A {
  color: #FFF;
  text-decoration: none;
  padding: 4px 9px 4px 8px;
  white-space: nowrap;
/*do NOT put nowrap line in parent li.  breaks IE6&7*/
  *white-space: normal;
}

@media (max-device-width: 800px) {
.main_navigation UL.left_side LI A {
  padding: 4px 10px 4px 0;
}
}

.main_navigation UL.left_side LI A:hover {
  background: url(../images/tab_nav_left_hover.gif?v=726) no-repeat top left;
  line-height: 1.8em;
  padding: 4px 0 4px 6px;
  *padding: 0 0 0 6px;
/*IE7 and below*/
  margin: 0;
}

.main_navigation UL.left_side LI A:hover SPAN {
  background: url(../images/tab_nav_right_hover.gif?v=726) no-repeat top right;
  line-height: 1.8em;
  padding: 4px 10px 4px 2px;
  margin: 0;
}

/* iPhones don't hover */
@media (max-device-width: 800px) {
.main_navigation UL.left_side LI A:hover {
  background: none;
}

.main_navigation UL.left_side LI A:hover SPAN {
  background: none;
}
}

.main_navigation UL.left_side LI.active A {
  background: url(../images/tab_nav_left.gif?v=726) no-repeat top left;
  line-height: 1.8em;
  padding: 4px 0 4px 6px;
  *padding: 0 0 0 6px;
/*IE7 and below*/
}

@media (max-device-width: 800px) {
.main_navigation ul.left_side li.active a {
  background: #5C97B5;
  padding: 4px;
}
}

.main_navigation UL.left_side LI.active A SPAN {
  background: url(../images/tab_nav_right.gif?v=726) no-repeat top right;
  line-height: 1.8em;
  padding: 4px 10px 4px 2px;
}

@media (max-device-width: 800px) {
.main_navigation UL.left_side LI.active A SPAN {
  background: none;
  padding: 0;
}
}

/* css for myaccount*/
.main_navigation ul.left_side1 {
  margin: 0;
  padding: 0;
  width: 27%;
  float: right;
}

@media (max-device-width: 800px) {
.main_navigation ul.left_side1 {
  margin: 0 0 0 -8px;
  padding: 0;
  width: 27%;
  float: right;
}
}

/* TODO: can these two be combined? */
.main_navigation UL.left_side1 LI {
  margin: 0 5px;
  list-style: none;
  display: inline;
  line-height: 2em;
}

@media (max-device-width: 800px) {
.main_navigation ul.left_side1 li {
  float: left;
  margin: 0;
  list-style: none;
  display: inline;
  line-height: 2em;
}
}

.main_navigation UL.left_side1 LI A {
  color: #FFF;
  text-decoration: none;
  font-size: 90%;
  padding: 6px 10px 10px 8px;
  white-space: nowrap;
/*do NOT put in parent li.  breaks IE6&7*/
}

@media (max-device-width: 800px) {
.main_navigation ul.left_side1 li a {
  color: #fff;
  text-decoration: none;
  font-size: 90%;
  padding: 4px 8px;
  white-space: nowrap;
/* do NOT put in parent li.  breaks IE6&7 */
}
}

.main_navigation UL.left_side1 LI A:hover {
  background: url(../images/tab_nav_left_hover.gif?v=726) no-repeat top left;
  line-height: 1.8em;
  padding: 6px 0 10px 6px;
  *padding: 0 0 0 6px;
/*IE7 and below*/
  margin: 0;
}

.main_navigation UL.left_side1 LI A:hover SPAN {
  background: url(../images/tab_nav_right_hover.gif?v=726) no-repeat top right;
  line-height: 1.8em;
  padding: 6px 10px 10px 2px;
  margin: 0;
}

@media (max-device-width: 800px) {
/* iPHones do not hover */
.main_navigation UL.left_side1 LI A:hover {
}

.main_navigation UL.left_side1 LI A:hover SPAN {
}
}

.main_navigation UL.left_side1 LI.active A {
  background: url(../images/tab_nav_left.gif?v=726) no-repeat top left;
  line-height: 1.8em;
  padding: 6px 0 10px 6px;
  *padding: 0 0 0 6px;
/*IE7 and below*/
}

@media (max-device-width: 800px) {
.main_navigation ul.left_side1 li.active a {
  background: #5C97B5;
  line-height: 1.8em;
}
}

.main_navigation UL.left_side1 LI.active A SPAN {
  background: url(../images/tab_nav_right.gif?v=726) no-repeat top right;
  line-height: 1.8em;
  padding: 6px 10px 10px 2px;
}

@media (max-device-width: 800px) {
.main_navigation UL.left_side1 LI.active A SPAN {
}
}

.main_navigation UL.right_side {
  padding-top: 7px;
  float: right;
  width: auto;
  margin: 0;
}

@media (max-device-width: 800px) {
/* TODO: maybe this can apply to desktop, too */
.main_navigation ul.right_side {
  width: 20%;
}
}

.main_navigation UL.right_side LI {
  list-style: none;
  display: inline;
  float: left;
  display: block;
  margin: 0 0 0 20px;
}

.main_navigation UL.right_side LI A {
  color: #FFF;
  text-decoration: none;
  font-size: 90%;
}

* HTML .main_navigation UL.right_side {
  width: 20%;
}

/*Sub Navigation*/
.sub_navigation {
  background: #B5C8DC;
  margin: 0 0 10px;
  clear: both;
  display: block;
  min-height: 39px;
  width: 100%;
  position: relative;
/*TODO: needed?*/
}

* HTML .sub_navigation {
  margin: 0 0 1px;
}

@media (max-device-width: 800px) {
.sub_navigation {
  margin: 0;
}
}

.sub_navigation UL.left_side {
  margin: 0 0 0 -6px;
/* match left margin to padding on hover & active */
  padding: 0;
  float: left;
  width: 50%;
}

@media (max-device-width: 800px) {
.sub_navigation ul.left_side {
  padding: 2px 0 0;
  width: 100%;
}
}

.sub_navigation UL.left_side LI {
  color: #115068;
  list-style: none;
  display: inline;
  margin: 0;
  *margin-left: 6px;
/* prevents cropping of left side of hover/active highlighting in IE6 */
  line-height: 1.8em;
  font-size: 80%;
  font-weight: 700;
  white-space: nowrap;
}

.sub_navigation UL.left_side LI A {
  color: #115068;
  text-decoration: none;
  padding: 4px 10px 4px 8px;
}

@media (max-device-width: 800px) {
.sub_navigation ul.left_side li a {
  padding: 4px;
}
}

.sub_nav_tab {
  float: left;
  margin-right: 10px;
}

.sub_navigation UL.left_side LI.active A {
  background: url(../images/sub_tab_nav_left.gif?v=726) no-repeat top left;
  line-height: 1.8em;
  padding: 4px 0 4px 6px;
  *padding: 0 0 0 6px;
}

@media (max-device-width: 800px) {
.sub_navigation ul.left_side li.active a {
  background: #5C97B5;
  color: #fff;
  padding: 4px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
}

.sub_navigation UL.left_side LI.active A SPAN {
  background: url(../images/sub_tab_nav_right.gif?v=726) no-repeat top right;
  line-height: 1.8em;
  padding: 4px 10px 4px 2px;
  color: #FFF;
}

.sub_navigation UL.left_side LI A:hover {
  background: url(../images/sub_tab_nav_left_hover.gif?v=726) no-repeat top left;
  line-height: 1.8em;
  padding: 4px 0 4px 6px;
  *padding: 0 0 0 6px;
}

.sub_navigation UL.left_side LI A:hover SPAN {
  background: url(../images/sub_tab_nav_right_hover.gif?v=726) no-repeat top right;
  line-height: 1.8em;
  padding: 4px 10px 4px 2px;
  color: #FFF;
}

@media (max-device-width: 800px) {
.sub_navigation UL.left_side LI.active A SPAN {
  background: #5C97B5;
  padding: 0;
}

.sub_navigation UL.left_side LI A:hover {
  background: #5C97B5;
}

.sub_navigation UL.left_side LI A:hover SPAN {
  background: #5C97B5;
}
}

.sub_navigation UL.right_side {
  padding: 0 10px 5px 0;
  margin: 0;
  float: right;
  width: auto;
}

* HTML .sub_navigation UL.right_side {
  margin-right: 10px;
}

.sub_navigation UL.right_side LI {
  list-style: none;
  display: inline;
  margin: 0;
  color: #115068;
  font-size: 80%;
}

.sub_navigation UL.right_side LI A {
  text-decoration: none;
}

.sub_navigation UL.right_side LI.option-1 A,LI.option-2 A,LI.option-3 A {
  background: #99B1CA;
  color: #FFF;
}

.sub_navigation UL.right_side LI.option-1 A {
  padding: 7px 7px 1px;
  font-size: 11px;
}

.sub_navigation UL.right_side LI.option-2 A {
  padding: 5px 6px 1px 7px;
  font-size: 14px;
}

.sub_navigation UL.right_side LI.option-3 A {
  padding: 3px 5px 1px 6px;
  font-size: 16px;
  margin-right: 20px;
}

.sub_navigation UL.right_side LI.option-1 A.active,LI.option-2 A.active,LI.option-3 A.active {
  background: #5C97B5;
}

.sub_navigation UL.right_side LI.light A {
  background: #D0E6F5;
  padding: 4px 4px 2px;
  *padding: 4px;
}

.sub_navigation UL.right_side LI.medium A {
  background: #87AEC9;
  padding: 4px 4px 2px;
  *padding: 4px;
}

.sub_navigation UL.right_side LI.dark A {
  background: #5C97B5;
  padding: 4px 4px 2px;
  *padding: 4px;
}

@media (max-device-width: 800px) {
.sub_navigation ul.right_side {
  display: none;
}
}

/*Tab Navigation*/
.tab_navigation {
  width: 100%;
  margin: 9px 0 0;
  font-family: "Palatino Linotype","Times New Roman";
}

.tab_navigation UL {
  margin: 0;
  padding: 0;
}

.tab_navigation UL LI {
  display: inline;
  list-style: none;
  float: left;
}

.tab_navigation UL LI A {
  background: #FFF;
  padding: 5px 5px 5px 11px;
  color: #1A7EA1;
  text-decoration: none;
  font-size: 100%;
  text-transform: uppercase;
  line-height: 2em;
  cursor: pointer;
}

.tab_navigation UL LI A:hover {
  background-color: #D2E1EE;
  padding: 5px 5px 5px 11px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

.page_center_justify {
  margin-left: 40%;
  margin-top: 10px;
}

@media (max-device-width: 800px) {
.page_center_justify {
  margin-left: 0;
}
}

/* TODO: is health_wrap in place on all health screens? */
/* TODO: is monitoring_wrap in place, & etc. for all JSPs of main tabs? */
/* TODO: re-evaluate: maybe individual wraps aren't needed, they're all the same so far */
.health_wrap,.admin_wrap,.tests_wrap,.files_wrap,.diary_wrap,.treatments_wrap,.medications_wrap,.schedule_wrap,.summary_wrap {
/*TODO: REVIEW: change made for IE6 display of the clinician's team tab.  width was 75%*/
  width: 72%;
  padding-top: 10px;
  padding-left: 0;
  margin: 0;
  background: #FFF;
}

@media (max-device-width: 800px) {
.health_wrap,.admin_wrap,.tests_wrap,.files_wrap,.diary_wrap,.treatments_wrap,.medications_wrap,.schedule_wrap,.discussions_wrap,.summary_wrap {
  width: 100%;
}
}

.diary_wrap#composeDiaryEntry {
  width: 100%;
/* make room for SenseMaker triangles -- obsolete */
}

/* TODO: must be a better way. set a right margin for inner content wrap greater than 2-line button width? */
@media (max-device-width: 800px) {
/*make room for 2-line buttons to exist side by side */
.medications_wrap#composeMedication,.medications_wrap#referMedication,.medications_wrap#referMedicationBack,.contents_wrap_form#revokeAccessConfirm,/* still not room for this one */
.tests_wrap.addCommonTestResults,.tests_wrap#selectCommonTest,.contents_wrap_form#deleteResultsConfirm,/* still not room for this one */
.contents_wrap_form#deleteFilesConfirm,/* still not room for this one */
.contents_wrap_form#confirmDeleteDiagnoses,/* still not room for this one */
.health_wrap#confirmDeleteAllergies,/* still not room for this one */
.contents_wrap_form#deleteDiaryEntriesConfirm,/* still not room for this one */
.contents_wrap_form#deleteRegistrantAreYouSure
/* still not room for this one */ {
  width: 100% !important;
}
}

.discussions_wrap#discussionCenterInbox,.team_wrap#myPatients,.team_wrap#patients,.team_wrap#cliniciansSubtab {
/* make room for two-line buttons in the right column */
  margin-right: 220px !important;
}

.discussions_wrap#discussionCenter,.treatments_wrap#editPlan,.treatments_wrap#viewPlan,.summary_wrap
/* TODO gradually move the other wraps here as you are sure it looks ok.
Watch out for 2-line buttons in the right column. */ {
  width: 100% !important;
}

/* TODO: the following does nothing, inherits 100% width */
@media (max-device-width: 800px) {
/* since no 2-line buttons in right column, no need to adjust */
.discussions_wrap#discussionCenterInbox,.team_wrap#patients {
}

.discussions_wrap#discussionCenter,.treatments_wrap#editPlan,.treatments_wrap#viewPlan {
}
}

.medications_wrap {
/* TODO: it may be that all the similar wraps can get this */
  margin-top: 20px;
}

.content_header {
  margin: 0;
  padding: 20px 0 30px;
}

.content_header H1 {
  font-size: 140%;
  color: #115068;
  padding: 0;
  margin: 0 10px 0 0;
}

.msg_text {
  width: 87%;
  background: #FFF;
  float: left;
  padding-bottom: 10px;
}

.msg_text TEXTAREA {
  width: 96%;
  height: 100px;
  margin-bottom: 10px;
  color: #000;
  padding: 10px;
  font-size: 90%;
}

.submit_btn,.message_btn,.upload_btn,.sub_btn {
  background: #E9F0F7;
  border: 1px solid #31679F;
  font-size: 16px;
  color: #31679F;
  padding: 2px 10px !important;
  margin: 10px 5px;
  width: auto;
  overflow: visible;
  cursor: pointer;
}

.submit_btn:hover,.message_btn:hover,.upload_btn:hover,.sub_btn:hover {
  background: #D7E9F9;
}

.message_btn {
  font-size: 120%;
}

/* TODO: this has got to be wrong */
.upload_btn {
  margin: 0 10px;
}

@media (max-device-width: 800px) {
.upload_btn {
  margin: 10px 0;
}
}

.sub_btn {
  float: left;
  padding: 5px 20px;
  margin: 0 0 0 20px;
  height: 120px;
}

TD.author {
  width: 1%;
  vertical-align: top;
}

TD.arrow {
  width: 1%;
  vertical-align: top;
}

TD.yellow_bg {
  background: #FCFDE8;
}

TD.message {
  margin: 0;
  padding: 10px;
  vertical-align: top;
  width: 70%;
}

TD.message H1
/* TODO this duplicates msg_message h1 */ {
  font-size: 120%;
}

TD.message H2,H3,H4,H5,p
/* TODO this duplicates msg_message h1 */ {
  font-size: 100%;
}

.msg_photo {
  width: 119px;
  height: 111px;
  margin: 0;
  padding: 0;
}

.msg_photo IMG {
  padding: 4px;
  border: 0 solid #B2C6D9;
}

.msg_photo SPAN {
  display: block;
  color: #656565;
  font-size: 80%;
  padding-top: 10px;
}

.msg_title {
  color: #656565;
  font-size: 100%;
  padding-top: 20px;
}

.msg_title_small {
  color: #656565;
  font-size: 75%;
}

.msg_message {
  float: left;
  width: 83%;
  margin: 0;
  padding: 10px;
  background: #FCFDE8;
}

@media (max-device-width: 800px) {
.msg_message {
  float: left;
  width: 50%;
  margin: 0 0 0 82px;
  padding: 10px;
  background: #fcfde8;
}
}

.msg_message P {
  font-size: 75%;
  color: #000;
  padding-bottom: 5px;
}

.msg_message_date {
  margin: 30px 0 0;
  border-top: 1px dotted #626261;
  padding: 10px 0 0;
}

.msg_message_date_left {
  float: left;
  width: auto;
  font-size: 100%;
}

.msg_message_date_left P {
  font-size: 80%;
  font-style: italic;
  color: #ADAEAE;
  padding-top: 5px;
}

.file_download {
  width: auto;
  font-size: 80%;
  text-transform: uppercase;
  padding: 8px 60px 8px 5px;
  position: relative;
}

.file_download A {
  color: #000;
  text-decoration: none;
}

/* TODO: maybe these two can be merged */
.file_download IMG {
  vertical-align: middle;
  border: 1px solid #D3D3D3;
}

@media (max-device-width: 800px) {
.file_download img {
  vertical-align: middle;
  border: 1px solid #d3d3d3;
}
}

.file_download SPAN {
  color: #FFF;
  padding-left: 10px;
}

.file_type {
  position: absolute;
  width: auto;
  height: auto;
  top: -5px;
  right: 10px;
}

.msg_white_con {
  margin: 20px 0 0;
  padding: 0;
  position: relative;
  width: 100%;
}

/* TODO: maybe these two can be merged */
.msg_white_con_img {
  float: right;
  margin-left: 10px;
}

@media (max-device-width: 800px) {
.msg_white_con_img {
  float: right;
  width: 12%;
  margin-left: 10px;
}
}

table.row_spacer {
  margin-top: 20px;
}

@media (max-device-width: 800px) {
table.row_spacer {
  margin-top: 0;
}
}

table#discussionCenter {
  width: 100%;
}

.msg_message_white {
  background: #FFF;
}

.msg_message_white P {
  font-size: 75%;
  padding: 20px 10px 5px;
}

/* TODO: this class may be able to be removed, it only occurs in one JSP */
.msg_message_white_arrow {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  right: 119px;
  z-index: 100;
}

@media (max-device-width: 800px) {
.msg_message_white_arrow {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  right: 75px;
  z-index: 100;
}
}

.msg_btm_links {
  margin: 0;
  padding-top: 10px;
  font-size: 90%;
  text-transform: uppercase;
}

.msg_btm_links A {
  color: #000;
  text-decoration: none;
}

.msg_btm_links A:hover {
  text-decoration: underline;
}

.msg_btm_links_left {
  border-bottom: 1px dotted #626261;
  float: left;
  width: auto;
}

.msg_btm_links_right {
  border-bottom: 1px dotted #626261;
  float: right;
  width: auto;
}

.msg_btm_links_grey {
  color: #ADAEAE;
}

.fileinputs {
  position: relative;
  background: url(../images/file_aatch.gif?v=726) no-repeat top left;
  width: 40%;
  margin-left: 8px;
}

.fileinputs INPUT.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

TABLE#myDiarySymptoms {
  margin-bottom: 40px;
}

TABLE#myDiarySymptoms TD {
  border: 1px solid #fff;
  border-collapse: collapse;
  vertical-align: bottom;
/*padding:0px 5px 0px 5px;*/
  color: #326bc7;
}

TABLE#myDiarySymptoms THEAD TD {
  height: 150px;
  border-width: 0;
  color: #000;
}

TABLE#updateSymptoms TD.symptomsLegendCell {
  float: none !important;
}

TABLE#updateSymptoms TD INPUT {
  margin-left: 39% !important;
  *margin-left: 5ex !important;
}

.symptomsLegend {
  padding: 20px 0 60px;
}

.symptomsLegendCell {
  float: left;
  width: 9ex;
  text-align: center;
  padding: 3px 10px;
  border: 1px solid #fff;
/* same as myDiarySymptoms table */
}

.symptomSeverityNone {
  background-color: green;
/* green */
  color: #fff;
}

#myDiarySymptoms .symptomSeverityNone {
  font-size: 0;
}

#myDiarySymptoms .symptomSeverityNull {
  font-size: 0;
}

#myDiarySymptoms .symptomSeverityMild {
  font-size: 0;
}

#myDiarySymptoms .symptomSeverityModerate {
  font-size: 0;
}

#myDiarySymptoms .symptomSeveritySevere {
  font-size: 0;
}

#myDiarySymptoms .symptomSeverityNoneSmall {
  font-size: 0;
}

#myDiarySymptoms .symptomSeverityNullSmall {
  font-size: 0;
}

#myDiarySymptoms .symptomSeverityMildSmall {
  font-size: 0;
}

#myDiarySymptoms .symptomSeverityModerateSmall {
  font-size: 0;
}

#myDiarySymptoms .symptomSeveritySevereSmall {
  font-size: 0;
}

.symptomSeverityMild {
  background-color: #ff0;
/* yellow */
  color: #000;
}

.symptomSeverityModerate {
  background-color: orange;
/* orange */
  color: #fff;
}

.symptomSeveritySevere {
  background-color: red;
/* red */
  color: #fff;
}

.symptomSeverityMildSmall {
  background-color: #ff0;
/* yellow */
  color: #000;
  width: 1px;
}

.symptomSeverityModerateSmall {
  background-color: orange;
/* orange */
  color: #fff;
  width: 1px;
}

.symptomSeveritySevereSmall {
  background-color: red;
/* red */
  color: #fff;
  width: 1px;
}

.symptomSeverityNoneSmall {
  background-color: green;
/* green */
  color: #fff;
  width: 1px;
}

.symptomSeverityNullSmall {
  width: 1px;
}

.top_space {
  margin-top: 3px;
}

.bottom_links {
  padding: 80px 0 10px;
  width: 100%;
  background: #F4F4F3;
}

.dotted_border {
  border-bottom: 1px dotted #626261;
}

.footer_new {
  background: url(../images/footer_new.gif?v=726) repeat-x top right;
  height: 161px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.footer_wrap_new {
  font-size: 70%;
  color: #123C4C;
  margin: auto;
  background: url(../images/footer_img.gif?v=726) no-repeat top right;
  height: 161px;
}

.error_con {
  padding: 10px;
}

.error_con P {
  font-size: 80%;
}

.circle {
  width: 25px;
  height: 24px;
  float: right;
  background: url(../images/bg_circle.png?v=726) no-repeat;
  margin-top: 20px;
  font-family: "Palatino Linotype","Times New Roman";
  font-size: 150%;
  color: #FFF;
  text-align: center;
}

.triangle {
  float: left;
  margin-left: 0;
  margin-right: 1em;
  margin-top: 10px;
  margin-bottom: 10px;
}

.triangle TABLE {
  float: left;
}

.black_font {
  color: #000;
}

.black_font A {
  color: #000;
}

.black_font A:hover {
  color: #FFF;
  text-decoration: none;
}

@media (max-device-width: 800px) {
.black_font A:hover {
}
}

.red_font {
  color: red !important;
}

.darkblue_font {
  color: #123C4C !important;
}

.header_darkblue {
  color: #073744 !important;
}

.blue_font {
  color: #155F79;
}

.grey_font {
  color: #646464;
}

.bg_grey {
  background: #EDEDED;
}

.bg_white {
  background: #FBFFFF;
}

.right_content_con {
  margin: 0 0 10px;
  padding-right: 10px;
  padding-bottom: 10px;
/*overflow:auto;  causes Firefox to focus on the div*/
  width: 93%;
}

.indent {
  padding-left: 40px;
}

@media (max-device-width: 800px) {
.indent {
  padding-left: 0;
}
}

.textarea_text {
  font-size: 100%;
  font-family: Arial,Helvetica,sans-serif,"Arial Black";
/*TODO: why is this needed?  but it is (see discussions:send a message) */
}

/*TODO: remove widths as much as possible, then get rid of textarea_text */
.textfield
/* TODO: this duplicates form_textarea. form_textarea is a better name,though. */ {
  border: 1px solid #B6B6B6;
  float: left;
  width: 60%;
  margin: 0 0 10px;
  color: #000;
  font-size: 100%;
  font-family: Arial,Helvetica,sans-serif,"Arial Black";
}

@media (max-device-width: 800px) {
.mobileDateEntryWidth {
  width: 50% !important;
}
}

.width60 {
  width: 60% !important;
}

.plan_heading {
  font-weight: 700;
  font-size: 1.2em;
  text-decoration: underline;
}

TEXTAREA#actionPlan {
  background-color: transparent;
  font-size: 1em;
  height: 240px;
/* compare with textarea_height */
  width: 100%;
}

div.actionPlan {
  background-color: transparent;
}

TEXTAREA#amberText {
  background-color: #FFFEBD !important;
  font-size: 1em;
  height: 240px;
/* compare with textarea_height */
  width: 100%;
}

div.amberText {
  color: #FFCF00;
}

TEXTAREA#redText {
  background-color: #FFBDBE !important;
  font-size: 1em;
  height: 240px;
/* compare with textarea_height */
  width: 100%;
}

div.redText {
  color: red;
}

TEXTAREA#greenText {
  background-color: #DFFFBD !important;
  font-size: 1em;
  height: 240px;
/* compare with textarea_height */
  width: 100%;
}

div.greenText {
  color: #00FF1C;
}

div.actionPlan,div.amberArea,div.redArea,div.greenArea {
  padding: 5px;
  margin-bottom: .5em;
  overflow: hidden;
/* to make the div expand to fit the content if no height is specified */
  width: 100%;
/* to fix IE6 hasLayout bug */
}

div.actionPlan {
  border: 2px solid #000;
}

div.amberArea {
  border: 2px solid #FFCF00;
}

div.redArea {
  border: 2px solid red;
}

div.greenArea {
  border: 2px solid #00FF1C;
}

.amberArea img,.greenArea img,.redArea img {
  float: left;
  margin: 0 20px 10px 0;
}

.textarea_height {
/*TODO: redundant with form_textarea?*/
  height: 120px;
}

.description_text {
  float: left;
  clear: left;
  color: #111;
  padding-bottom: 10px;
  font-size: .9em;
}

TABLE.registration_table h2 {
  margin: 20px 0 10px;
}

/* TODO: take out description_text_right */
/* TODO: combine this with description text for all, not just individual tables */
TABLE.discussions_table span.description_text,TABLE.medications_table span.description_text {
  float: right !important;
  clear: none !important;
  width: 30%;
  padding-left: 15px;
}

/* TODO: attempt to combine these */
.inline_description {
  padding-left: 15px;
  color: #5C97B5;
  width: 30%;
  float: left;
  font-size: .9em;
}

@media (max-device-width: 800px) {
.inline_description {
  padding-left: 15px;
  color: #5C97B5;
/*width: 30%;
  float:left;*/
  font-size: .9em;
}
}

.file_type_checkAll {
  padding: 0 15px 10px 0;
  font-size: 80%;
  color: #1A7EA1;
}

.right_file_type
/* TODO: can width be removed? */ {
  width: 60%;
  padding: 0 15px 10px 0;
  font-size: 80%;
}

.treatments_wrap#editPlan div.right_file_type {
  float: left;
  width: auto !important;
}

.right_file_type H2 {
  font-family: "Palatino Linotype","Times New Roman";
  margin: 0;
  padding: 0;
  color: #5C97B5;
  text-transform: uppercase;
  font-size: 100%;
}

.right_file_type LABEL {
  font-size: 100%;
  color: #1A7EA1;
  display: block;
  padding-bottom: 5px;
}

.right_file_type A {
  color: #1A7EA1;
  text-decoration: none;
}

.right_file_type A:hover {
  text-decoration: underline;
}

@media (max-device-width: 800px) {
.right_file_type A:hover {
}
}

.right_btm_text {
  display: block;
  font-size: 80%;
  padding: 15px 0 0;
  color: #787878;
}

.confirm_msg {
  text-align: left;
  color: #111;
}

.confirm_msg UL {
  margin: 0;
  padding: 0;
}

.confirm_msg LI {
  list-style: none;
  margin: 0;
  padding: 5px 0;
}

.left_para {
  padding-left: 15px;
  margin: 10px 0;
}

.confirm_msg_out {
  position: absolute;
  left: 420px;
  top: 80px;
  width: auto;
  font-family: "Palatino Linotype","Times New Roman";
  font-size: 100%;
  font-weight: 700;
}

.message_container H5 {
  font-size: 100%;
  color: #115068;
  display: block;
}

.message_container P {
  font-size: 80%;
  display: block;
  padding-top: 5px;
}

.width100 {
  width: 90%;
/* TODO: 90 isn't 100 */
}

.grant_access_submit
/* TODO do something more general */ {
  width: 95%;
  padding-top: 5px;
  text-align: right;
}

/* TODO: don't need top_space and this both */
.top_margin
/* TODO: if content-header bottom margin is increased by 20px,SOME instances of this class (the ones directly following content-header) can go away. */ {
  margin: 20px 0;
  padding: 0;
  width: 90%;
}

/* TODO: only used in one place, look at replacing with something more generic */
.contents_wrap_list
/* TODO: replace with center justify class */ {
  width: 580px;
  padding-left: 420px;
  margin: 0;
}

@media (max-device-width: 800px) {
.contents_wrap_list {
/* TODO: only used in one place, look at replacing with something more generic */
  width: 60%;
  padding-left: 20px;
  margin: 0;
}
}

.contents_wrap_list H2 {
  font-family: "Palatino Linotype","Times New Roman";
  font-size: 130%;
  font-weight: 400;
}

.contents_wrap_list P {
  font-size: 80%;
  padding: 10px 20px 10px 5px;
}

/*IMH consultation headings in discussion message*/
.msg_message H1 {
  font-size: 100%;
  text-align: center;
}

.msg_message H2,H3,H4,H5 {
  font-size: 100%;
}

/*Data tabs*/
.diary .entry .heading,.Files .entry .heading A {
  font-family: "Palatino Linotype","Times New Roman";
  font-size: 120%;
  color: #068CAF;
  font-weight: 400;
}

.diary DIV.entry {
  margin-bottom: .5em;
}

.diary .entry .date,.Files .entry .date {
  font-size: 80%;
}

.diary .entry .date A.edit,.Files .entry .date A.edit {
  color: #068CAF;
}

.diary .entry .date A.edit:hover,.Files .entry .date A.edit:hover {
  color: #115068;
}

.organLink {
  font-family: "Palatino Linotype","Times New Roman";
  color: #1D4852;
  display: block;
  float: left;
  margin-right: 20px;
  width: 50px;
  height: 50px;
  text-align: center;
  text-decoration: none;
}

.organLink:active,.organLink:hover {
  color: #7A7B7C;
}

.organLink#heart {
  background: url(/images/organs/heart.png?v=726) no-repeat 0 0;
}

.organLink#heart:hover {
  background-position: 0 -50px;
}

.organLink#lungs {
  background: url(/images/organs/lungs.png?v=726) no-repeat 0 0;
}

.organLink#lungs:hover {
  background-position: 0 -50px;
}

.organLink#kidneys {
  background: url(/images/organs/kidneys.png?v=726) no-repeat 0 0;
}

.organLink#kidneys:hover {
  background-position: 0 -50px;
}

.organLink#hormones {
  background: url(/images/organs/hormones.png?v=726) no-repeat 0 0;
}

.organLink#hormones:hover {
  background-position: 0 -50px;
}

.organLink#liver {
  background: url(/images/organs/liver.png?v=726) no-repeat 0 0;
}

.organLink#liver:hover {
  background-position: 0 -50px;
}

.organLink#blood {
  background: url(/images/organs/blood.png?v=726) no-repeat 0 0;
}

.organLink#blood:hover {
  background-position: 0 -50px;
}

.organLink#bones {
  background: url(/images/organs/bones.png?v=726) no-repeat 0 0;
}

.organLink#bones:hover {
  background-position: 0 -50px;
}

.organLink#gut {
  background: url(/images/organs/gut.png?v=726) no-repeat 0 0;
}

.organLink#gut:hover {
  background-position: 0 -50px;
}

.organLink#reproductive {
  background: url(/images/organs/reproductive.png?v=726) no-repeat 0 0;
}

.organLink#reproductive:hover {
  background-position: 0 -50px;
}

.organLink SPAN {
  font-size: 85%;
  display: block;
  position: relative;
  width: 50px;
  top: 50px;
}

.organLinkList {
  margin-bottom: 2em;
}

/*Schedule*/
TD.out {
  color: #B5C8DC;
}

.captioned-image {
  float: left;
  margin-left: 0;
  margin-right: 1em;
  margin-top: 10px;
  margin-bottom: 10px;
}

chart {
  width: 80%;
  overflow: auto;
  border: 0;
}

/*Label for patient context*/
.patient_label {
  margin-right: 15px;
  float: right;
  width: 30%;
  text-align: left;
  font-size: .75em;
}

.patient_label p {
  margin: 0;
  padding: 0;
}

#timings {
  font-size: .7em;
  position: fixed;
  bottom: 0;
  right: 0;
  color: #fff;
  background-color: #AAA;
  padding: 5px;
  zoom: 1;
  filter: alpha(opacity=65);
  opacity: .65;
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;
  border-top-left-radius: 15px;
}

#timings.timingsWarn {
  background-color: red;
}

#timingsHidden {
  font-size: .5em;
  color: #fff;
  padding: 5px;
}

/*hide navigation on printout*/
@media print {
p {
  font-size: .8em;
}

.main_navigation,.sub_navigation,.msg_btm_links_left,.pagination,.tab_navigation,.footer,.dashboard_btn_sm,.dashboard_right,.dashboard_button_container,.noprint {
  display: none;
}

.main_wrap {
  width: 96%;
}

/* TODO: missing .admin_wrap */
.discussions_wrap,.health_wrap,.tests_wrap,.files_wrap,.diary_wrap,.team_wrap,.medications_wrap,.schedule_wrap,.messages_table,.summary_wrap,.treatments_wrap {
  width: 100%;
}

.top_margin {
  margin: 0;
}

.right_content_con {
  width: 100%;
}

.plan_heading {
  font-weight: 700;
  font-size: 1.2em;
  text-decoration: underline;
}

.patient_label {
  border: 1px solid #000;
  padding: .2em .5em;
  font-family: "Courier New",monospace;
}
}

.customer_header {
  background-color: #E9F0F7;
  border: 1px solid #123C4C;
  color: #31679F;
  padding: 4px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
}

.customer_header a {
  text-transform: none;
  font-weight: 400;
  font-size: 75%;
}

.customer_header div {
  margin: 0 10px;
  display: inline;
}

.customer_header img {
  vertical-align: top;
}

.customer_details {
  margin-top: 30px;
}

.customer_details table {
  margin-top: 10px;
  min-width: 570px;
}

.button_spacer {
  padding: 8px 0;
}

.button_spacer a {
  margin: 0;
}

.measurements_table {
  text-align: right;
}

#myPatients th a {
  color: #31679F;
  text-decoration: underline;
}

.survey_results {
  margin-top: 20px;
}

.survey_heading {
  background-color: #B5C8DC;
  color: #31679F;
  font-weight: 700;
  height: 22px !important;
  text-transform: uppercase;
}

.survey_result {
  border: 1px solid #123C4C;
  color: #123C4C;
  height: 34px;
  list-style: none outside none;
  margin: -1px 0;
  padding: 2px 60px 2px 2px;
  position: relative;
  width: 420px;
}

.survey_results ul {
  margin: 0;
  padding: 0;
}

.survey_result .count {
  position: absolute;
  top: 2px;
  right: 2px;
}

.survey_result .date {
  bottom: 0;
  font-size: 75%;
  font-style: italic;
  font-weight: 400;
  left: 0;
  position: absolute;
}

.survey_result a {
  font-weight: 400;
  font-size: 75%;
  position: absolute;
  bottom: 2px;
  right: 2px;
}

.dashboard_symptoms .teamName {
  font-weight: 700;
}

.dashboard_symptoms ul {
  list-style: none;
  padding: 4px;
}

.dashboard_symptoms li {
  margin: 10px 0;
}

.dashboard_symptoms table {
  border-collapse: collapse;
  margin: 10px 60px;
}

.dashboard_symptoms .alternate {
  background-color: #E9F0F7;
}

.dashboard_symptoms th {
  border-bottom: 2px solid #000;
  font-size: 10pt;
  font-weight: 400;
  line-height: 12px;
  vertical-align: top;
  width: 36px;
  padding-bottom: 5px;
}

.dashboard_symptoms .symptomName {
  font-size: 10pt;
  height: 24px;
  width: 130px;
}

.dashboard_symptoms .symptomValue input {
  margin-left: 10px;
}

.dashboard_symptoms .symptomValue > div {
  position: relative;
}

.dashboard_symptoms .symptomValue > div > span {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 0;
  left: 9px;
  display: none;
  font-size: 0;
}

.dashboard_symptoms .symptomValue > div > span:hover {
  background-position: 0 -20px;
}

.dashboard_symptoms .symptomValue .selected {
  background-position: 0 -20px;
}

.institution_library {
  list-style: none outside none;
  margin-top: 30px;
  padding: 0;
}

.institution_library input[type="text"] {
  display: block;
  margin-bottom: 3px;
  margin-left: 94px;
  margin-top: 5px;
  width: 209px;
}

.institution_library li {
  border: 1px solid #87AEC9;
  height: 65px;
  margin-bottom: 3px;
  margin-left: 0;
  margin-top: 3px;
  overflow: hidden;
  padding: 2px 90px 2px 4px;
  position: relative;
  width: 310px;
}

.institution_library .description {
  font-size: 10pt;
  left: 5px;
  position: absolute;
  top: 6px;
}

.institution_library .url {
  font-size: 10pt;
  left: 5px;
  position: absolute;
  top: 37px;
}

.institution_library .buttons {
  bottom: 4px;
  display: block;
  left: 319px;
  position: absolute;
  width: 96px;
}

.institution_library .buttons a {
  height: 41px;
  line-height: 28px;
  margin: 7px;
  text-decoration: none;
}

.institution_library .submit_btn {
  margin: 2px 7px;
}

.institution_library .link {
  display: block;
  margin-left: 7px;
  margin-top: 16px;
}

.institution_library .add {
  margin-top: 22px;
}

.institution_library .error {
  bottom: -4px;
  font-size: 11pt;
  left: 4px;
  position: absolute;
}

.patient_instLibrary {
  margin-top: 70px;
}

.patient_instLibrary h1 {
  font-size: 140%;
  color: #115068;
  padding: 0;
  margin: 0 10px 30px 0;
}

.patient_instLibrary h2 {
  color: #31679F;
  font-family: "Palatino Linotype","Times New Roman";
  font-size: 14pt;
}

.patient_instLibrary ul {
  list-style: none;
  padding: 0;
}

.patient_instLibrary li {
  margin: 4px 0;
  min-height: 27px;
  padding-right: 95px;
  position: relative;
  width: 350px;
}

.patient_instLibrary li .submit_btn {
  left: 350px;
  position: absolute;
  top: -9px;
}

/*these two rules are to fix the general rule applied to inputs and selects in tables
which screws up rendering of html plans:*/
.actionPlan input {
  float: none;
}

.actionPlan select {
  width: auto;
  float: none;
}

.global-error-messages {
  margin: 10px 0 10px 0;
  border-radius: 6px;
  padding: 10px 10px;
  border: 3px solid #E6E6E6;
  font-size: 1em;
  font-weight: bold;
  border-color: #60c6a9;
}