@import url("../fonts/opensans/opensans.css");

html {
	padding: 0;
	background-color: #efefeb;
	color: #272727;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 90%;
	line-height: 175%;
}

html.no-js > body,
html.js > body {
	display: block;
}

html.desktop,
html.notebook,
html.pad.landscape {
	padding: 0 8px;          /* Note "margin:auto" is specified on BODY ... */
	background-image: url(../image/visible_bg1.png);
	background-attachment: fixed;
	background-repeat: repeat;
}

html.phone,
html.pad.portrait {
	padding-left: 0;
	padding-right: 0;
}

html > body {
	margin: 0 auto;
	min-width: 736px;
	max-width: 920px;
	background-color: #ffffff;
}

html > body > div {
	display: block;
	position: relative;
}

html > body * {
	margin: 0;
	padding: 0;
	border: 0;
}

img {
	display: block;
}

div.page ul {
	padding-right: 2.5em;
	list-style: outside disc;
}
div.page ul li {
	position: relative;
	margin-left: 0;
	left: 2em;
}​

p,h1,h2,h3,h4,h5,h6 {
	margin: 0.5em 0em;
}

h1,h2,h3,h4,h5,h6,dl > dt {
	color: #000000;
	line-height: 1.2em;
}

html > body .noscreen {
	display: none;
}

html.desktop > body,
html.notebook > body,
html.pad.landscape > body {
	margin: 12px auto;
/*	box-shadow: 0 2px 4px 3px rgba(199,199,199,0.5); */
	box-shadow: 1px 2px 4px 2px rgba(175,175,175,0.33);
	border-radius: 8px;
}

html > body > div#masthead,
html > body > div.footer {
	background-color: #000000;
	color: #cfcfcf;
}

html > body > div.footer {
	clear: both;
}

/* Note: min-width 736px here! */
html > body > div#masthead {
	display: block;
	padding-top: 14px;
	height: 242px;
	overflow: hidden;
}

html.desktop >  body > div#masthead,
html.notebook > body > div#masthead,
html.pad.landscape > body > div#masthead {
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

html > body > div#masthead {
	padding-bottom: 32px;
	background-image: url(../image/tekapo.jpeg);
	background-position: center 128px;
	background-repeat: no-repeat;
}

html > body > div#masthead > #mastlogo {
	display: block;
	height: 100px;
	color: transparent;
	background-image: url(../image/masthead.png);
	background-position: center 0;
	background-repeat: no-repeat;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}

html > body > div#masthead > div#heading {
	position: relative;
	top: 142px;
	border-bottom: 1px solid #cfcfcf;
	width: 100%;
	background-color: #efefef;
	background-image: url(../image/noise_light.png);
	background-attachment: scroll;
	background-repeat: repeat;
	color: #005fef;
}
html > body > div#masthead > div#heading > h1#doccaption {
	display: table-cell;
	padding-left: 48px;
	height: 31px;
	vertical-align: middle;
	font-size: 15px;
	font-weight: bold;
	color: inherit;
}

html > body > div.footer {
	border-top: 0px solid #d7d7d7;
	padding: 7px 12px 8px 12px;
	text-align: center;
	font-size: x-small;
	font-weight: bold;
	line-height: 135%;
	color: #9f9f9f;
}

