/* fonts
-------------------------------------------------------------------------------*/
@font-face {
    font-family: 'Georgia';
    src: url('webfonts/georgia.eot');
    src: url('webfonts/georgia.eot?#iefix') format('embedded-opentype'),
         url('webfonts/georgia.woff') format('woff'),
         url('webfonts/georgia.ttf') format('truetype'),
         url('webfonts/georgia.svg#georgia') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CoustardRegular';
    src: url('webfonts/coustard-webfont.eot');
    src: url('webfonts/coustard-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/coustard-webfont.woff') format('woff'),
         url('webfonts/coustard-webfont.ttf') format('truetype'),
         url('webfonts/coustard-webfont.svg#CoustardRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* bootstrap
-------------------------------------------------------------------------------*/
@import "less/bootstrap.less";
@import "less/responsive.less";

/* general variables
-------------------------------------------------------------------------------*/

@displayFontFamily: 'CoustardRegular', @sansFontFamily;

@backgroundColor: @white;
@poorBackground: #ee5f5b;
@goodBackground: #5fcae9;
@perfectBackground: #7bd86b;//#62c462;

.fullWidth {
	position: relative;
	width: 100%;
}

.fullHeight {
	position: relative;
	height: 100%;
}

.fullMin {
	min-width: 100%;
	min-height: 100%;
}

.fullscreen {
	.fullWidth;
	.fullHeight;
	margin: 0;
	padding: 0;
}

.fullscreenMin {
	.fullscreen;
	.fullMin;
}

.fullscreenTopLeft {
	.fullscreen;
	position: absolute;
	left: 0;
	top: 0;
}

.fullscreenTopLeftMin {
	.fullscreenMin;
	position: absolute;
	left: 0;
	top: 0;
}

.fullscreenTopLeftNoWidth {
	.fullHeight;
	.fullMin;
	position: absolute;
	left: 0;
	top: 0;
}

/* functions 
-------------------------*/

.round (@radius) {
    width: @radius;
    height: @radius;
    .border-radius( ~"50% !important" );
}

.rounded-top ( @radius ) {
	.border-radius( @radius @radius 0 0 );
}

.rounded-bottom ( @radius ) {
	.border-radius( 0 0 @radius @radius );
}

.rounded-left ( @radius ) {
	.border-radius( @radius 0 0 @radius );
}

.rounded-right ( @radius ) {
	.border-radius( 0 @radius @radius 0 );
}

.transform ( @transform ) {
    -webkit-transform: @transform;
    -moz-transform: @transform;
    -ms-transform: @transform;
    -o-transform: @transform;
    transform: @transform;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.animation ( @animation ) {
    -webkit-animation: @animation;
    -moz-animation: @animation;
    -ms-animation: @animation;
    -o-animation: @animation;
    animation: @animation;
}

/* global utility 
-------------------------*/

* {
	position: relative;
	pointer-events: auto;
}

img {
	-webkit-user-drag: none;
	draggable: none;
}

.unselectable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;   
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden !important; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

.flush {
    padding: 0;
    margin: 0;
}

.inline-block {
	display:inline-block;
	*display:inline;
	zoom:1;
}

.inline {
    
    p {
        margin: 0;
    }
    
}

.ignore-pointer, .ignore-pointer-temporary {
	pointer-events: none;
}

.dim {
	
	&:not(.active) {
		opacity: 0.65;
	}
	
}

a.dim:hover, button.dim:hover, .btn.dim:hover {
	opacity: 1;
}

.disabled {
	cursor: default !important;
	.ignore-pointer;
	
	* {
		.ignore-pointer;
	}
}

.draggable {
	.inline-block;
	list-style: none;
	.unselectable;
	-webkit-touch-callout: none; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.sequence-arrow {
	margin-top: 32px;
}

.not-ready {
	z-index: 2;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: @grayDark;
	color: @grayLighter;
	opacity: 0.75;
	text-align: center;
	/*
	.not-ready-content {
		position: absolute;
		top: 50%;
		left: 50%;
		
		.not-ready-message {
			top: -50%;
			left: -50%;
			text-shadow: 0 1px 0 rgba( 0, 0, 0, .5 );
		}
		
	}
	*/
}

/* type 
-------------------------*/

.hero-type {
	font-size: 60px;
	line-height: 1;
}

.sidekick-type {
	font-family: @serifFontFamily;
	font-style: italic;
	font-weight: normal;
}

.robot-type {
    font-family: @monoFontFamily;
	font-weight: normal;
}

.inline-type {
	.inline-block;
	vertical-align: middle;
    padding: 0 5px;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: (@baseLineHeight / 2) 0;
	line-height: 1.125;
	
	&:first-child {
		padding-top: 0;
	}
	
	&:last-child {
		padding-bottom: 0;
	}
	
	small {
		line-height: 1.125;
	}
	
}

h3 {
	padding-bottom: 5px;
}

h2, h3 {
	[class^="icon"], [class*=" icon"], [class^="icon-"], [class*=" icon-"] {
		vertical-align: baseline;
	}
}

h6 {
    text-transform: uppercase;
    color: #666;
	padding: (@baseLineHeight / 4) 0;
}

small {
    color: #666;
}

.highlight {
    .robot-type;
    padding: 2px 4px;
    color: #D14;
    background-color: lighten( @grayLighter, 5% );
    border: 1px solid @whiteDarker;
    .border-radius( 3px );
}

.emphasize {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

.separate {
    margin-bottom: 26px;
}

@media (max-width: 480px) {
	
	.page-header {
		h1, h2, h3, h4, h5, h6 {
			
			small {
				line-height: 1.125;
			}
			
		}
	}
	
}
/* containers 
-------------------------*/

.menu {
	background: @bodyBackground;
	
	header, section {
		padding-top: 50px;
		padding-bottom: 30px;
		-webkit-background-clip: padding-box;
		-moz-background-clip: padding-box;
		background-clip: padding-box;
	}
	
}

.container-center {
	text-align: center;
	
	.brand {
		float: none;
		position: absolute;
	}
	
	.nav, .thumbnails, .inline {
		.inline-block;
		float: none;
	}
	
	.inline {
		margin-left: 5px;
		margin-right: 5px;
	}
    
    .row {
        .inline-block;
    }
	
}

.container-left {
    text-align: left;
    
    .brand {
    	float: left;
		position: relative;
	}
    
    .nav, .thumbnails, .inline {
    	display: block;
		float: left;
	}
	
	.inline {
		margin-left: 5px;
		margin-right: 5px;
	}
    
    .row {
        display: block;
    }
    
}

@media (max-width: 767px) {    
    .container {
        padding-left: 20px;
        padding-right: 20px;
        
        .container {
            padding-left: 0;
            padding-right: 0;
        }
        
    }
}

/* equal height containers / http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
-------------------------*/

[class*="eqheight3-container"] {
    float: left;
    width: 100%;
}

.eqheight3-container3 {
    overflow:hidden;
}

.eqheight3-container2, .eqheight3-container1 {
    right: 33.33%;
}

.eqheight3-container3, .eqheight3-container2 {
    clear: left;
}

.eqheight3-column {
    float:left;
    width: 33.33%;
    left: 66.66%;
    overflow:hidden;
}

/* html / body
-------------------------------------------------------------------------------*/

html {
	overflow: auto;
}

html, body {
	.fullscreenMin;
    background-color: @backgroundColor;
}

@media (max-width: 767px) {
    body {
        padding: 0;
    }
}

/* icons 
-------------------------*/

.iconk, [class^="iconk-"], [class*=" iconk-"] {
	.inline-block;
    max-width: 100%;
	vertical-align: middle;
	padding: 2px;
	margin: 0;
    .box-sizing(border-box);
	
	&[class*="-tiny"], &[class*="-tiny-"] {
		width: 14px;
		height: 14px;
		line-height: 14px;
	}
	
	&[class*="-small"], &[class*="-small-"] {
		width: 24px;
		height: 24px;
		line-height: 24px;
	}

	&[class*="-medium"], &[class*="-medium-"] {
		width: 32px;
		height: 32px;
		line-height: 32px;
	}

	&[class*="-large"], &[class*="-large-"]{
		width: 46px;
		height: 46px;
		line-height: 46px;
	}

	&[class*="-huge"], &[class*="-huge-"]{
		width: 52px;
		height: 52px;
		line-height: 52px;
	}

	&[class*="-giant"], &[class*="-giant-"]{
		width: 64px;
		height: 64px;
		line-height: 64px;
	}
	
	&[class*="-doublegiant"], &[class*="-doublegiant-"]{
		width: 128px;
		height: 128px;
		line-height: 128px;
	}
    
    &[class*="-quadgiant"], &[class*="-quadgiant-"]{
    	width: 256px;
		height: 256px;
		line-height: 256px;
	}
	
	&[class*="-fill"], &[class*="-fill-"]{
		width: 100%;
	}
	
	&[class*="-fillHeight"], &[class*="-fillHeight-"]{
		height: 100%;
	}
	
	&[class*="-topRight"], &[class*="-topRight-"]{
		position: relative;
		top: -2px;
		line-height: 18px;
		float: right;
		padding: 0;
	}

	&[class*="-widthFollow"], &[class*="-widthFollow-"]{
		width: auto;
	}
	&[class*="-heightFollow"], &[class*="-heightFollow-"]{
		height: auto;
	}

	&[class*="-tight"], &[class*="-tight-"]{
		padding: 1px;
	}
	
}

/* aspect 
-------------------------*/

.aspect-enforcer {
    padding-top: 100%;
    *height: 100%;
}

.aspect-enforcer-landscape {
    padding-top: 75%;
    *height: 75%;
}

.aspect-enforcer-portrait {
    padding-top: 133%;
    *height: 133%;
}

.aspect-shape {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* badges 
-------------------------*/

.badge-top {
	position: absolute;
	top: 4px;
}

.badge-bottom {
	position: absolute;
	bottom: 4px;
}

.badge-left {
	position: absolute;
	left: 2px;
}

.badge-right {
	position: absolute;
	right: 2px;
}

/* buttons 
-------------------------*/

.btn {
	z-index: 1;
	font-family: @headingsFontFamily;
}

.btn-huge {
	padding: 14px 20px;
	font-size: 32px;
	.border-radius( 10px );
}

.btn-outline {
	background: none;
	border-width: 1px;
	border-color: @grayDark;
	color: @grayDark;
	text-shadow: none;
	.box-shadow( none );
	
	&:hover {
		color: @grayDarker;
		border-color: @grayDark;
		background: none;
	}
}

.btn-outlineRev {
	.btn-outline;
	border-color: @whiteDarker;
	color: @whiteDarker;
	
	&:hover {
		color: @white;
		border-color: @whiteDarker;
		background: none;
	}
}

.btn-radiusless {
	.border-radius( 0 );
}

.btn-circle-small {
	.round(80px);
	padding: 6px;
}

.btn-circle-medium {
	.round(96px);
	padding: 10px;
}

.btn-circle-large {
	.round(128px);
	padding: 12px;
}

.btn-circle-huge {
	.round(144px);
	padding: 16px;
}

.btn-circle-giant {
	.round(160px);
	padding: 20px;
}

/* anchors 
-------------------------*/

a {
	display: inline-block;
	z-index: 1;
}

a, .navbar .nav > li > a {
	cursor: pointer;
	
	&:hover {
		cursor: pointer;
	}
	
}

.hero-anchor {
	padding-top: 6px;
	padding-bottom: 6px;
	
	&:first-child {
		padding-top: 0;
	}
	
	h6 {
		margin-bottom: @baseLineHeight / 2;
	}
    
    @media (max-width: 767px) {    
        .container-center;
    }
	
}

/* progress 
-------------------------*/

.progress {
	
	/* bar fix to have rounded corners when all elements have position: relative */
	.bar {
		.border-radius( 4px );
	}
	
}

/* alerts 
-------------------------*/

.alert {
	margin-bottom: @baseLineHeight / 2;
	font-family: @sansFontFamily;
	
	.alert-action {
		margin-top: 15px;
	}
}

/* grid 
-------------------------*/

@media (max-width: 767px) {    
    [class*="span"], .row-fluid [class*="span"] {
        padding-top: @baseLineHeight / 2;
		padding-bottom: @baseLineHeight / 2;
		
		&:first-child {
			padding-top: 0;
		}
	}
}

.grid-gutterless {
	
	#grid > .core(8.3333%, 0);
	#grid > .fluid(8.3333%, 0);
	
	li {
		margin: 0;
		
		p {
			margin-top: 10px;
		}
	}
	
	[class^="iconk-"], [class*=" iconk-"] {
		padding: 0;
	}
	
	[class^="thumbnails"], [class*=" thumbnails"] {
		float: none !important;
		margin-left: 0;
		
		.thumbnail {
			.flush;
			.border-radius(0);
		}
		
	}
	
	.thumbnails0 {
		.thumbnail {
			margin: 0;
		}
	}
	
	.thumbnails1 {
		.thumbnail {
			margin: 1px;
		}
	}
	
	.thumbnails2 {
		.thumbnail {
			margin: 2px;
		}
	}
	
	.thumbnails4 {
		.thumbnail {
			margin: 4px;
		}
	}
	
	.well {
		
		[class^="thumbnails"], [class*=" thumbnails"] {
			margin-bottom: 0px;
		}
		
		[class*="span"], .row-fluid [class*="span"] {
			padding: 0;
			margin-left: 0;
		}
		
	}

}

.thumbnail .caption {
	color: inherit;
}

.shadowless {
	.box-shadow(none);
	
	.thumbnail, &:hover {
		.box-shadow(none);
	}
}

.borderless {
	border: 0;
	
	.thumbnail, &:hover {
		border: 0;
	}
}

/* wells 
-------------------------*/

.well {
	border-color: rgba(0, 0, 0, 0.05);
	background-color: rgba(0, 0, 0, 0.05);
	
	.alert:last-child {
		margin-bottom: 0;
	}
	
}

.well-success {
	background-color: @successBackground;
}

.well-tight {
	padding: 12px;
	margin-bottom: 10px;
}

/* hero unit 
-------------------------*/

.hero-unit {
	h2 {
		margin-bottom: 0;
		font-size: 30px;
		line-height: 1.5;
	}
}

.sidekick-unit {
	padding: 30px;
	margin: 0;
}

/* titles
-------------------------*/

.title {
	
	margin-bottom: 30px;
	
	h1 {
		.hero-type;
	}
	
}

.subtitle {
	
}

/* tables
-------------------------*/

.table {
	
	font-family: @sansFontFamily;
	
	p {
		margin: 0;
	}
}

/* navbar 
-------------------------*/

.navbar {
	
	.nav {
		li {
			a {
				padding-top: 14px;
			}
		}
	}
	
}

/* subnavbar 
-------------------------*/

.subnavbar {
    
    &:not(:last-child) {
        margin-bottom: @baseLineHeight / 2;
    }
	
	.navbar-inner {
		min-height: 0;
		padding: 0;
		width: 100%;
		#gradient > .vertical( @grayLighter, @whiteDarker );
		border: 1px solid darken(@whiteDarker, 3%);
	}
	
	.nav {
		
		li {
			a {
				margin: 0;
				padding-top: 11px;
				padding-bottom: 11px;
				border-left: 1px solid @grayLighter;
				border-right: 1px solid darken(@whiteDarker, 3%);
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				border-radius: 0;
				text-shadow: none;
			}
			
			&.active {
				a, a:hover {
					background-color: darken(@whiteDarker, 5%);
					border-right-color: darken(@whiteDarker, 3%);
					border-left-color: rgba(0,0,0,0);
					.box-shadow(~"inset 0 3px 5px rgba(0,0,0,.1)");
				}
				
				a .caret, a:hover .caret {
					border-top-color: #777;
				}
			}
			
			&:first-child > a,
			&:first-child > a:hover {
				border-left-color: rgba(0,0,0,0);
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				border-radius: 0;
			}
			
			&:last-child > a {
				border-right-color: rgba(0,0,0,0);
			}
		}
		
	}
	
	.dropdown-menu {
		.border-radius(0 0 4px 4px);
	}
	
	&.is-sticky {
        z-index: @zindexFixedNavbar - 1;
		width: 100%;
        top: 73px;
        left: 0;
		margin: 0;
		border-color: #D5D5D5;
		border-width: 0 0 1px;
		.box-shadow(~"inset 0 -1px 0 rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, .1)");//inset 0 1px 0 white, 0 1px 5px rgba(0, 0, 0, .1)");
		filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	}
    
    @media (max-width: 979px) {
        
        .navbar-inner {
            .border-radius(4px);
    		background: none;
    	}
        
    	.nav {
    		float: none;
    		
    		li {
    			float: none;
    			
    			a {
    				border-left: 0;
    				border-right: 0;
    				.border-radius(4px 4px 0 0);
    			}
    		}
    	}
        
        .grid-gutterless {
            #grid > .core(60px, 0px);
        }
        
    }
    
    @media (max-width: 767px) {    
        .navbar-inner {
            
    		.container {
    			width: auto;
    		}
            
    	}
        
        .navbar-fixed-top, .navbar-fixed-bottom {
            margin-left: 0;
            margin-right: 0;
        }
    }
	
}

/* nav 
-------------------------*/

.nav {
	margin: 0;
	font-family: @sansFontFamily;
}

.nav-inline {
	display: inline-block;
	float: none;
	
	li {	
		display: inline-block;
		float: none;
		vertical-align: middle;
	}
}

.nav-buttons {
	li {
		margin: 5px;
	}
}

.nav-icon {
	display: block;
	text-align: center;
	padding: 5px 10px 5px 10px;
	
	p {
		margin: 0;
	}
	
	img {
		opacity: 0.75
	}
	
	&:hover {
		img {
			opacity: 1;
		}
	}
	
}

.nav-pills {
	h6 {
		line-height: inherit;
	}
}

/* nav misc 
-------------------------*/

.navbar-flush {
	.navbar-fixed-top .navbar-inner;
	border-left: none;
	border-right: none;
	margin: 0;
    
    .navbar-inner {
        .navbar-fixed-top .navbar-inner;
        border-left: none;
        border-right: none;
    	margin: 0;
    }
}

/* subhead 
-------------------------*/

.subhead {
	margin-bottom: @baseLineHeight / 2;
	
	h1 {
		font-size: 56px;
	}
	
	h2, h3, p {
		margin-bottom: 20px;
	}
	
	.alert {
		padding: 5px;
		margin: 0;
	}
	
}

/* dropdown
-------------------------*/

.dropdown-menu, .nav-collapse .dropdown-menu {
	
	li {
		
		h6, p {
			.inline-block;
			padding: 0 5px;
			margin: 0;
			vertical-align: middle;
		}
		
		a {
			padding-top: 10px;
			padding-bottom: 10px;
		}
		
	}
	
}

/* theme: dark 
-------------------------*/

@themeDarkDarkest: #222222;//1D1C21;//150C4A;
@themeDarkDark: #2E2E2E;//27272E;//1A115A;
@themeDarkDarkless: #3D3D3D;//35343D;//201469;
@themeDarkDarkleast: #4C4C4C;//42414C;//251778;
@themeDarkMiddark: #737373;//636273;//2F1EA3;
@themeDarkMid: #949494;//7F7E94;//3924C7;
@themeDarkMidlight: #B2B2B2;//9A98B2;//422AE8;
@themeDarkLight: #D9D9D9;//BAB8D9;//8F89FE;

@themeDarkLink: @blue;
@themeDarkLinkHover: @blueLight;

@themeDarkAlertBackground: #EEDC94;
@themeDarkAlertBorder: darken( @themeDarkAlertBackground, 10% );
@themeDarkAlertText: #5A574C;

@themeDarkInfoBackground: #2658B1;
@themeDarkInfoBorder: darken( @themeDarkInfoBackground, 10% );
@themeDarkInfoText: #98C1F8;

@themeDarkSuccessBackground: #20784E;
@themeDarkSuccessBorder: darken( @themeDarkSuccessBackground, 10% );
@themeDarkSuccessText: #62FFBC;

@themeDarkDangerBackground: #972941;
@themeDarkDangerBorder: darken( @themeDarkDangerBackground, 10% );
@themeDarkDangerText: #FF889F;

.theme-dark {
    color: @grayLighter;
    background-color: @themeDarkDarkest;
    
    a:not(.btn):not(.thumbnail) {
        color: @themeDarkLink;
        
        &:hover {
            color: @themeDarkLinkHover;
        }
    }
    
    .subnavbar {
        
        .navbar-inner {
            #gradient > .vertical( @themeDarkDarkleast, @themeDarkDarkless );
            border-color: @themeDarkDark;
        }
        
        .nav {
            
            li {
                
                a {
                    border-left-color: @themeDarkDarkleast;
                    border-right-color: @themeDarkDarkless;
                    
                    &:hover {
                         background-color: @themeDarkDarkless;  
                    }
                }
                
                &:first-child {
                    a {
                        border-left-color: rgba( 0, 0, 0, 0 );
                    }
                }
                
                &:last-child {
                    a {
                        border-right-color: rgba( 0, 0, 0, 0 );
                    }
                }
                
            }
            
        }
        
    }
    
    .page-header {
        border-color: @themeDarkDarkless;
    }
    
    .alert {
        background-color: @themeDarkAlertBackground;
        border-color: @themeDarkAlertBorder;
        color: @themeDarkAlertText;
        text-shadow: 0;
    }
    
    .alert-info {
        background-color: @themeDarkInfoBackground;
        border-color: @themeDarkInfoBorder;
        color: @themeDarkInfoText;
    }
    
    .alert-success {
        background-color: @themeDarkSuccessBackground;
        border-color: @themeDarkSuccessBorder;
        color: @themeDarkSuccessText;
    }
    
    .alert-danger {
        background-color: @themeDarkDangerBackground;
        border-color: @themeDarkDangerBorder;
        color: @themeDarkDangerText;
    }
    
    .alert-info, .alert-success, .alert-danger {
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    }
	
	.thumbnail {
        border-color: lighten( @themeDarkDark, 5% );
		
		&:hover {
			border-color: @themeDarkMidlight;
		}
	}
	
}


/* theme: transparent
-------------------------*/

.theme-transparent {
	background: transparent;
	
	h6 {
		color: #999;
	}
	
	.subnavbar {
        
        .navbar-inner {
            #gradient > .vertical( rgba( 0, 0, 0, 0.1 ), rgba( 0, 0, 0, 0.2 ) );
            border-color: rgba( 0, 0, 0, 0.2 );
        }
		
		.nav {
            
            li {
                
                a {
					border-left-color: rgba(255, 255, 255, 0.1);
					border-right-color: rgba(0, 0, 0, 0.6);
                    
                    &:hover {
                         background-color: rgba( 0, 0, 0, 0.3 );  
                    }
                }
                
                &:first-child {
                    a {
                        border-left-color: rgba( 0, 0, 0, 0 );
                    }
                }
                
                &:last-child {
                    a {
                        border-right-color: rgba( 0, 0, 0, 0 );
                    }
                }
                
            }
            
        }
		
	}
	
	.well {
		border-color: rgba(0, 0, 0, 0.25);
		background-color: rgba(0, 0, 0, 0.25);
	}
}

/* score & rewards
-------------------------*/

@scorePadding: 10px;
@scoreRadius: 6px;
@scoreBackground: #777;
@scoreOpacity: 0.6;
@rewardsOpacity: 0.25;

#score {
	
	#scoreDetails {
		
		& > .row {
			margin-bottom: 20px;
		}
		
		.hero-type.inline-type {
			padding: 0 20px;
		}
		
	}
	
	#scoreBarHeader, #scoreBarFooter {
		position: absolute;
		width: 18%;
		left: 40%;
		padding: 5px;
		background: @gray;
	}
	
	#scoreBarFooter {
		
		h6 {
			color: #DDD;
		}
		
	}
	
	#scoreBarHeader {
		bottom: 0;
		.rounded-top( @scoreRadius );
	}
	
	#scoreBarFooter {
		top: 0;
		.rounded-bottom( @scoreRadius );
	}
	
	#scoreBar {
		z-index: 1;
		overflow: visible;
		#gradient > .vertical( @grayLighter, @whiteDarker );
		.box-shadow(~"inset 8px 1px 8px rgba(0, 0, 0, .1), 0 1px 10px rgba(0, 0, 0, 0.2)");
		.rounded-left( @scoreRadius );
		
		.score {
			background: @scoreBackground;
			.rounded-left( @scoreRadius );
			.clearfix;
			
			h6 {
				color: @white;
			}
			
		}
		
		/* box shadow on only one side, http://starikovs.com/2011/11/09/css3-one-side-shadow/ */
		/*.score-level:before {
			position: absolute; 
			content: ' '; 
			top: 0; 
			right: 0; 
			bottom: 0;
			left: 0; 
			background-color: transparent;
			.box-shadow(~"2px 0 6px rgba(0, 0, 0, 0.1)");
		}*/
		
		.score-arrow {
			position: absolute;
			right: -99px;
			top: 0;
			width: 100px;
			height: 100%;
			overflow: hidden;
		}
			
		.score-arrow:after {
			//opacity: 0;
			content: "";
			position: absolute;
			background: @scoreBackground;
			width: 89px;
			height: 89px;
			top: 17px;
			left: -45px;
			.box-shadow( -1px 0px 10px 0 rgba(0, 0, 0, 0.2) );
			.transform( rotate(45deg) );
		}
		
		.score-inner {
			margin: 20px;
			opacity: 0.4;
			float: right;
		}
		
		.score.active .score-inner {
			opacity: 1;
		}
		
		& > .score-arrow:after {
			#gradient > .vertical( @grayLighter, @whiteDarker );
			.box-shadow( ~"inset 0 1px 8px rgba(0, 0, 0, .1), -1px 0px 10px 0 rgba(0, 0, 0, 0.2)" );
		}
		
		#scorePoor {
			position: absolute;
			top: 0;
			left: 0;
			width: 50%;
			
			&.active {
				background: @poorBackground;
				.score-arrow:after {
					background: @poorBackground;
				}
			}
			
		}
		
		#scoreGood {
			position: absolute;
			top: 0;
			left: 0;
			width: 66%;
			
			&.active {
				background: @goodBackground;
				.score-arrow:after {
					background: @goodBackground;
				}
				
				#scorePoor {
					background: transparent;
					.score-arrow:after {
						background: transparent;
					}
					.score-inner {
						opacity: @scoreOpacity;
					}
				}
			}
			
		}
		
		#scorePerfect {
			width: 100%;
			
			&.active {
				background: @perfectBackground;
				.score-arrow:after {
					background: @perfectBackground;
				}
				
				#scorePoor, #scoreGood {
					background: transparent;
					.score-arrow:after {
						background: transparent;
					}
					.score-inner {
						opacity: @scoreOpacity;
					}
				}
				
			}
			
		}
		
	}
	
	#scoreResults {
		padding-top: 80px;
		padding-bottom: 40px;
	}
	
	#scoreRewards {
		margin-bottom: 20px;
		padding: @scorePadding;
		background: @grayDark;
		color: @grayLighter;
		.box-shadow(~"0 0 10px rgba(0, 0, 0, 0.2)");
		.border-radius( @scoreRadius );
		.clearfix;
		
		.eqheight3-container2, .eqheight3-container1 {
			border-right: 1px solid lighten( @grayDark, 10% );
		}
		
		.rewards {
			.reward-list {
				opacity: 0.25;
			}
		}
		
		.rewards:first-child {
			.reward-requirements {
				padding-left: 0;
			}
		}
		
		.rewards:last-child {
			.reward-requirements {
				padding-right: 0;
			}
		}
		
		.reward-requirements {
			padding: 0 10px 10px 10px;
			opacity: 0.25;
			
			.reward-requirements-list {
				width: 100%;
			}
			
			[class*="rewards-requires"] {
				height: 5px;
			}
			
			.rewards-requires-poor {
				background: @poorBackground;
			}
			
			.rewards-requires-good {
				background: @goodBackground;
			}
			
			.rewards-requires-perfect {
				background: @perfectBackground;
			}
			
		}
		
		.reward {
			padding: 10px;
			overflow: hidden;
			
			.btn {
				border: 0;
				background: @grayLighter;
				margin-bottom: 10px;
			}
			
			.btn:after {
				content: " ";
				position: absolute;
				opacity: 1;
				.border-radius( 50% );
				width: 30%;
				height: 30%;
				left: 0;
				top: 5%;
				background: @grayLighter url( "../img/lock_64.png" ) no-repeat 40% 40%;
				background-size: 60%;
			}
			
			.reward-name {
				display: inline;
				border-bottom: 1px solid @gray;
			}
			
			/* forces inline to new line */
			.reward-name:before {
				content:"\A";
				white-space:pre;
			}
			
			p {
				margin: 0;
			}
			
		}
		
		.rewards.active {
			
			.reward-list {
				opacity: 1;
			}
			
			.reward-requirements {
				opacity: 0.6;
			}
			
			.reward {
				
				.btn:after {
					background-image: url( "../img/confirm_64.png" );
					background-size: 75%;
				}
				
				&.new {
					
					.btn {
						background: #ffde76;
					}
					
					.btn:after {
						background-color: #ffde76;
						background-image: url( "../img/alertcircle_64.png" );
						background-size: 75%;
					}
					
				}
				
			}
			
		}
		
	}
	
}

