/* 
Style Sheet for www.mcri.edu.au
Created by: Jason Elliott
Date created: 22 Nov 2006

TABLE OF CONTENTS

	SITE-WIDE DEFAULTS
	FOOTER BACKGROUND IMAGE
	HEADER BACKGROUND IMAGE
	TABLE STYLES
	LINK STYLES
	FONT STYLES
	LIST STYLES
	IMAGE STYLES
	BROWSER HACKS

Notes:

See the external stylesheet called "common-structure.css" for structural elements including layout and top menu 

More specific styles for sub-sections of the website are defined in other *.CSS files. These are named after the top-menu 
tab section they apply to eg. "news-events.css" or the page itself (eg. "home.css")

*/


/* --------- SITE-WIDE DEFAULTS --------- */

* {
  margin:0;
  padding:0;
}	

BODY {
  background-color:#F1EBD3;
  text-align:center; /* to centre the page in IE */
}

/* --------- MAIN STRUCTURAL ELEMENTS --------- */


#main-container {
  margin:10px auto; /* left & right margin = auto centres the page (but not in IE) */
  text-align:left;  /* required to override the text-align:centre; in the BODY tag rule above (for IE to centre) */
  width:819px;
  min-width:819px;
  border:0px solid #FF0000;
/*  overflow:hidden;  - Removed because it stops selection of text in IE - JE  */
}

#body-white-bg {
  background-image:url('http://www.ironxs.com.au/media/footer-3.gif');
  background-position:bottom right;
  background-repeat:no-repeat;
  background-color:#FFFFFF;
  border:0px solid #00FF00;
  margin-bottom:0; 
/*  overflow:hidden;  - Removed because it stops selection of text in IE - JE */
}

#masthead {
  height:128px;
  background-image:url('http://www.ironxs.com.au/media/bg-header-banner.jpg');
  border:0px solid #FF0000;
}

#masthead-left2col {
  float:left;
  width:556px;
  height:128px;
}

#masthead-rightCol {
  float:right;
  width:240px;
  height:128px;  
  border:0px solid #FF0000;
}

#logo {
  float:left;
  width:230px;
  height:128px;
  cursor:hand;
  border:0px solid #000000;
}

#search-field {
  width:200px;
  text-align:right;
  margin-top:92px;
  border:0px solid #009900;  
}

#topNav {
  height:20px;
  background-image:url('http://www.ironxs.com.au/media/bg-top-menu-tabs.jpg');
}

#top-banner {
  background-image:url('http://www.ironxs.com.au/media/ironXS-logo-banner-top.gif');
  background-repeat:no-repeat;
  background-position:center center;  
  height:107px;
  width:555px;
}

#footer {
  clear:both;
  margin-top:10px;
}

#footerLeft {
  width:72%;
  float:left;
  color:#A8A59A;
  text-align:left;
  font-size:11px;
}

#footerRight {
  width:27%;
  float:right;
  color:#A8A59A;
  text-align:right;
  font-size:11px;
}


/* ---------- TOP MENU NAVIGATION TABS ---------- */

#topNav {
  padding-left:14px;
}

#tblTopNav {
  width:745px;
  border:0px solid #999999;
}

#tblTopNav TD {
  text-align:center;
  padding-top:2px;
  font-family:arial,helvetica,verdana;
  font-size:11px;
  font-weight:bold;
}

#tblTopNav TD A { 
  color:#002E67; 
  text-decoration:none; 
}

#tblTopNav TD A:hover { 
  color:#156DDB; 
  text-decoration:none; 
}

/*  To select a top-menu tab, change the page's BODY tag ID to match the relevant menu tab's class name */
#home #tblTopNav TD A.home, 
#our-people #tblTopNav TD A.our-people,
#our-research #tblTopNav TD A.our-research,
#get-involved #tblTopNav TD A.get-involved,
#news-events #tblTopNav TD A.news-events,
#corporate-support #tblTopNav TD A.corporate-support,
#careers #tblTopNav TD A.careers,
#contact-us #tblTopNav TD A.contact-us { 
  color:#FE5E23; 
  text-decoration:none; 
}

