//
// COMMON
// Custom common styles for the site
// --------------------------------------------------
// File Contents:
//
// CONTENTS
// TOPNAV
// MEGADROP
// FOOTER
// HEAD BANNERS
// SUBMENU BAR
// CONTENT SECTIONS
// PAGE & SECTION HEADERS
// SIMPLE LINE HEADERS
//
// CALLOUTS
// NEWS PORTLETS
// FILE PORTLETS
//
// CONTENT PAGES
//
// PANELS
//
// UTILITIES
//
// PAGES
// --------------------------------------------------------------------------------

@screen-sm-multiplier: .95;
@screen-xs-multiplier: .78;
@screen-xxs-multiplier: .5;


//
// CONTENTS
// --------------------------------------------
.contents {
	padding-top: @topnav-height;// So it doesn't overlap the fixed topnav area
}


//
// TOPNAV
// --------------------------------------------
// @topnav-height is NOT used too set the actual height of the topnav
// its a calculation of the expected outer height
// used to set the necessary spacing to the .contents and .header

.topnav {
	position: fixed;
	z-index: @zindex-navbar-fixed;
	top: 0;
	left: 0;
	right: 0;
    margin: 0;
	border-width: 0 0 1px;
    background-color: @topnav-bg;
	.box-shadow(~"0 0 10px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.05)");
	.transition(~"background-color .2s");
}
.topnav.open,
.topnav:hover {
    background-color: fade(@topnav-bg, 96%);
}
@media (max-width: @grid-float-breakpoint-max) {
	.topnav {
		position: absolute;
		background-color: fade(@topnav-bg, 96%);
	}
}

// Topnav inner
// Unique styles for topnav contents
// that are not applyed to megadrop.
// ------------------------------
.topnav-inner {
	font-size: @font-size-base - 2;
}


// Topnav header
// ------------------------------
.topnav .topnav-header {
	&:extend(.clearfix all);
}
@media (min-width: @grid-float-breakpoint) {
	.topnav .topnav-header {
		float: left;
	}
}

// Topnav brand
// ---------------
.topnav .brand {
	display: block;
	float: left;
	.topnav-vertical-align(@brand-image-height);
}
.topnav .brand img {
	height: @brand-image-height;
}

// Topnav toggle
// ---------------
.topnav-toggle {
	position: relative;
	float: right;
	margin-right: @topnav-padding-horizontal;
	padding: 9px;
	.topnav-vertical-align(34px);
	background-color: transparent;
	background-image: none; // Reset unusual Firefox-on-Android default style
	border: 1px solid transparent;
	border-radius: @border-radius-small;
}

.topnav-toggle:hover,
.topnav-toggle:focus {
	background-color: @topnav-toggle-hover-bg;
}
.topnav-toggle:focus {
	outline: 0;
}
@media (min-width: @grid-float-breakpoint) {
	.topnav-toggle {
		display: none;
	}
}

// Bars
.topnav-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
	background-color: @topnav-toggle-icon-bar-bg;
}
.topnav-toggle .icon-bar + .icon-bar {
	margin-top: 4px;
}

// Topnav collapse
// ------------------------------
.topnav-collapse {
	&:extend(.clearfix all);
	overflow-x: visible;
	border-color: @topnav-border;
	margin-right: -@topnav-padding-horizontal;
	margin-left:  -@topnav-padding-horizontal;
	// We dont need this since our navbar is static when collapsed (we can scroll the hole page)
	//-webkit-overflow-scrolling: touch;
    //max-height: @topnav-collapse-max-height;// In case there's too much content for the user's viewport.
}

.topnav-collapse.in { overflow-y: auto; }

@media (min-width: @grid-float-breakpoint) {
 	.topnav-collapse {
		width: auto;
		padding: 0;
		margin-right: 0;
		margin-left:  0;
	}
	.topnav-collapse.collapse {
		display: block !important;
		visibility: visible !important;
	}
	.topnav-collapse.in { overflow-y: visible; }
}

// Topnav-nav
// ---------------
@media (min-width: @grid-float-breakpoint) {
	.topnav-nav {
		float: right;
		margin: 0 -@topnav-padding-horizontal;
	}
	.topnav-nav > li {
		float: left;
	}
}
@media (max-width: @grid-float-breakpoint-max) {
	.topnav-nav {
		padding: 10px (@grid-gutter-width / 2);
	}
}

