Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ cb9426d2

History | View | Annotate | Download (24.9 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
        line-height: 1;
21
    background: url(../static/degrade-background.png) repeat-x scroll 0 0 #C3C3C3;
22
    margin: 0;
23
}
24

    
25
ol, ul {
26
        list-style: none;
27
}
28

    
29
blockquote, q {
30
        quotes: none;
31
}
32

    
33
blockquote:before, blockquote:after,
34
q:before, q:after {
35
        content: '';
36
        content: none;
37
}
38

    
39
/* remember to define focus styles! */
40
:focus {
41
    outline: 1px dotted #87AADE;
42
}
43

    
44
/* remember to highlight inserts somehow! */
45
ins {
46
        text-decoration: none;
47
}
48

    
49
del {
50
        text-decoration: line-through;
51
}
52

    
53
/* tables still need 'cellspacing="0"' in the markup */
54
table {
55
        border-collapse: collapse;
56
        border-spacing: 0;
57
}
58

    
59
h5 {
60
    font-weight: normal;
61
    font-size: 9pt;
62
    margin-bottom:3px;
63
}
64

    
65
/* root element for tabs  */
66
ul.css-tabs {
67
        margin: 0 0 0 10px; 
68
    padding: 0;
69
        height:31px;
70
    font-size:32px;        
71
    overflow: hidden;         
72
}
73

    
74
ul.css-tabs .secondary {
75
    position:relative;
76
}
77

    
78
/* single tab */
79
ul.css-tabs li {  
80
        float:left;         
81
        padding:0; 
82
        margin: 0 10px 0 0;  
83
        list-style-type:none;        
84
}
85

    
86
/* link inside the tab. uses a background image */
87
ul.css-tabs a { 
88
        float:left;
89
        display:block;
90
        text-decoration:none;
91
        color:#d2d2d2;
92
        position:relative;
93
        outline:0;
94
    padding: 0 9px 0 13px;
95
    top: 9px;
96
}
97

    
98
ul.css-tabs a#machines {
99
    color: #a3bbc5;
100
}
101

    
102
ul.css-tabs a#machines.current {
103
  color: #87aade;
104
}
105

    
106
ul.css-tabs a#disks {
107
    color: #deb358;
108
}
109

    
110
ul.css-tabs a#disks.current {
111
    color: #dea842;
112
}
113

    
114
ul.css-tabs a#images {
115
    color: #9ba97b;
116
}
117

    
118
ul.css-tabs a#images.current {
119
    color: #87a06d;
120
}
121

    
122
ul.css-tabs a#networks {
123
    color: #bc9399;
124
}
125

    
126
ul.css-tabs a#networks.current {
127
  color: #9d6d6a;
128
}
129

    
130
ul.css-tabs a#files {
131
    color: #a3bbc5;
132
}
133

    
134
ul.css-tabs a#files.current {
135
  color: #87aade;
136
}
137

    
138
ul.css-tabs a#desktops {
139
    color: #deb358;
140
}
141

    
142
ul.css-tabs a#desktops.current {
143
    color: #dea842;
144
}
145

    
146
ul.css-tabs a#apps {
147
    color: #9ba97b;
148
}
149

    
150
ul.css-tabs a#apps.current {
151
    color: #87a06d;
152
}
153

    
154
.more-tabs {
155
    float: right;
156
    margin: -15px 50px 0px 0px;
157
}
158

    
159
.more-tabs:hover {
160
    cursor: pointer;
161
}
162
        
163
/* selected tab */
164
ul.css-tabs a.current {
165
        cursor:default;   
166
    top: 2px !important; 
167
}
168

    
169
/* tab pane */
170
div.css-panes {
171
/*    border-top: 10px solid #87aade;
172
    border-bottom: 10px solid #87aade;  */
173
    background: white;
174
}
175

    
176
.css-panes > div.pane {
177
        display:none;
178
        padding:0px 20px;
179
    margin: 0 1em;
180
}
181

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

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

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

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

    
216
#create {
217
    background-color: #87aade;
218
    color: #000;
219
    cursor: pointer;
220
    display: none;
221
    padding: 6px 24px;
222
    margin: -8px 0 20px -36px;
223
    width: 125px;
224
    text-decoration: none;
225
}
226

    
227
#create:hover {
228
    background-color: #a8c5f1;
229
}
230

    
231
#header .fatborder{
232
    height: 60px;
233
    background: #999;
234
}
235

    
236
div#wrapper {
237
    width: 700px;
238
    margin: 0em auto;
239
}
240

    
241
.modal {
242
    background-color:#fff;
243
    display:none;
244
    width:30em;
245
    height:20em;
246
    padding:1em;
247
    text-align:left;
248
}
249

    
250
/* scrollable root element */
251
#wizard {        
252
        font-size:9pt;
