ui/css/main.css

 /*-
  * Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.

  */



/**********BASE CONFIGURATIONS**********/
body {
  background:#1f1f1f;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
}

html{
  height: 100%;
}

h1 {
font-family: 'Raleway', sans-serif;}

h3,h4 , h5 {
  font-family: 'Open Sans', sans-serif;
  font-weight:lighter;
}

h2{
  font-size:22px;
}

h3 {
  font-size:46px;
  color:#b2c831
}

h5 {
  color:#b2c831;
  margin-left:5px;
}

/***********BLOCKS & WRAPS***********/

/*--- Dash Unit / Used in Dashboard page ---*/
.dash-unit {
  margin-bottom: 30px;
  padding-bottom:10px;
  border: 1px solid #383737;
  background-image:url('../img/sep-half.png');
  background-color: #3d3d3d;
  color:white;
  height:290px;
}

.dash-unit:hover {
  background-color: #4f4f4f;
  -moz-box-shadow:    3px 3px 2px 0px #151515;
    -webkit-box-shadow: 3px 3px 2px 0px #151515;
    box-shadow:         3px 3px 2px 0px #151515;

}

.dash-unit dtitle {
  font-size:11px;
  text-transform:uppercase;
  color:#ffffff;
  margin:8px;
  padding:0px;
  height:inherit
  }

.dash-unit hr {
    border: 0;
    border-top: 1px solid #151515;
    border-top-style: dashed;
  margin-top:3px;
}

.dash-unit h1 {
  font-family: 'Raleway', sans-serif;
  font-weight:300;
  font-size: 20px;
  line-height: 2px;
  letter-spacing: 0px;
  color: #ffffff;
  padding-top:10px;
  padding-left:5px;
  margin-top:2px;
  text-align:center;
}

.dash-unit h2 {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 26px;
  letter-spacing: 0px;
  color: #ffffff;
  padding-top:10px;
  padding-left:5px;
  margin-top:2px;
  text-align:center;
}


.dash-unit h3 {
  font-weight:300;
  font-size: 15px;
  line-height: 2px;
  letter-spacing: 0px;
  color: #b2c831;
  padding-top:10px;
  padding-left:5px;
  margin-top:2px;
  text-align:center;
}


.dash-unit p {
  font-size: 14px;
  font-weight: 200;
  line-height: 16px;
  color: inherit;
  margin: 0 0 10px;
  padding:5px;
 }

.dash-unit h4 {
  padding-left:5px;
  margin-top:2px;
  font-size: 13px;
  font-weight:lighter;
  line-height: 1;
  letter-spacing: 0px;
  color: #fff;
}

.dash-unit bold{
  font-family: 'Open Sans', sans-serif;
  font-size:26px;
  font-weight:bold;
  color:#fff;
  vertical-align:middle;
}


/**********Half-Unit / Used in index.html**********/
.half-unit {
  margin-bottom: 30px;
  padding-bottom: 4px;
  border: 1px solid #383737;
  background-image:url('../img/sep-half.png');
  background-color: #3d3d3d;
  color:white;
  height:130px;
}

.half-unit:hover {
  background-color: #4f4f4f;
  -moz-box-shadow:    3px 3px 2px 0px #151515;
    -webkit-box-shadow: 3px 3px 2px 0px #151515;
    box-shadow:         3px 3px 2px 0px #151515;

}

.half-unit dtitle {
  font-size:10px;
  text-transform:uppercase;
  color:#ffffff;
  margin:8px;
  padding:0px;
  height:inherit
  }

.half-unit hr {
    border: 0;
    border-top: 1px solid #151515;
    border-top-style: dashed;
  margin-top:3px;
}

.half-unit h1 {
  font-family: 'Raleway', sans-serif;
  font-weight:300;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0px;
  color: #ffffff;
  padding-top:10px;
  padding-left:5px;
  margin-top:2px;
  text-align:center;
}

.half-unit h4 {
  padding-left:5px;
  margin-top:2px;
  font-size: 13px;
  font-weight:lighter;
  line-height: 1;
  letter-spacing: 0px;
  color: #fff;
}


.half-unit bold{
  font-family: 'Open Sans', sans-serif;
  font-size:26px;
  font-weight:bold;
  color:#fff;
  vertical-align:middle;
}

/**********Styling Elements**********/
.cont {
  text-align:center;
  margin-top:30px;
}

.cont ok {
  color:#b2c831;
}

.cont bad {
  color:#fa1d2d;
}

.cont2 {
  text-align:center;
  margin-top:-15px;
  font-size:12px;
  line-height:7px;
}

