Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ ea03a0a2

History | View | Annotate | Download (95.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
body {
20
    background: url(./body-bg.png) repeat-x #FFFFFF;
21
    text-align:center;
22
    font-size: 16px;
23
}
24

    
25
a, a:hover, a:active, a:focus, div:focus, span:focus, li:focus {
26
    outline: none;
27
}
28

    
29
#okeanos-image {
30
    position: absolute;
31
    bottom: -0px;
32
    right: 0;
33
    z-index:0;
34
}
35

    
36
#container {
37
    position: relative;
38
        margin:0 auto;
39
        width: 100%;
40
        background: transparent;
41
}
42

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

    
52
#content {
53
    padding-bottom: 10px;
54
    width: 100%;
55
}
56

    
57
div#wrapper {
58
    width: 700px;
59
    margin: 0em auto;
60
    text-align: left;
61
}
62

    
63
#footer {
64
    height: 80px;
65
    background-color: #4085A5;
66
    width:100%;
67
}
68

    
69
#footer-container {
70
    height: 80px;
71
    width: 100%;
72
    left:0;
73
    z-index:10;
74
}
75

    
76
#footer div.grnet-sign {
77
    margin-top:10px;
78
}
79

    
80
#footer div.grnet-sign a{
81
    color: #72ADC8;
82
}
83

    
84
#footer div.grnet-sign a:hover {
85
    color: #FFFFFF;
86
}
87

    
88
ol, ul {
89
    list-style: none;
90
}
91

    
92
blockquote, q {
93
    quotes: none;
94
}
95

    
96
blockquote:before, blockquote:after,
97
q:before, q:after {
98
    content: '';
99
    content: none;
100
}
101

    
102
/* remember to define focus styles! */
103
:focus {
104
    outline: 1px dotted #87AADE;
105
}
106

    
107
/* remember to highlight inserts somehow! */
108
ins {
109
    text-decoration: none;
110
}
111

    
112
del {
113
    text-decoration: line-through;
114
}
115

    
116
/* tables still need 'cellspacing="0"' in the markup */
117
table {
118
    border-collapse: collapse;
119
    border-spacing: 0;
120
}
121

    
122
h5 {
123
    font-weight: normal;
124
    margin-bottom:3px;
125
}
126

    
127
.tab-name, 
128
.machine-container .name,
129
h5.namecontainer span,
130
.single .machine-detail.title {
131
    font-family: 'Ubuntu';
132
}
133

    
134
.create-container a {
135
    font-family: 'Open Sans', sans-serif;
136
}
137

    
138
/* root element for tabs  */
139
.tab-name {
140
    background-color: #5CA1C0;
141
    color: #FFFFFF;
142
    float: right;
143
    font-size: 150%;
144
    height: 31px;
145
    text-align: right;
146
    padding-right: 15px;
147
    width: 170px;
148
}
149

    
150
.tab-separator {
151
    background-color: white;
152
    float: left;
153
    width: 2px;
154
    height: 23px;
155
    margin-top: 4px;
156
}
157

    
158
ul.css-tabs {
159
    padding: 0;
160
    height:31px;
161
    background-color: #5CA1C0;
162
}
163

    
164
ul.css-tabs .secondary {
165
    position:relative;
166
}
167

    
168
/* single tab */
169
ul.css-tabs li {
170
    float:left;
171
    padding:0;
172
    list-style-type:none;
173
}
174

    
175
ul.css-tabs .current {
176
    background: #4085A5;
177
}
178

    
179
/* link inside the tab. uses a background image */
180
ul.css-tabs a {
181
    float:left;
182
    display:block;
183
    text-decoration:none;
184
    color:#d2d2d2;
185
    position:relative;
186
    outline:0;
187
    padding: 4px 25px 0;
188
    height: 27px;
189
}
190

    
191
ul.css-tabs a:hover {
192
    background: #74AEC9;
193
}
194

    
195
/* selected tab */
196
ul.css-tabs a.current,
197
ul.css-tabs a.active {
198
    cursor:default;
199
    background: #4085A5;
200
}
201

    
202
/* tab pane */
203
div.css-panes {
204
/*    border-top: 10px solid #87aade;
205
    border-bottom: 10px solid #87aade;  */
206
    background: transparent;
207
}
208

    
209
.css-panes > div.pane {
210
    display:none;
211
}
212

    
213
.panes-menu {
214
    height: 30px;
215
    margin-bottom: 10px;
216
}
217
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
218
.rounded, #sheet input, .error {
219
    border-radius: 5px;
220
    -webkit-border-radius: 5px;
221
    -moz-border-radius: 5px;
222
    -o-border-radius: 5px;
223
    -khtml-border-radius: 5px;
224
}
225

    
226
/*validation error message*/
227
/*.error {*/
228
    /*background-color:#E8FF6D;*/
229
    /*padding:4px;*/
230
    /*-webkit-box-shadow: #000 0 0 9pt;*/
231
    /*-moz-box-shadow: #000 0 0 9pt;*/
232
/*}*/
233
.error {
234
    color: #f00 !important;
235
}
236

    
237
/* nested arrow inside error message. It's 100% CSS. No images. */
238
.error em {
239
    border: 10px solid;
240
    border-color: #E8FF6D transparent transparent;
241
    bottom: -17px;
242
    display: block;
243
    height: 0;
244
    left: 10px;
245
    position: absolute;
246
    width: 0;
247
}
248

    
249
/* input field that caused validation error */
250
.invalid {
251
    background-color: rgba(221, 233, 255, 0.898) !important;
252
}
253

    
254
#beforecreate {
255
    background-color: #FF9955;
256
    height: 32px;
257
    width: 13px;
258
}
259

    
260
.pane-top {
261
    height: 70px;
262
    position: relative;
263
    background: #EFF7FA 0px 0px;
264
    /*margin-bottom: -2px;*/
265
}
266

    
267
#machines-pane-top.empty {
268
    background: transparent;
269
}
270

    
271
#beforecreate {
272
    border-left: 16px solid #efefef;
273
    margin-left: -16px;
274
}
275

    
276
.create-container {
277
    line-height: 4em;
278
}
279

    
280
#createcontainer a {
281
}
282

    
283
#create {
284
    background-color: #FF7F2A;
285
    color: #000;
286
    cursor: pointer;
287
    text-decoration: none;
288
    font-size:100%;
289
}
290

    
291
#create:hover {
292
    background-color: #FF9955;
293
}
294

    
295
#console-header {
296
    height: 67px;
297
    margin-bottom:15px;
298
    background: url("./header-bg.png") repeat-x scroll 0 0 #FFFFFF;
299
}
300

    
301
.header-logo {
302
    padding-top: 28px;
303
}
304

    
305
div#footer-text a {
306
    color: #FFFFFF;
307
    text-decoration: none;
308
}
309

    
310
div#footer-text{
311
    color: #FFFFFF;
312
    font-size: 75%;
313
    padding-top: 10px;
314
}
315

    
316
#footer-bg {
317
    background: url("./footer-bg.png") no-repeat scroll 0 0 #4085A5;
318
    background-position:right;
319
}
320

    
321
.modal {
322
    background-color:#fff;
323
    display:none;
324
    width:30em;
325
    padding:1em;
326
    text-align:left;
327
}
328

    
329
/* server wizard scrollable root element and network wizard */
330
#wizard, #networks-wizard {
331
    font-size:75%;
332
    height:425px;
333
    width:453px;
334
    overflow:hidden;
335
    position:absolute !important;
336
}
337

    
338
/* scrollable items */
339
#wizard .items {
340
    width:20000em;
341
    clear:both;
342
    position:absolute;
343
    display:block;
344
    padding: 0;
345
    margin: 0;
346
    border:none;
347
    background:none;
348
}
349

    
350
/* single item */
351
#wizard .page, #networks-wizard div.container {
352
    padding: 0px 40px 20px 15px;
353
    width:447px;
354
    float:left;
355
    display:block;
356
    border:none;
357
    background-color: transparent;
358
}
359

    
360
#networks-wizard div.container {
361
    background-color: #ECF4F8;
362
    width:400px;
363
    height: 180px;
364
    margin-bottom:50px;
365
}
366

    
367
/* title */
368
#wizard h2, #networks-wizard h2 {
369
    color: #FF7B24;
370
    font-size: 100%;
371
    font-style: italic;
372
    font-weight: bold;
373
    margin-left: 37px;
374
    margin-top: 17px;
375
}
376

    
377
#networks-wizard h2 {
378
    margin-top: 15px;
379
}
380

    
381
#wizard li {
382
    margin-bottom:1.2em;
383
}
384

    
385
#wizard .pane li {
386
    margin: 0;
387
}
388

    
389
#wizard label {
390
    font-size:120%;
391
    display:block;
392
    clear: both;
393
}
394

    
395
#wizard label strong {
396
    position:relative;
397
    top:-1px;
398
    font-size: 80%;
399
    font-weight: normal;
400
}
401

    
402
#wizard label em {
403
    font-size:75%;
404
    color:#666;
405
    font-style:normal;
406
}
407

    
408
#wizard .text {
409
    width: 270px;
410
    padding: 5px;
411
    margin-top: 10px;
412
    border: 1px solid #ccc;
413
    color: #456;
414
    letter-spacing: 1px;
415
}
416

    
417
#wizard select {
418
    border:1px solid #ccc;
419
    width:94%;
420
    padding:4px;
421
    display: none;
422
}
423

    
424
#wizard .double label {
425
    width:50%;
426
    float:left;
427
}
428

    
429
#wizard .double .text {
430
    width:93%;
431
}
432

    
433
#wizard .clearfix {
434
    clear:left;
435
    padding-top:10px;
436
}
437

    
438
#wizard .right {
439
    float:right;
440
}
441

    
442
#wizard .error {
443
    border:1px solid red;
444
}
445

    
446
#wizard a:hover div.image {
447
    background-color: #C5DEE9;
448
}
449

    
450
.selecteddiv {
451
    background-color: #C5DEE9 !important;
452
}
453

    
454
#wizard label a:hover strong {
455
    color: black;
456
}
457

    
458
#wizard div.image span.size {
459
    font-size: 75%;
460
    color: #666;
461
}
462

    
463
#wizard div.image .radio {
464
    float: left;
465
    margin-top: 10px;
466
}
467

    
468
#wizard div.image span.image-id, #wizard div.image span.description {
469
    font-size: 75%;
470
    color: #666;
471
    font-weight: normal;
472
    display:inline;
473
}
474

    
475
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
476
    color: black;
477
}
478

    
479
#wizard .cost {
480
    color: #79A4C1;
481
    margin-top: 40px;
482
    clear:both;
483
    margin-left: 15px;
484
    font-size: 95%;
485
}
486

    
487
#wizard #status {
488
    height: 50px;
489
    background-color: #4085A5;
490
}
491

    
492
#wizard .headernumber {
493
    font-size: 410%;
494
}
495

    
496
#wizard .headerbody {
497
    font-size: 120%;
498
    font-weight: normal;
499
    display: inline;
500
    top: -15px;
501
    position: relative;
502
}
503

    
504
#wizard .first {
505
    left: -10px;
506
}
507

    
508
#wizard .checked {
509
    color: #64a6c4 !important;
510
}
511

    
512
#wizard .li-2 {
513
    margin-top: -1px !important;
514
}
515

    
516
#wizard .img-check {
517
    margin-bottom: 8px;
518
    margin-left: -8px;
519
}
520

    
521
#wizard .li-1 .img-check {
522
    margin-left: 2px;
523
}
524

    
525
#wizard .topruler, #networks-wizard .topruler, #wizard .bottomruler, #networks-wizard .bottomruler {
526
    background-color: #CDE2EC;
527
    color: #CDE2EC;
528
    border: 0 none;
529
    height: 4px;
530
    margin-left: -1px;
531
    width: 447px;
532
    margin-bottom: 6px;
533
    margin-top: 4px;
534
}
535

    
536
#wizard .bottomruler, #networks-wizard .bottomruler {
537
    margin-top:6px;
538
}
539

    
540
#networks-wizard .topruler, #networks-wizard .bottomruler {
541
    width: 455px;
542
    float: left;
543
}
544

    
545
#wizard #cancel, #networks-wizard .cancel {
546
    background-color: #4085A5;
547
    border-color: #4085A5;
548
    text-align: center !important;
549
}
550

    
551
#wizard #cancel:hover, #networks-wizard .cancel:hover {
552
    background-color: #7DB4CD;
553
    border-color: #7DB4CD;
554
}
555

    
556
#wizard #start, #networks-wizard .create {
557
    text-align: center;
558
    background-color: #FF7F2A;
559
    border-color: #FF7F2A;
560
}
561

    
562
:focus {
563
    outline: none;
564
    -moz-outline-style: none;
565
}
566

    
567
#wizard .img-next {
568
    margin: 0 -4px -1px 8px;
569
}
570

    
571
#wizard .img-prev {
572
    margin: 0 8px -1px -4px;
573
}
574

    
575
#networks-wizard .create {
576
    float:right;
577
    width: 140px;
578
}
579

    
580
.overlay-networks-create .form-actions {
581
    float: right;
582
    margin-top: -26px !important;
583
}
584

    
585
#wizard #start:hover, #networks-wizard .create:hover {
586
    background-color: #FF9651;
587
    border-color: #FF9651;
588
}
589

    
590
#wizard .separator-end {
591
    position: absolute;
592
    background-color: #387693;
593
    height: 5px;
594
    margin-left: -14px;
595
    margin-top: 382px;
596
    width: 550px;
597
}
598

    
599
.page ul {
600
    height: 270px;
601
    overflow: auto;
602
}
603

    
604
.panes ul.pane {
605
    height: 220px;
606
}
607

    
608
#wizard #tabscontainer {
609
    background-color: #CDE2EC;
610
    height: 20px;
611
    width: 448px;
612
}
613

    
614
.page ul.tabs {
615
    overflow: hidden;
616
    height: auto;
617
    margin-bottom: -1px;
618
    margin-top: -1px;
619
}
620

    
621
.page ul.tabs li {
622
    float: right;
623
    margin: 0 0.2em;
624
}
625

    
626
#status li {
627
    float: left;
628
    color: #387693;
629
    padding: 0 1px 0 37px;
630
    bottom: 0px;
631
}
632

    
633
#status li.active .headernumber {
634
    color: #FFFFFF;
635
}
636

    
637
#status li.active .headerbody {
638
    color: #FFFFFF;
639
}
640

    
641
div.image-container {
642
    border-bottom: 1px solid #CCCCCC;
643
    margin-left: 10px;
644
    margin-right: 10px;
645
}
646

    
647
#page2-container {
648
    background-color: #ECF4F8;
649
    height: 193px;
650
    margin-top: 3px;
651
    padding-top: 25px;
652
}
653

    
654
#page3-container {
655
    background-color: #ECF4F8;
656
    height: 245px;
657
    margin-bottom: 32px;
658
    padding-left: 50px;
659
}
660

    
661
/* slider root element */
662
.slider {
663
    border: 1px solid #666;
664
    cursor: pointer;
665
    display: inline !important;
666
    float: left;
667
    margin: 5px 0 20px 10px;
668
    position: relative;
669
    width: 250px;
670
}
671

    
672
.sliders {
673
    float:left;
674
    width: 40px;
675
    margin-left: 10px;
676
    margin-top: 3px;
677
}
678

    
679
.units {
680
    padding-left:10px;
681
}
682

    
683
.slider-container {
684
    padding-bottom: 15px;
685
    margin-left: 5px;
686
}
687

    
688
/* drag handle */
689
.handle {
690
    -moz-box-shadow: 0 0 2px #000000;
691
    background: url("./h30.png") repeat-x scroll 0 0 #FFFFFF;
692
    border: 1px solid #000000;
693
    cursor: move;
694
    display: block;
695
    height: 10px;
696
    margin-top: -8px;
697
    position: absolute;
698
    width: 8px;
699
}
700

    
701
/* progress bar (enabled with progress: true) */
702
.progress {
703
    height: 3px;
704
    background-color: #387693;
705
}
706

    
707
/* the input field */
708
.range {
709
    border: 1px solid #387693;
710
    float: left;
711
    font-size: 100%;
712
    margin: -3px 0 0 15px;
713
    padding: 2px 5px 2px 0;
714
    text-align: right;
715
    width: 50px;
716
}
717

    
718
.selectedrange {
719
    border-color: #5599FF;
720
}
721

    
722
#credits-indicator {
723
    background-color: #ECF4F8;
724
    float: none;
725
    margin: 0 0 0 10px;
726
    border: 1px solid #387693;
727
    color: #387693;
