﻿/* sonic boom styles */
body {
	font: 76%/150% 	'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  width: 950px;
	margin: 0 auto;
	padding:20px 0;
	background:#FFFFFF;
}

.topten img {width:450px;}

.right {float:right;}
.left {float:left;}
.red, .error {color:#FF0000;}

.clearboth {clear:both;}

.shortInput {width:200px;}
.longInput {width:300px;}
::-webkit-input-placeholder { color:gray; }
:-moz-placeholder { color:gray; }

/* mainly for the checkout page */
legend {color:#990000;font-weight:bold;font-variant:small-caps;padding:0 4px;}

form {margin:0;padding:0;}
fieldset {border:1px solid gray;width:400px;padding:8px;
          border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;}

p {margin:0 0 0.8em 0;padding:0;}
a {color:#0044CC;}
a:hover {color:#0066CC;}

ul {margin:0;padding:0;}
ul li {list-style-type: none;}
ul.reg {
    margin-left:50px;
    margin-bottom:10px;
}
.reg li {list-style-type:square;}

h1, h2, h3 {
  color: #333333;
  font-family: 'Lucida Sans Unicode',sans-serif;
  font-weight:normal;
  font-variant:small-caps;
  text-transform:capitalize;
}

h1,  h3 {
  color: #333333;
  font-family: 'Lucida Sans Unicode',sans-serif;
  font-weight:normal;
  font-variant:small-caps;
  text-transform:capitalize;
}

.sorry h2 {
  font-style: italic;
  color: #333333;
  font-family: sans-serif;
  font-weight:bold;
  font-variant:normal;
  text-transform:none;
  margin-top:40px;
}

.sorry p {width:300px;border-bottom:1px solid #333333;}
.sorry ul {margin-bottom:20px;}
.sorry ul li {list-style-type:disc;margin-left:20px;}


h1, h2, h3, h4 {margin:0 0 20px 0;}
h1 {font-size:1.8em;}
h2, h3 {font-size:1.6em;}
h5 {margin:0;padding:0;font-size:1em;}

hr {height:1px;color:#000000;}

dd {margin-bottom:10px;}

/* micro clearfix */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* catalog and various other stripes */
.stripe {background:#EDF3FE;}

/* SHOPPING CART */
.cart {padding-right:8px;}
.checkoutcart {margin:2px 0;text-align:right;}

/* user page */
.nodisplay {display:none;}
noscript .notes {display:block;}


/* OVERRIDES
------------------------------------------------------- */

/* needs to be .border instead */
.instore img,
.tshirts img, 
.world img, 
.customer img {border:1px solid #000000;}

.orders fieldset {  /* otherwise they bunch up at > 800x600 */
    clear:both;
    max-width:600px;
    width:auto;
    margin-bottom:10px;
}


/* SPLASH
------------------------------------------------------- */
.nav .menulist {background:#0000b3;line-height:2em;}
.viewport {padding:6px 0px;}

#cars {clear:left;background:black;height:61px;}
#carsa {float:left;width:672px;}
#carsb {float:right;width:68px;}

#content {
  padding:10px;
  border:1px solid #F1F1F1;
  background:#FFFFFF;
}

#content h3 {border-bottom:1px solid #999999;padding-bottom:4px;}

body#main #content {overflow:auto;}

body#main #leftbar {
  float:left;
  width:220px;
  background:#fffde9;
  border:1px solid #999999;
  padding:4px;
  margin-right:10px;
}

body#main #rightbar {
  float: right;
  width: 227px;
  background: #ECEAEB;
  border: 1px solid black;
  font-size: 0.9em;
  margin-left: 10px;

  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
}

#rightbar h3:first-child {margin-top:0;border-top:0;}
#rightbar h3 {
  margin:8px 0;
  padding:4px;
  color:black;
  border-top:1px solid black;
  border-bottom:1px dotted black;
  background:darkgray;
}

#rightbar dt {font-weight:bold;}
#rightbar dd {margin:0 0 10px 0;}
#rightbar dl {margin-top:0px;}

#rightbar dt, #rightbar dd, #rightbar p {padding:0 4px;}
#rightbar input[type=submit] {margin-left:8px;}
#ea {width:100px;}
body#main .artist {font-weight:bold;text-transform:uppercase;}
body#main .cap {text-transform:capitalize;}

.up {padding:10px 0;}
.up img {
  float:left;
  width:180px;
  margin-right:10px;
}
/* keep the first .up at 10px instead of 20 */
#content h3:first-child {margin-bottom:10px;}

#worldhome {
  float:left;
  margin-right:12px;
  font-size:xx-small;
  color:#9E9E9E;	
 }
#worldhome p {max-width:200px;}
#worldhome img {border:1px solid #444;}
.menulist ul li {
	display: inline;
	margin-right:5px;
}

.logos {
	border-top:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #999;
	background:#fffde9;
}

#sonicboomlogo {
  float:left;
  margin:4px 0 4px 8px;
}

.nav .menulist li {
  text-transform:capitalize;
  font-variant:small-caps;
  font-weight:bold;
  display:inline;
  list-style-type:none; 
  margin-right:5px;
  margin-left:5px;
  color:#FFFFFF;
}

.nav .menulist li a {color:#FFFFFF;text-decoration:none;}
.nav .menulist li a:visited {color:#FFFFFF;}
.nav .menulist li a:active, 
.nav .menulist li a:hover {color:#CCCCCC;}

.friends a {margin-right:10px;}

.vcard p {margin:0;padding:0;}


/* INPUT
------------------------------------------------------- */
#orders input, #orders input:invalid {box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;}

#orders input {border:1px solid grey;}
#orders input:invalid { border:1px solid red;}

/* BUTTONS
------------------------------------------------------- */

.top100 li a, .button, button {
  cursor:pointer;
  padding:4px 8px;
  text-decoration:none;
  color:black;
  white-space:nowrap;
  background:#E3E3E3;
  background: -moz-linear-gradient(center top , #F9F9F9, #E3E3E3) repeat scroll 0 0 transparent;
  border: 1px solid #999999;
  border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-khtml-border-radius:2px;
}

.top100 li a:hover, .button:hover, button:hover {
  background:#bebebe;
  color:black;
}

.pressed, .top100 li a:hover, .button a:hover {background:#bdbdbd;}
.top100 li a:active, .button a:active {background:#9e9e9e;}
.top100 li a:visited.button, a:visited.button  {color:black;}

.review-body > .button {margin-left:1em;}

.giftCertButton {margin-right:20px;}

.button.small, button.small {padding:2px 4px;margin-top:18px;}



/* REVIEWS
------------------------------------------------------- */
.review {margin-bottom:20px;}
.review img {width:100px;margin-right:12px;}
.review-body {margin-left:120px;}

/* INSTORES */
#review #content img {
  margin:0 10px 10px 0;
}
	
.thumbs {margin-right:10px;}
.thumbs li {margin-bottom:10px;} 

.instore dd {
  display:inline;
  margin:0;
}

.instore dd img {margin-right:10px;}

.moreShirts a {display:inline;}

/* CATALOG
------------------------------------------------------- */

.hT {display:none;}
.sT {display:block;}

#refine {float:left;margin-top:10px;}

#searchfor input, #refine label, #refine input {float:left;}
#refine input {margin-right:14px;}

/* Search boxes above catalog table */
#searchcatalog {
    float:left;
    margin-right:32px;
    width:430px;        /* ie5-mac */
}

.notes {display:inline-block;}

/* COLUMNS
------------------------------------------------------- */
.artist, .title {width:20em;text-transform:uppercase;}
.format {width:5em;text-transform:uppercase;}
.released {width:7em;}
.price {width:5em;}
.add {width:7em;text-transform:capitalize;}

tfoot td {padding:18px 0}

fieldset.shop {
  width:100%;
  border:0;   
}

.selectquantity {
  width:50px;
  text-align:right;
}

.catalogresults table {
  clear:both;     /* bugfix: ff/safari */
  border-collapse:collapse;
  width:100%;
}

.catalogresults table thead {
  text-align:center;
  font-variant:small-caps;
  border-bottom:1px solid #D9D9D9;
}

.catalogresults table tbody tr td {
  font-family: "lucida grande", sans-serif;
  font-size:10px;
  padding: 3px 8px;
  border-left: 1px solid #D9D9D9;
  border-right: 1px solid #D9D9D9;
}

.catalogresults table tfoot tr td {
 	border-top:1px solid #D9D9D9;   
}

/* required for user */
.r {
	color:#000000;
	font-weight:bold;
	background:#EFEFEF;
}

/* todo: rename to mailtype or something */
.radios {
    border:1px dotted #000000;
    background:#EEEEEE;
    padding:4px;
     display: inline-block;
     margin-bottom: 8px;
}

.radios li {
    margin-bottom:8px;
}

/* totals on the catalog */
.total {
	text-align:right;
	padding-right:10px;
}

#grandtotal	{	/* should be checkout id */
	font-weight:bold;
}

/* GIFT CERTIFICATES
------------------------------------------------------- */

.gift dt {
    float:left;
    width:16em;
    padding-right:16px;
    line-height:18px;
    text-align:right;
    font-weight:bold;
  }

.gift dd input {border:1px solid #CDCDCD;}


/* CONTACTS
------------------------------------------------------- */

.f-c dt {font-weight:bold;width:150px;}
.f-c dd {margin-left:0;}
.f-c fieldset {width:auto;border:inherit;}

/* EXCLUSIVES
------------------------------------------------------- */
.exclusives img {
    border:1px solid black;
    margin:4px 0 4px 0;
}

/* TSHIRTS
------------------------------------------------------- */
#tshirtnotes { margin: 1.12em 0 }
#tshirtnotes {margin-left:40px;}
#tshirtnotes li {list-style:square;}

.floatedRow li {
	display: inline-block;
	vertical-align:top;
	margin: 0 8px 16px 8px;
}
.floatedRow p {max-width:200px;}
.floatedRow .doubleWide {width:360px;}

.details {
  float:left;
  width:400px;
  margin-left:55px;
}

.detailImg {
  float:left;
  max-width:350px;
}

/* VISIT
------------------------------------------------------- */
.info {float:left;margin-right:16px;}
.visit .address p {margin:0;}
.hours p {margin:10px 0 0 0;}
.hours dd {margin-left:0;}
.visit dl {margin:0;}

/* visit / instore */
.thumbs {
  width:110px;
  float:left;
  list-style:none;
  margin-right:6px;
}
.thumbs li {
  cursor:pointer; 
  margin-bottom:8px; 
} 


/* EVENTS
------------------------------------------------------- */
.events .eventpic {float:left;margin-right:20px;}
.events .eventdesc dd {margin:0 0 6px 0;padding:0;}
.events .eventdesc dt {font-weight:bold;margin-top:20px;}

/* CATALOG */
#checkouttable {width:100%;}

/* Instores */
#inst {max-width:800px;}

/* top 100 : mimics button */
.top100 li a {margin-left:10px;padding:2px 4px;}
.top100 li {line-height:26px;}
