/* CSS Document */

* { margin: 0; padding: 0; }

html { font-size: 62.5%; /*background: url("html_background.gif") repeat-y 50% 0;*/}

body { background: transparent url("body_background.gif") no-repeat 50% 0; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif; font-size: 1.3em; color: #333; text-align: justify;}

p {margin: 0; padding-bottom: 10px;}

acronym { cursor: help; border-bottom: 1px dotted #c0c0c0;}

h1 { font-size: 1.5em; color: #d03d71; background: transparent url("body_background.gif") no-repeat 50% -61px; width: 696px; margin: -10px -20px 0 -20px; padding: 10px 0px 20px 20px; voice-family: "\"}\""; voice-family:inherit; width: 676px; }
* html h1 { width: 676px; }
h2 { font-size: 1.2em; color: #757575; /*color: #3da8d0;*/}
h3 { font-size: 1.0em; color: #757575; }
h4 { font-size: 0.8em; color: #757575; }

ul, ol, li { list-style: none;}

dl {}
dt { }
dd { margin: 0 0 10px 10px;}

 

pre { overflow: auto; font-size: 12px; margin: 5px 5px 12px 5px; padding: 5px; background: #f4f4f4; border: 1px solid #dedede; color: #585858; width: 656px; voice-family: "\"}\""; voice-family:inherit;width: 634px;}
* html pre { width: 634px; overflow: scroll; }

a:link { color: #d03d71; text-decoration: none;}
a:visited { color: #c0c0c0; text-decoration: underline; }
a:hover { color: #3da8d0; background: #f4f4f4; text-decoration: none;}
a:focus, a:active { background: #f4f4f4/*#e7e7e7*/; color: #379cc1; }

a[rel="offsite"] { padding-right: 20px; background: url("rel_offsite.gif") no-repeat 100% 50%;}
a[rel="offsite"]:hover { background: #f4f4f4 url("rel_offsite.gif") no-repeat 100% 50%;}



/* SITE HEADER */
#header { padding-top: 31px; margin: 0 auto; width: 680px; height: 61px; voice-family: "\"}\""; voice-family:inherit; height: 30px; }
* html #header { height: 30px; }
/* SITE NAVIGATION */
#header ul.navigation { background: url("header_navigation.gif") no-repeat 0 100%; height: 30px; margin: 0 auto; width: 480px; }
#header ul.navigation li { height: 30px; line-height: 30px; text-align: center; width: 80px; float: left; }
#header ul.navigation li a { width: 80px; height: 30px; background: transparent; border: none; text-indent: -9999px; overflow: hidden; display: block; }
/**/
#header ul.navigation li.tutorials a:hover {background: url("header_navigation.gif") no-repeat 0px 0px;}
#header ul.navigation li.about a:hover {background: url("header_navigation.gif") no-repeat -80px 0px;}
#header ul.navigation li.linkage a:hover {background: url("header_navigation.gif") no-repeat -160px 0px;}
#header ul.navigation li.contact a:hover {background: url("header_navigation.gif") no-repeat -240px 0px;}
#header ul.navigation li.accessibility a:hover {background: url("header_navigation.gif") no-repeat -320px 0px;}
#header ul.navigation li.sitemap a:hover {background: url("header_navigation.gif") no-repeat -400px 0px;}
/**/
#header ul.navigation li.tutorials a:focus, #header ul.navigation li.tutorials a:active, #header ul.navigation li.tutorials a.active {background: url("header_navigation.gif") no-repeat 0px -30px;}
#header ul.navigation li.about a:focus, #header ul.navigation li.about a:active, #header ul.navigation li.about a.active {background: url("header_navigation.gif") no-repeat -80px -30px;}
#header ul.navigation li.linkage a:focus, #header ul.navigation li.linkage a:active, #header ul.navigation li.linkage a.active {background: url("header_navigation.gif") no-repeat -160px -30px;}
#header ul.navigation li.contact a:focus, #header ul.navigation li.contact a:active, #header ul.navigation li.contact a.active {background: url("header_navigation.gif") no-repeat -240px -30px;}
#header ul.navigation li.accessibility a:focus, #header ul.navigation li.accessibility a:active, #header ul.navigation li.accessibility a.active {background: url("header_navigation.gif") no-repeat -320px -30px;}
#header ul.navigation li.sitemap a:focus, #header ul.navigation li.sitemap a:active, #header ul.navigation li.sitemap a.active {background: url("header_navigation.gif") no-repeat -400px -30px;}


/* SITE TITLE */
#title { width: 115px; height: 90px; background: url("title.gif") no-repeat 0 0; position: absolute; top: 0; left: 0; text-indent:-9999px; }


/* MAIN TEXT AREA */
#text { background: url("content_background.gif") repeat-y 50% 0; margin: 0 auto; padding: 10px 20px; width: 696px; voice-family: "\"}\""; voice-family:inherit; width: 656px; }
* html #text { width: 656px; }


/* TUTORIAL CATEGORIES */
#category { margin: 0px 0 10px 10px; padding-left: 10px; border-left: 0px dotted #c0c0c0; float: right; width: 135px; voice-family: "\"}\""; voice-family:inherit; width: 125px; }
* html #category { width: 125px; }
#category h3 { font-size: 1.1em; }
#category ul li a { border-bottom: 1px dotted #c0c0c0; width: 100%; text-indent: 5px; text-decoration: none; display: block; }
#category ul li a.active { text-indent: 10px; background: #f4f4f4; color: #3da8d0; }


/* SITE FOOTER */
#footer {
	background: url("footer_background.gif") no-repeat 0 100%;
	margin: 0 auto;
	width: 696px;
	height: 50px;
	text-align: center; 
	color: #919191; 
	}
#footer ul {
	clear: both;
	font-size: 0.9em;
	margin: 0 164px;
 	width: 696px;
	voice-family: "\"}\"";
	voice-family:inherit; 
	width: 368px;}
* html #footer ul {width: 368px; }

#footer ul li { float: left; text-align: center; padding: 0 7px; }
#footer ul li a { text-decoration: none; }
#footer ul li a.active { color: #3da8d0; }
#footer span { font-size: .8em;display: block; width: 696px; float: left;/*border-bottom: 1px dotted #c0c0c0;*/}

/* is needed to fill out the subnav with the background */
.clearing:after { height: 0; background: transparent;content: "."; display: block; clear: both; visibility: hidden;}	
* html .clearing /*IE-Mac */{height: 1%;}



#text .img { text-align: center; }
#text img { margin: 0 0 10px 0; }

/* */
#text h3.h3tutorials { margin-top: 25px;}
#text ul.tutorials {margin-bottom: 15px;}
#text ul.tutorials li { margin-left: 5px; }
#text ul.tutorials li a { text-decoration: none; width: 350px; display: block; border-bottom: 1px dotted #c0c0c0; }
#text ul.tutorials li a:hover { background: #f4f4f4; }
/**/


/* SOCIAL BOOKMARK BUTTONS */
#social-bookmark {margin-top: 25px;clear: both;}
#social-bookmark h4 {text-align: center;}
#social-bookmark img, #social-bookmark ul, #social-bookmark li, #social-bookmark a {border: none;background: none;margin: 0;padding: 0;}
#social-bookmark ul {padding: 0;width: 100%;height: 100%;border: 1px dotted #c0c0c0;background: #f4f4f4;}
#social-bookmark li {width: 20px;height: 20px;line-height: 20px;display: block;margin: 2px;float: left;}



/* LINKAGE PAGE */



/* SITEMAP PAGE */
#sitemap #text ul.sitemap {}
#sitemap #text ul.sitemap li { padding-left: 10px; font-size: 1.1em; } /* main pages */
#sitemap #text ul.sitemap li ul { }
#sitemap #text ul.sitemap li ul li { font-size: 0.9em; } /* tutorial category pages */
#sitemap #text ul.sitemap li ul li ul { }
#sitemap #text ul.sitemap li ul li ul li { font-size: 1.0em; border: none;} /* tutorial pages */


/* ACCESSIBILITY PAGE */
#accessibility #text h2 { margin-top: 0px;}
#accessibility #text ul { margin: 0 0 10px 5px;}
#accessibility #text ul ul { margin: 0 0 0 10px;}



/* CONTACT */
#contact #infobox { margin: 0px 0 10px 10px; padding-left: 10px; border-left: 1px dotted #c0c0c0; float: right; width: 155px; voice-family: "\"}\""; voice-family:inherit; width: 145px; }
* html>body#contact #infobox { width: 145px; }
#contact #infobox h3 { font-size: 1.1em; }


form {
	width: 490px;
	text-align: left;
	margin-top: 20px;
}
label {
	clear: left;
	float: left;
	text-align: right;
	width: 90px;
	margin-right: 15px;
}
fieldset { border: none; margin-bottom: 10px;}
legend { display: none; }
input, select, textarea {
	font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	padding: 1px 2px;	
	float: left;
	width: 370px;
	background: #f4f4f4;
	color: #555;
	border: 1px dotted #c0c0c0;
	margin-bottom: 5px;
}
input.button {
	clear: both;
	float: none;
	display: block;
	margin-left:105px;
	width: auto;
	cursor: pointer;
}

body#contact span.error { width: 470px; display: block;font-weight: bold; background: #ffdddd; padding: 5px 10px; margin-bottom: 5px;border: 1px solid #990000;}
body#contact span.ok {border: 1px solid #009904; background: #e9fce6;}



.download a[rel="nofollow"] { padding-right: 22px; background: url("pdf_save.gif") no-repeat 100% 50%;}