728
}
729

    
730
/* machines */
731
.machine-container {
732
    position:relative;
733
}
734

    
735
.icon .machine-container.last .machine-data-cont, .machine-container:last-child .machine-data-cont {
736
    margin-bottom:0;
737
    padding-bottom: 0;
738
    border-bottom: none;
739
}
740

    
741
.icon .machine-container.last .machine-data, .machine-container:last-child .machine-data {
742
    border-bottom: none;
743
}
744

    
745
.icon .machine-container .subtitle {
746
    font-size: 0.70em;
747
    color: #222;
748
    line-height: 23px;
749
    height: 23px;
750
    margin-top: -5px;
751
}
752

    
753
.icon .machine-container .subtitle {
754
    
755
}
756

    
757
.icon .machine-container .info {
758
    margin-top: 2px;
759
    height: 17px;
760
}
761

    
762
.icon .machine-container .building-progress {
763
    vertical-align: top;
764
}
765

    
766
.ip-version-label {
767
    font-size: 0.8em;
768
    padding: 0.3em;
769
    background-color: #C4DDE9;
770
    color: #000;
771
}
772

    
773
.icon .machine-data {
774
    width: 520px;
775
    float: left;
776
    background-color: transparent;
777
}
778

    
779
.icon .machine-info {
780
    padding: 10px 0;
781
}
782

    
783
.icon .machine-details .name {
784
    height: 28px;
785
}
786

    
787
.icon .machine-connect {
788
    width: 80px;
789
    float: left;
790
}
791

    
792
.icon .machine-details {
793
    width: 310px;
794
    float: left;
795
    margin-top: -6px;
796
}
797

    
798
.icon .state {
799
    font-size: 98%;
800
    width: 120px;
801
    margin-right: 10px;
802
    float: left;
803
    height: 55px;
804
    margin-top: -5px;
805
}
806

    
807
.vm-actions {
808
    position: relative;
809
}
810

    
811
.icon .vm-actions {
812
    /*display: none;*/
813
}
814

    
815
.icon .vm-actions, .network .vm-actions {
816
    width: 180px;
817
    height: 78px;
818
    float: left;
819
}
820

    
821
.icon .machine-container:hover .machine-data {
822
    background-color:#A1C8DB !important;
823
}
824

    
825
.icon .machine-container:hover .vm-actions {
826
    display: block;
827
}
828

    
829
.vm-actions {
830
    font-size: 75%;
831
}
832

    
833
.vm-actions a {
834
    color: black;
835
    height: 15px;
836
    margin: 0 0 1px 4px;
837
    padding: 1px;
838
    padding-left: 8px;
839
    display: block;
840
}
841

    
842
.vm-actions a:hover {
843
    background-color:#A1C8DB;
844
    color: #fff;
845
    border-left: 4px solid #7DB4CD;
846
    padding-left: 4px;
847
}
848

    
849
.vm-actions a.selected {
850
    color: #FF7F2A !important;
851
}
852

    
853
.vm-actions a.selected {
854
    background-color:transparent;
855
}
856

    
857
.vm-actions .action-container {
858
    position: relative;
859
}
860

    
861
.vm-actions .action-container .confirm_single {
862
    position: absolute;
863
    right: -20px;
864
    top: -2px;
865
}
866

    
867
div.list div.actions a.enabled.destroy {
868
    color: #981D1D;
869
}
870

    
871
.vm-actions .action-container.destroy {
872
    position: absolute;
873
    bottom: -2px;
874
    width: 100%;
875
    left: 0px;
876
    background: transparent;
877
}
878

    
879
.vm-actions .action-container.destroy a {
880
    color: #981D1D;
881
}
882

    
883
.icon .light-background .machine-data, div.network.light-background, div.network.expand {
884
    background-color:#aed2e3 !important;
885
}
886

    
887
.single .light-background {
888
    background-color:#aed2e3;
889
}
890

    
891
.icon .machine-data-cont {
892
    margin-bottom: 5px;
893
    padding-bottom: 5px;
894
    border-bottom: 1px solid #D1E7F0;
895
    width: 520px;
896
    float: left;
897
}
898
.icon .terminated .machine-data-cont {
899
    border-color: #B6CED6;
900
}
901

    
902
.machine a {
903
    font-weight: normal;
904
    text-decoration: none;
905
}
906

    
907
.machine span.name, .machine span.ip {
908
    font-size: 75%;
909
    color: black;
910
    margin-top: 6px;
911
}
912

    
913
.machine span.name {
914
    font-weight: bold;
915
}
916

    
917
.oldValue {
918
    display:none;
919
}
920

    
921
.state {
922
}
923

    
924
.state div {
925
    text-align: right;
926
    margin-right: 3px;
927
}
928

    
929
/* icon view actions */
930
div.machine div.actions a.shutdown-padding {
931
    margin-bottom: 22px;
932
}
933

    
934
div.actions a.enabled:hover{
935
    color: black !important;
936
    text-decoration: underline;
937
    display: block;
938
}
939

    
940
div.machine:hover .actions a {
941
    visibility: visible;
942
}
943

    
944
div.machine div.display a{
945
    visibility: visible;
946
}
947

    
948
div.machine div.actions .disabled {
949
    display: none;
950
}
951

    
952
div.single-container div.vm-actions .disabled {
953
    display: none;
954
}
955

    
956
div.machine div.actions .disabled {
957
    display: none;
958
}
959

    
960
div.connect-arrow {
961
    background: url(/static/connect-arrow.png) no-repeat;
962
    height: 28px;
963
    width:14px;
964
    position: absolute;
965
    display: none;
966
}
967

    
968
.machine div.connect-arrow {
969
    display: none;
970
    left: -3px;
971
    position: absolute;
972
    top: 9px;
973
}
974

    
975
div.connect-arrow:hover, div.connect-arrow.border-hover, div.connect-arrow-ie, div.connect-arrow.border-ie {
976
    cursor: pointer;
977
    background: url(/static/connect-arrow-hover.png) no-repeat;
978
    height: 28px;
979
    width:26px;
980
}
981

    
982
div.connect-border {
983
    opacity: 0.8;
984
    filter: alpha(opacity = 80);
985
    background-color:#4fe0c3;
986
    height:28px;
987
    width: 12px;
988
    position: absolute;
989
    display: none;
990
}
991

    
992
div.connect-border:hover {
993
    cursor: pointer;
994
}
995

    
996
.machine div.connect-border {
997
    display: none;
998
    left: -15px;
999
    position: absolute;
1000
    top: 9px;
1001
}
1002

    
1003
.standard .machine .logo {
1004
    float: left;
1005
    width: 50px;
1006
    height: 54px;
1007
    margin: 4px 14px 0;
1008
}
1009
.machine .logo {
1010
    background-image: url("./icons/machines/medium/unknown-sprite.png");
1011
    background-repeat: no-repeat;
1012
    cursor: pointer;
1013
}
1014

    
1015
.standard .machine .single-image-state1 {
1016
    background-position: 0px 0;
1017
}
1018

    
1019
.standard .machine .single-image-state3 {
1020
    background-position: -100px 0;
1021
}
1022

    
1023
.standard .machine .single-image-state4 {
1024
    background-position: -150px 0;
1025
}
1026

    
1027
.standard .machine .single-image-state2 {
1028
    background-position: -50px 0;
1029
}
1030

    
1031
.standard .running .machine .logo {
1032
   cursor: pointer;
1033
}
1034

    
1035
.list .machine img {
1036
    margin: 0;
1037
}
1038

    
1039
.icon div.ip, .icon div.ips {
1040
    font-size: 75%;
1041
}
1042

    
1043
div.indicators {
1044
    margin-right: 2px !important;
1045
}
1046
div.indicator1, div.indicator2, div.indicator3, div.indicator4 {
1047
    background-color: #63cf1c;
1048
    width:10px;
1049
    height:11px;
1050
    clear: none;
1051
    float:right;
1052
}
1053

    
1054
.view-separator {
1055
    color:#5F8DD3;
1056
}
1057

    
1058
.running.disabled {
1059
    background: transparent;
1060
}
1061

    
1062
.running-state .indicator1, .running-state .indicator2, .running-state .indicator3, .running-state .indicator4 {
1063
    background-color: #63cf1c;
1064
}
1065

    
1066
.rebooting-state .indicator1, .rebooting-state .indicator2, .rebooting-state .indicator3, .rebooting-state .indicator4 {
1067
    background-color: #d4aa00;
1068
}
1069

    
1070
.error-state .indicator1, .error-state .indicator2, .error-state .indicator3, .error-state .indicator4 {
1071
    background-color: #ff0000;
1072
}
1073

    
1074
.terminated-state .indicator1, .terminated-state .indicator2, .terminated-state .indicator3, .terminated-state .indicator4 {
1075
    background-color: #5e1616;
1076
}
1077

    
1078
.build-state .indicator1, .build-state .indicator2, .build-state .indicator3, .build-state .indicator4 {
1079
    background-color: #FF7F2A;
1080
}
1081

    
1082
.destroying-state .indicator1, .destroying-state .indicator3, .destroying-state .indicator2, .destroying-state .indicator4 {
1083
    background-color: #4085a5 !important;
1084
}
1085

    
1086
.shutting-state .indicator1, .shutting-state .indicator3, .shutting-state .indicator2, .shutting-state .indicator4 {
1087
    background-color: #940606;
1088
}
1089

    
1090
.starting-state .indicator1, .starting-state .indicator2, .starting-state .indicator3, .starting-state .indicator4 {
1091
    background-color: #9ed976;
1092
}
1093

    
1094
.network-indicator .indicator1, .network-indicator .indicator2, .network-indicator .indicator3, .network-indicator .indicator4 {
1095
    background-color: #63cf1c;
1096
}
1097

    
1098
.network-indicator.in-progress .indicator1, .network-indicator.in-progress .indicator2, .network-indicator.in-progress .indicator3, .network-indicator.in-progress .indicator4 {
1099
    background-color: #FF7F2A;
1100
}
1101

    
1102
.running, .terminated {
1103
    background: #EFF7FA repeat scroll 0 0;
1104
    padding-bottom: 15px;
1105
}
1106

    
1107
.running, #machinesview-list, .single {
1108
}
1109

    
1110
.terminated {
1111
    background:#DCE5E8  repeat scroll 0 0;
1112
    padding-top: 15px;
1113
    margin-top: 15px;
1114
}
1115

    
1116
span.rename {
1117
    background-repeat: no-repeat;
1118
    color: transparent;
1119
    font-size: 75%;
1120
    font-weight: normal;
1121
    margin-left: 10px;
1122
    padding-left: 10px;
1123
    text-align: left;
1124
    cursor: pointer;
1125
}
1126

    
1127
div.name:hover span.rename, span.rename_hovered {
1128
    color: #3D3D3D;
1129
    margin-top: 0.4em;
1130
    background-image: url(./pencil.png);
1131
    background-position: 0 3px;
1132
}
1133

    
1134
.machine div.info {
1135
    font-size: 75%;
1136
}
1137

    
1138
div.machine:hover div.info-header, div.machine:hover div.toggler div.down {
1139
    background-color: #84b7d0;
1140
}
1141

    
1142
div.machine div.info-label.darker, .single div.tags-label.darker, div.network .darker {
1143
    background-color: #5CA1C0;
1144
}
1145

    
1146
.machine div.info div.info-label {
1147
    font-size: 75%;
1148
    height:16px;
1149
    width: 30px;
1150
    padding: 1px 0 0 5px;
1151
}
1152

    
1153
.machine div.info div.toggler, .single div.tags div.toggler, div.network div.toggler {
1154
    width:15px;
1155
    height:17px;
1156
    margin-top: -11px;
1157
    margin-left: 37px;
1158
}
1159

    
1160
div.network div.toggler {
1161
    margin-left: 90px;
1162
}
1163

    
1164
.machine div.info div.down {
1165
    background: url(/static/down-arrow.png) no-repeat scroll 1px 1px;
1166
}
1167

    
1168
.single div.tags div.down {
1169
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1170
}
1171

    
1172
.network div.network-machines div.down {
1173
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1174
}
1175

    
1176
.network div.network-machine div.firewall div.down {
1177
    background: url(/static/down-arrow.png) no-repeat scroll 2px 2px;
1178
}
1179

    
1180
.machine div.info div.up {
1181
    background: url(/static/up-arrow.png) no-repeat scroll 1px 0;
1182
}
1183

    
1184
.single div.tags div.up {
1185
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1186
}
1187

    
1188
.network div.network-machines div.up {
1189
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1190
}
1191

    
1192
.network div.network-machine div.firewall div.up {
1193
    background: url(/static/up-arrow.png) no-repeat scroll 2px 2px;
1194
}
1195

    
1196
button {
1197
    background-color: #87AADE;
1198
    border: 1px solid #87AADE;
1199
    color: #FFFFFF;
1200
    cursor: pointer;
1201
    height: 23px;
1202
    width: 120px;
1203
}
1204

    
1205
button.next {
1206
    background-color: #4085A5;
1207
    border-color: #4085A5;
1208
    text-align: right;
1209
}
1210

    
1211
button.next:hover {
1212
    background-color: #7DB4CD;
1213
    border-color: #7DB4CD;
1214
}
1215

    
1216
button.prev {
1217
    background-color: #4085A5;
1218
    border-color: #4085A5;
1219
    margin-left: -1px;
1220
    text-align: left;
1221
}
1222

    
1223
button.prev:hover {
1224
    background-color: #7DB4CD;
1225
    border-color: #7DB4CD;
1226
}
1227

    
1228
.image-logo {
1229
    float: left;
1230
    margin-right: 1em;
1231
    margin-left: 1.5em;
1232
    margin-top: 4px;
1233
}
1234

    
1235
.icon div.image {
1236
    clear: both;
1237
    display: block;
1238
    margin-bottom: 3px;
1239
    margin-top: 3px;
1240
    padding: 5px;
1241
}
1242

    
1243
div#view-select {
1244
    clear: both;
1245
    color: white;
1246
    position: absolute;
1247
    right: 15px;
1248
    top: 15px;
1249
}
1250

    
1251
a.machines_view_link {
1252
    text-decoration: none;
1253
    font-size: 0.7em;
1254
    padding: 4px;
1255
    padding-right: 8px;
1256
    color: #5CA1C0;
1257
    margin-left: 5px;
1258
    background-repeat: no-repeat;
1259
    background-color: #C9DFEA;
1260
}
1261

    
1262
a.machines_view_link span {
1263
    float: left;
1264
}
1265

    
1266
a.machines_view_link span.ico {
1267
    width: 17px;
1268
    height: 15px;
1269
    margin-right: 10px;
1270
    background-position: -36px 0;
1271
}
1272

    
1273
a.machines_view_link:hover {
1274
    background-color: #A1C8DB;
1275
    color: #fff;
1276
}
1277
a.machines_view_link:hover span.ico {
1278
    background-position: -0px 0px;   
1279
}
1280

    
1281
a.machines_view_link.activelink span.ico {
1282
    background-position: -18px 0px;
1283
}
1284
a.machines_view_link.activelink {
1285
    color: #fff;
1286
    background-color: #5CA1C0;
1287
}
1288

    
1289
div#view-select a {
1290
    display: block;
1291
    float: left;
1292
}
1293

    
1294
a#list:hover {
1295
    background: #5f8dd3;
1296
}
1297

    
1298
a#machines_view_icon_link:active, a#machines_view_list_link:active {
1299
    color:white;
1300
}
1301

    
1302
a#machines_view_icon_link span.ico {
1303
    background-image: url(./icon-view.png);
1304
}
1305

    
1306
a#machines_view_list_link span.ico {
1307
    background-image: url(./list-view.png);
1308
}
1309

    
1310
a#machines_view_single_link span.ico {
1311
    background-image: url(./single-view.png);
1312
}
1313

    
1314
#machinetype {
1315
    background-color: #CDE2EC;
1316
    height: 25px;
1317
    margin-bottom: 0px !important;
1318
}
1319

    
1320
div.machine-type {
1321
    float: left;
1322
    margin: 4px 18px 20px;
1323
}
1324

    
1325
.machine-type .active {
1326
    color: #FFFFFF
1327
}
1328

    
1329
div.machine-type label.disabled {
1330
    color: #aaa !important;
1331
}
1332

    
1333
#machinesview {
1334
}
1335

    
1336
#machines-pane {
1337
}
1338

    
1339
.list#machinesview {
1340
    margin-left: -20px;
1341
    display:none;
1342
}
1343

    
1344
#machinesview-list.list {
1345
    background: #EFF7FA  repeat scroll 0 0;
1346
    padding-left: 15px;
1347
    padding-bottom: 15px;
1348
}
1349

    
1350
#machinesview_content {
1351
    display:none;
1352
}
1353

    
1354
.list-machines {
1355
    min-width: 515px;
1356
}
1357

    
1358
#emptymachineslist {
1359
    background-color: #6BA9C6;
1360
    color: #A0A0A0;
1361
    display: none;
1362
    padding: 65px 150px 35px;
1363
    text-align: justify;
1364
    margin-top: -70px;
1365
}
1366

    
1367
#welcomeheader {
1368
    color:white;
1369
    text-align: center;
1370
}
1371

    
1372
.welcomebody {
1373
    color: white;
1374
    font-size:80%;
1375
}
1376

    
1377
.welcomebody a {
1378
    color: white;
1379
}
1380

    
1381
.welcomefooter {
1382
    color: white;
1383
    font-size:60%;
1384
}
1385

    
1386
.welcomefooter a {
1387
    color: white;
1388
}
1389

    
1390
.emptycreatecontainer {
1391
    margin-left: 430px !important;
1392
    position: absolute;
1393
    margin-top: 5px !important;
1394
    width: 180px;
1395
    background-color: #CCCCCC;
1396
    padding: 5px;
1397
    padding-left: 10px;
1398
}
1399

    
1400
.emptycreate {
1401
    margin: 20px 10px 5px 0 !important;
1402
}
1403

    
1404
#createbody {
1405
    display:none;
1406
    font-size: 80%;