253
        height:405px;
254
        width:453px;
255
        margin:0px auto;        
256
        overflow:hidden;
257
        position:absolute !important;
258
}  
259

    
260
/* scrollable items */
261
#wizard .items {
262
        width:20000em;
263
        clear:both;
264
        position:absolute;
265
}
266

    
267
/* validation error message bar. positioned on the top edge */
268
#drawer {
269
        overflow:visible;
270
        position:fixed;
271
        left:0;
272
        top:0;
273
}
274

    
275
/* scrollable items */
276
#wizard .items {
277
        width:20000em;        
278
        clear:both;        
279
        position:absolute;        
280
    display:block;
281
    padding: 0;
282
    margin: 0;
283
    border:none;
284
    background:none;
285
}
286

    
287
/* single item */
288
#wizard .page {        
289
    padding: 15px 40px 20px 15px;
290
        width:447px;
291
        float:left;        
292
    display:block;
293
    border:none;
294
    background-color: transparent;
295
}
296

    
297
/* title */
298
#wizard h2 {
299
    color: black;
300
    font-size: 100%;
301
    font-weight: normal;
302
    padding-left: 20px;
303
}
304

    
305
#wizard li {
306
        margin-bottom:1.2em;
307
}
308

    
309
#wizard .pane li {
310
    margin: 0;
311
}
312

    
313
#wizard label {
314
        font-size:16px;        
315
        display:block;
316
    clear: both;
317
}
318

    
319
#wizard label strong {
320
        position:relative;
321
        top:-1px;
322
    font-size: 80%;
323
    font-weight: normal;
324
}
325

    
326
#wizard label em {
327
        font-size:9pt;
328
        color:#666;        
329
        font-style:normal;
330
}
331

    
332
#wizard .text {
333
        width: 270px;
334
        padding: 5px;
335
    margin-top: 10px;
336
        border: 1px solid #ccc;
337
        color: #456;
338
        letter-spacing: 1px;
339
}
340

    
341
#wizard select {
342
        border:1px solid #ccc;
343
        width:94%;        
344
        padding:4px;
345
    display: none;
346
}
347

    
348
#wizard .double label { 
349
        width:50%;
350
        float:left;
351
}
352

    
353
#wizard .double .text {
354
        width:93%;        
355
}
356

    
357
#wizard .clearfix {
358
        clear:left;
359
        padding-top:10px;        
360
}
361

    
362
#wizard .right {
363
        float:right;                
364
}
365

    
366
#wizard .error {
367
        border:1px solid red;                
368
}
369

    
370
#wizard a div.image {
371

    
372
}
373

    
374
#wizard a:hover div.image {
375
    background-color: #999;
376
}
377

    
378
.selecteddiv {
379
    background-color: #999 !important;
380
}
381

    
382
#wizard label a:hover strong {
383
    color: white;
384
}
385

    
386
#wizard div.image span.size {
387
    font-size: 9pt;
388
    color: #666;
389
}
390

    
391
#wizard div.image .radio {
392
    float: left;
393
    margin-top: 10px;
394
}
395

    
396
#wizard div.image span.image-id, #wizard div.image span.description {
397
    font-size: 9pt;
398
    color: #666;
399
    font-weight: normal;
400
    display:inline;
401
}
402

    
403
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
404
    color: white;
405
}
406

    
407
#wizard .cost {
408
    color: #666;
409
    margin-top: 40px;
410
    clear:both;
411
    padding-left: 15px;
412
    font-size: 95%;
413
}
414

    
415
#wizard #status {
416
        height: 50px;
417
        background: #666;
418
    width: 450px;
419
}
420

    
421
#wizard .headernumber {
422
    font-size: 470%;
423
    font-weight: normal;
424
}
425

    
426
#wizard .headerbody {
427
    font-size: 110%;
428
    font-weight: normal;
429
    display: inline;
430
    margin-top: 20px;
431
    position: absolute;
432
}
433

    
434
#wizard .first {
435
    margin-left: -7px;
436
}
437

    
438
#wizard .third {
439
    margin-top: -2px !important;
440
}
441

    
442
#wizard .topruler {
443
    background-color: #CCCCCC;
444
    border: 0 none;
445
    height: 4px;
446
    margin-left: -1px;
447
    width: 447px;
448
    margin-bottom: 6px;
449
    margin-top: 6px;
450
}
451

    
452
#wizard .bottomruler {
453
    background-color: #CCCCCC;
454
    border: 0 none;
455
    height: 4px;
456
    margin-left: -1px;
457
    width: 447px;
458
}
459

    
460
#wizard #cancel {
461
    text-align: center;
462
}
463

    
464
#wizard #start {
465
    text-align: center;
466
    background-color: #FF6600;
467
    border-color: #FF6600;
