@charset "UTF-8";

/* CSS Document */

/*copyright lynda.com 2012
feel free to use these styles as you wish
attribution would be nice, but not required
*/

/* desolve color palette
#4C4341     rgb(76, 67, 65)  ASH
#646266      rgb(100, 98, 102)  DULL GRAY
#7B798F     rgb(123, 121, 143)  PEWTER BLUE
#ADA982    rgb(173, 169, 130)  DARK TAN
#D8D5BC   rgb(216, 213, 188)  MED TAN
#EDE4D6   rgb(237, 228, 214)  LIGHT TAN
#667F6A     rgb(102, 127, 106)  DARK GREEN
*/



/*  ============  gallery styles  ============*/
#gallery {
	margin: 2em 0 2em 0;
	padding: 10px;
	width: 93%; /* 83.0508 */
	display: block;
	border: 1px solid #46788C;
}

#gallery h1 {
	background: none;
	padding: 0;
	border: none;
	margin: 0;
}


#gallery ul, #gallery li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*==========  mobile styles  ==============

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


#gallery .photos a:after {
	content: attr(title);
	display: block;
	width: 95%;
	position: absolute;
	top: 0;

	line-height: 2em;
	color: white;
	text-align: center;
	background: rgba( 25, 25, 25, .8);
	z-index: 500;
}

}
*/
@media only screen and (min-width: 140px) and (max-width:480px) {

/*disable text sizing on orientation change*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	-webkit-text-size-adjust:none;
}
#gallery {
	
	width: 95%; /* 83.0508 */
	display: block;
	border: 0px solid #46788C; 
}
a.gallery {
	background: url(../_images/icon_sprites_50.png) no-repeat center 25px;
}

#gallery h1 {
	font: 4em OstrichSansBold;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	text-align: center;
	color: rgb(123, 121, 143);
}


.photos img {
	width: 95%;
	margin: 0 auto;
	display: block;
	margin-bottom:.8em;
	left: 0px;
}
.photos li {
	position: relative;
	float: none;
}

#gallery .photos a:after {
	content: attr(title);
	display: block;
	width: 95%;
	position: absolute;
	top: 0;
	left: 3%;
	line-height: 2em;
	color: white;
	text-align: center;
	background: rgba( 25, 25, 25, .8);
	z-index: 500;
}

}

/*==================================== media tablet styles  =====================================*/

@media only screen and (min-width:481px) and (max-width:768px) {
#gallery {
	border: 0px solid #46788C;
}

a.gallery {
	background-image: url(../../_images/parts/icons/icon_sprites_25.png);
	background-repeat: no-repeat;
	background-position: center 30px;
}

#gallery h1 {
	font: 6.2em OstrichSansBold;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: rgba(123, 121, 143,.8)
}


.photos {
	-moz-column-count: 2;
	-moz-column-gap: .5em;
	-webkit-column-count: 2;
	-webkit-column-gap: .5em;
	column-count: 2;
	column-gap: .5em;
	margin-bottom: 2em;
}

.photos img {
	width: 100%;
	margin-bottom: .5em;
}
.photos li {
	position: relative;
	float: none;
}

#gallery .photos a:after {
	content: attr(title);
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 2em;
	color: white;
	text-align: center;
	background: rgba( 25, 25, 25, .8);
	z-index: 500;
}
}

/*============= desktop desktop styles =============*/
@media only screen and (min-width:769px) {
#gallery {
	margin: 2em 0 2em .6em;
	padding: 10px;
	width: 95%; /* 83.0508 */
	display: block;
	border: 1px solid #46788C;
}
#gallery h1 {
	font: 10em OstrichSansBold;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;
	color: rgba(123, 121, 143,.8)
}

.photos {
	-moz-column-count: 4;
	-moz-column-gap: 1em;
	-webkit-column-count: 4;
	-webkit-column-gap: 1em;
	column-count: 4;
	column-gap: 1em;
	margin-bottom: 1em;
}

.photos img {
	width: 100%;
	margin-top: 10px;
}
.photos li {
	position: relative;
	float: none;
}

#gallery .photos a:hover:after {
	content: attr(title);
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 1.2em;
	color: white;
	text-align: center;
	background: rgba( 25, 25, 25, .8);
	z-index: 500;
}

}