.hide {
	text-indent: -9999px;
}
/* Use this trick to make elements invisible in CSS-enabled browsers. The element will be visible to users of text browsers, screen readers, etc. The number is randomly chosen as one considered big enough to always keep the object hidden off the screen. */

img {
	border: 0;
}
/* Use this trick to make all images render as block-level elements rather than inline elements. Because block-level elements exist in their own box and are followed by a carriage return. Also declare all image borders as 0 here so we don't have to add the code into all image tags. */
.inline {display: inline;}
/* Use this trick for images that we DO want to display inline */

html{
	font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	background: #fff url(../images/background.jpg) right repeat-y;
	text-align: left;
}
/* Restating stuff for html as stated in body: an IE 6.0 fix from xml.com. */
/* Text align left: IE6 Windows bug fix. */

/* Coding short forms: Always clockwise starting at the top: top, right, bottom, left. But, if vertical and horizontal margins are the same, you can group them: top-bottom then left-right. */

body{
	font-size: 90%;
	font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	width: 510px;
	background: #fff;
	border: #009 solid 1px;
	margin: 10px;
	padding:0 240px 0 220px;
}
/* Font choices: Trebuchet MS because it's funky. Tahoma is the only font made specifically for online reading. Arial for old Windows systems. Helvetica for old Unix systems. Multi-name fonts must be enclosed in quotations. */

body.screenshot {
	padding: 10px;
	text-align: center;
}

p, td, ul, ol, li {
	font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	color: #000000;
}
/* Be kind to Netscape 4: Old browsers fail to understand inheritance so we must be more specific for them. */

#container{
	background-color:transparent;
	float:left;
	width:100%;	
	border-left:220px solid #d3eaff; /* The width and color of the left rail */
	border-right:240px transparent; /* The width and color of the right rail */
	margin-left:-220px;
	margin-right:-240px;	
	min-width: 300px;
	display:inline; /* So IE plays nice */
	position: relative;
}
#sidebar1{
	float:left;
	width:220px;
	margin-left:-220px;
	background: #d3eaff;
	position:relative;
}
#content{
	float:left;
	width:100%;
	margin-right:-100%;
	padding: 0 0 100px 0;
	max-width: 700px;
	background: transparent;
}
#sidebar2{
	float:right;
	width:240px;
	margin-right:-240px;
	background: transparent;		
	position:relative;
}
#header{
	height:100px;
	width: 100%;
	margin-left:-220px;
	margin-right:-240px;
	padding:10px 240px 0 220px;
	background: #fff url(../images/leaves.jpg) bottom right no-repeat;
	clear:both;
}
#footer{
	background-color:#06c;
	margin-left:-220px;
	margin-right:-240px;
	clear:both;
	color: #fff;
	font-size: 80%;
	padding:2px 0 2px 220px;
}
#nav1{
	background: #b9d3ff;
	margin-left:-220px;
	margin-right:-240px;
	clear:both;
	top: 100px;
	text-align: right;
	padding: 3px;	
}
#nav2{
	background: #06c;
	margin-left:-220px;
	margin-right:-240px;
	clear:both;
	top: 125px;
	text-align: right;
	padding: 3px;
}
#slogan {
	position: absolute;
	top: 125px;
	left: 60px;
	font-size: 85%;
	font-weight: bold;
	color: #039;
	text-decoration: none;
}

#sidebar2 a.highlight_see:hover {
	color: #00f;
}

#logo {
	position: absolute;
	top: 30px;
	left: 30px;
	background: transparent url(../images/logo.gif) top left no-repeat;
	width: 300px;
	height: 77px;
}

span.top a {
	font-size: 85%;
	font-weight: normal;
	color: #fff;
	text-decoration: none;
	text-align: right;
	padding-left: 190px;
	text-transform: uppercase;
}

h1	{
	text-indent: -9999px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	} /* The Phark trick - Displays a text version of the company name offscreen for text readers. Visual browsers see the logo instead. */

h1 a:link, h1 a:visited	{
	display: block;	
	width: 300px;
	height: 100px;
	background: transparent url(../images/logo_bright.gif) top center no-repeat;
	}
	
h1 a:hover	{
	background: transparent url(../images/logo.gif) top center no-repeat;
	}

h2, h3, h4, h5 {
	font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	font-weight: 500;
	padding: 0 30px;
}

h2 {
	padding-top: 20px;
}

h3.highlight {
	color: #006;
}

span.h2large {
	font-weight: 700;
	color: #006;
}

