/*  zero out margins, paddings, borders, font, etc  */
html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: sans-serif; 
}

body {
	background-image: url(images/bodybg.png); 
        background-repeat: repeat-x;
        margin: 0px;
        padding: 0px;
        background-color: white;
}

p {
margin: 0px 0px 15px 0px;
padding: 0px;
border: 0px;
font-family: sans-serif; 
font-size: 12px;
line-height: 150%;
color: #333333;
}

#intro p{
color: #333333;
font-size: 90%;
font-weight: bold;
}

p.top:first-letter {
margin: 0px 0px 0px 0px;
padding: 0px;
color: #666666;
font-size:36px;
margin: 0px;
margin-right: 2px;
margin-bottom: 20px;
}

p.date {
margin: 5px 0px 0px 0px;
padding: 0px;
font-weight: bold;
color: #666666;
text-align: right;
font-size: 13px;
}

p.note {
margin: 25px 0px 15px 0px;
padding: 7px 10px 7px 10px;
font-size: 11px;
font-weight: normal;
font-style: normal;
color: #333333;
text-align: left;
border-top: gray solid 1px;
border-bottom: gray solid 1px;
}

.caption{
margin: 8px 0px 0px 0px;
padding: 0px;
font-weight: bold;
color: #666666;
text-align: center;
}

blockquote {
color: #333333;
font-size: 14px;
margin: 20px 45px 20px 45px;
line-height: 150%;
}

/*  formats quote source beneath blockquotes  */
p.source {
font-size: 11px;
text-align: left;
margin-top: 5px;
font-weight: bold;
}

h1{
margin: 15px 0px 15px 0px;
padding: 0px;
text-align: left;
text-transform: uppercase;
font-family: sans-serif; 
font-size: 18px;
font-style: normal;
color: #5e88a8;
font-weight: normal;
border: none;
}

h1.two{
margin: 35px 0px 15px 0px;
padding: 0px;
}

h1.news{
margin: 15px 0px 15px 0px;
padding: 0px;
text-align: left;
text-transform: uppercase;
font-family: sans-serif; 
font-size: 16px;
font-style: normal;
color: #5e88a8;
font-weight: bold;
border: none;
}

h1.left {
margin: 0px 15px 15px 0px;
padding: 0px;
text-align: left;
width: 100%;
text-transform: uppercase;
font-family: sans-serif; 
font-size: 15px;
font-style: normal;
color: #333333;
font-weight: bold;
border-bottom: 1px dashed #999999;
}

h1.right {
margin: 0px 0px 15px 0px;
padding: 0px;
text-align: right;
width: 100%;
text-transform: uppercase;
font-family: sans-serif; 
font-size: 15px;
font-style: normal;
color: #333333;
font-weight: bold;
border-bottom: 1px dashed #999999;
}


h2 {
margin: 0px 0px 3px 0px;
padding:0px;
text-align: left;
font-family: sans-serif; 
font-size: 14px;
color: #333333;
font-weight: bold;
border-bottom: none;
}

h2.news {
margin: 10px 0px 15px 0px;
padding:0px;
text-align: center;
font-family: sans-serif; 
font-size: 14px;
color: #333333;
font-weight: bold;
border-bottom: none;
}

h3 {
margin: 30px 0px 3px 0px;
padding:0px;
text-align: left;
font-family: sans-serif; 
font-size: 12px;
color: #333333;
font-weight: bold;
border-bottom: none;
}

h4 {
	letter-spacing: .04em;
	padding: 0 0 5px 0;
	margin: 0;
	color: #1d425a;
	font: bold .8em sans-serif;
}

a:link {text-decoration: underline; color: blue; font-size: 12px; font-weight: normal;}
a:visited {text-decoration: underline; color: blue; font-size: 12px; font-weight: normal;}
a:hover {text-decoration: none; color: blue; font-size: 12px; font-weight: normal;}

