@charset "UTF-8";

ul, ol, dl, p, h1, h2, h3, h4, h5, h6
{
	/* pixels are used here, rather than ems, because I want a consistent 
	 * margin on the different headings. if I use ems, 1em for an h1 element 
	 * is much larger than 1em on an h6 element. I don't want this.
	 */
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 0;
	padding-bottom: 0;
	line-height:1.5em;
}

ul ul, ul ol, ol ul, ol ol
{
	/* kill margins on sub-lists
	 */
	margin-top: 0;
	margin-bottom: 0;
}
P 
{
	font-size:0.8em;
}
a
{
	color:#006699;
	font-weight:bold;
}
.inside ul, #memNav  ul
{
	font-size:0.8em;
}
.inside ul li, #menNav  ul li
{
	padding-bottom:5px;
}

/* -------------- Member Nav ------------------*/
#memberNavBar {
	background-color:#006699;
	color:#CCCCCC;
	text-align:center;
	font-size:11px;
	font-weight:bold;
	width:100%;
	color:#FFF;
	clear:both;
	padding:5px 0 7px 0;
}

#memNav  ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	} 

#memNav  ul li {
	margin-left: 0;
	list-style: none;
	display: inline;
	}
#memNav  ul li span{
	padding-left:4px;
	padding-right:3px;
	font-weight:normal;
	color:#8FBCD2;
	}
	
#memNav a 
	{
	color:#ffffff;
	
	}
	
#memNav a:hover
	{
	color:#73ABC7;
	}

/* -------------- Member Nav ------------------*/

h1
{
	font-size: 120%;
	color:#006699;
}
h2
{
	font-size: 100%;
	color:#006699;
}
h3
{
	font-size: 90%;
	color:#CC9900;
}
h4
{
	font-size: 80%;
	color:#006699;
}
h5
{
	font-size: 70%;
	color:#666666;
	border-bottom:1px solid #E1E1E1;
}
h5#pS {
color: #333333;
}
h5#gS {
color: #989101;
}
h5#sS {
color: #C0C0C0;
}
h5#bS {
color: #996600;
}

h6
{
	font-size: 50%;
}
a, a:link, a:visited, a:active
{
	text-decoration: underline;
}
a:hover
{
	/* because I like the visual feedback a user gets when they
	 * mouse over a link and see the underline of the link
	 * disappear.
	 */
	text-decoration: none;
}
strong{color:#006699;font-weight:bold;}

code, pre
{
	/* Make sure we're all using the same monospaced font for CODE
	 * and PRE elements
	 */
	font-family: "Courier New", Courier, monospace;
}
label
{
	/* It's all about the visual feedback. In this case, label 
	 * elements are usually clickable which then set focus on
	 * their target. I want to show that to the user in a manner
	 * they are used to and understand.
	 */
	cursor: pointer;
}
table
{
	/* Some browsers won't carry the font size down into the 
	 * browser like they're suppose to.
	 */
	font-size: 100%;
}
td, th
{
	/* I never like or use the default vertical centering "feature"
	 * provided by tables. 
	 */
	vertical-align: top;
}
body
{
	/* I've seen several comments that setting the base font size to 100.1%
	 * fixes some browser bugs. Which bugs? I don't know. I believe it's
	 * to fix some rounding-error bugs that some browsers (Mozilla) are
	 * prone to. It doesn't hurt anything, so I keep it here.
	 */
	 font-size:100.1%;
	 
}

/* Main Style */  

.clear-columns
{
	clear: both;
}

#flashHeader
{
	background-image: url(../images/aarepHeader.jpg);
	background-repeat:no-repeat;
	height:192px;
}
#logo 
{
	float:left; 
	width:400px; 
}
#topControls
{
	float:right; 
	padding-top:65px;
	width:335px;
	font-size:0.75em;
	color:#666666;
}
#topControls a
{
	color:#666666;
	text-decoration:none;
}
#topControls a:hover
{
	text-decoration:underline;
}
#topControls span
{
	color:#CCCCCC;
}
#topControls div
{	display:block;
	position:absolute;
	width:auto;
}
/* -------------- Main Nav ------------------*/

div#mNav 
{
	text-align:center;
	border-top:1px solid #005E8A;
	background-image:url(../images/navbg.jpg);
	background-repeat:repeat-x;
	padding:8px 0 10px 0;
	font-size:11px;
	font-weight:bold;
	background-color:#006699;
	width:100%;
	color:#FFF;
	clear:both;
}

#mNav  ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	} 

#mNav  ul li {
	margin-left: 0;
	list-style: none;
	display: inline;
	}
#mNav  ul li span{
	padding-left:4px;
	padding-right:3px;
	font-weight:normal;
	color:#73ABC7;
	}
	
#mNav a 
	{
	color:#fff;
	text-decoration:none;	
	}
	
