//*****************************************************************************
//	Styles that bring an Apple-like look to your applications' help	files.
//
//	* Used in conjunction with normalize.css to establish sane defaults.
//	* We have *structural* containers and *styling* containers.
//	* There's no such thing as padding and margins on anything unless they're
//	  part of a styling container, or inside of a styling container that
//	  sets them for them.
//	* Structural containers only have size and position and visibility.
//	* Styling containers set styles for elements inside of them.
//*****************************************************************************

@import "font-awesome";


//*************************************
//  Mixins
//*************************************

// Easily include font-awesome icons
@mixin icon( $type: $fa-var-bug )
{
	content: $type;
	font-family: 'Fontawesome';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// Easily include backgrounds for multiple browsers, just in case.
// You might require Compass in your own projects, instead.
@mixin background( $property )
{
	background: -o-#{$property};
	background: -moz-#{$property};
	background: -webkit-#{$property};
	background: #{$property};
}


//*************************************
//  GENERAL STYLES
//*************************************

$interMargins: 1.5ex;
$linkColor: rgb(99,136,193);
$strongColor: rgb(75,75,75);
$standard_border: 1px solid #bfbfbf;

*
{
	margin: 0;
	padding: 0;
}

html
{
	font-size: 11pt;
	height: 100%;
}

body
{
    font-family: -apple-system-font, -webkit-system-font, "HelveticaNeue", "Helvetica Neue", "Helvetica", sans-serif;
	height: 100%;
	min-width: 600px;
}

h1
{
	font-size: 1.7em;
	font-weight: normal;
}
h2
{
	font-size: 1.5em;
	font-weight: normal;
}
h3
{
	font-size: 1.3em;
	font-weight: normal;
}


p
{
	font-size: 1.0em;
	line-height: 1.6em;
}


a
{
	text-decoration: none;
	//font-weight: bold;
	font-size: 1.05em;
	color: $linkColor;

	&:visited
	{
		color: $linkColor;
	}

	&:hover
	{
		text-decoration: underline;
	}
}

strong
{
    color: $strongColor;
}

hr
{
	text-decoration: none;
	border: none;
	border-bottom: $standard_border;
	margin: ($interMargins * 2) 10% ($interMargins * 2) 10%;
}

//	"standard" img should always be a block and centered
//	and assume 100% width. Can set max-width to prevent
//	oversized images in another class.
img
{
	display: block;
	width: 100%;
	margin: 0 auto 0 auto;
}


//	"standard" dl only spaces the items. Set the <dl> in
//	a styling container if you want padding or margins.
dl
{
	dt code
	{
		font-weight: bold;
	}

	dd
	{
		margin: 0.8ex 0 0.8ex 3em;
	}
}


//  "standard" ul has no margins or padding, except left margin.
ul
{
	list-style: square outside;
	margin-left: 2em;
}


//	"standard" li only spaces the items. Set the <ul> or <ol>
//	in a styling container if you want padding or margins.
//	The default aligns the left of the text with the body
//	left text, meaning the bullets or counters will stick out
//	to the left.
li
{
	margin: 0.8ex 0 0.8ex 0;
}


/* fix for FireFox, apparently */
li p { display: inline; }


//*************************************
//  tidyoptions dt
//*************************************
body.tidyoptions
{
	dt
	{
		margin-top: $interMargins * 2;
	}
}


//*************************************
//	related_topics
//*************************************
div.related_topics
{
	ul
	{
		list-style: none;
		margin-left: 1em;
	}
}


//*************************************
//	table_contents
//*************************************
div.table_contents
{
	dl
	{
		margin: 1em;
	}
	dt
	{
		margin-top: $interMargins * 2;
	}
}

//*************************************
//	yield-content settings
//*************************************
div.yield-content
{
	h1
	{
		margin-bottom: $interMargins;
	}

	h2,
	h3
	{
		margin-top: ($interMargins / 1);
		margin-bottom: ($interMargins / 2);
	}
	p
	{
		margin-top: ($interMargins / 2);
		margin-bottom: ($interMargins / 2);
	}
}


//*************************************
//	help_map settings
//*************************************
.help_map
{
}


//*************************************
//	Breadcrumbs
//*************************************
nav#breadcrumbs
{
	height: 22px;
	width: 100%;
	overflow: hidden;
	position: fixed;
	top: 0;
	border-bottom: 1pt solid #7E7E7E;
	@include background(linear-gradient(top, rgba(224,224,224,1) 0%,rgba(201,201,202,1) 100%));
	z-index: 10;

	// target the main content div for additional margin.
	& + div
	{
		margin-top: 2em;
	}

	ul,
	ul li,
	ul li a
	{
		font-size: 11px;
		line-height: 22px;
		height: 22px;
		font-weight: 100;
		margin: 0;
		padding: 0;
	}

	ul li
	{
		list-style-type: none;
		float: left;
		padding: 0 0 0 10px;
		margin: 0;

		a
		{
			display: block;
			background: url('breadcrumb-separator-light.png') no-repeat right;
			padding-right: 15px;
			text-decoration: none;
			color: #353535;
		}

		&:last-child
		{
			color: #555555;

			a
			{
				background: none;
				cursor: default;
			}
		}
	}
}


//*************************************
//	Navigation Buttons
//*************************************
div.navigate_prev_next
{
	display: block;
	width: auto;
	margin: $interMargins auto $interMargins auto;
	text-align: center;
	$height: 2.5em;

	a,
	span
	{
		display: inline-block;
		color: #353535;
		@include background(linear-gradient(top, rgba(224,224,224,1) 0%,rgba(201,201,202,1) 100%));
		border-radius: 2px;
		font-size: 0.8em;
		text-decoration: none;
		font-weight: bold;
		width: 10em;
		height: $height;
		line-height: $height;

		// space between buttons.
		&:first-child
		{
			margin-right: 1em;
		}

		&:first-child:before
		{
			@include icon($fa-var-chevron-left);
			font-size: 1.5em;
			margin: 0 0 0 10px;
			float: left;
			color: whitesmoke;
		}

		&:first-child + a:after,
		&:first-child + span:after
		{
			@include icon($fa-var-chevron-right);
			font-size: 1.5em;
			margin-right: 10px;
			float: right;
			color: whitesmoke;
		}
	}

	a:hover
	{
		@include background(linear-gradient(top, rgba(211,211,211,1) 0%,rgba(191,191,191,1) 100%));

		&:before,
		&:after
		{
			color: $linkColor !important; // specificity
		}
	}

	// override span color, as it's disabled.
	span
	{
		color: #888888;
		@include background(linear-gradient(top, rgba(234,234,234,1) 0%,rgba(244,244,244,1) 100%));
		&:before,
		&:after
		{
			color: #aaaaaa;
		}
	}


}


//*************************************
//	layout-logo-large layout styles
//*************************************
div.container-logo-large
{
	$logo-width: 200pt;

	position: relative;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;

	// left block, template content area.
	> div:first-child
	{
		position: absolute;
		top: 0;
		left: 0;
		width: $logo-width;
		text-align: center;
		font-size: 0.8em;

		//  top of left block, where image,
		//  headline, and link all live.
		> div:first-child
		{
			margin-top: 1em;

			> img
			{
				display: block;
				width: 80%;
				margin: 0 auto 1em auto;
			}
		}

		// bottom of left block, for related topics
		> div:first-child + div
		{
			font-size: 0.9em;
			margin: 2em 1em 0 3em;
			text-align: left;

			h1
			{
				font-size: 1.3em;
			}
		}
	}


	//  right block, the structure block. We will
	//  perform divider styling here, despite my no-styling rule,
	//  so that we can ensure it extends to the whole content.
	> div:first-child + div
	{
		margin-left: $logo-width;
		border-left: $standard_border;
		min-height: 100%;

		// finally the user's block with a nice padding
		> div:first-child
		{
			padding: 2em;
		}
	}
}


//*************************************
//	layout-logo-medium styles
//*************************************
div.container-logo-medium
{
	$logo-width: 130pt;

	position: relative;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;

	//  left block, the structure block. We will
	//  perform divider styling here, despite my no-styling rule,
	//  so that we can ensure it extends to the whole content.
	> div:first-child
	{
		margin-right: $logo-width;
		border-right: $standard_border;
		min-height: 100%;

		/* other images in the div, after the first-child */
		img
		{
			margin: $interMargins auto $interMargins auto;
			width: 100%;
		}

		/* finally the user's block with a nice padding */
		> div:first-child
		{
			padding: 2em;
		}
	}

	//  right block, template content area.
	> div:first-child + div
	{
		position: absolute;
		top: 0;
		right: 0;
		width: $logo-width;

		//  top of right block, where image lives
		> div:first-child
		{
			padding-top: 1em;

			> img
			{
				display: block;
				width: 80%;
				margin: 0 auto 1em auto;
			}
		}

		//  bottom of left block, for related topics
		> div:first-child + div
		{
			font-size: 0.8em;
			margin: 2em 1em 0 1em;
			text-align: left;

			h1
			{
				font-size: 1.3em;
			}
		}
	}
}


//*************************************
//	layout-logo-small styles
//*************************************
div.container-logo-small
{
	$bannerHeight: 36pt;
	padding: 1em 2em 1em 2em;

	//  banner AND body text
	> div:first-child
	{
		> img:first-child
		{
			height: $bannerHeight;
			width: auto;
			padding: 0 1em 0 0;
			float: left;

			+ h1
			{
				line-height: $bannerHeight;
				margin-bottom: 1ex;
			}
		}
	}

	//  This will be the related topics div
	> div:first-child ~ div
	{
		font-size: 0.8em;
		padding-bottom: 1em;

		h1
		{
			font-size: 1.3em;
		}
	}
}


//*************************************
//	Other Block Level Elements
//*************************************

//  for displaying source code
pre
{
	background-color: #eeeeee;
	display: block;
	margin: 2ex 2em 2ex 2em;
	padding: 1em;
	font-family: Menlo, Courier, monospace;
	white-space: pre; //pre-line;
	word-wrap: normal;
	overflow: auto;
}

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


// for highlighting important information
.note
{
	margin: 1em;
	padding: 1em;
	background-color: #e6edff;
	border: 1px solid #eaeaea;
}


//  a container for showing things that are done step by step
div.steps
{
	margin:  0 0 ($interMargins * 2) 0;
	padding: 1em 2em 1em 2em;
	border: $standard_border;
	border-radius: 10px;

	ul,
	ol
	{
		margin-left: 2em;
	}

	ul:first-child,
	ol:first-child
	{
		margin-left: 1em;
	}
}

//  indented left and right version of the container
div.steps.narrow
{
	margin-left: 3em;
	margin-right: 3em;
}


//  image_article
div.image_article
{
	margin-top: $interMargins;

	> div:first-child
	{
		float: left;
		width:  45%;
		margin: 0 1em 0 0;

		> img
		{
			margin-top: 0 !important;
		}
	}

	&.narrow > div:first-child
	{
		width: 10%;
	}


	ul,
	ol
	{
		list-style-position:inside;
	}
}

div.image_article:after
{
	content: "";
	display: table;
	clear: both;
}

//*************************************
//	For partials extracted from YARD
//*************************************

$yard_color_symbol: rgba(0,136,204,1);
$yard_font_mono: Menlo, Consolas, Monaco, Courier, monospace;

div.attr_details,
div.method_details_list
{
	.inline
	{
		display: inline;

		p:first-child
		{
			display: inline;
		}
	}

	.method_details
	{
		border-top: 1px dotted #aaa;
		margin-top: 15px;
		padding-top: 0;

		&.first
		{
			border: 0;
		}
	}

	p.signature,
	h3.signature
	{
		font-size: 0.9em;
		font-weight: normal;
		font-family: $yard_font_mono;
		padding: 6px 10px;
		margin-top: 18px;
		background: #f2f3ff;
		border: 1px solid #d8d8e5;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		color: $yard_color_symbol;

		strong
		{
			color: inherit;;
		}

		tt
		{
			font-family: inherit;
		}

		.overload
		{
			display: block;
		}

		.extras
		{
			font-weight: normal;
			font-family: sans-serif;
			color: #444;
			font-size: 1em;
		}

		.not_defined_here,
		.aliases
		{
			display: block;
			font-weight: normal;
			font-size: 0.9em;
			font-family: $yard_font_mono;
			margin-top: 0px;
			color: #555;

			.names
			{
				font-family: $yard_font_mono;
				font-weight: bold;
				color: #000;
				font-size: 1.2em;
			}
		}
	}

	div.docstring
	{
		div.discussion
		{

		}
	}

	div.tags
	{
		margin-bottom: 12px;

		.tag_title
		{
			font-size: 1em;
			margin-bottom: 0;
			font-weight: bold; }

		ul
		{
			margin-top: 5px;
			padding-left: 30px;
			list-style: square;

			li {
				margin-bottom: 3px;
			}

			.name
			{
				font-family: $yard_font_mono;
				font-weight: bold;
			}

			.note
			{
				padding: 3px 6px;
			}

		}

		.examples
		{
			.tag_title
			{
				margin-bottom: 10px;
				font-weight: bold;
			}

			.inline p
			{
				padding: 0;
				margin: 0;
				margin-left: 15px;
				font-weight: bold;
				font-size: 0.9em;
			}
		}

		.overload
		{
			.overload_item
			{
				list-style: none;
				margin-bottom: 25px;

				.signature
				{
					padding: 2px 8px;
					background: #e5e8ff;
					border: 1px solid #d8d8e5;
					-moz-border-radius: 3px;
					-webkit-border-radius: 3px;
				}
			}

			.signature
			{ margin-left: -15px;
				font-family: monospace;
				display: block;
				font-size: 1.1em;
			}

			.docstring
			{
				margin-top: 15px;
			}

		}

		/* syntax highlighting */
		//.source_code { display: none; padding: 3px 8px; border-left: 8px solid #ddd; margin-top: 5px; }
		//#filecontents pre.code, .docstring pre.code, .source_code pre { font-family: monospace; }
		//#filecontents pre.code, .docstring pre.code { display: block; }
		//.source_code .lines { padding-right: 12px; color: #555; text-align: right; }

		#filecontents pre.code,
		.docstring pre.code,
		pre.example
		{
			padding: 5px 12px; margin-top: 4px; border: 1px solid #eef; background: #f5f5ff;
		}

		pre.code
		{
			color: #000;

			info.file { color: #555; }

			.val { color: #036A07; }

			.tstring_content,
			.heredoc_beg,
			.heredoc_end,
			.qwords_beg,
			.qwords_end,
			.tstring,
			.dstring
			{
				color: #036A07;
			}

			.fid,
			.rubyid_new,
			.rubyid_to_s,
			.rubyid_to_sym,
			.rubyid_to_f,
			.dot + pre.code .id,
			.rubyid_to_i pre.code .rubyid_each
			{
				color: #0085FF;
			}

			.comment
			{
				color: #0066FF;
			}

			.const,
			.constant
			{
				color: #585CF6;
			}

			.label,
			.symbol
			{
				color: #C5060B;
			}

			.kw,
			.rubyid_require,
			.rubyid_extend,
			.rubyid_include
			{
				color: #0000FF;
			}

			.ivar
			{
				color: #318495;
			}

			.gvar,
			.rubyid_backref,
			.rubyid_nth_ref
			{
				color: #6D79DE;
			}

			.regexp,
			.dregexp
			{
				color: #036A07;
			}

			a
			{
				border-bottom: 1px dotted #bbf;
			}

		}
	}

	table.source_code
	{
		display: none;
	}

}