/* CSS Document */

html {font-size: 125%;}
body {margin: 0; padding: 0; background-color:#c2ddf9; font-family: 'trebuchet ms', verdana, arial, sans-serif; color: #000; font-size:50%;}
div#wrapper {position: relative; text-align: left; width:800px; margin: 0 auto 0 auto; padding: 0; background: #fff url(img/shadow-bg.jpg) repeat-y;}
div#main {margin: 0; padding: 0 20px 20px 20px; background-image: url(img/shadow-bottom.jpg); background-repeat: no-repeat; background-position: bottom left;}

div#header {margin: 0; padding-top: 10px;}
#header img {margin: 0; padding: 0; border:0;}

div#contact {margin: 0; padding: 10px; position: absolute; right: 30px; top:10px; width: 220px; background-color:#227bd2;}
#contact h1 {margin: 0; padding-bottom: 5px; font-size: 1.5em; line-height: 1.3em; color:#FFFFFF;}
#contact p {margin: 0; padding: 0; font-size: 1.4em; line-height: 1.3em; color:#FFFFFF;}

div#content {margin: 0; padding: 0;}
#content h1 {margin: 0; padding: 10px; font-size: 2em; color:#227bd2;}
#content p {margin: 0; padding: 0 10px 10px 10px; font-size: 1.4em; line-height: 1.3em; clear:left;}
#content ul {font-size: 1.4em; line-height: 1.3em; margin: 10px 0 20px 30px;}
blockquote {width: 250px; margin: 0 10px 10px 35px; padding: 5px; font-size: 1.4em; text-align:center; background:#cfe5fb url(img/quote.jpg) 0 top no-repeat;}

div#photo {margin: 0 10px 10px 10px; padding: 0; float:right; width: 400px;}
div#imageContainer {position:relative; margin:auto; width:400px; border:1px solid #ccc;}

a:link {color: blue; text-decoration: none;}
a:visited {color: purple; text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {color: red; text-decoration: underline;}

div#footer {margin: 0 10px 10px 10px; padding: 0; background-color:#227bd2; text-align:center; color: #fff;}
#footer p {margin: 0; padding: 5px; font-size: 1.4em;}

 /* 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;}