/*
Description: Hayley Sales Artist Site
Version: 1
Author: Kristal Dale @ Microgroove (kris@microgroove.com)

Contents:
1. Colors
2. Reset
3. Typography
4. Links
5. Page Layout
6. Skin 
7. Cart (Echospin)

CSS org credit to Carsonified (carsonified.com)
/*********** 1. Colors *************/
/*
- White (body text, main background)
- Yellow Cream #ede1a8 (dates, footnotes)
- Tan #b3b087 (side rules, borders)
- Black (Headings/Titles, more links)
- Pink #912127 (Buy buttons)
- Light Gray #c3c3b9 (main rules, borders)
*/
/* End Colors */ 

/*********** 2. Reset **************/
/* Adapted from http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */ 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}
/* End Reset */ 

/*********** 3. Typography *********/
/* Thanks to http://www.alistapart.com/articles/howtosizetextincss/ */

/* Make sure IE starts from the same base font and treats like mozilla or chrome */
html>body { 
	font-size: 14px; 
}

body {
	line-height: 1.125em;
	color: #fff;
}

body, #echospinCheckoutCart .title, #echospinOrdersReceipt .title, #echospinOrdersDownloads .title {
	font-family: Arial,Helvetica,Tahoma,sans-serif;
}

h1, h2, h3, h4, .viewmore, .title, .smalltitle, .date_lg, 
div.echospinCart .item.header, div.echospinCart .cartitem.header, 
#echospinCheckoutCart .header,#echospinOrdersReceipt .header,
#echospinCheckoutCart .header .title, #echospinOrdersReceipt .header .title {
	font-family: Georgia, "Times New Roman", Times, serif;
	/*color: #000;*/
}

h1 {
	font-size: 1.6em;
	display: inline;
	line-height: 1.4em;
}

p, .viewmore, .format, .sidebar .tour li, .nocontent, 
.tour .trow {
	font-size: .85em;
}

.tour .thead {
	font-size: 1em;
}

.shop .text h1 {
	font-size: 2em;
	margin-top: 1em;
}

.date_lg {
	color: #ede1a8;
	padding: 0 5px;
	font-size: 1.3em;
}

h3, .title, .smalltitle {
	font-size: 1.4em;
	line-height: 1.1em;
	color: #fff;
}

h3 {
	display: inline;
}

.smalltitle {
	font-size: .85em;
	padding: 4px 0 0 0;
}

.tour .title {
	font-size: 1em;
	font-weight: bold;
}

.twitter li a.date {
	font-size: 1em;
	padding: 0;
	color: #fff;
}

.tour li .date {
	font-weight: bold;
}

h3, .title, .smalltitle, .viewmore {
	text-transform: uppercase;
}

.shop h3 {
	font-size: 1em;
}

.shop .category3 #shopnav .item3, 
.shop .category5 #shopnav .item5,
.shop .category6 #shopnav .item6  {
	font-size: 1.8em;
	font-weight: bold;
}
/* End Typography */ 

/*********** 4. Links **************/
a, a:link, a:visited {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: underline;
}

.sidebar a, .sidebar a:link, .sidebar a:visited, .sidebar a:hover {
	color: #cfcb98;
}

a.viewmore {
	text-decoration: none;
}

a.viewmore:hover {
 text-decoration: underline;
}

a.small {
	font-size:0.9em;
}

.cart div.support a, a.viewmore, .sidebar a.viewmore{
	color: #000
} 

.main p a, .main p a:link, .main p a:visited {
	text-decoration: underline;
}
/* End Links */ 

/*********** 5. Page Layout ********/
body {
	text-align: center;	
}

.container {
	margin: 0 auto;
	width: 950px;
	text-align: left;
	position: relative;
}

.header, .nav, .footer {
	clear: both;
}

.siteheader {
	height: 255px;
}

.nav {
	margin-bottom: 90px;
}

.nav li {
	float: left;
	cursor: pointer;
	margin-left: 15px;
}

.main {
	float: left;
	width: 513px;
}

.sidebar {
	float: right;
	width: 363px;
}

/*#shoppage .main {
	width: 950px;
}

#shoppage .sidebar {
	display:none;
}*/