/* major containers 
-------------------------*/

#game, #ui {
	.fullscreenTopLeftMin;
	overflow: hidden;
}

/* ui header sections 
-------------------------*/

#uiHeader {
	z-index: 9999;
	.fullWidth;
	#gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
	.box-shadow(~"inset 0 -1px 0 rgba(0, 0, 0, .4), 0 1px 10px rgba(0, 0, 0, .4)");
	
	.navbar, .navbar-inner {
		background: none;
		border: none;
		.box-shadow(~"none");
	}
	
	.btn-navbar {
		float: none;
		margin-top: 50%;
	}
	
	.nav {
		
		li {
			a {
				
				[class^="iconk-"], [class*=" iconk-"] {
					padding: 0;
				}
				
			}
			
			&.active {
				a, a:hover {
					
				}
			}
		}
		
	}
	
	.nav-collapse {
		
		@media (max-width: 979px) {
			position: absolute;
			width: 100%;
			top: 100%;
			background: lighten( @navbarInverseBackground, 10% );
			.rounded-bottom(15px);
			
			ul {
				margin: 0;
				
				li:last-child {
					
					a {
						margin-bottom: 0;
						.rounded-bottom(15px);
					}
					
				}
				
			}
			
		}
		
	}
	
}

/* ui body sections 
-------------------------*/

