/*--------------------------------------------------------
	coding: Marek Streich
	www: www.tequila-qs.info
	email: marekstre@o2.pl
	created: march 2012
*/


/******************************** Basic Structure ********************************/					

* { margin: 0; padding: 0; }
body, html { width: 100%;  height: 100%; }
html { overflow: auto; overflow-x: hidden; }
.cufon-loading { visibility: hidden !important; }

body {
	color: #393b36;
	font-family: Trebuchet MS, Arial, Sans-Serif;
	margin: 0 auto;
	background: #2f2718 url("../images/bg_gallery.jpg") top center no-repeat;		
}

img { border: none; }

div#preload { display: none; }

div#structure {
	width: 982px;
	margin: 0 auto;
	background: transparent;
}


/*********************************** Typography ***********************************/

h1 { font-weight: bold; font-size: 25px; line-height: 31px; text-align: left; margin: 0px 0px 5px 0px; }
div, p { font-weight: normal; font-size: 15px; line-height: 23px; text-align: justify; margin: 0px 0px 10px 0px; }
a {	text-decoration: none; color: #350808; outline: 0; }
a:hover, a:active{ text-decoration: underline; color: #760010; }


/******************************** Elements Styling ********************************/

div.header {
	width: 982px;
	height: 155px;
	margin: 0px;
	background: transparent url("../images/gallery_logo.png") bottom center no-repeat;	
}

	div.header a {
		display: block;
		width: 60px;
		height: 60px;
		margin: 0px 0px 0px 922px;
		background: transparent url("../images/back.png") top center no-repeat;	
	}

div.main {
	width: 982px;
	height: 508px;
	margin: 0px;
	padding: 0px;
	outline: 0;
}

	div.main .row {
		width: 723px;
		margin: 0 auto;
		clear: both;
	}

		div.main .row a {
			display: block;
			float: left;
			width: 211px;
			margin: 0px 15px 0px 15px;
			background-position: top center;
			background-repeat: no-repeat;
		}
			
		div.main .row a.sprite_pinstriping { background: url("../images/sprite_gallery_pinstriping.png"); height: 257px; margin-top: 0px; }
		div.main .row a.sprite_pinstriping:hover { background-position: bottom center; }
		
		div.main .row a.sprite_scrollworks { background: url("../images/sprite_gallery_scrollworks.png"); height: 241px; margin-top: 8px; }
		div.main .row a.sprite_scrollworks:hover { background-position: bottom center; }
		
		div.main .row a.sprite_lettering { background: url("../images/sprite_gallery_lettering.png"); height: 254px; margin-top: 2px; }
		div.main .row a.sprite_lettering:hover { background-position: bottom center; }
		
		div.main .row a.sprite_gold { background: url("../images/sprite_gallery_gold.png"); height: 246px; margin-top: 2px; }
		div.main .row a.sprite_gold:hover { background-position: bottom center; }
		
		div.main .row a.sprite_events { background: url("../images/sprite_gallery_events.png"); height: 248px; margin-top: 1px; }
		div.main .row a.sprite_events:hover { background-position: bottom center; }
		
		div.main .row a.sprite_sale { background: url("../images/sprite_gallery_sale.png"); height: 251px; margin-top: 0px; }
		div.main .row a.sprite_sale:hover { background-position: bottom center; }

div.footer {
	width: 982px;
	height: 18px;
	margin: 30px 0px 0px 0px;
}

	div.footer a {
		display: block;
		width: 156px;
		height: 18px;
		margin: 0 auto;
		background: transparent url("../images/gallery_copyright.png") top center no-repeat;	
	}


/******************************** Ad-Gallery Styles ********************************/

	/* TOP */

	.main .ad-image-wrapper {
		width: 100%;
		height: 420px;
		margin-bottom: 0px;
		position: relative;
		overflow: hidden;
	}

		.main .ad-image-wrapper .ad-loader {
			position: absolute;
			z-index: 10;
			top: 48%;
			left: 48%;
		}

		.main .ad-image-wrapper .ad-prev, .main .ad-image-wrapper .ad-next {
			position: absolute;
			top: 0;
			width: 50%;
			height: 100%;
			cursor: pointer;
			display: block;
			z-index: 100;
			background: url(./images/non-existing.jpg)\9
		}
		.main .ad-image-wrapper .ad-next { right: 0; }
		.main .ad-image-wrapper .ad-prev { left: 0; }

			.main .ad-image-wrapper .ad-prev .ad-prev-image, .main .ad-image-wrapper .ad-next .ad-next-image {
				width: 30px;
				height: 30px;
				display: none;
				position: absolute;
				top: 47%;
				z-index: 101;
			}
			.main .ad-image-wrapper .ad-prev .ad-prev-image { background: url(./images/ad_prev.png); left: 0; }
			.main .ad-image-wrapper .ad-next .ad-next-image { background: url(./images/ad_next.png); right: 0; left: auto; }

		.main .ad-image-wrapper .ad-image {
			position: absolute;
			overflow: hidden;
			top: 0;
			left: 0;
			z-index: 9;
		}

			.main .ad-image-wrapper .ad-image a img { border: 0; }
			.main .ad-image-wrapper .ad-image .ad-image-description {
				position: absolute;
				bottom: 0px;
				left: 0px;
				padding: 7px;
				text-align: left;
				width: 100%;
				z-index: 2;
				background: url(opa75.png);
				color: #000;
			}

			* html .main .ad-image-wrapper .ad-image .ad-image-description {
				background: none;
				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png');
			}
				.main .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { display: block; }
		

	/* BOTTOM */

	.main .ad-nav {
		width: 100%;
		position: relative;
		margin-top: 18px;
	}
		.main .ad-nav .ad-thumbs {
			overflow: hidden;
			width: 100%;
		}
			.main .ad-thumbs .ad-thumb-list {
				width: 9000px;
				list-style: none;
			}
				.main .ad-thumbs ul {
					clear: both;
				}
					.main .ad-thumbs li {
						float: left;
						padding-right: 5px;
					}
						.main .ad-thumbs li a {
							display: block;
						}
							.main .ad-thumbs li a img {
								border: 0px;
								display: block;
								max-height: 420px;
							}
								.main .ad-thumbs li a.ad-active img {
									border: 0px;
								}
							
/* Can't do display none, since Opera won't load the images then */
.ad-preloads {
  position: absolute;
  left: -9000px;
  top: -9000px;
}