/* Styles for Ray site on Drupal
 * TJH 2008-02-20
 */
  
body {
  margin: 0;
  padding: 0;
  color: #000;
  /* background-color: #E6F6FF; */
  font: 90% Arial, Verdana, sans-serif;
 }
 
#gustav-holst-the-planets-suite-new-light-on-a-famous-work,
#gustav-holst-and-india,
#folksongs-of-england-wales-scotland-and-ireland-for-easy-piano,
#gustav-holst-sheet-music,
#john-foulds-sheet-music,
#sky-dance-press {
  background-color: #C4E2FE;
}

h1, h2, h3 {
  margin: 0.5em 0 0.5em 0;
  color: #4B0082;
}

h1 {
  margin-top: 0;
  font-size: 200%;
  font-weight: bold;
}

/* Centre content headings on front page only */
body.front div#content h1 {
  text-align: center;
}

h2 {
  margin: 1em 0 0.5em 0;
  font-size: 160%;
  font-weight: normal;
}

.clearboth  {
  clear: both;  /* needed on Folksongs page, at least */
}

h3 {
  font-size: 100%;
  font-weight: bold;
  margin: 1em 0 1em 0;
}
h1 a, h1 a:link, h1 a:hover,
h2 a, h2 a:link, h2 a:hover,
h3 a, h3 a:link, h3 a:hover {
  text-decoration: none;
}
p {
  margin: 0.5em 0 1em 0;
	line-height: 1.2em;
}

p.article-separator {
	border-top: 1px solid #4B0082;
	margin: 30px auto;
	width: 60%;
}
p.comment {
	font-size: smaller;
	font-style: italic;
}

#header  {
  color: #FFC;
  background: #4B0082;
  padding: 0.5em 1em;
}
#header h1 {
  margin: 0;
  padding: 0;
  /* font-family: 'Viner Hand ITC', serif; */
}
#header a {
  color: #FFC;
  text-decoration: none;
}
#header a:hover {
  zzborder: 1px dotted white;
  zzmargin: -1px;
  text-decoration: none;
}

.float-left {
  float: left;
  text-align: left;
}
.img-left {
  float: left;
  margin: 5px 10px 5px 0;
  border: 1px solid #4B0082;
}
.img-right {
  float: right;
  margin: 5px 0 5px 10px;
  border: 1px solid #4B0082;
}

img {
  border: 1px solid #4B0082;
	max-width: 100%;
  height: auto;
}
img.auto-width {
	max-width: 100%;
}

/* Display thumbnail images only in teasers, and other sizes only in pages */
.teaser .image-small,
.teaser .image-preview,
.teaser .image-original,
.image-thumbnail {
  display: none;
}

.teaser .image-thumbnail {
  display: block;
}

/* disable img_assist's clearing, which can push content below the floated sidebar */
div.image-clear {
  clear: none;
}

/* Style nodes of type story as news items */
body.front div.node.story {
  margin: 0 1em 2em 1em;
  border: 2px solid #4B0082;
  padding: 1em;
}
.composition.odd,
body.front div.node.story.odd {
  background-color: #ffe;
}
.composition.even,
body.front div.node.story.even {
  background-color: #ffa;
}

#footer-wrapper {
  clear: both;
}
#footer {
  margin-top: 5px;
  padding: 5px;
  font-size: 0.75em;
  color: white;
  background-color: #4B0082;
}
#footer p {
  margin: 0;
}
#footer .copyright {
  float: left;
}
#footer .powered {
  text-align: right;
}

#footer a {
  color: #6495ED;
}

