1/* CSS Document */ 2body { 3} 4.top-title {text-align:Left;color:#ffffff;font-weight:bold;} 5.top-messgae {font-family :Verdana;font-size : 11px;text-align:left;color:#000000;font-weight:normal;text-align:left;background-color:#7aa3bd} 6.top-messgae1 {font-family :Verdana;font-size : 11px;text-align:left;color:#23344d;font-weight:normal;} 7.top-messgae2 {font-family :Verdana;font-size : 11px;text-align:left;color:#23344d;font-weight:bold;} 8.top-messgae3 {font-family :Verdana;font-size : 11px;text-align:center;color:#000000;background-color:#6692b0;font-weight:bold} 9.input{color:#3b5f71;border:1px solid #7398ac;background-color:#cae9f3;font-family :Verdana;font-size : 11px;padding-left:5px;} 10.button{color:#cae9f3 ;font-family :Verdana;font-size : 11px;border:1px solid #ffffff; background-color: #5588a4} 11.status{font-family :Verdana;font-size : 11px;border:1px solid #7c7c7c;background-color:#acc1ca;} 12.statustext{font-family :Verdana;font-size : 11px;color:##0066CC;} 13.line{border-bottom : 1px dotted #959595; } 14.text{font-family :Verdana;font-size : 11px;text-align:center;color:#23344d;font-weight:bold;} 15.tbg{font-family :Verdana;font-size : 11px;text-align:center;color:#23344d;font-weight:bold;background-color:#759bae} 16.tbg1{font-family :Verdana;font-size : 11px;text-align:left;color:#23344d;font-weight:normal;background-color:#9fccdd} 17.tbg2{font-family :Verdana;font-size : 11px;text-align:left;color:#197b30;font-weight:normal;background-color:#9fccdd} 18.tbg3{font-family :Verdana;font-size : 11px;text-align:left;color:#ee1c24;font-weight:normal;background-color:#9fccdd} 19.table1px{border: 1px solid #6699cc;border-collapse: collapse;} 20 21.title1 {font-family :Verdana;font-size : 11px;font-weight:bold;color:#000000;text-align:center;background-image : url(../images/title-bg.gif); } 22 23.top-messgaea {font-family :Verdana;font-size : 10px;text-align:left;color:#000000;font-weight:normal;text-align:left;background-color:#7aa3bd} 24.tbg2a{font-family :Verdana;font-size : 10px;text-align:center;color:#197b30;font-weight:normal;background-color:#9fccdd;} 25.tbg1a{font-family :Verdana;font-size : 10px;text-align:center;color:#23344d;font-weight:normal;background-color:#9fccdd} 26.clientIcon{ 27 margin: 0 auto; 28 width: 50px; 29 height: 50px; 30 background-color: #798D94; 31 -webkit-border-radius: 10px; 32 -moz-border-radius: 10px; 33 border-radius: 10px; 34 border-width: 1px; 35 border-style: double; 36 border-color: #3E4243; 37 background-image:url('/images/New_ui/networkmap/client-list.svg'); 38 background-repeat:no-repeat; 39 background-position:0% 0.5%; 40 cursor:pointer; 41 background-size: 900%; 42} 43.clientIcon:hover{ 44 background-color: #FFFFFF; 45} 46.clientIcon.clicked { 47 background-color: #FFFFFF; 48} 49.clientIcon_no_hover{ 50 width: 50px; 51 height: 50px; 52 background-color: #798D94; 53 -webkit-border-radius: 10px; 54 -moz-border-radius: 10px; 55 border-radius: 10px; 56 border-width: 1px; 57 border-style: double; 58 border-color: #3E4243; 59 background-image:url('/images/New_ui/networkmap/client-list.svg'); 60 background-repeat:no-repeat; 61 background-position:0% 0.5%; 62 cursor:pointer; 63 background-size: 900%; 64} 65.clientIcon_clicked{ 66 margin: 0 auto; 67 width: 50px; 68 height: 50px; 69 background-color: #FFFFFF; 70 -webkit-border-radius: 10px; 71 -moz-border-radius: 10px; 72 border-radius: 10px; 73 border-width: 1px; 74 border-style: double; 75 border-color: #3E4243; 76 background-image:url('/images/New_ui/networkmap/client-list.svg'); 77 background-repeat:no-repeat; 78 background-position:0% 0.5%; 79 cursor:pointer; 80 background-size: 900%; 81} 82.venderIcon { 83 margin: 0 auto; 84 width:54px; 85 height:54px; 86 background-image:url('/images/New_ui/networkmap/vender-list.png'); 87 background-repeat:no-repeat; 88 background-position:52% 71.8%; 89 cursor:pointer; 90 -webkit-border-radius: 10px; 91 -moz-border-radius: 10px; 92 border-radius: 10px; 93} 94.venderIcon:hover { 95 background-image:url('/images/New_ui/networkmap/vender-listover.png') !important; 96} 97.venderIcon.clicked { 98 background-image:url('/images/New_ui/networkmap/vender-listover.png') !important; 99} 100.venderIcon_no_hover { 101 width:54px; 102 height:54px; 103 background-image:url('/images/New_ui/networkmap/vender-list.png'); 104 background-repeat:no-repeat; 105 background-position:52% 71.8%; 106 cursor:pointer; 107 -webkit-border-radius: 10px; 108 -moz-border-radius: 10px; 109 border-radius: 10px; 110} 111.venderIcon_clicked{ 112 margin: 0 auto; 113 width:54px; 114 height:54px; 115 background-image:url('/images/New_ui/networkmap/vender-listover.png') !important; 116 background-repeat:no-repeat; 117 cursor:pointer; 118 -webkit-border-radius: 10px; 119 -moz-border-radius: 10px; 120 border-radius: 10px; 121} 122/* 123Unknown 0 124Windows device 1 125Router 2 126Router 3 127NAS/Server 4 128IP Cam 5 129Macbook 6 130Game Console 7 131Game Console 8 132Android Phone 9 133iPhone 10 134Apple TV 11 135Set-top Box 12 136Windows device 13 137iMac 14 138ROG 15 139Game Console 16 140Game Console 17 141Printer 18 142Windows Phone 19 143Android Tablet 20 144iPad 21 145Linux Device 22 146Smart TV 23 147Repeater 24 148Kindle 25 149Scanner 26 150Chromecast 27 151ASUS smartphone 28 152ASUS Pad 29 153Windows 30 154Android 31 155Mac OS 32 156Smartphone 33 157Desktop 34 158*/ 159.type0{ 160 background-image:url('/images/New_ui/networkmap/client.svg') !important;; 161 background-size: 100%; 162} 163.type1{ 164 background-position:16.5% 16.5% !important; 165} 166.type2{ 167 background-position:66.5% 50% !important; 168} 169.type3{ 170 background-position:66.5% 50% !important; 171} 172.type4{ 173 background-position:83% 50% !important; 174} 175.type5{ 176 background-position:66.5% 83.3% !important; 177} 178.type6{ 179 background-position:49.8% 33% !important; 180} 181.type7{ 182 background-position:100.2% 16.5% !important; 183} 184.type8{ 185 background-position:100.2% 16.5% !important; 186} 187.type9{ 188 background-position:33.3% 16.35% !important; 189} 190.type10{ 191 background-position:49.8% 16.5% !important; 192} 193.type11{ 194 background-position:49.8% 49.5% !important; 195} 196.type12{ 197 background-position:100.2% 67% !important; 198} 199.type13{ 200 background-position:100.2% 16.5% !important; 201} 202.type14{ 203 background-position:49.8% 66.5% !important; 204} 205.type15{ 206 background-position:100.2% 83% !important; 207} 208.type16{ 209 background-position:100.2% 16.5% !important; 210} 211.type17{ 212 background-position:100.2% 16.5% !important; 213} 214.type18{ 215 background-position:83% 33% !important; 216} 217.type19{ 218 background-position:16.5% 50.5% !important; 219} 220.type20{ 221 background-position:33.3% 33% !important; 222} 223.type21{ 224 background-position:49.8% 82.85% !important; 225} 226.type22{ 227 background-position:-0.2% 16.5% !important; 228} 229.type23{ 230 background-position:83% 82.5% !important; 231} 232.type24{ 233 background-position:66.5% 67% !important; 234} 235.type25{ 236 background-position:100.4% 100.2% !important; 237} 238.type26{ 239 background-position:83% 16.4% !important; 240} 241.type27{ 242 background-position:83% 0% !important; 243} 244.type28{ 245 background-position:66.4% 16.5% !important; 246} 247.type29{ 248 background-position:66.7% 100% !important; 249} 250.type30{ 251 background-position:16.5% 0% !important; 252} 253.type31{ 254 background-position:33.3% 0% !important; 255} 256.type32{ 257 background-position:49.8% 0% !important; 258} 259.type33{ 260 background-position:100% 32.7% !important; 261} 262.type34{ 263 background-position:100% 50% !important; 264} 265 266.type0:hover{ 267 background-color: #FFFFFF; 268} 269 270.type0.clicked{ 271 background-image:url('/images/New_ui/networkmap/client.svg'); 272 background-size: 100%; 273 background-color: #FFFFFF; 274} 275 276.type0_viewMode{ 277 background-image:url('/images/New_ui/networkmap/client.svg'); 278 background-size: 100%; 279} 280 281.adobe{ 282 background-position:52% -0.05% !important; 283} 284.google{ 285 background-position:52% 3.73% !important; 286} 287.apple{ 288 background-position:52% 7.53% !important; 289} 290.belkin{ 291 background-position:52% 11.3% !important; 292} 293.dell{ 294 background-position:52% 15.08% !important; 295} 296.microsoft{ 297 background-position:52% 18.85% !important; 298} 299.amazon{ 300 background-position:52% 22.65% !important; 301} 302.ibm{ 303 background-position:52% 26.43% !important; 304} 305.sony{ 306 background-position:52% 30.2% !important; 307} 308.htc{ 309 background-position:52% 33.98% !important; 310} 311.huawei{ 312 background-position:52% 37.77% !important; 313} 314.samsung{ 315 background-position:52% 41.55% !important; 316} 317.nec{ 318 background-position:52% 45.35% !important; 319} 320.synology{ 321 background-position:52% 49.13% !important; 322} 323.lenovo{ 324 background-position:52% 52.9% !important; 325} 326.fujitsu{ 327 background-position:52% 56.7% !important; 328} 329.panasonic{ 330 background-position:52% 60.48% !important; 331} 332.toshiba{ 333 background-position:52% 64.25% !important; 334} 335.pioneer{ 336 background-position:52% 68.05% !important; 337} 338.asus{ 339 background-position:52% 71.82% !important; 340} 341.ralink{ 342 background-position:52% 75.6% !important; 343} 344.tp-link{ 345 background-position:52% 79.4% !important; 346} 347.honhai{ 348 background-position:52% 83.18% !important; 349} 350.buffalo{ 351 background-position:52% 86.95% !important; 352} 353.vmware{ 354 background-position:52% 90.73% !important; 355} 356.bizlink{ 357 background-position:52% 94.52% !important; 358} 359.d-link{ 360 background-position:52% 98.3% !important; 361} 362 363.clientBg{ 364 font-family:monospace, Courier New, Courier; 365 width:293px; 366 height:85px; 367 background-image:url('/images/New_ui/networkmap/bg.png'); 368 background-repeat:no-repeat; 369 cursor: pointer; 370} 371.radioIcon{ 372 background-image:url('/images/survey/radio_status.png'); 373 background-repeat: no-repeat; 374 height: 21px; 375 width: 28px; 376 position: relative; 377} 378.radio_1{ 379 background-position: 0% 2px; 380} 381.radio_2{ 382 background-position: 0% -20px; 383} 384.radio_3{ 385 background-position: 0% -42px; 386} 387.radio_4{ 388 background-position: 0% -64px; 389} 390.band_block { 391 background-color: #06CCDE; 392 height: 11px; 393 width: 28px; 394} 395.band_txt_chrome { 396 font-size: 9px; 397 -webkit-transform : scale(0.75); 398 font-family: Arial; 399 color: #000000; 400 font-weight: bolder; 401 letter-spacing: 1px; 402 display : inline-block; 403 white-space: nowrap; 404 width: 30px; 405 height: 11px; 406 line-height: 12px; 407 margin-left: -2px; 408 text-align: center; 409} 410.band_txt { 411 font-size: 9px; 412 font-family: Arial; 413 color: #000000; 414 font-weight: bolder; 415 display : inline-block; 416 white-space: nowrap; 417 width: 28px; 418 height: 11px; 419 line-height: 12px; 420 text-align: center; 421} 422.radio_wired{ 423 height: 28px; 424 width: 28px; 425 background-image:url('/images/New_ui/networkmap/wiredIcon.png') !important; 426} 427.clientlist_content{ 428 position: absolute; 429 -webkit-border-radius: 5px; 430 -moz-border-radius: 5px; 431 border-radius: 5px; 432 z-index: 200; 433 background-color:#2B373B; 434 margin-left: 80px; 435 margin-top: -320px; 436 width:495px; 437 height:auto; 438 box-shadow: 3px 3px 10px #000; 439 display:block; 440 padding: 10px; 441} 442.clientlist_content td{ 443 border: 0; 444 height: 0px; 445} 446.client_tag{ 447 background-color: #475A5F; 448 font-size: 12px; 449 font-family: monospace; 450 padding: 2px; 451 border-radius: 3px; 452 margin-left:5px; 453} 454 455.client_canvasUserIcon{ 456 -webkit-border-radius: 10px; 457 -moz-border-radius: 10px; 458 border-radius: 10px; 459} 460.client_icon_list table{ 461 border: 1px solid #1A1C1D; 462 border-collapse: collapse; 463} 464.client_icon_list div{ 465 background-image:url('/images/New_ui/networkmap/client-list.svg'); 466 background-repeat:no-repeat; 467 height:60px; 468 width:60px; 469 cursor:pointer; 470 background-position:0% 0.5%; 471 background-size: 900%; 472 background-color: #788D94; 473 border-radius: 10px; 474} 475.client_icon_list div:hover{ 476 background-color: #FFFFFF; 477} 478.client_icon_list td{ 479 border: 1px solid #1A1C1D; 480 border-collapse: collapse; 481} 482.client_upload_div{ 483 cursor: pointer; 484 background-image:none !important; 485 background-color: #2B373B !important; 486 border: 2px dashed #A1A99F !important; 487 width: 56px !important; 488 height: 56px !important; 489 text-align: center; 490 line-height: 56px; 491 color: #A1A99F; 492 font-size: 50px; 493} 494.client_upload_div:hover{ 495 border: 2px dashed #FFFFFF !important; 496 color: #FFFFFF; 497} 498.client_upload_file{ 499 cursor: pointer; 500 display: block !important; 501 opacity: 0 !important; 502 overflow: hidden !important; 503 width: 55px !important; 504 height:55px !important; 505 margin-top: -52px; 506 margin-left: -2px; 507} 508.client_input_text_disabled { 509 background:#475a5f; 510 width:275px; 511 height:15px; 512 padding:5px 0px 5px 5px; 513 margin-left:2px; 514 border-radius:5px; 515} 516.client_preview_icon{ 517 background-color: #172327; 518 -webkit-border-radius: 10px; 519 -moz-border-radius: 10px; 520 border-radius: 10px; 521 width: 120px; 522 height: 95px; 523 padding-top: 10px; 524 cursor:pointer; 525} 526.clientlist_viewlist { 527 position: absolute; 528 -webkit-border-radius: 5px; 529 -moz-border-radius: 5px; 530 border-radius: 5px; 531 z-index: 200; 532 background-color:#444f53; 533 margin-left: 140px; 534 margin-top: -920px; 535 width:950px; 536 height:auto; 537 box-shadow: 3px 3px 10px #000; 538 display:block; 539 overflow: auto; 540} 541.imgUserIcon_viewlist { 542 width: 40px; 543 height: 40px; 544 -webkit-border-radius: 5px; 545 -moz-border-radius: 5px; 546 border-radius: 5px; 547 position: relative; 548 margin-top: 1px; 549} 550.imgUserIcon_card{ 551 cursor: pointer; 552 position: relative; 553 width: 52px; 554 height: 52px; 555 -webkit-border-radius: 10px; 556 -moz-border-radius: 10px; 557 border-radius: 10px; 558} 559.clientlist_expander { 560 cursor: pointer; 561 display: inline-block; 562 text-decoration: none; 563 float: right; 564} 565.clientlist_expander:hover { 566 text-decoration: underline; 567 float: right; 568} 569.clientlist_All{ 570 width:100px; 571 height:30px; 572 border-top-left-radius:8px; 573 border-bottom-left-radius:8px; 574} 575.clientlist_ByInterface{ 576 width:100px; 577 height:30px; 578 margin:-32px 0px 0px 99px; 579 border-top-right-radius:8px; 580 border-bottom-right-radius:8px; 581} 582.clientState { 583 width:85%; 584 float:left; 585 height: 28px; 586 line-height: 28px; 587} 588.changeClientIcon { 589 width: 120px; 590 margin-top:10px; 591 cursor: pointer; 592 text-decoration: underline; 593 font-family: Arial, Helvetica, sans-serif; 594 font-size: 13px; 595 color: #FFFFFF; 596 height: 15px; 597 line-height: 15px; 598} 599.ipMethodTag{ 600 background-color: #222; 601 font-size: 10px; 602 font-family: monospace; 603 padding: 3px 5px; 604 border-radius: 5px; 605} 606.clientlist_circle { 607 position: relative; 608 width: 15px; 609 height: 15px; 610 border-radius: 50%; 611 background: #333; 612 margin-top: -3px; 613 margin-left: 35px; 614 margin-bottom: -15px; 615 z-index: 200; 616} 617.clientlist_circle div{ 618 height: 15px; 619 text-align: center; 620 margin-top: 3px; 621 line-height: 16px; 622} 623.viewclientlist_clientName_edit { 624 cursor: pointer; 625 width: 100%; 626 height: 47px; 627 line-height: 47px; 628} 629.viewclientlist_clientName_edit:hover { 630 background-color: #444f53; 631 text-decoration:underline; 632} 633 634.card_table { 635 width:100%; 636 text-align:left; 637 border:0; 638} 639.card_table td{ 640 background-color: #2B373B; 641 text-align: left; 642} 643.card_table td span{ 644 color: #FFFFFF; 645} 646 647.internetAllow { 648 cursor: default; 649 background-image: url('/images/New_ui/networkmap/internet_allow.svg'); 650 background-repeat:no-repeat; 651 height: 28px; 652 width: 28px; 653} 654.internetBlock { 655 cursor: default; 656 background-image: url('/images/New_ui/networkmap/internet_block.svg'); 657 background-repeat:no-repeat; 658 height: 28px; 659 width: 28px; 660} 661.internetTimeLimits { 662 cursor: default; 663 background-image: url('/images/New_ui/TimeLimitsSmall.png'); 664 background-repeat:no-repeat; 665 height: 28px; 666 width: 35px; 667 background-size: 35px 28px; 668} 669.internetTimeEdit { 670 cursor: pointer; 671 background-image: url('/images/New_ui/networkmap/internet_edit.svg'); 672 background-repeat:no-repeat; 673 height: 30px; 674 width: 35px; 675} 676.usericons_content{ 677 position:absolute; 678 left: 50%; 679 top: 50%; 680 -webkit-border-radius: 5px; 681 -moz-border-radius: 5px; 682 border-radius: 5px; 683 z-index:200; 684 background-color:#2B373B; 685 margin-left: -250px; 686 margin-top: 10px; 687 width:650px; 688 height:250px; 689 box-shadow: 3px 3px 10px #000; 690 display: block; 691} 692.card_imgUploadIcon{ 693 position: relative; 694 width: 52px; 695 height: 52px; 696 -webkit-border-radius: 10px; 697 -moz-border-radius: 10px; 698 border-radius: 10px; 699} 700.card_client_name_text{ 701 font-family: Lucida Console; 702 font-size: 14px; 703 font-weight: bolder; 704 color: #FFFFFF; 705 padding-left: 0.4em; 706} 707 708.clientList_line { 709 background: #000000; /* Old browsers */ 710 background: -moz-linear-gradient(top, #000000 0%, #474E50 50%, #656C6F 100%); /* FF3.6+ */ 711 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(50%,#474E50), color-stop(100%,#656C6F)); /* Chrome,Safari4+ */ 712 background: -webkit-linear-gradient(top, #000000 0%,#474E50 50%,#656C6F 100%); /* Chrome10+,Safari5.1+ */ 713 background: -o-linear-gradient(top, #000000 0%,#474E50 50%,#656C6F 100%); /* Opera 11.10+ */ 714 background: -ms-linear-gradient(top, #000000 0%,#474E50 50%,#656C6F 100%); /* IE10+ */ 715 background: linear-gradient(to bottom, #000000 0%,#474E50 70%,#656C6F 100%); /* W3C */ 716 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#656C6F',GradientType=0 ); /* IE6-9 */ 717 height: 2px; 718} 719 720.boost_tag { 721 text-align: center; 722 width: 60px; 723 height: 30px; 724 line-height: 30px; 725 border-radius: 15%; 726 margin-top: -37px; 727 margin-left: 30px; 728 color: #FFFFFF; 729 font-size: 9px; 730 -webkit-transform: scale(0.75); 731 background: #FF4848; /* Old browsers */ 732 background: -moz-linear-gradient(top, #A21717 0%, #B71010 50%, #FF4848 100%); /* FF3.6+ */ 733 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A21717), color-stop(50%,#B71010), color-stop(100%,#FF4848)); /* Chrome,Safari4+ */ 734 background: -webkit-linear-gradient(top, #A21717 0%,#B71010 50%,#FF4848 100%); /* Chrome10+,Safari5.1+ */ 735 background: -o-linear-gradient(top, #A21717 0%,#B71010 50%,#FF4848 100%); /* Opera 11.10+ */ 736 background: -ms-linear-gradient(top, #A21717 0%,#B71010 50%,#FF4848 100%); /* IE10+ */ 737 background: linear-gradient(to bottom, #A21717 0%,#B71010 70%,#FF4848 100%); /* W3C */ 738 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A21717', endColorstr='#FF4848',GradientType=0 ); /* IE6-9 */ 739} 740 741.clientTitle { 742 font-family: Arial, Helvetica, sans-serif; 743 height: 25px; 744 line-height: 25px; 745} 746 747.clientlist_dropdown { 748 border:1px outset #999; 749 background-color:#576D73; 750 position:absolute; 751 *margin-top:26px; 752 margin-left:159px; 753 *margin-left:-189px; 754 width:255px; 755 text-align:left; 756 height:auto; 757 overflow-y:auto; 758 z-index:200; 759 padding: 1px; 760 display:none; 761} 762.clientlist_dropdown div { 763 background-color:#576D73; 764 height:auto; 765 *height:20px; 766 line-height:20px; 767 text-decoration:none; 768 font-family: Lucida Console; 769} 770 771.clientlist_dropdown a { 772 background-color:#EFEFEF; 773 color:#FFF; 774 font-size:12px; 775 font-family:Arial, Helvetica, sans-serif; 776 text-decoration:none; 777} 778.clientlist_dropdown strong { 779 padding-left: 3px; 780} 781.clientlist_dropdown div:hover, .clientlist_dropdown a:hover { 782 background-color:#3366FF; 783 color:#FFFFFF; 784 cursor:default; 785} 786.clientlist_dropdown_expand { 787 text-align: center !important; 788 color: #A0A0A0 !important; 789 text-decoration: underline !important; 790 cursor: pointer !important; 791 text-align: right !important; 792 padding: 0 3px !important; 793} 794