/*
MADwhite BC Template
Popup
============================================================
file:        popup.css
description: Stylesheet for the popup/lightbox image styles.
revised:     ---
============================================================
*/

/* Global Reset */
* {
    margin: 0;
    padding: 0;
}

/* General */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    margin: 10px;
}

p {
    line-height: 1.3;
    margin-bottom: 8px;
}

h1 {
    font-size: 170%;
    font-weight: bold;
    color: #555;
    margin: 10px 0;
}

a {
    color: #555;
    font-weight: normal;
    text-decoration:none;
	outline:none;
}
a:hover, a:active {
    border:none;
	outline:none;
}
a:hover {
	color:#000;
}
a.disabled {
    color: black;
    text-decoration: none;
    cursor: auto;
}
img, a img {
    border:none;
	outline:none;
}

/* Page Breadcrumbs */
.Nav {
    padding-bottom: 4px;
    clear:both;
    padding-top:15px;
}

.Nav .PrevLink,
.Nav .NextLink { 
    background: #333;
    color: #fff;
    display: inline-block;
    font-size: 120%;
    margin: 10px;padding: 10px 15px;
}
.Nav .PrevLink.disabled,
.Nav .NextLink.disabled {
	background: #aaa;
}
.ImageCount { margin-top:20px;color:gray; font-size:100%;}

.Title {
    padding-bottom: 10px;
}
.ProductTinyImageList ul li {
    width: 40px;
    height: 40px;
    overflow: hidden;
    float: left;
    border: 1px solid gray;
    margin-left:3px;
	background:#fff;
}


.ProductTinyImageList ul li div {
    display: table-cell;
    text-align: center;
	background:#fff;
}

.ProductTinyImageList ul li .TinyOuterDiv {
    border: 2px solid white;
    display: block;
	background:#fff;
}

.ProductZoomImageBox {
    display:table-cell;
}

.ProductZoomImageBox, .ProductZoomImageBox * {
    display: block;
    width: auto !important;height: auto !important;
	max-width: 100%;max-height: 680px;
    margin: auto;
    overflow: hidden;
}

.ProductZoomImage { 	 	 
	text-align: center; 	 	 
	height: 100% !important; 	 	 
	width: 100% !important; 	 	 
	margin-bottom: 20px; 	 	 
}

.ProductTinyImageList ul {
    margin: 0pt;
    padding: 0pt;
    position: relative;
    list-style-type: none;
    white-space:nowrap;
    width: 2500px;
}

#ImageScrollPrev,
#ImageScrollNext {
    float: left;
    background:none;
    border:none;
    margin-top:15px;
    cursor:pointer;
    display: none;
}

.ProductTinyImageList {
    float: left;
    margin-top:10px;
    white-space:nowrap;
    width: 80%;
    overflow: hidden;
}

/* == Clearfix -clfix- ================================================ */
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.grid-row:before,
.grid-row:after,
.Block:before,
.Block:after,
.BlockContent:before,
.BlockContent:after,
.boxcontent:before,
.boxcontent:after,
dl:before,
dl:after {
	content: "";   
	display:table;    
	height:0;    
	overflow:hidden;    
}
.clearfix:before, .clearfix:after, .container:before, .container:after, .grid-row:before, .grid-row:after,  .Block:before, .BlockContent:before, .boxcontent:before, .boxcontent:after, dl:before, dl:after {
	content: "";
	display: table;
}
.clearfix:after, .container:after, .grid-row:after, .Block:after, .BlockContent:after, .boxcontent:after, .HorizontalFormContainer dl:after, .VerticalFormContainer dl:after { clear:both; }
.clearfix, .container, .grid-row, .Block, .BlockContent, .boxcontent, dl { zoom:1; } /* IE < 8 */
/* == Fixes and Clearfix == */

@media only screen and (max-width:960px) {
	
.Title {
    margin: 30px auto 20px !important;
    padding-bottom: 10px !important;
}

.Nav .PrevLink,
.Nav .NextLink { 
    display: inline-block !important;
    margin: 5px !important;padding: 10px !important;
}

}

@media only screen and (max-width:600px) {
	
.Nav .PrevLink,
.Nav .NextLink { 
    width: 40% !important;
	margin: 5px 2% !important;
	float:left;
}

}