468
}
469

    
470
#wizard #start:hover {
471
    background-color: #FF9651;
472
    border-color: #FF9651;
473
}
474

    
475
.page ul {
476
    height: 270px;
477
    overflow: auto;
478
}
479

    
480
.panes ul.pane {
481
    height: 220px;
482
}
483

    
484
.page ul.tabs {
485
    overflow: hidden;
486
    height: auto;
487
    margin-bottom: 2px;
488
    margin-top: -5px;
489
}
490

    
491
.page ul.tabs li {
492
    float: right;
493
    margin: 0 0.2em;
494
}
495

    
496
#status li {
497
        float: left;
498
        color: #7D7D7D;
499
    padding: 0px 72px 0 40px;
500
    margin-top: -1px;
501
}
502

    
503
#status li.active .headernumber {
504
    color: #FFFFFF;
505
}
506

    
507
#status li.active .headerbody {
508
    color: #5599FF;
509
}
510

    
511
div.image-container {
512
    border-bottom: 1px solid #CCCCCC;
513
    margin-left: 10px;
514
    margin-right: 10px;
515
}
516

    
517
#page2-container {
518
    background-color: #ECECEC;
519
    padding-top: 25px;
520
    height: 180px;
521
}
522

    
523
#page3-container {
524
    background-color: #ECECEC;
525
    padding-left: 50px;
526
    height: 244px;
527
    margin-bottom: 32px;
528
}
529

    
530
/* slider root element */
531
.slider {
532
    border: 1px solid #666;
533
    cursor: pointer;
534
    display: inline !important;
535
    float: left;
536
    margin: 5px 0 20px 10px;
537
    position: relative;
538
    width: 250px;
539
}
540

    
541
.sliders {
542
    float:left;
543
    width: 40px;
544
    margin-left: 10px;  
545
    margin-top: 3px;
546
}
547

    
548
.units {
549
    padding-left:10px;
550
}
551

    
552
.slider-container {
553
    padding-bottom: 15px;
554
    margin-left: 5px;
555
}
556

    
557
/* drag handle */
558
.handle {
559
    -moz-box-shadow: 0 0 2px #000000;
560
    background: url("../static/h30.png") repeat-x scroll 0 0 #FFFFFF;
561
    border: 1px solid #000000;
562
    cursor: move;
563
    display: block;
564
    height: 10px;
565
    margin-top: -8px;
566
    position: absolute;
567
    width: 8px;
568
}
569

    
570
/* progress bar (enabled with progress: true) */
571
.progress {
572
        height: 3px; 
573
        background-color: #676767;
574
}
575

    
576
/* the input field */
577
.range {
578
        float: left;
579
        font-size: 100%;
580
        margin: -3px 0 0 15px;
581
    padding: 2px 10px 2px 0;
582
        text-align: right;
583
        width: 40px;
584
    border: 1px solid #111111;
585
}
586

    
587
.selectedrange {
588
    border-color: #5599FF;
589
}
590

    
591
#credits-indicator {
592
    background-color: #ECECEC;
593
    float: none;
594
    margin: 0 0 0 10px;
595
    border: 1px solid #999;
596
    color: #222222;
