Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ e50e01b5

History | View | Annotate | Download (62.1 kB)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
800
div.action-container {
801
    overflow: visible;
802
}
803

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

    
810
div.machine:hover .actions a {
811
    color: black;
812
    display: block;
813
}
814

    
815
div.machine div.display a{
816
    color: black;
817
    display: block;
818
}
819

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
935
.starting-state .indicator1, .starting-state .indicator3 {
936
    background-color: #447821;
937
}
938

    
939
.starting-state .indicator2, .starting-state .indicator4 {
940
    background-color: #666666;
941
}
942

    
943
.shutting-state .indicator1, .shutting-state .indicator3 {
944
    background-color: #666666;
945
}
946

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

    
951
.destroying-state .indicator1, .destroying-state .indicator3 {
952
    background-color: #800000;
953
}
954

    
955
.destroying-state .indicator2, .destroying-state .indicator4 {
956
    background-color: #666666;
957
}
958

    
959
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
960
    background-color: #800000;
961
}
962

    
963
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
964
    background-color: #5CA1C0;
965
}
966

    
967
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
968
    background-color: #5CA1C0;
969
}
970

    
971
.terminated {
972
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
973
    margin-bottom: 17px;
974
    margin-top: 15px;
975
    padding-bottom: 15px;
976
    padding-top: 15px;
977
    width: 699px;
978
}
979

    
980
span.rename {
981
    background-repeat: no-repeat;
982
    color: transparent;
983
    font-size: 75%;
984
    font-weight: normal;
985
    margin-left: 10px;
986
    padding-left: 10px;
987
    text-align: left;
988
    cursor: pointer;
989
}
990

    
991
div.name:hover span.rename {
992
    color: #3D3D3D;
993
    margin-top: 0.4em;
994
    background-image: url(./pencil.png);
995
    background-position: 0 3px;
996
}
997

    
998
.machine div.info {
999
    float:left;
1000
    margin-bottom: 8px;
1001
    margin-top:3px;
1002
}
1003

    
1004
.machine div.info div.info-header {
1005
    background-color: #A1C8DB;
1006
    color: white;
1007
    height: 17px;
1008
    width: 50px;
1009
    cursor: pointer;
1010
}
1011

    
1012
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1013
    background-color: #84b7d0;
1014
}
1015

    
1016
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1017
    background-color: #5CA1C0;
1018
}
1019

    
1020
.machine div.info div.info-label {
1021
    font-size: 75%;
1022
    height:16px;
1023
    width: 30px;
1024
    padding: 1px 0 0 5px;
1025
}
1026

    
1027
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1028
    position: relative;
1029
    width:15px;
1030
    height:17px;
1031
    margin-top: -11px;
1032
    margin-left: 37px;
1033
}
1034

    
1035
div.network div.toggler {
1036
    margin-left: 87px;
1037
}
1038

    
1039
.machine div.info div.down {
1040
    background: url(/static/down-arrow.png) no-repeat scroll 1px 1px;
1041
}
1042

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

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

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

    
1055
.machine div.info div.up {
1056
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1057
}
1058

    
1059
.single div.tags div.up {
1060
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1061
}
1062

    
1063
.network div.network-machines div.up {
1064
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1065
}
1066

    
1067
.network div.network-machine div.firewall div.up {
1068
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1069
}
1070

    
1071
button {
1072
    background-color: #87AADE;
1073
    border: 1px solid #87AADE;
1074
    color: #FFFFFF;
1075
    cursor: pointer;
1076
    height: 23px;
1077
    width: 120px;
1078
}
1079

    
1080
button.next {
1081
    background-color: #4085A5;
1082
    border-color: #4085A5;
1083
    text-align: right;
1084
}
1085

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

    
1091
button.prev {
1092
    background-color: #4085A5;
1093
    border-color: #4085A5;
1094
    margin-left: -1px;
1095
    text-align: left;
1096
}
1097

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

    
1103
.image-logo {
1104
    float: left;
1105
    margin-right: 1em;
1106
    margin-left: 1.5em;
1107
    margin-top: 4px;
1108
}
1109

    
1110
div.image {
1111
    clear: both;
1112
    display: block;
1113
    margin-bottom: 3px;
1114
    margin-top: 3px;
1115
    padding: 5px;
1116
}
1117

    
1118
div#view-select {
1119
    float: right;
1120
    clear: both;
1121
    color: white;
1122
    position: relative;
1123
    right: 5px;
1124
    top: -35px;
1125
    display: none;
1126
    z-index: 1000;
1127
}
1128

    
1129
a#standard, a#list, a#single {
1130
    text-decoration: none;
1131
    height: 15px;
1132
    width: 17px;
1133
    padding: 1px 8px 2px 9px;
1134
}
1135

    
1136
div#view-select a {
1137
    color:#5f8dd3;
1138
}
1139

    
1140
a#list:hover {
1141
    background: #5f8dd3;
1142
}
1143

    
1144
a#standard:active, a#list:active {
1145
    color:white;
1146
}
1147

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

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

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

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

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

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

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

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

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

    
1184
#machinetype {
1185
    background-color: #CDE2EC;
1186
    height: 25px;
1187
    margin-bottom: 0px !important;
1188
}
1189

    
1190
div.machine-type {
1191
    float: left;
1192
    margin: 4px 18px 20px;
1193
}
1194

    
1195
.machine-type .active {
1196
    color: #FFFFFF
1197
}
1198

    
1199
#machinesview {
1200
    min-height: 270px;
1201
    margin-top: 40px;
1202
}
1203

    
1204
.list#machinesview {
1205
    margin-left: -20px;
1206
    display:none;
1207
}
1208

    
1209
#machinesview-list.list {
1210
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
1211
    margin-top: -76px;
1212
    padding-left: 15px;
1213
    padding-top: 76px;
1214
    min-height: 270px;
1215
}
1216

    
1217
#machinesview_content {
1218
    display:none;
1219
}
1220

    
1221
.list-machines {
1222
    min-width: 515px;
1223
}
1224

    
1225
#emptymachineslist {
1226
    background-color: #6BA9C6;
1227
    color: #A0A0A0;
1228
    display: none;
1229
    margin-top: -45px;
1230
    padding: 65px 150px 35px;
1231
    text-align: justify;
1232
}
1233

    
1234
#welcomeheader {
1235
    color:white;
1236
    text-align: center;
1237
}
1238

    
1239
.welcomebody {
1240
    color: white;
1241
    font-size:80%;
1242
}
1243

    
1244
.welcomebody a {
1245
    color: white;
1246
}
1247

    
1248
.welcomefooter {
1249
    color: white;
1250
    font-size:60%;
1251
}
1252

    
1253
.welcomefooter a {
1254
    color: white;
1255
}
1256

    
1257
.emptycreatecontainer {
1258
    margin-left: 430px !important;
1259
    position: absolute;
1260
    margin-top: 5px !important;
1261
    width: 180px;
1262
    background-color: #CCCCCC;
1263
    padding: 5px;
1264
    padding-left: 10px;
1265
}
1266

    
1267
.emptycreate {
1268
    margin: 20px 10px 5px 0 !important;
1269
}
1270

    
1271
#createbody {
1272
    display:none;
1273
    font-size: 80%;
1274
}
1275

    
1276
div.list label img {
1277
    margin: 5px 5px -3px 0;
1278
}
1279

    
1280
div.list label {
1281
    color: #3D3D3D;
1282
    font-size: 75%;
1283
}
1284

    
1285
div.list .state {
1286
    margin-top: 7px;
1287
    margin-right: 10px;
1288
}
1289

    
1290
div.list table tbody {
1291
    margin-top: 8px;
1292
}
1293

    
1294
div.list .stopped {
1295
    margin-top: 8px;
1296
}
1297

    
1298
/* root element for tabs  */
1299
#wizard ul.tabs {
1300
    margin-right: -1px;
1301
    float: right;
1302
}
1303

    
1304
#wizard div.panes {
1305
    height: 247px;
1306
    clear:both;
1307
    margin-top: 3px;
1308
}
1309

    
1310
.typebody {
1311
    font-size: 80%;
1312
    font-weight: normal;
1313
    position: relative;
1314
    top: -3px;
1315
}
1316

    
1317
.typehover {
1318
    color: #FFFFFF;
1319
}
1320

    
1321
#label-name {
1322
    margin-top: 10px;
1323
}
1324

    
1325
/* single tab */
1326
#wizard ul.tabs li {
1327
    margin-bottom: 0;
1328
    list-style-type:none;
1329
    float: left;
