html, body, table {
	margin: 0;
	padding: 0;
	font-size: 100%;
}
object, iframe, blockquote, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, fieldset, form, legend, table, captiontxt, th, td {
	margin: 0;
	padding: 0;
	border:none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
th, td {
	text-align: left;
	font-weight: normal;
	vertical-align:top;
}
ol, ul {	list-style: none;}
/* clear extra padding on moz inputs */
input[type="submit"]::-moz-focus-inner {
 padding: 0;
 border: none;
}
input, textarea, select, label {
	font-family:Arial; /* set font-family for IE*/
	vertical-align:middle;
}
strong, b { font-weight:bold}/* firefox default is not normal bold so reset it here*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
a img, img {
	border:none;/* remove borders from linked images*/
	display:block
}
/* end reset styles */
/* mac hide \*/
html,body{height:100%}
/* end hide*/

h1,h2,h3,h4,h5,h6{
	font-weight:bold;
	font-size:120%
}
h1{font-size:140%}
p,h1,h2,h3,h4,h5,h6,ul{margin-bottom:1em}
h3{margin:1em 0 .5em 0;}
ul{list-style:none;}
h2{	
	background:#fff ;
	color:#00c1c0;
	text-align:center;
	font-size:140%;
}
.to-top{clear:both;margin:1em 0;}
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background:#00c1c0 url(images/main-bg.jpg) fixed repeat-x left top;
	color:#000;
	line-height:1.4;
	font-size:88%;
}
#outer{
	width:90%;
	min-width:500px;
	margin:0 0 0 4.5%;
	text-align:left;
	color:#000;
	border-left:2px double #000;
	border-right:2px solid #000;
	min-height:100%;
 float:left;
	display:inline;
	background:#00c1c0 url(images/side-stripe2.jpg) repeat-y 15.9999em 0;
}
#nav p{
	text-align:left;
	margin:30px 0;
	color:#fff;
	width:15em;
	line-height:1.4;
}
#nav p.privacy{
	margin:5px;
	text-align:center;
}
#nav{
	width:18.1em;
	float:left;
	margin-left:-18em;
	margin-right:-3px;
	position:relative;
	display:inline;
	text-align:left;
	padding:5em 0 0;
}
#content{
	float:right;
	width:100%;
	color:#000;
}
#content p {line-height:1.4em;}
#main{	
	margin:0 .7em 0 18em;
	padding:0 0 1em 0;	
	position:relative;
}
#header{
	background:#fff url(images/top-fade.jpg) repeat-x left top;
	position:relative;
	margin:0 0 1em 16em;
	height:108px;
 overflow:hidden;
}
h1#logo{
	color:#d2da9c;
	font-size:200%;
	margin:0;
	white-space:nowrap;
}
h1#logo a{
	padding:37px 0 0 240px;
	background: url(images/logo-new.jpg) no-repeat 0 0;
 display:block;
 color:#4c7300;
	text-decoration:none;
	height:71px;
 position:relative;
}
h1#logo a span{
	position:absolute;
	bottom:1.6em;
	left:225px
}
ul#sidenav {
	width:15em;
	margin:-11em 0 10px 6px;
	position:fixed;
	text-align:left;
}
ul#sidenav li{
	background:#809900;
	width:15em;
	text-align:left;
	position:relative;
	color:#fff;
}
ul#sidenav li a{
	background:#809900;
	width:15em;
	color:#fff;
	text-decoration:none;
	display:block;
	padding:5px 0;
	font-weight:bold;
	border-bottom:1px solid #eff2df;
	text-indent:10px;
}
.homepage ul#sidenav li.home a{cursor:default}
ul#sidenav li a:hover{
	background:#eff2df;
	color:#4c7300;
}
#nav p{position:fixed;margin-left:10px}
#nav p a{color:#f2f2f2!important}
#nav p.privacy a{font-weight:bold}
ul.demos{
	list-style:none;
}
ul.demos li{
	width:15em;
	border:1px solid #000;
 background:#e9eccd;
	margin:.5em;
	display:inline-block;
	vertical-align:top;
}
ul.demos li a{
	text-decoration:none;
	display:block;
	padding:5px;
	min-height:8em;
}
ul.demos span{
	margin-bottom:.3em;
	display:block;
	font-weight:bold;
	text-decoration:underline;
}
ul.demos li a:hover{background:#809900;color:#fff;position:relative}
.intro{clear:both}
p.intro{padding:2em 0 0}
p.intro::first-letter,
p.intro2::first-letter{
	font-size:5em;
	float:left;
	font-weight:bold;
	color:#809900;
	padding:3px 5px 2px 0;
}

/* use for code sections*/
.code{
	border:1px solid #000;
	margin:0 25px 25px;
	background:#406700;
	clear:both;
	padding:10px;
	color:#fff;
	text-align:left;
	word-wrap:break-word;
	word-break:break-word;
}
/* set body id's to control nav highlight - for future expansion*/
body#home ul#sidenav li.home a{background:#eff2df;color:#4c7300}
body#threecol ul#sidenav li.threecol a{background:#eff2df;color:#4c7300}
body#tute ul#sidenav li.tute a{background:#eff2df;color:#4c7300}
body#contact ul#sidenav li.contact a{background:#eff2df;color:#4c7300}

ul#breadcrumb{margin:10px 0}
ul#breadcrumb li{display:inline;font-weight:bold;padding:0 5px;}
ul#breadcrumb li a{text-decoration:underline;color:#809900}


/* ie mac only styles \*//*/
#nav{margin-left:-18em;}
/* end iemac styles*/

/* explain overlapping tabs */
ul.explaintab{list-style:none;margin:1em 0}
ul.explaintab li{margin:10px 0;clear:both}
ul.explaintab p img {float:left;margin:5px 5px 5px 0}

/* vertical center page */
#xinner #header{
	background:#fff url(images/top-fade.jpg) repeat-x left top;
	position:relative;
	margin:0 0 1em 0;
	height:108px;
 overflow:hidden;
}
#xinner h1#logo a{
	padding:37px 0 0 240px;
	background: url(images/logo-new.jpg) no-repeat -4px 0;
 display:block;
	color:#00c1c0;
	text-decoration:none;
	height:71px;
}

