Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 6c37c5ef

History | View | Annotate | Download (60.8 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
}
47

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

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

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

    
68
ol, ul {
69
    list-style: none;
70
}
71

    
72
blockquote, q {
73
    quotes: none;
74
}
75

    
76
blockquote:before, blockquote:after,
77
q:before, q:after {
78
    content: '';
79
    content: none;
80
}
81

    
82
/* remember to define focus styles! */
83
:focus {
84
    outline: 1px dotted #87AADE;
85
}
86

    
87
/* remember to highlight inserts somehow! */
88
ins {
89
    text-decoration: none;
90
}
91

    
92
del {
93
    text-decoration: line-through;
94
}
95

    
96
/* tables still need 'cellspacing="0"' in the markup */
97
table {
98
    border-collapse: collapse;
99
    border-spacing: 0;
100
}
101

    
102
h5 {
103
    font-weight: normal;
104
    margin-bottom:3px;
105
}
106

    
107
/* root element for tabs  */
108
.tab-name {
109
    background-color: #5CA1C0;
110
    color: #FFFFFF;
111
    float: left;
112
    font-size: 150%;
113
    height: 28px;
114
    text-align: center;
115
    width: 170px;
116
}
117

    
118
.tab-separator {
119
    background-color: white;
120
    float: left;
121
    width: 2px;
122
    height: 23px;
123
    margin-top: 4px;
124
}
125

    
126
ul.css-tabs {
127
    padding: 0;
128
    height:31px;
129
    background-color: #5CA1C0;
130
}
131

    
132
ul.css-tabs .secondary {
133
    position:relative;
134
}
135

    
136
/* single tab */
137
ul.css-tabs li {
138
    float:left;
139
    padding:0;
140
    list-style-type:none;
141
}
142

    
143
ul.css-tabs .current {
144
    background: #4085A5;
145
}
146

    
147
/* link inside the tab. uses a background image */
148
ul.css-tabs a {
149
    float:left;
150
    display:block;
151
    text-decoration:none;
152
    color:#d2d2d2;
153
    position:relative;
154
    outline:0;
155
    padding: 4px 25px 0;
156
    height: 27px;
157
}
158

    
159
ul.css-tabs a:hover {
160
    background: #74AEC9;
161
}
162

    
163
/* selected tab */
164
ul.css-tabs a.current {
165
    cursor:default;
166
}
167

    
168
ul.css-tabs a.current:hover {
169
    background: #4085A5;
170
}
171
/* tab pane */
172
div.css-panes {
173
/*    border-top: 10px solid #87aade;
174
    border-bottom: 10px solid #87aade;  */
175
    background: transparent;
176
}
177

    
178
.css-panes > div.pane {
179
    display:none;
180
}
181

    
182
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
183
.rounded, #sheet input, .error {
184
    border-radius: 5px;
185
    -webkit-border-radius: 5px;
186
    -moz-border-radius: 5px;
187
    -o-border-radius: 5px;
188
    -khtml-border-radius: 5px;
189
}
190

    
191
/* validation error message */
192
.error {
193
    background-color:#E8FF6D;
194
    padding:4px;
195
    -webkit-box-shadow: #000 0 0 9pt;
196
    -moz-box-shadow: #000 0 0 9pt;
197
}
198

    
199
/* nested arrow inside error message. It's 100% CSS. No images. */
200
.error em {
201
    border: 10px solid;
202
    border-color: #E8FF6D transparent transparent;
203
    bottom: -17px;
204
    display: block;
205
    height: 0;
206
    left: 10px;
207
    position: absolute;
208
    width: 0;
209
}
210

    
211
/* input field that caused validation error */
212
.invalid {
213
    background-color: rgba(221, 233, 255, 0.898) !important;
214
}
215

    
216
#beforecreate {
217
    position:relative;
218
    background-color: #FF9955;
219
    float: left;
220
    height: 31px;
221
    margin-left: -13px;
222
    margin-top: -6px;
223
    width: 13px;
224
}
225

    
226
#ie-fix {
227
    z-index: 1000;
228
    position: relative;
229
}
230
#createcontainer {
231
    margin-top: 20px;
232
    margin-bottom: 10px;
233
    z-index: 1000;
234
}
235

    
236
#create {
237
    background-color: #FF7F2A;
238
    color: #000;
239
    cursor: pointer;
240
    padding: 7px 24px;
241
    text-decoration: none;
242
    font-size:100%;
243
}
244

    
245
#create:hover {
246
    background-color: #FF9955;
247
}
248

    
249
#console-header {
250
    height: 67px;
251
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
252
}
253

    
254
.header-logo {
255
    padding-top: 19px;
256
}
257

    
258
div#footer-text a {
259
    color: #FFFFFF;
260
    text-decoration: none;
261
}
262

    
263
div#footer-text{
264
    clear: both;
265
    color: #FFFFFF;
266
    font-size: 75%;
267
    left: 22%;
268
    padding-top: 10px;
269
    position: absolute;
270
    width: 700px;
271
}
272

    
273
#footer-bg {
274
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
275
    float:right;
276
    width: 700px;
277
    height: 119px;
278
    background-position:right;
279
}
280

    
281
.modal {
282
    background-color:#fff;
283
    display:none;
284
    width:30em;
285
    padding:1em;
286
    text-align:left;
287
}
288

    
289
/* server wizard scrollable root element and network wizard */
290
#wizard, #networks-wizard {
291
    font-size:75%;
292
    height:405px;
293
    width:453px;
294
    overflow:hidden;
295
    position:absolute !important;
296
}
297

    
298
/* scrollable items */
299
#wizard .items {
300
    width:20000em;
301
    clear:both;
302
    position:absolute;
303
    display:block;
304
    padding: 0;
305
    margin: 0;
306
    border:none;
307
    background:none;
308
}
309

    
310
/* single item */
311
#wizard .page, #networks-wizard div.container {
312
    padding: 0px 40px 20px 15px;
313
    width:447px;
314
    float:left;
315
    display:block;
316
    border:none;
317
    background-color: transparent;
318
}
319

    
320
#networks-wizard div.container {
321
    background-color: #ECF4F8;
322
    width:400px;
323
    height: 180px;
324
    margin-bottom:50px;
325
}
326

    
327
/* title */
328
#wizard h2, #networks-wizard h2 {
329
    color: #FF7B24;
330
    font-size: 100%;
331
    font-style: italic;
332
    font-weight: bold;
333
    margin-left: 37px;
334
    margin-top: 17px;
335
}
336

    
337
#networks-wizard h2 {
338
    margin-top: 15px;
339
}
340

    
341
#wizard li {
342
    margin-bottom:1.2em;
343
}
344

    
345
#wizard .pane li {
346
    margin: 0;
347
}
348

    
349
#wizard label {
350
    font-size:120%;
351
    display:block;
352
    clear: both;
353
}
354

    
355
#wizard label strong {
356
    position:relative;
357
    top:-1px;
358
    font-size: 80%;
359
    font-weight: normal;
360
}
361

    
362
#wizard label em {
363
    font-size:75%;
364
    color:#666;
365
    font-style:normal;
366
}
367

    
368
#wizard .text {
369
    width: 270px;
370
    padding: 5px;
371
    margin-top: 10px;
372
    border: 1px solid #ccc;
373
    color: #456;
374
    letter-spacing: 1px;
375
}
376

    
377
#wizard select {
378
    border:1px solid #ccc;
379
    width:94%;
380
    padding:4px;
381
    display: none;
382
}
383

    
384
#wizard .double label {
385
    width:50%;
386
    float:left;
387
}
388

    
389
#wizard .double .text {
390
    width:93%;
391
}
392

    
393
#wizard .clearfix {
394
    clear:left;
395
    padding-top:10px;