1330
}
1331

    
1332
/* link inside the tab. uses a background image */
1333
#wizard ul.tabs a {
1334
    display:block;
1335
    padding: 0.2em 0.5em 0.1em 0.4em;
1336
    text-decoration:none;
1337
    color: #FFFFFF;
1338
    position:relative;
1339
    top:1px;
1340
    outline:0;
1341
    background-color: transparent;
1342
    text-align: center;
1343
    width: 100px;
1344
    white-space: nowrap;
1345
    height: 17px;
1346
}
1347

    
1348
#wizard ul.tabs a:hover {
1349
    color: #FFFFFF;
1350
    background-color:#4085A5;
1351
}
1352

    
1353
/* selected tab */
1354
#wizard ul.tabs a.current {
1355
    color: white;
1356
    background-color: #7DB4CD;
1357
    cursor: default;
1358
}
1359

    
1360
#wizard #standard-images {
1361
    background-color: #ECF4F8;
1362
}
1363

    
1364
div.list div.actions {
1365
    display: none;
1366
    clear: left;
1367
    float: right;
1368
    margin-right: 15px;
1369
    margin-top: 37px;
1370
    text-align: right;
1371
    width: 120px;
1372
}
1373

    
1374
div.list div.actions a {
1375
    clear: left;
1376
    color: #A1A1A1;
1377
    display: block;
1378
    font-size:75%;
1379
    margin-bottom: 2px;
1380
}
1381

    
1382
div.list div.actions a:hover {
1383
    background-color: transparent;
1384
}
1385

    
1386
div.list div.actions a.enabled {
1387
    color: #3D3D3D;
1388
}
1389

    
1390
div.list div.actions a.enabled:hover{
1391
    cursor: pointer;
1392
    color: black;
1393
    text-decoration: underline;
1394
}
1395

    
1396
div.list div.actions a.selected {
1397
    color: #FF7F2A !important;
1398
}
1399

    
1400
input.machine {
1401
    width: 13px;
1402
    height: 13px;
1403
    top: -1px;
1404
    overflow: hidden;
1405
}
1406

    
1407
.description-container {
1408
    display: inline-block;
1409
    position: relative;
1410
    width: 300px;
1411
}
1412

    
1413
#wizard .button-container {
1414
    height: 20px;
1415
}
1416

    
1417
/* metadata editing and add machines to network overlays */
1418
#metadata-wizard, #add-machines-wizard {
1419
    position:absolute !important;
1420
    overflow:hidden;
1421
    width:450px;
1422
    display:none;
1423
    background-color:#fff;
1424
    text-align:left;
1425
    font-size: 80%;
1426
    border-bottom: 5px solid #4085A5;
1427
}
1428

    
1429
#metadata-wizard .close, #add-machines-wizard .close  {
1430
    background-image: url("./close-popup.png");
1431
    cursor: pointer;
1432
    height: 13px;
1433
    position: absolute;
1434
    right: 7px;
1435
    top: 9px;
1436
    width: 13px;
1437
}
1438

    
1439
#metadata-wizard .popup-header, #add-machines-wizard .popup-header {
1440
    background-color: #4085A5;
1441
    color: white;
1442
    font-size: 95%;
1443
    font-weight: normal;
1444
    height: 20px;
1445
    margin-left: -16px;
1446
    margin-top: -16px;
1447
    padding-bottom: 2px;
1448
    padding-left: 30px;
1449
    padding-top: 10px;
1450
    width: 482px;
1451
}
1452

    
1453
#metadata-wizard .popup-title, #metadata-wizard .machine-name, #add-machines-wizard .popup-title, #add-machines-wizard .network-name {
1454
    font-size: 120%;
1455
    padding-bottom: 7px;
1456
    padding-top: 10px;
1457
    float:left;
1458
}
1459

    
1460
#metadata-wizard .popup-title {
1461
    padding-bottom: 0px;
1462
    font-size: 120%;
1463
}
1464

    
1465
#metadata-wizard .name-container {
1466
    display: inline-block;
1467
    clear: both;
1468
}
1469

    
1470
#add-machines-wizard .network-name {
1471
    padding-left: 5px;
1472
}
1473

    
1474
#metadata-wizard .popup-body, #add-machines-wizard .popup-body {
1475
    background-image: url("./meta-wiz-bg.png");
1476
    margin-left: -16px;
1477
    margin-right: -16px;
1478
    margin-top: 1px;
1479
    height: 250px;
1480
    overflow-y: auto;
1481
    overflow-x: hidden;
1482
}
1483

    
1484
#metadata-wizard .popup-body-inner, #add-machines-wizard .popup-body-inner {
1485
    background: url("./meta-wiz-inner-bg.png") repeat-x scroll 0 0 transparent;
1486
    font-size: 80%;
1487
    height: 180px;
1488
    margin-left: 25px;
1489
    margin-top: 10px;
1490
    padding-left: 15px;
1491
    width: 420px;
1492
}
1493

    
1494
#metadata-wizard .popup-separator, #add-machines-wizard .popup-separator {
1495
    background-color: #74AEC9;
1496
    height: 1px;
1497
    width: 402px;
1498
    margin-bottom: 30px;
1499
    clear: left;
1500
    font-size: 1px;
1501
}
1502

    
1503
#metadata-wizard .metadata-pair-template {
1504
    height: 15px;
1505
    padding-top: 2px;
1506
    width: 350px;
1507
}
1508

    
1509
#metadata-wizard div.metadata-pair-template:hover {
1510
    background-color: #74AEC9;
1511
}
1512

    
1513
#metadata-wizard .metadata-container, #add-machines-wizard .machines-container {
1514
    background-color: transparent;
1515
    float: left;
1516
    width: 400px;
1517
    font-size: 120%;
1518
}
1519

    
1520
#metadata-wizard .machine-icon {
1521
    float: left;
1522
    padding-left: 10px;
1523
    padding-right: 3px;
1524
    padding-top: 7px;
1525
}
1526

    
1527
#metadata-wizard .large-spinner, #add-machines-wizard .large-spinner {
1528
    display: block;
1529
    margin: 50px 0 0 185px;
1530
}
1531

    
1532
#metadata-wizard .metadata-key {
1533
    float: left;
1534
    width: 110px;
1535
    padding-left: 5px;
1536
}
1537

    
1538
#metadata-wizard .metadata-value {
1539
    width: auto;
1540
}
1541

    
1542
#metadata-wizard .metadata-add-template {
1543
    background-color: #74AEC9;
1544
    width: 350px;
1545
    position: relative;
1546
    overflow: visible;
1547
}
1548

    
1549
#metadata-wizard #add-meta-value {
1550
    margin-left: 25px;
1551
    width: 150px;
1552
}
1553

    
1554
#metadata-wizard button, #add-machines-wizard button {
1555
    font-size: 80%;
1556
    width: 87px;
1557
    float: right;
1558
    background-color: #5599FF;
1559
    border: 0px solid #5599FF;
1560
    padding: 0;
1561
    text-align: center;
1562
    margin-right: 8px;
1563
}
1564

    
1565
#metadata-wizard .buttons, #add-machines-wizard .buttons {
1566
    border-top: 2px solid #4085A5;
1567
    height: 30px;
1568
    margin-left: 25px;
1569
    margin-right: 40px;
1570
    width: 400px;
1571
    font-size: 120%;
1572
}
1573

    
1574
#metadata-wizard button.save, #add-machines-wizard button.cancel {
1575
    float: left;
1576
    height: 23px;
1577
    margin: 10px 0 0 0;
1578
    width: 87px;
1579
    background-color: #4085A5;
1580
    border-color: #4085A5;
1581
}
1582

    
1583
#metadata-wizard button.save:hover, #add-machines-wizard button.cancel:hover {
1584
    background-color: #7DB4CD;
1585
    border-color: #7DB4CD;
1586
}
1587

    
1588
#metadata-wizard button.create, #add-machines-wizard button.add {
1589
    height: 23px;
1590
    margin: 10px 0 0 0;
1591
    background-color: #FF6600;
1592
    border-color: #FF6600;
1593
}
1594

    
1595
#metadata-wizard button.create:hover, #add-machines-wizard button.add:hover {
1596
    background-color: #FF9651;
1597
    border-color: #FF9651;
1598
}
1599

    
1600
#metadata-wizard .editbuttons {
1601
    margin-top: 4px;
1602
    margin-right: 0;
1603
}
1604

    
1605
#metadata-wizard .vertical-separator {
1606
    height: 17px;
1607
    width: 1px;
1608
    background-color: #74AEC9;
1609
    float:left;
1610
    margin-right: 10px;
