body { 
    font-family: calibri, arial, helvetica; 
    font-size: 1.1em;
    background: #fffbdc url(../images/site_bg.jpg) repeat-x;
    width: 1050px;
    margin: 0 auto;
    }
a img { border: none; }

#header { height: 156px; padding-right: 10px; }
#header #logo {
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
#header #stamp {
    background: url(../images/the_band_2019.png) top right no-repeat;
    float: right;
    left: 150px;
    margin-right: 7px;
    margin-top: 10px;
    height: 199px;
    width: 333px;
    }
#header h1 { height: 87px; padding-top: 40px; margin: 0; }
#header #nav { line-height: 29px; }
#header #nav a,
#header #nav span { color: #7A6951; text-decoration: none; font-weight: bold; margin: 0 20px; }
#header #nav span.active { color: black; font-weight: bold; }
#header #nav a:hover { color: #161719; }
#body { padding-top: 1em; margin-top: 0; clear:both; width: 800px; margin-left: 40px; }
#order { float: left; text-align: center; margin-right: 40px; margin-top: 1.5em; }
#order.alt { float: right; clear: right; margin-top: 1em; }
#order a { color: #797563; }
#order a#order_image { position: relative; width: 304px; height: 100px; float: left; background: url('../images/order_cd.png') no-repeat; }
.gallery { height: 130px; background-color: #DFD8B2; border: 4px solid #797563; padding: 10px; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; }
.gallery img { border: 4px solid #797563; }
#the_band p { clear: both; margin-top: 2em; }

#theband_description { background-color: rgba(255,251,220,.5); padding: .05em 1.5em; border: 3px solid #d9caa3; font-size: 1.25em; line-height: 1.35em; text-align: justify; border-radius: 10px; }
#the_band img { border: 3px solid #d9caa3; border-radius: 20px; margin-bottom: 3em; box-shadow: 0px 5px 10px rgba(0,0,0,0.3);}
#the_band .left { text-align: left; }
#the_band .left img { float: left; margin-right: 1em; }
#the_band .right  { text-align: right; }
#the_band .right img  { float: right; margin-left: 1em; }

#footer { padding-top: 2em; clear: left; text-align: center; font-size: .85em; opacity: .5; }

img.left { float: left; }
img.right { float: right; }
.center { margin: auto 0; text-align: center; }
.textcenter { text-align: center; }
.textright { text-align: right; }

/* effects */
.box { padding: .25em; border: 1px solid gray; border-bottom-width: 2px; margin-bottom: 1em;}
.box p { text-align: center; }

table { width: 100%; border-collapse: collapse; background: #FFFBDC; }
th { background-color: #BEA27D; text-align: left; }
tr.selected { background-color: #ff4; }
tr.hover { background-color: #ffb; }
tr.selected.hover { background-color: #ff4; }
td, th { padding: .2em; vertical-align: top; }
td, tr { border: 1px solid #BEA27D; }
td.no-wrap { white-space: nowrap; }

/* order form !!!!!TBD!!!!! */
#order_form { width: 600px; margin: 0 auto; }
#order_form p { margin-top: .25em; margin-bottom: .25em; }
#order_form label { width: 100px; margin-right: .5em; text-align: right; font-weight: bold; }
#order_form input[type=text] { width: 400px; margin-bottom: .25em; }
#order_form input[type=text]#state { width: 140px; }
#order_form input[type=text]#zip { width: 147px; }
#order_form input.number { width: 50px; margin: 0; text-align: right; }
#order_form input:focus { background-color: #f1c594; }
#order_form #customer_info { margin-top: .5em; }
#order_form #customer_info label,
#order_form #customer_info input[type=text] { float: left; }
#order_form #customer_info  br { clear: both; }

#order_form table { width: 100%; border: 1px solid gray; border-bottom-width: 2px; border-collapse: collapse; margin-bottom: 1em; }
#order_form table td,
#order_form table th { padding: .25em; border: 1px solid gray; }
#order_form table td.blank { border-width: 0; border-top: none; }
#order_form table td.title { width: 200px; text-align: left; }
#order_form table td.quantity { width: 100px; text-align: center; }
#order_form table td.cost,
#order_form table td.total,
#order_form table td#subtotal,
#order_form table td#shipping,
#order_form table td#grand_total { width: 100px; text-align: center; font-weight: bold; }
#order_form table th span.normal { font-weight: normal; font-size: small; }

#contact_form{}
#contact_form div.success{font-size:16px;font-weight:bold;padding:.5em;margin:1em;background-color:#F8E9BB;color:#000;border:1px solid #797563;}
#contact_form div.error{font-size:16px;font-weight:bold;padding:.5em;margin:1em;background-color:#EB7B9C;color:#000;border:1px solid #f00;}
#contact_form div.left{float:left;width:480px;padding-right:40px;background:url('../images/vertical_seperator.gif') repeat-y top right}
#contact_form form{}
#contact_form div.text_fields{float:left}
#contact_form form p{clear:both;margin-bottom:23px}
#contact_form p label{background:#F8E9BB;display:block;padding:8px 0px 8px 10px;width:70px;border:1px solid #c0c0c0;text-align:left;font-size:11px;font-weight:bold;color:#363636;text-transform:uppercase;float:left}
#contact_form .text_input{background:#fff url('../images/text_field.gif') repeat-x top;border:1px solid #c0c0c0;padding:6px;font-size:14px;color:#666;margin-left:-2px;width:240px}
#contact_form select.text_input{padding:6px 6px 4px 6px;width:257px;height:31px;font-size:14px;}
#contact_form select option {padding:6px;font-size: 14px;}
#contact_form #message{width:380px;height:108px;font-size:12px;color:#666}
#contact_form p.validation{font-size:11px;text-transform:uppercase;padding-top:4px;margin:0;float:left}
#contact_form .send{float:left;margin-left:275px}
#contact_form .send{float:left;margin-left:275px}
#contact_form div.right{width:200px;float:right}
#contact_form div.right b{font-weight:bold;color:#252525;display:block;margin-bottom:10px}
#contact_form div.right p{font-size:13px;line-height:22px;letter-spacing:-0.02em;margin-bottom:10px}
#contact_form div.right .email{display:block;padding-left:28px;background:url('../images/mail_icon.gif') no-repeat left;text-decoration:none; text-align: left;}
#contact_form div.right .email:hover{color:#333}


.button { 
    color: #fff; 
    padding: 8px 14px 10px; 
    background-color: #bc1815; 
    background-color: #00b1af; 
    border: none; 
    margin-right: 25px; 
    position: relative;
    -webkit-user-select: none;
    -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    -moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
    }
.button:active { position: relative; top: 3px;
    -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    }
.button:active:after { content: ""; width: 100%; height: 3px; background: #fff; position: absolute; bottom: -1px; left: 0; }

.switcheroo{unicode-bidi:bidi-override;direction:rtl;}

.edit textarea { 
    position: relative;
    left: -3px;
    top: -3px;
    font-family: calibri, arial, helvetica;
    border: 2px solid #BCA27D;
}
.edit:hover { background-color: white; color: #04f; }
/*
.edit:hover:after {
    content: "Click on text to edit...";
    position: absolute;
    top: 0;
    right: -7em;
    width: 4em;
    padding: .25em .5em;
    background-color: #fff5;
    border: 1px solid;
    border-radius: .25em;
    font-size: 1.15rem;
    line-height: 1.1em;
    text-align: center;
}
*/

.spacer{clear:both; height:1px;}

/* ----------- Event Add/Edit Form ----------- */
button#add { float: right; }
button#add span { font-size: 16px; font-weight: bold; padding-bottom: 20px; vertical-align: middle;}

div.modal { display: none; position: absolute; top: 50%; left: 50%; margin-left:-300px; margin-top:-200px; width:430px; padding:14px;
    -webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    0px 0px 25px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    box-shadow:         0px 0px 25px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.modal { border: 1px solid #BEA27D; background: #FFEDBF; }
.modal H1 { margin-top: 0 }
.modal label { display:block; font-weight:bold; text-align:right; width:100px; float:left; margin-top:5px; clear: left; }
.modal input[type='text'],
.modal input[type='password'],
.modal textarea { float:left; padding:4px 2px; border:solid 1px #BEA27D; width:200px; margin:2px 0 20px 10px; }
.modal textarea { width:300px; }
.modal #buttons { clear: both; margin-left: 110px; }
.modal button#submit,
.modal button#delete { clear:both; width:130px; margin-right:10px; height:31px; background:#BCA27D; text-align:center; line-height:31px; color: black; font-weight:bold; }
.modal button#delete { visibility: hidden;}
.modal #close { float: right; }
.modal #move-event { float: right;}
.modal #move-event #top { visibility:hidden; }
.modal #move-event #up { visibility:hidden; }
.modal #move-event #down { visibility:hidden; }
.modal #move-event #bottom { visibility:hidden; }

/* calendar icon on home page */
#next-concert:after {
  content: "";
  display: table;
  clear: both;
}
#next-concert h1 {
    margin-top: 0;
}
time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  float: left;
  width: 7em;
  height: 7em;
  margin: 0 1em 1em 0;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
}
time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}
time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}
time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}
time.icon span
{
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}