docs/theme/docker/static/css/main.less

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@import "variables.less";

@red: crimson;
@lightblue: #118;
@lightred: #e11;
@darkblue: #292E33;

@borderGray: #888;


.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.orange {
  background-color: orange;
}
.gray {
  background-color: grey;
}


body {
  padding-top: 58px;
  font-family: Arial, Helvetica, sans-serif;
}


h1, h2, h3, h4 {
  font-family: Arial, Helvetica, sans-serif;
// font-weight: bold;
  font-weight: 900;
}

/* ===================
	Top navigation
===================== */

.navbar {
  z-index: 999;
  .nav {
  // float: right;

    li a{
      padding: 22px 15px 22px;
    }
  }
  background-color: white;
}

.navbar-dotcloud .container {
  border-bottom: 2px @black solid;
}

.inline-icon {
  margin-bottom: 6px;
}

/*
* Responsive YouTube, Vimeo, Embed, and HTML5 Videos with CSS
* http://www.jonsuh.com
*
* Copyright (c) 2012 Jonathan Suh
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.js-video.vimeo {
  padding-top: 0;
}
.js-video.widescreen {
  padding-bottom: 57.25%;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

/* Responsive */
@media (max-width: 767px) {
  .js-video {
    padding-top: 0;
  }
}

/* button style from http://charliepark.org/bootstrap_buttons/ */
.btn-custom {
  background-color: hsl(0, 0%, 16%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#515151", endColorstr="#282828");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#515151), to(#282828));
  background-image: -moz-linear-gradient(top, #515151, #282828);
  background-image: -ms-linear-gradient(top, #515151, #282828);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #515151), color-stop(100%, #282828));
  background-image: -webkit-linear-gradient(top, #515151, #282828);
  background-image: -o-linear-gradient(top, #515151, #282828);
  background-image: linear-gradient(#515151, #282828);
  border-color: #282828 #282828 hsl(0, 0%, 12%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.26);
  -webkit-font-smoothing: antialiased;
}



/* ===================
	Page title bar
===================== */

h1.pageheader {
  color: @white;
  font-size: 20px;
  font-family: "Arial Black", Tahoma, sans-serif;
  margin: 8px;
  margin-left: 22px;
}

/* ===================
	Hero unit
===================== */

section.header {
  margin-top:0;
}

.hero-unit {
  background-color: @darkblue;

  h5 {
    color: @white;
  }
  .subtitle {

  }

}

/* ===================
	Main content layout
===================== */

.contentblock {
  margin-top: 20px;
  border-width: 3px;
// border-color: #E00;
//	border-style:solid;
//	border-color: @borderGray;
// box-sizing: border-box;
  background-color: @grayLighter;
  box-sizing: content-box;
  padding: 20px;
}

.section img {
  margin: 15px 15px 15px 0;
  border: 2px solid gray;
}

.admonition {
  padding: 10px;
  border: 1px solid grey;

  margin-bottom: 10px;
  margin-top: 10px;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.admonition .admonition-title {
  font-weight: bold;
}

.admonition.note {
  background-color: rgb(241, 235, 186);
}

.admonition.warning {
  background-color: rgb(238, 217, 175);
}

.admonition.danger {
  background-color: rgb(233, 188, 171);
}

/* ===================
	left navigation
===================== */

.dotcloudsidebar {
// background-color: #ee3;
// border: 1px red dotted;
  float: left;
  height: 100%;
  top: 0px;
  bottom: 0px;
  position: relative;
// margin: 0px;
  min-height: 100%;
  margin-top: 78px;
  margin-bottom: 22px;

}

  .sidebar {
  //  font-family: "Maven Pro";
    font-weight: normal;
  //  margin-top: 38px;
    float: left;
  //  width: 220px;
  /*  min-height: 475px;*/
  //  margin-bottom: 28px;
  //  padding-bottom: 120px;
    background: #ececec;
  /*  border-left: 1px solid #bbbbbb;*/
  /*  border-right: 1px solid #cccccc;*/
    position: relative;



  ul {
    padding: 0px;
    li {
      font-size: 14px;
    //      list-style: none;
      list-style-type: none;
      list-style-position: outside;
      list-style-image: none;
      margin-left: -25px;
      padding: 0px;

      a {
        display: block;
        color: #443331;
        outline: 1px solid #dddddd;
        padding: 12px 12px 10px 12px;
        margin-top: 1px;
        background-color: #d2d2d2;
      }

      .toctree-l1, .toctree-l2 {

      }

      .toctree-l1 {
        font-size: larger;
        a {
          background-color: rgb(223, 223, 223);
        }
        .current {
          font-weight: bold;
        }
      //          margin-left: -25px;
      }
      .toctree-l2 {
        a {
          padding-left: 18px;
          background-color: rgb(255, 255, 255);
        }
        .current {
          font-weight: bold;
        }

      }
      .toctree-l3 {
        font-size: smaller;
        a {
          padding-left: 36px;
          background-color: rgb(255, 255, 255);
        }
        .current {
          font-weight: bold;
        }

      }


    }
  }
}

.brand img {
  height: 38px;
  margin-left: -6px;
}

.border-box {
  box-sizing: border-box;
  padding: 20px;
  background-color: @lightblue;
  color: white;
}


.titlebar {
  background-color: @black;
  margin-top: 0px;
  margin-bottom: 20px;
  min-height: 40px;
  color: white;
//	box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: 8px;
}


.footer {
  border-top: 2px solid black;

//  background-color: #d2d2d2;
  margin-top: 15px;
  margin-bottom: 20px;

  min-height: 40px;

  padding-left: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}



/* This is the default */
.span6.with-padding {
  background-color: @lightblue;
  height: 200px;
  color: white;
  padding: 10px;
}

#global {
  min-height: 500px;
}



/* =======================
   Row size
======================= */

.row1 {
  background-color: @grayLight;
  height: 100%;
  position: relative;
}


/* =======================
   Social footer
======================= */

.social .twitter, .social .github, .social .googleplus {
  background: url("../img/footer-links.png") no-repeat transparent;
  display: inline-block;
  height: 35px;
  overflow: hidden;
  text-indent: 9999px;
  width: 35px;
  margin-right: 10px;
}

.social .twitter {
  background-position: 0px 2px;
}

.social .github {
  background-position: -59px 2px;
}


#fork-us {
  /*font-family: 'Maven Pro';*/
  /*font-weight: bold;*/
  font-size: 12px;
  /*text-transform: uppercase;*/
  display: block;
  padding: 0px 1em;
  height: 28px;
  line-height: 28px;
  background-color: #43484c;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF6E56', endColorstr='#FFED4F35');
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #747474), color-stop(100%, #43484c));
  background-image: -webkit-linear-gradient(top, #747474 0%, #43484c 100%);
  background-image: -moz-linear-gradient(top, #747474 0%, #43484c 100%);
  background-image: -o-linear-gradient(top, #747474 0%, #43484c 100%);
  background-image: linear-gradient(top, #747474 0%, #43484c 100%);
  border: 1px solid #43484c;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
  -moz-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
  box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
  margin: 8px;

  a {
    color: #faf2ee;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px;
  }
}
/* =======================
   Media size overrides
======================= */

/* Large desktop */
@media (min-width: 1200px) {
  .span6.with-padding {
    background-color: @red;

    width: (@gridColumnWidth1200 * 6) + (@gridGutterWidth1200 * 5) - @gridGutterWidth1200;
    padding: @gridGutterWidth1200/2;
  }
}

/* Normal desktop */
@media (min-width: 980px) and (max-width: 1199px) {
  .span6.with-padding {
    background-color: @lightred;

    width: (@gridColumnWidth * 6) + (@gridGutterWidth * 5) - @gridGutterWidth;
    padding: @gridGutterWidth/2;
  }

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  body {
    padding-top: 0px;
  }


  .span6.with-padding {
    background-color: @darkblue;

    width: (@gridColumnWidth768 * 6) + (@gridGutterWidth768 * 5) - @gridGutterWidth768;
    padding: @gridGutterWidth768/2;

  }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  body {
    padding-top: 0px;
  }
  #global {
  /* TODO: Fix this to be relative to the navigation size */
//    padding-top: 600px;
  }
  #fork-us {
    display: none;
  }
}


/* Landscape phones and down */
@media (max-width: 480px) {
  #nav-gettingstarted {
    display: none;
  }
}

/* Misc fixes */
table th {
  text-align: left;
}

h1:hover > a.headerlink,
h2:hover > a.headerlink,
h3:hover > a.headerlink,
h4:hover > a.headerlink,
h5:hover > a.headerlink,
h6:hover > a.headerlink,
dt:hover > a.headerlink {
    visibility: visible;
}

.headerlink {
  font-size: smaller;
  color: #666;
  font-weight: bold;
  float: right;
  visibility: hidden;
}