1611
}
1612

    
1613
#metadata-wizard h3, #add-machines-wizard h3 {
1614
    font-weight:normal;
1615
}
1616

    
1617
#metadata-wizard .metadata-edit {
1618
    clear: none;
1619
    cursor: pointer;
1620
    float: right;
1621
    margin-right: 0;
1622
    width: 40px;
1623
    margin-top: -14px;
1624
    display:none;
1625
}
1626

    
1627
#metadata-wizard .metadata-edit .edit, #metadata-wizard .metadata-edit .remove {
1628
    background-repeat: no-repeat;
1629
    color: transparent;
1630
    font-size: 75%;
1631
    float: left;
1632
    width: 16px;
1633
    height: 16px;
1634
}
1635

    
1636
#metadata-wizard .addbuttons {
1637
    display: block;
1638
    clear: none;
1639
    width: 40px;
1640
    margin-right: -1px !important;
1641
    margin-top: 2px;
1642
    float:right;
1643
    cursor: pointer;
1644
}
1645

    
1646
.metadata-pair-template .editbuttons {
1647
    margin-top: -19px !important;
1648
    margin-right: -2px !important;
1649
}
1650

    
1651
#metadata-wizard .metadata-edit .edit {
1652
    background-image: url("./meta-edit.png");
1653
    margin-left: 2px;
1654
}
1655

    
1656
#metadata-wizard .metadata-edit .remove, #metadata-wizard .editbuttons .remove {
1657
    background-image: url("./meta-remove.png");
1658
    margin-left: 4px;
1659
    background-repeat: no-repeat;
1660
    color: transparent;
1661
    font-size: 75%;
1662
    height: 16px;
1663
    width: 16px;
1664
    float: left;
1665
}
1666

    
1667
#metadata-wizard .editbuttons .save {
1668
    background-image: url("./meta-save.png");
1669
    padding-top:0;
1670
}
1671

    
1672
#metadata-wizard .addbuttons .cancel {
1673
    background-image: url("./meta-remove.png");
1674
    margin-left: 3px;
1675
}
1676

    
1677
#metadata-wizard .addbuttons .save {
1678
    background-image: url("./meta-save.png");
1679
    margin-left: 1px;
1680
}
1681

    
1682
#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 {
1683
    background-color: #4287a7;
1684
}
1685

    
1686
#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 {
1687
    background-color: #74AEC9;
1688
}
1689

    
1690
#metadata-wizard .addbuttons .cancel, #metadata-wizard .addbuttons .save {
1691
    width: 16px;
1692
    height: 16px;
1693
    float: left;
1694
    background-repeat: no-repeat;
1695
    color: transparent;
1696
}
1697

    
1698
#metadata-wizard .metatextbox {
1699
    font-size: 90%;
1700
    height: 18px;
1701
    margin-top: -2px;
1702
    color: black;
1703
    width: 150px;
1704
}
1705

    
1706
#metadata-wizard p, #add-machines-wizard p {
1707
    margin-left: 7px;
1708
    width: 200px;
1709
}
1710

    
1711
#metadata-wizard div.bottomruler, #add-machines-wizard div.bottomruler {
1712
    background-color: #666;
1713
    height: 20px;
1714
    margin-top: 17px;
1715
}
1716

    
1717
#metadata-wizard button.remove {
1718
    height: 15px;
1719
    width: 70px;
1720
    background-color: #d35f5f;
1721
    border-color: #d35f5f;
1722
}
1723

    
1724
#metadata-wizard button.edit {
1725
    height: 15px;
1726
    width: 70px;
1727
    background-color: #666;
1728
    border-color: #666;
1729
    margin-top: -12px;
1730
}
1731

    
1732
#metadata-wizard input {
1733
    font-style: italic;
1734
    color: #ccc;
1735
}
1736

    
1737
#metadata-wizard textarea.edit-meta-value {
1738
    font-style: normal;
1739
    text-align: left;
1740
    color: black;
1741
    margin-top: 2px;
1742
    width:200px;
1743
    height: 49px;
1744
}
1745

    
1746
#metadata-wizard input {
1747
    font-size: 80%;
1748
}
1749

    
1750
#metadata-wizard input.key {
1751
    height: 15px;
1752
    left: 460px;
1753
    position: absolute;
1754
    top: 83px;
1755
    width: 230px;
1756
}
1757

    
1758
#metadata-wizard textarea.value {
1759
    width: 267px;
1760
    height: 170px;
1761
    overflow: auto;
1762
}
1763

    
1764
#metadata-wizard .input-enabled {
1765
    color: black;
1766
    text-align: left;
1767
    font-style: normal;
1768
}
1769

    
1770
#metadata-wizard label.meta-value {
1771
    vertical-align: top;
1772
}
1773

    
1774
#metadata-wizard button.cancel, #metadata-wizard #edit-dialog button.close {
1775
    float: left;
1776
    margin: 4px 0 0 25px;
1777
    background-color: #d35f5f;
1778
    border-color: #d35f5f;
1779
}
1780

    
1781
/* metadata dropdown combo */
1782
.meta-key {
1783
    margin-right: 18px;
1784
    float:left;
1785
}
1786
#metadata-wizard .textdropdown-outer {
1787
    float: left;
1788
    overflow: visible;
1789
}
1790

    
1791
#metadata-wizard .textdropdown-btn {
1792
    background: url("./dropdown-arrow.gif") no-repeat scroll center center transparent;
1793
    cursor: pointer;
1794
    float: right;
1795
    left: 90px;
1796
    margin-top: 4px;
1797
    position: absolute;
1798
    width: 20px;
1799
}
1800

    
1801
#metadata-wizard ul {
1802
    border: 1px solid #ccc;
1803
    padding: 0px;
1804
    list-style: none;
1805
    margin: 0px;
1806
    background-color: white;
1807
    height: auto !important;
1808
    padding-left: 5px;
1809
    width: 103px !important;
1810
    position: relative;
1811
}
1812

    
1813
#metadata-wizard ul li {
1814
    clear: both;
1815
    display: block;
1816
    float: right;
1817
    list-style: none outside none;
1818
    margin-bottom: 0 !important;
1819
    margin-left: 0 !important;
1820
    padding-bottom: 2px;
1821
    padding-right: 2px;
1822
    padding-top: 2px;
1823
    width: 100%;
1824
}
1825

    
1826
#metadata-wizard ul li:hover {
1827
    background-color: #efefef;
1828
    cursor: pointer;
1829
}
1830

    
1831
#metadata-wizard .dropdownitem {
1832
    margin-left: 10px;
1833
}
1834

    
1835
#metadata-wizard #txtdropdown:focus {
1836
    outline: 0 none;
1837
}
1838

    
1839
#metadata-wizard #add-meta-key {
1840
    height: 16px;
1841
    margin-left: 5px;
1842
    margin-top: 2px;
1843
    width: 105px !important;
1844
}
1845

    
1846
/* notification box */
1847
#yes-no {
1848
    height: 150px;
1849
    z-index: 9999;
1850
    border-bottom: 5px solid #4085A5;
1851
}
1852

    
1853
#yes-no p, #yes-no button {
1854
    margin-top: 15px;
1855
}
1856

    
1857
#error-success {
1858
    z-index: 9999;
1859
    border-bottom: 5px solid #4085A5;
1860
    min-height: 150px;
1861
    top: 120px !important;
1862
    position: absolute !important;
1863
}
1864

    
1865
#error-success p {
1866
    margin-top: 5px;
1867
}
1868

    
1869
#error-success strong {
1870
    color: #F49C1A;
1871
}
1872

    
1873
#error-success .close {
1874
    background-image: url("./close-popup.png");
1875
    cursor: pointer;
1876
    height: 13px;
1877
    position: absolute;
1878
    right: 7px;
1879
    top: 9px;
1880
    width: 13px;
1881
}
1882

    
1883
.popup-header-error {
1884
    background-color: #800000 !important;
1885
}
1886

    
1887
.popup-border-error {
1888
    border-color: #800000 !important;
1889
}
1890

    
1891
.popup-details-error {
1892
    border: none !important;
1893
}
1894

    
1895
.popup-separator-error {
1896
    margin-bottom: 5px !important;
1897
}
1898

    
1899
#error-success .popup-header {
1900
    background-color: #4085A5;
1901
    color: white;
1902
    font-size: 95%;
1903
    font-weight: normal;
1904
    height: 20px;
1905
    margin-left: -16px;
1906
    margin-top: -16px;
1907
    padding-bottom: 2px;
1908
    padding-left: 30px;
1909
    padding-top: 10px;
1910
    width: 482px;
