1 /*************************
3 tab - active/focus color
4 background-color: #105E9E !important;
6 ONLab darker blue select :: background-color: #004775;
9 background-color: #448CCA;
10 background-color // normal: #B4CADF
13 *************************/
15 /* CSS for jquery Tabs */
17 border-bottom: 1px solid #105E9E;
24 background-color: #105E9E;
25 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
28 .nav > li > a:active {
30 background-color: #105E9E;
31 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
36 background-color: #105E9E;
37 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
41 .ui-state-focus a:link{
43 background-color: #105E9E;
44 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
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;
53 /*************************/
59 background-color: #ffffff !important;
60 /*background-image: url('bg2.jpg');*/
61 background-size: 100% auto;
62 background-image: none !important;
64 border-bottom: 3px solid #C5CCD4;
68 /*min-width: 1321px;*/
72 margin: 30px -10px 0px 0px !important;
73 padding:0 25px 0 0 !important;
74 float:right !important;
77 .nav-quick-search .search-query{
81 background-color:lightGrey;
94 /*border-bottom: 1px solid #C5CCD4;*/
99 /*border-bottom: 1px solid #C5CCD4;*/
110 /*background-color: #000000;*/
114 .header #user-tools {
115 padding: 12px 20px 0px 0px;
120 .header .header-content .date{
124 .header .header-content .time {
127 .header .header-content.header-content-first{
132 .header .header-content {
134 padding: 7px 0 0 0px;
137 /*************************/
139 .footer .content .statusMsg {
141 padding: 15px 20px 0 0;
146 text-align: center !important;
147 align: center !important;
149 table.dataTable tr.odd {
150 background-color: white !important;
152 table.dataTable tr.odd td.sorting_1 {
153 background-color: white !important;
155 table.dataTable tr.even td.sorting_1 {
156 background-color: white !important;
158 table.dataTable thead th div.DataTables_sort_wrapper {
161 .dashboard-hpc-sliver .ui-widget-header, .dashboard-hpc-sliver .ui-dialog-title, .dashboard-hpc-sliver .ui-dialog-titlebar{
164 background: black !important;
167 border-bottom-left-radius: 0px !important;
168 border-bottom-right-radius: 0px !important;
172 /* min-width: 977px !important; */
180 /*min-width:625px; */
183 border: 2px darkGrey;
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;
192 background: none !important;
193 border-top: 0px !important;
194 border-left: 0px !important;
195 border-right: 0px !important;
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;
206 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
210 background-color: #ffffff;
213 .save-box .btn-info {
215 padding: 10px 20px 10px 20px;
220 padding: 5px 10px 5px 10px;
222 .btn-success, .save-box .btn-info {
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;
232 text-shadow: 1px 1px 3px #666666;
235 text-decoration: none;
239 .btn-success:hover, .save-box .btn-info:hover {
241 text-decoration: none;
246 .required:after {color: red ! important; font-size: 18px }
247 #.btn-success {color:black}
253 .inner-two-columns .inner-center-column .tab-content {
259 .inner-two-columns .inner-center-column {
260 #margin-right: 200px;
261 #background-color: rgb(158, 163, 159);
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*/
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;*/
285 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
291 /*For giving the padding for the left side navigation*/
296 /*For increasing the height of left side navigation list items*/
303 /*For changing background color of suit center*/
305 background-color: #ffffff;
308 .left-nav>ul>li.active>a {
309 /*background-color: #448CCA;*/
311 background-color: #0061B7; */
312 background-color: #515151;
313 /*background-color: #448CCA;*/
316 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
320 background-image: url("right_arrow.png");
321 background-position: 97% center;
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;
334 .nav-tabs-suit li a {
336 /*background-color: #CDE7FF;*/
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;
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');
355 .nav-tabs-suit li.hover{
356 /*Changed on Dec 11*/
357 /*background-color: #448CCA;*/
359 /*font-size: 1.2em;*/
363 .nav-tabs-suit li.active a {
364 background-color: #ffffff;
365 /*background-color: #448CCA;*/
366 background-color: #105E9E;
370 text-decoration:none;
373 .nav-tabs-suit li.active a:after{ /*arrow added to downarrowdiv DIV*/
376 border-left: 5px solid transparent;
377 border-right: 5px solid transparent;
378 border-top: 5px solid #2f2f2f;
384 /* create an arrow that points down */
387 .left-nav>ul>li.active>a:hover{
388 /*background-color: #448CCA;*/
389 /*background-color: #91BFE4;*/
390 /*background-color: #D6E7F8;*/
396 text-decoration:none;
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;
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;
414 .nav-tabs-suit li.active a:hover,.nav-tabs-suit li a:hover{
415 /*background-color: #448CCA;*/
416 background-color: #515151;
421 text-decoration:none;
425 /*font-weight:bold;*/
430 border-bottom: 1px solid #B5D1EA;*/
438 background-image: url('home.png');
439 background-repeat: no-repeat;
440 background-position: 85%;
447 background-image: url('home.png');
448 background-repeat: no-repeat;
449 background-position: 40%;
452 vertical-align: middle;
457 .left-nav>ul>li.active>a:after {
468 background-color: #ffffff;
471 .login #content-main {
472 width: 280px !important;
475 -webkit-border-radius: 5;
476 -moz-border-radius: 5;
478 /*background: #EBF0F2;*/
479 background: rgba(255,255,255,0.85);
480 /*background: rgba(235,240,242,0.6);*/
481 overflow: visible !important;
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%;*/
489 background-repeat: no-repeat;
493 .login #content-main h1 i {
497 .login #content-main h1 img{
501 .login #content-main .control-group .control-label{
505 .login #content-main form input[type=text], .requestDialog.ui-widget input{
510 background-color: rgb(250, 255, 189);
511 /*background-image: url('name.png');*/
512 background-repeat: no-repeat;
513 background-position: 95%;
517 .login #content-main form input[type=password] {
523 background-color: #E5E5E5;
524 background-image: url('password.png');
525 background-repeat: no-repeat;
526 background-position: 95%;
529 .login #content-main .submit-row{
530 background: #EBF0F215px;
531 background: rgba(235,240,242,0.0);
537 .login #content-main .submit-row .btn-info {
538 background-color : #448CCA;
539 background-image: none;
548 text-decoration: none;
554 text-decoration: none;
560 .nav-tabs-suit li.active a{
562 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
564 -webkit-box-shadow: none;
565 -moz-box-shadow: none;
574 .nav-tabs-suit li a:hover{
578 text-shadow: rgb(46, 43, 43) 0.1em 0.1em 0.2em;
581 .nav-tabs-suit li.active a:hover{
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;
598 background-image: url('bg.jpg');
599 background-size: 100%;
600 background-repeat: no-repeat;
604 .login #content-main {
607 margin: 100px auto 0;
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;
616 /** Setting overflow and 1kpx to deal with inlines/forms overlapping on
623 .tab-content tab-content-main {
624 overflow-x: auto !important;
632 display:block; clear:left; width:0px; height:0px;
636 background-color:#ffffff;
640 background-color:#ffffff;
653 .login #content-main form {
663 background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
666 background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
669 height: auto !important;
670 margin: 0 auto -60px;
680 #request-account-form{
684 #requestAccountLink {
691 text-decoration: underline;
698 .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
699 /*background-color: #448CCA;*/
700 background-color: #105E9E;
705 /*Added by Beena for adding the three components in dashboard*/
708 display:inline-block;
709 background-color: #fff;
714 /*background-color: #ededed;*/
720 display:inline-block;
722 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
728 display: inline-block;
730 border:1px solid #000;
731 /*line-height: 23px;*/
739 .header-content .header-column {
742 .header .input-icon {
743 background-image: url("Search.png");
744 background-repeat: no-repeat;
745 background-position:left center;
747 background-size: 100%;
748 vertical-align:middle;
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;*/
763 .icon-home ,.icon-deployment ,.icon-site ,.icon-slice ,.icon-user, .icon-reservation, .icon-app{
764 background-position: left center;
770 background-image: url("opencloudApp.png");
773 /* Going with darker standard color nav -- so using over png's background-image: url("Home.png"); */
774 background-image: url("Home_over.png");
777 background-image: url("Deployments_over.png");
780 background-image: url("Sites_over.png");
783 background-image: url("Slices_over.png");
786 background-image: url("Users_over.png");
789 background-image: url("Reservations_over.png");
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");
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");
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");
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");
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");
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");
813 padding-bottom: 10px;
828 text-decoration: underline;
833 text-decoration: underline;
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;
856 border:1px solid #dcdcdc;
857 display:inline-block;
864 text-decoration:none;
865 text-shadow:0px 1px 0px #ffffff;
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;
879 border: 1px solid green;
892 .miniDashPair label {
901 font-family:Helvetica Neue;
909 border: 1px solid #fff;
915 font-family:Helvetica Neue;
925 font-family:Helvetica Neue;
946 font-family:Helvetica Neue;
973 /*background-image:url('chartsBg.jpg');*/
986 shape-rendering: crispEdges;
1004 .y.axis text.legend {
1018 /****** Added in so that we can have a loader show as charts get ready to render ***/
1020 //background-color: orange;
1021 background-image: url(spinner.gif) no-repeat center middle;
1038 padding-bottom: 0.7%;
1041 /***********TENANT VIEW*************/
1043 #image-dropdown,#slice-image-value,#adv-slice-image-value{
1048 #adv-slice-image-value{
1052 #adv-network-value {
1056 #network-dropdown,#adv-network-dropdown,#adv-network-value{
1060 #service-level-dropdown,#service-level-value,#adv-service-level-dropdown,#adv-service-level-value{
1061 margin-left: 0.2% !important;
1064 #slice-name-value,#adv-slice-name-value{
1067 #adv-dataset-dropdown{
1070 #advanced-tenant,#basic-tenant,#sliver-btn,#save-btn{
1073 #delete-slice-btn,#download-details,#add-user-btn{
1077 #sliver-btn,#save-btn,#create-slice-btn,#delete-slice-btn,#add-user-btn,#download-details{
1081 .tenantDialog.ui-widget input{
1082 border-radius: 0px !important;
1083 height: 12px !important;
1084 width: 180px !important;
1085 margin-right: 10% !important;
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
1096 .tenantDialog .ui-dialog-titlebar{
1097 border-radius: 0 !important;
1098 background-color: grey !important;
1107 .create-slice-row label, .tenantDialog label{
1112 .create-slice-row select{
1115 font-size: 0.9em !important;
1118 .tenant-create-slice{
1120 margin-right: 10% !important;
1127 #tooltip,#adv-tooltip,#basic-tooltip{
1133 #tenantSliceDataWrapper {
1137 #advancedTenantSliceDataWrapper .help-inline{
1143 .create-slice-row label{
1149 margin-right: 1% !important;
1152 #private-vol-checkbox{
1156 .public-key-warning{
1162 margin-right: 15% !important;
1168 display: table-cell;
1177 background-color: white;
1179 width: 30% !important;
1180 height: 40% !important;
1182 top: -103.703125px !important;
1185 .request-form-row label{
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
1197 .requestDialog .ui-dialog-titlebar-close{
1202 height: 40px !important;
1205 background-color: #448CCA;
1206 background-image: none;
1207 width: 70% !important;
1210 .requestDialog .ui-dialog-titlebar{
1211 border-radius: 0 !important;
1216 .requestDialog #ui-id-1{