/*** General *****************/
body {
	overflow-y: scroll;
}
a {
	text-decoration:underline;
}

label{
	line-height: 55px;
	font-size: 16px;
	font-weight:bold
}
p{
	font-size: 13px;
	line-height: 21px;
}


/*** .Nav Class ************************/
.nav{
	width: 100%;
	margin:0;
	overflow:hidden;
	text-align: left;
}
.nav label{
	display: block;
	position: relative;
	padding: 5px 20px;
	height: 55px;
	cursor: pointer;
	z-index: 20;
	
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,.5);
	-webkit-box-shadow: 0px 0px 0px 1px rgba(155,155,155,.5);
	-moz-box-shadow:0px 0px 0px 1px rgba(155,155,155,.5);
}
.nav label i{
	font-size:21px;
	padding:3px 10px 0 0;
}
.nav input:checked + label,
.nav input:checked + label:hover{
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,.3), 
		0px 2px 2px rgba(0,0,0,.1);
	-webkit-box-shadow:
		0px 0px 0px 1px rgba(155,155,155,.3), 
		0px 2px 2px rgba(0,0,0,.1);
	-moz-box-shadow:
		0px 0px 0px 1px rgba(155,155,155,.3), 
		0px 2px 2px rgba(0,0,0,.1);
}
.nav label:hover:after,
.nav input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;	
}
.nav input{
	display: none;
}

/*** .content Class *********************/
.content{ margin-bottom:20px;
	margin-top: -1px;
	overflow: hidden;
	
	position: relative;
	z-index: 10;
}
.content p{
	padding: 2px 15px 5px 10px;
	margin-left:15px;
	 line-height:2em;

}



/*** For Change Animation Effects ****/
.nav input:checked ~ .content{       
	z-index:-1;
	
	-webkit-animation-name: slideLeft;
	-webkit-animation-duration: .7s;
	-webkit-animation-iteration-count: 1;
}



/**** Color And Background **********************/
a {
	color:#666666;
}

h4, p{
	color: #777777;
}
.nav label{
	color:#3B4E58;
}
.nav label:hover,
.nav input:checked + label,
.nav input:checked + label:hover{ 
	color:#FFFFFF;
}
.content{ padding-top:20px;
	background:#ffffff
}
.content h6{
	color:#666666;
}


/* For Change Style */
.nav label{ color:#FFF;                        /*Light Color*/
	background-color:#0a3eb6;
}
.nav label:hover,
.nav input:checked + label,
.nav input:checked + label:hover{ /*Dark Color*/
	background: #0a3eb6;
}
.nav{                             /*Dark Color*/
	border-color: #0a3eb6;
}
.content p{                    /*Dark Color*/
	border-left-color:#21CBBB;
}
.content h6{                      /*Dark Color*/
	background-color:rgba(33, 203, 187, .1);
}
.nav label:hover:after,
.nav input:checked + label:hover:after{
	background: transparent url(../../images/arrow_down.png) no-repeat center center;
}
.nav input:checked + label:hover:after{
	background-image:url(../../images/arrow_up.png);
}