* { margin: 0px; padding: 0px; }
html, body { background: #FFFFFF url(../images/background_980.gif) top center repeat-y; }
body { font: 11px 'Trebuchet MS', Arial, Helvetica, Verdana, sans-serif; }

a { color: #63c2f4; text-decoration: none; outline-style: none;}
a:hover { color: #fff; background: #63c2f4; }
h1, h2, h3, h4, h5, h6 { color: #63c2f4; }
h1 { display: block; }
h2 { margin-bottom: 5px; font-size: 1.6em;}
h3 { margin-bottom: 3px; font-size: 1.5em;}
h4 { margin-bottom: 2px; font-size: 1.3em; color: #808080;}

.page strong a { color: #ff1e53; }
.page strong { color: #808080; }

p { clear: both; margin-bottom: 10px; display: block; }
.prototip p { margin-left: 0; }

.heading, .heading2 div { position: relative; width: 100%; height: 36px; float: left; }
.heading2 { padding-top: 6px; border-top: 1px solid #ebebeb; }
.heading2 div { height: 29px; }
.topheading { border: 0; }
#demonstrations .heading{ background: url(../images/heading_demonstrations.gif) top left no-repeat; }
#installation .heading{ background: url(../images/heading_installation.gif) top left no-repeat; }
#howtouse .heading{ background: url(../images/heading_howtouse.gif) top left no-repeat; }
#style .heading { background: url(../images/heading_style.gif) top left no-repeat; }
#documentation .heading{ background: url(../images/heading_documentation.gif) top left no-repeat; }
#troubleshooting .heading { background: url(../images/heading_troubleshooting.gif) top left no-repeat; }
#download .heading { background: url(../images/heading_download.gif) top left no-repeat; }
#changelog .heading { background: url(../images/heading_changelog.gif) top left no-repeat; }
#contact .heading { background: url(../images/heading_contact.gif) top left no-repeat; }
#license .heading { background: url(../images/heading_license.gif) top left no-repeat; }

.heading2 .ajax { background: url(../images/heading2_ajax.gif) top left no-repeat; }
.heading2 .hooking { background: url(../images/heading2_hooking.gif) top left no-repeat; }
.heading2 .stems { background: url(../images/heading2_stems.gif) top left no-repeat; }
.heading2 .customevents { background: url(../images/heading2_customevents.gif) top left no-repeat; }
.heading2 .autoadd { background: url(../images/heading2_autoadd.gif) top left no-repeat; }

.heading2 .tip { background: url(../images/heading2_tip.gif) top left no-repeat; border: none; }
.heading2 .tipoptions { background: url(../images/heading2_tipoptions.gif) top left no-repeat; }
.heading2 .tips { background: url(../images/heading2_tips.gif) top left no-repeat; }
.heading2 .tipsoptions { background: url(../images/heading2_tipsoptions.gif) top left no-repeat; }
.heading2 .elementprototip { background: url(../images/heading2_elementprototip.gif) top left no-repeat; }

.heading2 .changelog { background: url(../images/heading2_changelog.gif) top left no-repeat; }

/* Layout
======================================================================== */ 

#page {
	list-style-type: none;
	width: 980px;
	display: block;
	margin: 0 auto;
	height: 100%;
	padding-top: 12px;
}
#page .chapter {
	width: 100%;
	clear: both;
	border-bottom: 2px solid #ebebeb;
	padding: 6px 0 12px 0;
}
#page .advertisements { border: 0; }

#navigation {
  width: 184px;
  position: fixed;
  left: 50%;
  top: 12px;
  margin: 0 0 0 -483px;
  padding: 0;
}

* html #navigation { /* IE6 */
  position: absolute;
  top: 0;
  margin-top: expression(PT_menuMoveTop = (document.documentElement ? document.documentElement.scrollTop : 0) + 'px');
  margin-left: expression( -1 * this.offsetWidth / 2 + (document.documentElement ? document.documentElement.scrollLeft : 0) + 'px');
}

#page #left, #page #right { display: inline; float: left; position: relative; }
#left {
	margin-left: 6px;
	height: 12px;
	display: block;
	width: 184px;
}
#right { margin-left: 16px; width: 755px; float: right; }


a.logo,
a.logo:hover { border: 0; text-decoration: none; background: none;}
#logo { border: 0; text-decoration: none; width: 166px; height: 48px; margin-bottom: 6px; }
#tagline { position: relative; width: 100%; height: 62px; float: right; background: url(../images/tagline.gif) top left no-repeat; }

.menu {
	margin: 12px 0 6px 0;
	clear: both;
	list-style-type: none;
	float: left;
	position: relative;
	width: 100%;
}
.menu li { list-style-type: none; float: left; width: 100%; display: block; clear: both;}
.menu li a { padding: 5px; line-height: 14px; height: 14px; background: #f3edc2; color: #c59c61; display: block; height: 100%; margin-bottom: 1px; border: 0;outline-style: none;}
.menu li a:hover { background: #ebe4b4; color: #aa8847; }
.menu li .version { color: #ff1e53; font-weight: bold; font-size: 0.8em; vertical-align: top;}
.menu li a:hover .version { color: #fff; }
.menunews { float: left; clear: both; margin-top: 6px; font-size: 9px; width: 100%; color: #969c92;}
.lower { margin-top: 6px; padding-top: 6px; border-top: 1px solid #e1e1e1; }
a.nickstakenburg, 
a.nickstakenburg:hover {
	margin-top: 6px;
	padding-top: 6px;
	margin: 0;
	float: left;
	width: 150px;
	height: 22px;
	background: #fff url(/img/nickstakenburg_logo_small.gif) left center no-repeat;
}
/*#page .lower a { background: #f7f7f7; color: #808080; }
#page .lower a:hover { background: #eeeeee; color: #808080; }*/

.latestVersion { clear: both; position: relative; color: #969c92; padding-bottom: 6px; display: block; }
.latestVersion div { }
.latestVersion a { font-weight: bold; }
.latestVersion .date { color: #cccccc; font-size: 9px;  }

#introduction .information {
	width: 400px;
	margin-right: 12px;
	float: left;
}
#introduction .image {
	float: left;
	height: 98px;
	width: 340px;
	background: url(../images/header.gif) top left no-repeat;
}
#introduction .plus { margin-left: 6px; }
#introduction .plus li {
	list-style-type: none;
	padding-left: 18px;
	background: url(../images/list_img.gif) 0% 50% no-repeat;
}

.news .title { margin-left: 10px; width: 100%; display: block; font-size: 1.3em;  }
.news .date { color: #969c92; font-size: 9px; clear: both; margin-bottom: 3px;}
.news strong { color: #333333; }

.demos { width: 740px; position: relative;float: left; margin-left: 10px; list-style-type: none; margin-top:10px; clear: both; }
.demos .box {
	list-style-type: none;
	float: left;
	width: 82px;
	padding: 2px;
	background: #ebebeb;
	margin: 0 6px 12px 0;
	color: #505050;
	position: relative;
	clear: none;
}
.demos .demo { position: relative; float: left; cursor: pointer; border: 1px solid #e1e1e1; }
.demos .description { clear: both; padding: 3px; text-align: center; }

.demoTips { float: left; list-style-type: none; color: #7d837a;}
.demoTips li { height: 20px; line-height: 20px; padding-left: 20px; background: url(../images/demo_icon.gif) 0 50% no-repeat; }
.demoTips li div {  display: inline; cursor: pointer; border-bottom: 1px solid #e1e1e1;}

#ajaxDemo { width: 430px; }
#ajaxDemo h1 { font-size: 17px; line-height: 25px; font: italic 17px Georgia, serif; color: #666666; margin-bottom: 3px;}
#ajaxDemo img {
	float: left;
	margin-right: 10px;
	width: 112px; /* these are required, Prototip needs to fixate the width on the tooltip for rounded corners to work */
	height: 150px;
}
#ajaxDemo .info { float: left; width: 300px; font: 9px Arial, Helvetica, sans-serif; color: #808080;}
#ajaxDemo .notes, #ajaxDemo .note { clear: both; }

.cloneMe {
	width: 350px;
	font-size: 9px;
}
.cloneMe img { float: left; clear: both; margin-bottom: 1em;}
.cloneMe .notes { clear: both; }

/* code */
div.code { position: relative; clear: both; margin: 0 0 10px 5px; border: 1px solid #f1f1f1; background: #f7f7f7; padding: 6px; font-size: 11px; color: #606060; font: "Courier New", Courier, monospace; }
span.js { font-family: "Courier New", Courier, monospace; background: #f7f7f7; color: #666666;}
p.tip { padding-top: 1em; margin-top: 1em; border-top: 1px solid #ebebeb; }

.hookingExamples { margin-left: 6px; }
.hookingExamples .visual { float: left; margin-right: 24px; }
.hookingExamples .real {
	float: left;
	width: 156px;
	padding-top: 30px;
	background: url(../images/hooking_realtop.gif) top left no-repeat;
}

.stemsExplained { width: 380px; margin-right: 12px; float: left; }
.stemPositions { float: left; }
#boxedtips { float: left; list-style-type: none; width: 160px; margin-top: 10px;}
#boxedtips li { height: 18px; width: 18px; display: block; float: left; margin: 0 6px 6px 0; background: #fff; border: 1px solid #cccccc; cursor: pointer; }


#style .information .text { float: left; width: 580px; margin-right: 12px; }
#style .information img { float: left; }

#documentation .functions { clear: both; list-style-type: none; color: #444444; position: relative; margin-left: 6px; margin-bottom: 6px; width: 735px;}
#documentation .functions li { width: 100%; float: left; background: #f7f7f7; clear: both; width: 100%; padding: 3px; margin-bottom: 1px; padding: 5px; }
#documentation .functions li .function { clear: both; float: left; font-weight: bold; width: 150px; }
#documentation .functions li .explained { float: left; width: 580px; height: auto;}

#documentation .code { height: auto; width: auto;}
#documentation .functions .code { width: 550px; background: #fafafa;}

#documentation .heading2 { margin-top: 12px; }
#documentation .topheading { margin-top: 0; }

#documentation ul { position: relative; clear: both; }
#documentation p.api { clear: both; color: #444444; }

#documentation .explained p { position: relative; margin-bottom: 6px;}
#documentation .explained pre { float: none; clear: both; }

#download .links { float: left; clear: both; list-style-type: none; margin: 0 0 6px 6px; width: 100%; line-height: 32px;}
#download .links .link { float: left; padding: 5px; font-size: 17px; height: 32px; line-height: 32px; }
#download .link a { float: left; padding-left: 32px; height: 32px;}
#download .link a:hover { color: #63c2f4; height: 32px;}
#download .link a,
#download .link a:hover { background: url(../images/download.gif) top left no-repeat; }
#download .notes { clear: both; color: #a0a0a0; margin-top: 12px;}
#download .old {  margin-top:12px; clear: both; }
#page #download div.code { font-family: "Courier New", Courier, monospace; }

.updatesfeed,
.updatesfeed:hover {
	position: relative;
    height: 16px;
	width: 16px;
	display: block;
	overflow: hidden;
	float: right;
	line-height: 16px;
	background: url(../../images/feed.png) top left no-repeat;
	*background: none;
	filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/feed.png', sizingMethod='crop');
	cursor: pointer;
}

#troubleshooting .problem { margin-bottom: 3px; color: #444444; font-weight: bold; margin-top: 3px;}
#troubleshooting .problem, #troubleshooting .solution { display: block; clear: both; }
#troubleshooting .solution { color: #808080; }

p.tags { margin-left: 10px; font-size: 0.9em; color: #808080;}
.keys { display: none; font-size: 1px; color: #efefef; line-height: 1px; overflow: hidden; height: 1px; margin: 0; padding: 0;}


#page #contact { border: 0; margin-bottom: 10px;}


/* Helpers */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix { display:inline-block; }
/* IE Mac Hide \*/
.clearfix { display:block; }
/* IE Mac Hide End */