/* brwnsheet3.css */

/* Final Web Design Assignment 3'New Planetary Discoveries by Professor Michael E. Brown' by Kim Falconer # 13228015, Ned 12, SP2, 2006 */

/* css markup validated *** by WC3 http://jigsaw.w3.org/css-validator/ */

/* All graphics copyright 2006, Kim Falconer */

/* All Audio samples from Millennium Music (2001) http://www.melaman2.com/tvshows/index.html and 'All Free Sound Effects: http://www.a1freesoundeffects.com/ */

/* Supports: IE 5, 6 & 7 on Windows XP SP2, Firefox 5.0 (Windows and Mac), Netscape 7.2 (Windows and Mac), Opera 8 (Windows and Mac) at screen resolutions of 800 x 600 and up (no need to 'refresh'!*/ 

/* Support does NOT include IE 5 on Mac */

/* Functions for 98% of web users (from browser stats http://www.w3schools.com/browsers/browsers_stats.asp ) */


/***********************************************/
/* #Main Global Elements                       */
/***********************************************/

/* Gaps above images in IE6 were eliminated by setting global margins to '0', curtesy of BonRouge http://bonrouge.com/br.php?page=faq#form-gap */

* {
	margin: 0;
	padding: 0;
}

/* The use of !important; to emphasize WIDTH curtesy of Castro, E. (2003) HTML for the World Wide Web, Peachpit Press, Berkeley. p 181) */

/* Font size expressed in percentage value to accommodate for disparate screen resolutions,  curtesy of WC3 http://www.w3.org/TR/REC-CSS2/fonts.html */

body{
	font-family: Arial,sans-serif;
	line-height: 1.166;	
	margin: 0 auto 0 auto;
	padding: 0px;
	width: 700px;!important 
	position: relative;
	background: #E7E7E7;
}
/* Guides to links and link colors from: http://www.peachpit.com/articles/article.asp?p=483774&seqNum=4&rl=1) and Castro, E. (2003) HTML for the World Wide Web, Peachpit Press, Berkeley. Ch. 7 * and 'Web Building Tips' http://www.saila.com/usage/tips/defn.shtml?link_style */
a{
	color: #006699;
	text-decoration: none;
}

a:link{
	color: #006699;
	text-decoration: none;
}

a:visited{
	color: #826BA9;
	text-decoration: none;
}

a:hover{
	color:#0033CC;
	text-decoration: underline;
}

/* Inserting an image as background to replace text title: from http://www.stopdesign.com/articles/replace_text/ */

h1{
 font-family: Arial,sans-serif;
 font-size: 120%;
 color: #334d55;
 margin: 0px;
 padding:5px 5px 5px 5px;
 height: 120px;
 width:auto;
 background: url(titlebr2.jpg) no-repeat;
  
}

/* Considering hierarchy of design and readability from: http://www.grantasticdesigns.com/easytoread.html and 'A List Apart' http://www.alistapart.com/articles/practicalcss/ */

h2{
 font-family: Arial,sans-serif;
 font-size: 114%;
 color: #006699;
 margin: 0px;
 padding: 0px;

}

h3{
 font-family: Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;

}

h4{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: normal;
 color: #333333;
 margin: 0px;
 padding: 0px;
 background-color: #eeeeee;
}

h5{
 font-family: Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}


/***********************************************/
/* Layout Divs                                 */
/***********************************************/

/* Advice from Ned12 class-mate, Dean Clouiter, has corrected a 'overlap' problem with IE 6.0 (between #Mainhead and #pagetitle) by adding  'border-right: 1px solid #000000;' cloutier@tpg.com.au/ */

#mainhead{
	background:#E6E6E6;
	padding: 0px 0px 0px 0px;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #cccccc;
	width: 700px;!important 
	
}

/* Problems with inconsistency of boarder display in this Div between IE and FireFox solved by eliminating the bottom boarder altogether. Other work-arounds are possible, like sending different CSS rules to IE by using the ‘child selector command’, which IE can't understand, http://www.sitepoint.com/article/browser-specific-css-hacks, but removing the bottom boarder altogether gave the cleanest results.*/

