/*
 * Bootstrap accordion
 */



/*
 * Remove Bootstrap defaults
 */

.accordion .panel-heading,
.accordion .panel-group .panel {
    border-radius: 0;
}

.accordion .panel {
	border: inherit;
	box-shadow: inherit;
}

.accordion .panel-group .panel-heading + .panel-collapse > .panel-body,
.accordion .panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: none;
}



/*
 * Cycling UK defaults
 */

.accordion > .container > div {
	padding-left: 0;
	padding-right: 0;
}

.accordion .panel {
    border-bottom: 1px solid #f6b331;
    font-size: 20px;
    line-height: 24px;
}

.accordion .panel-title {
	font-family: "ff-cocon-web-pro","Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 30px;
	line-height: 90px;
    margin-top: 0;
    padding: 0 20px 0 20px;
}

.accordion .panel-title a {
	color: #000;
	text-decoration: none;
	outline: none;
}

.accordion .panel-title a:after {
	content: "";
	display: block;
	float: right;
	background-image: url("../images/system/accordion-buttons.png");
    background-repeat: no-repeat;
    background-position: 0 -42px;
    width: 42px;
    height: 42px;
    position: relative;
    top: 24px;
}

.accordion .panel-title a[aria-expanded="true"]:after {
    background-position: 0 0;
}



.accordion .panel-body {
	padding: 15px 30px 60px 30px;
}

/* .view-accordion .ui-widget-content a {
	color: #009fda;
} */

.view-accordion .button-wrapper a {
	color: #000;
}

.view-accordion .button-wrapper a:hover,
.view-accordion .button-wrapper a:focus,
.view-accordion .button-wrapper a:active {
	color: #fff;
}



/*
 * Front page accordion (Bootstrap)
 */

.accordion .left-container {
	padding-left: 0;
	padding-right: 90px;
}

@media only screen and (max-width : 991px) {
	.accordion .left-container {
		padding-right: 0;
		margin-bottom: 30px;
	}
}

.accordion .right-container {
	padding-right: 0;
}

@media only screen and (max-width : 991px) {
	.accordion .right-container {
		padding-left: 0;
	}
}

.accordion .panel span.icon {
	display: block;
	width: 77px;
	height: 90px;
	background-image: url('../images/system/accordion-icons.png');
	background-repeat: no-repeat;
	margin-right: 25px;
	float: left;	
}

.accordion .panel.join span.icon 				{background-position: 0    0px;}
.accordion .panel.start-cycling span.icon		{background-position: 0  -90px;}
.accordion .panel.fun-friends-family span.icon	{background-position: 0 -180px;}
.accordion .panel.commuting span.icon			{background-position: 0 -270px;}
.accordion .panel.fitness-sport span.icon		{background-position: 0 -360px;}
.accordion .panel.experienced span.icon			{background-position: 0 -450px;}



@media only screen and (max-width : 479px) {
	
	.accordion .panel-heading {
		padding: 10px;
	}

	.accordion .panel-title {
		padding: 0;
		font-size: 18px;
	}

	.accordion .panel-body {
	    padding: 15px 15px 60px;
	}

}



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

	.accordion .panel-title {
		line-height: 34px;
	}

	.accordion .panel span.icon {
		display: none;
	}
	
	.accordion .panel-title a::after  {
		top: -7px;
	}
}


.featured-article .two-column-layout h5,
.ui-accordion .ui-accordion-content h5,
.accordion h5 {
	font-family: "ff-cocon-web-pro","Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 48px;
	line-height: 48px;
	color: #009fda;
	margin-top: 0;
	margin-bottom: 25px;
}

.accordion .left-container p {
	margin-bottom: 30px;
}

.accordion span.yellow-line {
	width: 120px;
	margin-bottom: 30px;
}



@media only screen and (max-width : 479px) {
	.ui-accordion .ui-accordion-content h5,
	.accordion h5 {
		font-size: 36px;
		line-height: 36px;
	}
}


@media only screen and (max-width : 991px) {
	
	.accordion h5,
	.accordion .left-container p {
		text-align: center;
	}
		
	.accordion span.yellow-line {
		width: 180px;
		margin: 0 auto 30px auto;
	}	
}

@media only screen and (max-width : 767px) {
	.ui-accordion .ui-accordion-content h5 {
		text-align: center;
	}
}

.accordion .left-container .btn {
	margin-right: 10px;
	margin-bottom: 20px;
}

@media only screen and (max-width : 991px) {
	.accordion .button-wrapper {
		text-align: center;
	}
	.accordion .left-container .btn {
		min-width: 200px;
	}
}



/*
 * Featured articles for landing pages
 * Two-column text layout for accordions
 */

.node-type-landing-page .featured-article h2 {
	margin-top: 0;
}

.featured-article .two-column-layout,
.ui-accordion .ui-accordion-content .two-column-layout {
	-moz-column-count: 		2;
	-moz-column-gap: 		60px;
	-webkit-column-count: 	2;
	-webkit-column-gap: 	60px;
	column-count: 			2;
	column-gap: 			60px;
}

@media only screen and (max-width : 767px) {
	.featured-article .two-column-layout,
	.ui-accordion .ui-accordion-content .two-column-layout {
		-moz-column-count: 		inherit;
		-webkit-column-count: 	inherit;
		column-count: 			inherit;
		text-align: 			center;
	}	
}

.featured-article.accordion {
	display: inline-block;
}

.featured-article img,
.ui-accordion .ui-accordion-content .two-column-layout img {
	width: 100%;
	height: auto;
	margin: 10px 0;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}



