

body {background-color: black;
    overflow-y: scroll;
        font-family: Tahoma; color: black;
font-size: 14px;
}

#mast a {text-decoration: none; font-size: 16px; color: white;}
#mast a:hover {color : black; text-decoration: none; background-color: white;}

#wrap { 
        font-family: Tahoma; color: black;
font-size: 14px;
position: absolute; left: 0px; right: 0px; top: 0px;
width: 1045px;
margin: auto;
height: 100%;
background-color: black;	
z-index: 1;
}


#slides_show{position: absolute; top: 50px; left: 10px; z-index: 5; width: 1030px; height: 850px; background-color: #cccccc;}

#pdf_see{position: absolute; top: 50px; left: 10px; z-index: 5; width: 1030px; height: 850px; background-color: green;}

table {table-layout: fixed;}





/*
	AnythingSlider v1.8+ Default theme
	By Chris Coyier: http://css-tricks.com
	with major improvements by Doug Neiner: http://pixelgraphics.us/
	based on work by Remy Sharp: http://jqueryfordesigners.com/
	
	NOTE (Rolf's work): anythingslider.css for the top graphics defined on the start_page.php. anythingslider2.css is the css for the
	iframe page and is related to the botton graphics.
	The _narrow versions of anythingslider and anythingslider2 are set with a different overall
	available height as determined by the start_page javascript. The dimensions in the _narrow
	versions of the scripts are designed to fit into an overall smaller page such as a 13 in. screen.
	
	
*/



/*****************************
  SET DEFAULT DIMENSIONS HERE
 *****************************/
/* Use of the ul and li wrappers allows the images to be set to the same size so variations in the actual images do not 
affect slide show presentation. This fomat came from http://jsfiddle.net/Mottie/ycUB6/670/ as referenced by https://github.com/CSS-Tricks/AnythingSlider/wiki
in the section ' multiple slides based on browser width' 

I did not incorporate the sites javascript for different screen sizes:

https://github.com/CSS-Tricks/AnythingSlider/issues/414
IF browser width is more or equal to 320, I want my slider to showMultiple: 1 & changeBy: 1 
IF browser width is more or equal to 640, I want my slider to showMultiple: 2 & changeBy: 1 
IF browser width is more or equal to 960, I want my slider to showMultiple: 3 & changeBy: 1

var multi, w, timer, slider = $('#slider'),
    win = $(window),
    checkWidth = function() {
        multi = 3;
        w = win.width();
        if (w >= 640 && w < 960) {
            multi = 2;
        } else if (w < 640) {
            multi = 1;
        }
        // update AnythingSlider
        slider.data('AnythingSlider').options.showMultiple = multi;
        slider.anythingSlider();

        // show width for demo
        $('#size').text('width = ' + w + '; multi = ' + multi);
    };

win.resize(function() {
    clearTimeout(timer);
    // throttle the resize check
    timer = setTimeout(function() {
        checkWidth();
    }, 200);
});

slider.anythingSlider({
    // Set this value to a number and it will show that many slides at once
    showMultiple: multi,
    // Amount to go forward or back when changing panels.
    changeBy: 1
});
*/

#slider, ul#slider li {
    width: 800px;
    list-style: none;
    overflow:hidden;
}

/* The next couple of sections are from http://css-tricks.github.io/AnythingSlider/demos.html#&panel1-3&panel2-3&panel3-1
they set up the captions that come with the slides. The 80% height for the image and the 30px height for the caption were set up by trial and error to match the 
image dimensions (i.e. width 300px and height 240px set up above */
 #slider img {
  width: 80%;
height: 80%;
 }

 #slider .caption-bottom {
  background: transparent;
font-family: Verdana;
font-size: 12px;
  color: black;
  padding-top: 0px;
  margin: 0;
  position: relative;
  z-index: 1;
  opacity: 1;
  filter: alpha(opacity=60);
 }

#slider .caption-top {
  background: transparent;
  font-size: 20px;
  color: black;
  padding-left: 10px;
  margin: 0;
  position: relative;
  z-index: 1;
  opacity: 1;
  filter: alpha(opacity=100);
 }

 #slider .caption-top {
  left: 0;
  top: 0;
  width: 450px;
  height: 0px;
 }
 #slider .caption-bottom {
  left: 0;
  bottom: 0px;
  width: 400px;
  height: 50px;
 }


/******************
  SET STYLING HERE
 ******************
 =================================
 Default state (no keyboard focus)
 ==================================*/
/* Overall Wrapper */
.anythingSlider-default {
	margin: 0 auto;
	/* 45px right & left padding for the arrows, 28px @ bottom for navigation */
	padding: 0 45px 28px 45px;
}
/* slider window - top & bottom borders, default state */
.anythingSlider-default .anythingWindow {
	border-top: 0px;
	border-bottom: 3px; border-bottom: solid;
}
/* Navigation buttons + start/stop button, default state */
.anythingSlider-default .anythingControls a {
	/* top shadow */
	background: #777 url( .. images/default.png) center -288px repeat-x;
	color: #000;
	border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}
/* Make sure navigation text is visible */
.anythingSlider-default .anythingControls a span {
	visibility: visible;
}
/* Navigation current button, default state */
.anythingSlider-default .anythingControls a.cur {
	background: #888;
	color: yellow;
}

/* start-stop button, stopped, default state */
.anythingSlider-default .anythingControls a.start-stop {
	background-color: #040;
	color: #ddd;
}
/* start-stop button, playing, default state */
.anythingSlider-default .anythingControls a.start-stop.playing {
	background-color: #800;
}

