﻿
body#messaging-center > * {
  margin: 0;
  padding: 0;
}

/* @group general styles*/

body#messaging-center 
{
    color: #000000;
    font-family: Tahoma, Geneva, sans-serif;
    text-align: center;
    background: #ffffff; 
    font-size: 14px;
    background-color: #ffffff
}

body#messaging-center > hr 
{
    background-color: #999999;
    height: 2px;  
}

.wrapper {
    width: 80%; 
    margin: 0 auto; 
    text-align: left;
    max-width: 125em;
    min-width: 80em;
    
    border-style:solid;
    border-color: #9A9A9A;
    background-color: #ffffff;
}

.content {
    overflow: hidden;
}

/* .content > div 
{
  padding-bottom: 15%;
  margin-bottom: -15%;  
}

*/

.content .primary { 
    width: 38.1%;
    float: left;
}

#list 
{
    margin: 1px 0px 1px 1px;
 /*   border-style:solid;
    border-width: 2px;
    border-color: #999999;
    background-color: #ffffff;
   
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none; */
}

.content .secondary { 
    width: 61.3%;
    float: right; 
} 

.bottom {
    position: absolute;
    bottom: 0;
}

.content .primary .content {
     background-color: #C4C8C9; 
}

.content .primary .content .primary {
     width: 52.82%;
}

.content .primary .content .secondary {
     width: 46.80%;
}

#new-messages-count 
{
    padding: 7px 0px 10px 18px;
    font-size: 1.3em; 
    display: inline-block;
} 

#new-messages-count > div 
{
    display: inline-block;
    width: 1.5em;  
    background-color: #444444; 
    color: #ffffff; 
    border:2px solid #444444; 
    border-radius:10px;
    text-align: center;
}

#filter
{
    width: 97%;
    margin-top: 10px;
    font-size: 1em; 
    display: inline-block; 
    cursor: pointer;
    border-style:solid;
    border-width: 2px;
    border-color: #999999;
}

#no-messages 
{
    text-align:center;
    vertical-align: text-top;
}

#ig-message-list
{
   height: 540px;   
}

#message-list > div
{
    font-size: 1em;
    height: 54px;
    cursor: pointer;
}

#message-list .primary 
{
    width: 65%;
    float: left
}

#message-list .secondary 
{
    width: 33%;
    float: right;
}

.even {
    background-color: #F1F5F8;
}

.odd {
    background-color: #E7EBEE;
}

.read-message 
{
    display: inline-block;
    background-image: url("images/MessageCenter/read-message.png");
    width: 24px; 
    height: 22px;
    margin: 14px 5px 0px 5px;
    float: left;
}

.unread-message 
{
    display: inline-block;
    background-image: url("images/MessageCenter/unread-message.png");
    width: 24px; 
    height: 22px;
    margin: 14px 5px 0px 5px;
    float: left;
}

.subject-and-small-body 
{
    display: inline-block;
}

.toggle-read-icon 
{
    display:inline-block;
}

.delete-button 
{
    display:inline-block;
    background-image: url("images/MessageCenter/delete-off.png");
    width: 24px; 
    height: 23px;
}

.delete-button:hover 
{
    background-image: url("images/MessageCenter/delete-on.png");
}

.mark-as-read
{
    background-image: url("images/MessageCenter/markread-off.png");
    width: 24px; 
    height: 23px;
}

.mark-as-read:hover
{
    background-image: url("images/MessageCenter/markread-on.png");
}

.mark-as-unread
{
    background-image: url("images/MessageCenter/markunread-off.png");
    width: 24px; 
    height: 23px;
}

.mark-as-unread:hover
{
    background-image: url("images/MessageCenter/markunread-on.png");
}

.message-subject 
{
    font-size: 1em;
    margin-top: 4px;
}

.message-date-created 
{
    font-size: 1em;
    padding-top: 3px;
    float: left;
}

.clear 
{ 
    clear:left;
}

.clear-both
{ 
    clear:right;
}

.message-actions
{
    padding-top: 3px;
}

.selectedMessage 
{
    color: #ffffff;
    background-color: #999999;
    margin-right: -8px;
}

.unreadMessage
{
   font-weight:bold;
}


#navigation 
{
    width:100%;
    height: 50px;
    background-color: #C5C8C9;
    text-align: center;
    overflow: hidden;
    margin-top: 2px;
}

#navigation .first-previous
{
    width: 32%;
    height: 45px;
    float: left;
    padding: 10px 0px 0px 5px;
}

#navigation .page-summary
{
    width: 33%;
    display: inline-block;
    padding-top: 10px;
}