597
}
598

    
599
div.machine {
600
    clear: both;
601
    margin: 5px 0 0 -32px;
602
    padding: 3px 4px 0;
603
    width: 523px;
604
    color: #666;
605
    height: 65px;
606
}
607

    
608
.machine a {
609
    color: #3d3d3d;
610
    font-weight: normal;
611
    text-decoration: none;
612
    font-size: 9pt;
613
}
614

    
615
.machine a:hover {
616
    color: #000;
617
    text-decoration: underline;
618
}
619

    
620
.state {
621
    float: right;
622
}
623

    
624
.state div {
625
    text-align: right;
626
    margin-right: 3px;
627
}
628

    
629
div.machine div.actions {
630
    float: right;
631
    width: 70px;
632
    margin:0px -70px 0 0;
633
    font-weight: normal;
634
}
635

    
636
div.machine div.actions a {
637
    color: transparent;
638
    margin: 0 0 5px 8px;
639
    display: block;
640
}
641

    
642
div.machine div.actions a.action-shutdown {
643
    margin-bottom: 18px;
644
    display: block;
645
}
646

    
647
div.machine div.actions a.destroy-padding {
648
    margin-top: 46px;
649
}
650

    
651
div.actions a.enabled:hover{
652
    color: black !important;
653
    text-decoration: underline;
654
    display: block;
655
}
656

    
657
.machine:hover .actions a {
658
    color: #3d3d3d;
659
    display: block;
660
}
661

    
662
div.machine div.display a{
663
    color: #3d3d3d;
664
    display: block;
665
}
666

    
667
div.machine div.actions a.selected:hover {
668
    color: orange;
669
}
670

    
671
div.running div.machine a.action-start {
672
    display: none;
673
}
674

    
675
div.terminated div.machine a.action-reboot, div.terminated div.machine a.action-shutdown{
676
    display: none;
677
}
678

    
679
div.terminated div.machine div.actions a.action-destroy {
680
    margin-top: 34px;
681
}
682

    
683
.machine:hover {
684
    background-color:#dcdcdc;
685
}
686

    
687
.standard .machine img {
688
    float: left;
689
    margin: 7px 14px 0;
690
}
691

    
692
.list .machine img {
693
    margin: 0;
694
}
695

    
696
div.ip, div.state {
697
    font-size: 9pt;
698
    color: #3d3d3d;
699
}
700

    
701
div.indicator {
702
    width:10px;
703
    height:11px;
704
    margin: 3px -1px;
705
    clear: none;
706
    float:right;
707
}
708

    
709
.view-separator {
710
    color:#5F8DD3;    
711
}
712

    
713
.running .indicator {
714
    border-top: 2px solid white;
715
    border-bottom: 2px solid white;
716
    border-left: 2px solid white;
717
    border-right: 3px solid white;
718
    background-color: #87AADE;
719
}
720

    
721
.terminated {
722
    margin-bottom: 17px;
723
}
724

    
725
.terminated .machine .state .status {
726
    color: #666;
727
}
728

    
729
.machine:hover div.uptime, .machine:hover a.rename, .machine:hover a.configure {
730
    color: #3d3d3d;
731
}
732

    
733
div.uptime {
734
    clear: both;
735
    color: transparent;
736
    margin-left: 1px;
737
}
738

    
739
div.machine-tabs {
740
    margin-top: 1em;
741
}
742

    
743
span.rename, span.configure {
744
    background-repeat: no-repeat;
745
    color: transparent;
746
    font-size: 9pt;
747
    font-weight: normal;
748
    margin-left: 10px;
749
    padding-left: 10px;
750
    text-align: left;
751
}
752

    
753
a.name:hover span.rename {
754
    color: #3D3D3D;
755
    margin-top: 0.4em;
756
    background-image: url(/static/pencil.png);
757
    background-position: 0 3px;
758
}
759

    
760

    
761
a.settings:hover span.configure {
762
    color: #3D3D3D;
763
}
764

    
765
button {
766
    background-color: #87AADE;
767
    border: 1px solid #87AADE;
768
    color: #FFFFFF;
769
    cursor: pointer;
770
    height: 23px;
771
    width: 120px;
772
}
773

    
774
button.next:hover {
775
    background-color: #68A4FF;
776
    border-color: #68A4FF;
777
}
778

    
779
button.prev:hover {
780
    background-color: #888888;
781
    border-color: #888888;
782
}
783

    
784
button.next {
785
    background-color: #5599FF;
786
    border-color: #5599FF;
787
    text-align: right;
788
}
789

    
790
button.prev {
791
    background-color: #666;
792
    border:none;
793
    margin-left: -1px;
794
    text-align: left;
795
}
796

    
797
.image-logo {
798
    float: left;
799
    margin-right: 1em;
800
    margin-left: 1.5em;
801
    margin-top: 4px;
802
}
803

    
804
div.image {
805
    clear: both;
806
    display: block;
807
    margin-bottom: 3px;
808
    margin-top: 3px;
809
    padding: 5px;
810
}
811

    
812
div#view-select {
813
    float: right;
814
    clear: both;
815
    color: white;
816
    margin-top: -42px;
817
    margin-right: -36px;
818
    font-size: 9pt;
819
    background-color: #87aade;
820
    padding: 5px 10px;
821
    display:none;
822
}
823

    
824
a#standard, a#list, a#single {
825
    text-decoration: none;
826
    height: 15px;
827
    width: 17px;
828
    padding: 1px 8px 2px 9px;
829
    font-size: 11px;
830
}
831

    
832
div#view-select a {
833
    color:#5f8dd3;
834
}
835

    
836
a#list:hover {
837
    background: #5f8dd3;
838
}
839

    
840
a#standard:active, a#list:active {
841
    color:white;
842
}
843

    
844
a#standard {
845
    background: url(/static/icon-view.png) no-repeat -36px 0;
846
}
847

    
848
a#list {
849
    background: url(/static/list-view.png) no-repeat -36px 0;
850
}
851

    
852
a#single {
853
    background: url(/static/single-view.png) no-repeat -36px 0;
854
}
855

    
856
a#standard:hover {
857
    background: url(/static/icon-view.png) no-repeat -18px 0;
858
}
859

    
860
a#list:hover {
861
    background: url(/static/list-view.png) no-repeat -18px 0;
862
}
863

    
864
a#single:hover {
865
    background: url(/static/single-view.png) no-repeat -18px 0;
