/* Only essential thing in the html and body styles is the font-size. Set it to 100% here and use 'ems' everywhere else to control font-sizes without too much trouble across browsers. As a general rule, though, don't set a size below .75em because that will be illegible on some browsers standard settings */
html, body
	{
	margin				: 0px 0px 10px 0px;
	padding				: 0px;
	background-color	: #f3f3f3;
	/*/*/
	/* background-image	: url(http://www.georgetown.edu/sfs/ibd/graphics/bg_water04.gif); */
	/* */
	font-size  			: 100%;
	font-family			: arial, helvetica, sans-serif; 
	color				: #555; 
	}	
	
/* The container ID is the basic box that establishes the page. Everything fits inside this box. The positioning styles are key. Setting the position absolute, the width to your desired measurement, the 'left' setting to 50% and the left margin to 1/2 of the desired width will ensure that the box gets centered. Other simpler methods fail due to browser insufficiencies. Note the special commenting marks around the 'left' and 'margin-left' declarations. This hides these declarations from Netscape 4 which mishandles the code. I use this technique repeatedly in the stylesheet. Finally, note the container only has border declared on one side. Remaining borders are declared elsewhere.*/	

#container{
	position:absolute;
	top:10px;
	width:744px;
/*/*/	
	left:50%;
	margin-left:-372px;
/* */
	margin-top:8px;
	padding:0px;
	border-top: 1px solid #999999;
}	

/* The wrapper tags are a way of avoiding a problem that appears in multi column layouts. Because the columns 'float' next to one another, they only grow as big as the content they hold, which can lead to a short column, next to a long column. The longer column may seem to exceed the boundaries of the containing box with undesirable visual effects. Using these wrappers avoids this problem. Also lets you create other visual effects, such as a colored background for the sidebar, for example. Such an effect is not used here, however. Note that the wrappers provide the side borders for the container. */

#wrapper1, #wrapper2
	{
	margin				: 0;
	padding				: 0;
	}

#wrapper1
	{
	/*/*/
	background-color    : #FFFFFF;
	border-right		:1px solid #999999;
	/* */
	}

#wrapper2
	{
	/*/*/
		border-left		:1px solid #999999;
	/* */
	}
	
/* The header class is what	allows for a horizontal banner across the top of the page. I generally use this code twice. Once for the header, with GU and SFS links, and then again as the 'title' class for the departmental banner */

.header
	{
	margin				: 0px;
	padding				: 0px;
	color				: #333333;
	background-color	: #ffffff;
	}


/* The header navbar breaks into two separate h2 tags to allow individual links to each target. The banners use a technique called 'image replacement'. I have provided a background image for an H2 tag. This allows the page to make use of textual tags (good for search engine visibility, ease of maintenance, accessibility for disabled users, and reduced bandwidth demands) while still providing something visually more interesting than really bold text. Use any image you like, but be sure to set the height and width here accordingly. ALSO, note a little further down, that we use a little trick to hide the text within the H2 tag.*/	

/*/*/
.header #topleft h2{
	float:left;
	margin: 0;
	padding: 0;
	width: 370px;
	height: 25px;
	background: url(http://www.niederhausen.net/piet/shared/images/header_left.jpg) no-repeat transparent;
}

.header #topright h2{
	float:left;
	margin: 0px;
	padding: 0;
	width: 371px;
	height: 25px;
	background: url(http://www.niederhausen.net/piet/shared/images/header_right.jpg) no-repeat transparent;
}

/* Here's where we hide the H2 text. There must be text inside the H2 or it (the image, that is) doesn't appear on the page. But we don't want to actually see the text unless style sheets are turned off. Thus enclose the text in a 'span' tag and use the code below to make it invisible. */

.header h2 span{display:none;}
/* */	
	
/* These two pieces of code helps cover some IE5 bugs.*/
* html body .header
	{
	margin-bottom		: -19px;
	font-family			: "\"}\"";
	font-family			: inherit;
	margin-bottom		: 0px;
	}
	
#empty{}

/* Here's where the department header gets handled. */
.title
	{
	clear				: both;
	margin				: 0px;
	margin-top			: -7px;
	margin-bottom:		: 0px;
	padding				: 0px;
	text-align			: center;
	font-size			: .85em;
	color				: #000000;
	}

/* reset post NN4 */
.title
	{
/*/*/
	margin-top			: 0px;
/* */
	}	
	
.title h1 {
	margin: 0;
	padding: 0;
	width: 742px;
	height: 75px;
	background-repeat: no-repeat;	
	border-top:1px solid #999999;
	border-bottom:1px solid #999999;
}