1407
}
1408

    
1409
div.list label img {
1410
    margin: 5px 5px -3px 0;
1411
}
1412

    
1413
div.list label {
1414
    color: #3D3D3D;
1415
    font-size: 75%;
1416
}
1417

    
1418
div.list .state {
1419
    margin-top: 7px;
1420
    margin-right: 10px;
1421
}
1422

    
1423
div.list table tbody {
1424
    margin-top: 8px;
1425
}
1426

    
1427
div.list table tr.checked td {
1428
    background-color: #A1C8DB !important;
1429
}
1430

    
1431
div.list table tr:hover td,
1432
div.list table tr.inactive:hover td,
1433
div.list table tr.error:hover td {
1434
    background-color: #A1C8DB;
1435
    color: #fff;
1436
}
1437

    
1438
div.list table td.name {
1439
    min-width: 170px;
1440
}
1441

    
1442
div.list table td.status {
1443
    font-size: 0.9em !important; 
1444
    text-align: right;
1445
    min-width: 90px;
1446
    color: #000;
1447
}
1448

    
1449
div.list table td.flavor {
1450
    font-size: 0.8em;
1451
}
1452

    
1453
div.list table td {
1454
    border-bottom: 1px solid #DDD;
1455
}
1456

    
1457
div.list table tr.error td.status {
1458
    color: #800000 !important;
1459
    font-weight: bold;
1460
}
1461

    
1462
div.list table tr.error td {
1463
    background-color: #DCE5E8;
1464
}
1465

    
1466
div.list table tr.inactive td {
1467
    background-color: #DCE5E8;
1468
}
1469

    
1470
div.list .stopped {
1471
    margin-top: 8px;
1472
}
1473

    
1474
/* root element for tabs  */
1475
#wizard ul.tabs {
1476
    margin-right: -1px;
1477
    float: right;
1478
}
1479

    
1480
#wizard div.panes {
1481
    height: 247px;
1482
    clear:both;
1483
    margin-top: 3px;
1484
}
1485

    
1486
.typebody {
1487
    font-size: 80%;
1488
    font-weight: normal;
1489
    position: relative;
1490
    top: -3px;
1491
}
1492

    
1493
.typehover {
1494
    color: #FFFFFF;
1495
}
1496

    
1497
#label-name {
1498
    margin-top: 10px;
1499
}
1500

    
1501
/* single tab */
1502
#wizard ul.tabs li {
1503
    margin-bottom: 0;
1504
    list-style-type:none;
1505
    float: left;
1506
}
1507

    
1508
/* link inside the tab. uses a background image */
1509
#wizard ul.tabs a {
1510
    display:block;
1511
    padding: 0.2em 0.5em 0.1em 0.4em;
1512
    text-decoration:none;
1513
    color: #FFFFFF;
1514
    position:relative;
1515
    top:1px;
1516
    outline:0;
1517
    background-color: transparent;
1518
    text-align: center;
1519
    width: 100px;
1520
    white-space: nowrap;
1521
    height: 17px;
1522
}
1523

    
1524
#wizard ul.tabs a:hover {
1525
    color: #FFFFFF;
1526
    background-color:#4085A5;
1527
}
1528

    
1529
/* selected tab */
1530
#wizard ul.tabs a.current {
1531
    color: white;
1532
    background-color: #7DB4CD;
1533
    cursor: default;
1534
}
1535

    
1536
#wizard #standard-images {
1537
    background-color: #ECF4F8;
1538
}
1539

    
1540
div.list div.actions {
1541
    display: none;
1542
    clear: left;
1543
    float: right;
1544
    margin-right: 15px;
1545
    margin-top: 37px;
1546
    text-align: right;
1547
    width: 120px;
1548
}
1549

    
1550
div.list div.actions a {
1551
    clear: left;
1552
    color: #A1A1A1;
1553
    display: block;
1554
    font-size:75%;
1555
    margin-bottom: 2px;
1556
}
1557

    
1558
div.list div.actions a:hover {
1559
    background-color: transparent;
1560
}
1561

    
1562
div.list div.actions a.enabled {
1563
    color: #3D3D3D;
1564
}
1565

    
1566
div.list div.actions a.enabled:hover{
1567
    cursor: pointer;
1568
    color: black;
1569
    text-decoration: underline;
1570
}
1571

    
1572
div.list div.actions a.selected {
1573
    color: #FF7F2A !important;
1574
}
1575

    
1576
input.machine {
1577
    width: 13px;
1578
    height: 13px;
1579
    top: -1px;
1580
    overflow: hidden;
1581
}
1582

    
1583
.description-container {
1584
    display: inline-block;
1585
    position: relative;
1586
    width: 300px;
1587
}
1588

    
1589
#wizard .button-container {
1590
    height: 20px;
1591
}
1592

    
1593

    
1594
/* metadata dropdown combo */
1595
.meta-key {
1596
    margin-right: 18px;
1597
    float:left;
1598
}
1599

    
1600
/* notification box */
1601
#yes-no {
1602
    height: 150px;
1603
    z-index: 9999;
1604
    border-bottom: 5px solid #4085A5;
1605
}
1606

    
1607
#yes-no p, #yes-no button {
1608
    margin-top: 15px;
1609
}
1610

    
1611
#error-success, .notification-box {
1612
    z-index: 9999;
1613
    border-bottom: 5px solid #4085A5;
1614
    min-height: 150px;
1615
    top: 50px !important;
1616
    position: absolute;
1617
}
1618

    
1619
#error-success p, .notification-box p {
1620
    margin-top: 5px;
1621
}
1622

    
1623
.error-report {
1624
    display: none;
1625
}
1626

    
1627
#error-success .error-report {
1628
    position: absolute;
1629
    top: 140px;
1630
    right: 40px;
1631
}
1632

    
1633
.error .error-report {
1634
    display: block;
1635
}
1636

    
1637
#error-success .error-report .errormsg {
1638
    display: none;
1639
}
1640

    
1641
#error-success .error-report .success {
1642
    display: none;
1643
}
1644

    
1645
#error-success .error-report .sending {
1646
    display: none;
1647
}
1648

    
1649
#error-success .error-report .send-btn {
1650
    color: #4085A5;
1651
    text-decoration: underline;
1652
    cursor: pointer;
1653
}
1654

    
1655
#error-success strong, .notification-box strong {
1656
    color: #F49C1A;
1657
}
1658

    
1659
#error-success .close, .notification-box .close {
1660
    background-image: url("./close-popup.png");
1661
    background-repeat: no-repeat;
1662
    cursor: pointer;
1663
    height: 13px;
1664
    position: absolute;
1665
    right: 7px;
1666
    top: 9px;
1667
    width: 13px;
1668
}
1669

    
1670
.popup-header-error {
1671
    background-color: #800000 !important;
1672
}
1673

    
1674
.popup-border-error {
1675
    border-color: #800000 !important;
1676
    width:auto;
1677
}
1678

    
1679
.popup-details-error {
1680
    border: none !important;
1681
}
1682

    
1683
.popup-separator-error {
1684
    margin-bottom: 5px !important;
1685
}
1686

    
1687
#error-success .popup-header, .notification-box .popup-header {
1688
    background-color: #4085A5;
1689
    color: white;
1690
    font-size: 95%;
1691
    font-weight: normal;
1692
    height: 20px;
1693
    margin-left: -16px;
1694
    margin-top: -16px;
1695
    padding-bottom: 2px;
1696
    padding-left: 30px;
1697
    padding-top: 10px;
1698
    width: 482px;
1699
    margin-right:-16px;
1700
}
1701

    
1702

    
1703
#error-success.success h3 span.header-box, .notification-box h3 span.header-box {
1704
    background-color: #71c837;
1705
    display: block;
1706
    background-image: url("./save-green.png");
1707
    background-position: right 0;
1708
    background-repeat: no-repeat;
1709
    width: 80px;
1710
    padding: 3px 3px 3px 8px;
1711
    margin-top: -6px;
1712
    font-size: 90% !important;
1713
    margin-left: -11px;
1714
}
1715

    
1716
#error-success .popup-body, .notification-box .popup-body {
1717
    background: url("./popup-bg.png") repeat-x scroll 0 0 transparent;
1718
    margin-left: -16px;
1719
    margin-right: -16px;
1720
    margin-top: 1px;
1721
    min-height: 142px;
1722
    padding-top: 10px;
1723
}
1724

    
1725
#error-success .popup-body-inner, .notification-box .popup-body-inner {
1726
    background: url("./popup-inner-bg.png") repeat-x scroll 0 0 transparent;
1727
    font-size: 80%;
1728
    min-height: 120px;
1729
    margin-left: 20px;
1730
    padding-left: 15px;
1731
    width: 460px;
1732
}
1733

    
1734
#error-success .popup-separator, .notification-box .popup-seperator {
1735
    background-color: #74AEC9;
1736
    height: 1px;
1737
    font-size:1%;
1738
    width: 442px;
1739
    margin-bottom: 30px;
1740
}
1741

    
1742
#error-success .machine-now-building {
1743
    font-size: 95%;
1744
    padding-bottom: 7px;
1745
    padding-top: 10px;
1746
}
1747

    
1748
#error-success.success .machine-now-building {
1749
    padding-bottom: 14px !important;
1750
}
1751

    
1752
#error-success .password-container, .notification-box .password-container {
1753
    width: 430px;
1754
    padding: 5px;
1755
    border: 2px solid #75b54a;
1756
    background-color: #aade87;
1757
}
1758

    
1759
#error-success .password-header, .notification-box .password-header {
1760
    margin-bottom: 5px;
1761
}
1762

    
1763
#error-success .password, .notification-box .password {
1764
    color: #447821;
1765
}
1766

    
1767
#error-success .popup-details, .notification-box .popup-details {
1768
    border: 2px solid #FF7F2A;
1769
    float: left;
1770
    margin-left: 10px;
1771
    padding: 2px;
1772
}
1773

    
1774
#error-success.success .popup-details, .notification-box .popup-details {
1775
    border: none !important;
1776
    float: none !important;
1777
    margin-left: none !important;
1778
    margin-top: 10px;
1779
}
1780

    
1781
#error-success.success .popup-separator, .notification-box .popup-seperator {
1782
    margin-bottom: 14px !important;
1783
}
1784

    
1785
#error-success .write-password, .notification-box .write-password {
1786
    margin-bottom: 5px;
1787
    padding-left: 30px;
1788
}
1789

    
1790
#error-success .write-password-password, .notification-box .write-password-password {
1791
    padding-left: 30px;
1792
    color: #447821;
1793
    display: inline;
1794
    font-size: 110%;
1795
    font-weight: bold;
1796
}
1797

    
1798
#error-success .write-password-details, .notification-box .write-password-details {
1799
    font-size: 75%;
1800
}
1801

    
1802
.more-details {
1803
    display: block;
1804
}
1805

    
1806
.notification-box h3 span.header-box {
1807
    background: transparent;
1808
}
1809

    
1810
.notification-box .machine-now-building {
1811
    padding: 20px 0;
1812
}
1813

    
1814
.notification-box .header-box {
1815
    width: auto !important;
1816
}
1817

    
1818
.notification-box .password {
1819
    text-align: center;
1820
}
1821
.notification-box .password a:hover {
1822
    background-color: #447821;
1823
    color: #fff;
1824
}
1825

    
1826
.notification-box .password a {
1827
    padding: 0.2em;
1828
    text-align: center;
1829
    color: #447821;
1830
    font-weight: bold;
1831
    font-size: 1.2em;
1832
    text-decoration: none;
1833
}
1834

    
1835
.popup-details a:link, .popup-details a:visited{
1836
    color: black;
1837
}
1838

    
1839
/* Confirmation boxes */
1840
div.confirm_single, div.confirm_multiple, div.action_error {
1841
    display: none;
1842
    color: black;
1843
}
1844

    
1845
div.confirm_single button, div.confirm_multiple button, div.action_error button {
1846
    font-size: 100%;
1847
    cursor: pointer;
1848
    color: black;
1849
    height: 20px !important;
1850
}
1851

    
1852
div.confirm_single button {
1853
    border: none;
1854
}
1855

    
1856
div.confirm_single button.yes {
1857
    width: 90px;
1858
    background-color:#FF7F2A;
1859
}
1860

    
1861
div.confirm_single button.yes:hover {
1862
    background-color: #FF9955;
1863
}
1864

    
1865
div.confirm_single button.no {
1866
    width: 20px;
1867
    margin-left:-5px;
1868
    background-color: #FF9955;
1869
    color:#d95d0a;
1870
}
1871

    
1872
div.confirm_single button.no:hover {
1873
    color: white;
1874
}
1875

    
1876
div.confirm_multiple_cont {
1877
    background-color: #406A7D;
1878
    margin-top: 0px;
1879
    padding: 3px;
1880
    border-top: 1px solid #444;
1881
    border-bottom: 1px solid #444;
1882
    padding-top:0px;
1883
    margin-top: -1px;
1884
}
1885

    
1886
div.confirm_reboot_required {
1887
}
1888

    
1889
div.confirm_multiple {
1890
    font-size: 65%;
1891
    z-index: 8000;
1892
    /*height: 28px;*/
1893
    width: 700px;
1894
    margin-top: 15px;
1895
}
1896

    
1897
div.confirm_multiple p {
1898
    float: left;
1899
    color: #FFF;
1900
    font-weight: bold;
1901
    margin: 7px 0 0 10px;
1902
}
1903

    
1904
#networks-pane {
1905
    display: none;
1906
}
1907

    
1908
#networks-pane div.confirm_multiple p {
1909
    margin: 7px 0 0 100px;
1910
}
1911

    
1912
div.confirm_multiple button {
1913
    float: right;
1914
    background-color: transparent;
1915
    border: 1px solid #5CA1C0;
1916
    margin: 4px 5px 0 0;
1917
}
1918

    
1919
div.confirm_multiple button.yes {
1920
    border-color: #FF7F2A;
1921
    padding: 0 12px;
1922
}
1923

    
1924
div.confirm_multiple button.yes:hover {
1925
    background-color: #FF7F2A;
1926
}
1927

    
1928
div.confirm_multiple button.no {
1929
    padding: 0px 16px;
1930
}
1931

    
1932
div.confirm_multiple button.no:hover {
1933
    background-color: #5CA1C0;
1934
}
1935

    
1936
div.action_error {
1937
    width: 120px;
1938
    margin: 14px 0 0 37px;
1939
    background-color: #981D1D;
1940
    font-size: 75%;
1941
    z-index:1;
1942
    color: #FFF;
1943
    position:absolute;
1944
    top: 0px;
1945
}
1946

    
1947
div.action_error .action-error-msg {
1948
    background-color: #fff;
1949
    color: #981D1D;
1950
    border: 1px solid #981D1D;
1951
    padding: 4px;
1952
}
1953
div.action_error .action-error-msg .action {
1954
    font-weight: bold;
1955
}
1956

    
1957
div.action_error .action-error-msg {
1958
    font-size: 0.8em;
1959
}
1960

    
1961
.action_error button {
1962
    width: 75px;
1963
    background-color: transparent;
1964
    border: 1px solid;
1965
    border-color: #981D1D;
1966
    color: #fff !important;
1967
    float: left;
1968
}
1969

    
1970
div.action_error button.details {
1971
    padding-right: 5px;
1972
    width: 100px;
1973
    border-bottom: 2px solid #981D1D;
1974
    border-right: 1px solid #981D1D;
1975
    border-left: 2px solid #981D1D;
1976
    background-color: #E24B4B;
1977
}
1978

    
1979
div.action_error button.close-action-error {
1980
    background-image: url("./option-action-remove.png");
1981
    background-color: #fff;
1982
    background-repeat: no-repeat;
1983
    background-position: center center;
1984
    width: 20px;
1985
    border-bottom: 2px solid #981D1D;
1986
    border-right: 2px solid #981D1D;
1987
    border-top: 1px solid #981D1D;
1988
}
1989

    
1990
div.action_error button.details:hover {
1991
    background-color: #FF7F2A;
1992
}
1993

    
1994
div#aboutuser{
1995
    float:right;
1996
    clear: both;
1997
    color: #FFFFFF;
1998
    font-size: 75%;
1999
    margin-top: -25px;
2000
}
2001

    
2002
div#user{
2003
    clear: both;
2004
    color: #FFFFFF;
2005
    font-size: 75%;
2006
    margin-top: 38px;
2007
    padding-bottom: 10px;
2008
    z-index: 500;
2009
    position: absolute;
2010
    right:0;
2011
}
2012

    
2013
div#user a{
2014
    color: #FFFFFF;
2015
    text-decoration: none;
2016
}
2017

    
2018
div#user a.current_lang {
2019
    color: #72ADC8;
2020
}
2021

    
2022
div#user .usermenu {
2023
    float: left;
2024
    cursor: pointer;
2025
    overflow: hidden;
2026
    padding-top: 5px;
2027
    margin-top: -5px;
2028
    position: relative;
2029
}
2030

    
2031
div#user .username {
2032
    display: block;
2033
    margin-right: 10px;
2034
    padding-right: 18px;
2035
    padding-left: 4em;
2036
    height: 20px;
2037
    background: url("./down-arrow-light.png") no-repeat right;
2038
    background-position: right 6px;
2039
    font-weight: normal;
2040
}
2041

    
2042
div#user .hovered {
2043
    background: #599EBD;
2044
    overflow: visible;
2045
    border-bottom: 1px solid #C7DFE9;
2046
}
2047

    
2048
div#user .hovered .username {
2049
    background-image: url("./down-arrow-lighter.png");
2050
}
2051

    
2052
div#user .active {
2053
    background-color: #BED5E0 !important;
2054
}
2055

    
2056
div#user .active .username {
2057
    color: #599EBD;
2058
    background-image: url("./down-arrow-lighter.png");
2059
}
2060

    
2061
div#user .useractions {
2062
    display: none;
2063
}
2064

    
2065
div#user .active .useractions {
2066
    display: block;
2067
    text-align: right;
2068
    color: #4085A5;
2069
    background-color: #D0E3ED;
2070
    margin-top:-1px;
2071
    border-top:1px solid #fff;
2072
    position: relative;
2073
    top: 1px;
