i18n/src/messenger/webim/default.css

/*
 * Copyright 2005-2013 Evgeny Gryaznov
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* reset all */

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
ol,ul { list-style:none; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }

body {
	background: #FFFFFF url(images/header.gif) repeat-x;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 140%;
	color: #333333;
}

/* 100% height with footer, 200 px sidebar	 */

html, body {
	height: 100%;
}

body {
	min-width: 750px;
}

a {
	color: #2f7599;
}

#wrap400, #wrap700, #fixedwrap  {
	position:relative;
	margin: 0px auto -41px;
	height:auto !important;
	height:100%;
	min-height:100%;
}

#wrap400 {
	width: 100%;
	min-width:450px;
}

#wrap700 {
	width: 100%;
	min-width:750px;
}

#fixedwrap {
	width: 750px;
}	

.contentdiv {
	float:left;
	width: 100%;
}

.contentinner {
	margin-right: 210px;
	padding: 10px 60px 10px 20px;
	overflow: hidden;
}

.contentnomenu {
	padding: 10px 60px 10px 20px;
}

.empty_inner {
	height:40px;
}

#footer {
	background: white url(images/footer.gif) bottom repeat-x;
	font-size:11px;
	position:relative;

	min-height: 40px;
	height:40px;
	vertical-align:middle;

	width:100%;
	text-align: center;
}

#legal {
	clear: both;
	line-height: 30px;
	padding-top:10px;
	text-align: center;
	color: #375C69;
	margin-bottom: 0px;
}

#footer .flink {
	color: #2f7599;
	text-decoration: underline;
}

#togglediv { 
	float:right;
	padding-right:10px;
}

/* Header */

#header {
	width: 100%;
	height: 32px;
	margin: 0px -2px 10px 0px;
	padding-top: 10px;
	padding-bottom: 5px;
	background: url(images/graydot.gif) repeat-x left bottom;
	display: block;
}

#header {
	float: left;
}

img.left {
	float: left;
	margin-right: 15px;
}

#header h1 {
	font-size: 2em;
	line-height: 32px;
	color: #494949;
	margin-left: 40px;
}

#header h1 a {
	color: #494949;
}

#header a {
	text-decoration: none;
}

#title {
	float: left;
	display: inline;
}

#path {
	float: right;
	padding: 10px 20px 0px 0px;
	line-height: 22px;
	display: inline;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 185px;
	margin-left: -210px;
	margin-top: 20px;
	position:relative;
	line-height: 180%
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin-bottom: 20px;
}

#sidebar li ul {
}

#sidebar li li {
	margin: 0;
}

#sidebar h2 {
	text-transform: lowercase;
	margin-bottom: 10px;
	background: url(images/graydot.gif) repeat-x left bottom;
	font-size: 1.3em;
	font-weight: bold;
}

.locales a {
	color: #2f7599;
	font-size: 1em;
	text-decoration: none;
}

.locales .active a {
	color: #555;
}

.locales a:hover {
	text-decoration: underline;
}

.submenu a {
	padding-left: 15px;
	color: #2f7599;
	font-size: 1em;
	text-decoration: none;
}

.submenu a.inner { padding-left: 0px; }
.submenu span.small { font-size: 80%; padding-left: 5px; }

.submenu .active a {
	background: url(images/li.gif) no-repeat left 1px;
	color: #555;
}

.submenu .active a.inner {
	background: none;
}

.submenu a:hover {
	text-decoration: underline;
}

/* form, tabbed form */

.mform {
	background: url(images/loginbg.gif);
	clear: both;
	width: 100%;
}

.tabs {
	float: right;
	display: inline;
	margin-right: 15px;
}

.tabs li {
	display: inline;
}

.tabs a {
	display: block;
	float: left;
	padding: 2px 9px 3px 9px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #2f7599;
}

.tabs li.active a {
	background: url(images/loginbg.gif);
	border-left:1px solid #bbbbbb;border-top:1px solid #bbbbbb;border-right:1px solid #bbbbbb;
	color: #000;
	text-decoration: none;
}

