/* CSS Document */

body {margin: 0px; padding: 0px; font-family: verdana, arial, helvetica, sans-serif; font-size: 0.8em; color: #000; background-color: #FFFFFF;}

a:link {font-weight: bold; color: blue; text-decoration: none;}
a:visited {font-weight: bold; color: purple; text-decoration: none;}
a:hover {font-weight: bold; text-decoration: underline;}
a:active {font-weight: bold; color: red; text-decoration: underline;}
  
div#wrapper {position: relative; text-align: left; width:900px; margin-right: auto; margin-left: auto; background-image: url(http://www.scottishvets.com/images/shadow-bg.jpg); background-repeat: repeat-y;}

div#main {padding: 0 20px 20px 20px; background-image: url(http://www.scottishvets.com/images/shadow-bottom.jpg); background-repeat: no-repeat; background-position: bottom left;}
 
div#header {margin:0; padding: 0;}
div#header img {border: none; margin: 0; padding: 0;}
img.cat {position:absolute; top: 10px; left: 220px;}
img.vet {position:absolute; top: 10px; left: 445px;}
img.rabbit {position:absolute; top: 10px; left: 670px;}

div#content {float: right; width: 680px; padding:0; line-height: 1.5em;}

div#sidebar {float: left; width: 180px; background-color:#21bdbd;}

#navigation {width: 160px;}
#navigation ul {margin-left: 20px; margin-top: 10px; margin-bottom: 10px; padding: 0; list-style: none;}
#navigation li {margin-bottom: 0.5em; border: 1px solid #FFFFFF; font-weight: bold; width: 133px;}
#navigation li a:link, #navigation li a:visited {font-size: 90%; display: block; padding: 0.4em 0 0.4em 0.5em; background-color: #7c51a1; color: #FFFFFF; text-decoration: none;}
* html #navigation a {width: 100%;}
body#home #navigation li.home a,
body#find #navigation li.find a,
body#members #navigation li.members a,
body#news #navigation li.news a,
body#contact #navigation li.contact a {background-color: #870947; color: #FFFFFF;}
#navigation li a:hover {background-color: #870947; color: #FFFFFF;}

h1 {font-size: 1.8em; margin: 0; padding: 10px 20px 20px 20px; color: #4a1346; font-weight:bold;}
h2 {font-size: 1.4em; margin: 0; padding: 0 20px 10px 20px; color: #21bdbd;}
h3 {font-size: 1em; margin: 0; padding: 0 20px 5px 20px; color: #000; font-weight:bold;}

p {margin: 0; padding: 0 0 10px 20px;}
p.legal {margin: 0; padding: 0 0 10px 20px; font-size:85%; line-height: 1.3em;}

form {margin: 0; padding: 0 0 10px 20px; text-align:center}

table {margin-left: 20px; padding: 0px; font-family: verdana, arial, helvetica, sans-serif; font-size: 1em; color: #000; background-color: #FFFFFF;}
td {vertical-align:text-top; padding-bottom:10px;}

span.hilite {font-weight:bold; color:#7c51a1;} 
div.imgcaption {float: right; margin-right: 10px; margin-left: 10px; padding: 0; display: inline; text-align: center;}
div.imgcaption p {margin: 0; padding: 0;}
div.imgcaption img {margin: 0; padding: 10px; border: solid 1px #ccc;}
img.rightfloat {float:right; border: solid 1px #ccc; margin-right: 10px; margin-left: 10px; padding: 10px;}

div#footer {clear: both; margin: 0; padding: 0; font-size: 75%; text-align: center;}
* html #footer {height: 1%;}
/* End hide from IE5/Mac */
div#footer p {margin: 0; padding: 10px;}
div#footer img {float: left; margin: 10px 0 0 72px; padding-bottom: 10px; border: 0; display: inline;}
 
 /* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {

    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the Guillotine bug in IE6 */
* html .clearfix {height: 1%;}
.clearfix {display: block;}