//some page-content variables
@content-bg: #FFF;
@content-header-border: #E2E2E2;
@content-header-color: #2679B5;
@content-header-small-color: #8089A0;


html {
  min-height: 100%;
  position: relative;
}

body {
  background-color: @body-background;
  min-height: 100%;
  padding-bottom: 0;

  font-family: 'Open Sans';
  font-size: @baseFontSize;
  color: @text-color;
  
  line-height: 1.5;
}


.main-container {
	//this is the white page background, used especially when inside ".container"
	//it will expand all the way down to fill all the page space
	&:before {
		display: block;
		content: "";
		position: absolute;
		z-index: -2;
		
		width: 100%;
		max-width: inherit;
		bottom: 0;
		top: 0;
		
		background-color: #FFF;
	}

	&.container {
		&, .rtl & {padding-left: 0; padding-right: 0;}
		
		&:before {
			@media (min-width: @screen-sm-min) {
				.box-shadow(~"0 0 0 1px rgba(0,0,0,0.1)");
				width: inherit;
			}
		}
	}
}

.main-content {
	margin-left: @sidebar-width;
	min-height: 100%;
	padding: 0;
}

.page-content {
	background-color: @content-bg;
	position: relative;
	margin: 0;
	padding: @page-content-padding-top 20px 24px;
}

.page-header {
	margin:0 0 12px;
	border-bottom:1px dotted @content-header-border;
	
	padding-bottom: 16px;
    padding-top: 7px;

	h1 {
	  padding: 0;
	  margin: 0 8px;
	  font-size: @font-size-content-header;
	  font-weight: lighter;
	  color: @content-header-color;

	  small {
		margin: 0 6px;
		font-size: @font-size-content-header-small;
		font-weight: normal;
		color: @content-header-small-color;
	  }//small
	}//h1
}