#navigation .next-last
{
    width: 32%;
    height: 45px;
    float: right;
    padding: 10px 5px 0px 0px;
}

 .first-page 
{
   background-image: url("images/MessageCenter/gotofirstpage-off.png");
   cursor: pointer;
   width: 33px;
   height: 27px; 
   display: inline-block;
   float: left;
}

 .first-page:hover 
{
   background-image: url("images/MessageCenter/gotofirstpage-on.png");
}

 .previous-page
{
   background-image: url("images/MessageCenter/gotoprevpage-off.png");
   cursor: pointer;
   width: 33px;
   height: 27px;
   display: inline-block; 
   float: left;
}

 .previous-page:hover
{
   background-image: url("images/MessageCenter/gotoprevpage-on.png");
}

 .next-page
{
   background-image: url("images/MessageCenter/gotonextpage-off.png");
   cursor: pointer;
   width: 33px;
   height: 27px;
   display: inline-block; 
   float: right;
}

 .next-page:hover
{
   background-image: url("images/MessageCenter/gotonextpage-on.png");
}

.last-page
{
   background-image: url("images/MessageCenter/gotolastpage-off.png");
   cursor: pointer;
   width: 33px;
   height: 27px;
   display: inline-block;  
   float: right;
}

 .last-page:hover
{
   background-image: url("images/MessageCenter/gotolastpage-on.png");
}

#message-details-not-selected
{
    background-image: url("images/MessageCenter/watermark.png");
    width: 335px;
    height: 155px;
}

.message-details-text 
{
    padding-top: 30px;
    padding-left: 8%;
    font-size:18px;
}

#message-details 
{
    height: 636px;
    border-style:solid;
    border-width: 2px;
    border-color: #999999;
    background-color: #ffffff;
    margin: 1px 1px 1px 0px;   
    overflow: auto;
}

#message-details .message-sent-date 
{
    display: inline-block;
}

#message-details .delete-button 
{
    background-image: url("images/MessageCenter/delete-off.png");
    width: 23px; 
    height: 23px;
    display: inline-block;
    float: right;
    cursor: pointer;
}

#message-details .delete-button:hover 
{
    background-image: url("images/MessageCenter/delete-on.png");
}

#message-details-selected 
{
    padding: 3% 0% 0% 6%;
}

#message-details-selected > div 
{
    width: 93%;
}

.button 
{
    padding: 6px 6px;
    margin-right: 5px;
    background-color: #E8EBED; 
    border:2px solid #444444; 
    border-radius:10px;
    text-align: center;
}

.button:hover
{
    color: #ffffff;
    background-color: #9A9A9A; 
}

.modal-dialog
{
    position:absolute;
    top: 25%;
    left: 25%;
}


/* @group messageInbox cashier */

.cashier-wrapper 
{
    width: 365px; 
    height: 330px;
    margin: 0 auto; 
    text-align: left;
    
    border-style:solid;
    border-color: #9A9A9A;
    background-color: #ffffff;
}

#message-inbox-cashier .cashier-header 
{
    height: 30px;
    background-color: #1F5087;
}

#cashier-new-messages-count 
{
    padding: 2px 2px 0px 6px;
    font-size: 14px; 
    display: inline-block;
	color: #ffffff;
} 

#cashier-new-messages-count > div 
{
    display: inline-block;
    width: 1.5em;  
    background-color: #444444; 
    color: #ffffff; 
    border:2px solid #444444; 
    border-radius:10px;
    text-align: center;
}

#cashier-wrapper-filter
{
   display: inline-block;
   float: right;
   padding: 4px 4px 0px 0px;
   cursor: pointer;
}

#cashier-filter
{
    width: 200px;
    display: inline-block; 
    cursor: pointer;
    border-style:solid;
    border-width: 2px;
    border-color: #999999;
}

.cashier-subject-and-small-body 
{
    display: inline-block;
    font-size: 12px;
}

.cashier-message-subject 
{
    margin-top: 8px;
}

.cashier-message-date-created 
{
    padding-top: 3px;
    float: left;
}

.cashier-message-date-created 
{
    font-size: 12px;
    padding-top: 3px;
    float: left;
}

#cashier-more-messages 
{
    height: 22px;
    background-color: #1F5087;
	color: #ffffff;
    margin-top: 1px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

#cashier-ig-message-list
{
    height: 270px;
}

body#messaging-center > option 
{
    background-color: #FFFFFF; 
}

body#messaging-center > option:hover 
{
    background-color: #C4C8C9; 
}