Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ de44fc6c

History | View | Annotate | Download (74.5 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-key-label {
1553
    width: 110px;
1554
    float: left;
1555
}
1556

    
1557
#metadata-wizard .metadata-label {
1558
    float: left;
1559
    width: 110px;
1560
    padding-left: 5px;
1561
}
1562

    
1563
#metadata-wizard .last {
1564
    width: auto;
1565
    padding-left: 12px;
1566
}
1567

    
1568
#metadata-wizard .metadata-labels {
1569
    margin-bottom: 10px;
1570
    font-weight: bold;
1571
    height: 10px;
1572
    width: 400px;
1573
    color: #4085A5; 
1574
}
1575

    
1576

    
1577
#metadata-wizard .metadata-value {
1578
    width: auto;
1579
}
1580

    
1581
#metadata-wizard .metadata-add-template {
1582
    background-color: #74AEC9;
1583
    width: 350px;
1584
    position: relative;
1585
    overflow: visible;
1586
}
1587

    
1588
#metadata-wizard #add-meta-value {
1589
    margin-left: 25px;
1590
    width: 150px;
1591
}
1592

    
1593
#metadata-wizard button, #add-machines-wizard button {
1594
    font-size: 80%;
1595
    width: 87px;
1596
    float: right;
1597
    background-color: #5599FF;
1598
    border: 0px solid #5599FF;
1599
    padding: 0;
1600
    text-align: center;
1601
    margin-right: 8px;
1602
}
1603

    
1604
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1605
    border-top: 2px solid #4085A5;
1606
    height: 30px;
1607
    margin-left: 25px;
1608
    margin-right: 40px;
1609
    width: 400px;
1610
    font-size: 120%;
1611
}
1612

    
1613
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1614
    float: left;
1615
    height: 23px;
1616
    margin: 10px 0 0 0;
1617
    width: 87px;
1618
    background-color: #4085A5;
1619
    border-color: #4085A5;
1620
}
1621

    
1622
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1623
    background-color: #7DB4CD;
1624
    border-color: #7DB4CD;
1625
}
1626

    
1627
#metadata-wizard button.create, #add-machines-wizard button.add {
1628
    height: 23px;
1629
    margin: 10px 0 0 0;
1630
    background-color: #FF6600;
1631
    border-color: #FF6600;
1632
    padding-left: 1.5em;
1633
    padding-right: 1.5em;
1634
    width: auto;
1635
}
1636

    
1637
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1638
    background-color: #FF9651;
1639
    border-color: #FF9651;
1640
}
1641

    
1642
#metadata-wizard .metadata-pair-template .editbuttons .save {
1643
    background-color: #fff;
1644
}
1645

    
1646
#metadata-wizard .metadata-pair-template .editbuttons .save:hover {
1647
    background-color: #fff !important;
1648
}
1649

    
1650
#metadata-wizard .editbuttons {
1651
    margin-top: 4px;
1652
    margin-right: 0;
1653
}
1654

    
1655
#metadata-wizard .vertical-separator {
1656
    height: 17px;
1657
    width: 1px;
1658
    background-color: #74AEC9;
1659
    float:left;
1660
    margin-right: 10px;
1661
}
1662

    
1663
#metadata-wizard h3, #add-machines-wizard h3 {
1664
    font-weight:normal;
1665
}
1666

    
1667
#metadata-wizard .metadata-edit {
1668
    clear: none;
1669
    cursor: pointer;
1670
    float: right;
1671
    margin-right: 0;
1672
    width: 40px;
1673
    margin-top: -14px;
1674
    display:none;
1675
}
1676

    
1677
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1678
    background-repeat: no-repeat;
1679
    color: transparent;
1680
    font-size: 75%;
1681
    float: left;
1682
    width: 16px;
1683
    height: 16px;
1684
}
1685

    
1686
#metadata-wizard .addbuttons {
1687
    display: block;
1688
    clear: none;
1689
    width: 40px;
1690
    margin-right: -1px !important;
1691
    margin-top: 2px;
1692
    float:right;
1693
    cursor: pointer;
1694
}
1695

    
1696
.metadata-pair-template .editbuttons {
1697
    margin-top: -19px !important;
1698
    margin-right: -2px !important;
1699
}
1700

    
1701
#metadata-wizard .metadata-edit .edit {
1702
    background-image: url("./meta-edit.png");
1703
    margin-left: 2px;
1704
}
1705

    
1706
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1707
    background-image: url("./meta-remove.png");
1708
    margin-left: 4px;
1709
    background-repeat: no-repeat;
1710
    color: transparent;
1711
    font-size: 75%;
1712
    height: 16px;
1713
    width: 16px;
1714
    float: left;
1715
}
1716

    
1717
#metadata-wizard .editbuttons .save {
1718
    background-image: url("./meta-save.png");
1719
    padding-top:0;
1720
}
1721

    
1722
#metadata-wizard .addbuttons .cancel {
1723
    background-image: url("./meta-remove.png");
1724
    margin-left: 3px;
1725
}
1726

    
1727
#metadata-wizard .addbuttons .save {
1728
    background-image: url("./meta-save.png");
1729
    margin-left: 1px;
1730
}
1731

    
1732
#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 {
1733
    background-color: #4287a7;
1734
}
1735

    
1736
#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 {
1737
    background-color: #74AEC9;
1738
}
1739

    
1740
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1741
    width: 16px;
1742
    height: 16px;
1743
    float: left;
1744
    background-repeat: no-repeat;
1745
    color: transparent;
1746
}
1747

    
1748
#metadata-wizard .metatextbox {
1749
    font-size: 90%;
1750
    height: 18px;
1751
    margin-top: -2px;
1752
    color: black;
1753
    width: 150px;
1754
}
1755

    
1756
#metadata-wizard p, #add-machines-wizard p {
1757
    margin-left: 7px;
1758
    width: 200px;
1759
}
1760

    
1761
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1762
    background-color: #666;
1763
    height: 20px;
1764
    margin-top: 17px;
1765
}
1766

    
1767
#metadata-wizard button.remove {
1768
    height: 15px;
1769
    width: 70px;
1770
    background-color: #d35f5f;
1771
    border-color: #d35f5f;
1772
}
1773

    
1774
#metadata-wizard button.edit {
1775
    height: 15px;
1776
    width: 70px;
1777
    background-color: #666;
1778
    border-color: #666;
1779
    margin-top: -12px;
1780
}
1781

    
1782
#metadata-wizard input {
1783
    font-style: italic;
1784
    color: #ccc;
1785
}
1786

    
1787
#metadata-wizard textarea.edit-meta-value {
1788
    font-style: normal;
1789
    text-align: left;
1790
    color: black;
1791
    margin-top: 2px;
1792
    width:200px;
1793
    height: 49px;
1794
}
1795

    
1796
#metadata-wizard input {
1797
    font-size: 80%;
1798
}
1799

    
1800
#metadata-wizard input.key {
1801
    height: 15px;
1802
    left: 460px;
1803
    position: absolute;
1804
    top: 83px;
1805
    width: 230px;
1806
}
1807

    
1808
#metadata-wizard textarea.value {
1809
    width: 267px;
1810
    height: 170px;
1811
    overflow: auto;
1812
}
1813

    
1814
#metadata-wizard .input-enabled {
1815
    color: black;
1816
    text-align: left;
1817
    font-style: normal;
1818
}
1819

    
1820
#metadata-wizard label.meta-value {
1821
    vertical-align: top;
1822
}
1823

    
1824
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1825
    float: left;
1826
    margin: 4px 0 0 25px;
1827
    background-color: #d35f5f;
1828
    border-color: #d35f5f;
1829
}
1830

    
1831
/* metadata dropdown combo */
1832
.meta-key {
1833
    margin-right: 18px;
1834
    float:left;
1835
}
1836
#metadata-wizard .textdropdown-outer {
1837
    float: left;
1838
    overflow: visible;
1839
}
1840

    
1841
#metadata-wizard .textdropdown-btn {
1842
    background: url("./dropdown-arrow.gif") no-repeat scroll center center transparent;
1843
    cursor: pointer;
1844
    float: right;
1845
    left: 90px;
1846
    margin-top: 4px;
1847
    position: absolute;
1848
    width: 20px;
1849
}
1850

    
1851
#metadata-wizard ul {
1852
    border: 1px solid #ccc;
1853
    padding: 0px;
1854
    list-style: none;
1855
    margin: 0px;
1856
    background-color: white;
1857
    height: auto !important;
1858
    padding-left: 5px;
1859
    width: 103px !important;
1860
    position: relative;
1861
}
1862

    
1863
#metadata-wizard ul li {
1864
    clear: both;
1865
    display: block;
1866
    float: right;
1867
    list-style: none outside none;
1868
    margin-bottom: 0 !important;
1869
    margin-left: 0 !important;
1870
    padding-bottom: 2px;
1871
    padding-right: 2px;