.footer {
	text-align: left;
}

p {
	margin: 10px 0;
}

strong, .strong {
	font-weight: bold;
}

em, .em {
	font-style: italic;
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.bkgimg {
	display: block;
	overflow: hidden;
	text-indent: -1000em;
}
/* End Page Layout */ 

/*********** 6. Skin ***************/
body {
	background: url('/public/images/body_bg.jpg') top center no-repeat #fff;
}

.topgrunge {
	background: url('/public/images/topgrunge.png') top repeat-x;
	height: 65px;
}

.sitefooter {
	background: url('/public/images/footer_bg.gif') bottom repeat-x;
	height: 194px;
}

.bottomgrunge {
	background: url('/public/images/footer_bg.png') top no-repeat;
	height: 65px;
	padding-top: 30px;
}

.nav li a {
	height: 42px;
	display: block;
	overflow: hidden;
	text-indent: -1000em;
}

.nav li.home a {
	background: url('/public/images/nav_home.png') top left no-repeat;
	width: 62px;
}

.nav li.blog a {
	background: url('/public/images/nav_blog.png') top left no-repeat;
	width: 53px;
}

.nav li.tour a {
	background: url('/public/images/nav_tour.png') top left no-repeat;
	width: 59px;
}

.nav li.media a {
	background: url('/public/images/nav_media.png') top left no-repeat;
	width: 67px;
}

.nav li.shop a {
	background: url('/public/images/nav_shop.png') top left no-repeat;
	width: 64px;
}

.nav li.discography a {
	background: url('/public/images/nav_discography.png') top left no-repeat;
	width: 115px;
}

.nav li.contact a {
	background: url('/public/images/nav_contact.png') top left no-repeat;
	width: 81px;
}

.nav li.interests a {
	background: url('/public/images/nav_interests.png') top left no-repeat;
	width: 91px;
}

.artistlinks {
	position: absolute;
	left: 730px;
	top: 260px;
}

.artistlinks li {
	display: inline;
	padding: 0 6px 0 0;
}

.player {
	background: url('/public/images/player_bg.png') top left no-repeat;
	width: 463px;
	height: 26px;
	margin-left: 45px;
}

.footer .nav {
	margin: 15px 0;
}

.footer .nav li a {
	background: none;
	overflow: visible;
	text-indent: 0em;
	display: inline;
}

.footer .nav li, .terms .first {
	border-right: 1px solid #fff;
	margin-left: 0;
	padding-right: 8px;
	margin-right: 8px;
}

.orderstatus, .checkout {
	width: 950px;
}

.large-box-top {
	background: url('/public/images/large_box_top.png') no-repeat;
	padding-top: 48px;
	margin-bottom: 30px;
}

.large-box-bottom {
	background: url('/public/images/large_box_bottom.png') no-repeat left bottom;
	padding-bottom: 50px;
}

.large-box-mid {
	background: url('/public/images/large_box_mid.png') repeat-y;
	padding: 1px 0;
}

.main-box-top {
	background: url('/public/images/main_box_top.png') no-repeat;
	padding-top: 24px;
	margin-bottom: 30px;
}

.main-box-bottom {
	background: url('/public/images/main_box_btm.png') no-repeat left bottom;
	padding-bottom: 51px;
}

.main-box-mid {
	background: url('/public/images/main_box_mid.png') repeat-y;
	padding: 1px 0;
}

.section {
	margin-bottom: 35px;
}

.side-box-top {
	background: url('/public/images/side_box_top.png') no-repeat;
	padding-top: 54px;
}

.side-box-bottom {
	background: url('/public/images/side_box_btm.png') no-repeat left bottom;
	padding-bottom: 76px;
}

.side-box-mid {
	background: url('/public/images/side_box_mid.png') repeat-y;
	padding: 10px 0;
}

.twitter li, .tour li {
	border-bottom: 1px solid #b3b087; 
}

.twitter li a.date {
	padding: 0 15px;
}

.tour ul {
	margin-top: 10px;
}

.tour li {
	padding-bottom: 8px; 
	margin-bottom: 8px;
	
	overflow: hidden;
}

.sidebar .tour .date, .sidebar .tour .location, .sidebar .tour .loc {
	display: block;
	float: left;
	width: 80px;
	padding-right: 5px;
}

.sidebar .tour .location {
	width: 125px;
}

.sidebar .tour .loc {
	width: 100px;
	padding: 0;
}

.box-item, .tour .side-box-mid .box-item {
	padding: 5px 22px;
	overflow: hidden;
}

.orderstatus .box-item, .checkout .box-item {
	padding: 0 44px;
}

.tour .main-box-top {
	padding-top: 0;
}

.tourdetail .main-box-top {
	padding-top: 24px;
}

.tour .box-item {
	padding: 0;
}

.tourdetail .box-item {
	padding: 20px 22px 5px 22px;
	overflow: hidden;
}

.side-box-mid .box-item {
	margin: -54px 0 -76px 0;
}

.section h2 span, .section h4 span, .sidebar .mailinglist span {
	background: url('/public/images/titles.png') no-repeat;	
	display: block;
	height: 48px;
	text-indent: -1000em;
}

.section h4 {
	height: 44px;
	overflow: hidden;
}

.box-item img {
	border: 3px solid #fff;
	/*margin: 15px 0;*/
}

.blog h2 span {
	background-position: 0 0;
}

.interact h2 span {
	background-position: 0 -46px;
}

.tour h2 span {
	background-position: 0 -88px;
}

.media h2 span {
	background-position: 0 -130px;
}

.shop h2 span {
	background-position: 0 -176px;
}

.discography h2 span {
	background-position: 0 -314px;
}

.contact h2 span {
	background-position: 0 -225px;
}

.interests h2 span {
	background-position: 0 -267px;
} 

.checkout h2 span {
	background-position: 0 -609px;
}

.orderstatus h2 span {
	background-position: 0 -658px;
}

.mailinglist h2 span {
	background-position: 0 -708px;
}

.rule {
	border-bottom: 1px solid #b3b087;
	margin-bottom: 10px; 
	padding-bottom: 5px;
	display: block;
}

.tour .trow {
	color: #fff;
	border-bottom: 1px solid #b3b087;
	overflow: hidden;
	padding-bottom: 10px; 
	margin: 0 10px 10px 10px;
}

.tour .thead {
	background: url('/public/images/tour_head.png') 1px 0 no-repeat;	
	width: 511px;
	height: 46px; 
	margin: 0;
	border-bottom: none;
	padding: 0 10px;
}

.trow a {
	display: block;
}

.trow .date, .trow .loc, .trow .venue, .trow .buy {
	padding-top: 18px;
	/*display: block;*/
	float: left;
}

.trow .date {
	padding-left: 16px;
	width: 90px;
	font-weight: bold;
}

.trow .venue {
	padding-right: 10px;
	width: 145px;
}

.trow .loc {
	padding-right: 10px;
	padding-left: 10px;
	width: 130px;
}

.trow .buy {
	padding-right: 10px;
	width: 70px;
}

.boxlisting h4, .shop .buyoptions h2.title {
	background: none;
	text-indent: 0em;
	height: 1.3em;
}

.video .boxlisting h4 {
	overflow: visible;
}

.item_small, .item_med, .item_lg, .item_full, .shop .item {
	width: 225px;
	height: 275px;
	overflow: hidden;
	text-align: center;
}

.item_small {
	width: 117px;
	height: 130px;
}

.item_small .text {
	padding: 0 4px;
}

.item_full {
	width: 100%;
	height: 100%;
}

.item_med, .shop .item {
	width: 155px;
	height: 245px;
	overflow: visible;
	text-align: left;
}

.shop.detail .item {
	width: auto;
	height: auto;
}

.FBlike {
	display: block;
	border-top: 1px solid #b3b087;
	padding-top: 6px;
	text-align: left;
	clear: both;
}

.discography .FBlike iframe {
	width: 240px !important;
}

.discography .item {
	min-height: 350px;
	padding-top: 1px;
	
	width: 475px;
}

.discography .FBlike {
	border: none;
}

.discography h3 {
	margin-bottom:10px;
	display: block;
}

.discography .imagewrap {
	width: 220px;
	float: left;
}

.discography .text {
	width: 230px;
}

.cartitem .price {
	font-weight: bold;
}

.shop h3 {
	margin: 4px 10px 0 0;
	display: block;
}

.shop h3 a {
	text-decoration: none;
}

.shop h3 a:hover {
	text-decoration: underline;
}

#shopnav {
	/*overflow: hidden;*/
	height: 50px;
}

