/*
Theme Name: MP3SongPlays 2008
Theme URI: http://www.mp3songplays.com/

	MP3SongPlays 2008
	http://www.mp3songplays.com/



*/



/* ## XHTML basis elements ############################ start # */

body,html {
	
	margin:0;
	padding:0;
	height:100%;
	
}

body {	

	background: url(img/bg.jpg) repeat-x transparent;
	
}

br {

	clear:both;

}

h2 { 

	margin-top:0; 
	padding-top:0; 
	font-weight:normal;
	
}

.hidden {  display:none;  }

div {

	margin:0;
	padding:0;
	float:none;
	width:100%;
	position:relative;

}

::selection {
	background:#aaa;
	color:#000;
}

::-moz-selection{
	background:#aaa;
	color:#000;
}



/* ## XHTML basis elements ########################### end ### */



/* ## main elements ################################## start # */

#mainwrapper {

	margin:0 auto;
	width:100%;
	position: relative;
	min-height: 100%;
					
}

#header {
	
	height:239px;
	background: url(img/header.jpg) no-repeat transparent;
	overflow:hidden;
	width:748px; 
	margin: 0 auto;

}

#index {  

	float:left;
	width:500px;
	height:80px;  
	position:absolute;
	top:0;
	left:150px; 
	z-index: 10;	
	
}

#index a {

	display:block;
	width:100%;
	height:100%;
	text-indent:-99999px;

}

#hackersafe {

	position:absolute;
	top:0;
	left:100px;
	z-index: 19;

}

#hackersafe img { border:none; }

#intro {

	float:right;
	width:349px;
	height:43px;
	margin:0;
	padding:0;
	overflow:hidden;
	position: absolute;
	top:113px;
	left:300px;
	color:#fff;
	text-align: justify;
	line-height: 16pt;
}

#intro p { margin:0; padding:0; position: absolute; }

#content {

	float:left;
		
}

.column-1 {

	background: url(img/column-1.gif) repeat-x #353535;
	background-position: 0 100%;
	border-top:2px solid #1c1c1c;
	padding: 20px 0 ;

}

.column-2 {

	border-top:2px solid #eea04b;
	background: url(img/column-2.gif) repeat-x #ec9332;
	background-position: 0 100%;
	padding: 0 0 20px 0 ;

}

.column-2 .col-a {

	background: url(img/shade-1.gif) no-repeat transparent;
	background-position: 100% 0;
	padding-top:20px;
	float:left;
	width:50%;

}

.column-2 .col-b { 

	background: url(img/shade-2.gif) no-repeat transparent;
	float:left; 
	padding-top:20px;
	width:45%;
}

.column-3 {

	border-top:2px solid #7ea485;
	background: url(img/column-3.gif) repeat-x #1a929c;
	background-position: 0 100%;
	padding: 0 0 20px 0 ;

}

.column-3 .col-a {

	background: url(img/shade-3.gif) no-repeat transparent;
	background-position: 100% 0;
	padding-top:20px;
	float:left;
	width:50%;

}

.column-3 .col-b { 

	background: url(img/shade-4.gif) no-repeat transparent;
	float:left; 
	padding-top:20px;
	width:45%;
}

.column-4 {

	border-top:2px solid #23b768;
	background: url(img/column-4.gif) repeat-x #199d4a;
	background-position: 0 100%;
	padding: 0 0 20px 0 ;

}

.column-5 {

	border-top:2px solid #086b71;
	background: url(img/column-5.gif) repeat-x #fff;
	background-position: 0 100%;
	padding: 20px 0 40px 0 ;
	font-size: 11pt;
	height:100%;

}

.column-4 .col-a {

	background: url(img/shade-5.gif) no-repeat transparent;
	background-position: 100% 0;
	padding-top:20px;
	float:left;
	width:50%;

}

.column-4 .col-b { 

	background: url(img/shade-6.gif) no-repeat transparent;
	float:left; 
	padding-top:20px;
	width:45%;
}

