@charset "UTF-8";
/* CSS Document */

html, body {
	width:100%;
	height:100%;
	overflow:auto;
}

body {
	font-family: 'Roboto', sans-serif;
	background:url(../images/bg.jpg) no-repeat center center fixed;
	background-color: #f2efe9;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	
	color:#000;
	font-size:14px;
	margin:0px;
}

.clearfix {
	clear:both;
}

img {
	border:0;
	border-style: none;
	outline:0;
}

a:link {
	font-weight:700;
	color:#1e4499;
	text-decoration:none;
}

a:hover {
	font-weight:700;
	color:#000;
	text-decoration:none;
}

.home_buybtn {
	float:left;
	margin-right:5px;
}

.album {
	-moz-box-shadow: 0px 0px 8px rgba(168,158,152,0.5);
	-webkit-box-shadow: 0px 0px 8px rgba(168,158,152,0.5);
	box-shadow: 0px 0px 8px rgba(168,158,152,0.5);
}

.btn:hover {
	cursor: pointer;
	opacity: 0.7;
}

.buy_flag {
	float:left;
	margin-right:10px;
}

.credit {
	font-size:11px;
	color:#000;
	margin:-15px 10px;
	text-align:right;
}

.audioplayer {
}

.audioinfo {
	font-size:14px;
	text-align:left;
}

.audio {
	margin:5px 0px;
}

/* MAIN */
#ecard {
	width:980px;
	height:570px;
	position: relative;
	margin:50px auto;
	
	background:url(../images/bg-ecard.png);
	-moz-box-shadow: 0px 0px 8px rgba(168,158,152,0.8);
	-webkit-box-shadow: 0px 0px 8px rgba(168,158,152,0.8);
	box-shadow: 0px 0px 8px rgba(168,158,152,0.8);
}

#main {
	width:980px;
	height:570px;
}

#logo-naxos {
	position: absolute;
	left:30px;
	z-index: 100;
}

#header {
	width:980px;
	height:30px;
	background-color:#8ed7f5;
	position: relative;
}

#main-nav {
	width:580px;
	padding:5px 0px;
	margin:0px auto;
}

#homebtn, #artistbtn, #playlistbtn, #releasesbtn {
	float:left;
	margin:0px 30px;
}

#homebtn:hover, #artistbtn:hover, #playlistbtn:hover, #releasesbtn:hover {
	cursor:pointer;
	opacity: .5;
}

#sm-icons {
	width:60px;
	height:20px;
	position: absolute;
	right:30px;
	bottom:5px;
}

.sm-indiv {
	float:right;
	margin:0px 3px;
}

#header-title {
	width:980px;
	height:80px;
	position: relative;
	top:10px;
}

#title-1 {
	width:430px;
	text-align: center;
	margin:auto;
	display: block
}

#title-2 {
	width: 416px;
	text-align: center;
	margin:20px auto;
	display: none;
}

#title-3 {
	width:290px;
	text-align: center;
	margin:auto;
	display: none;
}

#content {
	width:920px;
	height:420px;
	position:relative;
	top:20px;
	left:30px;
}

#footer {
	font-size:11px;
	text-align:center;
	color:#000;
	font-weight:400;
	line-height:15px;
	margin-top:20px;
	margin-bottom:30px;
}

#footer a {
	color:#000;
	font-weight: 700;
}

#home {
	width: 100%;
	display:block;
}

#home-left {
	width:330px;
	height:420px;
	float:left;
	position: relative;
}

#album-badge {
	position: absolute;
	z-index: 20;
	right:0px;
	top:10px;
}

#main-album {
	position: absolute;
	bottom:40px;
}

#sticker-container {
	width:90px;
	height: 90px;
	position: absolute;
	right:60px;
	bottom:150px;
}

#sticker-badge {
	width:60px;
	height:60px;
	background-color:#ee4c9b;
	border-radius: 10px;
	position: absolute;
	text-align:center;
	line-height: 15px;
	z-index: 20;
	left:50px;
	top:-30px;
}

#sb-t1 {
	font-size:12px;
	color:#fff;
	margin:8px 0px 0px;
}

#sb-t2 {
	font-size:12px;
	color:#ffe50b;
}

#album-stickers {
	position: absolute;
	z-index: 10;
}

#main-catno {
	text-align: center;
	position: absolute;
	width:100%;
	bottom:30px;
}

#home-right {
	width:560px;
	height:420px;
	float:left;
	margin-left:25px;
	position: relative;
	line-height: 20px;
}

#home-blurb {
	width:350px;
	font-weight: 700;
	margin:25px 0px 60px;
}

#penguin-guide-img {
	float:right;
	margin:-5px 0px 0px 10px;
}

