@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 

body {
  background-color:FBFBFB

}

html { 
  background: url(/media/backgroundtile.gif) repeat center top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;

}
	
	

	.grid {
 		 font-family: Arial, Helvetica, sans-serif;
		 text-transform: uppercase;
		  width: 90%; height: 90%; 
  margin-left:5%; margin-right:5%;  }

	.copy {
		  font-family: Arial, Helvetica, sans-serif;
 		text-transform: uppercase;
 		 width: 60%; height: 90%; 
 		 margin-left:20%; margin-right:20%;  }
	
	.card {
       
        position: relative;
        display: inline-block;
    }
    .card .img-top {
        display: none;
        position: absolute;
		opacity: 50%;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }

#gallery {  width: 20%; height: auto; }

/* unvisited link */
a:link {
  color: violet;
}

/* visited link */
a:visited {
  color: violet;
}

/* mouse over link */
a:hover {
  color: mediumspringgreen;
}

/* selected link */
a:active {
  color: yellow;
}

a:link {
  text-decoration: none;
  font-weight: bold;
}


.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}

#header {  width: 100%; height: auto; } 
#button {  width: 90%; height: auto; } 
#orb {  width: auto; height: auto; } 
#lower {  width: 100%;  height: auto;   } 

}

@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ 
body {
  background-color:FBFBFB

}

html { 
  background: url(/media/backgroundtile.gif) repeat center top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;

}


.grid {
  width: 90%; height: 90%; 
  margin-left:5%; margin-right:5%;  }

.copy {
  width: 50%; height: 90%; 
  margin-left:25%; margin-right:25%;  }



#gallery {  width: 20%; height: auto; }



a:link {
  text-decoration: none;
}

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}

#header {  width: 50%; height: auto; } 
#button {  width: 80%; height: auto; } 
#orb {  width: auto; height: auto; } 
#lower {  width: 76%;  height: auto;   } 

}

@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
body {
  background-color:FBFBFB

}

html { 
  background: url(/media/backgroundtile.gif) repeat center top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;

}


.grid {
  width: 90%; height: 90%; 
  margin-left:5%; margin-right:5%;  }

.copy {
  width: 50%; height: 90%; 
  margin-left:25%; margin-right:25%;  }



#gallery {  width: 20%; height: auto; }


a:link {
  text-decoration: none;
}

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}

#header {  width: 50%; height: auto; } 
#button {  width: 75%; height: auto; } 
#orb {  width: auto; height: auto; } 
#lower {  width: 50%;  height: auto;   } 

}
@media (min-width:700px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
body {
  background-color:FBFBFB

}

html { 
  background: url(/media/backgroundtile.gif) repeat center top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;

}

#grid {
  width: 80%; height: 80%; 
  margin-left:0%; margin-right:0%;  }


#gallery {  width: 5%; height: auto; }


a:link {
  text-decoration: none;
}

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}

#header {  width: 100%; height: auto; } 
#button {  width: 70%; height: auto; } 
#orb {  width: auto; height: auto; } 
#lower {  width: 85%;  height: auto;   } 

}

@media (min-width:985px) { /* big landscape tablets, laptops, and desktops */ 
body {
  background-color:FBFBFB

}

html { 
  background: url(/media/backgroundtile.gif) repeat center top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;

}

#grid {
  width: 30%; height: 30%; 
  margin-left:50%; margin-right:50%;  }


#gallery {  width: 10%; height: auto; }


a:link {
  text-decoration: none;
}

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}

#header {  width: 35%; height: auto; } 
#button {  width: 30%; height: auto; } 
#orb {  width: auto; height: auto; } 
#lower {  width: 35%;  height: auto;   } 


}

@media (min-width:1281px) { /* hi-res laptops and desktops */ 
body {
  background-color:FBFBFB

}

html { 
  background: url(/media/backgroundtile.gif) repeat center top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;

}

#grid {
  width: 30%; height: 30%; 
  margin-left:50%; margin-right:50%;  }


#gallery {  width: 10%; height: auto; }


a:link {
  text-decoration: none;
}

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}

#header {  width: 35%; height: auto; } 
#button {  width: 30%; height: auto; } 
#orb {  width: auto; height: auto; } 
#lower {  width: 35%;  height: auto;   } 

}