#mNav a:hover
	{
	color:#73ABC7;
	}
/* -------------- Main Nav ------------------*/

/* -------------- Footer Nav ------------------*/

#fNav  ul {
	margin-left: 0;
	padding-left: 0;
	display: inline;
	} 

#fNav  ul li {
	margin-left: 0;
	list-style: none;
	display: inline;
	}
#fNav  ul li span{
	padding-left:4px;
	padding-right:3px;
	font-weight:normal;
	color:#8FBCD2;
	}
	
#fNav a 
	{
	color:#8FBCD2;
	}
	
#mNav a:hover
	{
	color:#73ABC7;
	}

/* -------------- Footer Nav ------------------*/
		
#featuredEvent
{
	background-color:#CC9900;
	background-image:url(../images/bgEvent.gif);
	background-repeat:no-repeat;
	background-position:bottom;
	color:#fff;
	padding:3px;
}
#featuredEvent strong
{
	color:#fff;

}
#Events
{
	color:#006699;
}
#Events a
{
	color:#006699;
	font-weight:bold;
}



#outer-column-container
{
	border-left: solid 13em #fff;	/* left column's width and background
					   color */
	border-right: solid 13em #fff;	/* right column's width and background
					   color */
}
#inner-column-container
{
	width: 100%;		/* force this element to take the full width
				   between the left and right columns. this is
				   especially important as children of this
				   element will have width:100%; set, and how
				   that 100% value is interpreted depends on
				   the width of it's parent (this element). */
}
#source-order-container
{
	float: left;		/* float left so the right column, which is
				   outside this element, has a place to go. */
	width: 100%;		/* force this to go as wide as possible */
	margin-right: -1px;	/* make room for the right-column's overlap. */
}
#left-column
{
	float: left;		/* float left, where it'll live */
	margin-left: -13em;	/* move it further left. the value here should
				   be the same value as the left border width
				   on #outer-column-container, but negative */
	width: 13em;		/* need to set a definite width, should be the
				   same width as the left border width on
				   #outer-column-container */
	margin-right: 1px;	/* overlap the middle column to help with
				   clearing. see general notes above. */
}
#middle-column
{
	float: right;		/* middle column goes right of the left column
				   since the two share the same parent 
				   element */
	width: 100%;		/* make the middle column as wide as possible
				   for a fluid layout. this is not possible
				   if it's parent element, 
				   #source-order-container, wasn't also at
				   100% width */
	margin-left: -1px;	/* make room for the left-column's overflap */
}

ul li
{	
	list-style-image:url(../images/bullet.gif);
}
ul strong{
	color:#CC9900;
	font-weight:bold;
}
#pS ul, #gS ul, #sS ul, #bS ul 
{

	font-size:0.7em;
	line-height:1em;
}
#pS ul li{ list-style-image:url(../images/platinum.gif);}
#gS ul li{list-style-image:url(../images/gold.gif);}
#sS ul li{list-style-image:url(../images/silver.gif);}
#bS ul li{list-style-image:url(../images/bronze.gif);}


#right-column
{
	float: right;		/* float on the right side of the layout */
	margin-right: -13em;	/* move it further right. the value here should
				   be the same value as the right border width
				   on #outer-column-container, but negative */
	width: 13em;		/* need to set a definite width, should be the
				   same width as the right border width on
				   #outer-column-container */
	margin-left: 1px;	/* overlap the middle column */
}

/*******************************************************************************
 * BASE THEME
 *
 * Setup basic styling for the layout. This will set gutterspace and generate a
 * basic border structure for the layout. Real layout styling belongs in a 
 * separate "theme" stylesheet; leave this stylesheet untouched.
 */
body
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color: #004566;
	color: #000;
	padding: 0;			/* padding on the body element when
					   javascript min-width is in use will
					   create problems in IE/Win 6. */
	margin: 14px 0;			/* horizontal margins belong on
					   #page-container. vertical margins
					   are not there as well due to small
					   rendering issues in IE/Win 5 when
					   viewport is shorter than webpage */
}
span.HeyLook {
	
	background:#FFFF9F;
	padding:5px;
	border:1px solid #FFFF66;
	}

