Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ bd80f212

History | View | Annotate | Download (65.2 kB)

1
html, body, div, span, applet, object, iframe,
2
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
a, abbr, acronym, address, big, cite, code,
4
del, dfn, em, font, img, ins, kbd, q, s, samp,
5
small, strike, strong, sub, sup, tt, var,
6
b, u, i, center,
7
dl, dt, dd, ol, ul, li,
8
fieldset, form, label, legend,
9
table, caption, tbody, tfoot, thead, tr, th, td {
10
    margin: 0;
11
    padding: 0;
12
    border: 0;
13
    font-size: 100%;
14
    vertical-align: baseline;
15
    background: transparent;
16
    font-family: Verdana, 'PT Sans', sans-serif;
17
}
18

    
19
html {
20
    height: 100%;
21
}
22

    
23
body {
24
    background: url(./body-bg.png) repeat-x scroll 0 0 #FFFFFF;
25
    height: 100%;
26
    text-align:center;
27
}
28

    
29
#container {
30
    position: relative;
31
        margin:0 auto;
32
        width: 100%;
33
        background:#f0f0f0;
34
        height:auto !important;
35
        height:100%;
36
        min-height:100%;
37
    background: url("./body-bg2.png") no-repeat scroll right bottom transparent;
38
}
39

    
40
#header {
41
    height: 93px;
42
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
43
    margin: 0 auto;
44
    width: 700px;
45
    text-align: left;
46
    position: relative;
47
}
48

    
49
#content {
50
    padding-bottom: 183px;
51
    width: 100%;
52
}
53

    
54
div#wrapper {
55
    width: 700px;
56
    margin: 0em auto;
57
    text-align: left;
58
}
59

    
60
#footer {
61
    height: 119px;
62
    background-color: #4085A5;
63
    position:absolute;
64
    left: 0;
65
    bottom: 0;
66
    width:100%;
67
}
68

    
69
#footer div.grnet-sign {
70
    margin-top:10px;
71
}
72

    
73
#footer div.grnet-sign a{
74
    color: #72ADC8;
75
}
76

    
77
#footer div.grnet-sign a:hover {
78
    color: #FFFFFF;
79
}
80

    
81
ol, ul {
82
    list-style: none;
83
}
84

    
85
blockquote, q {
86
    quotes: none;
87
}
88

    
89
blockquote:before, blockquote:after,
90
q:before, q:after {
91
    content: '';
92
    content: none;
93
}
94

    
95
/* remember to define focus styles! */
96
:focus {
97
    outline: 1px dotted #87AADE;
98
}
99

    
100
/* remember to highlight inserts somehow! */
101
ins {
102
    text-decoration: none;
103
}
104

    
105
del {
106
    text-decoration: line-through;
107
}
108

    
109
/* tables still need 'cellspacing="0"' in the markup */
110
table {
111
    border-collapse: collapse;
112
    border-spacing: 0;
113
}
114

    
115
h5 {
116
    font-weight: normal;
117
    margin-bottom:3px;
118
}
119

    
120
/* root element for tabs  */
121
.tab-name {
122
    background-color: #5CA1C0;
123
    color: #FFFFFF;
124
    float: left;
125
    font-size: 150%;
126
    height: 28px;
127
    text-align: center;
128
    width: 170px;
129
}
130

    
131
.tab-separator {
132
    background-color: white;
133
    float: left;
134
    width: 2px;
135
    height: 23px;
136
    margin-top: 4px;
137
}
138

    
139
ul.css-tabs {
140
    padding: 0;
141
    height:31px;
142
    background-color: #5CA1C0;
143
}
144

    
145
ul.css-tabs .secondary {
146
    position:relative;
147
}
148

    
149
/* single tab */
150
ul.css-tabs li {
151
    float:left;
152
    padding:0;
153
    list-style-type:none;
154
}
155

    
156
ul.css-tabs .current {
157
    background: #4085A5;
158
}
159

    
160
/* link inside the tab. uses a background image */
161
ul.css-tabs a {
162
    float:left;
163
    display:block;
164
    text-decoration:none;
165
    color:#d2d2d2;
166
    position:relative;
167
    outline:0;
168
    padding: 4px 25px 0;
169
    height: 27px;
170
}
171

    
172
ul.css-tabs a:hover {
173
    background: #74AEC9;
174
}
175

    
176
/* selected tab */
177
ul.css-tabs a.current {
178
    cursor:default;
179
}
180

    
181
ul.css-tabs a.current:hover {
182
    background: #4085A5;
183
}
184
/* tab pane */
185
div.css-panes {
186
/*    border-top: 10px solid #87aade;
187
    border-bottom: 10px solid #87aade;  */
188
    background: transparent;
189
}
190

    
191
.css-panes > div.pane {
192
    display:none;
193
}
194

    
195
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
196
.rounded, #sheet input, .error {
197
    border-radius: 5px;
198
    -webkit-border-radius: 5px;
199
    -moz-border-radius: 5px;
200
    -o-border-radius: 5px;
201
    -khtml-border-radius: 5px;
202
}
203

    
204
/* validation error message */
205
.error {
206
    background-color:#E8FF6D;
207
    padding:4px;
208
    -webkit-box-shadow: #000 0 0 9pt;
209
    -moz-box-shadow: #000 0 0 9pt;
210
}
211

    
212
/* nested arrow inside error message. It's 100% CSS. No images. */
213
.error em {
214
    border: 10px solid;
215
    border-color: #E8FF6D transparent transparent;
216
    bottom: -17px;
217
    display: block;
218
    height: 0;
219
    left: 10px;
220
    position: absolute;
221
    width: 0;
222
}
223

    
224
/* input field that caused validation error */
225
.invalid {
226
    background-color: rgba(221, 233, 255, 0.898) !important;
227
}
228

    
229
#beforecreate {
230
    position:relative;
231
    background-color: #FF9955;
232
    float: left;
233
    height: 31px;
234
    margin-left: -13px;
235
    margin-top: -6px;
236
    width: 13px;
237
}
238

    
239
#ie-fix {
240
    z-index: 1000;
241
    position: relative;
242
}
243
#createcontainer {
244
    margin-top: 20px;
245
    margin-bottom: 10px;
246
    z-index: 1000;
247
}
248

    
249
#create {
250
    background-color: #FF7F2A;
251
    color: #000;
252
    cursor: pointer;
253
    padding: 7px 24px;
254
    text-decoration: none;
255
    font-size:100%;
256
}
257

    
258
#create:hover {
259
    background-color: #FF9955;
260
}
261

    
262
#console-header {
263
    height: 67px;
264
    margin-bottom:15px;
265
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
266
}
267

    
268
.header-logo {
269
    padding-top: 28px;
270
}
271

    
272
div#footer-text a {
273
    color: #FFFFFF;
274
    text-decoration: none;
275
}
276

    
277
div#footer-text{
278
    clear: both;
279
    color: #FFFFFF;
280
    font-size: 75%;
281
    left: 22%;
282
    padding-top: 10px;
283
    position: absolute;
284
    width: 700px;
285
}
286

    
287
#footer-bg {
288
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
289
    float:right;
290
    width: 700px;
291
    height: 119px;
292
    background-position:right;
293
}
294

    
295
.modal {
296
    background-color:#fff;
297
    display:none;
298
    width:30em;
299
    padding:1em;
300
    text-align:left;
301
}
302

    
303
/* server wizard scrollable root element and network wizard */
304
#wizard, #networks-wizard {
305
    font-size:75%;
306
    height:405px;
307
    width:453px;
308
    overflow:hidden;
309
    position:absolute !important;
310
}
311

    
312
/* scrollable items */
313
#wizard .items {
314
    width:20000em;
315
    clear:both;
316
    position:absolute;
317
    display:block;
318
    padding: 0;
319
    margin: 0;
320
    border:none;
321
    background:none;
322
}
323

    
324
/* single item */
325
#wizard .page, #networks-wizard div.container {
326
    padding: 0px 40px 20px 15px;
327
    width:447px;
328
    float:left;
329
    display:block;
330
    border:none;
331
    background-color: transparent;
332
}
333

    
334
#networks-wizard div.container {
335
    background-color: #ECF4F8;
336
    width:400px;
337
    height: 180px;
338
    margin-bottom:50px;
339
}
340

    
341
/* title */
342
#wizard h2, #networks-wizard h2 {
343
    color: #FF7B24;
344
    font-size: 100%;
345
    font-style: italic;
346
    font-weight: bold;
347
    margin-left: 37px;
348
    margin-top: 17px;
349
}
350

    
351
#networks-wizard h2 {
352
    margin-top: 15px;
353
}
354

    
355
#wizard li {
356
    margin-bottom:1.2em;
357
}
358

    
359
#wizard .pane li {
360
    margin: 0;
361
}
362

    
363
#wizard label {
364
    font-size:120%;
365
    display:block;
366
    clear: both;
367
}
368

    
369
#wizard label strong {
370
    position:relative;
371
    top:-1px;
372
    font-size: 80%;
373
    font-weight: normal;
374
}
375

    
376
#wizard label em {
377
    font-size:75%;
378
    color:#666;
379
    font-style:normal;
380
}
381

    
382
#wizard .text {
383
    width: 270px;
384
    padding: 5px;
385
    margin-top: 10px;
386
    border: 1px solid #ccc;
387
    color: #456;
388
    letter-spacing: 1px;
389
}
390

    
391
#wizard select {
392
    border:1px solid #ccc;
393
    width:94%;
394
    padding:4px;
395
    display: none;
396
}
397

    
398
#wizard .double label {
399
    width:50%;
400
    float:left;
401
}
402

    
403
#wizard .double .text {
404
    width:93%;
405
}
406

    
407
#wizard .clearfix {
408
    clear:left;
409
    padding-top:10px;
410
}
411

    
412
#wizard .right {
413
    float:right;
414
}
415

    
416
#wizard .error {
417
    border:1px solid red;
418
}
419

    
420
#wizard a:hover div.image {
421
    background-color: #C5DEE9;
422
}
423

    
424
.selecteddiv {
425
    background-color: #C5DEE9 !important;
426
}
427

    
428
#wizard label a:hover strong {
429
    color: black;
430
}
431

    
432
#wizard div.image span.size {
433
    font-size: 75%;
434
    color: #666;
435
}
436

    
437
#wizard div.image .radio {
438
    float: left;
439
    margin-top: 10px;
440
}
441

    
442
#wizard div.image span.image-id, #wizard div.image span.description {
443
    font-size: 75%;
444
    color: #666;
445
    font-weight: normal;
446
    display:inline;
447
}
448

    
449
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
450
    color: black;
451
}
452

    
453
#wizard .cost {
454
    color: #79A4C1;
455
    margin-top: 40px;
456
    clear:both;
457
    margin-left: 15px;
458
    font-size: 95%;
459
}
460

    
461
#wizard #status {
462
    height: 50px;
463
    background-color: #4085A5;
464
}
465

    
466
#wizard .headernumber {
467
    font-size: 410%;
468
}
469

    
470
#wizard .headerbody {
471
    font-size: 120%;
472
    font-weight: normal;
473
    display: inline;
474
    top: -15px;
475
    position: relative;
476
}
477

    
478
#wizard .first {
479
    left: -10px;
480
}
481

    
482
#wizard .checked {
483
    color: #64a6c4 !important;
484
}
485

    
486
#wizard .li-2 {
487
    margin-top: -1px !important;
488
}
489

    
490
#wizard .img-check {
491
    margin-bottom: 8px;
492
    margin-left: -8px;
493
}
494

    
495
#wizard .li-1 .img-check {
496
    margin-left: 2px;
497
}
498

    
499
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
500
    background-color: #CDE2EC;
501
    color: #CDE2EC;