866
}
867

    
868
a#standard.activelink {
869
    background: url(/static/icon-view.png) no-repeat 0px 0;
870
}
871

    
872
a#list.activelink {
873
    background: url(/static/list-view.png) no-repeat 0px 0;
874
}
875

    
876
a#single.activelink {
877
    background: url(/static/single-view.png) no-repeat 0px 0;
878
}
879

    
880
#machinetype {
881
    background-color: #CCCCCC;
882
    height: 25px;
883
    margin-bottom: 4px !important;
884
}
885

    
886
div.machine-type {
887
    float: left;
888
    margin: 4px 18px 20px;
889
}
890

    
891
.machine-type .active {
892
    color: #FFFFFF
893
}
894

    
895
#machinesview {
896
    min-height: 270px;
897
    margin-top: 30px;
898
}
899

    
900
.list#machinesview {
901
    margin-left: -20px;
902
    display:none;
903
}
904

    
905
#machinesview_wrapper.list {
906
    margin-left: -20px;
907
}
908

    
909
#machinesview_wrapper {
910
    min-height: 270px;
911
}
912

    
913
#machinesview_content {
914
    display:none;
915
}
916

    
917
.list-machines {
918
    min-width: 515px;
919
}
920

    
921
#emptymachineslist {
922
    display:none; 
923
    color: #A0A0A0;
924
    background-image: url(/static/emptydegradebg.png);
925
    width: 400px;
926
    margin-top: 40px;
927
    padding: 5px;
928
    padding-left: 10px;
929
    margin-left: -10px;
930
}
931

    
932
#welcomeheader {
933
    color:white;
934
}
935

    
936
.welcomebody {
937
    color:black;
938
    font-size:80%;
939
}
940

    
941
.welcomebody a {
942
    color:black;
943
}
944

    
945
.welcomefooter {
946
    color:black;
947
    font-size:60%;
948
}
949

    
950
.welcomefooter a {
951
    color:black;
952
}
953

    
954
.emptycreatecontainer {
955
    margin-left: 430px !important;
956
    position: absolute;
957
    margin-top: 40px;
958
    width: 180px;
959
    background-color: #CCCCCC;
960
    padding: 5px;
961
    padding-left: 10px;
962
}
963

    
964
.emptycreate {
965
    margin: 20px 10px 5px 0 !important;
966
}
967

    
968
#createbody {
969
    display:none;
970
    font-size: 80%;
971
}
972

    
973
div.list label img {
974
    margin: 5px 5px -3px 0;
975
}
976

    
977
div.list label {
978
    color: #3D3D3D;
979
    font-size: 9pt;
980
}
981

    
982
div.list .state {
983
    margin-top: 7px;
984
    margin-right: 10px;
985
}
986

    
987
div.list table tbody {
988
    margin-top: 8px;
989
}
990

    
991
div.list .stopped {
992
    margin-top: 8px;
993
}
994

    
995
/* root element for tabs  */
996
#wizard ul.tabs { 
997
    margin-right: -1px;
998
    float: right;                         
999
}
1000

    
1001
#wizard div.panes {
1002
    height: 252px;
1003
    margin-bottom: 6px;
1004
    clear:both;
1005
}
1006

    
1007
.typebody {
1008
    font-size: 80%;
1009
    font-weight: normal;
1010
    position: relative;
1011
    top: -3px;
1012
}
1013

    
1014
.typehover {
1015
    color: #FFFFFF;
1016
}
1017

    
1018
#label-name {
1019
    margin-top: 15px;
1020
}
1021

    
1022
/* single tab */
1023
#wizard ul.tabs li {  
1024
    margin-bottom: 0; 
1025
        list-style-type:none;
1026
    float: left;        
1027
}
1028

    
1029
/* link inside the tab. uses a background image */
1030
#wizard ul.tabs a { 
1031
        display:block;
1032
    padding: 0.3em 0.5em 0.5em 0.4em;
1033
        text-decoration:none;
1034
        color: #FFFFFF;
1035
        position:relative;
1036
        top:1px;
1037
        outline:0;
1038
    background-color: #CCCCCC;
1039
    text-align: center;
1040
    width: 100px;
1041
    white-space: nowrap;
1042
}
1043

    
1044
#wizard ul.tabs a:hover {
1045
        color: #FFFFFF;
1046
    background-color:#AAAAAA;
1047
}
1048
        
1049
/* selected tab */
1050
#wizard ul.tabs a.current {
1051
        color: white;
1052
    background-color: #666;        
1053
        cursor: default;
1054
}
1055

    
1056
#wizard #standard-images {
1057
    background-color: #ECECEC;
