@import "variables.less";
@import "offcanvas-website.less";
@import "navbar.less";

body {
	font-size: 16px;
	line-height: 1.65em;
 color: #454e57;
 // position: relative;
 -webkit-font-smoothing: antialiased;
}

.container {
	max-width: 870px;
}

img {
	max-width: 100%;
}

.splash{
 // background-color: #383851;
 // background-color: @text-color;
 // background-image: url('/assets/img/background.png');
 // color: #ffffff;
 padding-top: 128px;
 margin-top: -92px;
 border-bottom: 1px solid @border-color;

 .jumbotron{
  background-color: transparent;
	 padding: 40px 0 60px 0;
	 text-align: center;

   h1 {
    font-size: 48px;
    font-weight: 400;
    opacity: 0.9;
	color: @text-dark;
   }

   p {
    font-size: 24px;
    font-color: @text-muted !important;
    letter-spacing: 0px;
    opacity: 0.7;
    margin-bottom: 90px;
    font-weight: 300;
    line-height: 1.4em;
   }
 }
 .section{
   padding: 30px 0 0 0;
 }
}


.page-container{
  padding-top:38px;
  margin:0 auto;
  max-width:870px;

  .webpage-content{
    ol > li, ul > li {
     margin: 13px auto;
    }

    ol > li li, ul > li li {
     margin: 4px auto;
    }

    ol li ol {
     list-style-type: disc;
    }
    ul, ol {
     margin-bottom:32px;
    }
  }
}

@media (min-width: 768px) {
    .page-container .page-content {
	     width:83%;
	     margin:0 auto;
    }

}

#page-index {
 padding-top:0;
 width:100%;
 margin:0;

 .page-content {
  width:100%;
  margin:0;
 }
}

body[data-path="index"] {
    .navbar .toggle-sidebar i {
   		color: #fff;
    }
}

code{
  color: #e66a12;
  background: #fff6df;
}

pre {
  background:#fafbfc;
  border: 1px solid #e1e9f0;
  border-radius:2px;
}

.hljs {
  background:transparent;
  border:none;
  padding:1.2em 1.5em 1.5em;
  color:#454e57;
}

.hljs-keyword, .hljs-tag, .css .hljs-class, .css .hljs-id, .lisp .hljs-title, .nginx .hljs-title, .hljs-request, .hljs-status, .clojure .hljs-attribute{
    color:#e66a12;
  }
  .diff .hljs-deletion, .hljs-string, .hljs-tag .hljs-value, .hljs-preprocessor, .hljs-pragma, .hljs-built_in, .hljs-javadoc, .smalltalk .hljs-class, .smalltalk .hljs-localvars, .smalltalk .hljs-array, .css .hljs-rules .hljs-value, .hljs-attr_selector, .hljs-pseudo, .apache .hljs-cbracket, .tex .hljs-formula, .coffeescript .hljs-attribute{
    color:#dd4a68;
  }
  .hljs-number, .hljs-date, .hljs-regexp, .hljs-literal, .hljs-hexcolor, .smalltalk .hljs-symbol, .smalltalk .hljs-char, .go .hljs-constant, .hljs-change, .lasso .hljs-variable, .makefile .hljs-variable, .asciidoc .hljs-bullet, .markdown .hljs-bullet, .asciidoc .hljs-link_url, .markdown .hljs-link_url{
    color:#7575ff;
  }
  .hljs-shebang, .diff .hljs-addition, .hljs-comment, .hljs-annotation, .hljs-template_comment, .hljs-pi, .hljs-doctype{
    color:#6a906a;
  }
  .dos .hljs-keyword, .hljs-decorator, .hljs-title, .hljs-type, .diff .hljs-header, .ruby .hljs-class .hljs-parent, .apache .hljs-tag, .nginx .hljs-built_in, .tex .hljs-command, .hljs-prompt {
   color:#4f4fa4;
  }

.navbar {
	//background-color: @navbar-bg !important;
	//background-color: @text-color !important;
	// border-bottom: 3px solid @border-color !important;
 // position: absolute;
 // top:0;
 // right: 0;
 // left: 0;
 // max-width:870px;
 // margin:0 auto;

 max-width: 870px;
 margin-left: auto;
 margin-right: auto;
}
.navbar a {
	font-size: 16px;
	font-weight: normal;
	//color: #fff !important;
 &.navbar-brand{
  font-weight: bold;
 }

 &.toggle-sidebar {
	 margin-top: 8px;
 }
}

