/*
PDBA: Basic layout styles: 2006.06.01
*/



/* 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	: #fff;
	font-size  			: 100%;
	font-family			: Garamond, Times New Roman, Didot, Georgia, serif; 
	}	

	
/* The container ID is the basic box that establishes the page. Everything fits inside this box. */	

#container {
	position:absolute;
	top:0px;
	left:0;
	width:1000px;
	margin-top:8px;
	padding:0px;
	}	


/* 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. NOT USED IN PDBA DESIGN */

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

	
/* =HEADER */	
/*Header contains 'skip-to' links visible when css is disabled; with css, these get styled to show global navigation banners*/
#header ul	{
	margin:0;
	padding:0;
	list-style-type:none;
	}
	
#header li {
	display:inline;
	}
	
.skip {
	height:0;
	width:0;
	left:-19000px;
	overflow:hidden;
	position:absolute;
	}
	
.global {
	margin: 0px;
	padding: 0px;
	}
	
.global span {
	display:none;
	}
	
#SFS {
	float:left;
	margin: 0 0 0 20px;
	padding: 0;
	width: 268px;
	height: 25px;
	background: url(../graphics/nbsfs.gif) no-repeat transparent;
	}
		
#CLAS {
	float:left;
	margin: 0 0 0 5px;
	padding: 0;
	width: 232px;
	height: 25px;
	background: url(../graphics/nbCLAS.gif) no-repeat transparent;
	}		
		
#Georgetown {
	float:right;
	margin: 3px 0 0 0;
	padding: 0;
	width: 137px;
	height: 25px;
	background: url(../graphics/nbGU.gif) no-repeat transparent;
	}

/* This positions the main PDBA banner */
#home li.pdba {
	position:absolute;
	top:80px;
	left:450px;
}

/* this positions the language menus */
#header ul#language {
	float:right;
	list-style-type:disc;
	list-style-image: url(../graphics/language_bullet.gif);
	margin:-8px 105px 0 0;
}

#language li {
	font-size:.9em;
	font-weight:600;
	margin-left:.35em;
}


			


/* END HEADER STYLES */


	
	
/* =COLUMNS */
/* The columns class envelops all of the three possible columns. Not much you need to adjust here */
.columns
	{
	float				:left;
	margin				: 0;
	padding				: 0px;
	background-color	: transparent;
	width:100%;
	}

.tier .columns {
	margin				: 40px 0 0 0;
	padding				: 1em 0 0 0;
	}	
	
	
/*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. (credit:Douglas Bowman, StopDesign) 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:675px;
  	margin: 0px;
    }
	
	
/* this allows the full hemisphere image to show; otherwise gets truncated */	
#home .maincol {
	height:700px;
	}

.subcol {
  	float:right;
  	width:180px;
  	margin: 0;
  	}
  
.xcol {
  	float:right;
  	width:210px;
  	font-size:.85em;
  	margin:0 0 0 0;
	background-color:transparent;
	}

/* 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 {
	background-image: none;
	}
	
.col-SM .xcol, .col-MS .xcol, .col-M .subcol, .col-M .xcol {
	display:none;
	}
	
.col-SM .maincol, .col-SMX .maincol {
	float:right;
	}
	
.col-SM .subcol, .col-SMX .subcol {
	float:left;
	}


/* The following styles set the width of the PDBA second tier template */
.col-MSX .wrap, .col-SMX .wrap {
  float:left;
  width:760px;
  }

.col-MSX .maincol, .col-SMX .maincol {width:530px;}
.col-MSX .subcol, .col-SMX .subcol {width:225px;}



/* 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! */
#home .subcolpadding	{
	margin				: 0px;
	padding				: 35px 0px 10px 15px;
	}
#home .xcolpadding {
	margin				: 0px;
	padding				: 15px 10px 10px 0px;
	}	
#home .maincolpadding {
	margin				: 0px;
	padding				: 40px 20px 20px 20px;
	}
	
.headerpadding {
	margin				: 0px;
	padding				: 0px;
  	}

	
.subcolpadding
	{
	margin				: 0px;
	padding				: 0px 10px 10px 5px;
	}
.xcolpadding
	{
	margin				: 0px;
	padding				: 5px 10px 10px 20px;
	}	
.maincolpadding
	{
	margin				: 0px;
	padding				: 0px 10px 20px 20px;
	}	
	


/*The 'access' class hides certain content (e.g. navigation header) when stylesheets are present;*/
.access {
	display:none;
	}


/* =FOOTER */

/* Like the header class, 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. The footer class is by contrast essential. Close all your columns and then create your footer. */	

.footer
	{
	clear				: both;
	margin				: 0px;
	padding				: 15px 15px 2px 0;
	font-size			: .9em;
	color				: #666;
	background-color    : #FFF;
	}



/*Occasionally, a floated element won't sit 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;
	margin:0;
	}