502
    border: 0 none;
503
    height: 4px;
504
    margin-left: -1px;
505
    width: 447px;
506
    margin-bottom: 6px;
507
    margin-top: 4px;
508
}
509

    
510
#wizard .bottomruler, #networks-wizard .bottomruler {
511
    margin-top:6px;
512
}
513

    
514
#networks-wizard .topruler, #networks-wizard .bottomruler {
515
    width: 455px;
516
    float: left;
517
}
518

    
519
#wizard #cancel, #networks-wizard .cancel {
520
    background-color: #4085A5;
521
    border-color: #4085A5;
522
    text-align: center !important;
523
}
524

    
525
#wizard #cancel:hover, #networks-wizard .cancel:hover {
526
    background-color: #7DB4CD;
527
    border-color: #7DB4CD;
528
}
529

    
530
#wizard #start, #networks-wizard .create {
531
    text-align: center;
532
    background-color: #FF6600;
533
    border-color: #FF6600;
534
}
535

    
536
#wizard .img-next {
537
    margin: 0 -4px -1px 8px;
538
}
539

    
540
#wizard .img-prev {
541
    margin: 0 8px -1px -4px;
542
}
543

    
544
#networks-wizard .create {
545
    float:right;
546
    width: 140px;
547
}
548

    
549
#wizard #start:hover, #networks-wizard .create:hover {
550
    background-color: #FF9651;
551
    border-color: #FF9651;
552
}
553

    
554
#wizard .separator-end {
555
    position: absolute;
556
    background-color: #387693;
557
    height: 5px;
558
    margin-left: -14px;
559
    margin-top: 362px;
560
    width: 550px;
561
}
562

    
563
.page ul {
564
    height: 270px;
565
    overflow: auto;
566
}
567

    
568
.panes ul.pane {
569
    height: 220px;
570
}
571

    
572
#wizard #tabscontainer {
573
    background-color: #CDE2EC;
574
    height: 20px;
575
    width: 448px;
576
}
577

    
578
.page ul.tabs {
579
    overflow: hidden;
580
    height: auto;
581
    margin-bottom: -1px;
582
    margin-top: -1px;
583
}
584

    
585
.page ul.tabs li {
586
    float: right;
587
    margin: 0 0.2em;
588
}
589

    
590
#status li {
591
    float: left;
592
    color: #387693;
593
    padding: 0 1px 0 37px;
594
    bottom: 0px;
595
}
596

    
597
#status li.active .headernumber {
598
    color: #FFFFFF;
599
}
600

    
601
#status li.active .headerbody {
602
    color: #FFFFFF;
603
}
604

    
605
div.image-container {
606
    border-bottom: 1px solid #CCCCCC;
607
    margin-left: 10px;
608
    margin-right: 10px;
609
}
610

    
611
#page2-container {
612
    background-color: #ECF4F8;
613
    height: 193px;
614
    margin-top: 3px;
615
    padding-top: 25px;
616
}
617

    
618
#page3-container {
619
    background-color: #ECF4F8;
620
    height: 245px;
621
    margin-bottom: 32px;
622
    padding-left: 50px;
623
}
624

    
625
/* slider root element */
626
.slider {
627
    border: 1px solid #666;
628
    cursor: pointer;
629
    display: inline !important;
630
    float: left;
631
    margin: 5px 0 20px 10px;
632
    position: relative;
633
    width: 250px;
634
}
635

    
636
.sliders {
637
    float:left;
638
    width: 40px;
639
    margin-left: 10px;
640
    margin-top: 3px;
641
}
642

    
643
.units {
644
    padding-left:10px;
645
}
646

    
647
.slider-container {
648
    padding-bottom: 15px;
649
    margin-left: 5px;
650
}
651

    
652
/* drag handle */
653
.handle {
654
    -moz-box-shadow: 0 0 2px #000000;
655
    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;
656
    border: 1px solid #000000;
657
    cursor: move;
658
    display: block;
659
    height: 10px;
660
    margin-top: -8px;
661
    position: absolute;
662
    width: 8px;
663
}
664

    
665
/* progress bar (enabled with progress: true) */
666
.progress {
667
    height: 3px;
668
    background-color: #387693;
669
}
670

    
671
/* the input field */
672
.range {
673
    border: 1px solid #387693;
674
    float: left;
675
    font-size: 100%;
676
    margin: -3px 0 0 15px;
677
    padding: 2px 5px 2px 0;
678
    text-align: right;
679
    width: 50px;
680
}
681

    
682
.selectedrange {
683
    border-color: #5599FF;
684
}
685

    
686
#credits-indicator {
687
    background-color: #ECF4F8;
688
    float: none;
689
    margin: 0 0 0 10px;
690
    border: 1px solid #387693;
691
    color: #387693;
692
}
693

    
694
/* machines */
695
.machine-container {
696
    min-height: 65px;
697
    margin: 2px 0 0 3px;
698
    padding: 0 4px 0;
699
    clear: both;
700
    width: 523px;
701
    position:relative;
702
}
703

    
704
div.machine {
705
    margin-left: -7px;
706
    min-height: 65px;
707
    padding-left: 7px;
708
    padding-right: 5px;
709
    padding-top: 2px;
710
    width: 516px;
711
}
712

    
713
div.machine:hover {
714
    background-color:#A1C8DB !important;
715
}
716

    
717
div.machine.light-background, div.network.light-background {
718
    background-color:#aed2e3 !important;
719
}
720

    
721
.single .light-background {
722
    background-color:#aed2e3;
723
}
724

    
725
.machine a {
726
    font-weight: normal;
727
    text-decoration: none;
728
}
729

    
730
div.machine-details {
731
    width: 400px;
732
    float:left;
733
}
734

    
735
.machine span.name, .machine a.ip {
736
    font-size: 75%;
737
    color: black;
738
    margin-top: 6px;
739
}
740

    
741
.machine span.name {
742
    font-weight: bold;
743
}
744

    
745
.oldValue {
746
    display:none;
747
}
748

    
749
.state {
750
    margin-top: -40px;
751
}
752

    
753
.state div {
754
    text-align: right;
755
    margin-right: 3px;
756
}
757

    
758
/* icon view actions */
759
div.machine div.actions {
760
    float: right;
761
    font-size: 75%;
762
    font-weight: normal;
763
    height: 68px;
764
    position: absolute;
765
    right: -63px;
766
    width: 70px;
767
    top: 0px;
768
}
769

    
770
div.machine div.actions a {
771
    color: black;
772
    visibility: hidden;
773
    height: 15px;
774
    width: 180px;
775
    margin: 0 0 2px 8px;
776
    display: block;
777
}
778

    
779
div.machine div.actions a:hover {
780
    background-color:#A1C8DB;
781
    opacity: 0.8;
782
    filter: alpha(opacity = 80);
783
}
784

    
785
div.machine div.actions a.selected {
786
    color: #FF7F2A !important;
787
    width: 50px;
788
}
789

    
790
div.machine div.actions a.selected:hover {
791
    background-color:transparent;
792
}
793

    
794
div.machine div.actions a.action-shutdown {
795
    display: block;
796
}
797

    
798
div.machine div.actions a.shutdown-padding {
799
    margin-bottom: 22px;
800
}
801

    
802
div.action-container {
803
    overflow: visible;
804
}
805

    
806
div.actions a.enabled:hover{
807
    color: black !important;
808
    text-decoration: underline;
809
    display: block;
810
}
811

    
812
div.machine:hover .actions a {
813
    visibility: visible;
814
}
815

    
816
div.machine div.display a{
817
    visibility: visible;
818
}
819

    
820
div.running div.machine div.actions .disabled {
821
    display: none;
822
}
823

    
824
div.terminated div.machine div.actions .disabled {
825
    display: none;
826
}
827

    
828
div.terminated div.machine div.actions a.action-destroy {
829
    position: absolute;
830
    bottom: 0;
831
}
832

    
833
div.running div.machine div.actions a.action-destroy {
834
    position: absolute;
835
    bottom: 0;
836
}
837

    
838
div.connect-arrow {
839
    background: url(/static/connect-arrow.png) no-repeat;
840
    height: 28px;
841
    width:14px;
842
    position: absolute;
843
}
844

    
845
.machine div.connect-arrow {
846
    display: none;
847
    left: -3px;
848
    position: absolute;
849
    top: 9px;
850
}
851

    
852
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
853
    cursor: pointer;
854
    background: url(/static/connect-arrow-hover.png) no-repeat;
855
    height: 28px;
856
    width:26px;
857
}
858

    
859
div.connect-border {
860
    opacity: 0.8;
861
    filter: alpha(opacity = 80);
862
    background-color:#4fe0c3;
863
    height:28px;
864
    width: 12px;
865
    position: absolute;
866
}
867

    
868
div.connect-border:hover {
869
    cursor: pointer;
870
}
871

    
872
.machine div.connect-border {
873
    display: none;
874
    left: -15px;
875
    position: absolute;
876
    top: 9px;
877
}
878

    
879
.standard .machine img {
880
    float: left;
881
    margin: 4px 14px 0;
882
}
883

    
884
.standard .running .machine img {
885
   cursor: pointer;
886
}
887

    
888
.list .machine img {
889
    margin: 0;
890
}
891

    
892
div.ip, div.ips {
893
    font-size: 75%;
894
    position: relative;
895
    float: right;
896
    top:1px;
897
    right: 18px;
898
}
899

    
900
div.indicators {
901
    margin-right: 2px !important;
902
}
903
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
904
    background-color: #63cf1c;
905
    width:10px;
906
    height:11px;
907
    clear: none;
908
    float:right;
909
}
910

    
911
.view-separator {
912
    color:#5F8DD3;
913
}
914

    
915
.running {
916
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
917
    margin-top: -76px;
918
    padding-bottom: 15px;
919
    width: 699px;
920
    padding-top: 60px;
921
}
922

    
923
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
924
    background-color: #63cf1c;
925
}
926

    
927
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
928
    background-color: #d4aa00;
929
}
930

    
931
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
932
    background-color: #ff0000;
933
}
934

    
935
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
936
    background-color: #5e1616;
937
}
938

    
939
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
940
    background-color: #FF7F2A;
941
}
942

    
943
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
944
    background-color: #4085a5 !important;
945
}
946

    
947
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
948
    background-color: #940606;
949
}
950

    
951
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
952
    background-color: #9ed976;
953
}
954

    
955
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
956
    background-color: #63cf1c;
957
}
958

    
959
.terminated {
960
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
961
    margin-bottom: 17px;
962
    margin-top: 15px;
963
    padding-bottom: 15px;
964
    padding-top: 15px;
965
    width: 699px;
966
}
967

    
968
span.rename {
969
    background-repeat: no-repeat;
970
    color: transparent;
971
    font-size: 75%;
972
    font-weight: normal;
973
    margin-left: 10px;
974
    padding-left: 10px;
975
    text-align: left;
976
    cursor: pointer;
977
}
978

    
979
div.name:hover span.rename {
980
    color: #3D3D3D;
981
    margin-top: 0.4em;
982
    background-image: url(./pencil.png);
983
    background-position: 0 3px;
984
}
985

    
986
.machine div.info {
987
    float:left;
988
    margin-bottom: 8px;
989
    margin-top:3px;
990
}
991

    
992
.machine div.info div.info-header {
993
    background-color: #A1C8DB;
994
    color: white;
995
    height: 17px;
996
    width: 50px;
997
    cursor: pointer;
998
}
999

    
1000
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1001
    background-color: #84b7d0;
1002
}
1003

    
1004
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1005
    background-color: #5CA1C0;
1006
}
1007

    
1008
.machine div.info div.info-label {
1009
    font-size: 75%;
1010
    height:16px;
1011
    width: 30px;
1012
    padding: 1px 0 0 5px;
1013
}
1014

    
1015
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1016
    width:15px;
