/*style for positioning */
*{
	padding: 0;
	margin:0 auto;
	background-color:grey;
}

		 
#wrapper {
		position:relative;
		border:0px solid;
		border-color:grey;
		width:950px;
		height:700px;
	    background-color: grey;
		border-radius:10px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
}

#logo{
		position:absolute;
		left:50px;
		top:30px;
		width:850px;
		border-width:5px;
		border-color:white;
		border-style:outset;
		background-color:;
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		padding-left:10px;
}

#navbox{
				 
				position:absolute;
				left:400px;
				top:55px;
				border: 0px solid black;
				height: 40px;
				width: 450px;
				padding: 15px;
}

ul.nav li{
    display:inline;
		font-family: verdana, arial, sans-serif;
		font-weight:bold;
		font-size:1.1em;
	 
		padding: 5px;
		
  }
	
	ul.nav a{
   color: #3D3C3C;
	 text-decoration:none;
	 }
			 		
ul.nav a:hover{
                color:white;
}

								
	#maintext{
      font-family: Helvetica, verdana, arial, sans-serif;
			color:black;
			text-shadow:2px 2px 2px #ffffc3;
			font-size:1em;
			width:400px;
			position:absolute;
			left:500px;
			top:200px;
	}
#ethos{
	position: absolute;
	top: 480px;
	left: 70px;
	font-family: comic sans ms, cursive; 
	font-size: 1.5em;
	font-weight: bold;
	color: #3d3c3C;
}
	
			
/*css for line beneath main text*/

#bottomline{
			font-family: Helvetica, verdana, arial, sans-serif;
			color:#ffffc3;
      position:absolute;
			left:50px;
			top:620px;
			background-color:#3D3C3C;
	    border-radius: 5px;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     padding:0px;
		 width:933px;
		 border-width:3px;
}

#bottomline a{
		position: absolute;
		left:800px;
		top:15px;

}

#gallery {
	position: absolute;
			left: 80px;
			top: 200px;
	      width:320px;
         height:240px;
       
         overflow:hidden; 
         border-style: double;
         
        border-radius:15px;
		-moz-border-radius:15px;
		-webkit-border-radius15px;
}

#gallery a img {border:0 ;}

#gallery img {position:absolute; left:-320px; top: 0; z-index:1; border:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:40s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:40s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
-o-animation-duration:40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration:40s;
}
#gallery img.p1 {left:0;}

/* for Firefox */
@-moz-keyframes show1 {
0% {left:0;}
10% {left:0;}
11% {left:320px;}
100% {left:320px;}
}
@-moz-keyframes show2 {
0% {left:-320px;}
10% {left:-320px;}
11% {left:0;}
20% {left:0;}
21% {left:-320px;}
100% {left:-320px;}
}
@-moz-keyframes show3 {
0% {left:320px;}
20% {left:320px;}
21% {left:0;}
30% {left:0;}
31% {left:320px;}
100% {left:320px;}
}
@-moz-keyframes show4 {
0% {left:-320px;}
30% {left:-320px;}
31% {left:0;}
40% {left:0;}
41% {left:-320px;}
100% {left:-320px;}
}
@-moz-keyframes show5 {
0% {left:320px;}
40% {left:320px;}
41% {left:0;}
50% {left:0;}
51% {left:320px;}
100% {left:320px;}
}
@-moz-keyframes show6 {
0% {left:-320px;}
50% {left:-320px;}
51% {left:0;}
60% {left:0;}
61% {left:-320px;}
100% {left:-320px;}
}
@-moz-keyframes show7 {
0% {left:320px;}
60% {left:320px;}
61% {left:0;}
70% {left:0;}
71% {left:320px;}
100% {left:320px;}
}
@-moz-keyframes show8 {
0% {left:-320px;}
70% {left:-320px;}
71% {left:0;}
80% {left:0;}
81% {left:-320px;}
100% {left:-320px;}
}
@-moz-keyframes show9 {
0% {left:320px;}
80% {left:320px;}
81% {left:0;}
90% {left:0;}
91% {left:320px;}
100% {left:320px;}
}

@-moz-keyframes show10 {
0% {left:-320px;}
90% {left:-320px;}
91% {left:0;}
99% {left:0;}
100% {left:-320px;}
}

@-moz-keyframes show11 {
0% {left:320px;}
99% {left:320px;}
100% {left:0;}
}