1872
    padding-top: 2px;
1873
    width: 100%;
1874
}
1875

    
1876
#metadata-wizard ul li:hover {
1877
    background-color: #efefef;
1878
    cursor: pointer;
1879
}
1880

    
1881
#metadata-wizard .dropdownitem {
1882
    margin-left: 10px;
1883
}
1884

    
1885
#metadata-wizard #txtdropdown:focus {
1886
    outline: 0 none;
1887
}
1888

    
1889
#metadata-wizard #add-meta-key {
1890
    height: 16px;
1891
    margin-left: 5px;
1892
    margin-top: 2px;
1893
    width: 105px !important;
1894
}
1895

    
1896
/* notification box */
1897
#yes-no {
1898
    height: 150px;
1899
    z-index: 9999;
1900
    border-bottom: 5px solid #4085A5;
1901
}
1902

    
1903
#yes-no p, #yes-no button {
1904
    margin-top: 15px;
1905
}
1906

    
1907
#error-success, .notification-box {
1908
    z-index: 9999;
1909
    border-bottom: 5px solid #4085A5;
1910
    min-height: 150px;
1911
    top: 50px !important;
1912
    position: absolute;
1913
}
1914

    
1915
#error-success p, .notification-box p {
1916
    margin-top: 5px;
1917
}
1918

    
1919
.error-report {
1920
    display: none;
1921
}
1922

    
1923
#error-success .error-report {
1924
    position: absolute;
1925
    top: 140px;
1926
    right: 40px;
1927
}
1928

    
1929
.error .error-report {
1930
    display: block;
1931
}
1932

    
1933
#error-success .error-report .errormsg {
1934
    display: none;
1935
}
1936

    
1937
#error-success .error-report .success {
1938
    display: none;
1939
}
1940

    
1941
#error-success .error-report .sending {
1942
    display: none;
1943
}
1944

    
1945
#error-success .error-report .send-btn {
1946
    color: #4085A5;
1947
    text-decoration: underline;
1948
    cursor: pointer;
1949
}
1950

    
1951
#error-success strong, .notification-box strong {
1952
    color: #F49C1A;
1953
}
1954

    
1955
#error-success .close, .notification-box .close {
1956
    background-image: url("./close-popup.png");
1957
    background-repeat: no-repeat;
1958
    cursor: pointer;
1959
    height: 13px;
1960
    position: absolute;
1961
    right: 7px;
1962
    top: 9px;
1963
    width: 13px;
1964
}
1965

    
1966
.popup-header-error {
1967
    background-color: #800000 !important;
1968
}
1969

    
1970
.popup-border-error {
1971
    border-color: #800000 !important;
1972
    width:auto;
1973
}
1974

    
1975
.popup-details-error {
1976
    border: none !important;
1977
}
1978

    
1979
.popup-separator-error {
1980
    margin-bottom: 5px !important;
1981
}
1982

    
1983
#error-success .popup-header, .notification-box .popup-header {
1984
    background-color: #4085A5;
1985
    color: white;
1986
    font-size: 95%;
1987
    font-weight: normal;
1988
    height: 20px;
1989
    margin-left: -16px;
1990
    margin-top: -16px;
1991
    padding-bottom: 2px;
1992
    padding-left: 30px;
1993
    padding-top: 10px;
1994
    width: 482px;
1995
    margin-right:-16px;
1996
}
1997

    
1998

    
1999
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
2000
    background-color: #71c837;
2001
    display: block;
2002
    background-image: url("./save-green.png");
2003
    background-position: right 0;
2004
    background-repeat: no-repeat;
2005
    width: 80px;
2006
    padding: 3px 3px 3px 8px;
2007
    margin-top: -6px;
2008
    font-size: 90% !important;
2009
    margin-left: -11px;
2010
}
2011

    
2012
#error-success .popup-body, .notification-box .popup-body {
2013
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
2014
    margin-left: -16px;
2015
    margin-right: -16px;
2016
    margin-top: 1px;
2017
    min-height: 142px;
2018
    padding-top: 10px;
2019
}
2020

    
2021
#error-success .popup-body-inner, .notification-box .popup-body-inner {
2022
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
2023
    font-size: 80%;
2024
    min-height: 120px;
2025
    margin-left: 20px;
2026
    padding-left: 15px;
2027
    width: 460px;
2028
}
2029

    
2030
#error-success .popup-separator, .notification-box .popup-seperator {
2031
    background-color: #74AEC9;
2032
    height: 1px;
2033
    font-size:1%;
2034
    width: 442px;
2035
    margin-bottom: 30px;
2036
}
2037

    
2038
#error-success .machine-now-building {
2039
    font-size: 95%;
2040
    padding-bottom: 7px;
2041
    padding-top: 10px;
2042
}
2043

    
2044
#error-success.success .machine-now-building {
2045
    padding-bottom: 14px !important;
2046
}
2047

    
2048
#error-success .password-container, .notification-box .password-container {
2049
    width: 430px;
2050
    padding: 5px;
2051
    border: 2px solid #75b54a;
2052
    background-color: #aade87;
2053
}
2054

    
2055
#error-success .password-header, .notification-box .password-header {
2056
    margin-bottom: 5px;
2057
}
2058

    
2059
#error-success .password, .notification-box .password {
2060
    color: #447821;
2061
}
2062

    
2063
#error-success .popup-details, .notification-box .popup-details {
2064
    border: 2px solid #FF7F2A;
2065
    float: left;
2066
    margin-left: 10px;
2067
    padding: 2px;
2068
}
2069

    
2070
#error-success.success .popup-details, .notification-box .popup-details {
2071
    border: none !important;
2072
    float: none !important;
2073
    margin-left: none !important;
2074
    margin-top: 10px;
2075
}
2076

    
2077
#error-success.success .popup-separator, .notification-box .popup-seperator {
2078
    margin-bottom: 14px !important;
2079
}
2080

    
2081
#error-success .write-password, .notification-box .write-password {
2082
    margin-bottom: 5px;
2083
    padding-left: 30px;
2084
}
2085

    
2086
#error-success .write-password-password, .notification-box .write-password-password {
2087
    padding-left: 30px;
2088
    color: #447821;
2089
    display: inline;
2090
    font-size: 110%;
2091
    font-weight: bold;
2092
}
2093

    
2094
#error-success .write-password-details, .notification-box .write-password-details {
2095
    font-size: 75%;
2096
}
2097

    
2098
.more-details {
2099
    display: block;
2100
}
2101

    
2102
.notification-box h3 span.header-box {
2103
    background: transparent;
2104
}
2105

    
2106
.notification-box .machine-now-building {
2107
    padding: 20px 0;
2108
}
2109

    
2110
.notification-box .header-box {
2111
    width: auto !important;
2112
}
2113

    
2114
.notification-box .password {
2115
    text-align: center;
2116
}
2117
.notification-box .password a:hover {
2118
    background-color: #447821;
2119
    color: #fff;
2120
}
2121

    
2122
.notification-box .password a {
2123
    padding: 0.2em;
2124
    text-align: center;
2125
    color: #447821;
2126
    font-weight: bold;
2127
    font-size: 1.2em;
2128
    text-decoration: none;
2129
}
2130

    
2131
.popup-details a:link, .popup-details a:visited{
2132
    color: black;
2133
}
2134

    
2135
/* Confirmation boxes */
2136
div.confirm_single, div.confirm_multiple, div.action_error {
2137
    display: none;
2138
    color: black;
2139
}
2140

    
2141
div.action-container.destroy div.confirm_single {
2142
    bottom: 0;
2143
    position: absolute;
2144
    left: 83px;
2145
}
2146

    
2147
div.terminated div.action-container.destroy div.confirm_single {
2148
    margin-top: 30px;
2149
}
2150

    
2151
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2152
    font-size: 100%;
2153
    cursor: pointer;
2154
    color: black;
2155
    height: 20px !important;
2156
}
2157

    
2158
div.confirm_single {
2159
    float: right;
2160
    margin: -20px -122px 0 0;
2161
}
2162

    
2163
div.confirm_single button {
2164
    border: none;
2165
}
2166

    
2167
div.confirm_single button.yes {
2168
    width: 90px;
2169
    background-color:#FF7F2A;
2170
}
2171

    
2172
div.confirm_single button.yes:hover {
2173
    background-color: #FF9955;
2174
}
2175

    
2176
div.confirm_single button.no {
2177
    width: 20px;
2178
    margin-left:-5px;
2179
    background-color: #FF9955;
2180
    color:#d95d0a;
2181
}
2182

    
2183
div.confirm_single button.no:hover {
2184
    color: white;
2185
}
2186

    
2187
div.confirm_multiple {
2188
    background-color: #4085A5;
2189
    font-size: 75%;
2190
    z-index: 1;
2191
    position: absolute;
2192
    width: 698px;
2193
    height: 28px;
2194
    margin-top: 15px;
2195
}
2196

    
2197
div.confirm_multiple p {
2198
    float: left;
2199
    color: #FF7F2A;
2200
    font-weight: bold;
2201
    margin: 7px 0 0 200px;
2202
}
2203

    
2204
#networks-pane div.confirm_multiple p {
2205
    margin: 7px 0 0 100px;
