body {
  margin: auto;
  padding: 0;
  background: #CCCCCC url('/images/bg.png') repeat-x;
  font-family: Verdana, Arial;
  font-color: #000000;
  font-size: 100%; /* For IE, which should default to 16px. */
}
html>body {
  font-size: 16px; /* IE can’t read this. */
}
#container {
  margin: auto;
  font-size: 62.5%; /* 1em ~= 10px */
/*  min-width: 79em;
  max-width: 102.4em;*/
  width: 98.5em;
}
#inner-container {
  font-size: 1.2em;
}

h1, h2 {
  padding: 0.5em 0.5em 0.5em 0.5em;
/*  font-weight: bold;*/
}
h3 {
  padding: 0.5em;
/*  font-weight: bold;*/
}
h4 {
/*  font-weight: bold;*/
}
p {
  padding: 0.5em 0em 0.5em 0em;
  line-height: 1.6em;
  text-align: justify;
  vertical-align: top;
}
a {
  color: black;
}

ul {
  list-style: none;
}
ul li {
  line-height: 1.5em;
  background: white url('/images/dot-CC0000.gif') no-repeat 0em 0.9em;
  padding: 0.2em 0.2em 0.2em 1em;
}

ol {
  list-style: decimal; 
  margin-left: 2em;
}
ol li {
  line-height: 1.5em;
  padding: 0.2em;
}

.hr {
  clear: both;
  height: 0;
  border-bottom: 1px solid #CCCCCC;
}
.hr hr {
  display: none;
}
.clear {
  clear: both;
  height: 0;
}

/*********
* Header *
*********/

#header {
  margin: 0;
  height: 10em;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
}
#top {
  height: 1.2em; /* Necessary to have top bar correct height as content is floated */
  line-height: 1.2em; /* Necessary to prevent bottom being chopped of characters in top bar */
  background: #0066CC url('/images/top.png');
  color: #FFFFFF;
  padding: 0.5em 1em 0.5em 1em;
}
#top a {
  color: #FFFFFF;
  text-decoration: none;
}
#top a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}
#header-inner {
  padding: 0.5em 1em 0em 0em;
}
#promo {
  float: left;
}
#userbar {
  float: right;
}
#userbar div {
  display: inline;
}

#logo {
  float: left;
/*  width: 24em;
  height: 7em;*/
}
#logo img {
  width: 284px;
  height: 82px;
  display: none;
}
#logo a {
  background: url('/images/musicming_logo.png') no-repeat;
  position: absolute;
  top: 2.5em;
  padding-top: 4.5em;
  padding-right: 7em;
  padding-bottom: 1em;
  padding-left: 2em;
  text-decoration: none;
  font-weight: bold;
}
#logo p {
}

#search {
  float: right;
}
#searchbar {
  float: right;
  display: inline;
}
#searchbar p {
  float: left;
  height: 4em;
  padding: 0.5em;
}
#searchbar input {
  margin-top: 0.4em;
}
#searchbar label {
  font-weight: bold;
}
#searchbutton {
  display: block;
  margin-top: 1.4em; 
}

/**********
* Content *
**********/

/* All content under header is in #content */
#content {
}
#content h1 {
  background: #0066CC url('/images/top.png');
  color: #FFFFFF;
}
#content h2 {
  background: #0066CC url('/images/top.png');
  color: #FFFFFF;
}

/* Model attributes */
.model {
  text-align: top;
}
.model .label {
/*  float: left;
  clear: left;*/
  display: inline-block;
  width: 17em;
  vertical-align: top;
}
.model .input, .model .value {
  display: inline-block;
  line-height: 1.3em;
/*  width: 30em;*/ /* Can't give this a width otherwise it screws with the listing profile page layout */
}
.model div {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  min-height: 1.3em;
}
.model div p.tips {
  display: inline-block;
  width: 15em;
}

/* Records are listed in .item regardless of where they appear in the content (e.g. #main or #side) */
.item {
  padding: 0.5em;
  margin: 0.5em 0em 0.5em 0em;
  border: 1px solid #CCCCCC;
}
.item p {
  padding: 0.1em;
}

/* Actions appear in each .item and on a listing's profile page */
.actions {
  color: #0066CC;
  clear: left;
  margin-top: 1em;
  font-size: 0.9em;
}
.actions form {
  display: inline;
}
.actions form div {
  display: inline; /* Rails outputs a div inside the form! */
}
.actions a {
  color: #0066CC;
  text-decoration: none;
}
.actions a:hover {
  text-decoration: underline;
}

