@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);

//
// Scaffolding
// --------------------------------------------------


html {
	-webkit-font-smoothing: antialiased !important;
	height:100%;
}

// Body
// -------------------------

body { 
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: @containerBg;
	font-size: 14px;
	color: @bodyText;
	position: relative;
	height:100%;
}

// Outlines
// -------------------------

*, a:focus { outline: none !important; }
button:focus { outline: none !important; }
button::-moz-focus-inner { border: 0; }

// Links
// -------------------------

@linkColor: @infoColor;

a:hover { 
	color: @linkHover; 
	&, .text-underline { text-decoration: none; }
}
a { color: @linkColor; outline: 0 !important; }

// Headings 
// -------------------------

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 5px;
	font-weight: 300;
	&.glyphicons {
		color: @inverseColor;
	}
	span {
		color: @inverseColor;
		font-weight: 300;
	}
}
h2 span, h3 span {
	font-size: 50%;
	text-transform: none;
	padding: 0;
	position: relative;
	
	font-weight: 300;
}
h1 { font-weight: 300; }
h2 { font-size: 26px; }

.text-muted { color: #cacaca; }
.header-line { margin: 20px -15px 20px -15px; }

// Heading with buttons
// -------------------------

.heading-buttons {
	
	h1,h2,h3,h4,h5,h6 { display: inline-block; margin: 0 @spacing; &.glyphicons { display: inline-block; } line-height: 40px; }
	.buttons {
		margin-top: 5px;
		margin-right: @spacing;
		text-align: right;
	}
	.btn + .btn { margin-left: @spacing; }
	> .btn-group-xs, 
	> .btn-xs,
	> .dropdown {
		margin-top: 8px;
	}
	> .btn-group-sm,
	> .btn-sm {
		margin-top: 4px;
	}
}

// Paragraphs
// -------------------------

p { 
	margin: 0 0 10px; 
	line-height: normal;
}
.lead { margin: 0 0 10px; }
img {
	padding:1px;
	

	&:hover  {
		border:1px solid @primaryColor;
	}
}

.ie .img-responsive { 
	max-width: 100%;
  	height: auto;
  	width: auto;
}

// Lists
// -------------------------

ul, ol { margin: 0; padding:0;}

ul.icons {
	text-align: left; padding: 0;
	li { 
		display: block;
		padding: 0 0 0 25px;
		line-height: 22px;
		color: @bodyText;
		i:before { color: @bodyText; font-size: 17px; left: 0; top: 4px; } 
	}
}
ul.list-unstyled {
	list-style: none;
	padding: 0;
}

ul.friends-list {
	li {
		a {
			display: block;
			font-weight: 300;
			color: @inverseColor;
			padding: @spacing;
			&.glyphicons {
				padding-left: 40px;
				i:before {
					top: 8px;
					left: 10px;
					color: #ccc;
					border: 1px solid #ccc;
					.rounded(20px, 20px, 20px, 20px);
					font-size: 16px;
					padding: 2px;
				}
			}
			img {width:35px;}
		}
		&:hover { background-color: #efefef}
		&:data-content { width:100px;}
		&.active { background-color: #efefef; a.glyphicons i:before { color:@primaryColor; border: 1px solid @primaryColor;} }
	}
}

// Other
// -------------------------

input, button, select, textarea { font-family: 'Open Sans', sans-serif; }

// Code
// -------------------------

pre.prettyprint {
	word-break: normal;
	word-wrap: normal;
	white-space: pre;
	background-color: @preBg1;
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(50%, @preBg1), color-stop(50%, @preBg2));
	background-image: -webkit-linear-gradient(@preBg1 50%, @preBg2 50%);
	background-image: -moz-linear-gradient(@preBg1 50%, @preBg2 50%);
	background-image: -o-linear-gradient(@preBg1 50%, @preBg2 50%);
	background-image: linear-gradient(@preBg1 50%, @preBg2 50%);
	-moz-background-size: 38px 38px;
	background-size: 38px 38px;
	border: 1px solid @contentBorder2;
	display: block;
	line-height: 19px;
	margin-bottom: @spacing;
	overflow: visible;
	overflow-y: hidden;
	padding: 0 0 0 4px;
	.rounded();
	.glyphicons { 
	padding: 0 0 0 20px;
		i:before { font-size: 17px; top: 1px; }
	}
}
#content {
	pre.prettyprint {
		&, span { color: @bodyText; }
	}
}

// Blockquote
// -------------------------
blockquote {
	p { font-size: 12px; }
}


// Separators
// -------------------------
.separator {
	 padding: @spacing 0 3px 0; display: block; 
	 &.primary {
	 	padding: 0;
	 	border-top: 2px solid @primaryColor;
	 }
}
.separator.bottom { padding: 0 0 @spacing; }
.separator.top { padding: @spacing 0 0; }
hr { 
	border-top-color: @contentBorder; border-bottom: none; margin:0;
	&.separator {
		padding: 0;
		&.top { margin: @spacing/2 0 0; }
		&.bottom { margin: 0 0 @spacing/2; }
	}
}

// Print
// -------------------------

@media print {
	html, body { height: auto !important; min-height: none !important; }
	@page { 
	    size: auto; 
		margin: 10mm 10mm 10mm 10mm;  
	}
	#wrapper { overflow-y: hidden !important; }
	#content { margin: 0 !important; padding: 0 !important; overflow: none; }
	.breadcrumb,
	#tlyPageGuideWrapper,
	.filter-bar { display: none !important; }
	.table {
		td, th { vertical-align: middle; }
		th { padding: 3px; text-align: center; }
		img { float: left; }
	}
}

// Google maps
// -------------------------

.map_canvas img { max-width: none !important; }
.streetview { width:100%; height:300px; }
.ui-dialog-vevent .dtstart { display:none; }
.ui-dialog-vevent .website { margin:0 0 1em; }

h1,h2,h3,h4,h5,h6 {
	[class*="icon-"] { 
		font-size: 80%; 
		/*vertical-align: middle;*/
		/*margin-top: -3px;*/
	}
}

.rounded-none {
	.rounded();
}
.rounded-left {
	.rounded(5px,0px,0px,5px);
}
.rounded-right {
	.rounded(0px,5px,5px,0px);
}
 

.welcome {margin:15px 0; 
	h1 {
		font-size: 32px; font-weight: 400;
		color: @primaryColor;
	}
}

.faded {
	color: lighten(@inverseColor,40%);
}

.ribbon-wrapper {z-index: 2;}