@charset "utf-8";   

/*
    *File Name: 
	*Author: Thylacoleo 
	*Date Written: September 7, 2008
	*Version: 1.5
	*Last Modified: 25 May,  2008
	*Description: Style sheet for thylacoleo.com's subsidiary SCREEN pages. 
	*             Based on DW's template code.
	*Email: cyberia429-012 AT yahoo DOT com DOT au 
*/

body  {
	background: #FFCC99;
	/* background-image:url(../banners/background_black.gif);
	background-position:left;
	background-repeat:repeat;
	/* background-color:#FFCC99; */

	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}

.twoCol_Patch #container { 
	width: 750px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #990000;
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

.twoCol_Patch #header { 
	padding: 0 0 0 0;
	 /* padding: 0 10px 0 20px;  this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    background: #000000; 
} 

.twoCol_Patch #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

.twoCol_Patch #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 175px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 5px 10px 15px 20px;
	min-height:500px; 	
}

.twoCol_Patch #mainContent { 
	margin: 0.5em 0.5em 0 180px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 0 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 

.twoCol_Patch #footer { 
    padding: 0 0 0 0;
	/* padding: 0 10px 0 20px; this padding matches the left alignment of the elements in the divs that appear above it. */
	background: #000000; 
} 

.twoCol_Patch #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}

.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* .............................................................. */

#left, #right {
position: absolute;
top: 0;
bottom: 0; /* Opera needs this! Moz would automatically assume this as default*/
border-width: 0px; /* widths below */
/* height: 100%; */ /* hacked in for IE below */
}

* html #left, * html #right 
{height: 100%; /* required by IE to inherit from wrapper (IE Hack) above*/}
 
#align_to_RHS {
   float:right;
      }	 	 
	 
/* *********************** GOOGLE AD CONTAINERS ***************************** */
/*  Google Ads sub-Page : LHS Column  120 x 600  */

#google_ads_01 {
         /* position:absolute;   */
	     width:120px;
	     height:600px;
         display: inline;    /* Fixes an IE 5.5 Double Margin Float Bug */
		 /*
         z-index:1;
		 left:50px;
		 top: 450px;
		 */
		 }	
/*  Google Ads sub-Page : LHS Column  120 x 600  */

#google_translator {
         /* position:absolute;   */
	     width:120px;
	     height:80px;
         display: inline;    /* Fixes an IE 5.5 Double Margin Float Bug */
		 /*
         z-index:1;
		 left:50px;
		 top: 450px;
		 */
		 }	
/* **************************************************************************** */

/* **************************************************************************** */
/* AWebHosting banner #1
/*  Google Ads sub-Page : LHS Column  120 x 600  */

#awebhosting_ad_01 {
       /* position:absolute;   */
	     width:120px;
	     /* height:600px; */
         display: inline;    /* Fixes an IE 5.5 Double Margin Float Bug */
		 /*
         z-index:1;
		 left:50px;
		 top: 450px;
		 */
		 }	
/*  Google Ads sub-Page : LHS Column  120 x 600  */
		 
/* *********************** RSS FEED LHS CONTAINER ***************************** */
/*  QSR Feed block : LHS Column  200 x 175  */

#rss_LHS_01 {
         /* position:absolute;   */
	     width:200px;
	     height:175px;
         display: inline;    /* Fixes an IE 5.5 Double Margin Float Bug */
		 /*
         z-index:1;
		 left:50px;
		 top: 450px;
		 */
		 }			 

/* ************************************************************************** */	 
div.page_block {
    	height:300px;
		} 
		
div.white {
        background-color:#FFFFFF;
		}		
		
/* ********************** VERTICAL CENTERING STYLES ************************** */
	  
/* Adapted most appreciatively from http://www.jakpsatweb.cz/css/css-vertical-center-solution.html 
    DATE: 07.07.2008
    PURPOSE: To overcome a bug involving vertical centering of text within a CSS container.
 */
  .middle { 
     #position: absolute; 
     #top: 50%;display: table-cell; 
     vertical-align: middle;
     }

  .inner {  
     #position: relative; 
     #top: -50%;
     }	
	 