/* box and boxcontent used in #menu and #side */
.box {
  background: white;
  border: 1px solid #CCCCCC;
  margin-top: 1em;
}
.box .boxcontent {
  padding: 0.5em 1em 0.5em 1em;
}

/*.private {
  color: #009900;
}
.actions a.private {
  color: #009900;
}*/

/*******
* Menu *
*******/

#menu {
  float: right;
  width: 16.8em; /* Same as #side width */
}
#menu ul {
  list-style: none;
}
#menu ul li {
  background: none;
  padding: 0.2em;
}
#menu ul li a {
  width: 100%;
  text-decoration: none;
}
#menu ul li a:hover {
  text-decoration: underline;
  color: #000000;
}
#menu ul li a:active {
  text-decoration: underline;
}

/*******
* Main *
*******/

#main {
  float: left; /* Necessary for when there is no menu */
  width: 64.4em;
}

#main table tr td {
  padding: 0.2em 0.5em 0.2em 0.2em;
  vertical-align: top;
}
#main a {
  color: #0066CC;
}

#flash {
  clear: both;
}
#flash .flash-inner {
  margin: 1em 1em 0em 1em;
  padding: 0em 0.5em 0em 0.5em;
}
#flash .notice {
  border: 1px solid #009900;
  color: #009900;
}
#flash .error {
  border: 1px solid #FF3300;
  color: #FF3300;
}
#flash .error a {
  color: #FF3300;
}

.page {
  background: white;
  border: 1px solid #CCCCCC;
  margin-top: 1em;
}

.pagecontent {
  padding: 1em;
}

.quickop {
  margin-bottom: 0.8em;
}

/* TODO: Can get rid of this? */
.inner-pagecontent {
/*  padding: 0em;*/
}

.new {
  margin: 0.5em 0em 0.5em 0em;
}

.label {
  color: #666666;
}

/**********
* Account *
**********/

/* NOTE: When users account page doesn't use p for layout, remove these next 6 lines */
#main.users-show p {
  padding: 0.1em;
}
#main.users-show .flash-inner p {
  padding: 0.5em;
}

/***********
* Listings *
***********/

#main.listings-index .instruction a {
  font-weight: bold;
  color: #CC0000;
}

#main.listings-show .image {
  float: left;
}
#main.listings-show .image img {
  border: 1px solid #CCCCCC;
}
#main.listings-show .model {
  float: left;
  margin-left: 0.5em;
}
#main.listings-show .model .label {
  width: 10em;
  float: left; /* Necessary to have label hang at top of value */
  clear: left;
  line-height: 1.6em;
}
#main.listings-show .model .value {
  float: left;
  line-height: 1.6em;
}
#main.listings-show .actions {
  padding: 0.5em;
}

#main.listings-edit_type .instruction,
#main.listings-update_type .instruction {
  margin-bottom: 1em;
}
#main.listings-edit_type .instruction a,
#main.listings-update_type .instruction a {
  font-weight: bold;
  color: #CC0000;
}

#notice-deactivated {
  /*border: 1px solid #009900;*/
  color: #009900;
}
#notice-suspended {
  border: 1px solid #FF3300;
  color: #FF3300;
}

#descriptions h2 {
  background: white url('/images/menu-hover.png');
  clear: both;
  margin-top: 1em;
}
#descriptions p.description {
  clear: both;
}

ul.bullets {
  float: left; /* Float necessary to have list surround its items */
  padding: 0.5em;
  list-style: none; /* IE6 doesn't show bullet if li is floated, so we have to use a backgroun image instead */
}
ul.bullets li {
  width: 29em; /* Width needs to be set to allow items to line up properly when next to one another */
  /*background: white url('/images/dot.gif') no-repeat 0em 0.7em;*/
  background: white url('/images/dot-CC0000.gif') no-repeat 0em 0.7em;
}
ul.bullets li.odd {
  float: left;
}
ul.bullets li.even {
  float: left;
}