.formtop, .formbottom, .formtopi, .formbottomi { height: 15px;}
.formtop { background: url(images/logincrnrt.gif) no-repeat top right;}
.formtopi { background: url(images/logincrnlt.gif) no-repeat top left; }
.formbottom { background: url(images/logincrnrb.gif) no-repeat bottom right; }
.formbottomi { background: url(images/logincrnlb.gif) no-repeat bottom left; }
.forminner { margin: 0px 15px;}
.forminner p { margin-bottom: 1em; }

/* fieldForm */

.fieldForm {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	width: 100%;
}

.packedFormField {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	float:left;
	margin-right:25px;
	margin-bottom:8px;
}

div.errinfo {
	color: #c13030;
}	

.field {
	width: 100%;
	margin-top: 5px;
}

.fheader {
	margin: 8px auto 8px;
}

.flabel {
	position: relative;
	margin: 8px auto 2px;
	color: black;
}

.fleftlabel {
	float: left;
	width: 11em;
} 

.flabel span.required {
	font-size:8.0pt;
	color:red;
	font-weight: bold;
}

.field .subfield {
	padding-left: 30px;
	background: url(images/subitem.gif) no-repeat 10px 2px;
}

.forminner .level0{
}

.forminner .level1{
	padding-left: 20px;
}

.fieldinrow {
	min-width: 300px;
	display: inline;
	float:left;
	width: 45%;
}

.fvalue {
	float: left;
}

.fvaluewithta {
	float: left;
	width: 67%;
}

.fvaluewithta textarea {
	width: 100%;
}

.fvaluenodesc {
}

.fvalueframe {
	overflow: auto;
	width: 100%;
}

.fvalueframe iframe {
	border: solid 1px #999;
}
	
.fdescr {
	float:left;
	padding-left:10px;
	color: #676767;
	font-size: 10px;
	min-width: 200px;
}

.fbutton { 
	background: url(images/formline.gif) repeat-x;
	margin-top: 20px;
	padding-top: 10px;
}

.fbutton .links {
	float: right;
	margin-top: 5px;
}

.fbutton .submitbutton {
	float: left;
}

.formauth {
}

textarea.wide {
	border:1px solid #878787;
	overflow:auto;
	width: 95%;
}

input.wide {
	border: 1px solid #878787;
	color: #333;
	line-height: normal;
	width: 95%;
}

input.formauth {
	border: 1px solid #878787;
	color: #333;
	margin-right:15px;
	padding-right: 0px;	
}

#formmessage {
	border: 1px solid #4C96D4;
	background-color: #E7F1F9;
	padding: 8px 11px;
	font-size: 0.85em;
	font-weight:bold;
	max-width: 700px;
	margin: -10px 2px 10px;
	color: #515151;
}

#offwarn {
	border: 1px solid #4CD496;
	background-color: #E7F9F1;
	color: #515151;
	padding: 8px 11px;
	font-size: 0.85em;
	font-weight:bold;
	line-height: 140%;
	margin: 0px;
}

#offwarn img {
	margin-top: .4em;
	float: left;
	padding-right: 10px;
}

.asterisk {
	padding: 10px 20px;
}

/* tables */

.tabletool {
	float: right;
}

.tabletool a {
	color: #296685;
	vertical-align: top;
	padding-left: 4px;
}

.tabletitle {
	background: url(images/graydot.gif) repeat-x left bottom;
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 1.4em;
	margin: 10px 0px 20px;
	padding-bottom: 10px;
	color: #1D485E;
	font-weight: bold;
}

