* #pagewrapper
 *   - wraps the entire page. use this to set min/max widths and set any margins
 *     or border that wraps the whole layout.
 *
 * #outer-column-container
 *   - reserves space for the left and right columns. using borders allows you
 *     to use the border color to act as the background color for the left and
 *     right columns. background color could then act as the background of the
 *     middle column.
 *
 * #inner-column-container
 *   - provides the single-pixel black border between the middle column and
 *     its outside brothers.
 *
 * #source-order-container
 *   - source ordered layouts place the main content at the top of the page. to
 *     do this with CSS in a three-column layout you need to wrap two of the
 *     three columns in an element (DIV) to float them together as if it was a
 *     a single column.
 *   - this element contains both the #middle-column and #left-column elements.
 *
 * #middle-column, #left-column, #right-column
 *   - containers for the each of the three columns in the layout
 *
 * #footer
 *   - bottom of your webpage. a place to put copyright and contact information
 *
 * .clear
 *   - this class is assigned to an empty div placed after the last (floating)
 *     column inside a block that contains two or more floating columns. it 
 *     clears the floats, forcing the element containing the columns to 
 *     visually contain all of its columns. there are alternative approaches
 *     to clearing which do not require this extra markup (see
 *     http://www.positioniseverything.net/easyclearing.html) however I find
 *     this method is much more effective and compatible for the task at hand.
 *     also, it should be evident by now that markup bloat is not a concern
 *     with this particular layout. 
 */


* {margin: 0; padding: 0; border: 0;}

body {
  font-family: Verdana, sans-serif;
  font-size: 13px;
  line-height: 21px;
  font-weight: normal;
  color: #494949;
  text-align: center;         /* for IE/Win not supporting margin: auto  */
  background:  #b4e3f5 url(images/bkgn.jpg) repeat;
  padding: 0;
  margin: 0;
}
table { 
  font-size: 100%; /* for IE/Win  */
  margin: 30px 0;
  border-top: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}
td {
  vertical-align: top;
  padding: 4px 8px;
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
}
h1, h2, h3, h4 {
  font-family:	Georgia, "Times New Roman", Times, Palatino, serif;
  font-weight: normal;
  letter-spacing: 1px;
}
#aya h1, #aya h2 {
  color:          #7D2F64;		/* purple   */
}
#ry h1, #ry h2 {
/*  color:    */      #004a99;      /* blue  */
/*  color:    */      #fdd402;      /* yellow-orange  */
  color:          #ca5b4e;      /* brick  */
}
a {
	background: url(./images/nav/dashes.gif) bottom left repeat-x;
	text-decoration: none;
}

a:link {
	color: #000066; 
}
a:visited {
	color: #330066; 
}
a:hover {
	color: #FFCC00; 
}
a:active {
	color: #red; 
}
a img {
	background: none;
}
a:link img {
	background: none;			/* This doesn't work ???? */
}

div.logolink a {
	background: 		none;			/* no dotted line on logo links */
}

.clear {
	clear: both;
}
#skipnav {
  display: none;
  height: 0;
}
.center {
	text-align:		center;
}
div.right {
	float: right;
	width: 40%;
	padding: 3px;
	margin: 6px;
}
div.left {
	float: left;
}

img {
  border:		0;
  margin:		8px 0;
}
img.right {
	margin-left: 	14px;
	float:			right;
}

img.left {
	margin-right: 	14px;
	float:			left;
}
.top { position: relative; top: 0; }

h1 {
	font-size: 28px;
	line-height: 36px;
	margin: 20px 0 0 0;
	text-align:		center;
}
h1.pagesubtitle  {
  font-size:		20px;
  line-height:		22px;
  font-style: 		italic;	
  margin: 			5px 0 25px 0;
}

h2 {
	font-size:		18px;
	line-height:	20px; 
	margin: 	    25px 0 0 0;
}
span.subhead  {
	font-size:		13px;
	line-height:	16px;
	font-style:		italic;
    color: #494949;
}



p.pagesubtitle {
  margin-top:	10px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size:	18px;
  line-height:	28px;
  font-style: italic;
}


span.aya-purple {
  color: #7D2F64;
}
span.rj-blue {
  color: #000066; 
}

.bigger {
  font-size: 120%;
}
.plain {
  font-style:  normal;
}