/* ***************  HEADINGS AND LINES ******************* */

 h1 { 
       font-family: arial, helvetica, sans-serif;
   	   font-weight: bold;
	   font-size:22px;
	   line-height: 120%;
       color: #FFFFFF;  
	   text-align: center; 
	   background-color: #990000; 
	   margin-top: 4px;
	   margin-left: 0em;
	   margin-right: 0;
	   margin-bottom: 2px;
	   padding-top: 6px;
	   padding-right: 1em;
	   padding-bottom: 4px;
	   padding-left: 1em;
	   width: auto;
	 }
	 	 
  h2 { 
       font-family: arial, helvetica, sans-serif;

       font-style:normal; 
	   font-weight: bold;
	   font-size:18px;
	   line-height: 150%;
	   padding-left: 1em;
       color: #990000;
	   text-align: left; 
	   }
	   
   h3 { 
       font-family: arial, helvetica, sans-serif;
	   /* font-variant: small-caps;  */
	   font-weight: bold;
       font-size:16px; 
	   line-height: 100%;
       color: #770000;
	   text-align: left;
	   /* background: #CCFFCC; */
	   width: 75%;
	   }
	   
   h4 { 
       font-family: arial, helvetica, sans-serif;
       font-style: normal; 
	   font-weight: bold;
	   font-size:14px;
	   line-height: 100%;
       color: #770000;
	   text-align: left;
	   width: 75%;
	   }
	   
   h5 { 
       font-family: arial, helvetica, sans-serif;
       font-style:normal;
	   font-weight: bold;
	   font-size:12px;
	   line-height: 100%;
       color:#770000;
	   text-align: left;	   
	   }		 
	   	  
   h6 { 
       font-family: arial, helvetica, sans-serif;
       font-style:normal;
	   font-weight: bold;
	   font-size:10px;
	   line-height: 100%;
       color:#770000;
	   text-align: left;	   
	   }		  
		   	 
  hr { 
       width: 75%; 
       height: 5px;
       }	 
	 
/* ****************  PARAGRAPHS ******************** */	 
	 
p { 
      font-family: courier new, book antiqua, arial, sans-serif;
      color: #660000; 
	  width:inherit;
	  font-size: 12px;
      line-height: 120%;
	  text-align:left;
	  /* text-indent: 1em;  */
	  border:none;
	  margin-top: 0;
	  margin-left: 4;
	  margin-right: 1;
	  margin-bottom: 0;
	  
	  padding-top: 1em;
	  padding-right: 2em;
	  padding-bottom: 1em;
	  padding-left: 2em;
	  background-color: #FFFFFF;
	  width:auto;
	  }	
	  	    
/* *********** PREFORMATED STYLES ******** */
 
pre  {
      text-align:left;
      background-color:#FFFFCC;
	  font-family:"Courier New", Courier, monospace;
	  font-size:10px;
	  font-weight:bold;
	  font-stretch:extra-condensed;
	  color:#009900;
	  width:90%;
	  padding-left:2px;;
	  padding-top:1em;;
	  padding-bottom:0;
      }
	 
/* *********** LINK STYLES ******** */

a  {
	text-decoration:none;
    }

a:link {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#669900; 
	font-size:10px;
	font-weight:bold;
	font-stretch:semi-expanded;
	padding-bottom:1px;
    }

a:green_on_white {
    background-color:#FFFFFF; 
    font-family: courier new, book antiqua, arial, sans-serif;
    color: #990000;  /* #009900;  */
	font-size:10px;
	font-weight:bold;
	padding-left:1em;
	padding-right:1em;
    }	
	
a:big_link {
    font-size:16px;
    }

a:visited {
	color:#00CCFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bold;
    }

a:hover {
	color: red;
    background: yellow;
	font-size:10px;
	/* 
	11.03.08
	Remove font-family & font-size from Hover so as to solve the jitter problem? Per C.R.
	No .. the jitter is caused when the fonts in the link and in hover are diffrent sizes.
	*/
	/* font-family:Arial, Helvetica, sans-serif;
	
     font-size: 12px;   */
	font-weight: bold;
	/*
	padding-left:1em;
	padding-right:1em;
	*/
    }	 
	
.hover_pic {
	color:#FFCC99
    background:#FFCC99;
	/* 
	11.03.08
	Remove font-family & font-size from Hover so as to solve the jitter problem? Per Chris R.
	*/
	/* font-family:Arial, Helvetica, sans-serif;
	
     font-size: 12px;   */
	padding-left:0;
	padding-right:0;
    }	 	

/* ************ LIST STYLES ********* */