2206
}
2207

    
2208
div.confirm_multiple button {
2209
    float: right;
2210
    background-color: transparent;
2211
    border: 1px solid #5CA1C0;
2212
    margin: 4px 5px 0 0;
2213
}
2214

    
2215
div.confirm_multiple button.yes {
2216
    border-color: #FF7F2A;
2217
    padding: 0 12px;
2218
}
2219

    
2220
div.confirm_multiple button.yes:hover {
2221
    background-color: #FF7F2A;
2222
}
2223

    
2224
div.confirm_multiple button.no {
2225
    padding: 0px 16px;
2226
}
2227

    
2228
div.confirm_multiple button.no:hover {
2229
    background-color: #5CA1C0;
2230
}
2231

    
2232
div.action_error {
2233
    width: 80px;
2234
    height: 60px;
2235
    padding: 5px;
2236
    margin: -2px 0 0 595px;
2237
    background-color: #4085A5;
2238
    font-size: 75%;
2239
    line-height: 1.5;
2240
    z-index:1;
2241
    color: #FF7F2A;
2242
    position:absolute;
2243
    top: 0px;
2244
}
2245

    
2246
.action_error button {
2247
    width: 80px !important;
2248
    background-color: transparent;
2249
    border: 1px solid;
2250
    padding: 0px;
2251
    border-color: #FF7F2A;
2252
}
2253

    
2254
div.action_error button.details {
2255
    margin: 5px 0 0 0px;
2256
    padding: 0 15px;
2257
}
2258

    
2259
div.action_error button.details:hover {
2260
    background-color: #FF7F2A;
2261
}
2262

    
2263
div#aboutuser{
2264
    float:right;
2265
    clear: both;
2266
    color: #FFFFFF;
2267
    font-size: 75%;
2268
    margin-top: -25px;
2269
}
2270

    
2271
div#user{
2272
    clear: both;
2273
    color: #FFFFFF;
2274
    font-size: 75%;
2275
    margin-top: 38px;
2276
    padding-bottom: 10px;
2277
    z-index: 8000;
2278
    position: absolute;
2279
    right:0;
2280
}
2281

    
2282
div#user a{
2283
    color: #FFFFFF;
2284
    text-decoration: none;
2285
}
2286

    
2287
div#user a.current_lang {
2288
    color: #72ADC8;
2289
}
2290

    
2291
div#user .usermenu {
2292
    float: left;
2293
    cursor: pointer;
2294
    overflow: hidden;
2295
    padding-top: 5px;
2296
    margin-top: -5px;
2297
    position: relative;
2298
}
2299

    
2300
div#user .username {
2301
    display: block;
2302
    margin-right: 10px;
2303
    padding-right: 18px;
2304
    padding-left: 4em;
2305
    height: 20px;
2306
    background: url("./down-arrow-light.png") no-repeat right;
2307
    background-position: right 6px;
2308
    font-weight: normal;
2309
}
2310

    
2311
div#user .hovered {
2312
    background: #599EBD;
2313
    overflow: visible;
2314
    border-bottom: 1px solid #C7DFE9;
2315
}
2316

    
2317
div#user .hovered .username {
2318
    background-image: url("./down-arrow-lighter.png");
2319
}
2320

    
2321
div#user .active {
2322
    background-color: #BED5E0 !important;
2323
}
2324

    
2325
div#user .active .username {
2326
    color: #599EBD;
2327
    background-image: url("./down-arrow-lighter.png");
2328
}
2329

    
2330
div#user .useractions {
2331
    display: none;
2332
}
2333

    
2334
div#user .active .useractions {
2335
    display: block;
2336
    text-align: right;
2337
    color: #4085A5;
2338
    background-color: #D0E3ED;
2339
    margin-top:-1px;
2340
    border-top:1px solid #fff;
2341
    position: relative;
2342
    top: 1px;
2343
    box-shadow: 1px 1px 1px #aaa;
2344
    -moz-box-shadow: 1px 1px 1px #aaa;
2345
    -webkit-box-shadow: 1px 1px 1px #aaa;
2346
    z-index: 2000;
2347
}
2348

    
2349
div#user .useractions li {
2350
    padding: 2px 10px;
2351
    border-bottom: 1px solid #efefef;
2352
    text-align: right;
2353
    display: block;
2354
    background-color: transparent;
2355
}
2356

    
2357
div#user .useractions li a {
2358
    color: #4085A5;
2359
    display: inline-block;
2360
    padding:5px 0;
2361
    padding-left: 30px;
2362
    padding-bottom: 6px;
2363
    background-repeat: no-repeat;
2364
    background-position: center left;
2365
}
2366

    
2367
div#user .useractions li.hovered {
2368
    background-color: #E1EFF6;
2369
}
2370

    
2371
div#user .useractions li.last {
2372
    border-bottom: none;
2373
}
2374

    
2375
div#user .useractions .logout a {
2376
    background-image: url("./icon-logout.png");
2377
}
2378

    
2379
div#user .langmenu {
2380
    float: left;
2381
    border-left: 1px solid #ffffff;
2382
    padding-left: 10px;
2383
    margin-left: -1px;
2384
}
2385

    
2386
div#user .langmenu .sep {
2387
    display: inline-block;
2388
    color: #72ADC8;
2389
}
2390

    
2391
.separator {
2392
    background-color: #74AEC9;
2393
    height: 10px;
2394
    width: 700px;
2395
    font-size: 1px;
2396
    line-height: 0px;
2397
}
2398

    
2399
#disks.separator {
2400
    background-color: #dea842;
2401
}
2402

    
2403
#networks.separator {
2404
    background-color: #6c535d;
2405
}
2406

    
2407
.network-machine h5 {
2408
    margin-bottom: 26px;
2409
    margin-top:0px;
2410
}
2411

    
2412
.machine-container .separator {
2413
    width: 508px;
2414
    height: 1px;
2415
    margin-top: 2px;
2416
    background-color: #5CA1C0;
2417
    margin-left: 13px;
2418
}
2419

    
2420
.machine h5 {
2421
    margin: -3px 0px 4px 0px;
2422
}
2423

    
2424
.machine h5.namecontainer {
2425
    margin-top: 1px;
2426
}
2427

    
2428
.editbuttons {
2429
    display: block;
2430
    clear: none;
2431
    width: 40px;
2432
    margin-right: 32%;
2433
    padding-top: 2px;
2434
    float: right;
2435
    cursor: pointer;
2436
    position: relative;
2437
    z-index: 1000;
2438
}
2439

    
2440
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2441
    background-color: #84b7d0;
2442
}
2443

    
2444
div.editbuttons div.cancel:hover {
2445
    background-image: url("./cancel-onhover.png");
2446
}
2447

    
2448
.editbuttons .cancel, .editbuttons .save {
2449
    background-repeat: no-repeat;
2450
    color: transparent;
2451
    height: 16px;
2452
    width: 16px;
2453
    float: left;
2454
}
2455

    
2456
.editbuttons .cancel {
2457
    background-image: url("./cancel.png");
2458
    margin-left: 3px;
2459
}
2460

    
2461
.editbuttons .save {
2462
    background-image: url("./save.png");
2463
    margin-left: 1px;
2464
}
2465

    
2466
.editbuttons img {
2467
    float:none !important;
2468
    margin: 0px !important;
2469
}
2470

    
2471
.namecontainer {
2472
    height: 18px;
2473
    margin-top: 9px;
2474
}
2475

    
2476
.namecontainer .name {
2477
    position: relative;
2478
}
2479

    
2480
.namecontainer .name .nametextbox {
2481
    z-index: 1000;
2482
}
2483

    
2484
.nametextbox {
2485
    font-size: 95%;
2486
}
2487

    
2488
.large-spinner {
2489
    background: url("./icons/indicators/large/progress.gif");
2490
    margin-left: 298px;
2491
    margin-top: 0px;
2492
    height: 31px;
2493
    width: 49px;
2494
    position: absolute;
2495
    top: 200px;
2496
}
2497

    
2498
#machinesview-icon .large-spinner {
2499
    top: 170px;
2500
}
2501

    
2502
.list .large-spinner {
2503
    margin-top:-30px;
2504
}
2505

    
2506
.single .large-spinner {
2507
    margin-top: 50px;
2508
}
2509

    
2510
div#networks-container .large-spinner {
2511
    margin-top: 50px;
2512
}
2513

    
2514
/* tables in list view */
2515
div.list div.dataTables_filter {
2516
    font-size: 75%;
2517
    display: none;
2518
    margin-bottom: 12px;
2519
}
2520

    
2521
div.list div.dataTables_filter input{
2522
    font-size: 100%;
2523
}
2524

    
2525
.dataTables_wrapper {
2526
    width: 515px;
2527
    padding-bottom: 40px;
2528
}
2529

    
2530
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2531
    padding-right: 15px !important;