1017
    height:17px;
1018
    margin-top: -11px;
1019
    margin-left: 37px;
1020
}
1021

    
1022
div.network div.toggler {
1023
    margin-left: 90px;
1024
}
1025

    
1026
.machine div.info div.down {
1027
    background: url(/static/down-arrow.png) no-repeat scroll 1px 1px;
1028
}
1029

    
1030
.single div.tags div.down {
1031
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1032
}
1033

    
1034
.network div.network-machines div.down {
1035
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1036
}
1037

    
1038
.network div.network-machine div.firewall div.down {
1039
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1040
}
1041

    
1042
.machine div.info div.up {
1043
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1044
}
1045

    
1046
.single div.tags div.up {
1047
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1048
}
1049

    
1050
.network div.network-machines div.up {
1051
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1052
}
1053

    
1054
.network div.network-machine div.firewall div.up {
1055
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1056
}
1057

    
1058
button {
1059
    background-color: #87AADE;
1060
    border: 1px solid #87AADE;
1061
    color: #FFFFFF;
1062
    cursor: pointer;
1063
    height: 23px;
1064
    width: 120px;
1065
}
1066

    
1067
button.next {
1068
    background-color: #4085A5;
1069
    border-color: #4085A5;
1070
    text-align: right;
1071
}
1072

    
1073
button.next:hover {
1074
    background-color: #7DB4CD;
1075
    border-color: #7DB4CD;
1076
}
1077

    
1078
button.prev {
1079
    background-color: #4085A5;
1080
    border-color: #4085A5;
1081
    margin-left: -1px;
1082
    text-align: left;
1083
}
1084

    
1085
button.prev:hover {
1086
    background-color: #7DB4CD;
1087
    border-color: #7DB4CD;
1088
}
1089

    
1090
.image-logo {
1091
    float: left;
1092
    margin-right: 1em;
1093
    margin-left: 1.5em;
1094
    margin-top: 4px;
1095
}
1096

    
1097
div.image {
1098
    clear: both;
1099
    display: block;
1100
    margin-bottom: 3px;
1101
    margin-top: 3px;
1102
    padding: 5px;
1103
}
1104

    
1105
div#view-select {
1106
    float: right;
1107
    clear: both;
1108
    color: white;
1109
    position: relative;
1110
    right: 5px;
1111
    top: -35px;
1112
    display: none;
1113
    z-index: 1000;
1114
}
1115

    
1116
a#standard, a#list, a#single {
1117
    text-decoration: none;
1118
    height: 15px;
1119
    width: 17px;
1120
    padding: 1px 8px 2px 9px;
1121
}
1122

    
1123
div#view-select a {
1124
    color:#5f8dd3;
1125
}
1126

    
1127
a#list:hover {
1128
    background: #5f8dd3;
1129
}
1130

    
1131
a#standard:active, a#list:active {
1132
    color:white;
1133
}
1134

    
1135
a#standard {
1136
    background: url(./icon-view.png) no-repeat -36px 0;
1137
}
1138

    
1139
a#list {
1140
    background: url(./list-view.png) no-repeat -36px 0;
1141
}
1142

    
1143
a#single {
1144
    background: url(./single-view.png) no-repeat -36px 0;
1145
}
1146

    
1147
a#standard:hover {
1148
    background: url(./icon-view.png) no-repeat -18px 0;
1149
}
1150

    
1151
a#list:hover {
1152
    background: url(./list-view.png) no-repeat -18px 0;
1153
}
1154

    
1155
a#single:hover {
1156
    background: url(./single-view.png) no-repeat -18px 0;
1157
}
1158

    
1159
a#standard.activelink {
1160
    background: url(./icon-view.png) no-repeat 0px 0;
1161
}
1162

    
1163
a#list.activelink {
1164
    background: url(./list-view.png) no-repeat 0px 0;
1165
}
1166

    
1167
a#single.activelink {
1168
    background: url(./single-view.png) no-repeat 0px 0;
1169
}
1170

    
1171
#machinetype {
1172
    background-color: #CDE2EC;
1173
    height: 25px;
1174
    margin-bottom: 0px !important;
1175
}
1176

    
1177
div.machine-type {
1178
    float: left;
1179
    margin: 4px 18px 20px;
1180
}
1181

    
1182
.machine-type .active {
1183
    color: #FFFFFF
1184
}
1185

    
1186
#machinesview {
1187
    min-height: 270px;
1188
    margin-top: 40px;
1189
}
1190

    
1191
.list#machinesview {
1192
    margin-left: -20px;
1193
    display:none;
1194
}
1195

    
1196
#machinesview-list.list {
1197
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
1198
    margin-top: -76px;
1199
    padding-left: 15px;
1200
    padding-top: 76px;
1201
    min-height: 270px;
1202
}
1203

    
1204
#machinesview_content {
1205
    display:none;
1206
}
1207

    
1208
.list-machines {
1209
    min-width: 515px;
1210
}
1211

    
1212
#emptymachineslist {
1213
    background-color: #6BA9C6;
1214
    color: #A0A0A0;
1215
    display: none;
1216
    margin-top: -45px;
1217
    padding: 65px 150px 35px;
1218
    text-align: justify;
1219
}
1220

    
1221
#welcomeheader {
1222
    color:white;
1223
    text-align: center;
1224
}
1225

    
1226
.welcomebody {
1227
    color: white;
1228
    font-size:80%;
1229
}
1230

    
1231
.welcomebody a {
1232
    color: white;
1233
}
1234

    
1235
.welcomefooter {
1236
    color: white;
1237
    font-size:60%;
1238
}
1239

    
1240
.welcomefooter a {
1241
    color: white;
1242
}
1243

    
1244
.emptycreatecontainer {
1245
    margin-left: 430px !important;
1246
    position: absolute;
1247
    margin-top: 5px !important;
1248
    width: 180px;
1249
    background-color: #CCCCCC;
1250
    padding: 5px;
1251
    padding-left: 10px;
1252
}
1253

    
1254
.emptycreate {
1255
    margin: 20px 10px 5px 0 !important;
1256
}
1257

    
1258
#createbody {
1259
    display:none;
1260
    font-size: 80%;
1261
}
1262

    
1263
div.list label img {
1264
    margin: 5px 5px -3px 0;
1265
}
1266

    
1267
div.list label {
1268
    color: #3D3D3D;
1269
    font-size: 75%;
1270
}
1271

    
1272
div.list .state {
1273
    margin-top: 7px;
1274
    margin-right: 10px;
1275
}
1276

    
1277
div.list table tbody {
1278
    margin-top: 8px;
1279
}
1280

    
1281
div.list .stopped {
1282
    margin-top: 8px;
1283
}
1284

    
1285
/* root element for tabs  */
1286
#wizard ul.tabs {
1287
    margin-right: -1px;
1288
    float: right;
1289
}
1290

    
1291
#wizard div.panes {
1292
    height: 247px;
1293
    clear:both;
1294
    margin-top: 3px;
1295
}
1296

    
1297
.typebody {
1298
    font-size: 80%;
1299
    font-weight: normal;
1300
    position: relative;
1301
    top: -3px;
1302
}
1303

    
1304
.typehover {
1305
    color: #FFFFFF;
1306
}
1307

    
1308
#label-name {
1309
    margin-top: 10px;
1310
}
1311

    
1312
/* single tab */
1313
#wizard ul.tabs li {
1314
    margin-bottom: 0;
1315
    list-style-type:none;
1316
    float: left;
1317
}
1318

    
1319
/* link inside the tab. uses a background image */
1320
#wizard ul.tabs a {
1321
    display:block;
1322
    padding: 0.2em 0.5em 0.1em 0.4em;
1323
    text-decoration:none;
1324
    color: #FFFFFF;
1325
    position:relative;
1326
    top:1px;
1327
    outline:0;
1328
    background-color: transparent;
1329
    text-align: center;
1330
    width: 100px;
1331
    white-space: nowrap;
1332
    height: 17px;
1333
}
1334

    
1335
#wizard ul.tabs a:hover {
1336
    color: #FFFFFF;
1337
    background-color:#4085A5;
1338
}
1339

    
1340
/* selected tab */
1341
#wizard ul.tabs a.current {
1342
    color: white;
1343
    background-color: #7DB4CD;
1344
    cursor: default;
1345
}
1346

    
1347
#wizard #standard-images {
1348
    background-color: #ECF4F8;
1349
}
1350

    
1351
div.list div.actions {
1352
    display: none;
1353
    clear: left;
1354
    float: right;
1355
    margin-right: 15px;
1356
    margin-top: 37px;
1357
    text-align: right;
1358
    width: 120px;
1359
}
1360

    
1361
div.list div.actions a {
1362
    clear: left;
1363
    color: #A1A1A1;
1364
    display: block;
1365
    font-size:75%;
1366
    margin-bottom: 2px;
1367
}
1368

    
1369
div.list div.actions a:hover {
1370
    background-color: transparent;
1371
}
1372

    
1373
div.list div.actions a.enabled {
1374
    color: #3D3D3D;
1375
}
1376

    
1377
div.list div.actions a.enabled:hover{
1378
    cursor: pointer;
1379
    color: black;
1380
    text-decoration: underline;
1381
}
1382

    
1383
div.list div.actions a.selected {
1384
    color: #FF7F2A !important;
1385
}
1386

    
1387
input.machine {
1388
    width: 13px;
1389
    height: 13px;
1390
    top: -1px;
1391
    overflow: hidden;
1392
}
1393

    
1394
.description-container {
1395
    display: inline-block;
1396
    position: relative;
1397
    width: 300px;
1398
}
1399

    
1400
#wizard .button-container {
1401
    height: 20px;
1402
}
1403

    
1404
/* metadata editing and add machines to network overlays */
1405
#metadata-wizard, #add-machines-wizard {
1406
    position:absolute !important;
1407
    overflow:hidden;
1408
    width:450px;
1409
    display:none;
1410
    background-color:#fff;
1411
    text-align:left;
1412
    font-size: 80%;
1413
    border-bottom: 5px solid #4085A5;
1414
}
1415

    
1416
#metadata-wizard .close, #add-machines-wizard .close  {
1417
    background-image: url("./close-popup.png");
1418
    background-repeat: no-repeat;
1419
    cursor: pointer;
1420
    height: 13px;
1421
    position: absolute;
1422
    right: 7px;
1423
    top: 9px;
1424
    width: 13px;
1425
}
1426

    
1427
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1428
    background-color: #4085A5;
1429
    color: white;
1430
    font-size: 95%;
1431
    font-weight: normal;
1432
    height: 20px;
1433
    margin-left: -16px;
1434
    margin-top: -16px;
1435
    padding-bottom: 2px;
1436
    padding-left: 30px;
1437
    padding-top: 10px;
1438
    width: 482px;
1439
}
1440

    
1441
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1442
    font-size: 120%;
1443
    padding-bottom: 7px;
1444
    padding-top: 10px;
1445
    float:left;
1446
}
1447

    
1448
#metadata-wizard .popup-title {
1449
    padding-bottom: 0px;
1450
    font-size: 120%;
1451
}
1452

    
1453
#metadata-wizard .name-container {
1454
    display: inline-block;
1455
    clear: both;
1456
}
1457

    
1458
#add-machines-wizard .network-name {
1459
    padding-left: 5px;
1460
}
1461

    
1462
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1463
    background-image: url("./meta-wiz-bg.png");
1464
    margin-left: -16px;
1465
    margin-right: -16px;
1466
    margin-top: 1px;
1467
    height: 250px;
1468
    overflow-y: auto;
1469
    overflow-x: hidden;