li { 
      background-color: #FFFFFF;   /* #CCFFCC; */
      font-family: Verdana, Arial, Helvetica, sans-serif;
      color: #990000;
	  font-size:11px;
	  font-style:normal;
      line-height: 100%;
	  padding-top: 0;
	  padding-bottom:0.25em;
	  width:auto;
    }
  
  ul#navigation {    
    margin-left: 0;
	padding-left: 0;
	font-weight:bold;
	list-style-type: none;
	}
	
  ul#navigation a {
    display: block;  
	text-decoration: none;
	background: #990000;
	color:#FFFFCC;
	padding-top:0.25em;
	padding-right:1em;
	padding-bottom:0.5em;
	padding-left:1em;
	margin-bottom:0;
	border: 1px solid #FFFFCC;
	width: 13em;
	}
	
  ul#navigation a:hover {   
    background: #FF99FF;
	color:#990000;
	}
	
  ul#navigation a:visited {   
    background: #FFCC99;
	color:#990000;
	}
	
  ul#navigation li {
   display: inline
   }

  ul#booklist {
      background-color:#FFFFFF; 
      border: 1px solid #990000;
	  text-align:left;
      margin-left: 4px;
	  padding-bottom: 2px;
	  padding-top: 2px;
	  padding-left: 1px;
	  padding-right: 2px;
	  }	   

/* *********** TABLE STYLES *************** */
  
  caption 
     { font-family: arial, helvetica, sans-serif;
       font-style:normal; 
	   font-weight: bold;
	   font-size:8px;
	   text-align: left;
	   color:#660000;
	   margin: 0 0 0.5em 0;
	  }
	  
  table {
       font-family: arial, sans-serif;
       color: #660000; 
       text-align:left;
	   font-size:11px;
	   background-color: #FFFFFF;
	   border-collapse: separate;
	   vertical-align:top;
	   width:auto;
	  }
	  
  th, td {
      /* border-right: 1px solid #990000;  */
	  /* border-bottom: 1px solid #990000; */
	  padding: 0.5em;
	  padding-right:2em;
	  }
	  
  tr {
      background: #FFFFFF;
	  }	  
	  
  thead th  {                  /* An instance of a descendant selector. */
      background: #003366;
	  color: #FFFF00;
	  }
	  
  tbody th {
     font-weight: normal;
	 background: #658CB1;
	 } 
	 
  tr.alternate {
    background: #D7E0EA;
	}
	
  tr.alternate th {
    background: #8AA9C7;
	}
	
  td.narrow_top {             /* Match this width with Google Ads container! */
    vertical-align:top;
    width:120px;                         
    }

td.two_col {                  /* Table cell spans two columns. */
   colspan="2";
   }   
   	 
/* *********** MISCELLANEOUS STYLES ********** */	 

.copyright {
     color:#330000; 
     font-family:"Courier New", Courier, monospace; 
	 font-size:8px;
	 font-weight:normal;
	 font-style:normal;
	 }		
	 
.blue {
     background-color:#33CCFF;
	 }
 
.pale_yellow {
     background-color:#FFFFCC;
	 font-family:Arial, Helvetica, sans-serif;
	 font-size:9px;
	 color:#009900;
	 font-weight:normal;
     }
	 
.backdrop001 { 
      background-image:url(../science/images/wandjina_021.jpg)
 	}
		 
.style1 {
	color: #660000;
	text-align: left;
	font-family:"Courier New", Courier, monospace;
	font-size:12px;
	font-weight: bold;
    }
	
.style2 {
	color: #660000;
	/* font-size: inherit;   */
	font-style: italic;
    }

.style3 {
    font-family: Arial, Helvetica, sans-serif;
	color: #FFFFCC;
	font-weight: bold;
	font-size: 12px;
    }

.style4 {
	color: #990000;
	text-align: left;
	font-size: 9px;
	font-weight:normal;
	font-style:normal;
    }

.style5 {color:#669900}
.style6 {color: #009966}
.red_text {color: #FF0000}
.italic {font-style: italic}
.cell_header {color:#990000; 
              font-family:"Courier New", Courier, monospace; 
			  font-size:12px;
			  font-weight:bold;
			  }
.table_text {color:#990000; font-family:"Courier New", Courier, monospace; font-size:12px;}
.large_txt {font-size: xx-large}
	
/* *********** ADVERTISEMENT STYLES ********* */

#google_ads { #google_ads {  /* Match this conatiner's size with td.narrow_top class */
   clear: both;
   background-color:none;
   float: left; 
   width: 75px;
   display: inline;  
   margin-left: 5px; 
   padding: 5px 0;
   }
	 
/* *********** IMAGE STYLES ***************** */

div.image {
    background-color:#CCCCCC; 
	}	 
	 
	 
/* *******************************   THE END!   *****************************  */