2074
    box-shadow: 1px 1px 1px #aaa;
2075
    -moz-box-shadow: 1px 1px 1px #aaa;
2076
    -webkit-box-shadow: 1px 1px 1px #aaa;
2077
    z-index: 2000;
2078
}
2079

    
2080
div#user .useractions li {
2081
    padding: 2px 10px;
2082
    border-bottom: 1px solid #efefef;
2083
    text-align: right;
2084
    display: block;
2085
    background-color: transparent;
2086
}
2087

    
2088
div#user .useractions li a {
2089
    color: #4085A5;
2090
    display: inline-block;
2091
    padding:5px 0;
2092
    padding-left: 30px;
2093
    padding-bottom: 6px;
2094
    background-repeat: no-repeat;
2095
    background-position: center left;
2096
}
2097

    
2098
div#user .useractions li.hovered {
2099
    background-color: #E1EFF6;
2100
}
2101

    
2102
div#user .useractions li.last {
2103
    border-bottom: none;
2104
}
2105

    
2106
div#user .useractions .logout a {
2107
    background-image: url("./icon-logout.png");
2108
}
2109

    
2110
div#user .langmenu {
2111
    float: left;
2112
    border-left: 1px solid #ffffff;
2113
    padding-left: 10px;
2114
    margin-left: -1px;
2115
}
2116

    
2117
div#user .langmenu .sep {
2118
    display: inline-block;
2119
    color: #72ADC8;
2120
}
2121

    
2122
.separator {
2123
    background-color: #74AEC9;
2124
    height: 10px;
2125
    width: 700px;
2126
    font-size: 1px;
2127
    line-height: 0px;
2128
}
2129

    
2130
#disks.separator {
2131
    background-color: #dea842;
2132
}
2133

    
2134
#networks.separator {
2135
    background-color: #6c535d;
2136
}
2137

    
2138
.network-machine h5 {
2139
    margin-bottom: 26px;
2140
    margin-top:0px;
2141
}
2142

    
2143
.machine-container .separator {
2144
    width: 508px;
2145
    height: 1px;
2146
    margin-top: 2px;
2147
    background-color: #5CA1C0;
2148
    margin-left: 13px;
2149
}
2150

    
2151
.editbuttons {
2152
    display: block;
2153
    clear: none;
2154
    width: 40px;
2155
    margin-right: 0px;
2156
    padding-top: 2px;
2157
    float: right;
2158
    cursor: pointer;
2159
    position: relative;
2160
    z-index: 1000;
2161
}
2162

    
2163
div.editbuttons div.save:hover, div.editbuttons div.cancel:hover {
2164
    background-color: #84b7d0;
2165
}
2166

    
2167
div.editbuttons div.cancel:hover {
2168
    background-image: url("./cancel-onhover.png");
2169
}
2170

    
2171
.editbuttons .cancel, .editbuttons .save {
2172
    background-repeat: no-repeat;
2173
    color: transparent;
2174
    height: 16px;
2175
    width: 16px;
2176
    float: left;
2177
}
2178

    
2179
.editbuttons .cancel {
2180
    background-image: url("./cancel.png");
2181
    margin-left: 3px;
2182
}
2183

    
2184
.editbuttons .save {
2185
    background-image: url("./save.png");
2186
    margin-left: 1px;
2187
}
2188

    
2189
.editbuttons img {
2190
    float:none !important;
2191
    margin: 0px !important;
2192
}
2193

    
2194
.network .namecontainer {
2195
    font-size: 1.1em;
2196
}
2197
.network .machine-name-div .namecontainer {
2198
    font-size: 1em;
2199
    font-weight: bold;
2200
}
2201

    
2202

    
2203
.namecontainer .name {
2204
    position: relative;
2205
}
2206

    
2207
.namecontainer .name .nametextbox, .network-rename-input {
2208
    z-index: 1000;
2209
}
2210

    
2211
.nametextbox, .network-rename-input {
2212
    font-size: 65%;
2213
    width: 240px;
2214
}
2215

    
2216
.large-spinner {
2217
    background: url("./icons/indicators/large/progress.gif");
2218
    margin-left: 298px;
2219
    margin-top: 0px;
2220
    height: 31px;
2221
    width: 49px;
2222
    position: absolute;
2223
    top: 200px;
2224
}
2225

    
2226
#machinesview-icon .large-spinner {
2227
    top: 170px;
2228
}
2229

    
2230
.list .large-spinner {
2231
    margin-top:-30px;
2232
}
2233

    
2234
.single .large-spinner {
2235
    margin-top: 50px;
2236
}
2237

    
2238
div#networks-container {
2239
    display: none;
2240
}
2241

    
2242
div#networks-container .large-spinner {
2243
    margin-top: 50px;
2244
}
2245

    
2246
/* tables in list view */
2247
div.list div.dataTables_filter {
2248
    font-size: 75%;
2249
    margin-bottom: 12px;
2250
}
2251

    
2252
div.list div.dataTables_filter input{
2253
    font-size: 100%;
2254
}
2255

    
2256
.dataTables_wrapper {
2257
    width: 515px;
2258
    padding-bottom: 40px;
2259
}
2260

    
2261
div.list table thead .sorting, div.list table thead .sorting_desc, div.list table thead .sorting_asc {
2262
    padding-right: 15px !important;
2263
}
2264

    
2265
div.list table {
2266
    width: 515px;
2267
    font-size: 75%;
2268
}
2269

    
2270
div.list table tbody td {
2271
    color: #3D3D3D;
2272
    padding:6px;
2273
    vertical-align: middle;
2274
    height: 20px;
2275
}
2276

    
2277
div.list table thead tr {
2278
    border-bottom: 1px solid #aaa;
2279
}
2280
div.list table thead tr th {
2281
    background-color: #CDE2EC;
2282
    background-image: url(bg.gif);
2283
    background-repeat: no-repeat;
2284
    background-position: right 11px;
2285
    font-weight: normal;
2286
    border: 1px solid transparent;
2287
    border-bottom: none;
2288
    padding: 4px;
2289
    text-align: left;
2290
    vertical-align: middle;
2291
    cursor: pointer;
2292
}
2293

    
2294
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
2295
    background-color: #5CA1C0;
2296
}
2297

    
2298
div.list table thead .sorting_asc {
2299
    background-image: url(asc.gif);
2300
}
2301

    
2302
div.list table thead .sorting_desc {
2303
    background-image: url(desc.gif);
2304
}
2305

    
2306
div.list table .selection div.expand-icon {
2307
    background-image: url(asc.gif);
2308
    background-repeat: no-repeat;
2309
    position: relative;
2310
    cursor: pointer;
2311
    width: 15px;
2312
    height: 4px;
2313
    left: 19px;
2314
    top: -11px;
2315
}
2316

    
2317
ul.dropdown-selector {
2318
    background-color: #E6EEEE;
2319
    position: absolute;
2320
    margin-left: 1px;
2321
    display: block;
2322
    top: 255px;
2323
    font-size:75%;
2324
    width:40px;
2325
}
2326

    
2327
ul.dropdown-selector li {
2328
    padding: 4px;
2329
}
2330

    
2331
ul.dropdown-selector li:hover {
2332
    background-color: #5CA1C0;
2333
}
2334

    
2335
ul.dropdown-selector li a{
2336
    color: black;
2337
    text-decoration: none;
2338
}
2339

    
2340
div.list table span.imagetag {
2341
    display: none;
2342
}
2343

    
2344
div.list table thead .vmos {
2345
    width: 20px !important;
2346
    vertical-align:middle;
2347
}
2348

    
2349
div.list table .selection {
2350
    width: 20px !important;
2351
    text-align: left;
2352
    background-image: none;
2353
    padding-left: 6px;
2354
}
2355

    
2356
div.list table thead .vmflavor {
2357
    width: 100px !important;
2358
}
2359

    
2360
/* group column commented out for v0.5
2361
div.list table thead .vmgroup {
2362
    width: 40px !important;
2363
}
2364
*/
2365

    
2366
div.list table thead .vmstatus {
2367
    width: 50px !important;
2368
}
2369

    
2370
div.list table thead .vmname {
2371
    width: 110px !important;
2372
}
2373

    
2374
.spinner, .action-indicator {
2375
    clear: right;
2376
    float:right;
2377
    margin: 10px 6px 0 15px;
2378
}
2379

    
2380
.icon .spinner {
2381
    margin: 20px 4px 0 15px !important;
2382
}
2383

    
2384
.single .state .spinner {
2385
    margin: 20px 55px 0 15px !important;
2386
}
2387

    
2388
.action-indicator {
2389
    margin-right: 18px;
2390
}
2391

    
2392
.list span.action-indicator {
2393
    display: block;
2394
    width: 15px;
2395
    height: 20px;
2396
    margin: 0 !important;
2397
    float: none;
2398
}
2399

    
2400
.wave {
2401
    clear: right;
2402
    float:right !important;
2403
    margin: 10px 15px 0 15px !important;
2404
}
2405

    
2406
#networks-pane .spinner {
2407
    margin-top: 18px !important;
2408
}
2409

    
2410
.hidden {
2411
    display:none;
2412
}
2413

    
2414
div.actions a.selected, div.actions a.selected:hover, div.machine-actions a.selected, div.machine-actions a.selected:hover {
2415
    display:block !important;
2416
}
2417

    
2418
.action_error .message, .action_error .code {
2419
    display: none;
2420
}
2421

    
2422
.fixed {
2423
    bottom: 0;
2424
    position: fixed !important;
2425
}
2426

    
2427
/* Networks */
2428
#networks-pane {
2429
    background-color: transparent;
2430
    color: black;
2431
}
2432

    
2433
#networkscreate {
2434
}
2435

    
2436
.createbutton {
2437
    color: black;
2438
    background-color: #FF7F2A;
2439
    cursor: pointer;
2440
    padding: 7px 24px;
2441
    text-decoration: none;
2442
    border-left: 15px solid #FF9955;
2443
    margin-left: -15px;
2444
}
2445

    
2446
#networkscreate:hover {
2447
    background-color: #FF9955;
2448
}
2449

    
2450
#createcontainer {
2451
}
2452

    
2453
#networks-container {
2454
}
2455

    
2456
#networks-pane .public-networks {
2457
    background: #EFF7FA repeat scroll 0 0;
2458
    margin: 0 0 0px;
2459
    padding: 0 0 15px 0px;
2460
}
2461

    
2462
#networks-pane .private-networks .network:last-child {
2463
    border-bottom: none;
2464
}
2465

    
2466
#networks-pane .private-networks {
2467
    background: #EFF7FA repeat scroll 0 0;
2468
    padding: 15px 20px 20px 0px;
2469
    margin-top: 18px;
2470
}
2471

    
2472
.private-networks .network-cont:last-child {
2473
    border-bottom: none;
2474
}
2475

    
2476
.private-networks .network-cont {
2477
    border-bottom: 1px solid #D1E7F0;
2478
    padding-bottom:5px;
2479
    margin-bottom: 5px;
2480
    width: 520px;
2481
}
2482

    
2483
.private-networks .network {
2484
    padding-top: 10px;
2485
    padding-bottom: 10px;
2486
}
2487

    
2488
#public-template, #private-template, #public-machine-template, #private-machine-template {
2489
    display:none;
2490
}
2491

    
2492
div.network a.action-network-add {
2493
    display: none;
2494
}
2495

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

    
2502
div.network {
2503
    clear: both;
2504
    padding: 5px 20px 5px 20px;
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: 33px;
2515
}
2516

    
2517
div.private-networks div.network-placeholder {
2518
}
2519

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

    
2529
.first div.network-cable {
2530
    height:143px;
2531
    margin-top:-6px;
2532
    position: relative;
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
    margin-top: -3px;
2573
}
2574

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

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

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

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

    
2595
div.firewall-label.darker {
2596
    background-color: #4085a5;
2597
}
2598

    
2599
.state {
2600
}
2601

    
2602
.network .state {
2603
    font-size: 75%;
2604
    position: absolute;
2605
    right: 10px;
2606
    top: 10px;
2607
}
2608

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

    
2620
div.network div.machine-actions {
2621
    text-decoration: none;
2622
    float: right;
2623
    margin: -17px -175px 0 0;
2624
    font-weight: normal;
2625
    font-size: 75%;
2626
}
2627

    
2628
div.network div.actions a, div.network div.machine-actions a {
2629
    text-decoration: none;
2630
    height: 15px;
2631
    color: black;
2632
    visibility: hidden;
2633
    display: block;
2634
}
2635

    
2636

    
2637
div.network div.machine-actions a {
2638
    margin: 8px 0 0 8px;
2639
}
2640
div.network div.net-actions a {
2641
    margin: 0 0 8px 8px;
2642
    width: 168px;
2643
}
2644
div.network div.action-container {
2645
    bottom: auto;
2646
}
2647

    
2648
div.network div.net-actions .confirm_single {
2649
    position: absolute;
2650
    left: 95px;
2651
    width: 200px;
2652
    margin: 0 0px -5px 0;
2653
    font-size: 100%;
2654
}
2655

    
2656
div.network div.actions a:hover, div.network div.machine-actions a:hover {
2657
    display: block;
2658
    background-color:#A1C8DB;
2659
    opacity: 0.8;
2660
    filter: alpha(opacity = 80);
2661
}
2662

    
2663
div.network.expand .net-actions a {
2664
    visibility: visible;
2665
}
2666

    
2667
div.network:hover div.actions a, div.network-machine:hover div.machine-actions a {
2668
    visibility: visible;
2669
}
2670

    
2671
div.network div.actions a.selected:hover, div.network div.machine-actions a.selected {
2672
    background-color: transparent !important;
2673
    visibility: visible!important;
2674
}
2675

    
2676
div.network .net-vm-actions .confirm_single {
2677
    font-size: 100% !important;
2678
    margin-right: -25px !important;
2679
    position: absolute !important;
2680
    top: 7px;
2681
    right:0;
2682
}
2683

    
2684
div.network div.display a {
2685
    visibility: visible;
2686
}
2687

    
2688
div.network-machine div.machine-actions a.action-details {
2689
    margin-top: 7px;
2690
    width: 168px;
2691
}
2692

    
2693
div.network .net-actions {
2694
    margin-right:5px !important;
2695
    margin-top:0px !important;
2696
    height: 80px !important;
2697
}
2698

    
2699
div.network .net-actions .action-container.destroy {
2700
    position: relative;
2701
    bottom: auto;
2702
}
2703

    
2704
div.network:hover {
2705
    background-color: #A1C8DB !important;
2706
}
2707

    
2708
.network-logos {
2709
    float:left;
2710
    padding-right: 10px;
2711
}
2712

    
2713
.network-logos:hover {
2714
    cursor: pointer;
2715
}
2716

    
2717
.state div {
2718
    text-align: right;
2719
    margin: 4px 1px -4px;
2720
}
2721

    
2722
.public-networks .state div {
2723
    margin-top: 4px;
2724
}
2725

    
2726
.private-networks .state div {
2727
    margin-top: 9px;
2728
    margin-bottom: -12px;
2729
}
2730

    
2731
.network .name-div {
2732
    margin-bottom: 15px;
2733
    margin-top: 0px;
2734
}
2735

    
2736
div.indicator {
2737
    clear: none;
2738
    float: right;
2739
    height: 11px;
2740
    margin: 3px -1px;
2741
    width: 10px;
2742
}
2743

    
2744
#private-networks {
2745
    margin-top: 20px;
2746
}
2747

    
2748
.private-networks .editbuttons {
2749
    margin-right: 117px;
2750
    margin-top: 1px;
2751
}
2752

    
2753
.private-networks div.confirm_single {
2754
    margin: 45px -219px -5px 0;
2755
    font-size: 80%;
2756
}
2757

    
2758
.private-networks .network-machine div.confirm_single {
2759
    margin: 0 -199px 0 0;
2760
}
2761

    
2762
.private-networks .state {
2763
}
2764

    
2765
.private-networks div.machines-list {
2766
    padding-top: 3px;
2767
}
2768

    
2769
span.rename-network, span.configure {
2770
    background-repeat: no-repeat;
2771
    color: transparent;
2772
    font-size: 75%;
2773
    font-weight: normal;
2774
    margin-left: 10px;
2775
    padding-left: 10px;
2776
    text-align: left;
2777
}
2778

    
2779
span.rename-network {
2780
    cursor: pointer;
2781
}
2782

    
2783
div.name-div:hover span.rename-network {
2784
    color: #3D3D3D;
2785
    margin-top: 0.4em;
2786
    background-image: url(./pencil.png);
2787
    background-position: 0 3px;
2788
}
2789

    
2790
div.network:hover a.rename {
2791
    color: #3d3d3d;
2792
}
2793

    
2794
.network-separator {
2795
    background-color: #5CA1C0;
2796
    height: 1px;
2797
    margin: 2px 0 0 -5px;
2798
    width: 480px;
2799
    font-size: 1%;
2800
    line-height: 1px;
2801
}
2802

    
2803
.network-contents {
2804
    margin-left: -4px;
2805
    width: 504px;
2806
    clear: both;
2807
    background: url("./orange-border.png") no-repeat;
2808
    background-position: 33px bottom;
2809
}
2810
.network-contents.last-expanded {
2811
    background-position-y: -2600px;
2812
}
2813

    
2814
.network-machine {
2815
    border-bottom: 1px solid #5CA1C0;
2816
}
2817
.network-machine:last-child {
2818
    border-bottom: none;
2819
}
2820

    
2821
.network-machine .state div {
2822
    text-align: left;
2823
}
2824

    
2825
.network-machine {
2826
    margin-left: 35px;
2827
    padding-bottom: 10px;
2828
    padding-left: 5px;
2829
    padding-top: 10px;
2830
    position: relative;
2831
}
2832

    
2833
.network-machine .ips {
2834
    position: absolute;
2835
    right:0;
2836
    top:40px;
2837
    text-align: right;
2838
    padding-right: 10px;
2839
    font-size: 70%;
2840
}
2841

    
2842
.network-machine .logo {
2843
    float:left;
2844
    padding-right: 10px;
2845
    position:relative;
2846
}
2847

    
2848
#networks-container .machine-name {
2849
    text-decoration: none !important;