#gallery img.p1 {
-moz-animation-name: show1;
}
#gallery img.p2 {
-moz-animation-name: show2;
}
#gallery img.p3 {
-moz-animation-name: show3;
}
#gallery img.p4 {
-moz-animation-name: show4;
}
#gallery img.p5 {
-moz-animation-name: show5;
}
#gallery img.p6 {
-moz-animation-name: show6;
}
#gallery img.p7 {
-moz-animation-name: show7;
}
#gallery img.p8 {
-moz-animation-name: show8;
}
#gallery img.p9 {
-moz-animation-name: show9;
}
#gallery img.p10 {
-moz-animation-name: show10;
}
#gallery img.p11 {
-moz-animation-name: show11;
}

#gallery:hover img {
 -moz-animation-play-state: paused;
 }

/* for Safari and Chrome */
@-webkit-keyframes show1 {
0% {left:0;}
10% {left:0;}
11% {left:320px;}
100% {left:320px;}
}
@-webkit-keyframes show2 {
0% {left:-320px;}
10% {left:-320px;}
11% {left:0;}
20% {left:0;}
21% {left:-320px;}
100% {left:-320px;}
}
@-webkit-keyframes show3 {
0% {left:320px;}
20% {left:320px;}
21% {left:0;}
30% {left:0;}
31% {left:320px;}
100% {left:320px;}
}
@-webkit-keyframes show4 {
0% {left:-320px;}
30% {left:-320px;}
31% {left:0;}
40% {left:0;}
41% {left:-320px;}
100% {left:-320px;}
}
@-webkit-keyframes show5 {
0% {left:320px;}
40% {left:320px;}
41% {left:0;}
50% {left:0;}
51% {left:320px;}
100% {left:320px;}
}
@-webkit-keyframes show6 {
0% {left:-320px;}
50% {left:-320px;}
51% {left:0;}
60% {left:0;}
61% {left:-320px;}
100% {left:-320px;}
}
@-webkit-keyframes show7 {
0% {left:320px;}
60% {left:320px;}
61% {left:0;}
70% {left:0;}
71% {left:320px;}
100% {left:320px;}
}
@-webkit-keyframes show8 {
0% {left:-320px;}
70% {left:-320px;}
71% {left:0;}
80% {left:0;}
81% {left:-320px;}
100% {left:-320px;}
}
@-webkit-keyframes show9 {
0% {left:320px;}
80% {left:320px;}
81% {left:0;}
90% {left:0;}
91% {left:320px;}
100% {left:320px;}
}

@-webkit-keyframes show10 {
0% {left:-320px;}
90% {left:-320px;}
91% {left:0;}
99% {left:0;}
100% {left:-320px;}
}

@-webkit-keyframes show11 {
0% {left:320px;}
99% {left:320px;}
100% {left:0;}
}

#gallery img.p1 {
-webkit-animation-name: show1;
}
#gallery img.p2 {
-webkit-animation-name: show2;
}
#gallery img.p3 {
-webkit-animation-name: show3;
}
#gallery img.p4 {
-webkit-animation-name: show4;
}
#gallery img.p5 {
-webkit-animation-name: show5;
}
#gallery img.p6 {
-webkit-animation-name: show6;
}
#gallery img.p7 {
-webkit-animation-name: show7;
}
#gallery img.p8 {
-webkit-animation-name: show8;
}
#gallery img.p9 {
-webkit-animation-name: show9;
}
#gallery img.p10 {
-webkit-animation-name: show10;
}
#gallery img.p11 {
-webkit-animation-name: show11;
}

#gallery:hover img {
 -webkit-animation-play-state: paused;
 }

