* {
	margin:0; padding:0;}
body {background: #FFFFFF url(bg.jpg) fixed repeat-x;
		font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#666666;}
#wrap { background-color:#FFFFFF; width:880px; margin:auto; padding-top:25px;}

#container {min-height:400px;}
#container p {padding: 0 5px 5px 5px;}

.clear {clear:both;}
#footer {background: url(footer.jpg) no-repeat; height:35px; padding-top:25px; text-align:center;}
#footer p {display:block; margin-top:3px;}
#footer #credit { font-size:10px;}

#sitename {display:block; padding-top:20px; padding-left:20px; font-variant:normal; text-transform:uppercase;}
#sitename .description {display:block; font-size:12px; font-family:Arial, Helvetica, sans-serif; color: #BB9F6C; font-variant:normal;}
#sitename a{text-decoration:none;}
#sitename a:visited,active{text-decoration:none;}
h1, h2, h3, h4, h5, h6 {color:#000000; font-family:"Trebuchet MS", Verdana, sans-serif; font-variant:small-caps;}

h1 {font-size:36px;}
h2 {font-size:24px; padding:5px;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
h6 {font-size:12px;}

a {color:#000000;}
a:visited {color:#000000;}
a:active {color:#584A30;}
a:hover {color:#7C5B43; text-decoration:none;}

h2 a {text-decoration:none;}
h2 a:visited {text-decoration:none;}
h2 a:active {text-decoration:none;}
h2 a:hover {text-decoration:none;}


blockquote {display:block; padding:15px 15px 15px 35px; margin:10px; border-bottom: dashed 1px #D0BE9B; border-top: dashed 1px #D0BE9B;font-size:16px; font-family:Georgia, "Times New Roman", Times, serif; color: #000000; background:url(images/quote.png) no-repeat 5px 10px;}
blockquote p { line-height:25px; margin:0px;}
.rightquote { float:right; width:250px; text-align:left;}
blockquote cite {display:block; color:#000000; font-weight:bold; padding:3px; margin-top:10px;}

.leftquote  { float:left; width:250px; text-align:right;}

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}