1470
}
1471

    
1472
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1473
    background: url("./meta-wiz-inner-bg.png") repeat-x scroll 0 0 transparent;
1474
    font-size: 80%;
1475
    height: 180px;
1476
    margin-left: 25px;
1477
    margin-top: 10px;
1478
    padding-left: 15px;
1479
    width: 420px;
1480
}
1481

    
1482
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1483
    background-color: #74AEC9;
1484
    height: 1px;
1485
    width: 402px;
1486
    margin-bottom: 30px;
1487
    clear: left;
1488
    font-size: 1px;
1489
}
1490

    
1491
#metadata-wizard .metadata-pair-template {
1492
    height: 15px;
1493
    padding-top: 2px;
1494
    width: 350px;
1495
}
1496

    
1497
#metadata-wizard div.metadata-pair-template:hover {
1498
    background-color: #74AEC9;
1499
}
1500

    
1501
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1502
    background-color: transparent;
1503
    float: left;
1504
    width: 400px;
1505
    font-size: 120%;
1506
}
1507

    
1508
#metadata-wizard .machine-icon {
1509
    float: left;
1510
    padding-left: 10px;
1511
    padding-right: 3px;
1512
    padding-top: 7px;
1513
}
1514

    
1515
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1516
    display: block;
1517
    margin: 50px 0 0 185px;
1518
}
1519

    
1520
#metadata-wizard .metadata-key {
1521
    float: left;
1522
    width: 110px;
1523
    padding-left: 5px;
1524
}
1525

    
1526
#metadata-wizard .metadata-value {
1527
    width: auto;
1528
}
1529

    
1530
#metadata-wizard .metadata-add-template {
1531
    background-color: #74AEC9;
1532
    width: 350px;
1533
    position: relative;
1534
    overflow: visible;
1535
}
1536

    
1537
#metadata-wizard #add-meta-value {
1538
    margin-left: 25px;
1539
    width: 150px;
1540
}
1541

    
1542
#metadata-wizard button, #add-machines-wizard button {
1543
    font-size: 80%;
1544
    width: 87px;
1545
    float: right;
1546
    background-color: #5599FF;
1547
    border: 0px solid #5599FF;
1548
    padding: 0;
1549
    text-align: center;
1550
    margin-right: 8px;
1551
}
1552

    
1553
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1554
    border-top: 2px solid #4085A5;
1555
    height: 30px;
1556
    margin-left: 25px;
1557
    margin-right: 40px;
1558
    width: 400px;
1559
    font-size: 120%;
1560
}
1561

    
1562
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1563
    float: left;
1564
    height: 23px;
1565
    margin: 10px 0 0 0;
1566
    width: 87px;
1567
    background-color: #4085A5;
1568
    border-color: #4085A5;
1569
}
1570

    
1571
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1572
    background-color: #7DB4CD;
1573
    border-color: #7DB4CD;
1574
}
1575

    
1576
#metadata-wizard button.create, #add-machines-wizard button.add {
1577
    height: 23px;
1578
    margin: 10px 0 0 0;
1579
    background-color: #FF6600;
1580
    border-color: #FF6600;
1581
}
1582

    
1583
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1584
    background-color: #FF9651;
1585
    border-color: #FF9651;
1586
}
1587

    
1588
#metadata-wizard .editbuttons {
1589
    margin-top: 4px;
1590
    margin-right: 0;
1591
}
1592

    
1593
#metadata-wizard .vertical-separator {
1594
    height: 17px;
1595
    width: 1px;
1596
    background-color: #74AEC9;
1597
    float:left;
1598
    margin-right: 10px;
1599
}
1600

    
1601
#metadata-wizard h3, #add-machines-wizard h3 {
1602
    font-weight:normal;
1603
}
1604

    
1605
#metadata-wizard .metadata-edit {
1606
    clear: none;
1607
    cursor: pointer;
1608
    float: right;
1609
    margin-right: 0;
1610
    width: 40px;
1611
    margin-top: -14px;
1612
    display:none;
1613
}
1614

    
1615
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1616
    background-repeat: no-repeat;
1617
    color: transparent;
1618
    font-size: 75%;
1619
    float: left;
1620
    width: 16px;
1621
    height: 16px;
1622
}
1623

    
1624
#metadata-wizard .addbuttons {
1625
    display: block;
1626
    clear: none;
1627
    width: 40px;
1628
    margin-right: -1px !important;
1629
    margin-top: 2px;
1630
    float:right;
1631
    cursor: pointer;
1632
}
1633

    
1634
.metadata-pair-template .editbuttons {
1635
    margin-top: -19px !important;
1636
    margin-right: -2px !important;
1637
}
1638

    
1639
#metadata-wizard .metadata-edit .edit {
1640
    background-image: url("./meta-edit.png");
1641
    margin-left: 2px;
1642
}
1643

    
1644
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1645
    background-image: url("./meta-remove.png");
1646
    margin-left: 4px;
1647
    background-repeat: no-repeat;
1648
    color: transparent;
1649
    font-size: 75%;
1650
    height: 16px;
1651
    width: 16px;
1652
    float: left;
1653
}
1654

    
1655
#metadata-wizard .editbuttons .save {
1656
    background-image: url("./meta-save.png");
1657
    padding-top:0;
1658
}
1659

    
1660
#metadata-wizard .addbuttons .cancel {
1661
    background-image: url("./meta-remove.png");
1662
    margin-left: 3px;
1663
}
1664

    
1665
#metadata-wizard .addbuttons .save {
1666
    background-image: url("./meta-save.png");
1667
    margin-left: 1px;
1668
}
1669

    
1670
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove, #metadata-wizard .editbuttons .save, #metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1671
    background-color: #4287a7;
1672
}
1673

    
1674
#metadata-wizard div.metadata-edit div.edit:hover, #metadata-wizard div.metadata-edit div.remove:hover, #metadata-wizard div.editbuttons div.remove:hover, #metadata-wizard div.editbuttons div.save:hover, #metadata-wizard div.addbuttons div.cancel:hover, #metadata-wizard div.addbuttons div.save:hover {
1675
    background-color: #74AEC9;
1676
}
1677

    
1678
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1679
    width: 16px;
1680
    height: 16px;
1681
    float: left;
1682
    background-repeat: no-repeat;
1683
    color: transparent;
1684
}
1685

    
1686
#metadata-wizard .metatextbox {
1687
    font-size: 90%;
1688
    height: 18px;
1689
    margin-top: -2px;
1690
    color: black;
1691
    width: 150px;
1692
}
1693

    
1694
#metadata-wizard p, #add-machines-wizard p {
1695
    margin-left: 7px;
1696
    width: 200px;
1697
}
1698

    
1699
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1700
    background-color: #666;
1701
    height: 20px;
1702
    margin-top: 17px;
1703
}
1704

    
1705
#metadata-wizard button.remove {
1706
    height: 15px;
1707
    width: 70px;
1708
    background-color: #d35f5f;
1709
    border-color: #d35f5f;
1710
}
1711

    
1712
#metadata-wizard button.edit {
1713
    height: 15px;
1714
    width: 70px;
1715
    background-color: #666;
1716
    border-color: #666;
1717
    margin-top: -12px;
1718
}
1719

    
1720
#metadata-wizard input {
1721
    font-style: italic;
1722
    color: #ccc;
1723
}
1724

    
1725
#metadata-wizard textarea.edit-meta-value {
1726
    font-style: normal;
1727
    text-align: left;
1728
    color: black;
1729
    margin-top: 2px;
1730
    width:200px;
1731
    height: 49px;
1732
}
1733

    
1734
#metadata-wizard input {
1735
    font-size: 80%;
1736
}
1737

    
1738
#metadata-wizard input.key {
1739
    height: 15px;
1740
    left: 460px;
1741
    position: absolute;
1742
    top: 83px;
1743
    width: 230px;
1744
}
1745

    
1746
#metadata-wizard textarea.value {
1747
    width: 267px;
1748
    height: 170px;
1749
    overflow: auto;
1750
}
1751

    
1752
#metadata-wizard .input-enabled {
1753
    color: black;
1754
    text-align: left;
1755
    font-style: normal;
1756
}
1757

    
1758
#metadata-wizard label.meta-value {
1759
    vertical-align: top;
1760
}
1761

    
1762
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1763
    float: left;
1764
    margin: 4px 0 0 25px;
1765
    background-color: #d35f5f;
1766
    border-color: #d35f5f;
1767
}
1768

    
1769
/* metadata dropdown combo */
1770
.meta-key {
1771
    margin-right: 18px;
1772
    float:left;
1773
}
1774
#metadata-wizard .textdropdown-outer {
1775
    float: left;
1776
    overflow: visible;
1777
}
1778

    
1779
#metadata-wizard .textdropdown-btn {
1780
    background: url("./dropdown-arrow.gif") no-repeat scroll center center transparent;
1781
    cursor: pointer;
1782
    float: right;
1783
    left: 90px;
1784
    margin-top: 4px;
1785
    position: absolute;
1786
    width: 20px;
1787
}
1788

    
1789
#metadata-wizard ul {
1790
    border: 1px solid #ccc;
1791
    padding: 0px;
1792
    list-style: none;
1793
    margin: 0px;
1794
    background-color: white;
1795
    height: auto !important;
1796
    padding-left: 5px;
1797
    width: 103px !important;
1798
    position: relative;
1799
}
1800

    
1801
#metadata-wizard ul li {
1802
    clear: both;
1803
    display: block;
1804
    float: right;
1805
    list-style: none outside none;
1806
    margin-bottom: 0 !important;
1807
    margin-left: 0 !important;
1808
    padding-bottom: 2px;
1809
    padding-right: 2px;
1810
    padding-top: 2px;
1811
    width: 100%;
1812
}
1813

    
1814
#metadata-wizard ul li:hover {
1815
    background-color: #efefef;
1816
    cursor: pointer;
1817
}
1818

    
1819
#metadata-wizard .dropdownitem {
1820
    margin-left: 10px;
1821
}
1822

    
1823
#metadata-wizard #txtdropdown:focus {
1824
    outline: 0 none;
1825
}
1826

    
1827
#metadata-wizard #add-meta-key {
1828
    height: 16px;
1829
    margin-left: 5px;
1830
    margin-top: 2px;
1831
    width: 105px !important;
1832
}
1833

    
1834
/* notification box */
1835
#yes-no {
1836
    height: 150px;
1837
    z-index: 9999;
1838
    border-bottom: 5px solid #4085A5;
1839
}
1840

    
1841
#yes-no p, #yes-no button {
1842
    margin-top: 15px;
1843
}
1844

    
1845
#error-success {
1846
    z-index: 9999;
1847
    border-bottom: 5px solid #4085A5;
1848
    min-height: 150px;
1849
    top: 120px !important;
1850
    position: absolute !important;
1851
}
1852

    
1853
#error-success p {
1854
    margin-top: 5px;
1855
}
1856

    
1857
#error-success strong {
1858
    color: #F49C1A;
1859
}
1860

    
1861
#error-success .close {
1862
    background-image: url("./close-popup.png");
1863
    background-repeat: no-repeat;
1864
    cursor: pointer;
1865
    height: 13px;
1866
    position: absolute;
1867
    right: 7px;
1868
    top: 9px;
1869
    width: 13px;
1870
}
1871

    
1872
.popup-header-error {
1873
    background-color: #800000 !important;
1874
}
1875

    
1876
.popup-border-error {
1877
    border-color: #800000 !important;
1878
    width:auto;
1879
}
1880

    
1881
.popup-details-error {
1882
    border: none !important;
1883
}
1884

    
1885
.popup-separator-error {
1886
    margin-bottom: 5px !important;
1887
}
1888

    
1889
#error-success .popup-header {
1890
    background-color: #4085A5;
1891
    color: white;