#penguin-guide-txt {
	float: right;
	margin:5px 0px 0px 0px;
	font-style: italic;
	font-weight: 400;
}

#home-buyarea {
	margin-top:40px;
}

#buy_text {
	font-size:15px;
	font-weight: 700;
}

#buy_btns {
	margin-top:5px;
	position: absolute;
	z-index: 200;
}

#de-wolf {
	position: absolute;
	right:-35px;
	top:-50px;
}

#de-animals {
	position: absolute;
	right: -20px;
	bottom:10px;
}

#artist {
	width:100%;
	display:none;
}

#artist-element {
	position: absolute;
	right:-20px;
	bottom:0px;
}

#artist-image {
	float:left;
	margin:20px 0px 0px 30px;
}

#artist-quote p {
	font-weight: 400;
}

#artist-quote {
	width:560px;
	margin:40px 0px 0px 30px;
	float: left;
	font-weight: 400;
}

#playlist {
	width: 100%;
	display:none;
}

#playlist-container {
	width:870px;
	margin:-10px auto;
}

#pl-images {
	position: absolute;
	bottom:0px;
}

.playlist-indiv {
	with:200px;
	float:left;
	margin:0px 20px;
}

.pl-title {
	text-align: center;
	margin:10px;
	font-size:15px;
}

#recommended {
	width:100%;
	display:none;
	position:relative;
}

#reco-text01 {
	width:800px;
	text-align: center;
	margin:5px auto 20px;
	font-size:13px;
}

#reco_container {
	width:920px;
	margin: auto;
}

#cat-cover {
	float:right;
}

#cat-text a {
	color:#425da7;
	font-weight: 700;
}

#cat-text a:hover {
	color:#000;
	cursor: pointer;
}
.reco-indiv {
	width:125px;
	height:190px;
	text-align: center;
	float: left;
	margin:0px 10px;
}

#reco-container-b {
	float:left;
	margin-top:-30px;
}

.reco-catno {
	text-align: center;
	margin:5px auto;
}

#buy-btn-reco {
	width:300px;
	height: 20px;
	font-size:16px;
	text-align: center;
	border:3px solid #000;
	position: absolute;
	font-weight: 700;
	bottom:-155px;
	letter-spacing: 2px;
	left:140px;
	padding-bottom:3px;
	color:#000;
}

#buy-btn-reco:hover {
	background:#000;
	color:#fff;
	cursor: pointer;
}

.buynow-btn {
	width:80px;
	text-align: center;
	letter-spacing: 1px;
	font-weight: 700;
	border:solid #000 2px;
	font-size: 12px;
	margin: auto;
	z-index: 150;
}

#my-first-book {
	width:230px;
	position: absolute;
	top:60px;
	right:50px;
	text-align: center;
}

#reco-catalogue {
	width:270px;
	position: absolute;
	bottom:-160px;
	right:30px;
	text-align: center;
	background: rgba(41, 128, 239, 0.2);
}

#cat-text {
	font-size:12px;
	width:180px;
	margin:8px 0px 0px 10px;
	text-align: left;
	float: left;
}

.buy_wrapper {
  cursor:pointer;
  position: relative;
  margin:0px 5px 0px 20px;
  float:left;
  top:0px;
  text-align: center;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
  z-index:2000;
}

.buy_wrapper .tooltip {
  background: #fdf8f4;
  border: 2px hide;
  border-radius:3px;
  bottom: 13px;
  color: #000;
  font-size:13px;
  display: block;
  left: -15px;
  margin-bottom:20px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.buy_wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  border: 2px hide;
  border-radius:10px;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.buy_wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #fdf8f4 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 0;
}
  
.buy_wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .buy_wrapper .tooltip {
  display: none;
}

.lte8 .buy_wrapper:hover .tooltip {
  display: block;
}

/* TOOLTIP end */

/* TOOLTIP */

.buy_wrapper2 {
  cursor:pointer;
  position: relative;
  margin:0px 5px 0px 0px;
  float:left;
  top:0px;
  text-align: center;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.buy_wrapper2 .tooltip2 {
  background:#ebebeb;
  border: 2px hide;
  border-radius:3px;
  bottom: 130%;
  color: #000;
  font-size:13px;
  display: block;
  left: -15px;
  margin-bottom:5px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
	z-index: 500;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.buy_wrapper2 .tooltip2:before {
  bottom: -20px;
  content: " ";
  border: 2px hide;
  border-radius:10px;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.buy_wrapper2 .tooltip2:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #ebebeb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 0;
}
  
.buy_wrapper2:hover .tooltip2 {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .buy_wrapper2 .tooltip2 {
  display: none;
}

.lte8 .buy_wrapper2:hover .tooltip2 {
  display: block;
}

/* TOOLTIP end */