.noheading {
  margin-top:		20px;
}



p {		
  margin: 		10px 0px 10px 0px;
}
#left-column p {
  font-size: 12px;
  line-height: 16px;
}
#aya #middle-column ol, #aya #middle-column ul {
	margin: 10px 0px 10px 5px;
	list-style-type: none;
	list-style-image: url(images/bullet.gif);
}
#ry #middle-column ol, #ry #middle-column ul {
	margin: 10px 0px 10px 5px;
	list-style-type: default;
	list-style-image: none;
}

#middle-column li {		
 margin: 		5px 0px 5px 0px;
}



div.yellowbox {
	padding: 		15px 20px 15px 20px;
	background-color:	#ffffaa;
}

/*** Layout   */
#pagewrapper {
  margin: 0 auto;
  width:  990px;
  text-align: left;
  background:  url(images/shadow.png) repeat-y;  /* must not put #ffffff here or shadow transparency doesn't work */
/*  background-color: #ffffff;*/	/* background for the middle column #99ff99  */
/*  border: solid 1px #3a5e9a; */   /* border around the entire layout */
}

#header {
  height: 150px;
  margin: 0 5px;      /* 5px margin left and right for pagewrapper shadow  */
}
#aya #header {
  background:  url(images/banner-AYA.gif) no-repeat center bottom;
}
#ry #header {
  background:  url(images/banner-RY.jpg) no-repeat center bottom;
}

#header h1 {
 text-indent: -2234px;
 margin: 0;
 height: 0;
 overflow: hidden;
}

#top-menu {
  width: 770px;
  float: right;
  margin-top: 119px;
}
#top-menu ul {
  clear:  left;
  float:  left;
  margin:  0;
  padding:  0;
  list-style:  none;
}
#top-menu ul li {  /* styles here only work for non-links. links styles are overridden by a*/
  display:inline;
  margin:  0;
  padding:  0;
}
#top-menu ul li a {
  display:  block;
  float:  left;
  padding: 2px 10px 2px 20px;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: white;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: normal;
  border: none;
  background: none;
  text-decoration:  none;
}

#aya #top-menu ul li a {
  background: url(./images/nav/bullet-aya.gif) no-repeat left center;
}
#ry #top-menu ul li a {
  background: url(./images/nav/bullet-ry.gif) no-repeat left center;
}
#aya #top-menu ul li a.first, #ry #top-menu ul li a.first {
  background: none;
}
#top-menu ul li a:hover {
  color: #FFCC00; 
  text-decoration: underline; 
}


div.navlinklang {
	margin:					0px 8px 15px 0px;
	float:					left;
}
div.navlinklang a {
	background: 		none;			/* no dotted line on flag links */
}

#left-menu {
  clear:  both;
  margin: 0;
}

#left-menu ul {
  margin: 10px 0 10px 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}
#left-menu li {		
 margin: 		5px 0 5px 0;
}
#left-menu ul li ul {
  margin: 5px 0 10px 15px;
}
#left-menu ul li a {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  line-height: 16px;
  font-weight: normal;
  border: none;
  background: none;
  text-decoration:  none;
}
#aya #left-menu ul li a {
  color:          #7D2F64;
}
#ry #left-menu ul li a {
  color:        #004a99;
  color:		#000066; 
}
#aya #left-menu ul li a:hover, #ry #left-menu ul li a:hover {
  color: #FFCC00; 
  text-decoration: underline; 
}


#middle-column #pageTOC {
  margin:     40px 0 40px 0;
}
#middle-column #pageTOC ul {
	font-family: Georgia, "Times New Roman", Times, Palatino, serif;
	font-size: 15px;
	line-height: 18px;
	list-style-type: none;
	list-style-image: none;
	margin: 0 0 0 20px;
	padding: 0;
}
#middle-column #pageTOC li	{
	margin-top:		6px;
}

#pageTOC a:link, #pageTOC a:visited {
	background: none;
	text-decoration: none;
}
#aya #pageTOC ul li a {
  color:          #7D2F64;
}
#ry #pageTOC ul li a {
  color:          #004a99;
	color: #000066; 
}

