/* Makeshift CSS Reset */
{
    margin: 0;
    padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
    display: block;
}

body {
    margin: 0 2.0em;
    width: auto;
    font: 12px/18px verdana, sans-serif;
    background: rgb(255, 250, 220);
}

p {
    margin: 0px inherit;
    padding: 6px inherit;
    border: 1px gray none;
}

h1 {
	font-size: 200%;
	color: rgb(36, 70, 70);
	margin: 0px inherit;
	padding: 8px inherit;
	border: 1px gray none;
}

h2 {
	font-size: 170%; /* h2 is normally 150% */
	margin: 0px inherit;
	padding: 6px inherit;
	border: 1px gray none;
}
h3 {
	font-size: 140%; /* h3 is normally 120% */
	margin: 0px inherit;
	padding: 4px inherit;
	border: 1px gray none;
}
h4 {
	font-size: 120%; /* h4 is normally 100% */
 	margin: 0px inherit;
	padding: 2px inherit;
	border: 1px gray none;
}
h5 {
	font-size: 110%; /* h5 is normally 90% */
	margin: 0px inherit;
	padding: 1px inherit;
	border: 1px gray none;
}

a {
	text-decoration: none;
}
a.jump {
	background-color: rgb(36, 70, 70);
	color: white;
	padding-top: 2px;
	padding-bottom: 2px;
	-webkit-transition-duration: 0.5s;
}
a.jump:hover {
	color: rgb(36, 70, 70);
	-webkit-transition-duration: 0.5s;
}

a.external:hover {
	cursor: url("away.png"), ne-resize; /* a 'generic' cursor must be included at the end. */
}

/* SIZERS, ETC. */
.p70 { font-size: 70%; line-height: 11px; -webkit-transition-duration: 0.1s; }
.p80 { font-size: 80%; line-height: 12px; -webkit-transition-duration: 0.1s; }
.p90 { font-size: 90%; line-height: 14px;}
.p110 { font-size: 110%; }
.p120 { font-size: 120%; }

.p70:hover,
.p80:hover {
	font-size: 100%;
	-webkit-transition-duration: 0.1s;
}

.bold {font-weight: bold; !important }

/* SPANNERS & POSITIONERS */
.right {
	text-align: right !important;
	float: right !important;
	border: thin yellow none;
}
.left {
	text-align: left !important;
	float: left !important;
	border: thin yellow none;
}
.center {
	text-align: center !important;
	/* there is no 'float: center' */
	border: thin yellow none;
}

div.indent,
.inset {
	position: relative;
	padding-left: 10px !important;
}

/* FLOATERS */
.f-left {
	padding: 0.2em;
	margin: 0 0.5em 0.2em 0;
	float: left;
	clear: both;
}
.f-right {
	padding: 0.2em;
	margin: 0 0 0.2em 0.5em;
	float: right;
	clear: both;
}
.clear {
	clear: both;
}

/* SIDEBAR */
.sidebar {
	font: 7px/8px serif;
	text-align: justify;
	width: 16%;
	float: right;
	padding: 3px 6px;
	margin: 2px 0 2px 12px;
	color: black;
	background-color: rgb(139, 190, 190);
	border: 1.0px solid black;
	border-radius: 2px;
	-transition-property: width font background-color;
	-webkit-transition-duration: 0.5s;
	clear: both;
}
.sidebar:hover {
	font: 12px/16px serif;
	width: 25%;
	background-color: rgb(156, 207, 207);
	-webkit-transition-duration: 0.2s;
}

.sidebar a.script {
	font-size: inherit;
}
.sidebar a.script:hover {
	font-family: serif;
	font-size: inherit;
}


.sidebar .a123,
.sidebar .adg {
	background-color: rgb(139, 190, 190) !important;
	border: 1px rgb(115, 159, 159) solid !important;
	padding: 0px 2px !important;
	margin: 0px;
}
	.sidebar:hover .adg {
		background-color: rgb(228, 228, 244) !important;
		border: 1px purple solid !important;
	}
	.sidebar:hover .a123 {
		background-color: rgb(228, 244, 228) !important;
		border: 1px green solid !important;
	}

div.sidebar {
	margin: 6px;
	padding: 0px;
}
p.sidebar code,
div.sidebar code {
	line-height: 8px;
	padding: 0px 2px !important;
	margin: 0px !important;
}
p.sidebar code.script,
div.sidebar code.script {
	white-space: normal;	/* not sure why this has to be inside a code.script, but it does. */
}
div.sidebar ul {
	padding-left: 18px;
	padding-right: 6px;
}
div.sidebar ol+p,
div.sidebar ul+p {
	margin-top: -6px; 	/* -val compensates for padding after preceding paragraph */
}

