Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ d790d9b7

History | View | Annotate | Download (71.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
    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: 32px;
234
    margin-left: -13px;
235
    margin-top: -7px;
236
    width: 13px;
237
}
238
@-moz-document url-prefix() { #beforecreate { height: 35px; } }
239

    
240
#network-page #beforecreate {
241
    margin-top: -8px;
242
}
243

    
244
#ie-fix {
245
    z-index: 600;
246
    position: relative;
247
}
248

    
249
#createcontainer {
250
    margin-top: 20px;
251
    margin-bottom: 10px;
252
    z-index: 800;
253
}
254

    
255
#create {
256
    background-color: #FF7F2A;
257
    color: #000;
258
    cursor: pointer;
259
    padding: 7px 24px;
260
    text-decoration: none;
261
    font-size:100%;
262
}
263

    
264
#create:hover {
265
    background-color: #FF9955;
266
}
267

    
268
#console-header {
269
    height: 67px;
270
    margin-bottom:15px;
271
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
272
}
273

    
274
.header-logo {
275
    padding-top: 28px;
276
}
277

    
278
div#footer-text a {
279
    color: #FFFFFF;
280
    text-decoration: none;
281
}
282

    
283
div#footer-text{
284
    clear: both;
285
    color: #FFFFFF;
286
    font-size: 75%;
287
    left: 22%;
288
    padding-top: 10px;
289
    position: absolute;
290
    width: 700px;
291
}
292

    
293
#footer-bg {
294
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
295
    float:right;
296
    width: 700px;
297
    height: 119px;
298
    background-position:right;
299
}
300

    
301
.modal {
302
    background-color:#fff;
303
    display:none;
304
    width:30em;
305
    padding:1em;
306
    text-align:left;
307
}
308

    
309
/* server wizard scrollable root element and network wizard */
310
#wizard, #networks-wizard {
311
    font-size:75%;
312
    height:405px;
313
    width:453px;
314
    overflow:hidden;
315
    position:absolute !important;
316
}
317

    
318
/* scrollable items */
319
#wizard .items {
320
    width:20000em;
321
    clear:both;
322
    position:absolute;
323
    display:block;
324
    padding: 0;
325
    margin: 0;
326
    border:none;
327
    background:none;
328
}
329

    
330
/* single item */
331
#wizard .page, #networks-wizard div.container {
332
    padding: 0px 40px 20px 15px;
333
    width:447px;
334
    float:left;
335
    display:block;
336
    border:none;
337
    background-color: transparent;
338
}
339

    
340
#networks-wizard div.container {
341
    background-color: #ECF4F8;
342
    width:400px;
343
    height: 180px;
344
    margin-bottom:50px;
345
}
346

    
347
/* title */
348
#wizard h2, #networks-wizard h2 {
349
    color: #FF7B24;
350
    font-size: 100%;
351
    font-style: italic;
352
    font-weight: bold;
353
    margin-left: 37px;
354
    margin-top: 17px;
355
}
356

    
357
#networks-wizard h2 {
358
    margin-top: 15px;
359
}
360

    
361
#wizard li {
362
    margin-bottom:1.2em;
363
}
364

    
365
#wizard .pane li {
366
    margin: 0;
367
}
368

    
369
#wizard label {
370
    font-size:120%;
371
    display:block;
372
    clear: both;
373
}
374

    
375
#wizard label strong {
376
    position:relative;
377
    top:-1px;
378
    font-size: 80%;
379
    font-weight: normal;
380
}
381

    
382
#wizard label em {
383
    font-size:75%;
384
    color:#666;
385
    font-style:normal;
386
}
387

    
388
#wizard .text {
389
    width: 270px;
390
    padding: 5px;
391
    margin-top: 10px;
392
    border: 1px solid #ccc;
393
    color: #456;
394
    letter-spacing: 1px;
395
}
396

    
397
#wizard select {
398
    border:1px solid #ccc;
399
    width:94%;
400
    padding:4px;
401
    display: none;
402
}
403

    
404
#wizard .double label {
405
    width:50%;
406
    float:left;
407
}
408

    
409
#wizard .double .text {
410
    width:93%;
411
}
412

    
413
#wizard .clearfix {
414
    clear:left;
415
    padding-top:10px;
416
}
417

    
418
#wizard .right {
419
    float:right;
420
}
421

    
422
#wizard .error {
423
    border:1px solid red;
424
}
425

    
426
#wizard a:hover div.image {
427
    background-color: #C5DEE9;
428
}
429

    
430
.selecteddiv {
431
    background-color: #C5DEE9 !important;
432
}
433

    
434
#wizard label a:hover strong {
435
    color: black;
436
}
437

    
438
#wizard div.image span.size {
439
    font-size: 75%;
440
    color: #666;
441
}
442

    
443
#wizard div.image .radio {
444
    float: left;
445
    margin-top: 10px;
446
}
447

    
448
#wizard div.image span.image-id, #wizard div.image span.description {
449
    font-size: 75%;
450
    color: #666;
451
    font-weight: normal;
452
    display:inline;
453
}
454

    
455
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
456
    color: black;
457
}
458

    
459
#wizard .cost {
460
    color: #79A4C1;
461
    margin-top: 40px;
462
    clear:both;
463
    margin-left: 15px;
464
    font-size: 95%;
465
}
466

    
467
#wizard #status {
468
    height: 50px;
469
    background-color: #4085A5;
470
}
471

    
472
#wizard .headernumber {
473
    font-size: 410%;
474
}
475

    
476
#wizard .headerbody {
477
    font-size: 120%;
478
    font-weight: normal;
479
    display: inline;
480
    top: -15px;
481
    position: relative;
482
}
483

    
484
#wizard .first {
485
    left: -10px;
486
}
487

    
488
#wizard .checked {
489
    color: #64a6c4 !important;
490
}
491

    
492
#wizard .li-2 {
493
    margin-top: -1px !important;
494
}
495

    
496
#wizard .img-check {
497
    margin-bottom: 8px;
498
    margin-left: -8px;
499
}
500

    
501
#wizard .li-1 .img-check {
502
    margin-left: 2px;
503
}
504

    
505
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
506
    background-color: #CDE2EC;
507
    color: #CDE2EC;
508
    border: 0 none;
509
    height: 4px;
510
    margin-left: -1px;
511
    width: 447px;
512
    margin-bottom: 6px;
513
    margin-top: 4px;
514
}
515

    
516
#wizard .bottomruler, #networks-wizard .bottomruler {
517
    margin-top:6px;
518
}
519

    
520
#networks-wizard .topruler, #networks-wizard .bottomruler {
521
    width: 455px;
522
    float: left;
523
}
524

    
525
#wizard #cancel, #networks-wizard .cancel {
526
    background-color: #4085A5;
527
    border-color: #4085A5;
528
    text-align: center !important;
529
}
530

    
531
#wizard #cancel:hover, #networks-wizard .cancel:hover {
532
    background-color: #7DB4CD;
533
    border-color: #7DB4CD;
534
}
535

    
536
#wizard #start, #networks-wizard .create {
537
    text-align: center;
538
    background-color: #FF6600;
539
    border-color: #FF6600;
540
}
541

    
542
#wizard .img-next {
543
    margin: 0 -4px -1px 8px;
544
}
545

    
546
#wizard .img-prev {
547
    margin: 0 8px -1px -4px;
548
}
549

    
550
#networks-wizard .create {
551
    float:right;
552
    width: 140px;
553
}
554

    
555
#wizard #start:hover, #networks-wizard .create:hover {
556
    background-color: #FF9651;
557
    border-color: #FF9651;
558
}
559

    
560
#wizard .separator-end {
561
    position: absolute;
562
    background-color: #387693;
563
    height: 5px;
564
    margin-left: -14px;
565
    margin-top: 362px;
566
    width: 550px;
567
}
568

    
569
.page ul {
570
    height: 270px;
571
    overflow: auto;
572
}
573

    
574
.panes ul.pane {
575
    height: 220px;
576
}
577

    
578
#wizard #tabscontainer {
579
    background-color: #CDE2EC;
580
    height: 20px;
581
    width: 448px;
582
}
583

    
584
.page ul.tabs {
585
    overflow: hidden;
586
    height: auto;
587
    margin-bottom: -1px;
588
    margin-top: -1px;
589
}
590

    
591
.page ul.tabs li {
592
    float: right;
593
    margin: 0 0.2em;
594
}
595

    
596
#status li {
597
    float: left;
598
    color: #387693;
599
    padding: 0 1px 0 37px;
600
    bottom: 0px;
601
}
602

    
603
#status li.active .headernumber {
604
    color: #FFFFFF;
605
}
606

    
607
#status li.active .headerbody {
608
    color: #FFFFFF;
609
}
610

    
611
div.image-container {
612
    border-bottom: 1px solid #CCCCCC;
613
    margin-left: 10px;
614
    margin-right: 10px;
615
}
616

    
617
#page2-container {
618
    background-color: #ECF4F8;
619
    height: 193px;
620
    margin-top: 3px;
621
    padding-top: 25px;
622
}
623

    
624
#page3-container {
625
    background-color: #ECF4F8;
626
    height: 245px;
627
    margin-bottom: 32px;
628
    padding-left: 50px;
629
}
630

    
631
/* slider root element */
632
.slider {
633
    border: 1px solid #666;
634
    cursor: pointer;
635
    display: inline !important;
636
    float: left;
637
    margin: 5px 0 20px 10px;
638
    position: relative;
639
    width: 250px;
640
}
641

    
642
.sliders {
643
    float:left;
644
    width: 40px;
645
    margin-left: 10px;
646
    margin-top: 3px;
647
}
648

    
649
.units {
650
    padding-left:10px;
651
}
652

    
653
.slider-container {
654
    padding-bottom: 15px;
655
    margin-left: 5px;
656
}
657

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

    
671
/* progress bar (enabled with progress: true) */
672
.progress {
673
    height: 3px;
674
    background-color: #387693;
675
}
676

    
677
/* the input field */
678
.range {
679
    border: 1px solid #387693;
680
    float: left;
681
    font-size: 100%;
682
    margin: -3px 0 0 15px;
683
    padding: 2px 5px 2px 0;
684
    text-align: right;
685
    width: 50px;
686
}
687

    
688
.selectedrange {
689
    border-color: #5599FF;
690
}
691

    
692
#credits-indicator {
693
    background-color: #ECF4F8;
694
    float: none;
695
    margin: 0 0 0 10px;
696
    border: 1px solid #387693;
697
    color: #387693;
