/* 	##################################################################################################
 	##################################################################################################
 	##################################################################################################
	REFERENCES
		- yui.yahooapis.com/2.8.1/build/base/base.css
		- camendesign.com/design/
		- praegnanz.de/weblog/htmlcssjs-kickstart
		- html5doctor.com/html-5-reset-stylesheet/
 	##################################################################################################
 	##################################################################################################
	################################################################################################## */


/* 	##################################################################################################
	RESET
	################################################################################################## */
 
	html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video 
	{
	  margin: 0;
	  padding: 0;
	  border: 0;
	  font-size: 100%;
	  font: inherit;
	  vertical-align: baseline;
	}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
	blockquote, q { quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after { content: ""; content: none; }
	ins { background-color: #ff9; color: #000; text-decoration: none; }
	mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
	del { text-decoration: line-through; }
	abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
	table { border-collapse: collapse; border-spacing: 0; }
	hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
	input, select { vertical-align: middle; }


/* 	##################################################################################################
	FONT NORMALIZATION
	################################################################################################## */

	body { font:13px/1.231 sans-serif; font-size:small; }
	select, input, textarea, button { font:99% sans-serif; }
	pre, code, kbd, samp { font-family: monospace, sans-serif; }


/* 	##################################################################################################
	BASE STYLES
	################################################################################################## */

	html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 
	a:hover, a:active { outline: none; }
	ul, ol { margin-left: 0; }
	ol { list-style-type: decimal; }
	ul, li { margin: 0; list-style:none; list-style-image: none; }
	small { font-size: 85%; }
	strong, th { font-weight: bold; }
	td { vertical-align: top; }
	sub, sup { font-size: 75%; line-height: 0; position: relative; }
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }
	pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
	textarea { overflow: auto; }
	.iem7 legend { margin-left: -7px; }
	input[type="radio"] { vertical-align: text-bottom; }
	input[type="checkbox"] { vertical-align:text-top; margin-right:10px; }
	.iem7 input[type="checkbox"] { vertical-align: baseline; }
	label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
	button, input, select, textarea { margin: 0; }
	input:valid, textarea:valid   {  }
	input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
	.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
	::-moz-selection{ background: #66b6c1; color:#fff; text-shadow: none; }
	::selection { background:#66b6c1; color:#fff; text-shadow: none; }
	a:link { -webkit-tap-highlight-color: #66b6c1; }
	button {  width: auto; overflow: visible; }
	.iem7 img { -ms-interpolation-mode: bicubic; }
	html, body { min-height:100%; }


/* 	##################################################################################################
	HELPER CLASSES
	################################################################################################## */

	/* prevent callout */
	.nocallout {-webkit-touch-callout: none;}

	/* Text overflow with ellipsis */
	.ellipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

	/* A hack for HTML5 contenteditable attribute on mobile */
	textarea.contenteditable {-webkit-appearance: none;}

	/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
	.gifhidden {position: absolute; left: -100%;}

	/* For image replacement */
	.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

	/* Hide for both screenreaders and browsers */
	.hidden { display: none; visibility: hidden; }

	/* Hide only visually, but have it available for screenreader */
	.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

	/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard */
	.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

	/* Hide visually and from screenreaders, but maintain layout */
	.invisible { visibility: hidden; }

	/* Fix clearfix */
	.clearfix { zoom: 1; }

	/* Prevents margin-collapsing on child elements */
	.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
	.clearfix:after { clear: both; }


/* 	##################################################################################################
	MEDIA QUERIES
	################################################################################################## */

	/* styles for 800px and up */
	@media only screen and (min-width: 800px) 
	{
	}

	@media
	only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-device-pixel-ratio: 1.5) {
	  /* Styles */
	}


/* 	##################################################################################################
	MOBILE LAYOUT (CONTAINER/HEADER/NAV/FOOTER)
	################################################################################################## */

	#container
	{
		min-width: 300px;
	}

	#wrapper 
	{ 
		padding:10px 0; 
	}

	/* Header layout and styles */

	#content-header
	{
		position:relative;
		height:90px;
	}
	
	#link-logo,
	.link-log,
	.button-search
	{
		position:absolute;
	}
	
	.text-search,
	.button-search
	{
		bottom:10px;
	}
	
	#link-logo
	{
		left:0;
	}
	
	.link-log,
	.button-search
	{
		right:0;
	}	
	
	#link-logo
	{
		top:0;
	}

	.link-log
	{
		top:-10px;
		border-width:0 1px 1px 1px;
		border-top-right-radius: 0 !important;
		border-top-left-radius: 0 !important;
		-moz-border-radius-topright: 0 !important;
		-moz-border-radius-topleft: 0 !important;
		-webkit-border-top-right-radius: 0 !important;
		-webkit-border-top-left-radius: 0 !important;
		background:#919294;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#a2a3a5), to(#919294));
		border:1px solid #707172;
	}
	
	#search-box
	{
		padding:54px 100px 0 0;
	}

	/* Nav layout and styles */

	#nav-header
	{
		width:100%;
		height:30px;
		margin-bottom:7px;
		background-color:#eee;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#c5c5c5));
	}

	#nav-header a
	{
		display:block;
		float:left;
		width:23%;
		height:30px;
		line-height:30px;
		font-weight:bold;
		text-align:center;
		text-decoration:none;
		color:#000;
		font-size:12px;
		background-color:#eee;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#c5c5c5));
		border-right:1px solid #000;
	}
	
	#link_nav_myaccount
	{
		width:30% !important;
	}
	
	#link_nav_cart
	{
		border-right:none !important;
	}
	
	#nav-header.current,
	#nav-header .current
	{
		color:#fff;
		background-color:#66b6c1;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#66b6c1), to(#508e99));
	}

	/* Footer layout and styles */
	
	#nav-footer
	{
		margin:auto;
		margin-top:10px;
		max-width:700px;
		height:30px;
	}
	
	#nav-footer a
	{
		display:block;
		float:left;
		width:20%;
		padding:2px 0;
		font-size:11px;
		color:#bbb;
		text-align:center;
		text-decoration:none;
		border-right:1px solid #333;
	}
	
	#link-footer-faq
	{
		width:18% !important;
		border-right:none !important;
	}


/* 	##################################################################################################
	PRIMARY STYLES
	################################################################################################## */

	html, body, select, input, textarea 
	{
		background-color:#04080f;
		font-family:Arial, Helvetica, sans-serif;
		font-size:100%;
		color:#555;
	}

	h1, h2, h3, h4, h5, h6 
	{ 
		font-weight: bold; 
	}


/* 	##################################################################################################
	LINK STYLES
	################################################################################################## */

	a, a:active, a:visited  
	{
		color: #607890; 
	}
	
	a:hover 
	{ 
		color: #036; 
	}

	.orange-link, .orange-link:active, .orange-link:visited 
	{ 
		color:#fd9937;
		font-weight:bold;
	}

	.blue-link, .blue-link:active, .blue-link:visited 
	{ 
		color:#4595A0;
	}


/* 	##################################################################################################
	SHARED STYLES
	################################################################################################## */

	/* main content section of the pages */
	.content-main
	{
		font-size:12px;
		background-color:#fff
	}

	/* any link that uses a background-image, therefore allowing the link to have text and positioning it off the page */
	.img-link 
	{ 
		display:block; 
		text-indent:-9999px; 
	}
	
	/* content navigation links (home, genre list) */
	.nav-content a
	{
		margin-bottom:1px;
		display:block;
		padding:11px 15px;
		font-weight:bold;
		text-decoration:none;
		color:#fff;
		font-size:14px;
		background:#717274 url(/m/img/arrow-light.png) no-repeat right center;
		background-image: url(/m/img/arrow-light.png), -webkit-gradient(linear, left top, left bottom, from(#717274), to(#606163));
	}
	
	/* orange header used on most pages */
	.header-info
	{
		background-color:#e39f32;
		color:#fff;
		padding:8px 15px;
		font-size:14px;
	}
	
	/* grey subheader used sparingly */
	.sub-header-info
	{
		background-color:#444;
		color:#fff;
		padding:8px 15px;
		font-size:12px;
		font-weight:normal;
	}
	
	/* main content section helper class to pad content on white backgrounds */
	.content-padded,
	.no-data-message
	{
		padding:8px 10px;
	}
	
	/* apple product callout */
	.apple-device-callout,
	.text-callout
	{
		padding:10px 10px 0 10px;
	}
	.apple-device-callout p,
	.text-callout p
	{
		background-color:#E5F5F7;
		padding:10px;
		font-size: 11px;
		line-height: 18px;
		border: 1px solid #CBDDDF;
		color: #555;
		vertical-align: middle	
	}

	.text-callout p
	{
		background-image:none;
		padding:10px;
	}
	
	/* main content padded paragraphs */
	.content-info p
	{
		word-wrap:break-word;
		line-height:18px;
		margin-bottom:14px;
	}
	/* main content sub-header */
	.content-info h3
	{
		margin:8px 0;
		font-size:14px;
		color:#000;
	}

    .confirmation-content p
    {
        text-align:center;
        font-size:14px;
        font-weight:bold;
        margin:20px 0;
    }
    .confirmation-content a.action-link
    {
        text-align:center;
        display:block;
        margin-bottom:60px;
    }

/* 	##################################################################################################
	CART / REVIEW / CONFIRMATION
	################################################################################################## */
	
    .cart-item,
    .cart-item .cart-item-info
    {
		background-color:#f9f9f9;
    }
    .cart-item .link-album-info
    {
        background-image:none;
        border-bottom:1px dotted #eee;
        padding-bottom:10px;
        margin-bottom:5px;
    }
    .cart-item .remove-link
    {
        background:transparent url(/m/img/remove-X.png) no-repeat 0 0;
        position:absolute;
        top:10px;
        right:10px;
        height:25px;
        width:25px;
    }
    .cart-item .link-album-info .details-wrap
    {
        padding-right:25px !important;
    }
    .cart-item .link-album-info .level-three
    {
        font-style:italic;
    }
    .cart-item .cart-item-info
    {
        padding-bottom:5px;
        background-image:none;
        border-bottom:none;
		border-bottom:1px solid #ccc;
    }
    .cart-item .cart-item-info table
    {
        width:100%;
    }
    .cart-item .cart-item-info thead
    {
        display:none;
    }
    .cart-item .cart-item-info td
    {
        height:30px;
        font-size:11px;
        vertical-align:middle;
    }
    .cart-item .cart-item-info td.cart-item-price,
    .cart-item .cart-item-info td.cart-item-total,
    .cart-item .cart-item-info td.cart-item-qty
    {
        width:100px;
        text-align:center;
    }
    .cart-item .cart-item-info td.cart-item-qty,
    .cart-item .cart-item-info td.cart-item-price
    {
        border-right:1px dotted #ddd;
    }
    .cart-item .cart-item-info td.cart-item-qty *
    {
        display:inline;
    }
    .cart-item .cart-item-info td.cart-item-qty
    {
        padding-left:10px;
        min-width:135px;
    }
    .cart-item .cart-item-info td.cart-item-qty .panel-quantity-update
    {
        width:130px;
    }
    .cart-item .cart-item-info td.cart-item-qty .orange-link
    {
        text-decoration:underline;
        border:none;
		background:#f9f9f9;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f9f9f9));
    }
    .cart-item .cart-item-info td.cart-item-total
    {
        font-weight:bold;
        color:#000;
        padding-right:10px;
    }
    
    #entered-info .wrapper,
    #total-info .wrapper
    {
        margin:15px 10px 10px 10px;
    }
    #entered-info
    {
        float:left;
        width:50%;
    }
    #entered-info .wrapper
    {
        margin-top:0;
    }
    #entered-info section
    {
        margin-bottom:12px;
    }
    #entered-info section
    {
        margin-bottom:12px;
    }
    #entered-info h4
    {
        color:#000;
        text-transform:uppercase;
        margin-bottom:3px;
    }
    #entered-info .orange-link
    {
        display:block;
    }
    #total-info
    {
        text-align:right;
    }

/* 	##################################################################################################
	ALBUM / TOP SONG / Wishlist LIST LAYOUT STYLES
	################################################################################################## */
	
	.link-album-info
	{
	    position:relative;
		display:block;
		padding:15px 15px 15px 15px;
		text-decoration:none;
		color:#333;
		border-bottom:1px solid #ddd;
		min-height:68px;
		background:#fff url(/m/img/arrow-dark.png) no-repeat right center;
		background-image: url(/m/img/arrow-dark.png), -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f4f4f4));
	}
	
	.link-album-info .album-wrap
	{
	    position:absolute;
	    top:10px;
	    left:10px;
		width:75px;
		height:75px;
		/*background:transparent url(/img/Album_70_70_background_24.png) no-repeat 0 0;*/
	}
	
	.link-album-info .details-wrap
	{
	    padding:0 15px 0 85px;
	}
	
	.details-wrap p
	{
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.details-wrap .level-one
	{
		font-weight:bold;
		font-size:14px;
		margin-bottom:4px;
		max-height:34px;
	}
	
	.details-wrap .level-two
	{
		font-size:12px;
		margin-bottom:8px;
		max-height:15px;
	}
	
	.details-wrap .level-download
	{
		line-height:16px;
		max-height:45px;
	}
	
	.details-wrap .level-three
	{
		font-size:11px;
		color:#666;
		max-height:26px;
	}

	.wishlist-wrap
	{
	    position:relative;
	}
	
	.wishlist-wrap .remove-link
	{
	    position:absolute;
	    top:85px;
	    left:10px;
	    width:75px;
	    text-align:center;
	    padding:4px 0;
	    font-size:11px;
	    color:#c03;
	}
	.wishlist-wrap .link-album-info
	{
		min-height:78px;
	}
	
/* 	##################################################################################################
	FORMS
	################################################################################################## */

	.form .input-container,
	.form .button-container
	{
		zoom:1;
	}

	.form .input-container
	{
		line-height:20px;
		margin-bottom:3px;
		padding:5px 15px 5px 0;
	}

	.form .button-container 
	{ 
		padding:5px 0; 
	}

	.form .input-label
	{
		display:block;
		color:#222;
		font-weight:bold;
	}

	.form .hint
	{
		margin-left:3px;
		color:#999;
		font-weight:normal;
	}
	
	.form .highlighted-container
	{
		font-weight:bold;
		background-color:#f9eeee;
	}
	
	.form .input-error
	{
		display:none;
		color:#900;
		font-size:11px;
	}
	
	p.description
	{
		color:#666;
	    margin-bottom:3px;
	}
	
	p.checkout-description
	{
		color:#000;
	    margin-bottom:10px;
	    font-weight:bold;
	}

	.server-side-error,
	.checkout-error
	{
		display:block;
		color:#900;
		font-weight:bold;
		background-color:#f9eeee;
		border:2px solid #f9dddd;
		padding:10px;
		margin:10px 0;
		line-height:18px;
	}
	.checkout-error
	{
		display:none;
	}

/* 	##################################################################################################
	PAGINATION
	################################################################################################## */
	
	.nav-pagination
	{
		text-align:center;
		height:45px;
		margin:20px 5px;
	}

/* 	##################################################################################################
	INPUT ELEMENTS
	################################################################################################## */
	
	.textbox,
	.textarea,
	.dropdown
	{
		border:1px solid #999;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		padding:5px;
		font-size:12px;
		width:100%;
		background-color:#eee;
		font-family:"Lucida Sans", sans-serif;
		color:#000;
	}

	.dropdown
	{
		line-height:20px;
	}
	
	.hinted 
	{
		color:#999;
	}
	.edited 
	{
		color:#333;
	}

/* 	##################################################################################################
	BUTTONS
	################################################################################################## */

	.link-button,
	.button
	{
		line-height:normal;
		padding:5px 0;
		font-size:12px;
		font-weight:bold;
		color:#fff !important;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}

	.link-button
	{
		padding:5px 20px;
	}
	
	.link-button,
	.link-button:hover
	{
		text-decoration:none;
	}
	
	.dummy-button
	{
		display:none;
	}

	.green-button
	{
		background:#89900e;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#acb411), to(#89900e));
		border:1px solid #ADB605;
	}

	.blue-button
	{
		border:1px solid #67b7c2;
		background-color:#67b7c2;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#67b7c2), to(#47828a));
	}

	.orange-button
	{
		border:1px solid #fb9032;
		background-color:#fb9032;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#fb9032), to(#a0581d));
	}

	.button-buy-mp3-track
	{
		padding:3px 0;
		font-size:11px;
	}
	
	.txt-quantity
	{
		width:42px;
	}

	.button-search,
	.button-sign-up,
	.button-buy-cd,
	.button-buy-cdr,
	.button-buy-dvd,
	.button-buy-mp3,
	.button-buy-mp3-track,
	.button-buy-lp
	{ 
		width:80px; 
	}

	.button-buy-cassette
	{
		width:120px;
	}
	
	.button-redeem,
	.button-next
	{ 
		width:100px; 
	}
	
	.button-redeem, 
	.button-buy-procdr
	{ 
		width:110px; 
	}
	
	.button-wishlist,
	.button-reset,
	.button-download, 
	.button-register,
	.button-checkout
	{ 
		width:120px; 
	}

	.button-pagination
	{
		width: 49%;
	}

.mobile-prev {
	position: absolute;
	left: 0;
}

.mobile-next {
	position: absolute;
	right: 0;
}