#uiBody {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 300;
}

#uiGameDimmer {
	.fullscreenTopLeft;
	background: @grayDarker;
	z-index: 200;
}

#uiBlocker {
	.fullscreenTopLeft;
	background: @grayDarker;
	z-index: 400;
}

#statusInactive {
	
}

#statusActive {
	position: absolute;
	left: 0;
	right: 0;
	height: 100%;
	z-index: 500;
	
	.status-item {
		margin: 0;
		font-family: @headingsFontFamily;
		
		.hero-unit, .sidekick-unit {
			.border-radius(0);
			.box-shadow(~"0 1px 10px rgba(0, 0, 0, .4)");
		}
		
		&:last-child {
			.hero-unit, .sidekick-unit {
				.rounded-bottom(15px);
			}
		}
	}
	
	.status-item + .status-item {
		margin-top: 10px;
	}
	
	#worker {
		
	}
	
}

#uiInGame {
	.fullscreenTopLeft;
	overflow:hidden;
	z-index: 100;
	
	#actionsInactive {
		
	}
	
	#actionsActive {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin-bottom: 10px;
		
		.action-item {
			padding: 10px;
		}
		
	}
	
	#navStart {
		
	}
	
}

#uiOutGame {
	.fullscreenTopLeft;
	overflow-y: scroll;
	z-index: 300;
	
	#footer {
		color: #777;
		position: relative;
		margin-top: 10px;
		padding-top: 20px;
		padding-bottom: 20px;
		border-top: 1px solid #E5E5E5;
	}

}

