/*  Dzinelabs. All rights reserved.
Please see the Creative Commons License at: 
http://creativecommons.org/licenses/by-sa/3.0/
*/

/*Table of Contents

General (Body, resets, links, lists etc) - Topstyle line 20
Typography - Topstyle line 165
Header - Topstyle line 247
Navigation - Topstyle Line 255
Layout - Topstyle Line 325
Page specific - Topstyle line 492
Forms - Topstyle line 520
Code - Topstyle line 577
Classes - Topstyle line 590

*/

/* ---------->>> GENERAL <<<---------- */

/*Html & body*/

html, body {
	height:100%;
}

/*Compensate several browser bugs. 
First, % setting eliminates an IE em font-resizing bug. Second, some versions of Opera will draw a default font-size of 100% too
small compared to other browsers. Safari has a problem with a font-size of 101%. 
The current "best" suggestion is to use the 100.01% value for this property.*/

/*html{ 
	font-size:100.01%; 
}*/
	
body {
	background-color: #2F0000;
	color: #F48222;
	font-family: "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
	font-size:100.01%;
	line-height: 1.5em;
/*	text-align: center;*/
}

/*Resets*/

html, body {
	padding: 0;
	margin: 0;
}

ul, ol {
	list-style-type : none;
	/*padding:0;
	margin:0;*/
}
	
/*h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding: 0;

}*/
	
p {
	margin: 0;
/*	padding: 0;*/
}
	
		
img {
   border : none;
}

pre {
	margin:0;
	padding:0;
}

form {
	margin: 0 auto;
	padding:0;
	border: none;
}

/*Common link styles*/

a:link, a:visited {
	text-decoration: none;
}

a:hover, a:focus, a:active {
	text-decoration: underline;
}

a:link {
   color : #FFE69E;
   background : transparent;
}

a:visited {
   color : #FFFFC0;
}

a:hover {
   color : #FFFFFF;
}
  
  
a:focus {
	color:#D0D0D0;
} 

a:active {
	color:#E4E4E4;
}

/*Lists*/

#maincontainer ol {
	list-style-type: decimal;
	padding-left: 1.5em;
	margin-bottom: 1em;
}

#maincontainer ul {
	margin-bottom: 3em;
}

#leftcol ul, #rightcol ul {
	padding : 0;
   margin-left:4%;
	list-style-type : none;
}

#rightcol ul {
	margin-bottom: 2em;
	}
   
#leftcol ul li, #rightcol ul li {
	text-align : left;
   padding : 0.125em 2% 0.312em 0;
	font-size : 0.8em;
	height:1%; /*HasLayot othewise IE triples indent*/
}

#list-links li {
	list-style-type: disc;
	margin-left: 1em;
}

#list-links li a {
	padding-bottom : .5em;
	text-decoration : underline;
}

dd {
   margin : 0 0 1em 0;
}

dl dd {
	padding: 0 0 0.8em 0;
/*	color: #333333;
	background: transparent;*/
}

dl dt {
   font-weight : bold;
   color : #FFE69E;
   background : transparent;
}

/* ---------->>> TYPOGRAPHY <<<---------- */

/*General Text Settings*/

h1,h2,h3,h4,h5,h6 {
   background : transparent;
   color : #FFE69E;
   /*font-family : Helvetica, Arial, Verdana, sans-serif;*/
   text-transform : uppercase;
 }

h1 {
   font-size : 1.5em;
}

h2 {
   font-size : 1em;
}

h3 {
	font-size: .9em;
}

h4 {
	font-size: .85em;
}

h5 {
	font-size: 8em;
}

/*Specific Text Settings*/

#leftcol h1, #leftcol h2 {
	margin : 1em 0 1em 0;
 }

/*#leftcol h2 {
	margin : 1em 0 1em 0;
 } */
 
#maincontainer h1, #maincontainer h2 {
	margin : 1em 0 2em 0;
	/*padding:1px; prevent CM tut section*/
 } 
 
/*#maincontainer h2 {
	margin : 1em 0 2em 0;
}*/

#maincontainer p {
	margin-bottom: 1em;
}

#maincontainer p.toolbox {
	margin-bottom:3em;
}
 
#leftcol h3,  #leftcol h4, #rightcol h3 {
	margin : 1em 0 1em 0;
 }
 
#leftcol p, #rightcol p {
	font-size : 0.8em;
	background : transparent;
	padding : 0 .125em .312em .312em;
}

.siteinfo-wrap p {
	margin-bottom: 1em;
}

#siteinfo-links h3, #siteinfo-author h3 {
	border-bottom : 9px solid #d5c9b9;
	padding-bottom:.5em;
	margin-bottom: 1.5em;
}

#list-links p {
margin: .2em 0 .7em 1em;
}

/* ---------->>> HEADER <<<---------- */

#header {
	background: no-repeat left top;
	position: relative; /*avoid IE6's stacking bugs*/
	margin: 1em 0 4em 1em;
}