.concise-listing {
  clear: both;
}
.concise-listing h3 {
  float: left;
  padding-top: 0em;
  padding-left: 0em;
  font-size: 1.2em; /* Tone down listing titles in IE (later using child selector to increase size in other browsers) as otherwise it makes them too big */
}
body > .concise-listing h3 {
  font-size: 1.3em; /* Set listing titles to their proper size (see note above about IE) */
}
.concise-listing h3 a {
  color: #0066CC;
}
.concise-listing p {
}
.concise-listing .categories {
  color: #CC0000;
  line-height: 1em; /* Required to align categories with h3 (also for logo, see below) */
  height: 1.9em; /* Required to push logo down and allow it to float all the way to the left. Particularly in IE6 */
  padding-top: 0.3em;
  font-size: 0.9em;
}
.concise-listing .categories .label {
  display: none;
}
.concise-listing .image{
  float: left;
  margin: 0em 0.5em 0.5em 0em;
}
.concise-listing .image img {
  border: 1px solid #CCCCCC;
}
.concise-listing .telephone {
  display: inline;
  font-size: 0.9em;
  font-weight: bold;
}
.concise-listing .full-address {
  display: inline;
  color: #666666;
  font-size: 0.9em;
}
.concise-listing .separator {
  color: #333333;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-weight: normal;
}
.concise-listing .description {
  padding-top: 0.5em;
}
.concise-listing .manage a:hover {
  text-decoration: underline;
}
.concise-listing ul.bullets {
  width: 50.5em; /* Total width of ul.bullets must be small enough to allow it to float next to the listing's image */
}
.concise-listing ul.bullets li {
  width: 23.8em; /* Width needs to be set to allow items to line up properly when next to one another */
}

#map-canvas {
  width: 20em;
  height: 20em;
  float: right;
  border: 1px solid #CCCCCC;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
}

#listings-menu {
  clear: both;
  margin: 0;
/*  width: 52.6em; /* Same as main */
  height: 2em;
  background: white url('/images/menu-hover.png');
}
#listings-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#listings-menu ul li {
  background: none;
  float: left;
  padding: 0.3em;
}
#listings-menu ul li:hover {
  background: #FFFFFF;
}
#listings-menu ul li.current {
  background: #FFFFFF;
}
#listings-menu ul li a {
  line-height: 1.45em;
  padding: 1em;
  text-decoration: none;
  color: #FFFFFF;
}
#listings-menu ul li a:hover {
  text-decoration: underline;
  color: #000000;
}
#listings-menu ul li a:active {
  text-decoration: underline;
}
#listings-menu ul li.current a {
  color: #000000;
}

/*************
* Categories *
*************/

#categories {
}

/**********
* Adverts *
**********/

.advert h3 {
  float: left;
  padding-left: 0em;
}
.advert p {
  clear: left;
  padding: 0;
}
.advert .body img {
  clear: none;
  float: right;
  border: 1px solid #CCCCCC;
  margin-left: 0.5em;
}
#adverts h2 {
  background: white url('/images/menu-hover.png');
}

div.adverts-new .model .input, div.adverts-new.model .value,
div.adverts-create .model .input, div.adverts-create.model .value,
div.adverts-edit .model .input, div.adverts-edit.model .value,
div.adverts-update .model .input, div.adverts-update.model .value {
  width: 30em; /* Necessary to line up tips */
}


/**********
* Watches *
**********/

/*
#main.watches-index .item {
  border: none;
}
*/
#main.watches-index .concise-listing h3 {
/*  background: #FFFFFF;
  color: #000000;
  font-weight: bold;
  float: left;
  padding-right: 1em;*/
}

/*******
* Maps *
*******/

#main.maps-edit div#map-canvas {
  margin-top: 0.8em;
}

/*********
* Search *
*********/

#main.search-index h1 {
  display: none;
}
#main.search-index h2 {
  clear: both;
}
#main.search-index h3 {
/*  background: #FFFFFF;
  color: #000000;
  font-weight: bold;
  float: left;
  padding-right: 1em;*/
}

.filter h3 {
  padding-left: 0em;
}
.filter .button {
  padding-top: 0.5em;
}

/*******
* Blog *
*******/

#main.blog_posts-show .comment_image {
  float: left;
  margin: 0.5em;
}

/********
* Pages *
********/