2532
}
2533

    
2534
div.list table {
2535
    width: 515px;
2536
    font-size: 75%;
2537
}
2538

    
2539
div.list table tbody td {
2540
    color: #3D3D3D;
2541
    padding:6px;
2542
    vertical-align: middle;
2543
}
2544

    
2545
div.list table thead tr th {
2546
    background-color: #CDE2EC;
2547
    background-image: url(bg.gif);
2548
    background-repeat: no-repeat;
2549
    background-position: right 11px;
2550
    font-weight: normal;
2551
    border: 1px solid transparent;
2552
    border-bottom: none;
2553
    padding: 4px;
2554
    text-align: left;
2555
    vertical-align: middle;
2556
    cursor: pointer;
2557
}
2558

    
2559
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2560
    background-color: #5CA1C0;
2561
}
2562

    
2563
div.list table thead .sorting_asc {
2564
    background-image: url(asc.gif);
2565
}
2566

    
2567
div.list table thead .sorting_desc {
2568
    background-image: url(desc.gif);
2569
}
2570

    
2571
div.list table .selection div.expand-icon {
2572
    background-image: url(asc.gif);
2573
    background-repeat: no-repeat;
2574
    position: relative;
2575
    cursor: pointer;
2576
    width: 15px;
2577
    height: 4px;
2578
    left: 19px;
2579
    top: -11px;
2580
}
2581

    
2582
ul.dropdown-selector {
2583
    background-color: #E6EEEE;
2584
    position: absolute;
2585
    margin-left: 1px;
2586
    display: block;
2587
    top: 255px;
2588
    font-size:75%;
2589
    width:40px;
2590
}
2591

    
2592
ul.dropdown-selector li {
2593
    padding: 4px;
2594
}
2595

    
2596
ul.dropdown-selector li:hover {
2597
    background-color: #5CA1C0;
2598
}
2599

    
2600
ul.dropdown-selector li a{
2601
    color: black;
2602
    text-decoration: none;
2603
}
2604

    
2605
div.list table span.imagetag {
2606
    display: none;
2607
}
2608

    
2609
div.list table thead .vmos {
2610
    width: 20px !important;
2611
    vertical-align:middle;
2612
}
2613

    
2614
div.list table .selection {
2615
    width: 20px !important;
2616
    text-align: left;
2617
    background-image: none;
2618
    padding-left: 6px;
2619
}
2620

    
2621
div.list table thead .vmflavor {
2622
    width: 100px !important;
2623
}
2624

    
2625
/* group column commented out for v0.5
2626
div.list table thead .vmgroup {
2627
    width: 40px !important;
2628
}
2629
*/
2630

    
2631
div.list table thead .vmstatus {
2632
    width: 50px !important;
2633
}
2634

    
2635
div.list table thead .vmname {
2636
    width: 110px !important;
2637
}
2638

    
2639
.spinner, .action-indicator {
2640
    clear: right;
2641
    float:right !important;
2642
    margin: 10px 6px 0 15px !important;
2643
}
2644
.action-indicator {
2645
    margin-right: 18px !important;
2646
}
2647

    
2648
.wave {
2649
    clear: right;
2650
    float:right !important;
2651
    margin: 10px 15px 0 15px !important;
2652
}
2653

    
2654
#networks-pane .spinner {
2655
    margin-top: 18px !important;
2656
}
2657

    
2658
.hidden {
2659
    display:none;
2660
}
2661

    
2662
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2663
    display:block !important;
2664
}
2665

    
2666
.action_error .message, .action_error .code {
2667
    display: none;
2668
}
2669

    
2670
.fixed {
2671
    bottom: 0;
2672
    position: fixed !important;
2673
}
2674

    
2675
/* Networks */
2676
#networks-pane {
2677
    background-color: transparent;
2678
    color: black;
2679
    margin-left: 1px;
2680
    margin-right: 0;
2681
}
2682

    
2683
#networkscreate {
2684
    color: black;
2685
    background-color: #FF7F2A;
2686
    cursor: pointer;
2687
    padding: 7px 24px;
2688
    text-decoration: none;
2689
}
2690

    
2691
#networkscreate:hover {
2692
    background-color: #FF9955;
2693
}
2694

    
2695
#networks-pane #beforecreate {
2696
    margin-left: -13px;
2697
}
2698

    
2699
#networks-container {
2700
    margin-top: 10px;
2701
    min-height: 270px;
2702
}
2703

    
2704
#networks-createcontainer {
2705
    position: absolute;
2706
    top: 155px;
2707
}
2708

    
2709
#networks-pane .public-networks {
2710
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2711
    margin: 0 0 18px;
2712
    padding: 70px 0 15px 35px;
2713
}
2714

    
2715
#networks-pane .private-networks {
2716
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2717
    padding: 15px 20px 20px 35px;
2718
}
2719

    
2720
#public-template, #private-template, #public-machine-template, #private-machine-template {
2721
    display:none;
2722
}
2723

    
2724
div.network a.action-network-add {
2725
    display: none;
2726
}
2727

    
2728
div.network a.action-network-destroy {
2729
    margin-top: 32px !important;
2730
    width: 50px;
2731
    display: none;
2732
}
2733

    
2734
div.network {
2735
    clear: both;
2736
    min-height: 65px;
2737
    margin: 5px 0 0 -35px;
2738
    padding: 3px 20px 0;
2739
    width: 480px;
2740
    position: relative;
2741
}
2742

    
2743
#private-template {
2744
    margin: 2px 0 0 -30px;
2745
}
2746

    
2747
div.network-placeholder {
2748
    margin-left: 33px;
2749
}
2750

    
2751
div.private-networks div.network-placeholder {
2752
    border-left: 3px solid #FF7F2A;
2753
}
2754

    
2755
div.network-cable {
2756
    border-left: 3px solid #FF7F2A;
2757
    float: left;
2758
    margin-left: -40px;
2759
    margin-top: -45px;
2760
    height: 185px;
2761
    overflow: hidden;
2762
}
2763

    
2764
.first div.network-cable {
2765
    height:143px;
2766
    margin-top:-6px;
2767
    position: relative;
2768
}
2769

    
2770
div.network-contents div.machines-list div.first {
2771
    margin-top:0;
2772
}
2773

    
2774
.last div.network-cable {
2775
    height:85px;
2776
}
2777

    
2778
div.firewall-cable {
2779
    border-left: 3px solid #FF7F2A;
2780
    float: left;
2781
    margin-left: -100px;
2782
    margin-top: -20px;
2783
    height: 110px;
2784
}
2785

    
2786
.last div.firewall-cable {
2787
    display:none;
2788
}
2789

    
2790
div.network a:hover {
2791
    text-decoration: underline;
2792
    cursor: pointer;
2793
}
2794

    
2795
#networks-container .name {
2796
    font-size: 75%;
2797
}
2798

    
2799
div.network-machines, div.firewall {
2800
    font-size: 75%;
2801
    margin-left: 70px;
2802
}
2803

    
2804
div.firewall {
2805
    margin-left: 60px;
2806
    margin-bottom: 3px;
2807
}
2808

    
2809
div.machines-header, div.firewall-header {
2810
    background-color: #A1C8DB;
2811
    color: white;
2812
    cursor: pointer;
2813
    height: 17px;
2814
    width: 103px;
2815
}
2816

    
2817
 div.private-networks div.machines-header {
2818
    margin-top: -5px;
2819
}
2820

    
2821
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2822
    background-color: #84b7d0;
2823
}
2824

    
2825
div.network-machine:hover div.firewall-header {
2826
    background-color: #5CA1C0;
2827
}
2828

    
2829
div.machines-label, div.firewall-label {
2830
    width: 100%;
2831
    padding-bottom:1px;
2832
    padding-left: 3px;
2833
}
2834

    
2835
div.firewall-label.darker {
2836
    background-color: #4085a5;
2837
}
2838

    
2839
.state {
2840
    float: right;
2841
    position: absolute;
2842
    right: 10px;
2843
    top: 40px;
2844
    font-size: 75%;
2845
}
2846

    
2847
div.network div.actions {
2848
    float: right;
2849
    font-size: 75%;
2850
    font-weight: normal;
2851
    height: 70px;
2852
    width: 100px;
2853
    position: absolute;
2854
    right: -100px;
2855
    top: 0;
2856
}
2857

    
2858
div.network div.machine-actions {
2859
    text-decoration: none;
2860
    float: right;
2861
    width: 100px;
2862
    margin: -7px -100px 0 0;
2863
    font-weight: normal;
2864
    font-size: 75%;
2865
}
2866

    
2867
div.network div.actions a, div.network div.machine-actions a {
2868
    text-decoration: none;
2869
    height: 15px;
2870
    color: black;
2871
    visibility: hidden;
2872
    display: block;
2873
}
2874

    
2875
div.network div.actions a {
2876
    margin: 4px 0 0 8px;
2877
}
2878

    
2879
div.network div.machine-actions a {
2880
    margin: 8px 0 0 8px;
2881
}
2882

    
2883
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2884
    display: block;