1892
    font-size: 95%;
1893
    font-weight: normal;
1894
    height: 20px;
1895
    margin-left: -16px;
1896
    margin-top: -16px;
1897
    padding-bottom: 2px;
1898
    padding-left: 30px;
1899
    padding-top: 10px;
1900
    width: 482px;
1901
    margin-right:-16px;
1902
}
1903

    
1904

    
1905
#error-success.success h3 span.header-box{
1906
    background-color: #71c837;
1907
    display: block;
1908
    background-image: url("./save-green.png");
1909
    background-position: right 0;
1910
    background-repeat: no-repeat;
1911
    width: 80px;
1912
    padding: 3px 3px 3px 8px;
1913
    margin-top: -6px;
1914
    font-size: 90% !important;
1915
    margin-left: -11px;
1916
}
1917

    
1918
#error-success .popup-body {
1919
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
1920
    margin-left: -16px;
1921
    margin-right: -16px;
1922
    margin-top: 1px;
1923
    min-height: 142px;
1924
    padding-top: 10px;
1925
}
1926

    
1927
#error-success .popup-body-inner {
1928
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1929
    font-size: 80%;
1930
    min-height: 120px;
1931
    margin-left: 20px;
1932
    padding-left: 15px;
1933
    width: 460px;
1934
}
1935

    
1936
#error-success .popup-separator {
1937
    background-color: #74AEC9;
1938
    height: 1px;
1939
    font-size:1%;
1940
    width: 442px;
1941
    margin-bottom: 30px;
1942
}
1943

    
1944
#error-success .machine-now-building {
1945
    font-size: 95%;
1946
    padding-bottom: 7px;
1947
    padding-top: 10px;
1948
}
1949

    
1950
#error-success.success .machine-now-building {
1951
    padding-bottom: 14px !important;
1952
}
1953

    
1954
#error-success .password-container {
1955
    width: 430px;
1956
    padding: 5px;
1957
    border: 2px solid #75b54a;
1958
    background-color: #aade87;
1959
}
1960

    
1961
#error-success .password-header {
1962
    margin-bottom: 5px;
1963
}
1964

    
1965
#error-success .password {
1966
    color: #447821;
1967
}
1968

    
1969
#error-success .popup-details {
1970
    border: 2px solid #FF7F2A;
1971
    float: left;
1972
    margin-left: 10px;
1973
    padding: 2px;
1974
}
1975

    
1976
#error-success.success .popup-details {
1977
    border: none !important;
1978
    float: none !important;
1979
    margin-left: none !important;
1980
    margin-top: 10px;
1981
}
1982

    
1983
#error-success.success .popup-separator {
1984
    margin-bottom: 14px !important;
1985
}
1986

    
1987
#error-success .write-password {
1988
    margin-bottom: 5px;
1989
    padding-left: 30px;
1990
}
1991

    
1992
#error-success .write-password-password {
1993
    padding-left: 30px;
1994
    color: #447821;
1995
    display: inline;
1996
    font-size: 110%;
1997
    font-weight: bold;
1998
}
1999

    
2000
#error-success .write-password-details {
2001
    font-size: 75%;
2002
}
2003

    
2004
.more-details {
2005
    display: block;
2006
}
2007

    
2008
.popup-details a:link, .popup-details a:visited{
2009
    color: black;
2010
}
2011

    
2012
/* Confirmation boxes */
2013
div.confirm_single, div.confirm_multiple, div.action_error {
2014
    display: none;
2015
    color: black;
2016
}
2017

    
2018
div.action-container.destroy div.confirm_single {
2019
    bottom: 0;
2020
    position: absolute;
2021
    left: 83px;
2022
}
2023

    
2024
div.terminated div.action-container.destroy div.confirm_single {
2025
    margin-top: 30px;
2026
}
2027

    
2028
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2029
    font-size: 100%;
2030
    cursor: pointer;
2031
    color: black;
2032
    height: 20px !important;
2033
}
2034

    
2035
div.confirm_single {
2036
    float: right;
2037
    margin: -20px -122px 0 0;
2038
}
2039

    
2040
div.confirm_single button {
2041
    border: none;
2042
}
2043

    
2044
div.confirm_single button.yes {
2045
    width: 90px;
2046
    background-color:#FF7F2A;
2047
}
2048

    
2049
div.confirm_single button.yes:hover {
2050
    background-color: #FF9955;
2051
}
2052

    
2053
div.confirm_single button.no {
2054
    width: 20px;
2055
    margin-left:-5px;
2056
    background-color: #FF9955;
2057
    color:#d95d0a;
2058
}
2059

    
2060
div.confirm_single button.no:hover {
2061
    color: white;
2062
}
2063

    
2064
div.confirm_multiple {
2065
    background-color: #4085A5;
2066
    font-size: 75%;
2067
    z-index: 1;
2068
    position: absolute;
2069
    width: 698px;
2070
    height: 28px;
2071
    margin-top: 15px;
2072
}
2073

    
2074
div.confirm_multiple p {
2075
    float: left;
2076
    color: #FF7F2A;
2077
    font-weight: bold;
2078
    margin: 7px 0 0 200px;
2079
}
2080

    
2081
#networks-pane div.confirm_multiple p {
2082
    margin: 7px 0 0 100px;
2083
}
2084

    
2085
div.confirm_multiple button {
2086
    float: right;
2087
    background-color: transparent;
2088
    border: 1px solid #5CA1C0;
2089
    margin: 4px 5px 0 0;
2090
}
2091

    
2092
div.confirm_multiple button.yes {
2093
    border-color: #FF7F2A;
2094
    padding: 0 12px;
2095
}
2096

    
2097
div.confirm_multiple button.yes:hover {
2098
    background-color: #FF7F2A;
2099
}
2100

    
2101
div.confirm_multiple button.no {
2102
    padding: 0px 16px;
2103
}
2104

    
2105
div.confirm_multiple button.no:hover {
2106
    background-color: #5CA1C0;
2107
}
2108

    
2109
div.action_error {
2110
    width: 80px;
2111
    height: 60px;
2112
    padding: 5px;
2113
    margin: -2px 0 0 595px;
2114
    background-color: #4085A5;
2115
    font-size: 75%;
2116
    line-height: 1.5;
2117
    z-index:1;
2118
    color: #FF7F2A;
2119
    position:absolute;
2120
    top: 0px;
2121
}
2122

    
2123
.action_error button {
2124
    width: 80px !important;
2125
    background-color: transparent;
2126
    border: 1px solid;
2127
    padding: 0px;
2128
    border-color: #FF7F2A;
2129
}
2130

    
2131
div.action_error button.details {
2132
    margin: 5px 0 0 0px;
2133
    padding: 0 15px;
2134
}
2135

    
2136
div.action_error button.details:hover {
2137
    background-color: #FF7F2A;
2138
}
2139

    
2140
div#aboutuser{
2141
    float:right;
2142
    clear: both;
2143
    color: #FFFFFF;
2144
    font-size: 75%;
2145
    margin-top: -25px;
2146
}
2147

    
2148
div#user{
2149
    float:right;
2150
    clear: both;
2151
    color: #FFFFFF;
2152
    font-size: 75%;
2153
    margin-top: 38px;
2154
    padding-bottom: 10px;
2155
    z-index: 400;
2156
}
2157

    
2158
div#user a{
2159
    color: #FFFFFF;
2160
    text-decoration: none;
2161
}
2162

    
2163
div#user a.current_lang {
2164
    color: #72ADC8;
2165
}
2166

    
2167
div#user .usermenu {
2168
    float: left;
2169
    cursor: pointer;
2170
    overflow: hidden;
2171
    padding-top: 5px;
2172
    margin-top: -5px;
2173
    position: relative;
2174
}
2175

    
2176
div#user .username {
2177
    display: block;
2178
    margin-right: 10px;
2179
    padding-right: 18px;
2180
    padding-left: 4em;
2181
    height: 20px;
2182
    background: url("./down-arrow-light.png") no-repeat right;
2183
    background-position: right 6px;
2184
    font-weight: bold;
2185
}
2186

    
2187
div#user .usermenu.hovered {
2188
    background: #599EBD;
2189
    overflow: visible;
2190
    border-bottom: 1px solid #C7DFE9;
2191
}
2192

    
2193
div#user .usermenu.hovered .username {
2194
    background-image: url("./down-arrow-lighter.png");
2195
}
2196

    
2197
div#user .active {
2198
    background-color: #BED5E0 !important;
2199
}
2200

    
2201
div#user .usermenu.active .username {
2202
    color: #599EBD;
2203
    background-image: url("./down-arrow-lighter.png");
2204
}
2205

    
2206
div#user .useractions {
2207
    display: none;
2208
}
2209

    
2210
div#user .active .useractions {
2211
    display: block;
2212
    text-align: right;
2213
    color: #4085A5;
2214
    background-color: #D0E3ED;
2215
    margin-top:-1px;
2216
    border-top:1px solid #fff;
2217
    position: relative;
2218
    top: 1px;
2219
}
2220

    
2221
div#user .useractions li {
2222
    padding: 5px 10px;
2223
    border-bottom: 1px solid #efefef;
2224
    text-align: right;
2225
    display: block;
2226
}
2227

    
2228
div#user .useractions li a {
2229
    color: #4085A5;
2230
    display: inline-block;
2231
    padding:5px 0;
2232
    padding-left: 30px;
2233
    padding-bottom: 6px;
2234
    background-repeat: no-repeat;
2235
    background-position: center left;
2236
}
2237

    
2238
div#user .useractions li:hover {
2239
    background-color: #E1EFF6;
2240
}
2241

    
2242
div#user .useractions li.last {
2243
    border-bottom: none;
2244
}
2245

    
2246
div#user .useractions .logout a {
2247
    background-image: url("./icon-logout.png");
2248
}
2249

    
2250
div#user .langmenu {
2251
    float: left;
2252
    border-left: 1px solid #ffffff;
2253
    padding-left: 10px;
2254
    margin-left: -1px;
2255
}
2256

    
2257
div#user .langmenu .sep {
2258
    display: inline-block;
2259
    color: #72ADC8;
2260
}
2261

    
2262
.separator {
2263
    background-color: #74AEC9;
2264
    height: 10px;
2265
    width: 700px;
2266
    font-size: 1px;
2267
    line-height: 0px;
2268
}
2269

    
2270
#disks.separator {
2271
    background-color: #dea842;
2272
}
2273

    
2274
#networks.separator {
2275
    background-color: #6c535d;
2276
}
2277

    
2278
.network-machine h5 {
2279
    margin-bottom: 26px;
2280
    margin-top:0px;
2281
}
2282

    
2283
.machine-container .separator {
2284
    width: 508px;
2285
    height: 1px;
2286
    margin-top: 2px;
2287
    background-color: #5CA1C0;
2288
    margin-left: 13px;
2289
}
2290

    
2291
.machine h5 {
2292
    margin: -3px 0px 4px 0px;
2293
}
2294

    
2295
.machine h5.namecontainer {
2296
    margin-top: 1px;
2297
}
2298

    
2299
.editbuttons {
2300
    display: block;
2301
    clear: none;
2302
    width: 40px;
2303
    margin-right: 32%;
2304
    padding-top: 2px;
2305
    float: right;
2306
    cursor: pointer;
2307
    position: relative;
2308
    z-index: 1000;
2309
}
2310

    
2311
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2312
    background-color: #84b7d0;