.cont2 bold{
  font-size:10px;
  font-weight:bold;
  color:#b2c831
}

.text p {
  font-family: 'Open Sans', sans-serif;
  margin-left:8px;
  font-size:14px;
  line-height:18px;
}

.text grey {
  font-size:11px;
  color:silver
}


/***********Bootstrap Default Modifications***********/

.thumbnail {
  border:0px;
  text-align:center;
  -webkit-box-shadow: 0px;
     -moz-box-shadow: 0px;
          box-shadow: 0px;
    background: none;
    text-align: center;

}

.modal-header {
  background-image:url('../img/sep-half.png');
  background-color: #4f4f4f;
  color:#fff;
}

.btn-circle {
  width: 60px;
  height: 30px;
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1.33;
  border-radius: 15px 15px 15px 15px;

  border-width:2px;
  border-color:#2A9FD6;
  cursor:pointer;
}

.btn-circle:hover{
    /*background: #b2c831;
    color:#000;*/
}

/*input[type=submit] {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  background: #b2c831;
  color: #fff;
  border: none;
  padding: 8px 28px 10px 26px;
    *-webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
input[type=text], textarea {
  background: #cdcbcc;
  font-size: 13px;
  display: block;
  width: 100%;
  border: none;
  box-shadow: none;
  height: 30px;
  line-height: 18px;
  padding: 0;
  text-indent: 18px;
  margin: 0 0 18px;
}*/
textarea {
  line-height: 18px;
  padding: 18px;
  width: 100%;
  text-indent: 0;
}
.textarea-container { margin: 0 18px; }
.textarea-container textarea { margin-left: -18px; }
#contact textarea { width: 100%; height: 45px; }


.progress-bar {
  background-color: #b2c831;
}




/***********LineIcons Styles***********/


.info-user {
  text-align:center;
  font-size: 24px;
  color: #b2c831;
  }

.fs1 {
  padding:5px 5px 5px 5px;
  position:relative;
}

.fs1:hover {
  position:relative;
  color: #fff;
  cursor:pointer
}

.fs2 {
  padding:5px 5px 5px 5px;
  position:relative;
  font-size:35px;
  vertical-align: text-bottom
}

/**********Clock Configuration**********/

digiclock {
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  margin-left: auto
}

.clockcenter {
  text-align:center;
}


/**********Mail Style Configuration**********/

.framemail {
    cursor: default;
}
.framemail .window {
    font-size: 0;
    margin-top: -1px;
    overflow: hidden;
    margin-left: -18px;
}
.framemail .window .mail li {
    background-color:#3d3d3d;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:    -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:     -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:      -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    background-image:         linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05));
    border-top: 1px solid #888;
    position: relative;
    margin-left:-18px;
}
.framemail .window .mail li:first-child {
    border-top: none;
}
.framemail .window .mail li:hover {
    background-color: #5d5b5b;
}
.framemail .window .mail li:after,
.framemail .window .mail li:before {
    border-left: 8px solid transparent;
    border-top: 8px solid #df6;
    content: '';
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
.framemail .window .mail li:before {
    border-top-color: #bbb;
    border-width: 9px;
}
.framemail .window .mail li:nth-child(1):after,
.framemail .window .mail li:nth-child(1):before {
    border: none;
}
.framemail .window .mail li:nth-child(2):after {
    border-top-color: #fa1d2d;
}
.framemail .window .mail li i {
    display: inline-block;
    height: 48px;
    width: 6px;
}
.framemail .window .mail li .read {
    background-color: #ddd;
}
.framemail .window .mail li .unread {
    background: #b2c831;
}
.framemail .window .mail li img {
    background: #819da2;
    border-radius: 2px;
    height: 36px;
    left: 12px;
    position: absolute;
    top: 6px;
    width: 36px;
}
.framemail .window .mail li p {
    font: 13px/24px sans-serif;
    left: 56px;
    position: absolute;
    top: 3px;
}
.framemail .window .mail li .sender {
    color: #e9e8e8;
    font-weight: bold;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
}
.framemail .window .mail li .message {
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    top: 21px;
    white-space: nowrap;
}
.framemail .window .mail li .message strong {
    color: #999;
}
.framemail .window .mail li .actions {
    height: 16px;
    position: absolute;
    right: 19px;
    text-align: right;
    top: 0;
    width: 96px;
}
.framemail .window .mail li .actions img {
    background: none;
    display: inline-block;
    height: 16px;
    margin-left: 6px;
    opacity: .1;
    position: relative;
    width: 16px;
}
.framemail .window .mail li:hover .actions img {
    opacity: .25;
}
.framemail .window .mail li .actions img:hover {
    opacity: .75;
}


/**********DONUT CHARTS STYLES**********/
#load {
  width: 11.313em;
  height: 11.313em;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 1.063em;
  background-position: center center;
  margin:auto;
}

