﻿/*
 Genearl Apprach
  Li contains a label, an input/text box, span
  Everything floats left
  The span will end the floating
  Therefore, use the span as the text to display, a vaildator, or just put an empty one at the end of the li

  .Details is 2 column across 1060px
  .Details4 is 4 column across 1060px

*/
span.nl-error {color:Red;}
span.nl-message { display:block;margin-left:50px;}

ul.pw-pages
{
    margin-left:25%;
    margin-right:25%;
}

ul.Details
{
    float:left;
    width:500px;
}

ul.Details4
{
    float:left;
    width:250px;
}

ul.Details3, ul.Details3s
{
    float:left;
    width:333px;
}


ul.Details li
{
    display:block;
    float:none;
    width:500px;
    min-height:20px;
    margin: 20px 0px 10px 25px;
}

ul.Details4 li
{
    display:block;
    float:none;
    width:250px;
    min-height:20px;
    margin: 20px 0px 10px 10px;
}

ul.Details3 li, ul.Details3s li
{
    display:block;
    float:none;
    width:333px;
    min-height:20px;
    margin: 20px 0px 10px 10px;
}

.Details:first, .Details4:first, .Details3:first, .Details3s:first
{
    margin-top: 30px;
}

.Details3s > li
{
    font-weight: bold;
    font-size: 16px;
}

ul.Details input, textarea, select
{
    display:inline-block;
    float:left;
}

ul.Details4 input, textarea, select
{
    display:inline-block;
    float:left;
}

ul.Details3 input, textarea, select, ul.Details3s input, textarea, select
{
    display:inline-block;
    float:left;
}


ul.Details Label
{
    display:inline-block;
    float:left;
    width:160px;
    min-width:160px;
    text-align:right;
    margin:0px 20px 0px 0px;
    font-weight: bold;
    font-size: 14px;
}

ul.Details3 Label, ul.Details3s Label
{
    display:inline-block;
    float:left;
    width:150px;
    min-width:150px;
    text-align:right;
    margin:0px 20px 0px 0px;
    font-weight: bold;
    font-size: 13px;
}

ul.Details4 Label
{
    display:inline-block;
    float:left;
    width:125px;
    min-width:125px;
    text-align:right;
    margin:0px 20px 0px 0px;
    font-weight: bold;
    font-size: 12px;
}

ul.Details span
{
    clear:both;
    /*display:block;
    float:left; */
    width:270px;
    min-width:250px;
    text-align:left;
    font-weight: normal;
    font-size:14px;
    font-weight:normal;
}

ul.Details3 span, ul.Details3s span
{
    clear:both;
    /*display:block;
    float:left; */
    width:183px;
    min-width:183px;
    text-align:left;
    font-weight: normal;
    font-size:13px;
    font-weight:normal;
}

ul.Details4 span
{
    clear:both;
    /*display:block;
    float:left; */
    width:125px;
    min-width:125px;
    text-align:left;
    font-weight: normal;
    font-size:12px;
    font-weight:normal;
}

ul.Details div
{
    width:270px;
    margin-left:180px;
    position:relative;
}

ul.Details3 div, ul.Details3s div
{
    width:183px;
    margin-left:165px;
    position:relative;
}

ul.Details4 div
{
    width:125px;
    margin-left:145px;
    position:relative;
}

/* The span on the customer validator for images cannot clear because 
   it will throw off the styling on the page */
ul.Details span#MainContent_custValImageType, span#MainContent_custValImageSize
{
    clear:none;
   display:inline-block;
   float:left;   
}   

ul.Details3 span#MainContent_custValImageType, span#MainContent_custValImageSize
{
    clear:none;
   display:inline-block;
   float:left;   
}      

ul.Details3s span#MainContent_custValImageType, span#MainContent_custValImageSize
{
    clear:none;
   display:inline-block;
   float:left;   
}     

ul.Details4 span#MainContent_custValImageType, span#MainContent_custValImageSize
{
    clear:none;
   display:inline-block;
   float:left;   
}      
   
ul.Details span.tall
{
    min-height:100px;
    display:block;
}

ul.Details label.tall, ul.Details3 label.tall, ul.Details4 label.tall, ul.Details3s label.tall
{
    clear:both;
    text-align:left;
}

fieldset
{
    width:1052px;
    padding:0px 50px 0px 50px;
}

fieldset.twocolumn
{
    width:500px;
    padding:0px 20px 0px 20px;
    margin:0px 10px 0px 10px;
    min-height:350px;
}

#content.normal fieldset legend
{
    font-weight: bold;
    font-size: 18px;
}

ul.images
{
    text-align:center;
    display:block;
    float:none;
    margin-top:20px;
}

ul.images li 
{
    margin-right: 20px;
    float: left;
    display: inline;
}

ul.images label, a
{
    display:block;
    float:none;
}

ul.skuImages
{
    text-align:center;
    float:none;
    margin-top:20px;
}

ul.skuImages li 
{
    margin-right: 20px;
    float: left;
    
}

ul.skuImages label, a
{
    
    float:none;
}

#function div
{
    
  border-style:groove;
  border-width:2px;
  width:32%;
  height:250px;
  vertical-align:top;
  text-align:center;
  display:inline-block;
}
#sku_page div
{
  vertical-align:top;
  display:inline-block;
}
#sku_page_detail1 div
{
  width:200px;
  vertical-align:top;
  text-align:left;
}
#sku_page_detail2 div
{
  vertical-align:top;
  text-align:left;
}

/*
div.skudetail-upload
{
 min-height:100px;
 height:100px;   
} */


th, th label
{
    text-align:left;
}

#projectBanner
{
    padding-left:20px;
    padding-bottom:20px;
    line-height:20px;
    font-size:16px;
    font-weight:bold;
}

.projectTableHeader
{
    font-weight:bold;
}

/* Error messages */
div.bus_rule_err span, #MainContent_BusRuleErrorMessage
{
       color:Red;
}
tr.totals td
{
    text-align:center;
    background-color:Olive;
}
h3.totals 
{
    font-size:large;
}

span.shortcb input {
    width:15px !important;
}