.col-a p { 

	text-align: right; 
	padding-right:20px; 
	
}

.col-a p, .col-b p { 

	padding-left:20px; 
	color:#fff; 
	font-size: 11pt;
	
}

.column-5 {
	
	margin-bottom:50px;

}

/* ## main elements ################################### end ### */

/* ## navigation ###################################### start # */

.main-nav, .fnav {

	width:100%;
	list-style-type:none;
	margin:0;
	padding:0;
	height:64px;
	position:absolute;
	top:176px;
	left:0;
	
}

.main-nav li {

	float:left;
	height:100%;
	text-indent:-99999px;
	cursor: pointer;
	
}

.main-nav li a { 
	
	display:block; width:100%; height:100%; 
	background: url(img/main-nav-hover.gif) no-repeat transparent;
	background-position: -1000px -1000px;

}

.main-nav li.n1 { width:210px; }
.main-nav li.n1 a:hover { background-position: 17px 19px; }

.main-nav li.n2 { width:198px; }
.main-nav li.n2 a:hover { background-position: -219px 19px; }

.main-nav li.n3 { width:155px; }
.main-nav li.n3 a:hover { background-position: -450px 19px; }

.main-nav li.n4 { width:155px; }
.main-nav li.n4 a:hover { background-position: -654px 19px; }

.fnav {

	position:relative;
	top:0;
	left:7px;
	background-color: #383838;
	height:63px;
	width:732px;
	overflow: hidden;

}

.fnav li {

	float:left;	
	height:100%;

}

.fnav li span, .main-nav li span {

	display:block;
	width:100%;
	height:100%;

}

.fnav li a, .fnav li span a {

	display:block;
	width:100%;
	height:100%;
	background: url(img/fnav.gif) no-repeat transparent;
	text-indent: -99999px;

}

.fnav li.f1 { width:122px; }
.fnav li.f1 a.selected { background-position: 0 100%; }

.fnav li.f2 { width:122px; }
.fnav li.f2 a { background-position: -122px 0; }
.fnav li.f2 a.selected { background-position: -122px 100%; }

.fnav li.f3 { width:161px; }
.fnav li.f3 a { background-position: -244px 0; }
.fnav li.f3 a.selected { background-position: -244px 100%; }

.fnav li.f4 { width:107px; }
.fnav li.f4 a { background-position: -405px 0; }
.fnav li.f4 a.selected { background-position: -405px 100%; }

.fnav li.f5 { width:220px; }
.fnav li.f5 a { background-position: -512px 0; }
.fnav li.f5 a.selected { background-position: -512px 100%; }


/* ## navigation ###################################### end ### */



/* ## layout elements ################################# start # */


.float-left {  float:left;  }

.float-right {  float:right;  }

#slider .float-right {

	margin-right:30px;
	margin-left:10px;

}

#slider .float-left {

	margin-right:10px;

}

.centered {  text-align:center;  }

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

.img-os { vertical-align: middle; }

#corner {

	position:absolute;
	z-index: 1;
	top:0;
	right:0;
	width:616px;
	height:182px;
	background: url(img/top.png) no-repeat transparent;

}

.col-b ul {

	list-style-type: none;
	padding:0 0 0 20px;
	margin:0;

}

.col-b ul li {

	background: url(img/li.gif) repeat-x transparent;
	background-position: 0 100%;
	padding: 5px;
	color:#fff;

}

.col-b ul li ul li {

	background: none;
	font-size:7pt;
	line-height:6pt;

}

.col-b ul li ul li a {

	font-size:9pt;
	text-indent: 0;

}

.col-b ul li ul li:hover {

	background-color:#2BAF5C;

}

ul.features {

	margin:0;
	padding:0;
	list-style-type: none;
	
}

ul.features li {

	background: url(img/accept.png) no-repeat transparent;
	padding: 0 0 0 20px;

}

/* ## layout elements ################################# end ### */

/* ## element "boxes" ################################# start # */


.box-1 { 

	width:748px; 
	margin: 0 auto;

}

