style.less

---
---

@import "/css/bootstrap/bootstrap.less";
@brand-primary: #DD2D2D;
@line-height-base: 1.6;
@navbar-height: 60px;
@navbar-margin-bottom: 30px;
@code-color: #586E75;
@pre-color: #586E75;
@well-bg: #f8f8f8;
@code-bg: #f8f8f8;
@pre-bg: #f8f8f8;

@import "/css/font-awesome/font-awesome.less";
@fa-font-path: "font";

@import "/css/solarized.less";

h1, .h1 { font-size: floor(@font-size-base * 2.60); } /* ~36px */
h2, .h2 { font-size: floor(@font-size-base * 2.15); } /* ~30px */
h3, .h3 { font-size: ceil(@font-size-base * 1.70); }  /* ~24px */
h4, .h4 { font-size: ceil(@font-size-base * 1.25); }  /* ~18px */
h5, .h5 { font-size:  @font-size-base; }
h6, .h6 { font-size: ceil(@font-size-base * 0.85); }  /* ~12px */

/* typekit */

.wf-loading {
    visibility: hidden;
}
.wf-active {
	visibility: visible;
}

/* general */

.container {
  padding-left: 25px;
  padding-right: 25px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 300;
	/* Museo */	
}

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

.text-center {
     text-align: center;
}

/* logo */

.logo {
	width: 60px;
	height: 60px;
	padding: 5px;
}

.biglogo {
	width: 180px;
	height: 180px;
	padding: 5px;
}

.logobox {
	height: 180px;
	display: table-cell; 
	vertical-align: middle;
}

/* navbar */

.navbar-brand { 
	font-size: 30px; 
	font-weight: 100;
	/* Museo */	
}
.navbar-nav { 
	font-size: 30px; 
	font-weight: 100;
	/* Museo */	
}
.navbar-text {
	font-size: 15px;
	font-weight: 300;	
	/* Museo */		
}

/* headings */

.bigtitle {
	font-size: 60px; 
	line-height: 65px;	
	font-weight: 100;
	/* Museo */	
}

.title {
	font-size: 45px; 
	line-height: 50px;	
	font-weight: 100;
	/* Museo */	
}

.bighead {
	font-size: 32px;
	font-weight: 300;
	line-height:36px;
	/* Museo */	
}

.head {
	font-size: 26px;
	font-weight: 300;
	line-height:30px;
	/* Museo */	
}

.smallhead {
	font-size: 19px;
	font-weight: 300;
	line-height: 23px;
	/* Museo */	
}

.note {
	font-size: 15px;
	font-weight: 300;
	line-height: 18px;
	/* Museo */	
}

.smallnote {
	font-size: 13px;
	font-weight: 300;
	line-height: 16px;
	/* Museo */	
}

.text-gray {
	color: @gray-light;
}

.text-dark-gray {
	color: @gray;
}

/* other */

body {
	font-weight: 300;
}

p {
	font-weight: 300;
}

.hugespacer {
	height: 50px;
}

.bigspacer {
	height: 20px;
}

.spacer {
	height: 10px;
}

.smallspacer {
	height: 5px;
}

a.off { 
	color: inherit; 
}

code.has-jax {
	background: inherit; 
	color: inherit;
}

pre {
    overflow-x: auto;
}

pre code {
    overflow-wrap: normal;
    white-space: pre;
}

table {
	.table;
	.table-striped;
}

img {
	.img-responsive;
}

img.offset {
	float: right; 
	margin: 12px 0px 10px 15px;
}

img.avatar {
	width: 20px;
}

.post img {
     float: none;
     margin-left: auto;
     margin-right: auto;
}

blockquote {
	.text-gray;
	p {
    font-size: (@font-size-base * 1.00);
    }
}

.breadcrumb {
	padding: 0px 0px;
	background-color: @body-bg;
	> li {
		&+li:before {  
			padding: 0px;
			content: "\00a0@{breadcrumb-separator}\00a0";
		}
		&+li:after {  
			padding: 0px;
		}
	}
}

.feedbox {
    height: 420px;
    overflow: hidden;    
	-webkit-mask-image: -webkit-gradient(linear, left 85%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));   
/*	-webkit-box-shadow: inset 0 -30px 10px -10px white; */
/*	   -moz-box-shadow: inset 0 -30px 10px -10px white; */
/*	        box-shadow: inset 0 -30px 10px -10px white; */
}

.postbox {
    min-height: 80px;
}

.paperbox {
    min-height: 140px;
}

.projectbox {
    min-height: 130px;
}

.memberbox {
    min-height: 200px;
}

.titlebox {
	min-width: 300px;    
}

.handlebox {
	height: 20px;
	display: table-cell; 
	vertical-align: middle;
}

.pad-right {
	padding-right: 10px;
}

.pad-left {
	padding-left: 10px;
}

#footer {
	height: 80px;
}

.footernav {
	.note;
	.text-dark-gray;
	text-align: center;
}

/* Next/Prev pager */
.pager a {
	position:fixed;
	top:50%;
	z-index:101;
	margin-top:-30px;
	padding: 10px 5px 30px 5px;
	height:20px;
	width:20px;
	display:block;
	overflow:hidden;
	transition:background-color .2s;
	-moz-transition:background-color .2s;
	-webkit-transition:background-color .2s;
	color: #fff;
}

body.exhibit .pager a {
	background-color:#fff;
	box-shadow:rgba(0,0,0,0.25) 0px 0px 10px;
}

.pager a.prev {
	left:0%;
	border-radius:0px 3px 3px 0px;
}

.pager a.next {
	right:0%;
	border-radius:3px 0px 0px 3px;
}

.pager a,
body.dark .pager a:hover { background-color: @gray-light; }

.pager a:hover,
body.dark .pager a,
body.exhibit .pager a:hover { background-color: @gray-dark; }

.pager .icon.prev,
body.dark .pager a:hover .icon.prev { background-position:-80px -90px; }
.pager .icon.next,
body.dark .pager a:hover .icon.next { background-position:-100px -90px; }
body.dark .pager .icon.prev,
.pager a:hover .icon.prev { background-position:-80px -70px; }
body.dark .pager .icon.next,
.pager a:hover .icon.next { background-position:-100px -70px; }

/* Infinite scroll */

.infinite-spinner {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #333;
  margin: 60px auto;
  
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}