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