2885
    background-color:#A1C8DB;
2886
    width: 200px;
2887
    opacity: 0.8;
2888
    filter: alpha(opacity = 80);
2889
}
2890

    
2891
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2892
    visibility: visible;
2893
}
2894

    
2895
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2896
    color: #FF7F2A !important;
2897
    width: 50px !important;
2898
}
2899

    
2900
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2901
    background-color: transparent;
2902
}
2903

    
2904
div.network div.display a {
2905
    visibility: visible;
2906
}
2907

    
2908
div.network-machine div.machine-actions a.action-details {
2909
    margin-top: 7px;
2910
}
2911

    
2912
div.network:hover {
2913
    background-color: #A1C8DB !important;
2914
}
2915

    
2916
.network-logos {
2917
    float:left;
2918
    padding-right: 10px;
2919
}
2920

    
2921
.network-logos:hover {
2922
    cursor: pointer;
2923
}
2924

    
2925
.state div {
2926
    text-align: right;
2927
    margin: 4px 1px -4px;
2928
}
2929

    
2930
.public-networks .state div {
2931
    margin-top: 4px;
2932
}
2933

    
2934
.private-networks .state div {
2935
    margin-top: 9px;
2936
    margin-bottom: -12px;
2937
}
2938

    
2939
.public-networks .name-div {
2940
    margin-top:-7px;
2941
    margin-bottom: 23px;
2942
}
2943

    
2944
div.indicator {
2945
    clear: none;
2946
    float: right;
2947
    height: 11px;
2948
    margin: 3px -1px;
2949
    width: 10px;
2950
}
2951

    
2952
#private-networks {
2953
    margin-top: 20px;
2954
}
2955

    
2956
.private-networks .editbuttons {
2957
    margin-right: 22%;
2958
}
2959

    
2960
.private-networks div.confirm_single {
2961
    margin: 45px -219px -5px 0;
2962
    font-size: 80%;
2963
}
2964

    
2965
.private-networks .network-machine div.confirm_single {
2966
    margin: 0 -199px 0 0;
2967
}
2968

    
2969
.private-networks .state {
2970
    top: 35px;
2971
}
2972

    
2973
.private-networks div.machines-list {
2974
    padding-top: 3px;
2975
}
2976

    
2977
span.rename-network, span.configure {
2978
    background-repeat: no-repeat;
2979
    color: transparent;
2980
    font-size: 75%;
2981
    font-weight: normal;
2982
    margin-left: 10px;
2983
    padding-left: 10px;
2984
    text-align: left;
2985
}
2986

    
2987
span.rename-network {
2988
    cursor: pointer;
2989
}
2990

    
2991
div.name-div:hover span.rename-network {
2992
    color: #3D3D3D;
2993
    margin-top: 0.4em;
2994
    background-image: url(./pencil.png);
2995
    background-position: 0 3px;
2996
}
2997

    
2998
div.network:hover a.rename {
2999
    color: #3d3d3d;
3000
}
3001

    
3002
.network-separator {
3003
    background-color: #5CA1C0;
3004
    height: 1px;
3005
    margin: 2px 0 0 -5px;
3006
    width: 480px;
3007
    font-size: 1%;
3008
    line-height: 1px;
3009
}
3010

    
3011
.network-contents {
3012
    margin-left: -4px;
3013
    width: 504px;
3014
    clear: both;
3015
    padding-bottom: 7px;
3016
}
3017

    
3018
.network-machine .state div {
3019
    text-align: left;
3020
}
3021

    
3022
.network-machine {
3023
    margin-left: 35px;
3024
    padding-bottom: 5px;
3025
    padding-left: 5px;
3026
    padding-top: 5px;
3027
    margin-top: 5px;
3028
}
3029

    
3030
.network-machine .logo {
3031
    float:left;
3032
    padding-right: 10px;
3033
    position:relative;
3034
}
3035

    
3036
#networks-container .machine-name {
3037
    text-decoration: none !important;
3038
    margin-bottom: 10px;
3039
    color: #000000;
3040
    margin-top: -4px;
3041
}
3042

    
3043
.private-networks .separator {
3044
    background-color: #5CA1C0;
3045
    height: 1px;
3046
    margin: 3px 0 -2px -10px;
3047
    width: 485px;
3048
}
3049

    
3050
.network-machine .state {
3051
    margin-right: 18px;
3052
}
3053

    
3054
.network-machine .state .status {
3055
    margin-bottom: 4px;
3056
}
3057

    
3058
.machine-name .name {
3059
    margin-top: -10px !important;
3060
}
3061

    
3062
.machine-name .namecontainer {
3063
    line-height: 18px;
3064
    margin-bottom: 20px;
3065
}
3066

    
3067
div.network-machine:hover {
3068
    background-color: #84B7D0;
3069
}
3070

    
3071
.machines {
3072
    width: 416px;
3073
    margin-bottom: -8px;
3074
    margin-top: 10px;
3075
}
3076

    
3077
div.empty-network-slot {
3078
    height: 60px;
3079
}
3080

    
3081
div.network-remove-machine, div.network-add-machine {
3082
    background-color: #FB822F;
3083
    color: #bc4b00;
3084
    width:90px;
3085
    height:18px;
3086
    float:left;
3087
    margin:40px 0 0 -100px;
3088
}
3089

    
3090
span.remove-icon {
3091
    font-size: 80%;
3092
    margin-left: 15px;
3093
}
3094

    
3095
div.add-icon {
3096
    margin-left: 15px;
3097
    margin-top: -3px;
3098
    cursor: pointer;
3099
}
3100

    
3101
span.remove-icon:hover, span.add-icon:hover {
3102
    cursor:pointer;
3103
    color: #fff;
3104
}
3105

    
3106
div.network-add-machine {
3107
    margin:43px 0 0 -3px;
3108
}
3109

    
3110
.firewall-on {
3111
    color: #42E342;
3112
}
3113

    
3114
.firewall-off {
3115
    color: #F82E2E;
3116
}
3117

    
3118
.firewall-content {
3119
    color: black;
3120
    font-size: 60%;
3121
    margin-left: 60px;
3122
    height: 55px;
3123
    margin-bottom: 17px;
3124
}
3125

    
3126
.firewall-content .checkbox-legends {
3127
    vertical-align: text-top;
3128
}
3129

    
3130
.checkbox-legends a {
3131
    color: black;
3132
    text-decoration: underline;
3133
    font-size: 100%;
3134
}
3135

    
3136
h5.machine-connect {
3137
    font-size: 75%;
3138
    margin-bottom: 3px;
3139
}
3140

    
3141
.machine-connect span {
3142
    text-decoration: underline;
3143
}
3144

    
3145
h5.machine-connect span:hover {
3146
    cursor: pointer;
3147
}
3148

    
3149
.firewall-apply {
3150
    background-color: #4085a5;
3151
    border: medium none;
3152
    float: right;
3153
    font-size: 105%;
3154
    height: 18px;
3155
    margin-right: 5px;
3156
    margin-top: 3px;
3157
    width: 75px;
3158
}
3159

    
3160
.firewall-apply:hover {
3161
    background-color:#5CA1C0;
3162
}
3163

    
3164
.name-div {
3165
    margin: -9px 0 30px 70px;
3166
}
3167

    
3168
.machine-name-div {
3169
    margin-bottom: 20px;
3170
    margin-left: 60px;
3171
}
3172

    
3173
div.reboot-dialog {
3174
    display: none;
3175
    color: black;
3176
    background-color: #4085A5;
3177
    font-size: 75%;
3178
    margin-top: 15px;
3179
    width: 698px;
3180
    z-index: 1;
3181
}
3182

    
3183
div#reboot-machine-template, div.reboot-machine-entry {
3184
    display: none;
3185
    padding: 0 0 10px 35px;
3186
    width: 300px;
3187
}
3188

    
3189
div.reboot-dialog p {
3190
    color: #FFFFFF;
3191
    padding: 10px 0 10px 10px;
3192
}
3193

    
3194
div.reboot-dialog button {
3195
    float:right;
3196
    border: 1px solid #FF7F2A;
3197
    background-color: transparent;
3198
    font-size:100%;
3199
}
3200

    
3201
div.reboot-dialog button:hover {
3202
    background-color: #FF7F2A;
3203
}
3204

    
3205
div.reboot-dialog button.reboot-all {
3206
    margin: -30px 35px 0 0;
3207
}
3208

    
3209
div.reboot-dialog button.reboot-single {
3210
    color: black;
3211
    margin-top: -20px;
3212
}
3213

    
3214
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3215
    display:none;