2850
    margin-bottom: 10px;
2851
    color: #000000;
2852
    margin-top: -4px;
2853
}
2854

    
2855
.private-networks .separator {
2856
    background-color: #5CA1C0;
2857
    height: 1px;
2858
    margin: 3px 0 -2px -10px;
2859
    width: 485px;
2860
}
2861

    
2862
.network-machine .state {
2863
    margin-right: 18px;
2864
}
2865

    
2866
.network-machine .state .status {
2867
    margin-bottom: 4px;
2868
}
2869

    
2870
.machine-name .name {
2871
}
2872

    
2873
.machine-name .namecontainer {
2874
    line-height: 18px;
2875
    margin-bottom: 20px;
2876
}
2877

    
2878
div.network-machine:hover {
2879
    background-color: #84B7D0;
2880
}
2881

    
2882
.machines {
2883
    width: 416px;
2884
    margin-bottom: -8px;
2885
    margin-top: 10px;
2886
}
2887

    
2888
div.empty-network-slot {
2889
    height: 60px;
2890
}
2891

    
2892
div.network-remove-machine, div.network-add-machine {
2893
    background-color: #FB822F;
2894
    color: #bc4b00;
2895
    width:90px;
2896
    height:18px;
2897
    float:left;
2898
    margin:40px 0 0 -100px;
2899
}
2900

    
2901
span.remove-icon {
2902
    font-size: 80%;
2903
    margin-left: 15px;
2904
    position: relative;
2905
    bottom:1px;
2906
}
2907

    
2908
div.add-icon {
2909
    margin-left: 15px;
2910
    margin-top: -1px;
2911
    cursor: pointer;
2912
}
2913

    
2914
span.remove-icon:hover, span.add-icon:hover {
2915
    cursor:pointer;
2916
    color: #fff;
2917
}
2918

    
2919
div.network-add-machine {
2920
    margin:43px 0 0 -3px;
2921
}
2922

    
2923
.firewall-on {
2924
    color: #42E342;
2925
}
2926

    
2927
.firewall-off {
2928
    color: #F82E2E;
2929
}
2930

    
2931
.firewall-content {
2932
    color: black;
2933
    font-size: 60%;
2934
    margin-left: 60px;
2935
    height: 55px;
2936
    margin-bottom: 17px;
2937
}
2938

    
2939
.firewall-content .checkbox-legends {
2940
    cursor: pointer;
2941
}
2942

    
2943
.firewall-content .checkbox-legends.current {
2944
    font-weight: bold;
2945
}
2946

    
2947
.firewall-content .checkbox-legends {
2948
    vertical-align: text-top;
2949
}
2950

    
2951
.checkbox-legends a {
2952
    color: black;
2953
    text-decoration: underline;
2954
    font-size: 100%;
2955
}
2956

    
2957
h5.machine-connect {
2958
    font-size: 75%;
2959
    margin-bottom: 3px;
2960
}
2961

    
2962
.machine-connect span {
2963
    text-decoration: underline;
2964
}
2965

    
2966
h5.machine-connect span:hover {
2967
    cursor: pointer;
2968
}
2969

    
2970
.firewall-apply {
2971
    background-color: #4085a5;
2972
    border: medium none;
2973
    float: right;
2974
    font-size: 105%;
2975
    height: 18px;
2976
    margin-right: 5px;
2977
    margin-top: 3px;
2978
    width: 75px;
2979
}
2980

    
2981
.firewall-apply:hover {
2982
    background-color:#5CA1C0;
2983
}
2984

    
2985
.name-div {
2986
    margin: -9px 0 30px 70px;
2987
}
2988

    
2989
.machine-name-div {
2990
    margin-bottom: 20px;
2991
    margin-left: 60px;
2992
}
2993

    
2994
div.reboot-dialog {
2995
    display: none;
2996
    color: black;
2997
    background-color: #4085A5;
2998
    font-size: 75%;
2999
    margin-top: 15px;
3000
    width: 698px;
3001
    z-index: 1;
3002
}
3003

    
3004
div#reboot-machine-template, div.reboot-machine-entry {
3005
    display: none;
3006
    padding: 0 0 10px 35px;
3007
    width: 300px;
3008
}
3009

    
3010
div.reboot-dialog p {
3011
    color: #FFFFFF;
3012
    padding: 10px 0 10px 10px;
3013
}
3014

    
3015
div.reboot-dialog button {
3016
    float:right;
3017
    border: 1px solid #FF7F2A;
3018
    background-color: transparent;
3019
    font-size:100%;
3020
}
3021

    
3022
div.reboot-dialog button:hover {
3023
    background-color: #FF7F2A;
3024
}
3025

    
3026
div.reboot-dialog button.reboot-all {
3027
    margin: -30px 35px 0 0;
3028
}
3029

    
3030
div.reboot-dialog button.reboot-single {
3031
    color: black;
3032
    margin-top: -20px;
3033
}
3034

    
3035
div.reboot-dialog div.code, div.reboot-dialog div.action, div.reboot-dialog div.message, div.reboot-dialog button.details {
3036
    display:none;
3037
}
3038

    
3039
div.reboot-dialog button.details {
3040
    border-color: #800000;
3041
    margin-top: -20px;
3042
}
3043

    
3044
div.reboot-dialog button.details:hover {
3045
    background-color: #800000;
3046
}
3047

    
3048
/* Metadata */
3049
.machine .info-content {
3050
    display: none;
3051
}
3052

    
3053
.metadata-container {
3054
    line-height: 12px;
3055
    height: 85px;
3056
    background-color: #84b7d0;
3057
}
3058

    
3059
.metadata-column {
3060
    border-right: 1px solid #5CA1C0;
3061
    color: black;
3062
    float: left;
3063
    font-size: 60%;
3064
    margin-top: 3px;
3065
    height: 70px;
3066
    padding-bottom: 5px;
3067
}
3068

    
3069
.vm-stats {
3070
    padding-left: 10px;
3071
    padding-right: 5px;
3072
    width: 220px;
3073
}
3074

    
3075
.vm-stats div.stat-content {
3076
    height: 18px;
3077
}
3078

    
3079
.vm-stats div.stat-content img {
3080
    margin: 0;
3081
}
3082

    
3083
.vm-stats div img.stat-busy {
3084
    margin-top: -7px;
3085
    margin-left: 90px;
3086
}
3087

    
3088
.vm-stats div.stat-content img.busy {
3089
    margin-left: 95px;
3090
}
3091

    
3092
.vm-stats div.stat-error {
3093
    display:none;
3094
}
3095

    
3096
div.stat-error {
3097
    color: #f00;
3098
}
3099

    
3100
.single div.stat-error {
3101
    text-align: center;
3102
    font-size: 0.8em;
3103
}
3104

    
3105
.metadata-column {
3106
    margin-top: 4px;
3107
}
3108

    
3109
.vm-details {
3110
    width: 130px;
3111
    margin-left:17px;
3112
}
3113

    
3114
.vm-details.metadata-column {
3115
    padding-top: 5px;
3116
    height: 65px;
3117
}
3118

    
3119
.vm-details .image-details {
3120
    margin-top: 8px;
3121
}
3122

    
3123
.vm-details .vm-detail {
3124
    display: block;
3125
}
3126

    
3127
.vm-details span.value {
3128
    color: #444;
3129
}
3130

    
3131
.single-container .lower .stat-busy {
3132
    margin-top: 10px;
3133
    margin-left: 325px;
3134
}
3135

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

    
3142
.metadata-left {
3143
}
3144

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

    
3154
.metadata-right .items {
3155
    position:absolute;
3156
    height:20000em;
3157
}
3158

    
3159
.metadata-keys-container {
3160
    height: 60px;
3161
    float: left;
3162
}
3163

    
3164
.single .metadata-keys-container {
3165
    float: none;
3166
    height: auto;
3167
    margin-bottom: 5px;
3168
}
3169

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

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

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

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

    
3191
.single .metadata-actions, .single .metadata-keys-container .items {
3192
    padding-left: 5px;
3193
}
3194
.metadata-actions, .metadata-keys-container .items{
3195
    margin-top: 5px;
3196
}
3197

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

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

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

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

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

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

    
3232
/* single view */
3233
.single {
3234
    color: #383838;
3235
}
3236

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

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

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

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

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

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

    
3270
.single .single-actions {
3271
    width: 150px;
3272
    height: 60px;
3273
    margin-bottom: 45px;
3274
    margin-left: -10px;
3275
}
3276

    
3277
.single .vm-actions .action-container {
3278
    margin-bottom: 1px;
3279
}
3280

    
3281
.single .vm-actions .action-container .confirm_single {
3282
    right: -45px;
3283
}
3284

    
3285
.single .vm-actions .action-container.destroy .confirm_single {
3286
}
3287

    
3288
.single .vm-actions .action-container.destroy {
3289
    bottom: -20px;
3290
}
3291

    
3292
.single a.single-action {
3293
    text-decoration: none;
3294
    cursor: pointer;
3295
    display: block;
3296
}
3297

    
3298
.single a.single-action:hover {
3299
    background-color:#A1C8DB;
3300
    width: 162px;
3301
    opacity: 0.8;
3302
    filter: alpha(opacity = 80);
3303
}
3304

    
3305
.single a.single-action.selected {
3306
    color: #FF7F2A !important;
3307
    width: 50px !important;
3308
}
3309

    
3310
.single a.single-action.selected:hover {
3311
    background-color:transparent;
3312
}
3313

    
3314
.single .spinner, .single .action-indicator {
3315
    margin: 15px 45px 0 0px !important
3316
}
3317

    
3318
.single .action-indicator {
3319
    margin-right: 55px !important;
3320
}
3321

    
3322
.single .wave {
3323
    margin: 15px 53px 0 0px !important
3324
}
3325

    
3326
.icon div.action_error {
3327
    font-size: 100%;
3328
}
3329

    
3330
.single div.action_error {
3331
    position: absolute;
3332
    top: 29px;
3333
    right: 35px;
3334
}
3335

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

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

    
3353
.single .machine-detail.title {
3354
    background-color: #74AEC9;
3355
    color: #fff;
3356
    padding: 4px 6px;
3357
    font-size: 0.8em;
3358
    width: 346px;
3359
    margin-left: 5px;
3360
    float: left;
3361
}
3362

    
3363
.single .column2 .machine-details {
3364
    float: right;
3365
    text-align: right;
3366
    font-size: 90%;
3367
    width: 210px;
3368
    margin-right: 10px;
3369
    margin-top: 10px;
3370
}
3371

    
3372
.single .column2 .name, .single .column2 .disk, .single .column2 .image-size, .single .column2 .ipv6 {
3373
    margin-bottom: 13px;
3374
}
3375

    
3376
.single .tags {
3377
    clear: both;
3378
    margin-bottom: 10px;
3379
    margin-left: 10px;
3380
}
3381

    
3382
.single .tags-label {
3383
    float: left;
3384
    padding: 0 5px;
3385
    width: 30px;
3386
}
3387

    
3388
.single .tags-down-arrow {
3389
    background: url("/static/tags-down-arrow.png") no-repeat scroll 1px 7px transparent;
3390
    float: left;
3391
    height: 16px;
3392
    width: 9px;
3393
}
3394

    
3395
.single .tags-header .info-header{
3396
    padding-top:0;
3397
    padding-bottom:0;
3398
}
3399

    
3400
.single .tags-header {
3401
    font-size: 0.62em;
3402
    cursor: pointer;
3403
    float: left;
3404
    margin-bottom:5px;
3405
}
3406

    
3407
.single .tags-header span.label {
3408
    font-size: 104%;
3409
}
3410

    
3411
.single .tags-content {
3412
    background-color: #84B7D0;
3413
    clear: both;
3414
    height: auto;
3415
    padding-bottom: 5px;
3416
    padding-top: 5px;
3417
    width: 300px;
3418
}
3419

    
3420
.single .column3 {
3421
    background-color: #A1C8DB;
3422
    width: 150px;
3423
    overflow: visible;
3424
    padding-bottom: 10px;
3425
    position: absolute;
3426
    right: 20px;
3427
    top: 130px;
3428
}
3429

    
3430
.single .col3 {
3431
    float: right;
3432
    width: 150px;
3433
    margin-right: 15px;
3434
    margin-bottom: 15px;
3435
}
3436

    
3437
.single .column3 .controls {
3438
    font-size: 80%;
3439
    height: 20px;
3440
    padding-left: 7px;
3441
    padding-right: 7px;
3442
    padding-top: 8px;
3443
    padding-bottom: 5px;
3444
    border-bottom: 1px solid #84B7D0;
3445
}
3446

    
3447
.single .column3 .vm-control:hover {
3448
    background-color: #5CA1C0;
3449
}
3450

    
3451
.single .column3 .previous {
3452
    float:left;
3453
    width: 72px;
3454
}
3455

    
3456
.single .column3 .next {
3457
    float: right;
3458
    text-align: center;
3459
    width: 60px;
3460
}
3461

    
3462
.single .column3 .next-label {
3463
    float: right;
3464
    margin-right: 3px;
3465
    margin-top: -2px;
3466
}
3467

    
3468
.single .column3 .next-arrow {
3469
    float: right;
3470
    height: 18px;
3471
    width: 10px;
3472
    background: url("./right-arrow.png") no-repeat scroll 3px 2px transparent;
3473
}
3474

    
3475
.single .column3 .prev-label {
3476
    float: left;
3477
    margin-left: 3px;
3478
    margin-top: -2px;
3479
}
3480

    
3481
.single .column3 .prev-arrow {
3482
    background: url("./left-arrow.png") no-repeat scroll 3px 2px transparent;
3483
    float: left;
3484
    height: 18px;
3485
    width: 10px;
3486
}
3487

    
3488
.single .column3 .separator {
3489
    width: 135px;
3490
    height: 1px;
3491
    background-color: #84B7D0;
3492
    margin: 0 0 0 7px;
3493
    clear: both;
3494
}
3495

    
3496
.single .column3 .servers {
3497
    font-size: 80%;
3498
    line-height: 15px;
3499
    padding-top: 10px;
3500
    text-align: right;
3501
    overflow: visible;
3502
    position: relative;
3503
}
3504

    
3505
.single .column3 .server-name {
3506
    margin-left: 10px;
3507
    padding-right: 5px;
3508
    cursor: pointer;
3509
    padding-bottom: 2px;
3510
}
3511
div.single div.column3 div.server-name:hover {
3512
    background-color: #5CA1C0;
3513
}
3514
.single .column3 .column3-selected {
3515
    background-color: #84B7D0;
3516
    color: white;
3517
    opacity: 0.8;
3518
    padding-left: 9px;
3519
    width: 160px;
3520
    filter: alpha(opacity = 80);
3521
    position: relative;
3522
    width: 126px;
3523
}
3524

    
3525
.single .toggler {
3526
    color: #FFFFFF;
3527
    float: right;
3528
    font-size: 140%;
3529
}
3530

    
3531
.single .cpu-usage, .single .network-usage {
3532
    text-align: center;
3533
    padding-top: 15px;
3534
    margin-bottom: 5px;
3535
    font-size: 90%;
3536
    font-weight: bold;
3537
}
3538

    
3539
.single .cpu-graph, .single .network-graph {
3540
    margin-left: 20px;
3541
    margin-bottom:30px;
3542
    width: 660px;
3543
}
3544

    
3545
.single div.lower img.stats {
3546
    margin-left: 82px;
3547
}
3548

    
3549
.single div.lower img.stats {
3550
    display: none;
3551
}
3552

    
3553
.single .single-image {
3554
    width: 126px;
3555
    height: 136px;
3556
    margin-bottom: 10px;
3557
    margin-left: 4px;
3558
    background-image: url("./icons/machines/large/unknown-sprite.png");
3559
    background-repeat: no-repeat;
3560
    cursor: pointer;
3561
}
3562

    
3563
.single .single-image-state1 {
3564
    background-position: 0px 0;
3565
}
3566

    
3567
.single .single-image-state3 {
3568
    background-position: -252px 0;
3569
}
3570

    
3571
.single .single-image-state4 {
3572
    background-position: -378px 0;
3573
}
3574

    
3575
.single .single-image-state2 {
3576
    background-position: -126px 0;
3577
}
3578

    
3579
.single .column3 .previous, .single .column3 .next {
3580
    cursor: pointer;
3581
    background-color: #84B7D0;
3582
    color: white;
3583
    font-size: 100%;
3584
    height: 15px;
3585
    padding-top: 2px;
3586
}
3587

    
3588
.single .column3 .disabled {
3589
    opacity: 0.5;
3590
    filter: alpha(opacity = 50);
3591
}
3592

    
3593
.single div.lower {
3594
    clear:both;
3595
    background: #EFF7FA repeat scroll 0 0;
3596
    width: 700px;
3597
    padding-bottom: 15px;
3598
}
3599

    
3600
.single div.upper {
3601
    background: transparent;
3602
    margin-bottom: 10px;
3603
    overflow: visible;
3604
    width: 700px;
3605
    background: #EFF7FA repeat scroll 0 0;
3606
}
3607

    
3608
/* console css */
3609
.console-header-logo {
3610
    padding-top: 17px;
3611
    margin-left: 30px;
3612
    position: fixed;
3613
}
3614

    
3615
#console-header div.help-text {
3616
    font-size: 75%;