/* LIGHTBOX */
.lightbox2 {
	width: 25%;
	padding: 0px;
	margin: 2px 0 2px 12px;
	border: 1.0px solid black;
	text-align: center;
	background-color: rgb(228, 228, 228);
	border-radius: 4px;
}

.lightbox2:hover{
	background-color: rgb(208, 208, 208);
}
.lightbox2 a {
	text-decoration: none;
}
.lightbox2 a:visited {
	color: inherit;
}
.lightbox2 a:hover {
	color: blue;
}

.lightbox2 img {
	display: block;
	margin: 2px 2px 0 2px;
	border: 1.0px brown none;
}

img+span,
.lightbox2 a span {
	display: block;
	font: 8px/10px verdana;
	font-weight: bold;
	vertical-align: top;
	border: none;
}

.box-15 {
	width: 15% !important;
}

.framed {
	padding: 0px;
	margin: 2px 0 2px 12px;
	border: 1.0px solid black;
	text-align: center;
	background-color: rgb(0, 228, 228);
}

/* BODY ELEMENTS*/

header {
    margin-top: 6px;
    padding: 10px 30px;
    background: rgb(36, 70, 70);
    border-radius: 20px 20px 0 0;
    color: rgb(235, 209, 144);
    text-shadow: black 2px 2px 1px;
}
	header h2 {
	    font-size: 28px;
    	font-weight: bold;
		padding: 0;
		margin: 10px 0;
	}
#banner {
    margin-top: 0px;
    padding: 6px 16px;
    background: black;
    color: white;
}
	#banner p {
		text-align: left;
		font: 12px verdana, sans-serif;
		font-weight: bold;
		margin: 0;
		padding: 0;
	}

/* EVERYTHING BETWEEN HEADER AND FOOTER */
#content {
	width: 100%;
	position: relative;
    display: table;
   	border: thin rgb(36, 70, 70) solid;
    background: rgb(244, 244, 244);
}

	#content .a123,
	#content .adg {
		position: relative;
		font-size: 70%;
		font-weight: normal;
		padding: 0px 3px;
	}
	#content .adg {
		background-color: rgb(228, 228, 244);
		border: 1px purple solid;
	}
		#content .adg:before {
		/*	content:'ADG:';	*/
		}
		#content .adg:hover:before {
			content:'AppleScript, the Definitive Guide: Page ';
		}

	#content .a123 {
		background-color: rgb(228, 244, 228);
		border: 1px green solid;
	}
		#content .a123:before {
		/*	content:'A123:'; */
		}
		#content .a123:hover:before {
			content:'AppleScript 1-2-3: Page ';
		}

.update {
	font-size: 90%;
	font-weight: bolder;
	background-color: rgb(228, 244, 211);
}
.update:before {
	content:'Update: ';
}

div.question {
	border-top: thin black dotted;
	padding-top: 1.0em;
	padding-bottom: 0.2em;
	padding-left: 1.5em;
	text-indent: -1.4em;
	font-weight: normal;
	background-color: rgb(228, 244, 211);
}
div.question:before {
	content:'Q: ';
	font-weight: bolder;
}
div.answer {
	border: thin solid rgb(186, 201, 174);
	margin: 0.4em 0.6em 0 0;
	font-weight: normal;
	background-color: rgb(250, 250, 250);
}
div.answer p {
	font-size: 90%;
	margin: 0 0.4em;
	padding: 0.1em;
	text-indent: 0em;
}
div.answer p:before {
	content:'A: ';
	font-weight: bolder;
}

div.answer p.script {
	margin-bottom: 0.7em;
}

p.noa {	margin-left: 0.4em !important; }
p.noa:before,
div.answer p+p:before {
	color: rgb(250, 250, 250);
	content:'' !important;
}
div.answer ol {
	padding-top: 0.5em;
	padding-right: 1em;
	padding-bottom: 0.5em;
	font-size: 90%;
	text-indent: 0em;
}

/* THE ARTICLE SECTION */
#mainContent {
	display: table-cell;
	width: auto;
	padding: 0px 8px;
	overflow: auto;
	border: 1px brown none;
}

#mainContent h2,
#mainContent h3 {
	padding-top: 6px;
}