#aya #pageTOC  a:hover, #aya #pageTOC a:active, #ry #pageTOC  a:hover, #ry #pageTOC a:active {
	color: #FFCC00;
	text-decoration: none;
	background: url(./images/nav/dashes.gif) bottom left repeat-x;
}


#outer-column-container {
  margin: 0 5px;
  border-left:  solid 210px #ffffff;	/* left column's width and background color #8bcff2 */
  border-right: solid 210px #ffffff;	/* right column's width and background color #9799cc*/
  background: #ffffff;
}
#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 its 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;
  margin-left: -210px;	/* same value as the left border width
				   				on #outer-column-container, but negative */
  width: 210px;		   /* 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 */
}
#right-column {
  float: right;
  margin-right: -210px;	/* same value as the right border width
				   			on #outer-column-container, but negative */
	width: 210px;		/* 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 */
}
.inside {
  margin: 15px;			/* margin, instead of padding, used to 
					   induce margin collapse if needed by 
				 	   child elements */
}

/**** see other browser hacks / fixes in skidoo_redux.css   ******/

	
	/* Footer styles */
	#footer {
        clear:both;
        padding:1em 2%;
		border-top:1px solid #ccc;
    }


/*******************************************************************************
 * HACKS
 *
 * Not all browsers are created equal. Many CSS engines behave differently
 * and can create discrepencies in the rendering of your layout across different
 * browsing platforms. These hacks are aimed to resolve those discrepencies
 * and provide a more consistent look to the layout.
 *
 * CSS hacks work by playing to a bug in the CSS engine or parser for a given 
 * browser. This forces the browser to either apply or ignore a rule that other
 * browsers wouldn't. This lets you apply rules to work around bugs in a specific
 * browser that would otherwise break the layout. 
 *
 * It's important that when you use a CSS hack you do so in a way that is as
 * specific in targeting the problem browser as possible. Some hacks might
 * work for two or three different platforms, but you only need to apply it on
 * one platform. You might find that this hack has no adverse effects on those
 * other two platforms right now, but in a later version the hack might create
 * problems. Save yourself the headache and do as much as you can to narrow
 * the target of a CSS hack as much as possible.
 *
 * COMMON HACKS USED HERE
 *
 * The star-html hack (* html) targets Internet Explorer, both Windows and Mac,
 * for versions 6 and earlier. There is no element higher up in the page
 * than the HTML element. IE seems to think otherwise. Rules applied to any
 * selector that begins with "* html" will be ignored by just about every
 * browser except Internet Explorer. So any selector given below that begins
 * with "* html" is targetted at Internet Explorer.
 *
 * The backslash-star comment hack targets IE/Mac. CSS comments end with an 
 * asterisk and forward slash. Anything after that closing comment mark will
 * be interpreted as as CSS rule. However if you prefix that closing comment
 * mark with a backslash, IE/Mac won't recognize that the comment has been
 * closed, but other browsers will. So any rules that come after the hacked
 * closing comment will be applied by any browser except IE/Mac until a 
 * non-hacked closing comment is found. 
 *
 * With the above two hacks outlined, it's possible to target IE on a specific
 * OS platform. This is important as the CSS and rendering engines for Mac and
 * Windows are completely different and have very different requirements in
 * terms of hacks.
 *
 * You may see other empty comments in wierd places, those are variations on
 * another comment hack to help target specific version of IE/Win (separating
 * IE 5 from IE6 typically). 
 *
 * One other you'll see is a height setting of 0.1%. This is to trigger
 * hasLayout (see reference section below). IE (at least pre-version 7) 
 * will automatically expand a box beyond it's set height if its content
 * is too tall. Setting height to 100% also works, but this can lead to
 * problems where an element that should only be a few pixels tall turns
 * out to be as tall as the rest of the page. By setting it to 0.1% you
 * minimize the chance of elements being set taller than they need to be.
 *
 * WHY USE HACKS?
 *
 * For compatibility sake. Specifics on what each hack does, and why its
 * used, is provided with the rule or ruleset in question. However, the 
 * majority of hacks used have to do with an internal property in IE
 * called hasLayout. The first item in the reference section below has
 * all you could ever want to know, and more, about hasLayout.
 *
 * REFERENCE
 *	http://www.satzansatz.de/cssd/onhavinglayout.html
 *	http://www.communis.co.uk/dithered/css_filters/css_only/index.html
 */