Merge branch 'master' of ssh://git.planet-lab.org/git/plstackapi into observer3.0
[plstackapi.git] / planetstack / core / static / planetstack.css
1 /*************************
2 colors:
3     tab - active/focus color
4     background-color: #105E9E !important;
5
6 ONLab darker blue select :: background-color: #004775;
7 #0170BB
8     left-nav
9     background-color: #448CCA;
10     background-color // normal: #B4CADF
11 91BFE4
12
13 *************************/
14
15 /*   CSS for jquery Tabs */
16 #hometabs {
17 border-bottom: 1px solid #105E9E;
18 font-size: 12px;
19 border: 0px;
20 }
21
22 .ui-tabs-active {
23     color: #ffffff;
24     background-color: #105E9E;
25     text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
26     font-weight: normal;
27 }
28 .nav > li > a:active {
29     color: #ffffff;
30     background-color: #105E9E;
31     text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
32     
33 }
34 .nav > li > a:focus {
35     color: #ffffff;
36     background-color: #105E9E;
37     text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
38     
39 }
40 .ui-state-focus a,
41 .ui-state-focus a:link{
42     color: #ffffff;
43     background-color: #105E9E;
44     text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
45 }
46 .ui-state-active a,
47 .ui-state-active a:link{
48     color: #ffffff !important;
49     background-color: #105E9E !important;
50     text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
51     font-weight: normal;
52 }
53 /*************************/
54 /*  Header elements      */
55
56 .logo {
57 }
58 .header{
59     background-color: #ffffff !important;
60     /*background-image: url('bg2.jpg');*/
61     background-size: 100% auto;
62     background-image: none !important;
63     text-shadow: none;
64     border-bottom: 3px solid #C5CCD4;
65     margin-bottom: 14px;
66     margin-top: -120px;
67     height: 85px;
68     /*min-width: 1321px;*/
69 }
70
71 .nav-quick-search{
72 margin: 30px -10px 0px 0px !important;
73 padding:0 25px 0 0 !important;
74 float:right !important;
75 }
76
77 .nav-quick-search .search-query{
78 border-radius:5px;
79 border:none;
80 box-shadow:0px;
81 background-color:lightGrey;
82 padding-left: 27px;
83 }
84
85
86 .header #branding {
87 width: 100%;
88 height:60px;
89 }
90
91 .header a {
92 color: #08C;
93 font-weight: bold;
94 /*border-bottom: 1px solid #C5CCD4;*/
95 }
96 a {
97 color: #08C;
98 font-weight: bold;
99 /*border-bottom: 1px solid #C5CCD4;*/
100 }
101
102 .header #branding {
103 border-right:none;
104 }
105
106 #branding2{
107 height:20px;
108 width:100%;
109 color: #333;
110 /*background-color: #000000;*/
111 margin-bottom: 10px;
112 }
113
114 .header #user-tools {
115     padding: 12px 20px 0px 0px;
116     float: right;
117     margin-top: -5px;
118 }
119
120 .header .header-content .date{
121 padding-left:10px;
122 }
123
124 .header .header-content .time {
125 font-weight: normal;
126 }
127 .header .header-content.header-content-first{
128 height: 15px;
129 padding-bottom: 0px;
130 }
131
132 .header .header-content {
133 padding-bottom: 0px;
134 padding: 7px 0 0 0px;
135 }
136
137 /*************************/
138
139 .alignCenter {
140     text-align: center !important;
141     align: center !important;
142 }
143 table.dataTable tr.odd {
144 background-color: white !important;
145 }
146 table.dataTable tr.odd td.sorting_1 {
147 background-color: white !important;
148 }
149 table.dataTable tr.even td.sorting_1 {
150 background-color: white !important;
151 }
152 table.dataTable thead th div.DataTables_sort_wrapper {
153     font-weight: bold;
154 }
155 .dashboard-hpc-sliver .ui-widget-header, .dashboard-hpc-sliver .ui-dialog-title, .dashboard-hpc-sliver .ui-dialog-titlebar{
156 }
157 .ui-widget-overlay {
158     background: black !important;
159 }
160 .ui-corner-all {
161 border-bottom-left-radius: 0px !important;
162 border-bottom-right-radius: 0px !important;
163 }
164
165 #suit-center {
166   /* min-width: 977px !important; */
167 }
168 #openCloudTopPage {
169    margin-top: -25px;
170    margin-right: -90;
171    float: right;
172 }
173 #minDashboard {
174   /*min-width:625px; */
175   display:inline;
176   float: right;
177   border: 2px darkGrey;
178 }
179 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
180 background: none !important;
181 border-top: 0px !important;
182 border-left: 0px !important;
183 border-right: 0px !important;
184 }
185 .ui-widget-header {
186 background: none !important;
187 border-top: 0px !important;
188 border-left: 0px !important;
189 border-right: 0px !important;
190 }
191 #suit_form_tabs {
192 /*border-bottom: 1px solid #B5D1EA;*/
193 border-bottom: 1px solid #105E9E !important;
194 border-bottom-width: 5px !important;
195 border-bottom-style: solid;
196 /*border-bottom-color: rgb(181, 209, 234);*/
197 border-bottom-color: #448CCA;
198 color:#105E9E;
199 }
200 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
201 color: #105E9E ;
202 }
203 .save-box {
204   background-color: #ffffff;
205   margin: 2px;
206 }
207 .save-box .btn-info {
208   font-size: 14px;
209   padding: 10px 20px 10px 20px;
210 }
211 .btn-success {
212   font-size: 12px;
213   font-weight: normal;
214   padding: 5px 10px 5px 10px;
215 }
216 .btn-success, .save-box .btn-info {
217   background: #27AE5F;
218   background-image: -webkit-linear-gradient(top, #27AE5F, #27ae60);
219   background-image: -moz-linear-gradient(top, #27AE5F, #27ae60);
220   background-image: -ms-linear-gradient(top, #27AE5F, #27ae60);
221   background-image: -o-linear-gradient(top, #27AE5F, #27ae60);
222   background-image: linear-gradient(to bottom, #27AE5F, #27ae60);
223   -webkit-border-radius: 5;
224   -moz-border-radius: 5;
225   border-radius: 5px;
226   text-shadow: 1px 1px 3px #666666;
227   font-family: Arial;
228   color: #ffffff;
229   text-decoration: none;
230   letter-spacing: 1px;
231 }
232
233 .btn-success:hover, .save-box .btn-info:hover {
234   background: #2ecc71;
235   text-decoration: none;
236 }
237
238
239
240 .required:after {color: red ! important; font-size: 18px }
241 #.btn-success {color:black}
242 #suit-center {
243 padding: 20px;
244 width: 100%;
245 min-width:650px;
246 }
247 .inner-two-columns .inner-center-column .tab-content {
248 overflow-x: auto;
249 margin-bottom: 15px;
250 /*min-width: auto;*/
251 width:100%;
252 }
253 .inner-two-columns .inner-center-column {
254 #margin-right: 200px;
255 #background-color: rgb(158, 163, 159);
256 }
257 label {
258 display: block;
259 font-weight: bold;
260 margin-bottom: 5px;
261 }
262
263
264 /*For changing the background color of the left side navigation list items*/
265 /*For changing the color of the left side navigation list items*/
266 /*For changing the font of the left side navigation list items*/
267 .left-nav>ul>li>a {
268 /*background-color: #CDE7FF;*/
269 /* Light color nav choices */
270 /*background-color: #DFECF8;*/
271 /*background-color: #91BFE4;*/
272 /*background-color: #DAECFC;*/
273 background-color: #448CCA;
274 /*ONlab.us reg color blue*/
275 /*background-color: #ccffff;*/
276 font-weight: normal;
277 /*color: #105E9E;*/
278 color: #ffffff;
279 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
280 letter-spacing: 1px;
281 font-size: 12px;
282 border-bottom: none;
283 }
284
285 /*For giving the padding for the left side navigation*/
286 .left-nav>ul {
287 padding-left: 5px;
288 }
289
290 /*For increasing the height of left side navigation list items*/
291 .left-nav>ul>li {
292 padding-top:4px;
293 line-height: 35px;
294 width: 200px;
295 }
296
297 /*For changing background color of suit center*/
298 #suit-center {
299 background-color: #ffffff;
300 }
301
302 .left-nav>ul>li.active>a {
303 /*background-color: #448CCA;*/
304 /* Last Active
305 background-color: #0061B7; */
306 background-color: #515151;
307 /*background-color: #448CCA;*/
308 font-weight:normal;
309 color:#ffffff;
310 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
311 letter-spacing: 1px;
312
313 left: 10px;
314 background-image: url("right_arrow.png");
315     background-position: 97% center;
316 }
317
318
319 .nav-tabs-suit li{
320 /*background-color: #CDE7FF;*/
321 background-color: #FFFFFF;
322 border-top-left-radius: 3px;
323 border-top-right-radius: 3px;
324 border-bottom-left-radius: 0px;
325 border-bottom-right-radius: 0px;
326 }
327
328 .nav-tabs-suit li a {
329 background-color: 
330 /*background-color: #CDE7FF;*/
331 font-weight: normal;
332 color: #105E9E;
333 /*border-radius: 3px;*/
334 border-top-left-radius: 3px;
335 border-top-right-radius: 3px;
336 border-bottom-left-radius: 0px;
337 border-bottom-right-radius: 0px;
338 border: none;
339 box-shadow: none;
340 }
341
342 .nav-tabs-suit li.active{
343 /*Changed on Dec 11*/
344 /*background-color: #448CCA;*/
345      background-position: 50% 100%; 
346 background-image:url('down_arrow.png');
347 }
348
349 .nav-tabs-suit li.hover{
350 /*Changed on Dec 11*/
351 /*background-color: #448CCA;*/
352 color:#ffffff;
353 /*font-size: 1.2em;*/
354 font-weight: bold;
355 }
356
357 .nav-tabs-suit li.active a {
358 background-color: #ffffff;
359 /*background-color: #448CCA;*/
360 background-color: #105E9E;
361 color:#ffffff;
362 font-weight:normal;
363 padding-top:10px;
364 text-decoration:none;
365 }
366
367 .nav-tabs-suit li.active a:after{ /*arrow added to downarrowdiv DIV*/
368 width: 0;
369 height: 0;
370 border-left: 5px solid transparent;
371 border-right: 5px solid transparent;
372 border-top: 5px solid #2f2f2f;
373 font-size: 0;
374 line-height: 0;
375 }
376
377
378 /* create an arrow that points down */
379
380
381 .left-nav>ul>li.active>a:hover{
382 /*background-color: #448CCA;*/
383 /*background-color: #91BFE4;*/
384 /*background-color: #D6E7F8;*/
385 font-weight:normal;
386 font-size: 1.2em;
387 font-weight: bold;
388 color:#ffffff;
389 padding-top:10px;
390 text-decoration:none;
391 }
392
393 /* Adjust font weight to normal on hover, else white blurs */
394 .left-nav>ul>li>a:hover{
395 /*background-color: #448CCA;*/
396 /*background-color: #004775;*/
397 background-color: #515151;
398 color:#ffffff;
399 font-weight:normal;
400 font-size: 1.2em;
401 /*padding-top:10px;*/
402 text-decoration:none;
403 /*border-left: 15px solid #105E9E ;*/
404 border-left: 10px solid #ffffff;
405 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
406 letter-spacing: 1px;
407 }
408 .nav-tabs-suit li.active a:hover,.nav-tabs-suit li a:hover{
409 /*background-color: #448CCA;*/
410 background-color: #515151;
411 font-weight:normal;
412 font-size: 1.2em;
413 /*color:#ffffff;*/
414 padding-top:10px;
415 text-decoration:none;
416 }
417
418 .breadcrumb li a {
419 /*font-weight:bold;*/
420 }
421
422 .nav-tabs {
423 /*
424 border-bottom: 1px solid #B5D1EA;*/
425 }
426
427 .nav-tabs>li {
428 margin-bottom: 0px;
429 }
430
431 /*.icon-home {
432 background-image: url('home.png');
433 background-repeat: no-repeat;
434 background-position: 85%;
435 }*/
436
437 /*Changed Dec11*/
438
439 /*
440 .icon-home {
441 background-image: url('home.png');
442 background-repeat: no-repeat;
443 background-position: 40%;
444 width: 25px;
445 height: 25px;
446 vertical-align: middle;
447 }
448 */
449
450
451 .left-nav>ul>li.active>a:after {
452 content: none;
453
454 }
455
456 /**
457 * login page
458 */
459
460
461 /*.login #wrap {
462 background-color: #ffffff;
463 }*/
464
465 .login #content-main {
466 width: 280px !important;
467 min-width: 180px;
468 height: 265px;
469   -webkit-border-radius: 5;
470   -moz-border-radius: 5;
471   border-radius: 5px;
472 /*background: #EBF0F2;*/
473 background: rgba(255,255,255,0.85);
474 /*background: rgba(235,240,242,0.6);*/
475 overflow: visible !important;
476 }
477
478 .login #content-main h1 {
479 /*background: #EBF0F2;*/
480 background: url("open-cloud-login-themed-light.png") no-repeat scroll 40% center / 89% auto rgba(235, 240, 242, 0);
481 /*background-position: 40%;*/
482 height: 55px;
483 background-repeat: no-repeat;
484 font-size: 0px;
485 padding-top: 70px;
486 }
487 .login #content-main h1 i {
488 display:none;
489 }
490
491 .login #content-main h1 img{
492 padding-left: 8px;
493 }
494
495 .login #content-main .control-group .control-label{
496 display:none;
497 }
498
499 .login #content-main form input[type=text]{
500 width: 94%;
501 padding:4px 6px;
502 border-radius: 0px;
503 height: 30px;
504 background-color: #E5E5E5;
505 background-image: url('name.png');
506 background-repeat: no-repeat;
507 background-position: 95%;
508 font-size: 12px;
509 }
510
511 .login #content-main form input[type=password] {
512   width: 94%;
513 padding:4px 6px;
514 font-size: 12px;
515 border-radius: 0px;
516 height: 30px;
517 background-color: #E5E5E5;
518 background-image: url('password.png');
519 background-repeat: no-repeat;
520 background-position: 95%;
521 }
522
523 .login #content-main .submit-row{
524 background: #EBF0F215px;
525 background: rgba(235,240,242,0.0);
526 border-top:none;
527 padding-top:0px;
528 box-shadow: none;
529 }
530
531 .login #content-main .submit-row .btn-info {
532 background-color : #448CCA;
533 background-image: none;
534 height: 40px;
535 border-radius: 0px;
536 width: 100%;
537 margin-bottom: 4px;
538 }
539 #forgot_pwd{
540 font-size: 11px;
541 font-style: normal;
542 text-decoration: none;
543 }
544
545 #create_acct{
546 font-size: 11px;
547 font-style: normal;
548 text-decoration: none;
549 padding-left: 45px;
550 }
551
552 /*Dec 11 2013*/
553
554 .nav-tabs-suit li.active a{
555 letter-spacing: 1px;
556 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
557 /*text-shadow: none;
558 -webkit-box-shadow: none;
559 -moz-box-shadow: none;
560 box-shadow: none;
561 */
562 }
563
564 .nav-tabs>.active>a{
565 border: none;
566 }
567
568 .nav-tabs-suit li a:hover{
569 border: none;
570 color: #ffffff;
571 letter-spacing: 1px;
572 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
573 }
574
575 .nav-tabs-suit li.active a:hover{
576 border: none;
577 }
578
579 /*.nav-tabs-suit li.active {*/
580  /*background: transparent url('home.png') no-repeat scroll center bottom;*/
581   /*border-left: 5px solid transparent;
582 border-right: 5px solid transparent;
583 border-top: 5px solid #2f2f2f;
584 font-size: 0;
585 line-height: 0;
586 width: 0;;
587 height: 0;
588    margin: 0;
589 }*/
590
591 .login {
592 background-image: url('bg.jpg');
593 background-size: 100%;
594 background-repeat: no-repeat;
595 }
596
597
598 .login #content-main {
599         float: none;
600     height: 330px;
601     margin: 100px auto 0;
602     width: 265px;
603 }
604
605 /** Leave room for scroll bar now that contents can be appropriately scrolled **/
606 .form-horizontal .inline-group .add-row {
607     margin: -1px -1px 15px 0px;
608 }
609
610 /** Setting overflow and 1kpx to deal with inlines/forms overlapping on 
611     browser resizes **/
612 #content-main {
613     overflow-x:auto;
614     min-width: 1000px;
615 }
616
617 .tab-content tab-content-main {
618     overflow-x: auto !important;
619 }
620
621 #wrap{
622 background:none;
623 }
624
625 .noclearfix {
626     display:block; clear:left; width:0px; height:0px;
627 }
628
629 body{
630 background-color:#ffffff;
631 }
632
633 .suit-column{
634 background-color:#ffffff;
635 }
636 /*Added on 13th*/
637
638 /*.input-icon {
639 margin-right: 30px;
640 }
641
642 .icon-search{
643
644 margin-left: -165px;
645 }*/
646
647 .login #content-main form {
648 margin: 5px 15px 0;
649 }
650
651 .login {
652 height: 84.5%;
653 }
654
655
656 .login #wrap {
657     background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
658 }
659 #wrap {
660     background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
661 }
662 #wrap {
663     height: auto !important;
664     margin: 0 auto -60px;
665     min-height: 100%;
666 }
667
668 .forgotLink {
669         width: 45%;
670         text-align: left;
671         float: left;
672 }
673
674 .createAccountLink {
675         width: 55%;
676         text-align: right;
677         float: left;
678         
679 }
680
681 .login .btn-info {
682         color: #FFF;
683 }
684
685 .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
686         /*background-color: #448CCA;*/
687         background-color: #105E9E;
688         color: #FFF;
689         border: none;
690 }
691
692 /*Added by Beena for adding the three components in dashboard*/
693 .breadcrumb{
694                 width: 37%;
695         display:inline-block;
696         background-color: #fff;
697
698 }
699
700 .nodetextbox{
701         /*background-color: #ededed;*/
702         line-height: 25px;
703         width: 150px; 
704         text-align: center;
705         font-weight: bold;
706         margin-left:0px;
707         display:inline-block;
708         border:none;
709         font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
710         font-size: 8px;
711 }
712
713 .nodelabel{
714 width: 20px;
715 display: inline-block;
716 border-radius: 0px;
717 border:1px solid #000;
718 /*line-height: 23px;*/
719 text-align: center;
720 font-weight: normal;
721 }
722
723 #user-tools {
724   font-weight: bold;
725 }
726 .header-content .header-column {
727         display: none;
728 }
729 .header .input-icon {
730     background-image: url("Search.png");
731     background-repeat: no-repeat;
732 background-position:left center;
733 opacity:1;
734     background-size: 100%;
735     vertical-align:middle;
736         margin-right: -30px;
737     /*margin-top: 5px;*/
738     position: relative;
739     height: 22px;
740     width: 22px;
741 }
742
743 .header .icon-search {
744         /*background-image: url("search.png") !important;
745     background-repeat: no-repeat !important;
746     background-size: 120% auto !important;
747     background-position: 0;*/
748 }
749
750 .icon-home ,.icon-deployment ,.icon-site ,.icon-slice ,.icon-user, .icon-reservation, .icon-app{
751 background-position: left center;
752 width:22px;
753 height:22px;    
754 }
755
756 .icon-app {
757 background-image: url("opencloudApp.png");
758 }
759 .icon-home {
760 /*  Going with darker standard color nav -- so using over png's background-image: url("Home.png"); */
761 background-image: url("Home_over.png");
762 }
763 .icon-deployment{
764 background-image: url("Deployments_over.png");
765 }
766 .icon-site{
767 background-image: url("Sites_over.png");
768 }
769 .icon-slice{
770 background-image: url("Slices_over.png");
771 }
772 .icon-user{
773 background-image: url("Users_over.png");
774 }
775 .icon-reservation{
776 background-image: url("Reservations_over.png");
777 }
778
779 .left-nav>ul>li.active>a>.icon-home , .left-nav>ul>li:hover>a>.icon-home , .left-nav>ul>li.focus>a>.icon-home{
780 background-image: url("Home_over.png");
781 }
782
783 .left-nav>ul>li.active>a>.icon-deployment,.left-nav>ul>li:hover>a>.icon-deployment,.left-nav>ul>li.focus>a>.icon-deployment{
784 background-image: url("Deployments_over.png");
785 }
786 .left-nav>ul>li.active>a>.icon-site , .left-nav>ul>li:hover>a>.icon-site , .left-nav>ul>li.focus>a>.icon-site{
787 background-image: url("Sites_over.png");
788 }
789 .left-nav>ul>li.active>a>.icon-slice , .left-nav>ul>li:hover>a>.icon-slice , .left-nav>ul>li.focus>a>.icon-slice {
790 background-image: url("Slices_over.png");
791 }
792 .left-nav>ul>li.active>a>.icon-user , .left-nav>ul>li:hover>a>.icon-user , .left-nav>ul>li.focus>a>.icon-user{
793 background-image: url("Users_over.png");
794 }
795 .left-nav>ul>li.active>a>.icon-reservation , .left-nav>ul>li:hover>a>.icon-reservation , .left-nav>ul>li.focus>a>.icon-reservation{
796 background-image: url("Reservations_over.png");
797 }
798
799 #dashboardHPC {
800     padding-bottom: 10px;
801 }
802 .summary-attr {
803     padding-right: 20px;
804 }
805 .summary-attr-util {
806     padding-right: 20px;
807     color: green;
808 }
809 .SiteDetail {
810 color: darkBlue;
811     font-size: 1.5em;
812 }
813 #addSlivers {
814  color: green;
815 text-decoration: underline;
816     padding-right: 20px;
817 }
818 #remSlivers {
819  color: red;
820  text-decoration: underline;
821 }
822 #map-us {
823     padding-top: 10px;
824     width: 700px;
825     height: 400px;
826 }
827
828 .minidashbutton {
829         -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
830         -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
831         box-shadow:inset 0px 1px 0px 0px #ffffff;
832         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
833         background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
834         background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
835         background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
836         background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
837         background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
838         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
839         background-color:#ffffff;
840         -moz-border-radius:6px;
841         -webkit-border-radius:6px;
842         border-radius:6px;
843         border:1px solid #dcdcdc;
844         display:inline-block;
845         cursor:pointer;
846         color:#666666;
847         font-family:arial;
848         font-size:15px;
849         font-weight:bold;
850         padding:6px 24px;
851         text-decoration:none;
852         text-shadow:0px 1px 0px #ffffff;
853 }
854 .minidashbutton:hover {
855         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
856         background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
857         background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
858         background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
859         background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
860         background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
861         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
862         background-color:#f6f6f6;
863 }
864
865 .newMiniDashboard {
866     border: 1px solid green;
867     width: auto;
868 }
869
870 .endDashPair {
871     clear: left;
872 }
873 .miniDashPair {
874     float: left;
875     width: auto;
876     margin-left: 20px;
877 }
878
879 .miniDashPair label {
880  text-align: center;
881 }
882 /* Charts CSS */
883 p.numeral
884 {
885         font-size:32pt;
886         color:#ffffff;
887         opacity: 0.7;
888         font-family:Helvetica Neue;
889         font-weight:100;
890         text-align:center;
891         line-height:75%;
892 }
893
894 .helper-text
895 {
896         border: 1px solid #fff;
897         padding: 7px;
898         border-radius: 18px;
899         font-size:13pt;
900         color:#ffffff;
901         opacity: 0.7;
902         font-family:Helvetica Neue;
903         font-weight:200;
904         text-align:center;
905         line-height:100%;
906 }
907 p.osobject
908 {
909         font-size:12pt;
910         color:#ffffff;
911         opacity: 0.7;
912         font-family:Helvetica Neue;
913         font-weight:200;
914         text-align:center;
915         line-height:100%;
916 }
917
918 p.heading
919 {
920         font-size:20px;
921         letter-spacing: 1px;
922         color: black;
923         font-family:Arial;
924         font-weight:bold;
925         text-align:center;
926 }
927
928 /*p.heading
929 {
930         font-size:32pt;
931         color:#ffffff;
932         opacity: 0.7;
933         font-family:Helvetica Neue;
934         font-weight:200;
935         text-align:center;
936 }*/
937
938 div.graph 
939 {
940         height:340px;
941 }
942
943 div.numeral 
944 {
945         height:120px;
946 }
947
948 div.heading 
949 {
950         height:10px;
951 }
952
953 div.padding 
954 {
955         height:20px;
956 }
957
958 div.chartContainer
959 {
960         /*background-image:url('chartsBg.jpg');*/
961         width:527px;
962         height:400px;
963         border:1px;
964 }
965
966 /* D3 */
967
968 .axis path,
969 .axis line {
970   fill: none;
971   stroke: #ffffff;
972   opacity: 0.7;
973   shape-rendering: crispEdges;
974 }
975
976
977 .x.axis path {
978   display: none;
979 }
980
981 .x.axis text {
982   fill: white;
983   opacity: 0.5;
984 }
985
986 .y.axis text {
987   opacity: 0.5;
988   fill: white;
989 }
990
991 .y.axis text.legend {
992   opacity: 1.0;
993   fill: white;
994   font-size:8pt;
995 }
996
997 .line {
998   fill: none;
999   stroke: white;
1000   stroke-width: 3px;
1001   opacity: 0.6;
1002 }
1003
1004
1005 /******  Added in so that we can have a loader show as charts get ready to render ***/
1006 .loading {
1007     //background-color: orange;
1008     background-image: url(spinner.gif) no-repeat center middle;
1009     text-align: center;
1010     font-size: 20px;
1011     height: 100%
1012 /*    width: auto;*/
1013     float: left;
1014     padding: 10px;
1015 }
1016 /* Charts CSS */
1017
1018 #tabs-4 {
1019     margin: 40px;
1020     font-size: 24px;
1021     font-weight: bold;
1022 }
1023
1024 .tenant-row{
1025    padding-bottom: 0.7%;
1026 }
1027
1028 /***********TENANT VIEW*************/
1029
1030 #image-dropdown,#slice-image-value,#adv-slice-image-value{
1031  margin-left: 5%;
1032 }
1033
1034 #network-dropdown,#adv-network-dropdown,#adv-network-value{
1035  margin-left: 3.7%;
1036 }
1037
1038 #service-level-dropdown,#service-level-value,#adv-service-level-dropdown,#adv-service-level-value{
1039  margin-left: 0.2% !important;
1040 }
1041
1042 #slice-name-value,#adv-slice-name-value{
1043    margin-left: 2%;
1044 }
1045 #adv-dataset-dropdown{
1046 margin-left: 3%;
1047 }
1048 #advanced-tenant,#basic-tenant,#sliver-btn,#save-btn{
1049   float:right;
1050 }
1051  #delete-slice-btn,#download-details{
1052         margin-left:1%;
1053 }
1054
1055 #sliver-btn,#save-btn,#create-slice-btn,#delete-slice-btn,#download-details{
1056   margin-top:1%;
1057 }
1058
1059 .tenantDialog.ui-widget input{
1060         border-radius: 0px !important;
1061         height: 12px !important;
1062         width: 180px !important;
1063         margin-right: 10% !important;
1064         float: right;
1065 }
1066
1067 .tenantDialog .ui-dialog-buttonset .ui-button{
1068 border-radius: 0 !important;
1069 background-color: grey !important;
1070 font-weight: bold !important;
1071 font-size: 0.9em; !important
1072 }
1073
1074 .tenantDialog .ui-dialog-titlebar{
1075 border-radius: 0 !important;
1076 background-color: grey !important;
1077 }
1078
1079 .create-slice-row{
1080         margin-bottom: 4%;
1081         clear: both;
1082         height: 25px;
1083 }
1084
1085 .create-slice-row label, .tenantDialog label{
1086    margin-right:1%;
1087    float:left;
1088 }
1089
1090 .create-slice-row select{
1091    height:24px;
1092    width: 196px;
1093    font-size: 0.9em !important;
1094 }
1095
1096 .tenant-create-slice{
1097         float:right;
1098         margin-right: 10% !important;
1099 }
1100
1101 #delete-slice{
1102 float: right;
1103 }
1104
1105 #tooltip,#adv-tooltip,#basic-tooltip{
1106 font-size:0.7em;
1107 color:red;
1108 display:none;
1109 }
1110
1111 #tenantSliceDataWrapper {
1112         padding: 1% 0;
1113 }
1114
1115 #advancedTenantSliceDataWrapper .help-inline{
1116         font-size: 11px;
1117         color: #999;
1118         padding-bottom: 1%;
1119 }
1120
1121 .create-slice-row label{
1122         clear:both;
1123         margin-right: 1%;
1124 }
1125
1126 #advNumOfSlivers{
1127         margin-right: 1% !important;
1128 }
1129
1130 #private-vol-checkbox{
1131 margin: 0 0 1% 1%;
1132 }
1133
1134 .public-key-warning{
1135 text-align: center;
1136 display:none;
1137 }
1138
1139 #private-vol{
1140 margin-right: 15% !important;
1141 }\r
1142 \r
1143 .customize_row {\r
1144   display: table;\r
1145 }\r
1146 .customize_column {\r
1147   display: table-cell;\r
1148   padding: 10px;\r
1149 }\r