/*thanks going to Osgood from macromedia forum*/

body{
margin: 2px 0 0 0;
padding: 0;
text-align: center;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 100%;
}

h1{
font-family: Tahoma, Arial;
color:#666;
font-size: 90%;
padding: 5px 20px 5px 13px;
margin: 0;
}

h2{
font-family: Tahoma, Arial;
font-size: 85%;
padding: 8px 4px 8px 5px;
margin: 0;
color:#333333;
}

h3{
font-family: Tahoma, Arial;
font-size: 105%;
padding: 15px 20px 5px 13px;
margin: 0;
color:#666;
}

h4{
font-family: Tahoma, Arial;
font-size: 90%;
padding: 0 20px 5px 13px;
margin: 0;
color:#999;
}

p{
font-family: Tahoma, Arial;
/*font-size: 12px; - don't use as this fixes the size in IE*/ 
font-size: 80%;
margin: 0;
padding:0;
}

a {
color: #003366;
font-family: Tahoma, Arial;
font-size: 100%;/* of body? - shrinks when same size as p*/
}

a:hover {
/*color: #FF0066;*/
color: #D30C45;
/*
alternate rollover style:
background-color:#F13652;
color:#FFf;
*/
}

a:active {
color:#6699CC;
}

ul{
margin-top:10px;
font-family: Tahoma, Arial;
font-size: 80%;
}

li{
margin: 0 35px 8px 10px;
}

form{
margin:0px;
}

table{
font-size: 100%;
}

table td{
font-family: Tahoma, Arial;
font-size: 75%;
padding:5px;
margin: 0 0 0 9px;
}


#outerholder{
/*width: 612px; old value*/
width: 737px;
margin: 0 auto;/*makes page center (need to add another centering bit of code when using a second 'outerholder' - the outerholder contains the side-shading divs*/
}

#holder{
background-color:#FFFFFF;
top:24px;
width: 707px;/*alters the alignment of all content within the borders*/
/*width: 581px; old value*/
/*the following three declarations allow the site to horizontally fit to the browser*/
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left; /* this counter-balances the text-align on the body  (where it says 'center')*/
/*To get the holder to wrap around the content, use .clearer(see bottom of css file) or the <br style...> code (see html)*/
}

#header{
/*background-image:url(../images/TRIP_banner.jpg);
background-repeat: no-repeat;*/
height: 90px;
width: 702px;
background-position: center;
}


#leftshader{
background-image: url(../images/left-border.jpg);
background-position:left;
background-repeat: repeat-y;
/*extends both side shader heights in FF browser - height:500px; */
}

#rightshader{
background-image: url(../images/right-border.jpg);
background-position:right;
background-repeat: repeat-y;
}

#topshader{
background-image: url(../images/top-border.jpg);
background-repeat: repeat-x;
width:737px;
margin-top:0;
}

#bottomshader{
background-image: url(../images/bottom-border.jpg);
background-repeat: repeat-x;
bottom:0;
height:19px;
width:733px;
}


#menu{
}

#submenu{
margin: 5px 6px 5px 0;
padding: 0 0 0 15px;
}

#submenu p{
font-size: 75%;
}

#submenu a{
font-size: 75%;
}

#content{
margin-top:10px;/*margin after menu and before content*/
}


/*Comments on the following two containers:
These two rules contain either side of the two column layout.  They determine how it all lines up

Without float:left on leftcontainer, rightcontainer jumps below it. 
Without float:left on rightcontainer, the rightcontainer looks messed up on other browsers (not IE6)
*/

#leftContainer {
float: left;
width: 505px;
margin: 0 10px 0 0;
display:inline;
/*display: inline; on the 'leftContainer' and 
'rightContainer' - this is to squash a PCIE bug which doubles the left 
margin applied to the <divs> if you dont do this. Otherwise rightcontainer jumps below 
leftcontainer because it can't fit into the 700px predefined width (defined in holder div).
*/
}
#rightContainer {
float: left;
width: 187px;
margin: 0 0 0 0;
display:inline;
}

.leftContainerContent{
background-image:url(../images/content_box_main.jpg);
background-repeat:no-repeat;
margin-bottom:25px;
}

.leftContainerContent p{
padding: 5px 20px 5px 13px;
}


