/*----------------------------------------------------------------------------

     * Filename:          screen-shop.css

  * Description:          Shop Screen Media CSS For Hoot Owl Productions

      * Version:          1.0.0 (07-29-2010) MM-DD-YYYY

      * Website:          http://www.hootowlproductions.com/

       * Author:          Mike Baldwin

  == STRUCTURE: ==============================================================

   * Page width:          Fluid

   # of columns:          3

        Anchors:          $__main               Main Definitions
                          $__productList        Product List Definitions
                          $__productStylesAll   Product Style 1 Definitions
                          $__productStyle1      Product Style 1 Definitions
                          $__productStyle2      Product Style 2 Definitions
                          $__productStyle3      Product Style 3 Definitions
                          $__productStyle4      Product Style 4 Definitions

  ----------------------------------------------------------------------------*/


/*   __main
--------------------------------------------*/

body#bodyShop #categoryContainerTitle{
 box-sizing:border-box;
 clear:left;
 float:left;
 font-size:120%;
 font-weight:bold;
 left:-14px;
 padding:4px;
 position:relative;
 text-align:center;
 text-shadow:1px 1px 1px #222;
 width:150px}
body#bodyShop #categoryContainer{
 border:1px solid #555;
 border-top:none;
 box-sizing:border-box;
 clear:left;
 float:left;
 left:-14px;
 position:relative;
 text-align:center;
 width:150px}
body#bodyShop #categoryContainer a{
 background:#fbf7ec;
 border:1px solid #ccc;
 color:#333;
 display:block;
 padding:0.5em;
 text-align:center;
 text-decoration:none;
 vertical-align:middle}
body#bodyShop #categoryContainer a:hover,
 body#bodyShop #categoryContainer a:focus,
 body#bodyShop #categoryContainer a.active{
 background:#fffcd3;
 border:1px solid #333;
 color:#000}
body#bodyShop #subsectionProductList #productList.categoriesVisible{margin:0 0 0 150px}


/*   __productList
--------------------------------------------*/

body#bodyShop #productList .product{
 color:inherit;
 display:block;
 margin:0 0 1em;
 text-decoration:none}
body#bodyShop #productList .product.active .productTitle,
 body#bodyShop #productList .product.active .productProperties{border:1px solid #000}
body#bodyShop #productList .product.active .productProperties{
 background:#fffcd3;
 border-top:none}
body#bodyShop #productList .product.active .productTitle{color:#fffcd3}

body#bodyShop #productList .product .productTitle,
 body#bodyShop #productList .product .productProperties{
 border:1px solid;
 border-color:#ccc #333 #333 #ccc;
 border-top:none;
 box-sizing:border-box;
 padding:0.7em}

body#bodyShop #productList .product .productTitle{
 border-top:1px solid #ccc;
 color:#fff;
 display:block;
 padding:0.3em 0.4em;
 text-decoration:none;
 text-shadow:1px 1px 1px #333}
body#bodyShop #productList .product .productDescription{margin:0.5em 0 0}

body#bodyShop #productList .column1{
 display:inline-block}
body#bodyShop #productList .product img{float:right}

body#bodyShop #productList .product .rating .label{
 display:inline-block;
 margin:0 0.3em 0 0;
 text-align:right;
 width:5.5em}



/*   __productStylesAll
--------------------------------------------*/

/* rating */
body#bodyShop .rating .value{
 background:url(../../../images/rating_stars.png);
 display:inline-block;
 height:11px;
 vertical-align:middle;
 width:68px}
body#bodyShop .rating .emptyStars{background-position:-8px -7px}
body#bodyShop .rating .oneStars{background-position:-8px -19px}
body#bodyShop .rating .twoStars{background-position:-8px -31px}
body#bodyShop .rating .threeStars{background-position:-8px -45px}
body#bodyShop .rating .fourStars{background-position:-8px -58px}
body#bodyShop .rating .fiveStars{background-position:-8px -71px}

/* labels and prices */
body#bodyShop .label{font-weight:bold}
body#bodyShop .condition .label,
 body#bodyShop .basePrice .label,
 body#bodyShop .salePrice .label,
 body#bodyShop .remainingQty .label{
 display:inline-block;
 margin:0 0.3em 0 0;
 text-align:right;
 width:5.5em}