// Topnav-nav links
// ---------------
.topnav-nav > li > a {
	padding: 10px @topnav-padding-horizontal;
	line-height: @line-height-computed;
	color: @topnav-link-color;
	font-family: @headings-font-family;
	font-weight: @headings-font-weight;
	text-transform: uppercase;
	text-align: center;// for the collapsed nad
	.transition(~"color .2s, background-color .2s, border-color .2s");
}
.topnav-nav > li.user-link > a {
	padding-left: @topnav-padding-horizontal - 5;
	padding-right: @topnav-padding-horizontal - 5;
}
.topnav-nav > li.user-link:last-child > a {
	padding-right: @topnav-padding-horizontal;
}
@media (min-width: @grid-float-breakpoint) {
	.topnav-nav > li > a {
		padding-top:    @topnav-padding-vertical + @topnav-padding-push-bottom;
		padding-bottom: @topnav-padding-vertical - @topnav-padding-push-bottom;
	}
}
.topnav-nav > li > a:hover,
.topnav-nav > li > a:focus {
	color: @topnav-link-hover-color;
	background-color: @topnav-link-hover-bg;
}
// Give a border top to topnav active links on large screens
@media (min-width: @grid-float-breakpoint) {
	.topnav-nav > li > a:hover,
	.topnav-nav > li > a:focus,
	.topnav-nav > .open > a {
		.box-shadow(~"inset 0 2px 0 @{topnav-link-hover-border}");
	}
	.topnav-nav > .active > a,
	.topnav-nav > .active > a:hover,
	.topnav-nav > .active > a:focus {
		.box-shadow(~"inset 0 2px 0 @{topnav-link-active-border}");
	}
}
// Give a border left to topnav active links on small screens
// also tweek the bg color of these links
@media (max-width: @grid-float-breakpoint-max) {
	.topnav-nav > li > a {
		border-left: 2px solid transparent;	
	}
	.topnav-nav > li > a:hover,
	.topnav-nav > li > a:focus {
		background-color: @topnav-collapse-link-hover-bg;
		border-color: @brand-info;
	}
}
.topnav-nav > .active > a,
.topnav-nav > .active > a:hover,
.topnav-nav > .active > a:focus {
	color: @topnav-link-active-color;
	background-color: @topnav-link-active-bg;
}
.topnav-nav > .disabled > a,
.topnav-nav > .disabled > a:hover,
.topnav-nav > .disabled > a:focus {
	color: @topnav-link-disabled-color;
	background-color: @topnav-link-disabled-bg;
}