/* for Opera */
@-o-keyframes show1 {
0% {left:0;}
10% {left:0;}
11% {left:320px;}
100% {left:320px;}
}
@-o-keyframes show2 {
0% {left:-320px;}
10% {left:-320px;}
11% {left:0;}
20% {left:0;}
21% {left:-320px;}
100% {left:-320px;}
}
@-o-keyframes show3 {
0% {left:320px;}
20% {left:320px;}
21% {left:0;}
30% {left:0;}
31% {left:320px;}
100% {left:320px;}
}
@-o-keyframes show4 {
0% {left:-320px;}
30% {left:-320px;}
31% {left:0;}
40% {left:0;}
41% {left:-320px;}
100% {left:-320px;}
}
@-o-keyframes show5 {
0% {left:320px;}
40% {left:320px;}
41% {left:0;}
50% {left:0;}
51% {left:320px;}
100% {left:320px;}
}
@-o-keyframes show6 {
0% {left:-320px;}
50% {left:-320px;}
51% {left:0;}
60% {left:0;}
61% {left:-320px;}
100% {left:-320px;}
}
@-o-keyframes show7 {
0% {left:320px;}
60% {left:320px;}
61% {left:0;}
70% {left:0;}
71% {left:320px;}
100% {left:320px;}
}
@-o-keyframes show8 {
0% {left:-320px;}
70% {left:-320px;}
71% {left:0;}
80% {left:0;}
81% {left:-320px;}
100% {left:-320px;}
}
@-o-keyframes show9 {
0% {left:320px;}
80% {left:320px;}
81% {left:0;}
90% {left:0;}
91% {left:320px;}
100% {left:320px;}
}

@-o-keyframes show10 {
0% {left:-320px;}
90% {left:-320px;}
91% {left:0;}
99% {left:0;}
100% {left:-320px;}
}

@-o-keyframes show11 {
0% {left:320px;}
99% {left:320px;}
100% {left:0;}
}

#gallery img.p1 {
-o-animation-name: show1;
}
#gallery img.p2 {
-o-animation-name: show2;
}
#gallery img.p3 {
-o-animation-name: show3;
}
#gallery img.p4 {
-o-animation-name: show4;
}
#gallery img.p5 {
-o-animation-name: show5;
}
#gallery img.p6 {
-o-animation-name: show6;
}
#gallery img.p7 {
-o-animation-name: show7;
}
#gallery img.p8 {
-o-animation-name: show8;
}
#gallery img.p9 {
-o-animation-name: show9;
}
#gallery img.p10 {
-o-animation-name: show10;
}
#gallery img.p11 {
-o-animation-name: show11;
}

#gallery:hover img {
 -o-animation-play-state: paused;
 }

/* for IE10 */
@keyframes show1 {
0% {left:0;}
10% {left:0;}
11% {left:320px;}
100% {left:320px;}
}
@keyframes show2 {
0% {left:-320px;}
10% {left:-320px;}
11% {left:0;}
20% {left:0;}
21% {left:-320px;}
100% {left:-320px;}
}
@keyframes show3 {
0% {left:320px;}
20% {left:320px;}
21% {left:0;}
30% {left:0;}
31% {left:320px;}
100% {left:320px;}
}
@keyframes show4 {
0% {left:-320px;}
30% {left:-320px;}
31% {left:0;}
40% {left:0;}
41% {left:-320px;}
100% {left:-320px;}
}
@keyframes show5 {
0% {left:320px;}
40% {left:320px;}
41% {left:0;}
50% {left:0;}
51% {left:320px;}
100% {left:320px;}
}
@keyframes show6 {
0% {left:-320px;}
50% {left:-320px;}
51% {left:0;}
60% {left:0;}
61% {left:-320px;}
100% {left:-320px;}
}
@keyframes show7 {
0% {left:320px;}
60% {left:320px;}
61% {left:0;}
70% {left:0;}
71% {left:320px;}
100% {left:320px;}
}
@keyframes show8 {
0% {left:-320px;}
70% {left:-320px;}
71% {left:0;}
80% {left:0;}
81% {left:-320px;}
100% {left:-320px;}
}
@keyframes show9 {
0% {left:320px;}
80% {left:320px;}
81% {left:0;}
90% {left:0;}
91% {left:320px;}
100% {left:320px;}
}

@keyframes show10 {
0% {left:-320px;}
90% {left:-320px;}
91% {left:0;}
99% {left:0;}
100% {left:-320px;}
}

@keyframes show11 {
0% {left:320px;}
99% {left:320px;}
100% {left:0;}
}

#gallery img.p1 {
animation-name: show1;
}
#gallery img.p2 {
animation-name: show2;
}
#gallery img.p3 {
animation-name: show3;
}
#gallery img.p4 {
animation-name: show4;
}
#gallery img.p5 {
animation-name: show5;
}
#gallery img.p6 {
animation-name: show6;
}
#gallery img.p7 {
animation-name: show7;
}
#gallery img.p8 {
animation-name: show8;
}
#gallery img.p9 {
animation-name: show9;
}
#gallery img.p10 {
animation-name: show10;
}
#gallery img.p11 {
animation-name: show11;
}

#gallery:hover img {
 animation-play-state: paused;
 }