/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* STYLE */
body {
  background-image: url("/img/spacebg.gif");
  color: black;
  font-family: Verdana;
  font-size: 10px;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
    color: black;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

p {
  color: #404040;
  text-shadow: 1px 1px 2px #e9f5ff;
}



/* GALLERY ENTRANCE */

.stickyimg {
  width: 100%;
  left: 0px;
  top: 0px;
  /*background-image: url("/img/spacebg.gif");*/
  background-repeat: repeat-x;
  position: fixed;
  z-index: -1;
}

/*BODY (THIS DIV CONTAINS THE WHOLE THING)*/
.bodydiv {
  top: 1px;
  height: 700px;
  width: 900px;
  margin: 0 auto;
  position: relative;
}

/*HEADER LOGO*/
.header {
  top: 1px;
  width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

/*IMAGE MAP*/
.imgmap {
  top: 1px;
  width: 850px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/*NAVIGATION*/
.nav {
  top: -325px;
  left: -20px;
  width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.enter {
  top: -400px;
  left: 190px;
  width: 70px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.art_e {
  top: -575px;
  left: 175px;
  width: 300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/*STARS POSITION*/
.stars {
  top: -795px;
  left: -10px;
  width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  
}

.pstars {
  top: -600px;
  left: -450px;
  width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

/*SECOND PAGES*/

.leftright {
  top: -445px;
  left: -385px;
  width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.test_1 {
  top: -500px;
  width: 875px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.test_2 {
  top: -488px;
  left: 1px;
  width: 625px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.test_3 {
  top: -350px;
  left: 1px;
  width: 250px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}




/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;

/*background: #ffb5cd; /* Old browsers */
/*background: -moz-linear-gradient(top, #ffb5cd 2%, #ffcca8 17%, #fff6b7 35%, #daffb7 55%, #aadeff 76%, #cebafc 97%); /* FF3.6-15 */
/*background: -webkit-linear-gradient(top, #ffb5cd 2%,#ffcca8 17%,#fff6b7 35%,#daffb7 55%,#aadeff 76%,#cebafc 97%); /* Chrome10-25,Safari5.1-6 */
/*background: linear-gradient(to bottom, #ffb5cd 2%,#ffcca8 17%,#fff6b7 35%,#daffb7 55%,#aadeff 76%,#cebafc 97%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb5cd', endColorstr='#cebafc',GradientType=0 ); /* IE6-9 */

}

::-webkit-scrollbar-track {
   background: url("img/space_bg.gif");
border-radius: 0px;
width: 0px;
border: 1px dotted pink;
}

/*::-webkit-scrollbar-track-piece {
  background: -webkit-linear-gradient(top, #ffb5cd 2%,#ffcca8 17%,#fff6b7 35%,#daffb7 55%,#aadeff 76%,#cebafc 97%);
}*/

::-webkit-scrollbar-thumb {
background: -webkit-linear-gradient(top, #ffb5cd 2%,#ffcca8 17%,#fff6b7 35%,#daffb7 55%,#aadeff 76%,#cebafc 97%);
border: 1px dotted pink;
border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
background: pink;  
}








/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/*
@media screen and (max-aspect-ratio:16/9) and (orientation: portrait) {

.leftright {
  top: -445px;
  left: -385px;
  width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.test_1 {
  top: -500px;
  width: 875px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.test_2 {
  top: 175px;
  left: 183px;
  position: absolute;
  z-index: 3;
}

.test_3 {
  top: 300px;
  left: 400px;
  position: absolute;
  z-index: 3;
}


/* GALLERY ENTRANCE */

/*BODY (THIS DIV CONTAINS THE WHOLE THING)*/ /*
.bodydiv {
  top: 1px;
  height: 700px;
  width: 900px;
  margin: 0 auto;
  position: relative;
}

/*HEADER LOGO*/ /*
.header {
  top: 1px;
  width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

/*IMAGE MAP*/ /*
.imgmap {
  top: 1px;
  width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/*NAVIGATION*/ /*
.nav {
  top: -325px;
  left: -20px;
  width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.enter {
  top: -400px;
  left: 190px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.art_e {
  top: -575px;
  left: 175px;
  width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/*STARS POSITION*/ /*
.stars {
  top: -795px;
  left: -10px;
  width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  
}

.pstars {
  top: -600px;
  left: -450px;
  width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

}*/
/*
@media screen and (max-aspect-ratio:16/9) and (orientation: landscape) and (max-width: 800px) {
  */
  /*HEADER IMG */ /*
.headerimg {
  width: 80%;
}
  
  div {
    top: 100px;
    left: -100px;
    position: absolute;
    z-index: 1;
  }
  
.introtext {
  top: 5px;
  left: 10px;
  position: absolute;
  z-index: 3;
  font-weight: bold
}

.nav {
  top: 200px;
  left: 50px;
  position: absolute;
  z-index: 3;
}
    
.stars {
  top: 10px;
  left: 50px;
  position: absolute;
  z-index: 2;
}

.pstars {
  top: 200px;
  left: 50px;
  position: absolute;
  z-index: 3;
}

.enter {
  top: 200px;
  left: 150px;
  position: absolute;
  z-index: 3;
}

.art_e { 
  top: 150px;
  left: 150px;
  position: absolute;
  z-index: 3;
}

}*/