/* logo 
-------------------------*/

.logo-group {
	
	.logo {
		padding-top: 5px;
		opacity: 0.75;
		color: @white;
		cursor: pointer;
		
		&:hover {
			color: @white;
			text-decoration: none;
		}
		
		h1 {
			margin-bottom: 0;
		}
		
		#logoIcon1 {
			margin-right: 5px;
			margin-top: -5px;
		}

		#logoIcon2 {
			margin-left: -5px;
			margin-top: -15px;
		}

		#logoIcon3 {
			margin-left: -10px;
			margin-right: 5px;
		}
		
	}
	
	.open {
		
		a, .logo {
			opacity: 1;
			background-color: transparent !important;
		}
		
	}
	
	.dropdown-toggle {
		border: 0;
		box-shadow: none;
	}
	
	.caret {
		vertical-align: bottom;
		bottom: 6px;
		border-top-color: @white;
	}
	
}

.logo-type {
	font-family: @displayFontFamily;
}

/* errors
-------------------------*/

.browsers {
    margin-bottom: 9px;
	
	.browser-icon {
		background-position: 50% 0;
		background-repeat:no-repeat;
		padding-top:95px;
		width: 95px;
		margin: 0 20px 0 20px;
	}

	.chrome {
		.browser-icon;
		background-image:url(../img/browsers_chrome.png);
	}

	.firefox {
		.browser-icon;
		background-image:url(../img/browsers_firefox.png);
	}

	.safari {
		.browser-icon;
		background-image:url(../img/browsers_safari.png);
	}
}