3216
}
3217

    
3218
div.reboot-dialog button.details {
3219
    border-color: #800000;
3220
    margin-top: -20px;
3221
}
3222

    
3223
div.reboot-dialog button.details:hover {
3224
    background-color: #800000;
3225
}
3226

    
3227
/* Metadata */
3228
.info-content {
3229
    clear: both;
3230
    height: 95px;
3231
    width: 512px;
3232
}
3233

    
3234
.metadata-container {
3235
    line-height: 12px;
3236
    height: 85px;
3237
    background-color: #84b7d0;
3238
}
3239

    
3240
.metadata-column {
3241
    border-right: 1px solid #5CA1C0;
3242
    color: black;
3243
    float: left;
3244
    font-size: 60%;
3245
    margin-top: 3px;
3246
    height: 70px;
3247
    padding-bottom: 5px;
3248
}
3249

    
3250
.vm-stats {
3251
    padding-left: 10px;
3252
    padding-right: 5px;
3253
    width: 220px;
3254
}
3255

    
3256
.vm-stats div.stat-content {
3257
    height: 18px;
3258
}
3259

    
3260
.vm-stats div.stat-content img {
3261
    margin: 0;
3262
}
3263

    
3264
.vm-stats div.stat-content img.busy {
3265
    margin-left: 95px;
3266
}
3267

    
3268
.vm-stats div.stat-error {
3269
    display:none;
3270
}
3271

    
3272
.vm-details {
3273
    width: 130px;
3274
    margin-left:17px;
3275
}
3276

    
3277
.vm-metadata {
3278
    padding-left: 10px;
3279
    width: 100px;
3280
    border: none;
3281
}
3282

    
3283
.metadata-left {
3284
    float:left;
3285
    width: 30px;
3286
    height: 60px;
3287
}
3288

    
3289
.metadata-right {
3290
    width: 73px;
3291
    float:left;
3292
    height: 35px;
3293
    padding-left: 5px;
3294
    position:relative;
3295
    overflow:hidden;
3296
}
3297

    
3298
.metadata-right .items {
3299
    position:absolute;
3300
    height:20000em;
3301
}
3302

    
3303
.metadata-keys-container {
3304
    height: 60px;
3305
    float: left;
3306
}
3307

    
3308
.single .metadata-keys-container {
3309
    float: none;
3310
    height: 50px;
3311
}
3312

    
3313
.single a.manage-metadata {
3314
    font-size: 80%;
3315
    margin-left:4px;
3316
    color: #383838;
3317
}
3318

    
3319
a.manage-metadata, a.stats-report {
3320
    font-size: 100%;
3321
    color: black;
3322
    margin-left:17px;
3323
    text-decoration: underline;
3324
}
3325

    
3326
a.stats-report {
3327
    margin: 15px 0  0 80px;
3328
}
3329

    
3330
div.machine a.manage-metadata:hover {
3331
    background-color: transparent;
3332
}
3333

    
3334
.metadata-actions, .scrollable {
3335
    padding-left: 5px;
3336
}
3337

    
3338
.singe .metadata-actions, .single .scrollable {
3339
    font-size: 80%;
3340
    line-height: 12px;
3341
    width: 300px;
3342
}
3343

    
3344
.metadata-actions .prev,  .metadata-actions .next{
3345
    float:left;
3346
    width:29px;
3347
    height:6px;
3348
    cursor: pointer;
3349
}
3350

    
3351
.metadata-actions .prev {
3352
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3353
}
3354

    
3355
.metadata-actions .next {
3356
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3357
}
3358

    
3359
.scrollable {
3360
    position:relative;
3361
    overflow:hidden;
3362
    height: 35px;
3363
    width: 60px;
3364
    margin-bottom:2px;
3365
}
3366

    
3367
.scrollable .items {
3368
    position:absolute;
3369
    height:20000em;
3370
}
3371

    
3372
/* single view */
3373
.single {
3374
    color: #383838;
3375
    margin-top: -76px;
3376
    padding-bottom: 10px;
3377
    width: 679px;
3378
}
3379

    
3380
.single .column1 {
3381
    float: left;
3382
    margin: 1px 0 25px 17px;
3383
    width: 140px;
3384
}
3385

    
3386
.single .column1 .state {
3387
    float: left;
3388
    margin-left: 4px;
3389
    padding-bottom: 6px;
3390
    padding-top: 3px;
3391
    position: relative;
3392
    right: 0;
3393
    text-align: center;
3394
    width: 126px;
3395
}
3396

    
3397
.single .column1 .state-label {
3398
    padding-top: 5px;
3399
}
3400

    
3401
.single .column1 .indicators {
3402
    margin-right: 38px !important;
3403
}
3404

    
3405
.single div.connect-arrow {
3406
    margin-left: -17px;
3407
}
3408

    
3409
.single div.connect-border {
3410
    margin-left: -29px;
3411
}
3412

    
3413
.single .single-actions {
3414
    padding-bottom: 4px;
3415
    padding-left: 15px;
3416
    width: 69px;
3417
    float: left;
3418
}
3419

    
3420
.single div.single-action {
3421
    font-size: 80%;
3422
    line-height: 18px;
3423
    text-decoration: none;
3424
    cursor: pointer;
3425
}
3426

    
3427
.single div.single-action:hover {
3428
    background-color:#A1C8DB;
3429
    width: 180px;
3430
    opacity: 0.8;
3431
    filter: alpha(opacity = 80);
3432
}
3433

    
3434
.single div.single-action.selected {
3435
    color: #FF7F2A !important;
3436
    width: 50px !important;
3437
}
3438

    
3439
.single div.single-action.selected:hover {
3440
    background-color:transparent;
3441
}
3442

    
3443
.single div.confirm_single {
3444
    font-size: 80%;
3445
    margin: -19px -115px 0 0;
3446
}
3447

    
3448
.single div.action-container.destroy div.confirm_single {
3449
    margin: -18px -116px 0 0;
3450
    position: relative;
3451
    left: 0px;
3452
}
3453

    
3454
.single div.confirm_single button.no {
3455
    margin-left: -5px;
3456
}
3457

    
3458
.single .spinner, .single .action-indicator {
3459
    margin: 15px 45px 0 0px !important
3460
}
3461

    
3462
.single .action-indicator {
3463
    margin-right: 55px !important;
3464
}
3465

    
3466
.single .wave {
3467
    margin: 15px 53px 0 0px !important
3468
}
3469

    
3470
.single div.action_error {
3471
    margin: 2px 0px 0 605px !important;
3472
    position: relative;
3473
}
3474

    
3475
.single .column2 {
3476
    background-color: #A1C8DB;
3477
    float: left;
3478
    font-size: 78%;
3479
    line-height: 17px;
3480
    margin: 0 0 10px 5px;
3481
    width: 358px;
3482
}
3483

    
3484
.single .column2 .machine-labels {
3485
    float: left;
3486
    font-size: 90%;
3487
    margin-left: 10px;
3488
    margin-top: 10px;
3489
    width: 125px;
3490
}
3491

    
3492
.single .column2 .machine-details {
3493
    float: right;
3494
    text-align: right;
3495
    font-size: 90%;
3496
    width: 210px;
3497
    margin-right: 10px;
3498
    margin-top: 10px;
3499
}
3500

    
3501
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3502
    margin-bottom: 13px;
3503
}
3504

    
3505
.single .tags {
3506
    clear: both;
3507
    margin-bottom: 10px;
3508
    margin-left: 10px;
3509
}
3510

    
3511
.single .tags-label {
3512
    float: left;
3513
    padding: 0 5px;
3514
    width: 30px;
3515
}
3516

    
3517
.single .tags-down-arrow {
3518
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3519
    float: left;
3520
    height: 16px;
3521
    width: 9px;
3522
}
3523

    
3524
.single .tags-header {
3525
    background-color: #84B7D0;
3526
    cursor: pointer;
3527
    height: 16px;
3528
    width: 55px;
3529
}
3530

    
3531
.single .tags-content {
3532
    background-color: #84B7D0;
3533
    clear: both;
3534
    height: 65px;
3535
    padding-bottom: 5px;
3536
    padding-top: 5px;
3537
    width: 300px;
3538
}
3539

    
3540
.single .column3 {
3541
    background-color: #A1C8DB;
3542
    margin-left: 535px;
3543
    position: absolute;
3544
    top: 280px;
3545
    width: 150px;
3546
    overflow: visible;
3547
    padding-bottom: 10px;
3548
}
3549

    
3550
.single .column3 .controls {
3551
    font-size: 80%;
3552
    height: 20px;
3553
    padding-left: 7px;
3554
    padding-right: 7px;
3555
    padding-top: 8px;
3556
}
3557

    
3558
.single .column3 .previous {
3559
    float:left;
3560
    width: 72px;
3561
}
3562

    
3563
.single .column3 .next {
3564
    float: right;
3565
    text-align: center;
3566
    width: 60px;
3567
}
3568

    
3569
.single .column3 .next-label {
3570
    float: right;
3571
    margin-right: 3px;
3572
    margin-top: -2px;
3573
}
3574

    
3575
.single .column3 .next-arrow {
3576
    float: right;
3577
    height: 18px;
3578
    width: 10px;
3579
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3580
}
3581

    
3582
.single .column3 .prev-label {
3583
    float: left;
3584
    margin-left: 3px;
3585
    margin-top: -2px;
3586
}
3587

    
3588
.single .column3 .prev-arrow {
3589
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3590
    float: left;
3591
    height: 18px;
3592
    width: 10px;
3593
}
3594

    
3595
.single .column3 .separator {
3596
    width: 135px;
3597
    height: 1px;
3598
    background-color: #84B7D0;
3599
    margin: 0 0 0 7px;
3600
    clear: both;
3601
}
3602

    
3603
.single .column3 .servers {
3604
    font-size: 80%;
3605
    line-height: 15px;
3606
    padding-top: 10px;
3607
    text-align: right;
3608
    overflow: visible;
3609
    position: relative;
3610
}
3611

    
3612
.single .column3 .server-name {
3613
    margin-left: 10px;
3614
    padding-right: 5px;
3615
    cursor: pointer;
3616
    padding-bottom: 2px;
3617
}
3618

    
3619
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3620
    background-color: #84B7D0;