3617
    font-weight:bold;
3618
    color:#FFFFFF;
3619
    float:left;
3620
    position: absolute;
3621
    margin: 45px 0 0 2px;
3622
}
3623

    
3624
div.console-container {
3625
    margin: 0 0em;
3626
    height: auto;
3627
}
3628

    
3629
#wrapper.console {
3630
    width: auto;
3631
}
3632

    
3633
.console-info {
3634
    font-size:80%;
3635
    color: white;
3636
    float:left;
3637
    position:relative;
3638
    margin: 15px 0 0 480px;
3639
}
3640

    
3641
applet {
3642
    width:100%;
3643
    height:100%;
3644
}
3645

    
3646
div.console-footer {
3647
    /* this is for version 0.5*/
3648
    display: none;
3649
}
3650

    
3651
.console-footer #footer-text{
3652
    float:left;
3653
    left: auto;
3654
    margin-left:30px;
3655
}
3656

    
3657
/* add network wizard (see also #wizard for shared classes) */
3658
#networks-wizard .header {
3659
    background-color: #4085A5;
3660
    height: 56px;
3661
}
3662

    
3663
#networks-wizard div.name-input {
3664
    margin: 75px 0 0 55px;
3665
}
3666

    
3667
#networks-wizard input {
3668
    border: 1px solid #CCCCCC;
3669
    color: #445566;
3670
    letter-spacing: 1px;
3671
    width: 170px;
3672
}
3673

    
3674
#networks-wizard span.help {
3675
    font-style: italic;
3676
    font-size: 80%;
3677
    margin-left: 10px;
3678
}
3679

    
3680
#networks-wizard .separator-end {
3681
    background-color: #387693;
3682
    height: 6px;
3683
    width: 479px;
3684
    margin-left: -13px;
3685
    margin-top: 19px;
3686
}
3687

    
3688
.red {
3689
    color: red;
3690
}
3691

    
3692
/* add server to network wizard (see also #metadata-wizard for shared classes) */
3693
#add-machines-wizard span.machine-name {
3694
    margin-left: 4px;
3695
    vertical-align: text-top;
3696
}
3697

    
3698
#add-machines-wizard img.list-logo {
3699
    margin: 2px 1px 1px;
3700
}
3701

    
3702
.css-panes {
3703
    clear: both;
3704
}
3705

    
3706
.last .firewall-content {
3707
    margin-bottom:13px;
3708
}
3709

    
3710
#pub .last .network-separator {
3711
    display:none;
3712
}
3713

    
3714
.public-networks .empty-network-slot {
3715
    display: none;
3716
}
3717

    
3718
.clearfix {
3719
    display: block;
3720
    width: auto;
3721
    zoom: 1;
3722
}
3723

    
3724
/* float clearing for all browsers except the devil one */
3725
.clearfix:after{
3726
  clear: both;
3727
  content: ".";
3728
  display: block;
3729
  height: 0;
3730
  visibility: hidden;
3731
  font-size: 0;
3732
}
3733

    
3734
* html .clearfix {
3735
    display: inline-block;
3736
}
3737

    
3738
.icon .wave {
3739
    margin-right: 4px !important;
3740
    margin-top: 15px !important;
3741
}
3742

    
3743
.icon .status {
3744
    margin-right: 3px;
3745
}
3746

    
3747
#machinesview .status, .single .state {
3748
    font-size: 75%;
3749
}
3750

    
3751
#machinesview-list div.action-indicator {
3752
    margin:0 !important;
3753
    float: none !important;
3754
}
3755

    
3756
.icon div.action-indicator {
3757
    margin-top: 14px;
3758
    margin-right: 4px;
3759
}
3760

    
3761
div.action-indicator {
3762
    width: 15px;
3763
    height: 20px;
3764
    background-repeat: no-repeat;
3765
    background-position: 0 0;
3766
}
3767

    
3768
tbody.machines div.action-indicator {
3769
    position: relative;
3770
    top: -2px;
3771
}
3772
div.state .destroy, tbody.machines .destroy {
3773
    background-image: url("./icons/actions/medium/destroy.png");
3774
}
3775
div.state .console, tbody.machines .console {
3776
    background-image: url("./icons/actions/medium/console.png");
3777
}
3778
div.state .start, tbody.machines .start {
3779
    background-image: url("./icons/actions/medium/start.png");
3780
}
3781
div.state .reboot, tbody.machines .reboot {
3782
    background-image: url("./icons/actions/medium/reboot.png");
3783
}
3784
div.state .shutdown, tbody.machines .shutdown {
3785
    background-image: url("./icons/actions/medium/shutdown.png");
3786
}
3787

    
3788

    
3789
.no-invitations-left {
3790
    margin-bottom: 20px;
3791
    color: #E44848;
3792
}
3793

    
3794
.invitations #field_name_name, .invitations #field_email_name {
3795
    float: left;
3796
    display: block;
3797
    width: 180px;
3798
}
3799
.invitations input {
3800
    width: 170px;
3801
}
3802

    
3803
.invitations #fieldheaders span.description {
3804
    font-size: 0.8em;
3805
    color: #666;
3806
    margin-left: 2px;
3807
}
3808

    
3809
.invitations #fields {
3810
    margin-top: 5px;
3811
}
3812

    
3813
.invitations .add-field-container {
3814
    margin-top: 5px;
3815
}
3816

    
3817
.invitations #errors {
3818
    padding: 5px;
3819
    background-color: #800000;
3820
}
3821

    
3822
.invitations #errors p {
3823
    margin-bottom: 10px;
3824
    font-size: 0.95em;
3825
    padding-top:0;
3826
    margin-top:0;
3827
    color: #fff;
3828
}
3829

    
3830
.invitations #errors li {
3831
    font-size: 0.85em;
3832
    color: #ddd;
3833
}
3834

    
3835
.invitations #errors {
3836
    font-size: 100%;
3837
    margin-bottom: 10px;
3838
}
3839

    
3840
#invsent {
3841
    padding-top: 10px;
3842
}
3843

    
3844
#invsent h3.overlay-inner-title {
3845
    font-size: 1.2em;
3846
    font-weight: normal;
3847
    border-bottom: 1px solid #B0D0E0;
3848
}
3849

    
3850
#invsent .icons-info img {
3851
    vertical-align: middle;
3852
}
3853

    
3854
#invsent .icons-info {
3855
    margin-top: 10px;
3856
    font-size: 0.7em;
3857
}
3858

    
3859
#invsent .icons-info span {
3860
    margin-right: 10px;
3861
}
3862

    
3863
.notification-box .invitations {
3864
    padding-bottom: 0;
3865
}
3866
.notification-box .invitations .sub-text {
3867
    display: none;
3868
}
3869

    
3870
h3.overlay-inner-title {
3871
    color: #4085A5;
3872
    font-size: 2em;
3873
}
3874

    
3875
#invsent .message {
3876
    font-size: 0.9em;
3877
    padding: 5px 0;
3878
    margin-top: 5px;
3879
    margin-bottom: -10px;
3880
    color: #5CAD54;
3881
}
3882

    
3883
#invsent .errormsg {
3884
    color: #AE2B34;
3885
}
3886

    
3887
#add-name-container {
3888
    margin-bottom: 10px;   
3889
}
3890

    
3891
.remove-field-trigger, .add-field-trigger {
3892
    cursor: pointer;
3893
}
3894

    
3895
.add-field-trigger img {
3896
    vertical-align: middle;
3897
}
3898

    
3899
.invitations form {
3900
    margin-bottom: 20px;
3901
}
3902

    
3903
#invsent h3 {
3904
    font-size: 0.8em;
3905
    font-weight: bold;
3906
}
3907

    
3908
#invsent h3 span {
3909
    font-weight: normal;
3910
    font-size: 0.9em;
3911
    margin-right: 5px;
3912
    display: block;
3913
    margin-top: -2px;
3914
}
3915

    
3916
#invsent ul {
3917
    margin-top: 3px;
3918
}
3919

    
3920
#invsent li {
3921
    color: #4085A5;
3922
    font-size: 1.1em;
3923
    padding-top: 0.5em;
3924
    border-bottom: 1px solid #efefef;
3925
    padding-bottom: 0.5em;
3926
    font-size: 0.9em;
3927
    position: relative;
3928
}
3929

    
3930
#invsent li:hover {
3931
    background-color: #efefef;
3932
}
3933

    
3934
#invsent li img {
3935
    position: absolute;
3936
    left:20px;
3937
    bottom: 2px;
3938
}
3939

    
3940
#invsent h3 img {
3941
    float: none;
3942
    vertical-align: middle;
3943
    margin-left: 3px;
3944
}
3945

    
3946
#invsent .name {
3947
    float: left;
3948
    width: 55%;
3949
    padding-left: 20px;
3950
}
3951

    
3952
#invsent .email {
3953
    float: left;
3954
    width: 40%;
3955
}
3956

    
3957
#invsent li.accepted {
3958
    color: #ABD49C;
3959
}
3960

    
3961
#invsent li img {
3962
    margin-left: -20px;
3963
    margin-top: 1px;
3964
}
3965

    
3966
#invsent li img.resend {
3967
    cursor: pointer;
3968
}
3969

    
3970
.invitations #field_email_name {
3971
}
3972

    
3973
#invform #fields input {
3974
    margin-right: 10px;
3975
}
3976

    
3977
.machine-now-building {
3978
    padding-right: 15px !important;
3979
    text-align: justify;
3980
}
3981

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

    
3990
#notification-box a {
3991
    color: #4085A5;
3992
}
3993

    
3994
#notification-box .machine-title img {
3995
    vertical-align: middle;
3996
}
3997

    
3998
#notifiaction-box .password-header {
3999
    margin-bottom: 0 !important;
4000
}
4001

    
4002
#notification-box .password-container a {
4003
    color: #fff;
4004
    text-decoration: underline;
4005
}
4006

    
4007
#notification-box .password-container a:hover {
4008
    background-color: #fff;
4009
    color: #4085A5;
4010
}
4011

    
4012
#notification-box .password-container {
4013
    background: #4085A5;
4014
    border: none;
4015
}
4016

    
4017
#notification-box .password-container .password a {
4018
    font-weight: normal !important;
4019
}
4020

    
4021
#notification-box .cmd {
4022
    color: #fff;
4023
    font-family: monospace;
4024
    font-size: 1.6em;
4025
}
4026

    
4027
.machine-container .separator {
4028
    background-color: #B0D1E0;
4029
}
4030

    
4031
#creation-password-overlay div.password-cont {
4032
    margin: 10px auto;
4033
    padding: 10px;
4034
    border: 2px solid #75B54A;
4035
    background-color: #AADE87;
4036
    color: #447821;
4037
    text-align: left;
4038
    padding-left: 5em;
4039
    position: relative;
4040
}
4041

    
4042
#creation-password-overlay {
4043
    position: relative;
4044
}
4045

    
4046
#creation-password-overlay .form-action {
4047
    position: absolute;
4048
    bottom: 15px;
4049
    right: 13px;
4050
    font-size: 0.8em;
4051
}
4052

    
4053
#creation-password-overlay .password {
4054
    font-size: 1.3em;
4055
    font-weight: bold;
4056
    margin-right: 5em;
4057
    float: right;
4058
}
4059

    
4060
.feedback-form .description {
4061
    margin-bottom: 25px;
4062
}
4063

    
4064
.feedback-form label {
4065
    display: block;
4066
    font-weight: bold;
4067
    margin-bottom: 10px;
4068
    font-size: 0.8em;
4069
}
4070

    
4071
.feedback-form .form-actions {
4072
    border-top: none;
4073
}
4074

    
4075
.nospace {
4076
    padding-top: 0 !important;
4077
    padding-bottom: 0 !important;
4078
}
4079

    
4080
.noborder {
4081
    border-top: none !important;
4082
    border-bottom: none !important;
4083
}
4084

    
4085
.overlay .feedback-form .messages.description {
4086
    padding-bottom:0;
4087
    margin-bottom: 0;
4088
}
4089

    
4090
.feedback-form .messages .error-message {
4091
    color: #f00;
4092
}
4093

    
4094
.feedback-form .messages .success-message {
4095
    color: #8AA87F;
4096
}
4097

    
4098
.feedback-form .feedback-message {
4099
    width: 548px;
4100
    height: 200px;
4101
    border: 1px solid #ddd;
4102
    padding: 5px;
4103
}
4104

    
4105
#feedback-form .empty-error-msg {
4106
    display: none;
4107
}
4108

    
4109
#feedback-form .data-text {
4110
    display: none;
4111
}
4112

    
4113
#feedback-form .message {
4114
    display: none;
4115
}
4116

    
4117
#feedback-form label {
4118
    display: block;
4119
    font-size: 0.85em;
4120
    font-weight: bold;
4121
}
4122

    
4123
#feedback-form label.inline {
4124
    display: inline;
4125
    padding-left: 5px;
4126
}
4127

    
4128
#feedback-form p {
4129
    padding: 1em 0;
4130
    color: #444;
4131
    margin-bottom: 10px;
4132
}
4133

    
4134
#feedback-form .description {
4135
    font-style: italic;
4136
    font-size: 0.9em;
4137
    color: #888;
4138
}
4139

    
4140
#feedback-form .feedback-text {
4141
    width: 98%;
4142
    height: 100px;
4143
    margin-top: 10px;
4144
    margin-bottom: 10px;
4145
}
4146

    
4147
#feedback-form .submit-data {
4148
    display: none;
4149
}
4150

    
4151
#feedback-form .submit, #invform .submit {
4152
    background-color: #4085A5;
4153
    color: #fff;
4154
    border: none;
4155
    padding: 5px 16px;
4156
    cursor: pointer;
4157
    font-size: 1em;
4158
    position: relative;
4159
}
4160

    
4161
#feedback .submit {
4162
    float: right;
4163
    right: 10px;
4164
    margin-top: 10px;
4165
}
4166

    
4167

    
4168
#feedback-form .submit:hover, #invform .submit:hover {
4169
    background-color: #549FC3;
4170
}
4171

    
4172
.feedback-intro {
4173
    padding-right: 15px !important;
4174
    text-align: justify;
4175
}
4176

    
4177
.popup-body .message {
4178
    padding: 20px 5px;
4179
    display: none;
4180
}
4181

    
4182
.popup-body .loading {
4183
    color: #fff;
4184
}
4185

    
4186
.popup-body .success {
4187
    color: #1F921A;
4188
}
4189

    
4190
.popup-body .errormsg {
4191
    color: #E32424;
4192
}
4193

    
4194

    
4195
.close-msg-box {
4196
    display: block;
4197
    margin-top: 10px;
4198
    cursor: pointer;
4199
    color: #4085A5;
4200
    text-decoration: underline;
4201
}
4202

    
4203

    
4204
.console .ip-version-label {
4205
    margin: 0 5px;
4206
}
4207

    
4208
.ipv6-text, .ipv4-text {
4209
    font-size: 0.9em;
4210
}
4211

    
4212
.tooltip {
4213
    background-color: #C4DDE9;
4214
    color: #000;
4215
    font-size: 0.7em;
4216
    padding: 0.2em 0.5em;
4217
    border: 1px solid #888;
4218
    z-index: 50000;
4219
}
4220

    
4221
/*404 and 500 pages*/
4222

    
4223
.error_page {
4224
    position: relative;
4225
    top: 40px;
4226
    padding-bottom: 140px !important;
4227
}
4228

    
4229
.error_page h1 {
4230
    font-weight: normal;
4231
}
4232

    
4233
.error_page .msg_header {
4234
    margin: 0px;
4235
    font-size: 10em;
4236
    position: absolute;
4237
    left: -5px;
4238
    top: 0px;
4239
    color: #4085A5;
4240
    font-family: arial, verdana;
4241
}
4242

    
4243
.error_page p.error_desc {
4244
    color: #fff;
4245
    font-size: 0.8em;
4246
}
4247

    
4248
.error_page {
4249
    padding-right: 50px !important;
4250
    padding-left: 100px !important;
4251
}
4252

    
4253
.error_page .error_content {
4254
    padding-left: 150px;
4255
    padding-top: 97px;
4256
}
4257

    
4258
.error_page .error_content .links, .info_content .links {
4259
    margin-top: 10px;
4260
    margin-left: 20px;
4261
}
4262

    
4263
.error_page .http_error .code {
4264
    letter-spacing: -10px;
4265
    font-size: 9em;
4266
}
4267

    
4268
.error_page .http_error .msg {
4269
    letter-spacing: -1px;
4270
    font-size: 2em;
4271
}
4272

    
4273
.error_page .http_error {
4274
    position: absolute;
4275
    right: 0px;
4276
    bottom: 0px;
4277
    color: #75B3D0;
4278
    line-height: 1em;
4279
}
4280

    
4281
.error_page .error_content a, .info_content .links a {
4282
    color: #4085A5;
4283
    font-weight: bold;
4284
    margin-right: 10px;
4285
    font-size: 0.9em;
4286
}
4287

    
4288
.error_body #container, .info_body #container {
4289
    background-position: right 200px;
