/* ================================ accordian ========================================================== */


/*Define Accordion box*/
.accordion { width:440px; overflow:hidden; margin:10px 0 10px0 0; color:#4f91cd !important; /*background:#999;*/ background:#FFF; padding:0px; }

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#FFF; padding:10px 0 10px 0;}
.accordion section:target:hover { background:#FFF; }
.accordion section:target h2 {width:420px;}
.accordion section:target h2 a{ background: #1852a5;padding:8px 0px 8px 0px;display:block; font-family: 'Droid Sans', sans-serif; font-size:20px; font-weight:700; color:#FFF !important; text-decoration:none;text-align:center;margin-left:10px;
	border-top-right-radius:4px;
	border-top-left-radius:4px;
	border-bottom-right-radius:4px;
	border-bottom-left-radius:4px;
}
.accordion section:target p {display:block;}
.accordion section h2 a{padding:8px 0px 8px 0px;display:block; font-family: 'Droid Sans', sans-serif; font-size:20px; font-weight:700; color:#FFF !important; text-decoration:none;text-align:center; }

/*set style of closed slide*/
.accordion section{ float:left;	overflow:hidden; color:#FFF; cursor:pointer; background: #4f91cd; margin:3px; }
.accordion section:hover { /*background:#4f91cd;*/ background:#1852a5;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
.accordion section:nth-child(1):after{content:'1'; display:none;}
.accordion section:nth-child(2):after{content:'2'; display:none;}
.accordion section:nth-child(3):after{content:'3'; display:none;}
.accordion section:nth-child(4):after{content:'4'; display:none;}
.accordion section:nth-child(5):after{content:'5'; display:none;}
/*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{ width:430px; height:40px;
	-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;
  	border-top-right-radius:4px;
	border-top-left-radius:4px;
	border-bottom-right-radius:4px;
	border-bottom-left-radius:4px;
}
/*Set height of the slide*/
.vertical :target{ height:700px; width:97%; }

.vertical section h2 { position:relative; left:0; top:0px; }

/*Set position of the number on the slide*/
.vertical section:after{ top:-60px;left:810px;}
.vertical section:target:after{ left:-9999px;}







/************************************************************************************************************************/
#accordian-wrapper {
	width: 430px;
	float:left;
	position: relative;
	margin:10px 10px 10px 10px !important;
	padding:0px;
	}

#accordian-wrapper p {
	margin:0px 20px 10px 20px !important;
	color:#a3a4a4 !important;
	text-align: center;
}

#accordian-wrapper h2 {
	font-family: 'Droid Sans', sans-serif; 
	font-size:20px; 
	font-weight:700;
	line-height: 40px; 
	color:#FFF !important;
	text-align: center;
	border-top-right-radius:4px;
	border-top-left-radius:4px;
	border-bottom-right-radius:4px;
	border-bottom-left-radius:4px;
	background-color:#1852a5;
}

.accordionButton {	
	width: 430px;
	height:40px;
	float: left;
	_float: none;  /* Float works in all browsers but IE6 */
	/*border-bottom: 1px solid #FFFFFF;*/
	cursor: pointer;
	border-top-right-radius:4px;
	border-top-left-radius:4px;
	border-bottom-right-radius:4px;
	border-bottom-left-radius:4px;

	display:block; 
	font-family: 'Droid Sans', sans-serif; 
	font-size:20px; 
	font-weight:700;
	line-height: 40px; 
	color:#FFF !important; 
	text-decoration:none;
	background-color:#4f91cd;
	margin:3px; 
	text-align: center;
	}
	
	
.accordionContent {	
	width: 430px;
	float: left;
	_float: none; /* Float works in all browsers but IE6 */
	background: #FFF;
	text-align: center;
	}
	
	
/***********************************************************************************************************************
 EXTRA STYLES ADDED FOR MOUSEOVER / ACTIVE EVENTS
************************************************************************************************************************/

.on {
	color:#FFF !important; 
	padding:0 !important; 
	font-weight:700 !important;; 
	background-color:#FFF !important;
	line-height: 40px !important;
	text-align: center !important;
	border-top-right-radius:4px !important;
	border-top-left-radius:4px !important;
	border-bottom-right-radius:4px !important;
	border-bottom-left-radius:4px !important;
	background-color:#1852a5 !important;
	}
	
.over {
	background-color:#1852a5;
	}