@charset "UTF-8";

/* SpryMasterDetail.css */

/* Copyright (c) 2007. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Master/Detail structure container. 
 *
 * If you want to constrain the width of the Master/Detail structure, set a width on
 * the Master/Detail container. By default, our structure expands horizontally to fill
 * up available space.
 */
.MasterDetail
{
   font: 100% Verdana, Geneva, sans-serif;
   padding: 2px;
}

/* This is the selector for the Master Container element which houses all the MasterColumn
 * classes. By default the Master column occupy about 35% from the width of the 
 * entire structure. 
*/
.MasterDetail .MasterContainer
{
   border: 1px solid gray;
   width: 28%;
   float: left;
   overflow: auto;
   color: #999;
   height: 260px;
   padding: 4px;
}

/* This is the selector for a Master Column element which holds the actual data for 
 * a master column.
*/
.MasterDetail .MasterColumn
{
   font-size: 1.1em;
   background-color: #FFF;
   padding:4px 5px;
   cursor:auto;
   color: #666;
   overflow: auto;
   text-align: left;
}

/* This is the selector for a highlighted Master Column element.
*/
.MasterDetail .MasterColumnHover
{
   background-color: #FFF;
   color: #000;
}

/* This is the selector for a selected Master Column element.
*/
.MasterDetail .MasterColumnSelected
{
   background-color:#FFF;
   color: #999;
   font-weight: normal;
   border-bottom: dotted #666 1px;
   border-top: dotted #666 1px;
}
.MasterDetail .MasterColumn .thumbnailImage
{
   clear: none;
   width: auto;
   margin-right: 4px;
   float: left;
}

/* This is the selector for the Detail Container element which houses all the DetailColumn
 * classes. By default the Detail column occupy about 60% from the width of the 
 * entire structure. 
*/
.MasterDetail .DetailContainer
{
   border: 1px solid gray;
   padding:4px;
   width: 68%;
   float: right;
   overflow: auto;
   color: #666;
   height: 260px;
}

/* This is the selector for a Detail Column element which holds the actual data for 
 * a detail column.
*/
.MasterDetail .DetailColumn
{
   margin-bottom: 1px;
   text-align: left;
   float: right;
   width: 52%;
   clear: none;
   overflow: auto;
}
#apparel .DetailContainer h4{
   text-align: left;
   color: #333;
   font-size: 1.3em;
   font-weight: normal;
   padding: 4px 0px;
   text-transform: capitalize;
   border-bottom: solid #CCC 1px;
}
#apparel .DetailContainer h4 span {
   font-weight: bold;
   color: #C00;
   padding-left: 5px;
}
#apparel .DetailContainer p
{
   text-align: left;
   color: #333;
   margin: 0px;
}
#apparel .DetailContainer .largeImage {
   clear: none;
   width: auto;
   float: left;
}
#apparel .MasterContainer .MasterColumn p { font-size: 1.1em; }
#apparel .MasterContainer .MasterColumn span.mo
{ padding-right: 6px; }

#apparel .DetailContainer p.description {
   color: #333;
   font-size: 1em;
   padding-bottom: 5px;
}
#apparel .DetailContainer p.price  {
   color: #000;
   font-size: 1.2em;
   font-weight: bold;
   margin-top: .3em;
}
#apparel .DetailContainer p.prodCode 
{
   color: #999;
   font-size: 1em;
   margin-top: 8px;
}
#apparel .DetailContainer p.prodCode span
{
   color: #333;
   font-size: 1em;
   display: block;
}
#apparel .DetailContainer p.shoppingCart
{
   color: #910001;
   font-size: 1.1em;
   font-weight: normal;
   margin-top: .5em;
}
#apparel .DetailContainer p.shoppingCart span
{
   font-size: 1em;
   padding-right: 6px;
   margin-top: 0.7em;
   padding-top: 10px;
}
#apparel .itemName{
   text-align: left;
   color: #333;
   font-size: 1.3em;
   font-weight: normal;
   padding: 4px;
   background-color: #CCC;
}