/*custom font for text*/
@import url(http://fonts.googleapis.com/css?family=Nunito);
/*CSS file for fontawesome - an iconfont we will be using. This CSS file imported contains the font-face declaration. More info: http://fortawesome.github.io/Font-Awesome/ */

/*Basic reset*/
* {}

body {
	
	font-family: Nunito, arial, verdana;
}
#accordian {
	background:url(../images/our-products-mid.png) repeat-y;
	width: 278px;
	color: white;
	/*Some cool shadow and glow effect*/
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#accordian2 {
	 margin: 0px; padding: 0px;background:url(../images/our-products-top.png) no-repeat; width: 282px; height: 52px; line-height: 52px; text-align: center; font-family: 'Cabin', sans-serif; font-size: 18px; color: #fff; text-transform: uppercase; }
	 
/*heading styles*/
#accordian ul
{
margin: 0; padding: 0;
}
#accordian h3 {
	
	font-size: 12px;
	line-height: 34px;
	padding: 0 10px;
	cursor: pointer;
	/*fallback for browsers not supporting gradients*/
	background: #18214A; 
	background: linear-gradient(#18214A, #0F142D);
}

/*heading hover effect*/
#accordian h3:hover {
	text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
#accordian h3 span {
	font-size: 16px;
	margin-right: 10px;
}
/*list items*/
#accordian li {
	 list-style-type:none;

}

#accordian ul.first
{
	
}
/*links*/
#accordian ul ul li a {
	color: white;
	text-decoration: none;
	font-size: 11px;
	line-height: 27px;
	display: block;
	padding: 0 15px;
	/*transition for smooth hover animation*/
	transition: all 0.20s;
}

#accordian ul ul li a:before{
	content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"
	}
/*hover effect on links*/
#accordian ul ul li a:hover {
	background: #304192;
	border-left: 5px solid lightblue;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
	display: none;
	margin: 0; padding: 0;
}
#accordian li.active ul {
	display: block;
}

#accordian li.inactive ul {
	display:none;
}