body#bodyShop .salePrice .value{font-size:120%}
body#bodyShop .basePrice .shippingHandlingCost,
 body#bodyShop .salePrice .shippingHandlingCost{
 color:#060;
 font-size:90%}
body#bodyShop .cancelledPrice .value{
 color:#777;
 font-size:90%;
 text-decoration:line-through}

/* volume discount and quantity */
body#bodyShop .volumeDiscount{
 border-bottom:1px solid #aaa;
 border-top:1px solid #aaa;
 margin:1em 0.5em;
 padding:1em}
body#bodyShop .volumeDiscount table caption{
 font-weight:bold;
 margin:0 0 0.3em;
 text-align:left}
body#bodyShop .volumeDiscount table caption span{text-decoration:underline}
body#bodyShop .volumeDiscount table{
 border-collapse:collapse;
 max-width:20em;
 width:100%}
body#bodyShop .volumeDiscount table th{font-weight:bold}
body#bodyShop .volumeDiscount table td{
 border:1px solid #999;
 padding:0.3em;
 text-align:center}
body#bodyShop #productQty{
 margin:0 0.3em 0 0;
 width:5em}
body#bodyShop .productOutOfStock{
 font-size:130%;
 font-weight:bold;
 text-align:center}
body#bodyShop .minimumQty{margin:0.3em}

/* product description and attributes */
body#bodyShop #productDescription .title,
 body#bodyShop #productAttributes .attributeGroupTitle{
 border-bottom:1px solid #000;
 font-size:110%;
 font-weight:bold;
 margin:0 0 0.3em}
body#bodyShop #productAttributes .attribute{margin:0 0 0.2em}
body#bodyShop #productAttributes .attributeGroup{margin:0 0 0.4em}
body#bodyShop #productAttributes .attributeTitle{
 display:inline-block;
 font-weight:bold}
body#bodyShop #productAttributes .attributeValue{
 clear:right;
 display:inline-block}


/*   __productStyle1
--------------------------------------------*/

body#bodyShop #productLayout1{font-family:Helvetica, Arial, sans-serif}
body#bodyShop #productLayout1 #section1{margin:0 0 1em}
body#bodyShop #productLayout1 #section1 .column1, body#bodyShop #productLayout1 #section1 .column2,
 body#bodyShop #productLayout1 #productDescription, body#bodyShop #productLayout1 #productAttributes{
 box-sizing:border-box;
 padding:0.5em;
 width:50%}
body#bodyShop #productLayout1 #section1 .column1, body#bodyShop #productLayout1 #productDescription{
 clear:left;
 float:left}
body#bodyShop #productLayout1 #section1 .column2, body#bodyShop #productLayout1 #productAttributes{
 clear:right;
 float:right}
body#bodyShop #productLayout1 #section1 header.title{
 border-bottom:2px solid #333;
 font-size:130%;
 font-weight:bold;
 margin:0 0 0.3em;
 padding:0 0 0.2em}
body#bodyShop #productLayout1 .condition{
 clear:left;
 float:left}
body#bodyShop #productLayout1 .rating{
 clear:right;
 float:right}

/* images */
body#bodyShop #productLayout1 #section1 .mainImage{
 margin:0.3em;
 text-align:center}
body#bodyShop #productLayout1 #section1 .altImages{text-align:center}
body#bodyShop #productLayout1 #section1 .altImages img{
 border:1px solid #fff;
 cursor:pointer;
 margin:0.2em}
body#bodyShop #productLayout1 #section1 .altImages img:hover,
 body#bodyShop #productLayout1 #section1 .altImages img:focus{
 border:1px solid #999}
body#bodyShop #productLayout1 #section1 .column2 .imgDesc{
 color:#333;
 font-size:90%;
 text-align:center}


/*   __productStyle2
--------------------------------------------*/

body#bodyShop #productLayout2{font-family:Helvetica, Arial, sans-serif}
body#bodyShop #productLayout2 #section1{margin:0 0 1em}
body#bodyShop #productLayout2 #section1 .column1, body#bodyShop #productLayout2 #section1 .column2,
 body#bodyShop #productLayout2 #productDescription, body#bodyShop #productLayout2 #productAttributes{
 box-sizing:border-box;
 padding:0.5em;
 width:50%}
body#bodyShop #productLayout2 #section1 .column2, body#bodyShop #productLayout2 #productDescription{
 clear:left;
 float:left}
