/*Text align center on the body is the only way to center 
a CSS layout in IE5 PC.*/
body {
	font-family: "Trebuchet MS", Arial, sans-serif;
	color: #666666;
	margin: 36px 0;
	padding: 0;
	text-align: center;
	background-color: #C3BEB8;
	background-image: url(../images/bart_pbg.jpg);
}

/*We used text align center on the body (for IE5). This centers
the wrapper- and all the text inside. So we set text align to
turn off centering for elements inside the wrapper DIV.
Then to center the layout for modern browsers, we set left
and right margins to "auto". Width 750px sets the overall layout width
and the width of the 2 columns, plus and padding or borders must not
exceed this value.*/
#wrapper {
	text-align: left;
	margin: 0 auto;
	width: 750px;
}

/*The mainbox DIV contains all of the elements that comprise the larger
rounded box: the Bartlett logo, main content area, copyright notice
and the footer. Mainbox is floated right, adjacent to the sidebar.
The sidebar is also floated right, but since the mainbox comes first
in the source code, it is positioned to the right of sidebar.
The background image is positioned at the top left edge and tiles
vertically along the Y-Axis - creating the border effect on the
left edge of the box.*/
#mainbox {
	width: 558px;
	float: right;
	background-image: url(../images/bart_leftmidBG.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #FFFFFF;
}

/*The masthead DIV contains the background images that comprise the
mainbox's upper curve, as well as the logodiv.
Masthead's background image tiles left to right along the X-Axis
creating the masthead's textured backdrop.*/
#masthead {
	background-image: url(../images/bart_mhBG.jpg);
	background-repeat: repeat-x;
}

/*The logodiv carries the embedded logo image and a right-aligned
background image that creates the abstract pear scene and the
top right corner of the top curve.*/
#logodiv {
	background-image: url(../images/bart_logoBG.jpg);
	background-repeat: no-repeat;
	background-position: right top;
}

/*The maincontent DIV is nested inside mainbox and renders below
the masthead. The background image is positioned at the top right
edge and tiles vertically along the Y-Axis - creating the drop
shadow effect on the right edge of the box. Padding is set
6 pixels wider on the right to accomodate for the space taken
up by the right edge drop shadow background.*/
#maincontent {
	padding: 15px 36px 30px 30px;
	background-image: url(../images/bart_mid.jpg);
	background-repeat: repeat-y;
	background-position: right top;
	font-size: 0.65em;
	line-height: 1.4em;
	color: #8D8D8D;
}

/*Paragraph margins are set.*/
#maincontent p.home {
	margin: 0;
}
/* list settings*/
#maincontent ul.home {
	margin: 0 10px;
	padding: 0;
	list-style-type:none;
}
#maincontent li.home {
	margin: 0;
	padding: 0;
}
#maincontent .title {
	font-weight:bold;
		color:#FF6600;
}
#maincontent img {
	margin: 0 5px;
}
#mainpromos {
	margin: 0 5px 0 2px;
	background-color: #FF6600;
	padding: 5px;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
}
.img_right {
	float:right;
	border: 1px solid #FF6600;
}
.img_left {
	float:left;
	border: 1px solid #FF6600;
}

/*The copyrightdiv carries the textured background along the bottom
edge of the mainbox. Nested inside this DIV is the
copyrightnotice DIV.*/
#copyrightdiv {
	background-image: url(../images/bart_copyBG.gif);
	background-repeat: repeat-x;
	background-color: #CCCCB9;
}

/*Copyrighnotice contains the embedded copyright notice, which
also creates the bottom left curve of the main box. We also set
a background image that creates the main box's bottom left curve.*/
#copyrightnotice {
	background-image: url(../images/bart_brCorner.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

/*The sidebar is set to 180px wide. Sidebar is the narrower
curved box in our layout. It is floated right to make it display to the right of
mainbox. The mainbox and sidebar "columns" are contained inside the
wrapper DIV. Since the wrapper was set to be 750px wide, the
combined width of mainbox and sidebar must be equal to or
less than 750px. Sidebar also has a left-margin set to 12px, which must
calculated as part of the space it occupies inside wrapper. Here is the
calculation: sidebar width + margin + mainbox width - or:
180 + 12 + 558 = 750. You must take this calculation into consideration
if you decide to make changes. The background image creates the drop shadow
along the box's right edge.*/
#sidebar {
	float: right;
	width: 180px;
	margin-right: 12px;
	background-image: url(../images/bart_small_mid.gif);
	background-repeat: repeat-y;
}

/*The menubar DIV is the container for our menu. Left and right margins are
set to 1px so that the menu fits inside the white borders of the sidebar.
Font-size is set to .9em for the entire menu.*/
#menubar {
	margin: 0 1px;
	font-size: .9em;
}