a.bold:link {text-decoration: underline; color: #666666; font-size: 11px; font-weight: bold;}
a.bold:visited {text-decoration: underline; color: #666666; font-size: 11px; font-weight: bold;}
a.bold:hover {text-decoration: none; color: #666666; font-size: 11px; font-weight: bold;}

a.h1:link {color: blue;  font-size: 14px; padding: 0px; margin: 0px;}
a.h1:visited {color: blue;  font-size: 14px; padding: 0px; margin: 0px;}
a.h1:hover {color: blue;  font-size: 14px; padding: 0px; margin: 0px;}

/*  this class is used to place an arrow image in the left margin of a div. the image can then serve as a bullet in front of links or headers.    */
.arrow {
background-image: url(images/arrow.png);
background-repeat: no-repeat;
padding: 0px 0px 0px 35px;
margin: 0px 0px 0px 0px;
background-color: none;
height: auto;
min-height: 20px;
}

/*  this class is used to place a small Haber logo in the left margin of an element. the image can then serve as a bullet in front of links or headers.    */
.logo {
background-image: url(images/logo_small.jpg);
background-repeat: no-repeat;
padding: 0px 0px 0px 82px;
margin: 0px 0px 20px 0px;
background-color: none;
border: solid 0px black;
height: auto;
min-height: 55px;
line-height: 15px;
font-size: 11px;
}

/*  this ul class formats the site's standard ul lists.    */
ul {
list-style-type: square;
padding:0px;
margin: 10px 0px 30px 0px;
font-family: sans-serif; 
font-size: 12px;
color: #333333;
}

/*  this ul class formats ul lists without bullets.    */
ul.links {
list-style-type: none;
}

/*  this ul class formats the site's standard ol lists.    */
ol {
list-style-type: decimal;
padding:0px;
margin: 10px 0px 30px 0px;
font-family: sans-serif; 
font-size: 12px;
color: #333333;
}

ol.alpha {
list-style-type: lower-alpha;
padding:0px;
margin: 10px 0px 30px 0px;
font-family: sans-serif; 
font-size: 12px;
color: #333333;
}

/*  this li class formats ordered and unordered list items   */
li {  
padding: 0px;
margin: 0px 0px 10px 45px;
line-height: 18px;
}

.floatleft{
float: left;
clear: left;
margin: 0px 15px 15px 0px;
width: auto;
text-align: center;
}

.floatright {
float: right;
clear: right;
margin: 0px 0px 15px 15px;
width: auto;
text-align: center;
}

/*  this class puts a thin frame around images    */
img.border {
border: 1px solid #cccccc; 
padding: 5px;
}

/*  this id formats the container for the site content in template 1  */
#wrapper {
position: relative;
text-align: left;
margin: 0px auto;
padding: 0px;
border:  0px solid #183145;
width: 865px;
height: auto;
background-color: white;
}

/*  this id formats the container for the site content in template 2. (this wrapper uses a background image)   */
#wrapper2 {
background-image: url(images/bg2.jpg); 
background-repeat: repeat-y;
position: relative;
text-align: left;
margin: 0px auto;
padding: 0px;
border:  0px solid #183145;
width: 865px;
height: auto;
background-color: white;
}

/*  this id formats the container for the site content in template 3. (this wrapper uses a background image)   */
#wrapper3 {
background-image: url(images/bg3.jpg); 
background-repeat: repeat-y;
position: relative;
text-align: left;
margin: 0px auto;
padding: 0px;
border:  0px solid #183145;
width: 865px;
height: auto;
background-color: white;
}


#header { 
margin: 0px 0px 0px 0px;
padding: 0px;
width: auto;
height: 214px;
text-align: left;
border: none;
background-image: url(assets/images/haberheader.png);
}

/*  this id formats the div that contains the main navigational menu   */
#menu {
margin: 0px 0px 0px 0px;
padding: 5px 0px 0px 0px;
width: 100%;
height: 25px;
border-top: 0px solid #999999;
border-bottom: 0px solid #999999;
text-align: left;
background-color: #183145;
}

/*  this ul class is an offspring of the 'menu' id. it formats the basic main navigation unordered list.    */
#menu ul {
list-style: none;
padding:0px;
margin:0px;
}

/*  this li class is an offspring of the 'menu' id. it formats the particular items in the main navigational menu    */
#menu li {
display: inline;        
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
font-size: 12px; 
font-family: sans-serif; 
font-weight: bold; 
}

/*  this style is used to format menu links corresponding to  the non-active pages.  */
#menu a:link {text-decoration: none; color: #ffffff;}
#menu a:visited {text-decoration: none; color: #ffffff;}
#menu a:hover {text-decoration: none; color: #cccccc;}

