/* style.css for treewind/cdshop */

div.subnavmenu
{
  margin: 5px;
  width: 290px;
  background: white;
  border-radius: 5px;
}

a.subnav
{
  display: inline-block;
  border-radius: 5px;
  background: #cef;
  color: black;
  text-decoration: none;
  padding: 2px 5px;
  margin: 2px;
}

a.subnav.self, a.subnav.self:hover
{
  color: #fec;
  background: black;
}

a.subnav:hover
{
  background: #f96;
}

table.basket
{
  margin: 5px 0;
  min-width: 260px;
  border: 1px solid black;
  background: white;
}

table.basket tr td, table.basket tr th
{
  text-align: left;
  padding: 0 10px;
  border: 1px solid #999;
  font-size: 90%;
}

table.basket tr.postage td
{ padding: 5px 10px; }

table.basket tr.totals td
{
  padding: 5px 10px;
  border: 1px solid #999;
  border-top: 2px solid black;
}



table.prodlist
{
  border-collapse: collapse;
}

table.prodlist tr td
{
  padding: 5px;
  border-top: 1px solid blue;
}

table.show_order
{
  margin: 20px;
  border: 1px solid #666;
}

table.show_order tr td
{
/*  border-top: 1px solid #666; */
  padding: 2px 10px;
}

table.show_order tr.totals td
{
  border-top: 1px solid black;
}

div.paymentbuttons
{
  width: 50%;
  min-width: 260px;
  max-width: 500px;
  margin: 10px;
  padding: 10px;
  border: 1px solid blue;
  border-radius: 5px;
  background: #f8f0ff;
}

div.panel
{
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  width: 80%;
  max-width: 800px;
  min-width: 300px;
  margin: 20px auto;
}

div.paymentbuttons h3
{
  margin: 0 ;
  padding: 0;
}
div.prodlist 
{ 
  background: #f0f8ff;
  color: #006;
}
div.prodlist img.prodimage 
{    
  width:100px; 
  display: inline-block; 
  vertical-align: top; 
  margin: 10px 0 0 0;
}
div.description
{
  display: inline-block; 

  min-width: 250px; 
  max-width: 700px;
  margin: 10px 5px 0 0;
}

div.basket
{
  width: 60%; 
  min-width: 300px; 
  float: right; 
  margin: 10px 0;
  border: 1px solid blue; 
  border-radius: 10px; 
  background: #def; 
  padding: 10px;
}
@media screen and (max-width: 500px)
{
  div.basket 
  {
    float: none;
    width: 90%;
    width: calc(100% - 10px);
    border-radius: 3px; 
    padding: 3px;
    margin: 5px auto;
  }
}
form.incdecbutton
{
  display: inline-block;
  margin: 0;
}
form.inlinebutton
{
  display: inline-block;
  margin: 0;  
}

div.basket input.orderbutton
{
  border: 2px solid #393; 
  background: #9c9; 
  font-weight: bold;
  width: 140px; 
  margin-bottom: 0; 
  border-radius: 5px
}

div.basket input.cancelbutton
{
  border: 2px solid #900; 
  background: #d99; 
  font-weight: bold;
  width: 140px; 
  margin-bottom: 0; 
  border-radius: 5px
}

form.datarec_form { background: #ccc; margin: 10px; padding: 10px; }
div.form_input_pair { margin: 1px 2px; padding: 2px; background: #aba;}
div.form_input_pair div.label { display: inline-block; width: 20%;
width: calc(25% - 10px)  }
div.form_input_pair div.input { display: inline-block; width: 75%;
  width: calc(75% - 10px); vertical-align: top }
div.form_input_pair div.input input { width: 95%}
@media screen and ( max-width: 500px )
{
  form.datarec_form { background: #ccc; margin: 10px 0; padding: 2px; }
  div.form_input_pair div.label { display: block;  width: 95%}
  div.form_input_pair div.input { display: block;  width: 95%}
  div.form_input_pair div.input input { width: 100%}
}

div.testmode { color: red; }
h2 { margin: 10px 0 10px; text-align: center; }
div.productblock
{
  border-top: 1px solid #ccd; clear: both; margin: 10px 0 0 0
}
div.productinfo
{
  display: inline-block; 
  vertical-align: top; margin: 10px;
  width: 300px; width: calc(100% - 130px); min-width: 180px
}

div.errorbox
{
  border: 2px solid red; 
  padding: 10px; 
  width: 400px;
  color: red; 
  border-radius: 10px;
  margin: 10px 0;
}
div.formblurb
{
  border: 1px solid #363; 
  background: #efd; 
  width: 400px;
  max-width: 90%;
  margin: 0 0 10px; 
  padding: 10px; 
  border-radius: 10px; 
  font-size: 90%
}
pre.addressconfirm { border: 1px solid #ccc; padding: 10px 30px; width: 400px }
input.nochexbutton 
{ 
  width: 200px; 
  border: 1px solid blue; 
  display: block; 
  margin: 10px 0 5px;
  background: white;
}

div.cancel_conf 
{
  width: 500px; 
  max-width: 90%;
  max-width: calc(100% - 60px);
  margin: 20px auto; 
  border: 2px solid red;
  border-radius: 5px; 
  padding: 20px; 
  text-align: center
}

div.payment_conf
{
  width: 500px; 
  max-width: 90%;
  max-width: calc(100% - 60px);
  margin: 20px auto; 
  border: 2px solid #696; 
  padding: 20px; 
  text-align: center;
}