﻿.box
{
	width: 400px;	
	padding: 10px;
}

.popbox
{
	z-index: 9999;

}

	.popbox .open
	{
		cursor: pointer;
		text-decoration: none;
		color: #000;
		font-size: 20px;
	}

.z-section > h3 i {	
	display: inline;
	width: auto;
	height: auto;
	line-height: normal;
	font-size: 120%
}

   .z-section > h3 span.z-icon {
		margin-right: 8px;
	}

/*************font-awsome list*/
#font-awesome-list
{
	max-height: 400px;
	overflow-y: scroll;
}
#font-awesome-list .page-header 
{ 
	margin-top: 5px;
	padding-bottom:9px;
	border-bottom:1px solid #eee;
	font-size: 24px;
}
#font-awesome-list ul
{
	-webkit-column-count: 2;
	-webkit-column-gap: 10px;
	-moz-column-count: 2;
	-moz-column-gap: 10px;
	column-count: 2;
	column-gap: 10px;
	margin: 0;
}

#font-awesome-list li
{
	list-style: none;
}

	#font-awesome-list li i:before
	{
		font-size: 24px;
		position: relative;
		top: 4px;
		color: #666;
	}

	#font-awesome-list li a
	{
		text-decoration: none;
		color: #000;		
		cursor: pointer;
	}