html.desktop > body > div.footer,
html.notebook > body > div.footer,
html.pad.landscape > body div.footer {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/*
Note: 224px vertical offset of wrapper allows content to be pulled up
to overlay the masthead (e.g. nav menu), while still retaining overflow:hidden
on the wrapper div. Corresponding adjustment to "div.wrapper:after" top
margin to adjust top of sidebar background. Somewhat of a hack, but as
CSS-based layout relies on a series of hacks holding hands to do anything
non-trivial, it's only a matter of degree.
*/
html > body > div.wrapper {
	overflow: hidden;
	top: -224px;
	margin-bottom: -224px;
	padding: 224px 228px 0 48px;
}

html > body > div.wrapper > div {
	position: relative;
	overflow: hidden;
}

html > body > div.wrapper img {
	margin: 1em auto;
}

html > body > div.wrapper > div.column,
html > body > div.wrapper > div.nav {
	float: left;
	margin-top: 0;             /* H1 Area Offset (total height thereof) */
	padding-top: 12px;         /* Just the padding wanted */
	padding-bottom: 12px;      /* Just the padding wanted */
}

html > body > div.wrapper > div.page {
	padding-bottom: 36px;
	width: 100%;
	min-height: 672px;
}

html > body > div.wrapper > div.sidebar {
	padding-top: 0;
	padding-bottom: 0;
}

html > body > div.wrapper > div.column.sidebar,
html > body > div.wrapper > div.nav {
	float: right;
	clear: right;
	z-index: 1;
	margin-left: 37px;         /* Main column "right padding" + local border */
	margin-right: -228px;      /* Per padding-right of "wrapper" */
	padding-left: 17px;        /* Internal padding as desired - local border */
	padding-right: 30px;       /* Internal padding as desired */
	width: 144px;              /* Net width (i.e. less padding & border */
	font-size: 95%;
}

/* Example: lift nav out of body and overlay (within offset wrapper)
   on top of masthead with absolute positioning.
   NOTE: this is a relatively evil hack, such that the wrapper can still
   have "overflow: hidden" to avoid need for clearfix, which in turn, would
   then conflict with use of :after on wrapper to place background for
   sidebar. In short, whack-a-mole, basically ...
   SEE: top padding and top/bottom margin offset on "wrapper" div, and
   offset on wrapper:after, all of which should correlate to the amount of
   vertical scope shift of the wrapper div!
   IMPORTANT: if activating this, note that above section should not
   apply to div.nav!
html > body > div.wrapper > div.nav {
	position: absolute;
	top: -48px;
	right: 32px;
	background-color: #f7fff7;	
}
*/

html > body > div.wrapper:after {
	display: block;
	position: absolute;
	margin-top: 224px;          /* H1 Area Offset (total height thereof) */
	border-left: 1px solid #d7d7d7;
	width: 191px;              /* Total width less border width from above */
	top: 0; bottom: 0;
	right: 0;
	background: #fcfcfc;
	background-image: url(../image/noise_light.png);
	background-attachment: scroll;
	background-repeat: repeat;
	content: "";
}

html > body > div.wrapper > div.nav {
	line-height: 125%;
}

html > body > div.wrapper > div.nav > ul > li {
	color: #1f1f1f;
}

html > body > div.wrapper > div.nav > ul > li > a,
html > body > div.wrapper > div.nav > ul > li > p {
	font-size: 120%;
	color: #000000;
}
html > body > div.wrapper > div.nav > ul > li > a:hover {
	color: #3f6fff;
}

html > body > div.wrapper > div.nav  ul > li > p.target {
	color: #5787ff;
}

html > body > div.wrapper > div.nav > ul {
	padding: 1em 0;
	border-top: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
}

html > body > div.wrapper > div.sidebar > div.sidebox {
   display: block;
   margin-top: 0.5em;
	border-bottom: 1px solid #e7e7e7;
   padding: 0.5em 6px 1.5em 6px;
   color: #6f6f6f;
   line-height: 125%;
}
html > body > div.wrapper > div.sidebar > div.sidebox.feature img {
	box-shadow: 1px 1px 6px 3px rgba(175,175,175,0.5);
	border-radius: 12px;
}

html > body > div.wrapper > div.page abbr,
html > body > div.wrapper > div.page a:link,
html > body > div.wrapper > div.page .IEtitle {
   font-style: inherit;
   color: inherit;  
}

html > body > div.wrapper > div.page div.floatright,
html > body > div.wrapper > div.page img.floatright {
	float: right;
	margin: 0.5em 0 1em 2em;
	padding: 8px;
}

html > body > div.wrapper > div.page div.floatleft,
html > body > div.wrapper > div.page img.floatleft {
	float: left;
	margin: 0.5em 2em 1em 0;
	padding: 8px;
}

html > body > div.wrapper > div.page div.promobox {
	margin: 1.5em 0 0.5em 2em;
	padding: 0.5em 1.5em 0.5em 1.5em;
	float: right;
	width: 256px;
	font-size: 90%;
	text-align: left;
	line-height: 160%;
}
html > body > div.wrapper > div.page div.promobox h2 {
   margin: 0;
   padding: 0.5em 0.5em 0 0.5em;
}
html > body > div.wrapper > div.page div.promobox p,
html > body > div.wrapper > div.page div.promobox ol,
html > body > div.wrapper > div.page div.promobox dl,
html > body > div.wrapper > div.page div.promobox dt,
html > body > div.wrapper > div.page div.promobox dd,
html > body > div.wrapper > div.page div.promobox li {
   margin-top: 6pt;
   margin-bottom: 9pt;
}

/* ---------------------------------------------------------- */

html > body > div.wrapper > div.page table {
   table-layout: fixed;
   border-collapse: collapse;
   empty-cells: show;
   caption-side: bottom;
   border: 0px solid #6f6f6f;
   width: auto;
   margin: 18px 4px 18px 4px;
}
html > body > div.wrapper > div.page table tr th,
html > body > div.wrapper > div.page table tr td {
   padding: 4px 12px;
   text-align: left;
}
html > body > div.wrapper > div.page table th,
html > body > div.wrapper > div.page table td {
   font-style: normal;
   font-weight: normal;
   line-height: normal;
}
html > body > div.wrapper > div.page table thead tr th {
   background-color: #f3f3f3;
   font-size: small;
   font-style: normal;
   font-weight: bold;
   line-height: normal;
   padding-top: 3px;
   padding-bottom: 3px;
   vertical-align: bottom;
}
html > body > div.wrapper > div.page table tbody tr th,
html > body > div.wrapper > div.page table tbody tr td {
   border-top: 1px solid #999999;
   vertical-align: baseline;
}
html > body > div.wrapper > div.page table tbody tr.first th,
html > body > div.wrapper > div.page table tbody tr.first td {
   border-top: 1px solid #666666;
}