﻿/* AnythingSlider Themese demo */
body               {background: #000000; color: #456c6c; font-family: Arial, Helvetica, sans-serif; font-size: 20px; text-align: center;}
a:link             { color: #042424; text-decoration: none; }
a:hover            { color: #456c6c; }

/* link colors */
.dark   { color: #ffffff;}
.dark a:link   { color: #15b3b3; }
.dark a:hover  { color: #456c6c; }

.dark2   { visibility: hidden;}

.dark3   { visibility: hidden;}

.dark4   { display: none;}

.dark5   { visibility: visible;}

.unhidden { visibility: visible; }

.dark6 {color: #042424; font-size: 16px;}

/* this is the nav circles */
#nav               { display: block; width: auto; margin: 10px auto; text-align: center; white-space: nowrap; line-height: 3em; }
#nav a             { text-align: center; background: black; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; }
#nav a.git         { background: #006; }
#nav a.issue       { background: #600; }
#nav a:hover,
#nav a.current     { background: #666; }


/* text colors */
h1                 { text-align: center; font-family: 'Bowlby One SC', sans-serif; font-size: 100%; }
h2{ font:18px "Times New Roman", Times, serif; color:#000000;}
h3{ font:28px "Times New Roman", Times, serif; color:#ffffff; text-align: center;}
h4{ font:18px "Times New Roman", Times, serif; color:#ffffff; text-align: center;}
h5{ color:#456c6c; text-align: center;}

.theme-list        { text-align: center; margin: 30px auto; }
.theme-list div    { height: 35px; vertical-align: middle; } /* this silly css definition is needed for IE7 */
.theme-list select { margin-bottom: 30px; }

#wrap { margin-bottom: 195px; }


/* Define slider dimensions here */

#slider {
	width: 700px;
	height: 350px;
	list-style: none;
	/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
	overflow-y: auto;
	overflow-x: hidden;
}
#slider li,
#slider img        {
	position: relative;
}

#slider2 {
	width: 700px;
	height: 350px;
	list-style: none;
	/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
	overflow-y: auto;
	overflow-x: hidden;
}
#slider2 li,
#slider2 img        { width: 700px; height: 350px; position: relative;}

#glass {
	width: 700px;
	height: 350px;
	list-style: none;
	/* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
	overflow-y: auto;
	overflow-x: hidden;
}
#glass li,
#glass img        { width: 700px; height: 350px; position: relative; }




/* Top caption - padding is included in the width (680px here, 700px total width), same for height */
.caption-top       {
	background: #000;
	color: #fff;
	padding: 10px;
	margin: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	position: relative;
	z-index: 10;
	left: 0;
	top: 0;
	width: 680px;
	height: 30px;
}


/* Caption close button */
.close             { font-size: 80%; cursor: pointer; float: right; display: inline-block; }

/* background color selector */
#bkgd              { margin: 20px auto; width: 320px; }
.block             { float: left; display: block; width: 20px; height: 20px; }


.box1{ background:url(../images/cemetary2.jpg) repeat; height: 520px;  position:relative; z-index: -3;}
.box2{ background:url(../images/black.jpg) repeat; height: 420px;  position:relative; overflow: hidden; z-index: -9;}
.box3{ background:url(../images/cemetary4.jpg) no-repeat; height: 420px;  position:relative; overflow: hidden; z-index: -3;}
.box4{ background:url(../images/cemetary4.jpg) no-repeat; height: 420px;  position:relative; overflow: hidden; z-index: -3;}
.box5{ background:url(../video/harbor.mp4) no-repeat; height: 420px;  position:relative; overflow: hidden; z-index: -3;}
.box6{ position:absolute; z-index: -8; top: 120px; left: 70%; margin-left: -960px; opacity:0.1;}
.box6b{ position:absolute; z-index: -8; top: 660px; left: 100%; margin-left: -960px; opacity:1.0;}
.box6c{ position:absolute;  z-index: 5; top: 580px; left: 110%; margin-left: -960px; opacity:0.3;}
.box7{ background:url(http://answergarden.ch/view/24010) repeat; height: 920px;  position:relative;}
.box9{ position:absolute; top: 660px; left: 100%; margin-left: -60px; opacity:0.3;}
.box10{ background:url(../images/cemetary2.jpg) repeat;  z-index: -3;}

/* text font and color for bottom captions. This first part about ".caption" seems necessary for the next #current-caption, which provides the proper css*/

/*this is for first caption*/
.caption { display: none;}

#current-caption {
	position: absolute;
	width: 685px;
	/* up and down*/
	margin: 10px auto;
	text-align: left;
	padding-left:60px;
	z-index: 1;
}

/*this is for second caption*/
.caption2 { display: none;}

#current-caption2 {
	position: absolute;
	width: 680px;
	margin: 10px auto;
	padding-left:70px;
	text-align: left;
	color:#456c6c;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	
	z-index: 0;
	
}

/*this is for image in third caption*/
.caption3 { display: none;}

#current-caption3 {
	position: absolute;
	width: 685px;
	/* up and down*/
	margin: 10px auto;
	text-align: left;
	padding-left:60px;
	
	z-index: 1;
}

.caption4 { display: none;}

#current-caption4 {
	position: absolute;
	width: 700px;
	margin: 10px auto;
	padding-left:50px;
	z-index: 2;
}

.caption5 { display: none;}

#current-caption5 {
	position: absolute;
	width: 700px;
	margin: 10px auto;
	padding-left:50px;
	z-index: 4;
}

.caption6 { display: none;}

#current-caption6 {
	position: absolute;
	width: 700px;
	margin: -350px auto;
	padding-left:50px;
	z-index: -1;
}

.caption7 { display: none;}

#current-caption7 {
	position: absolute;
	width: 700px;
	margin: -340px auto;
	padding-left:50px;
	z-index: -2;
}
 #text-wrapper {position: relative;}
 
 #slider, .inner {
    width: 700px; /* adjust width & height as desired */
    height: 350px;
    list-style: none;
}