#mainContent a,
#mainContent a:visited {
	font-size: 95%;
	background-color: rgb(228, 228, 244);
	border-bottom: 1px rgb(36, 70, 70) dotted;
	-webkit-transition-duration: 0.3s;
}
#mainContent a:hover {
	background-color: rgb(204, 204, 221);
	-webkit-transition-duration: 0.3s;
}

#mainContent #directory p a {
	font-weight: bolder;
	border-bottom: none;
}

#mainContent #directory ul li {
	line-height: 100%;
}

#mainContent #directory ul li a {
	font-size: 90%;
	background-color: inherit;
	border-bottom: none;
	-webkit-transition-duration: 0.3s;
}

#mainContent #index a.code {
	font-family: monaco, monospace;
	font-size: 90%;
}

.amazon a,
.amazon a:visited {
	background-color: inherit;
}

#mainContent p.script+p,
#mainContent p+ul,
#mainContent p+ol {
	margin-top: -6px; 	/* -val compensates for padding after preceding paragraph */
	margin-bottom: 0px;
}
#mainContent h5+ul {
	margin-top: -2px; 	/* -val compensates for padding after h5 */
	margin-bottom: 0px;
}

#mainContent .app {
	color: rgb(68, 7, 0);
	font-size: 95%;
	font-weight: 600;
}

#mainContent a.internal {
	color: rgb(40, 65, 87);
	font-size: 95%;
	font-style: italic;
}

/* PAGES */
#page1 {
	display: block;
	border: 1px green none;
}
#page2 {
	display: none;
	border: 1px green none;
}
#page2fancy {
	display: block;
	height: 0px;
	overflow: hidden;
}

#page3 {
	display: none;
	border: 1px green none;
}
#page4 {
	display: none;
	border: 1px green none;
}
#page5 {
	display: none;
	border: 1px green none;
}
#page6 {
	display: none;
	border: 1px green none;
}
#page7 {
	display: none;
	border: 1px green none;
}
#page8 {
	display: none;
	border: 1px green none;
}
#page9 {
	display: none;
	border: 1px green none;
}
#page10 {
	display: none;
	border: 1px green none;
}
#page11 {
	display: none;
	border: 1px green none;
}
#page12 {
	display: none;
	border: 1px green none;
}
#page13 {
	display: none;
	border: 1px green none;
}
#page14 {
	display: none;
	border: 1px green none;
}
#page15 {
	display: none;
	border: 1px green none;
}
#page16 {
	display: none;
	border: 1px green none;
}
#page17 {
	display: none;
	border: 1px green none;
}
#page18 {
	display: none;
	border: 1px green none;
}
#page19 {
	display: none;
	border: 1px green none;
}

/* TOC */
aside {
	display: table-cell;
	position: relative;
	font-size: 9px;
	line-height: 10px;
	font-weight: bold;
	width: 120px;
	min-width: 120px;
	height: 500px;
	padding-right: 0px;
	background-color: rgb(224, 224, 224);
	overflow: hidden;
	z-index: 2;
	vertical-align: 0px;
}

aside p.iti {
	background-color: rgb(36, 70, 70);
	color: white;
	text-align: left;
	font: 10px verdana, sans-serif;
	font-weight: bold;
	white-space: nowrap;
	padding: 3px 6px;
}

aside p.iti a {
	background-color: rgb(36, 70, 70);
	color: white;
	text-align: left;
	font: 10px verdana, sans-serif;
	font-weight: bold;
	white-space: nowrap;
	padding: 0;
	border: none;
	text-decoration: none;
}

aside a {
	position: relative;
	display: block;
	color: #000;
	background-color: rgb(224, 224, 224);
	padding: 6px 8px;
	text-decoration: none;
	border: 1px solid rgb(208, 208, 208);
	overflow: hidden;
	z-index: 3;
	-webkit-transition-duration: 0.2s;
}

aside a:hover {
	color: #446666;
	font-weight: bold;
	background-color: rgb(208, 208, 208);
	-webkit-transition-duration: 0.2s;
}

aside #credits {
	position: absolute;
	bottom: 0px;
	display: block;
	max-width: 116px;
	margin: 2px 2px 2px 1px;
	background-color: rgb(232, 232, 232);
	border: 1px rgb(224, 224, 224) solid;
	overflow: hidden;
	z-index: 1;
}

