@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

#nav
 {
 background-color:#FFFFFF;
 width:auto;
 /*margin-left: 60%;*/
 padding: 0px;
 height:70px;
 /*box-shadow: 0px 1px 50px #5E5E5E;*/
 position:fixed;
 top:10px;
 right:50px;
 text-align:right;
 z-index:500;
}

#navigation
{
 list-style-type:none; 
 margin: 0px;
 box-shadow: 0px 1px 50px #ffffff;
 padding: 0px;
}

li 
{
 display:inline;
 height: auto;
 margin: 0px;
 padding: 0px;
}
#nav a
{
 font-family:verdana;
 text-decoration:none;
 color:#00B6AA;
 margin: 0px;
 padding: 0px;
} 
#nav a:hover 
{
 color:#BDBDBD;
}

/* Mobile Layout: 480px and below. */
  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	clear: none;
	float: none;
}
#div1 {
}
#header {
}
.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

hr {
    height: 2px;
    color: #000000;
    background: #000000;
    font-size: 0;
    border: 0;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 90.675%;
	padding-left: 1.1625%;
	padding-right: 1.1625%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
#header {
}
.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 88.5%;
	max-width: 1232px;
	padding-left: 0.75%;
	padding-right: 0.75%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
#header {
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}

/*Popup Gallery CSS*/

.gallerycontainer{
position: relative;
margin:0 0 0 15%
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
margin: 0;
}

.thumbnail:focus{
background-color: transparent;
outline:none;
}

.thumbnail:hover img{
/*border: 1px solid blue;*/
-webkit-drop-shadow: 0 0 6px rgba(256, 256, 256, .75);
-moz-drop-shadow: 0 0 6px rgba(256, 256, 256, .75);
drop-shadow: 0 0 6px rgba(256, 256, 256, .75);
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border: none;
padding: 2px;
}

.thumbnail:focus span{ /*CSS for enlarged image*/
max-width:100%;
visibility: visible;
top: -350px;
left: 50px; /*position where enlarged image should offset horizontally */
z-index: 50;
transition: 0.3s;
}



ul.enlarge{
list-style-type:none; /*remove the bullet point*/
margin:0 0 0 20%;
}
ul.enlarge li{
display:inline-block; /*places the images in a line*/
position: relative;
z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
/*margin:10px 40px 0 20px;*/
}
ul.enlarge img{
background-color:transparent;
padding: 0px;
/*-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
box-shadow: 0 0 6px rgba(132, 132, 132, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px; */
}
ul.enlarge span{
	
position:absolute;
left: -9999px;
background-color:#ffffff;
padding: 10px;
font-family: 'Droid Sans', sans-serif;
font-size:.9em;
text-align: center; 
color: #999999; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
box-shadow: 0 0 20px rgba(0,0,0, .75);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius:4px;
}
ul.enlarge li a:focus{
z-index: 50;
cursor:pointer;
}
ul.enlarge span img{
padding:2px;
background:#ccc;
}
ul.enlarge li a:focus span{
	transition: 0.3s;
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -120px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/*ul.enlarge li:hover:nth-child(2) span{
left: -100px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px; 
}*/
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
	max-width:700px;
behavior: url(pie/PIE.htc); 
}