/** 
*	Help Page
*/

/** Initial confs **/
body,
html {
	margin:0;
	padding:0;
}

	
.columns.one, .columns.two, .columns.three{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;    
	box-sizing: border-box;
}

.help {
	border-top: 1px solid #404040;
}
	
.helpPage{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 1008px;
}

.innerwrapper{
	float: left;
	position: relative;
	width: 100%;
	height: auto;
}	

.innerwrapper a{
	font-weight: bold;
	color: rgba(255,255,255,1);
	text-decoration: none;
}

.columns.one{
	width: 20%; 
}

.columns.two{
	width: 50%;
}

.columns.three{
	width: 30%;
}

.columns{
	float: left;
	position: relative;
	padding-right: 16px;
	font-size: 1em;
	margin-top: 16px;
	color: rgba(255,255,255,0.7);
	padding-left: 16px;
	border-left: 1px solid rgba(255,255,255,0.1);
	line-height: 16px;
}
.columns .inner{
	float: left;
	position: relative;
	width: 100%;
}

.columns:first-child{
	border-left: 0px;
}

.content, p.content, .content p {
 	color: #CCC;
 }
.content p a{
	color: #FFF;
}

.logo{
	float: left;
	position: relative;
	width: 90%;
	margin-bottom: 10px;
}

.logo img{
	max-width:100%;
    height:auto;
    display:block;
}

.logo p{
	margin-bottom: 55px;
	font-weight:bold;
	font-size: 1.2em;
}


.columns .menu a:active li, .columns .menu a.selected li{
	color: #ED4B94;
}

.columns .menu{
	margin-top: 5px;
	float: left;
	position: relative;
	width: 100%;
	padding: 0;
}

.columns .menu a{
	float: left;
	position: relative;
	width: 100%;
	height: 32px;
	margin-bottom: 2px;
	margin-top:5px;

}

.columns .menu li{

	font-size: 1.1em;
	font-weight:bold;
	float: left;
	position: relative;
	width: 100%;
	height: 100%;
	color: #FFF;
}

.main-title{
	font-size: 1.6em;
	color: rgba(255,255,255,1);
	height: 85px;
	line-height: 23px;
}

.section .main-title{
	margin: 0px;

}

.section {
	color: #FFF;
  	font-size: 1.1em;
  	line-height: 17px;
  	margin-bottom: 50px;
 }


.section .subsection{
 	margin-bottom: 10px;
 }

.section .subsection .title{
	margin-bottom: 10px;
	font-weight:bold;
	font-size: 1.2em;
}

.section .subsection .content, .faqContent {
	width: 100%;
}

.section .subsection .content .faqContent {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 5px;
	padding-bottom: 5px;
}



/* Styling the FAQ */

.faqQuestion {
	font-weight:bold;
	width: 100%;
	line-height: 17px;
}

.faqQuestion.selected {
	color: #ED4B94;
}

.bbc_radio_two .faqQuestion.selected {
	color: #CC6600;
}

.bbc_radio_three .faqQuestion.selected {
	color: #CD202C;
}

.bbc_6music .faqQuestion.selected {
	color: #23575D;
}

.bbc_asian_network .faqQuestion.selected {
	color: #9F1553;
}
.bbc_radio_four .faqQuestion.selected {
	color: #002C5F;
}


.faqAnswer{
	margin-top: 5px;
    display:none;     
}
 
/* This selector selects the box currently targeted */     
.faqAnswer:target{
    display:block;
}


	
@media screen and (max-width: 1008px) {
	.helpPage{
		width: 100%;
	}
}
	
@media screen and (max-width: 750px) {
	.columns.one{
		width: 25%; 
	}

	.columns.two, .columns.three{
		width: 75%;
	}		
	.columns.three{
		float:right;
	}
}

@media screen and (max-width: 600px) {

	.helpPage{
		padding: 0;
	}
	
	.columns.one, .columns.two, .columns.three{
		width: 100%;
		height: auto;
		border: 0px;
		margin-top: 0px;
	}
	
	.columns p{
		padding-left: 0;
		border-left: none;
	}
	
	.columns .sec_head{
		height: auto;
		margin-bottom: 16px;
	}

	.columns .menu li{
		background-color: #333333;
	}

	.columns .menu a li{
		padding: 8px;
	}	


	.logo{
		float: left;
		position: relative;
		height: 90px;
		width: 30%;
	}

	.section {
		display: block;
	}

	.main-title{
		height: 35px;
	}
		
}

@media screen and (max-width: 400px) {
	.columns .menu a li{
		padding: 8px;
	}	
}