/*font*/
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Patrick+Hand+SC');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Quicksand');
@import url('https://fonts.googleapis.com/css?family=Cabin+Condensed');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Lora');
@import url('https://fonts.googleapis.com/css?family=Playball');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
@import url('https://fonts.googleapis.com/css?family=Droid+Sans');
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* TEMPLATE STYLES
====================================================================== */
	#template-styles {
		background: #5a5a5a;
		width: 280px;
		position:absolute;
		top:50px;
        z-index:999998;
		left: -280px;
		padding-bottom:7px;
        
	}
	.s-s-icon {
		height:26px;
		width:26px;
		padding-left: 6px;
		padding-top: 7px;
	}
	#template-styles div {
		padding: 5px 10px;
	}
	#template-styles h2 {
        font-family: Arial,Helvetica,sans-serif;

		color: #FFFFFF;
		padding: 0;
		
        text-align:center;
		margin:10px;
		font-size: 14px;
	}
	#template-styles h2 a {
		background-color: #404040;
		display: block;
		height: 40px;
		position: absolute;
		right: -39px;
		top: 0;
		width: 39px;
	}
	#template-styles h3 {
		color:#fff;
		font-size:11px;
        font-family: Arial,Helvetica,sans-serif;
		margin: 13px 0 10px 0px;
        font-variant:normal;
        text-decoration:underline;
        
	}
	.colors { 
		list-style:none;
		margin:0;
		padding:0;
		overflow: hidden
	}
	.colors li {
		float:left;
		margin:2px;
        color:#ffffff;
	}
	.colors li a {
		display: block;
		width:33px;
		height:33px;
		cursor: pointer;
	}
  
    .areatype { 
		list-style:none;
		margin:0;
		padding:0;
		overflow: hidden
	}
	.areatype li {
		float:left;
		margin:8px;
        color:white;
	}
.text {color:#ffffff;
}

/****************COLORS*****************/	
	.yellow { background: #f1c832; }
	.green { background: #97cb97; }
	.light-blue { background: #78c0d9; }
	.aqua { background: #58cac0; }
	.navy { background: #495d7e; }
	.pear { background: #b3c211; }
	.peach { background :#fcab54; }	
	.brown { background: #bfa980; }
	.orange {background: #ff7258; }
	.dark { background: #404040; }
	.blue { background: #169fe5; }
	.grey { background: #707070;}
	
/****************BG*****************/	
	.bg1 { background-image: url("/Assets/images/bg/bg-body.jpg"); }
	.bg2 { background-image: url("/Assets/images/bg/billie_holiday.png"); }
	.bg3 { background-image: url("/Assets/images/bg/creampaper.png"); }
	.bg4 { background-image: url("/Assets/images/bg/extra_clean_paper.png"); }
	.bg5 { background-image: url("/Assets/images/bg/gray-dot.png"); }
	.bg6 { background-image: url("/Assets/images/bg/dust.png"); }
	.bg7 { background-image: url("/Assets/images/bg/gplaypattern.png"); }

	.bg8 { background-image: url("/Assets/images/bg/black_twill.png"); }
	.bg9 { background-image: url("/Assets/images/bg/dark_fish_skin.png"); }
	.bg10 { background-image: url("/Assets/images/bg/darkdenim3.png"); }
	.bg11 { background-image: url("/Assets/images/bg/footer_lodyas.png"); }
	.bg12 { background-image: url("/Assets/images/bg/irongrip.png"); }
	.bg13 { background-image: url("/Assets/images/bg/tweed.png"); }
	.bg14 { background-image: url("/Assets/images/bg/mochaGrunge.png"); }
	.bg15 { background-image: url("/Assets/images/bg/retina_wood.png"); }
	.bg16 { background-image: url("/Assets/images/bg/seamless_paper_texture.png"); }
	.bg17 { background-image: url("/Assets/images/bg/wov.png"); }
	.bg18 { background-image: url("/Assets/images/bg/pink_rice.png"); }
	.bg19 { background-image: url("/Assets/images/bg/restaurant.png"); }
	.bg20 { background-image: url("/Assets/images/bg/ricepaper_v3.png"); }
    .bg21 { background-image: url("/Assets/images/bg/restaurant_icons.png"); }
	.colors li a { 
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	.colors li a.active {
		border: 2px solid #f1c832;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	.resp {
		color: #fff;
		font-size: 14px;
		font-family: Arial,Helvetica,sans-serif;
		transition: all 0.3s ease 0s;
		height: 36px;
		line-height: 36px;
		padding: 5px 16px 5px 16px;
	}
	.resp.active {
		background-color: #f1c832;
		color: #fff;
	}
	.resp:hover {
		color: #fff;
		background-color: #cca92a;
	}
/****************FONT*****************/

.fontUL {
    list-style:none;
    width:90%
}
.fontUL li {
    display: none;
    padding: 0.2em;
    border: 1px solid #ccc;
    background-color:#ffffff;

}

.fontUL li.selected,
.fontUL:hover li {
    display: list-item;
}

.fontUL li:hover {
    background-color: #f90;
}
select{
margin-bottom:5px;
}
#latoserif {
    font-family: 'Lato', sans-serif;
}
#arialsanserif {
    font-family: "Arial, sans-serif";
}
#georgiaserif {
    font-family: "Georgia, serif";
}
#oswald {
    font-family: 'Oswald', sans-serif;
}
#raleway {
    font-family: 'Raleway', sans-serif;
}
#partrickhand {
    font-family: 'Patrick Hand SC', cursive;
}
#indieflower {
    font-family: 'Indie Flower', cursive;
}
#quicksand {
    font-family: 'Quicksand', sans-serif;
}
#cabincondensed {
    font-family: 'Cabin Condensed', sans-serif;
}
#lora {
   font-family: 'Abril Fatface', cursive; font-family: 'Lora', serif;
}
#playball {
    font-family: 'Playball', cursive;
}
#amaticsc {
    font-family: 'Amatic SC', cursive;
}
#droidsans {
   font-family: 'Droid Sans', sans-serif;
}
#librefranklin {
   font-family: 'Libre Franklin', sans-serif;
}
#opensans {
   font-family: 'Open Sans', sans-serif;
}