1911
}
1912

    
1913

    
1914
#error-success.success h3 span.header-box{
1915
    background-color: #71c837;
1916
    display: block;
1917
    background-image: url("./save-green.png");
1918
    background-position: right 0;
1919
    background-repeat: no-repeat;
1920
    width: 80px;
1921
    padding: 3px 3px 3px 8px;
1922
    margin-top: -6px;
1923
    font-size: 90% !important;
1924
    margin-left: -11px;
1925
}
1926

    
1927
#error-success .popup-body {
1928
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
1929
    margin-left: -16px;
1930
    margin-right: -16px;
1931
    margin-top: 1px;
1932
    min-height: 142px;
1933
    padding-top: 10px;
1934
}
1935

    
1936
#error-success .popup-body-inner {
1937
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1938
    font-size: 80%;
1939
    min-height: 120px;
1940
    margin-left: 20px;
1941
    padding-left: 15px;
1942
    width: 460px;
1943
}
1944

    
1945
#error-success .popup-separator {
1946
    background-color: #74AEC9;
1947
    height: 1px;
1948
    font-size:1%;
1949
    width: 442px;
1950
    margin-bottom: 30px;
1951
}
1952

    
1953
#error-success .machine-now-building {
1954
    font-size: 95%;
1955
    padding-bottom: 7px;
1956
    padding-top: 10px;
1957
}
1958

    
1959
#error-success.success .machine-now-building {
1960
    padding-bottom: 14px !important;
1961
}
1962

    
1963
#error-success .password-container {
1964
    width: 430px;
1965
    padding: 5px;
1966
    border: 2px solid #75b54a;
1967
    background-color: #aade87;
1968
}
1969

    
1970
#error-success .password-header {
1971
    margin-bottom: 5px;
1972
}
1973

    
1974
#error-success .password {
1975
    color: #447821;
1976
}
1977

    
1978
#error-success .popup-details {
1979
    border: 2px solid #FF7F2A;
1980
    float: left;
1981
    margin-left: 10px;
1982
    padding: 2px;
1983
}
1984

    
1985
#error-success.success .popup-details {
1986
    border: none !important;
1987
    float: none !important;
1988
    margin-left: none !important;
1989
    margin-top: 10px;
1990
}
1991

    
1992
#error-success.success .popup-separator {
1993
    margin-bottom: 14px !important;
1994
}
1995

    
1996
#error-success .write-password {
1997
    margin-bottom: 5px;
1998
    padding-left: 30px;
1999
}
2000

    
2001
#error-success .write-password-password {
2002
    padding-left: 30px;
2003
    color: #447821;
2004
    display: inline;
2005
    font-size: 110%;
2006
    font-weight: bold;
2007
}
2008

    
2009
#error-success .write-password-details {
2010
    font-size: 75%;
2011
}
2012

    
2013
.more-details {
2014
    display: block;
2015
}
2016

    
2017
.popup-details a:link, .popup-details a:visited{
2018
    color: black;
2019
}
2020

    
2021
/* Confirmation boxes */
2022
div.confirm_single, div.confirm_multiple, div.action_error {
2023
    display: none;
2024
    color: black;
2025
}
2026

    
2027
div.action-container.destroy div.confirm_single {
2028
    bottom: 0;
2029
    position: absolute;
2030
    left: 83px;
2031
}
2032

    
2033
div.terminated div.action-container.destroy div.confirm_single {
2034
    margin-top: 30px;
2035
}
2036

    
2037
div.confirm_single button, div.confirm_multiple button, div.action_error button {
2038
    font-size: 100%;
2039
    cursor: pointer;
2040
    color: black;
2041
    height: 20px !important;
2042
}
2043

    
2044
div.confirm_single {
2045
    float: right;
2046
    margin: -20px -122px 0 0;
2047
}
2048

    
2049
div.confirm_single button {
2050
    border: none;
2051
}
2052

    
2053
div.confirm_single button.yes {
2054
    width: 90px;
2055
    background-color:#FF7F2A;
2056
}
2057

    
2058
div.confirm_single button.yes:hover {
2059
    background-color: #FF9955;
2060
}
2061

    
2062
div.confirm_single button.no {
2063
    width: 20px;
2064
    margin-left:-5px;
2065
    background-color: #FF9955;
2066
    color:#d95d0a;
2067
}
2068

    
2069
div.confirm_single button.no:hover {
2070
    color: white;
2071
}
2072

    
2073
div.confirm_multiple {
2074
    background-color: #4085A5;
2075
    font-size: 75%;
2076
    z-index: 1;
2077
    position: absolute;
2078
    width: 698px;
2079
    height: 28px;
2080
    margin-top: 15px;
2081
}
2082

    
2083
div.confirm_multiple p {
2084
    float: left;
2085
    color: #FF7F2A;
2086
    font-weight: bold;
2087
    margin: 7px 0 0 200px;
2088
}
2089

    
2090
#networks-pane div.confirm_multiple p {
2091
    margin: 7px 0 0 100px;
2092
}
2093

    
2094
div.confirm_multiple button {
2095
    float: right;
2096
    background-color: transparent;
2097
    border: 1px solid #5CA1C0;
2098
    margin: 4px 5px 0 0;
2099
}
2100

    
2101
div.confirm_multiple button.yes {
2102
    border-color: #FF7F2A;
2103
    padding: 0 12px;
2104
}
2105

    
2106
div.confirm_multiple button.yes:hover {
2107
    background-color: #FF7F2A;
2108
}
2109

    
2110
div.confirm_multiple button.no {
2111
    padding: 0px 16px;
2112
}
2113

    
2114
div.confirm_multiple button.no:hover {
2115
    background-color: #5CA1C0;
2116
}
2117

    
2118
div.action_error {
2119
    width: 80px;
2120
    height: 60px;
2121
    padding: 5px;
2122
    margin: -2px 0 0 595px;
2123
    background-color: #4085A5;
2124
    font-size: 75%;
2125
    line-height: 1.5;
2126
    z-index:1;
2127
    color: #FF7F2A;
2128
    position:absolute;
2129
    top: 0px;
2130
}
2131

    
2132
.action_error button {
2133
    width: 80px !important;
2134
    background-color: transparent;
2135
    border: 1px solid;
2136
    padding: 0px;
2137
    border-color: #FF7F2A;
2138
}
2139

    
2140
div.action_error button.details {
2141
    margin: 5px 0 0 0px;
2142
    padding: 0 15px;
2143
}
2144

    
2145
div.action_error button.details:hover {
2146
    background-color: #FF7F2A;
2147
}
2148

    
2149
div#aboutuser{
2150
    float:right;
2151
    clear: both;
2152
    color: #FFFFFF;
2153
    font-size: 75%;
2154
    margin-top: -25px;
2155
}
2156

    
2157
div#user{
2158
    float:right;
2159
    clear: both;
2160
    color: #FFFFFF;
2161
    font-size: 75%;
2162
    margin-top: 43px;
2163
}
2164

    
2165
div#user a{
2166
    color: #FFFFFF;
2167
    text-decoration: none;
2168
}
2169

    
2170
div#user a.current_lang {
2171
    color: #72ADC8;
2172
}
2173

    
2174
.separator {
2175
    background-color: #74AEC9;
2176
    height: 10px;
2177
    width: 700px;
2178
    font-size: 1px;
2179
    line-height: 0px;
2180
}
2181

    
2182
#disks.separator {
2183
    background-color: #dea842;
2184
}
2185

    
2186
#networks.separator {
2187
    background-color: #6c535d;
2188
}
2189

    
2190
.network-machine h5 {
2191
    margin-bottom: 26px;
2192
    margin-top:0px;
2193
}
2194

    
2195
.machine-container .separator {
2196
    width: 508px;
2197
    height: 1px;
2198
    margin-top: 2px;
2199
    background-color: #5CA1C0;
2200
    margin-left: 13px;
2201
}
2202

    
2203
.machine h5 {
2204
    margin: -3px 0px 4px 0px;
2205
}
2206

    
2207
.machine h5.namecontainer {
2208
    margin-top: 1px;
2209
}
2210

    
2211
.editbuttons {
2212
    display: block;
2213
    clear: none;
2214
    width: 40px;
2215
    margin-right: 32%;
2216
    padding-top: 2px;
2217
    float: right;
2218
    cursor: pointer;
2219
    position: relative;
2220
    z-index: 1000;
2221
}
2222

    
2223
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2224
    background-color: #84b7d0;
