html, body {
	height: 100%;
}




/* CONTAINERS
   ----------------------------------------*/
div#masthead, div#container-a, div#container-b, div#container-c, div#container-d, div#container-searchresults {
	margin: auto;
	position: relative;
	width: 940px;

	width: 92%;	
	max-width: 940px;
}
div#container-a, div#container-b, div#container-c, div#container-d, div#container-searchresults {
	min-height: 100%;
}
#col1, #col2, #col3, #col4 {
  overflow: hidden; /* clips images that are too big for the column */
}



/* CONTAINER A: three columns
   24% - 48% - 24%
   ----------------------------------------*/
div#container-a #col1
{
  float: left;
  margin-right: 10px;
  width: 24%;
}
div#container-a #col2
{
  width: 49%;
  float: left;
  margin-right: 10px;
}
div#container-a #col3
{
  float: right;
  width: 24%;
}


/* CONTAINER SEARCHRESULTS: three columns
   24% - 51% - 21%
   ----------------------------------------
   Note: This is a temporary container to accommodate Google's Custom
   Search Engine results in a 3-column layout.  Google places a
   500-pixel minimum on the <iframe> it uses to contain its result page
   for insertion in users' pages, but container-a effectively limits
   to about 460 pixels in column 2.
   -Stanton Schell, 4/29/07
   */
div#container-searchresults #col1
{
  float: left;
  margin-right: 10px;
  width: 24%;
}
div#container-searchresults #col2
{
  width: 54%;
  float: left;
  margin-right: 10px;
}
div#container-searchresults #col3
{
  float: right;
  width: 19%;
}



/* CONTAINER B: two columns
   48% - 48%
   ----------------------------------------*/
div#container-b #col1
{
  float: left;
  margin-right: 10px;
  width: 49%;
}
div#container-b #col2
{
  float: left;
  width: 49%;
}



/* CONTAINER C: two columns
   24% - 72%
   ----------------------------------------*/
div#container-c #col1
{
  float: left;
  margin-right: 10px;
  width: 24%;
}
div#container-c #col2
{
  float: left;
  width: 72%;
}



/* CONTAINER D: four columns
   24% - 24% - 24% - 24%
   ----------------------------------------*/
div#container-d #col1, div#container-d #col2, div#container-d #col3
{
  float: left;
  margin-right: 10px;
  width: 24%;
}
div#container-d #col3
{
  margin-right: 0;
}
div#container-d #col4
{
  float: right;
  width: 24%;
}



/* COLUMNS A & B
   (for sub-dividing any other column into two sub-columns)
   ----------------------------------------*/
div.sub-columns
{
  clear: both;
}
div.col-a
{
  float: left;
  clear: left;
  margin-bottom: .84em;
  width: 49%;
}
div.col-b
{
  float: right;
  clear: right;
  margin-bottom: .84em;
  width: 49%;
}



/* HEADER
   ----------------------------------------*/
div#header{
	width:100%;
	height:46px;
}
div#header h1#logo {	
  float: left;
  padding-top: 14px;
}
div#header div#utilities {
	float: right;
	margin-top: 2em;
}
div#header div#utilities ul{
	list-style-type: none;
}
div#header div#utilities ul li{
	display: inline;	
	padding-right: 2px;
	margin-right: 2px;
}



/* NAVIGATION / SEARCH
   ----------------------------------------*/
div#navigation {
	width: 100%;
	height: 118px;	
	background-color: #7e9197;
	margin-bottom: .72em;
	position: relative;
}
div#tools {
	background-color: #7e9197;
	float: left;
	height: 118px; /* until we add the language selector */
	width: 24%;
}
div#tools a {
  color: #fff;
}
div#tools li {
  margin-left: .72em;
}



form#search {
  padding: .72em;
  padding-bottom: .36em;
}
form#search input {
  margin-right: .18em;
  padding: .18em;
}



ul#global-nav {
	float: right;
	width: 75%;
	list-style-type :none;
}
ul#global-nav li{
	float: left;	
	background-color: #eaf0f1;
	width: 25%;
}
ul#global-nav li a{
	color: #666;
	display: block;
	height: 22px;
	padding: .72em 0 0 14px;
	font-size: 1.2em;
	font-weight: bold;
}



#sxn-nav {
	background-color: #cddde2; /* default color if no other color is specified */
	float: right;
	width: 75%;
}
#sxn-nav ul {
	float: left;
	margin-top: .64em;
	width: 19%;
}
#sxn-nav li {
	background: url(../images/bullet-iai-white.gif) 0 6px no-repeat;
	line-height: 1.44em;
	margin-left: 1.44em;
	padding-left: .84em;
}



#sxn-title
{
	float: right;
	height: 33px;
	width: 75%;
}
#sxn-title h1
{
	font-size: 2em;
	line-height: 1.44em;
	padding-left: 14px;
}




#home div#sxn-nav {
	background-color: #cddde2;
	height: 86px;
}





#about ul#global-nav li.about {
	background-color: #ffc100;
}
#about ul#global-nav li.about a {
	color: #fff
}
#about #sxn-nav {
	background-color: #ffc100;
	height: 54px;
}
#about #sxn-nav li a {
	color: #fff;
}
#about #navigation h1 {
	background-color: #ffe07f;
	color: #fff;
}




#members ul#global-nav li.members {
	background-color: #74e1eb;
}
#members #sxn-nav {
	background-color: #74e1eb;
	height: 54px;
}
#members #navigation h1 {
	background-color: #b9f0f5;
	color: #fff;
}



#learn ul#global-nav li.learn {
	background-color: #a9e65d;
}
#learn ul#global-nav li.learn a {
	color: #fff
}
#learn #sxn-nav {
	background-color: #a9e65d;
	height: 54px;
}
#learn #sxn-nav li a {
	color: #fff;
}
#learn #navigation h1 {
	background-color: #d4f2ae;
	color: #fff;
}



#network ul#global-nav li.network {
	background-color: #6b3fc6;
}
#network ul#global-nav li.network a {
	color: #fff
}
#network #sxn-nav {
	background-color: #6b3fc6;
	height: 54px;
}
#network #sxn-nav li a {
	color: #fff;
}
#network #navigation h1 {
	background-color: #b59fe2;
	color: #fff;
}



#search #sxn-nav {
	height: 54px;
}
#search #navigation h1 {
	background-color: #cddde2;
	color: #fff;
}



#content
{
	clear: both;
}









div#footer {
	height:21px;
	background-color:#DCE7EB;
	width:100%;
	margin:0px;
	padding:0px;
	clear: both;	
	margin-top: .72em;
	padding-top:.72em

}