/* AMPLIO STYLE SHEET  */
/* ANALYST: HANSSEN LI */


/****************  Ajax Popups   *************/  
.modalBackgroundOuter {background-color: Gray;}    
.modalPopupOuter li, .modalBackground li {list-style-image:url('../Library/Images/Amplio/Bullet1.GIF');}
.modalPopupOuter    {background-color: transparent; padding:0px;}
.modalPopupInner    {padding: 0px; margin: 0px; overflow:hidden !important;}
.modalPopupData     {background:white; padding: 0 30px 0px 30px; margin: 0 30px 0 30px;}
.modalPopupText     {height: 485px; width: 730px; overflow-x: hidden; overflow-y: auto;}


.PopupPanel         {max-height:100%; height:100%; overflow-y:auto; font-size:13pt !important; padding:0px 10px 0px 10px !important;}
.PopupTopLeft       {background:url('../Library/Images/Amplio/PopupTopLeft.gif') right no-repeat; width:20px}
.PopupTopCenter     {background:white;}
.PopupTopRight      {background:url('../Library/Images/Amplio/PopupTopRight.gif') no-repeat; width:20px}

.PopupBottomLeft    {background:url('../Library/Images/Amplio/PopupBottomLeft.gif') right no-repeat; width:20px}
.PopupBottomCenter  {background:url('../Library/Images/Amplio/PopupBottomCenter.gif') repeat-x;}
.PopupBottomRight   {background:url('../Library/Images/Amplio/PopupBottomRight.gif') no-repeat; width:20px}

/** Dropshadows **/
.ShadowTop TR       {height:40px;} 
.PopupShadowTop     {background:url('../Library/Images/Amplio/PopupShadowTop.gif') no-repeat;}
.PopupShadowMiddle  {background:url('../Library/Images/Amplio/PopupShadowMiddle.gif') repeat-y;}
.PopupShadowBottom  {background:url('../Library/Images/Amplio/PopupShadowBottom.gif') no-repeat;}


/*----- Ajax Popup Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}

/*----- Javascript Tab Links (in more info tab) -----*/
/* Clearfix */
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}
 
.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}
 
.tab-links a {
    padding:9px 15px;
    display:inline-block;
    border-radius:3px 3px 0px 0px;
    background:#bdc3c7;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition:all linear 0.15s;
}
 
.tab-links a:hover {
    background:#EAEAEA;
    text-decoration:none;
}
 
li.active a, li.active a:hover {
    background:#EAEAEA;
    color:#4c4c4c;
}
 
/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 2px 0, rgba(0, 0, 0, 0.3) 0 2px 3px 2px, rgba(0, 0, 0, 0.1) 0 7px 5px 0;
    border: 2px solid lightgrey;
    background:#fff;
    font-size: 13pt;
    width: 950px; /* assuming popup width is set to 1100px*/
}
 
.tab {
    display:none;
}
 
.tab.active {
    display:block;
}
/*----- END Content of Tabs -----*/

/****************  END Ajax Popups   *************/  
 

/****************  MASTER PAGE   *****************/  


/*----- Master Menu --------*/

/* Remove IE clicked gray background*/
a:active {background-color: transparent;}

/* hide outline when click on areas for IE */
:focus {outline:0;}


/* StaticMenuitem - first layer of visible menu items */
.StaticMenuItem {
    font-weight:bold !important;
}

.StaticMenuItem a{
    background: none;
    padding:15px;
}

.StaticMenuItem td{
    padding-left:5px;
    padding-right:5px;
}

.StaticMenuItem td a{
    display:block;
}

.StaticMenuItem:hover {
    background: url('../Library/Images/Amplio/MenuBackgroundFlip3.png') center repeat-x;
}


/* DynamicMenuItem - other menu items (ones that appear when the first layer is clicked) */
.DynamicMenuItem td a {
    display: block;
    padding:5px;
}

.DynamicMenuItem:hover 
{
    clip: auto !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 30px 0, rgba(0, 0, 0, 0.1) 0 7px 5px 0;
    background: lightgrey \9; /* for IE 8 and lower */    
}

/* No is for those menuitems are should not be clicked, thus they should have no hover effect */
.No .DynamicMenuItem:hover {
    background: white;
}

.No:hover {
    clip: auto !important;
    box-shadow: none !important;
}

/* DynamicMenu is for the container for the menuitems that pop up dynamically (after you clicked one top level) */
.DynamicMenuBack {
    clip: auto !important;
    border: 1px solid lightgrey \9;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 30px 0, rgba(0, 0, 0, 0.1) 0 7px 5px 0;
}