#slider {

	width:748px;
	height:710px;
	margin: 0 auto;
	background: url(img/featurette.gif) no-repeat transparent;
	background-position: 0 100%;

}

#slider .text {

	width:715px;
	padding:1px;
	font-size: 10pt;

}

#slider .scroll {

	height:610px;
	overflow: hidden;
	padding-right:35px;
	width:680px;
	left:20px;

}

#slider .text ul {

	list-style-type:none; 
	margin-left:0;
	padding-left:0;

}

#slider .text ul li {

	background: url(img/tick.png) no-repeat transparent;
	padding-left:20px;

}

#slider table td { padding:10px; }

ul.testimonial {

	list-style-type: none;
	margin:0 0 0 20px;
	padding:0;
	width:100%;	

}

ul.testimonial li {

	background: url(img/testimonial.gif) no-repeat transparent;
	background-position: 0 100%;
	padding-bottom:20px;
	margin-bottom:20px;

}

ul.testimonial li p {

	background: url(img/testimonial.gif) no-repeat transparent;
	margin:0;
	padding: 10px 50px 0 70px;
	color:#000;
	text-align: left;

}

/* ## element "boxes" ################################ end ### */

/* ## element "headings" ############################# start # */

h3.testimonials { background: url(img/h3-testimonials.gif) no-repeat transparent; }
h3.guarantee { background: url(img/h3-guarantee.gif) no-repeat transparent; }
h3.screens { background: url(img/h3-screens.gif) no-repeat transparent; }
h3.myspace { background: url(img/h3-myspace.gif) no-repeat transparent; }
h3.affiliates { background: url(img/h3-affiliates.gif) no-repeat transparent; }
h3.payment { background: url(img/h3-payment.gif) no-repeat transparent; }
h3.useful { background: url(img/h3-useful.gif) no-repeat transparent; }
h3.platforms { background: url(img/h3-platforms.gif) no-repeat transparent; }

.col-a h3, .col-b h3 {

	background-position: 100% 0;
	text-indent: -99999px;
	margin-top:0;
	height:27px;

}

.col-b h3 {	background-position: 0 0; }

.badge-satisfact {

	position: absolute;
	top:45px;
	right:0;

}

/* ## element "headings" ############################# end ### */

/* ## element "footer" ############################### start # */

#footer {
	
	clear:both;
	width:100%;
	background-color:#353535;
	padding:20px 0;
	color:#afafaf;
	font-size:8pt;
	position: relative;
	margin-top: -7.2em;

}

#footer p {
	
	text-align: center;
	padding-top:0;
	margin-top:0;

}

#footer ul {

	list-style-type: none;
	margin:0 auto;
	padding:0;
	width:220px;

}

#footer ul li { display:inline; }

/* ## element "footer" ############################### end ### */



/* ## global text styles ############################# start # */

body {

	font-family: Trebuchet MS, Verdana, Arial, Sans;
	color:#000;
	font-size:12pt;
	
}



/* ## global text styles ############################# end ### */

/* ## forms ########################################## start # */

fieldset { 

	border:none; 
	width:100%;
	margin:0;
	padding:0;
	float:none;
	position: relative;
	
}

p.err {
	
	background-color: #f3f3f3;
	padding:10px;
	width:94%;

}

fieldset small {

	color:#fff;
	font-size:8pt;
	font-style: italic;
	display:block;

}

.column-5 fieldset {

	background: url(img/form.gif) no-repeat transparent;
	background-position: 0 100%;
	padding: 0 0 20px 0;
	width: 90%;
	margin: 0 auto;

}

.column-5 fieldset form {

	background: url(img/form.gif) no-repeat transparent;
	padding:30px 40px 0 40px;
	margin:0 0 0 0;
	
}

.column-5 fieldset input, .column-5 fieldset textarea {

	padding:5px;
	font-size:11pt;
	border:1px solid #cecece;
	width: 565px;

}

.column-5 fieldset label {

	color:#353535;

}