698
}
699

    
700
/* machines */
701
.machine-container {
702
    min-height: 65px;
703
    margin: 2px 0 0 3px;
704
    padding: 0 4px 0;
705
    clear: both;
706
    width: 523px;
707
    position:relative;
708
}
709

    
710
div.machine {
711
    margin-left: -7px;
712
    min-height: 65px;
713
    padding-left: 7px;
714
    padding-right: 5px;
715
    padding-top: 2px;
716
    width: 516px;
717
}
718

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

    
723
div.machine:hover {
724
    background-color:#A1C8DB !important;
725
}
726

    
727

    
728
.single .light-background {
729
    background-color:#aed2e3;
730
}
731

    
732
.machine a {
733
    font-weight: normal;
734
    text-decoration: none;
735
}
736

    
737
div.machine-details {
738
    width: 400px;
739
    float:left;
740
}
741

    
742
.machine span.name, .machine a.ip {
743
    font-size: 75%;
744
    color: black;
745
    margin-top: 6px;
746
}
747

    
748
.machine span.name {
749
    font-weight: bold;
750
}
751

    
752
.oldValue {
753
    display:none;
754
}
755

    
756
.state {
757
    margin-top: -40px;
758
}
759

    
760
.state div {
761
    text-align: right;
762
    margin-right: 3px;
763
}
764

    
765
/* icon view actions */
766
div.machine div.actions {
767
    float: right;
768
    font-size: 75%;
769
    font-weight: normal;
770
    height: 68px;
771
    position: absolute;
772
    right: -63px;
773
    width: 70px;
774
    top: 0px;
775
}
776

    
777
div.machine div.actions a {
778
    color: black;
779
    visibility: hidden;
780
    height: 15px;
781
    width: 180px;
782
    margin: 0 0 2px 8px;
783
    display: block;
784
}
785

    
786
div.machine div.actions a:hover {
787
    background-color:#A1C8DB;
788
    opacity: 0.8;
789
    filter: alpha(opacity = 80);
790
}
791

    
792
div.machine div.actions a.selected {
793
    color: #FF7F2A !important;
794
    width: 50px;
795
}
796

    
797
div.machine div.actions a.selected:hover {
798
    background-color:transparent;
799
}
800

    
801
div.machine div.actions a.shutdown-padding {
802
    margin-bottom: 22px;
803
}
804

    
805
div.action-container {
806
    overflow: visible;
807
}
808

    
809
div.actions a.enabled:hover{
810
    color: black !important;
811
    text-decoration: underline;
812
    display: block;
813
}
814

    
815
div.machine:hover .actions a {
816
    visibility: visible;
817
}
818

    
819
div.machine div.display a{
820
    visibility: visible;
821
}
822

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

    
827
div.machine div.actions .disabled {
828
    display: none;
829
}
830

    
831
div.machine div.actions a.action-destroy {
832
    position: absolute;
833
    bottom: 0;
834
}
835

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

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

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

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

    
866
div.connect-border:hover {
867
    cursor: pointer;
868
}
869

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

    
877
.standard .machine .logo {
878
    float: left;
879
    width: 50px;
880
    height: 54px;
881
    margin: 4px 14px 0;
882
}
883
.machine .logo {
884
    background-image: url("./icons/machines/medium/unknown-sprite.png");
885
    background-repeat: no-repeat;
886
    cursor: pointer;
887
}
888

    
889
.standard .machine .single-image-state1 {
890
    background-position: 0px 0;
891
}
892

    
893
.standard .machine .single-image-state3 {
894
    background-position: -100px 0;
895
}
896

    
897
.standard .machine .single-image-state4 {
898
    background-position: -150px 0;
899
}
900

    
901
.standard .machine .single-image-state2 {
902
    background-position: -50px 0;
903
}
904

    
905
.standard .running .machine .logo {
906
   cursor: pointer;
907
}
908

    
909
.list .machine img {
910
    margin: 0;
911
}
912

    
913
div.ip, div.ips {
914
    font-size: 75%;
915
    position: relative;
916
    float: right;
917
    top:1px;
918
    right: 18px;
919
    text-align: right;
920
}
921

    
922
div.indicators {
923
    margin-right: 2px !important;
924
}
925
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
926
    background-color: #63cf1c;
927
    width:10px;
928
    height:11px;
929
    clear: none;
930
    float:right;
931
}
932

    
933
.view-separator {
934
    color:#5F8DD3;
935
}
936

    
937
.running {
938
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
939
    margin-top: -76px;
940
    padding-bottom: 15px;
941
    width: 699px;
942
    padding-top: 60px;
943
}
944

    
945
.running.disabled {
946
    background: transparent;
947
}
948

    
949
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
950
    background-color: #63cf1c;
951
}
952

    
953
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
954
    background-color: #d4aa00;
955
}
956

    
957
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
958
    background-color: #ff0000;
959
}
960

    
961
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
962
    background-color: #5e1616;
963
}
964

    
965
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
966
    background-color: #FF7F2A;
967
}
968

    
969
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
970
    background-color: #4085a5 !important;
971
}
972

    
973
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
974
    background-color: #940606;
975
}
976

    
977
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
978
    background-color: #9ed976;
979
}
980

    
981
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
982
    background-color: #63cf1c;
983
}
984

    
985
.terminated {
986
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
987
    margin-bottom: 17px;
988
    margin-top: 15px;
989
    padding-bottom: 15px;
990
    padding-top: 15px;
991
    width: 699px;
992
}
993

    
994
span.rename {
995
    background-repeat: no-repeat;
996
    color: transparent;
997
    font-size: 75%;
998
    font-weight: normal;
999
    margin-left: 10px;
1000
    padding-left: 10px;
1001
    text-align: left;
1002
    cursor: pointer;
1003
}
1004

    
1005
div.name:hover span.rename {
1006
    color: #3D3D3D;
1007
    margin-top: 0.4em;
1008
    background-image: url(./pencil.png);
1009
    background-position: 0 3px;
1010
}
1011

    
1012
.machine div.info {
1013
    float:left;
1014
    margin-bottom: 8px;
1015
    margin-top:3px;
1016
}
1017

    
1018
.machine div.info div.info-header {
1019
    background-color: #A1C8DB;
1020
    color: white;
1021
    height: 17px;
1022
    width: 50px;
1023
    cursor: pointer;
1024
}
1025

    
1026
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1027
    background-color: #84b7d0;
1028
}
1029

    
1030
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1031
    background-color: #5CA1C0;
1032
}
1033

    
1034
.machine div.info div.info-label {
1035
    font-size: 75%;
1036
    height:16px;
1037
    width: 30px;
1038
    padding: 1px 0 0 5px;
1039
}
1040

    
1041
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1042
    width:15px;
1043
    height:17px;
1044
    margin-top: -11px;
1045
    margin-left: 37px;
1046
}
1047

    
1048
div.network div.toggler {
1049
    margin-left: 90px;
1050
}
1051

    
1052
.machine div.info div.down {
1053
    background: url(/static/down-arrow.png) no-repeat scroll 1px 1px;
1054
}
1055

    
1056
.single div.tags div.down {
1057
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1058
}
1059

    
1060
.network div.network-machines div.down {
1061
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1062
}
1063

    
1064
.network div.network-machine div.firewall div.down {
1065
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1066
}
1067

    
1068
.machine div.info div.up {
1069
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1070
}
1071

    
1072
.single div.tags div.up {
1073
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1074
}
1075

    
1076
.network div.network-machines div.up {
1077
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1078
}
1079

    
1080
.network div.network-machine div.firewall div.up {
1081
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1082
}
1083

    
1084
button {
1085
    background-color: #87AADE;
1086
    border: 1px solid #87AADE;
1087
    color: #FFFFFF;
1088
    cursor: pointer;
1089
    height: 23px;
1090
    width: 120px;
1091
}
1092

    
1093
button.next {
1094
    background-color: #4085A5;
1095
    border-color: #4085A5;
1096
    text-align: right;
1097
}
1098

    
1099
button.next:hover {
1100
    background-color: #7DB4CD;
1101
    border-color: #7DB4CD;
1102
}
1103

    
1104
button.prev {
1105
    background-color: #4085A5;
1106
    border-color: #4085A5;
1107
    margin-left: -1px;
1108
    text-align: left;
1109
}
1110

    
1111
button.prev:hover {
1112
    background-color: #7DB4CD;
1113
    border-color: #7DB4CD;
1114
}
1115

    
1116
.image-logo {
1117
    float: left;
1118
    margin-right: 1em;
1119
    margin-left: 1.5em;
1120
    margin-top: 4px;
1121
}
1122

    
1123
div.image {
1124
    clear: both;
1125
    display: block;
1126
    margin-bottom: 3px;
1127
    margin-top: 3px;
1128
    padding: 5px;
1129
}
1130

    
1131
div#view-select {
1132
    float: right;
1133
    clear: both;
1134
    color: white;
1135
    position: relative;
1136
    right: 5px;
1137
    top: -35px;
1138
    display: none;
1139
    z-index: 1000;
1140
}
1141

    
1142
a#standard, a#list, a#single {
1143
    text-decoration: none;
1144
    height: 15px;
1145
    width: 17px;
1146
    padding: 1px 8px 2px 9px;
1147
}
1148

    
1149
div#view-select a {
1150
    color:#5f8dd3;
1151
}
1152

    
1153
a#list:hover {
1154
    background: #5f8dd3;
1155
}
1156

    
1157
a#standard:active, a#list:active {
1158
    color:white;
1159
}
1160

    
1161
a#standard {
1162
    background: url(./icon-view.png) no-repeat -36px 0;
1163
}
1164

    
1165
a#list {
1166
    background: url(./list-view.png) no-repeat -36px 0;
1167
}
1168

    
1169
a#single {
1170
    background: url(./single-view.png) no-repeat -36px 0;
1171
}
1172

    
1173
a#standard:hover {
1174
    background: url(./icon-view.png) no-repeat -18px 0;
1175
}
1176

    
1177
a#list:hover {
1178
    background: url(./list-view.png) no-repeat -18px 0;
1179
}
1180

    
1181
a#single:hover {
1182
    background: url(./single-view.png) no-repeat -18px 0;
1183
}
1184

    
1185
a#standard.activelink {
1186
    background: url(./icon-view.png) no-repeat 0px 0;
1187
}
1188

    
1189
a#list.activelink {
1190
    background: url(./list-view.png) no-repeat 0px 0;
1191
}
1192

    
1193
a#single.activelink {
1194
    background: url(./single-view.png) no-repeat 0px 0;
1195
}
1196

    
1197
#machinetype {
1198
    background-color: #CDE2EC;
1199
    height: 25px;
1200
    margin-bottom: 0px !important;
1201
}
1202

    
1203
div.machine-type {
1204
    float: left;
1205
    margin: 4px 18px 20px;
1206
}
1207

    
1208
.machine-type .active {
1209
    color: #FFFFFF
1210
}
1211

    
1212
#machinesview {
1213
    min-height: 270px;
1214
    margin-top: 40px;
1215
}
1216

    
1217
.list#machinesview {
1218
    margin-left: -20px;
1219
    display:none;
1220
}
1221

    
1222
#machinesview-list.list {
1223
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
1224
    margin-top: -76px;
1225
    padding-left: 15px;
1226
    padding-top: 76px;
1227
    min-height: 270px;
1228
}
1229

    
1230
#machinesview_content {
1231
    display:none;
1232
}
1233

    
1234
.list-machines {
1235
    min-width: 515px;
1236
}
1237

    
1238
#emptymachineslist {
1239
    background-color: #6BA9C6;
1240
    color: #A0A0A0;
1241
    display: none;
1242
    margin-top: -45px;
1243
    padding: 65px 150px 35px;
1244
    text-align: justify;
1245
}
1246

    
1247
#welcomeheader {
1248
    color:white;
1249
    text-align: center;
1250
}
1251

    
1252
.welcomebody {
1253
    color: white;
1254
    font-size:80%;
1255
}
1256

    
1257
.welcomebody a {
1258
    color: white;
1259
}
1260

    
1261
.welcomefooter {
1262
    color: white;
1263
    font-size:60%;
1264
}
1265

    
1266
.welcomefooter a {
1267
    color: white;
1268
}
1269

    
1270
.emptycreatecontainer {
1271
    margin-left: 430px !important;
1272
    position: absolute;
1273
    margin-top: 5px !important;
1274
    width: 180px;
1275
    background-color: #CCCCCC;
1276
    padding: 5px;
1277
    padding-left: 10px;
1278
}
1279

    
1280
.emptycreate {
1281
    margin: 20px 10px 5px 0 !important;
1282
}
1283

    
1284
#createbody {
1285
    display:none;
1286
    font-size: 80%;
1287
}
1288

    
1289
div.list label img {
1290
    margin: 5px 5px -3px 0;
1291
}
1292

    
1293
div.list label {
1294
    color: #3D3D3D;
1295
    font-size: 75%;
1296
}
1297

    
1298
div.list .state {
1299
    margin-top: 7px;
1300
    margin-right: 10px;
1301
}
1302

    
1303
div.list table tbody {
1304
    margin-top: 8px;
1305
}
1306

    
1307
div.list .stopped {
1308
    margin-top: 8px;
1309
}
1310

    
1311
/* root element for tabs  */
1312
#wizard ul.tabs {
1313
    margin-right: -1px;
1314
    float: right;
1315
}
1316

    
1317
#wizard div.panes {
1318
    height: 247px;
1319
    clear:both;
1320
    margin-top: 3px;
