@charset "utf-8";

/* CSS Document */

/* AirplayCart.gr
   Author:   Me
   Created: 24 Jan 2014
   ----------------------------------------------------*/

/* -------------------------------------->  CLASSES <--------------------------------------- */

/* Clearfix */
.clearfix:after
{
					visibility: hidden;
					display: block;
					font-size: 0;
					content: " ";
					clear: both;
					height: 0;
}

* html .clearfix
{
					zoom: 1;
} /* IE6 */

*:first-child+html .clearfix
{
					zoom: 1;
} /* IE7 */

/* end Clearfix */

br.default
{
					clear: both;
					height: 12px;
					width: 1px;
}

br.x2
{
					height: 24px;
}

.clear
{
					clear: both;
}

.align-center
{
					text-align: center;
}

.align-right
{
					text-align: right;
}

.font-normal
{
					font-weight: normal;
}

.font-light
{
					font-weight: 300;
}

.floatright
{
					float: right;
}

.floatleft
{
					float: left;
}

.block
{
					display: block
}

.hidden
{
					display: none
}

.pullquote
{
					width: 85%;
					margin: 0 auto;
}

/* *** Images *** */
a.hvr-opacity
{
					display: block;
}

img
{
					margin-bottom: 0.923em
}

img.default
{
}

a img.default
{
}

a img.default:hover img,
a img.default:active img
{
}

img.floatleft
{
					margin: 0.923em 0.923em 0.923em 0
}

img.floatright
{
					margin: 0.923em 0 0.923em 0.923em
}

/* *** end Images *** */