/*The sidecontent DIV comes after (below) the menu. Padding is set so text or
or other content is not flush against the sidebar's borders. Font-size is
set to .75em - small, but readable. Right margin is set to 8px to move the
entire DIV left to compensate for the space taken up by the sidebar box's
drop shadow.*/
#sidecontent {
	padding: 0 0px 12px 10px;
	font-size: .7em;
	margin-right: 8px;
}

/*Margins set for all paragraphs inside sidecontent.*/
#sidecontent p {
	margin: 6px 0 8px 0;
}

/*Sidebarfooter contains an embedded image that creates the sidebar's
bottom curve. Setting the font-size to a tiny size prevents this
DIV from growing too tall when users resize text. Without this
workaround, certain user text sizes would cause an artifact to
appear at the bottom of the sidebar.*/
#sidebarfooter {
	font-size: 1%;
} 

/*News in the sidebar
#mid-left ul { list-style: none; margin-top: 0; padding-top: 0; }
#mid-left li { background: url(../gfx/more-arrow.gif) no-repeat 0 50%; padding: 2px 0 2px 18px; }
#mid-left { width: 180px; background-color: #533419; }
img { border: 0; }
h4 { 
font-size: 11px; 
font-family: arial, sans, serif; 
color: #F1D9BB; 
padding: 0 15px 3px 15px;
text-indent: 0px; 
margin: 0;
}*/

/*Home page grey promo area*/
#home_news {
	margin: 20px 0 0 0;
	padding:0;
	background-color: #EFF0F1;
	padding: 0 0 10px 0;
	border-bottom: 2px dotted #FF6600;
}
#home_news h4 {
	text-transform:capitalize;
	font-size: 0.9em;
	border-top: 2px dotted #FF6600;
	font-family: arial, sans, serif; 
	color: #FF6600;
	padding: 0;
	text-indent: 5px;
	margin: 0 0 5px 0;
	letter-spacing: 3px;
	font-weight:bold;
}
#home_news li {
	margin:0;
	padding: 0 10px 0 12px;
	color: #999999;
}

/*Conact info on the home page*/
#contact {
	margin: 0 5px 0 2px;
	background-color: #FF6600;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #FFFFFF;
}

#contact h4 {
	text-transform:capitalize;
	font-size: 0.65em;
	border-bottom: 1px dotted #EFEFEF;
	font-family: arial, sans, serif; 
	color: #FFFFFF;
	padding: 3px 0;
	margin-bottom: 10px;
	text-align:center;
	margin: 0;
}
#contact p {
	margin: 0;
	line-height: 1.1em;
	padding: 0 5px 0 12px;
	font-size: 0.65em;
	color: #000000;
}
#contact .contact1 { padding-left: 20px;}
#contact .contact2 { padding-left: 31px;}
#contact .contact3 { padding-left: 17px;}
#contact .contact4 { padding-left: 24px;}
#contact .contact5 { padding-left: 11px;}

#contact img {
	border: 1px solid #FFFFFF;
	margin-left: 10px;
	margin-top: 4px;
	margin-bottom: 2px;
}

/*The pear class is assigned to a paragraph inside the sidecontent DIV
and sets a faded pear graphic as the background. You can assign this
class to other elements on your page if you want to.*/
.pear {
	background-image: url(../images/bart_pear.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

/*Footer styles*/
#footer {
	clear: both;
	margin: 0 0 0 100px;
	padding: 16px 0 0 0;
	font-size: .7em;
	color: #CCCCCC;
}
#footer p {
	margin: 0 0 3px 0;
}

/*Heading Styles*/
h1 {
	margin: 0px;
	padding: 0 0 5px 0;
	font-size: 1.4em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FF6600;
	text-align: left;
	line-height: normal;
	font-weight: normal;
}
h2  {
	margin: 24px 0 0 0;
	font-size: 1.2em;
	color: #666666;
}
h3 {
	font-size: 1.1em;
}
#sidebar h3 {
	color: #666666;
}

/*Link Styles. Applies to links except
those that are in the main menubar.*/
a:link {
	color: #FF6600;
}
a:visited {
	color: #FF6600;
}
a:hover, a:active, a:focus {
	color: #FF6600;
	text-decoration:none;
}
#sidecontent a:link {
	color: #837C50;
}
#sidecontent a:visited {
	color: #9D9660;
}
#sidecontent a:hover, #sidecontent a:active, #sidecontent a:focus {
	color: #333333;
}
#footer a:link {
	color: #CCCCCC;
}
#footer a:visited {
	color: #CCCCCC;
}
#footer a:hover, #footer a:active, #footer a:focus {
	color: #CCCCCC;
	text-decoration:none;
}

.projects { color:#FFFFFF; font-size:11px; line-height: 13px;}
.projects img { border: 2px solid #FFFFFF; margin-bottom: 7px; padding:1px;}