/*  this style is used to format menu links corresponding to the  active page. note that the style name has to be passed to the wayfinder call with the following code: &hereClass=`selected`    */
#menu.selected a:link {text-decoration: none; color: #ffffff;}
#menu .selected a:visited {text-decoration: none; color: #ffffff;}
#menu .selected a:hover {text-decoration: none; color: #cccccc;}
    
/*  this id formats the div holding the intro text that sits beneath the main navigational menu and the other page content . some text formatting is done with the '#intro p' definitions above  */
#intro {
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 10px;
width: 67%;
height: auto;
border-bottom: 2px solid black;
text-align: left;
color: #666666;
float: left;
}

 /*  this id is used to format left column in template 1 (note that this style is only used in template 1) */
#Lside {
margin: 0px;
padding: 0px 10px 0px 10px;
float: left;
clear: left;
width: 330px;
background: none;
border-right: 2px solid #666666;
border-bottom: 0px solid #999999;
}

 /*  this id is used to format center column in template 1) */
#center{ 
margin: 0px;
padding: 0px 0px 0px 15px;
float: left;
width: 225px;
border-left: 0px solid #666666;
border-right: 0px solid #666666;
border-bottom: 0px solid #999999;
}

 /*  this id is used to format right column in template 1 and 2 (note that template 3 does not utilize the Rside column)  */
#Rside {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
float: right;
width: 255px;
background: none;
border-bottom: 0px solid #999999;
}

 /*  this style is used to format left column in template 3 (note that this style is only used in template 3)  */
#Lside3 { 
margin: 0px;
padding: 0px 0px 0px 5px;
float: left;
clear: left;
width: 242px;
border-right: 0px solid #666666;
}

/*  this style is used to format the main content area for pages tied to template2.  */
#t2main { 
margin: 0px;
padding: 0px 15px 0px 10px;
float: left;
width: 570px;
border-right: 2px solid #666666;
}

/*  this style is used to format the main content area for pages tied to template3.  */
#t3main { 
margin: 0px;
padding: 0px 10px 0px 15px;
float: right;
width: 586px;
border-left: 2px solid #666666;
}


#content img {
float: left;
clear: right;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
border: 0px solid #999999;

}

#footer-remove? {
clear: none;
float: left;
text-align: left;
margin: 0px;
padding: 0px;
border:  0px solid #999999;
width: 300px;
height: 25px;
background: #ffffff;
}

#footer {
clear: left;
margin: 0px auto;
padding: 0px;
border-top:  3px solid #183145;
width: 862px;
height: auto;
background-color: white;
text-align: center;
}

/* Footer nav */
#footer ul {
	margin: 5px 0 0 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

#footer ul li{
	display: inline;
	margin: 0;
	padding: 0;
}

#footer ul li a:link, #footer ul li a:visited {
	margin: 0;
	color: #666;
	text-decoration: none;
	font-size: .9em;
	border-right: 1px solid #32526c;
	padding: 0 5px;
}

#footer ul li.last a {
	border: none;
}

#footer ul li a:hover {
	text-decoration: underline;
}

a.footer {color: blue;  font-size: 11px; padding-right: 6px; padding-left: 6px; margin: 0px; text-decoration: none;}

/* sidebar  nav */
#sidebar-nav {
	padding: 4px 0px 2px 0px;
}

#sidebar-nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#sidebar-nav ul li {
	margin: 0 0 5px 0;
}

#sidebar-nav ul li a:link, #sidebar-nav ul li a:visited {
	display: block;
	padding: 10px 0 10px 5px;
	background: #b0c9db;
	color: #20465f;
	font-size: 1.1em;
	text-decoration: none;
}

#sidebar-nav ul li a:hover {
	background: #7aa5be;
	color: #fff;
}

li#year2010 {
	visibility: hidden;
	display: none;
}

.spacer { 
margin: 0px 0px 25px 0px;
padding: 0px; 
}

.spacer2 { 
margin: 0px 0px 40px 0px;
padding: 0px; 
}

/* @group email sign up */

#temailer_form {
	background:  #6b97b4;
	padding: 15px;
	color: #b0c9db;
	font-weight: bold;
}

#temailer_name {
	display: none;
}

#temailer_email {
	color: #888;
	padding:5px;
	margin: 0 0 7px 0;
	width: 210px;
}

input.temailer.button {
	padding: 5px;
	margin: 0;
	border: 1px solid #ddd;
	background-color: orange;
	color: white;
	font-weight: bold;
	display: block;
}

/* @end */