1058
}
1059

    
1060
div.list div.actions {
1061
    display: none;
1062
    clear: left;
1063
    float: right;
1064
    margin-right: -20px;
1065
    margin-top: 37px;
1066
    text-align: right;
1067
    width: 150px;
1068
}
1069

    
1070
div.list div.actions a {
1071
    clear: left;
1072
    color: #D3D3D3;
1073
    display: block;
1074
    font-size:9pt;
1075
    margin-bottom: 2px;
1076
}
1077

    
1078
div.list div.actions a.enabled {
1079
    color: #3D3D3D;
1080
}
1081

    
1082
div.list div.actions a.enabled:hover{
1083
    cursor: pointer;
1084
    color: black;
1085
    text-decoration: underline;
1086
}
1087

    
1088
input.machine {
1089
    width: 13px;
1090
    height: 13px;
1091
    top: -1px;
1092
    overflow: hidden;
1093
}
1094

    
1095
/* metadata editing boxes */
1096
.meta-modal {
1097
    background-color:#fff;
1098
    display:none;
1099
    padding:1em;
1100
    text-align:left;
1101
    width:380px;
1102
    height:360px;
1103
    font-size: 80%;
1104
}
1105

    
1106
.meta-modal .close {
1107
        background-image: url(/static/close-grey.png);
1108
        position: absolute;
1109
        right: -15px;
1110
        top: -17px;
1111
        cursor: pointer;
1112
        height: 32px;
1113
        width: 32px;
1114
}
1115

    
1116
.meta-modal div.container {
1117
    height:330px;
1118
}
1119

    
1120
.meta-modal h3 {
1121
    font-weight: normal;
1122
}
1123

    
1124
.meta-modal hr {
1125
    background-color: #666;
1126
    border: 0 none;
1127
    height: 5px;
1128
    margin: 0; 
1129
}
1130

    
1131
.meta-modal hr.topruler {
1132
    margin-top: 5px; 
1133
}
1134

    
1135
.meta-modal hr.fatruler {
1136
    height: 20px;
1137
    margin-top: 2px;
1138
    margin-bottom: 20px;
1139
}
1140

    
1141
.meta-modal hr.meta-separator {
1142
    width: 320px;
1143
    margin: 5px 0 2px 0;
1144
}
1145

    
1146
.meta-modal div.bottomruler {
1147
    background-color: #666;
1148
    height: 20px;
1149
    margin-top: 22px;
1150
}
1151

    
1152
.meta-modal div.content {
1153
    height: 248px;
1154
    width: 345px;
1155
    margin-left: 15px;
1156
    overflow: auto;
1157
}
1158

    
1159
.meta-modal div.content li {
1160
    margin-bottom: 20px;
1161
}
1162

    
1163
.meta-modal p {
1164
    margin-left: 7px;
1165
}
1166

    
1167
.meta-modal button {
1168
    font-size: 80%;
1169
    width: 87px;
1170
    float: right;
1171
    background-color: #5599FF;
1172
    border: 0px solid #5599FF;
1173
    padding: 0;
1174
    margin-right: 25px;
1175
}
1176

    
1177
.meta-modal button.remove {
1178
    height: 15px;
1179
    width: 70px;
1180
    background-color: #d35f5f;
1181
    border-color: #d35f5f;
1182
    margin-top: 2px;
1183
}
1184

    
1185
.meta-modal button.edit {
1186
    height: 15px;
1187
    width: 70px;
1188
    background-color: #666;
1189
    border-color: #666;
1190
    margin-top: -14px;
1191
}
1192

    
1193
.meta-modal button.create {
1194
    height: 23px;
1195
    margin: 10px 44px 0 0;
1196
}
1197

    
1198
.meta-modal input {
1199
    font-size: 80%;
1200
    font-style: italic;
1201
    text-align: right;
1202
    color: #ccc;
1203
}
1204

    
1205
.meta-modal input.key {
1206
    width: 279px;
1207
    margin-bottom: -3px;
1208
}
1209

    
1210
.meta-modal input.value {
1211
    width: 267px;
1212
    height: 170px;
1213
    overflow: auto;
1214
}
1215

    
1216
.meta-modal .input-enabled {
1217
    color: black;
1218
    text-align: left;
1219
    font-style: normal;
1220
}
1221

    
1222
.meta-modal label.meta-value {
1223
    vertical-align: top;
1224
}
1225

    
1226
.meta-modal button.save {
1227
    margin-top: 11px;
1228
}
1229

    
1230
.meta-modal button.cancel {
1231
    float: left;
1232
    margin: 11px 0 0 25px;
1233
    background-color: #d35f5f;
1234
    border-color: #d35f5f;
1235
}
1236

    
1237

    
1238
/* notification box */
1239
#error-success, #yes-no {
1240
    height: 150px;
1241
    border: 5px solid #87AADE;
1242
    z-index: 9999;
1243
}
1244

    
1245
#error-success p, #yes-no p, #yes-no button {
1246
    margin-top: 15px;