#space {
  width: 11.313em;
  height: 11.313em;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 1.063em;
  background-position: center center;
  margin:auto;
}


/**********LINE AND BARS**********/

.section-graph {
  position: relative;
  height: 130px;
  color: #fff;
  background-image: linear-gradient(color-stops(#b2c831, #b2c831 50%, #b2c831 50%));
  margin-bottom:20px;
}
.section-graph .graph-info {
  z-index: 99;
  position: absolute;
  font-weight: bold;
  margin-top: 12px;
  margin-left: 21px;
  width: 100px;
}
.section-graph .graph-info .graph-arrow {
  width: 0;
  height: 0;
  margin-top: 18px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid white;
  float: left;
}
.section-graph .graph-info .graph-info-big {
  font-size: 24px;
  float: left;
  margin-left: 3px;
}
.section-graph .graph-info .graph-info-small {
  margin-left: 3px;
  font-size: 12px;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.5);
  clear: left;
  margin-left: 8px;
}
/*
 * Info Section
 */
.info-aapl {
  text-align: center;

}
.info-aapl ul {
  margin-left:30%;

}
.info-aapl li {
  margin: 0;
  display: block;
  width: 9px;
  height: 40px;
  margin-right: 6px;
  background-color: #f5f0ec;
  float:left;
  position: relative;
}
.info-aapl li span {
  display: block;
  width: 9px;
  height: 40px;
  position: absolute;
  bottom: 0;
}
.info-aapl li span.orange {
  background-color: #fa1d2d;
}
.info-aapl li span.green {
  background-color: #b2c831;
}

/**********TWITTER WIDGET **********/
#jstwitter ul li{
  color:#bdbdbd;
  padding:.5em .75em;
}

#jstwitter ul{
  margin-left:0;
  list-style:none
}

#jstwitter:first-child{
  border-top:0
}

ul#jstwitter li a{
  font-size:10px;
  font-style:italic;
  color:#666;
  text-decoration:none
}