1321
}
1322

    
1323
.typebody {
1324
    font-size: 80%;
1325
    font-weight: normal;
1326
    position: relative;
1327
    top: -3px;
1328
}
1329

    
1330
.typehover {
1331
    color: #FFFFFF;
1332
}
1333

    
1334
#label-name {
1335
    margin-top: 10px;
1336
}
1337

    
1338
/* single tab */
1339
#wizard ul.tabs li {
1340
    margin-bottom: 0;
1341
    list-style-type:none;
1342
    float: left;
1343
}
1344

    
1345
/* link inside the tab. uses a background image */
1346
#wizard ul.tabs a {
1347
    display:block;
1348
    padding: 0.2em 0.5em 0.1em 0.4em;
1349
    text-decoration:none;
1350
    color: #FFFFFF;
1351
    position:relative;
1352
    top:1px;
1353
    outline:0;
1354
    background-color: transparent;
1355
    text-align: center;
1356
    width: 100px;
1357
    white-space: nowrap;
1358
    height: 17px;
1359
}
1360

    
1361
#wizard ul.tabs a:hover {
1362
    color: #FFFFFF;
1363
    background-color:#4085A5;
1364
}
1365

    
1366
/* selected tab */
1367
#wizard ul.tabs a.current {
1368
    color: white;
1369
    background-color: #7DB4CD;
1370
    cursor: default;
1371
}
1372

    
1373
#wizard #standard-images {
1374
    background-color: #ECF4F8;
1375
}
1376

    
1377
div.list div.actions {
1378
    display: none;
1379
    clear: left;
1380
    float: right;
1381
    margin-right: 15px;
1382
    margin-top: 37px;
1383
    text-align: right;
1384
    width: 120px;
1385
}
1386

    
1387
div.list div.actions a {
1388
    clear: left;
1389
    color: #A1A1A1;
1390
    display: block;
1391
    font-size:75%;
1392
    margin-bottom: 2px;
1393
}
1394

    
1395
div.list div.actions a:hover {
1396
    background-color: transparent;
1397
}
1398

    
1399
div.list div.actions a.enabled {
1400
    color: #3D3D3D;
1401
}
1402

    
1403
div.list div.actions a.enabled:hover{
1404
    cursor: pointer;
1405
    color: black;
1406
    text-decoration: underline;
1407
}
1408

    
1409
div.list div.actions a.selected {
1410
    color: #FF7F2A !important;
1411
}
1412

    
1413
input.machine {
1414
    width: 13px;
1415
    height: 13px;
1416
    top: -1px;
1417
    overflow: hidden;
1418
}
1419

    
1420
.description-container {
1421
    display: inline-block;
1422
    position: relative;
1423
    width: 300px;
1424
}
1425

    
1426
#wizard .button-container {
1427
    height: 20px;
1428
}
1429

    
1430
/* metadata editing and add machines to network overlays */
1431
#metadata-wizard, #add-machines-wizard {
1432
    position:absolute !important;
1433
    overflow:hidden;
1434
    width:450px;
1435
    display:none;
1436
    background-color:#fff;
1437
    text-align:left;
1438
    font-size: 80%;
1439
    border-bottom: 5px solid #4085A5;
1440
}
1441

    
1442
#metadata-wizard .close, #add-machines-wizard .close  {
1443
    background-image: url("./close-popup.png");
1444
    background-repeat: no-repeat;
1445
    cursor: pointer;
1446
    height: 13px;
1447
    position: absolute;
1448
    right: 7px;
1449
    top: 9px;
1450
    width: 13px;
1451
}
1452

    
1453
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1454
    background-color: #4085A5;
1455
    color: white;
1456
    font-size: 95%;
1457
    font-weight: normal;
1458
    height: 20px;
1459
    margin-left: -16px;
1460
    margin-top: -16px;
1461
    padding-bottom: 2px;
1462
    padding-left: 30px;
1463
    padding-top: 10px;
1464
    width: 482px;
1465
}
1466

    
1467
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1468
    font-size: 120%;
1469
    padding-bottom: 7px;
1470
    padding-top: 10px;
1471
    float:left;
1472
}
1473

    
1474
#metadata-wizard .popup-title {
1475
    padding-bottom: 0px;
1476
    font-size: 120%;
1477
}
1478

    
1479
#metadata-wizard .name-container {
1480
    display: inline-block;
1481
    clear: both;
1482
}
1483

    
1484
#add-machines-wizard .network-name {
1485
    padding-left: 5px;
1486
}
1487

    
1488
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1489
    background-image: url("./meta-wiz-bg.png");
1490
    margin-left: -16px;
1491
    margin-right: -16px;
1492
    margin-top: 1px;
1493
    height: 250px;
1494
    overflow-y: auto;
1495
    overflow-x: hidden;
1496
}
1497

    
1498
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1499
    background: url("./meta-wiz-inner-bg.png") repeat-x scroll 0 0 transparent;
1500
    font-size: 80%;
1501
    height: 180px;
1502
    margin-left: 25px;
1503
    margin-top: 10px;
1504
    padding-left: 15px;
1505
    width: 420px;
1506
}
1507

    
1508
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1509
    background-color: #74AEC9;
1510
    height: 1px;
1511
    width: 402px;
1512
    margin-bottom: 30px;
1513
    clear: left;
1514
    font-size: 1px;
1515
}
1516

    
1517
#metadata-wizard .metadata-pair-template {
1518
    height: 15px;
1519
    padding-top: 2px;
1520
    width: 350px;
1521
}
1522

    
1523
#metadata-wizard div.metadata-pair-template:hover {
1524
    background-color: #74AEC9;
1525
}
1526

    
1527
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1528
    background-color: transparent;
1529
    float: left;
1530
    width: 400px;
1531
    font-size: 120%;
1532
}
1533

    
1534
#metadata-wizard .machine-icon {
1535
    float: left;
1536
    padding-left: 10px;
1537
    padding-right: 3px;
1538
    padding-top: 7px;
1539
}
1540

    
1541
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1542
    display: block;
1543
    margin: 50px 0 0 185px;
1544
}
1545

    
1546
#metadata-wizard .metadata-key {
1547
    float: left;
1548
    width: 110px;
1549
    padding-left: 5px;
1550
}
1551

    
1552
#metadata-wizard .metadata-value {
1553
    width: auto;
1554
}
1555

    
1556
#metadata-wizard .metadata-add-template {
1557
    background-color: #74AEC9;
1558
    width: 350px;
1559
    position: relative;
1560
    overflow: visible;
1561
}
1562

    
1563
#metadata-wizard #add-meta-value {
1564
    margin-left: 25px;
1565
    width: 150px;
1566
}
1567

    
1568
#metadata-wizard button, #add-machines-wizard button {
1569
    font-size: 80%;
1570
    width: 87px;
1571
    float: right;
1572
    background-color: #5599FF;
1573
    border: 0px solid #5599FF;
1574
    padding: 0;
1575
    text-align: center;
1576
    margin-right: 8px;
1577
}
1578

    
1579
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1580
    border-top: 2px solid #4085A5;
1581
    height: 30px;
1582
    margin-left: 25px;
1583
    margin-right: 40px;
1584
    width: 400px;
1585
    font-size: 120%;
1586
}
1587

    
1588
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1589
    float: left;
1590
    height: 23px;
1591
    margin: 10px 0 0 0;
1592
    width: 87px;
1593
    background-color: #4085A5;
1594
    border-color: #4085A5;
1595
}
1596

    
1597
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1598
    background-color: #7DB4CD;
1599
    border-color: #7DB4CD;
1600
}
1601

    
1602
#metadata-wizard button.create, #add-machines-wizard button.add {
1603
    height: 23px;
1604
    margin: 10px 0 0 0;
1605
    background-color: #FF6600;
1606
    border-color: #FF6600;
1607
}
1608

    
1609
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1610
    background-color: #FF9651;
1611
    border-color: #FF9651;
1612
}
1613

    
1614
#metadata-wizard .editbuttons {
1615
    margin-top: 4px;
1616
    margin-right: 0;
1617
}
1618

    
1619
#metadata-wizard .vertical-separator {
1620
    height: 17px;
1621
    width: 1px;
1622
    background-color: #74AEC9;
1623
    float:left;
1624
    margin-right: 10px;
1625
}
1626

    
1627
#metadata-wizard h3, #add-machines-wizard h3 {
1628
    font-weight:normal;
1629
}
1630

    
1631
#metadata-wizard .metadata-edit {
1632
    clear: none;
1633
    cursor: pointer;
1634
    float: right;
1635
    margin-right: 0;
1636
    width: 40px;
1637
    margin-top: -14px;
1638
    display:none;
1639
}
1640

    
1641
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1642
    background-repeat: no-repeat;
1643
    color: transparent;
1644
    font-size: 75%;
1645
    float: left;
1646
    width: 16px;
1647
    height: 16px;
1648
}
1649

    
1650
#metadata-wizard .addbuttons {
1651
    display: block;
1652
    clear: none;
1653
    width: 40px;
1654
    margin-right: -1px !important;
1655
    margin-top: 2px;
1656
    float:right;
1657
    cursor: pointer;
1658
}
1659

    
1660
.metadata-pair-template .editbuttons {
1661
    margin-top: -19px !important;
1662
    margin-right: -2px !important;
1663
}
1664

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

    
1670
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1671
    background-image: url("./meta-remove.png");
1672
    margin-left: 4px;
1673
    background-repeat: no-repeat;
1674
    color: transparent;
1675
    font-size: 75%;
1676
    height: 16px;
1677
    width: 16px;
1678
    float: left;
1679
}
1680

    
1681
#metadata-wizard .editbuttons .save {
1682
    background-image: url("./meta-save.png");
1683
    padding-top:0;
1684
}
1685

    
1686
#metadata-wizard .addbuttons .cancel {
1687
    background-image: url("./meta-remove.png");
1688
    margin-left: 3px;
1689
}
1690

    
1691
#metadata-wizard .addbuttons .save {
1692
    background-image: url("./meta-save.png");
1693
    margin-left: 1px;
1694
}
1695

    
1696
#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 {
1697
    background-color: #4287a7;
1698
}
1699

    
1700
#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 {
1701
    background-color: #74AEC9;
1702
}
1703

    
1704
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1705
    width: 16px;
1706
    height: 16px;
1707
    float: left;
1708
    background-repeat: no-repeat;
1709
    color: transparent;
1710
}
1711

    
1712
#metadata-wizard .metatextbox {
1713
    font-size: 90%;
1714
    height: 18px;
1715
    margin-top: -2px;
1716
    color: black;
1717
    width: 150px;
1718
}
1719

    
1720
#metadata-wizard p, #add-machines-wizard p {
1721
    margin-left: 7px;
1722
    width: 200px;
1723
}
1724

    
1725
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1726
    background-color: #666;
1727
    height: 20px;
1728
    margin-top: 17px;
1729
}
1730

    
1731
#metadata-wizard button.remove {
1732
    height: 15px;
1733
    width: 70px;
1734
    background-color: #d35f5f;
1735
    border-color: #d35f5f;
1736
}
1737

    
1738
#metadata-wizard button.edit {
1739
    height: 15px;
1740
    width: 70px;
1741
    background-color: #666;
1742
    border-color: #666;
1743
    margin-top: -12px;
1744
}
1745

    
1746
#metadata-wizard input {
1747
    font-style: italic;
1748
    color: #ccc;
1749
}
1750

    
1751
#metadata-wizard textarea.edit-meta-value {
1752
    font-style: normal;
1753
    text-align: left;
1754
    color: black;
1755
    margin-top: 2px;
1756
    width:200px;
1757
    height: 49px;
1758
}
1759

    
1760
#metadata-wizard input {
1761
    font-size: 80%;
1762
}
1763

    
1764
#metadata-wizard input.key {
1765
    height: 15px;
1766
    left: 460px;
1767
    position: absolute;
1768
    top: 83px;
1769
    width: 230px;
1770
}
1771

    
1772
#metadata-wizard textarea.value {
1773
    width: 267px;
