dynamic home view with customization
[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     background: url("../img/bg_left_white.gif") repeat-y scroll left top rgba(0, 0, 0, 0);
664 }
665 #wrap {
666     height: auto !important;
667     margin: 0 auto -60px;
668     min-height: 100%;
669 }
670
671 .forgotLink {
672         width: 45%;
673         text-align: left;
674         float: left;
675 }
676
677 .createAccountLink {
678         width: 55%;
679         text-align: right;
680         float: left;
681         
682 }
683
684 .login .btn-info {
685         color: #FFF;
686 }
687
688 .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
689         /*background-color: #448CCA;*/
690         background-color: #105E9E;
691         color: #FFF;
692         border: none;
693 }
694
695 /*Added by Beena for adding the three components in dashboard*/
696 .breadcrumb{
697                 width: 37%;
698         display:inline-block;
699         background-color: #fff;
700
701 }
702
703 .nodetextbox{
704         /*background-color: #ededed;*/
705         line-height: 25px;
706         width: 150px; 
707         text-align: center;
708         font-weight: bold;
709         margin-left:0px;
710         display:inline-block;
711         border:none;
712         font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
713         font-size: 8px;
714 }
715
716 .nodelabel{
717 width: 20px;
718 display: inline-block;
719 border-radius: 0px;
720 border:1px solid #000;
721 /*line-height: 23px;*/
722 text-align: center;
723 font-weight: normal;
724 }
725
726 #user-tools {
727   font-weight: bold;
728 }
729 .header-content .header-column {
730         display: none;
731 }
732 .header .input-icon {
733     background-image: url("Search.png");
734     background-repeat: no-repeat;
735 background-position:left center;
736 opacity:1;
737     background-size: 100%;
738     vertical-align:middle;
739         margin-right: -30px;
740     /*margin-top: 5px;*/
741     position: relative;
742     height: 22px;
743     width: 22px;
744 }
745
746 .header .icon-search {
747         /*background-image: url("search.png") !important;
748     background-repeat: no-repeat !important;
749     background-size: 120% auto !important;
750     background-position: 0;*/
751 }
752
753 .icon-home ,.icon-deployment ,.icon-site ,.icon-slice ,.icon-user, .icon-reservation, .icon-app{
754 background-position: left center;
755 width:22px;
756 height:22px;    
757 }
758
759 .icon-app {
760 background-image: url("opencloudApp.png");
761 }
762 .icon-home {
763 /*  Going with darker standard color nav -- so using over png's background-image: url("Home.png"); */
764 background-image: url("Home_over.png");
765 }
766 .icon-deployment{
767 background-image: url("Deployments_over.png");
768 }
769 .icon-site{
770 background-image: url("Sites_over.png");
771 }
772 .icon-slice{
773 background-image: url("Slices_over.png");
774 }
775 .icon-user{
776 background-image: url("Users_over.png");
777 }
778 .icon-reservation{
779 background-image: url("Reservations_over.png");
780 }
781
782 .left-nav>ul>li.active>a>.icon-home , .left-nav>ul>li:hover>a>.icon-home , .left-nav>ul>li.focus>a>.icon-home{
783 background-image: url("Home_over.png");
784 }
785
786 .left-nav>ul>li.active>a>.icon-deployment,.left-nav>ul>li:hover>a>.icon-deployment,.left-nav>ul>li.focus>a>.icon-deployment{
787 background-image: url("Deployments_over.png");
788 }
789 .left-nav>ul>li.active>a>.icon-site , .left-nav>ul>li:hover>a>.icon-site , .left-nav>ul>li.focus>a>.icon-site{
790 background-image: url("Sites_over.png");
791 }
792 .left-nav>ul>li.active>a>.icon-slice , .left-nav>ul>li:hover>a>.icon-slice , .left-nav>ul>li.focus>a>.icon-slice {
793 background-image: url("Slices_over.png");
794 }
795 .left-nav>ul>li.active>a>.icon-user , .left-nav>ul>li:hover>a>.icon-user , .left-nav>ul>li.focus>a>.icon-user{
796 background-image: url("Users_over.png");
797 }
798 .left-nav>ul>li.active>a>.icon-reservation , .left-nav>ul>li:hover>a>.icon-reservation , .left-nav>ul>li.focus>a>.icon-reservation{
799 background-image: url("Reservations_over.png");
800 }
801
802 #dashboardHPC {
803     padding-bottom: 10px;
804 }
805 .summary-attr {
806     padding-right: 20px;
807 }
808 .summary-attr-util {
809     padding-right: 20px;
810     color: green;
811 }
812 .SiteDetail {
813 color: darkBlue;
814     font-size: 1.5em;
815 }
816 #addSlivers {
817  color: green;
818 text-decoration: underline;
819     padding-right: 20px;
820 }
821 #remSlivers {
822  color: red;
823  text-decoration: underline;
824 }
825 #map-us {
826     padding-top: 10px;
827     width: 700px;
828     height: 400px;
829 }
830
831 .minidashbutton {
832         -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
833         -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
834         box-shadow:inset 0px 1px 0px 0px #ffffff;
835         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
836         background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
837         background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
838         background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
839         background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
840         background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
841         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
842         background-color:#ffffff;
843         -moz-border-radius:6px;
844         -webkit-border-radius:6px;
845         border-radius:6px;
846         border:1px solid #dcdcdc;
847         display:inline-block;
848         cursor:pointer;
849         color:#666666;
850         font-family:arial;
851         font-size:15px;
852         font-weight:bold;
853         padding:6px 24px;
854         text-decoration:none;
855         text-shadow:0px 1px 0px #ffffff;
856 }
857 .minidashbutton:hover {
858         background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
859         background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
860         background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
861         background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
862         background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
863         background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
864         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
865         background-color:#f6f6f6;
866 }
867
868 .newMiniDashboard {
869     border: 1px solid green;
870     width: auto;
871 }
872
873 .endDashPair {
874     clear: left;
875 }
876 .miniDashPair {
877     float: left;
878     width: auto;
879     margin-left: 20px;
880 }
881
882 .miniDashPair label {
883  text-align: center;
884 }
885 /* Charts CSS */
886 p.numeral
887 {
888         font-size:32pt;
889         color:#ffffff;
890         opacity: 0.7;
891         font-family:Helvetica Neue;
892         font-weight:100;
893         text-align:center;
894         line-height:75%;
895 }
896
897 .helper-text
898 {
899         border: 1px solid #fff;
900         padding: 7px;
901         border-radius: 18px;
902         font-size:13pt;
903         color:#ffffff;
904         opacity: 0.7;
905         font-family:Helvetica Neue;
906         font-weight:200;
907         text-align:center;
908         line-height:100%;
909 }
910 p.osobject
911 {
912         font-size:12pt;
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
921 p.heading
922 {
923         font-size:20px;
924         letter-spacing: 1px;
925         color: black;
926         font-family:Arial;
927         font-weight:bold;
928         text-align:center;
929 }
930
931 /*p.heading
932 {
933         font-size:32pt;
934         color:#ffffff;
935         opacity: 0.7;
936         font-family:Helvetica Neue;
937         font-weight:200;
938         text-align:center;
939 }*/
940
941 div.graph 
942 {
943         height:340px;
944 }
945
946 div.numeral 
947 {
948         height:120px;
949 }
950
951 div.heading 
952 {
953         height:10px;
954 }
955
956 div.padding 
957 {
958         height:20px;
959 }
960
961 div.chartContainer
962 {
963         /*background-image:url('chartsBg.jpg');*/
964         width:527px;
965         height:400px;
966         border:1px;
967 }
968
969 /* D3 */
970
971 .axis path,
972 .axis line {
973   fill: none;
974   stroke: #ffffff;
975   opacity: 0.7;
976   shape-rendering: crispEdges;
977 }
978
979
980 .x.axis path {
981   display: none;
982 }
983
984 .x.axis text {
985   fill: white;
986   opacity: 0.5;
987 }
988
989 .y.axis text {
990   opacity: 0.5;
991   fill: white;
992 }
993
994 .y.axis text.legend {
995   opacity: 1.0;
996   fill: white;
997   font-size:8pt;
998 }
999
1000 .line {
1001   fill: none;
1002   stroke: white;
1003   stroke-width: 3px;
1004   opacity: 0.6;
1005 }
1006
1007
1008 /******  Added in so that we can have a loader show as charts get ready to render ***/
1009 .loading {
1010     //background-color: orange;
1011     background-image: url(spinner.gif) no-repeat center middle;
1012     text-align: center;
1013     font-size: 20px;
1014     height: 100%
1015 /*    width: auto;*/
1016     float: left;
1017     padding: 10px;
1018 }
1019 /* Charts CSS */
1020
1021 #tabs-4 {
1022     margin: 40px;
1023     font-size: 24px;
1024     font-weight: bold;
1025 }
1026
1027 .tenant-row{
1028    padding-bottom: 0.7%;
1029 }
1030
1031 /***********TENANT VIEW*************/
1032
1033 #image-dropdown,#slice-image-value,#adv-slice-image-value{
1034  margin-left: 5%;
1035 }
1036
1037 #network-dropdown,#adv-network-dropdown,#adv-network-value{
1038  margin-left: 3.7%;
1039 }
1040
1041 #service-level-dropdown,#service-level-value,#adv-service-level-dropdown,#adv-service-level-value{
1042  margin-left: 0.2% !important;
1043 }
1044
1045 #slice-name-value,#adv-slice-name-value{
1046    margin-left: 2%;
1047 }
1048 #adv-dataset-dropdown{
1049 margin-left: 3%;
1050 }
1051 #advanced-tenant,#basic-tenant,#sliver-btn,#save-btn{
1052   float:right;
1053 }
1054  #delete-slice-btn,#download-details{
1055         margin-left:1%;
1056 }
1057
1058 #sliver-btn,#save-btn,#create-slice-btn,#delete-slice-btn,#download-details{
1059   margin-top:1%;
1060 }
1061
1062 .tenantDialog.ui-widget input{
1063         border-radius: 0px !important;
1064         height: 12px !important;
1065         width: 180px !important;
1066         margin-right: 10% !important;
1067         float: right;
1068 }
1069
1070 .tenantDialog .ui-dialog-buttonset .ui-button{
1071 border-radius: 0 !important;
1072 background-color: grey !important;
1073 font-weight: bold !important;
1074 font-size: 0.9em; !important
1075 }
1076
1077 .tenantDialog .ui-dialog-titlebar{
1078 border-radius: 0 !important;
1079 background-color: grey !important;
1080 }
1081
1082 .create-slice-row{
1083         margin-bottom: 4%;
1084         clear: both;
1085         height: 25px;
1086 }
1087
1088 .create-slice-row label, .tenantDialog label{
1089    margin-right:1%;
1090    float:left;
1091 }
1092
1093 .create-slice-row select{
1094    height:24px;
1095    width: 196px;
1096    font-size: 0.9em !important;
1097 }
1098
1099 .tenant-create-slice{
1100         float:right;
1101         margin-right: 10% !important;
1102 }
1103
1104 #delete-slice{
1105 float: right;
1106 }
1107
1108 #tooltip,#adv-tooltip,#basic-tooltip{
1109 font-size:0.7em;
1110 color:red;
1111 display:none;
1112 }
1113
1114 #tenantSliceDataWrapper {
1115         padding: 1% 0;
1116 }
1117
1118 #advancedTenantSliceDataWrapper .help-inline{
1119         font-size: 11px;
1120         color: #999;
1121         padding-bottom: 1%;
1122 }
1123
1124 .create-slice-row label{
1125         clear:both;
1126         margin-right: 1%;
1127 }
1128
1129 #advNumOfSlivers{
1130         margin-right: 1% !important;
1131 }
1132
1133 #private-vol-checkbox{
1134 margin: 0 0 1% 1%;
1135 }
1136
1137 .public-key-warning{
1138 text-align: center;
1139 display:none;
1140 }
1141
1142 #private-vol{
1143 margin-right: 15% !important;
1144 }\r
1145 \r
1146 .customize_row {\r
1147   display: table;\r
1148 }\r
1149 .customize_column {\r
1150   display: table-cell;\r
1151   padding: 10px;\r
1152 }\r