#home #tblTopNav TD A.home:hover, 
#our-people #tblTopNav TD A.our-people:hover,
#our-research #tblTopNav TD A.our-research:hover,
#get-involved #tblTopNav TD A.get-involved:hover,
#news-events #tblTopNav TD A.news-events:hover,
#corporate-support #tblTopNav TD A.corporate-support:hover,
#careers #tblTopNav TD A.careers:hover,
#contact-us #tblTopNav TD A.contact-us:hover { 
  color:#FAAD90; 
  text-decoration:none; 
}

#content-wrapper {
  margin-top:0;
  margin-bottom:0;
  padding-right:50px;
  padding-left:15px;
  border:0px solid blue;
  position:relative;
  background-color:#FFFFFF;
}


/* ---------- DIVISION OF PAGE INTO COLUMNS ---------- */


/*  4 equal size columns */ 

#four-cols-left-2 {
  float:left;
  width:49.7%;
  border:0px solid grey;
  padding-bottom:60px;
}

* html #four-cols-left-2 {
  width:48%;
}

#four-cols-right-2 {
  float:right;
  width:49.7%;
  border:0px solid yellow;
  padding-bottom:60px;
}

* html #four-cols-right-2 {
  width:48%;
}

#four-cols-1 {
  float:left;
  width:41.5%;
  border:0px solid blue;
  padding-right:15px;
}

* html #four-cols-1 {
  width:46.9%;
}

#four-cols-2 {
  float:right;
  width:45.5%;
  border:0px solid green;
  padding:0 15px;

}

* html #four-cols-2 {
  width:52.9%;
}

#four-cols-3 {
  float:left;
  width:42.9%;
  border:0px solid red;
  padding:0 15px;
}

* html #four-cols-3 {
  width:49.9%;
}

#four-cols-4 {
  float:right;
  width:42.8%;
  border:0px solid pink;
  padding-left:20px;
}

* html #four-cols-4 {
  width:49.9%;
}
   
/*  3 columns - two narrow side columns plus one large centre column */ 

#three-cols-left-2 {
  float:left;
  width:74%;
  border:0px solid yellow;
  padding-bottom:60px;
}

* html #three-cols-left-2 {
  width:74%;
}

#three-cols-1 {
  float:left;
  width:26%;
  border:0px solid blue;
  padding-right:15px;
}

* html #three-cols-1 {
  width:30%;
}

#three-cols-2 {
  float:right;
  width:65%;
  padding:0 15px;
  border:0px solid green;
}

* html #three-cols-2 {
  width:70%;
}

#three-cols-3 {
  border:0px solid pink;
  float:right;
  width:22.5%;
  padding-left:20px;
  padding-bottom:60px;
}

* html #three-cols-3 {
  width:23%;
}

/*  4 equal width columns - the left one top-aligned (for a menu) and right 3 dropped down allowing text to go above the 
	3 right columns. Used in the main research page */

#four-cols-left-1 {
  float:left;
  width:22.2%;
  padding-right:10px;
  border:0px solid pink;
}

* html #four-cols-left-1 {
  width:21%;
}

#four-cols-right-3 {
  float:right;
  width:75.8%;
  border:0px solid black;
  padding-bottom:60px;
}

* html #four-cols-right-3 {
  width:75%;
}

#three-cols-thirds-left-2 {
  float:left;
  width:66.2%;
  border:0px solid yellow;
}

* html #three-cols-thirds-left-2 {
  width:66.2%;
}
	
#three-cols-thirds-1 {
  float:left;
  width:44.1%;
  padding:0 10px;
  border:0px solid green;
}

* html #three-cols-thirds-1 {
  width:49.8%;
}

#three-cols-thirds-2 {
  float:right;
  width:44.1%;
  padding:0 10px;
  border:0px solid red;
}

* html #three-cols-thirds-2 {
  width:49.8%;
}

#three-cols-thirds-3 {
  float:right;
  width:31%;
  padding-left:10px;
  border:0px solid blue;
}

* html #three-cols-thirds-3 {
  width:33.1%;
}

/*  2 columns - left col 1/4 width, right col 3/4 width */ 

#two-cols-1 {
  float:left;
  width:21%;
  padding-right:10px;
  border:0px solid pink;
  padding-bottom:60px;
}

* html #two-cols-1 {
  width:21%;
}
  
#two-cols-2 {
  float:right;
  width:75%;
  padding-left:15px;
  border:0px solid green;
  padding-bottom:180px;
}

* html #two-cols-2 {
  width:74%;
}

