@charset "utf-8";

/* CSS Document */

/* master_css.css zero's out the default formatting. Its the base css */

@import url("master_css.css");
body {
	background: #0E1F32 url(../aai-images/aai-bg.png) repeat-x top;
}
/* The default lettering */

h1, h2, h3, h4, p, span {
	color: #ffffff;
	padding: 0px;
	margin: 0px;
	font-family: Trebuchet MS, Tahoma, Geneva, sans-serif;
}
/* specific to h2's */

h2 {
	padding: 0px;
	margin: 10px 0px 10px 0px;
	letter-spacing: 0px;
	font-size: 1.4em;
	line-height: 1em;
	color: #ff6718;
}
a, a:visited {
	color: inherit;
}
p, span, ul, ol, label {
	color: #ffffff;
	font-family: Trebuchet MS, Tahoma, Geneva, sans-serif;
	font-size: .95em;
	line-height: 1.2em;
}
p {
	letter-spacing: .03em;
}
/* For the boldening of some words */

p em {
	letter-spacing: .07em;
	font-style:normal;
	font-weight: bold;
}
/* To center the content on the page */

#wrapper {
	margin: 0px auto;
	width: 980px;
	display: block;
	height: auto;
	min-height: 100%;
}
/* Logo considerations. This keeps the AAI branding as an h1 element for SEO */

h1#header {
	width: 229px;
	height: 64px;
	display: block;
	position: relative;
	float: left;
	text-indent: 0px;
	clear: none;
	margin: 30px 0px 95px 0px;
}
h1#header span {
	display:none;
}
/* Navigation Formatting keeping everything a list helps with SEO (instead of convoluted div structure) */

ul#nav1, ul#nav2, ul#nav3 {
	position: relative;
	float: right;
	margin: 40px 0px 0px;
	height: auto;
	font-size:1em;
	color: #FFFFFF;
	clear: right;
	font-style: normal;
	font-weight: normal;
	width: 750px;
}
ul#nav1 li, ul#nav2 li, ul#nav3 li {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	float: right;
	clear: none;
	margin: 0px 0px 0px 8px;
	width: auto;
}
ul#nav1 li a, ul#nav2 li a, ul#nav3 li a {
	display:block;
	float: left;
	width: auto;
	height: auto;
	padding: 5px 0px 5px 0px;
	color: #ffffff;
	clear: none;
	font-family: "Trebuchet MS", Tahoma, Geneva, sans-serif;
	font-weight:100;
}
ul#nav1 li a em, ul#nav2 li a em, ul#nav3 li a em {
	font-weight: bold;
	font-style: normal;
}
ul#nav1 li a:hover, ul#nav2 li a:hover, ul#nav3 li a:hover, ul#nav1 li a.active, ul#nav2 li a.active, ul#nav3 li a.active {
	color: #ff6718;
}
ul#nav2 {
	margin: 5px 0px 0px 0px;
	font-size: .85em;
}
ul#nav3 {
	margin: 7px 0px 0px 0px;
	font-size: .7em;
}
/* This clears an li element so they wrap nicely */

ul#nav3 li.clr {
	clear: right;
}
/* This puts a nice thin line between elements */

ul#nav1 li.fill, ul#nav2 li.fill, ul#nav3 li.fill {
	background: url(../aai-images/aai-nav-line.gif) center repeat-y;
	width: 3px;
	height: 2em;
}
ul#nav2 li.fill, ul#nav3 li.fill {
	height: 1.5em;
}
ul#nav2 li a, ul#nav3 li a {
	padding: 2px 0px 2px 0px;
}
/* The front page slideshow elements */

ul#frontslideshow {
	width: 980px;
	height: 315px;
	display: block;
	position: relative;
	float: left;
	margin: 0px;
	overflow: hidden;
}
ul#frontslideshow li {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	position: absolute;
	top: 0px;
	left: 0px;
 margin: 0px  padding: 0px;
	visibility: hidden;
}
ul#frontslideshow img {
	width: 980px;
	height: 315px;
}
/* Formatting for the gallery slide shows */

div#galleryslideshow, ul#galleryindex {
	width: 730px;
	height: 345px;
	max-height: 315px;
	display: block;
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0px 15px 0px 0px;
}
/* Basically the ul element is within its parent div. The ul isn't scrolled, its the div that is scrolled. Thats why the ul needs an enormous width to handle any number of gallery images. There is a finite number but, practically speaking, its so big that it is ridiculous.*/

div#galleryslideshow ul {
	display: block;
	position: absolute;
	height: 315px;
	max-height: 315px;
	width: 30000px;
}
div#galleryslideshow ul li {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	width: 540px;
	height: 315px;
	position: relative;
	display: block;
	float: left;
	clear: none;
	margin: 0px 2px 0px 0px;
}
div#galleryslideshow ul img {
	width: 540px;
	height: 315px;
}
/* This is the gallery index */

ul#galleryindex {
	height: 15px;
	margin-top: 15px;
	clear: both;
}
ul#galleryindex li {
	display: block;
	position: relative;
	clear: none;
	float: right;
	margin: 0px 0px 0px 4px;
	font-size: .8em;
}
ul#galleryindex li a {
	padding: 0px 3px;
	color: #ffffff;
}
ul#galleryindex li a.active {
	color: #ff6718;
}
ul#galleryindex li.fill {
	color: #CCCCCC;
}
/* This ul item is the nice grid-of-images on some of the pages. No javascript here. */

ul#imagegrid {
	width: 730px;
	height: 450px;
	display: block;
	position: relative;
	float: left;
	overflow: hidden;
	margin: 0px 15px 0px 0px;
}
ul#imagegrid li {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin: 0px;
	padding: 0px;
	width: 182px;
	height: 105px;
	display: block;
	position: relative;
	float: left;
	clear: none;
	overflow: hidden;
	text-align: center;
	font-size: 0.8em;
	line-height: 1.5em;
	letter-spacing: .1em;
}
/* Where all content is kept */

div#content {
	display: block;
	position: relative;
	width: 980px;
	height: auto;
	clear: both;
	min-height: 315px;
}
/* Form styles are started here. The other css is for the interactive forms. They're kept speparate so I could debug them easier. */

form#contactform {
	width: 780px;
	height: auto;
	display: block;
	position: relative;
	float: none;
	overflow: hidden;
	margin: 0px auto;
	padding: 0px;
}
form#contactform div {
	display: block;
	position: relative;
	float: left;
	clear: none;
	width: 372px;
	height: auto;
	margin: 0px 10px 0px 0px;
}
form#contactform label {
	height: 20px;
	width: 360px;
	display: block;
	position: relative;
	float: left;
	clear: none;
	margin: 0px 0px 2px 0px;
	padding: 0px;
}
/* The footer of course */

div#footer {
	height: 50px;
	width: 980px;
	position: absolute;
	display: block;
	top: 589px;
	left: 115px;
}
/* Everything is kept in a p. Proper symantics go a long way. */

div#footer p {
	margin: 0px;
	padding: 0px;
	clear: none;
	float: left;
	font-size: .8em;
}
a:hover {
	color: #ff6718;
}