/* *** Global Buttons *** */
a.default-btn
{
					display: block;
					padding: 3px 12px;
					margin-bottom: 12px;
					font-weight: 600;
					color: #fff;
					text-align: center;
					border-top: 1px solid #93abbc;
					border-bottom: 1px solid #142635;
					position: relative;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
					background: #396485;
					background: -webkit-gradient(linear, 0 0, 0 bottom, from(#396485), to(#23425c));
					background: -webkit-linear-gradient(#396485, #23425c);
					background: -moz-linear-gradient(#396485, #23425c);
					background: -ms-linear-gradient(#396485, #23425c);
					background: -o-linear-gradient(#396485, #23425c);
					background: linear-gradient(#396485, #23425c);
					-pie-background: linear-gradient(#396485, #23425c);
					behavior: url(ieHack/PIE-1.0beta5/PIE.php);
}

a.default-btn:hover,
a.default-btn:active
{
					background: #23425c;
					border-top: 1px solid #142635;
					border-bottom: 1px solid #fff;
}

a.alt-btn
{
					display: block;
					padding: 6px 24px;
					margin-bottom: 12px;
					font-weight: 700;
					color: #fff;
					text-align: center;
					border-top: 1px solid #747576;
					border-bottom: 1px solid #000;
					position: relative;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					border-radius: 3px;
					background: #2e2f30;
					background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2e2f30), to(#000000));
					background: -webkit-linear-gradient(#2e2f30, #000000);
					background: -moz-linear-gradient(#2e2f30, #000000);
					background: -ms-linear-gradient(#2e2f30, #000000);
					background: -o-linear-gradient(#2e2f30, #000000);
					background: linear-gradient(#2e2f30, #000000);
					-pie-background: linear-gradient(#2e2f30, #000000);
					behavior: url(ieHack/PIE-1.0beta5/PIE.php);
}

a.alt-btn:hover
{
					background: #000;
					border-top: 1px solid #000;
					border-bottom: 1px solid #fff; 
}

/* *** end Global Buttons *** */ 

.color-red
{
					color: #9f4322;
}
/* -------------------------------------->  end CLASSES <--------------------------------------- */

/* -------------------------------------->  STRUCTURE <--------------------------------------- */
.container
{
					width: 960px;
					margin: auto;
					position: relative;
}

#imgBg
{
					width: 100%;
					height: 414px;
					position: absolute;
					left: 0;
					top: 0;
					background-attachment: fixed;
					background-image: url(../images/bg-imgs/Home.jpg);
					background-clip: border-box;
					background-color: #222;
					background-origin: padding-box;
					background-position: center center;
					background-repeat: no-repeat;
					background-size: cover;
					border-bottom: 1px solid #fff;
}

#imgBg .pattern
{
					width: 100%;
					height: 414px;
					position: absolute;
					left: 0;
					top: 0;
					background: url(../images/bg-imgs/bg-pattern.png);
}
/*	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     			    HEADER
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */
/*#header-wrapper
{
					width: 960px;
					height: 108px;
					margin: auto;
					position: relative;
					z-index: 99;
}*/

#pageHeader
{
					width: 1104px;
					height: 108px;
					background-image: url(../images/Transp-white.png);
					margin: auto;
					position: relative;
					/*position: fixed;
					right: -24px;
					transition: background 0.2s linear 1s*/
}

#overlayBg
{
					width: 1104px;
					height: 108px;
					background-image: url(../images/Transp-white.png);
					position: absolute;
					top: 6px;
					left: -6px;
}

#pageHeader a.logo h1
{
					width: 420px;
					height: 96px;
					background: url(../images/AirplayChart.png) no-repeat;
					text-indent: -9999em;
					position: absolute;
					top: 9px;
					left: 0;
}

#pageHeader nav ul
{
					width: 456px;
					position: relative;
					top: 18px;
					float: right;
}

#pageHeader nav ul li
{
					padding: 12px;
					font: 700 1.286em/1.333em 'Open Sans Condensed', 'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
					float: right;
}

#pageHeader nav a
{
					display: block;
					padding: 30px 6px 6px 6px;
					color: #243e54;
}

#pageHeader nav a.home
{
					background: url(../images/Icon-Home.png) no-repeat top center;
}

#pageHeader nav a.about
{
					background: url(../images/Icon-About.png) no-repeat top center;
}

#pageHeader nav a.contact
{
					background: url(../images/Icon-Contact.png) no-repeat top center;
}

#pageHeader nav .current a.home,
#pageHeader nav a.home:hover,
#pageHeader nav a.home:active
{
					background: url(../images/Icon-Home-active.png) no-repeat top center;
}

#pageHeader nav .current a.about,
#pageHeader nav a.about:hover,
#pageHeader nav a.about:active
{
					background: url(../images/Icon-About-active.png) no-repeat top center;
}

#pageHeader nav .current a.contact,
#pageHeader nav a.contact:hover,
#pageHeader nav a.contact:active
{
					background: url(../images/Icon-Contact-active.png) no-repeat top center;
}

#pageHeader nav li.current a
{
					color: #000;
}

#pageHeader nav a:hover,
#pageHeader nav a:active
{
					color: #000;
}

ul#socialNetws
{
					padding-bottom: 0;
					margin-left: 12px;
					position: relative;
					top: 12px;
					float: right;
}

ul#socialNetws li
{
					list-style: none;
					margin-left: 0;
					padding: 0 6px;
					float: left;
}

ul#socialNetws a
{
					display: block;
					width: 24px;
					height: 24px;
					background: url(../images/Elements.png) no-repeat;
					text-indent: -9999em;
					position: relative;
					-webkit-border-radius: 16px;
					-moz-border-radius: 16px;
					border-radius: 16px;
					-webkit-box-shadow: #d5d5d5 0px 1px 1px;
					-moz-box-shadow: #d5d5d5 0px 1px 1px;
					box-shadow: #d5d5d5 0px 1px 1px;
					behavior: url(ieHack/PIE-1.0beta5/PIE.php);
}

ul#socialNetws a.facebook
{
					background-color: #3b5998;
					background-position: -60px -36px;
}

ul#socialNetws a.twitter
{
					background-color: #ffffff;
					background-position: -84px -36px;
}

ul#socialNetws a:hover,
ul#socialNetws a:active
{
					background-color: #000;
					-webkit-transition: background-color 0.5s linear;
					-moz-transition: background-color 0.5s linear;
					-o-transition: background-color 0.5s linear;
					transition: background-color 0.5s linear;
}
/*	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     			   end HEADER
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 
/*	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     			     MAIN
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */
#content
{
					padding-top: 36px;
}

#page-title
{
					padding: 24px 12px 30px 12px;
					margin: auto;
					background: url(../images/Transp-red.png);
}

#page-title h2
{
					font-size: 60px !important;
					line-height: 72px;
					font-weight: 300;
					color: #fff;
					text-align: center;
					padding: 0;
					margin: 0;
}

#inner-page #page-title h2
{
					font-size: 3.429em !important;
					line-height: 1em;
}

#charts #page-title
{
					width: 288px;
}

#charts #page-title
{
					width: 288px;
}

#charts #page-title.big
{
					width: 603px;
}

#inner-page #page-title
{
					width: 672px;
}

#main-content
{
					position: relative;
					top: -12px;
}

#main-content .outer-wrapper
{
					width 936px;
					padding: 12px;
					background-image: url(../images/Transp-border.png);
}

#main-content .inner-wrapper
{
					width 936px;
					padding: 24px 0;
					background-image: url(../images/Transp-wrapper.png);
					position: relative;
}

h3.credit
{
					font-size: 1em; 
					line-height: 1.715em;
					font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
					font-style: italic;
					padding: 0 132px 0 0;
					position: absolute;
					right: 0;
					top: 42px;
}

h3.credit a
{
					display: block;
					width: 108px;
					height: 60px;
					background: url(../images/Elements.png) no-repeat -132px 0;
					position: absolute;
					right: 18px;
					top: -9px;
}

.current-week
{
					font-weight: 400;	
}

#top-charts ul.labels
{
					padding: 12px 0 12px 0;
}

#top-charts ul.labels li
{
					list-style: none;
					margin-left: 12px;
					position: relative;
					float: left;
}

#top-charts ul.labels li h2
{
					font-size: 1.286em;
					line-height: 1.333em;
					padding: 0;
					position: relative;
}

#top-charts ul.labels li.current h2
{
					color: #fff;
					background-color: #000;
					padding: 6px 24px;
}

#top-charts ul.labels li h2 a
{
					display: block;
					background-color: #fff;
					padding: 6px 24px;
}

#top-charts ul.labels li h2 a:hover,
#top-charts ul.labels li h2 a:active
{
					color: #000;
}

#top-charts ul.labels .arrow-down 
{
					display: block;
					width: 0; 
					height: 0; 
					border-left: 9px solid transparent;
					border-right: 9px solid transparent;
					border-top: 9px solid #000;
					position: absolute;
					left: 18px;
					bottom: -9px;
}

#top-charts table
{
					border-top: 1px solid #c2b8b4;
					border-bottom: 1px solid #fff;
					margin: 12px 0;
}

#top-charts table tr th
{
					font: 700 1em/1.714em 'Open Sans Condensed', 'Arial Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
					color: #9f4322;
					border-top: 1px solid #fff;
					border-bottom: 1px solid #b3a9a6;
					position: relative;
					background: #e0e5e7;
					background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e0e5e7), to(#C4BEBC));
					background: -webkit-linear-gradient(#e0e5e7, #C4BEBC);
					background: -moz-linear-gradient(#e0e5e7, #C4BEBC);
					background: -ms-linear-gradient(#e0e5e7, #C4BEBC);
					background: -o-linear-gradient(#e0e5e7, #C4BEBC);
					background: linear-gradient(#e0e5e7, #C4BEBC);
					behavior: url(ieHack/PIE-1.0beta5/PIE.php);
}

#top-charts table th,
#top-charts table td
{
					padding: 6px;
					vertical-align: middle;
}

#top-charts table td
{
					color: #000;
					background-color: #e7e1df;
					border-top: 1px solid #fff;
					border-bottom: 1px solid #c2b8b4;
}

#top-charts table tr.even td
{
					background-color: #ebeff2;
}

#top-charts .pos
{
					width: 36px;
					height: 36px;
					background-color: #000;
					margin: auto;
					color: #fff;
					line-height: 36px;
					text-align: center;
					position: relative;
					-webkit-border-radius: 36px;
					-moz-border-radius: 36px;
					border-radius: 36px;
					behavior: url(ieHack/PIE-1.0beta5/PIE.php);
}

#top-charts .album-cover
{
					width: 60px;
}

#top-charts .album-cover img
{
					display: block;
					width: 60px;
					height: 60px;
					margin: 0;
					border-bottom: 1px solid #fff;
}

#top-charts h3.song-title
{
					font: 700 1em/1.724em 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
					color: #000;
					padding: 0;
}

#top-charts h3.artist
{
					font: 400 1em/1.724em 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
					color: #000;
					padding: 0;
}

#top-charts h4.album
{
					font: 400 1em/1.724em 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
					color: #000;
					padding: 0;
}

#top-charts .play,
#top-charts .stop
{
					width: 30px;
}

#top-charts .play a,
#top-charts .stop a
{
					display: block;
					width: 24px;
					height: 24px;
					padding: 3px;
					margin: auto;
					text-indent: -9999em;
					border-top: 1px solid #fff;
					border-bottom: 1px solid #a9aeb2;
					position: relative;
					background: #e9eef3;
					background: -webkit-gradient(linear, 0 0, 0 bottom, from(#e9eef3), to(#c2c7cc));
					background: -webkit-linear-gradient(#e9eef3, #c2c7cc);
					background: -moz-linear-gradient(#e9eef3, #c2c7cc);
					background: -ms-linear-gradient(#e9eef3, #c2c7cc);
					background: -o-linear-gradient(#e9eef3, #c2c7cc);
					background: linear-gradient(#e9eef3, #c2c7cc);
					-webkit-border-radius: 30px;
					-moz-border-radius: 30px;
					border-radius: 30px;
					behavior: url(ieHack/PIE-1.0beta5/PIE.php);
}

#top-charts .play a span,
#top-charts .stop a span
{
					display: block;
					width: 24px;
					height: 24px;
					background-image: url(../images/Elements.png);
					background-repeat: no-repeat;
}

#top-charts .play a.music span
{
					background-position: 0 -12px;
}

#top-charts .stop a.music span
{
					background-position: 0 -60px;
}

#top-charts .play a.video span
{
					background-position: -36px -12px;
}

#top-charts .play a:hover,
#top-charts .play a:active,
#top-charts .stop a:hover,
#top-charts .stop a:active
{
					border-top: 1px solid #979899;
					border-bottom: 1px solid #fff;
					position: relative;
					background: #d6d9da;
					background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d6d9da), to(#d9dee1));
					background: -webkit-linear-gradient(#d6d9da, #d9dee1);
					background: -moz-linear-gradient(#d6d9da, #d9dee1);
					background: -ms-linear-gradient(#d6d9da, #d9dee1);
					background: -o-linear-gradient(#d6d9da, #d9dee1);
					background: linear-gradient(#d6d9da, #d9dee1);
}

#top-charts .play a.music:hover span,
#top-charts .play a.music:active span
{
					background-position: 0 -36px;
}

#top-charts .stop a.music:hover span,
#top-charts .stop a.music:active span
{
					background-position: 0 -84px;
}

#top-charts .play a.video:hover span,
#top-charts .play a.video:active span
{
					background-position: -36px -36px;
}

#top-charts .trend
{
					background: url(../images/Elements.png) no-repeat -78px -71px;
					width: 12px;
					height: 3px;
					margin: 0 auto;
}

#top-charts .trend-up
{
					background: url(../images/Elements.png) no-repeat -33px -63px;
					width: 6px;
					height: 19px;
					margin: 0 auto;
}

#top-charts .trend-down
{
					background: url(../images/Elements.png) no-repeat -57px -63px;
					width: 6px;
					height: 19px;
					margin: 0 auto;
}

#top-charts .prev-info {
					margin-top: 6px;
					font-size: .857em;
					text-align: center;
					line-height: 1.5em;
}

#top-charts .prev-info em {
					color: #272524;	
}

#top-charts table td.btn
{
					padding-left: 24px;
}


#top-charts a.default-btn
{
					padding-left: 6px;
					padding-right: 6px;
					font-weight: 700;
					margin-bottom: 0;
}

#top-charts a.default-btn .price
{
					padding-right: 6px;
					border-right: 1px solid #0b1b27;
}

#top-charts a.default-btn .buy
{
					padding-left: 6px;
					border-left: 1px solid #4478a1;
}

#top-charts a.default-btn .price
{
					font-weight: 300;
}

.top-btn
{
					padding-top: 12px;
					text-align: center;
					font-size: 0.929em;
					line-height: 1.846em;
}

.top-btn .arrow-up
{
					margin: auto;
					width: 0; 
					height: 0; 
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-bottom: 5px solid #bad3e6;
}

article
{
					width: 816px;
					margin: auto;
}
/*	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     			   end MAIN
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 

/*	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     			  SIDEBAR
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 
/*	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     			end SIDEBAR
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */
/* *** FORMS *** */
.default label
{
					display: block;
}

.default input,
.default textarea
{
					display: block;
					width: 396px;
					height: 24px;
					padding: 12px 24px;
					margin-bottom: 12px;
					background-color: #dbdee0;
					border: 1px solid #fff;
					color: #000;
					position: relative;
}

.default textarea
{
					height: auto;
}

.default input:focus,
.default textarea:focus
{
					background-color: #000;
					color: #fff; 
					-webkit-transition: background-color 0.5s linear;
			    	-moz-transition: background-color 0.5s linear;
			    	-o-transition: background-color 0.5s linear;
			    	transition: background-color 0.5s linear;
}
/* *** end FORMS *** */

/*	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     			  FOOTER
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 
#pageFooter
{
					width: 100%;
					font-size: .857em; 
					line-height: 1.714em;
					color: #beb7b7;
					position: relative;
}

#pageFooter .logo
{
					width: 420px;
					height: 96px;
					background: url(../images/AirplayChart.png) no-repeat;
					text-indent: -9999em;
					margin: 24px auto;
					opacity: 0.5;
}

p#copyright
{
					margin: 24px auto;
					color: #686665;
}
/*	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ 
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     			  end FOOTER
	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
	§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */ 


	/* 0-1138px */
@media screen and (min-width:0em) and (max-width:1138px)
{
#pageHeader,
#overlayBg,
#pageHeader .container
{
					width: 948px;
}
#pageHeader
{
					left: 6px;
}
}
/* --------------------------------------> end STRUCTURE <--------------------------------------- */