/*
 * My Account Note
 * Should be ported into backend and supplier as well.
 */

div.my-account-note {
    margin: 5px;
    padding: 0px 0px 5px 0px;
    max-width: 947px;
}

div.my-account-ajax-row div.my-account-note {
    margin-right:0px!important;
}

div.my-account-note a.action {
    width: 100px;
    text-align: center;
    float: right;
    margin-right: 0px;
    margin-left: 10px;
}

div.my-account-note p {
    font-size: 14px;
    line-height: 16px;
}

div.my-account-note p.text a {
    color: #0033ff;
}

div.my-account-note p.text a:hover {
    color: #6699ff;
}

div.my-account-note span.user-info {
    width: 80px;
    height: 80px;
    text-align: center;
}

div.my-account-note-customer span.user-info {
    float: left;
}

div.my-account-note-supplier span.user-info {
    float: left;
}

div.my-account-note-support span.user-info {
    float: right;
}

div.my-account-note-system span.user-info {
    float: right;
}

div.my-account-note-admin span.user-info {
    float: right;
}

div.my-account-note span.user-info p {
    margin: 5px 0px 0px 0px;
    padding: 0;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    height: 16px;
    overflow: hidden;
}

div.my-account-note span.user-info img.avatar {
    height: 60px;
}

div.my-account-note span.message {
    width: 850px;
    min-height: 80px;
    position: relative;
}

div.my-account-note span.subject {
    width: 850px;
    min-height: 30px;
    position: relative;
}

div.my-account-note-customer span.subject {
    float: left;
}

div.my-account-note-supplier span.subject {
    float: left;
}

div.my-account-note-support span.subject {
    float: right;
}

div.my-account-note-system span.subject {
    float: right;
}

div.my-account-note-admin span.subject {
    float: right;
}

div.my-account-note-customer span.message {
    float: left;
}

div.my-account-note-supplier span.message {
    float: left;
}

div.my-account-note-support span.message {
    float: right;
}

div.my-account-note-system span.message {
    float: right;
}

div.my-account-note-admin span.message {
    float: right;
}

div.my-account-note span.message img.gray-arrow {
    position: absolute;
    top: 10px;
    height: 14px;
    width: 7px;
}

div.my-account-note-customer span.message img.gray-arrow {
    left: 3px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') 0 0;
}

div.my-account-note-supplier span.message img.gray-arrow {
    left: 3px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') 0 0;
}

div.my-account-note-support span.message img.gray-arrow {
    left: 840px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') -21px 0;
}

div.my-account-note-system span.message img.gray-arrow {
    left: 840px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') -21px 0;
}

div.my-account-note-admin span.message img.gray-arrow {
    left: 840px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') -21px 0;
}

div.my-account-note span.subject img.gray-arrow {
    position: absolute;
    top: 10px;
    height: 14px;
    width: 7px;
}

div.my-account-note-customer span.subject img.gray-arrow {
    left: 3px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') 0 0;
}

div.my-account-note-supplier span.subject img.gray-arrow {
    left: 3px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') 0 0;
}

div.my-account-note-support span.subject img.gray-arrow {
    left: 840px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') -21px 0;
}

div.my-account-note-system span.subject img.gray-arrow {
    left: 840px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') -21px 0;
}

div.my-account-note-admin span.subject img.gray-arrow {
    left: 840px;
    background:url('/static/images/template/public/gray-arrow-sprite.png') -21px 0;
}

div.my-account-note span.subject span.subject-box {
    margin: 0px 10px 10px 10px;
    height: 20px;
    width: 810px;
    padding: 5px;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    -border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

div.my-account-note-customer span.subject span.subject-box {
    background: #bbefc1;
    float: left;
}

div.my-account-note-supplier span.subject span.subject-box {
    background: #d7b7e7;
    float: left;
}

div.my-account-note-support span.subject span.subject-box {
    background: #b2dee2;
    float: right;
}

div.my-account-note-system span.subject span.subject-box {
    background: #e7fac4;
    float: right;
}

div.my-account-note-admin span.subject span.subject-box {
    background: #ffcbc8;
    float: right;
}

/* ffb673 */

div.my-account-note span.subject span.subject-box p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
    margin-top: 0px;
}

div.my-account-note span.subject span.subject-box p.text {
    min-height: 35px;
}

div.my-account-note span.subject span.subject-box input[type='text'] {
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    height: 20px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: normal;
    color: #4d4d4d;
    margin: 0px;
    font-size: 14px;
    padding: 0px;
}