2313
}
2314

    
2315
div.editbuttons div.cancel:hover {
2316
    background-image: url("./cancel-onhover.png");
2317
}
2318

    
2319
.editbuttons .cancel, .editbuttons .save {
2320
    background-repeat: no-repeat;
2321
    color: transparent;
2322
    height: 16px;
2323
    width: 16px;
2324
    float: left;
2325
}
2326

    
2327
.editbuttons .cancel {
2328
    background-image: url("./cancel.png");
2329
    margin-left: 3px;
2330
}
2331

    
2332
.editbuttons .save {
2333
    background-image: url("./save.png");
2334
    margin-left: 1px;
2335
}
2336

    
2337
.editbuttons img {
2338
    float:none !important;
2339
    margin: 0px !important;
2340
}
2341

    
2342
.namecontainer {
2343
    height: 18px;
2344
    margin-top: 9px;
2345
}
2346

    
2347
.nametextbox {
2348
    font-size: 95%;
2349
}
2350

    
2351
.large-spinner {
2352
    background: url("./icons/indicators/large/progress.gif");
2353
    margin-left: 298px;
2354
    margin-top: 0px;
2355
    height: 31px;
2356
    width: 31px;
2357
    position: absolute;
2358
}
2359

    
2360
.list .large-spinner {
2361
    margin-top:-30px;
2362
}
2363

    
2364
.single .large-spinner {
2365
    margin-top: 50px;
2366
}
2367

    
2368
div#networks-container .large-spinner {
2369
    margin-top: 50px;
2370
}
2371

    
2372
/* tables in list view */
2373
div.list div.dataTables_filter {
2374
    font-size: 75%;
2375
    display: none;
2376
    margin-bottom: 12px;
2377
}
2378

    
2379
div.list div.dataTables_filter input{
2380
    font-size: 100%;
2381
}
2382

    
2383
.dataTables_wrapper {
2384
    width: 515px;
2385
    padding-bottom: 40px;
2386
}
2387

    
2388
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2389
    padding-right: 15px !important;
2390
}
2391

    
2392
div.list table {
2393
    width: 515px;
2394
    font-size: 75%;
2395
}
2396

    
2397
div.list table tbody td {
2398
    color: #3D3D3D;
2399
    padding:6px;
2400
    vertical-align: middle;
2401
}
2402

    
2403
div.list table thead tr th {
2404
    background-color: #CDE2EC;
2405
    background-image: url(bg.gif);
2406
    background-repeat: no-repeat;
2407
    background-position: right 11px;
2408
    font-weight: normal;
2409
    border: 1px solid transparent;
2410
    border-bottom: none;
2411
    padding: 4px;
2412
    text-align: left;
2413
    vertical-align: middle;
2414
    cursor: pointer;
2415
}
2416

    
2417
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2418
    background-color: #5CA1C0;
2419
}
2420

    
2421
div.list table thead .sorting_asc {
2422
    background-image: url(asc.gif);
2423
}
2424

    
2425
div.list table thead .sorting_desc {
2426
    background-image: url(desc.gif);
2427
}
2428

    
2429
div.list table .selection div.expand-icon {
2430
    background-image: url(asc.gif);
2431
    background-repeat: no-repeat;
2432
    position: relative;
2433
    cursor: pointer;
2434
    width: 15px;
2435
    height: 4px;
2436
    left: 19px;
2437
    top: -11px;
2438
}
2439

    
2440
ul.dropdown-selector {
2441
    background-color: #E6EEEE;
2442
    position: absolute;
2443
    margin-left: 1px;
2444
    display: block;
2445
    top: 255px;
2446
    font-size:75%;
2447
    width:40px;
2448
}
2449

    
2450
ul.dropdown-selector li {
2451
    padding: 4px;
2452
}
2453

    
2454
ul.dropdown-selector li:hover {
2455
    background-color: #5CA1C0;
2456
}
2457

    
2458
ul.dropdown-selector li a{
2459
    color: black;
2460
    text-decoration: none;
2461
}
2462

    
2463
div.list table span.imagetag {
2464
    display: none;
2465
}
2466

    
2467
div.list table thead .vmos {
2468
    width: 20px !important;
2469
    vertical-align:middle;
2470
}
2471

    
2472
div.list table .selection {
2473
    width: 20px !important;
2474
    text-align: left;
2475
    background-image: none;
2476
    padding-left: 6px;
2477
}
2478

    
2479
div.list table thead .vmflavor {
2480
    width: 100px !important;
2481
}
2482

    
2483
/* group column commented out for v0.5
2484
div.list table thead .vmgroup {
2485
    width: 40px !important;
2486
}
2487
*/
2488

    
2489
div.list table thead .vmstatus {
2490
    width: 50px !important;
2491
}
2492

    
2493
div.list table thead .vmname {
2494
    width: 110px !important;
2495
}
2496

    
2497
.spinner, .action-indicator {
2498
    clear: right;
2499
    float:right !important;
2500
    margin: 10px 6px 0 15px !important;
2501
}
2502
.action-indicator {
2503
    margin-right: 18px !important;
2504
}
2505

    
2506
.wave {
2507
    clear: right;
2508
    float:right !important;
2509
    margin: 10px 15px 0 15px !important;
2510
}
2511

    
2512
#networks-pane .spinner {
2513
    margin-top: 18px !important;
2514
}
2515

    
2516
.hidden {
2517
    display:none;
2518
}
2519

    
2520
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2521
    display:block !important;
2522
}
2523

    
2524
.action_error .message, .action_error .code {
2525
    display: none;
2526
}
2527

    
2528
.fixed {
2529
    bottom: 0;
2530
    position: fixed !important;
2531
}
2532

    
2533
/* Networks */
2534
#networks-pane {
2535
    background-color: transparent;
2536
    color: black;
2537
    margin-left: 1px;
2538
    margin-right: 0;
2539
}
2540

    
2541
#networkscreate {
2542
    color: black;
2543
    background-color: #FF7F2A;
2544
    cursor: pointer;
2545
    padding: 7px 24px;
2546
    text-decoration: none;
2547
}
2548

    
2549
#networkscreate:hover {
2550
    background-color: #FF9955;
2551
}
2552

    
2553
#networks-pane #beforecreate {
2554
    margin-left: -13px;
2555
    margin-top: -6px;
2556
}
2557

    
2558
#networks-container {
2559
    margin-top: 10px;
2560
    min-height: 270px;
2561
}
2562

    
2563
#networks-createcontainer {
2564
    position: absolute;
2565
    top: 155px;
2566
}
2567

    
2568
#networks-pane .public-networks {
2569
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2570
    margin: 0 0 18px;
2571
    padding: 70px 0 15px 35px;
2572
}
2573

    
2574
#networks-pane .private-networks {
2575
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2576
    padding: 15px 20px 20px 35px;
2577
}
2578

    
2579
#public-template, #private-template, #public-machine-template, #private-machine-template {
2580
    display:none;
2581
}
2582

    
2583
div.network a.action-network-add {
2584
    display: none;
2585
}
2586

    
2587
div.network a.action-network-destroy {
2588
    margin-top: 32px !important;
2589
    width: 50px;
2590
    display: none;
2591
}
2592

    
2593
div.network {
2594
    clear: both;
2595
    min-height: 65px;
2596
    margin: 5px 0 0 -35px;
2597
    padding: 3px 20px 0;
2598
    width: 480px;
2599
    position: relative;
2600
}
2601

    
2602
#private-template {
2603
    margin: 2px 0 0 -30px;
2604
}
2605

    
2606
div.network-placeholder {
2607
    margin-left: 33px;
2608
}
2609

    
2610
div.private-networks div.network-placeholder {
2611
    border-left: 3px solid #FF7F2A;
2612
}
2613

    
2614
div.network-cable {
2615
    border-left: 3px solid #FF7F2A;
2616
    float: left;
2617
    margin-left: -40px;
2618
    margin-top: -45px;
2619
    height: 185px;
2620
    overflow: hidden;
2621
}
2622

    
2623
.first div.network-cable {
2624
    height:143px;
2625
    margin-top:-6px;
2626
    position: relative;
2627
}
2628

    
2629
div.network-contents div.machines-list div.first {
2630
    margin-top:0;
2631
}
2632

    
2633
.last div.network-cable {
2634
    height:85px;
2635
}
2636

    
2637
div.firewall-cable {
2638
    border-left: 3px solid #FF7F2A;
2639
    float: left;
2640
    margin-left: -100px;
2641
    margin-top: -20px;
2642
    height: 110px;
2643
}
2644

    
2645
.last div.firewall-cable {
2646
    display:none;
2647
}
2648

    
2649
div.network a:hover {
2650
    text-decoration: underline;
2651
    cursor: pointer;
2652
}
2653

    
2654
#networks-container .name {
2655
    font-size: 75%;
2656
}
2657

    
2658
div.network-machines, div.firewall {
2659
    font-size: 75%;
2660
    margin-left: 70px;
2661
}
2662

    
2663
div.firewall {
2664
    margin-left: 60px;
2665
    margin-bottom: 3px;
2666
}
2667

    
2668
div.machines-header, div.firewall-header {
2669
    background-color: #A1C8DB;
2670
    color: white;
2671
    cursor: pointer;
2672
    height: 17px;
2673
    width: 103px;
2674
}
2675

    
2676
 div.private-networks div.machines-header {
2677
    margin-top: -5px;
2678
}
2679

    
2680
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2681
    background-color: #84b7d0;
2682
}
2683

    
2684
div.network-machine:hover div.firewall-header {
2685
    background-color: #5CA1C0;
2686
}
2687

    
2688
div.machines-label, div.firewall-label {
2689
    width: 100%;
2690
    padding-bottom:1px;
2691
    padding-left: 3px;
2692
}
2693

    
2694
div.firewall-label.darker {
2695
    background-color: #4085a5;
2696
}
2697

    
2698
.state {
2699
    float: right;
2700
    position: absolute;
2701
    right: 10px;
2702
    top: 40px;
2703
    font-size: 75%;
2704
}
2705

    
2706
div.network div.actions {
2707
    float: right;
2708
    font-size: 75%;
2709
    font-weight: normal;
2710
    height: 70px;
2711
    width: 100px;
2712
    position: absolute;
2713
    right: -100px;
2714
    top: 0;
2715
}
2716

    
2717
div.network div.machine-actions {
2718
    text-decoration: none;
2719
    float: right;
2720
    width: 100px;
2721
    margin: -7px -100px 0 0;
2722
    font-weight: normal;
2723
    font-size: 75%;
2724
}
2725

    
2726
div.network div.actions a, div.network div.machine-actions a {
2727
    text-decoration: none;
2728
    height: 15px;
2729
    color: black;
2730
    visibility: hidden;
2731
    display: block;
2732
}
2733

    
2734
div.network div.actions a {
2735
    margin: 4px 0 0 8px;
2736
}
2737

    
2738
div.network div.machine-actions a {
2739
    margin: 8px 0 0 8px;
2740
}
2741

    
2742
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2743
    display: block;
2744
    background-color:#A1C8DB;
2745
    width: 200px;
2746
    opacity: 0.8;
2747
    filter: alpha(opacity = 80);
2748
}
2749

    
2750
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2751
    visibility: visible;
2752
}
2753

    
2754
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2755
    color: #FF7F2A !important;
2756
    width: 50px !important;
2757
}
2758

    
2759
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2760
    background-color: transparent;
2761
}
2762

    
2763
div.network div.display a {
2764
    visibility: visible;
2765
}
2766

    
2767
div.network-machine div.machine-actions a.action-details {
2768
    margin-top: 7px;
2769
}
2770

    
2771
div.network:hover {
2772
    background-color: #A1C8DB !important;
2773
}
2774

    
2775
.network-logos {
2776
    float:left;
2777
    padding-right: 10px;
2778
}
2779

    
2780
.network-logos:hover {
2781
    cursor: pointer;
2782
}
2783

    
2784
.state div {
2785
    text-align: right;
2786
    margin: 4px 1px -4px;
2787
}
2788

    
2789
.public-networks .state div {
2790
    margin-top: 4px;
2791
}
2792

    
2793
.private-networks .state div {
2794
    margin-top: 9px;
2795
    margin-bottom: -12px;
2796
}
2797

    
2798
.public-networks .name-div {
2799
    margin-top:-7px;
2800
    margin-bottom: 23px;
2801
}
2802

    
2803
div.indicator {
2804
    clear: none;
2805
    float: right;
2806
    height: 11px;
2807
    margin: 3px -1px;
2808
    width: 10px;
2809
}
2810

    
2811
#private-networks {
2812
    margin-top: 20px;