/* caption - image with text to the side page */
dl.capclear{
	margin:10px auto;
	width:38em;
	text-align:left;
	border:1px solid #000;
	background:#00c1c0;
}
dl.capclear dt {float:left;margin:5px;display:inline;}
dl.capclear dd{
	font-size:120%;
	font-weight:bold;
	margin:1em 0
}
/* some styling below not needed for demo */
dl.capclear dd span{
	float:left;
	width:8em;
	text-align:right;	
	padding-right:10px;
	font-style:italic;
}
/* */
.older-stuff li{
	line-height:1.4;
	font-weight:bold;
	margin:1em 0 0 0;
}
.older-stuff li li{font-weight:normal;margin:0}

/* goggle ads */
.google-ad1{
	width:120px;
	margin:120px 0 10px 45px;
	position:fixed;
}
* html .google-ad1{margin-top:20px}

ul.dart{
	list-style:square;
	margin:25px 0 15px 30px;
	padding:0;
	line-height:1.4;
}
ul.dart li{
	margin:5px 100px 5px 0;
}
/* author badge */
.badge{
	position:fixed;
	margin:370px 0 0 15px
}
.badge a{text-decoration:none}
/* */
.apology{display:none}

@media screen and (max-width:762px) {
	.older-stuff, .useful {
		word-wrap:break-word;
		word-break: break-word;
		overflow:hidden;
	}
	.older-stuff li li a {
		word-wrap:break-word;
		word-break: break-word;
	}
	#outer {
		border-bottom:2px solid #000;
		background:#fff;
	}
	#main {
		margin:0;
		background:#fff;
		padding:0 10px
	}
	#header {
		margin:0;
		padding:0 0px 2em
	}
	h1#logo a {
		background-position:-10px 0;
	}
	#content {
		float:none
	}
	#nav {
		position:static;
		width:100%;
		margin:2em 0;
		padding:2em 0;
		border-top:1px dotted #000;
		float:none;
		display:block;
	}
	#nav p{width:auto}
	ul#sidenav {
		margin:0;
		position:static;
		color:#000;
		width:auto;
	}
	ul#sidenav li {width:auto}
	ul#sidenav li a {width:auto}
	#nav p {
		position:static;
		color:#000
	}
	#nav p a {color: #000!important;}
	.google-ad1 {
		width: 120px;
		margin:2em auto;
		position: static;
	}
}
@media screen and (max-width:550px) {
	#outer {width:auto;	min-width:0;	margin: 0;	min-height:0;}
	.apology{display:block;font-weight:bold;color:red}
	.hide-mobile{display:none}
}