div.my-account-note span.subject span.subject-box input[type='text']:focus {
    border: none;
    outline: none;
    color: #000000;
}

div.my-account-note span.message span.message-ajax-loading {
    margin: 0px 10px;
    width: 820px;
    padding: 0px;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    -border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    text-align: center;
    background: #F5EE92;
    line-height: 28px;
    font-size: 16px;
    position: relative;
    top: 2px;
}

div.my-account-note-customer span.message span.message-ajax-loading, div.my-account-note-supplier span.message span.message-ajax-loading {
    float: left;
}

div.my-account-note-support span.message span.message-ajax-loading, div.my-account-note-system span.message span.message-ajax-loading, div.my-account-note-admin span.message span.message-ajax-loading {
    float: right;
}

div.my-account-note span.message span.message-ajax-loading span.message-ajax-loading-spinner {
    display: block;
    margin: 0px auto 5px;
}

div.my-account-note span.message span.message-ajax-error {
    margin: 0px 10px;
    width: 820px;
    padding: 0px;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    -border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    text-align: center;
    background: #FF7D73;
    line-height: 28px;
    font-size: 16px;
    position: relative;
    top: 2px;
}

div.my-account-note-customer span.message span.message-ajax-error, div.my-account-note-supplier span.message span.message-ajax-error {
    float: left;
}

div.my-account-note-support span.message span.message-ajax-error, div.my-account-note-system span.message span.message-ajax-error, div.my-account-note-admin span.message span.message-ajax-error {
    float: right;
}

div.my-account-note span.message span.message-box {
    margin: 0px 10px 10px 10px;
    min-height: 55px;
    width: 820px;
    padding: 5px;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    -border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 5px 0px 0px 0px;
}

div.my-account-note-customer span.message span.message-box {
    background: #bbefc1;
    float: left;
}

div.my-account-note-supplier span.message span.message-box {
    background: #d7b7e7;
    float: left;
}

div.my-account-note-support span.message span.message-box {
    background: #b2dee2;
    float: right;
}

div.my-account-note-system span.message span.message-box {
    background: #e7fac4;
    float: right;
}

div.my-account-note-admin span.message span.message-box {
    background: #ffcbc8;
    float: right;
}

div.my-account-note span.message span.message-box p {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
    margin-top: 0px;
    padding: 0px 5px;
}

div.my-account-note span.message span.message-box p.text {
    min-height: 35px;
    padding: 0px 5px;
}

div.my-account-note span.message span.message-box p.form {
    padding: 0px 5px;
    margin: 0px 5px 5px 5px;
    font-size: 14px;
    line-height: 18px;
}

div.my-account-note span.message span.message-box p.form-small {
    font-size: 12px;
    line-height: 18px;
    margin-top: 0px;
}

div.my-account-note span.message span.message-box p.form input[type="text"], div.my-account-note span.message span.message-box p.form-small input[type="text"] {
    background: #ffffff;
    color: #000000;
    border: 1px solid #c6c6c6;
    outline: none;
    padding: 3px 5px;
    width: 242px;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    margin-bottom: 5px;
    margin-right: 10px;
}

div.my-account-note span.message span.message-box p.form input[type="text"]:disabled {
    background: #f2f2f2;
    color: #666666;
    -webkit-text-fill-color: #666666;
}

div.my-account-note span.message span.message-box p.form input[type="text"].small {
    width: 108px;
}

div.my-account-note span.message span.message-box p.form select {
    background: #ffffff;
    color: #000000;
    border: 1px solid #c6c6c6;
    outline: none;
    padding: 0px;
    width: 254px;
    height: 22px;
    line-height: 14px;
    font-size: 12px;
    margin-bottom: 5px;
    margin-right: 10px;
}

div.my-account-note span.message span.message-box p.form select.small {
    width: 120px;
}

div.my-account-note span.message span.message-box p.form select:disabled {
    background: #f2f2f2;
    color: #666666;
    -webkit-text-fill-color: #666666;
}

div.my-account-note span.message span.message-box div.attachments {
    margin-top: 0px;
    font-size: 12px;
    line-height: 16px;
    border-top: 1px solid #C6C6C6;
    padding: 5px;
}

div.my-account-note span.message span.message-box div.attachments a {
    color: #333333;
}

div.my-account-note span.message span.message-box p.response-settings {
    width: 20px;
    color: #4d4d4d;
    padding: 0px;
    margin: 0px;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
    vertical-align: bottom;
}