#font-awesome-list span
{
	display: inline-block;
	font-family: 'proxima-nova',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

#font-awesome-list i
{
	width: 50px;
}

#font-awesome-list .icon-name
{
	width: 120px;
	margin-left: 5px;
	text-align: left;
}

#font-awesome-list .icon-value
{
	color: #AE0000;
}

/*************************************/
.styleswitch
{
	border: 1px solid #e6e6e6;
	float: left;
	display: block;
	padding: 1px;
	margin: 5px;
}

	.styleswitch span
	{
		width: 30px;
		height: 30px;
		cursor: pointer;
		float: left;
		border-radius: 0;
		background-color: #dfdfdf;
		margin: 0;
	}

	.styleswitch.white span
	{
		background-color: #fff;
	}

	.styleswitch.crystal span
	{
		background-color: #f5f5f5;
		background: #fff;
		background: -moz-linear-gradient(top,rgba(255,255,255,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,1)),color-stop(50%,rgba(243,243,243,1)),color-stop(51%,rgba(237,237,237,1)),color-stop(100%,rgba(255,255,255,1)));
		background: -webkit-linear-gradient(top,rgba(255,255,255,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: -o-linear-gradient(top,rgba(255,255,255,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: -ms-linear-gradient(top,rgba(255,255,255,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to bottom,rgba(255,255,255,1) 0,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%);
	}

	.styleswitch.silver span
	{
		background-color: #dfdfdf;
		background-color: #f2f0f0;
		background-image: -webkit-gradient(linear,0 0,0 100%,from(#fdfcfc),to(#f2f0f0),color-stop(.5,#fbf9f9),color-stop(.5,#f7f5f6));
		background-image: -webkit-linear-gradient(top,#fdfcfc,#fbf9f9 50%,#f7f5f6 50%,#f2f0f0);
		background-image: -moz-linear-gradient(top,#fdfcfc,#fbf9f9 50%,#f7f5f6 50%,#f2f0f0);
		background-image: -o-linear-gradient(top,#fdfcfc,#fbf9f9 50%,#f7f5f6 50%,#f2f0f0);
		background-image: -ms-linear-gradient(top,#fdfcfc,#fbf9f9 50%,#f7f5f6 50%,#f2f0f0);
	}

	.styleswitch.gray span
	{
		background-color: #b6b6b6;
		background: #f5f5f5;
		background: -moz-linear-gradient(top,#dbdbdb 0,#f2f2f2 100%);
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#dbdbdb),color-stop(100%,#f2f2f2));
		background: -webkit-linear-gradient(top,#dbdbdb 0,#f2f2f2 100%);
		background: -o-linear-gradient(top,#dbdbdb 0,#f2f2f2 100%);
		background: -ms-linear-gradient(top,#dbdbdb 0,#f2f2f2 100%);
		background: linear-gradient(to bottom,#dbdbdb 0,#f2f2f2 100%);
	}

	.styleswitch.black span
	{
		background-color: #000;
		background: #333;
		background: -webkit-gradient(linear,0 0,0 100%,from(#333),to(#555));
		background: -webkit-linear-gradient(top,#333,#555);
		background: -moz-linear-gradient(top,#333,#555);
		background: -ms-linear-gradient(top,#333,#555);
		background: -o-linear-gradient(top,#333,#555);
	}

	.styleswitch.green span
	{
		background-color: #3b7c33;
		background: #5fae53;
		background: -webkit-gradient(linear,0 0,0 100%,from(#5fae53),to(#3b7c33));
		background: -webkit-linear-gradient(top,#5fae53,#3b7c33);
		background: -moz-linear-gradient(top,#5fae53,#3b7c33);
		background: -ms-linear-gradient(top,#5fae53,#3b7c33);
		background: -o-linear-gradient(top,#5fae53,#3b7c33);
	}

	.styleswitch.blue span
	{
		background-color: #00b0d8;
		background: #1abde7;
		background: -moz-linear-gradient(top,#1abde7 0,#1c9dd1 100%);
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#1abde7),color-stop(100%,#1c9dd1));
		background: -webkit-linear-gradient(top,#1abde7 0,#1c9dd1 100%);
		background: -o-linear-gradient(top,#1abde7 0,#1c9dd1 100%);
		background: -ms-linear-gradient(top,#1abde7 0,#1c9dd1 100%);
		background: linear-gradient(to bottom,#1abde7 0,#1c9dd1 100%);
	}

	.styleswitch.lightblue span
	{
		background-color: #d9edf2;
		background: -moz-linear-gradient(top,#f7fbfc 0,#d9edf2 40%,#add9e4 100%);
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f7fbfc),color-stop(40%,#d9edf2),color-stop(100%,#add9e4));
		background: -webkit-linear-gradient(top,#f7fbfc 0,#d9edf2 40%,#add9e4 100%);
		background: -o-linear-gradient(top,#f7fbfc 0,#d9edf2 40%,#add9e4 100%);
		background: -ms-linear-gradient(top,#f7fbfc 0,#d9edf2 40%,#add9e4 100%);
		background: linear-gradient(to bottom,#f7fbfc 0,#d9edf2 40%,#add9e4 100%);
	}

	.styleswitch.red span
	{
		background-color: #d34332;
		background: #d84a38;
		background: -moz-linear-gradient(top,#dd4b39 0,#d14836 100%);
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#dd4b39),color-stop(100%,#d14836));
		background: -webkit-linear-gradient(top,#dd4b39 0,#d14836 100%);
		background: -o-linear-gradient(top,#dd4b39 0,#d14836 100%);
		background: -ms-linear-gradient(top,#dd4b39 0,#d14836 100%);
		background: linear-gradient(to bottom,#dd4b39 0,#d14836 100%);
	}

	.styleswitch.orange span
	{
		background-color: #f39c11;
		background: #f2825b;
		background: -moz-linear-gradient(top,#f2825b 0,#e55b2b 50%,#f07146 100%);
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f2825b),color-stop(50%,#e55b2b),color-stop(100%,#f07146));
		background: -webkit-linear-gradient(top,#f2825b 0,#e55b2b 50%,#f07146 100%);
		background: -o-linear-gradient(top,#f2825b 0,#e55b2b 50%,#f07146 100%);
		background: -ms-linear-gradient(top,#f2825b 0,#e55b2b 50%,#f07146 100%);
		background: linear-gradient(to bottom,#f2825b 0,#e55b2b 50%,#f07146 100%);
	}

	.styleswitch.deepblue span
	{
		background-color: #1e69de;
		background: #479fed;
		background: -moz-linear-gradient(top,#479fed 0,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#479fed),color-stop(50%,#54a3ee),color-stop(51%,#3690f0),color-stop(100%,#1e69de));
		background: -webkit-linear-gradient(top,#479fed 0,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
		background: -o-linear-gradient(top,#479fed 0,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
		background: -ms-linear-gradient(top,#479fed 0,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
		background: linear-gradient(to bottom,#479fed 0,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
	}

	.styleswitch.yellow span
	{
		background-color: #f8c54d;
	}

	.styleswitch.purple span
	{
		background-color: #df6dc2;
	}
