@import url(/assets/css/color.css);
@import url(/assets/css/typography.css);

/* set page div widths */
body {
	min-width: 810px;
}
 
#wrapper, 
div#flashBanner, 
#utilityNav, 
#utilityNav ul, 
#nav, 
#nav ul{
	width: 810px;
}

.navSectionHeader,
#sectionNav,
#sectionNav ul li a {
	width: 175px;
}

#mainContent, 
#footer  {
	width: 635px;
}

#feature{
	width: 366px;
}

.alert {
	width: 220px;
}

/* END set page div widths */

html, body {
	min-height:101%
	}

body {
	float: left;
	margin: 40px 0 0 35px;
	background: url("/assets/img/background gradient copy.gif") no-repeat right top;
	font-size: small;
}

iframe {
	margin: 10px;
}

#wrapper {
	float: left;
	margin: 0 auto;
}

#header {
	clear: both;
	height: 80px;
	position: relative; 
}

#header div#flashBanner {	
	clear: both;
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* = #utilityNav 
Top-most horizontal navigation */

#utilityNav {
	float: left;
	font-size: 85%;
}

#utilityNav a img {
	margin: 10px 0px;
	border: 0;
}

/* = #nav 
horizontal navigation that seperates banner from content */

#nav {
	float: left;
	font-size: 105%;
}
#nav ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
	float: left;
}
#nav ul li {
	float: left;
}

#nav a {
	width: 0.1em; /* Hack to set the whole area in the tab as 'clickable' in IE6 */
	display: block;
	padding: 5px 14px;
	float: left;
	text-decoration: none;
	white-space: nowrap;
}
#nav > ul a {
	width:auto;
} /* Reset with for browsers other than IE6 (IE6 doesn't understand > child selector */

#nav ul a:hover {

}

/* = #sectionNav
verticle navigation for each section of the site */

.navSectionHeader {
	font-size: 120%;
	padding: 10px;
}


#sectionNav {
	clear: both;
	float: left;
	margin: 0;
	margin-top: 20px;
	padding-bottom: 0;
	font-size: 105%;
}

#sectionNav ul li {
	list-style: none;
}

#sectionNav ul#main {
	list-style-type: none;
	padding: 0;
	margin: 0 0 60px 0;
}

#sectionNav ul li a {
	display: block;
	padding: 3px 0;
	text-decoration: none;
	text-indent: 15px;
}

#sectionNav p {
	margin: 0 20px 20px 0;
	padding: 0 20px 0 0;
	float: left;
}

/******************* indent lower nav elements **************************/

#sectionNav ul.GroupProfile a,
#sectionNav ul.GroupGovernance a,
#sectionNav ul.Subsidiaries a {
	text-indent: 10px;

	
}

/******************* hide lower nav elements *************************/

.home ul.GroupGovernance,
.home ul.Subsidiaries,
.home ul.GroupProfile,

.contact ul.GroupGovernance,
.contact ul.Subsidiaries,
.contact ul.GroupProfile,

.downloads ul.GroupGovernance,
.downloads ul.Subsidiaries,
.downloads ul.GroupProfile,

.scholarships ul.GroupGovernance,
.scholarships ul.Subsidiaries,
.scholarships ul.GroupProfile,

.groupProfile ul.GroupGovernance,
.groupProfile ul.Subsidiaries,

.groupGovernance ul.GroupProfile,
.groupGovernance ul.Subsidiaries,

.subsidiaries ul.GroupProfile,
.subsidiaries ul.GroupGovernance {
	display: none;
}

#content {/* Necessary to allow the 'secondary content' to have a left margin without needing to implement box model hack*/
	margin-right: 0;
/* background: url("/assets/img/bgRightBorder.jpg") repeat-y right top; make background image with divider on it. */
}

li#navSectionFooter {
	padding-bottom: 30px;
/*	background: url("/assets/img/bgSe ctionNavBtm.jpg") no-repeat bottom right;*/
}

#mainContent {
	float: left;
	font-size: 105%;
}

h1, h2, h3, p {
	padding-right: 40px;
	padding-left: 40px;
}

ul {
	padding-right: 20px;
	padding-left: 20px;
}

h1, h2, h3 {
	font-weight: normal;
}

h1 {
	font-size: 180%;
	margin-bottom: 5px;
	margin-top: 40px;
}

h2 {
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 5px;
	margin-top: 40px;
}

h3 {
	font-size: 110%;
	padding-bottom: 0;
	margin-bottom: 5px;
}

p {
	margin-bottom: 20px;
}

#mainContent a {
	text-decoration: none;
}

#mainContent p.language {
	float: right;
}

#mainContent p.smallText {
	font-size: 85%;
	margin-left: 40px;
	margin-right: 40px;
}

#mainContent ul, #mainContent ol  {
	margin-left: 40px;
	margin-bottom: 20px;
	padding-right: 20px;
}

#mainContent p.introText {
	font-size: 110%;
}

#mainContent img.imgRight {
	float: right;
	margin: 0 0 0px 20px;
}

#mainContent img.imgLeft {
	float: left;
	margin: 0 20px 0px 0;
}

#mainContent div.imgCaptionRight {
	float: right;
	clear: both;
	margin: 0 20px 0 20px;
}

#mainContent div.imgCaptionLeft {
	float: left;
	clear: both;
	margin: 0 20px 0 20px;
}

#mainContent div.imgCaptionRight p,
#mainContent div.imgCaptionLeft p  {
	clear: both;	
	margin: 0;
	font-size: 90%;	
	padding: 5px;
}

.alert {
	float: right;
	margin: 0 20px 10px 20px;
}

div.box {	
	display: block;
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 10px;
	margin-bottom: 10px;
}

img.imgCentered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

blockquote {
	display: block;
	margin: 20px 25px 20px 45px;
	font-size: 140%;
/*	font-style: italic;*/
}

ul.level1 {
	list-style-type: lower-alpha;
}

ul.level2 {
	list-style-type: lower-roman;	
}

#feature {
	float: right;
	margin-top: 20px;
}

#feature img.imgRight {
	margin: 0 0 10px 10px;
}

#feature img.imgLeft {
	margin: 0 10px 10px 0;
}

#feature h2 {
	clear: both;
	font-size: 130%;
	font-weight: normal;
}

#feature h2.top {
	/*margin-top: 20px;*/
	margin-top: 40px;
}

#feature h3 {
	font-size: 110%;
	margin-top: 20px;	
}

#feature ul,
#feature p {
	list-style-type: none;
}

#feature a {
	text-decoration: none;
}

#baseline {
	clear: both;
	}

#footer {
	clear: both;
	display: block;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
	height: 300px;
	font-size: 70%;
}


#footer div#right {
	text-align: left;
	width: 40%;
	float: right;
}

#footer div#left {
	text-align: left;
	width: 50%;
	float: left;
	padding-top: 46px;
}