/********** CUSTOMIZED BUTTON **********/
.btnnew {
  display: inline-block;
  *border-left: 0 none #707070;
  border-right: 0 none #707070;
  border-top: 0 none #707070;
  border-bottom: 0 none #707070;
  display: inline;
    padding: 4px 12px;
    margin-bottom: 0;
  *margin-left: .3em;
    font-size: 14px;
    line-height: 20px;
    color: #b2c831;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
  background-color: #5a5a5a;
  *background-color: #5a5a5a;
    background-repeat: repeat-x;
  *-webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
    zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  background-image: linear-gradient(to bottom, #707070, #707070);*
}

/********** SWITCH BUTTON **********/
.switch {
  position: relative;
  margin: 20px auto;
  height: 26px;
  width: 120px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 58px;
  line-height: 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.switch-label:active {
  font-weight: bold;
}

.switch-label-off {
  padding-left: 2px;
}

.switch-label-on {
  padding-right: 2px;
}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */
.switch-input {
  display: none;
}
.switch-input:checked + .switch-label {
  font-weight: bold;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 60px;
  /* Note: left: 50% doesn't transition in WebKit */
}

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  width: 58px;
  height: 22px;
  background: #b2c831;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #b6c753, #b2c831);
  background-image: -moz-linear-gradient(top, #b6c753, #b2c831);
  background-image: -o-linear-gradient(top, #b6c753, #b2c831);
  background-image: linear-gradient(to bottom, #b6c753, #b2c831);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}
.switch-blue .switch-selection {
  background: #3aa2d0;
  background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
  background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
  background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
  background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
}
.switch-yellow .switch-selection {
  background: #fa1d2d;
  background-image: -webkit-linear-gradient(top, #f93e4b, #fa1d2d);
  background-image: -moz-linear-gradient(top, #f93e4b, #fa1d2d);
  background-image: -o-linear-gradient(top, #f93e4b, #fa1d2d);
  background-image: linear-gradient(to bottom, #f93e4b, #fa1d2d);
}


/**********Gauge Chart**********/
#canvas {
  display: block;
  width: 150px;
  margin: 30px auto;
}

/**********Accordion Styling**********/

.accordion-group {
  border: 1px solid #222;
}
.accordion-heading {
  background-color: #5a5a5a;
  *background-color: #5a5a5a;
    background-repeat: repeat-x;
  *-webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
    zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  background-image: linear-gradient(to bottom, #707070, #707070);*
}

/**********Link Styling**********/
a {
  color: #b2c831;
  text-decoration: none;
}

a:hover {
  color: #dff948;
  text-decoration: none;
}

.bark-link {
  color: #b2c831;
  text-decoration: underline;
}

.bark-link:hover {
  color: #dff948;
  text-decoration: none;
}

/**navigation bar**/
.docs-search{
  margin:10px 0;
  border-radius:20px;
  background:#626262;
  vertical-align:middle;
  padding:4px 0 4px 10px;
}

.docs-search input{
  background:#626262;
  border:0
}

.docs-search input:focus{
  outline:none;
  color:#fff;
}

.navbar-search {
    position: relative;
    float: left;
    margin-top: 14px;
    margin-bottom: 0;
}

.navbar-search .search-query {
    padding: 4px 9px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1;
    color: #ffffff;
    background-color: #848484;
    border: 1px solid #151515;
    border-radius:14px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.15);
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

.navbar-search .search-query:disabled{
    background-color: #626262;
    cursor: not-allowed;
}

.navbar-search .search-query:-moz-placeholder {
    color: #cccccc;
}
.navbar-search .search-query::-webkit-input-placeholder {
    color: #cccccc;
}
.navbar-search .search-query:focus,.navbar-search .search-query.focused {
    padding: 5px 10px;
    color: #333333;
    text-shadow: 0 1px 0 #ffffff;
    background-color: #ffffff;
    border: 0;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    outline: 0;
}



/**********FooterWrap Section**********/
@media (min-width: 992px) {
    #footerwrap {
      width: 75%;
    }
}

@media (max-width: 991px) { 
    #footerwrap {
      width: 100%
    }
}

#footerwrap {
    padding-left: 30px;
    height: 90px;
    background:#262626;
    padding-top:10px;
    padding-bottom: 10px;
    border-top-style: solid;
    border-top-width:8px;
    border-top-color:#1d1d1d;
    /*overflow-y:auto;*/
    z-index:200;

}

#footerwrap p {
  color:white;
  font-size:12px;
  margin:0;
}

/*#footerwrap>.container-fluid{
  position: absolute;
  width: 100%;
  height: 100%;
  transform:translateY(100%);
  animation: scrolling 2s linear infinite;
}

@keyframes scrolling {
 0%   {
 transform: translateY(0%);
 }
 100% {
 transform: translateY(-100%);
 }
}*/


/***********FULLCALENDAR STYLE***********/

#external-events {
  padding: 0 10px;
  border: 1px solid #8b8b8a;
    background-color: #8b8b8a;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  text-align: left;
  }

#external-events h4 {
  font-size: 16px;
  margin-top: 0;
  padding-top: 1em;
  }

.external-event { /* try to mimick the look of a real event */
  margin: 10px 0;
  padding: 2px 4px;
  background: #b2c831;
  color: #fff;
  font-size: .85em;
  cursor: pointer;
  }

#external-events p {
  margin: 1.5em 0;
  font-size: 11px;
  color: #b2c831;
  }

#external-events p input {
  margin: 0;
  vertical-align: middle;
  }

#calendar {
  width:100%;
  }

.symbol.required:before {
    content: "*";
    display: inline;
    color: #E6674A;
}

.has-success .symbol:before {
    content: "\f00c";
    display: inline;
    font-family: FontAwesome;
    color: #468847
}

.has-error .symbol:before {
    content: "\f00d";
    display: inline;
    font-family: FontAwesome;
    color: #C82E29
}

.text-small {
    font-size: 12px!important
}

.has-error .error {
    color: #a94442;
}

/**********Media Styles**********/

@media (max-width: 360px){
/*Calendar Adsjustments*/
.fc-header {margin-top:15px;}
.fc-header-title h2{font-size:10px; }
.fc-header-right {display:none}
}
/* portrait tablet */
@media (min-width: 767px) and (max-width: 768px) {
  .info-aapl ul {
      margin-left:10px;
      float:left;
}

#load {
  margin-left:5px;
  margin-right:10px;
}

#space {
  margin-left:5px;
  margin-right:10px;
}

}

/* Landscape iphone 5 and samsung galaxy */
@media (min-width: 560px) and (max-width: 685px) {
  .info-aapl ul {
      margin-left:40%;
  }

}

@media (min-width: 1024px) {
  .modal-xg {
    width: 1024px;
  }
}

.form-control {
  color: #000000;
}

tbody {
  word-break:break-all;
}


/*style of job*/
.page{
  cursor: pointer;
  float: left;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  color: #fff;
  text-decoration: underline;
}

.page-active{
  background-color: #2a9fd6;
  border-color: transparent;
  cursor: default;
}