#container {
  position: relative; /* Make it a containing block for absolute positioning */
  margin: 5px 13.5em 0 11.3em;
  padding: 0 0.4em;
  border-left: solid 1px #4B0082;
  border-right: solid 1px #4B0082;
}
#sidebar-left {
  float: left;
  width: 10.5em;
  margin-left: -11.4em;
  text-align: left;
}
#sidebar-right {
  position: absolute;
  right: -13.5em;
  padding: 0 0.3em 0 0;
  width: 12.7em;
  text-align: center;
  line-height: 1.5em;
}
#sidebar-right p img  {
  zzfont-size: 1.25em;  /* get back to standard font-size so that width is right */
  width: 12.7em;
  border: none;
}
#sidebar-right p {
  zzfont-size: 0.8em;
}
#main {
  padding-top: 10px;
}
#main-squeeze {
  float: left; /* Mysteriously, this makes clearing in this div respect only floats within the div, and not the sidebar */
  width: 100%; /* Makes sure that centred pages (eg SDP) are centred in the column */
}
.node {
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.content {
  position: relative; /* Make it a containing block for absolute positioning */
}

ul {
  margin-top: 0;
}
li {
  margin: 0.4em 0;
}

.search-info {
  display: none;
}

/* Menu */
ul.menu  {
  padding: 0;
  margin: 0;	}
ul.menu li {
  list-style-image: none;
  list-style-type: none;
  padding: 0;
  margin: 0.25em 0;
  text-decoration: none;
  }
ul.menu a {
  display: block;
  padding: 0.3em;
  color: #FFC;
  background-color: #6495ED;
  text-decoration: none;
}
ul.menu a.active,
ul.menu a:hover {
  color: white;
  background-color: #4B0082;
  text-decoration: none;
}
ul.menu a:active {
  color: #F00;
  border: none;
  margin: 0;
}

/*Sub-menu */
ul.menu ul.menu li {
  list-style: disc inside;
  margin: 0 0.5em;
  /* font-family: Georgia, serif; */
  text-decoration: none;
}
ul.menu ul.menu a {
  display: inline;
  margin: 0;
  padding: 0;
  color: #4B0082;
  background-color: white;
  font-size: 0.8em;
  font-weight: normal;
}

ul.menu ul.menu .active,
ul.menu ul.menu a:hover {
  color: white;
  background-color: #4B0082; 
}
ul.menu ul.menu a:active {
  color: #F00;
}

q {
  quotes: "\201C" "\201D";	/* IE ignores this */
  font-weight: bold;
  /* Italic font Makes IE6 screw up the layout - some content boxes get too big .
  Fix is to add overflow:visible to containing block.
  http://www.positioniseverything.net/explorer/italicbug-ie.html */
}
q:before { content: open-quote; }
q:after { content: close-quote; }
cite {
  font-style: italic;
}

.skydancelogo {
  /* font-family: 'Viner Hand ITC', serif; */
  font-size: larger;
  color: blue;
}

#sidebar-right .skydancelogo a {
  text-decoration: none;
}

body.front div#page {
  /* Give front page a cloudy background  */
  background: url(cloud-10i.jpg) no-repeat top center;
	background-size: cover;
}
body.front div#content-content {
  /* Push Welcome node down the page */
	margin-top: 5em;
}
body#sky-dance-press #content {
  /* Give page a cloudy background  */
  background: url(cloud-10i.jpg) no-repeat top center;
  padding: 40px 0 20px 0;
  margin: 10px 20px 20px 20px;
}
body#sky-dance-press #content div.content {
  /* Make page text slightly larger */
  font-size: 110%;
  text-align: center;
}
body#sky-dance-press .node-form {
  /* override image background on editing form */
  background-color: #FFC;
}
body#sky-dance-press #content h1 {
  /* font-family: 'Viner Hand ITC', serif; */
  font-size: 250%;
  text-align: center;
  color: #6495ED;
}

/* Contact page */
/* Don't show the category list - it's the default if we haven't used Advanced Contacts*/
#edit-cid-wrapper {
  display: none;
}


/* Compositions page */
.instrument-group {
  margin-bottom: 20px;
}
.instrument-group h2 {
  margin: 0;
  padding: 0;
  line-height: normal;
  /* font-family: Georgia, serif; */
  text-align: center;
  color: #ffc;
  background-color: #4b0082;
  font-size: 160%;
  font-weight: normal;
}
.instrument-group h2 a {
  color: #ffc;
  text-decoration: none;
}

.instrument-group h3 a {
  color: #4b0082;
  text-decoration: none;
}

/* Composition node */
.composition {
  padding: 0.5em 5px;
  border-bottom: 1px solid #4b0082;
}
.composition h3 {
  margin: 0.5em 0 0.5em 0;
  font-size: 135%;
  font-weight: normal;
}
.composition p {
  margin: 0.5em 0;
}
.composition-comment img {
  margin-right: 1em;
  float: left;
}
.composition-comment:after { /* clearfix */
  content: "";
  display: table;
  clear: both;
}
/*
.comp-notes p {
  font-size: smaller;
}
*/
.composition-comment .comp-notes p {
  font-size: 0.9rem;
}
.comp-listen {
  font-size: smaller;
  margin: 1em 0 0.5em 0;
}
.comp-listen audio {
  position: relative;
  top: 0.4em;
  left: 0.4em;
  margin-top: 0.5em;
}
.field-price {
  margin-right: 0.2em;
  font-size: larger;
  font-weight: bold;
}

.comp-shopping {
  float: right;
  margin: 0.7em 0 0 3em;
  width: 14em;
  text-align: right;
  line-height: 1.5em;
}

/* Buying buttons and Shopping basket */
body.noshopping .forshopping {
  display: none;
}