BODY#home .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_home.jpg);
}
BODY#experience .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_experience.jpg);
}
BODY#food .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_food.jpg);
}
BODY#media .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_media.jpg);
}
BODY#portfolio .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_portfolio.jpg);
}
BODY#personal .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_personal.jpg);
}
BODY#games .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_games.jpg);
}
BODY#resources .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_resources.jpg);
}
BODY#links .title h1 {
	background-image: url(http://www.niederhausen.net/piet/shared/images/banner_links.jpg);
}

.title h1 span{display:none;}



/* The columns class envelops all of the three possible columns. Not much you need to adjust here */
.columns
	{
	margin				: -1px 0px 0px 0px;
	padding				: 0px;
	color				: #666666;
	background-color	: #ffffff;
	}

.columns
	{
/*/*/
	margin-top			: 0px;
	background-color	: transparent;
/* */
	}
	
/* NN4 screws up the images in the column; hide them for now*/	
.columns img {display:none;}
/*/*/
.columns img {display:inline;}
/* */

/*Here's where things get fancy. The style sheet is set up to allow for 1,2, or 3 column design with only a minor adjustment to the class declared in the 'body' tag. Here is where this is made possible. Styles are declared for each of the three columns, main, sub and xtra. Later, adjustments are made to the styels to accomodate switches between 1, 2 and 3 columns possibilities.  The main thing you'll ever touch here is the width of the columns. It takes a bit of playing when you start to adjust them but sometimes this is necessary due to size of options in a subcolumn, etc. Note that you can manipulate widths not only in the column classes through their 'width' declaration, but also with special 'padding' divs declared below. */

.maincol {
  	float:left;
  	width:575px;
  	font-size:.85em;
  	margin: 0px;
	background-color:#ffffff;
    }
	
.subcol {
  float:right;
  width:150px;
  font-size:.85em;
  margin: -11px 0 0 0;
  }
  
 /* reset post NN4 */
.subcol
	{
/*/*/
	margin-top			: 0px;
/* */
	} 
  
#empty{}

.xcol {
  float:right;
  width:200px;
  font-size:.85em;
  margin:0 0 0 0;
  }
	
/* Here's where adjustments are made depending on the particular layout chosen. In this first example, if the user makes the body class 'col-M' then this will change the width of the 'maincol' class from the amount declared above to 95% of the container. The subcol and xcol are subsequently hidden in this scenario and so the maincol expands to fill the whole box. Each possible scenario is dealt with in the following declarations. */	
.col-M .maincol {
  float:none;
  width:95%;
  border-left:none;
  }
  
.col-M #wrapper2, .col-MS #wrapper2, .col-SMX #wrapper2, .col-MX #wrapper2
	{
	background-image	: none;
	}
.col-SM .xcol, .col-MS .xcol, .col-M .subcol, .col-M .xcol, .col-MX .subcol {display:none;}
.col-SM .maincol, .col-SMX .maincol {float:right;}
.col-SM .subcol, .col-SMX .subcol {float:left;}
  
.col-MSX .wrap, .col-SMX .wrap, .col-MX .wrap {
  float:left;
  width:425px;
  }
.col-MSX .maincol, .col-SMX .maincol {width:250px;}
.col-MX .maincol {width:525px;}
.col-MSX .subcol, .col-SMX .subcol {width:150px;}

/* Here are the special padding divs mentioned above. The content for the maincol, subcol and xcol actually fits inside these divs which are nested inside the respective column classes. Adjust padding and/or marginshere rather than with the actual column classes. This helps with some sizing differences between the browsers. Be sure to test IE vs Mozilla however to avoid surprises! */
.subcolpadding,  .xcolpadding
	{
	margin				: 0px;
	padding				: 10px 15px 10px 0px;
	}
.maincolpadding
	{
	margin				: 0px;
	padding				: 0px 15px 15px 15px;
	}
	
.headerpadding
{
	margin				: 0px;
	padding				: 0px;
}

/* Like the header and title classes, the footer and middle classes are ways to break out of a column layout to span the entire 'page'. Note that if you use the 'middle' class, you should close each of the column classes (maincol, subcol, xcol) and the 'wrap' (beware: not 'wrappers') and 'columns' classes before opening the 'middle' class. You could then reopen all of them again to restart a column layout if desired. I don't use this option too often, though it is used in the sample files for the address bar on each page. The footer class is by contrast essential. Close all your columns and then create your footer. Even if the footer holds no text, its bottom border establishes the bottom line of the container. The top border is white in this case, matching the background inside the container to make it invisible.*/	