aside #credits p {
	overflow: hidden;
	font: 8px verdana, sans-serif;
	padding: 2px 3px;
	margin: 2px 2px;
	white-space: normal;
	text-indent: -2px;
}
aside #credits p a {
	background-color: rgb(232, 232, 232);
	padding: 0;
	margin: 0;
	border: none;
}

aside #credits a:hover {
	color: rgb(0, 0, 136);
	font-weight: normal;
	background-color: inherit;
}
aside #credits em {
	font-weight: bold;
}

/* SCRIPTS */
span.mono {
	border: 1px red none;
	background-color: rgba(220, 220, 220, 0.7);
	white-space: pre-wrap;
	font: 11px/12px monospace;
	text-decoration: inherit;
}
.script {
	background-color: rgba(251, 255, 218, 0.7);
	white-space: pre-wrap;
	font: 11px/12px monospace;
	margin: -4px 20px 2px 16px;
	/* -val compensates for 12px padding after preceding paragraph */
	padding: 0 0 4px 4px;
	text-decoration: inherit;
	border-top: 1px rgb(153, 153, 153) dashed;
	border-bottom: 1px rgb(153, 153, 153) dashed;
/*	white-space: nowrap; */ /* DO NOT add a nowrap; it messes up the borders */
}

p.mono:first-line,
p.script:first-line { /* Make code look decent: no need to put the first line on the line with the p tag */
	line-height: 1px;
}
code,
code.script
 {
	vertical-align: 0px; /* needs slight shift (up) */
	border-top: none;		/* turn off dashes */
	font-size: inherit;	/* get this from 'parent' */
	margin: inherit;
	padding: 0px 1px;
	white-space: nowrap;
}

a.script {
	font-family: serif;
	display: inline;
	font-size: 12px;
	padding: 0 3px;
	margin: 0;
	background-color: rgb(251, 255, 218) !important;
	border: 1px rgba(100, 128, 100, 0.4) solid !important;
	-webkit-transition: 0.3s;
}
a.script:hover {
	font-size: 24px;
	-webkit-transition: 0.5s;
}

div.tableholder	{
	margin: 0px inherit;
	padding: 0 0 0 40px;
}

.tablecaption {
	text-align: left;
	font-size: 10px;
	font-weight: bold;
	padding-left: 2px;
}
.tablebox {
	border-top: 1px rgb(36, 70, 70) solid;
	border-left: 1px rgb(36, 70, 70) solid;
	margin-bottom: 6px;
}
.tablebox td {
	padding: 1px 6px;
	font: 90% monospace;
	vertical-align:middle;
	border-bottom: 1px rgb(36, 70, 70) solid;
	border-right: 1px rgb(36, 70, 70) solid;
}

/* FOOTER */
footer {
    margin-top: 0px;
    margin-bottom: 6px;
    padding: 8px;
    background: black;
    color: white;
}

footer p {
	text-align: center;
    font: 10px verdana, sans-serif;
    margin: 0;
    padding: 0;
}

/* COMMENT FORM */
form {
	margin-top: 21px;
	padding-top: 22px;
	border-top: 1px solid rgb(232, 232, 232);
}

	form p {
		display: table;
		margin: 6px 0;
		padding: 0 12px;
	}

		form label {
			display: table-cell;
			width: 100px;
			padding-right: 10px;
			font-size: 11px;
			text-align: right;
			font-weight: bold;
			vertical-align: top;
		}
	
		form textarea {
			width: 500px;
			height: 200px;
			border: 1px solid rgb(232, 232, 232);
		}
		
		form input[type="text"],
		form input[type="email"],
		form input[type="url"] {
			display: table-cell;
			width: 300px;
			height: 20px;
			border: 1px solid rgb(232, 232, 232);
		}
		
		form input[type="submit"] {
			margin-left: 110px;
		}

/* EXTRAS -- UNUSED, BUT POTENTIALLY USEFUL */

.lined {
	text-decoration: underline overline;
}

.list a:nth-child(even) {
	background-color: rgb(240, 240, 240);
}

div.hide { /* why this disturbs script styles in sidebars, I have no clue. As long as there is no .hide div in the page, it looks fine. */
	display: none;
}

p.tight {
	border: thin green none;
	margin: -6px inherit;
}

div#flipper {
	z-index: 1;
}

#pageprev {
	position: fixed;
	left: 1%;
	bottom: 16px;
	opacity: 0.75;
	background-color: #f4f4f4;
	padding: 1px 1px 1px 2px;
	border: thin solid #999;
}
#pagenext {
	z-index: 1;
	position: fixed;
	right: 1%;
	bottom: 16px;
	opacity: 0.75;
	background-color: #f4f4f4;
	padding: 1px 1px 1px 2px;
	border: thin solid #999;
}