396
}
397

    
398
#wizard .right {
399
    float:right;
400
}
401

    
402
#wizard .error {
403
    border:1px solid red;
404
}
405

    
406
#wizard a:hover div.image {
407
    background-color: #C5DEE9;
408
}
409

    
410
.selecteddiv {
411
    background-color: #C5DEE9 !important;
412
}
413

    
414
#wizard label a:hover strong {
415
    color: black;
416
}
417

    
418
#wizard div.image span.size {
419
    font-size: 75%;
420
    color: #666;
421
}
422

    
423
#wizard div.image .radio {
424
    float: left;
425
    margin-top: 10px;
426
}
427

    
428
#wizard div.image span.image-id, #wizard div.image span.description {
429
    font-size: 75%;
430
    color: #666;
431
    font-weight: normal;
432
    display:inline;
433
}
434

    
435
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
436
    color: black;
437
}
438

    
439
#wizard .cost {
440
    color: #79A4C1;
441
    margin-top: 40px;
442
    clear:both;
443
    margin-left: 15px;
444
    font-size: 95%;
445
}
446

    
447
#wizard #status {
448
    height: 50px;
449
    background-color: #4085A5;
450
}
451

    
452
#wizard .headernumber {
453
    font-size: 410%;
454
}
455

    
456
#wizard .headerbody {
457
    font-size: 120%;
458
    font-weight: normal;
459
    display: inline;
460
    top: -15px;
461
    position: relative;
462
}
463

    
464
#wizard .first {
465
    left: -10px;
466
}
467

    
468
#wizard .checked {
469
    color: #64a6c4 !important;
470
}
471

    
472
#wizard .li-2 {
473
    margin-top: -1px !important;
474
}
475

    
476
#wizard .img-check {
477
    margin-bottom: 8px;
478
    margin-left: -8px;
479
}
480

    
481
#wizard .li-1 .img-check {
482
    margin-left: 2px;
483
}
484

    
485
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
486
    background-color: #CDE2EC;
487
    color: #CDE2EC;
488
    border: 0 none;
489
    height: 4px;
490
    margin-left: -1px;
491
    width: 447px;
492
    margin-bottom: 6px;
493
    margin-top: 4px;
494
}
495

    
496
#wizard .bottomruler, #networks-wizard .bottomruler {
497
    margin-top:6px;
498
}
499

    
500
#networks-wizard .topruler, #networks-wizard .bottomruler {
501
    width: 455px;
502
    float: left;
503
}
504

    
505
#wizard #cancel, #networks-wizard .cancel {
506
    background-color: #4085A5;
507
    border-color: #4085A5;
508
    text-align: center !important;
509
}
510

    
511
#wizard #cancel:hover, #networks-wizard .cancel:hover {
512
    background-color: #7DB4CD;
513
    border-color: #7DB4CD;
514
}
515

    
516
#wizard #start, #networks-wizard .create {
517
    text-align: center;
518
    background-color: #FF6600;
519
    border-color: #FF6600;
520
}
521

    
522
#wizard .img-next {
523
    margin-right: -4px;
524
    padding-left: 8px;
525
    margin-bottom: -1px;
526
}
527

    
528
#wizard .img-prev {
529
    margin-left: -4px;
530
    padding-right: 8px;
531
    margin-bottom: -1px;
532
}
533

    
534
#networks-wizard .create {
535
    float:right;
536
    width: 140px;
537
}
538

    
539
#wizard #start:hover, #networks-wizard .create:hover {
540
    background-color: #FF9651;
541
    border-color: #FF9651;
542
}
543

    
544
#wizard .separator-end {
545
    position: absolute;
546
    background-color: #387693;
547
    height: 5px;
548
    margin-left: -14px;
549
    margin-top: 362px;
550
    width: 550px;
551
}
552

    
553
.page ul {
554
    height: 270px;
555
    overflow: auto;
556
}
557

    
558
.panes ul.pane {
559
    height: 220px;
560
}
561

    
562
#wizard #tabscontainer {
563
    background-color: #CDE2EC;
564
    height: 20px;
565
    width: 448px;
566
}
567

    
568
.page ul.tabs {
569
    overflow: hidden;
570
    height: auto;
571
    margin-bottom: -1px;
572
    margin-top: -1px;
573
}
574

    
575
.page ul.tabs li {
576
    float: right;
577
    margin: 0 0.2em;
578
}
579

    
580
#status li {
581
    float: left;
582
    color: #387693;
583
    padding: 0 1px 0 37px;
584
    bottom: 0px;
585
}
586

    
587
#status li.active .headernumber {
588
    color: #FFFFFF;
589
}
590

    
591
#status li.active .headerbody {
592
    color: #FFFFFF;
593
}
594

    
595
div.image-container {
596
    border-bottom: 1px solid #CCCCCC;
597
    margin-left: 10px;
598
    margin-right: 10px;
599
}
600

    
601
#page2-container {
602
    background-color: #ECF4F8;
603
    height: 193px;
604
    margin-top: 3px;
605
    padding-top: 25px;
606
}
607

    
608
#page3-container {
609
    background-color: #ECF4F8;
610
    height: 245px;
611
    margin-bottom: 32px;
612
    padding-left: 50px;
613
}
614

    
615
/* slider root element */
616
.slider {
617
    border: 1px solid #666;
618
    cursor: pointer;
619
    display: inline !important;
620
    float: left;
621
    margin: 5px 0 20px 10px;
622
    position: relative;
623
    width: 250px;
624
}
625

    
626
.sliders {
627
    float:left;
628
    width: 40px;
629
    margin-left: 10px;
630
    margin-top: 3px;
631
}
632

    
633
.units {
634
    padding-left:10px;
635
}
636

    
637
.slider-container {
638
    padding-bottom: 15px;
639
    margin-left: 5px;
640
}
641

    
642
/* drag handle */
643
.handle {
644
    -moz-box-shadow: 0 0 2px #000000;
645
    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;
646
    border: 1px solid #000000;
647
    cursor: move;
648
    display: block;
649
    height: 10px;
650
    margin-top: -8px;
651
    position: absolute;
652
    width: 8px;
653
}
654

    
655
/* progress bar (enabled with progress: true) */
656
.progress {
657
    height: 3px;
658
    background-color: #387693;
659
}
660

    
661
/* the input field */
662
.range {
663
    border: 1px solid #387693;
664
    float: left;
665
    font-size: 100%;
666
    margin: -3px 0 0 15px;
667
    padding: 2px 5px 2px 0;
668
    text-align: right;
669
    width: 50px;
670
}
671

    
672
.selectedrange {
673
    border-color: #5599FF;
674
}
675

    
676
#credits-indicator {
677
    background-color: #ECF4F8;
678
    float: none;
679
    margin: 0 0 0 10px;
680
    border: 1px solid #387693;
681
    color: #387693;
