a{text-decoration: none;color:#55bbdd;}
a img {outline: none;border:none;}
a:hover{color:#55bbdd !important;}
h1{margin:0em;}
html{height:100%;}
body
{
	background:#666;
	margin:0px;
	font-family: 'Titillium Web', sans-serif;
	color:#fff;
	font-weight: 200; 
	height:100%;
}
ul.colorbars
{
	width:100%;
	margin:0px;
	padding:0px;	
	background-repeat:no-repeat;
	background-position:top center;
	background-size:contain;
	border-radius: 3px;
	overflow:hidden;
	margin-bottom:1em;
	float:left;
}
ul.colorbars li
{
	list-style: none;
	height:20em;
	width:2em;	
	float:left;
	cursor: pointer;
}
ul.colorbars li.on{padding-top:2em;}
#main
{
	
	padding-top:1em;
	width:90%;
	margin:auto;
	position:relative;
	height: 100%;
}
.swatch{height:2em;width:2em;border:1px solid #fff;}	
.swatch.big{height:4em;width:4em;}

br{clear:both;}
.caption{line-height:1em;}
.l {float:left !important;}
.r {float:right !important;}
.txtR{text-align:right !important;}
.txtC{text-align:center !important;}
.big{font-size:1.4em;}
.bigger{font-size:1.8em;}
.small{font-size: .9em;}
.smaller{font-size: .8em;}

a.button
{
	color:#fff;
	font-weight:400;

	padding:.5em 1em;
	border-radius:.4em;
	text-decoration: none;

}
.foot
{
	color:#aaa;
	text-align: center;
	font-size:.7em;
	margin-top: 4em;
	width:100%;
}
#cameraicon{width:70%;position:absolute;top:10%;left:15%;}
.fb-like-container{position:absolute;right:0px;margin-top:1em;}
#nav
{
	top:0px;
	right:0px;
	position:absolute;
}
#nav a
{
	float:left;
	background:#333;
	color:#fff;
	padding:0em 2em;
	margin-right:2px;
}
#nav a.on {background:none;color:#333;}	
#nav a.on:hover {color:#333 !important;}
#photopick{float:left;max-width:50%;position:relative;}
#colorpick{float:left;}
#supplies{width:40%;float:right;}
div.materials{display:none;}
div.materials a
{
	height:3em;
	width:3em;
	border:1px solid #fff;
	float:left;
	text-align: center;
	background-color:#82c687;
	margin-right:1em;
	color:#fff !important;

}
div.materials a img {height:3em;border:none;width:3em;float:right;}
#preview{max-height:20em;max-width:100%;}
@media (max-width: 1100px)
{
	#colorpick{width:50%;}
	ul.colorbars li
	{
	
		height:4em;
		width:4em;	

	}
}
@media (max-width: 640px)
{
	.fb-like-container{margin-top:0em;}
	#main{width:100%;}
	#nav{bottom:0px;top:auto;}
	#nav a{padding: 0em .5em;margin-right:1px;font-size:.9em;}
	h1{font-size:1.2em;display: block;margin:0em;}
	#photopick{width:50%;}
	#colorpick{margin-left:0px;float:left;width:50%;}
	.caption{font-size:.7em;}
	ul.colorbars li{height:2em;width:2em;}
	.swatch.big{height:2em;width:2em;}	
	#supplies{position:absolute;right:.5em;width:2em;}
	div.materials a {height:2em;width:2em;margin-bottom:2px;}
	div.materials a img {height:2em;width:2em;display:block;float:none;}	
	div.materials .caption, div.materials span{display:none;}

	.foot{display:none;}
}