/* start-stop button, default  ed text color (when visible) */
/* hide nav/start-stop background image shadow on   - makes the button appear to come forward rolf*/
.anythingSlider-default .anythingControls a.start-stop,
.anythingSlider-default .anythingControls a.start-stop,
.anythingSlider-default .anythingControls a.start-stop .anythingControls ul {
	background-image: none;
	color: #ddd;
}

/*
 =================================
 Active State (has keyboard focus)
 =================================
*/
/* slider window - top & bottom borders, active state
The dimensions of the window are adjusted to fit the slides 
to be displayed (i.e. width 1200 = 4 slides of 300 width) */

.anythingSlider-default.activeSlider .anythingWindow {

	border-color: black;

width: 700px;
height: 100%;



}
/* Navigation buttons, active state */
.anythingSlider-default.activeSlider .anythingControls a {
	/* background image = top shadow */
	background-color: #7C9127;
	
}
/* Navigation current &  ed button, active state */
.anythingSlider-default.activeSlider .anythingControls a.cur,
.anythingSlider-default.activeSlider .anythingControls a {
	/* background image removed */
	background: #7C9127;
	
}

/* start-stop button, stopped, active state */
.anythingSlider-default.activeSlider .anythingControls a.start-stop {
	background-color: #080;
	color: #fff;
}
/* start-stop button, playing, active state */
.anythingSlider-default.activeSlider .anythingControls a.start-stop.playing {
	background-color: #080;
	color: #fff;
}
/* start-stop button, active slider  ed text color (when visible) */
.anythingSlider-default.activeSlider .start-stop,
.anythingSlider-default.activeSlider .start-stop{
	color: #fff;
}

/************************
  NAVIGATION POSITIONING
 ************************/
/* Navigation Arrows */
.anythingSlider-default .arrow {
	top: 35%;
	position: absolute;
	display: block;
}

.anythingSlider-default .arrow a {
	display: block;
	width: 45px;
	height: 120px;
	margin: 0px 0 0 0; /* half height of image */
	text-align: center;
	outline: 0;
	background: url(default.png) no-repeat;
}

/* back arrow note: colors set to transparent so the little arrows did not show up*/
.anythingSlider-default .back { left: 0; }
.anythingSlider-default .back a { background-position: left top; color: transparent;}
.anythingSlider-default .back a,
.anythingSlider-default .back a { background-position: left -140px; }
/* forward arrow */
.anythingSlider-default .forward { right: 0; }
.anythingSlider-default .forward a { background-position: right top;  color: transparent;}
.anythingSlider-default .forward a,
.anythingSlider-default .forward a { background-position: right -140px; }

/* Navigation Links */
.anythingSlider-default .anythingControls { outline: 0; display: none; }
.anythingSlider-default .anythingControls ul { margin: 0; padding: 0; float: left; }
.anythingSlider-default .anythingControls ul li { display: inline; }
.anythingSlider-default .anythingControls ul a {
	font: 11px/18px Georgia, Serif;
	display: inline-block;
	text-decoration: none;
	padding: 2px 8px;
	height: 20px;
	margin: 0 5px 0 0;
	text-align: center;
	outline: 0;
}

/* navigationSize window */
.anythingSlider-default .anythingControls .anythingNavWindow {
	overflow: show;
	float: left;
}

/* Autoplay Start/Stop button */
.anythingSlider-default .anythingControls .start-stop {
	padding: 2px 5px;
	width: 40px;
	text-align: center;
	text-decoration: none;
	float: right;
	z-index: 100;
	outline: 0;
}


/***********************
  COMMON SLIDER STYLING
 ***********************/
/* Overall Wrapper */
.anythingSlider {
	display: block;
	overflow: hidden !important;
	position: relative;
}
/* anythingSlider viewport window */
.anythingSlider .anythingWindow {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
/* anythingSlider base (original element) */
.anythingSlider .anythingBase {
	background: transparent;
	list-style: none;
	position: absolute;
	overflow: hidden !important;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
}

/* Navigation arrow text; indent moved to span inside "a", for IE7;
  apparently, a negative text-indent on an "a" link moves the link as well as the text rolf*/
.anythingSlider .arrow span {
	display: block;
	visibility: visible;
}
/* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
.anythingSlider .arrow.disabled {
	display: none;
}
/* all panels inside the slider; horizontal mode */
.anythingSlider .panel {
	background: transparent;
	display: block;
	overflow: hidden;
	float: left;
	padding: 0;
	margin: 0;
}
/* vertical mode */
.anythingSlider .vertical .panel {
	float: none;
}
/* fade mode */
.anythingSlider .fade .panel {
	float: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
/* fade mode active page - visible & on top */
.anythingSlider .fade .activePage {
	z-index: 1;
}

/***********************
  RTL STYLING
 ***********************/
/* slider autoplay right-to-left, reverse order of nav links to look better */
.anythingSlider.rtl .anythingWindow {
	direction: ltr;
	unicode-bidi: bidi-override;
}
.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
.anythingSlider.rtl .start-stop { /* float: right; */ } /* move start/stop button - in case you want to switch sides */

/* probably not necessary, but added just in case */
.anythingSlider,
.anythingSlider .anythingWindow,
.anythingSlider .anythingControls ul a,
.anythingSlider .arrow a,
.anythingSlider .start-stop {
	transition-duration: 0s;
	-o-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-webkit-transition-duration: 0s;
}