682
}
683

    
684
/* machines */
685
.machine-container {
686
    min-height: 65px;
687
    margin: 2px 0 0 3px;
688
    padding: 0 4px 0;
689
    clear: both;
690
    width: 523px;
691
    position:relative;
692
}
693

    
694
div.machine {
695
    margin-left: -7px;
696
    min-height: 65px;
697
    padding-left: 7px;
698
    padding-right: 5px;
699
    padding-top: 2px;
700
    width: 516px;
701
}
702

    
703
div.machine:hover {
704
    background-color:#A1C8DB !important;
705
}
706

    
707
div.machine.light-background, div.network.light-background {
708
    background-color:#aed2e3;
709
}
710

    
711
.single .light-background {
712
    background-color:#aed2e3;
713
}
714

    
715
.machine a {
716
    font-weight: normal;
717
    text-decoration: none;
718
}
719

    
720
div.machine-details {
721
    width: 400px;
722
    float:left;
723
}
724

    
725
.machine span.name, .machine a.ip {
726
    font-size: 75%;
727
    color: black;
728
    margin-top: 6px;
729
}
730

    
731
.machine span.name {
732
    font-weight: bold;
733
}
734

    
735
.oldValue {
736
    display:none;
737
}
738

    
739
.state {
740
    margin-top: -40px;
741
}
742

    
743
.state div {
744
    text-align: right;
745
    margin-right: 3px;
746
}
747

    
748
/* icon view actions */
749
div.machine div.actions {
750
    float: right;
751
    font-size: 75%;
752
    font-weight: normal;
753
    height: 68px;
754
    position: absolute;
755
    right: -63px;
756
    width: 70px;
757
    top: 0px;
758
}
759

    
760
div.machine div.actions a {
761
    color: transparent;
762
    height: 15px;
763
    width: 180px;
764
    margin: 0 0 2px 8px;
765
    display: block;
766
}
767

    
768
div.machine div.actions a:hover {
769
    background-color:#A1C8DB;
770
    opacity: 0.8;
771
    filter: alpha(opacity = 80);
772
}
773

    
774
div.machine div.actions a.selected {
775
    color: #FF7F2A !important;
776
    width: 50px;
777
}
778

    
779
div.machine div.actions a.selected:hover {
780
    background-color:transparent;
781
}
782

    
783
div.machine div.actions a.action-shutdown {
784
    display: block;
785
}
786

    
787
div.machine div.actions a.shutdown-padding {
788
    margin-bottom: 22px;
789
}
790

    
791
div.action-container {
792
    overflow: visible;
793
}
794

    
795
div.actions a.enabled:hover{
796
    color: black !important;
797
    text-decoration: underline;
798
    display: block;
799
}
800

    
801
div.machine:hover .actions a {
802
    color: black;
803
    display: block;
804
}
805

    
806
div.machine div.display a{
807
    color: black;
808
    display: block;
809
}
810

    
811
div.running div.machine div.actions .disabled {
812
    display: none;
813
}
814

    
815
div.terminated div.machine div.actions .disabled {
816
    display: none;
817
}
818

    
819
div.terminated div.machine div.actions a.action-destroy {
820
    position: absolute;
821
    bottom: 0;
822
}
823

    
824
div.running div.machine div.actions a.action-destroy {
825
    position: absolute;
826
    bottom: 0;
827
}
828

    
829
div.connect-arrow {
830
    background: url(/static/connect-arrow.png) no-repeat;
831
    height: 28px;
832
    width:14px;
833
    position: absolute;
834
}
835

    
836
.machine div.connect-arrow {
837
    display: none;
838
    left: -3px;
839
    position: absolute;
840
    top: 9px;
841
}
842

    
843
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
844
    cursor: pointer;
845
    background: url(/static/connect-arrow-hover.png) no-repeat;
846
    height: 28px;
847
    width:26px;
848
}
849

    
850
div.connect-border {
851
    opacity: 0.8;
852
    filter: alpha(opacity = 80);
853
    background-color:#4fe0c3;
854
    height:28px;
855
    width: 12px;
856
    position: absolute;
857
}
858

    
859
.machine div.connect-border {
860
    display: none;
861
    left: -15px;
862
    position: absolute;
863
    top: 9px;
864
}
865

    
866
.standard .machine img {
867
    float: left;
868
    margin: 4px 14px 0;
869
}
870

    
871
.standard .running .machine img {
872
   cursor: pointer;
873
}
874

    
875
.list .machine img {
876
    margin: 0;
877
}
878

    
879
div.ip, div.ips {
880
    font-size: 75%;
881
    position: relative;
882
    top: 4px;
883
    float: right;
884
    right: 18px;
885
}
886

    
887
div.indicators {
888
    margin-right: 2px !important;
889
}
890
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
891
    background-color: #447821;
892
    width:10px;
893
    height:11px;
894
    clear: none;
895
    float:right;
896
}
897

    
898
.view-separator {
899
    color:#5F8DD3;
900
}
901

    
902
.running {
903
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
904
    margin-top: -76px;
905
    padding-bottom: 15px;
906
    width: 699px;
907
    padding-top: 60px;
908
}
909

    
910
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
911
    background-color: #447821;
912
}
913

    
914
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
915
    background-color: #d4aa00;
916
}
917

    
918
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
919
    background-color: #666666;
920
}
921

    
922
.starting-state .indicator1, .starting-state .indicator3 {
923
    background-color: #447821;
924
}
925

    
926
.starting-state .indicator2, .starting-state .indicator4 {
927
    background-color: #666666;
928
}
929

    
930
.shutting-state .indicator1, .shutting-state .indicator3 {
931
    background-color: #666666;
932
}
933

    
934
.shutting-state .indicator2, .shutting-state .indicator4 {
935
    background-color: #447821;
936
}
937

    
938
.destroying-state .indicator1, .destroying-state .indicator3 {
939
    background-color: #800000;
940
}
941

    
942
.destroying-state .indicator2, .destroying-state .indicator4 {
943
    background-color: #666666;
944
}
945

    
946
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
947
    background-color: #800000;
948
}
949

    
950
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
951
    background-color: #5CA1C0;
952
}
953

    
954
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
955
    background-color: #5CA1C0;
956
}
957

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

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

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

    
985
.machine div.info {
986
    float:left;
987
    margin-bottom: 5px;
988
}
989

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

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

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

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

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

    
1021
div.network div.toggler {
1022
    margin-left: 87px;
1023
}
1024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1524
#metadata-wizard .metadata-value {
1525
    width: auto;
1526
}
1527

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
1668
#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 {
1669
    background-color: #4287a7;
1670
}
1671

    
1672
#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 {
1673
    background-color: #74AEC9;
1674
}
1675

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

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

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

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

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

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

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

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

    
1732
#metadata-wizard input {
1733
    font-size: 80%;
1734
}
1735

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

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

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

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

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

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

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

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

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

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

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

    
1821
#metadata-wizard #txtdropdown:focus {
1822
    outline: 0 none;
1823
}
1824

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

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

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

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

    
1851
#error-success p {
1852
    margin-top: 5px;
1853
}
1854

    
1855
#error-success strong {
1856
    color: #F49C1A;
1857
}
1858

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

    
1869
.popup-header-error {
1870
    background-color: #800000 !important;
1871
}
1872

    
1873
.popup-border-error {
1874
    border-color: #800000 !important;
1875
}
1876

    
1877
.popup-details-error {
1878
    border: none !important;
1879
}
1880

    
1881
.popup-separator-error {
1882
    margin-bottom: 5px !important;
1883
}
1884

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

    
1899

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

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

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

    
1931
#error-success .popup-separator {
1932
    background-color: #74AEC9;
1933
    height: 1px;
1934
    width: 442px;
1935
    margin-bottom: 30px;
1936
}
1937

    
1938
#error-success .machine-now-building {
1939
    font-size: 95%;
1940
    padding-bottom: 7px;
1941
    padding-top: 10px;
1942
}
1943

    
1944
#error-success.success .machine-now-building {
1945
    padding-bottom: 14px !important;
1946
}
1947

    
1948
#error-success .password-container {
1949
    width: 430px;
1950
    padding: 5px;
1951
    border: 2px solid #75b54a;
1952
    background-color: #aade87;
1953
}
1954

    
1955
#error-success .password-header {
1956
    margin-bottom: 5px;
1957
}
1958

    
1959
#error-success .password {
1960
    color: #447821;
1961
}
1962

    
1963
#error-success .popup-details {
1964
    border: 2px solid #FF7F2A;
1965
    float: left;
1966
    margin-left: 10px;
1967
    padding: 2px;
1968
}
1969

    
1970
#error-success.success .popup-details {
1971
    border: none !important;
