@charset "UTF-8";
/* CSS Document */

/* Caro note: Don't forget to edit the width in slider.js if you want to use a different size! */

#slideshow {
margin:0 auto;
width:950px;
height:350px;
background-color: #ffffff;
position:relative; }

#slideshow #slidesContainer {
margin:0 auto;
width:800px; /* Make this area roughly 100px more narrow than #slideshow's width */
height:350px;
overflow:auto; /* allow scrollbar */
position:relative; }

#slideshow #slidesContainer .slide {
margin:0 auto;
width:780px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:350px; }

.control {
display:block;
width:39px;
height:350px;
text-indent:-10000px;
position:absolute;
cursor: pointer; }

#leftControl {
top:0;
left:0;
background:transparent url(img/control_left.jpg) no-repeat 0 0; }

#rightControl {
top:0;
right:0;
background:transparent url(img/control_right.jpg) no-repeat 0 0; }

.slide p {
margin:0;
padding:0;
font-size: 1.1em;
color:#000000; }

.slide h2, .slide p { margin:15px; }

.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#72634d;
letter-spacing:-1px;
margin-left: 0px;}

/* Use this only if you want all your slides' images to float to the right
.slide img {
float:right;
margin:0 15px; }

Otherwise, just use the floatRight and floatLeft classes that already exist.  */