/*** General *****************/
body {
	width:650px; height:520px; padding:0; margin:0; background-color:#FFF; overflow:hidden;
}
a {
	text-decoration:underline;
}
label, p, h4{
	font-family:'exodemi_bold',Arial, Helvetica, sans-serif;
}
label{
	line-height: 33px;
	letter-spacing: .1em;
	font-size: 15px;
	text-transform:uppercase;
}
p{
	font-size: 13px;
	line-height: 21px;
}
h4{
	font-size: 19px;
	letter-spacing:.1em;
}
h6{
	font-style:italic;
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	font-size:12px;
	line-height: 20px;
}

/*** .Nav Class ************************/
.nav{
	width: 650px;
	margin: auto;
	overflow:hidden;
	
	text-align: left;
}
.nav label{
	display: block;
	position: relative;
	padding: 5px 20px;

	height: 34px;
	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-top: -1px;
	overflow: hidden;
	height: 400px;
	position: relative;
	z-index: 10;
}
.content p{
	padding: 2px 15px 5px 10px;
	margin-left:0px;
}
.content h4{
	margin-left:10px;
	margin-top:10px;
	padding:8px 0 7px 8px;
	font-size:14px;
	width:70px; height:18px; background-color:#7f7f7f;
	color:#fff;
}
.content h6{
	padding:8px 15px 10px 15px;
	margin:10px;
	
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
}
.content h6 i{
	padding:0 5px;
	font-size:10px;
}

/*** 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{
	background: rgba(255, 255, 255, 0.5);
}
.content h6{
	color:#666666;
}


/* For Change Style */
.nav label{                       /*Light Color*/
	background-color:#fff;
}
.nav label:hover,
.nav input:checked + label,
.nav input:checked + label:hover{ /*Dark Color*/
	background: #7f7f7f;
}
.nav{                             /*Dark Color*/
	border-color: #fff;
}
.content p{                       /*Dark Color*/
	border-left-color:#7f7f7f;
}
.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);
}