body {
	/* 
	Here we'll declare the default font-size and font-family.
	The rest of the typographical rules use relative sizes based on this font-size.
	We can easily modify overall typography by changing or overriding these values.
	*/
	font-family:verdana, arial, helvetica, sans-serif;
	color:#333;
	background-color:white;
	margin:0;
	padding:0;
	}
	
.smallertext {
	font-size: "10px";
}	

p, OL, UL, DL {font-size: 12px;} /*font-family is already defined, here I only set the font-size*/

p OL, p UL, p DL, OL UL {font-size: 12px;} /*and here the I prevent the incredible shrinking text*/

p {margin:0 0 1em;}

#Content p, ul {line-height: 1.8em; /* ~20px */}

#Content blockquote p {line-height:1.5;}  /* Browsers that understand the CSS child selector get the good typography. */

a {
	color:#39c;
	text-decoration:none;
	font-weight:600;
	}
a:link {color:#39c;}
a:visited {color:#06c;}
a:hover {
	background-color:#eee;
	color:#f00;	
}

h1 {
	color:#333333;
	font-size:14px; /* Not a relative value, since this is the site logotype */
	line-height:15px; /* Ditto */
	font-weight:800;
	font-family:verdana, arial, helvetica, sans-serif; /* Again, it's the logotype, so we want this control. */
	margin:0;
	padding:0;
	}

h2 {
	color:#ccc;
	font-size:20px; 
	font-weight:800;
	margin:0 0 20px; /* margin-bottom: ~20px */
	}
h3 {
	color:#333;
	font-size:1em;
	font-weight:700;
	margin:1.63em 0 .27em; /* ~18px 0 ~3px */
	}
h4 {
	color:#999;
	font-size:1.27em; /* ~14px */
	font-weight:800;
	margin:.43em 0 .214em; /* ~6px 0 ~3px */
	}
h5 {
	color:#999;
	font-size:1em;
	font-style:italic;
	font-weight:800;
	margin:1.8em 0 .27em; /* ~20px 0 ~3px */
	}

blockquote {
	margin:1em 2.7em 1.36em; /* 11px ~30px ~15px */
	color:#666;
	line-height:1.5;
	}
	
img {border-width:0;}
img.thumb {margin:10px 1px;}

#toptitle{         
	margin-top:50px;
	margin-left:115px;
	background-image:url();
	background-repeat:no-repeat;
	background-position:center left;
  } 

#Main {
	clear:left;
	float:left;
	width:70%;
	}

#Content {
	padding:38px 15px 0px 114px;
	background-repeat:no-repeat;
	background-position:top right;
	}

/* to place the right squares */

#headerLogo {
	float:right;
	height:13px;
	background-image:url(images/rightsquares.gif);
	background-position:center right;
	background-repeat:no-repeat;
	padding:17px 0px 0px 114px;
	}

#Copyright {
	clear:both;
	padding:20px 0px 20px 0px;
	text-align:center;
	font-size: 12px;
	color:#999;
	}

#copyrightText {
	position:relative;
	left:-.5em;
	}

#lowNav {margin:2em 0 2em; text-align:center;}

/* Right hand Menu stuff */

#rightmenu {
	float:left;
	width:150px;
	margin-top:38px;
	padding:0 10px 40px;
	background-image:url(images/dotted_vertical.gif);
	background-repeat:repeat-y;
	}
#rightmenu h2 {
	color:#ccc;
	font-size:1.0em; 
	font-weight:800;
	margin:.86em 0 .214em;
	}
#rightmenu p {
	font-size:.9em;
	line-height:1.5;
	margin:0 0 2em;
	}
#rightmenu ul {margin:0 0 0 1em; padding:0;}

#rightmenu li {list-style-type:none; margin:0; padding:0; text-indent:-.5em;}

#Navigation {         
	width:100%;
	height:30px;
	margin-top:25px;
	border-color:black;
	border-style:solid;
	border-width:1px 0;
	background-image:url(images/squares.gif);
	background-repeat:no-repeat;
	background-position:center left;
	}

/* Ypslideout Menu */

#menubar {
	position:absolute;
	left:110px;
	top:1px;
	width:480px;
	margin-top:106px;
	height:24px;
	background-color:#fff;
	font-size: 14px;
	}
#menubar a {
	color:#333;
	letter-spacing:1px;
	padding-left:5px;
	padding-right:5px;
	text-decoration:none;
	}
#menubar a.active {
	color:#f00;
	}

.menu .options {
	margin-right:1px;
	margin-bottom:1px;
	border:1px solid #000;
	background-color:#fff;
	font-size: 14px;
	}

.menu a {
	color:#39c;
	display:block;
	padding:2px 10px;
	text-decoration:none;
	}

.menu a:hover {
	background-color:#eee;
	color:#f00;
	}
	
/* Image border hover */

.highlightit img{
border: 1px solid #fff;
}

.highlightit:hover img{
border: 1px solid red;
}

.highlightit:hover{
color: red; /* Dummy definition to overcome IE bug */
}