3621
    color: white;
3622
    opacity: 0.8;
3623
    padding-left: 9px;
3624
    text-align: left;
3625
    width: 160px;
3626
    filter: alpha(opacity = 80);
3627
    position: relative;
3628
    width: 126px;
3629
}
3630

    
3631
.single .toggler {
3632
    color: #FFFFFF;
3633
    float: right;
3634
    font-size: 140%;
3635
}
3636

    
3637
.single .cpu-usage, .single .network-usage {
3638
    text-align: center;
3639
    padding-top: 15px;
3640
    margin-bottom: 5px;
3641
    font-size: 90%;
3642
    font-weight: bold;
3643
}
3644

    
3645
.single .cpu-graph, .single .network-graph {
3646
    margin-left: 20px;
3647
    margin-bottom:30px;
3648
    width: 660px;
3649
}
3650

    
3651
.single div.lower img.stats {
3652
    margin-left: 82px;
3653
}
3654

    
3655
.single .single-image {
3656
    width: 126px;
3657
    height: 136px;
3658
    margin-bottom: 10px;
3659
    margin-left: 4px;
3660
    background-image: url("./icons/machines/large/unknown-sprite.png");
3661
    background-repeat: no-repeat;
3662
    cursor: pointer;
3663
}
3664

    
3665
.single .single-image-state1 {
3666
    background-position: 0px 0;
3667
}
3668

    
3669
.single .single-image-state3 {
3670
    background-position: -252px 0;
3671
}
3672

    
3673
.single .single-image-state4 {
3674
    background-position: -378px 0;
3675
}
3676

    
3677
.single .single-image-state2 {
3678
    background-position: -126px 0;
3679
}
3680

    
3681
.single .column3 .previous, .single .column3 .next {
3682
    cursor: pointer;
3683
    background-color: #84B7D0;
3684
    color: white;
3685
    font-size: 100%;
3686
    height: 15px;
3687
    padding-top: 2px;
3688
}
3689

    
3690
.single .column3 .disabled {
3691
    opacity: 0.5;
3692
    filter: alpha(opacity = 50);
3693
}
3694

    
3695
.single div.lower {
3696
    clear:both;
3697
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3698
    width: 700px;
3699
    padding-bottom: 15px;
3700
}
3701

    
3702
.single div.upper {
3703
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3704
    margin-bottom: 10px;
3705
    min-height: 310px;
3706
    overflow: visible;
3707
    padding-top: 60px;
3708
    width: 700px;
3709
}
3710

    
3711
/* console css */
3712
.console-header-logo {
3713
    padding-top: 17px;
3714
    margin-left: 30px;
3715
    position: fixed;
3716
}
3717

    
3718
#console-header div.help-text {
3719
    font-size: 75%;
3720
    font-weight:bold;
3721
    color:#FFFFFF;
3722
    float:left;
3723
    position: absolute;
3724
    margin: 45px 0 0 2px;
3725
}
3726

    
3727
div.console-container {
3728
    margin: 0 0em;
3729
    height: auto;
3730
}
3731

    
3732
#wrapper.console {
3733
    width: auto;
3734
}
3735

    
3736
.console-info {
3737
    font-size:80%;
3738
    color: white;
3739
    float:left;
3740
    position:relative;
3741
    margin: 15px 0 0 480px;
3742
}
3743

    
3744
applet {
3745
    width:100%;
3746
    height:100%;
3747
}
3748

    
3749
div.console-footer {
3750
    /* this is for version 0.5*/
3751
    display: none;
3752
}
3753

    
3754
.console-footer #footer-text{
3755
    float:left;
3756
    left: auto;
3757
    margin-left:30px;
3758
}
3759

    
3760
/* add network wizard (see also #wizard for shared classes) */
3761
#networks-wizard .header {
3762
    background-color: #4085A5;
3763
    height: 56px;
3764
}
3765

    
3766
#networks-wizard div.name-input {
3767
    margin: 75px 0 0 55px;
3768
}
3769

    
3770
#networks-wizard input {
3771
    border: 1px solid #CCCCCC;
3772
    color: #445566;
3773
    letter-spacing: 1px;
3774
    width: 170px;
3775
}
3776

    
3777
#networks-wizard span.help {
3778
    font-style: italic;
3779
    font-size: 80%;
3780
    margin-left: 10px;
3781
}
3782

    
3783
#networks-wizard .separator-end {
3784
    background-color: #387693;
3785
    height: 6px;
3786
    width: 479px;
3787
    margin-left: -13px;
3788
    margin-top: 22px;
3789
}
3790

    
3791
.red {
3792
    color: red;
3793
}
3794

    
3795
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3796
#add-machines-wizard span.machine-name {
3797
    margin-left: 4px;
3798
    vertical-align: text-top;
3799
}
3800

    
3801
#add-machines-wizard img.list-logo {
3802
    margin: 2px 1px 1px;
3803
}
3804

    
3805
.css-panes {
3806
    clear: both;
3807
}
3808

    
3809
.last .firewall-content {
3810
    margin-bottom:13px;
3811
}
3812

    
3813
#pub .last .network-separator {
3814
    display:none;
3815
}
3816

    
3817
.public-networks .empty-network-slot {
3818
    display: none;
3819
}
3820

    
3821
/* float clearing for all browsers except the devil one */
3822
.clearfix:after{
3823
  clear: both;
3824
  content: ".";
3825
  display: block;
3826
  height: 0;
3827
  visibility: hidden;
3828
  font-size: 0;
3829
}
3830

    
3831
#machinesview-list div.action-indicator {
3832
    margin:0 !important;
3833
    float: none !important;
3834
}
3835

    
3836
div.action-indicator {
3837
    width: 15px;
3838
    height: 20px;
3839
    background-repeat: no-repeat;
3840
    background-position: 0 0;
3841
}
3842

    
3843
tbody.machines div.action-indicator {
3844
    position: relative;
3845
    top: -2px;
3846
}
3847
div.state .destroy, tbody.machines .destroy {
3848
    background-image: url("./icons/actions/medium/destroy.png");
3849
}
3850
div.state .console, tbody.machines .console {
3851
    background-image: url("./icons/actions/medium/console.png");
3852
}
3853
div.state .start, tbody.machines .start {
3854
    background-image: url("./icons/actions/medium/start.png");
3855
}
3856
div.state .reboot, tbody.machines .reboot {
3857
    background-image: url("./icons/actions/medium/reboot.png");
3858
}
3859
div.state .shutdown, tbody.machines .shutdown {
3860
    background-image: url("./icons/actions/medium/shutdown.png");
3861
}
3862

    
3863

    
3864
.no-invitations-left {
3865
    margin-bottom: 20px;
3866
    color: #E44848;
3867
}
3868

    
3869
.invitations #field_name_name, .invitations #field_email_name {
3870
    float: left;
3871
    display: block;
3872
    width: 180px;
3873
}
3874
.invitations input {
3875
    width: 170px;
3876
}
3877

    
3878
.invitations #fieldheaders span.description {
3879
    font-size: 0.8em;
3880
    color: #666;
3881
    margin-left: 2px;
3882
}
3883

    
3884
.invitations #fields {
3885
    margin-top: 5px;
3886
}
3887

    
3888
.invitations .add-field-container {
3889
    margin-top: 5px;
3890
}
3891

    
3892
.invitations #errors {
3893
    font-size: 75%;
3894
    color: #f00;
3895
    margin-bottom: 20px;
