body {
  padding-top: 50px;
  background-color: #fafafa ;
}

.container {
  max-width:1079px;
}

.page-bg {
  background-color: #fff ;  
  border: 1px solid;
  border-color: #ddd;
  min-height:1080px;
}

/* TOP NAVBAR */
.navbar-inverse {
    background-color: #222;
}

.navbar-inverse .navbar-nav > li > a {
    color:#ddd;
}

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 8px; /* firefox bug fix */
  width: auto;
}

var {  /* variable tag from index_vars.js */
   font-style: normal;
    font-weight: 300; 
}

/* PAGE TEXT */

p {font-size: 15px;}

h1 {position:relative;
    top:-10px;
    left:0px;
    color: #555;
    font-size: 36px;
    font-family: Roboto,Arial; 
    font-style: normal;
    font-weight: 300;   
}

h2 {
    color: #555;
    font-size: 30px;
    font-family: Roboto,Arial; 
    font-weight: 300;
}

.header-title {
    z-index:100;
    position:absolute; 
    font-size: 3.2em;
    font-family: Roboto,Arial;  
    color: #555; 
    font-weight: 300; 
    top: 15%; 
    left: 205px;
}

.status {position:relative;
    width:260px;
    right:10px;
    top:15px;
    margin-left:-10px;
    font-size: 12px;
    display:none;
}

h4.side-menu-title { /* right column titles */
    position:relative;
    top:5px;
    left:5px;
}

ul.side-menu {  /* folder and links list */
    position:relative;
    top: 0px;
    left:-20px;
    font-size: 15px;
    list-style-type: circle;
    color: #777;
}

ul.side-pages { /* custom page list */
    position:relative;
    top:-10px;
    left:-20px;
    font-size: 15px;
    list-style-type: circle;
    color: #777;
}

ul.side-links { /* custom page list */
    position:relative;
    top:0px;
    left:-20px;
    font-size: 15px;
    list-style-type: circle;
    color: #777;
}

.button-top {
    color: #333;
    background-color: #eee;
    border: 1px;
    border-color: #888;
    font-size: 14px;
    padding: 4 3px;
    margin-bottom:20px;
}

.text-position {
  padding: 0px 0px;
  text-align: left;
  max-width:95%;
}

.fa-text { /* font awesome symbols with text */
  font-family: Arial;
  font-size: 16px;
}

/* CUSTOM BUTTON - USE CLASS BTN FOR LARGER BUTTONS */

.button {     /* https://catalin.red/just-another-awesome-css3-buttons/ */   
    display: inline-block;
    white-space: nowrap;
    background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background-image: -webkit-linear-gradient(top, #eee, #ccc);
    background-image: -moz-linear-gradient(top, #f3f3f3, #ddd);
    background-image: -ms-linear-gradient(top, #eee, #ccc);
    background-image: -o-linear-gradient(top, #eee, #ccc);
     background-image: linear-gradient(top, #f3f3f3, #ddd);
            
    border: 1px solid #777;
    padding-top: 0px;
    padding-right: 8px;
    padding-bottom: 0px;
    padding-left: 8px;
    margin: 0.2em;
    font: Roboto, Arial, Helvetica;
    font-weight:400;
    text-decoration: none;
    color: #222;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
    border-radius: 2px;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}

.button:hover {
    background-color: #eee;        
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
    background-image: -moz-linear-gradient(top, #fafafa, #ddd);
    background-image: -ms-linear-gradient(top, #fafafa, #ddd);
    background-image: -o-linear-gradient(top, #fafafa, #ddd);
    background-image: linear-gradient(top, #fafafa, #ddd); 
    text-decoration:none;    
}

/* LAYOUTS */

.portfolio-item {
    margin-bottom: 20px;
}

/* RESPONSIVE 768px WIDTH */

@media (max-width: 768px) {
.status { /* status text block for page varaibles */
    display:none;
}

.sidebar-nav { /* status text block for page varaibles */
    display:none;
}


.header-title {
    z-index:100;
    position:absolute; 
    font-size: 2.2em;
    font-family: Roboto,Arial;  
    color: #555; 
    font-weight: 300; 
    top: 15%; 
    left: 105px;
}
}