table.list, table.translate, table.statistics {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	background: #fff;
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

table.list th, table.translate th, table.statistics th {
	font-size: 1.2em;
	font-weight: normal;
	padding: 10px 8px;
	border-bottom: 2px solid #2F7598;
}

table.list th, table.translate th { color: #1D485E; }
table.statistics th { color: #2F7598; }

table.list td, table.statistics td {
	color: #2f7599;
	padding: 10px 8px;
	border-bottom: 1px solid #ccc;
}

table.translate td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #515151;
	padding: 2px 8px;
	border-bottom: 1px solid #ccc;
}

table.list td a.man {
	background: url(images/tbliclogin.gif) no-repeat left center;
	padding-left: 15px;
}

table.list tbody tr:hover td, table.list tbody tr:hover td a, table.statistics tbody tr:hover td {
	color: #1D485E;
}

table.list td.level0{
}

table.list td.level1{
	padding-left: 20px;
}

/* awaiting */

table.awaiting {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	background: #fff;
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

table.awaiting th {
	font-size: 1.2em;
	font-weight: normal;
	color: #1D485E;
	padding: 10px 8px;
	border-bottom: 2px solid #2F7598;
	text-align: center;
}

table.awaiting th.first {
	text-align: left;
}

table.awaiting table.inner {
	border: none;
	width: 100%;	
}

table.awaiting table.inner .icon {
	width: 30px;
	text-align: center;
}

table.awaiting td.visitor {
	color: #296685;
	border-bottom: 1px solid #ccc;
	padding: 10px 8px;
	margin: 0px;
}

.awaiting .visitor a { color: #296685; }
.awaiting tr:hover .visitor, .awaiting tr:hover .visitor a { color: #1D485E; }

.awaiting tr.ban .visitor, .awaiting tr.ban .visitor a { color: #9AC8E0; } 
.awaiting tr.ban:hover .visitor, .awaiting tr.ban:hover .visitor a { color: #4C9CC8; } 

.awaiting tr.inwait .visitor, .awaiting tr.inwait a { font-weight: bold; } 
.awaiting tr.inprio .visitor, .awaiting tr.inprio a { font-weight: bold; font-size: 1.05em; } 
.awaiting tr.inchat .visitor, .awaiting tr.inchat .visitor a { color: #777; }
.awaiting tr.inchat:hover .visitor, .awaiting tr.inchat:hover .visitor a { color: #444; } 
.awaiting tr.inchat a { text-decoration: none; }

.firstmessage {
	text-align: right;
	font-size: 0.8em;
	padding-right: 10px;
}

.firstmessage a {
	text-decoration: none;
}

.firstmessage a:hover {
	text-decoration: underline;
}

#connstatus {
	float:right;
	margin: 10px 10px;
}

#connlinks {
	margin: 10px 10px;
}

#connlinks a {
	color: #777;
	text-decoration: none;
}

#connlinks a:hover {
	text-decoration: underline;
}

/* online operators */

#onlineoperators {
	padding-right: 10px;
	float: right;
}

/* search */

#searchtext {
	float:left;
	display: inline;
	margin:7px 20px 5px 0px;
	width:60%;
	padding-right:5px;
}

.searchctrl {
	float: left;
	margin:7px 20px 5px 0px;
	padding-right:5px;
	display: inline;	
}

#searchtext input {
	width: 100%;
	margin: 0px;
}

#searchbutton {
	float:left;
}

/* login */

#loginsmallpane {
	float: right;
	padding: 10px 15px 0px 0px;
	margin-right: 0px;
	line-height: 22px;
	display: inline;
}

#loginsmallpane input {
	margin: 0px 3px;
	padding: 0px 2px;
}

#loginsmallpane .butt {
	height: 1.3em;
	border: 0px;
	background: none;
}

#loginsmallpane .butt:hover {
	background: #aaa;
}

#loginintro {
	width: 400px;
	margin: 10px 30px;
}

#loginpane {
	width: 400px;
	margin: 30px 30px;
}

#loginpane .header h2 {
	font-size: 2em;
	margin-bottom: 0.9em;
	padding-bottom: 0.8em;
	border-bottom: 2px solid #2F7598;
}

/* nice button */

#confirmpane {
	width:450px;
	margin:0px auto 5px;
	padding-top: 70px;
}

.nicebutton {
	border: none;
	float: left;
	margin-left: 30px;
}