1247
}
1248

    
1249
#error-success strong {
1250
    color: #F49C1A;
1251
}
1252

    
1253
#error-success div {
1254
    height: 142px;
1255
    overflow-y: auto;
1256
    overflow-x: hidden;
1257
}
1258

    
1259
#error-success .close {
1260
        background-image: url(/static/close.png);
1261
        position: absolute;
1262
        right: -19px;
1263
        top: -20px;
1264
        cursor: pointer;
1265
        height: 35px;
1266
        width: 35px;
1267
}
1268

    
1269
/* Confirmation boxes */
1270
div.confirm_single, div.confirm_multiple {
1271
    display: none;
1272
    background-color: #DCDCDC;
1273
    color: orange;
1274
    font-size: 9pt;
1275
}
1276

    
1277
div.action_error {
1278
    float: right;
1279
    width: 80px;
1280
    height: 60px;
1281
    padding: 5px;
1282
    margin: -65px -165px 0 0;
1283
    display: none;
1284
    background-color: #DCDCDC;
1285
    font-size: 9pt;
1286
    color: black;
1287
    line-height: 1.5;
1288
}
1289

    
1290
div.action_error button.details {
1291
    margin: 5px 0 0 0px;
1292
    padding: 0 15px;
1293
}
1294

    
1295
.orange {
1296
    color: orange;
1297
}
1298

    
1299
div.confirm_single button, div.confirm_multiple button, div.action_error button{
1300
    font-size: 9pt;
1301
    background-color: #DCDCDC;
1302
    border: 1px solid #a5a5a5;
1303
    color: #3D3D3D;
1304
    cursor: pointer;
1305
    padding: 0px;
1306
    height: 20px !important;
1307
}
1308

    
1309
div.confirm_single button, .action_error button {
1310
    width: 80px !important;
1311
}
1312
div.confirm_single button.yes, div.confirm_multiple button.yes {
1313
    border-color: orange;
1314
    padding: 0 12px;
1315
}
1316

    
1317
div.confirm_single button.yes:hover, div.confirm_multiple button.yes:hover {
1318
    background-color: orange;
1319
}
1320

    
1321
div.confirm_single button.no, div.confirm_multiple button.no {
1322
    padding: 0px 16px;
1323
}
1324

    
1325
div.confirm_single button.no:hover, div.confirm_multiple button.no:hover, div.action_error button.details:hover {
1326
    background-color: #a5a5a5;
1327
}
1328

    
1329
div.confirm_single{
1330
    float: right;
1331
    width: 90px;
1332
    height: 70px;
1333
    margin: -65px -165px 0 0;
1334
}
1335

    
1336
div.confirm_single button.yes {
1337
    margin: 5px 0 0 5px;
1338
}
1339

    
1340
div.confirm_single button.no {
1341
    margin: 20px 0 0 5px;
1342
}
1343

    
1344
div.action_error {
1345
    display: none;
1346
}
1347

    
1348
div.confirm_multiple {
1349
    width: 692px;
1350
    height: 28px;
1351
    margin: 0 0 10px -32px;
1352
}
1353

    
1354
div.confirm_multiple p {
1355
    float: left;
1356
    margin: 7px 0 0 200px;
1357
}
1358

    
1359
div.confirm_multiple button {
1360
    float: right;
1361
    margin: 4px 5px 0 0;
1362
}
1363

    
1364
div.confirm_multiple button.no {
1365
    margin-right: 15px;
1366
}
1367

    
1368
div#user{
1369
    float:right;
1370
    clear: both;
1371
    color: #a0a0a0;
1372
    font-size: 9pt;
1373
    margin-top: 16px;
1374
}
1375

    
1376
div#user a{
1377
    color: #a0a0a0;
1378
    text-decoration: none;
1379
}
1380

    
1381
div#user a.current_lang {
1382
    color: #d3d3d3;
1383
}
1384

    
1385
.separator {
1386
    background-color: #87AADE;
1387
    height: 10px;
1388
    width: 700px;
1389
    margin: 0 0 0 -36px;
1390
}
1391

    
1392
#mini.separator {
1393
    width: 535px;
1394
    height: 5px;
1395
    margin: 17px 0 17px -36px;
1396
    display: none;
1397
}
1398

    
1399
#disks.separator {
1400
    background-color: #dea842;
1401
}
1402

    
1403
#images.separator {
1404
    background-color: #87a06d;
1405
}
1406

    
1407
#networks.separator {
1408
    background-color: #9d6d6a;
1409
}
1410

    
1411
#desktops.separator {
1412
    background-color: #dea842;
1413
}
1414

    
1415
#apps.separator {
1416
    background-color: #87a06d;
