@charset "UTF-8";

/* =============================================================================

READ ME!

Styles on this sheet are applied in order of appearance. In order to customize 
display for screens based on the width of the display window, the styles at the 
top of the page are for small screens. Any style adjustments desired for larger 
screens are applied later and delimited by the screen's minimum width. 

Keep styling adjustments that are specific to the window size at the BOTTOM of 
the block, separate from generalized styling, and add preceding comments 
describing their function.

============================================================================= */



/*

external positioning, such as position, float, bottom, etc.

margin
border stuff
padding

width and height
display
internal/text alignment
clear
overflow

font-family
font-weight
font-style
font-size
line-height
text decoration and shadow
whitespace
other text considerations

color
background stuff

others

*/


/********** HTML tag style overrides **********/

a {
	font-weight: 400;
	text-decoration: inherit; /* no underline */

	color: green;
	background-color: transparent;
}

a:hover {
	text-shadow: 0 0 0.2em #F87;

	color: rgb(160,64,1) !important; /* dark orange */
	background-color: transparent;
}

/*a:visited {
	background-color: transparent;
/*	color: inherit; 
}*/

b, strong { 
	font-weight: 400; /* When setting, check this matches an imported weight! */
}

body {
	margin: 0; 

	min-width: 320px;

	font-size: 15px; 
	line-height: 1.4; 

	-webkit-font-smoothing: subpixel-antialiased;
}

body, button, input, select, textarea {
	font-family: 'Lato', sans-serif; 
	font-weight: 300; 

	color: #222;
	background-color: transparent;
}

code {
	/* Reduce crowding of inline code because of comparatively narrow spaces in 
	default font */
	margin-left: 2px; 
	margin-right: 2px;

	font-family: 'DejaVu Sans Mono', Consolas, 'Lucida Console', Menlo, Monaco, 
		monospace, sans-serif;
	font-size: .9em;

	color: rgb(0, 0, 160); /* dark blue */
	background-color: transparent;
}

figure {
	display: table;
}

figure img {
	max-width: 100%;
	display: block;
}