1774
    height: 170px;
1775
    overflow: auto;
1776
}
1777

    
1778
#metadata-wizard .input-enabled {
1779
    color: black;
1780
    text-align: left;
1781
    font-style: normal;
1782
}
1783

    
1784
#metadata-wizard label.meta-value {
1785
    vertical-align: top;
1786
}
1787

    
1788
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1789
    float: left;
1790
    margin: 4px 0 0 25px;
1791
    background-color: #d35f5f;
1792
    border-color: #d35f5f;
1793
}
1794

    
1795
/* metadata dropdown combo */
1796
.meta-key {
1797
    margin-right: 18px;
1798
    float:left;
1799
}
1800
#metadata-wizard .textdropdown-outer {
1801
    float: left;
1802
    overflow: visible;
1803
}
1804

    
1805
#metadata-wizard .textdropdown-btn {
1806
    background: url("./dropdown-arrow.gif") no-repeat scroll center center transparent;
1807
    cursor: pointer;
1808
    float: right;
1809
    left: 90px;
1810
    margin-top: 4px;
1811
    position: absolute;
1812
    width: 20px;
1813
}
1814

    
1815
#metadata-wizard ul {
1816
    border: 1px solid #ccc;
1817
    padding: 0px;
1818
    list-style: none;
1819
    margin: 0px;
1820
    background-color: white;
1821
    height: auto !important;
1822
    padding-left: 5px;
1823
    width: 103px !important;
1824
    position: relative;
1825
}
1826

    
1827
#metadata-wizard ul li {
1828
    clear: both;
1829
    display: block;
1830
    float: right;
1831
    list-style: none outside none;
1832
    margin-bottom: 0 !important;
1833
    margin-left: 0 !important;
1834
    padding-bottom: 2px;
1835
    padding-right: 2px;
1836
    padding-top: 2px;
1837
    width: 100%;
1838
}
1839

    
1840
#metadata-wizard ul li:hover {
1841
    background-color: #efefef;
1842
    cursor: pointer;
1843
}
1844

    
1845
#metadata-wizard .dropdownitem {
1846
    margin-left: 10px;
1847
}
1848

    
1849
#metadata-wizard #txtdropdown:focus {
1850
    outline: 0 none;
1851
}
1852

    
1853
#metadata-wizard #add-meta-key {
1854
    height: 16px;
1855
    margin-left: 5px;
1856
    margin-top: 2px;
1857
    width: 105px !important;
1858
}
1859

    
1860
/* notification box */
1861
#yes-no {
1862
    height: 150px;
1863
    z-index: 9999;
1864
    border-bottom: 5px solid #4085A5;
1865
}
1866

    
1867
#yes-no p, #yes-no button {
1868
    margin-top: 15px;
1869
}
1870

    
1871
#error-success, .notification-box {
1872
    z-index: 9999;
1873
    border-bottom: 5px solid #4085A5;
1874
    min-height: 150px;
1875
    top: 50px !important;
1876
    position: absolute !important;
1877
}
1878

    
1879
#error-success p, .notification-box p {
1880
    margin-top: 5px;
1881
}
1882

    
1883
.error-report {
1884
    display: none;
1885
}
1886

    
1887
#error-success .error-report {
1888
    position: absolute;
1889
    top: 140px;
1890
    right: 40px;
1891
}
1892

    
1893
.error .error-report {
1894
    display: block;
1895
}
1896

    
1897
#error-success .error-report .errormsg {
1898
    display: none;
1899
}
1900

    
1901
#error-success .error-report .success {
1902
    display: none;
1903
}
1904

    
1905
#error-success .error-report .sending {
1906
    display: none;
1907
}
1908

    
1909
#error-success .error-report .send-btn {
1910
    color: #4085A5;
1911
    text-decoration: underline;
1912
    cursor: pointer;
1913
}
1914

    
1915
#error-success strong, .notification-box strong {
1916
    color: #F49C1A;
1917
}
1918

    
1919
#error-success .close, .notification-box .close {
1920
    background-image: url("./close-popup.png");
1921
    background-repeat: no-repeat;
1922
    cursor: pointer;
1923
    height: 13px;
1924
    position: absolute;
1925
    right: 7px;
1926
    top: 9px;
1927
    width: 13px;
1928
}
1929

    
1930
.popup-header-error {
1931
    background-color: #800000 !important;
1932
}
1933

    
1934
.popup-border-error {
1935
    border-color: #800000 !important;
1936
    width:auto;
1937
}
1938

    
1939
.popup-details-error {
1940
    border: none !important;
1941
}
1942

    
1943
.popup-separator-error {
1944
    margin-bottom: 5px !important;
1945
}
1946

    
1947
#error-success .popup-header, .notification-box .popup-header {
1948
    background-color: #4085A5;
1949
    color: white;
1950
    font-size: 95%;
1951
    font-weight: normal;
1952
    height: 20px;
1953
    margin-left: -16px;
1954
    margin-top: -16px;
1955
    padding-bottom: 2px;
1956
    padding-left: 30px;
1957
    padding-top: 10px;
1958
    width: 482px;
1959
    margin-right:-16px;
1960
}
1961

    
1962

    
1963
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
1964
    background-color: #71c837;
1965
    display: block;
1966
    background-image: url("./save-green.png");
1967
    background-position: right 0;
1968
    background-repeat: no-repeat;
1969
    width: 80px;
1970
    padding: 3px 3px 3px 8px;
1971
    margin-top: -6px;
1972
    font-size: 90% !important;
1973
    margin-left: -11px;
1974
}
1975

    
1976
#error-success .popup-body, .notification-box .popup-body {
1977
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
1978
    margin-left: -16px;
1979
    margin-right: -16px;
1980
    margin-top: 1px;
1981
    min-height: 142px;
1982
    padding-top: 10px;
1983
}
1984

    
1985
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1986
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1987
    font-size: 80%;
1988
    min-height: 120px;
1989
    margin-left: 20px;
1990
    padding-left: 15px;
1991
    width: 460px;
1992
}
1993

    
1994
#error-success .popup-separator, .notification-box .popup-seperator {
1995
    background-color: #74AEC9;
1996
    height: 1px;
1997
    font-size:1%;
1998
    width: 442px;
1999
    margin-bottom: 30px;
2000
}
2001

    
2002
#error-success .machine-now-building {
2003
    font-size: 95%;
2004
    padding-bottom: 7px;
2005
    padding-top: 10px;
2006
}
2007

    
2008
#error-success.success .machine-now-building {
2009
    padding-bottom: 14px !important;
2010
}
2011

    
2012
#error-success .password-container, .notification-box .password-container {
2013
    width: 430px;
2014
    padding: 5px;
2015
    border: 2px solid #75b54a;
2016
    background-color: #aade87;
2017
}
2018

    
2019
#error-success .password-header, .notification-box .password-header {
2020
    margin-bottom: 5px;
2021
}
2022

    
2023
#error-success .password, .notification-box .password {
2024
    color: #447821;
2025
}
2026

    
2027
#error-success .popup-details, .notification-box .popup-details {
2028
    border: 2px solid #FF7F2A;
2029
    float: left;
2030
    margin-left: 10px;
2031
    padding: 2px;
2032
}
2033

    
2034
#error-success.success .popup-details, .notification-box .popup-details {
2035
    border: none !important;
2036
    float: none !important;
2037
    margin-left: none !important;
2038
    margin-top: 10px;
2039
}
2040

    
2041
#error-success.success .popup-separator, .notification-box .popup-seperator {
2042
    margin-bottom: 14px !important;
2043
}
2044

    
2045
#error-success .write-password, .notification-box .write-password {
2046
    margin-bottom: 5px;
2047
    padding-left: 30px;
2048
}
2049

    
2050
#error-success .write-password-password, .notification-box .write-password-password {
2051
    padding-left: 30px;
2052
    color: #447821;
2053
    display: inline;
2054
    font-size: 110%;
2055
    font-weight: bold;
2056
}
2057

    
2058
#error-success .write-password-details, .notification-box .write-password-details {
2059
    font-size: 75%;
2060
}
2061

    
2062
.more-details {
2063
    display: block;
2064
}
2065

    
2066
.notification-box h3 span.header-box {
2067
    background: transparent;
2068
}
2069

    
2070
.notification-box .machine-now-building {
2071
    padding: 20px 0;
2072
}
2073

    
2074
.notification-box .header-box {
2075
    width: auto !important;
2076
}
2077

    
2078
.notification-box .password {
2079
    text-align: center;
2080
}
2081
.notification-box .password a:hover {
2082
    background-color: #447821;
2083
    color: #fff;
2084
}
2085

    
2086
.notification-box .password a {
2087
    padding: 0.2em;
2088
    text-align: center;
2089
    color: #447821;
2090
    font-weight: bold;
2091
    font-size: 1.2em;
2092
    text-decoration: none;
2093
}
2094

    
2095
.popup-details a:link, .popup-details a:visited{
2096
    color: black;
2097
}
2098

    
2099
/* Confirmation boxes */
2100
div.confirm_single, div.confirm_multiple, div.action_error {
2101
    display: none;
2102
    color: black;
2103
}
2104

    
2105
div.action-container.destroy div.confirm_single {
2106
    bottom: 0;
2107
    position: absolute;
2108
    left: 83px;
2109
}
2110

    
2111
div.terminated div.action-container.destroy div.confirm_single {
2112
    margin-top: 30px;
2113
}
2114

    
2115
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2116
    font-size: 100%;
2117
    cursor: pointer;
2118
    color: black;
2119
    height: 20px !important;
2120
}
2121

    
2122
div.confirm_single {
2123
    float: right;
2124
    margin: -20px -122px 0 0;
2125
}
2126

    
2127
div.confirm_single button {
2128
    border: none;
2129
}
2130

    
2131
div.confirm_single button.yes {
2132
    width: 90px;
2133
    background-color:#FF7F2A;
2134
}
2135

    
2136
div.confirm_single button.yes:hover {
2137
    background-color: #FF9955;
2138
}
2139

    
2140
div.confirm_single button.no {
2141
    width: 20px;
2142
    margin-left:-5px;
2143
    background-color: #FF9955;
2144
    color:#d95d0a;
2145
}
2146

    
2147
div.confirm_single button.no:hover {
2148
    color: white;
2149
}
2150

    
2151
div.confirm_multiple {
2152
    background-color: #4085A5;
2153
    font-size: 75%;
2154
    z-index: 1;
2155
    position: absolute;
2156
    width: 698px;
2157
    height: 28px;
2158
    margin-top: 15px;
2159
}
2160

    
2161
div.confirm_multiple p {
2162
    float: left;
2163
    color: #FF7F2A;
2164
    font-weight: bold;
2165
    margin: 7px 0 0 200px;
2166
}
2167

    
2168
#networks-pane div.confirm_multiple p {
2169
    margin: 7px 0 0 100px;
2170
}
2171

    
2172
div.confirm_multiple button {
2173
    float: right;
2174
    background-color: transparent;
2175
    border: 1px solid #5CA1C0;
2176
    margin: 4px 5px 0 0;
2177
}
2178

    
2179
div.confirm_multiple button.yes {
2180
    border-color: #FF7F2A;
2181
    padding: 0 12px;
2182
}
2183

    
2184
div.confirm_multiple button.yes:hover {
2185
    background-color: #FF7F2A;
2186
}
2187

    
2188
div.confirm_multiple button.no {
2189
    padding: 0px 16px;
2190
}
2191

    
2192
div.confirm_multiple button.no:hover {
2193
    background-color: #5CA1C0;
2194
}
2195

    
2196
div.action_error {
2197
    width: 80px;
2198
    height: 60px;
2199
    padding: 5px;
2200
    margin: -2px 0 0 595px;
2201
    background-color: #4085A5;
2202
    font-size: 75%;
2203
    line-height: 1.5;
2204
    z-index:1;
2205
    color: #FF7F2A;
2206
    position:absolute;
2207
    top: 0px;
2208
}
2209

    
2210
.action_error button {
2211
    width: 80px !important;
2212
    background-color: transparent;
2213
    border: 1px solid;
2214
    padding: 0px;
2215
    border-color: #FF7F2A;
2216
}
2217

    
2218
div.action_error button.details {
2219
    margin: 5px 0 0 0px;
2220
    padding: 0 15px;
2221
}
2222

    
2223
div.action_error button.details:hover {
2224
    background-color: #FF7F2A;
2225
}
2226

    
2227
div#aboutuser{
2228
    float:right;