2225
}
2226

    
2227
div.editbuttons div.cancel:hover {
2228
    background-image: url("./cancel-onhover.png");
2229
}
2230

    
2231
.editbuttons .cancel, .editbuttons .save {
2232
    background-repeat: no-repeat;
2233
    color: transparent;
2234
    height: 16px;
2235
    width: 16px;
2236
    float: left;
2237
}
2238

    
2239
.editbuttons .cancel {
2240
    background-image: url("./cancel.png");
2241
    margin-left: 3px;
2242
}
2243

    
2244
.editbuttons .save {
2245
    background-image: url("./save.png");
2246
    margin-left: 1px;
2247
}
2248

    
2249
.editbuttons img {
2250
    float:none !important;
2251
    margin: 0px !important;
2252
}
2253

    
2254
.namecontainer {
2255
    height: 18px;
2256
    margin-top: 9px;
2257
}
2258

    
2259
.nametextbox {
2260
    font-size: 95%;
2261
}
2262

    
2263
.large-spinner {
2264
    background: url("./icons/indicators/large/progress.gif");
2265
    margin-left: 298px;
2266
    margin-top: 0px;
2267
    height: 31px;
2268
    width: 31px;
2269
    position: absolute;
2270
}
2271

    
2272
.list .large-spinner {
2273
    margin-top:-30px;
2274
}
2275

    
2276
.single .large-spinner {
2277
    margin-top: 50px;
2278
}
2279

    
2280
div#networks-container .large-spinner {
2281
    margin-top: 50px;
2282
}
2283

    
2284
/* tables in list view */
2285
div.list div.dataTables_filter {
2286
    font-size: 75%;
2287
    display: none;
2288
    margin-bottom: 12px;
2289
}
2290

    
2291
div.list div.dataTables_filter input{
2292
    font-size: 100%;
2293
}
2294

    
2295
.dataTables_wrapper {
2296
    width: 515px;
2297
    padding-bottom: 40px;
2298
}
2299

    
2300
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2301
    padding-right: 15px !important;
2302
}
2303

    
2304
div.list table {
2305
    width: 515px;
2306
    font-size: 75%;
2307
}
2308

    
2309
div.list table tbody td {
2310
    color: #3D3D3D;
2311
    padding:6px;
2312
    vertical-align: middle;
2313
}
2314

    
2315
div.list table thead tr th {
2316
    background-color: #CDE2EC;
2317
    background-image: url(bg.gif);
2318
    background-repeat: no-repeat;
2319
    background-position: right 11px;
2320
    font-weight: normal;
2321
    border: 1px solid transparent;
2322
    border-bottom: none;
2323
    padding: 4px;
2324
    text-align: left;
2325
    vertical-align: middle;
2326
    cursor: pointer;
2327
}
2328

    
2329
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2330
    background-color: #5CA1C0;
2331
}
2332

    
2333
div.list table thead .sorting_asc {
2334
    background-image: url(asc.gif);
2335
}
2336

    
2337
div.list table thead .sorting_desc {
2338
    background-image: url(desc.gif);
2339
}
2340

    
2341
div.list table .selection div.expand-icon {
2342
    background-image: url(asc.gif);
2343
    background-repeat: no-repeat;
2344
    position: relative;
2345
    cursor: pointer;
2346
    width: 15px;
2347
    height: 4px;
2348
    left: 19px;
2349
    top: -11px;
2350
}
2351

    
2352
ul.dropdown-selector {
2353
    background-color: #E6EEEE;
2354
    position: absolute;
2355
    margin-left: 1px;
2356
    display: block;
2357
    top: 255px;
2358
    font-size:75%;
2359
    width:40px;
2360
}
2361

    
2362
ul.dropdown-selector li {
2363
    padding: 4px;
2364
}
2365

    
2366
ul.dropdown-selector li:hover {
2367
    background-color: #5CA1C0;
2368
}
2369

    
2370
ul.dropdown-selector li a{
2371
    color: black;
2372
    text-decoration: none;
2373
}
2374

    
2375
div.list table span.imagetag {
2376
    display: none;
2377
}
2378

    
2379
div.list table thead .vmos {
2380
    width: 20px !important;
2381
    vertical-align:middle;
2382
}
2383

    
2384
div.list table .selection {
2385
    width: 20px !important;
2386
    text-align: left;
2387
    background-image: none;
2388
    padding-left: 6px;
2389
}
2390

    
2391
div.list table thead .vmflavor {
2392
    width: 100px !important;
2393
}
2394

    
2395
div.list table thead .vmgroup {
2396
    width: 40px !important;
2397
}
2398

    
2399
div.list table thead .vmstatus {
2400
    width: 50px !important;
2401
}
2402

    
2403
div.list table thead .vmname {
2404
    width: 70px !important;
2405
}
2406

    
2407
.spinner {
2408
    clear: right;
2409
    float:right !important;
2410
    margin: 10px 6px 0 15px !important;
2411
}
2412

    
2413
.wave {
2414
    clear: right;
2415
    float:right !important;
2416
    margin: 10px 15px 0 15px !important;
2417
}
2418

    
2419
#networks-pane .spinner {
2420
    margin-top: 18px !important;
2421
}
2422

    
2423
.hidden {
2424
    display:none;
2425
}
2426

    
2427
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2428
    display:block !important;
2429
}
2430

    
2431
.action_error .message, .action_error .code {
2432
    display: none;
2433
}
2434

    
2435
.fixed {
2436
    bottom: 0;
2437
    position: fixed !important;
2438
}
2439

    
2440
/* Networks */
2441
#networks-pane {
2442
    background-color: transparent;
2443
    color: black;
2444
    margin-left: 1px;
2445
    margin-right: 0;
2446
}
2447

    
2448
#networkscreate {
2449
    color: black;
2450
    background-color: #FF7F2A;
2451
    cursor: pointer;
2452
    padding: 7px 24px;
2453
    text-decoration: none;
2454
}
2455

    
2456
#networkscreate:hover {
2457
    background-color: #FF9955;
2458
}
2459

    
2460
#networks-pane #beforecreate {
2461
    margin-left: -13px;
2462
    margin-top: -6px;
2463
}
2464

    
2465
#networks-container {
2466
    margin-top: 10px;
2467
    min-height: 270px;
2468
}
2469

    
2470
#networks-createcontainer {
2471
    position: absolute;
2472
    top: 155px;
2473
}
2474

    
2475
#networks-pane .public-networks {
2476
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
2477
    margin: 0 0 18px;
2478
    padding: 70px 0 15px 35px;
2479
}
2480

    
2481
#networks-pane .private-networks {
2482
    background: url("./running-bg.png") repeat scroll 0 0 transparent;
2483
    padding: 15px 20px 20px 35px;
2484
}
2485

    
2486
#public-template, #private-template, #public-machine-template, #private-machine-template {
2487
    display:none;
2488
}
2489

    
2490
div.network a.action-network-add {
2491
    display: none;
2492
}
2493

    
2494
div.network a.action-network-destroy {
2495
    margin-top: 32px !important;
2496
    width: 50px;
2497
    display: none;
2498
}
2499

    
2500
div.network {
2501
    clear: both;
2502
    min-height: 65px;
2503
    margin: 5px 0 0 -35px;
2504
    padding: 3px 20px 0;
2505
    width: 480px;
2506
    position: relative;
2507
}
2508

    
2509
#private-template {
2510
    margin: 2px 0 0 -30px;
2511
}
2512

    
2513
div.network-placeholder {
2514
    margin-left: 35px;
2515
}
2516

    
2517
div.private-networks div.network-placeholder {
2518
    border-left: 3px solid #FF7F2A;
2519
}
2520

    
2521
div.network-cable {
2522
    border-left: 3px solid #FF7F2A;
2523
    float: left;
2524
    margin-left: -40px;
2525
    margin-top: -45px;
2526
    height: 185px;
2527
    overflow: hidden;
2528
}
2529

    
2530
.first div.network-cable {
2531
    height:143px;
2532
    margin-top:-6px;
2533
}
2534

    
2535
div.network-contents div.machines-list div.first {
2536
    margin-top:0;
2537
}
2538

    
2539
.last div.network-cable {
2540
    height:85px;
2541
}
2542

    
2543
div.firewall-cable {
2544
    border-left: 3px solid #FF7F2A;
2545
    float: left;
2546
    margin-left: -100px;
2547
    margin-top: -20px;
2548
    height: 110px;
2549
}
2550

    
2551
.last div.firewall-cable {
2552
    display:none;
2553
}
2554

    
2555
div.network a:hover {
2556
    text-decoration: underline;
2557
    cursor: pointer;
2558
}
2559

    
2560
#networks-container .name {
2561
    font-size: 75%;