1972
    float: none !important;
1973
    margin-left: none !important;
1974
    margin-top: 10px;
1975
}
1976

    
1977
#error-success.success .popup-separator {
1978
    margin-bottom: 14px !important;
1979
}
1980

    
1981
#error-success .write-password {
1982
    margin-bottom: 5px;
1983
    padding-left: 30px;
1984
}
1985

    
1986
#error-success .write-password-password {
1987
    padding-left: 30px;
1988
    color: #447821;
1989
    display: inline;
1990
    font-size: 110%;
1991
    font-weight: bold;
1992
}
1993

    
1994
#error-success .write-password-details {
1995
    font-size: 75%;
1996
}
1997

    
1998
.more-details {
1999
    display: block;
2000
}
2001

    
2002
.popup-details a:link, .popup-details a:visited{
2003
    color: black;
2004
}
2005

    
2006
/* Confirmation boxes */
2007
div.confirm_single, div.confirm_multiple, div.action_error {
2008
    display: none;
2009
    color: black;
2010
}
2011

    
2012
div.action-container.destroy div.confirm_single {
2013
    bottom: 0;
2014
    position: absolute;
2015
    left: 83px;
2016
}
2017

    
2018
div.terminated div.action-container.destroy div.confirm_single {
2019
    margin-top: 30px;
2020
}
2021

    
2022
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2023
    font-size: 100%;
2024
    cursor: pointer;
2025
    color: black;
2026
    height: 20px !important;
2027
}
2028

    
2029
div.confirm_single {
2030
    float: right;
2031
    margin: -20px -122px 0 0;
2032
}
2033

    
2034
div.confirm_single button {
2035
    border: none;
2036
}
2037

    
2038
div.confirm_single button.yes {
2039
    width: 90px;
2040
    background-color:#FF7F2A;
2041
}
2042

    
2043
div.confirm_single button.yes:hover {
2044
    background-color: #FF9955;
2045
}
2046

    
2047
div.confirm_single button.no {
2048
    width: 20px;
2049
    margin-left:-5px;
2050
    background-color: #FF9955;
2051
    color:#d95d0a;
2052
}
2053

    
2054
div.confirm_single button.no:hover {
2055
    color: white;
2056
}
2057

    
2058
div.confirm_multiple {
2059
    background-color: #4085A5;
2060
    font-size: 75%;
2061
    z-index: 1;
2062
    position: absolute;
2063
    width: 698px;
2064
    height: 28px;
2065
    margin-top: 15px;
2066
}
2067

    
2068
div.confirm_multiple p {
2069
    float: left;
2070
    color: #FF7F2A;
2071
    font-weight: bold;
2072
    margin: 7px 0 0 200px;
2073
}
2074

    
2075
#networks-pane div.confirm_multiple p {
2076
    margin: 7px 0 0 100px;
2077
}
2078

    
2079
div.confirm_multiple button {
2080
    float: right;
2081
    background-color: transparent;
2082
    border: 1px solid #5CA1C0;
2083
    margin: 4px 5px 0 0;
2084
}
2085

    
2086
div.confirm_multiple button.yes {
2087
    border-color: #FF7F2A;
2088
    padding: 0 12px;
2089
}
2090

    
2091
div.confirm_multiple button.yes:hover {
2092
    background-color: #FF7F2A;
2093
}
2094

    
2095
div.confirm_multiple button.no {
2096
    padding: 0px 16px;
2097
}
2098

    
2099
div.confirm_multiple button.no:hover {
2100
    background-color: #5CA1C0;
2101
}
2102

    
2103
div.action_error {
2104
    width: 80px;
2105
    height: 60px;
2106
    padding: 5px;
2107
    margin: -2px 0 0 595px;
2108
    background-color: #4085A5;
2109
    font-size: 75%;
2110
    line-height: 1.5;
2111
    z-index:1;
2112
    color: #FF7F2A;
2113
    position:absolute;
2114
    top: 0px;
2115
}
2116

    
2117
.action_error button {
2118
    width: 80px !important;
2119
    background-color: transparent;
2120
    border: 1px solid;
2121
    padding: 0px;
2122
    border-color: #FF7F2A;
2123
}
2124

    
2125
div.action_error button.details {
2126
    margin: 5px 0 0 0px;
2127
    padding: 0 15px;
2128
}
2129

    
2130
div.action_error button.details:hover {
2131
    background-color: #FF7F2A;
2132
}
2133

    
2134
div#aboutuser{
2135
    float:right;
2136
    clear: both;
2137
    color: #FFFFFF;
2138
    font-size: 75%;
2139
    margin-top: -25px;
2140
}
2141

    
2142
div#user{
2143
    float:right;
2144
    clear: both;
2145
    color: #FFFFFF;
2146
    font-size: 75%;
2147
    margin-top: 43px;
2148
}
2149

    
2150
div#user a{
2151
    color: #FFFFFF;
2152
    text-decoration: none;
2153
}
2154

    
2155
div#user a.current_lang {
2156
    color: #72ADC8;
2157
}
2158

    
2159
.separator {
2160
    background-color: #74AEC9;
2161
    height: 10px;
2162
    width: 700px;
2163
    font-size: 1px;
2164
    line-height: 0px;
2165
}
2166

    
2167
#disks.separator {
2168
    background-color: #dea842;
2169
}
2170

    
2171
#networks.separator {
2172
    background-color: #6c535d;
2173
}
2174

    
2175
.network-machine h5 {
2176
    margin-bottom: 26px;
2177
    margin-top:0px;
2178
}
2179

    
2180
.machine-container .separator {
2181
    width: 508px;
2182
    height: 1px;
2183
    margin-top: 2px;
2184
    background-color: #5CA1C0;
2185
    margin-left: 13px;
2186
}
2187

    
2188
.machine h5 {
2189
    margin: -1px 0px 4px 0px;
2190
}
2191

    
2192
.machine h5.namecontainer {
2193
    margin-top: 1px;
2194
}
2195

    
2196
.editbuttons {
2197
    display: block;
2198
    clear: none;
2199
    width: 40px;
2200
    margin-right: 32%;
2201
    padding-top: 2px;
2202
    float: right;
2203
    cursor: pointer;
2204
    position: relative;
2205
    z-index: 1000;
2206
}
2207

    
2208
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2209
    background-color: #84b7d0;
2210
}
2211

    
2212
div.editbuttons div.cancel:hover {
2213
    background-image: url("./cancel-onhover.png");
2214
}
2215

    
2216
.editbuttons .cancel, .editbuttons .save {
2217
    background-repeat: no-repeat;
2218
    color: transparent;
2219
    height: 16px;
2220
    width: 16px;
2221
    float: left;
2222
}
2223

    
2224
.editbuttons .cancel {
2225
    background-image: url("./cancel.png");
2226
    margin-left: 3px;
2227
}
2228

    
2229
.editbuttons .save {
2230
    background-image: url("./save.png");
2231
    margin-left: 1px;
2232
}
2233

    
2234
.editbuttons img {
2235
    float:none !important;
2236
    margin: 0px !important;
2237
}
2238

    
2239
.namecontainer {
2240
    height: 18px;
2241
    margin-top: 9px;
2242
}
2243

    
2244
.nametextbox {
2245
    font-size: 95%;
2246
}
2247

    
2248
.large-spinner {
2249
    background: url("./icons/indicators/large/progress.gif");
2250
    margin-left: 298px;
2251
    margin-top: 20px;
2252
    height: 31px;
2253
    width: 31px;
2254
    position: absolute;
2255
}
2256

    
2257
.list .large-spinner {
2258
    margin-top:-50px;
2259
}
2260

    
2261
.single .large-spinner {
2262
    margin-top:-45px;
2263
}
2264

    
2265
/* tables in list view */
2266
div.list div.dataTables_filter {
2267
    font-size: 75%;
2268
    display: none;
2269
    margin-bottom: 12px;
2270
}
2271

    
2272
div.list div.dataTables_filter input{
2273
    font-size: 100%;
2274
}
2275

    
2276
.dataTables_wrapper {
2277
    width: 515px;
2278
    padding-bottom: 40px;
2279
}
2280

    
2281
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2282
    padding-right: 15px !important;