#shopnav li {
	border-right: 1px solid #b3b087;
	padding-right: 8px;
	margin-right: 8px;
	
	height: 21px;
	padding-top: 2px;
	padding-bottom: 1px;
}

.shop .options, .discography .options {
	margin-bottom: 5px;
}

.shop .buyoptions {
	margin: 70px 0 0 240px;
}

.shop .buyoptions h2.title {
	color: #000;
}

.shop .text {
	margin-bottom: 20px;
}

.shop .text h1 {
	border-bottom: 1px solid #b3b087;
	display: block;
	clear: both;
}

.shop .text ul {
	margin: 5px 0;
}

.shop .text .itemswrapper ul {
	margin-top: 1px;
}

.shop .item {
	overflow: hidden;
	padding-bottom: 20px; 
	position: relative;
}

.shop .item div.echospinCartEnabled .add {
	cursor: pointer;
	display: inline-block;
	/*font-weight: bold;*/
	width: auto;
}

#tracks .echospinCartDisabled {
	display: block;
}

#tracks li {
	font-size: .85em;
	font-weight: bold;
	text-transform: lowercase;
}

#tracks li {
	margin-left: 30px; 
	overflow: hidden;
}

#tracks li.cartitem {
	border-bottom: 1px solid #b3b087;
	font-size: 1em;
	margin: 14px 0 0;
	padding-bottom: 5px;
	position: relative;
}

