/* Lothian Health Services Archive

Author: Jacqueline Aim
Date: 2009

/*BODY*/
body {background-color: white; font-size:85%; font-family: Verdana, Arial, Helvetica, sans-serif; padding:0; margin:0;}
	
p {color:#333333; line-height:1.4em; text-align:left;}

hr {background-color:#6699FF; height:1px; border:none;}
	
h1 {color:#333333; font-size:22px;}
h2 {color:#333333; font-size:18px;}
h4, h3 {color:#333333;}
 
a {color: #000000; text-decoration: underline;}
a:link {
	color: #6699FF;
	text-decoration: underline;
}
a:visited{color: #6699FF; text-decoration: underline;}
a:hover {
	color: #0033CC;
	text-decoration:underline;
}

a.img {border:0px;}	
img {border:0px;}

table.display{width: 100%;}
/*nth-child(odd) does not work in IE8 or Firefox 3 on PC*/
/*table.display tr:nth-child(odd) {color: #000; background: #FFF;}
table.display tr:nth-child(even) {color: #000; background:#ebebeb}*/
table.display td{ border:#99CCFF solid 1px;}

table.staff{width: 100%;}
table.staff td{ border:#CCCCCC dotted 1px;}



/*2. LAYOUT TABLE*/
table.container{width: 100%; 
	height: 100%;
	border-collapse:collapse;
	/*border-width:0;*/}

table.container td {
	vertical-align: top;}

td.header {
	background-color: #000000;
	/*position:relative;*/
/*	margin:5px;
	padding:5px;*/
	height:55px;
	color: #fff;
}

/*HEADER*/
#title {
	background-color: #000000;
	background-image:url(../images/bloodlady_strip.jpg); 
	background-repeat: no-repeat;
	/*background-attachment:fixed;*/ /*-image disappears if I include this?*/
	background-position:right;
	font-size:24px;
	height:55px;
	color: #fff;
	}

/*the logo*/
.homeLink {
	float:left; 
	padding-left: 3px; 
	padding-top:4px; 
	padding-right:3px
	}
	
/*3. Search bar*/
.bar {
	background-color: #6699FF; 
	border-top: 2px solid #FFFFFF; 
	border-bottom: 2px solid #FFFFFF;
	/*has to be this min-height for Safari*/ 
	height:30px; 
	padding-top:3px; 
	padding-right:3px; 
	font-size:85%;
	}
			
.search {
	float:left;
	width: 100%; 
	height: 30px;
	padding-top:8px;
	padding-bottom:8px;
	text-align:left;
	}
	
input:focus {
/*	border-bottom:#000000; */
	background:#CCCCCC;
	}

/*contacts link*/
.contact{
	text-align:right; 
	padding-top: 5px; 
	margin-right:15px;
	}
	
.contact a{
	color:#FFFFFF; 
	font-weight: bold;
	}
	
.contact a:hover {
	color:#333333;
	}
	
/*3. SIDEBAR*/
td#leftLinks {
	width: 225px !important;
	background-color:#99CCFF;
	margin: 0;
	border: 0;
	/*border:2px solid #F00;*/  /*can see now this td is the whole width? but why*/
	/*display:block;*/
	/*overflow:hidden;*/  /* doesn't do anything obvious*/
	/*position:absolute;*/ /*fixes to top left of window but is the correct width!*/
	/*position:fixed;*/ /*makes text in td#content go to left in newer browsers*/
	/*position:relative;*/ /* doesn't do anything obvious*/
	/*position:inherit;*/ /* doesn't do anything obvious isn't supported in IE7*/
	/*z-index:-1;*/ /* doesn't do anything obvious*/
	}
	
#leftLinks ul {		      
        list-style-type:none;
     	padding: 0px;
		margin: 0px;
    	line-height:20px;
		width:225px;
		}

#leftLinks ul li {
 		width:225px;
		margin: 0;
		}

/*the links   */   
#leftLinks a {
	display:block;
	width:225px;
	background-color: #99CCFF;
	padding-top:2px;
	padding-left:5px;
	padding-bottom:2px;
	border-bottom:2px solid #FFFFFF;
	margin: 0;
	}

#leftLinks a:link {
	color:#000000;
	text-decoration: none;
	}

#leftLinks a:visited {
	color: #000000;
	text-decoration: none;
/*	font-weight: bold;*/
	}

#leftLinks a:hover {
	background-color:#C5E2F9;
	color:#000000;
	text-decoration: none;
	}
	
/*LOGOS*/	
#leftLogo {
	float:left;
	width:225px;
	padding-top:10px;
	padding-bottom:5px;
	padding-right:5px;
	padding-left:0;
	text-align:center;
	background-color: #99CCFF;
	margin: 0;
	}
	