4290
}
4291

    
4292
.info_page h1 {
4293
    color: #4085A5;
4294
    font-size: 2em;
4295
    font-weight: normal;
4296
}
4297

    
4298
.info_page p {
4299
    color: #ffffff;
4300
    margin: 1em 0;
4301
}
4302

    
4303
.info_body p a, .error_body p a{
4304
    color: #4085A5;
4305
    text-decoration: underline;
4306
}
4307

    
4308
.error_404 .http_error .code {
4309
    letter-spacing: -7px;
4310
}
4311

    
4312
.network-progress-indicator {
4313
    position: relative;
4314
    display: none;
4315
}
4316

    
4317
.network-progress-indicator img {
4318
    position: absolute;
4319
    bottom: 44px;
4320
    left: 340px;
4321
}
4322

    
4323

    
4324
.single .progress-message {
4325
    margin-top: 90px;
4326
    font-size: 0.6em;
4327
    padding: 0 10px;
4328
    text-align: center;
4329
}
4330

    
4331
/*metadata keys/values*/
4332
.items .tag-item  {
4333
    display: block;
4334
}
4335

    
4336
.single .items .tag-item .key {
4337
    width: 60px;
4338
}
4339

    
4340
.running .scrollable, .terminated .scrollable {
4341
    height: 42px;
4342
}
4343

    
4344
.items .tag-item .key {
4345
    margin-right: 5px;
4346
    width: 30px;
4347
    display: block;
4348
    float: left;
4349
    color: #000;
4350
}
4351

    
4352
.items .tag-item .value {
4353
    color: #444;
4354
}
4355

    
4356
#machinesview-list {
4357
    display: none;
4358
}
4359

    
4360
#machinesview-single {
4361
    position: relative;
4362
    display: none;
4363
}
4364

    
4365
#machinesview-icon {
4366
    display: none;
4367
}
4368

    
4369
#machinesview-icon, #machinesview-single, #machinesview-list {
4370
    
4371
}
4372

    
4373
tbody.machines .spinner {
4374
    margin-top: 0!important;
4375
    margin: 0 !important;
4376
    float: none !important;
4377
}
4378

    
4379
.slider .slider-point {
4380
    width: 4px;
4381
    height: 3px;
4382
    margin-left: 1px;
4383
    background-color: transparent;
4384
    display: block;
4385
    position: absolute;
4386
    z-index: 10;
4387
    bottom: 0px;
4388
}
4389

    
4390
.slider .slider-point-light {
4391
    background-color: transparent;
4392
}
4393

    
4394
.slider-point-text {
4395
    font-size: 0.6em;
4396
    position: absolute;
4397
    top: 4px;
4398
    border-top: 5px solid #C5DEE9;
4399
    padding: 3px;
4400
    color: #4085A5;
4401
    display: block;
4402
    min-width: 6px;
4403
    text-align: middle;
4404
}
4405

    
4406
.slider .handle {
4407
    z-index: 50;
4408
}
4409

    
4410
.modal p.desc {
4411
    margin: 5px 0;
4412
    margin-left: 37px;
4413
    font-size: 0.8em;
4414
    color: #888;
4415
}
4416

    
4417
.api_overlay_template {
4418
    display: none;
4419
}
4420

    
4421
.api_content .password-container .password {
4422
    color: #fff;
4423
    font-size: 1.1em;
4424
}
4425

    
4426
#disks-pane {
4427
    margin-top: 58px;
4428
}
4429

    
4430
span.resend-msg {
4431
    display: block;
4432
    margin-bottom: 5px;
4433
}
4434

    
4435
.success-msg {
4436
    background-color: #5CAD54;
4437
    color: #fff;
4438
    padding: 0.4em;
4439
    border: 1px solid #ddd;
4440
}
4441

    
4442
.error-msg {
4443
    background-color: #800000;
4444
    color: #fff;
4445
    padding: 0.4em;
4446
    border: 1px solid #ddd;
4447
}
4448

    
4449
.success-msg em, .error-msg em {
4450
    font-weight: bold;
4451
    font-style: normal;
4452
    font-size: 0.9em;
4453
}
4454

    
4455
.pagination {
4456
            font-size: 80%;
4457
        }
4458
        
4459
.pagination a {
4460
    text-decoration: none;
4461
        border: solid 1px #AAE;
4462
        color: #15B;
4463
}
4464

    
4465
.pagination a, .pagination span {
4466
    display: block;
4467
    float: left;
4468
    padding: 0.3em 0.5em;
4469
    margin-right: 5px;
4470
        margin-bottom: 5px;
4471
        min-width:1em;
4472
        text-align:center;
4473
}
4474

    
4475
.pagination .current {
4476
    background: #4085A5;
4477
    color: #fff;
4478
        border: solid 1px #AAE;
4479
}
4480

    
4481
.pagination .current.prev, .pagination .current.next{
4482
        color:#999;
4483
        border-color:#999;
4484
        background:#fff;
4485
}
4486

    
4487
#invsent .pagination {
4488
    margin-top: 10px;
4489
}
4490

    
4491
table.list-machines .wave {
4492
    float: none !important;
4493
    margin: 0 !important;
4494
}
4495

    
4496
.overlay {
4497
    display: none;
4498
}
4499

    
4500
.overlay {
4501
    background-color: #fff;
4502
    border: 2px solid #444;
4503
    text-align: left;
4504

    
4505
    -moz-box-shadow: 0 0 90px 5px #000;
4506
    -webkit-box-shadow: 0 0 90px 5px #000;
4507
    box-shadow: 0 0 90px 5px #000;
4508
    width: 600px;
4509
}
4510

    
4511
.overlay a {
4512
    color: #387693;
4513
}
4514

    
4515
.overlay .overlay-content .description.subinfo {
4516
    margin-bottom:0;
4517
    border-bottom: none;
4518
    padding-bottom:0;
4519
    margin-top: 10px;
4520
    padding-top:10px;
4521
    border-top: 1px solid #64a6c4;
4522
    /*border-top: 1px solid #DBE6EB;*/
4523
    font-size: 0.8em;
4524
}
4525

    
4526
.overlay .overlay-content .important {
4527
    color: #800000;
4528
}
4529

    
4530
.overlay .overlay-content .description {
4531
    color: #444;
4532
    border-bottom: 1px solid #64a6c4;
4533
    margin-bottom: 10px;
4534
    padding-bottom: 10px;
4535
    font-size: 0.9em;
4536
    line-height: 1.6em;
4537
}
4538
.overlay .overlay-content .empty-message {
4539
    margin-bottom: 5px;
4540
}
4541

    
4542
.overlay h3.header {
4543
    font-size: 0.9em;
4544
    text-align: left;
4545
    padding: 0.8em;
4546
    padding-left: 1em;
4547
    font-weight: normal;
4548
    border-bottom: 1px solid #ddd;
4549
}
4550

    
4551
.overlay h3.header .title {
4552
    float: left;
4553
}
4554

    
4555
.overlay .container {
4556
    position: relative;
4557
    padding-top: 1em;
4558
    padding: 0.5em;
4559
    background-image: url("./popup-bg.png");
4560
    background-repeat: repeat-x;
4561
}
4562

    
4563
.overlay .content {
4564
    background-color: transparent;
4565
    background-image: url("./popup-inner-bg.png");
4566
    padding: 1em;
4567
    font-size: 0.8em;
4568
    background-repeat: repeat-x;
4569
    -moz-box-shadow: 0 0 1px 1px #888;
4570
    -webkit-box-shadow: 0 0 1px 1px #888;
4571
    box-shadow: 0 0 1px 1px #888;
4572
}
4573

    
4574
.overlay .message {
4575
}
4576

    
4577
.overlay .actions {
4578
    position: absolute;
4579
    right: 0.75em;
4580
    top: 0.6em;
4581
}
4582

    
4583
.overlay .actions span {
4584
    font-size: 0.8em;
4585
    color: #fff;
4586
    cursor: pointer;
4587
    margin-left: 10px;
4588
    display: block;
4589
    float: left;
4590
    background-color: #4085A5;
4591
    padding: 0.2em 0.4em;
4592
}
4593

    
4594
.overlay-error .error-more-details {
4595
    margin-top: 5px;
4596
    max-height: 210px;
4597
    overflow: auto;
4598
}
4599

    
4600
.overlay-error .key.details.expand {
4601
    background-image: url("./plus-8.png");
4602
}
4603

    
4604
.overlay-error .key.details {
4605
    background-color: #5189A3;
4606
    cursor: pointer;
4607
    background-image: url("./minus-8.png");
4608
    background-repeat: no-repeat;
4609
    background-position: 545px;
4610
}
4611

    
4612
.overlay-error .container {
4613
    padding-top: 1.9em;
4614
}
4615

    
4616
.overlay-error .error-details {
4617
    font-size: 0.8em;
4618
    margin-top: 10px;
4619
}
4620

    
4621
.overlay-error .error-details anonymous {
4622
    display: block;
4623
    margin-top: 10px;
4624
}
4625

    
4626
.overlay-error h3.header {
4627
    background-color: #800000;
4628
    color: #fff;
4629
}
4630

    
4631
.overlay-error.non-critical h3.header {
4632
    background-color: #987249;
4633
}
4634

    
4635
.overlay-error span.key {
4636
    font-weight: normal;
4637
    display: block;
4638
    margin-top: 0.5em;
4639
    background-color: #74AEC9;
4640
    color: #fff;
4641
    padding: 0.4em;
4642
    font-size: 0.8em;
4643
    font-weight: bold;
4644
}
4645

    
4646
.overlay-error span.value, .overlay-error div.value {
4647
    padding: 0.4em;
4648
    display: block;
4649
    margin-bottom: 0.3em;
4650
}
4651

    
4652
.overlay h3 .closeme {
4653
    float: right;
4654
    font-size: 0.7em;
4655
    margin-top: 0.2em;
4656
    cursor: pointer;
4657
}
4658

    
4659
.overlay .header .subtitle {
4660
    display: block;
4661
    font-size: 0.8em;
4662
    color: #ddd;
4663
}
4664

    
4665
.overlay .header .subtitle img {
4666
    vertical-align: middle;
4667
    margin-left: 10px;
4668
    margin-bottom: 2px;
4669
}
4670

    
4671
.overlay-info .content {
4672
    background-repeat: no-repeat;
4673
    background-position: 110% 110%;
4674
    background-color: rgba(255,255,255,0.6)
4675
}
4676

    
4677
.overlay-info .header {
4678
    background-color: #4085A5;
4679
}
4680

    
4681
.overlay-info .header .title {
4682
    color: #fff;
4683
}
4684

    
4685
.overlay-info .header .closeme {
4686
    color: #fff;
4687
}
4688

    
4689
#loading-view {
4690
    width: 600px;
4691
    margin: 0 auto;
4692
    padding: 20px 0;
4693
    font-size: 0.8em;
4694
}
4695

    
4696
#loading-view .header span {
4697
    font-weight: bold;
4698
    color: #4085A5;
4699
}
4700

    
4701
#loading-view .info {
4702
    color: #ddd;
4703
}
4704

    
4705
.options-list {
4706
    margin-top: 0.5em;
4707
    font-size: 0.8em;
4708
}
4709

    
4710
.options-list.five li {
4711
    float: left;
4712
    display: block;
4713
    width: 20%;
4714
    margin-bottom: 5px;
4715
}
4716

    
4717
.options-list.five li:nth-child(5n) .options-object-cont {
4718
    margin-right: 0;
4719
}
4720

    
4721
.options-object-cont input {
4722
    border: 1px solid #aaa;
4723
    width: 92px;
4724
    padding: 0;
4725
    margin: 0;
4726
    margin-top:3px;
4727
    padding: 2px;
4728
}
4729

    
4730
.options-list.three li {
4731
    float: left;
4732
    display: block;
4733
    width: 33%;
4734
    margin-bottom: 5px;
4735
}
4736

    
4737
.options-list li .options-object-cont {
4738
    padding: 4px;
4739
    margin-right: 4px;
4740
    border: 1px solid #A6D1E6;
4741
    cursor: pointer;
4742
    min-height: 35px;
4743
    position: relative;
4744
}
4745

    
4746
.options-list.three li:nth-child(3n) .options-object-cont {
4747
    margin-right: 0;
4748
}
4749

    
4750
.options-list li.selected .options-object-cont {
4751
    background-color: #4085A5;
4752
    border: 1px solid #fff;
4753
}
4754

    
4755
.options-list li.selected .options-object-cont .title {
4756
    color: #fff;
4757
}
4758

    
4759
.options-list li.options-object .title {
4760
    display: block;
4761
    color: #FF7F2A;
4762
    margin-bottom: 2px;
4763
}
4764

    
4765
.options-list li .option-action {
4766
    display: none;
4767
    position: absolute;
4768
    background-repeat: no-repeat;
4769
}
4770

    
4771
.options-list.five li.editing {
4772
    width: 40%;
4773
}
4774

    
4775
.options-list.five li.editing .value {
4776
    display: none;
4777
}
4778

    
4779
.options-list li .remove {
4780
    background-image: url("./option-action-remove.png");
4781
    width:10px;
4782
    height:10px;
4783
    right:5px;
4784
    bottom: 5px;
4785
}
4786

    
4787
.options-list li .edit {
4788
    background-image: url("./option-action-edit.png");
4789
    width:10px;
4790
    height:10px;
4791
    right:5px;
4792
    top: 5px;
4793
}
4794

    
4795
.options-list li:hover .option-action  {
4796
    display: block;
4797
}
4798

    
4799
.options-list li.options-object .value {
4800
    color: #4085A5;
4801
    margin-top: 5px;
4802
    display: block;
4803
}
4804

    
4805
.options-list li.selected.options-object .value {
4806
    color: #ddd;
4807
}
4808
.options-list li .options-object-cont:hover {
4809
    background-color: #fff;
4810
}
4811

    
4812
.options-list li.selected .options-object-cont:hover {
4813
    background-color: #A6D1E6;
4814
}
4815

    
4816
.options-list li img {
4817
    float: left;
4818
    margin:2px;
4819
    margin-right: 10px;
4820
    padding-bottom:10px;
4821
}
4822

    
4823
#metadata-overlay-content {
4824
    position: relative;
4825
}
4826

    
4827
.vm-meta .editor .predefined .predefined-meta-key:hover {
4828
    background-color: #4e8eac;
4829
    color: #fff;
4830
}
4831

    
4832
.vm-meta .editor .predefined .predefined-meta-key {
4833
    float: left;
4834
    margin-right: 5px;
4835
    padding: 4px;
4836
    display: block;
4837
    cursor: pointer;
4838
}
4839

    
4840
.vm-meta .editor .predefined {
4841
    background-color: #A6D1E6;
4842
    font-size: 0.9em;
4843
    border-top: 1px solid #ddd;
4844
}
4845

    
4846
.vm-meta .editor input {
4847
}
4848
.vm-meta .editor {
4849
    margin-bottom: 10px;
4850
}
4851

    
4852
.vm-meta .editor .form-actions .form-action {
4853
    min-width: 50px;
4854
}
4855

    
4856
.vm-meta .editor .form-field input.meta-key {
4857
    width: 90px;
4858
}
4859

    
4860
.vm-meta .form-field {
4861
    float: left;
4862
}
4863

    
4864
.vm-meta .form-actions .form-action {
4865
    float: left;
4866
    margin-right: 10px;
4867
    height: 11px;
4868
}
4869

    
4870
.vm-meta .editor .form-actions .cancel {
4871
    margin-right: 0;
4872
}
4873

    
4874
.vm-meta .editor .form-actions {
4875
    float: right;
4876
    margin:0;
4877
    padding:0;
4878
    margin-left: 15px;
4879
    margin-top: 0px;
4880
}
4881

    
4882
.vm-meta .editor {
4883
    background-color: rgba(64, 133, 165, 0.898) !important;
4884
    background-color: #649DB8;
4885
    font-size:0.9em;
4886
}
4887

    
4888
.vm-meta .meta-key-title {
4889
    font-size: 1.3em;
4890
    color: #fff;
4891
    margin-bottom: 10px;
4892
    display: none;
4893
    float: left;
4894
}
4895

    
4896
.vm-meta .editor-content {
4897
    padding: 10px;
4898
}
4899

    
4900
.vm-meta .inner-mask {
4901
    background-color: #fff;
4902
    opacity:0.6;
4903
    position: absolute;
4904
    top:0;
4905
    left:0;
4906
}
4907

    
4908
.vm-meta .editor label {
4909
    float: left;
4910
    color: #fff;
4911
    margin-right: 2px;
4912
    padding-top:4px;
4913
    font-size: 0.9em;
4914
}
4915

    
4916
.vm-meta .editor input {
4917
    border: none;
4918
    width: 170px;
4919
    margin-left: 10px;
4920
    font-size: 0.9em;
4921
    padding: 4px;
4922
}
4923

    
4924
.vm-meta li.create .options-object-cont {
4925
    background-color: #B3C9AD ;
4926
    border-color: #788774;
4927
}
4928
.vm-meta li.create .options-object-cont .value,
4929
.vm-meta li.create .options-object-cont .title {
4930
    color: #fff;
4931
}
4932

    
4933
#createvm-overlay-content {
4934
    padding: 0;