.sidebar a {
	font-size: 14px;
	padding-top: 14px !important;
	padding-bottom: 14px !important;
}

.breadcrumb {
  line-height: 1em;
  color: @text-muted;
  background-color: transparent;
  margin-bottom: 32px;
  padding: 0px;
  padding-left:20px;
  background:url('/assets/img/up.png') 0% 30% no-repeat;

  .icon {
    display:none;
  }
}
.breadcrumb a,
.breadcrumb a:hover,
.breadcrumb a:focus,
.breadcrumb a:visited {
  color:#7575ff;
  font-size: 16px;
}

.hero-and-content {
	a, a:hover, a:focus, a:visited {
		color: @brand-primary;
	}

	a.btn {
		color: inherit;
	}
}

a.btn-primary& {
	color: #fff;
	&:hover, &:focus, &:visited {
		color: #fff;
	}
}

.btn-next-wrapper {
  margin-top: 32px;
  text-align: right;
}

h2 {
 margin-top:48px;
	font-size: 24px;
}

h3, h4 {
 margin-top:48px;
}

p {
 margin-bottom:16px;
}

.hero-and-content > p {
 max-width:723px;
 margin:0 auto;
}

.navbar {
	background-color: transparent;
	border: none;
 padding: 15px 0px;
	border-radius: 0px;
 border-bottom: 1px solid @border-color;
}

.section {
	padding: 64px 0 0 0;
}

.dev-header {
	margin-bottom: 30px;
}

.docs-footer {
	padding: 30px 0px 60px 0px;
	border-top: 1px solid @border-color;
 max-width:870px;
 margin:0 auto;
 margin-top: 80px;
 font-size: 14px;

 h3 {
  margin-top:24px;
  font-size:16px;
 }
 img.frappe-bird {
  width:40px;
  height:40px;
  background:#fff;
  margin-bottom:10px;
  padding:5px;
 }
	a {
		color: @text-muted;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}
 .built-with-frappe{
  margin-top:-50px;
 }
}

// fake frames
.browser-image {
	min-height: 200px;
	border: 1px solid #d1d8dd;
	border-bottom: 0px;
}

.fake-browser-frame {
	position: relative;
	margin: 24px auto 0px;
	box-shadow: 0px -6px 100px 1px rgba(0, 0, 0, 0.1), 0px -6px 50px 1px rgba(0, 0, 0, 0.4);
}

.fake-browser-frame::before {
	content: "";
	height: 24px;
	position: absolute;
	top: -24px;
	left: 0px;
	right: 0px;
	border: 1px solid #d1d8dd;
	background: #f5f7fa;
	border-bottom: none;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.fake-browser-frame::after {
	content: '\f111 \00a0\00a0 \f111 \00a0\00a0 \f111';
	position: absolute;
	color: #d1d8dd;
	top: -15px;
	left: 8px;


	/* octicon */
    font: normal normal;
	   font-size: 8px;
    font-family: 'FontAwesome';
    line-height: 1;
    display: inline-block;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.fake-iphone-frame {
	position: relative;
	padding: 40px 8px;
	border: 1px solid #d1d8dd;
	border-radius: 15px;
}

.fake-ipad-frame {
	position: relative;
	padding: 8px 40px;
	border: 1px solid #d1d8dd;
	border-radius: 15px;
}

.screenshot {
	border: 1px solid @border-color;
	box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
	margin: 8px 0px;
	max-width: 100%;
}

hr {
	margin: 48px 0px 30px;
}

.edit {
  // padding-left: 20px;
  // background:url('/assets/img/smiley.png') 0% 50% no-repeat;
  color: #8d99a6;
  // display: block;
}
a.edit, a.edit:hover, a.edit:focus, a.edit:visited, .edit-container .icon {
 color:#8d99a6;
}

.btn-next {
 margin-top: 30px;
 margin-bottom: 0px;
}
.btn-next:after {
 content:" \2192";
}

#current td {
 font-weight:bold;
}
#current td code {
 font-weight:normal;
 background:transparent;
 font-family:"Helvetica Neue", Helvetica, Arial, "Open Sans", sans-serif;
 color:#454e57;
 font-size:16px;
}

// @media (max-width: 767px) {
//   .offcanvas-container,
//   .offcanvas,
//   .offcanvas-main-section {
//     position: relative;
//    width:50%;
//   }
// }

.hero-and-content [data-html-block="hero"] {
	overflow-y: hidden;
}

.page-content-wrapper > .row {
	.col-sm-8 {
		width: 100%;
	}
	.col-sm-4 {
		display: none;
	}
}