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