Issues:
1/* Session messages ========================================================= */
2
3.sess_messages {
4 margin-bottom:10px;
5}
6
7.sess_messages div{
8 padding:10px;
9 padding-left:30px;
10 background:#f9f9f9;
11 line-height:16px;
12 margin-bottom:2px;
13 color: #FFF;
14}
15
16.sess_messages div a { color:#ecf0f1; }
17.sess_messages div a:hover { color:#d35400; }
18
19.sess_messages .message_info {
20 background:url("../images/icons/info.png") no-repeat 10px center #2980b9;
21}
22.sess_messages .message_success {
23 background:url("../images/icons/accept.png") no-repeat 10px center #27ae60;
24}
25.sess_messages .message_error {
26 background:url("../images/icons/error.png") no-repeat 10px center #e74c3c;
27}
28.sess_messages .message_info_in_page {
29 color: #555;
30 padding: 10px 15px;
31}
32.ui_message {
33 padding: 15px;
34 margin-bottom: 20px;
35 background-color: #E4F1FE;
36 border-color: #2980b9;
37 border-width: 1px;
38 border-style: solid;
39 border-left-width: 10px;
40 color: #555;
41}
42.ui_message.ui_warning {
43 background-color: #FDE3A7;
44 border-color: #f39c12;
45}
46.ui_message.ui_error {
47 background-color: #F1A9A0;
48 border-color: #e74c3c;
49}
50#alert_wrap {
51 box-sizing: border-box;
52 overflow: hidden;
53 width: 320px;
54}
55#alert_wrap .ui_message {
56 margin-bottom: 0;
57}
58/* Indicators =============================================================== */
59
60.loading{
61 padding-left: 20px;
62 background:url("../images/loader16.gif") no-repeat left center;
63}
64
65.loading-icon{
66 display:block;
67 width:16px;
68 height:16px;
69 background:url("../images/loader16.gif") no-repeat left center;
70}
71
72.loading-panel{
73 background:url("../images/loader24.gif") no-repeat center center;
74}
75
76.is_private, .is_closed {
77 display: inline-block;
78 cursor: help;
79 width:16px;
80 height:16px;
81 background:url("../images/icons/eye.png") no-repeat;
82}
83.content_list_item .is_private, .widget_content_list .is_private, .content_list .is_private,
84.content_list_item .is_closed, .widget_content_list .is_closed {
85 height:14px;
86}
87
88.is_closed{
89 background:url("../images/icons/lock.png") no-repeat;
90}
91
92.is_online{
93 background: #40d47e;
94 color: #FFF;
95
font-size: 11px;
96 line-height: 15px;
97 padding: 1px 6px;
98 border-radius: 4px;
99 display: inline-block;
100}
101
102/* Menu icons =============================================================== */
103
104.icon-accept, .menu .lock .item { background-image: url("../images/icons/lock.png"); }
105.icon-accept, .menu .accept .item { background-image: url("../images/icons/accept.png"); }
106.icon-add, .menu .add .item { background-image: url("../images/icons/add.png"); }
107.icon-edit, .menu .edit .item { background-image: url("../images/icons/edit.png"); }
108.icon-delete, .menu .delete .item { background-image: url("../images/icons/delete.png"); }
109.icon-save, .menu .save .item { background-image: url("../images/icons/save.png"); }
110.icon-save_draft, .menu .save_draft .item { background-image: url("../images/icons/save_draft.png"); }
111.icon-draft, .menu .draft .item { background-image: url("../images/icons/draft.png"); }
112.icon-return_for_revision, .menu .return_for_revision .item { background-image: url("../images/icons/return_for_revision.png"); }
113.icon-return, .menu .return .item { background-image: url("../images/icons/return.png"); }
114.icon-cancel, .menu .cancel .item { background-image: url("../images/icons/cancel.png"); }
115.icon-key, .menu .key .item { background-image: url("../images/icons/key.png"); }
116.icon-page_gear, .menu .page_gear .item { background-image: url("../images/icons/page_gear.png"); }
117.icon-folder_add, .menu .folder_add .item { background-image: url("../images/icons/folder_add.png"); }
118.icon-folder_edit, .menu .folder_edit .item { background-image: url("../images/icons/folder_edit.png"); }
119.icon-folder_delete, .menu .folder_delete .item { background-image: url("../images/icons/folder_delete.png"); }
120.icon-user_add, .menu .user_add .item { background-image: url("../images/icons/user_add.png"); }
121.icon-user_delete, .menu .user_delete .item { background-image: url("../images/icons/user_delete.png"); }
122.icon-group, .menu .group .item { background-image: url("../images/icons/group.png"); }
123.icon-group_add, .menu .group_add .item { background-image: url("../images/icons/group_add.png"); }
124.icon-group_delete, .menu group_delete .item { background-image: url("../images/icons/group_delete.png"); }
125.icon-profile, .menu .profile .item { background-image: url("../images/icons/profile.png"); }
126.icon-messages, .menu .messages .item { background-image: url("../images/icons/messages.png"); }
127.icon-info, .menu .info .item { background-image: url("../images/icons/info.png"); }
128.icon-blog, .menu .blog .item { background-image: url("../images/icons/blog.png"); }
129.icon-settings, .menu .settings .item { background-image: url("../images/icons/settings.png"); }
130.icon-cpanel, .menu .cpanel .item { background-image: url("../images/icons/cpanel.png"); }
131.icon-more, .menu .more > .item { background-image: url("../images/icons/folders.png"); }
132.icon-logout, .menu .logout .item { background-image: url("../images/icons/logout.png"); }
133.icon-checklist, .menu .checklist .item { background-image: url("../images/icons/checklist.png"); }
134.icon-onchecklist, .menu .onchecklist .item { background-image: url("../images/icons/onchecklist.png"); }
135.icon-images, .menu .images .item { background-image: url("../images/icons/images.png"); }
136.icon-invites, .menu .invites .item { background-image: url("../images/icons/signature.png"); }
137.icon-balance, .menu .balance .item { background-image: url("../images/icons/coin.png"); }
138.icon-transfer, .menu .transfer .item { background-image: url("../images/icons/transfer.png"); }
139.icon-coins_add, .menu .coins_add .item { background-image: url("../images/icons/coins_add.png"); }
140.icon-coins_delete, .menu .coins_delete .item { background-image: url("../images/icons/coins_delete.png"); }
141.icon-basket_put, .menu .basket_put .item { background-image: url("../images/icons/basket_put.png"); }
142.icon-basket_remove, .menu .basket_remove .item { background-image: url("../images/icons/basket_remove.png"); }
143.icon-basket, .menu .basket .item { background-image: url("../images/icons/basket.png"); }
144.icon-newspaper_add, .menu .newspaper_add .item { background-image: url("../images/icons/newspaper_add.png"); }
145.icon-newspaper_delete, .menu .newspaper_delete .item { background-image: url("../images/icons/newspaper_delete.png"); }
146.icon-bell, .menu .bell .item { background-image: url("../images/icons/bell.png"); }
147
148/* Misc icons =============================================================== */
149
150.medal-icon-16{ width:16px; height:32px; }
151.medal1-16 { background:url("../images/icons/medal_gold.png") no-repeat center center; }
152.medal2-16 { background:url("../images/icons/medal_silver.png") no-repeat center center; }
153.medal3-16 { background:url("../images/icons/medal_bronze.png") no-repeat center center; }
154
155.medal-icon-32{ width:32px; height:64px; }
156.medal1-32 { background:url("../images/icons32/medal_gold.png") no-repeat center center; }
157.medal2-32 { background:url("../images/icons32/medal_silver.png") no-repeat center center; }
158.medal3-32 { background:url("../images/icons32/medal_bronze.png") no-repeat center center; }
159
160/* Misc Icons =============================================================== */
161
162.medal-icon-16{ width:16px; height:32px; }
163.medal1-16 { background:url("../images/icons/medal_gold.png") no-repeat center center; }
164.medal2-16 { background:url("../images/icons/medal_silver.png") no-repeat center center; }
165.medal3-16 { background:url("../images/icons/medal_bronze.png") no-repeat center center; }
166
167.medal-icon-32{ width:32px; height:64px; }
168.medal1-32 { background:url("../images/icons32/medal_gold.png") no-repeat center center; }
169.medal2-32 { background:url("../images/icons32/medal_silver.png") no-repeat center center; }
170.medal3-32 { background:url("../images/icons32/medal_bronze.png") no-repeat center center; }
171
172/* Pills Menu =============================================================== */
173
174.pills-menu,
175.pills-menu li,
176.pills-menu-small,
177.pills-menu-small li{
178 margin:0; padding:0; list-style:none;
179}
180
181.pills-menu{
182 margin-bottom:20px;
183}
184
185.pills-menu,
186.pills-menu-small {
187 overflow:hidden;
188 clear:both;
189}
190
191.pills-menu li,
192.pills-menu-small li {
193 float:left;
194 padding:0 10px;
195 border-radius: 3px;
196 background: #ECF0F1;
197}
198
199.pills-menu li {
200 height:32px;
201 line-height:32px;
202 font-size:18px;
203 margin-right: 12px;
204}
205
206.pills-menu-small li {
207 height:24px;
208 line-height:24px;
209
font-size:14px;
210 margin-right: 6px;
211}
212
213.pills-menu li.active,
214.pills-menu-small li.active{
215 background:#34495E;
216 color:#FFF;
217}
218
219.pills-menu li a,
220.pills-menu-small li a { color:#7f8c8d; text-decoration: none; }
221.pills-menu li a:hover,
222.pills-menu-small li a:hover { color:#d35400; }
223
224.pills-menu li.active a,
225.pills-menu-small li.active a { color:#FFF; }
226
227.pills-menu li .counter,
228.pills-menu-small li .counter { color:#BDC3C7;
font-size:11px; }
229
230.pills-menu li.active .counter,
231.pills-menu-small li.active .counter { color:#A3CAE0; }
232
233/* Tabs Menu =============================================================== */
234
235.tabs-menu{
236 margin-bottom: 20px;
237 position:relative;
238 clear: both;
239}
240
241.tabs-menu ul,
242.tabs-menu li {
243 margin:0; padding:0;
244 list-style:none;
245}
246
247.tabs-menu > ul {
248 border-bottom: solid 1px #B3C2C9;
249 height:33px;
250 clear:both;
251}
252
253.tabs-menu .tabbed li {
254 float:left;
255
font-size:15px;
256 margin-right: 3px;
257 background:#FFF;
258}
259
260.tabs-menu .tabbed li a {
261 text-decoration: none;
262 display:inline-block;
263 padding:0 10px;
264 border: solid 1px #FFF;
265 border-bottom: transparent;
266 height:32px;
267 line-height:32px;
268}
269
270.tabs-menu .tabbed li a {
271 color:#95a5a6;
272}
273
274.tabs-menu .tabbed li a:hover {
275 background-color:#e1ebef;
276 color:#34495e;
277}
278
279.tabs-menu .tabbed li.active a,
280.tabs-menu .tabbed li.active a:hover {
281 cursor:default;
282 color:#34495e;
283 border: solid 1px #B3C2C9;
284 border-bottom: none;
285 background-color:#FFF;
286 margin: 1px 0 0 0;
287}
288
289.tabs-menu li a .counter {
290 color:#34495e;
291
font-size:12px;
292 margin-top:-15px;
293 border-radius:10px;
294}
295
296.tabs-menu li.more > .item {
297 padding-right:5px;
298}
299
300.tabs-menu li.more > .item > span {
301 background-image: url("../images/icons/bullet_arrow_down.png");
302 background-repeat:no-repeat;
303 background-position: right center;
304 padding-right:18px;
305}
306
307.tabs-menu li.active a .counter { color:#68809B; }
308.tabs-menu li a:hover .counter { color:#68809B; }
309
310.tabs-menu li.folder > ul {
311 visibility:hidden;
312 position:absolute;
313 border: solid 1px #B3C2C9;
314 float:none;
315 margin-top:-1px;
316 margin-left: 1px;
317 z-index:1500;
318}
319
320.tabs-menu li.folder > ul li {
321 border:none;
322 width:100%;
323 float:none;
324}
325
326.tabs-menu li.folder > ul li a{
327 border:none;
328 border-radius: 0;
329 width:100%;
330 padding:0;
331}
332
333.tabs-menu li.folder > ul li a:hover {
334 color:#34495e;
335 border:none !important;
336}
337
338.tabs-menu li.folder > ul li a span{
339 padding:0 10px;
340}
341
342.tabs-menu li.folder:hover > ul {
343 visibility:visible;
344}
345
346.tabs-menu > select { display:none; }
347
348.controller_actions_menu {
349 float: right;
350 position: relative;
351
352}
353#body .controller_actions_menu ul.menu {
354 display: none;
355 position: absolute;
356 z-index: 1;
357 width: 300px;
358 right: 0;
359 border: 1px solid #dfe6ed;
360 box-shadow: 0 1px 3px rgba(0,0,0,.1);
361}
362#body .controller_actions_menu ul.menu li {
363 padding: 3px 0;
364 line-height: 16px;
365}
366.group_menu_title {
367 background-color: #e5ebf1;
368 background-image: url(../images/icons/menu.png);
369 background-repeat: no-repeat;
370 background-position: center right 11px;
371 border-radius: 2px;
372 color: #55677d;
373 padding: 11px 39px 11px 16px;
374 cursor: pointer;
375 display: block;
376}
377.group_menu_title.loading {
378 background-image: url(../images/loader16.gif);
379}
380.group_menu_title:hover, #body .controller_actions_menu > input:checked + .group_menu_title {
381 background-color: #dfe6ed;
382 border-radius: 2px 2px 0 0;
383}
384.controller_actions_menu > input { display:none; }
385#body .controller_actions_menu > input:checked + label + ul.menu {
386 display: block;
387}
388#body section .list_actions_menu .menu a {
389 padding: 4px 10px;
390
font-size: 14px;
391}
392.list_actions_menu .group_menu_title {
393 padding: 0;
394 display: block;
395 width: 38px;
396 height: 28px;
397 margin: 0 0 0 10px;
398}
399/* Panels =================================================================== */
400
401.gui-panel {
402 background: #F4F8FD;
403 border: solid 1px #B8D6FB;
404 margin: 20px 0;
405 padding:15px;
406 color: #B3C2C9;
407 box-sizing: border-box;
408 clear: both;
409}
410
411.gui-panel h3 {
412 margin-top:0;
413 margin-bottom: 5px;
414}
415
416.filter-panel {
417 padding:0;
418}
419
420.filter-panel .filter-link a {
421 display:block;
422 padding:7px 5px;
423 padding-left:10px;
424 text-decoration: none;
425 color: #68809B;
426}
427
428.filter-panel .filter-link a:hover {
429 background-color:#f4fafc;
430}
431
432.filter-panel .filter-link a span {
433 padding-left:20px;
434 background:url("../images/icons/search.png") no-repeat left center;
435}
436
437.filter-panel .filter-container {
438 padding:15px;
439 box-sizing: border-box;
440 clear: both;
441 position: relative;
442}
443
444.filter-close {
445 font-size: 0.9em;
446 line-height: 0.9em;
447 position: absolute;
448 top: 6px;
449 right: 9px;
450}
451.filter-close a {
452 color: #666;
453}
454
455.filter-panel .fields {
456 box-sizing: border-box;
457 clear: both;
458}
459
460.filter-panel .fields .title {
461 color:#68809B; text-shadow:0 1px 1px #fff;
462 margin-bottom:3px;
463}
464
465.filter-panel .input,
466.filter-panel select {
467 margin:0;
468}
469
470.filter-panel select { padding:3px 4px; }
471
472.filter-panel .fields .field{
473 min-height:50px;
474 width:49%;
475 margin-bottom: 15px;
476 box-sizing: border-box;
477}
478
479.filter-panel .fields .field:nth-child(even){
480 float:right;
481}
482
483.filter-panel .fields .field:nth-child(odd){
484 float:left;
485}
486
487.filter-panel .input_checkbox_list { overflow:hidden; }
488.filter-panel .input_checkbox_list label { float:left; margin-right: 5px; color:#34495e;
font-size:12px; }
489
490.filter-panel .buttons { overflow:hidden; clear: both; margin-top: 5px; }
491.filter-panel .buttons .button-submit { float:left; padding:8px; }
492.filter-panel .buttons .link { float:left; height:32px; line-height: 32px; margin-left: 10px; }
493.filter-panel .buttons .link a { color:#34495e; }
494.filter-panel .buttons .link a:hover { color:#d35400; }
495
496/* Lists ==================================================================== */
497
498.striped-list{}
499
500.striped-list .item{
501 padding: 10px 0;
502 border-bottom: dashed 1px #EDEDED;
503 clear: both;
504 width: 100%;
505 display: inline-block;
506 box-sizing: border-box;
507}
508
509.striped-list .item:last-child{
510 border:none;
511}
512
513.striped-list .item .position,
514.striped-list .item .icon,
515.striped-list .item .title,
516.striped-list .item .title-multiline,
517.striped-list .item .actions{
518 float: left;
519 margin-right: 15px;
520}
521
522.striped-list .item .icon img {
523 display: block;
524}
525
526.striped-list .item .position {
527 text-align:center;
528}
529
530.striped-list .item .actions{
531 float:right;
532 margin-right: 0;
533 color:#666;
534}
535
536.striped-list .item .actions:before {
537 content: attr(data-notice_title);
538 background-color: #2980b9;
539 color: #FFF;
540 display: inline-block;
541
font-size: 12px;
542 border-radius: 2px;
543 padding: 0 10px;
544}
545
546.striped-list.list-16 .item { min-height: 16px; line-height: 16px; }
547.striped-list.list-32 .item { min-height: 32px; line-height: 32px; }
548.striped-list.list-48 .item { min-height: 48px; line-height: 48px; }
549.striped-list.list-64 .item { min-height: 64px; line-height: 64px; }
550
551.striped-list.list-32 .item .position { width: 16px; height:32px; }
552.striped-list.list-64 .item .position { width: 32px; height:64px; }
553
554.striped-list .item .title-multiline {
555 line-height: 16px;
556 float:none;
557 padding-left:45px;
558}
559
560.striped-list .rate_value{
561 padding:5px 10px;
562 border:solid 1px #EDEDED;
563 width:40px;
564 text-align: center;
565 cursor: help;
566}
567
568.striped-list .rate_value.positive{ color:green; }
569.striped-list .rate_value.negative{ color:red; }
570.striped-list .rate_value.zero{ color:#CCCCCC; }
571
572/* Pagination =============================================================== */
573
574.pagebar {
575 clear: both;
576
font-size: 12px;
577 margin-bottom: 15px;
578 margin-top: 30px;
579}
580.pagebar_title {
581 color: #34495e;
582 margin: 5px;
583}
584.pagebar_page {
585 margin: 2px;
586 padding: 6px;
587}
588.pagebar_current {
589 background-color: #34495e;
590 color: #FFF;
591 margin: 3px;
592 padding: 6px;
593}
594.pagebar_nav {
595 margin-right: 15px;
596}
597.pagebar_nav .disabled{
598 color:#BDC3C7;
599}
600.pagebar_nav .pagebar_page:first-child {
601 margin-left: 0;
602 margin-right: 5px;
603}
604.pagebar_nav .pagebar_page{
605 padding:6px 0;
606}
607.pagebar_pages .pagebar_page:hover {
608 background:#ecf0f1;
609 text-decoration: none;
610 color:#34495e;
611}
612.pagebar_notice {
613 display: inline-block;
614
font-size:12px;
615 color:#BDC3C7;
616 margin-left:20px;
617}
618
619/* Forms and Inputs ========================================================= */
620
621form .field{
622 margin-bottom: 6px;
623}
624
625form .field:last-child{
626 margin-bottom: 0;
627}
628
629form fieldset{
630 padding:10px 15px 15px 15px;
631 border:solid 1px #B3C2C9;
632 margin-bottom:12px;
633}
634
635form fieldset.highlight{
636 background: #F4F8FD;
637}
638
639form fieldset legend{
640 color:#34495e;
641 font-weight: bold;
642}
643
644form .label {
645 padding:5px 0;
646}
647
648form .field label {
649 display:block;
650 padding:3px 0;
651
font-size:14px;
652 color:#68809B;
653}
654form .field label > input[type=checkbox] {
655 position: relative;
656 bottom: -1.3px;
657}
658.filter-panel form .field label > input[type=checkbox] {
659 bottom: -1.5px;
660}
661
662form .field_error .error_text{
font-size:12px; color:#c0392b; float:right; margin-top: 8px; }
663form #f_slug.field_error .error_text { float:none; }
664
665.input {
666 line-height: normal;
667}
668.input,
669.date-input,
670.city-input,
671.textarea,
672select {
673 border: solid 1px #aaa;
674 padding:4px;
675
font-size:14px;
676 box-shadow: inset 0 1px 2px #DDD;
677 color:#333;
678 outline:none;
679 box-sizing: border-box;
680 height: 27px;
681 line-height: 25px;
682 display: inline-block;
683 font-family: inherit;
684 font-size: inherit;
685 transition: box-shadow ease-in-out .15s;
686}
687.input:focus,
688.textarea:focus {
689 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
690}
691
692.input,
693.textarea,
694select { width:100%; }
695
696.textarea { height:200px; resize: vertical; }
697
698.date-input { width: 90px; }
699
700.input-small { width: 65px !important; }
701.input-number { width: 110px !important; }
702.input-number-units { margin-left: 5px; }
703
704.city-input {
705 display: inline-block;
706 margin-bottom:2px;
707 background:#FFF;
708 line-height:16px;
709 height: 26px;
710 padding: 4px 2px;
711}
712
713.city-input span { padding-right:20px; padding-left:2px; }
714.city-input a, .input_link_block {
715 background:#68809B;
716 color:#FFF;
717 text-decoration:none;
718 padding:1px 10px;
719}
720.city-input a:hover, .input_link_block:hover {
721 background:#34495e;
722}
723.input_link_block {
724 line-height: 28px;
725 display: inline-block;
726 border-radius: 4px;
727}
728.input_link_block:hover {
729 color: #FFF;
730}
731form .field_error .input,
732form .field_error .textarea,
733form .field_error .city-input,
734form .field_error select { border:solid 1px #c0392b; }
735
736form input.error,
737form textarea.error {
738 border:solid 1px #c0392b;
739}
740
741form .hint{
742 color:#999;
743
font-size:12px;
744 margin-top:0px;
745}
746
747form .input-prefix-suffix .input{
748 display:inline-block;
749 width:300px;
750 float:left;
751 border-radius:0;
752 height: 26px;
753}
754
755form .input-prefix-suffix .prefix,
756form .input-prefix-suffix .suffix{
757 height:16px;
758 padding:4px 8px;
759 display:inline-block;
760 float:left;
761 color:#666;
762 background:#f9f9f9;
763 border:solid 1px #AAA;
764}
765
766form .input-prefix-suffix .prefix{
767 border-radius:5px 0 0 5px;
768 border-right: none;
769}
770form .input-prefix-suffix .suffix{
771 border-radius:0 5px 5px 0;
772 border-left: none;
773}
774form .input-prefix-suffix:after {
775 clear: both;
776 content: '';
777 display: block;
778}
779input.button-submit,
780input.button {
781 padding: 7px 10px;
782 line-height: 100%;
783 border-radius: 3px;
784 cursor: pointer;
785 width: auto;
786
font-size: 14px;
787 color: #FFF;
788 text-decoration: none;
789 vertical-align: middle;
790 background: #2980b9;
791 border:none;
792 transition: background ease-in-out .15s;
793}
794
795input.button-submit:hover,
796input.button:hover {
797 background: #3498db;
798}
799input.button.button-cancel {
800 background: #95a5a6;
801}
802input.button.button-cancel:hover {
803 background: #7f8c8d;
804}
805input.button.to_draft {
806 background: #8e44ad;
807}
808input.button.to_draft:hover {
809 background: #9b59b6;
810}
811input.button-small {
812 padding:4px 10px;
813}
814
815form .ft_captcha { overflow: hidden; margin-bottom: 0; }
816form .ft_captcha input { width:100px; }
817form .ft_captcha .captcha { float:left; margin-right: 10px; }
818form .ft_captcha .code { float:left; }
819
820form .ft_file .value {
821
font-size:14px;
822 margin-top:5px;
823}
824form .ft_file .value .name {
825 padding-left:20px;
826 background:url("../images/icons/file.png") no-repeat;
827}
828form .ft_file .value .size {
829 margin-left:5px;
830
font-size:12px;
831 color: #999;
832}
833form .ft_file .value .delete {
834 margin-left:15px;
835}
836
837form .ft_date select { width:50px; padding:2px; }
838
839form .ft_listmultiple.field_error .input_checkbox_list {
840 border:solid 1px #c0392b;
841}
842
843form .ft_parent {
844 overflow: hidden;
845}
846
847form .ft_parent ul.items,
848form .ft_parent ul.items li {
849 list-style:none;
850 padding:0;
851 margin:0;
852 overflow:hidden;
853}
854
855form .ft_parent ul.items{
856 float:left;
857 margin-right:10px;
858}
859
860form .ft_parent ul.items li {
861 float:left;
862 margin-right: 2px;
863 margin-bottom:2px;
864 display:inline-block;
865 padding:4px 8px;
866 color:#68809B;
867 background: #F4F8FD;
868 border: solid 1px #B8D6FB;
869 border-radius:4px;
870 text-decoration: none;
871
font-size:12px;
872}
873
874form .ft_parent ul.items li a{
875 width: 16px;
876 height: 12px;
877 margin-right:-4px;
878 display: inline-block;
879 background: url(../images/icons/close.png) no-repeat left top;
880}
881
882form .ft_parent ul.items li a:hover{
883 width: 16px;
884 height: 12px;
885 display: inline-block;
886 background: url(../images/icons/close.png) no-repeat right top;
887}
888
889form .ft_parent a.add {
890 height:24px;
891 line-height:24px;
892 padding-left:20px;
893 background:url("../images/icons/add.png") no-repeat left center;
894
font-size:12px;
895}
896
897.symbols_count {
898
font-size: 12px;
899 margin: 3px 0 0 0;
900 display: none;
901}
902.symbols_count > span {
903 display: inline-block;
904 padding: 2px 5px;
905 margin: 0 3px 0 0;
906 color: #7f8c8d;
907}
908.symbols_count .symbols_num {
909 background-color: #ecf0f1;
910 border: 1px solid #bdc3c7;
911 color: #2980b9;
912 cursor: pointer;
913 transition: opacity 0.3s;
914}
915.symbols_count .symbols_num:hover {
916 opacity: 0.8;
917}
918.symbols_count .overflowing, .symbols_count .overflowing_min {
919 background-color: #e74c3c;
920 color: #FFF;
921 border-color: #c0392b;
922}
923.field.reguired_field > label::after{
924 content: '*';
925 color: #e74c3c;
926 padding-left: 5px;
927}
928.select_deselect {
929 margin: 10px 0 0 5px;
930}
931.select_deselect a {
932 text-decoration: none;
933 margin: 0 10px 0 0;
934
font-size: 13px;
935}
936.is_collapsed {
937 transition: all 0.3s ease;
938}
939.is_collapse {
940 position: relative;
941 background: #ecf0f1;
942 height: 30px;
943 box-sizing: border-box;
944 line-height: 30px;
945 cursor: pointer;
946 padding-left: 10px;
947}
948.is_collapse > legend {
949 position: absolute;
950 top: 0;
951 width: 100%;
952 box-sizing: border-box;
953 display: block;
954 left: 0;
955}
956.is_collapsed > legend:before {
957 content: '+';
958 display: inline-block;
959 margin: 0 10px 0 10px;
960 font-size: 16px;
961}
962.is_collapsed.do_expand > legend:before {
963 content: '-';
964}
965.is_collapsed.do_expand > legend {
966 cursor: pointer;
967}
968.is_collapse > .field {
969 display: none;
970}
971/* ========================================================================== */
972
973.input-users-list{
974 width:350px;
975 padding:5px;
976 border: solid 1px #BDC3C7;
977 border-radius: 5px;
978 max-height:400px;
979 overflow: auto;
980}
981
982.input-users-list ul,
983.input-users-list li {
984 margin:0; padding:0;
985 list-style:none;
986}
987
988.input-users-list .profile {
989 padding:10px 0;
990 border-bottom: solid 1px #EDEDED;
991 clear: both;
992 overflow: hidden;
993}
994
995.input-users-list .profile:last-child { border:none; }
996
997.input-users-list .profile div{
998 float:left;
999 margin-right:15px;
1000 height:32px;
1001 line-height:32px;
1002}
1003.input-users-list .profile .name{
1004 height:32px;
1005 line-height:32px;
1006}
1007
1008/* Ajax Uploader ============================================================ */
1009
1010.qq-uploader { position:relative; width: 100%; box-sizing: border-box; height: 100%;}
1011
1012.qq-upload-button {
1013
-moz-box-shadow:inset 0px 1px 0px 0px #FFF;
1014
-webkit-box-shadow:inset 0px 1px 0px 0px #FFF;
1015 box-shadow:inset 0px 1px 0px 0px #FFF;
1016 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #EDEDED) );
1017 background:-moz-linear-gradient( center top, #f9f9f9 5%, #EDEDED 100% );
1018
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#EDEDED');
1019 background-color:#f9f9f9;
1020
-moz-border-radius:6px;
1021
-webkit-border-radius:6px;
1022 border-radius:6px;
1023 border:1px solid #DDDDDD;
1024 display:inline-block;
1025 color:#666666;
1026 font-family:arial;
1027
font-size:15px;
1028 font-weight:bold;
1029 padding:6px 24px;
1030 text-decoration:none;
1031 text-shadow:1px 1px 0px #FFF;
1032}
1033.qq-upload-button-hover {
1034 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #EDEDED), color-stop(1, #f9f9f9) );
1035 background:-moz-linear-gradient( center top, #EDEDED 5%, #f9f9f9 100% );
1036
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#EDEDED', endColorstr='#f9f9f9');
1037 background-color:#EDEDED;
1038}
1039.qq-upload-button-focus {
1040 position:relative;
1041 top:1px;
1042}
1043
1044.qq-upload-button:active {
1045 position:relative;
1046 top:1px;
1047}
1048
1049.qq-upload-drop-area {
1050 position:absolute; top:0; left:0; width:100%; height:100%; min-height: 45px; z-index:2;
1051 background:#2ecc71; text-align:center; color: #FFF; display: block;
1052}
1053.qq-upload-drop-area span {
1054 display:block; position:absolute; top: 50%; width:100%; margin-top:-8px;
font-size:14px;
1055}
1056.upload .qq-upload-drop-area span {
1057 top: 12px;
1058
font-size: 12px;
1059}
1060.qq-upload-drop-area-active {background:#3498db;}
1061
1062.qq-upload-list { margin:15px 0 0 0; padding:0; }
1063.qq-upload-list li {
1064 margin: 10px 0 0 0;
1065 padding: 0;
1066 line-height: 15px;
1067
font-size: 13px;
1068 list-style: none;
1069}
1070.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
1071 margin-right: 7px;
1072}
1073.qq-upload-list:empty { display: none; }
1074.qq-upload-file {}
1075.qq-upload-spinner {display:inline-block; background: url("../images/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
1076.qq-upload-size,.qq-upload-cancel {
font-size:11px;}
1077
1078.qq-upload-failed-text {display:none;}
1079.qq-upload-fail .qq-upload-failed-text {display:inline;}
1080
1081/* Rating Widget ============================================================ */
1082
1083.rating_widget .arrow,
1084.rating_widget .score{
1085 float:left;
1086 height:15px;
1087}
1088
1089.rating_widget .score{ margin: 0 5px; cursor:help; font-weight: bold; }
1090.rating_widget .score .positive { color:green; }
1091.rating_widget .score .negative { color:red; }
1092
1093.rating_widget .score .clickable{
1094 cursor: pointer;
1095}
1096.rating_widget .score.loading > *{
1097 display: none;
1098}
1099.rating_widget .score.loading {
1100 padding-left: 16px;
1101}
1102
1103.rating_widget .arrow span,
1104.rating_widget .arrow a {
1105 display: block;
1106 width:11px;
1107 height:15px;
1108 background: url("../images/icons/vote.gif") no-repeat;
1109}
1110
1111.rating_widget .arrow a { cursor: pointer; }
1112
1113.rating_widget .up a{ background-position: 0 -15px; }
1114.rating_widget .up a:hover{ background-position: 0 0; }
1115
1116.rating_widget .down a{ background-position: -11px -15px; }
1117.rating_widget .down a:hover{ background-position: -11px 0; }
1118
1119.rating_widget .up .disabled{ background-position: -22px 0; }
1120.rating_widget .down .disabled{ background-position: -22px -15px; }
1121
1122/* Rating info ============================================================== */
1123
1124#rating_info_window {
1125 padding:20px;
1126}
1127
1128.rating_info_list .item{
1129 padding:6px 0;
1130 margin:2px 0;
1131 border-bottom: dashed 1px #EDEDED;
1132 min-width: 250px;
1133 overflow:hidden;
1134}
1135
1136.rating_info_list .item:last-child{
1137 border:none;
1138}
1139
1140.rating_info_list .item .score{
1141 display: inline-block;
1142 float:left;
1143 border-radius:4px;
1144 color:#FFF;
1145 min-width:25px;
1146 text-align: center;
1147 margin-right:10px;
1148}
1149
1150.rating_info_list .item .score.positive{ background-color:green; }
1151.rating_info_list .item .score.negative{ background-color:red; }
1152
1153.rating_info_list.loading-panel {
1154 background-color:#F4F8FD;
1155 background-position: center center;
1156 border-radius: 5px;
1157}
1158.rating_info_list.loading-panel .item{ visibility: hidden; }
1159
1160.rating_info_pagination { margin-top: 20px;
font-size:12px; }
1161.rating_info_pagination a {
1162 display: inline-block;
1163 padding:0 4px; text-decoration: none; color:#34495e; border-radius: 4px;
1164}
1165.rating_info_pagination a:hover { background-color:#EDEDED; }
1166.rating_info_pagination a.active,
1167.rating_info_pagination a.active:hover { color:#FFF; background-color: #34495e; }
1168
1169/* Comments Widget ========================================================== */
1170#comments_widget .bad {
1171 transition: all 0.5s ease;
1172}
1173#comments_widget .bad:hover {
1174 opacity: 1;
1175}
1176.bad6{opacity:.1;}
1177.bad5{opacity:.2;}
1178.bad4{opacity:.35;}
1179.bad3{opacity:.5;}
1180.bad2{opacity:.65;}
1181.bad1{opacity:.8;}
1182#tab-vk {
1183 margin: 20px 0 0 0;
1184}
1185#comments_widget {
1186 margin: 20px 0 0 0;
1187}
1188.no_comments {
1189 margin: 15px 0;
1190}
1191#comments_widget .track{
1192
font-size:12px;
1193 color:#999;
1194 text-align: right;
1195}
1196#comments_widget .track label{
1197 display: block;
1198 line-height: 30px;
1199}
1200#comments_widget .track input {
1201 vertical-align: middle;
1202 position: relative;
1203 bottom: 1px;
1204}
1205.track + #comments_refresh_panel + #comments_list {
1206 margin: -15px 0 0 0;
1207}
1208#comments_widget #comments_add_link {
1209 margin: 10px 0;
1210 padding-left:20px;
1211 background: url("../images/icons/comment.png") no-repeat left center;
1212}
1213#comments_widget #comments_add_link a {
font-size:14px; }
1214
1215#comments_widget #comments_add_form textarea{
1216 height:100px;
1217 margin-bottom:4px;
1218}
1219
1220#comments_widget #comments_add_form .loading{ display: none; }
1221
1222#comments_widget #comments_add_form .author_data {
1223 margin-bottom:8px;
1224}
1225
1226#comments_widget #comments_add_form .author_data .field {
1227 overflow:hidden;
1228}
1229#comments_widget #comments_add_form .author_data .field label {
1230 float:left;
1231 width:140px;
1232 height:20px;
1233 line-height:20px;
1234}
1235#comments_widget #comments_add_form .author_data .field .input {
1236 width:99%;
1237 max-width: 200px;
1238 min-width: 50px;
1239}
1240
1241#comments_widget #comments_refresh_panel {
1242 display: block;
1243 width:50px;
1244 height:35px;
1245 position: fixed;
1246 z-index:100;
1247 right:0px;
1248 top:45%;
1249 background:url("../images/loader24.gif") no-repeat center center #B3C2C9;
1250}
1251
1252#comments_widget #comments_refresh_panel a{
1253 display: block;
1254 width:50px;
1255 height:35px;
1256 background:url("../images/icons32/update-black.png") no-repeat center center #B3C2C9;
1257}
1258#comments_widget #comments_refresh_panel a:hover{
1259 background-color: #e1ebef;
1260}
1261.no_approved { display: none; }
1262#comments_list .comment{
1263 overflow: hidden;
1264 border-radius:2px;
1265 padding:10px 0;
1266 margin:4px 0;
1267}
1268#comments_list .comment:first-child {
1269 margin-top: 0;
1270}
1271#comments_list .comment.selected-comment:first-child {
1272 margin-top: 13px;
1273}
1274#comments_list.striped-list .comment {
1275 padding-bottom: 15px;
1276}
1277
1278#comments_list.striped-list .comment:last-child{
1279 border:none;
1280 padding-bottom: 0;
1281 margin-bottom: 0;
1282}
1283
1284#comments_list .selected-comment{
1285 padding-right: 10px;
1286 box-shadow: 5px 5px 7px #B3C2C9;
1287}
1288
1289#comments_list .comment .info,
1290#comments_list .comment .body {
1291 overflow: hidden;
1292 clear: both;
1293}
1294
1295#comments_list .comment .info{
1296 margin-bottom:6px;
1297}
1298
1299#comments_list .comment .info div {
1300 float: left;
1301 margin-right: 10px;
1302
font-size:12px;
1303}
1304
1305#comments_list .comment .info .rating{
1306}
1307
1308#comments_list .comment .info .rating .buttons{
1309 float:right;
1310 margin-left:5px;
1311}
1312
1313#comments_list .comment .info .rating a {
1314 display:inline-block;
1315 width:13px;
1316 height:13px;
1317 background:url("../images/comment_vote.png") no-repeat;
1318}
1319
1320#comments_list .comment .info .rating .value {
1321 float:left;
1322 font-weight: bold;
1323}
1324
1325#comments_list .comment .info .rating a.rate-up { background-position: 0 0; }
1326#comments_list .comment .info .rating a.rate-up:hover { background-position: 0 -13px; }
1327#comments_list .comment .info .rating a.rate-down { background-position: -13px 0; }
1328#comments_list .comment .info .rating a.rate-down:hover { background-position: -13px -13px; }
1329
1330#comments_list .comment .info .name .user{ color:#375D81; }
1331#comments_list .comment .info .name .user:hover{ color:#d35400; }
1332#comments_list .comment.is_topic_starter .info .name .user{ color:#d35400; }
1333#comments_list .comment.is_topic_starter .info .name .user:hover{ color:#e67e22; }
1334
1335#comments_list .comment .info .name .guest_name{ font-weight: bold; }
1336
1337#comments_list .comment .info .name .subject{ color:#4096EE; }
1338#comments_list .comment .info .name .subject:hover{ color:#d35400; }
1339
1340#comments_list .comment .info .date{ color:#999; }
1341
1342#comments_list .comment .nav a {
1343 text-decoration:none;
1344 margin-right: 3px;
1345 color:#BDC3C7;
1346}
1347
1348#comments_list .comment .nav a:hover {
1349 color:#d35400;
1350}
1351
1352#comments_list .comment .nav .scroll-down { display:none; }
1353
1354#comments_list .comment .body .avatar{
1355 float:left;
1356 padding:2px;
1357 border:solid 1px #999;
1358 position: relative
1359}
1360#comments_list .comment .body .avatar.comment_user_online{
1361 border-left-color: #27ae60;
1362 border-left-width: 2px;
1363}
1364
1365#comments_list .comment .body .avatar img, #comments_list .comment .body .avatar a { display:block; }
1366#comments_list .comment .body .avatar:after {
1367 display: block;
1368 content: "";
1369 position: absolute;
1370 width: 10px;
1371 height: 14px;
1372 background: url("../images/comment_arrow.png") no-repeat 0px 0px;
1373 right: -10px;
1374 top: 8px;
1375}
1376
1377#comments_list .comment .content{
1378 color:#333;
1379 padding-left:10px;
1380 padding-top: 4px;
1381 position: relative;
1382 overflow: hidden;
1383}
1384
1385#comments_list .comment .content img {
1386 max-width:100%;
1387}
1388
1389#comments_list .comment .content .links{
1390 padding:4px 0;
1391
font-size:12px;
1392}
1393
1394#comments_list .comment .content .links a {
1395
font-size:11px;
1396 color:#999;
1397 border-bottom:dashed 1px #999;
1398 text-decoration: none;
1399 margin-right:6px;
1400}
1401#comments_list .comment .content .links a:hover {
1402 color:#d35400;
1403 border-bottom:dashed 1px #d35400;
1404}
1405
1406#comments_list .comment .deleted{
1407 padding:5px 15px;
1408 background:#F9F9F9;
1409 color:#666;
1410 font-style:italic;
1411 border-radius: 6px;
1412 margin-right:6px;
1413}
1414
1415#comments_widget .login_to_comment{
1416 margin-top:5px;
1417
font-size:12px;
1418 color:#666;
1419}
1420#comments_list .content ul li, #comments_list .preview_box ul li {
1421 list-style-type: disc;
1422 margin-left:25px;
1423}
1424#comments_list .content ol, #comments_list .preview_box ol {
1425 padding-left: 25px;
1426}
1427#comments_list .content ol li, #comments_list .preview_box ol li {
1428 list-style-type: decimal;
1429}
1430/* Profile Wall Widget ====================================================== */
1431
1432#wall_widget {
1433 clear:both;
1434 margin-top:15px;
1435 border-top:solid 1px #B3C2C9;
1436}
1437
1438#wall_widget .title_bar{
1439 overflow:hidden;
1440}
1441
1442#wall_widget .title_bar .title{
1443 float:left;
1444 margin-bottom: 0px;
1445}
1446
1447#wall_widget .title_bar #wall_add_link {
1448 float:right;
1449 margin-top: 23px;
1450 padding-left:20px;
1451 background:url("../images/icons/edit.png") no-repeat left center;
1452}
1453
1454#wall_widget #wall_add_form, #comments_widget #comments_add_form {
1455 display: none;
1456 margin:15px 0;
1457 background:#ecf0f1;
1458 padding:15px;
1459 border-radius: 4px;
1460}
1461
1462#wall_widget #wall_add_form textarea{
1463 height:100px;
1464 margin-bottom:4px;
1465}
1466
1467#wall_widget #wall_add_form .preview_box, #comments_widget #comments_add_form .preview_box{
1468 margin-bottom: 15px;
1469 padding: 10px;
1470 border: solid 2px #B3C2C9;
1471 border-radius: 4px;
1472 background: #FFF;
1473 display:none;
1474 transition: all 0.5s ease;
1475}
1476.preview_box.highlight {
1477 border-color: #2980b9 !important;
1478 box-shadow: 0 0 5px #2980b9;
1479}
1480
1481#wall_widget #wall_add_form .loading{ display: none; }
1482
1483#wall_widget #entries_list{
1484 margin-top:20px;
1485}
1486
1487#wall_widget #entries_list .entry{
1488 overflow: hidden;
1489 margin-bottom:15px;
1490 padding-bottom:15px;
1491 border-bottom: dashed 1px #B3C2C9;
1492}
1493
1494#wall_widget #entries_list .entry:last-child{
1495 border:none;
1496 margin-bottom: 0;
1497}
1498
1499
1500#wall_widget #entries_list .entry .info,
1501#wall_widget #entries_list .entry .body {
1502 overflow: hidden;
1503}
1504
1505#wall_widget #entries_list .entry .info{
1506 margin-bottom:6px;
1507}
1508
1509#wall_widget #entries_list .entry .info div {
1510 float: left;
1511 margin-right: 10px;
1512
font-size:12px;
1513}
1514
1515#wall_widget #entries_list .entry .info a { color: #999; }
1516#wall_widget #entries_list .entry .info a:hover { color: #d35400; }
1517
1518#wall_widget #entries_list .entry .info .name .user{ color:#375D81; }
1519#wall_widget #entries_list .entry .info .name .user:hover{ color:#d35400; }
1520
1521#wall_widget #entries_list .entry .info .date{ color:#999; }
1522
1523#wall_widget #entries_list .entry .body {}
1524
1525#wall_widget #entries_list .entry .body .avatar{
1526 float:left;
1527 padding:2px;
1528 border:solid 1px #999;
1529}
1530
1531#wall_widget #entries_list .entry .body .avatar img{ display:block; }
1532
1533#wall_widget #entries_list .entry .content{
1534 color:#333;
1535 padding-left:15px;
1536 padding-top: 4px;
1537 background: url("../images/comment_arrow.png") no-repeat 0px 6px;
1538 position: relative;
1539 z-index: 2;
1540 margin-left: 37px;
1541}
1542#wall_widget #entries_list .entry .content .text img {
1543 max-width: 100%;
1544}
1545#wall_widget #entries_list .entry .links{
1546
font-size:12px;
1547 margin-top:10px;
1548}
1549
1550#wall_widget #entries_list .entry .links.has_replies{
1551 background:url("../images/icons/comment-small.png") no-repeat left center;
1552 padding-left:20px;
1553}
1554
1555#wall_widget #entries_list .entry .links a {
1556
font-size:11px;
1557 color:#7f8c8d;
1558 border-bottom:dashed 1px #BDC3C7;
1559 text-decoration: none;
1560 margin-right:6px;
1561}
1562
1563#wall_widget #entries_list .entry .links a:hover {
1564 color:#d35400;
1565 border-bottom:dashed 1px #d35400;
1566}
1567
1568#wall_widget #entries_list .entry .links a.get_replies{
1569 font-weight:bold;
1570 color:#34495e;
1571 border-bottom: dashed 1px #34495e;
1572}
1573
1574#wall_widget #entries_list .entry .links a.get_replies:hover{
1575 color:#d35400;
1576 border-bottom-color:#d35400;
1577}
1578
1579#wall_widget #entries_list .replies_loading {
1580 margin-top:12px;
1581 margin-bottom: 10px;
1582 color:#666;
1583 display: none;
1584}
1585
1586#wall_widget #entries_list .replies {
1587 clear:both;
1588}
1589
1590#wall_widget #entries_list .replies .entry{
1591
font-size:12px;
1592 padding:10px;
1593 border-left:solid 4px #ddd;
1594 border-bottom:none;
1595 margin:0;
1596 margin-top:10px;
1597 margin-left:18px;
1598}
1599
1600#wall_widget #entries_list .replies .entry:hover{
1601 border-left-color:#BDC3C7;
1602}
1603
1604#wall_widget #entries_list .replies .entry:hover .avatar{
1605 border-color:#BDC3C7;
1606}
1607
1608#wall_widget #entries_list .replies .entry .info{
1609 margin:0; padding:0;
1610 padding-left:0px;
1611 margin-bottom: 3px;
1612}
1613
1614#wall_widget #entries_list .replies .entry .content{
1615 background:none;
1616 margin:0; padding:0;
1617 max-width: 600px;
1618}
1619
1620#wall_widget #entries_list .replies .entry .avatar{
1621 float:right;
1622 border:solid 1px #ddd;
1623}
1624
1625#wall_widget #entries_list .show_more {
1626 margin-top:-14px;
1627}
1628
1629#wall_widget #entries_list .show_more a{
1630 display: block;
1631 height: 30px;
1632 line-height: 30px;
1633 text-align:center;
1634 background:#E1EBEF;
1635 color:#BDC3C7;
1636 text-decoration:none;
1637}
1638
1639#wall_widget #entries_list .show_more a:hover{
1640 background:#B3C2C9;
1641}
1642
1643/* Private Messaging Window ================================================= */
1644
1645#pm_window {
1646 overflow: hidden;
1647 min-height: 120px;
1648 box-sizing: border-box;
1649 width: 960px;
1650 max-width: 100%;
1651}
1652#pm_window .notice{
1653 margin: 25px 0;
1654 text-align: center;
1655 font-size: 1.3em;
1656}
1657.layout {
1658 box-sizing: border-box;
1659 overflow: hidden;
1660 height:700px;
1661}
1662#pm_window .right-panel,
1663#pm_window .left-panel {
1664 float:left;
1665 height:100%;
1666 box-sizing: border-box;
1667 position: relative;
1668}
1669#pm_window .right-panel{
1670 width:25%;
1671 overflow: hidden;
1672 box-shadow: 1px 0px 1px #DDD;
1673}
1674#pm_window .left-panel{
1675 width:75%;
1676 padding-left: 1px;
1677}
1678#pm_window .contacts {
1679 overflow: hidden;
1680 box-sizing: border-box;
1681 position: relative;
1682 height: calc(100% - 51px);
1683 overflow-y: auto;
1684}
1685#pm_window .contacts .contact{
1686 overflow: hidden;
1687 box-shadow: 0px 0px 1px #EEE;
1688}
1689#pm_contact {
1690 height: 100%;
1691 box-sizing: border-box;
1692 overflow: hidden;
1693}
1694#pm_window .contacts .contact a{
1695 display: block;
1696 overflow:hidden;
1697 padding:9px;
1698 color:#000;
1699 text-decoration: none;
1700 position: relative;
1701}
1702#pm_window .contacts .contact a span{
1703 float:left;
1704 height:32px;
1705 line-height: 32px;
1706 margin-right:4px;
1707 overflow: hidden;
1708 position: relative;
1709}
1710#pm_window .contacts .contact img, #pm_contact .overview a img {
1711 border-radius: 50%;
1712 display:block;
1713}
1714.peer_online:after,
1715.peer_no_online:after {
1716 bottom: 0;
1717 right: 0;
1718 border: 2px solid #fff;
1719 height: 8px;
1720 width: 8px;
1721 content: '';
1722 position: absolute;
1723 border-radius: 50%;
1724}
1725.peer_online:after {
1726 background-color: #8ac176;
1727}
1728.peer_no_online:after {
1729 background-color: #d35400;
1730}
1731#pm_window .contacts .contact a:hover{
1732 background:#95a5a6;
1733 color:#FFF;
1734}
1735
1736#pm_window .contacts .contact a.selected{
1737 background:#3498db;
1738 color:#FFF;
1739}
1740
1741#pm_window .contacts .contact a .counter {
1742 height: 12px;
1743 line-height: 12px;
1744 padding: 2px 5px;
1745 background: #e67e22;
1746 border-radius: 50%;
1747 color: #FFF;
1748
font-size: 12px;
1749 position: absolute;
1750 right: 4px;
1751 bottom: 6px;
1752}
1753#pm_window .contacts .contact a > strong {
1754 font-weight: normal;
1755
font-size: 11px;
1756 color: #CCC;
1757 position: absolute;
1758 right: 9px;
1759 top: 6px;
1760}
1761/* ========================================================================== */
1762
1763#pm_contact .overview, #user_search_panel {
1764 overflow: hidden;
1765 padding:9px;
1766 box-sizing: border-box;
1767 border-bottom: 1px solid #DDD;
1768 height:50px;
1769}
1770#user_search_panel {
1771 padding: 10px;
1772 line-height: 30px;
1773 background-color: #ecf0f1;
1774}
1775#user_search_panel input{
1776 padding-left: 24px;
1777 background: url(../images/icons/search-glyph.png) no-repeat 4px center #FFF;
1778}
1779#pm_contact #contact_toggle {
1780 background: url(../images/modal/controls.png) no-repeat center -1px;
1781 width: 24px;
1782 cursor: pointer;
1783 display: none;
1784}
1785#pm_contact .overview .user_date_log {
1786 display: inline-block;
1787 line-height: 32px;
1788
font-size: 12px;
1789 color: #AAA;
1790}
1791#pm_contact .overview a {
1792 border-left: medium none;
1793 border-right: medium none;
1794 color: #000;
1795 float: left;
1796 line-height: 32px;
1797 overflow: hidden;
1798}
1799#pm_contact .overview a span, #pm_contact #contact_toggle {
1800 float:left;
1801 height:32px;
1802 line-height: 32px;
1803 margin-right:4px;
1804 overflow: hidden;
1805 position: relative;
1806}
1807#pm_contact #contact_toggle {
1808 width:32px;
1809}
1810#pm_contact .actions {
1811 float:right;
1812 line-height: 28px;
1813}
1814#pm_contact .toogle-actions{
1815 display:none;
1816}
1817#pm_contact .composer {
1818 padding:10px;
1819 box-sizing: border-box;
1820 position: absolute;
1821 width: 100%;
1822 bottom: 0;
1823 border-top: 1px solid #DDD;
1824}
1825#pm_contact .composer .editor textarea{
1826 height: 55px;
1827 resize: none;
1828}
1829#pm_contact .composer .buttons {
1830 text-align: right;
1831 position: relative;
1832 box-sizing: border-box;
1833}
1834#error_wrap {
1835 position: absolute;
1836 left: 0;
1837 top: 1px;
1838 padding: 6px;
1839 background: #c0392b;
1840 color: #FFF;
1841 display: none;
1842}
1843.msg_overlay {
1844 position: absolute;
1845 width: 100%;
1846 height: 100%;
1847 background: #333;
1848 opacity: 0.6;
1849 top: 0;
1850 left: 0;
1851}
1852.confirm_wrap {
1853 position: absolute;
1854 top: 50%;
1855 left: 50%;
1856 width: 360px;
1857 height: 110px;
1858 margin: -55px 0 0 -180px;
1859}
1860.ui_message .buttons {
1861 margin: 10px 0 0 0;
1862}
1863.ui_message .buttons .button {
1864 margin: 0px 10px 0 0;
1865}
1866#pm_contact .composer .sending {
1867 background: url("../images/loader16.gif") no-repeat left center;
1868}
1869#pm_contact .composer .ignored_info{
1870 display:block;
1871 padding: 10px 6px;
1872 color:#999;
1873 font-style: italic;
1874 line-height: 97px;
1875}
1876.ctrenter_hint {
1877
font-size: 12px;
1878 color: #CCC;
1879 display: inline-block;
1880 margin: 0 10px 0 0;
1881}
1882#pm_contact .composer .ignored_info .button{
1883 margin-left:10px;
1884}
1885#pm_chat .content {
1886 background: #DAE2ED;
1887 padding: 7px 10px;
1888 border-radius: 5px;
1889 min-width: 30%;
1890 border: 1px solid #cdd5e0;
1891 box-sizing: border-box;
1892 position: relative;
1893 margin-left: 50px;
1894}
1895#pm_chat .content.is_can_select {
1896 cursor: pointer;
1897}
1898#pm_chat .content.selected {
1899 border-color: #3498db !important;
1900 box-shadow: 0px 0px 1px #3498db;
1901}
1902.button_hide {
1903 display: none;
1904}
1905#pm_chat .message .content > span, #pm_chat .message .content > span a {
1906 color: #AAA;
1907}
1908#pm_chat .message .content > span a:hover {
1909 color: #27ae60;
1910}
1911#pm_chat .message_text {
1912
font-size: 13px;
1913}
1914#pm_chat .message-my .content {
1915 margin-right: 60px;
1916 margin-left: 0;
1917 background: #FFF;
1918 border: 1px solid #DDD;
1919}
1920#pm_chat .content:before {
1921 position: absolute;
1922 top: 12px;
1923 left: -9px;
1924 display: inline-block;
1925 background: inherit;
1926 width: 16px;
1927 height: 16px;
1928 border-top: 1px solid;
1929 border-left: 1px solid;
1930 border-color: inherit;
1931 content: '';
1932 transform: rotate(-45deg);
1933
-webkit-transform: rotate(-45deg);
1934
-moz-transform: rotate(-45deg);
1935
-ms-transform: rotate(-45deg);
1936
-o-transform: rotate(-45deg);
1937}
1938#pm_chat .message-my .content:before {
1939 right: -9px;
1940 left: auto;
1941 border-right: 1px solid;
1942 border-top: none;
1943 border-bottom: 1px solid;
1944 border-left: none;
1945 border-color: inherit;
1946}
1947.user_avatar {
1948 float: left;
1949 margin-left: 0;
1950 margin-right: 10px;
1951 margin-top: 5px;
1952}
1953.user_avatar img {
1954 border-radius: 50%;
1955}
1956.message-my .user_avatar {
1957 float: right;
1958 margin-left: 10px;
1959}
1960#pm_contact .chat{
1961 position: relative;
1962 height: calc(100% - 189px);
1963 overflow: hidden;
1964 overflow-y: auto;
1965 padding:10px;
1966 line-height: 20px;
1967 background-color: #ecf0f1;
1968 box-sizing: border-box;
1969}
1970#pm_chat h3 {
1971 margin: 5px 0 10px 0;
1972
font-size: 12px;
1973 color: #828282;
1974 text-align: center;
1975}
1976#pm_chat .show-older + h3 {
1977 margin-top: 0;
1978}
1979#pm_contact .chat .message{
1980 margin-bottom:10px;
1981 width: 100%;
1982 clear: both;
1983 position: relative;
1984}
1985#pm_contact .chat .message .title{
1986
font-size: 11px;
1987 overflow: hidden;
1988 margin-top: -4px;
1989}
1990#pm_contact .chat .message .title .author{ color:#bf0000; }
1991#pm_contact .chat .message-my .title .author{ color:#376499; }
1992
1993#pm_contact .chat .message .title .date,
1994#pm_contact .chat .message .title .date-new {
1995 float: right;
1996}
1997#pm_contact .chat .message .title .date {
1998 color:#AAA;
1999}
2000#pm_contact .chat .message .title .date-new {
2001 color:#d35400;
2002}
2003#pm_contact .chat a.show-older{
2004 display:block;
2005 background:#bdc3c7;
2006 text-align:center;
2007 height:25px;
2008 line-height:25px;
2009 color:#FFF;
2010 text-decoration: none;
2011 margin-bottom: 15px;
2012}
2013#pm_contact .chat a.show-older:hover{
2014 background:#95a5a6;
2015}
2016#pm_contact .chat .older-loading{
2017 display:none;
2018 height:25px;
2019 margin-bottom: 15px;
2020 background: url("../images/loader16.gif") no-repeat center center #EDEDED;
2021}
2022#pm_notices_window {
2023 width:550px;
2024 overflow: auto;
2025 height: 100%;
2026}
2027#pm_notices_list {
2028 padding:5px;
2029 overflow: hidden;
2030 overflow-y: auto;
2031}
2032#pm_notices_list .item{
2033 overflow: hidden;
2034 border: solid 1px #BDC3C7;
2035 background:#e1ebef;
2036 padding:5px;
2037 color:#34495e;
2038 margin-bottom: 6px;
2039}
2040#pm_notices_list .item:last-child{
2041 margin-bottom: 0;
2042}
2043#pm_notices_list .item .date{
2044 color:#BDC3C7;
2045
font-size:11px;
2046 padding-left:10px;
2047 padding-top:10px;
2048}
2049#pm_notices_list .item .content{
2050 padding:10px;
2051 padding-top:3px;
2052}
2053#pm_notices_list .item .close-button {
2054 float:right;
2055}
2056#pm_notices_list .item .close-button a {
2057 display:block;
2058 width:16px;
2059 height:16px;
2060 background: url("../images/icons/close.png") no-repeat;
2061}
2062#pm_notices_list .item .close-button a:hover {
2063 background-position-x: -16px;
2064}
2065#pm_notices_list .item .buttons{
2066 padding:10px;
2067 padding-top: 0;
2068}
2069#pm_notices_list .item .buttons .button{
2070 border-color:#BDC3C7;
2071}
2072#pm_notices_window > input.button {
2073 border-radius: 0;
2074 width: 100%;
2075 box-sizing: border-box;
2076}
2077#pm_contact .smilepanel {
2078 position: absolute;
2079 bottom: 137px;
2080 background: #FFF;
2081 box-sizing: border-box;
2082 width: 80%;
2083 right: 0;
2084 border-top: 1px solid #DDD;
2085 border-left: 1px solid #DDD;
2086}
2087/* City Selection Window ================================================= */
2088
2089#geo_window {
2090 padding:15px;
2091 height:170px;
2092 width:300px;
2093 box-sizing: border-box;
2094}
2095#geo_window .wrapper{
2096 margin-top: auto;
2097 margin-bottom: auto;
2098 box-sizing: border-box;
2099}
2100#geo_window form > .list {
2101 margin: 0 0 10px 0;
2102}
2103#geo_window select{
2104 width:100%;
2105 margin-bottom:5px;
2106}
2107#geo_window .buttons{
2108 margin-top:10px;
2109 text-align: center;
2110}
2111
2112/* Login Form and Window ================================================= */
2113
2114.login_form h3 { margin-top: 0; }
2115
2116.login_layout { margin:0; width:100%; border-collapse: collapse; }
2117
2118.login_layout td { padding:0; }
2119
2120.login_layout .center_cell {
2121 width:60px;
2122 background:url("../images/vline1px.png") no-repeat center top;
2123}
2124
2125.login_layout .center_cell div {
2126 text-align: center;
2127 padding:15px 0;
2128 background:#FFF;
2129 font-size:22px;
2130 font-style: italic;
2131 color:#A3CAE0;
2132 margin-top:100px;
2133}
2134
2135.login_form .label{ color:#68809B; font-size:16px; }
2136.login_form .input{ width:100%; }
2137.login_form .input:focus{ box-shadow: 0 0 4px #BDC3C7; }
2138.login_form .options { margin-top: 10px; margin-bottom: 30px;
font-size:13px; color:#68809B; line-height: 14px; vertical-align:middle;}
2139
2140.login_form .options input,
2141.login_form .options label{
2142 vertical-align:middle;
2143}
2144.login_form .submit { margin: 0; }
2145.login_form .reg_link {
font-size:13px; padding-left: 15px; color:#34495e; }
2146
2147.content_multi_cats_data {
2148 display:none;
2149}
2150.gif_image {
2151 display: block;
2152 position: relative;
2153 text-decoration: none;
2154 overflow: hidden;
2155}
2156.content_item .ft_images .gif_image {
2157 float: left;
2158 margin-right: 5px;
2159}
2160.gif_image img {
2161 display: block !important;
2162 margin: 0 !important;
2163}
2164.image_label {
2165 position: absolute;
2166 left: 4px;
2167 bottom: 4px;
2168 background: rgba(0, 0, 0, 0.5);
2169 border-radius: 2px;
2170 padding: 4px 7px;
2171 color: #fff;
2172 font-weight: bold;
2173 text-transform: uppercase;
2174 font-size: 0.9em;
2175}
2176.micro_image, .micro_image > img {
2177 width: 32px !important;
2178 height: 32px !important;
2179}
2180.modal_image {
2181 position: relative;
2182 display: block;
2183}
2184.background_overlay {
2185 position: absolute;
2186 background: #000;
2187 width: 100%;
2188 height: 100%;
2189 opacity: 0;
2190 transition: all 0.3s;
2191 content: '';
2192 top: 0;
2193 left: 0;
2194}
2195.gif_image:hover .background_overlay {
2196 opacity: 0.5;
2197 z-index: 2;
2198}
2199.default_avatar {
2200 position: relative;
2201 font-style: normal;
2202 font-weight: 300;
2203 text-align: center;
2204 text-transform: uppercase;
2205
-webkit-font-smoothing: antialiased;
2206
-moz-osx-font-smoothing: grayscale;
2207 overflow: hidden;
2208 display: block;
2209 background: no-repeat center;
2210 background-size: 1em;
2211}
2212.default_avatar img {
2213 opacity: 0; display: block;
2214}
2215.default_avatar:before {
2216 content: attr(data-letter);
2217 display: block;
2218 position: absolute;
2219 left: 0;
2220 right: 0;
2221 margin-left: auto;
2222 margin-right: auto;
2223}
2224.default_avatar.white_avatar_text:hover:after {
2225 background: #000;
2226 opacity: 0.4;
2227}
2228.default_avatar.black_avatar_text:after, .default_avatar.white_avatar_text:after {
2229 transition: all 0.5s ease;
2230 content: '';
2231 position: absolute;
2232 top: 0;
2233 left: 0;
2234 width: 100%;
2235 height: 100%;
2236 opacity: 0;
2237}
2238.default_avatar.black_avatar_text:hover:after {
2239 background: #FFF;
2240 opacity: 0.2;
2241}
2242table.data_list {
2243 border-collapse: collapse;
2244 width:100%;
2245}
2246table.data_list th {
2247 height: 30px;
2248 line-height: 30px;
2249 padding: 0 10px;
2250 border-bottom: solid 1px #B3C2C9;
2251 text-align: left;
2252 background: #9DB1B9;
2253}
2254table.data_list td {
2255 padding:5px 10px;
2256 background: #fff;
2257 color:#34495e;
2258 height:20px;
2259 transition: background ease-in-out .15s;
2260}
2261table.data_list tr:nth-child(odd) td {
2262 background: #f9f9f9;
2263}
2264table.data_list tr:hover td {
2265 background: rgb(233,246,253);
2266}
2267table.data_list .empty{
2268 color:#B3C2C9;
2269}
2270table.data_list .actions{
2271 width: 70px;
2272}
2273.spinner {
2274 width: 70px;
2275 height: 40px;
2276 margin: -20px 0 0 -35px;
2277 position: absolute;
2278 left: 50%;
2279 top: 50%;
2280}
2281.spinner > div {
2282 width: 18px;
2283 height: 18px;
2284 background-color: #3498db;
2285
2286 border-radius: 100%;
2287 display: inline-block;
2288
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
2289 animation: sk-bouncedelay 1.4s infinite ease-in-out both;
2290}
2291
2292.spinner .bounce1 {
2293
-webkit-animation-delay: -0.32s;
2294 animation-delay: -0.32s;
2295}
2296
2297.spinner .bounce2 {
2298
-webkit-animation-delay: -0.16s;
2299 animation-delay: -0.16s;
2300}
2301
2302@-webkit-keyframes sk-bouncedelay {
2303 0%, 80%, 100% { -webkit-transform: scale(0) }
2304 40% { -webkit-transform: scale(1.0) }
2305}
2306
2307@keyframes sk-bouncedelay {
2308 0%, 80%, 100% {
2309
-webkit-transform: scale(0);
2310 transform: scale(0);
2311 } 40% {
2312
-webkit-transform: scale(1.0);
2313 transform: scale(1.0);
2314 }
2315}
2316@media screen and (max-height: 900px) {
2317 .layout {
2318 height: 595px;
2319 }
2320}
2321@media screen and (max-height: 640px) {
2322 .layout {
2323 height: 595px;
2324 }
2325}
2326@media screen and (max-height: 600px) {
2327 .layout {
2328 height: 545px;
2329 }
2330}
2331@media screen and (max-height: 480px) {
2332 .layout {
2333 height:435px;
2334 }
2335}
2336@media screen and (max-height: 360px) {
2337 .layout {
2338 height: 315px;
2339 }
2340}
2341@media screen and (max-height: 335px) {
2342 .layout {
2343 height: 290px;
2344 }
2345}
2346@media screen and (max-height: 320px) {
2347 .layout {
2348 height: 275px;
2349 }
2350}
2351@media screen and (max-width: 800px) {
2352 #pm_window {
2353 width: 690px;
2354 }
2355 #pm_contact #contact_toggle {
2356 display: block;
2357 }
2358 #pm_window .right-panel{
2359 width: 100%;
2360 left: -700px;
2361 display: none;
2362 }
2363 #pm_window .left-panel{
2364 width: 100%;
2365 padding-left: 0;
2366 }
2367}
2368@media screen and (max-width: 640px) {
2369 #comments_widget #comments_refresh_panel { display: none; }
2370 #pm_contact .overview{
2371 position:relative;
2372 padding:9px 0 9px 5px;
2373 }
2374 #pm_contact .actions {
2375 float: none;
2376 line-height: 50px;
2377 background-color :#fff;
2378 display: none;
2379 position:absolute;
2380 left: 0;
2381 top: 0;
2382 width: 100%;
2383 padding: 0 0 0 10px;
2384 box-sizing: border-box;
2385 }
2386 #pm_contact .actions.actions-active {
2387 display: block;
2388 }
2389 #pm_contact .toogle-actions{
2390 display: block;
2391 position: absolute;
2392 right: 9px;
2393 top: 50%;
2394 width: 30px;
2395 height: 30px;
2396 margin-top: -15px;
2397 opacity: .7;
2398 background: #7f8c8d url("../images/icons32/menu-icon.svg") no-repeat center center;
2399 cursor: pointer;
2400 border-radius: 2px;
2401 }
2402 #pm_contact .toogle-actions.toogle-actions-active{
2403 opacity: 1;
2404 background-color: #d35400;
2405 }
2406 #pm_contact .overview .user_date_log{
2407 display: none!important;
2408 }
2409 .nyroModalMessage input.button-small {
2410 padding: 4px 7px;
2411
font-size:12px;
2412 }
2413}
2414@media screen and (max-width: 335px) {
2415 #pm_window #pm_contact .markItUpHeader ul a{
2416 width:14px!important;
2417 height:14px!important;
2418 }
2419 #pm_contact .chat{
2420 height:calc(100% - 214px);
2421 }
2422}