/* farming 
-------------------------*/

#menuFarming {
	
	.tools {
		
		p {
			margin: 0;
		}
		
		.tool {
			margin-bottom: 20px;
		}
		
		.tools-sequenceArrow {
			margin-top: 40px;
		}
		
		.thumbnail {
			.box-shadow( 0 1px 10px rgba(0, 0, 0, 0.2) );
			
			img {
				max-width: 100%;
				margin-left: auto;
				margin-right: auto;
				padding: 20px;
			}
		
		}
		
	}
	
}

#puzzleActive {
	
}

#puzzleActiveStarted {
	
}

#puzzleActiveOverview {
	
}

#puzzleActiveElementCounts {
	
	h2 {
		margin-bottom: 16px;
		padding: 4px 0;
	}
	
}

#puzzleActiveShapes {
	
}

#puzzleActiveRewards {
	
	h4 {
		margin-top: 9px;
		margin-bottom: 4px;
	}

	.puzzle-rewardsList {
		
		p {
			margin: 0;
		}
		
	}
	
}

#plantOverview {
	margin-bottom: 10px;
}

#plantCustomTitle {
	padding-bottom: 10px;
	border-bottom: 1px solid #EEE;
}

#plantCustomInfo {
	
	.page-header {
		margin-top: 0;
	}
	
}

#plantCustomInfoText {
	margin-bottom: 20px;
}

/* options 
-------------------------*/

#menuOptions {
	
	#data {
		
		#progressCode {
			max-width: 99%;
			min-width: 99%;
			max-height: 300px;
		}
		
	}
}