2813
}
2814

    
2815
.private-networks .editbuttons {
2816
    margin-right: 22%;
2817
}
2818

    
2819
.private-networks div.confirm_single {
2820
    margin: 45px -219px -5px 0;
2821
    font-size: 80%;
2822
}
2823

    
2824
.private-networks .network-machine div.confirm_single {
2825
    margin: 0 -199px 0 0;
2826
}
2827

    
2828
.private-networks .state {
2829
    top: 35px;
2830
}
2831

    
2832
.private-networks div.machines-list {
2833
    padding-top: 3px;
2834
}
2835

    
2836
span.rename-network, span.configure {
2837
    background-repeat: no-repeat;
2838
    color: transparent;
2839
    font-size: 75%;
2840
    font-weight: normal;
2841
    margin-left: 10px;
2842
    padding-left: 10px;
2843
    text-align: left;
2844
}
2845

    
2846
span.rename-network {
2847
    cursor: pointer;
2848
}
2849

    
2850
div.name-div:hover span.rename-network {
2851
    color: #3D3D3D;
2852
    margin-top: 0.4em;
2853
    background-image: url(./pencil.png);
2854
    background-position: 0 3px;
2855
}
2856

    
2857
div.network:hover a.rename {
2858
    color: #3d3d3d;
2859
}
2860

    
2861
.network-separator {
2862
    background-color: #5CA1C0;
2863
    height: 1px;
2864
    margin: 2px 0 0 -5px;
2865
    width: 480px;
2866
    font-size: 1%;
2867
    line-height: 1px;
2868
}
2869

    
2870
.network-contents {
2871
    margin-left: -4px;
2872
    width: 504px;
2873
    clear: both;
2874
    padding-bottom: 7px;
2875
}
2876

    
2877
.network-machine .state div {
2878
    text-align: left;
2879
}
2880

    
2881
.network-machine {
2882
    margin-left: 35px;
2883
    padding-bottom: 5px;
2884
    padding-left: 5px;
2885
    padding-top: 5px;
2886
    margin-top: 5px;
2887
}
2888

    
2889
.network-machine .logo {
2890
    float:left;
2891
    padding-right: 10px;
2892
    position:relative;
2893
}
2894

    
2895
#networks-container .machine-name {
2896
    text-decoration: none !important;
2897
    margin-bottom: 10px;
2898
    color: #000000;
2899
    margin-top: -4px;
2900
}
2901

    
2902
.private-networks .separator {
2903
    background-color: #5CA1C0;
2904
    height: 1px;
2905
    margin: 3px 0 -2px -10px;
2906
    width: 485px;
2907
}
2908

    
2909
.network-machine .state {
2910
    margin-right: 18px;
2911
}
2912

    
2913
.network-machine .state .status {
2914
    margin-bottom: 4px;
2915
}
2916

    
2917
.machine-name .name {
2918
    margin-top: -10px !important;
2919
}
2920

    
2921
.machine-name .namecontainer {
2922
    line-height: 18px;
2923
    margin-bottom: 20px;
2924
}
2925

    
2926
div.network-machine:hover {
2927
    background-color: #84B7D0;
2928
}
2929

    
2930
.machines {
2931
    width: 416px;
2932
    margin-bottom: -8px;
2933
    margin-top: 10px;
2934
}
2935

    
2936
div.empty-network-slot {
2937
    height: 60px;
2938
}
2939

    
2940
div.network-remove-machine, div.network-add-machine {
2941
    background-color: #FB822F;
2942
    color: #bc4b00;
2943
    width:90px;
2944
    height:18px;
2945
    float:left;
2946
    margin:40px 0 0 -100px;
2947
}
2948

    
2949
span.remove-icon {
2950
    font-size: 80%;
2951
    margin-left: 15px;
2952
}
2953

    
2954
div.add-icon {
2955
    margin-left: 15px;
2956
    margin-top: -3px;
2957
    cursor: pointer;
2958
}
2959

    
2960
span.remove-icon:hover, span.add-icon:hover {
2961
    cursor:pointer;
2962
    color: #fff;
2963
}
2964

    
2965
div.network-add-machine {
2966
    margin:43px 0 0 -3px;
2967
}
2968

    
2969
.firewall-on {
2970
    color: #42E342;
2971
}
2972

    
2973
.firewall-off {
2974
    color: #F82E2E;
2975
}
2976

    
2977
.firewall-content {
2978
    color: black;
2979
    font-size: 60%;
2980
    margin-left: 60px;
2981
    height: 55px;
2982
    margin-bottom: 17px;
2983
}
2984

    
2985
.firewall-content .checkbox-legends {
2986
    vertical-align: text-top;
2987
}
2988

    
2989
.checkbox-legends a {
2990
    color: black;
2991
    text-decoration: underline;
2992
    font-size: 100%;
2993
}
2994

    
2995
h5.machine-connect {
2996
    font-size: 75%;
2997
    margin-bottom: 3px;
2998
}
2999

    
3000
.machine-connect span {
3001
    text-decoration: underline;
3002
}
3003

    
3004
h5.machine-connect span:hover {
3005
    cursor: pointer;
3006
}
3007

    
3008
.firewall-apply {
3009
    background-color: #4085a5;
3010
    border: medium none;
3011
    float: right;
3012
    font-size: 105%;
3013
    height: 18px;
3014
    margin-right: 5px;
3015
    margin-top: 3px;
3016
    width: 75px;
3017
}
3018

    
3019
.firewall-apply:hover {
3020
    background-color:#5CA1C0;
3021
}
3022

    
3023
.name-div {
3024
    margin: -9px 0 30px 70px;
3025
}
3026

    
3027
.machine-name-div {
3028
    margin-bottom: 20px;
3029
    margin-left: 60px;
3030
}
3031

    
3032
div.reboot-dialog {
3033
    display: none;
3034
    color: black;
3035
    background-color: #4085A5;
3036
    font-size: 75%;
3037
    margin-top: 15px;
3038
    width: 698px;
3039
    z-index: 1;
3040
}
3041

    
3042
div#reboot-machine-template, div.reboot-machine-entry {
3043
    display: none;
3044
    padding: 0 0 10px 35px;
3045
    width: 300px;
3046
}
3047

    
3048
div.reboot-dialog p {
3049
    color: #FF7F2A;
3050
    padding: 10px 0 10px 10px;
3051
}
3052

    
3053
div.reboot-dialog button {
3054
    float:right;
3055
    border: 1px solid #FF7F2A;
3056
    background-color: transparent;
3057
    font-size:100%;
3058
}
3059

    
3060
div.reboot-dialog button:hover {
3061
    background-color: #FF7F2A;
3062
}
3063

    
3064
div.reboot-dialog button.reboot-all {
3065
    margin: -30px 35px 0 0;
3066
}
3067

    
3068
div.reboot-dialog button.reboot-single {
3069
    color: black;
3070
    margin-top: -20px;
3071
}
3072

    
3073
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3074
    display:none;
3075
}
3076

    
3077
div.reboot-dialog button.details {
3078
    border-color: #800000;
3079
    margin-top: -20px;
3080
}
3081

    
3082
div.reboot-dialog button.details:hover {
3083
    background-color: #800000;
3084
}
3085

    
3086
/* Metadata */
3087
.info-content {
3088
    clear: both;
3089
    height: 95px;
3090
    width: 512px;
3091
}
3092

    
3093
.metadata-container {
3094
    line-height: 12px;
3095
    height: 85px;
3096
    background-color: #84b7d0;
3097
}
3098

    
3099
.metadata-column {
3100
    border-right: 1px solid #5CA1C0;
3101
    color: black;
3102
    float: left;
3103
    font-size: 60%;
3104
    margin-top: 3px;
3105
    height: 70px;
3106
    padding-bottom: 5px;
3107
}
3108

    
3109
.vm-stats {
3110
    padding-left: 10px;
3111
    padding-right: 5px;
3112
    width: 220px;
3113
}
3114

    
3115
.vm-stats div.stat-content {
3116
    height: 18px;
3117
}
3118

    
3119
.vm-stats div.stat-content img {
3120
    margin: 0;
3121
}
3122

    
3123
.vm-stats div.stat-content img.busy {
3124
    margin-left: 95px;
3125
}
3126

    
3127
.vm-stats div.stat-error {
3128
    display:none;
3129
}
3130

    
3131
.vm-details {
3132
    width: 130px;
3133
    margin-left:17px;
3134
}
3135

    
3136
.vm-metadata {
3137
    padding-left: 10px;
3138
    width: 100px;
3139
    border: none;
3140
}
3141

    
3142
.metadata-left {
3143
    float:left;
3144
    width: 30px;
3145
    height: 60px;
3146
}
3147

    
3148
.metadata-right {
3149
    width: 73px;
3150
    float:left;
3151
    height: 35px;
3152
    padding-left: 5px;
3153
    position:relative;
3154
    overflow:hidden;
3155
}
3156

    
3157
.metadata-right .items {
3158
    position:absolute;
3159
    height:20000em;
3160
}
3161

    
3162
.metadata-keys-container {
3163
    height: 60px;
3164
    float: left;
3165
}
3166

    
3167
.single .metadata-keys-container {
3168
    float: none;
3169
    height: 50px;
3170
}
3171

    
3172
.single a.manage-metadata {
3173
    font-size: 80%;
3174
    margin-left:4px;
3175
    color: #383838;
3176
}
3177

    
3178
a.manage-metadata, a.stats-report {
3179
    font-size: 100%;
3180
    color: black;
3181
    margin-left:17px;
3182
    text-decoration: underline;
3183
}
3184

    
3185
a.stats-report {
3186
    margin: 15px 0  0 80px;
3187
}
3188

    
3189
div.machine a.manage-metadata:hover {
3190
    background-color: transparent;
3191
}
3192

    
3193
.metadata-actions, .scrollable {
3194
    padding-left: 5px;
3195
}
3196

    
3197
.singe .metadata-actions, .single .scrollable {
3198
    font-size: 80%;
3199
    line-height: 12px;
3200
    width: 300px;
3201
}
3202

    
3203
.metadata-actions .prev,  .metadata-actions .next{
3204
    float:left;
3205
    width:29px;
3206
    height:6px;
3207
    cursor: pointer;
3208
}
3209

    
3210
.metadata-actions .prev {
3211
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3212
}
3213

    
3214
.metadata-actions .next {
3215
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3216
}
3217

    
3218
.scrollable {
3219
    position:relative;
3220
    overflow:hidden;
3221
    height: 35px;
3222
    width: 60px;
3223
    margin-bottom:2px;
3224
}
3225

    
3226
.scrollable .items {
3227
    position:absolute;
3228
    height:20000em;
3229
}
3230

    
3231
/* single view */
3232
.single {
3233
    color: #383838;
3234
    margin-top: -76px;
3235
    padding-bottom: 10px;
3236
    width: 679px;
3237
}
3238

    
3239
.single .column1 {
3240
    float: left;
3241
    margin: 1px 0 25px 17px;
3242
    width: 140px;
3243
}
3244

    
3245
.single .column1 .state {
3246
    float: left;
3247
    margin-left: 4px;
3248
    padding-bottom: 6px;
3249
    padding-top: 3px;
3250
    position: relative;
3251
    right: 0;
3252
    text-align: center;
3253
    width: 126px;
3254
}
3255

    
3256
.single .column1 .state-label {
3257
    padding-top: 5px;
3258
}
3259

    
3260
.single .column1 .indicators {
3261
    margin-right: 38px !important;
3262
}
3263

    
3264
.single div.connect-arrow {
3265
    margin-left: -17px;
3266
}
3267

    
3268
.single div.connect-border {
3269
    margin-left: -29px;
3270
}
3271

    
3272
.single .single-actions {
3273
    padding-bottom: 4px;
3274
    padding-left: 15px;
3275
    width: 69px;
3276
    float: left;
3277
}
3278

    
3279
.single div.single-action {
3280
    font-size: 80%;
3281
    line-height: 18px;
3282
    text-decoration: none;
3283
    cursor: pointer;
3284
}
3285

    
3286
.single div.single-action:hover {
3287
    background-color:#A1C8DB;
3288
    width: 180px;
3289
    opacity: 0.8;
3290
    filter: alpha(opacity = 80);
3291
}
3292

    
3293
.single div.single-action.selected {
3294
    color: #FF7F2A !important;
3295
    width: 50px !important;
3296
}
3297

    
3298
.single div.single-action.selected:hover {
3299
    background-color:transparent;
3300
}
3301

    
3302
.single div.confirm_single {
3303
    font-size: 80%;
3304
    margin: -19px -115px 0 0;
3305
}
3306

    
3307
.single div.action-container.destroy div.confirm_single {
3308
    margin: -18px -116px 0 0;
3309
    position: relative;
3310
    left: 0px;
3311
}
3312

    
3313
.single div.confirm_single button.no {
3314
    margin-left: -5px;
3315
}
3316

    
3317
.single .spinner, .single .action-indicator {
3318
    margin: 15px 45px 0 0px !important
3319
}
3320

    
3321
.single .action-indicator {
3322
    margin-right: 55px !important;
3323
}
3324

    
3325
.single .wave {
3326
    margin: 15px 53px 0 0px !important
3327
}
3328

    
3329
.single div.action_error {
3330
    margin: 2px 0px 0 605px !important;
3331
    position: relative;
3332
}
3333

    
3334
.single .column2 {
3335
    background-color: #A1C8DB;
3336
    float: left;
3337
    font-size: 78%;
3338
    line-height: 17px;
3339
    margin: 0 0 10px 5px;
3340
    width: 358px;
3341
}
3342

    
3343
.single .column2 .machine-labels {
3344
    float: left;
3345
    font-size: 90%;
3346
    margin-left: 10px;
3347
    margin-top: 10px;
3348
    width: 125px;
3349
}
3350

    
3351
.single .column2 .machine-details {
3352
    float: right;
3353
    text-align: right;
3354
    font-size: 90%;
3355
    width: 210px;
3356
    margin-right: 10px;
3357
    margin-top: 10px;
3358
}
3359

    
3360
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3361
    margin-bottom: 13px;
