﻿div.MainProduct
{
    width:100%;
}

div.ProductMainImageWrapper,div.ProductMainCalendarWrapper
{
    margin:15px;
}

div.ProductMainImage
{
    width:100%;
    height:400px;
    line-height:400px;
    border:1px solid #CCC;
    text-align:center;
}

div.ProductMainImageItem
{
    width:100%;
    height:100%;
    line-height:100%;
    overflow:hidden;
}

div.ProductMainImageItem table
{
    width:100%;
    height:100%;
    table-layout: fixed;
}

div.ProductMainImageItem table td
{
    vertical-align:middle;
}

div.ProductMainImage img
{
    max-width:100%;
    max-height:400px;
}

div.ProductThumbImageWrapper
{
    margin:0 10px 10px;
}

ul.ProductThumbImage
{
    text-align:center;
}

li.ProductThumbImageItem
{
    width:124px;
    height:124px;
    line-height:124px;
    float:left;
    margin:5px;
}

li.ProductThumbImageItem img
{
    vertical-align:middle;
    margin-top:-2px;   
    max-width:120px;
    max-height:120px;
    border:2px solid White;
}

ul.ProductThumbImage li.activeSlide img
{
    border:2px solid Blue;
}

table.ProductVariantImage
{
    margin:10px auto 10px auto;
    width:220px;
    height:220px;
    text-align:center;
    border:1px solid grey;
}

table.ProductVariantImage td
{
    vertical-align:middle;
    padding:10px;
}

table.ProductVariantImage img
{
    margin:0 auto;
    display:block;
    max-width:200px;
    max-height:200px;
}

div#orderDetailTab table,
div#userAccountTab table,
div#CourseScheduleList table,
div#DetailCourse table,
div#DetailBooking table
{
    border:1px solid #333;
    border-collapse:collapse;
    margin-bottom:1em;
}

div#orderDetailTab table td,
div#orderDetailTab table th,
div#userAccountTab table td,
div#userAccountTab table th,
div#CourseScheduleList table td,
div#CourseScheduleList table th,
div#DetailCourse table td,
div#DetailCourse table th,
div#DetailBooking table td,
div#DetailBooking table th
{
    padding:0.3em;
}

div#orderDetailTab table td,
div#userAccountTab table td,
div#CourseScheduleList table td,
div#DetailCourse table td,
div#DetailBooking table td
{
    border-right:1px dotted #333;
}

div#orderDetailTab table th,
div#userAccountTab table th,
div#CourseScheduleList table th,
div#DetailCourse table th,
div#DetailBooking table th
{
    background:#DDD;
}

div#orderDetailTab table tr,
div#userAccountTab table tr,
div#CourseScheduleList table tr,
div#DetailCourse table tr,
div#DetailBooking table tr
{
    border:1px dotted #333;
}

table.OrderList
{
    float:left;
    margin-right:1em;
}

.ProductVariantImageBlock{ position:relative; width:auto;  }
.ProductVariantImageBlockPostCard{ position:relative; width:auto;   }
.ProductVariantImage{ left:0;top:0; float:left; z-index:1; overflow:hidden;  }
.contentFrame{ position:relative; width:auto; word-wrap: break-word;top:-18px; }
.fontSelector,.colorSelector,sizeSelector{ float:left;}

.RelatedProduct
{
    border:1px solid #CCC;
    padding:1%;
    margin-bottom:1.5%;
}

.RelatedProductImage
{
    float:left;
    width: 25%;
}

.RelatedProductImage a
{
    display:block;
}

.RelatedProductDetails
{
    float:left;
    margin-right:2%;
    width: 63%;
}

.RelatedProductName
{
    font-weight:bold;
    font-size:1.2em;
    margin-bottom:1%;
}

.RelatedProductShopping
{
    float:right;
    width: 10%;
    clear:right;
}


/*Product images slide*/
div.ProductMainImage_Wrapper
{
    position:relative;
    margin:15px;
}

div.ProductMainImages
{
    width:100%;
    height:400px;
    line-height:400px;
    border:1px solid #CCC;
    text-align:center;  
}

div.ProductMainImages img
{
    display:none;
    max-width:100%;
    max-height:400px;
    vertical-align:middle;
}

div.ProductMainImageCaption
{
    display:none;
    position:absolute;
    background:Black;
    color:White;
    text-align:left;
    line-height:20px;
}

div.ProductMainImageCaption > span
{
    display:block;
    padding:10px;
}


div.Prev
{
    position:absolute;
    left:0;
    top:50%;
}

div.Next
{
    position:absolute;
    right:0;
    top:50%;
}

a.PrevLink, a.NextLink
{
    display:block;
}

div.ProductImageLoading
{
    background:url(/Content/ajax-loader.gif);
    background-repeat:no-repeat;
    background-position:center;     
}
.BackButton {margin:10px; }
.BackButton a { text-decoration:none; font-weight:bold; text-transform:uppercase; }

/*End Product images slide*/