h1, h2, h3, h4, h5 {
	clear: both;

	font-family: 'Raleway', sans-serif;

	color: green;
	background-color: transparent;
}
h2 {
	margin-bottom: 11px;
	padding-top: 16.5px;

	font-size: 22px;
}
h3 {
	margin-bottom: 9.5px;	
	padding-top: 12px;

	font-size: 19px;
}
h4 {
	margin-bottom: 7.5px;	
	padding-top: 10px;

	font-size: 15px;
}
h5 {
	margin-bottom: 6px;
	padding-top: 8px;

	font-size: 12px;
}
li > ul, li > ol {
	/* Eliminate vertical padding around nested lists. */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/********** HTML-tag-specific style classes **********/

a.footer {
	margin: 0px;
	padding: 0px;

	display: inline-block;

	font-weight: 300;

	color: gray;
	background-color: transparent;
}

a.intentional-full-path {
	/* Links to pages within www.availlang.org that should not have their link 
	addressess truncated to the root-relative path. This is a dummy style for 
	help with automated detection of unclassified links. */
}

a.offsite {
	padding-right: 13px;

	color: green;
	background: transparent url("/_images/offsite-link.png") no-repeat scroll 
		right center;
}

a.unmarked {
	/* Offsite links that are not visually marked with an icon. This is a dummy 
	style for help with automated detection of unclassified links. */
}

body.gradient-logo {
	background-image: url(/_images/site-background.png);
	background-repeat: no-repeat;
	background-color: rgb(248,248,248); 
}

code.command {
	color: magenta;
}

code.module {
	color: black;
}

code.method {
	color: rgb(0, 0, 160); /* dark blue */
}

code.unicode {
	color: rgb(207, 83, 0); /* burnt orange */
}

div.svg-wrapper {
	overflow-x: auto;
	overflow-y: hidden;

	text-align: center;
}

div.floating-svg-wrapper {
	overflow-x: auto; 
	overflow-y: hidden;

	max-width: 100%; 
}

img.download-inline-icon {
	padding-bottom: 6px;
	padding-right: 2px;

	height: 16px;
}

img.download-list-icon {
	padding-bottom: 12px;
	padding-right: 4px;

	height: 24px;
}

embedded-svg {
	max-width: none;
	max-height: none;
	border: none;
}

figure.full-line-screenshot {
	width: auto;
	clear: both;

	text-align: left;
}

figure.top-right-screenshot {
	margin-bottom: 15px;
	margin-left: 15px;
	
	float: right;
}

figure.top-left-screenshot {
	margin-bottom: 15px;
	margin-right: 15px;
	
	float: left;
}

figcaption {
	width: inherit;
	display: table-caption;
	caption-side: bottom;

	text-align: center;
	font-weight: 400;
	font-size: small;
}


/********** Unrestricted style classes **********/
/* These can be used on almost any tag, so construct them judiciously! */

/* Style for a warning about missing characters for mobile viewers on pages that 
contain <code> */
.mobile-only {
	margin-bottom: 15px;

	display: none; 	/* This gets overridden by mobile-detection.js when it adds 
	mobile-font.css file */
	text-align: center;

	font-weight: bold;

	color: #bb0000;
	background-color: transparent;	
}

/* Change the color of private content to differentiate it visually. */
.private {
	color: rgb(160,64,1) !important;
	background-color: transparent;
}

.no-margin {
	margin: 0;
}

.no-padding {
	padding: 0;
}

.text-highlight {
	margin: 25px;	
	border-radius: 15px;

	font-weight: 400;
	font-style: italic;
}

.inset {
	margin-left: 20px;
	margin-right: 20px;
}


/********** Page structure **********/
/* NB these classes are in page-logical order, not alphabetic. */

  /*** Page Header ***/

.header-wrapper {
	padding-left: 187px;
	padding-right: 10px;
	padding-bottom: 5px;

	height: 89px;
	display: table-cell;
	vertical-align: middle;

	/* Small screen: right-align the text and reduce font and line size */
	text-align: right;
	font-size: 20px;
	line-height: 20px;
}

.header-text {
	font-family: 'Raleway', sans-serif;

	color: rgb(0,60,0); /* dark x 3 green - considerably darker than darkgreen */
	background-color: transparent;
}

.search-bar {
	padding-left: 14px;
	padding-right: 14px;

	/* Small screen: smaller padding because it is not in the header bar. */
	padding-top: 10px;
}

  /*** Page Content ***/

.main-wrapper {
	width: 100%;
}


     /*** Navigation Bar ***/

.nav-wrapper {
	/* Default to vertical inline */
}

.navigation {
	margin-left: 14px;
	margin-bottom: 14px;

	/* Small screen: set down from the title area */
	margin-top: 14px;
}

.nav-section {
	margin-bottom: 14px;
}

.nav-section-header {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;

	font-family: 'Raleway', sans-serif;
	font-size: 20px;

	color: rgb(0,90,0);  /* dark x 2 green - darker than darkgreen */
	background-color: transparent;
}

.nav-links {
	margin-top: 2px;
	padding-left: 12px;
}

.nav-link {
	padding-top: 5px;
	padding-bottom: 5px;

	font-size: 16px;
	font-weight: 300;
	line-height: 16px;
	text-decoration: none;

	color: rgb(0,60,0);  /* dark x 3 green - considerably darker than darkgreen */
	background-color: transparent;
}


     /*** Main Content ***/

.content-wrapper {	
	/* Default to no left margin because of vertical inline. */
	
}

.content {
	background-color: white;
	
	/* Small screen: set down from inline navigation menu, and inset a small amount. */
	margin-top: 20px;
	margin-bottom: 30px;
	padding: 20px;
	
	overflow-y: auto;
}

.shadow {
	-moz-box-shadow: 0 0 10px #888;
	-webkit-box-shadow: 0 0 10px #888;
	box-shadow: 0 0 10px #888;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=0, Color='#808080')";
}


       /*** Content Styles ***/

.content-supertitle {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.content-title {
	margin-top: 0px;
	padding-top: 0px;

	font-family: 'Raleway', sans-serif;

	color: rgb(0,90,0);
	background-color: transparent;
}

.content-meta-info {
	margin-top: -10px;

	font-size: 14px;

	color: gray;
	background-color: transparent;
}

/* Book-style navigation footer used at the bottom of content written in series. */
.book-nav {
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;

	text-align: center;

	list-style-type: none;
	
	clear: both;
}
.book-nav-back, .book-nav-up, .book-nav-forward {
	position: relative;
	bottom: 0;

	display: inline;

	font-family: 'Raleway', sans-serif;
	font-size: 12px;
	white-space: nowrap;

	color: green;
	background-color: transparent;
}
.book-nav-back {
	text-align: left;
}
.book-nav-up {
	text-align: center;
}
.book-nav-forward {
	text-align: right;
}
.book-nav-spacer {
	padding-left: 10px;
	padding-right: 10px;

	display: inline;
}

.restricted-width-container {
	display: block;

	white-space: nowrap;
}

.code-block {
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 15px;	
	border-radius: 15px;

	display: block;
	overflow: auto;

	font-family: 'DejaVu Sans Mono', Consolas, 'Lucida Console', Menlo, Monaco, monospace, sans-serif;
	font-size: .9em; 
	line-height: normal;
	-moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
	text-align: left;
	white-space: pre;
	word-wrap: normal;

	/* Small screen: slight inset */
	margin-left: 20px;
	margin-right: 20px;
}

.bad-code {
	color: rgb(112, 32, 32);
	background-color: rgb(255, 221, 244); /* reds */
}

.good-code {
	color: rgb(0, 0, 160);
	background-color: rgb(226, 232, 255); /* blues */
}

.neutral-code {
	color: rgb(0, 0, 160); /* dark blue */
	background-color: #eeeeee; /* light grey */
}

.code-comment {
	color: green;
	background-color: transparent;
}


.console {
	color: #ffffff; /* white */
	background-color: #000000; /* black */
}

.book-navigation {
	height: 39px;
	display: block;
}

.scrolling {
	overflow: auto;
}

/* Overrides of Google Search styling because they ... are strange. */
.gsc-table-cell-snippet-close {
	padding-left: 8px !important;
}
.gsc-control-cse {
	padding: 0 !important;
}


.term {  /* An Avail term, such as would be defined in the Glossary */
	font-style: italic;

	color: purple;
}


  /*** Footer ***/

.footer-wrapper {
	padding-bottom: 30px;

	width: 100%;
	text-align: center;
}

.footer {
	padding-left: 6px;
	padding-right: 6px;

	display: inline-block;
	text-align: center;

	font-weight: 300;

	color: gray;
	background-color: transparent;
}

.footer-line {
	/* Prevent fellow lines from displaying on the same line in narrow windows */
	clear: both;
}

.footer-line-separator {
	/* Don't display when footer-lines are wrapping */
	display: none; 	
}


/* =============================================================================
   Width 768px to 899px
   ========================================================================== */

@media only screen and (min-width: 768px) {

	.header-wrapper {
		/* Left-align text against the logo */
		text-align: left;
	}

	.search-bar {
		position: absolute;
		top: 0;
		right: 0;

		padding-top: 28px;

		width: 220px;
	}
	
	.nav-wrapper {
		/* Float to the left of the content */
		float: left; 
	}
	
	.navigation {
		/* Readjust for left float */
		margin-top: 0px;
	}
	
	.content-wrapper {	
		/* To allow for floated navigation pane */
		margin-left: 160px;
/*		display: table-row;*/
	}
		
	.content {
		/* Set the white content pane in from the sides of the page, and have a 
		minimum height that is no shorter than the navigation menu */
		margin: 20px;
		margin-bottom: 30px;
	}
	
	.code-block {
		/* Set in farther since the page is larger */
		margin-left: 35px;
		margin-right: 35px;
	}
		
	.footer-line {
		/* Inline when the screen is wide enough */
		display: inline-block;
		clear: none;
	}

	.footer-line-separator {
		/* Display when footer-lines are not wrapping. */
		display: inline-block; 	
		clear: none;
	}
}


/* =============================================================================
   Width 900px to 999px  
   ========================================================================== */

@media only screen and (min-width: 900px) {

	.header-wrapper {
		/* Increase text to preferred size now that clearance is available */
		font-size: 24px;	
		line-height: 23px;
	}
}


/* =============================================================================
   Width 1000px and up
   ========================================================================== */

@media only screen and (min-width: 1000px) {

	.search-bar {
		width: 300px;
	}
	
	.nav-wrapper {
	
		/* Add additional margin to compensate for changes due to content width 
		restriciton. */
		margin-top: 20px;
	}

	.content-wrapper {	
		/* Larger space induces a right margin. This should match the left 
		margin from the narrower style. */
		margin-right: 160px;
		
		/* Allow the restricted-width content pane to be centered within the 
		window. */
		text-align: center;
	}

	.content {
		/* Increased padding when the screen width is a reasonable size */
		padding: 40px;
				
		/* Restrict the width of the content pane to improve readability on very 
		wide screens. */
		width: 100%;
		max-width: 1000px;
		display: inline-block;
		text-align: left;
	}
	
	.code-block {
		/* Set in even more fartherer since the page is way big */
		margin-left: 45px;
		margin-right: 45px;
	}
	
	.book-nav {
		/* Move the nav links slightly closer to the bottom of the content panel
		than on narrower screens, since the padding is larger. */
		margin-bottom: -10px;
	}

}