2283
}
2284

    
2285
div.list table {
2286
    width: 515px;
2287
    font-size: 75%;
2288
}
2289

    
2290
div.list table tbody td {
2291
    color: #3D3D3D;
2292
    padding:6px;
2293
    vertical-align: middle;
2294
}
2295

    
2296
div.list table thead tr th {
2297
    background-color: #CDE2EC;
2298
    background-image: url(bg.gif);
2299
    background-repeat: no-repeat;
2300
    background-position: right 11px;
2301
    font-weight: normal;
2302
    border: 1px solid transparent;
2303
    border-bottom: none;
2304
    padding: 4px;
2305
    text-align: left;
2306
    vertical-align: middle;
2307
    cursor: pointer;
2308
}
2309

    
2310
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2311
    background-color: #5CA1C0;
2312
}
2313

    
2314
div.list table thead .sorting_asc {
2315
    background-image: url(asc.gif);
2316
}
2317

    
2318
div.list table thead .sorting_desc {
2319
    background-image: url(desc.gif);
2320
}
2321

    
2322
div.list table .selection div.expand-icon {
2323
    background-image: url(asc.gif);
2324
    background-repeat: no-repeat;
2325
    position: relative;
2326
    cursor: pointer;
2327
    width: 15px;
2328
    height: 4px;
2329
    left: 19px;
2330
    top: -11px;
2331
}
2332

    
2333
ul.dropdown-selector {
2334
    background-color: #E6EEEE;
2335
    position: absolute;
2336
    margin-left: 1px;
2337
    display: block;
2338
    top: 255px;
2339
    font-size:75%;
2340
    width:40px;
2341
}
2342

    
2343
ul.dropdown-selector li {
2344
    padding: 4px;
2345
}
2346

    
2347
ul.dropdown-selector li:hover {
2348
    background-color: #5CA1C0;
2349
}
2350

    
2351
ul.dropdown-selector li a{
2352
    color: black;
2353
    text-decoration: none;
2354
}
2355

    
2356
div.list table span.imagetag {
2357
    display: none;
2358
}
2359

    
2360
div.list table thead .vmos {
2361
    width: 20px !important;
2362
    vertical-align:middle;
2363
}
2364

    
2365
div.list table .selection {
2366
    width: 20px !important;
2367
    text-align: left;
2368
    background-image: none;
2369
    padding-left: 6px;
2370
}
2371

    
2372
div.list table thead .vmflavor {
2373
    width: 100px !important;
2374
}
2375

    
2376
div.list table thead .vmgroup {
2377
    width: 40px !important;
2378
}
2379

    
2380
div.list table thead .vmstatus {
2381
    width: 50px !important;
2382
}
2383

    
2384
div.list table thead .vmname {
2385
    width: 70px !important;
2386
}
2387

    
2388
.spinner, .wave {
2389
    clear: right;
2390
    float:right !important;
2391
    margin: 10px 16px 0 15px !important;
2392
}
2393

    
2394
#networks-pane .spinner {
2395
    margin-top: 18px !important;
2396
}
2397

    
2398
.hidden {
2399
    display:none;
2400
}
2401

    
2402
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2403
    display:block !important;
2404
}
2405

    
2406
.action_error .message, .action_error .code {
2407
    display: none;
2408
}
2409

    
2410
.fixed {
2411
    bottom: 0;
2412
    position: fixed !important;
2413
}
2414

    
2415
/* Networks */
2416
#networks-pane {
2417
    background-color: transparent;
2418
    color: black;
2419
    margin-left: 1px;
2420
    margin-right: 0;
2421
}
2422

    
2423
#networkscreate {
2424
    color: black;
2425
    background-color: #FF7F2A;
2426
    cursor: pointer;
2427
    padding: 7px 24px;
2428
    text-decoration: none;
2429
}
2430

    
2431
#networkscreate:hover {
2432
    background-color: #FF9955;
2433
}
2434

    
2435
#networks-pane #beforecreate {
2436
    margin-left: -13px;
2437
    margin-top: -6px;
2438
}
2439

    
2440
#networks-container {
2441
    margin-top: 10px;
2442
    min-height: 270px;
2443
}
2444

    
2445
#networks-createcontainer {
2446
    position: absolute;
2447
    top: 155px;
2448
}
2449

    
2450
#networks-pane .public-networks {
2451
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2452
    margin: 0 0 18px;
2453
    padding: 70px 0 15px 35px;
2454
}
2455

    
2456
#networks-pane .private-networks {
2457
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2458
    padding: 15px 20px 20px 35px;
2459
}
2460

    
2461
#public-template, #private-template, #public-machine-template, #private-machine-template {
2462
    display:none;
2463
}
2464

    
2465
div.network a.action-network-add {
2466
    display: none;
2467
}
2468

    
2469
div.network a.action-network-destroy {
2470
    margin-top: 38px !important;
2471
    width: 50px;
2472
    display: none;
2473
}
2474

    
2475
div.network {
2476
    clear: both;
2477
    min-height: 65px;
2478
    margin: 5px 0 0 -35px;
2479
    padding: 3px 20px 0;
2480
    width: 480px;
2481
    position: relative;
2482
}
2483

    
2484
#private-template {
2485
    margin: 2px 0 0 -30px;
2486
}
2487

    
2488
div.network-placeholder {
2489
    margin-left: 33px;
2490
}
2491

    
2492
div.private-networks div.network-placeholder {
2493
    border-left: 3px solid #FF7F2A;
2494
}
2495

    
2496
div.network-cable {
2497
    border-left: 3px solid #FF7F2A;
2498
    float: left;
2499
    margin-left: -40px;
2500
    margin-top: -40px;
2501
    height: 185px;
2502
    overflow: hidden;
2503
}
2504

    
2505
.last div.network-cable {
2506
    height:80px !important;
2507
}
2508

    
2509
.first div.network-cable {
2510
    height:155px;
2511
    margin-top:-14px;
2512
}
2513

    
2514
div.firewall-cable {
2515
    border-left: 3px solid #FF7F2A;
2516
    float: left;
2517
    margin-left: -100px;
2518
    margin-top: -20px;
2519
    height: 110px;
2520
}
2521

    
2522
.last div.firewall-cable {
2523
    display:none;
2524
}
2525

    
2526
div.network a:hover {
2527
    text-decoration: underline;
2528
    cursor: pointer;
2529
}
2530

    
2531
#networks-container .name {
2532
    font-size: 75%;
2533
}
2534

    
2535
div.network-machines, div.firewall {
2536
    font-size: 75%;
2537
    margin-left: 70px;
2538
}
2539

    
2540
div.firewall {
2541
    margin-left: 60px;
2542
}
2543

    
2544
div.machines-header, div.firewall-header {
2545
    background-color: #A1C8DB;
2546
    color: white;
2547
    cursor: pointer;
2548
    height: 17px;
2549
    width: 100px;
2550
}
2551

    
2552
 div.private-networks div.machines-header {
2553
    margin-top: -5px;
2554
}
2555

    
2556
div.firewall-header {
2557

    
2558
}
2559

    
2560
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2561
    background-color: #84b7d0;