#headlines{
    float:left;
	background:#E6E6E6;
	width: 20%;
	border-right: 1px solid #cccccc;
	border-bottom: 0px solid #cccccc;
	padding: 5px 5px 5px 5px;
	
}

#content{
  float: right;
  width: 75%;
  background:#E6E6E6;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
 
 
}


/***********************************************/
/* Components                                  */
/***********************************************/

#siteName{
	margin: 0;
	padding: 0 0 0 10px;
}


/***********************************************/
/* Global Navigation Styles                    */
/***********************************************/

#globalN{
	padding: 5px 0px 5px 10px;
	border-bottom: 1px solid #CCCCCC;
	color: #CCCCCC;

}


#globalN a {
	font-size: 90%;
	padding: 0 4px 0 0;
}

/***********************************************/
/* #page Title styles                          */
/***********************************************/

#pagetitle{
	margin: 0px;
	padding: 10px 5px 5px 10px;
}

/***********************************************/
/* #breadCrumb styles                          */
/***********************************************/

/*Creating and Using Breadcrumbs from: Washington University site: http://www.washington.edu/webguides/guidelines/breadcrumbs.html */

#breadCrumb{
	font-size: 80%;
	padding: 2px 0px 0 10px;

}


/************** .feature styles ***************/

.feature{
	padding: 15px 15px 5px 5px;
	font-size: 90%;
	
}

.feature h3{
	padding: 0px 0px 5px 0px;
	text-align: center;
}

/* Floating image 'left' so text will wrap around. From http://www.w3schools.com/css/css_classification.asp*/

.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
	margin: 0 5px 5px 0;
}


/***********************************************/
/* .story styles                               */
/***********************************************/

.story{
	clear: both;
	padding: 10px 0px 0px 0px;
	font-size: 90%;
}

.story p{
	padding: 0px 0px 0px 0px;
}

/***********************************************/
/* #footer styles                              */
/***********************************************/

/* Solved footer problems (sitting behind background in IE, appearing as different sized in Mozella, IE and Netscape and not appearing at the bottom of the page) from http://www.whatdoiknow.org/archives/000793.shtml*/

#footer{
	
	clear: both;
	border: 1px solid #CCCCCC;
	font-size: 75%;
	color: #CCCCCC;
	padding: 10px 5px 5px 5px;
	verticla-align:bottom;
	background: url(GAIAlogofooter.jpg) no-repeat;
	height: 50px !important;
	height /**/: 55px;
	width: 689px;
}


#footer a:link{
	color:#00AEED;
	text-decoration: underline;
}


#footer a:visited{
	color:#A5D8F6;
	text-decoration: underline;
}

#footer a:hover{
	color:#CC66CC;
	text-decoration: underline;
}

/***********************************************/
/* #search styles                              */
/***********************************************/
/*Solution to Seach right hand position was 'float right' from WC3, and CSS Postitioning from http://www.brainjar.com/css/positioning/*/

#search {
	float:right;
	font-style: inherit;
	font-weight:bold;
	padding-right: 5px;	
	
}

/***********************************************/
/* #ID Styles                                  */
/***********************************************/

#navigation td {
	border-bottom: 1px solid #000000;
	}
	
#navigation a {
	font: bold 11px Arial, Helvetica, sans-serif;
	color: #000000;
	line-height:16px;
	letter-spacing:.1em;
	text-decoration: none;
	display:block;
	padding:5px 5px 5px 5px;
	}
	
#navigation a:hover {
	background: #E6E6E6;
	color:#000000;
	}
	
	


/***********************************************/
/* #'Headlines' styles                         */
/***********************************************/

#headlines{
	margin: 0px;
	padding: 5px 2px 5px 5px;
	font-size: 80%;
}

#headlines p{
	padding: 5px 5px 5px 5px;
}