My Cases CSS
/* Private Portal */
#support-main .myportal .content {
background: #FFF;
}
.myportal-label {
margin: 0 0 8px 0;
padding-left: 22px;
}
.myportal .mycases-filters {
height: 36px;
margin-bottom: 20px;
}
.myportal .a-selectbox {
border: 1px solid #BEBEBE;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #FFF;
-webkit-border-image: none;
display: block;
float: left;
padding: 0 4px;
text-decoration: none;zoom:1;
}
.myportal .a-selectbox select {
border: none;
box-sizing: border-box;
white-space: pre;
appearance: textfield;
-moz-appearance: textfield;
-webkit-appearance: textfield;
padding: 0;
font-size: 12px;
width: 190px;
margin: 0;
background-position: right center !important;
}
.myportal .a-checkbox {
float: left;
margin-left: 10px;
color: #333;
font-size: 12px;
line-height: 34px;
}
.myportal-button {
float: right;
padding: 8px 10px;
font-size: 12px;
}
.myportal-button:hover {
text-decoration: none;
}
.myportal .mycases {
width: 100%;
border-collapse:collapse;
margin: 0px 0px 30px 0px;
font-size: 14px;
}
.myportal .mycases caption {
border:1px solid #5C443A;
color:#5C443A;
font-weight:bold;
letter-spacing:20px;
padding:6px 4px 8px 0px;
text-align:center;
text-transform:uppercase;
}
.myportal .mycases td, th {
color:#363636;
padding: 11px 5px;
}
.myportal .mycases tr {
background: #FFF;
border: 1px solid #ccc;
}
.myportal .mycases tbody tr:hover {
cursor: pointer;
}
.myportal .mycases thead th, tfoot th {
background: #E8E8E8;
font-size: 11px;
font-weight: bold;
color:#666;
padding: 10px 5px;
text-align:left;
text-transform:uppercase;
}
.myportal .mycases a {
text-decoration:none;
}
.myportal .mycases a:hover {
text-decoration: underline;
}
.myportal .mycases tbody th, .myportal .mycases tbody td {
text-align:left;
vertical-align:middle;
}
.myportal .mycases tfoot td {
background:#5C443A;
color:#FFFFFF;
padding-top:3px;
}
.myportal .mycases .a-casechannel {
text-align: center;
vertical-align: middle;
width: 30px;
padding: 11px 0 11px 11px;
}
.myportal .case-block{
float: left;
margin-right: 60px;
}
.myportal .a-caseid {
padding-left: 15px;
}
.myportal .a-caseid, .myportal .a-casestatus {
width: 70px;
}
.myportal .a-casecreated {
width: 60px;
}
#support-main .case {
padding: 0;
}
#support-main .myportal .case-details, #support-main .myportal .interaction {
padding: 25px 0;
}
#support-main .myportal .interaction {
min-height: 60px;
padding-bottom: 0;
}
#support-main .myportal .case-details {
background-color: #F5F5F5;
padding: 20px 25px;
}
#support-main .myportal .case-details h3 {
border: 0;
margin: 0 0 20px;
padding: 0;
width: 510px;
font-size: 18px;
vertical-align: top;
float: left;
}
#support-main .myportal .status {
float: right;
font-weight: bold;
}
#support-main .myportal .status img {
vertical-align: middle;
}
#support-main .myportal .status .a-New,
#support-main .myportal .status .a-Open,
#support-main .myportal .status .a-Pending,
#support-main .myportal .status .a-Resolved,
#support-main .myportal .status .a-Closed {
color: #fff;
padding: 2px 8px;
font-weight:bold;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#support-main .myportal .status .a-New {
background-color: #5B75AF;
border: #465A86 1px solid;
}
#support-main .myportal .status .a-Open {
background-color: #61A00F;
border: #4A7B0B 1px solid;
}
#support-main .myportal .status .a-Pending {
background-color: #DE901B;
border: #AA6E14 1px solid;
}
#support-main .myportal .status .a-Resolved {
background-color: #A5A5A5;
border: #7E7E7E 1px solid;
}
#support-main .myportal .status .a-Closed {
background-color: #DE901B;
border: #AA6E14 1px solid;
}
#support-main .myportal .meta {
clear: both;
color: #888;
font-size: 12px;
}
#support-main .myportal .meta strong {
color: #000;
}
.myportal #paginate_block .pagination {
background-color: transparent;
}
/* Private Portal - Case Detail */
#support-main .myportal .case-details .meta span.date,
#support-main .myportal .interaction-details span.date {
margin: 0;
color: #888;
display: inline-block;
}
#support-main .myportal .interaction-details span.date {
float: right;
text-align: right;
}
#support-main .myportal .meta .case-data {
list-style: none;
width: 50%;
float: left;
position: relative;
}
#support-main .myportal .meta .case-dates {
list-style: none;
width: 50%;
float: right;
position: relative;
text-align: right;
}
#support-main .myportal .meta .case-dates strong {
display: inline-block;
text-align: right;
width: 50%;
*display: inline;
zoom: 1;
}
#support-main .myportal .meta .name {
font-weight: bold;
text-transform: uppercase;
}
#support-main .myportal .interactions {
padding-bottom: 20px;
}
#customer-account a {
margin-left: 15px;
}
#support-main .myportal .gravatar-wrapper {
position: absolute;
border: 1px solid #CCC;
}
#support-main .myportal .gravatar {
float: left;
border: 3px solid #FFF;
}
#support-main .myportal .gravatar.twitter-avatar {
border: 4px solid #fff;
}
#support-main .myportal .interaction-details .meta {
width: 100%;
margin: 0;
}
#support-main .myportal .interactions .system-message {
padding: 15px 20px 0 20px;
color: #aaa;
font-size: 12px;
}
#support-main .myportal .interactions .chat {
padding: 18px 20px 10px;
}
#support-main .myportal .interactions .chat .interaction-details {
padding: 0;
}
#support-main .myportal .interactions .chat .interaction-details .meta span {
color:#000;
font-weight:bold;
}
#support-main .myportal .interactions .chat .interaction-details .meta span.date {
color: #888;
font-weight: normal;
}
#support-main .myportal .interactions .chat .interaction-body {
padding-right: 50px;
margin-top: 5px;
}
#support-main .myportal .case-footer {
border-top: 1px solid #ccc;
margin-top: 20px;
padding: 25px 20px 0;
}
#support-main .myportal .case-footer p {
margin-bottom: 5px;
}