#leftLogo a{
	border-bottom:0;
	display:inline;
	/*display:block;*/ /*makes image appear on top of each other*/
	}

#leftLogo a:link {
	color:#000000;
	text-decoration: none;
	}
	
#leftLogo a:hover {
	background-color:#99CCFF;
	color:#000000;
	text-decoration: none;
	}
	
td#content {
	background-color:#FFFFFF;
	left:232px;  /* doesn't do anything obvious*/
	min-width:700px;  /* doesn't do anything obvious*/
	padding:10px;
	margin: 0px;
	/*margin-right: -200px;*/ /* doesn't do anything obvious*/
	}
	
/*tr#main{
	width:100%;
}*/  /* doesn't do anything obvious*/


/*ALPHABET BUTTONS*//*issue with IE7*/
.clear {
overflow: hidden;
width:100%;
} 

#azbutton a{
text-decoration:none;
float:left;
height:30px;
width:30px;
color:#333333;
margin-right: 8px;
padding-top:4px;
background: url(../images/a-z_btn.gif);
background-repeat:no-repeat;
text-align:center;
} 

#azbutton a:hover {
text-decoration:none;
float:left;
background: url(../images/a-z_over_btn.gif);
background-repeat:no-repeat;
height:30px;
width:30px;
color:#000000;
margin-right: 8px;
text-align:center;
}

#azbutton ul {	
		      
        list-style-type:none;
     	padding: 0px;
		margin-right: 8px;
    	line-height:20px;
		} 
		
#azbutton ul li{	
		display:inline;		      
        list-style-type:none;
     	padding: 0px;
		margin-right: 8px;
    	line-height:20px;
		font-size:18px;	
		} 

/*4. RIGHT MENU*/
DIV.rightImg {
	float: right; 
	width: 250px; 
	background-color: #FFFFFF;
/*    border: 1px dotted #333333;  */
    padding: 5px;
	margin-left: 5px;
	/*font-size:85%;*/}
	
DIV.homeImg {
	float: right;
	margin-left:5px;
	}

/*5. LINK LIST */ 
DIV.rightLink  {
	float: right;
	width: 220px;
	background-color: #C5E2F9;
	border: 1px dotted #333333;
	padding: 5px;
	margin-left: 5px;
	/*font-size:85%;*/}
	
DIV.rightLink ul {		      
        list-style-type:none;
        padding: 0px;
		padding-top:10px;
    	margin: 3px;
    	line-height:20px;}
	
DIV.rightLink a:link {
	display:block;
	color:#6699FF;
	padding:3px;
	text-decoration:underline;
}
	
DIV.rightLink a:visited{
	display:block;
	color:#333333;
	padding:3px;
	text-decoration:underline;}
		
DIV.rightLink a:hover {
	display:block;
	color:#0033CC;
	padding:3px;
	text-decoration:underline;
}

/*6. SLIDESHOW*/

.icons{ /*	slideshow icons */
	padding-bottom:10px;
}

.slideshow { /*	slideshow box */
	/*position:relative;*/
	height: 406px;
	overflow:hidden;
	/*border: 1px solid #000000;*/
}

.slideshow div {
	/*position:absolute;*/
	/*min-width: 755px; required to float the image right*/
	/*display:none;*/
	width: 100%;
	text-align:left;
	font-size:15px;
	/*vertical-align:text-middle;*/
	/*margin-top: 0px;*/
	/*vertical-align:middle;*/ /*doesnt work with float right apparently*/
}

.slideshow p{
/*	padding-right: 5px;*/
	/*margin-top: 0px;*/
	text-align:left;
}

.slideshow img{
	/*margin-top:0;*/
	float: right;
	padding:3px;
/*	border: 1px solid #FF0000;*/
	}


/*7. FOOTER*/
td#footer {
	vertical-align: middle;
	padding-left:10px;
	font-size: 70%;
	line-height:1.4em;
	background:#000000 none repeat scroll 0 0;
	border-top: 2px solid #FFFFFF;
	text-align:center;
	color: #99CCFF;
	height:35px;
}
#footer a{color:#FFFFFF;}
#footer a:hover {color:#6699FF;}