3896
}
3897

    
3898
#add-name-container {
3899
    margin-bottom: 10px;   
3900
}
3901

    
3902
.add-field-trigger img {
3903
    vertical-align: middle;
3904
}
3905

    
3906
.invitations form {
3907
    margin-bottom: 30px;
3908
}
3909

    
3910
#invsent h3 {
3911
    font-size: 0.8em;
3912
    font-weight: bold;
3913
}
3914

    
3915
#invsent h3 span {
3916
    font-weight: normal;
3917
    font-size: 0.9em;
3918
    margin-right: 5px;
3919
    display: block;
3920
    margin-top: -2px;
3921
}
3922

    
3923
#invsent ul {
3924
    margin-top: 10px;
3925
}
3926

    
3927
#invsent li {
3928
    color: #4085A5;
3929
    font-size: 1.1em;
3930
    padding-top: 0.5em;
3931
    border-bottom: 1px solid #efefef;
3932
    padding-bottom: 0.5em;
3933
    font-size: 0.9em;
3934
    position: relative;
3935
}
3936

    
3937
#invsent li:hover {
3938
    background-color: #efefef;
3939
}
3940

    
3941
#invsent li img {
3942
    position: absolute;
3943
    left:20px;
3944
    bottom: 2px;
3945
}
3946

    
3947
#invsent h3 img {
3948
    float: none;
3949
    vertical-align: middle;
3950
    margin-left: 3px;
3951
}
3952

    
3953
#invsent .name {
3954
    float: left;
3955
    width: 55%;
3956
    padding-left: 20px;
3957
}
3958

    
3959
#invsent .email {
3960
    float: left;
3961
    width: 40%;
3962
}
3963

    
3964
#invsent li.accepted {
3965
    color: #ABD49C;
3966
}
3967

    
3968
#invsent li img {
3969
    margin-left: -20px;
3970
    margin-top: 1px;
3971
}
3972

    
3973
.invitations #field_email_name {
3974
}
3975

    
3976
#invform #fields input {
3977
    margin-right: 10px;
3978
}
3979

    
3980
.machine-now-building {
3981
    padding-right: 15px !important;
3982
    text-align: justify;
3983
}
3984

    
3985
.sub-text {
3986
    padding-top: 15px;
3987
    padding-right: 15px;
3988
    text-align: justify;
3989
    font-style: italic;
3990
    font-size: 0.8em !important;
3991
}
3992

    
3993
#notification-box a {
3994
    color: #4085A5;
3995
}
3996

    
3997
#notification-box .machine-title img {
3998
    vertical-align: middle;
3999
}
4000

    
4001
#notifiaction-box .password-header {
4002
    margin-bottom: 0 !important;
4003
}
4004

    
4005
#notification-box .password-container a {
4006
    color: #fff;
4007
    text-decoration: underline;
4008
}
4009

    
4010
#notification-box .password-container a:hover {
4011
    background-color: #fff;
4012
    color: #4085A5;
4013
}
4014

    
4015
#notification-box .password-container {
4016
    background: #4085A5;
4017
    border: none;
4018
}
4019

    
4020
#notification-box .password-container .password a {
4021
    font-weight: normal !important;
4022
}
4023

    
4024
#notification-box .cmd {
4025
    color: #fff;
4026
    font-family: monospace;
4027
    font-size: 1.6em;
4028
}
4029

    
4030
.machine-container .separator {
4031
    background-color: #B0D1E0;
4032
}
4033

    
4034
#feedback-form .empty-error-msg {
4035
    display: none;
4036
}
4037

    
4038
#feedback-form .data-text {
4039
    display: none;
4040
}
4041

    
4042
#feedback-form .message {
4043
    display: none;
4044
}
4045

    
4046
#feedback-form label {
4047
    display: block;
4048
    font-size: 0.85em;
4049
    font-weight: bold;
4050
}
4051

    
4052
#feedback-form label.inline {
4053
    display: inline;
4054
    padding-left: 5px;
4055
}
4056

    
4057
#feedback-form p {
4058
    padding: 1em 0;
4059
    color: #444;
4060
    margin-bottom: 10px;
4061
}
4062

    
4063
#feedback-form .description {
4064
    font-style: italic;
4065
    font-size: 0.9em;
4066
    color: #888;
4067
}
4068

    
4069
#feedback-form .feedback-text {
4070
    width: 98%;
4071
    height: 100px;
4072
    margin-top: 10px;
4073
    margin-bottom: 10px;
4074
}
4075

    
4076
#feedback-form .submit-data {
4077
    display: none;
4078
}
4079

    
4080
#feedback-form .submit, #invform .submit {
4081
    background-color: #4085A5;
4082
    color: #fff;
4083
    border: none;
4084
    padding: 5px 16px;
4085
    cursor: pointer;
4086
    font-size: 1em;
4087
    position: relative;
4088
}
4089

    
4090
#feedback .submit {
4091
    float: right;
4092
    right: 10px;
4093
    margin-top: 10px;
4094
}
4095

    
4096

    
4097
#feedback-form .submit:hover, #invform .submit:hover {
4098
    background-color: #549FC3;
4099
}
4100

    
4101
.feedback-intro {
4102
    padding-right: 15px !important;
4103
    text-align: justify;
4104
}
4105

    
4106
.popup-body .message {
4107
    padding: 20px 5px;
4108
    display: none;
4109
}
4110

    
4111
.popup-body .loading {
4112
    color: #fff;
4113
}
4114

    
4115
.popup-body .success {
4116
    color: #1F921A;
4117
}
4118

    
4119
.popup-body .errormsg {
4120
    color: #E32424;
4121
}
4122

    
4123

    
4124
.close-msg-box {
4125
    display: block;
4126
    margin-top: 10px;
4127
    cursor: pointer;
4128
    color: #4085A5;
4129
    text-decoration: underline;
4130
}
4131

    
4132
.ip-version-label {
4133
    font-size: 0.8em;
4134
    padding: 0.3em;
4135
    background-color: #C4DDE9;
4136
    color: #000;
4137
    margin-top: -2px;
4138
    vertical-align: middle;
4139
}
4140

    
4141
.console .ip-version-label {
4142
    margin: 0 5px;
4143
}
4144

    
4145
.ipv6-text, .ipv4-text {
4146
    font-size: 0.9em;
4147
    cursor: pointer;
4148
}
4149

    
4150
.tooltip {
4151
    background-color: #C4DDE9;
4152
    color: #000;
4153
    font-size: 0.7em;
4154
    padding: 0.2em 0.5em;
4155
    border: 1px solid #888;
4156
}
4157

    
4158
/*404 and 500 pages*/
4159

    
4160
.error_page {
4161
    position: relative;
4162
    top: 40px;
4163
    padding-bottom: 140px !important;
4164
}
4165

    
4166
.error_page h1 {
4167
    font-weight: normal;
4168
}
4169

    
4170
.error_page .msg_header {
4171
    margin: 0px;
4172
    font-size: 10em;
4173
    position: absolute;
4174
    left: -5px;
4175
    top: 0px;
4176
    color: #4085A5;
4177
    font-family: arial, verdana;
4178
}
4179

    
4180
.error_page p.error_desc {
4181
    color: #fff;
4182
    font-size: 0.8em;
4183
}
4184

    
4185
.error_page {
4186
    padding-right: 50px !important;
4187
    padding-left: 100px !important;
4188
}
4189

    
4190
.error_page .error_content {
4191
    padding-left: 150px;
4192
    padding-top: 97px;
4193
}
4194

    
4195
.error_page .error_content .links, .info_content .links {
4196
    margin-top: 10px;
4197
    margin-left: 20px;
4198
}
4199

    
4200
.error_page .http_error .code {
4201
    letter-spacing: -10px;
4202
    font-size: 9em;
4203
}
4204

    
4205
.error_page .http_error .msg {
4206
    letter-spacing: -1px;
4207
    font-size: 2em;
4208
}
4209

    
4210
.error_page .http_error {
4211
    position: absolute;
4212
    right: 0px;
4213
    bottom: 0px;
4214
    color: #75B3D0;
4215
    line-height: 1em;
4216
}
4217

    
4218
.error_page .error_content a, .info_content .links a {
4219
    color: #4085A5;
4220
    font-weight: bold;
4221
    margin-right: 10px;
4222
    font-size: 0.9em;
4223
}
4224

    
4225
.error_body #container, .info_body #container {
4226
    background-position: right 200px;
4227
}
4228

    
4229
.info_page h1 {
4230
    color: #4085A5;
4231
    font-size: 2em;
4232
    font-weight: normal;
4233
}
4234

    
4235
.info_page p {
4236
    color: #ffffff;
4237
    margin: 1em 0;
4238
}
4239

    
4240
.info_body p a, .error_body p a{
4241
    color: #4085A5;
4242
    text-decoration: underline;
4243
}
4244

    
4245
.error_404 .http_error .code {
4246
    letter-spacing: -7px;
4247
}