#tracks li .sno {
	padding-right: 5px;
	text-align: right;
	width: 25px;
}

#tracks li .tracktitle {
	/*font-size: 1.1em; */
	font-weight: bold;
	/*padding-right: 180px;
	width: 220px;*/
	text-transform: none;
}

#tracks li .tracktitle .price {
	position: absolute;
	right: 0;
	top: 3px;
	width: 80px;
}

#tracks li .tracktitle .add {
	position: absolute;
	right: 85px;
	text-align: right; 
	top: 3px;
	width: 100px;
}

#tracks li .tracktitle .lyrics, #tracks li .tracktitle .add, #tracks li .tracktitle .price, 
.shop #tracks li .tracktitle .play {
	font-size: .85em;
}

#tracks li .tracktitle .add {
	cursor: pointer;
}

ul#tracks li.echospinCartDisabled .add, ul#tracks li.echospinCartDisabled .price {
	display: none;
}

.discography #tracks li {
	font-size: 1em;
	font-weight: normal;
}

.discography #tracks li .tracktitle {
	padding-right: 0;
	width: 205px;
	font-weight: normal;
	font-size: 1em;
}

.discography #tracks li .sno {
	width: auto;
}

.discography #tracks li.disc {
	font-size: .8em;
	margin-left: 17px;
} 

.discography #tracks li.cartitem {
	margin-bottom: 5px;
}

.blog .image {
	display: block;
	margin: 10px 10px 10px 0;
}

.spacer {
	margin-top: 14px;
}

.image img{
	border: 5px solid #c3c3b9;
}

.sidebar .mailinglist {
	margin-bottom: 0px;
}

.sidebar .mailinglist span {
	background-position: 60px -366px;
	cursor: pointer;
	margin-bottom: 20px;
}

.flickr h4 span  {
	background-position: 0 -415px;
}

.twitter h4 span {
	background-position: 0 -450px;
}

.tour h4 span {
	background-position: 0 -486px;
}

.video h4 span {
	background-position: 0 -524px;
}

.cart h4 span {
	background-position: 0 -560px;
}

.main .viewmore {
	float: right;
	margin-top: -25px;
}

.sidebar .section {
	position: relative;
}

.sidebar .viewmore {
	/*float: right; 
	margin-top: -22px;*/
	position: absolute; 
	top: 21px;
	right: 0;
}

.footer .credits {
	width: 950px;
	margin: 0 auto;
	position: relative;
}

.universal {
	background: url('/public/images/universalmusiccanada.png') no-repeat;	
	height: 59px;
	width: 155px;
}

