/* CSS Document */

body {
	/* The next 3 lines represent the basic default text used throughout the Clark School sites.*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 13px;
	margin: 0;
	padding: 0;
	background: #ffffff;
	/*Add a background image if desired. If not, comment out or deleter the next 2 lines.*/
	background-image: url(images/yourimage.jpg);
	background-repeat: no-repeat;
	width: 300px;
	border-bottom-color: #020609;

}

li {
	padding-bottom: 6px;
}

/* BEGIN MAJOR PAGE LAYOUT DIVISIONS AND THEIR STYLES*/

/* The header graphic area */
/* You may change the color and height of this area, as long as you adjust the positioning of the others to prevent overlap.*/

/* About the original: If you look at www.bioe.umd.edu/artjohnson/, you'll see the lung image spans the two bands at the top and the background of the content area. This could be accomplished by creating a precisely-sized, non-repeating background element, but I did something more flexible (and that is a neat trick). The lung image is actually broken into three pieces. The images in the bands are actually about twice as high as they need to be.  Because the layout is fluid, if someone really narrows the wondow, the text in the bands will wrap to a second line, the height of the bands will increase as a result--but the image will still appear seamless. */

/* THE TOP "HEADER" BAND ON THE PAGE.*/
#idbar {
	z-index: 15;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 99%;
	height: 96px;
	background: #eeddb9;
	/* In this case, using a background image allows us to overlay real text and the UMD logo in the same space. Alternatively, you could have no background image, or just place an image here in the HTML. */
	background-image:url(images/lacy-full2.gif);
	background-repeat: no-repeat;
	border-left-color: #7e0000;
	border-left-style: solid;
	border-left-width: 5px;
	border-top-color: #7e0000;
	border-top-width: 5px;
	border-top-style: solid;
	border-right-style: solid;
	border-right-width: 5px;
	border-right-color: #7e0000;
}

/* The next style is for your name at the top. */

#idbar h1 {
	z-index: 25;
	font-family: Garamond, "Adobe Garamond", Palatino, "Times New Roman", Times, serif;
	font-weight: normal;
	font-size: 36px;
	float: left;
	line-height: 40px;
	margin-top: 48px;
	padding-left: 145px;
	white-space: nowrap;
}

/* The next two styles keep the logo from whacking into the title or going to the next line. */

#idbarImg {
	position: absolute;
	top: 0px;
	left: 900px;
	padding-right: 36px;
}

#idbarImg img {
	float: right;
}

/* THE BAR BELOW THE HEADER, which can be used for a tagline, navigaiton, etc. */
/* You may change the color and height of this area, as long as you adjust the positioning of the others to prevent overlap.*/

#navbarTop {
	z-index: 35;
	position: absolute;
	top: 96px;
	width: 99%;
	/*height: 36px;*/
	/* If there is no specified height, text can wrap if the window gets small enough--there is enough height to the  background image (if present) to be seamless to a point.*/
	background: #7e0000;
	background-image: url(images/yourimage.jpg);
	background-repeat: no-repeat;
	border-left-color: #eeddb9;
	border-left-style: double;
	border-left-width: 5px;
	border-right-style: double;
	border-right-width: 5px;
	border-right-color: #eeddb9;
}

#navbarTop h1 {
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	padding-left: 36px;
	padding-bottom: 0px;
	margin-bottom: 8px;
	margin-top: 9px;	
	/* All of this very specific margin and padding stuff is to appease IE. */
}

#navbarTop h1 .of {
	font-family: Garamond, "Adobe Garamond", "Times New Roman", Times, serif;
	font-weight: normal;
	font-style: italic;

}

/* Link styles for this area. */

#navbarTop a {
	text-decoration: none;
}

#navbarTop a:link {
	color: #ffffff;
}

#navbarTop a:visited {
	color: #ffffff;
}

#navbarTop a:hover {
	color: #ffeeca;
}

/* THE LEFT HAND MENU NAVIGATION */

/* You may edit the width, background color, border(s) and text and link styles as desired. It is possible to create very different looks between sites using the same core code. */

