themes/bootnova/assets/less/styles.less

body {
  background: @grayLighter url('@{image-path}bg.png') repeat-x scroll;
}

.container{
	max-width:980px;
}

#main-navbar.navbar{
	margin-bottom:0;
	
}
/* Pre-Header */
#logo{
  margin-top:20px;
}
#promotion{
  margin-left:15px;
}

/* Other Eclipse Sites */
#other-eclipse,
#logo{
  margin-top:15px;
  margin-bottom:10px;
}

#other-eclipse{
  background:transparent url('@{image-path}siteSelector.png') right no-repeat;
  min-height: 78px;
  #other-eclipse-sites{
    margin:0;
    text-align:right;
    padding-top:35px;
    li{
      text-align:center;
      margin:0;
      padding:0 0 0 15px;
      a {
        position:relative;
        width:32px;
        height:32px;
        font-size:12px;
        text-decoration:none;
        color:@white;
        span {
          display:none; 
          white-space: nowrap;  
        }
      }
      a:hover span {
        display:block;
        position:absolute;
        z-index:10;
        padding:5px;
        top:40px;
        left:-30px;
        color:@grayLighter;
        background:@blackgreylighter;
        border:1px solid @grey;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;    
      }
    }
  }
}


/* Header */
#header {
  box-shadow:0 -3px 3px 2px rgba(215,215,215,0.5);
  border-radius:8px 8px 0 0;
  -moz-border-radius:8px 8px 0 0;
  -webkit-border-radius:8px 8px 0 0;
  -webkit-box-shadow:0 -3px 3px 2px rgba(215,215,215,0.5);
    background: #f9f8fd;
  background-image: linear-gradient(bottom, rgb(218, 218, 218) 17%,
    rgb(242, 242, 242) 59%, rgb(250, 250, 250) 80%);
  background-image: -o-linear-gradient(bottom, rgb(218, 218, 218) 17%,
    rgb(242, 242, 242) 59%, rgb(250, 250, 250) 80%);
  background-image: -moz-linear-gradient(bottom, rgb(218, 218, 218) 17%,
    rgb(242, 242, 242) 59%, rgb(250, 250, 250) 80%);
  background-image: -webkit-linear-gradient(bottom, rgb(218, 218, 218) 17%,
    rgb(242, 242, 242) 59%, rgb(250, 250, 250) 80%);
  background-image: -ms-linear-gradient(bottom, rgb(218, 218, 218) 17%,
    rgb(242, 242, 242) 59%, rgb(250, 250, 250) 80%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.17, rgb(218
    , 218, 218)), color-stop(0.59, rgb(242, 242, 242)),
    color-stop(0.8, rgb(250, 250, 250)));
  border-bottom: 1px solid #939393;
}

/* Menu */
#menu ul {
	padding-top:18px;
  li {
    font-size:13px;
    cursor:pointer;
    text-transform:capitalize;
    color:#0D3656;
    padding:0 7px;
    a{
      font-weight:400;
      color:#0D3656;
      text-align:center;
    }
  }
}

#search form{
  margin-top:12px;
  margin-bottom:12px;
  text-align: right;
  #search-box{
    width:200px;
    height: 30px;
  }
  #search-button{
    background:@grayLighter !important;
  }
}

/* Content */
.main-content-area{
  background: @white; 
  padding-top:20px;
}

.main-content-area.visible-leftnavbg{
  #maincontent{
    .make-sm-column(8);
    .make-md-column(9);
  }
}
  
#leftcol{
	.make-sm-column(4);
	.make-md-column(3);
	/* Left Nav */
  #leftnav {
    padding:0; 
    li.separator {
      border-top: 1px dotted @purpleLight;
      list-style-image: none;
      list-style:none;
      margin-left: 0;
      margin-top: 5px;
      padding: 5px 0;
      padding-top: 5px;
      img{
        vertical-align: sub;
      }
      a {
        color: @blackgreylighter;
        font-size: 12px;
      }
    }
    li {
      list-style-image:
      url('@{image-path}leftNav.gif');
      margin-left: 30px;
      padding: 0px;
      a {
        font-size: 12px;
        line-height: 12px;
      }
      li.about {
        list-style-image: none;
        margin-left: 0;
        padding-bottom: 10px;
        a {
          color: @blackgreylighter;
          font-size: 12px;
        }
      }
    }
  }
}

#rightcolumn{
	.make-md-column(4);
}
#maincontent,
#fullcolumn{
  .make-md-column(12);
}
#midcolumn{
	.make-md-column(8);
}




/* Side item */
.sideitem {
  border-bottom: 1px dotted @purpleLight;
  margin-bottom: 10px;
  padding-top:10px;
  h6 {
    background-color: #e8e7dd;
    border-bottom: 2px solid @white;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    padding: 8px 5px;
  }
  ul{
    padding:10px 0 0 25px;
    li {
      padding: 5px 10px 5px 0;
    }
  }
  
  
}

.sideitem 
.sideitem ul,
.sideitem ol,
.sideitem form,
.sideitem p {
  font-size: 12px;
  padding: 5px;
}


 

/* Footer */
footer {
  background:#b5b5ac;
  padding-top:15px;
  border-radius:0 0 8px 8px;
  -moz-border-radius:0 0 8px 8px;
  -webkit-border-radius:0 0 8px 8px;
  margin-bottom:15px;
  a:link,
  a:visited{
    color:@white;
    font-size:12px;
  }
  a:hover,
  a:active{
     color:@grey;
     text-decoration: none;
  }
  ul { 
    font-size:11px;
    padding:0px;
  }
  #copyright {
    padding-bottom:0;
    margin-bottom:15px;
    clear:none;
    float:right;
    color:#222;
    font-size:12px;
    font-weight:bold;
  }
}


/* Message box */
.message-box {  
  margin: 10px 0px;
  padding: 15px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
  color: @blackgreylighter;
  font-size: 14px;
}
.message-box.error{
  background-color: #FFBABA;
  border: 1px solid #D8000C;
  background-image: url('@{image-path}message-24-error.png');
}

/* DEPRECATED THEME */
.deprecated{
	.message-box-container {
    padding: 10px 10px 10px 10px;
  }
	.main-content-area{
    padding-top: 0;
  }
  #maincontent,
  #fullcolumn,
  .leftContent {
    background: url("@{image-path}bg-deprecated.gif") center 75px no-repeat;
  }
}

@media (max-width: @screen-xs-max) { 
    body{
       margin-top:40px;
    }
}

@media (min-width: @screen-sm) {
  .main-content-area.visible-leftnavbg{
    background:@white url("@{image-path}nav-normal-245.gif") repeat-y;
  }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) {
  .main-content-area.visible-leftnavbg{
    #maincontent{
      .make-md-column(9);
    }
  }
  #rightcolumn{
      padding-right:0;
      padding-left:@grid-gutter-width/2;
  }
  #fullcolumn{
    padding-left:0px;
  }
}