#page-container
{
	background-color: #fff;		/* background for the middle column */
	/*border: solid 1px #000;		/* border around the entire layout */
	min-width: 600px;		/* limit how narrow the layout will
					   shrink before it stops. */
	margin: 0 14px;			/* horizontal margins here instead of on 
					   the body because we're setting min-
					   width on this element. if margins set 
					   on body users will see an odd skip in 
					   the layout's rendering as it's 
					   resized below min-width. (JS-based 
					   min-width only.) */
}
#masthead
{
	padding-top: 1px;		/* hack to force teh entire masthead to
					   receive the background color */
	border-bottom: solid 3px #DADADA;	/* three of the four sides of this block
					   will already have borders courtesy of
					   the #page-container element so we 
					   only need to render the bottom. */
}
#inner-column-container
{
	border: solid 1px #E1E1E1;
	border-width: 0 1px;
	margin: 0 -1px;			/* compensate for the borders because of
					   100% width declaration */
}
#middle-column div.rMenu-center
{
	border-bottom: solid 1px #000;	/* border along the bottom of the 
					   horizontal menu at the top of
					   the middle column */
}
#footer
{
	text-align:center;
	font-size:80%;
	background-color:#006699;
	color:#CCCCCC;
	/* border-top: solid 1px #000;	/* same situation as the masthead but
					   this time we're rendering the top
					   border. */
	padding-bottom: 1px;		/* hack to force the entire footer to
					   receive the background color */
}
#footer span a, #footer a
{
 color:#CCCCCC;
 
}
.inside
{
	margin: 10px;			/* margin, instead of padding, used to 
					   induce margin collapse if needed by 
				 	   child elements */
}

.clear-columns
{
	/* hide from IE/Mac \*/
	padding-bottom: 1px;
	margin-bottom: -1px;		/* this padding/margin hack is here for
					   older Mozilla engines (Netscape 7, 6,
					   FireFox pre 2.0) which will not allow 
					   an element to clear unless it has some 
					   effect on how the rest of the layout 
					   renders (ie, it takes up space). 
					   Hidden from IE/Mac as it triggers a 
					   horizontal scrollbar. */
}
* html #page-container
{
	/* \*/ height: 0.1%;	/* IE/Win 5 needs this to prevent rendering
				   issues if a minimum width is applied to
				   this element and the viewport is sized
				   narrower than it's minimum width. however
				   this breaks IE/Mac so a comment hack is
				   used to hide it. */
	position: relative;	/* IE/Mac 5.0 seems to need this. without it
				   any child element with position: relative
				   isn't rendered. */
}
* html #middle-column, * html #left-column, * html #right-column,
* html #source-order-container
{
	/* hide from IE/Mac \*/
	overflow: visible;	/* a bug through IE/Win 6 causes the widths of
				   text boxes to be calculated narrower than
				   they render, causing overflow of their parent
				   elements. we need to explicitly handle this
				   overflow. IE/Win 5.0 does not handle visible
				   overflow correctly and so on some layouts,
				   at some viewport widths you'll get a 
				   horizontal scroll bar. */
	/* hide from IE/Mac \*/
	position: relative;	/* this resolves rendering bugs in IE/Win.
				   without this the columns don't render on
				   screen or text jog. */
}
* html #middle-column
{
	margin-right: -4px;	/* fix 3-pixel text jog in IE/Win 5.0.
				   -4px because we also have to
				   compensate for the overlaps from
				   the left and right columns */
	margin-right/* */: 0;	/* reset value on 5.5 and later using
				   comment hack to hide this rule from 5.0 */
}
* html #middle-column .inside
{
	margin-right: 14px;		/* compensate for negative margin in
					   previous rule */
	margin-right:/* */: 10px;	/* reset margins for 5.5 and later */
}
* html #masthead, * html #footer
{
	/* hide from IE/Mac \*/
	height: 0.1%;		/* this is to fix an IE 5.0 bug. setting this
				   value forces these elements to contain their
				   child elements, meaning margins will no
				   longer collapse. */
	height/**/: auto;	/* reset for IE/Win 5.5 and later by hiding
				   this rule from 5.0 with the empty comment
				   hack. also hidden from IE/Mac for the same
				   reason. */
}
* html #masthead .inside, * html #footer .inside
{
	margin-top: 0;
	margin-bottom: 0;	/* since margins no longer collapse due to 
				   previous rules we remove vertical margins
				   from the .inside class */
	margin/* */: 10px;	/* reset for IE 5.5 and later */
}
* html .inside
{
	margin: 10px 0.75em;	/* i don't yet understand this bug in IE 5.0
				   which forces the right column down if the
				   side margins are at a very specific value.
				   if your side column widths are set in EMs,
				   0.75em seems to work fine. */
	margin/* */: 10px;	/* reset for IE 5.5 and later */
}
* html #inner-column-container 
{
	display: block;
}
* html #source-order-container
{
	margin-right: -100%;	/* IE/Mac will force #source-order-container
				   to the width of #left-column, even though
				   that element is no longer inside it. this
				   negative margin will help IE/Mac keep the
				   three columns together under narrower 
				   viewports than normal.
	/* \*/ margin-right: -1px; /* reset the above hack for IE/Win */
}
#left-column, #right-column
{
	position: relative;	/* resolve issues with links in left and right
				   columns not being clickable in Safari */
}

/******************************************************************************/