.column-5 fieldset input.err, .column-5 fieldset textarea.err {

	border:1px solid red;
	background: url(img/err.gif) no-repeat #fff;
	background-position: 100% 0;
	
}

.column-5 fieldset input:hover, .column-5 fieldset input:active, .column-5 fieldset input:focus,
.column-5 fieldset textarea:hover, .column-5 fieldset textarea:active, .column-5 fieldset textarea:focus {

	border:1px solid #333;

}

#fieldset-myspace { 
	
	text-align: right; 
	right:20px;
	padding-bottom:50px;
	
}

#fieldset-myspace input {

	border:3px solid #0f7881;
	background-color:#fff;
	padding:7px;
	font-size:12pt;

}

#fieldset-myspace input:hover, #fieldset-myspace input:active, #fieldset-myspace input:focus {

	border:3px solid #0A4C4F;

}

#APPENDITEM003, #APPENDITEM004, #APPENDITEM005, #APPENDITEM006 {

	border:none;
	width:auto;
	background: transparent;
	
}

/* ## forms ########################################## end ### */


/* ## buttons ######################################## start # */

#button-go {

	position: relative;
	top:-3px;
	background: url(img/bt-go.gif) no-repeat transparent;
	width:65px;
	height:39px;
	border:none;
	text-indent: -99999px;

}

#button-go:hover {

	background-position: 0 100%;

}

#button-submit {

	background: url(img/bt-submit.gif) no-repeat transparent;
	width:105px;
	height:39px;
	border:none;
	text-indent: -99999px;

}

#button-submit:hover {

	background-position: 0 100%;

}

#button-cartsubmit {

	background: url(img/bt-cart.gif) no-repeat transparent;
	width:120px;
	height:39px;
	border:none;
	text-indent: -99999px;

}

#button-cartsubmit:hover {

	background-position: 0 100%;

}

#button-affiliate:link, #button-affiliate:active, #button-affiliate:visited {

	background: url(img/bt-affiliate.gif) no-repeat transparent;
	float:right;
	width:105px;
	height:39px;
	text-indent: -99999px;
	margin-left:5px;

}

#button-affiliate:hover {

	background-position: 0 100%;

}

/* ## buttons ######################################## end ### */

/* ## link styling ################################### start # */

a:link, a:active, a:visited {

	color:#57a10f;
	font-weight:bold;
	text-decoration: none;

}

a:hover { color:#2d5c00; text-decoration: none; }

a:link img, a:active img, a:visited img {

	border: 1px solid #8d4b03;

}

a:hover img {

	border: 1px solid #000;

}

.column-1 a:link img, .column-1 a:active img, .column-1 a:visited img, .column-1 a:hover img,
.column-5 a:link img, .column-5 a:active img, .column-5 a:visited img, .column-5 a:hover img {

	border:none;

}

#footer a:link, #footer a:active, #footer a:visited {

	color:#c8c8c8;
	font-weight:normal;

}


#footer a:hover {  color:#fff;  }

.screen { 

	position:relative; 
	width:311px;
	height:102px;
	overflow: hidden;
	display: block;

}
.screen span {

	text-indent:-999999px;
	background: url(img/magnify.png) no-repeat transparent;
	display:block;
	width:311px;
	height:100px;
	position:relative;
	top:-101px;
	left:1px;

}

.screen:hover span {

	background-position: 0 100%;

}

.col-b ul li a {

	color:#fff;
	font-weight: normal;

}

/* ## link styling ################################### end ### */

/* ## overlay ######################################## start # */

div.blockPage {

	width: 267px;
    top:    30%;
    left:   40%;
    text-align: center;
	background: url(img/download.png) no-repeat transparent;
    border: none;
    
    
}

div.blockMsg {

	width:225px;
	height:180px;
    padding: 100px 20px 20px 20px;
    color: #777;
    font-size:10pt;
    
}

div.blockMsg #dclose {

	text-indent:-99999px;
	width:60px;
	height:25px;
	position:absolute;
	bottom:30px;
	left:100px;

}


/* ## overlay ######################################## end ### */