4935
}
4936

    
4937
.overlay-createvm .container {
4938
    width: 584px !important;
4939
}
4940

    
4941
.create-vm .header-step.current {
4942
    font-weight: bold;
4943
}
4944

    
4945
.create-vm .create-step-cont {
4946
    min-height: 240px;
4947
}
4948
.create-vm .create-controls {
4949
    padding: 10px;
4950
}
4951

    
4952
.create-vm ul li {
4953
    cursor: pointer;
4954
    padding: 4px;
4955
}
4956

    
4957
.create-vm ul li.selected {
4958
    background-color: #aaa;
4959
}
4960

    
4961
.cont-toggler {
4962
    background-image: url("./down-arrow.png");
4963
    background-position: right;
4964
    background-repeat: no-repeat;
4965
    background-color: #A1C8DB;
4966
    display: inline-block;
4967
    border-right: 6px solid #A1C8DB;
4968
    padding:2px;
4969
    padding-right: 14px;
4970
    padding-left:0;
4971
    cursor: pointer;
4972
    color: #fff;
4973
    font-size: 0.9em;
4974
}
4975

    
4976
.cont-toggler .label {
4977
    background-color: #98BDCF;
4978
    padding: 2px;
4979
    padding-left: 5px;
4980
    padding-right: 5px;
4981
}
4982

    
4983
.cont-toggler.open {
4984
    background-color: #98BDCF;
4985
    border-color: #98BDCF;
4986
    background-image: url("./up-arrow.png");
4987
}
4988

    
4989
.cont-toggler.open .label {
4990
    background-color: #4085A5;
4991
}
4992

    
4993
.overlay .form label {
4994
    font-color: #444;
4995
    margin-right: 10px;
4996
}
4997

    
4998
.form-field input {
4999
    border: 1px solid #aaa;
5000
    width: 200px;
5001
    padding: 3px;
5002
}
5003

    
5004
.form-actions {
5005
    margin-top: 5px;
5006
    padding-top:5px;
5007
    border-top: 1px solid #64a6c4;
5008
    font-size: 0.8em;
5009
}
5010

    
5011
.form-actions.plain {
5012
    margin-top: 0px;
5013
    padding-top:0px;
5014
    border-top: 0px;
5015
}
5016

    
5017
.form-action {
5018
    float: right;
5019
    min-width: 140px;
5020
    background-color: #FF7F2A;
5021
    border: 1px solid #FF7F2A;
5022
    text-align: center;
5023
    color: #FFFFFF;
5024
    cursor: pointer;
5025
    padding: 4px;
5026
}
5027

    
5028
.form-action:hover {
5029
    background-color: #FF9955;
5030
    color: #FFF;
5031
}
5032

    
5033
.form-action.prev,
5034
.form-action.cancel {
5035
    background-color: #800;
5036
    border: 1px solid #800;
5037
    float: left;
5038
}
5039

    
5040
.form-action.prev:hover,
5041
.form-action.cancel:hover {
5042
    background-color: #fff;
5043
    color: #800;
5044
}
5045

    
5046
.form-action.next,
5047
.form-action.ok {
5048
    background-color: #080;
5049
    border: 1px solid #080;
5050
}
5051

    
5052
.form-action.next:hover,
5053
.form-action.ok:hover {
5054
    background-color: #fff;
5055
    color: #080;
5056
}
5057

    
5058
.form-action .create,
5059
.form-action .submit {
5060

    
5061
}
5062

    
5063
.form-action.in-progress, button.in-progress {
5064
    background-image: url("./icons/indicators/medium/horizontal-progress.gif");
5065
    background-repeat: no-repeat;
5066
    background-position: center center;
5067
    color: transparent;
5068
}
5069

    
5070
#createvm-overlay-content {
5071
    padding: 0;
5072
}
5073

    
5074
.create-vm .image-details.selected .size {
5075
    color: #eee;
5076
}
5077

    
5078
.create-vm .image-details p {
5079
    font-size: 0.8em;
5080
    padding-left: 27px;
5081
    display:block;
5082
}
5083

    
5084
.create-vm .image-details .size {
5085
    margin-top: 2px;
5086
    font-size: 0.8em;
5087
    color: #aaa;
5088
    position: absolute;
5089
    right:5px;
5090
    top: 5px;
5091
}
5092

    
5093
.create-vm .step-cont {
5094
    margin: 15px;
5095
}
5096

    
5097
.create-vm .create-step-cont {
5098
    min-height: 250px;
5099
    float: left;
5100
    width: 584px;
5101
}
5102

    
5103
.create-vm .create-controls {
5104
    padding: 10px;
5105
    border-top: 1px solid #ddd;
5106
}
5107

    
5108
.create-vm .empty {
5109
    font-size: 0.8em;
5110
    color: #444;
5111
}
5112

    
5113
.create-vm h4 {
5114
    color: #5CA1C0;
5115
    margin-bottom: 0.5em;
5116
    font-family: arial;
5117
}
5118
.create-vm ul li {
5119
    cursor: pointer;
5120
    padding: 4px;
5121
    font-size: 0.9em;
5122
}
5123

    
5124
.create-vm ul li.selected {
5125
    background-color: #5CA1C0;
5126
    color: #fff;
5127
}
5128

    
5129
.create-vm .images-list-cont {
5130
    width: 40%;
5131
    float: left;
5132
    padding-left: 3%;
5133
    padding-right: 3%;
5134
}
5135

    
5136
.create-vm li.role .values .val:hover {
5137
    background-color: #eee;
5138
}
5139
.create-vm li.role .values .val.selected,  .create-vm li.role .values .val.selected:hover {
5140
    color: #fff;
5141
    background-color: #5CA1C0;
5142
}
5143

    
5144
.create-vm .images-filter-cont, .create-vm .flavors-predefined-cont {
5145
    width: 18%;
5146
    padding-right: 4%;
5147
    float:left;
5148
    border-right: 1px solid #A1C8DB;
5149
    overflow: auto;
5150
}
5151

    
5152
.create-vm .flavor-options-cont {
5153
    width: 74%;
5154
    float: left;
5155
    margin-left: 20px;
5156
}
5157

    
5158
.create-vm .flavor-options-cont .flavor-options li:hover {
5159
    background-image:-webkit-linear-gradient(top, #E8F4FA, #D1E7F0);
5160
    background-image:linear-gradient(top, #E8F4FA, #D1E7F0);
5161
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E8F4FA', endColorstr='#D1E7F0', GradientType=0);
5162
}
5163

    
5164
.create-vm .flavor-options-cont .flavor-options li.disabled * {
5165
    color: #eee !important;
5166
}
5167

    
5168
.create-vm .flavor-options-cont .flavor-options li.disabled {
5169
    background-image:linear-gradient(top, #aaa, #ddd);
5170
    background-image:-webkit-linear-gradient(top, #aaa, #ddd);
5171
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#dddddd', GradientType=0);
5172
}
5173

    
5174
.create-vm .flavor-options-cont .flavor-options li.selected {
5175
    background-color: #FF9955;
5176
    background-image:linear-gradient(top, #FF9955, #E88B4D);
5177
    background-image:-webkit-linear-gradient(top, #FF9955, #E88B4D);
5178
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF9955', endColorstr='#E88B4D', GradientType=0);
5179
    border: 1px solid #C97943;
5180
}
5181

    
5182
.create-vm .predefined-list li.disabled {
5183
    color: #ddd !important;
5184
}
5185

    
5186
.create-vm .flavor-options-cont .flavor-options li {
5187
    display: block;
5188
    float: left;
5189
    margin-right: 10px;
5190
    padding: 10px 15px;
5191
    border: 1px solid #aaa;
5192
    background-image:-webkit-linear-gradient(top, #D1E7F0, #E8F4FA);
5193
    background-image:linear-gradient(top, #D1E7F0, #E8F4FA);
5194
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E7F0', endColorstr='#E8F4FA', GradientType=0);
5195
}
5196

    
5197
.create-vm .flavor-options-cont .flavor-options {
5198
    margin-bottom: 25px;
5199
}
5200

    
5201
.create-vm .flavor-options .metric {
5202
    font-size: 0.8em;
5203
    margin-left: 2px;
5204
}
5205

    
5206
.create-vm .flavor-options span.title {
5207
    color: #444;
5208
}
5209

    
5210
.create-vm .flavor-options span.desc {
5211
    display: block;
5212
    color: #aaa;
5213
    font-weight: normal;
5214
    font-size: 0.8em;
5215
    float: right;
5216
    margin-top: 4px;
5217
}
5218

    
5219
.create-vm .flavor-options .selected .value {
5220
    color: #FFF;
5221
}
5222

    
5223
.create-vm .flavor-options .value {
5224
    font-weight: bold;
5225
    color: #5CA1C0;
5226
}
5227

    
5228
.create-vm .flavor-options-cont h4 {
5229
    border-bottom: 1px solid #A1C8DB;
5230
    padding-bottom: 5px;
5231
}
5232

    
5233
.create-vm .images-info-cont {
5234
    width: 28%;
5235
    padding-left: 3%;
5236
    float: left;
5237
    border-left: 1px solid #A1C8DB;
5238
}
5239

    
5240
.create-vm .images-info-cont h4, .create-vm .vm-confirm .param h4{
5241
    color: #FF9955;
5242
    margin-bottom: 1em;
5243
    font-size: 1.2em;
5244
}
5245

    
5246
.create-vm .images-info-cont span.title {
5247
    color: #4085A5;
5248
    display: block;
5249
    margin-bottom: 2px;
5250
    font-size: 0.8em;
5251
}
5252

    
5253
.create-vm .type-filter li {
5254
    font-size: 0.8em;
5255
    font-weight: bold;
5256
    padding: 4px;
5257
    margin-bottom: 0px;
5258
    
5259
}
5260

    
5261
.create-vm .images-list .image-details:hover {
5262
    background-color: #eee;
5263
}
5264

    
5265
.create-vm .images-list .image-details.selected:hover {
5266
    background-color: #5CA1C0;
5267
}
5268

    
5269
.create-vm .images-list .image-details.selected {
5270
    /*font-weight: bold;*/
5271
}
5272

    
5273
.create-vm .images-list .image-details {
5274
    padding: 6px;
5275
    margin-bottom:1px;
5276
    position: relative;
5277
}
5278

    
5279
.create-vm .images-list .image-details img {
5280
    vertical-align: middle;
5281
    margin-right: 10px;
5282
}
5283

    
5284
.create-vm .images-info-cont .image-detail:last-child p {
5285
    border-bottom: none;
5286
}
5287

    
5288
.create-vm .images-info-cont h4 img {
5289
    vertical-align: middle;
5290
    margin-right: 7px;
5291
    margin-bottom: 5px;
5292
}
5293

    
5294
.create-vm .images-info-cont .description p {
5295
    font-size: 0.8em;
5296
}
5297

    
5298
.create-vm .images-info-cont p {
5299
    margin-bottom: 7px;
5300
    font-size: 0.9em;
5301
    border-bottom: 1px solid #A1C8DB;
5302
    padding-bottom: 7px;
5303
}
5304

    
5305
.create-vm .step-header {
5306
    padding: 10px;
5307
    padding-bottom:0;
5308
    margin-bottom: 10px;
5309
    background-color: #A1C8DB;
5310
    border-bottom: 1px solid #aaa;
5311
    position: relative;
5312
}
5313

    
5314
.create-vm .step-header .header-step .info span.subtitle {
5315
    font-size: 1.2em;
5316
    color: #fff;
5317
    font-weight: bold;
5318
}
5319

    
5320
.create-vm .step-header .header-step .info span {
5321
    float: none;
5322
    text-align: right;
5323
}
5324

    
5325
.create-vm .step-header .header-step .info {
5326
    position: absolute;
5327
    right: 15px;
5328
    top: 20px;
5329
    font-size: 0.8em;
5330
}
5331

    
5332
.create-vm .step-header .header-step span {
5333
    float: left;
5334
    display: block;
5335
}
5336

    
5337
.create-vm .steps-container {
5338
    width: 2000em;
5339
}
5340

    
5341
.create-vm .step-header .header-step .title {
5342
    margin-top: 20px;
5343
    font-size: 1em;
5344
    margin-left: 10px;
5345
}
5346

    
5347
#createvm-overlay-content {
5348
    width: 584px;
5349
    overflow: hidden;
5350
}
5351

    
5352
.create-vm .step-header .header-step .num {
5353
    font-size: 4em;
5354
    margin-bottom: -5px;
5355
    font-family: 'Ubuntu';
5356
    font-weight: normal !important;
5357
}
5358

    
5359
.create-vm .step-header .header-step {
5360
    color: #DCEBF1;
5361
    margin-bottom: -6px;
5362
    width: 25%;
5363
    padding-left: 0%;
5364
    display: block;
5365
    float: left;
5366
}
5367

    
5368
.create-vm .step-header .header-step.current {
5369
    color: #387693;
5370
}
5371

    
5372
.create-vm .image-filters-title {
5373
    margin-top: 1em;
5374
    margin-bottom: 0.5em;
5375
}
5376

    
5377
.create-vm .create-step-cont span.clear {
5378
    font-size: 0.8em;
5379
    font-weight: bold;
5380
    color: #A1C8DB;
5381
    display: block;
5382
}
5383

    
5384
.create-vm .category-filters li {
5385
    float:left;
5386
    display: block;
5387
    padding: 4px;
5388
    background-color: #eee;
5389
    margin-right: 5px;
5390
    font-size: 0.9em;
5391
    margin-bottom: 5px;
5392
}
5393

    
5394
.create-vm .content-cont {
5395
    height: 340px;
5396
    overflow: auto;
5397
}
5398

    
5399
.confirm-cont {
5400
    height: 250px;
5401
}
5402

    
5403
.create-vm .vm-confirm .rename input.rename-field {
5404
    font-size: 1.4em;
5405
    padding: 5px;
5406
    width: 93%;
5407
    padding-left: 30px;
5408
    background-position: 7px center;
5409
    background-repeat: no-repeat;
5410
}
5411

    
5412
.create-vm .vm-confirm .rename label {
5413
    display: block;
5414
}
5415

    
5416
.create-vm .vm-confirm .confirm-conts {
5417
    margin-top: 20px;
5418
}
5419

    
5420
.create-vm .vm-confirm .confirm-cont {
5421
    width: 30%;
5422
    margin-right: 2%;
5423
    border-right: 1px solid #A1C8DB;
5424
    float: left;
5425
}
5426

    
5427
.create-vm .vm-confirm .confirm-cont ul li {
5428
    padding:0;
5429
    margin:0;
5430
    margin-bottom: 5px;
5431
    border-bottom: 1px solid #EEE;
5432
    padding-bottom: 9px;
5433
    margin-right: 10px;
5434
}
5435

    
5436
.create-vm .vm-confirm .confirm-cont.meta h4 {
5437
    margin-right: 0;
5438
}
5439

    
5440
.create-vm .vm-confirm .confirm-cont.meta {
5441
    margin-right:0;
5442
    border-right: none;
5443
    width: 195px;
5444
}
5445

    
5446
.create-vm .confirm-cont > h4 {
5447
    font-size: 1.2em;
5448
    margin-right: 10px;
5449
    border-bottom: 1px solid #A1C8DB;
5450
    padding-bottom: 5px;
5451
    color: #387693;
5452
}
5453

    
5454
.create-vm .confirm-cont .param.image-name {
5455
    margin-bottom: 0 !important;
5456
    border-bottom: none !important;
5457
}
5458

    
5459
.create-vm .confirm-cont .param h4 {
5460
    margin-bottom: 0px !important;
5461
    font-size: 1.1em !important; 
5462
}
5463

    
5464
.create-vm .confirm-cont .param {
5465
    margin-bottom: 10px !important;
5466
}
5467

    
5468
.create-vm .confirm-cont .value {
5469
    font-weight: bold;
5470
}
5471

    
5472
.create-vm .confirm-cont .param .value {
5473
    font-size: 0.9em;
5474
}
5475

    
5476
.create-vm .confirm-cont .param .title {
5477
    color: #387693;
5478
}
5479

    
5480
.create-vm .confirm-cont .image-description {
5481
    margin-left:0;
5482
}
5483

    
5484
.create-vm .confirm-cont .image-description .value {
5485
    font-weight: normal;
5486
    margin-left: 0 !important;
5487
}
5488

    
5489
.create-vm .confirm-cont .image-description .title {
5490
    display: none;
5491
    font-size: 0.8em;
5492
}
5493

    
5494
.create-vm .confirm-cont.meta .values span {
5495
    display:block;
5496
    float: left;
5497
    margin-right: 4px;
5498
    border: 1px solid #eee;
5499
    padding:3px;
5500
    margin-bottom: 4px;
5501
    font-size: 0.9em;
5502
}
5503

    
5504
.create-vm .confirm-cont.meta .key {
5505
    font-weight: bold;
5506
    font-size: 0.9em;
5507
    display: block;
5508
    margin-bottom: 5px;
5509
}
5510

    
5511
.create-vm .meta input {
5512
    font-size: 0.8em;
5513
}
5514

    
5515
.vm-connect .connect-cont {
5516
    margin-bottom: 20px;
5517
    border-bottom: 1px solid #A1C8DB;
5518
    padding-bottom: 20px;
5519
}
5520

    
5521
.vm-connect .connection-info {
5522
    padding-bottom: 0px;
5523
    margin-bottom: 0;
5524
    border-bottom: none;
5525
}
5526

    
5527
.vm-connect .connection-info .connect a {
5528
    color: #fff;
5529
}
5530

    
5531
.vm-connect .connection-info .connect {
5532
    background-color: #387693;
5533
    color: #fff;
5534
    padding: 10px;
5535
    font-size: 1.2em;
5536
    text-align: center;
5537
}
5538

    
5539
.clip-copy {
5540
    display: block;
5541
    width: 20px;
5542
    height: 20px;
5543
    position: absolute;
5544
    border: 1px solid #387693;
5545
    background-image: url("./clipboard.png");
5546
    background-repeat: no-repeat;
5547
    background-position: center;
5548
    cursor: pointer;
5549
    background-color: #A1C8DB;
5550
}
5551

    
5552
.password-cont .clip-copy { right: 10px; top: 8px;}