2562
}
2563

    
2564
div.network-machine:hover div.firewall-header {
2565
    background-color: #5CA1C0;
2566
}
2567

    
2568
div.machines-label, div.firewall-label {
2569
    width: 83px;
2570
    padding-bottom:1px;
2571
    padding-left: 3px;
2572
}
2573

    
2574
.state {
2575
    float: right;
2576
    position: absolute;
2577
    right: 10px;
2578
    top: 40px;
2579
    font-size: 75%;
2580
}
2581

    
2582
div.network div.actions {
2583
    float: right;
2584
    font-size: 75%;
2585
    font-weight: normal;
2586
    height: 70px;
2587
    width: 100px;
2588
    position: absolute;
2589
    right: -100px;
2590
    top: 0;
2591
}
2592

    
2593
div.network div.machine-actions {
2594
    text-decoration: none;
2595
    float: right;
2596
    width: 100px;
2597
    margin: -7px -100px 0 0;
2598
    font-weight: normal;
2599
    font-size: 75%;
2600
}
2601

    
2602
div.network div.actions a, div.network div.machine-actions a {
2603
    text-decoration: none;
2604
    height: 15px;
2605
    color: transparent;
2606
    display: block;
2607
}
2608

    
2609
div.network div.actions a {
2610
    margin: -2px 0 0 8px;
2611
}
2612

    
2613
div.network div.machine-actions a {
2614
    margin: 0 0 0 8px;
2615
}
2616

    
2617
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2618
    display: block;
2619
    background-color:#A1C8DB;
2620
    width: 200px;
2621
    opacity: 0.8;
2622
    filter: alpha(opacity = 80);
2623
}
2624

    
2625
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2626
    color: black;
2627
}
2628

    
2629
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2630
    color: #FF7F2A !important;
2631
    width: 50px !important;
2632
}
2633

    
2634
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2635
    background-color: transparent;
2636
}
2637

    
2638
div.network div.display a {
2639
    color: black;
2640
    display: block;
2641
}
2642

    
2643
div.network-machine div.machine-actions a.action-details {
2644
    margin-top: 10px;
2645
}
2646

    
2647
div.network:hover {
2648
    background-color: #A1C8DB !important;
2649
}
2650

    
2651
.network-logos {
2652
    float:left;
2653
    padding-right: 10px;
2654
}
2655

    
2656
.network-logos:hover {
2657
    cursor: pointer;
2658
}
2659

    
2660
.state div {
2661
    text-align: right;
2662
    margin: 5px 1px -4px;
2663
}
2664

    
2665
.public-networks .state div {
2666
    margin-top: 4px;
2667
}
2668

    
2669
.private-networks .state div {
2670
    margin-top: 9px;
2671
    margin-bottom: -12px;
2672
}
2673

    
2674
.public-networks .name-div {
2675
    margin-top:-7px;
2676
    margin-bottom: 23px;
2677
}
2678

    
2679
div.indicator {
2680
    clear: none;
2681
    float: right;
2682
    height: 11px;
2683
    margin: 3px -1px;
2684
    width: 10px;
2685
}
2686

    
2687
#private-networks {
2688
    margin-top: 20px;
2689
}
2690

    
2691
.private-networks .editbuttons {
2692
    margin-right: 22%;
2693
}
2694

    
2695
.private-networks div.confirm_single {
2696
    margin: 46px -231px 0 0;
2697
    font-size: 80%;
2698
}
2699

    
2700
.private-networks .network-machine div.confirm_single {
2701
    margin: -8px -210px 0 0;
2702
}
2703

    
2704
span.rename-network, span.configure {
2705
    background-repeat: no-repeat;
2706
    color: transparent;
2707
    font-size: 75%;
2708
    font-weight: normal;
2709
    margin-left: 10px;
2710
    padding-left: 10px;
2711
    text-align: left;
2712
}
2713

    
2714
span.rename-network {
2715
    cursor: pointer;
2716
}
2717

    
2718
div.name-div:hover span.rename-network {
2719
    color: #3D3D3D;
2720
    margin-top: 0.4em;
2721
    background-image: url(./pencil.png);
2722
    background-position: 0 3px;
2723
}
2724

    
2725
div.network:hover a.rename {
2726
    color: #3d3d3d;
2727
}
2728

    
2729
.network-separator {
2730
    background-color: #5CA1C0;
2731
    height: 1px;
2732
    margin: 2px 0 0 -5px;
2733
    width: 480px;
2734
    font-size: 4px;
2735
    line-height: 1px;
2736
}
2737

    
2738
.network-contents {
2739
    margin-left: -4px;
2740
    width: 504px;
2741
    clear: both;
2742
    padding-bottom: 7px;
2743
}
2744

    
2745
.network-machine .state div {
2746
    text-align: left;
2747
}
2748

    
2749
.network-machine {
2750
    margin-left: 35px;
2751
    padding-bottom: 5px;
2752
    padding-left: 5px;
2753
    padding-top: 10px;
2754
    margin-top: 5px;
2755
}
2756

    
2757
.network-machine .logo {
2758
    float:left;
2759
    padding-right: 10px;
2760
    position:relative;
2761
}
2762

    
2763
#networks-container .machine-name {
2764
    text-decoration: none !important;
2765
    margin-bottom: 10px;
2766
    color: #000000;
2767
    margin-top: -4px;
2768
}
2769

    
2770
.network .separator {
2771
    background-color: #5CA1C0;
2772
    height: 1px;
2773
    margin-left: 5px;
2774
    margin-top: 5px;
2775
    margin-bottom: -3px;
2776
    position: absolute;
2777
    width: 473px;
2778
}
2779

    
2780
.network-machine .state {
2781
    margin-right: 18px;
2782
}
2783

    
2784
.network-machine .state .status {
2785
    margin-bottom: 4px;
2786
}
2787

    
2788
.machine-name .name {
2789
    margin-top: -10px !important;
2790
}
2791

    
2792
.machine-name .namecontainer {
2793
    line-height: 18px;
2794
    margin-bottom: 20px;
2795
}
2796

    
2797
div.network-machine:hover {
2798
    background-color: #84B7D0;
2799
}
2800

    
2801
.machines {
2802
    width: 416px;
2803
    margin-bottom: -8px;
2804
    margin-top: 10px;
2805
}
2806

    
2807
div.empty-network-slot {
2808
    height: 60px;
2809
}
2810

    
2811
div.network-remove-machine, div.network-add-machine {
2812
    background-color: #FB822F;
2813
    color: #bc4b00;
2814
    width:90px;
2815
    height:21px;
2816
    float:left;
2817
    margin:40px 0 0 -100px;
2818
}
2819

    
2820
span.remove-icon {
2821
    font-size: 80%;
2822
    margin-left: 15px;
2823
}
2824

    
2825
span.add-icon {
2826
    margin-left: 15px;
2827
}
2828

    
2829
span.remove-icon:hover, span.add-icon:hover {
2830
    cursor:pointer;
2831
    color: #fff;
2832
}
2833

    
2834
div.network-add-machine {
2835
    margin:43px 0 0 -3px;
2836
}
2837

    
2838
.firewall-on {
2839
    color: #42E342;
2840
}
2841

    
2842
.firewall-off {
2843
    color: #F82E2E;
2844
}
2845

    
2846
.firewall-content {
2847
    color: black;
2848
    font-size: 60%;
2849
    margin-left: 60px;
2850
}
2851

    
2852
.firewall-content .checkbox-legends {
2853
    vertical-align: text-top;
2854
}
2855

    
2856
.checkbox-legends a {
2857
    color: black;
2858
    text-decoration: underline;
2859
    font-size: 100%;
2860
}
2861

    
2862
h5.machine-connect {
2863
    font-size: 75%;
2864
    margin-bottom: 3px;
2865
}
2866

    
2867
.machine-connect span {
2868
    text-decoration: underline;
2869
}
2870

    
2871
h5.machine-connect span:hover {
2872
    cursor: pointer;
2873
}
2874

    
2875
.firewall-apply {
2876
    background-color: #666666;
2877
    border: medium none;
2878
    float: right;
2879
    font-size: 105%;
2880
    height: 18px;
2881
    margin-right: 5px;
2882
    margin-top: 3px;
2883
    width: 75px;
2884
}
2885

    
2886
.name-div {
2887
    margin-left: 70px;
2888
    margin-bottom: 20px;
2889
}
2890

    
2891
.machine-name-div {
2892
    margin-bottom: 20px;
2893
    margin-left: 60px;
2894
}
2895

    
2896
div.reboot-dialog {
2897
    display: none;
2898
    color: black;
2899
    background-color: #4085A5;
2900
    font-size: 75%;
2901
    margin-top: 15px;
2902
    width: 698px;
2903
}
2904

    
2905
div#reboot-machine-template, div.reboot-machine-entry {
2906
    display: none;