/* ---------->>> NAVIGATION <<<---------- */

/*Main Nav Settings*/ 

#navigation-main ul {
	font-size : 0.875em;
	text-align : center;
	margin : 5em 0 0em;
	text-decoration : none;
}

#navigation-main ul li {
	/*display: -moz-inline-box; for firefox less 3*/
	display : inline-block;
	margin-left:2em;
	line-height:2.5; /*wrap the nav nicely*/
}

#navigation-main ul li a {
	border-bottom : 2px dotted #d5c9b9;
	border-top : 1px solid #d5c9b9;
	padding : 0.4em 1em;
	margin-bottom:1em;
	position: relative;/* ie won't show borders without this */
	/*display: -moz-inline-box; for firefox less 3*/
	display:inline-block;
}

* html #navigation-main ul li {
	display: inline;
}

* html #navigation-main ul li a {
 	display: inline;
}

*+html #navigation-main ul li {
    display: inline;
}

*+html #navigation-main ul li a {
    display: inline;
}

#navigation-main ul li a:hover {
	border-top : 1px solid #D7900B;
	color: #D7900B;
}

#navigation-main ul li a:active {
    border-top : 1px solid #E4E4E4;
}

/*Tutorial Nav Settings*/

#tutorial-nav {
	text-align : center;
}

#tutorial-nav li {
	display:inline;
	line-height:2; /*wrap the nav nicely*/
}

#tutorial-nav li a {
	padding-right: .8em;
}


/* ---------->>> LAYOUT <<<---------- */

/*Wrapper, IE min/max, maincontainer*/

#container {
	width:100%; /*giving hasLayout to IE as precaution*/
/*	text-align: left;*/
	margin: 0 auto; /*centers #wrapper */
	min-width: 36.875em; /*avoid overlap elements beneath 600px and produce scrollbar*/
	 /*max-width:75em;if maximize browser on wide screens, text will be very long, hence max-width (=1200px)*/
	position:relative;  
}
/*Prevent IE6 to shift everything to left*/
/** html #container{
	width:95%;
}*/

/*min-width without script. Border with float, followed by negative margin, relative posiotion and height hack*/

* html #minwidth1 {
	border-left:36.875em solid #2F0000;
	float:left;
}

* html #minwidth2 {
	margin-left:-36.875em;
	position:relative;
	height:1px; /*part of the min-width trick. Causes hasLaout (zoom doesn't validate). There are a few occasions where height:1% 
	does not work and seems to default to height:auto and the element doesn't seem to gain a layout. 
	Therefore the height:1px is used in these cases.*/
}

#minwidth2{
white-space:nowrap;
}
#minwidth2 * * {
white-space:normal;
}

/*Begin max-width without script*/

.left, .right {
	float:left;
	height:1px;
	width:50%;
	margin:0 -19em 0 0;
}

.right {
	float:right;
	margin:0 0 0 -19em;
}
.inner {
	position:relative;
	z-index:2;
	overflow:hidden;
}
* html .inner {
	height:1%;
	overflow:visible
}

/*End max-width without script*/

#maincontainer {
	width: 40%;
	margin-left: 6%;
	/*display: -moz-inline-box; for firefox less 3.Has to come before the inline -block rule so FF3 ignores it*/
	display: inline-block;
	max-width:38em; /*if maximize browser on wide screens, main text will be very long, hence max-width (=608px)*/
	vertical-align:top;
	text-align:left;
	position:relative;
	margin-top: 3em;
}

* html #maincontainer {
	display:inline;
}

*+html #maincontainer {
	display:inline;
}

/*Left column*/

#leftcol {
	position:relative;
	vertical-align:top;
	width: 20%;
	/*display: -moz-inline-box; for firefox less 3*/
	display: inline-block;
	text-align:left;
	margin-left:5%;
	margin-top: 8em;
	min-width:207px;/* prevents image breaks out on small res. Width = largest element in col.*/
}

* html #leftcol {
	display:inline;
}

*+html #leftcol {
	display:inline;
}

/** html #leftcol {
	padding-left:.5em;
}*/

/*Right column*/

#rightcol {
	position:relative;
	vertical-align:top;
	width: 18%; /*above this value drops column in FF around 600px. Original 19.8*/
	margin-left: 3.6%;
	/*display: -moz-inline-box; for firefox less 3*/
	display: inline-block;
	padding-left:2em;
	text-align:left;
	margin-top: 7em;
}

* html #rightcol {
	display:inline;
}

*+html #rightcol {
	display:inline;
}

#siteinfo {
	border-top: medium double #d5c9b9;
	margin : 0 auto 5em;
}

.siteinfo-wrap {
	padding : 0 1em 1.5em 3em;
	border-left : 1px solid #d5c9b9;
} 