2229
    clear: both;
2230
    color: #FFFFFF;
2231
    font-size: 75%;
2232
    margin-top: -25px;
2233
}
2234

    
2235
div#user{
2236
    clear: both;
2237
    color: #FFFFFF;
2238
    font-size: 75%;
2239
    margin-top: 38px;
2240
    padding-bottom: 10px;
2241
    z-index: 8000;
2242
    position: absolute;
2243
    right:0;
2244
}
2245

    
2246
div#user a{
2247
    color: #FFFFFF;
2248
    text-decoration: none;
2249
}
2250

    
2251
div#user a.current_lang {
2252
    color: #72ADC8;
2253
}
2254

    
2255
div#user .usermenu {
2256
    float: left;
2257
    cursor: pointer;
2258
    overflow: hidden;
2259
    padding-top: 5px;
2260
    margin-top: -5px;
2261
    position: relative;
2262
}
2263

    
2264
div#user .username {
2265
    display: block;
2266
    margin-right: 10px;
2267
    padding-right: 18px;
2268
    padding-left: 4em;
2269
    height: 20px;
2270
    background: url("./down-arrow-light.png") no-repeat right;
2271
    background-position: right 6px;
2272
    font-weight: normal;
2273
}
2274

    
2275
div#user .hovered {
2276
    background: #599EBD;
2277
    overflow: visible;
2278
    border-bottom: 1px solid #C7DFE9;
2279
}
2280

    
2281
div#user .hovered .username {
2282
    background-image: url("./down-arrow-lighter.png");
2283
}
2284

    
2285
div#user .active {
2286
    background-color: #BED5E0 !important;
2287
}
2288

    
2289
div#user .active .username {
2290
    color: #599EBD;
2291
    background-image: url("./down-arrow-lighter.png");
2292
}
2293

    
2294
div#user .useractions {
2295
    display: none;
2296
}
2297

    
2298
div#user .active .useractions {
2299
    display: block;
2300
    text-align: right;
2301
    color: #4085A5;
2302
    background-color: #D0E3ED;
2303
    margin-top:-1px;
2304
    border-top:1px solid #fff;
2305
    position: relative;
2306
    top: 1px;
2307
    box-shadow: 1px 1px 1px #aaa;
2308
    -moz-box-shadow: 1px 1px 1px #aaa;
2309
    -webkit-box-shadow: 1px 1px 1px #aaa;
2310
    z-index: 2000;
2311
}
2312

    
2313
div#user .useractions li {
2314
    padding: 2px 10px;
2315
    border-bottom: 1px solid #efefef;
2316
    text-align: right;
2317
    display: block;
2318
    background-color: transparent;
2319
}
2320

    
2321
div#user .useractions li a {
2322
    color: #4085A5;
2323
    display: inline-block;
2324
    padding:5px 0;
2325
    padding-left: 30px;
2326
    padding-bottom: 6px;
2327
    background-repeat: no-repeat;
2328
    background-position: center left;
2329
}
2330

    
2331
div#user .useractions li.hovered {
2332
    background-color: #E1EFF6;
2333
}
2334

    
2335
div#user .useractions li.last {
2336
    border-bottom: none;
2337
}
2338

    
2339
div#user .useractions .logout a {
2340
    background-image: url("./icon-logout.png");
2341
}
2342

    
2343
div#user .langmenu {
2344
    float: left;
2345
    border-left: 1px solid #ffffff;
2346
    padding-left: 10px;
2347
    margin-left: -1px;
2348
}
2349

    
2350
div#user .langmenu .sep {
2351
    display: inline-block;
2352
    color: #72ADC8;
2353
}
2354

    
2355
.separator {
2356
    background-color: #74AEC9;
2357
    height: 10px;
2358
    width: 700px;
2359
    font-size: 1px;
2360
    line-height: 0px;
2361
}
2362

    
2363
#disks.separator {
2364
    background-color: #dea842;
2365
}
2366

    
2367
#networks.separator {
2368
    background-color: #6c535d;
2369
}
2370

    
2371
.network-machine h5 {
2372
    margin-bottom: 26px;
2373
    margin-top:0px;
2374
}
2375

    
2376
.machine-container .separator {
2377
    width: 508px;
2378
    height: 1px;
2379
    margin-top: 2px;
2380
    background-color: #5CA1C0;
2381
    margin-left: 13px;
2382
}
2383

    
2384
.machine h5 {
2385
    margin: -3px 0px 4px 0px;
2386
}
2387

    
2388
.machine h5.namecontainer {
2389
    margin-top: 1px;
2390
}
2391

    
2392
.editbuttons {
2393
    display: block;
2394
    clear: none;
2395
    width: 40px;
2396
    margin-right: 32%;
2397
    padding-top: 2px;
2398
    float: right;
2399
    cursor: pointer;
2400
    position: relative;
2401
    z-index: 1000;
2402
}
2403

    
2404
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2405
    background-color: #84b7d0;
2406
}
2407

    
2408
div.editbuttons div.cancel:hover {
2409
    background-image: url("./cancel-onhover.png");
2410
}
2411

    
2412
.editbuttons .cancel, .editbuttons .save {
2413
    background-repeat: no-repeat;
2414
    color: transparent;
2415
    height: 16px;
2416
    width: 16px;
2417
    float: left;
2418
}
2419

    
2420
.editbuttons .cancel {
2421
    background-image: url("./cancel.png");
2422
    margin-left: 3px;
2423
}
2424

    
2425
.editbuttons .save {
2426
    background-image: url("./save.png");
2427
    margin-left: 1px;
2428
}
2429

    
2430
.editbuttons img {
2431
    float:none !important;
2432
    margin: 0px !important;
2433
}
2434

    
2435
.namecontainer {
2436
    height: 18px;
2437
    margin-top: 9px;
2438
}
2439

    
2440
.nametextbox {
2441
    font-size: 95%;
2442
}
2443

    
2444
.large-spinner {
2445
    background: url("./icons/indicators/large/progress.gif");
2446
    margin-left: 298px;
2447
    margin-top: 0px;
2448
    height: 31px;
2449
    width: 31px;
2450
    position: absolute;
2451
    top: 200px;
2452
}
2453

    
2454
#machinesview-icon .large-spinner {
2455
    top: 170px;
2456
}
2457

    
2458
.list .large-spinner {
2459
    margin-top:-30px;
2460
}
2461

    
2462
.single .large-spinner {
2463
    margin-top: 50px;
2464
}
2465

    
2466
div#networks-container .large-spinner {
2467
    margin-top: 50px;
2468
}
2469

    
2470
/* tables in list view */
2471
div.list div.dataTables_filter {
2472
    font-size: 75%;
2473
    display: none;
2474
    margin-bottom: 12px;
2475
}
2476

    
2477
div.list div.dataTables_filter input{
2478
    font-size: 100%;
2479
}
2480

    
2481
.dataTables_wrapper {
2482
    width: 515px;
2483
    padding-bottom: 40px;
2484
}
2485

    
2486
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2487
    padding-right: 15px !important;
2488
}
2489

    
2490
div.list table {
2491
    width: 515px;
2492
    font-size: 75%;
2493
}
2494

    
2495
div.list table tbody td {
2496
    color: #3D3D3D;
2497
    padding:6px;
2498
    vertical-align: middle;
2499
}
2500

    
2501
div.list table thead tr th {
2502
    background-color: #CDE2EC;
2503
    background-image: url(bg.gif);
2504
    background-repeat: no-repeat;
2505
    background-position: right 11px;
2506
    font-weight: normal;
2507
    border: 1px solid transparent;
2508
    border-bottom: none;
2509
    padding: 4px;
2510
    text-align: left;
2511
    vertical-align: middle;
2512
    cursor: pointer;
2513
}
2514

    
2515
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2516
    background-color: #5CA1C0;
2517
}
2518

    
2519
div.list table thead .sorting_asc {
2520
    background-image: url(asc.gif);
2521
}
2522

    
2523
div.list table thead .sorting_desc {
2524
    background-image: url(desc.gif);
2525
}
2526

    
2527
div.list table .selection div.expand-icon {
2528
    background-image: url(asc.gif);
2529
    background-repeat: no-repeat;
2530
    position: relative;
2531
    cursor: pointer;
2532
    width: 15px;
2533
    height: 4px;
2534
    left: 19px;
2535
    top: -11px;
2536
}
2537

    
2538
ul.dropdown-selector {
2539
    background-color: #E6EEEE;
2540
    position: absolute;
2541
    margin-left: 1px;
2542
    display: block;
2543
    top: 255px;
2544
    font-size:75%;
2545
    width:40px;
2546
}
2547

    
2548
ul.dropdown-selector li {
2549
    padding: 4px;
2550
}
2551

    
2552
ul.dropdown-selector li:hover {
2553
    background-color: #5CA1C0;
2554
}
2555

    
2556
ul.dropdown-selector li a{
2557
    color: black;
2558
    text-decoration: none;
2559
}
2560

    
2561
div.list table span.imagetag {
2562
    display: none;
2563
}
2564

    
2565
div.list table thead .vmos {
2566
    width: 20px !important;
2567
    vertical-align:middle;
2568
}
2569

    
2570
div.list table .selection {
2571
    width: 20px !important;
2572
    text-align: left;
2573
    background-image: none;
2574
    padding-left: 6px;
2575
}
2576

    
2577
div.list table thead .vmflavor {
2578
    width: 100px !important;
2579
}
2580

    
2581
/* group column commented out for v0.5
2582
div.list table thead .vmgroup {
2583
    width: 40px !important;
2584
}
2585
*/
2586

    
2587
div.list table thead .vmstatus {
2588
    width: 50px !important;
2589
}
2590

    
2591
div.list table thead .vmname {
2592
    width: 110px !important;
2593
}
2594

    
2595
.spinner, .action-indicator {
2596
    clear: right;
2597
    float:right !important;
2598
    margin: 10px 6px 0 15px !important;
2599
}
2600
.action-indicator {
2601
    margin-right: 18px !important;
2602
}
2603

    
2604
.wave {
2605
    clear: right;
2606
    float:right !important;
2607
    margin: 10px 15px 0 15px !important;
2608
}
2609

    
2610
#networks-pane .spinner {
2611
    margin-top: 18px !important;
2612
}
2613

    
2614
.hidden {
2615
    display:none;
2616
}
2617

    
2618
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2619
    display:block !important;
2620
}
2621

    
2622
.action_error .message, .action_error .code {
2623
    display: none;
2624
}
2625

    
2626
.fixed {
2627
    bottom: 0;
2628
    position: fixed !important;
2629
}
2630

    
2631
/* Networks */
2632
#networks-pane {
2633
    background-color: transparent;
2634
    color: black;
2635
    margin-left: 1px;
2636
    margin-right: 0;
2637
}
2638

    
2639
#networkscreate {
2640
    color: black;
2641
    background-color: #FF7F2A;
2642
    cursor: pointer;
2643
    padding: 7px 24px;
2644
    text-decoration: none;
2645
}
2646

    
2647
#networkscreate:hover {
2648
    background-color: #FF9955;
2649
}
2650

    
2651
#networks-pane #beforecreate {
2652
    margin-left: -13px;
2653
}
2654

    
2655
#networks-container {
2656
    margin-top: 10px;
2657
    min-height: 270px;
2658
}
2659

    
2660
#networks-createcontainer {
2661
    position: absolute;
2662
    top: 155px;
2663
}
2664

    
2665
#networks-pane .public-networks {
2666
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2667
    margin: 0 0 18px;
2668
    padding: 70px 0 15px 35px;