a { text-decoration: underline; }
a:link { color: #039; }
a:visited { color: #000; }
a:hover { color: #00f; }
a:active { color: #00f; }
/* Must use this order LVHA: Link, Visited, Hover, Active. Or some browsers will ignore one or another of them. */

#nav1 a, #nav2 a, #nav1 ul, #nav1 li, #nav2 ul, #nav2 li  { 
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	padding: 0 5px 0 15px;
	list-style: none;
	display: inline;
}

#nav1 a{
	color: #039;
}

#nav2 a {
	color: #fff;	
}

#nav1 a:hover, #nav2 a:hover, #nav3 a:hover, #nav_projects a:hover,  #nav_new_projects a:hover {
	color: #00f;
}

nav3 a, #nav3 li { 
	text-transform: uppercase;
}

#nav3 a, #nav3 li, #nav_projects a, #nav_projects li,  #nav_new_projects a, #nav_new_projects li{ 
	list-style: none;
	display: block;	
	padding-bottom: 4px;
	margin-left: -10px;
	color: #039;
	text-decoration: none;
}

#nav_projects {	
	border: #06c solid 1px;
	background: #fff;
	margin: 0 10px;
	padding: 5px;
}

#nav_new_projects {	
	border: #06c solid 1px;
	background: #fff;
	margin: 0 10px;	
	padding: 5px;
}

#sidebar1 p, #sidebar2 p {
	padding: 0 15px;
}

#content p {
	padding: 0 30px;
}

#content li {
	margin: 0 30px 0 10px;
	padding-bottom: .5em;
}

#sidebar2 p, #sidebar2 li {
	font-size:85%;
	color: #000000;
}

#content p.passagetext {
	color: #039;
	font-weight:500;
}

#content a.passagetext {
	color: #039;
	font-weight:500;
}

#content a.passagetext:hover {
	color: #00f;
}

p.screenshot, a:link.screenshot {
	color: #069;
	text-align: center;
	font-size: 85%;
}
.screenshot a:visited {
	color: #069;
}

#sidebar2 p.quotation, #sidebar1 p.quotation {
	color:#06c;
	font-weight:700;
	font-size: 90%;
	padding-bottom: 30px;
}

#sidebar2 a.quotation_signature {
	font-style: italic;
	color:#06c;
	text-decoration: none;
}

#sidebar2 p.testimonial {
	color:#069;
	font-weight:500;
	font-size: 90%;
	padding-bottom: 30px;
}

#sidebar2 span.testimonial_signature {
	font-weight:700;
	font-style: italic;
}

#content span.quotation {
	color:#06c;
	font-weight:500;
}

#content a.quotation_signature {
	font-style: italic;
	text-decoration: none;
	color:#06c;
	font-weight:500;
}

#sidebar2 a.quotation, #sidebar1 a.quotation {
	color:#06c;
}

#sidebar2 p.note, #sidebar1 p.note {
	padding-bottom: 30px;
	color:#039;
	font-size: 90%;
}
span.note {
	font-size: 85%;
}
#sidebar2 p.note_np, #sidebar1 p.note_np {
	color:#039;
	font-size: 90%;
}

#sidebar2 ul.note li, #sidebar1 ul.note li {
	color:#039;
	font-size: 90%;
	margin: 0 10px 0 0;
	padding-bottom: .5em;
}

#sidebar2 p.highlight {
	color:#039;
	font-weight:700;
	font-size: 105%;
	padding-bottom: 30px;
	text-align: center;
}

#sidebar2 span.highlight_big {
	font-weight:500;
	font-size: 125%;
}

#sidebar2 p.highlight_see, #sidebar2 a.highlight_see {
	color:#039;
	font-weight:700;
	font-size: 105%;
	padding-bottom: 30px;
	text-align: center;
	text-decoration: none;
}

p.nav_projects {
	color: #039;
	font-weight: 700;
}

#content p.act {
	padding-top: 30px;
}

#sidebar1 p.w3c_image_padded {
	padding-top: 50px;
	text-align: center;
}

#sidebar1 p.w3c_image {
	text-align: center;
}

#sidebar2 p.w3c_image {
	text-align: center;
}

#news {
	border: #06c solid 1px;
	background: #fff;
	margin: 0 10px;
	padding: 10px;
	font-size: 85%;
}

span.accesskey {
	text-decoration: underline;
}

span.heading {
	color: #039;
	font-weight: bold;
	font-size: 90%;
	text-transform: uppercase;
}