/* Shopping toggle in navigation menu */
#shoppingtoggle.shopping {
  color: black;
  background-color: #0C6;
}
#shoppingtoggle.noshopping {
  color: black;
  background-color: red;
}
div.warning {
  margin: 30px;
  background-color: orange;
  font-weight: bold;
  font-size: larger;
  border: 5px solid red;
}

/* Ray's shopping basket block */
#raybasket  {
  margin: 15px 0 20px 3px;
}
#raybasket a {
  background: #0C6 url(images/cart-full.png) no-repeat left;
  padding: 5px 5px 5px 20px;
}

/* Buy buttons */
.comp-button a {
  padding: 2px 8px;
  background-color: #CCC;
}

input#edit-checkout,  /* Checkout button on basket page */
input#edit-continue,  /* Review order button on checkout page */
table.order-review-table input#edit-submit /* Submit order button on review pages (PayPal and Cheque) */
{
  padding: 2px 8px;
  background-color: #0C6;
}

.comp-button a,
#raybasket a {
  border: 2px outset silver;
  text-decoration: none;
  color: black;
}

/* Adjust alignment of buttons below shopping basket */
#continue-shopping-button {
  margin-top: 0.1em;
  margin-bottom: 0.2em;
}

.comp-button a:hover,
#raybasket a:hover,
input#edit-checkout:hover,
input#edit-continue:hover,
table.order-review-table input#edit-submit:hover {
  color: white;
  background-color: #888;
}

.comp-button a:active,
#raybasket a:active,
input#edit-checkout:active,
input#edit-continue:active,
table.order-review-table input#edit-submit:active {
  border: 2px inset;
  text-decoration: none;
  outline: none;
}

/* Special for Planets page */
.aside {
  position: absolute; /* IE7 prefers this to a float */
  right: -17em;
  padding: 0.5em;
  border: 1px solid black;
  width: 14.5em;
  font-size: 0.8em;
}

/* Technique for popup hovers obtained from
 * http://www.wickham43.supanet.com/tutorial/hoverpopups.html
 */
a.popup span {
  display: none;
}

a.popup:hover span {
  display: block;
  position: absolute;
  color: #4B0082;
  background-color: #eff;
  font-size: 0.8em;
  font-weight: normal;
  padding: 5px;
  border: 1px solid #4B0082;
  margin: 5px 0 0 0;
  text-decoration: none;
}
	
/* Special for Links page */
body#links #content p {
  margin: 5px 20px;
  font-size: smaller;
}

/* Privacy page */
#privacy-policy strong {
	color: red;
}
#privacy-policy th {
	background-color: #ccc;
}
#privacy-policy table {
	zzwidth: 99%;
	border-style: none;
	zzmargin-top: 1em;
}
#privacy-policy tbody {
	border-style: none;
}
#privacy-policy thead th,
#privacy-policy tbody td {
  border: 1px solid #888;
	padding: 0.2em 0.4em;
	font-size: 85%;
	line-height: 1.2em;
	text-align: left;
}
#privacy-policy td p {
	margin-top: 0;
}
#privacy-policy td p + p {
	margin-top: 1em;
}

/************************* Printing overrides ******************/
@media print {
body {
  color: black;
  background: white;
  font-size: 10pt;
}

.comp-listen, .tabs, h4, #footer {
  display: none;
}

/* Print URLs for hyperlinks */
#main a:after {
  content: " (" attr(href) ") ";
  font-size: smaller;
}
/* Show relative URLs with full address (thanks to http://www.alistapart.com/articles/goingtoprint/) */
#main a[href^="/"]:after {
  content: " (http://www.raymondhead.com" attr(href) ") ";
}
/* ... but not for footnote popups, images, and headings */
#main #content h2 a:after,
#main #content h3 a:after,
#main a[href$=".png"]:after,
#main a[href$=".jpg"]:after,
#main a.popup:after {
  content: normal;
}

#header  {
	margin-bottom: 1em;
	padding: 0;
	font-size: x-large;
	}
#header a {
  color: #4B0082;
}
#sidebar-left {
  display: none;
}
#sidebar-right {
	position: static;
	float: right;	
	margin: -5em 0 20px 20px;
	padding: 10px;
	border: 1px solid black;
}
#container {
  margin: 0;
  padding: 0;
  border: none;
}

h1 {
  margin-top:0;
  color: black;
}

.instrument-group h2 {
  text-align: left;
}
.composition {
  padding: 0.5em 2em;
  border: none;
}

.aside {
  position: static;
  float:right;
  margin: 5px 0px 5px 5px;
}

a.popup span {
  position: static;
  display: block;
  clear: right;
  float: right;
  margin: 10px 5px 10px 10px;
  border: 1px solid black;
  width: 20em;
  color: black;
  background-color: white;
  
  font-size: 0.8em;
  padding: 5px;
  text-decoration: none;
}

.comp-button {
  display: none;
}

}