#leftnav {
	width: 180px;
	z-index: 10;
	position: absolute;
	top: 143px;
	left: 0px;
	padding-left: 36px;
	/*padding-right: 36px;*/
	padding-top: 18px;
	padding-bottom: 18px;
	/*background: #ffeeca;*/

}

#leftnav ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	border-right-color: #eeddb9;
	border-right-style: solid;
	border-right-width: 3px;
}

#leftnav li {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-weight: bold;
}

/* Here's how the line effect when links are hovered works: If you only insert the bottom border on hover, the menu "jiggles" by 1 pixel when you mouse off, since the border is no longer there. on a solid background, the simple colution is to assign a bottom border the color of the background for the non-hover states. However, these solid borders appear as fine lines over the lung background. Setting the border style to hidden or none doesn't work because it simply goes away, resulting in the "jiggle." (There is no "clear" attribute, and transparency isn't supported well--it seems to apply to the entire object--i.e., the text and its borders have the same transparency.) However, adding a by default colorless/clear 1 pixel bottom margin to the unhovered states, the height is maintained, the background image is uninterrupted, and the "jiggle" is eliminated--as long as the 1px bottom margin is also explicitly removed from the hover state (otherwise, you have 1 px border and a 1px margin, resulting in an excess 1px of height). */

#leftnav a {
     display: block;
     text-decoration: none;
     padding-right: 36px;
     margin-bottom: 1px;
}

#leftnav a:link {
     color: #000000;
     margin-bottom: 1px;
}

#leftnav a:visited {
     color: #000000;
     margin-bottom: 1px;
}

#leftnav a:hover {
     color: #cc0000;
     margin-bottom: 0px;
     border-bottom-color: #cc0000;
     border-bottom-style: solid;
     border-bottom-width: 1px;
}

/* LEFT NAVIGATION SUBMENU STYLES */
/* CSS to control the visibility of a given submenu is in an editable region of the <head> in the template and must be set manually.*/

#leftnav ul ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	border-right-style: none;
}

#leftnav ul li ul li {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: smaller;
	font-weight: normal;

}

/* This is only needed if the submenu items are to be indented. */
/*#leftnav ul li ul li a {
	display: block;
	text-decoration: none;
	margin-left: 18px;
	padding-right: 18px;
}*/

#leftnav ul li ul li a:link {
	color: #000000;
	margin-bottom: 1px;
}

#leftnav ul li ul li a:hover {
	color: #cc0000;
	border-bottom-color: #cc0000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	margin-bottom: 0px;
}

/* THE CONTENT AREA AND ITS STYLES */
/* You may adjust various attributes as desired--just be aware you must do it in relation to other elements. */

#contentArea {
	position: absolute;
	top: 143px;
	left: 230px;
	padding-left: 36px;
	padding-right: 36px;
	padding-top: 18px;
	padding-bottom: 36px;
	min-width: 600px;
}

#contentArea a:link {
	color: #7e0000;
	font-weight: bold;
}

#contentArea a:visited {
	color: #7e0000;
	font-weight: bold;
}

#contentArea a:hover {
	color: #cc0000;
	font-weight: bold;
}


/* TEXT, IMAGE, BOX AND OTHER STYLES */
/* Many of these are identical to the styles used in other Clark School sites (which is good for unity, but you may edit the styles if desired. You might try changing a color but leaving the font the same. */

.pageHeader {
	color: #0033CC;
	font-size: 14px;
	font-weight: bolder;
	font: Arial, Helvetica, sans-serif;
}

.pageHeaderBlack {
	color: #000000;
	font-size: 14px;
	font-weight: bolder;
	font: Arial, Helvetica, sans-serif;
}

.sectionHeader {
	color: #cc0000;
	font-size: 12px;
	font-weight: bold;
	font: Technical, Arial, Helvetica, sans-serif;
}

.sectionHeaderBlack {
	color: #000000;
	font-size: 12px;
	font-weight: bold;
	font: Technical, Arial, Helvetica, sans-serif;
	opacity: 1.0;
}

.subHeader {
	font-weight: bold;
	font-size: 11px;
}