div.my-account-note span.message span.message-box p.response-settings img {
    height: 18px;
}

div.my-account-note-customer span.message span.message-box p.response-settings {
    float: right;
    margin-right: 5px;
    text-align: right;
}

div.my-account-note-supplier span.message span.message-box p.response-settings {
    float: right;
    margin-right: 5px;
    text-align: right;
}

div.my-account-note-support span.message span.message-box p.response-settings {
    float: left;
    margin-left: 5px;
    text-align: left;
}

div.my-account-note-system span.message span.message-box p.response-settings {
    float: left;
    margin-left: 5px;
    text-align: left;
}

div.my-account-note-admin span.message span.message-box p.response-settings {
    float: left;
    margin-left: 5px;
    text-align: left;
}

div.my-account-note span.message span.message-box p.response-timestamp {
    width: 200px;
    color: #4d4d4d;
    padding: 0px;
    margin: 0px;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
    vertical-align: bottom;
}

div.my-account-note-customer span.message span.message-box p.response-timestamp {
    float: right;
    margin-right: 5px;
    text-align: right;
}

div.my-account-note-supplier span.message span.message-box p.response-timestamp {
    float: right;
    margin-right: 5px;
    text-align: right;
}

div.my-account-note-support span.message span.message-box p.response-timestamp {
    float: left;
    margin-left: 5px;
    text-align: left;
}

div.my-account-note-system span.message span.message-box p.response-timestamp {
    float: left;
    margin-left: 5px;
    text-align: left;
}

div.my-account-note-admin span.message span.message-box p.response-timestamp {
    float: left;
    margin-left: 5px;
    text-align: left;
}

div.my-account-note span.message span.message-box p.response-rating {
    font-size: 13px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding: 0px 5px;
    float: right;
    width: 575px;
}

div.my-account-note span.message span.message-box p.response-rating span {
    padding: 0px;
    font-size: 13px;
    line-height: 20px;
    height: 20px;
    vertical-align: bottom;
    margin-left: 5px;
}

div.my-account-note span.message span.message-box p.response-rating span img {
    position: relative;
    top: 2px;
}

div.my-account-note span.message span.message-box p.response-rating span img.notrated {
    cursor:pointer;
}

/* Add Note Stuff */
div.my-account-note span.message span.message-box textarea {
    background: transparent;
    border: none;
    outline: none;
    width: 99%;
    height: 55px;
    overflow-x: none;
    overflow-y: auto;
    resize: none;
    font-family: 'Ubuntu', sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #4d4d4d;
    padding: 0px 5px;
}

div.my-account-note span.message span.message-box textarea:focus {
    color: #000000;
}

div.my-account-note span.message span.message-box textarea.active-textarea {
    color: #000000;
}

div.my-account-note span.attachments {
    float: left;
    font-size: 13px;
    line-height: 22px;
    width: 400px;
    margin-left: 90px;

}

div.my-account-note-admin span.attachments, div.my-account-note-support span.attachments {
    margin-left: 18px;
}

/* THIS IS A BAD PATCH - Should be moved to joshua.css probably - or fix the wrapper */
div#orders-view-communication-sales div.my-account-note-admin span.attachments, div#orders-view-communication-sales div.my-account-note-support span.attachments {
    margin-left: 28px;
}

div.my-account-note span.attachments input[type="file"] {
    margin-bottom: 5px;
    float: left;
}

div.my-account-note span.attachments a.add-attachment {
    width: 150px;
    text-align: center;
    margin-left: 0px;
    float: left;
}

div.my-account-note div.actions {
    margin-right: 15px;
    font-size: 14px;
    float: right;
}

div.my-account-note-admin div.actions, div.my-account-note-support div.actions {
    margin-right: 80px;
    font-size: 14px;
    float: right;
}

div.my-account-note div.actions a {
    float: right;
}

div.my-account-note span.attachments a.remove-file {
    margin-top: 1px;
    float: left;
    margin-left: 10px;
}

span.my-account-note-add-comment-form-attachments-attachment {
    float: left;
    margin-bottom: 3px;
    width: 400px;
}

/*
 * Supplier-specific form classes
 */
span.ticket-item-line-field {
    float: left;
    height: 24px;
    line-height: 24px;
    width: 600px;
}

span.ticket-item-line-value {
    float: left;
    width: 200px;
    height: 24px;
    line-height: 24px;
}

span.ticket-item-line-value > input[type="text"] {
    width: 85px!important;
    margin-right: 0px;
    float: right;
}