#siteinfo-links, #siteinfo-author {
	/*display: -moz-inline-box; for firefox less 3.Has to come before the inline -block rule so FF3 ignores it*/
	display: inline-block;
	vertical-align:top;
	width : 25%;
	margin-left:15%; 
	margin-top:2%;
}

* html #siteinfo-links {
	display: inline;
}

* html #siteinfo-author {
	display: inline;
}

*+html #siteinfo-links {
	display: inline;
}

*+html #siteinfo-author {
	display: inline;
}

/* ---------->>> PAGE SPECIFIC SETTINGS <<<---------- */

/*Tutorial pages*/

/*Tutorial Page Text Settings*/

.tutorial #maincontainer h2 {
margin: 2em 0 1em 0;
/*	margin-bottom:1em;
	margin-top:2em;*/
}

/*Tutorial Page Subnav Settings*/

.tutorial #tutorial-subnav {
	margin: -1em 0 1.7em 0;
}

.tutorial #tutorial-subnav li {
	display:inline;
	line-height:2; /*wrap the nav nicely*/
	font-size: .8em;
}

.tutorial #tutorial-subnav li a {
	padding-right: .1em;
}

/* ---------->>> FORMS <<<---------- */

input, fieldset {
	border:1px solid #999999;	
}

input, select {
	width: 50%;
}

/*input {
  font-size: 1em;
  border:1px solid #999999;
  width:50%;
  color: #F48222;
  font-weight: bold;
}*/

textarea {
	width:90%;
}

input, legend, textarea, option {
	color: #f48222;
	}

/*float and width 100% to shrinkwrap in IE7+*/
fieldset {
	padding : 0.625em;
/*	border: 1px solid #999999;*/
/*	margin-left:-.2em;*/
}

input, select {
/*	width:50%;*/
	font-size: 1em;
}

input, textarea, option, error {
	/*color: #F48222;*/
  font-weight: bold;
}
/*Prevent leftborder missing IE6*/

/** html fieldset {
	margin-left:.5em;
}*/

.error {
   /*font-weight : bold;*/
   color : #CC0000;
}

/* ---------->>> CODE <<<---------- */

code, pre {
	font-size : 0.8em;
	color: #FFE69E;
	background: transparent;
	margin-bottom:1em;
}

blockquote {
	margin-left:-0.1em;
}

/* Classes */

.leftcolumnparapusher {
	margin-top:1.5em;
}

.parapusher {
	padding-bottom: 1em;
}

.todo {
	width:207px;
	height:196px;
}

.toplink {
	margin-top: 4em;
}

.accessibility li {
	line-height:1.5;
}
	
.col1{
	margin-left: 1em;
}

.col2 {
	margin-left:7em;
} 
/*items * line-height = height of column2. increase according to bottom margin on top and title*/ 
.top {
 	margin-top:-11.5em; 
	margin-bottom: 1em;
}
.title {
	margin-bottom: 1em;
}

ul.indenter p {
margin: .5em 0 0 1em;
/*	margin-top:.5em;
	margin-left:1em;*/
}

.pusher, .title {
	margin-bottom:1em;
}

.puller {
	margin-top: -.5em;
}

.toolbox {
   border : 1px dashed #FFE69E;
   padding : 0.5em;
   width : 50%;
   margin: 0 auto;
  /* margin-left : auto;
   margin-right : auto;*/
  /* margin-bottom:3em; */
   text-align : center;
}

.skipnav, .skipsubnav {
	text-align: left;
 	font-size: .7em;
}

.skipnav a, .skipsubnav a  { 
	position: absolute;
	top:0;
	right:1em;
/*padding-right:1em;*/
}

.skipsubnav a { 
/*	position: absolute;*/
	top:2em;
	/*right:1em;*/
	/*padding-right:1em;*/
}

.skipnav a:focus, .skipnav a:active, .skipsubnav a:focus, .skipsubnav a:active  { 
	text-decoration: underline; 
}

.checkbox {
	width: .8em;
	height: .8em;
}

.current {
   font-weight : bold;
}

pre.last {
	padding-bottom:1em;
}

.marginblock {
   /*border-color : #FFFFFF;
   border-style : dotted;
   border-width : 1px;*/
   padding : 0.5em;
   width : 90%;
/*   margin-left : auto;
   margin-right : auto;*/
   margin-bottom : 1em;
   border: 1px dotted #FFFFFF;
}

.containingblock {
   background-color : #FF8080;
  border: 2px solid #FFFFFF;
  /* border-color : #ffffff;
   border-style : solid;
   border-width : 2px; */
   padding : 5px;
}

.contentblock {
   background-color : #2F0000;
   padding-left: .6em;
}

.margincollapser {
	border-bottom-width:0px;
	padding-bottom:0px;
	margin-bottom:0;
}



/*Debuggers*/

.hasLayout {
	zoom:1;
}

.debug{
	background-color:#FFF;
}

.debug1{
	background-color: #32cd32;
}