.footer
	{
	clear				: both;
	margin				: 0px;
	margin-top			: -7px;
	margin-bottom		: 0px;
	padding				: 15px 20px 8px 0;
	text-align			: right;
	font-size			: .85em;
	color				: #c7c7c7;
	background-color    : #FFFFFF;
	border-bottom		: solid 1px #999999;
	border-top			: solid 1px #FFFFFF;
	}
/* reset post NN4 */
.footer
	{
/*/*/
	margin-top			: 0px;
/* */
	}	

/* links inside this particular footer are styled not to be underlined and to match the basic text color */	
.footer a {text-decoration:none; color:#aaaaaa;}
	
.middle
	{
	clear				: both;
	margin				: 0px;
	margin-top			: -7px;
	margin-bottom:		: 0px;
	padding				: 40px 2px 10px 2px;
	text-align			: center;
	font-size			: .75em;
	color				:  #b3b3b3;
	background-color	: #ffffff;
	}
/* reset post NN4 */
 .middle
	{
/*/*/
	margin-top			: 0px;
/* */
	}	

/*Occasionally, a floated element won't site visually within a containing box. Adding an empty div with the following class can help clean things up */
div.clearer {clear: both; line-height: 0; height: 0;}


/* Main navigation */
/* From http://leftjustified.net/site-in-an-hour/site/ */

/* float clearing - technique explained @ http://www.csscreator.com/attributes/containedfloat.php */
ul#nav:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
}
* html #nav {
	height:1%;
}

/** hiding of elements for assistive devices (screen readers etc) **/
ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}

ul#nav {
   	list-style:none;
   	margin:0px;
	text-align:center;
   	background:#fff;
	padding:0px;
   	padding-bottom:3px;
}
#nav li {
    list-style:none;
    width:147px;
    float:left;
	display:block;
    text-align:center;
	background:white;
   	border-right:1px solid #dddddd;
   	border-bottom:1px solid #999999;
}
#nav li#active {
   	border-bottom:1px solid white;
}
#nav li.last {
	border-right:none;
    width:150px;
}
#nav a {
    display:block;
	text-decoration:none;
	color:gray;
	background:white;
	font-size:.85em;
	padding-top:2px;
	padding-bottom:4px;
}
#nav a:focus, #nav a:hover, #nav a:active {
	background:#eeeeee;
}
/** current menu item **/
ul#nav li#active A {
	color:#666688;
	font-weight:bold;
}

/* Body text formatting */

A {
	color:#6666aa;
	}
H1 {
	font-size:1.2em;
	font-weight:bold;
	margin-top:10px;
	margin-bottom:12px;
	color:#999999;
	}
H2 {
	font-size:1em;
	font-weight:bold;
	margin-top:10px;
	margin-bottom:5px;
	}
H3 {
	font-size:1em;
	font-weight:bold;
	margin-top:10px;
	margin-bottom:5px;
	}
P {
	margin-top:5px;
	margin-bottom:5px;
	}
SPAN.PTitle {
	font-weight : bold;
}
BLOCKQUOTE {
	font-style: italic;
}
EM {
	font-weight : normal;
}
TH {
	text-align : left;
}
UL {
	margin-top: 3px;
	margin-bottom: 3px;
}
LI {
	margin-top: 3px;
	margin-bottom: 3px;
}
DIV.H1Section {
	margin-left : 10px;
}
DIV.H2Section {
	margin-left : 20px;
}
DIV.H3Section {
	margin-left : 30px;
}
P.CodeSample {
	margin-left : 15px;
	color : #557799;
}

DL	{
	margin-top:5px;
	margin-bottom:5px;
	}
DT {
	font-weight:bold;
	}
DT A {
	font-weight:normal;
	}
DT EM {
	font-weight:normal;
	}
DD	{
	margin:5px;
	}

/* Reviews in readings. */
BODY DL.reviews {
	margin-left:10px;
	}
BODY DL.reviews DT {
	font-weight:normal;
	margin:5px 0 5px 75px;
	text-indent:-75px;
	}
BODY DL.reviews DD {
	margin:5px 0 5px 75px;
	}

DL.photoList {
	margin: 5px 0 5px 0;
	padding: 5px 5px 5px 5px;
	border: 1px solid #dddddd;
	}
DL.photoList DD {
	padding: 0 5px 0 0;
	}

/* Styles for flickr */
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}

/* Tables */
TH {
	vertical-align: bottom;
	text-align: left;
	border-bottom: 1px solid silver;
	padding: 4px;
	}
TD {
	vertical-align: top;
	padding: 4px;
	}