2562
}
2563

    
2564
div.network-machines, div.firewall {
2565
    font-size: 75%;
2566
    margin-left: 70px;
2567
}
2568

    
2569
div.firewall {
2570
    margin-left: 60px;
2571
    margin-bottom: 3px;
2572
}
2573

    
2574
div.machines-header, div.firewall-header {
2575
    background-color: #A1C8DB;
2576
    color: white;
2577
    cursor: pointer;
2578
    height: 17px;
2579
    width: 100px;
2580
}
2581

    
2582
 div.private-networks div.machines-header {
2583
    margin-top: -5px;
2584
}
2585

    
2586
div.network:hover div.machines-header, div.network:hover div.firewall-header {
2587
    background-color: #84b7d0;
2588
}
2589

    
2590
div.network-machine:hover div.firewall-header {
2591
    background-color: #5CA1C0;
2592
}
2593

    
2594
div.machines-label, div.firewall-label {
2595
    width: 83px;
2596
    padding-bottom:1px;
2597
    padding-left: 3px;
2598
}
2599

    
2600
div.firewall-label.darker {
2601
    background-color: #4085a5;
2602
}
2603

    
2604
.state {
2605
    float: right;
2606
    position: absolute;
2607
    right: 10px;
2608
    top: 40px;
2609
    font-size: 75%;
2610
}
2611

    
2612
div.network div.actions {
2613
    float: right;
2614
    font-size: 75%;
2615
    font-weight: normal;
2616
    height: 70px;
2617
    width: 100px;
2618
    position: absolute;
2619
    right: -100px;
2620
    top: 0;
2621
}
2622

    
2623
div.network div.machine-actions {
2624
    text-decoration: none;
2625
    float: right;
2626
    width: 100px;
2627
    margin: -7px -100px 0 0;
2628
    font-weight: normal;
2629
    font-size: 75%;
2630
}
2631

    
2632
div.network div.actions a, div.network div.machine-actions a {
2633
    text-decoration: none;
2634
    height: 15px;
2635
    color: transparent;
2636
    display: block;
2637
}
2638

    
2639
div.network div.actions a {
2640
    margin: -2px 0 0 8px;
2641
}
2642

    
2643
div.network div.machine-actions a {
2644
    margin: 0 0 0 8px;
2645
}
2646

    
2647
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2648
    display: block;
2649
    background-color:#A1C8DB;
2650
    width: 200px;
2651
    opacity: 0.8;
2652
    filter: alpha(opacity = 80);
2653
}
2654

    
2655
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2656
    color: black;
2657
}
2658

    
2659
div.network div.actions a.selected, div.network div.machine-actions a.selected {
2660
    color: #FF7F2A !important;
2661
    width: 50px !important;
2662
}
2663

    
2664
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected:hover {
2665
    background-color: transparent;
2666
}
2667

    
2668
div.network div.display a {
2669
    color: black;
2670
    display: block;
2671
}
2672

    
2673
div.network-machine div.machine-actions a.action-details {
2674
    margin-top: 7px;
2675
}
2676

    
2677
div.network:hover {
2678
    background-color: #A1C8DB !important;
2679
}
2680

    
2681
.network-logos {
2682
    float:left;
2683
    padding-right: 10px;
2684
}
2685

    
2686
.network-logos:hover {
2687
    cursor: pointer;
2688
}
2689

    
2690
.state div {
2691
    text-align: right;
2692
    margin: 4px 1px -4px;
2693
}
2694

    
2695
.public-networks .state div {
2696
    margin-top: 4px;
2697
}
2698

    
2699
.private-networks .state div {
2700
    margin-top: 9px;
2701
    margin-bottom: -12px;
2702
}
2703

    
2704
.public-networks .name-div {
2705
    margin-top:-7px;
2706
    margin-bottom: 23px;
2707
}
2708

    
2709
div.indicator {
2710
    clear: none;
2711
    float: right;
2712
    height: 11px;
2713
    margin: 3px -1px;
2714
    width: 10px;
2715
}
2716

    
2717
#private-networks {
2718
    margin-top: 20px;
2719
}
2720

    
2721
.private-networks .editbuttons {
2722
    margin-right: 22%;
2723
}
2724

    
2725
.private-networks div.confirm_single {
2726
    margin: 43px -219px 0 0;
2727
    font-size: 80%;
2728
}
2729

    
2730
.private-networks .network-machine div.confirm_single {
2731
    margin: -8px -199px 0 0;
2732
}
2733

    
2734
span.rename-network, span.configure {
2735
    background-repeat: no-repeat;
2736
    color: transparent;
2737
    font-size: 75%;
2738
    font-weight: normal;
2739
    margin-left: 10px;
2740
    padding-left: 10px;
2741
    text-align: left;
2742
}
2743

    
2744
span.rename-network {
2745
    cursor: pointer;
2746
}
2747

    
2748
div.name-div:hover span.rename-network {
2749
    color: #3D3D3D;
2750
    margin-top: 0.4em;
2751
    background-image: url(./pencil.png);
2752
    background-position: 0 3px;
2753
}
2754

    
2755
div.network:hover a.rename {
2756
    color: #3d3d3d;
2757
}
2758

    
2759
.network-separator {
2760
    background-color: #5CA1C0;
2761
    height: 1px;
2762
    margin: 2px 0 0 -5px;
2763
    width: 480px;
2764
    font-size: 4px;
2765
    line-height: 1px;
2766
}
2767

    
2768
.network-contents {
2769
    margin-left: -4px;
2770
    width: 504px;
2771
    clear: both;
2772
    padding-bottom: 7px;
2773
}
2774

    
2775
.network-machine .state div {
2776
    text-align: left;
2777
}
2778

    
2779
.network-machine {
2780
    margin-left: 35px;
2781
    padding-bottom: 5px;
2782
    padding-left: 5px;
2783
    padding-top: 5px;
2784
    margin-top: 5px;
2785
}
2786

    
2787
.network-machine .logo {
2788
    float:left;
2789
    padding-right: 10px;
2790
    position:relative;
2791
}
2792

    
2793
#networks-container .machine-name {
2794
    text-decoration: none !important;
2795
    margin-bottom: 10px;
2796
    color: #000000;
2797
    margin-top: -4px;
2798
}
2799

    
2800
.network .separator {
2801
    background-color: #5CA1C0;
2802
    height: 1px;
2803
    margin: 11px 0 -5px 5px;
2804
    width: 485px;
2805
}
2806

    
2807
.network-machine .state {
2808
    margin-right: 18px;
2809
}
2810

    
2811
.network-machine .state .status {
2812
    margin-bottom: 4px;
2813
}
2814

    
2815
.machine-name .name {
2816
    margin-top: -10px !important;
2817
}
2818

    
2819
.machine-name .namecontainer {
2820
    line-height: 18px;
2821
    margin-bottom: 20px;
2822
}
2823

    
2824
div.network-machine:hover {
2825
    background-color: #84B7D0;
2826
}
2827

    
2828
.machines {
2829
    width: 416px;
2830
    margin-bottom: -8px;
2831
    margin-top: 10px;
2832
}
2833

    
2834
div.empty-network-slot {
2835
    height: 60px;
2836
}
2837

    
2838
div.network-remove-machine, div.network-add-machine {
2839
    background-color: #FB822F;
2840
    color: #bc4b00;
2841
    width:90px;
2842
    height:18px;
2843
    float:left;
2844
    margin:40px 0 0 -100px;
2845
}
2846

    
2847
span.remove-icon {
2848
    font-size: 80%;
2849
    margin-left: 15px;
2850
}
2851

    
2852
div.add-icon {
2853
    margin-left: 15px;
2854
    margin-top: -3px;
2855
    cursor: pointer;
2856
}
2857

    
2858
span.remove-icon:hover, span.add-icon:hover {
2859
    cursor:pointer;
2860
    color: #fff;
2861
}
2862

    
2863
div.network-add-machine {
2864
    margin:43px 0 0 -3px;
2865
}
2866

    
2867
.firewall-on {
2868
    color: #42E342;
2869
}
2870

    
2871
.firewall-off {
2872
    color: #F82E2E;
2873
}
2874

    
2875
.firewall-content {
2876
    color: black;
2877
    font-size: 60%;
2878
    margin-left: 60px;
2879
    height: 55px;
2880
    margin-bottom: 17px;
2881
}
2882

    
2883
.firewall-content .checkbox-legends {
2884
    vertical-align: text-top;
2885
}
2886

    
2887
.checkbox-legends a {
2888
    color: black;
2889
    text-decoration: underline;
2890
    font-size: 100%;
2891
}
2892

    
2893
h5.machine-connect {
2894
    font-size: 75%;
2895
    margin-bottom: 3px;
2896
}
2897

    
2898
.machine-connect span {
2899
    text-decoration: underline;
2900
}
2901

    
2902
h5.machine-connect span:hover {
2903
    cursor: pointer;
2904
}
2905

    
2906
.firewall-apply {
2907
    background-color: #4085a5;
2908
    border: medium none;
2909
    float: right;
2910
    font-size: 105%;
2911
    height: 18px;
2912
    margin-right: 5px;
2913
    margin-top: 3px;
2914
    width: 75px;
2915
}
2916

    
2917
.firewall-apply:hover {
2918
    background-color:#5CA1C0;
2919
}
2920

    
2921
.name-div {
2922
    margin-left: 70px;
2923
    margin-bottom: 20px;
2924
}
2925

    
2926
.machine-name-div {
2927
    margin-bottom: 20px;
2928
    margin-left: 60px;
2929
}
2930

    
2931
div.reboot-dialog {
2932
    display: none;
2933
    color: black;
2934
    background-color: #4085A5;
2935
    font-size: 75%;
2936
    margin-top: 15px;
2937
    width: 698px;
2938
    z-index: 1;
2939
}
2940

    
2941
div#reboot-machine-template, div.reboot-machine-entry {
2942
    display: none;