.subHeaderRed {
	font-weight: bold;
	color: #7e0000;
	font-size: 11px;
}

/* The box styles simply make various types of text-in-a-box. They allow text to wrap around them to the left or right. Feel free to experiment or ignore. */

.box {
	background-color: #eeddb9;
	line-height: 13px;
	padding: 12px;
	margin: 0px;
}

.box2 {
	line-height: 13px;
	padding: 12px;
	margin: 0px;
	border: #cc0000 1px solid;
}

.box3 {
	width: 33%;
	float: right;
	line-height: 13px;
	padding: 12px;
	margin-left: 36px;
	margin-bottom: 18px;
	margin-top: 18px;
	border: #cc0000 1px solid;
}

.box4 {
	width: 33%;
	float: right;
	line-height: 13px;
	padding: 12px;
	margin-left: 36px;
	margin-bottom: 18px;
	margin-top: 9px;
	background-color: #eeddb9;
}

.box5 {
	width: 325px;
	float: right;
	line-height: 13px;
	padding: 12px;
	margin-left: 36px;
	margin-bottom: 18px;
	margin-top: 9px;
	background-color: #eeddb9;
	height: 300px;
}


#contentArea p.box a:link {
	color: #000000;
}

#contentArea p.box a:hover {
	color: #cc0000;
}

.caption {
	color: #666666;
	font-size: 10px;
	line-height: 13px;
	padding: 5px 0px 10px;
	margin: 0px;
}

.caption2 {
	color: #7e0000;
	font-style: italic;
	font-size: 10px;
	line-height: 13px;
	padding: 0px 0px 0px 0px;
	margin: 0px;
}

.caption4 {
	color: #000000;
	font-size: 10px;
	line-height: 13px;
	padding-top: 0px;
	padding-bottom: 12px;
	margin: 0px;
}

/* FOOTER STYLES */

p.footer {
	font-size: 9px;
	padding-top: 36px;
	padding-bottom: 36px;
}

#contentArea p.footer a:link {
	color: #003399;
	font-weight: normal;
}

#contentArea p.footer a:visited {
	color: #003399;
	font-weight: normal;
}

/* IMAGE STYLES */
/* For text wrapping, applying borders, and putting captions under them without using tables. */
/* The captioning is accomplished by putting the image and caption in a <div> with a left or right wrap, of a fixed width (the width of the image). The photo is placed and the caption must wrap to the next line, directly below it--except IE is stupid and needs to be told explicitly to <br /> between photo and caption. Captioned photos can use one of the caption styles above. */

/* For an example of a flexible, simple gallery with out captions, view the source code of: http://bioe.umd.edu/~artjohns/apd/apd-photos.html (play with the width of your browser window)

For an example with captions, see: http://memil.umd.edu/equipment.html

The code goes like this:

<div class="captionedImage"><img src="images/elipsometer-01.jpg" alt="Elipsometer" width="200" height="300" /><br /><span class="caption">Elipsometer</span></div>

*/

img.wrap {
	float: left;
	margin-right: 16px;
	margin-bottom: 16px;
}

img.wrapright {
	float: right;
	margin-left: 12px;
	margin-bottom: 6px;
}

.captionedImage {
	width: 280px;
	float: left;
	margin: 0px;
	padding-right: 18px;
	padding-bottom: 18px;
}

.captionedImageWide {
	width: 600px;
	float: left;
	margin: 0px;
	padding-right: 18px;
	padding-bottom: 18px;
}

.captionedImageRight {
	width: 200px;
	float: right;
	margin: 0px;
	padding-left: 18px;
	margin-right: 36px;
	padding-bottom: 18px;
}

.captionedImageWideRight {
	width: 300px;
	float: right;
	margin: 0px;
	padding-left: 18px;
	padding-bottom: 18px;
}

.captionedImage img {
/*	border: 1px solid #000000; */
}

.captionedImageRight img {
	border: 1px solid #000000;
}

.captionedImageWide img {
/*	border: 1px solid #000000; */
}

.captionedImageWideRight img {
	border: 1px solid #000000;
}