ajax_im.css

ajax 聊天室,实现多人聊天,无刷新!

html,body{
   width: 100%;
   height: 100%;
   overflow: hidden;
}

body {
   margin: 0px;
   padding: 0px;
   background-color: #e3eaf3;
   background-image: url(../images/logo.png);
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   width: 100%;
}

div {
   margin: 0px;
   padding: 0px;
}

a { color: #333; }

input, textarea {
   margin: 2px 4px 2px 4px;
   border: 1px solid #dddcd8;
   font-size: 12px;
}

.rcvdMessages, input {
   font-family: Tahoma, Verdana, Arial, sans-serif;
}

.rcvdMessages {
   display: block;
   position: absolute;
   left: 5px;
   right: 10px;
   margin-top: 5px;
   padding-top: 2px;
   padding-left: 2px;
   border-width: 1px;
   border-style: solid;
   border-color: #bfbcb8 #e0dcd8 #e0dcd8 #bfbcb8;
   background-color: #fff;
   overflow: auto;
   font-size: 11px;
   text-align: left;
}

.rcvdMessages a {
   color: #5c78cb;
}

.inputText {
   position: absolute;
   left: 5px;
   right: 10px;
   margin-top: 5px;
   height: 50px;
   border: 1px solid #bfbcb8;
   padding: 3px;
   font-family: Tahoma, sans-serif;
}

.imToolbar {
   position: absolute;
   left: 5px;
   right: 10px;
   margin-top: 5px;
   height: 16px;
}

.toolbarButton {
   cursor: pointer;
}

.userA { color: #8f3838; }
.userB { color: #30407b; }
.imHistory { color: #aaa; }

ul.sortable li { position: relative; }

ul.box {
   list-style-type: none;
   padding: 0px;
   margin: 0px;
   width: 100%;
   cursor: default;
}

ul.box li {
   color: #333;
   background-color: #fff;
   vertical-align: middle;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 12px;
   padding: 5px 3px 1px 3px;
   margin: 0;
}

ul.group {
   margin-left: 0px;
   padding-left: 0px;
}

ul.group li {
   padding: 0;
   margin: 0;
}

div#blContainer {
   display: block;
   position: absolute;
   left: 5px;
   right: 8px;
   margin-top: 66px;
   background-color: #fff;
   border-width: 1px;
   border-style: solid;
   border-color: #bfbcb8 #e0dcd8 #e0dcd8 #bfbcb8;
   text-align: left;
   overflow-x: hidden;
   overflow-y: auto;
}

div#blTopToolbar {
   display: block;
   position: absolute;
   left: 5px;
   right: 8px;
   height: 56px;
   margin-top: 5px;
   text-align: left;
   overflow: hidden;
}

div#blBottomToolbar {
   display: block;
   position: absolute;
   left: 5px;
   right: 8px;
   height: 41px;
   margin-top: 5px;
   text-align: right;
   overflow: hidden;
}

div#statusSettings {
   display: block;
   margin-top: 2px;
}

a.setFontLink {
   position: absolute;
   left: 105px;
   display: block;
   -moz-outline-style: none;
   text-decoration: none;
   width: 85px;
   height: 14px;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 10px;
   vertical-align: middle;
   background-color: #ebe6e1;
   padding: 2px;
   background-image: url(../images/default/arrow.png);
   background-position: center right;
   background-repeat: no-repeat;
   border: 1px solid #bfbcb8;
   overflow: hidden;
}

a.insertEmoticonLink {
   position: absolute;
   left: 284px;
   display: block;
   -moz-outline-style: none;
   text-decoration: none;
   width: 24px;
   height: 14px;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 10px;
   vertical-align: middle;
   background-color: #ebe6e1;
   padding: 2px;
   background-image: url(../images/default/arrow.png);
   background-position: center right;
   background-repeat: no-repeat;
   border: 1px solid #bfbcb8;
   overflow: hidden;
}

a.setFontSizeLink {
   position: absolute;
   left: 205px;
   display: block;
   -moz-outline-style: none;
   text-decoration: none;
   width: 24px;
   height: 14px;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 10px;
   vertical-align: middle;
   background-color: #ebe6e1;
   padding: 2px;
   background-image: url(../images/default/arrow.png);
   background-position: center right;
   background-repeat: no-repeat;
   border: 1px solid #bfbcb8;
   overflow: hidden;
}

a.setFontColorLink {
   position: absolute;
   left: 244px;
   display: block;
   -moz-outline-style: none;
   text-decoration: none;
   width: 24px;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 10px;
   vertical-align: middle;
   background-color: #ebe6e1;
   padding: 2px;
   background-image: url(../images/default/arrow.png);
   background-position: center right;
   background-repeat: no-repeat;
   border: 1px solid #bfbcb8;
   overflow: hidden;
}

a#curStatus {
   display: block;
   -moz-outline-style: none;
   text-decoration: none;
   width: 165px;
   height: 14px;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 10px;
   background-color: #ebe6e1;
   padding: 2px;
   background-image: url(../images/default/arrow.png);
   background-position: center right;
   background-repeat: no-repeat;
   border: 1px solid #ebe6e1;
   overflow: hidden;
}

a#curStatus:hover {
   border: 1px solid #bfbcb8;
}

div.itemList {
   display: none;
   position: absolute;
   border: 1px solid #bfbcb8;
   background-color: #ebe6e1;
   z-index: 1000;
}

div.itemList a {
   padding: 1px 3px 1px 3px;
   display: block;
   font-family: Tahoma, Arial, sans-serif;
   font-size: 10px;
   background-color: #ebe6e1;
   text-decoration: none;
}

div.itemList a:hover {
   background-color: #e1ebf7;
}

div#statusList {
   width: 165px;
}

div#fontSizeList {
   width: 28px;
}

div#fontSizeList a {
   width: 22px;
}

div#fontsList {
  width: 89px;
  overflow: hidden;
}

div#fontsList a {
   width: 120px;
}

input#customStatus {
   position: absolute;
   padding: 1px;
   border: 1px solid #000;
   margin: 0px;
   font-size: 11px;
   width: 114px;
}