body#bodyShop #productLayout2 #section1 .column1, body#bodyShop #productLayout2 #productAttributes{
 clear:right;
 float:right}
body#bodyShop #productLayout2 #section1 header.title{
 border-bottom:2px solid #333;
 font-size:130%;
 font-weight:bold;
 margin:0 0 0.3em;
 padding:0 0 0.2em}
body#bodyShop #productLayout2 .condition{
 clear:left;
 float:left}
body#bodyShop #productLayout2 .rating{
 clear:right;
 float:right}

/* images */
body#bodyShop #productLayout2 #section1 .mainImage{
 margin:0.3em;
 text-align:center}
body#bodyShop #productLayout2 #section1 .altImages{text-align:center}
body#bodyShop #productLayout2 #section1 .altImages img{
 border:1px solid #fff;
 cursor:pointer;
 margin:0.2em}
body#bodyShop #productLayout2 #section1 .altImages img:hover,
 body#bodyShop #productLayout2 #section1 .altImages img:focus{
 border:1px solid #999}
body#bodyShop #productLayout2 #section1 .column2 .imgDesc{
 color:#333;
 font-size:90%;
 text-align:center}


/*   __productStyle3
--------------------------------------------*/

body#bodyShop #productLayout3{font-family:Helvetica, Arial, sans-serif}
body#bodyShop #productLayout3 #section1{margin:0 0 1em}
body#bodyShop #productLayout3 .column1, body#bodyShop #productLayout3 .column2{
 box-sizing:border-box;
 padding:0.5em;
 width:50%}
body#bodyShop #productLayout3 .column1{
 clear:left;
 float:left}
body#bodyShop #productLayout3 .column2{
 clear:right;
 float:right}
body#bodyShop #productLayout3 header.title{
 border-bottom:2px solid #333;
 font-size:130%;
 font-weight:bold;
 margin:0 0 0.3em;
 padding:0 0 0.2em}
body#bodyShop #productLayout3 .condition{
 clear:left;
 float:left}
body#bodyShop #productLayout3 .rating{
 clear:right;
 float:right}
body#bodyShop #productLayout3 .qty{margin:0.5em}

/* images */
body#bodyShop #productLayout3 .mainImage{
 margin:0.3em;
 text-align:center}
body#bodyShop #productLayout3 .altImages{text-align:center}
body#bodyShop #productLayout3 .altImages img{
 border:1px solid #fff;
 cursor:pointer;
 margin:0.2em}
body#bodyShop #productLayout3 .altImages img:hover,
 body#bodyShop #productLayout3 .altImages img:focus{
 border:1px solid #999}
body#bodyShop #productLayout3 .imgDesc{
 color:#333;
 font-size:90%;
 text-align:center}


/*   __productStyle4
--------------------------------------------*/

body#bodyShop #productLayout4{font-family:Helvetica, Arial, sans-serif}
body#bodyShop #productLayout4 #section1{margin:0 0 1em}
body#bodyShop #productLayout4 .column1, body#bodyShop #productLayout4 .column2{
 box-sizing:border-box;
 padding:0.5em;
 width:50%}
body#bodyShop #productLayout4 .column1{
 clear:left;
 float:left}
body#bodyShop #productLayout4 .column2{
 clear:right;
 float:right}
body#bodyShop #productLayout4 header.title{
 border-bottom:2px solid #333;
 font-size:130%;
 font-weight:bold;
 margin:0 0 0.3em;
 padding:0 0 0.2em}
body#bodyShop #productLayout4 .condition{
 clear:left;
 float:left}
body#bodyShop #productLayout4 .rating{
 clear:right;
 float:right}
body#bodyShop #productLayout4 .qty{margin:0.5em}

/* images */
body#bodyShop #productLayout4 .mainImage{
 margin:0.3em;
 text-align:center}
body#bodyShop #productLayout4 .altImages{text-align:center}
body#bodyShop #productLayout4 .altImages img{
 border:1px solid #fff;
 cursor:pointer;
 margin:0.2em}
body#bodyShop #productLayout4 .altImages img:hover,
 body#bodyShop #productLayout4 .altImages img:focus{
 border:1px solid #999}
body#bodyShop #productLayout4 .imgDesc{
 color:#333;
 font-size:90%;
 text-align:center}