2943
    padding: 0 0 10px 35px;
2944
    width: 300px;
2945
}
2946

    
2947
div.reboot-dialog p {
2948
    color: #FF7F2A;
2949
    padding: 10px 0 10px 10px;
2950
}
2951

    
2952
div.reboot-dialog button {
2953
    float:right;
2954
    border: 1px solid #FF7F2A;
2955
    background-color: transparent;
2956
    font-size:100%;
2957
}
2958

    
2959
div.reboot-dialog button:hover {
2960
    background-color: #FF7F2A;
2961
}
2962

    
2963
div.reboot-dialog button.reboot-all {
2964
    margin: -30px 35px 0 0;
2965
}
2966

    
2967
div.reboot-dialog button.reboot-single {
2968
    color: black;
2969
    margin-top: -20px;
2970
}
2971

    
2972
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
2973
    display:none;
2974
}
2975

    
2976
div.reboot-dialog button.details {
2977
    border-color: #800000;
2978
    margin-top: -20px;
2979
}
2980

    
2981
div.reboot-dialog button.details:hover {
2982
    background-color: #800000;
2983
}
2984

    
2985
/* Metadata */
2986
.info-content {
2987
    clear: both;
2988
    height: 95px;
2989
    width: 512px;
2990
}
2991

    
2992
.metadata-container {
2993
    line-height: 12px;
2994
    height: 85px;
2995
    background-color: #84b7d0;
2996
}
2997

    
2998
.metadata-column {
2999
    border-right: 1px solid #5CA1C0;
3000
    color: black;
3001
    float: left;
3002
    font-size: 60%;
3003
    margin-top: 3px;
3004
    height: 70px;
3005
    padding-bottom: 5px;
3006
}
3007

    
3008
.vm-stats {
3009
    padding-left: 10px;
3010
    padding-right: 5px;
3011
    width: 119px;
3012
}
3013

    
3014
.vm-details {
3015
    width: 169px;
3016
    margin-left:17px;
3017
}
3018

    
3019
.vm-metadata {
3020
    padding-left: 10px;
3021
    width: 129px;
3022
    border: none;
3023
}
3024

    
3025
.metadata-left {
3026
    float:left;
3027
    width: 50px;
3028
    height: 60px;
3029
}
3030

    
3031
.metadata-right {
3032
    width: 73px;
3033
    float:left;
3034
    height: 35px;
3035
    padding-left: 5px;
3036
    position:relative;
3037
    overflow:hidden;
3038
}
3039

    
3040
.metadata-right .items {
3041
    position:absolute;
3042
    height:20000em;
3043
}
3044

    
3045
.metadata-keys-container {
3046
    height: 60px;
3047
    float: left;
3048
}
3049

    
3050
.single .metadata-keys-container {
3051
    float: none;
3052
    height: 50px;
3053
}
3054

    
3055
.single a.manage-metadata {
3056
    font-size: 80%;
3057
    margin-left:4px;
3058
    color: #383838;
3059
}
3060

    
3061
a.manage-metadata {
3062
    font-size: 100%;
3063
    color: black;
3064
    margin-left:17px;
3065
    text-decoration: underline;
3066
}
3067

    
3068
div.machine a.manage-metadata:hover {
3069
    background-color: transparent;
3070
}
3071

    
3072
.metadata-actions, .scrollable {
3073
    padding-left: 5px;
3074
}
3075

    
3076
.singe .metadata-actions, .single .scrollable {
3077
    font-size: 80%;
3078
    line-height: 12px;
3079
    width: 300px;
3080
}
3081

    
3082
.metadata-actions .prev,  .metadata-actions .next{
3083
    float:left;
3084
    width:29px;
3085
    height:6px;
3086
    cursor: pointer;
3087
}
3088

    
3089
.metadata-actions .prev {
3090
    background: url("./roll-up.png") no-repeat scroll 0 0 transparent;
3091
}
3092

    
3093
.metadata-actions .next {
3094
    background: url("./roll-down.png") no-repeat scroll 0 0 transparent;
3095
}
3096

    
3097
.scrollable {
3098
    position:relative;
3099
    overflow:hidden;
3100
    height: 35px;
3101
    width: 60px;
3102
    margin-bottom:2px;
3103
}
3104

    
3105
.scrollable .items {
3106
    position:absolute;
3107
    height:20000em;
3108
}
3109

    
3110
.metadata-bar {
3111
    float: right !important;
3112
    margin: 1px 7px 0 !important;
3113
}
3114

    
3115
/* single view */
3116
.single {
3117
    color: #383838;
3118
    margin-top: -76px;
3119
    padding-bottom: 10px;
3120
    width: 679px;
3121
}
3122

    
3123
.single .column1 {
3124
    float: left;
3125
    margin: 1px 0 25px 17px;
3126
    width: 140px;
3127
}
3128

    
3129
.single .column1 .state {
3130
    float: left;
3131
    margin-left: 4px;
3132
    padding-bottom: 6px;
3133
    padding-top: 3px;
3134
    position: relative;
3135
    right: 0;
3136
    text-align: center;
3137
    width: 126px;
3138
}
3139

    
3140
.single .column1 .state-label {
3141
    padding-top: 5px;
3142
}
3143

    
3144
.single .column1 .indicators {
3145
    margin-right: 38px !important;
3146
}
3147

    
3148
.single div.connect-arrow {
3149
    margin-left: -17px;
3150
}
3151

    
3152
.single div.connect-border {
3153
    margin-left: -29px;
3154
}
3155

    
3156
.single .single-actions {
3157
    padding-bottom: 4px;
3158
    padding-left: 15px;
3159
    width: 69px;
3160
    float: left;
3161
}
3162

    
3163
.single div.single-action {
3164
    font-size: 80%;
3165
    line-height: 18px;
3166
    text-decoration: none;
3167
    cursor: pointer;
3168
}
3169

    
3170
.single div.single-action:hover {
3171
    background-color:#A1C8DB;
3172
    width: 180px;
3173
    opacity: 0.8;
3174
    filter: alpha(opacity = 80);
3175
}
3176

    
3177
.single div.single-action.selected {
3178
    color: #FF7F2A !important;
3179
    width: 50px !important;
3180
}
3181

    
3182
.single div.single-action.selected:hover {
3183
    background-color:transparent;
3184
}
3185

    
3186
.single div.confirm_single {
3187
    font-size: 80%;
3188
    margin: -19px -115px 0 0;
3189
}
3190

    
3191
.single div.action-container.destroy div.confirm_single {
3192
    margin: -18px -116px 0 0;
3193
    position: relative;
3194
    left: 0px;
3195
}
3196

    
3197
.single div.confirm_single button.no {
3198
    margin-left: -5px;
3199
}
3200

    
3201
.single .spinner {
3202
    margin: 15px 45px 0 0px !important
3203
}
3204

    
3205
.single .wave {
3206
    margin: 15px 53px 0 0px !important
3207
}
3208

    
3209
.single div.action_error {
3210
    margin: 2px 0px 0 605px !important;
3211
    position: relative;
3212
}
3213

    
3214
.single .column2 {
3215
    background-color: #A1C8DB;
3216
    float: left;
3217
    font-size: 78%;
3218
    line-height: 17px;
3219
    margin: 0 0 10px 5px;
3220
    width: 358px;
3221
}
3222

    
3223
.single .column2 .machine-labels {
3224
    float: left;
3225
    font-size: 90%;
3226
    margin-left: 10px;
3227
    margin-top: 10px;
3228
    width: 125px;
3229
}
3230

    
3231
.single .column2 .machine-details {
3232
    float: right;
3233
    text-align: right;
3234
    font-size: 90%;
3235
    width: 210px;
3236
    margin-right: 10px;
3237
    margin-top: 10px;
3238
}
3239

    
3240
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3241
    margin-bottom: 13px;