2907
    padding: 0 0 10px 10px;
2908
    width: 300px;
2909
}
2910

    
2911
div.reboot-dialog p {
2912
    color: #FF7F2A;
2913
    padding: 10px 0 10px 10px;
2914
}
2915

    
2916
div.reboot-dialog button {
2917
    float:right;
2918
    border: 1px solid #FF7F2A;
2919
    background-color: transparent;
2920
    font-size:100%;
2921
}
2922

    
2923
div.reboot-dialog button:hover {
2924
    background-color: #FF7F2A;
2925
}
2926

    
2927
div.reboot-dialog button.reboot-all {
2928
    margin: -30px 35px 0 0;
2929
}
2930

    
2931
div.reboot-dialog button.reboot-single {
2932
    color: black;
2933
    margin-top: -20px;
2934
}
2935

    
2936
/* Metadata */
2937
.info-content {
2938
    clear: both;
2939
    height: 95px;
2940
    width: 512px;
2941
}
2942

    
2943
.metadata-container {
2944
    line-height: 12px;
2945
    height: 85px;
2946
    background-color: #84b7d0;
2947
}
2948

    
2949
.metadata-column {
2950
    border-right: 1px solid #5CA1C0;
2951
    color: black;
2952
    float: left;
2953
    font-size: 60%;
2954
    margin-top: 3px;
2955
    height: 70px;
2956
    padding-bottom: 5px;
2957
}
2958

    
2959
.vm-stats {
2960
    padding-left: 10px;
2961
    padding-right: 5px;
2962
    width: 119px;
2963
}
2964

    
2965
.vm-details {
2966
    width: 169px;
2967
    margin-left:17px;
2968
}
2969

    
2970
.vm-metadata {
2971
    padding-left: 10px;
2972
    width: 129px;
2973
    border: none;
2974
}
2975

    
2976
.metadata-left {
2977
    float:left;
2978
    width: 50px;
2979
    height: 60px;
2980
}
2981

    
2982
.metadata-right {
2983
    width: 73px;
2984
    float:left;
2985
    height: 35px;
2986
    padding-left: 5px;
2987
    position:relative;
2988
    overflow:hidden;
2989
}
2990

    
2991
.metadata-right .items {
2992
    position:absolute;
2993
    height:20000em;
2994
}
2995

    
2996
.metadata-keys-container {
2997
    height: 60px;
2998
    float: left;
2999
}
3000

    
3001
.single .metadata-keys-container {
3002
    float: none;
3003
    height: 50px;
3004
}
3005

    
3006
.single a.manage-metadata {
3007
    font-size: 80%;
3008
    margin-left:4px;
3009
    color: #383838;
3010
}
3011

    
3012
a.manage-metadata {
3013
    font-size: 100%;
3014
    color: black;
3015
    margin-left:17px;
3016
    text-decoration: underline;
3017
}
3018

    
3019
div.machine a.manage-metadata:hover {
3020
    background-color: transparent;
3021
}
3022

    
3023
.metadata-actions, .scrollable {
3024
    padding-left: 5px;
3025
}
3026

    
3027
.singe .metadata-actions, .single .scrollable {
3028
    font-size: 80%;
3029
    line-height: 12px;
3030
    width: 300px;
3031
}
3032

    
3033
.metadata-actions .prev,  .metadata-actions .next{
3034
    float:left;
3035
    width:29px;
3036
    height:6px;
3037
    cursor: pointer;
3038
}
3039

    
3040
.metadata-actions .prev {
3041
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3042
}
3043

    
3044
.metadata-actions .next {
3045
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3046
}
3047

    
3048
.scrollable {
3049
    position:relative;
3050
    overflow:hidden;
3051
    height: 35px;
3052
    width: 60px;
3053
    margin-bottom:2px;
3054
}
3055

    
3056
.scrollable .items {
3057
    position:absolute;
3058
    height:20000em;
3059
}
3060

    
3061
.metadata-bar {
3062
    float: right !important;
3063
    margin: 1px 7px 0 !important;
3064
}
3065

    
3066
/* single view */
3067
.single {
3068
    color: #383838;
3069
    margin-top: -76px;
3070
    padding-bottom: 10px;
3071
    width: 679px;
3072
}
3073

    
3074
.single .column1 {
3075
    float: left;
3076
    margin: 1px 0 25px 17px;
3077
    width: 140px;
3078
}
3079

    
3080
.single .column1 .state {
3081
    float: left;
3082
    margin-left: 4px;
3083
    padding-bottom: 6px;
3084
    padding-top: 3px;
3085
    position: relative;
3086
    right: 0;
3087
    text-align: center;
3088
    width: 126px;
3089
}
3090

    
3091
.single .column1 .state-label {
3092
    padding-top: 5px;
3093
}
3094

    
3095
.single .column1 .indicators {
3096
    margin-right: 38px !important;
3097
}
3098

    
3099
.single div.connect-arrow {
3100
    margin-left: -17px;
3101
}
3102

    
3103
.single div.connect-border {
3104
    margin-left: -29px;
3105
}
3106

    
3107
.single .single-actions {
3108
    padding-bottom: 4px;
3109
    padding-left: 15px;
3110
    width: 69px;
3111
    float: left;
3112
}
3113

    
3114
.single div.single-action {
3115
    font-size: 80%;
3116
    line-height: 18px;
3117
    text-decoration: none;
3118
    cursor: pointer;
3119
}
3120

    
3121
.single div.single-action:hover {
3122
    background-color:#A1C8DB;
3123
    width: 180px;
3124
    opacity: 0.8;
3125
    filter: alpha(opacity = 80);
3126
}
3127

    
3128
.single div.single-action.selected {
3129
    color: #FF7F2A !important;
3130
    width: 50px !important;
3131
}
3132

    
3133
.single div.single-action.selected:hover {
3134
    background-color:transparent;
3135
}
3136

    
3137
.single div.confirm_single {
3138
    font-size: 80%;
3139
    margin: -19px -115px 0 0;
3140
}
3141

    
3142
.single div.action-container.destroy div.confirm_single {
3143
    margin: -18px -116px 0 0;
3144
    position: relative;
3145
    left: 0px;
3146
}
3147

    
3148
.single div.confirm_single button.no {
3149
    margin-left: -5px;
3150
}
3151

    
3152
.single .spinner, .single .wave {
3153
    margin: 5px 50px 0 0px !important
3154
}
3155

    
3156
.single div.action_error {
3157
    margin: 2px 0px 0 605px !important;
3158
    position: relative;
3159
}
3160

    
3161
.single .column2 {
3162
    background-color: #A1C8DB;
3163
    float: left;
3164
    font-size: 78%;
3165
    line-height: 17px;
3166
    margin: 0 0 20px 5px;
3167
    width: 358px;
3168
}
3169

    
3170
.single .column2 .machine-labels {
3171
    float: left;
3172
    font-size: 90%;
3173
    margin-left: 10px;
3174
    margin-top: 10px;
3175
    width: 125px;
3176
}
3177

    
3178
.single .column2 .machine-details {
3179
    float: right;
3180
    text-align: right;
3181
    font-size: 90%;
3182
    width: 210px;
3183
    margin-right: 10px;
3184
    margin-top: 10px;
3185
}
3186

    
3187
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3188
    margin-bottom: 13px;
