//*****************************************************************************
//	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.
//  * This is a "minimal" version of this file intended for very basic
//    support of Gem documentation.
//*****************************************************************************


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

// 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-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
{
}


//*************************************
//	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;
}