.leftContainerContentCustLink {
background-image:url(../images/content_box_main.jpg);
background-repeat:no-repeat;
margin-bottom:25px;
}

.leftContainerContentCustLink p{
padding: 5px 20px 5px 13px;
}

.leftContainerContentCustLink a:link{
color: #D30C45;
}

.leftContainerContentCustLink a:hover{
color: #003366;
}


.leftContainerContentTitle{
padding-top:15px;
height: 18px;
}

.leftContainerContentImg{
	float:right;
	margin: 5px 15px 10px 10px;
	/*this fixes alignment issues in firefox and IE: */
	display:inline;
	/*
	why?
	
	"Its a PCIE bug which allocates double the margin to a floated element. 

	It happens when the float and the margin are on the same site, e.g.,
	float:left; margin-left:100px;
	IE will give that 200px left margin.
	
	All you need to remember is when you see a senario like the one you had and are using floats its always worth trying display: inline;"
	*/
}

#rightContainer p{
padding: 5px 20px 5px 13px;
}

/*are the following two necessary anymore?*/
.rightContainerContent{
}

.rightContainerContent p{
padding: 0 20px 8px 12px;
}

#ourpartners{
}

#ourResearchPartners{
background-image:url(../images/ourResearchPartners.jpg);
background-repeat:no-repeat;
padding-top:35px;
margin: 0 0 15px 0;
}

#ourResearchPartners a{
font-size:85%;
}

#contact{
background-image:url(../images/contact_box.jpg);
background-repeat:no-repeat;
padding-top:35px;
margin: 15px 0 15px 0;
}

#search{
background-image:url(../images/search_box.jpg);
background-repeat:no-repeat;
padding-top:35px;
margin-bottom: 15px;
}

#register{
background-image:url(../images/register_box.jpg);
background-repeat:no-repeat;
padding-top:35px;
margin-bottom: 15px;
}


/*what does clearer do? Osgood > 
When you float an element it takes it out of the normal flow of html 
code therefore the following element after the float needs some help to 
understand this. You can use <br style="clear: both;"> after the last 
floated element to have the element after the float render in the 
correct position. Sometimes the <br> method does not work efficiently 
and you need to use a clearer <div>.
*/	
.clearer {
clear:both;
overflow: hidden;
line-height: 1px;
margin-top:-1px;
}

.bordertext{
padding: 4px;
margin: 0 300px 0 43px;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
width:auto;
}

#imagesHolder{
padding: 0 0 15px 110px;
}

/* can only use if I use the php version of the google search code*/
.btn{
height:22px;
   color:#333;
   font-family:tahoma,helvetica,sans-serif;
   font-size:80%;
   font-weight:bold;
   background-color:#cc3366;
   border:1px solid;
   border-top-color:#696;
   border-left-color:#696;
   border-right-color:#363;
   border-bottom-color:#363;
   filter:progid:DXImageTransform.Microsoft.Gradient
      (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#cc3366');
	  /*HOW DO I GET FIREFOX TO BYPASS THIS PROPERTY ALTOGETHER, SO THE SUBMIT BUTTON HAS DEFAULT VISUAL PROPERTIES?*/
/*How do I style the button differently should the user be browsing on firefox, netscape etc ?(not compatible with IE filters)*/

}




/*anylink javascript dropdown menu styling:*/
#dropmenudiv{
position:absolute;
border:none;
line-height:18px;
z-index:100;
margin-top:4px;
margin: 4px 4px 0 10px;
text-align:left;
}

#dropmenudiv a{
	text-align:left;
	width: 100%;
	display: block;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 70%;
	color: #000;
	text-decoration: none;
	background-position: left;
	background-color:#EFEFEF;
	border-bottom-color: #CCCCCC;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	padding-left:4px;
	border-left-style: solid;
	border-left-width: 3px;
	border-left-color:#FF0066;
}

#dropmenudiv a:hover{ /*hover background color of the menu that drops down*/
background-color:#CCCCCC;
color:#333333;
}

/*rule to fix IE bug so that all of li space is a link area, not just 
text p128, moreericmeyeroncss) - doesn't sem to work though*/
#menu>a{
width:auto;
}
#menu a:hover{
color: #CCCCCC; 
}
/*end of anylink dropdown menu styling*/