2669
}
2670

    
2671
#networks-pane .private-networks {
2672
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2673
    padding: 15px 20px 20px 35px;
2674
}
2675

    
2676
#public-template, #private-template, #public-machine-template, #private-machine-template {
2677
    display:none;
2678
}
2679

    
2680
div.network a.action-network-add {
2681
    display: none;
2682
}
2683

    
2684
div.network a.action-network-destroy {
2685
    margin-top: 32px !important;
2686
    width: 50px;
2687
    display: none;
2688
}
2689

    
2690
div.network {
2691
    clear: both;
2692
    min-height: 65px;
2693
    margin: 5px 0 0 -35px;
2694
    padding: 3px 20px 0;
2695
    width: 480px;
2696
    position: relative;
2697
}
2698

    
2699
#private-template {
2700
    margin: 2px 0 0 -30px;
2701
}
2702

    
2703
div.network-placeholder {
2704
    margin-left: 33px;
2705
}
2706

    
2707
div.private-networks div.network-placeholder {
2708
    border-left: 3px solid #FF7F2A;
2709
}
2710

    
2711
div.network-cable {
2712
    border-left: 3px solid #FF7F2A;
2713
    float: left;
2714
    margin-left: -40px;
2715
    margin-top: -45px;
2716
    height: 185px;
2717
    overflow: hidden;
2718
}
2719

    
2720
.first div.network-cable {
2721
    height:143px;
2722
    margin-top:-6px;
2723
    position: relative;
2724
}
2725

    
2726
div.network-contents div.machines-list div.first {
2727
    margin-top:0;
2728
}
2729

    
2730
.last div.network-cable {
2731
    height:85px;
2732
}
2733

    
2734
div.firewall-cable {
2735
    border-left: 3px solid #FF7F2A;
2736
    float: left;
2737
    margin-left: -100px;
2738
    margin-top: -20px;
2739
    height: 110px;
2740
}
2741

    
2742
.last div.firewall-cable {
2743
    display:none;
2744
}
2745

    
2746
div.network a:hover {
2747
    text-decoration: underline;
2748
    cursor: pointer;
2749
}
2750

    
2751
#networks-container .name {
2752
    font-size: 75%;
2753
}
2754

    
2755
div.network-machines, div.firewall {
2756
    font-size: 75%;
2757
    margin-left: 70px;
2758
}
2759

    
2760
div.firewall {
2761
    margin-left: 60px;
2762
    margin-bottom: 3px;
2763
}
2764

    
2765
div.machines-header, div.firewall-header {
2766
    background-color: #A1C8DB;
2767
    color: white;
2768
    cursor: pointer;
2769
    height: 17px;
2770
    width: 103px;
2771
}
2772

    
2773
 div.private-networks div.machines-header {
2774
    margin-top: -5px;
2775
}
2776

    
2777
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2778
    background-color: #84b7d0;
2779
}
2780

    
2781
div.network-machine:hover div.firewall-header {
2782
    background-color: #5CA1C0;
2783
}
2784

    
2785
div.machines-label, div.firewall-label {
2786
    width: 100%;
2787
    padding-bottom:1px;
2788
    padding-left: 3px;
2789
}
2790

    
2791
div.firewall-label.darker {
2792
    background-color: #4085a5;
2793
}
2794

    
2795
.state {
2796
    float: right;
2797
    position: absolute;
2798
    right: 10px;
2799
    top: 40px;
2800
    font-size: 75%;
2801
}
2802

    
2803
div.network div.actions {
2804
    float: right;
2805
    font-size: 75%;
2806
    font-weight: normal;
2807
    height: 70px;
2808
    width: 100px;
2809
    position: absolute;
2810
    right: -100px;
2811
    top: 0;
2812
}
2813

    
2814
div.network div.machine-actions {
2815
    text-decoration: none;
2816
    float: right;
2817
    width: 100px;
2818
    margin: -7px -100px 0 0;
2819
    font-weight: normal;
2820
    font-size: 75%;
2821
}
2822

    
2823
div.network div.actions a, div.network div.machine-actions a {
2824
    text-decoration: none;
2825
    height: 15px;
2826
    color: black;
2827
    visibility: hidden;
2828
    display: block;
2829
}
2830

    
2831
div.network div.actions a {
2832
    margin: 4px 0 0 8px;
2833
}
2834

    
2835
div.network div.machine-actions a {
2836
    margin: 8px 0 0 8px;
2837
}
2838

    
2839
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2840
    display: block;
2841
    background-color:#A1C8DB;
2842
    width: 200px;
2843
    opacity: 0.8;
2844
    filter: alpha(opacity = 80);
2845
}
2846

    
2847
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2848
    visibility: visible;
2849
}
2850

    
2851
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2852
    color: #FF7F2A !important;
2853
    width: 50px !important;
2854
}
2855

    
2856
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2857
    background-color: transparent;
2858
}
2859

    
2860
div.network div.display a {
2861
    visibility: visible;
2862
}
2863

    
2864
div.network-machine div.machine-actions a.action-details {
2865
    margin-top: 7px;
2866
}
2867

    
2868
div.network:hover {
2869
    background-color: #A1C8DB !important;
2870
}
2871

    
2872
.network-logos {
2873
    float:left;
2874
    padding-right: 10px;
2875
}
2876

    
2877
.network-logos:hover {
2878
    cursor: pointer;
2879
}
2880

    
2881
.state div {
2882
    text-align: right;
2883
    margin: 4px 1px -4px;
2884
}
2885

    
2886
.public-networks .state div {
2887
    margin-top: 4px;
2888
}
2889

    
2890
.private-networks .state div {
2891
    margin-top: 9px;
2892
    margin-bottom: -12px;
2893
}
2894

    
2895
.public-networks .name-div {
2896
    margin-top:-7px;
2897
    margin-bottom: 23px;
2898
}
2899

    
2900
div.indicator {
2901
    clear: none;
2902
    float: right;
2903
    height: 11px;
2904
    margin: 3px -1px;
2905
    width: 10px;
2906
}
2907

    
2908
#private-networks {
2909
    margin-top: 20px;
2910
}
2911

    
2912
.private-networks .editbuttons {
2913
    margin-right: 22%;
2914
}
2915

    
2916
.private-networks div.confirm_single {
2917
    margin: 45px -219px -5px 0;
2918
    font-size: 80%;
2919
}
2920

    
2921
.private-networks .network-machine div.confirm_single {
2922
    margin: 0 -199px 0 0;
2923
}
2924

    
2925
.private-networks .state {
2926
    top: 35px;
2927
}
2928

    
2929
.private-networks div.machines-list {
2930
    padding-top: 3px;
2931
}
2932

    
2933
span.rename-network, span.configure {
2934
    background-repeat: no-repeat;
2935
    color: transparent;
2936
    font-size: 75%;
2937
    font-weight: normal;
2938
    margin-left: 10px;
2939
    padding-left: 10px;
2940
    text-align: left;
2941
}
2942

    
2943
span.rename-network {
2944
    cursor: pointer;
2945
}
2946

    
2947
div.name-div:hover span.rename-network {
2948
    color: #3D3D3D;
2949
    margin-top: 0.4em;
2950
    background-image: url(./pencil.png);
2951
    background-position: 0 3px;
2952
}
2953

    
2954
div.network:hover a.rename {
2955
    color: #3d3d3d;
2956
}
2957

    
2958
.network-separator {
2959
    background-color: #5CA1C0;
2960
    height: 1px;
2961
    margin: 2px 0 0 -5px;
2962
    width: 480px;
2963
    font-size: 1%;
2964
    line-height: 1px;
2965
}
2966

    
2967
.network-contents {
2968
    margin-left: -4px;
2969
    width: 504px;
2970
    clear: both;
2971
    padding-bottom: 7px;
2972
}
2973

    
2974
.network-machine .state div {
2975
    text-align: left;
2976
}
2977

    
2978
.network-machine {
2979
    margin-left: 35px;
2980
    padding-bottom: 5px;
2981
    padding-left: 5px;
2982
    padding-top: 5px;
2983
    margin-top: 5px;
2984
}
2985

    
2986
.network-machine .logo {
2987
    float:left;
2988
    padding-right: 10px;
2989
    position:relative;
2990
}
2991

    
2992
#networks-container .machine-name {
2993
    text-decoration: none !important;
2994
    margin-bottom: 10px;
2995
    color: #000000;
2996
    margin-top: -4px;
2997
}
2998

    
2999
.private-networks .separator {
3000
    background-color: #5CA1C0;
3001
    height: 1px;
3002
    margin: 3px 0 -2px -10px;
3003
    width: 485px;
3004
}
3005

    
3006
.network-machine .state {
3007
    margin-right: 18px;
3008
}
3009

    
3010
.network-machine .state .status {
3011
    margin-bottom: 4px;
3012
}
3013

    
3014
.machine-name .name {
3015
    margin-top: -10px !important;
3016
}
3017

    
3018
.machine-name .namecontainer {
3019
    line-height: 18px;
3020
    margin-bottom: 20px;
3021
}
3022

    
3023
div.network-machine:hover {
3024
    background-color: #84B7D0;
3025
}
3026

    
3027
.machines {
3028
    width: 416px;
3029
    margin-bottom: -8px;
3030
    margin-top: 10px;
3031
}
3032

    
3033
div.empty-network-slot {
3034
    height: 60px;
3035
}
3036

    
3037
div.network-remove-machine, div.network-add-machine {
3038
    background-color: #FB822F;
3039
    color: #bc4b00;
3040
    width:90px;
3041
    height:18px;
3042
    float:left;
3043
    margin:40px 0 0 -100px;
3044
}
3045

    
3046
span.remove-icon {
3047
    font-size: 80%;
3048
    margin-left: 15px;
3049
}
3050

    
3051
div.add-icon {
3052
    margin-left: 15px;
3053
    margin-top: -3px;
3054
    cursor: pointer;
3055
}
3056

    
3057
span.remove-icon:hover, span.add-icon:hover {
3058
    cursor:pointer;
3059
    color: #fff;
3060
}
3061

    
3062
div.network-add-machine {
3063
    margin:43px 0 0 -3px;
3064
}
3065

    
3066
.firewall-on {
3067
    color: #42E342;
3068
}
3069

    
3070
.firewall-off {
3071
    color: #F82E2E;
3072
}
3073

    
3074
.firewall-content {
3075
    color: black;
3076
    font-size: 60%;
3077
    margin-left: 60px;
3078
    height: 55px;
3079
    margin-bottom: 17px;
3080
}
3081

    
3082
.firewall-content .checkbox-legends {
3083
    vertical-align: text-top;
3084
}
3085

    
3086
.checkbox-legends a {
3087
    color: black;
3088
    text-decoration: underline;
3089
    font-size: 100%;
3090
}
3091

    
3092
h5.machine-connect {
3093
    font-size: 75%;
3094
    margin-bottom: 3px;
3095
}
3096

    
3097
.machine-connect span {
3098
    text-decoration: underline;
3099
}
3100

    
3101
h5.machine-connect span:hover {
3102
    cursor: pointer;
3103
}
3104

    
3105
.firewall-apply {
3106
    background-color: #4085a5;
3107
    border: medium none;
3108
    float: right;
3109
    font-size: 105%;
3110
    height: 18px;
3111
    margin-right: 5px;
3112
    margin-top: 3px;
3113
    width: 75px;
3114
}
3115

    
3116
.firewall-apply:hover {
3117
    background-color:#5CA1C0;
3118
}
3119

    
3120
.name-div {
3121
    margin: -9px 0 30px 70px;
3122
}
3123

    
3124
.machine-name-div {
3125
    margin-bottom: 20px;
3126
    margin-left: 60px;
3127
}
3128

    
3129
div.reboot-dialog {
3130
    display: none;
3131
    color: black;
3132
    background-color: #4085A5;
3133
    font-size: 75%;
3134
    margin-top: 15px;
3135
    width: 698px;
3136
    z-index: 1;
3137
}
3138

    
3139
div#reboot-machine-template, div.reboot-machine-entry {
3140
    display: none;