1417
}
1418

    
1419
.machine .separator {
1420
    width: 508px;
1421
    height: 1px;
1422
    margin: 8px 0 0 15px;
1423
    background-color: #DCDCDC;
1424
}
1425

    
1426
.machine h5 {
1427
    margin: 0px 60px 1px 84px;
1428
}
1429

    
1430
.machine .settings {
1431
    margin-top: 13px;
1432
}
1433

    
1434
.editbuttons {
1435
    display: block;
1436
    clear: none;
1437
    width: 40px;
1438
    margin-right:34%;
1439
    margin-top:3px;
1440
    float:right;
1441
}
1442
.editbuttons img {
1443
    float:none !important;
1444
    margin: 0px !important;
1445
}
1446

    
1447
.namecontainer {
1448
    line-height: 22px;
1449
}
1450

    
1451
.nametextbox {
1452
    height: 13px;
1453
    font-size: 95%;
1454
}
1455

    
1456
#spinner {
1457
    background: url("../static/progress.gif");
1458
    height: 31px;
1459
    width: 31px;
1460
    margin-left: 298px;
1461
    margin-top: 160px; 
1462
}
1463

    
1464
/* tables in list view */
1465
div.list div.dataTables_filter,  div.list div.dataTables_filter input{
1466
    font-size: 9pt;
1467
    display: none;
1468
}
1469

    
1470
div.list div.dataTables_filter input{
1471
    height: 12px;
1472
    margin-bottom: 12px;
1473
}
1474

    
1475
div.list table {
1476
    width: 515px;
1477
    font-size: 9pt;
1478
}
1479

    
1480
div.list table tbody td {
1481
        color: #3D3D3D;
1482
        padding:6px;
1483
        background-color: #FFF;
1484
        vertical-align: middle;
1485
}
1486

    
1487
div.list table thead tr th {
1488
        background-color: #E6EEEE;
1489
        background-image: url(bg.gif);
1490
        background-repeat: no-repeat;
1491
        background-position: right 11px;
1492
    font-weight: normal; 
1493
        border: 1px solid #FFF;
1494
    border-bottom: none;
1495
        padding: 4px;
1496
    text-align: left;
1497
    vertical-align: middle;
1498
        cursor: pointer;
1499
}
1500

    
1501
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
1502
    background-color: #87AADE;
1503
}
1504

    
1505
div.list table thead .sorting_asc {
1506
        background-image: url(asc.gif);
1507
}
1508

    
1509
div.list table thead .sorting_desc {
1510
        background-image: url(desc.gif);
1511
}
1512

    
1513
div.list table .selection div.expand-icon {
1514
        background-image: url(asc.gif);
1515
        background-repeat: no-repeat;
1516
    position: relative;
1517
        cursor: pointer;
1518
    width: 15px;
1519
    height: 4px;
1520
    left: 19px;
1521
    top: -11px;
1522
}
1523

    
1524
ul.dropdown-selector {
1525
    background-color: #E6EEEE;
1526
    position: absolute;
1527
    margin-left: 1px;
1528
    display: block;
1529
    top: 255px;
1530
    font-size:9pt;
1531
    width:40px;
1532
}
1533

    
1534
ul.dropdown-selector li {
1535
    padding: 4px;
1536
}
1537

    
1538
ul.dropdown-selector li:hover {
1539
    background-color: #87AADE;
1540
}
1541

    
1542
ul.dropdown-selector li a{
1543
    color: black;
1544
    text-decoration: none;
1545
}
1546

    
1547
div.list table span.imagetag { 
1548
    display: none;
1549
}
1550

    
1551
div.list table thead .vmos {
1552
    width: 20px !important;
1553
    vertical-align:middle;
1554
}
1555

    
1556
div.list table .selection {
1557
        width: 20px !important;
1558
        text-align: left;
1559
    background-image: none;
1560
}
1561

    
1562
div.list table thead .vmflavor {
1563
    width: 100px !important;
1564
}
1565

    
1566
div.list table thead .vmgroup {
1567
    width: 40px !important;
1568
}
1569

    
1570
div.list table thead .vmstatus {
1571
    width: 50px !important;
1572
}
1573

    
1574
div.list table thead .vmname {
1575
    width: 70px !important;
1576
}
1577

    
1578
.spinner, .wave {
1579
    clear: right;
1580
    height: 20px;
1581
    float:right !important;
1582
    width: 20px;
1583
    margin: 5px 16px 0 15px !important;   
1584
}
1585

    
1586
.hidden {
1587
    display:none;
1588
}
1589

    
1590
div.actions a.selected, div.actions a.selected:hover {
1591
    display:block !important;
1592
    color: orange !important;
1593
}
1594

    
1595
.action_error .message, .action_error .code {
1596
    display: none;
1597
}
1598

    
1599
.fixed {
1600
    margin: 0 0 0 -32px !important;
1601
    bottom: 0;
1602
    position: fixed;
1603
}