3242
}
3243

    
3244
.single .tags {
3245
    clear: both;
3246
    margin-bottom: 10px;
3247
    margin-left: 10px;
3248
}
3249

    
3250
.single .tags-label {
3251
    float: left;
3252
    padding: 0 5px;
3253
    width: 30px;
3254
}
3255

    
3256
.single .tags-down-arrow {
3257
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3258
    float: left;
3259
    height: 16px;
3260
    width: 9px;
3261
}
3262

    
3263
.single .tags-header {
3264
    background-color: #84B7D0;
3265
    cursor: pointer;
3266
    height: 16px;
3267
    width: 55px;
3268
}
3269

    
3270
.single .tags-content {
3271
    background-color: #84B7D0;
3272
    clear: both;
3273
    height: 65px;
3274
    padding-bottom: 5px;
3275
    padding-top: 5px;
3276
    width: 300px;
3277
}
3278

    
3279
.single .column3 {
3280
    background-color: #A1C8DB;
3281
    margin-left: 535px;
3282
    position: absolute;
3283
    top: 280px;
3284
    width: 150px;
3285
    overflow: visible;
3286
    padding-bottom: 10px;
3287
}
3288

    
3289
.single .column3 .controls {
3290
    font-size: 80%;
3291
    height: 20px;
3292
    padding-left: 7px;
3293
    padding-right: 7px;
3294
    padding-top: 8px;
3295
}
3296

    
3297
.single .column3 .previous {
3298
    float:left;
3299
    width: 72px;
3300
}
3301

    
3302
.single .column3 .next {
3303
    float: right;
3304
    text-align: center;
3305
    width: 60px;
3306
}
3307

    
3308
.single .column3 .next-label {
3309
    float: right;
3310
    margin-right: 3px;
3311
    margin-top: -2px;
3312
}
3313

    
3314
.single .column3 .next-arrow {
3315
    float: right;
3316
    height: 18px;
3317
    width: 10px;
3318
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3319
}
3320

    
3321
.single .column3 .prev-label {
3322
    float: left;
3323
    margin-left: 3px;
3324
    margin-top: -2px;
3325
}
3326

    
3327
.single .column3 .prev-arrow {
3328
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3329
    float: left;
3330
    height: 18px;
3331
    width: 10px;
3332
}
3333

    
3334
.single .column3 .separator {
3335
    width: 135px;
3336
    height: 1px;
3337
    background-color: #84B7D0;
3338
    margin: 0 0 0 7px;
3339
    clear: both;
3340
}
3341

    
3342
.single .column3 .servers {
3343
    font-size: 80%;
3344
    line-height: 15px;
3345
    padding-top: 10px;
3346
    text-align: right;
3347
    overflow: visible;
3348
    position: relative;
3349
}
3350

    
3351
.single .column3 .server-name {
3352
    margin-left: 10px;
3353
    padding-right: 5px;
3354
    cursor: pointer;
3355
    padding-bottom: 2px;
3356
}
3357

    
3358
div.single div.column3 div.server-name:hover, .single .column3 .column3-selected {
3359
    background-color: #84B7D0;
3360
    color: white;
3361
    opacity: 0.8;
3362
    padding-left: 9px;
3363
    text-align: left;
3364
    width: 160px;
3365
    filter: alpha(opacity = 80);
3366
    position: relative;
3367
}
3368

    
3369
.single .toggler {
3370
    color: #FFFFFF;
3371
    float: right;
3372
    font-size: 140%;
3373
}
3374

    
3375
.single .single-cpu, .single .single-network {
3376
    float: left;
3377
    height: 100px;
3378
    width: 48%;
3379
}
3380

    
3381
.single .cpu-usage, .single .network-usage {
3382
    padding-bottom: 15px;
3383
    padding-left: 20px;
3384
    padding-top: 15px;
3385
    font-size: 90%;
3386
}
3387

    
3388
.single .cpu-graph, .single .network-graph {
3389
    background-color: #A1C8DB;
3390
    height: 210px;
3391
    margin-left: 20px;
3392
    width: 300px;
3393
}
3394

    
3395
.single .single-image {
3396
    width: 126px;
3397
    margin-bottom: 10px;
3398
    margin-left: 4px;
3399
}
3400

    
3401
.single .column3 .previous, .single .column3 .next {
3402
    cursor: pointer;
3403
    background-color: #84B7D0;
3404
    color: white;
3405
    font-size: 100%;
3406
    height: 15px;
3407
    padding-top: 2px;
3408
}
3409

    
3410
.single .column3 .disabled {
3411
    opacity: 0.5;
3412
    filter: alpha(opacity = 50);
3413
}
3414

    
3415
.single div.lower {
3416
    clear:both;
3417
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3418
    width: 700px;
3419
    height: 270px;
3420
}
3421

    
3422
.single div.upper {
3423
    background: url("./terminated-bg.png") repeat scroll 0 0 transparent;
3424
    margin-bottom: 10px;
3425
    min-height: 310px;
3426
    overflow: visible;
3427
    padding-top: 60px;
3428
    width: 700px;
3429
}
3430

    
3431
/* console css */
3432
.console-header-logo {
3433
    padding-top: 17px;
3434
    margin-left: 30px;
3435
    position: fixed;
3436
}
3437

    
3438
#console-header div.help-text {
3439
    font-size: 75%;
3440
    font-weight:bold;
3441
    color:#FF7F2A;
3442
    float:left;
3443
    position: absolute;
3444
    margin: 45px 0 0 2px;
3445
}
3446

    
3447
div.console-container {
3448
    margin: 0 0em;
3449
    height: auto;
3450
}
3451

    
3452
#wrapper.console {
3453
    width: auto;
3454
}
3455

    
3456
.console-info {
3457
    font-size:80%;
3458
    color: white;
3459
    float:left;
3460
    position:relative;
3461
    margin: 25px 0 0 480px;
3462
}
3463

    
3464
applet {
3465
    width:100%;
3466
    height:100%;
3467
}
3468

    
3469
div.console-footer {
3470
    /* this is for version 0.5*/
3471
    display: none;
3472
}
3473

    
3474
.console-footer #footer-text{
3475
    float:left;
3476
    left: auto;
3477
    margin-left:30px;
3478
}
3479

    
3480
/* add network wizard (see also #wizard for shared classes) */
3481
#networks-wizard .header {
3482
    background-color: #4085A5;
3483
    height: 56px;
3484
}
3485

    
3486
#networks-wizard div.name-input {
3487
    margin: 75px 0 0 55px;
3488
}
3489

    
3490
#networks-wizard input {
3491
    border: 1px solid #CCCCCC;
3492
    color: #445566;
3493
    letter-spacing: 1px;
3494
    width: 170px;
3495
}
3496

    
3497
#networks-wizard span.help {
3498
    font-style: italic;
3499
    font-size: 80%;
3500
    margin-left: 10px;
3501
}
3502

    
3503
#networks-wizard .separator-end {
3504
    background-color: #387693;
3505
    height: 6px;
3506
    width: 479px;
3507
    margin-left: -13px;
3508
    margin-top: 22px;
3509
}
3510

    
3511
.red {
3512
    color: red;
3513
}
3514

    
3515
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3516
#add-machines-wizard span.machine-name {
3517
    margin-left: 4px;
3518
    vertical-align: text-top;
3519
}
3520

    
3521
#add-machines-wizard img.list-logo {
3522
    margin: 2px 1px 1px;
3523
}
3524

    
3525
.css-panes {
3526
    clear: both;
3527
}
3528

    
3529
.last .firewall-content {
3530
    margin-bottom:13px;
3531
}
3532

    
3533
#pub .last .network-separator {
3534
    display:none;
3535
}
3536

    
3537
.public-networks .empty-network-slot {
3538
    display: none;
3539
}
3540

    
3541
/* float clearing for all browsers except the devil one */
3542
.clearfix:after{
3543
  clear: both;
3544
  content: ".";
3545
  display: block;
3546
  height: 0;
3547
  visibility: hidden;
3548
  font-size: 0;
3549
}