.tile {
	border: thin black solid;
	border-radius: 0.3em;
    font-family: verdana, sans-serif;
    padding: 0.2em 0.4em;
    background-color: rgb(213, 224, 240);
    white-space: nowrap;
    -webkit-box-shadow: 0.1em 0.1em 0.1em rgb(40,40,40);
}

p+p.inset,
p+ul,
p+ol {
	margin-top: -0.6em;
	padding-top: 0;
}

div.entry-details table	{
	margin-left: 1.0em;
	margin-right: 1.0em;
}
table.dictionary {
	margin-left: 2.0em;
	margin-right: 1.0em;
}

div.entry-details table tr td.tablehead {
	font-weight: bold;
}

div.entry-details table tr td.tablehead,
table.dictionary th {
	background-color: rgb(220,220,220);
}

div.entry-details table tr td.tablehead, 
div.entry-details table tr td.tabletext, 
table.dictionary th,
table.dictionary td {
	min-width: 5.0em;
	text-align: left;
	border: 1px solid #4b4b4b;
	font-size: 0.85em;
	line-height: 1.1em;
	padding: 0.3em 0.2em;
	white-space: nowrap;
	vertical-align: top;
}

div.entry-details table tr td.tabletext, 
table.dictionary td.desc {
	white-space: normal;
}
table.dictionary td.type {
	min-width: 8em;
	color: blue;
	white-space: normal;
	padding: 0.3em 0.5em 0.3em 0.2em;
}

/* SCRIPT DEBUGGER SIMULATION */
#mainContent div.entry a,
#mainContent div.sd a {
	color: blue;
	background-color: inherit;
	border-bottom: none;
}
#mainContent div.sd p.code a {
	font-style: italic;
}

span.annot { font-style: italic; }
span.description:before { content: " : "; }
span.name {	font-weight: bold; }

div.entry,
.sd {
	border: thin solid rgb(213,224,240);
	background: rgb(253,255,255);
	margin: 0.3em 0.3em 0.3em 1.0em;
	padding-bottom: 1.0em;
}

.sd .mixed {
	text-transform: none;
}
.sd .plain {
	font-weight: normal;
	font-style: normal;
}
div.entry h2,
.sd .tt {
	font: bolder 1.5em/1.5em serif;
	text-indent: -0.4em;
	text-transform: uppercase;
}

div.indent,
div.entry div.entry-details p.entry,
.sd .sum {
	font: 1.0em/1.0em serif;
	margin: 0.2em 0.3em 0.2em 1.0em;
	padding: 0.2em;
}

div.indent p.item {
	padding: 0em;
}

div.entry h3,
.sd .st {
	font: bolder 1.2em/1.2em serif;
	text-transform: uppercase;
	margin: 0.2em 0.3em 0.2em 1.0em;
	padding-top: 0.4em;
	padding-bottom: 0;
}
.sd .res {
	font: 1.0em/1.0em serif;
	padding-top: 0.2em;
	padding-bottom: 0;
}
.sd .code {
	white-space: pre-wrap;
	font: 0.8em/1.4em monaco, monospace;
	padding: 0 0 0.3em 0.3em;
}

.sd table.dictionary { margin-top: 0.2em; margin-left: inherit; }
.sd .optional { color: rgb(128,128,128); }

.sd table.dictionary tr th.pc01,
.sd table.dictionary tr th.ec01 {
	width: 12.0em;
}

.sd table.dictionary tr th.ec02,
.sd table.dictionary tr th.pc02 {
	width: 3.0em;
}

.sd table.dictionary tr th.ec03,
.sd table.dictionary tr th.pc03 {
	width: 9.0em;
}
.sd table.dictionary tr th.cc01 {
	width: 15.0em;
}

.sd .type {
	color: blue;
	white-space: normal;
}

.sd .inset {
	margin-left: 2.5em;
}

.sd .inset * {
	margin-left: 0;
}

.temp {
	font-style: italic;
	border: thin red dotted;
}

.new70 {
	/* opacity: 0.5 !important; */
}
.new70:before {
	content: "7.0 Required";
	color: yellow;
	background-color: #444444;
	font-weight: bold;
	font-size: 0.8em;
	margin-right: 0.4em;
}

.faded {
	opacity: 0.5 !important;
	border: thin dotted red;
}