// Topnav-nav form
// ---------------
@media (max-width: @grid-float-breakpoint-max) {
	.topnav-nav > li > form {
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

// Topnav-nav dividers
// ---------------
@media (min-width: @grid-float-breakpoint) {
	.topnav-nav > li.divider {
		width: 1px;
		background-color: lighten(@topnav-link-color, 30%);
		height: @line-height-computed;
		margin-top:    @topnav-padding-vertical + @topnav-padding-push-bottom;
		margin-bottom: @topnav-padding-vertical - @topnav-padding-push-bottom;
		margin-left: floor(@topnav-padding-horizontal * .75);
		margin-right: floor(@topnav-padding-horizontal * .75);
	}
}
@media (max-width: @grid-float-breakpoint-max) {
	.topnav-nav > li.divider {
		height: 1px;
		background-color: lighten(@topnav-link-color, 30%);
		margin: 8px 0;
	}
}

// Dropdown Menus
// ---------------
.topnav-nav > li > .dropdown-menu {
	margin-top: 0;
	.border-top-radius(0);
	border-top-color: @topnav-border;
}

.topnav-nav > .open > a,
.topnav-nav > .open > a:hover,
.topnav-nav > .open > a:focus {
	color: @topnav-link-active-color;
	background-color: @topnav-link-active-bg;
}

@media (max-width: @grid-float-breakpoint-max) {
	// Dropdowns get custom display when collapsed
	.topnav-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		box-shadow: none;
	}
	.topnav-nav .open .dropdown-menu > li > a,
	.topnav-nav .open .dropdown-menu .dropdown-header {
		padding: 5px 15px 5px 25px;
	}
	.topnav-nav .open .dropdown-menu .dropdown-header {
		border-color: @topnav-border;
	}
	.topnav-nav .open .dropdown-menu .divider {
		background-color: @topnav-border;
	}
	.topnav-nav .open .dropdown-menu > li > a {
		line-height: @line-height-computed;
		color: @topnav-link-color;
	}
	.topnav-nav .open .dropdown-menu > li > a:hover,
	.topnav-nav .open .dropdown-menu > li > a:focus {
		background-image: none;
		color: @topnav-link-hover-color;
		background-color: @topnav-link-hover-bg;
	}
	.topnav-nav .open .dropdown-menu > .active > a,
	.topnav-nav .open .dropdown-menu > .active > a:hover,
	.topnav-nav .open .dropdown-menu > .active > a:focus {
		color: @topnav-link-active-color;
		background-color: @topnav-link-active-bg;
	}
	.topnav-nav .open .dropdown-menu > .disabled > a,
	.topnav-nav .open .dropdown-menu > .disabled > a:hover,
	.topnav-nav .open .dropdown-menu > .disabled > a:focus{
		color: @topnav-link-disabled-color;
		background-color: @topnav-link-disabled-bg;
	}
}

// Text in the topnav
// ---------------
.topnav-text {
	color: @topnav-color;
	.topnav-vertical-text-align(@line-height-computed);
}
@media (min-width: @grid-float-breakpoint) {
	.topnav-text {
		float: left;
		margin-left: @topnav-padding-horizontal;
		margin-right: @topnav-padding-horizontal;
	}
}

// Topnav text links
// ---------------
.topnav-link {
	color: @topnav-link-color;
}
.topnav-link:hover {
	color: @topnav-link-hover-color;
}

// Topnav btn links
// ---------------
.topnav .btn-link {
	color: @topnav-link-color;
}
.topnav .btn-link:hover,
.topnav .btn-link:focus {
	color: @topnav-link-hover-color;
}
.topnav .btn-link[disabled],
.topnav fieldset[disabled] .btn-link {
	&:hover,
	&:focus {
		color: @topnav-link-disabled-color;
	}
}


//
// MEGADROP
// --------------------------------------------
.topnav .megadrop {
	
	// Structure
	// ------------------------------
	display: none;
	overflow: hidden;
	background-color: mix(@well-bg, @gray-light, 92%);
	.box-shadow(0 1px 0 fade(#000, 7%));// Give it a border with no hassle to the slider
	
	&.open {
		display: block;
	}
	
	> .container {
		padding-top: 20px;
	}
	
	
	
	// Inner Elements
	// ------------------------------
	
	// Col's
	// ---------------
	> .container > .row > [class*="col-"] {
		margin-bottom: 10px;
	}
	
	// Col's + Col's
	// -------
	> .container > .row > [class*="col-"] + [class*="col-"] {
		padding-top: 20px;
		border-top: 1px solid @boxes-default-border;
	}
	> .container > .row > .hidden-sm[class*="col-"]:first-child + [class*="col-"],
	> .container > .row > .hidden-sm[class*="col-"] + .hidden-sm[class*="col-"] + [class*="col-"] {
		padding-top: 0;
		border-top: 0;
	}
	@media (min-width: @grid-float-breakpoint) {
		> .container > .row > [class*="col-"] + [class*="col-"] {
			padding-top: 0;
			border-top: 0;
			border-left: 1px solid @boxes-default-border;
		}
	}
	
	// Login Form
	// ---------------
	.form-login p.help {
		padding-top: 4px;
		font-size: 12px;
		color: @text-light;
		text-align: right;
		line-height: 1.4;
	}
	
	
}


//
// FOOTER
// --------------------------------------------
.footer {
	color: @footer-color;
	background-color: @footer-bg;
	font-size: @font-size-base - 1;
	padding-top: 10px;
	.box-shadow(inset 0 5px 10px -5px rgba(0,0,0,.8));
}
.footer a:hover {
	text-decoration: underline;
}

// Footer columns
// ---------------
.footer-social,
.footer-links {
	float: left;
	padding: @footer-block-padding-vertical (@grid-gutter-width / 2);
}

.footer-social {
	width: 100% / 3;
}
	.footer-social-col {
		padding: 0 (@grid-gutter-width / 2) (@footer-block-padding-vertical - 4);
	}
	
.footer-links {
	width: 100% / 3 * 2;
}
	.footer-links > .row > ul {
		float: left;
		width: 25%;
		padding: 0 (@grid-gutter-width / 2);
	}
	
@media (max-width: @screen-md-max){
	.footer-social {
		width: 100%;
		padding-top: 0;
	}
	.footer-social-col {
		float: left;
		width: 50%;
	}
	.footer-links { width: 100%; }
	.footer-links > .row > ul { width: 25%; }
}
@media (max-width: @screen-xs-max){
	.footer-links {
		padding-bottom: @footer-block-padding-vertical;
	}
	.footer-links > .row > ul {
		width: 50%;
		padding-bottom: @footer-block-padding-vertical;
	}
}

// Footer headers
// ---------------
.footer-header {
	font-family: @headings-font-family;
	font-weight: @headings-font-weight;
	font-size: @font-size-base + 1;
	text-transform: uppercase;
	color: @footer-header-color;
	padding-bottom: @footer-link-padding-vertical;
	margin-bottom: @footer-link-padding-vertical + 5;
	border-bottom: 1px solid @footer-line-color;
}

// Footer links
// ---------------
.footer-links > .row > ul {
	list-style-type: none;
	margin: 0;
}
.footer-links > .row > ul > li > a {
	display: inline-block;
	padding: @footer-link-padding-vertical 0;
	color: @footer-link-color;
}
.footer-links > .row > ul > li > a:hover {
	color: @footer-link-hover-color;
}

// Footer Social
// ---------------
.footer-newsletter p {
	margin-bottom: 7px;
}
.footer-newsletter .wrap {
	position: relative;
	padding-right: 55px;
}
	.footer-newsletter input {
		width: 100%;
		background-color: lighten(desaturate(@footer-bg, 4%), 4%);
		border-color:	  lighten(desaturate(@footer-bg, 4%), 4%);
		color:		 @footer-color;
		.placeholder(darken(@footer-color, 6%));
		
		&:focus {
			background-color: lighten(desaturate(@footer-bg, 6%), 6%);
			border-color:	  lighten(desaturate(@footer-bg, 6%), 6%);
			color:			  @footer-link-color;
		}
	}
	.footer-newsletter button {
		position: absolute;
		right: 0;
		top: 0;
	}

.footer-social .circle-icon [class^="icon-"],
.footer-social .circle-icon [class*=" icon-"] {
	font-size: 1.5em;
}

// Footer copyright
// ---------------
.footer .copyright {
	padding: ceil(@footer-block-padding-vertical * .75) 0;
	border-top: 1px solid @footer-line-color;
	color: @footer-copyright-color;
}
.footer .copyright a {
	color: @footer-color;
}


//
// HEAD BANNERS
// --------------------------------------------
// Banner
.head-banner,
.head-banner > .head-banner-inner,// Class for banners WITHOUT carousel
.head-banner .carousel-inner,
.head-banner .item {
	height: 240px;
}
// Large Banner Variant
.head-banner.large,
.head-banner.large > .head-banner-inner,// Class for banners WITHOUT carousel
.head-banner.large .carousel-inner,
.head-banner.large .item {
	height: 520px;
}

// Banner shadow
// ---------
.head-banner .item {
	.box-shadow(~"inset 0 -10px 10px -10px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.05)");
}

// Banner Caption
// ----------------------
.head-banner .carousel-caption {
	width: 555px;
	max-width: 100%;
	background: rgba(0, 0, 0, 0.5) url(../img/bg-pattern-3.png) repeat 0 0;
	top: 30px;
	left: 0;
	right: auto;
	bottom: auto;
	padding: 15px 35px 20px;
	border-radius: 4px;
	text-align: left;
}
.head-banner .carousel-caption.caption-sm { width: 465px; }

.head-banner.large .carousel-caption {
	text-align: center;
	
	@media (min-width: @screen-xs-min){
		top: 60px;
	}
}
.head-banner .carousel-caption h3 {
	font-size: 42px;
	letter-spacing: -.02em;
	line-height: 1em;
	color: #fff;
}
.head-banner .carousel-caption h3 img {
	vertical-align: bottom;
	_height: 50px;
	max-width: 400px;
	max-height: 50px;
}
.head-banner .carousel-caption h6 {
	text-transform: uppercase;
	color: @inverse-text-info;
}
.head-banner.large .carousel-caption h6 {
	@media (min-width: @screen-xs-min){
		font-size: 15px;
	}
}
.head-banner .carousel-caption hr {
	border-color: mix(@inverse-text-info, @gray, 50%);
	margin-bottom: 13px;
}
.head-banner .carousel-caption p {
	font-family: @headings-font-family;
	font-weight: @headings-font-light;
	font-size: 19px;
	margin-bottom: 15px;
}
.head-banner .carousel-caption .btn {
	text-transform: uppercase;
	letter-spacing: .01em;
}

// Banners without carousel
// ----------------------

// Give them some shadow love too
// We are using the :after to over-index google maps and similliar stuff
// ----------
.head-banner > .head-banner-inner {
	position: relative;
}
.head-banner-inner:after {
	display: block;
	content: "";
	position: absolute; bottom: -19px; left:0;
	width: 100%;
	height: 20px;
	border-top: 1px solid rgba(0,0,0,.07);
	.box-shadow(0 -8px 16px -8px rgba(0,0,0,.15));
}

// Headers in banners without carousel
// ----------
.banner-header {
	color: #fff;
	text-align: center;
	font-size: 42px;
	text-transform: uppercase;
	text-shadow: 0 -1px 3px rgba(0,0,0,.3);
	letter-spacing: .01em;
	padding: 10px 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	margin-top: 75px;
}
.banner-subheader {
	color: #fff;
	text-align: center;
	font-size: 20px;
	text-shadow: 0 -1px 2px rgba(0,0,0,.4);
	letter-spacing: -.01em;
	margin-top: 0;
}
@media (min-width: @screen-sm-min) and (max-width: @screen-md-max) {
	.banner-header {
		font-size: 37px;
		padding: 8px 0;
	}
	.banner-subheader {
		font-size: 19px;
	}
}
@media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
	.banner-header {
		font-size: 34px;
		padding: 7px 0;
	}
	.banner-subheader {
		font-size: 18px;
	}
}
@media (max-width: @screen-xxs-max) {
	.banner-header {
		font-size: 28px;
		padding: 6px 0;
		margin-top: 40px;
	}
	.banner-subheader {
		font-size: 17px;
	}
}


//
// SUBMENU BAR
// dark navbar bellow the banner
// --------------------------------------------
.submenu-bar {
	position: relative;
	margin-top: -45px;
	margin-bottom: 0;
	text-align: center;
	text-transform: uppercase;
	font-size: @font-size-base - 2;
}

//
// CONTENT SECTIONS
// --------------------------------------------
@sectionPadding: 45px;

.section-w { // white (transparent)
    padding: @sectionPadding 0 (@sectionPadding - 5);
}
.section-g { // grey
    padding: @sectionPadding 0 (@sectionPadding - 5);
    background-color: fade(darken(@well-bg, 2.8%), 55%);
    border-top: 1px solid lighten(@well-border, 2%);
    border-bottom: 1px solid lighten(@well-border, 2%);
	&:last-child {
		border-bottom: 0;
	}
}
.section-b { // blue
	color: #fff;
    padding: @sectionPadding 0 (@sectionPadding - 5);
    background-color: @brand-primary;
}
.section-i { // info
	color: #fff;
    padding: @sectionPadding 0 (@sectionPadding - 5);
    background-color: @brand-info;
}
.section-b,
.section-i {
	h1, h2, h3, h4, h5, h6,
	.h1, .h2, .h3, .h4, .h5, .h6 {
		color: #fff;
	}
}
@media (max-width: @screen-md-max){
	.section-w,
	.section-g,
	.section-b,
	.section-i {
		padding: floor(@sectionPadding * 0.9) 0 (floor(@sectionPadding * 0.9) - 5);
	}
}
@media (max-width: @screen-sm-max){
	.section-w,
	.section-g,
	.section-b,
	.section-i {
		padding: floor(@sectionPadding * 0.66) 0 (floor(@sectionPadding * 0.66) - 5);
	}
}


// PAGE HEADERS
// --------------------------------------------
.page-header {
	margin: 0 0 30px;
}
.page-header small,
small.subtitle {
	display: block;
	text-transform: uppercase;
	color: @text-soft;
	font-size: 70%;
}
.page-header + hr {
	margin-top: -10px;
}


// SECTION HEADERS
// --------------------------------------------
// Common
// ---------------
.section-header,
.subsection-header {
	padding-bottom: .35em;
	border-bottom: 1px solid @contents-line-color;
	position: relative;
}
// Remove margin top from :first-child header after a banner
.head-banner + [class^="section-"] > .container > .row:first-child > [class^="col-"] > .section-header:first-child ,
.head-banner + [class^="section-"] > .container > .row:first-child > [class^="col-"] > .subsection-header:first-child  {
	margin-top: 0;
}

.section-header small,
.subsection-header small {
	display: block;
}
.section-header:after,
.subsection-header:after {
	display: block;
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 3px;
	width: 10%;
	min-width: 80px;
	background-color: @brand-info;//fade(@headings-color, 80%);
}
// Section
// ---------------
.section-header {
	font-size: 55px;
	line-height: 1;
	text-align: center;
	margin-bottom: 40px;
}
.section-header small {
	font-size: 60%;
}
@media (max-width: @screen-xs-max){
	.section-header {
		font-size: 40px;
		margin-bottom: 30px;
	}
}
// Sub-section
// ---------------
.subsection-header {
	margin-bottom: 20px;
}
.subsection-header small {
	font-size: 70%;
}


// SIMPLE LINE HEADERS
// --------------------------------------------
.line-header {
	padding-bottom: 9px;// Use px here for better alignment of headers with different font size
	border-bottom: 1px solid @contents-line-color;
}


// CALLOUTS
// --------------------------------------------
.callouts {
	position: relative;// for z-index
	padding: 16px @grid-gutter-width;
	border: 1px solid darken(@well-border, 2%);
	background-color: @well-bg;
	border-radius: @border-radius-base;
	margin-bottom: @sectionPadding - 20;// This is the only attr needed if .callout also have the classes "well well-lg well-box" 
}
@media (min-width: @screen-md-min){
	.callouts {
		border-top-color: #fff;
		margin-top: -(@sectionPadding + 30);
		.box-shadow(0 -2px 5px -2px rgba(0, 0, 0, 0.5));
		#gradient > .vertical (#fff, #eee);
	}
	.callouts > .row > [class^="col-"] .wrap {
		border-right: 1px dashed fade(@contents-line-color, 25%);
	}
}
@media (max-width: @screen-sm-max){
	.callouts > .row > [class^="col-"] .wrap {
		border-bottom: 1px dashed fade(@contents-line-color, 25%);
	}
}
.callouts > .row > [class^="col-"]:last-child .wrap {
	border: 0;
}

// Variation: Left Icon
// (default & small screen)
// ---------------
.callouts .wrap {
	position: relative;
	padding-left: 52px;//60px;
	padding-right: @grid-gutter-width / 2;
	margin-right: -(@grid-gutter-width / 2);
}
.callouts .wrap .circle-icon {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 20px;//22px;
}
.callouts .wrap h3 {
	margin-top: 10px;
	margin-bottom: 6px;
	font-size: 20px;//27px;
	font-weight: @headings-font-weight;//@headings-font-light;
}
//@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
//	.callouts .wrap h3 { font-size: 25px; }
//}
//@media (max-width: @screen-xxs-max){
//	.callouts .wrap h3 { font-size: 22px; }
//}

// Variation: Backgroun Icon
// (reverts to default on small screens)
// ---------------
@media (min-width: @screen-md-min){
	.callouts .wrap-bg-icon {
		padding-left: 0;
	}
	.callouts .wrap-bg-icon .circle-icon {
		left: auto;
		top: -15px;
		right: 8px;
		background-color: transparent;
		padding: 0;
		font-size: 80px;
	}
	.callouts .wrap-bg-icon .circle-icon [class^="icon-"]:before {
		_color: transparent;
		color: fade(@gray-darker, 8%);
	}
	.callouts .wrap-bg-icon h3,
	.callouts .wrap-bg-icon p {
		position: relative; // for z-index buggy behavior
	}
}

// Variation: <a> as .wrap
// ---------------
.callouts a.wrap {
	display: block;
	color: inherit;
}
.callouts a.wrap:hover,
.callouts a.wrap:focus,
.callouts a.wrap:active {
	color: @link-hover-color;
	h3 { color: @link-hover-color; }
}


//
// NEWS PORTLETS
// --------------------------------------------
@portlet-img-width: 80px;
@portlet-img-margin: 18px;
@portlet-text-lines-num: 2;

// Wrap the portlets in a list (optional)
// ---------------
ul.news-portlet-list {
	padding-left: 0;
	list-style: none;
}
ul.news-portlet-list li {
	margin-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dashed @contents-line-color;
}
ul.news-portlet-list li:last-child {
	border-bottom: 0;
}

// The portlets
// ---------------
.news-portlet {
	position: relative;
	padding-left: @portlet-img-width + @portlet-img-margin;
}
a.news-portlet {
	color: inherit;
	display: block;
}

// Portlet img
.news-portlet .portlet-img {
	position: absolute;
	top: 0;
	left: 0;
	width: @portlet-img-width;
	height: @portlet-img-width;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

// Portlet title
.news-portlet .portlet-title {
	margin: 0 0 8px;
}

// Portlet date
.news-portlet .portlet-date {
	font-size: 12px;
	color: @gray-soft;
	margin-bottom: 4px;
}
.news-portlet .portlet-date i {
	color: @gray;
}

// Portlet text
.news-portlet .portlet-text {
	font-size: 13px;
	line-height: 18px;
	max-height: floor(18px * @portlet-text-lines-num);
	overflow: hidden;
}
.news-portlet .portlet-text > *:last-child {
	margin-bottom: 0;
}
.news-portlet .portlet-text + div {
	margin-top: 10px;
}

// Portlet hover (for a.)
a.news-portlet:hover,
a.news-portlet:focus {
	color: inherit;
	text-decoration: none;
	outline: 0;
}
a.news-portlet:hover .portlet-title {
	text-decoration: underline;
}


//
// FILE PORTLET
// --------------------------------------------
@file-portlet-margin: 10px;
@file-portlet-padding-vertical: 12px;
@file-portlet-icon-width: 62px;// Computed width

// Portlet list
.files-list {
	margin: 0 -(@file-portlet-margin / 2);
	.clearfix();
}

// The portlet
.file-portlet {
	display: block;
	float: left;
	width: 100%;
	padding: 0 (@file-portlet-margin / 2) @file-portlet-margin;
}
.file-portlet:last-child {
	padding-bottom: 0;
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
	.file-portlet { width: 50%;	}
}

// The portlet well
.file-portlet .well {
	position: relative;
	padding-top: @file-portlet-padding-vertical;
	padding-bottom: @file-portlet-padding-vertical;
	padding-left: @file-portlet-icon-width;
	margin: 0;
}
.file-portlet .well:hover {
	background-color: lighten(@well-bg, 2%);
	border-color: darken(@well-border, 4%);
}

// Portlet icon
.file-portlet .well > .circle-icon {
	position: absolute;
	top: @file-portlet-padding-vertical - 1;//@boxes-base-padding - 1;
	left: @boxes-base-padding - 1;
	font-size: 19px;
}

// File name
.file-portlet .file-name {
	font-size: 13px;
	margin-bottom: 2px;
}

// File size
.file-portlet .file-info {
	float: left;
	width: 50%;
	font-size: 11px;
	color: @text-soft;
}

// Login (conditional) / Download icon
.file-portlet .file-actions {
	float: right;
	width: 50%;
	text-align: right;
	font-size: 13px;
}
.file-portlet .well:hover .icon-download {
	color: @text-darker;
}


//
// PANELS
// --------------------------------------------
.panel-subheading {
	font-family: @headings-font-family;
	font-weight: @headings-font-weight;
	font-size: 18px;
	margin-bottom: 6px;
}


//
// CONTENT PAGES
// --------------------------------------------

// MAIN COL
// ----------------------
.content-desc {
	max-width: 100%;
	overflow: hidden;
	word-wrap: break-word;
}

// SIDE COL
// ----------------------
@media (max-width: @screen-sm-max){
	// separate the sidecol from the maincol
	.sidecol {
		margin-top: @boxes-base-padding;
		padding-top: floor(@boxes-base-padding * 1.7);
		border-top: 1px solid @hr-border-dark;
	}
}
.sidecol .panel-heading {
	text-transform: uppercase;
}

// Menu list
// ---------------
ul.menu-list,
.menu-list ul {
	list-style-type: none;
}
ul.menu-list {
	padding: 0;
	
	li.list-header {
		padding: 6px 0;
		border-bottom: 1px solid @contents-line-color;
		font-family: @headings-font-family;
		font-weight: @headings-font-bold;
		color: @headings-color;
		text-transform: uppercase;
		font-size: 17px;
	}
	
	li.list-item {
		padding: 13px 10px 12px;
		border-bottom: 1px solid darken(@boxes-default-border, 4%);
		border-top: 1px solid rgba(255,255,255,.5);
	}
	li.list-item:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
	
	ul {
		padding-left: 20px;
	}
	
	li > a,
	li > a:hover {
		color: @headings-color;
	}
	
	.active > a,
	.active > a:hover {
		color: @link-color;
		text-decoration: underline;
	}
	li.list-item {
		h1, h2, h3, h4, h5, h6,
		.h1, .h2, .h3, .h4, .h5, .h6 {
			margin: 0;
			padding: 0;
			font-weight: @headings-font-regular;
		}
	}
	.backlink {
		font-size: @font-size-small;
	}
}

// Link list
// ---------------
ul.link-list,
.link-list ul {
	list-style-type: none;
}
ul.link-list {
	padding: 0;
	
	li {
		padding-bottom: 5px;
	}
	li li:first-child {
		padding-top: 5px;
	}
	
	ul {
		padding-left: 20px;
	}
	
	li > a,
	li > a:hover {
		color: @headings-color;
	}
	
	.active > a,
	.active > a:hover {
		color: @link-color;
		text-decoration: underline;
	}
	h1, h2, h3, h4, h5, h6,
	.h1, .h2, .h3, .h4, .h5, .h6 {
		margin: 0;
		padding: 0;
	}
	.backlink {
		font-size: @font-size-small;
	}
}

// Suggestion list
// (common)
// ---------------
ul.suggestion-list {
	list-style-type: none;
	padding: 5px 0;
	margin: 20px 0;
	border-top: 1px solid @hr-border-darker;
	border-bottom: 1px solid @hr-border-darker;
	
	> li {
		padding: 13px 0;
		border-bottom: 1px solid @hr-border;
	}
	> li:last-child {
		border-bottom: 0;
	}
	h5, h6 {
		margin: 2px 0;
	}
	> li > a,
	> li > a:hover {
		font-size: @font-size-base - 1;
		color: @text-color;
	}
}

ul.suggestion-list:first-child,
ul.suggestion-list + ul.suggestion-list {
	margin-top: -20px;
	border-top: 0;
}
.line-header + ul.suggestion-list {
	margin-top: -10px;
	border-top: 0;
}
.well ul.suggestion-list:first-child {
	margin-top: -10px;
}
.well ul.suggestion-list:last-child {
	margin-bottom: -10px;
	border-bottom: 0;
}

// Suggestion list
// (news)
// ---------------
@news-suggestion-list-featured-img-size: 65px;

ul.news-suggestion-list {
	> li {
		position: relative;
		padding-left: @news-suggestion-list-featured-img-size + 12;
		min-height: @news-suggestion-list-featured-img-size + 28;
	}
	.featured-img {
		position: absolute;
		top: 13px - 1;
		left: -1px;
		width: @news-suggestion-list-featured-img-size;
		height: @news-suggestion-list-featured-img-size;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		border-radius: 50%;
	}
	h5, h6 {
		margin-bottom: 5px;
		a,
		a:hover,
		a:focus {
			color: @headings-color;
		}
	}
	li > .small + .small {
		margin-top: 2px;
	}
}

//
// UTILITIES
// Anything not too specific, place in utilities.less
// --------------------------------------------
// Date utilities
// ---------------
.long-date:first-letter {
	text-transform: capitalize;
}

// Icon utilities
// ---------------
.circle-icon {
	display: inline-block;
	background-color: @gray-dark;
	padding: .5em .52em;
	border-radius: 50%;
	text-align: center;
	vertical-align: middle;
	line-height: 1;
	color: #fff;
}
.circle-icon [class^="icon-"]:before,
.circle-icon [class*=" icon-"]:before {
	color: #fff;
	margin: 0;
}
.circle-icon.circle-primary { background-color: @btn-primary-bg; }
.circle-icon.circle-info { background-color: @btn-primary-bg; }
.circle-icon.circle-success { background-color: @btn-success-bg; }
.circle-icon.circle-warning { background-color: @btn-warning-bg; }
.circle-icon.circle-danger { background-color: @btn-danger-bg; }
.circle-icon.circle-default { 
	background-color: darken(@well-bg, 5%);
	color: @gray-dark;
	
	[class^="icon-"]:before,
	[class*=" icon-"]:before {
		color: @gray-dark;
	}
}
.circle-icon.circle-inverse { 
	background-color: @gray-lighter;
	color: @gray-darker;
	
	[class^="icon-"]:before,
	[class*=" icon-"]:before {
		color: @gray-darker;
	}
}

// Link hover pointer
// ---------------
a.hover-pointer {
	position:	relative;
}
a.hover-pointer:hover:after {
	position: absolute;
	display: inline-block;
	content: "\a0\2192";
	text-decoration: none;
}

// Google Recaptcha
// ----------------
.g-recaptcha {
	.scale(.9);
	.transform-origin(0 0);
	margin-bottom: -11px;// to account for the extra height left behind by the scale
}

// Content Iframes
// ----------------
iframe.embed-content {
	width: 100%;// JS will do the height
	margin: 0;
}

//
// PAGES
// For pages with tiny aditional CSS
// For a long list of styles create your own custom file inside this file folder and leave my file alone!
// --------------------------------------------

// About
// ---------------
.client-list {
	margin-top: 10px;
	margin-bottom: 20px;
	
	a.client {
		display: block;
	}
	
		.client-name {
			margin: 12px 0 6px;
			text-transform: uppercase;
			.nwe();
		}
		.client-img {
			height: 80px;
			background-color: @well-bg;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			// The Shadow Mane!
			position:relative;
			.box-shadow(0 1px 3px rgba(0,0,0,.3));
			&:before, 
			&:after {
				content:"";
				position:absolute;
				z-index:-1;
				top:10px;
				bottom:10px;
				left:0;
				right:0;
				border-radius:100px / 10px;
				.box-shadow(0 0 10px rgba(0,0,0,.8));
			}
			&:after {
			right:10px;
			left:auto;
			-webkit-transform:skew(8deg) rotate(3deg);
			   -moz-transform:skew(8deg) rotate(3deg);
				-ms-transform:skew(8deg) rotate(3deg);
				 -o-transform:skew(8deg) rotate(3deg);
					transform:skew(8deg) rotate(3deg);
			}
		}
		
	a.client:hover {
		.client-img {
			top: 1px;
			.box-shadow(~"inset 1px 1px 1px rgba(0, 0, 0, 0.2), 1px 1px 0 #FFF");
			
			&:before, 
			&:after {
				display: none;
			}
		}
	}
}