body {
  background:#eeeeee;
}

#gallery {
  font-family: Arial,Helvetica,sans-serif;
  padding: 0;
  position:relative;
  text-align:center;
  width: 950px;
  margin: 0 auto;
  overflow: visible;
  padding: 40px 40px 40px 40px;
}

#pageTitle h1 {
  background-image: url(/images/header-visual.png);
}

#pageTitle a {
	position:relative;
	right: 35px;
	float:right;
	font-size: 10pt;
	color: #ffffff;
	text-decoration: none;
}

#pageTitle a:hover {
        color: #dddddd;
        text-decoration: underline;
}


/** VISUAL REFRESH GALLERY STYLNG **/

#gallery @mixin shadow {
	-webkit-box-shadow: 0px 0px 8px rgba(100, 100, 100, 0.25);
	-moz-box-shadow:    0px 0px 8px rgba(100, 100, 100, 0.25);
	box-shadow:         0px 0px 8px rgba(100, 100, 100, 0.25);
}                               
                                
#gallery @mixin highlight {              
	-webkit-box-shadow: 0px 0px 8px rgba(255, 211, 126, 0.75);
	-moz-box-shadow:    0px 0px 8px rgba(255, 211, 126, 0.75);
	box-shadow:         0px 0px 8px rgba(255, 211, 126, 0.75);
}

#gallery @mixin rounded {
	-webkit-border-radius: 	4px;
	-moz-border-radius: 	4px;
	border-radius: 		4px;
}

#gallery ul {
	list-style-type: none;
	float: left;
	margin-top: -10px;
	padding: 0;
}

#gallery ul li {
	display: inline !important;
}

#gallery ul li a {
	width: 170px;
	height: 170px;
	@include shadow;
	@include rounded;
	text-decoration: none;
	float: left;
	margin: 0 18px 18px 0;
	padding: 10px 0 10px 0;
	background-color: #ffffff;
	text-align: center;
	border: 1px solid #dddddd;
	-webkit-box-shadow: 0px 0px 8px rgba(100, 100, 100, 0.25);
	-moz-box-shadow: 0px 0px 8px rgba(100, 100, 100, 0.25);
	box-shadow: 0px 0px 8px rgba(100, 100, 100, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

#gallery ul li a:hover {
	@include highlight;
	-webkit-box-shadow: 0px 0px 8px rgba(255, 211, 126, 0.75);
	-moz-box-shadow: 0px 0px 8px rgba(255, 211, 126, 0.75);
	-box-shadow: 0px 0px 8px rgba(255, 211, 126, 0.75);
	border: 1px solid #ffffff;
}

/** END VISUAL REFRESH GALLERY STYLING **/

/* consolidating styles for transition to sprite images */
#gallery > .top, #gallery > .bot {
  display: block;
  position: absolute;
  left: 0px;
  height: 15px;
  width: 574px;
  background: transparent url(/images/podSprite.png) no-repeat;
  margin: 0;
  padding: 0;
  border: 0;
}

#gallery > .top {
  top: -14px;
  background-position: -1px -70px;
}

/** 
#gallery > .bot {
  background: transparent url(/images/example-pod-bot.png) no-repeat scroll 0 0;
  top: auto;
  height: 20px;
  position: relative;
  clear: both;
} 
**/

#gallery #moreExamples {
  display: block;
  float: none;
  clear: both;
  width: 63px;
  height: 24px;
  background: url(/images/gallery-more.png) no-repeat scroll 0 0;
  text-indent: -5000px;
  left: 447px;
  position: relative;
  margin-bottom: 20px;
}