.submit a {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 35px;
	color: #000000;
	text-decoration: none;
}

.submit {
	background: url(images/submitbg.gif) repeat-x;
	vertical-align: top;
}


/* thread log */

.logpane {
	margin: 10px 0px;
	line-height: 150%;
}

.logpane .header {
	padding-bottom: 0.8em;
	border-bottom: 2px solid #2F7598;
}

.logpane .wlabel {
	width: 10em;
	float: left;
	margin-right:10px;
}

.logpane .wvalue {
	float: left;
}

/* dashboard */

#dashboard {
	width: 100%;
}

.dashitem {
	width:33%;
	margin: 0px 2em 5em 0px;
	padding: 5px 2em 5em;
	vertical-align: top;
}

.dashitem:hover {
}

.dashitem a {
	padding-top:2px;
	padding-bottom: 10px;
	display: block;	
}

.dashitem img, #dashlocalesPopup h2 img {
	float: left;
	padding-right:10px;
}

#dashlocalesPopup h2 img {
	margin-top: -3px;
}

#dashlocalesPopup .locales {
	line-height: 180%;
	margin-left:10px;
}

#dashlocalesPopup h2 {
	font-size: 1.5em;
	margin-bottom: 0.9em;
	padding: 5px 30px 0.8em 0px;
	border-bottom: 2px solid #2F7598;
}

#dashlocalesPopupClose {
	float: right;
	position:absolute;
	right:5px;
	top:5px;
}

#dashlocalesPopup {
	display:none;  
	position:fixed;  
	_position:absolute; /* ie6*/  
	background:#FFFFFF;  
	border:2px solid #2F7598;  
	z-index:110;  
	padding:1em 1em;  
	font-size:1em;
}

#backgroundPopup{  
	display:none;  
	position:fixed;  
	_position:absolute; /* ie6*/  
	height:100%;
	opacity: .5;
	width:100%;  
	top:0;  
	left:0;  
	background:#000000;  
	border:1px solid #cecece;  
	z-index:101;  
}  

/* install */

#install li {
	list-style-type: circle;
	list-style-position: inside;
	margin-left: 2em;
}

#check-nv, #check-nm {
	color: #2f7599;
	text-decoration: none;
}

#check-nv:hover, #check-nm:hover {
	text-decoration: underline;
}


/* chat */

.message {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #4F4F4F;
	padding: 15px 0px 0px 0px;
	line-height: 17px;
}

.message span.time {
	color: #000000;
}

.message span.nuser {
	color: #B11E23;
	font-weight: bold;
}

.message span.nagent {
	font-weight: bold;
}

.message span.minf {
	color: #1E48B1;
	font-size: 11px;
}

.message span.mevent {
	color: #A1A1A1;
	font-size: 11px;
}

.message span.mhidden {
	color: #A1A1A1;
	font-size: 11px;
}

.message span.mconn {
	color: #A1A1A1;
	font-size: 11px;
}

/* updates */

#news {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin-bottom:15px;
	padding:4px;
}

.newstext {
	margin-bottom:1em;
}

/* rtl rules */

.lrtl .dashitem img, .lrtl #dashlocalesPopup h2 img, .lrtl #offwarn img {
	float: right;
	padding-right:0px;
	padding-left:10px;
}

.lrtl .fleftlabel {
	float: right;
	width: 11em;
}

.lrtl .fdescr {
	float:right;
	padding-right:10px;
}


.lrtl .field .subfield {
	padding-right: 30px;
	background: url(images/subitem_rtl.gif) no-repeat 99% 2px;
}


.lrtl .fvalue {
	float: right;
}

.lrtl .logpane .wlabel {
	float: right;
	margin-left:10px;
}

.lrtl .logpane .wvalue {
	float: right;
}

.lrtl .fvaluewithta {
	float: right;
}

.lrtl #togglediv { 
	float:left;
	padding-left:10px;
}

/* invitation wait */

.ajaxWait {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
}