3189
}
3190

    
3191
.single .tags {
3192
    clear: both;
3193
    margin-bottom: 10px;
3194
    margin-left: 10px;
3195
}
3196

    
3197
.single .tags-label {
3198
    float: left;
3199
    padding: 0 5px;
3200
    width: 30px;
3201
}
3202

    
3203
.single .tags-down-arrow {
3204
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3205
    float: left;
3206
    height: 16px;
3207
    width: 9px;
3208
}
3209

    
3210
.single .tags-header {
3211
    background-color: #84B7D0;
3212
    cursor: pointer;
3213
    height: 16px;
3214
    width: 55px;
3215
}
3216

    
3217
.single .tags-content {
3218
    background-color: #84B7D0;
3219
    clear: both;
3220
    height: 65px;
3221
    padding-bottom: 5px;
3222
    padding-top: 5px;
3223
    width: 300px;
3224
}
3225

    
3226
.single .column3 {
3227
    background-color: #A1C8DB;
3228
    margin-left: 535px;
3229
    position: absolute;
3230
    top: 280px;
3231
    width: 150px;
3232
    overflow: visible;
3233
    padding-bottom: 10px;
3234
}
3235

    
3236
.single .column3 .controls {
3237
    font-size: 80%;
3238
    height: 20px;
3239
    padding-left: 7px;
3240
    padding-right: 7px;
3241
    padding-top: 8px;
3242
}
3243

    
3244
.single .column3 .previous {
3245
    float:left;
3246
    width: 72px;
3247
}
3248

    
3249
.single .column3 .next {
3250
    float: right;
3251
    text-align: center;
3252
    width: 60px;
3253
}
3254

    
3255
.single .column3 .next-label {
3256
    float: right;
3257
    margin-right: 3px;
3258
    margin-top: -2px;
3259
}
3260

    
3261
.single .column3 .next-arrow {
3262
    float: right;
3263
    height: 18px;
3264
    width: 10px;
3265
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3266
}
3267

    
3268
.single .column3 .prev-label {
3269
    float: left;
3270
    margin-left: 3px;
3271
    margin-top: -2px;
3272
}
3273

    
3274
.single .column3 .prev-arrow {
3275
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3276
    float: left;
3277
    height: 18px;
3278
    width: 10px;
3279
}
3280

    
3281
.single .column3 .separator {
3282
    width: 135px;
3283
    height: 1px;
3284
    background-color: #84B7D0;
3285
    margin: 0 0 0 7px;
3286
    clear: both;
3287
}
3288

    
3289
.single .column3 .servers {
3290
    font-size: 80%;
3291
    line-height: 15px;
3292
    padding-top: 10px;
3293
    text-align: right;
3294
    overflow: visible;
3295
    position: relative;
3296
}
3297

    
3298
.single .column3 .server-name {
3299
    margin-left: 10px;
3300
    padding-right: 5px;
3301
    cursor: pointer;
3302
    padding-bottom: 2px;
3303
}
3304

    
3305
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3306
    background-color: #84B7D0;
3307
    color: white;
3308
    opacity: 0.8;
3309
    padding-left: 9px;
3310
    text-align: left;
3311
    width: 160px;
3312
    filter: alpha(opacity = 80);
3313
    position: relative;
3314
}
3315

    
3316
.single .toggler {
3317
    color: #FFFFFF;
3318
    float: right;
3319
    font-size: 140%;
3320
}
3321

    
3322
.single .single-cpu, .single .single-network {
3323
    float: left;
3324
    height: 100px;
3325
    width: 48%;
3326
}
3327

    
3328
.single .cpu-usage, .single .network-usage {
3329
    padding-bottom: 15px;
3330
    padding-left: 20px;
3331
    padding-top: 15px;
3332
    font-size: 90%;
3333
}
3334

    
3335
.single .cpu-graph, .single .network-graph {
3336
    background-color: #A1C8DB;
3337
    height: 210px;
3338
    margin-left: 20px;
3339
    width: 300px;
3340
}
3341

    
3342
.single .single-image {
3343
    width: 126px;
3344
    margin-bottom: 10px;
3345
    margin-left: 4px;
3346
}
3347

    
3348
.single .column3 .previous, .single .column3 .next {
3349
    cursor: pointer;
3350
    background-color: #84B7D0;
3351
    color: white;
3352
    font-size: 100%;
3353
    height: 15px;
3354
    padding-top: 2px;
3355
}
3356

    
3357
.single .column3 .disabled {
3358
    opacity: 0.5;
3359
    filter: alpha(opacity = 50);
3360
}
3361

    
3362
.single div.lower {
3363
    clear:both;
3364
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3365
    width: 700px;
3366
    height: 270px;
3367
}
3368

    
3369
.single div.upper {
3370
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3371
    margin-bottom: 10px;
3372
    min-height: 310px;
3373
    overflow-x: visible;
3374
    overflow-y: auto;
3375
    padding-top: 60px;
3376
    width: 700px;
3377
}
3378

    
3379
/* console css */
3380
.console-header-logo {
3381
    padding-top: 10px;
3382
    margin-left: 30px;
3383
    position: fixed;
3384
}
3385

    
3386
div.console-container {
3387
    margin: 0 0em;
3388
    height: auto;
3389
}
3390

    
3391
#wrapper.console {
3392
    width: auto;
3393
}
3394

    
3395
.console-info {
3396
    font-size:80%;
3397
    color: white;
3398
    float:left;
3399
    position:relative;
3400
    margin: 25px 0 0 480px;
3401
}
3402

    
3403
applet {
3404
    width: 100%;
3405
    height:75%;
3406
}
3407

    
3408
.console-footer #footer-text{
3409
    float:left;
3410
    left: auto;
3411
    margin-left:30px;
3412
}
3413

    
3414
/* add network wizard (see also #wizard for shared classes) */
3415
#networks-wizard .header {
3416
    background-color: #4085A5;
3417
    height: 56px;
3418
}
3419

    
3420
#networks-wizard div.name-input {
3421
    margin: 75px 0 0 55px;
3422
}
3423

    
3424
#networks-wizard input {
3425
    border: 1px solid #CCCCCC;
3426
    color: #445566;
3427
    letter-spacing: 1px;
3428
    width: 170px;
3429
}
3430

    
3431
#networks-wizard span.help {
3432
    font-style: italic;
3433
    font-size: 80%;
3434
    margin-left: 10px;
3435
}
3436

    
3437
#networks-wizard .separator-end {
3438
    background-color: #387693;
3439
    height: 6px;
3440
    width: 479px;
3441
    margin-left: -13px;
3442
    margin-top: 22px;
3443
}
3444

    
3445
.red {
3446
    color: red;
3447
}
3448

    
3449
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3450
#add-machines-wizard span.machine-name {
3451
    margin-left: 4px;
3452
    vertical-align: text-top;
3453
}
3454

    
3455
#add-machines-wizard img.list-logo {
3456
    margin: 2px 1px 1px;
3457
}
3458

    
3459
.css-panes {
3460
    clear: both;
3461
}
3462

    
3463
.last .firewall-content {
3464
    margin-bottom:13px;
3465
}
3466

    
3467
#pub .last .network-separator {
3468
    display:none;
3469
}
3470

    
3471
.public-networks .empty-network-slot {
3472
    display: none;
3473
}