3362
}
3363

    
3364
.single .tags {
3365
    clear: both;
3366
    margin-bottom: 10px;
3367
    margin-left: 10px;
3368
}
3369

    
3370
.single .tags-label {
3371
    float: left;
3372
    padding: 0 5px;
3373
    width: 30px;
3374
}
3375

    
3376
.single .tags-down-arrow {
3377
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3378
    float: left;
3379
    height: 16px;
3380
    width: 9px;
3381
}
3382

    
3383
.single .tags-header {
3384
    background-color: #84B7D0;
3385
    cursor: pointer;
3386
    height: 16px;
3387
    width: 55px;
3388
}
3389

    
3390
.single .tags-content {
3391
    background-color: #84B7D0;
3392
    clear: both;
3393
    height: 65px;
3394
    padding-bottom: 5px;
3395
    padding-top: 5px;
3396
    width: 300px;
3397
}
3398

    
3399
.single .column3 {
3400
    background-color: #A1C8DB;
3401
    margin-left: 535px;
3402
    position: absolute;
3403
    top: 280px;
3404
    width: 150px;
3405
    overflow: visible;
3406
    padding-bottom: 10px;
3407
}
3408

    
3409
.single .column3 .controls {
3410
    font-size: 80%;
3411
    height: 20px;
3412
    padding-left: 7px;
3413
    padding-right: 7px;
3414
    padding-top: 8px;
3415
}
3416

    
3417
.single .column3 .previous {
3418
    float:left;
3419
    width: 72px;
3420
}
3421

    
3422
.single .column3 .next {
3423
    float: right;
3424
    text-align: center;
3425
    width: 60px;
3426
}
3427

    
3428
.single .column3 .next-label {
3429
    float: right;
3430
    margin-right: 3px;
3431
    margin-top: -2px;
3432
}
3433

    
3434
.single .column3 .next-arrow {
3435
    float: right;
3436
    height: 18px;
3437
    width: 10px;
3438
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3439
}
3440

    
3441
.single .column3 .prev-label {
3442
    float: left;
3443
    margin-left: 3px;
3444
    margin-top: -2px;
3445
}
3446

    
3447
.single .column3 .prev-arrow {
3448
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3449
    float: left;
3450
    height: 18px;
3451
    width: 10px;
3452
}
3453

    
3454
.single .column3 .separator {
3455
    width: 135px;
3456
    height: 1px;
3457
    background-color: #84B7D0;
3458
    margin: 0 0 0 7px;
3459
    clear: both;
3460
}
3461

    
3462
.single .column3 .servers {
3463
    font-size: 80%;
3464
    line-height: 15px;
3465
    padding-top: 10px;
3466
    text-align: right;
3467
    overflow: visible;
3468
    position: relative;
3469
}
3470

    
3471
.single .column3 .server-name {
3472
    margin-left: 10px;
3473
    padding-right: 5px;
3474
    cursor: pointer;
3475
    padding-bottom: 2px;
3476
}
3477

    
3478
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3479
    background-color: #84B7D0;
3480
    color: white;
3481
    opacity: 0.8;
3482
    padding-left: 9px;
3483
    text-align: left;
3484
    width: 160px;
3485
    filter: alpha(opacity = 80);
3486
    position: relative;
3487
}
3488

    
3489
.single .toggler {
3490
    color: #FFFFFF;
3491
    float: right;
3492
    font-size: 140%;
3493
}
3494

    
3495
.single .cpu-usage, .single .network-usage {
3496
    text-align: center;
3497
    padding-top: 15px;
3498
    margin-bottom: 5px;
3499
    font-size: 90%;
3500
    font-weight: bold;
3501
}
3502

    
3503
.single .cpu-graph, .single .network-graph {
3504
    margin-left: 20px;
3505
    margin-bottom:30px;
3506
    width: 660px;
3507
}
3508

    
3509
.single div.lower img.stats {
3510
    margin-left: 82px;
3511
}
3512

    
3513
.single .single-image {
3514
    width: 126px;
3515
    margin-bottom: 10px;
3516
    margin-left: 4px;
3517
}
3518

    
3519
.single .column3 .previous, .single .column3 .next {
3520
    cursor: pointer;
3521
    background-color: #84B7D0;
3522
    color: white;
3523
    font-size: 100%;
3524
    height: 15px;
3525
    padding-top: 2px;
3526
}
3527

    
3528
.single .column3 .disabled {
3529
    opacity: 0.5;
3530
    filter: alpha(opacity = 50);
3531
}
3532

    
3533
.single div.lower {
3534
    clear:both;
3535
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3536
    width: 700px;
3537
    padding-bottom: 15px;
3538
}
3539

    
3540
.single div.upper {
3541
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3542
    margin-bottom: 10px;
3543
    min-height: 310px;
3544
    overflow: visible;
3545
    padding-top: 60px;
3546
    width: 700px;
3547
}
3548

    
3549
/* console css */
3550
.console-header-logo {
3551
    padding-top: 17px;
3552
    margin-left: 30px;
3553
    position: fixed;
3554
}
3555

    
3556
#console-header div.help-text {
3557
    font-size: 75%;
3558
    font-weight:bold;
3559
    color:#FF7F2A;
3560
    float:left;
3561
    position: absolute;
3562
    margin: 45px 0 0 2px;
3563
}
3564

    
3565
div.console-container {
3566
    margin: 0 0em;
3567
    height: auto;
3568
}
3569

    
3570
#wrapper.console {
3571
    width: auto;
3572
}
3573

    
3574
.console-info {
3575
    font-size:80%;
3576
    color: white;
3577
    float:left;
3578
    position:relative;
3579
    margin: 25px 0 0 480px;
3580
}
3581

    
3582
applet {
3583
    width:100%;
3584
    height:100%;
3585
}
3586

    
3587
div.console-footer {
3588
    /* this is for version 0.5*/
3589
    display: none;
3590
}
3591

    
3592
.console-footer #footer-text{
3593
    float:left;
3594
    left: auto;
3595
    margin-left:30px;
3596
}
3597

    
3598
/* add network wizard (see also #wizard for shared classes) */
3599
#networks-wizard .header {
3600
    background-color: #4085A5;
3601
    height: 56px;
3602
}
3603

    
3604
#networks-wizard div.name-input {
3605
    margin: 75px 0 0 55px;
3606
}
3607

    
3608
#networks-wizard input {
3609
    border: 1px solid #CCCCCC;
3610
    color: #445566;
3611
    letter-spacing: 1px;
3612
    width: 170px;
3613
}
3614

    
3615
#networks-wizard span.help {
3616
    font-style: italic;
3617
    font-size: 80%;
3618
    margin-left: 10px;
3619
}
3620

    
3621
#networks-wizard .separator-end {
3622
    background-color: #387693;
3623
    height: 6px;
3624
    width: 479px;
3625
    margin-left: -13px;
3626
    margin-top: 22px;
3627
}
3628

    
3629
.red {
3630
    color: red;
3631
}
3632

    
3633
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3634
#add-machines-wizard span.machine-name {
3635
    margin-left: 4px;
3636
    vertical-align: text-top;
3637
}
3638

    
3639
#add-machines-wizard img.list-logo {
3640
    margin: 2px 1px 1px;
3641
}
3642

    
3643
.css-panes {
3644
    clear: both;
3645
}
3646

    
3647
.last .firewall-content {
3648
    margin-bottom:13px;
3649
}
3650

    
3651
#pub .last .network-separator {
3652
    display:none;
3653
}
3654

    
3655
.public-networks .empty-network-slot {
3656
    display: none;
3657
}
3658

    
3659
/* float clearing for all browsers except the devil one */
3660
.clearfix:after{
3661
  clear: both;
3662
  content: ".";
3663
  display: block;
3664
  height: 0;
3665
  visibility: hidden;
3666
  font-size: 0;
3667
}
3668

    
3669
#machinesview-list div.action-indicator {
3670
    margin:0 !important;
3671
    float: none !important;
3672
}
3673

    
3674
div.action-indicator {
3675
    width: 15px;
3676
    height: 20px;
3677
    background-repeat: no-repeat;
3678
    background-position: 0 0;
3679
}
3680

    
3681
tbody.machines div.action-indicator {
3682
    position: relative;
3683
    top: -2px;
3684
}
3685
div.state .destroy, tbody.machines .destroy {
3686
    background-image: url("./icons/actions/medium/destroy.png");
3687
}
3688
div.state .start, tbody.machines .start {
3689
    background-image: url("./icons/actions/medium/start.png");
3690
}
3691
div.state .reboot, tbody.machines .reboot {
3692
    background-image: url("./icons/actions/medium/reboot.png");
3693
}
3694
div.state .shutdown, tbody.machines .shutdown {
3695
    background-image: url("./icons/actions/medium/shutdown.png");
3696
}