body, td, th {
	font-size:    small;
		 line-height: 130%;
	}

	
body {
		margin:0;
		padding:0;
		background-color: white;
		color:#000;
		min-width:760px;
		
	}
	img {
	padding:10px;
	}

	
 #container
{
width: 960px;
   width: expression(
      (document.documentElement.clientWidth > 962)? "960px" :
         (document.documentElement.clientWidth < 762)? "760px" :
            "auto"
   );
   height: 1%;
margin: 10px auto;
background-color: #fff;
color: #333;

border-left: 1px solid gray;
line-height: 130%;
    padding: 0px;    
    background-image: url(/images/shadow-right.png);
    background-position: top right;
    background-repeat: repeat-y;
    padding-right: 14px;
}

#top
{
position:relative;
padding: .5em;
background-color: #F6F6FC;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
}

#top h1
{
color: navy;
padding: 0px;
margin: 0px;
}

#leftnav
{
float: left;
width: 148px;
margin: 0;
padding: 1em;
background-color: #b0c4de;
}

#content
{
margin-left: 175px;
border-left: 2px dotted gray;
padding: 1em;
max-width: 56em;
background-color: white;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: white;
background-color: #777;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 0 0; }


.dropcap
{
float: left;
width: .7em;
font-size: 3em;
line-height: 83%;
padding-right: .1em;
padding-top: .05em;
}
		#content ul
 {
list-style-type: none;
padding: 0;
margin-left: 10px;
}


#content ul li
 {
background-image: url(/images/bulletnest.gif);
background-repeat: no-repeat;
background-position: 0 .2em;
padding-left: .6em;
}
#content ul ul li
 {
background-image: url(/images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 0.4em;
padding-left: .6em;
}
div.floatright
/* this one puts a border around the image  */
/* width must be set inline - do not use % as IE6 objects  */
{
float: right;
margin: 0 0 10px 10px;
background-color: #fff;
padding: 10px;
border-top: 1px solid #999;
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-left: 1px solid #999;
}

div.floatright img
{
border-top: 2px solid #555;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 2px solid #555;
}

.lhinsert {
	/* this one does not put border around the image  */
	/* width must be set inline - do not use % as IE6 objects  */
float: left;
background: #ffffff;
padding: 6px;
margin-right: 6px;
margin-bottom: 6px;
}

.lhinsert img{
}

.lhinsert p {
width: 100%;
font-style:italic;
text-align:center;
}

.searchbox {
float: right;
background:#F6F6FC;
padding: 2px;
margin-right: 10px;
margin-top: 10px;

}

.rhinsert {
float: right;
background: #ffffff;
padding: 6px;
margin-right: 6px;
margin-bottom: 6px;
}

.rhinsert img{
width:100%;
}

.rhinsert p {
width: 100%;
font-style: italic;
text-align:center;
}
.clearer {
  clear:both;
  height: 1px;
  overflow: hidden;
  line-height: 1px;
  margin-top:-1px;

} 
#copyright
{
color: black;
font-size: 80%;
text-align:center;
}
p { margin-top: 0; }


	 #nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#nav ul li { display: inline; }

#nav ul li a 
{
font-weight: bold;
font-family: arial, lucida-console, sans-serif;
padding: .2em 1em;
color: #fff;
background-color: #777;
}

#nav ul li a:hover
{
color: #fff;
background-color: #369;
}


#leftnav .eastchembutton a
{
background-image: url(http://chemistry.st-and.ac.uk/images/EaStCHEMtiny.gif); background-repeat: no-repeat; background-position: left; text-align:right;
color:black;
background-color:white;}

#leftnav .eastchembutton a:hover
{
background: #33a0c6;
color: #fff;

}



#leftnav .stabutton a
{
background-image: url(http://chemistry.st-and.ac.uk/images/statiny.gif); background-repeat: no-repeat; background-position: left; text-align:right; 
}	
#leftnav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#leftnav a
{
display: block;
color: #FFF;
background-color: #777;
width: 10em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #036;
border-bottom: 1px solid #036;
}

#leftnav a:hover
{
background-color: #369;
color: #FFF;
border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}

#leftnav li li a
{
display: block;
color: #FFF;
background-color: #69C;
width: 9em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}

	
#footer p{
		padding:5px;
		margin:0;
		color: white;
		text-align: center;
	}
#footer a {
		padding:5px;
		margin:0;
		color: white;
		text-align: center;
	}
#footer a:hover {
		background-color:#00529B;
		
	}	
	.profile {
border-top: 2px dotted;
width: 600px;
}
.profile img {
padding-bottom: 7em; /* or ems, whatever */
float: left;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix p {
width: 100%;
font-style:italic;
text-align:center;
}


.tipbox {
  margin-left: 2em;
  margin-right: 250px;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #FFB6C1;
}

.notebox {
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #C1FFB6;
}

.defbox {
  margin-left: 2em;
  margin-right: 2em;
  margin-top: 1em;
  margin-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #A6CAF0;
}
.caption {
margin: 5px;
padding: 5px;
/* width: 45px; */ /* width cannot go here unless all images are same size so put width inline instead */
border: 1px solid #777; /* I changed this to for demo */
background: #E5F2FF;
font-size:90%;
color: blue;
text-align: center;
}
.caption img {
	border: 1px solid #777;
	
} /* adjust to suit */


.textright {float: right;}

.textleft {
float: left;
}
.right {float: right;}

.left {
float: left;
}

/* note if border is used on the caption image the inline width of caption box should be width of image + left/right borders */ 
div#popup a:hover img {position: relative;
    left: -100px; height: 100px; width: 100px; border: none; color: #f00;
}
    div#popup a img {height: 0; width: 0; border-width: 0;}
    div#links a:hover {color: #411; background: #AAA;
   border-right: 5px double white;}
div#popup a:hover {font-weight: 400;}

div#references li {
 margin-top: 1em;
  margin-bottom: 1em;
}
 #flashcontent {
 height: 100%;
 }
 a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for <acronym title="Internet Explorer 6">IE6</acronym>*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
/* note 0 px top border necessary to avoid IE7 going to unhovered state on flyout menu */ 
#leftnav ul ul {display:none; position:relative; left:75px; top:0px; border:#fff solid; border-width:1px; background-color:#999; }
#leftnav ul li:hover ul {display:block;}