/* 
  ----------------------------------------
  PopMenu Magic Style Sheet
  by Project Seven Development
  www.projectseven.com
  Bartlett Page Pack
  Vertical 2 Column Fluid (Menu on Right)
  ----------------------------------------
*/
body {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 100%;
	background-image: url(../images/bkgnewv2.jpg);
	margin: 36px 24px;
	padding: 0;
}
/*Pagewrapper serves as a container for all elements on the page.
Min-width is set to 720px. This prevents the box from getting too narrow -
to the point that it would either break the layout or make text
impossible to read. When a user makes the browser window narrow,
pagewrapper will shrink in width until it reaches 720px - then the
browser will spawn a horizontal scrollbar. MSIE 6 does not support
min-width, but we have included a special workaround. See the
readme_first file included with this PagePack for details.*/
#pagewrapper {
	margin: 0px;
	min-width: 720px;
}

/*Sidebar is floated to the right edge of the window. The background image
creates the drop shadow along the box's right edge.*/
#sidebar {
	width: 180px;
	float: right;
	background-image: url(../images/bkgnewv2.jpg);
	background-repeat: repeat-y;
	font-size: 0.8em;
}

/*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: 1em;
}

/*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 12px 12px 12px;
	font-size: .9em;
	margin-right: 8px;
	font-style: italic;
}

/*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%;}

/*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-repeat: no-repeat;
	background-position: right bottom;
}

/*The mainbox DIV contains all of the elements that comprise the larger
rounded box: the Bartlett logo, main content area, and copyright notice.
Mainbox is set to have a right margin of 200px. This allows it to be positioned
to the left of sidebar, which is floated to the right.
There is no width assignment, allowing mainbox to gorow and shrink depending
on the width of the browser window.

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 {
	margin: 0px 200px 0px 0;
	background-image: url(../images/bart_leftmidBG.gif);
	background-repeat: repeat-y;
	background-position: left top;
	background-color: #FFFFFF;
	border-right-width: medium;
	border-right-style: ridge;
	border-right-color: #FF99CC;
	border-bottom-width: thick;
	border-bottom-style: ridge;
	border-bottom-color: #FF99CC;
}

/*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-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: 30px 36px 30px 30px;
	background-image: url(../images/bart_mid.jpg);
	background-repeat: repeat-y;
	background-position: right top;
	font-size: 0.85em;
	line-height: 1.25em;
}

/*Paragraph margins are set.*/
#maincontent p {
	margin-top: 6px;
	margin-right: 0;
	margin-bottom: 6px;
	margin-left: 0;
}

/*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 completes the bottom curve.*/
#copyrightnotice {
	background-image: url(../images/bart_brCorner.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

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

/*Heading Styles*/
h1, h2, h3 {
	margin: 0;
	font-size: 2em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	text-align: left;
	line-height: normal;
	font-weight: normal;
}
h2, h3 {
	margin: 24px 0 0 0;
	font-size: 1.6em;
	color: #999999;
}
h3 {
	font-size: 1.4em;
	color: #666666;
}
h4 {
	font-size: 1.2em;
	color:#0000FF;
}
#sidebar h3 {
	color: #666666;
}

/*Link Styles. Applies to links except
those that are in the main menubar.*/
a:link {
	color: #0000FF;
}
a:visited {
	color: #999999;
}
a:hover, a:active, a:focus {
	color: #FF0000;
}
#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: #FFFFFF;
}
#footer a:visited {
	color: #EEEEEE;
}
#footer a:hover, #footer a:active, #footer a:focus {
	color: #333333;
}

/*MENU STYLE MODS*/

/*Because the menu is flying out to the right, we need to change
the arrow background to the west (left) pointing arrow.
We also need to position it to the left of the text
instead of to the right.*/
#p7PMnav .p7PMtrg, #p7PMnav .p7PMtrg:hover, #p7PMnav .p7PMtrg:active {
	background-image:  url(../p7pm/img/p7PM_dark_west.gif);
	background-repeat:	no-repeat;
	background-position: left center;
}

/* We change padding on the Trigger links to make more room for
the arrow, which is now on the left.*/
#p7PMnav a {
	padding: 4px 8px 4px 14px;
}
#pagewrapper #mainbox #maincontent h1 {
	border-bottom-width: thin;
	border-bottom-style: inset;
	border-bottom-color: #366FF3;
	margin-bottom: 16px;
}
#picturebox {
	padding: 5px;
	float: left;
	height: 145px;
	width: 400px;
	border: medium double #CCCCCC;
	margin-right: 10px;
}
#picturebox2 {
	padding: 5px;
	float: left;
	height: 178px;
	width: 300px;
	border: medium double #CCCCCC;
	margin-right: 10px;
.point1em {
	font-size: 1.1em;
}
.readabletext {
	font-family: "Trebuchet MS";
	font-size: 1.1em;
	line-height: normal;
}
#pagewrapper #mainbox #maincontent #pixboxvm {
	margin-right: 10px;
	border: medium double #cccccc;
	float: left;
	height: 160px;
	width: 200px;
}