/**
 * 	CSS3 Only Horizontal and Vertical Accordion
 * 	Author: Paul Underwood for Hongkiat.com
 *  Website: www.paulund.co.uk
 *  Date: 27/11/11
 *  Version: 1.0
 */

 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/*Define Accordion box*/
.accordion {
	width: 300px;
	overflow: hidden;
	margin: 10px auto;
}

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#f6f6f6; padding:0px;}
.accordion section:target:hover { background:#f6f6f6; }
.accordion section:target h2 {background: #e2e1e1; color:#ec1747;
padding: 8px 10px;}
.accordion section:target h2 a{ color:#ec1747; padding:0;}
.accordion section:target p {display:block;padding: 5px; margin: 0px;}
.accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#ec1747; text-decoration:none; }

/*set style of closed slide*/
.accordion section{ float:left;	overflow:hidden; color:#ec1747; cursor:pointer; background: #e2e1e1; margin:3px; padding:0px; }
.accordion section:hover {background:#e2e1e1;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:normal;}

/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px; 
	-moz-transition:width 0.2s ease-out; 
	-webkit-transition:width 0.2s ease-out;
  	-o-transition:width 0.2s ease-out;
	-ms-transition:width 0.2s ease-out;
  	transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}

/*Header of closed slide*/
.horizontal section h2 { 
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	width:240px; position:relative; left:-100px; top:85px;
} 

/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:0px;left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg); 
}
/*End Horizontal Accordion *********************************************************************/

/*Vertical Accordion *************************************************************************/
.vertical section{
	-webkit-transition:height 0.2s ease-out;
	-moz-transition:height 0.2s ease-out;
  	-o-transition:height 0.2s ease-out;
	-ms-transition:height 0.2s ease-out;
  	transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{
}

.vertical section h2 { margin:0px; }

/*Set position of the number on the slide*/
.vertical section:after{ top:-60px;left:810px;}
.vertical section:target:after{ left:-9999px;}
.key p {background: url(../images/bullet.png) no-repeat 7px 11px;
padding-left: 20px !important;}