@import url("./ibadges.css");

/*  Note:  If Firefox doesn't reload the CSS, do shift-ctrl-R to force it.  */

body 
{
  color: #000000;
  background-color: #ffffff;
}

li 
{
  margin-top: .1em;
  margin-bottom: .7em;
}

.footer
{
  margin-bottom: 2em;
  border-top:       .1em solid #b3b3ff;
}

.right-align
{
  text-align: right;
}

/* buttons */

.button-on
{
  font-size: 1.1em;
  background-color: #e6e6ff;
}

.button-back
{
  font-size: 1.1em;
  background-color: #eeeeff;
}

/* details */

div.detail-set
{
  margin-top:    1.5em;
  margin-bottom: 1.5em;
}

p.detail-question, p.radio-line
{
  margin-top:    .2em;
  margin-bottom: .2em; 
}

p.radio-line
{
  margin-left:    1em; /* indented */
}

/* catalogue display */

.itemset, .subheader, .end-section, .set, .tip, .ref-to-featured /* divs */
{
  border-top:       .1em solid #b3b3ff;
  padding-top:      .6em;
  padding-bottom:   .8em;
  margin-bottom:    .4em;
  margin-top:       .4em;
  background-color: #fff;
  clear: both;
}

.featured /* div */
{
  border-top:       .1em solid #b3b3ff;
  background-color: #edf;
  padding-bottom:    1em;
}

.featured .badgeset /* div */
{
  border:           .1em solid #b3b3ff;
  background-color: #eef;
  background-image: url(featuredbadge.jpg);
}

.feature-words
{
  color: #fff;
  margin-left: .2em;
  font-weight: bold;
  font-size: 120%;
  font-style: italic;
}

.subtlety
{
  color: red;
}

.subtler-header
{
  font-weight: normal;
}
/* note: colour of this is set further down, along with other things it's going to match */

.subheader, .priceheader
{
  font-weight: bold;
  font-size: 1.2em;
  color: purple;
  padding-top: .5em;
  padding-bottom: .5em;
}

.pricing-info, .badge-list /* div */
{
  border:        0.1em solid #ddd;
  padding-top:   0.6em;
  padding-bottom:0.8em;
  padding-left:  1em;
  padding-right: 1em;
  margin-bottom: 2em;
  clear: both;
}

.badge-list /* div */
{
  margin-top:    1.8em;
}

.pricing-info /* div */
{
  margin-top: .4em; /* other things create the margin here anyway */
}

.photo-and-colours
{
  margin-top: .5em;
  padding-bottom: 1em;
}

.badgephoto /* all standard badgephotos */
{
  width: 10em;
  float: left;
}

.badgephoto_designs /* just when $status is "choose designs", as in that case we don't want it to float left */
{
  width: 10em;
  margin-left: 3em;
  margin-top: .6em;
  margin-bottom: 1.2em;
}

label.colourbox
{
  display: inline-block;
  width: 9.6em;
  padding-left: .4em;
}

.colourboxes
{
  display: inline-block;
  width: 10em;
}

.amountbox
{
  width: 3em;
  text-align: center;
}

.bigname
{
  font-size: 110%;
}

label.ditch
{
  display: inline-block;
  width: 100%;
  padding-left: .4em;
  color: #779;
  border-width: 1px;
  padding-top: .6em;
  padding-bottom: .0em;
  margin-top: .3em;
}

.dimmed, .tip-title, .tip-text
{
  color: #669; /* bluey-grey */
}

.subtler-header 
{
  color: #99c; /* slightly lighter bluey-grey */
}

.tip-title
{
  margin-right: .2em;
}

.trashicon
{
  font-size: 200%;
}

/* misc special appearances */

.label-words /* used for things like "Your address:" when checking the whole order */
{
  font-style: italic;
  color: #779;
}

label.source
{
  display: inline-block;
  padding-left: .2em;
  padding-right: .3em;
  background-color: #e6e6ff;
  border-width: 1px;
  margin-right: .5em;
}

.alert
{
  font-weight: bold;
  font-size: 120%;
  color: #8800bb;
}

.warning
{
  border: .1em solid #ff4dd2; /* pink edge */
  clear: both;
  padding-left:   1em;
  padding-right:  1em;
  padding-bottom: 0.5em;
}

pre.email-copy
{
  color: #040;
}

/* steps of proceeding through ordering process */

.steps-done, .steps-notyet
{
  color: #99f;
}

.step-current
{
  color: #8800bb;
  font-weight: bold;
  font-size: 150%;
}

/* colours */

.colourbox
{
  padding-top: .4em;
  padding-bottom: .6em;
  margin: 0px;
}

.red
{
  background-color: #aa0024;
}

.neon-orange
{
  background-color: #ff820a;
}

.neon-yellow
{
  background-color: #e8ff18;
}

.neon-green
{
  background-color: #90ff18;
}

.kingfisher-blue
{
  background-color: #0894bb;
}

.lavender-blue

{
  background-color: #8285cd;
}

.vivid-purple

{
  background-color: #89369a;
}

.neon-pink
{
  background-color: #fc28ae;
}

.metallic-silver
{
  background-color: #f0f0f0;
}

.quasi-badge /* makes a circle with a black edge, which can then be coloured in by choice of another class as above */
{
  display: inline-block;
  width: .3em;
  height: .3em;
  border: .2em solid black;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  margin-right: .2em;
}

.quasi-zine /* makes a rectangle a bit like A5 - but not using this right now cos got font-awesome one instead */
{
  display: inline-block;
  width: .35em;
  height: .5em;
  border: .1em solid #aaa;
  margin-right: .2em;
}

.bzine-icon
{
  color: #a9f;
  font-size: 80%;
  margin-right: .4em;
}

.czine-icon
{
  color: orange;
  font-size: 80%;
  margin-right: .4em;
}