#main.pages-listings h2, #main.pages-standard_listings h2, #main.pages-priority_listings h2, #main.pages-sponsored_listings h2 {
  background: white;
  color: #CC0000;
}
#main.pages-listings .listing-info {
  float: left;
  width: 19.6em;
  height: 32em; /* So we can have a consistent border height between parts of the page */
  padding-left: 1em;
  margin: 1em 0em 1em 0em;
}
#main.pages-listings #standard-listing-info {
}
#main.pages-listings #priority-listing-info {
  border-left: 1px solid #CCCCCC;
}
#main.pages-listings #sponsored-listing-info {
  border-left: 1px solid #CCCCCC;
}
#main.pages-standard_listings hr,
#main.pages-priority_listings hr,
#main.pages-sponsored_listings hr {
  clear: both;
  height: 1px;
  background: none;
  border: none;
  border-top: 1px solid #CCCCCC;
}
#main.pages-standard_listings div.listings-image,
#main.pages-priority_listings div.listings-image,
#main.pages-sponsored_listings div.listings-image {
  float: left;
  margin: 1em 0em 1em 1em;
}
#main.pages-standard_listings div.listings-image img,
#main.pages-priority_listings div.listings-image img,
#main.pages-sponsored_listings div.listings-image img {
  display: none;
}
#main.pages-standard_listings div.listings-image {
  width: 176px;
  height: 280px;
  background-image: url('/images/listings/Standard_Ad_free.png');
}
#main.pages-priority_listings div#priority-listing-info div.listings-image {
  width: 175px;
  height: 317px;
  background-image: url('/images/listings/Priority_Ad_money.png');
}
#main.pages-priority_listings div#premium-priority-listing-info div.listings-image {
  width: 188px;
  height: 314px;
  background-image: url('/images/listings/Premium_Ad_money.png');
}
#main.pages-sponsored_listings div.listings-image {
  width: 178px;
  height: 315px;
  background-image: url('/images/listings/Sponsored_Ad_money.png');
}
#main.pages-standard_listings div.listings-image p,
#main.pages-priority_listings div.listings-image p,
#main.pages-sponsored_listings div.listings-image p {
  text-align: center;
}
#main.pages-standard_listings div.listings-image p {
  padding-top: 19em;
}
#main.pages-priority_listings div#priority-listing-info div.listings-image p {
  padding-top: 22em;
}
#main.pages-priority_listings div#premium-priority-listing-info div.listings-image p {
  padding-top: 21.5em;
}
#main.pages-sponsored_listings div.listings-image p {
  padding-top: 22em;
}
#main.pages-standard_listings .desc,
#main.pages-priority_listings .desc,
#main.pages-sponsored_listings .desc {
  float: left;
  width: 44.3em;
  padding-left: 1em;
  margin: 0.5em 0em 2em 1em;
}
#main.pages-priority_listings #premium-priority-listing-info {
  clear: left;
  border-top: 1px solid #CCCCCC;
}
#main.pages-priority_listings #premium-priority-listing-info img {
  margin-top: 2em;
}
#main.pages-priority_listings #premium-priority-listing-info .desc {
  margin-top: 1.5em;
  padding-left: 0.16em; /* The premium priority image is wider than the others */
}

/*********
* Errors *
*********/

.fieldWithErrors {
  display: inline;
}
.fieldWithErrors input, .fieldWithErrors textarea, .fieldWithErrors select {
  border: 1px solid red;
  padding: 0.2em;
}
.fieldWithErrors label {
  color: red;
}

#errorExplanation {
  margin: 0;
  border: 1px solid red;
  background-color: #f0f0f0;
  margin-bottom: 0.8em;
  padding: 0em 0.5em 0em 0.5em;
}

#errorExplanation h2 {
  display: none;
  background: none;
  text-align: left;
  font-weight: bold;
  margin: 0;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
}
#errorExplanation ul {
  margin: 0em 0.5em 0.5em 0.5em;
}
#errorExplanation ul li {
  list-style: disc;
  background: none;
  padding: 0.2em;
  margin-left: 1em;
}

/**********
* Sidebar *
***********/

#side {
  float: right;
  clear: right; /* Necessary for when menu is longer than main */
  width: 16.8em;
}
#side p {
  text-align: left;
}

#side #login ul li {
  background: none;
  padding: 0.2em;
}

#side .join-us h2 {
  display: none;
}
#side .join-title {
  font-size: 1.6em;
  line-height: 1em;
  font-weight: bold;
  padding-bottom: 0em;
}
#side .join-button {
}
#side .join-text p {
  font-size: 0.9em;
  line-height: 1em;
}

#promotions h3 {
  padding-left: 0em;
  padding-top: 0em;
  font-size: 1em;
  line-height: 1.2em;
}
#promotions .boxcontent {
  padding: 0em 0.5em 0em 0.5em;
}
#promotions .item {
}
#promotions .boxcontent .item .image {
  margin: 0em 0em 0.5em 0em;
}
#promotions .boxcontent .item .image img {
  border: 1px solid #CCCCCC;
}
#promotions .boxcontent .item .body {
  font-size: 0.9em;
}