3141
    padding: 0 0 10px 35px;
3142
    width: 300px;
3143
}
3144

    
3145
div.reboot-dialog p {
3146
    color: #FFFFFF;
3147
    padding: 10px 0 10px 10px;
3148
}
3149

    
3150
div.reboot-dialog button {
3151
    float:right;
3152
    border: 1px solid #FF7F2A;
3153
    background-color: transparent;
3154
    font-size:100%;
3155
}
3156

    
3157
div.reboot-dialog button:hover {
3158
    background-color: #FF7F2A;
3159
}
3160

    
3161
div.reboot-dialog button.reboot-all {
3162
    margin: -30px 35px 0 0;
3163
}
3164

    
3165
div.reboot-dialog button.reboot-single {
3166
    color: black;
3167
    margin-top: -20px;
3168
}
3169

    
3170
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3171
    display:none;
3172
}
3173

    
3174
div.reboot-dialog button.details {
3175
    border-color: #800000;
3176
    margin-top: -20px;
3177
}
3178

    
3179
div.reboot-dialog button.details:hover {
3180
    background-color: #800000;
3181
}
3182

    
3183
/* Metadata */
3184
.info-content {
3185
    clear: both;
3186
    height: 95px;
3187
    width: 512px;
3188
}
3189

    
3190
.metadata-container {
3191
    line-height: 12px;
3192
    height: 85px;
3193
    background-color: #84b7d0;
3194
}
3195

    
3196
.metadata-column {
3197
    border-right: 1px solid #5CA1C0;
3198
    color: black;
3199
    float: left;
3200
    font-size: 60%;
3201
    margin-top: 3px;
3202
    height: 70px;
3203
    padding-bottom: 5px;
3204
}
3205

    
3206
.vm-stats {
3207
    padding-left: 10px;
3208
    padding-right: 5px;
3209
    width: 220px;
3210
}
3211

    
3212
.vm-stats div.stat-content {
3213
    height: 18px;
3214
}
3215

    
3216
.vm-stats div.stat-content img {
3217
    margin: 0;
3218
}
3219

    
3220
.vm-stats div.stat-content img.busy {
3221
    margin-left: 95px;
3222
}
3223

    
3224
.vm-stats div.stat-error {
3225
    display:none;
3226
}
3227

    
3228
.vm-details {
3229
    width: 130px;
3230
    margin-left:17px;
3231
}
3232

    
3233
.vm-metadata {
3234
    padding-left: 10px;
3235
    width: 100px;
3236
    border: none;
3237
}
3238

    
3239
.metadata-left {
3240
    float:left;
3241
    width: 30px;
3242
    height: 60px;
3243
}
3244

    
3245
.metadata-right {
3246
    width: 73px;
3247
    float:left;
3248
    height: 35px;
3249
    padding-left: 5px;
3250
    position:relative;
3251
    overflow:hidden;
3252
}
3253

    
3254
.metadata-right .items {
3255
    position:absolute;
3256
    height:20000em;
3257
}
3258

    
3259
.metadata-keys-container {
3260
    height: 60px;
3261
    float: left;
3262
}
3263

    
3264
.single .metadata-keys-container {
3265
    float: none;
3266
    height: 50px;
3267
}
3268

    
3269
.single a.manage-metadata {
3270
    font-size: 80%;
3271
    margin-left:4px;
3272
    color: #383838;
3273
}
3274

    
3275
a.manage-metadata, a.stats-report {
3276
    font-size: 100%;
3277
    color: black;
3278
    margin-left:17px;
3279
    text-decoration: underline;
3280
}
3281

    
3282
a.stats-report {
3283
    margin: 15px 0  0 80px;
3284
}
3285

    
3286
div.machine a.manage-metadata:hover {
3287
    background-color: transparent;
3288
}
3289

    
3290
.metadata-actions, .scrollable {
3291
    padding-left: 5px;
3292
}
3293

    
3294
.singe .metadata-actions, .single .scrollable {
3295
    font-size: 80%;
3296
    line-height: 12px;
3297
    width: 300px;
3298
}
3299

    
3300
.metadata-actions .prev,  .metadata-actions .next{
3301
    float:left;
3302
    width:29px;
3303
    height:6px;
3304
    cursor: pointer;
3305
}
3306

    
3307
.metadata-actions .prev {
3308
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3309
}
3310

    
3311
.metadata-actions .next {
3312
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3313
}
3314

    
3315
.scrollable {
3316
    position:relative;
3317
    overflow:hidden;
3318
    height: 35px;
3319
    width: 60px;
3320
    margin-bottom:2px;
3321
}
3322

    
3323
.scrollable .items {
3324
    position:absolute;
3325
    height:20000em;
3326
}
3327

    
3328
/* single view */
3329
.single {
3330
    color: #383838;
3331
    margin-top: -76px;
3332
    padding-bottom: 10px;
3333
    width: 679px;
3334
}
3335

    
3336
.single .column1 {
3337
    float: left;
3338
    margin: 1px 0 25px 17px;
3339
    width: 140px;
3340
}
3341

    
3342
.single .column1 .state {
3343
    float: left;
3344
    margin-left: 4px;
3345
    padding-bottom: 6px;
3346
    padding-top: 3px;
3347
    position: relative;
3348
    right: 0;
3349
    text-align: center;
3350
    width: 126px;
3351
}
3352

    
3353
.single .column1 .state-label {
3354
    padding-top: 5px;
3355
}
3356

    
3357
.single .column1 .indicators {
3358
    margin-right: 38px !important;
3359
}
3360

    
3361
.single div.connect-arrow {
3362
    margin-left: -17px;
3363
}
3364

    
3365
.single div.connect-border {
3366
    margin-left: -29px;
3367
}
3368

    
3369
.single .single-actions {
3370
    padding-bottom: 4px;
3371
    padding-left: 15px;
3372
    width: 69px;
3373
    float: left;
3374
}
3375

    
3376
.single div.single-action {
3377
    font-size: 80%;
3378
    line-height: 18px;
3379
    text-decoration: none;
3380
    cursor: pointer;
3381
}
3382

    
3383
.single div.single-action:hover {
3384
    background-color:#A1C8DB;
3385
    width: 180px;
3386
    opacity: 0.8;
3387
    filter: alpha(opacity = 80);
3388
}
3389

    
3390
.single div.single-action.selected {
3391
    color: #FF7F2A !important;
3392
    width: 50px !important;
3393
}
3394

    
3395
.single div.single-action.selected:hover {
3396
    background-color:transparent;
3397
}
3398

    
3399
.single div.confirm_single {
3400
    font-size: 80%;
3401
    margin: -19px -115px 0 0;
3402
}
3403

    
3404
.single div.action-container.destroy div.confirm_single {
3405
    margin: -18px -116px 0 0;
3406
    position: relative;
3407
    left: 0px;
3408
}
3409

    
3410
.single div.confirm_single button.no {
3411
    margin-left: -5px;
3412
}
3413

    
3414
.single .spinner, .single .action-indicator {
3415
    margin: 15px 45px 0 0px !important
3416
}
3417

    
3418
.single .action-indicator {
3419
    margin-right: 55px !important;
3420
}
3421

    
3422
.single .wave {
3423
    margin: 15px 53px 0 0px !important
3424
}
3425

    
3426
.single div.action_error {
3427
    margin: 2px 0px 0 605px !important;
3428
    position: relative;
3429
}
3430

    
3431
.single .column2 {
3432
    background-color: #A1C8DB;
3433
    float: left;
3434
    font-size: 78%;
3435
    line-height: 17px;
3436
    margin: 0 0 10px 5px;
3437
    width: 358px;
3438
}
3439

    
3440
.single .column2 .machine-labels {
3441
    float: left;
3442
    font-size: 90%;
3443
    margin-left: 10px;
3444
    margin-top: 10px;
3445
    width: 125px;
3446
}
3447

    
3448
.single .column2 .machine-details {
3449
    float: right;
3450
    text-align: right;
3451
    font-size: 90%;
3452
    width: 210px;
3453
    margin-right: 10px;
3454
    margin-top: 10px;
3455
}
3456

    
3457
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3458
    margin-bottom: 13px;
3459
}
3460

    
3461
.single .tags {
3462
    clear: both;
3463
    margin-bottom: 10px;
3464
    margin-left: 10px;
3465
}
3466

    
3467
.single .tags-label {
3468
    float: left;
3469
    padding: 0 5px;
3470
    width: 30px;
3471
}
3472

    
3473
.single .tags-down-arrow {
3474
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3475
    float: left;
3476
    height: 16px;
3477
    width: 9px;
3478
}
3479

    
3480
.single .tags-header {
3481
    background-color: #84B7D0;
3482
    cursor: pointer;
3483
    height: 16px;
3484
    width: 55px;
3485
}
3486

    
3487
.single .tags-content {
3488
    background-color: #84B7D0;
3489
    clear: both;
3490
    height: 65px;
3491
    padding-bottom: 5px;
3492
    padding-top: 5px;
3493
    width: 300px;
3494
}
3495

    
3496
.single .column3 {
3497
    background-color: #A1C8DB;
3498
    margin-left: 535px;
3499
    position: absolute;
3500
    top: 280px;
3501
    width: 150px;
3502
    overflow: visible;
3503
    padding-bottom: 10px;
3504
}
3505

    
3506
.single .column3 .controls {
3507
    font-size: 80%;
3508
    height: 20px;
3509
    padding-left: 7px;
3510
    padding-right: 7px;
3511
    padding-top: 8px;
3512
}
3513

    
3514
.single .column3 .previous {
3515
    float:left;
3516
    width: 72px;
3517
}
3518

    
3519
.single .column3 .next {
3520
    float: right;
3521
    text-align: center;
3522
    width: 60px;
3523
}
3524

    
3525
.single .column3 .next-label {
3526
    float: right;
3527
    margin-right: 3px;
3528
    margin-top: -2px;
3529
}
3530

    
3531
.single .column3 .next-arrow {
3532
    float: right;
3533
    height: 18px;
3534
    width: 10px;
3535
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3536
}
3537

    
3538
.single .column3 .prev-label {
3539
    float: left;
3540
    margin-left: 3px;
3541
    margin-top: -2px;
3542
}
3543

    
3544
.single .column3 .prev-arrow {
3545
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3546
    float: left;
3547
    height: 18px;
3548
    width: 10px;
3549
}
3550

    
3551
.single .column3 .separator {
3552
    width: 135px;
3553
    height: 1px;
3554
    background-color: #84B7D0;
3555
    margin: 0 0 0 7px;
3556
    clear: both;
3557
}
3558

    
3559
.single .column3 .servers {
3560
    font-size: 80%;
3561
    line-height: 15px;
3562
    padding-top: 10px;
3563
    text-align: right;
3564
    overflow: visible;
3565
    position: relative;
3566
}
3567

    
3568
.single .column3 .server-name {
3569
    margin-left: 10px;
3570
    padding-right: 5px;
3571
    cursor: pointer;
3572
    padding-bottom: 2px;
3573
}
3574

    
3575
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3576
    background-color: #84B7D0;
3577
    color: white;
3578
    opacity: 0.8;
3579
    padding-left: 9px;
3580
    text-align: left;
3581
    width: 160px;
3582
    filter: alpha(opacity = 80);
3583
    position: relative;