.DynamicMenuBack a{
    clip: auto !important;
    border-color: gray;
    box-shadow: none !important;
}


/* Menuitems that do not have need hover */
.No .CriticalMenuItem:hover {
    background: white;
}

.CriticalMenuItem:hover {
    clip: auto !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 7px 5px 0;
    background: lightgrey \9;  /* IE 8 and lower */
}


/*----- End Master Menu -----*/

body {
    margin:0;
    padding:0;
}

/****************  END MASTER PAGE  *************/  

/****************  HOME PAGE  *************/

/* The service tabs/table cells */


/* Headers for the service tabs */
.header {
    background:url('../Library/Images/Amplio/MenuBackground3.png') center repeat-x; 
    background-size: 25px 150%;
}
.header:hover {
    background:url('../Library/Images/Amplio/MenuBackgroundFlip3.png') center repeat-x !important;
    background-size: 25px 150% !important;
}

/* Actual text for the header is in a span for the service tabs */
.header span {
   border-width:0px;
   cursor:pointer; 
   background-color: transparent; 
   padding-bottom:5px; 
   padding-top:5px; 
   text-align:center; 
   font-size: 16pt; 
   border-bottom: 1pt solid rgb(203, 203, 203);
}

.ServiceTableCell {
    min-width: 300px;
    padding:0 0 5px 0; 
    margin:0 auto; 
    background: white; 
    overflow:hidden; 
    border-radius:18px; 
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 5px 0, rgba(0, 0, 0, 0.1) 0 1px 5px 0;
}

/* Menu that appears when the header of each procedure is clicked */
.CriticalMenuItem td a {
    display: block;
    padding:5px;
}

.CriticalSectionHeaderHighlightBarRed {
    padding-top:8px;
    padding-bottom:7px;
    width:10px;
    height:95%;
    background: #FF0000; /* Amplio red */
}

.CriticalSectionHeaderHighlightBarNone {
    padding-top:8px;
    padding-bottom:7px;
    width:10px;
    height:95%;
}


/* Section headers like Recent Actity, Critical Reports, Admin */
.CriticalSectionHeader {
    padding-top:10px;
    padding-bottom:10px;
    background: #F4F4F4; /* Faint grey */
}

.CriticalSectionHeaderHighlightBar {
    padding-top:10px;
    padding-bottom:10px;
    width:10px;
    background:#1968EB; /* Amplio blue */
}

.CriticalSectionNoData {
    padding-left:30px;
    padding-top:5px;
    float:left;
}

.CriticalSectionItemBtn {
    padding-left:30px; 
    padding-top:5px; 
    padding-bottom:5px; 
    white-space: normal; 
    width: 100%; 
    text-align:left; 
    background: none; 
    border: none; 
    cursor: pointer;
}

.CriticalSectionItemBtn td a
{
    display: block;
    padding:5px;
}

.CriticalSectionItemBtn:hover {
    clip: auto !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 7px 5px 0;
    background: lightgrey \9;  /* IE 8 and lower */
}

/* Only the surgeon access report link is using a label (to avoid weird behavior with button) */
.CriticalSectionItemLbl {
    padding-left:30px; 
    padding-top:5px; 
    padding-bottom:5px; 
    display: inline-block; 
    white-space: normal; 
    width: 100%; 
    text-align:left; 
    background: none; 
    border: none; 
    cursor: pointer;
}

.CriticalSectionItemLbl td a {
    display: block;
    padding:5px;
}

.CriticalSectionItemLbl:hover {
    clip: auto !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 7px 5px 0;
    background: lightgrey \9;  /* IE 8 and lower */
}

/* Chart Panel */
.ChartPanel {
    border-color: LightGrey;
    border-width: 1px;
    border-style: solid;
    background: white;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 5px 0;
}

/************* END HOME PAGE  *************/


/****************  CHART PAGE  *****************/
/* Patient Characteristics Table*/
.PatientCharTable {
    border: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0px 1px 0, rgba(0, 0, 0, 0.3) 0 1px 30px 0, rgba(0, 0, 0, 0.1) 0 7px 5px 0;
}
.PatientCharTable tr{
    border-bottom: 1pt solid rgba(0, 0, 0, 0.2);
}
.PatientCharTable th{
    border-top: 1pt solid rgba(0, 0, 0, 0.2);
    border-left: none;
    border-right: none;
    border-bottom: 1pt solid rgba(0, 0, 0, 0.2);
    padding: 10px;
}
.PatientCharTable td{
    border:none;
    padding: 10px;
}
.FeedbackCaret {
    height: 16px;
    vertical-align: text-bottom;
    transition: 0.5s;
}


/****************  END CHART PAGE  *************/