/* JQuery Accordion overrides */

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: inherit;
    background: inherit;
    color: #000;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #000;
    outline: none;
}

.ui-widget-content {
    border: inherit;
    background: inherit;
    color: #000;
}

.ui-widget-content a {
	color: #009fda;
}



/* Landing page accordions - JQuery */

.view-accordion {
	margin-bottom: 90px;
}

.ui-accordion .ui-accordion-header {
	font-family: "ff-cocon-web-pro","Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 18px;    	/* 30px */
	line-height: 20px;  	/* 90px */
	min-height: 90px;   	/* Added */
	display: table;			/* Added */
	vertical-align: middle;	/* Added */
	width: 100%;			/* Added */
	font-weight: 500;
	color: #000;
	border-bottom: none;
}

body.node-type-landing-page .ui-accordion .ui-accordion-header {
	font-size: 22px;
	line-height: 24px;
}

@media only screen and (max-width : 479px) {
	.ui-accordion .ui-accordion-header {
		font-size: 18px;
	}
	body.node-type-landing-page .ui-accordion .ui-accordion-header {
		font-size: 18px;
		line-height: 22px;
	}	
}

.ui-accordion .ui-accordion-icons {
    padding: 10px 30px;
}

.ui-accordion > .views-row {
    border-bottom: 1px solid #f6b331;
}

.ui-accordion .ui-accordion-content {
	font-size: 16px;
	line-height: 22px;
    padding: 15px 30px 60px 30px;
}


@media only screen and (min-width : 480px) and (max-width : 767px) {
	.ui-accordion .ui-accordion-content {
		padding: 15px 15px 30px 15px;
	}
}


@media only screen and (max-width : 479px) {
	.ui-accordion .ui-accordion-content {
		padding: 15px 0px 30px 0px;
	}
}

.ui-accordion-content-active {
    border-bottom: none;
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: relative;
    float: right;
    /* left: 0; 			Removed */
    /* top: 23px;			Removed */
    display: table-cell; 	/* Added */
    margin-top: 0;
	background-image: url("../images/system/accordion-buttons.png");
    background-repeat: no-repeat;
    background-position: 0 -42px;
    width: 42px;
    height: 42px;
}

.ui-accordion .ui-accordion-header[aria-selected="true"] .ui-accordion-header-icon {
    background-position: 0 0;
}

.ui-accordion-content ul {
	padding-left: 30px;
}

.ui-accordion-content ul li {
	margin-bottom: 10px;
}



/*
 * Cycling Statistics page
 */

.graph-title {
	display: block;
	width: 450px;
	margin-left: auto;
	margin-right: auto;
	font-family: "ff-cocon-web-pro","Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	text-align: center;
	margin-top: 60px;
}

.graph-title:after{
	display: block;
	content: "";
	width: 450px;
	height: 1px;
	background-color: #f9b233;
	position: relative;
	margin: 10px auto 30px auto;
}

.graph-graphic:after {
	display: block;
	content: "";
	width: 450px;
	height: 1px;
	background-color: #f9b233;
	position: relative;
	margin: 30px auto 10px auto;
}

.graph-graphic {
	display: block;
	text-align: center;
}
 
.graph-graphic img {
	max-width: 650px;
}

.graph-legend {
	display: block;
	width: 450px;
	margin-left: auto;
	margin-right: auto;
	font-size: 12px;
	line-height: 12px;
}

.graph-key {
	display: inline-block;
	margin-right: 15px;
	margin-bottom: 10px;
}

.graph-key:before {
    font-family: 'FontAwesome';
    font-size: 14px;
    font-weight: 400;
	display: inline-block;
	margin-right: 3px;
	content: "\f0c8";
}

.graph-key.blue:before   		{color: rgba(  0,147,211,1);}
.graph-key.yellow:before 		{color: rgba(251,176, 64,1);}
.graph-key.grey:before   		{color: rgba( 51, 51, 51,1);}
.graph-key.purple:before 		{color: rgba(128,100,169,1);}
.graph-key.pink:before  		{color: rgba(230,  0,126,1);}
.graph-key.green:before   		{color: rgba(205,206,  0,1);}

.graph-key.light-blue:before   	{color: rgba(  0,147,211,0.5);}
.graph-key.light-yellow:before 	{color: rgba(251,176, 64,0.5);}
.graph-key.light-grey:before   	{color: rgba( 51, 51, 51,0.5);}
.graph-key.light-purple:before 	{color: rgba(128,100,169,0.5);}
.graph-key.light-pink:before  	{color: rgba(230,  0,126,0.5);}
.graph-key.light-green:before   {color: rgba(205,206,  0,0.5);}


/*
@media only screen and (min-width : 992px) and (max-width : 1199px) {
	.graph-title,
	.graph-title:after,
	.graph-graphic:after,
	.graph-graphic img,
	.graph-legend {
		width: 340px;
	}
}
*/

/*
@media only screen and (min-width : 768px) and (max-width : 991px) {
	.graph-title,
	.graph-title:after,
	.graph-graphic:after,
	.graph-graphic img,
	.graph-legend {
		width: 280px;
	}
}

@media only screen and (max-width : 569px) {
	.graph-title,
	.graph-title:after,
	.graph-graphic:after,
	.graph-graphic img,
	.graph-legend {
		width: 80%;
	}
}
*/

@media only screen and (max-width : 991px) {
	.graph-title,
	.graph-title:after,
	.graph-graphic:after,
	.graph-graphic img,
	.graph-legend {
		width: 80%;
	}
}