.footer a.powered_mg {
  background: transparent url("/public/images/poweredbymicrogroove.png") bottom left no-repeat;
  height: 21px;
  width: 142px;
  position: absolute;
  top: 30px;
  left: 0;
}

.footer a.powered_es {
  background: transparent url("/public/images/poweredbyechospin.png") bottom left no-repeat;
  height: 18px;
  width: 89px;
  position: absolute;
  display: none;
  top: 34px;
  left: 158px;
}

#shoppage .footer a.powered_es {
	display: block;
}

.cartsteps {
	margin: 0 40px 20px;
	overflow: hidden;
	display: inline;
}

.cartsteps img {
	border: none;
}

.mg-formerror, .loginform div {
	color: #ad383d !important;
	font-weight: bold;
}

.loginform div {
	border: 1px solid #ad383d;
	padding: 10px 20px;
	margin-bottom: 15px;
}

.control {
	text-align: center;
	width: 50%;
	margin: 0 0 0 50%;
}

.control .paging {
	padding: 3px 0;
	position: relative;
	text-align: left;
}

a.prev {
	background: url("/public/images/prev.png") no-repeat 0 40%;
	padding-left: 15px;
}

a.next {
	background: url("/public/images/next.png") no-repeat 100% 40%;
	padding-right: 15px;
}

.control .paging a.prev {
	left: 0;
	top: 3px;
	position: absolute;
}

.control .paging a.next {
	right: 0;
	top: 3px;
	position: absolute;
}

.control .paging span {
	display: block;
	text-align: center;
}

.control .paging span, a.prev, a.next {
	color: #000;
}

/* End Skin */ 

/* buy links */

div.item a.btn-expose,
div.item.one div.items div.echospinCartEnabled .add, .btn-blm {
  display: inline-block;
  padding: 3px 6px;
  border-radius:2px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  text-transform: uppercase;
  line-height:1;  
}

div.item.zero a.btn-expose,
div.item.one a.btn-expose{
  display: none;
}

div.item a.btn-expose,
div.item.one div.items div.echospinCartEnabled .add, .btn-blm {
  background: #912127;
  color: #fff;  
}

div.item.many div.items div.echospinCartEnabled {
  background: #eee;
  color: #444;
  padding: 5px;
  position: relative;
  z-index: 2;
}

body#stpg div.item.many div.items div.echospinCartEnabled:hover {
  color: #000;
}

.btn-blm {
	margin: 0 10px 10px 0;
}

/* DROP DOWN STYLES FOR BUY */

/* ==================== */
/* = SUPERFISH STYLES = */
/* ==================== */

div.many ul.itemswrapper {
	line-height:	1.0;
	
}

div.many ul.itemswrapper ul {
	position:		absolute;
	top:			-999em;
	width:			180px; /* left offset of submenus need to match (see below) */
}

div.many ul.itemswrapper li {
  position:relative;	  
}

div.many ul.itemswrapper ul li {
	width:			100%;
	position:static;
	margin-bottom:-5px;
}

div.many ul.itemswrapper li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
div.many ul.itemswrapper a {
	/*display:		block;*/
	text-decoration: none;
}

div.many ul.itemswrapper li:hover ul,
div.many ul.itemswrapper li.hover ul {
	left:			0;
	top:			0; /* match top ul list item height */
	z-index:		99;
	padding-top: 20px;
}


/*********** 7. Cart ***************/
.cart div.support {
  font-size: 0.9em;
  text-align: center;
  color: #000;
}

.cart h3.title span {
  background: url("/public/images/shop-cart-title.jpg") no-repeat bottom left;
  width: 100%;  
  height: 38px;
  display: block;
  text-indent: -1000em;
  overflow: hidden;
}

#echospinCheckoutCart .item div, #echospinOrdersReceipt .item div, #echospinOrdersDownloads .item div {
	font-size: 1em;
}

#echospinCheckoutCart .header div, #echospinOrdersReceipt .header div, #echospinOrdersDownloads .header div {
	font-size: 1.1em;
}

#images { height: 240px; width: 320px; padding:0; margin:0; overflow: hidden;}
#images img { border:none;}