3584
}
3585

    
3586
.single .toggler {
3587
    color: #FFFFFF;
3588
    float: right;
3589
    font-size: 140%;
3590
}
3591

    
3592
.single .cpu-usage, .single .network-usage {
3593
    text-align: center;
3594
    padding-top: 15px;
3595
    margin-bottom: 5px;
3596
    font-size: 90%;
3597
    font-weight: bold;
3598
}
3599

    
3600
.single .cpu-graph, .single .network-graph {
3601
    margin-left: 20px;
3602
    margin-bottom:30px;
3603
    width: 660px;
3604
}
3605

    
3606
.single div.lower img.stats {
3607
    margin-left: 82px;
3608
}
3609

    
3610
.single .single-image {
3611
    width: 126px;
3612
    height: 136px;
3613
    margin-bottom: 10px;
3614
    margin-left: 4px;
3615
    background-image: url("./icons/machines/large/unknown-sprite.png");
3616
    background-repeat: no-repeat;
3617
    cursor: pointer;
3618
}
3619

    
3620
.single .single-image-state1 {
3621
    background-position: 0px 0;
3622
}
3623

    
3624
.single .single-image-state3 {
3625
    background-position: -252px 0;
3626
}
3627

    
3628
.single .single-image-state4 {
3629
    background-position: -378px 0;
3630
}
3631

    
3632
.single .single-image-state2 {
3633
    background-position: -126px 0;
3634
}
3635

    
3636
.single .column3 .previous, .single .column3 .next {
3637
    cursor: pointer;
3638
    background-color: #84B7D0;
3639
    color: white;
3640
    font-size: 100%;
3641
    height: 15px;
3642
    padding-top: 2px;
3643
}
3644

    
3645
.single .column3 .disabled {
3646
    opacity: 0.5;
3647
    filter: alpha(opacity = 50);
3648
}
3649

    
3650
.single div.lower {
3651
    clear:both;
3652
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3653
    width: 700px;
3654
    padding-bottom: 15px;
3655
}
3656

    
3657
.single div.upper {
3658
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3659
    margin-bottom: 10px;
3660
    min-height: 310px;
3661
    overflow: visible;
3662
    padding-top: 60px;
3663
    width: 700px;
3664
}
3665

    
3666
/* console css */
3667
.console-header-logo {
3668
    padding-top: 17px;
3669
    margin-left: 30px;
3670
    position: fixed;
3671
}
3672

    
3673
#console-header div.help-text {
3674
    font-size: 75%;
3675
    font-weight:bold;
3676
    color:#FFFFFF;
3677
    float:left;
3678
    position: absolute;
3679
    margin: 45px 0 0 2px;
3680
}
3681

    
3682
div.console-container {
3683
    margin: 0 0em;
3684
    height: auto;
3685
}
3686

    
3687
#wrapper.console {
3688
    width: auto;
3689
}
3690

    
3691
.console-info {
3692
    font-size:80%;
3693
    color: white;
3694
    float:left;
3695
    position:relative;
3696
    margin: 25px 0 0 480px;
3697
}
3698

    
3699
applet {
3700
    width:100%;
3701
    height:100%;
3702
}
3703

    
3704
div.console-footer {
3705
    /* this is for version 0.5*/
3706
    display: none;
3707
}
3708

    
3709
.console-footer #footer-text{
3710
    float:left;
3711
    left: auto;
3712
    margin-left:30px;
3713
}
3714

    
3715
/* add network wizard (see also #wizard for shared classes) */
3716
#networks-wizard .header {
3717
    background-color: #4085A5;
3718
    height: 56px;
3719
}
3720

    
3721
#networks-wizard div.name-input {
3722
    margin: 75px 0 0 55px;
3723
}
3724

    
3725
#networks-wizard input {
3726
    border: 1px solid #CCCCCC;
3727
    color: #445566;
3728
    letter-spacing: 1px;
3729
    width: 170px;
3730
}
3731

    
3732
#networks-wizard span.help {
3733
    font-style: italic;
3734
    font-size: 80%;
3735
    margin-left: 10px;
3736
}
3737

    
3738
#networks-wizard .separator-end {
3739
    background-color: #387693;
3740
    height: 6px;
3741
    width: 479px;
3742
    margin-left: -13px;
3743
    margin-top: 22px;
3744
}
3745

    
3746
.red {
3747
    color: red;
3748
}
3749

    
3750
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3751
#add-machines-wizard span.machine-name {
3752
    margin-left: 4px;
3753
    vertical-align: text-top;
3754
}
3755

    
3756
#add-machines-wizard img.list-logo {
3757
    margin: 2px 1px 1px;
3758
}
3759

    
3760
.css-panes {
3761
    clear: both;
3762
}
3763

    
3764
.last .firewall-content {
3765
    margin-bottom:13px;
3766
}
3767

    
3768
#pub .last .network-separator {
3769
    display:none;
3770
}
3771

    
3772
.public-networks .empty-network-slot {
3773
    display: none;
3774
}
3775

    
3776
/* float clearing for all browsers except the devil one */
3777
.clearfix:after{
3778
  clear: both;
3779
  content: ".";
3780
  display: block;
3781
  height: 0;
3782
  visibility: hidden;
3783
  font-size: 0;
3784
}
3785

    
3786
#machinesview-list div.action-indicator {
3787
    margin:0 !important;
3788
    float: none !important;
3789
}
3790

    
3791
div.action-indicator {
3792
    width: 15px;
3793
    height: 20px;
3794
    background-repeat: no-repeat;
3795
    background-position: 0 0;
3796
}
3797

    
3798
tbody.machines div.action-indicator {
3799
    position: relative;
3800
    top: -2px;
3801
}
3802
div.state .destroy, tbody.machines .destroy {
3803
    background-image: url("./icons/actions/medium/destroy.png");
3804
}
3805
div.state .console, tbody.machines .console {
3806
    background-image: url("./icons/actions/medium/console.png");
3807
}
3808
div.state .start, tbody.machines .start {
3809
    background-image: url("./icons/actions/medium/start.png");
3810
}
3811
div.state .reboot, tbody.machines .reboot {
3812
    background-image: url("./icons/actions/medium/reboot.png");
3813
}
3814
div.state .shutdown, tbody.machines .shutdown {
3815
    background-image: url("./icons/actions/medium/shutdown.png");
3816
}
3817

    
3818

    
3819
.invitations #field_name_name, .invitations #field_email_name {
3820
    float: left;
3821
    display: block;
3822
    width: 180px;
3823
}
3824
.invitations input {
3825
    width: 170px;
3826
}
3827

    
3828
.invitations #fieldheaders span.description {
3829
    font-size: 0.8em;
3830
    color: #666;
3831
    margin-left: 2px;
3832
}
3833

    
3834
.invitations #fields {
3835
    margin-top: 5px;
3836
}
3837

    
3838
.invitations .add-field-container {
3839
    margin-top: 5px;
3840
}
3841

    
3842
.invitations #errors {
3843
    font-size: 75%;
3844
    color: #f00;
3845
    margin-bottom: 20px;
3846
}
3847

    
3848
#add-name-container {
3849
    margin-bottom: 10px;   
3850
}
3851

    
3852
.add-field-trigger img {
3853
    vertical-align: middle;
3854
}
3855

    
3856
.invitations form {
3857
    margin-bottom: 30px;
3858
}
3859

    
3860
#invsent h3 {
3861
    font-size: 0.8em;
3862
    font-weight: bold;
3863
}
3864

    
3865
#invsent h3 span {
3866
    font-weight: normal;
3867
    font-size: 0.9em;
3868
    margin-right: 5px;
3869
    display: block;
3870
    margin-top: -2px;
3871
}
3872

    
3873
#invsent ul {
3874
    margin-top: 10px;
3875
}
3876

    
3877
#invsent li {
3878
    color: #4085A5;
3879
    font-size: 1.1em;
3880
    padding-top: 0.5em;
3881
    border-bottom: 1px solid #efefef;
3882
    padding-bottom: 0.5em;
3883
    font-size: 0.9em;
3884
    position: relative;
3885
}
3886

    
3887
#invsent li:hover {
3888
    background-color: #efefef;
3889
}
3890

    
3891
#invsent li img {
3892
    position: absolute;
3893
    left:20px;
3894
    bottom: 2px;
3895
}
3896

    
3897
#invsent h3 img {
3898
    float: none;
3899
    vertical-align: middle;
3900
    margin-left: 3px;
3901
}
3902

    
3903
#invsent .name {
3904
    float: left;
3905
    width: 55%;
3906
    padding-left: 20px;
3907
}
3908

    
3909
#invsent .email {
3910
    float: left;
3911
    width: 40%;
3912
}
3913

    
3914
#invsent li.accepted {
3915
    color: #ABD49C;
3916
}
3917

    
3918
#invsent li img {
3919
    margin-left: -20px;
3920
    margin-top: 1px;
3921
}
3922

    
3923
.invitations #field_email_name {
3924
}
3925

    
3926
#invform #fields input {
3927
    margin-right: 10px;
3928
}
3929

    
3930
.machine-now-building {
3931
    padding-right: 15px !important;
3932
    text-align: justify;
3933
}
3934

    
3935
.sub-text {
3936
    padding-top: 15px;
3937
    padding-right: 15px;
3938
    text-align: justify;
3939
    font-style: italic;
3940
    font-size: 0.8em !important;
3941
}
3942

    
3943
#notification-box a {
3944
    color: #4085A5;
3945
}
3946

    
3947
#notification-box .machine-title img {
3948
    vertical-align: middle;
3949
}
3950

    
3951
#notifiaction-box .password-header {
3952
    margin-bottom: 0 !important;
3953
}
3954

    
3955
#notification-box .password-container a {
3956
    color: #fff;
3957
    text-decoration: underline;
3958
}
3959

    
3960
#notification-box .password-container a:hover {
3961
    background-color: #fff;
3962
    color: #4085A5;
3963
}
3964

    
3965
#notification-box .password-container {
3966
    background: #4085A5;
3967
    border: none;
3968
}
3969

    
3970
#notification-box .password-container .password a {
3971
    font-weight: normal !important;
3972
}
3973

    
3974
#notification-box .cmd {
3975
    color: #fff;
3976
    font-family: monospace;
3977
    font-size: 1.6em;
3978
}
3979

    
3980
.machine-container .separator {
3981
    background-color: #B0D1E0;
3982
}
3983

    
3984
#feedback-form .empty-error-msg {
3985
    display: none;
3986
}
3987

    
3988
#feedback-form .data-text {
3989
    display: none;
3990
}
3991

    
3992
#feedback-form .message {
3993
    display: none;
3994
}
3995

    
3996
#feedback-form label {
3997
    display: block;
3998
}
3999

    
4000
#feedback-form label.inline {
4001
    display: inline;
4002
    padding-left: 5px;
4003
}
4004

    
4005
#feedback-form p {
4006
    padding: 1em 0;
4007
    color: #444;
4008
}
4009

    
4010
#feedback-form .description {
4011
    font-style: italic;
4012
    font-size: 0.9em;
4013
    color: #888;
4014
    margin-top: 3px;
4015
}
4016

    
4017
#feedback-form .feedback-text {
4018
    width: 98%;
4019
    height: 100px;
4020
    margin-top: 10px;
4021
    margin-bottom: 10px;
4022
}
4023

    
4024
#feedback-form .submit-data {
4025
    display: none;
4026
}
4027

    
4028
#feedback-form .submit, #invform .submit {
4029
    background-color: #4085A5;
4030
    color: #fff;
4031
    border: none;
4032
    padding: 5px 16px;
4033
    cursor: pointer;
4034
    font-size: 1em;
4035
    position: relative;
4036
}
4037

    
4038
#feedback .submit {
4039
    float: right;
4040
    right: 10px;
4041
    margin-top: 10px;
4042
}
4043

    
4044

    
4045
#feedback-form .submit:hover, #invform .submit:hover {
4046
    background-color: #549FC3;
4047
}
4048

    
4049
.feedback-intro {
4050
    padding-right: 15px !important;
4051
    text-align: justify;
4052
}
4053

    
4054
.popup-body .message {
4055
    padding: 20px 5px;
4056
    display: none;
4057
}
4058

    
4059
.popup-body .loading {
4060
    color: #fff;
4061
}
4062

    
4063
.popup-body .success {
4064
    color: #1F921A;
4065
}
4066

    
4067
.popup-body .errormsg {
4068
    color: #E32424;
4069
}
4070

    
4071

    
4072
.close-msg-box {
4073
    display: block;
4074
    margin-top: 10px;
4075
    cursor: pointer;
4076
    color: #4085A5;
4077
    text-decoration: underline;
4078
}