/*-------- Slider Stuff --------*/
.Blab {
width: 777px;
}

.PgMid, .PgMid-TOC {
padding: 20px 40px;
min-height: 506px;
/*overflow: scroll;
overflow-x: hidden; */
width: 764px;
}

#slider {
height: 638px;
margin-left: auto;
margin-right: auto;
width: 844px;
}

#buttonPrev {
/*background: url(images/buttonPrev.png) no-repeat top right;
background-color: blue;
float: left;
height: 150px;
margin-top: 125px;
width: 50px;*/
}

#buttonPrev: hover {
/*background: url(images/buttonPrevHover.png) no-repeat top right;*/
}


#slideShow {
padding-bottom: 20px;
float: left; 
/*height: 720px;*/
overflow: hidden; /*hides every child object that will overlap it's parent*/
position: relative; /*IE fix*/
width: 844px;
}

#slides {
/*height: 638px;*/
width: 844px;
position: relative; /*position the div (slides) relative to its parent (slideShow), by having it positioned to relative we're able to animate the left properly*/
}

.slide {
display: inline;
/*height: 638px;*/
width: 844px;
float: left;
border: 0px solid green;
/*you can change the width of the a slide without changing the javascript because we've only used variables.*/
}

#buttonNext {
/*background: url(images/buttonNext.png) no-repeat top right;
background-color: blue;
float: left;
height: 150px;
margin-top: 125px;
width: 50px;*/
}

#buttonNext: hover {
/*background: url(images/buttonNextHover.png) no-repeat top right;*/
}