html{
/*Android fix for background*/
 height:100%;
}

body {
		background-size: cover; 
		xbackground-size: 100% 100%;	
		xbackground-image: url('tfmback2.jpg'); 
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: center top;
		background-color:#fefefe;
		font-size:1.8vh;
}

.displayarea { 
		margin-left: auto; 
		margin-right: auto; 
		background: transparent;  
		margin-top: 1em; 
}

h1 { 	
		width: 100%; 
		text-align: center; 
		padding-top: 0.5em; 
		text-shadow:0px 0px 0px rgba(0,0,0,1),
					0px 0px 0px rgba(0,0,0,1),
					0px 0px 0px rgba(0,0,0,1),
					0px 0px 0px rgba(255,255,255,0.9),
					0px 0px 10px rgba(255,255,255,0.2); 

}

.flag { 
		vertical-align: middle; 
		height: 1em; 
}

.ctrycode { 
		color: #9ac; 
		font-size: smaller; 
}

.mainblurb {
		margin-top:1em;
		font-size:1.5em;
		line-height: 1.3em;
		padding:1em 2em;
		border-radius:12px;
		margin-bottom:1em;
		-moz-border-radius: 12px;
		-webkit-border: 12px;
		xbackground:#fff;
		background:rgba(255,255,255,0.92);
}


.searchme { 
		width: 38%; 
		float: left; 
		border: 1px solid #b33; 
		margin: 1em; 
		padding: 1em; 
		margin-left: 3em;
		border-radius: 6px 6px 6px 6px;
		-moz-border-radius: 6px 6px 6px 6px;
		-webkit-border: 6px 6px 6px 6px;
}

.signup { 
		width: 38%; 
		float: right; 
		border: 1px solid #b33; 
		margin: 1em; 
		padding: 1em; 
		margin-right: 3em; 
		border-radius: 6px 6px 6px 6px;
		-moz-border-radius: 6px 6px 6px 6px;
		-webkit-border: 6px 6px 6px 6px;		
}
	
			
			
			

.mainarea { width: 90%; 
			background:transparent; 
			margin-left: auto;
			margin-right: auto;
			xmargin-top:3em;
			padding:1em;
			margin-top:-1.5em;
			padding-top:2.5em;
			float:none;
			max-width:800px;			
 }
 
 #editpage .mainarea {
			xbackground: rgba(0,0,0,0.07);
}
 
 .pgcontrol {
				border-top:4px solid #bbb; 
				xpadding: 1em;
				padding-bottom:0em;
				margin-left:0px;
				background: rgba(0,0,0,0.05);
}
 
.displayarea {
				width:100%;
				border-radius: 12px 12px 0px 0px;
				-moz-border-radius: 12px 12px 0px 0px;
				-webkit-border: 12px 12px 0px 0px; 				
}

 .headingarea {
				background: #000;
				color: #fff;
				width:100%;
				text-align: center;
				margin-top:1em;
				xbox-shadow: 0px 7px 10px #888888;
				box-shadow: 0px 6px 8px rgba(80,80,80,0.5);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+35,232323+100 */
background: #000000; /* Old browsers */
background: -moz-linear-gradient(45deg, #000000 35%, #232323 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(35%,#000000), color-stop(100%,#232323)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, #000000 35%,#232323 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, #000000 35%,#232323 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg, #000000 35%,#232323 100%); /* IE10+ */
background: linear-gradient(45deg, #000000 35%,#232323 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#232323',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+4 */
background: #000; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 4%, #0e0e0e 97%, #4d4e4d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(4%,#0e0e0e), color-stop(97%,#0e0e0e) color-stop(100%, #4d4e4d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 4%, #0e0e0e 97%, #4d4e4d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 4%, #0e0e0e 97%, #4d4e4d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 4%, #0e0e0e 97%, #4d4e4d 100%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 4%, #0e0e0e 97%, #4d4e4d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

/* Modded */
background: #000; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 8%, #0e0e0e 94%, #4d4e4d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(8%,#0e0e0e), color-stop(94%,#0e0e0e) color-stop(100%, #4d4e4d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 8%, #0e0e0e 94%, #4d4e4d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 8%, #0e0e0e 94%, #4d4e4d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 8%, #0e0e0e 94%, #4d4e4d 100%); /* IE10+ */
background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 8%, #0e0e0e 94%, #4d4e4d 100%); /* W3C */

background: linear-gradient(to bottom, #616e88 0%,#445379 8%, #34516f 94%, #60738a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
				}
				
.xx_headerleft {   font-size: 1.8em;
				padding: 1.1em;
				padding-left:5%;
				padding-bottom:0em;
				padding-top:0.2em;
				margin-top:1.1em;
}

.headerleft img {
				height: 3em;
				vertical-align: top;
				padding-right:0em;
				margin-top:-1.1em;
				margin-right:-0.4em;
}
						
.xx_headermain { 
			  font-size:2.6em;
			  color: #fff; 
			  margin-left:auto;
			  margin-right:auto;
			  vertical-align: middle; 
			  height:auto;
			  padding-bottom:0.4em;
			  margin-top:-0.3em;
 }
 
 .headerleft { font-size: 1.0em;
				margin-top:0.4em;
				margin-bottom:0.5em;
				padding:1.1em;
				padding-left:15%;
				padding-bottom: 0em;
				}
 .headermain {
				font-size:1.5em;
				height:auto;
				padding-bottom:0.4em;
				margin-top: 0.8em;
				float:right;
				margin-right:15%;
				width:auto;
				}
.headingarea a {
				color:inherit;
				}

#frontpage .headingarea {
				clear:both;
				text-align:left;
			}
				
#frontpage .headingarea {
				margin-top:4em;
				}
								
#frontpage .headerleft {
				width:48%;
				font-size:5vw;
				padding:0px;
				padding-top:1em;
				padding-right: 1em; 
				padding-bottom:0.2em;
				margin-top:0.4em;
				text-align:right;
				padding-top:1.3em;
				padding-bottom:0;
				}

#frontpage .headerleft img, #frontpage .headerleft svg {
				width:18vw;
				width:14vw;
				max-width:240px;
				max-width:160px;
				margin-top:-0.9em;
				height:auto;
				min-height:60px;
				min-width:68px;
				margin-right: -0.5em;
				}
			  
#frontpage .headermain { 
				width: 25%;
				margin:0px;
				padding-top: 12vw;
				font-size: 2.4vw;
				padding-left:1em;
				float:left;
				padding-top: 9vw;
				}

@media ( min-width: 1100px) {
	#frontpage .headermain {
				font-size:24px;
				width:20%;
				}
	#frontpage .headerleft {
				font-size:56px;
				}
	#frontpage .headermain {
				padding-top:140px;
				padding-top:108px;
				}
}

@media ( max-width: 600px) {
	#frontpage .headermain {
				font-size:16px;
				width:95%;
				text-align:center;
				padding-top:2vw;
				padding-bottom:1em;
				}
	#frontpage .headerleft {
				font-size:30px;
				width:100%;
				text-align:center;
				padding-right:0em;
				}
	#frontpage .mainarea {
	}
	
	#phonebox {
		text-align: center;
		}
	
	.login li label { display: none; }
	.login li input { width:95%; }
	#activatepage .login li label { display:block; width:85%; }
}

@media ( max-height: 600px) {
	body {	font-size: 12px; }
}
	

#frontpage .headerright { width: 100%;
				color: #892;
				font-size: 1.5em;
				padding-top: 1em;
				padding-bottom: 1em;
				text-align:center;
				padding-top:0em;
				}

#frontpage .headerright input { 
								font-size: 1em; 
								font-size: 0.85em; 
								line-height: 1.2em;
								padding-left:0.4em;
								xmax-width:75%;
								max-width:98%;
								width:18em;
								padding:0.2em 0.5em;
								}
#frontpage .headerright select { font-size: 0.6em; max-width:10.5em; vertical-align:bottom; height:2.5em; text-align:center}


#cropContainerHeader {
			width: 200px;
			height: 150px;
			position:relative; /* or fixed or absolute */
		}
.mainarea .formline {
	overflow: hidden;
	}
	
.picblock { 
			margin:3px; 
			margin-top:0px;
			margin-bottom:1em;
			position:relative; 	
			box-sizing: border-box;		
				 }

.gocaption {  box-sizing: border-box; }

.livepage .cropImgWrapper { box-sizing: border-box; cursor:initial; }

h2 { text-align: center; }
/* For live page */
.livepage h2 {
		font-size: 1.8em;
		xmin-height: 2.0em;
		text-align:center;
		background: rgba(255,255,255,0.65);
		border-radius:6px;
		-moz-border-radius: 6px;
		-webkit-border: 6px;
		margin-bottom:0.6em;
		width:70%;
		margin-left: auto;
		margin-right: auto;
		vertical-align: center;
		xpadding-top:0.8em;
		xx_margin-top:-1em;
		margin-top:0em;
		padding-top:0.2em;
		padding-bottom:0.2em;
		}

#gocontent {
		font-size: 1.1em;
		xmin-height:5em;
		padding:1em;
		background: rgba(255,255,255,0.65);
		border-radius:6px;
		-moz-border-radius: 6px;
		-webkit-border: 6px;
		xx_margin-bottom:0.4em;
		color:#000;
		text-shadow: 0px 0px 2px rgba(255,255,255,0.8);
		padding-bottom:0.1em;
		}

#livepage .gocaption {
		font-size: 1.1em;
		xmin-height: 2.2em;
		background: rgba(255,255,255,0.65);
		border-radius:6px;
		-moz-border-radius: 6px;
		-webkit-border: 6px;
		margin-bottom:0.5em;
		padding:1em;
		color:#000;
		text-shadow: 0px 0px 2px rgba(255,255,255,0.8);
		height:auto;
		padding-bottom:0em;
		}
				 
.picblock img {
	xbox-shadow: 3px 3px 5px #888;
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	box-sizing: border-box;
}
#picklist ul { width:100%; }
#livepage .picblock { margin:0; }
ul li { clear: both; }
.LLL3 { float:left; xbackground: #f00; width:100%; }	
.LLL3 textarea { width:62%; height: 120px; float: right; }
.LLL3 .even .picblock { width:33%; height: 200px; float: left; margin-right:1em; }
.LLL3 .odd .picblock { width:33%; height: 200px; float: left; margin-right:1em; }
.LLL3 .gocaption { width:62%; height: 120px; float: right; }

.RRR3 { float:left; xbackground: #0F0;  width:100%;  }
.RRR3 textarea { width:62%; height: 120px; float: left; }
.RRR3 .even .picblock { width:33%; height: 200px; float: right; margin-left:1em; }
.RRR3 .odd .picblock { width:33%; height: 200px; float: right; margin-left:1em; }
.RRR3 .gocaption { width:62%; height: 120px; float: left; }


.LRL3 { float:left; xbackground: #00F;  width:100%; }
.LRL3 .odd textarea { width:62%; height: 120px; float: right; }
.LRL3 .even textarea { width:62%; height: 120px; float: left; }
.LRL3 .odd .picblock { width:33%; height: 200px; float: left; margin-right:1em;}
.LRL3 .even .picblock { width:33%; height: 200px; float: right; margin-left:1em;}
.LRL3 .odd .gocaption { width:62%; height: 120px; float: right; }
.LRL3 .even .gocaption { width:62%; height: 120px; float: left; }


.RLR3 { float:left; xbackground: #FF0;  width:100%; }
.RLR3 .odd textarea { width:62%; height: 120px; float: left; }
.RLR3 .even textarea { width:62%; height: 120px; float: right; }
.RLR3 .odd .picblock { width:33%; height: 200px; float: right; margin-left:1em;}
.RLR3 .even .picblock { width:33%; height: 200px; float: left; margin-right:1em;}
.RLR3 .odd .gocaption { width:62%; height: 120px; float: left; }
.RLR3 .even .gocaption { width:62%; height: 120px; float: right; }

.LLL2 { float:left; xbackground: #800; width:100%;  margin-top:0.7em; }
.LLL2 textarea { width:48%; height: 120px; float: right; }
.LLL2 .even .picblock { width:49%; height: 300px; float: left; margin-right:1em;}
.LLL2 .odd .picblock { width:49%; height: 300px; float: left; margin-right:1em;}
.LLL2 .gocaption { width:49%; height: 120px; float: right; }

.RRR2 { float:left; xbackground: #080; width:100%;  margin-top:0.7em; }
.RRR2 textarea { width:48%; height: 120px; float: left; }
.RRR2 .even .picblock { width:49%; height: 300px; float: right; margin-left:1em;}
.RRR2 .odd .picblock { width:49%; height: 300px; float: right; margin-left:1em; }
.RRR2 .gocaption { width:49%; height: 120px; float: left; }

.LRL2 { float:left; xbackground: #008; width:100%;  margin-top:0.7em; }
.LRL2 .odd textarea { width:48%; height: 120px; float: right; }
.LRL2 .even textarea { width:48%; height: 120px; float: left; }
.LRL2 .odd .picblock { width:49%; height: 300px; float: left; margin-right:1em; }
.LRL2 .even .picblock { width:49%; height: 300px; float: right; margin-left:1em; }
.LRL2 .odd .gocaption { width:49%; height: 120px; float: right; }
.LRL2 .even .gocaption { width:49%; height: 120px; float: left; }

.RLR2 { float:left; xbackground: #880; width:100%;  margin-top:0.7em; }
.RLR2 .odd textarea { width:48%; height: 120px; float: left; }
.RLR2 .even textarea { width:48%; height: 120px; float: right; }
.RLR2 .odd .picblock { width:49%; height: 300px; float: right; margin-left:1em; }
.RLR2 .even .picblock { width:49%; height: 300px; float: left; margin-right:1em;}
.RLR2 .odd .gocaption { width:49%; height: 120px; float: left; }
.RLR2 .even .gocaption { width:49%; height: 120px; float: right; }

.up4 { float:left; xbackground: #666; width:100%; }
.up4 ul li { clear: none; }
.up4 li { width:49.5%; float:left; margin-top:0.7em; }
.up4 .even .caption { float:right; width:96%; }
.up4 .odd .caption { float:left; width:96%; }
.up4 .even textarea { width:94%; height: 50px; float: right; }
.up4 .odd textarea { width: 94%; height: 50px; float: left; }
.up4 .even .picblock { width:94%; height: 300px; float: right; }
.up4 .odd .picblock { width:94%; height: 300px; float: left; }

#livepage .up4 .even .gocaption { width:94%; float: right; }
#livepage .up4 .odd .gocaption { width: 94%; float: left; }
.up4 li:nth-child(2n+1) { clear:both; }

.up6 { float:left; xbackground: #bbb;  width:100%; }
.up6 ul li { clear: none; }
.up6 li { width:33.2%; float:left;  margin-top:0.7em;}
.up6 .caption { float: left; width: 96%; }
.up6 textarea { width:94%; height: 50px; float: left; }
.up6 .even .picblock { width:94%; height: 200px; float: left; }
.up6 .odd .picblock { width:94%; height: 200px; float: left; }
#livepage .up6 .gocaption { width:94%; float: left; }
.up6 li:nth-child(3n+1) { clear: both; }

.full { float:left; xborder: 2px solid #0FF; width:100%;  }
.full textarea { width:94%; height: 50px; }
.full .even .picblock { width:94%; height: 300px;  margin-left:auto; margin-right: auto; }
.full .odd .picblock { width:94%; height: 300px;  margin-left:auto; margin-right: auto;}
#livepage .full .picblock { width:100%; margin-top:0.6em; margin-bottom:1em; }
#livepage .full .gocaption { width:100%; padding-bottom: 0.1em; margin-bottom:2em;}

.two3 { float:left; xborder: 2px solid #F0F;  width:100%;  }
.two3 textarea { width:94%; height: 50px; }
.two3 .even .picblock { width:66%; height: 300px; margin-left:auto; margin-right: auto; }
.two3 .odd .picblock { width:66%; height: 300px; margin-left:auto; margin-right: auto; }
#livepage .two3 .picblock { margin-left: auto; margin-right:auto;  margin-top:0.6em; margin-bottom:1em; }
#livepage .two3 .gocaption { width:100%; padding-bottom: 0.1em; margin-bottom:2em;} }

.livepage .even .picblock, .livepage .odd .picblock { margin-left:0em; margin-right:0em; }
#livepage .picline { padding-top:0.6em; }
#livepage .picblock { height: auto; margin-bottom:0.4em; }

@media (max-width:410px) {
	/* on small screens .up6 becomes .up4 */
	.up6 li { width:50%; min-width:128px; }
	.up6 li:nth-child(3n+1) { clear: none; }
	.up6 li:nth-child(2n+1) { clear: both; }
	}

.croppicBackground { background: url('uploadimage3.png') no-repeat; 
					background-size: 100% 100%; 
					border:1px solid #bbb; 
					border-radius: 6px 6px 6px 6px;
					-moz-border-radius: 6px 6px 6px 6px;
					-webkit-border: 6px 6px 6px 6px; 
					margin-top:0px;
}

.customUploadButton { position:relative; 
					width:46px; 
					height:46px; 
					background: url('uploadbutton.png'); 
					background-size: 100% 100%; 
					margin-top:20%;
					margin-left:auto; margin-right:auto; 
					opacity:0.65;
					border-radius: 6px;
					-moz-border-radius: 6px;
					-webkit-border: 6px; 
					
			}
			
.customUploadButton:hover { opacity: 0.8; }

.cropImgWrapper {
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border: 6px; 
}

.pgcontrol {
		text-align: center;
		xwidth:100%;
		margin-left:0px;
		margin-right: 0px;
		xheight: 120px;
	}

.pgcontrol li {
		clear: none;
		position: relative;
		display: inline-block;
		float: none;
		vertical-align:top;
		margin-left: 10px; 
		margin-right: 10px;
	}

#layoutbtn { 
		position: relative; 
		xheight: 120px; 
		cursor:pointer;
}	
	
.layouts {
		border:1px solid transparent; 
		overflow: hidden; 
		position: absolute; 
		left:0px; 
		padding-top:7px;
		/* must have float lefts with display: inline-block for .pgcontrol li */
		float:left;	
		}

.layouts li {
		clear: none;
		border:0px solid #f00;
		float:left;
		margin:0px;
		margin-top:-2px;
		padding:0px;
		}
		
.layouts li label {
		width:64px;
		height:74px;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border: 6px; 			
		}
		
.layouts label {
		vertical-align:top;
		display:none;
		margin:0px;
		padding:0px;
		border:0px;
		cursor:pointer;
}
		
.layouts img {
		width:100%;
		margin:0px;
		padding:0px;
		border:0px;
		}
	
.layouts input {
		display:none;
}

.xlayouts input + label:hover {
		border-color:#ccc;
		cursor:pointer;
	}
	
.layouts input:checked + label {
		!important; display:block;
		border:1px solid #7af;
		padding-top:0px;
		margin-top:0px;	
		float:left;
		xxmargin-left:10px;
}

.layouts:hover label {
		display:block;
		border:1px solid transparent;
		margin-bottom:5px; 
		margin-left: 10px; 
		margin-right: 10px;
}

.layouts:hover {
		width: 520px;
		height:170px;
		background: #fff;
		position: absolute;
		z-index: 3;
		border-color: #bbb;
		left: -230px; 
		top:20px;
		padding-left:5px;
		padding-top: 10px;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
}

@media ( max-width: 600px) {
	.layouts li label {
		width:36px;
		height:48px;
	}
	.layouts input:checked + label {
		width:64px;
		height:74px;
		}
	.layouts:hover input:checked + label {
		width:36px;
		height:48px;
		xmargin-left: 4px; 
		xmargin-right: 4px;
		}
	.layouts:hover label {
		margin-left: 4px; 
		margin-right: 4px;
	}
	.layouts:hover {
		width: 280px;
		height:100px;
		left: -115px; 
		padding-left:3px;
		padding-top:5px;
	}
}

#piclinebtn { position: relative; height:120px; cursor:pointer; }

.picbtn { border:1px solid #666; 
			border:1px solid transparent;
			margin-top: 8px; margin-left: 12px; 
			width:64px; height: 72px; 
			background: url('uploadimage4.png'); background-size: 100% 100%; text-align:center;
			border-radius: 6px;
			-moz-border-radius: 6px;
			-webkit-border: 6px; 
			xbox-shadow:2px 2px 2px #ddd;
			 }
.picbtn img { width: 26px; height: 26px; opacity:0.65; margin-top:14px; }
.picbtn img:hover { opacity: 0.9; }
.picbtn:hover { border:1px solid #888; }

#stylebtn { position: relative; height:120px; overflow:hidden;cursor:pointer; }

.stylebtn {  border:1px solid #666; 
			 border:1px solid transparent; 
			 padding-top:20px; 
			 margin-top: 8px; 
			 margin-left: 8px;
			 width:64px; 
			 height: 52px; 
			 background: #D2E5F5; 
			 background: #7AF;
			 text-align:center; 
			 font-size:35px; 
			 line-height:0.3;
			 cursor:pointer;
			 border-radius: 6px;
			-moz-border-radius: 6px;
			-webkit-border: 6px; 
			xbox-shadow:2px 2px 2px #ddd;
		}
.stylebtn:hover { font-weight:bold; border-color: #888;}


.fonts {
		border:0px solid #ccc; width:232px; xheight: 96px; xoverflow: hidden; xposition: absolute; xfloat:left; background:#fff; padding-top:7px;
		}
		
.fonts li {
		clear: none;
		xfloat:right;
		margin:0px;
		padding:6px;
		padding-left: 0.5em;
		position: relative;
		cursor: pointer;
		}

.fonts li ul {
		padding-left:3px;
		padding-right: 3px;
		}

.fonts li ul li {
		padding: 0px;
		background:#fff;	
		
		}

.fonts li ul li label {
		display:none;
		}
		
.fonts li:hover ul li label {
		padding: 0px;
		background:#fff;
		display: block;
		position: static;
		}
		
.fonts li:hover {
		background: #eee;		
		}
		
.fonts li:hover ul {
		display: block;
		position: absolute;
		width: 140px;
		left: 100px;
		top: 0px;
		background:#fff;
		z-index:5;
		border:1px solid #eee;
		box-shadow: 1px 0x 3px #888;
		cursor: pointer;
		}
		
.fonts input:checked + label {
		!important; display:block;
		border:1px solid #000;
		padding-top:0px;
		margin-top:0px;	
		max-width: 120px;
		padding:2px;
		padding-left:5px;
		padding-bottom:0px;
		background:#fff;
		position:absolute;
		left: 6em;
		top: -1.5em;
		border-radius: 6px;
			-moz-border-radius: 6px;
			-webkit-border: 6px; 
}
		
.fonts li ul label {
		width:98%;
		display: block;
		}

.fonts label {
		border: 1px solid transparent;
}

.fonts img {
		max-width:80%;
		width:8em;
		}
		
.fonts input {
		display:none;		
}
.fonts input + label:hover {
	border-color:#ccc;
	cursor:pointer;
	}
	
#modalemail, #modalpass, #modalcontact {
	display: none;
	position: fixed;
	left: 0px;
	top:0px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 99;
	background: rgba(0,0,10,0.6);
	xpointer-events: none;
	}
	
#modalemail ul, #modalpass ul, #modalcontact ul {
	position: relative;
	padding: 20px; 
	width: 43em;
	background: #fff;
	margin: 25% auto;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border: 10px;
	text-align:center;
	line-height:2em;
	max-width:80%;
	}

#modalcontact textarea {
	width:80%;
	height:4em;
	padding:0.5em;
	}

#modalcontact input[type=email]{
	padding:0.5em;
	width:40%;
	}

#modalpagestyles {
	display: none;
	position: fixed;
	xposition: absolute;
	left: 0px;
	top:0px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 400%;
	z-index: 99;
	background: rgba(0,0,10,0.6);
	xpointer-events: none;
	}

@media ( max-height: 620px) {
	#modalpagestyles {
		position: absolute;
	}
}

#modalpagestyles .pagestyles {
	position: relative;
	padding: 1em;
	max-width: 43em;
	background: #fff;
	margin: 4% auto;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border: 10px;
	width:80%;
	}

#bgstyle {
		float:left;
		padding: 7px;
		width:46%;
		box-sizing: border-box;
		}
#fontselector {
		float: left;
		width:46%;
		margin-left:2%;
		margin-bottom: 4%;
		box-sizing: border-box;	
		}


.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; background: #9af; }

.eltclose {
	opacity:0;
	background: rgba(200,200,200,0.7);
	color: #c00;
	line-height: 20px;
	position: absolute;
	right: -8px;
	text-align: center;
	top: -10px;
	width: 20px;
	text-decoration: none;
	font-style: normal;
	font-weight:bold;
	font-size:12px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	transition-duration:0.5s;
	cursor:pointer;
}

#addmodpage_title, #addmodpage_content, #gotitle, #gocontent {
	position:relative;
	}

#addmodpage_title:hover .eltclose {
		opacity:1;
		
		}
	
#addmodpage_content .eltclose {
		right:-8px;
		top:-8px;
		}
		
#addmodpage_title .eltclose {
		xright:112px;
		right:13.8%;
		top:-10px;
		}

#addmodpage_content:hover .eltclose {
		opacity:1;
		}
		
 .picline .eltclose {
		right:-8px;
		}
		
.picline:hover .eltclose {
		opacity:1.0;
		}

.picline { position: relative; }

.donebtn {
		clear:both;
		margin:1em auto;
		padding:4px;
		padding-left:8px;
		padding-right:8px;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		text-align: center;
		background: #00d9ff;
		background: #bbccff;
		width:7em;
		}
.donebtn:hover {
		background:#7af;
		}
		
#bgimageupload {
		position: relative;
		width:100%;
		height:0;
		padding-bottom:75%;
		margin:0px;
		margin-bottom:12px;
		}

.fix-top {
		position:fixed;
		top:10px;
		z-index:88;
		}
.intitle {
		width:70%; 
		font-size: 1.8em; 
		height: 2.2em; 
		text-align:center;
		background: rgba(255,255,255,0.85);
		border-radius:6px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-style:groove;
		xborder-style:dashed;
		margin-bottom:0.5em;
		}

.notfound {
		text-align: center;
		xline-height: 3em;
		padding:1em;
		background: rgba(255,255,255,0.9);
		border-radius:6px;
		-moz-border-radius: 6px;
		-webkit-border: 6px;
		}

.submitline  {
		text-align: center;
		}
		


input[type=submit] {
		font-size: 1em;
		margin:1em;
		padding: 0.5em 0.5em;
		}

input[type=submit]:hover {
		box-shadow: 0px 0px 5px #acf;
		}

.notfound input[type=submit] {
		font-size: 1.2em;
		margin: 1em;
		}

input[type=submit].makeme { background:#44c420; border-radius:0.5em; padding:0.5em 1em; }
input[type=submit].searchagain { color:#888; font-size:0.8em; }


#frontpage input[type=submit] {
		margin:0;
		padding:0 0.5em;
		width:auto;
		font-weight: bold;
		color:#298c1b;
		xtext-shadow: 0px 0px 1px rgb(96, 255, 0);
		padding:0.2em 0.8em;
		}

#frontpage .submitGo {
		padding-left:0.3em;
		padding-top: 0.1em;
		padding-right:0.3em;
		padding-bottom: 0.1em;
		}

#activatepage input {
		width:40%;
		/* activation I agree box moves with this */
		xmin-width:6em;
		}
		
#activatepage input[type=text] {
		width: 6em;
		/* activation I agree box moves with this */
		min-width:6em;
		}

#activatepage input[type=checkbox] {
		transform: scale(1.5);
		width:2em;
		}
		
#activatepage label {
		width:55%;
		margin-bottom: 0.5em;
		padding-right:0.5em;
		vertical-align:top;
		}

#activatepage li {
		margin-bottom: 1em;
		}
		
#loginpage input[type=submit], #activatepage input[type=submit], #complainpage input[type=submit]{
			width: auto;
			padding:initial;
			padding-left:0.3em;
			padding-right:0.3em;
			margin-left: 70%;
			float:right;
			}



			
.login {
	background: #dd9;
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	margin-top:2em;
	padding:1em;
	font-size:1.4em;
	background:#ece693;
}

.login input {
	font-size:1em;
	width:67%;
	padding-left:0.5em;
}


.yourpages {
			width:100%;
			xpadding-left:1em;
			margin-bottom:2em;
			text-align:center;
			font-size:14px;
			}
.yourpages td {
			background:#ffd;
			padding:5px;
			}

.yourpages a {
			xfont-size:1.3em;
			font-size:1.1em;
			color:#008;
			}
.yourpages .ctrycode {
			color: #008;
			}

.yourpageslist {
	width:100%;
	background:#ffd;
	padding:5px;
	padding-bottom:1em;
	margin-top:1em;
	
	}
.yourpageslist li {
	display:inline-block;
	vertical-align:top;
	}
.yourpageslist li.pgname {
	width:25%;
	min-width:170px;
	text-align:left;
	xfloat:left;
	margin-bottom:1em;
	margin-top:1em;
	}
.yourpageslist li.pgtable{
	width:100%;
	max-width:500px;
	margin-top:0.6em;
	}
.yourpageslist li.pgtable li {
	width:17.5%;
	min-width:88px;
	min-height:4em;
	margin-bottom:0.7em;
	background:#ddd;
	padding:4px;
	border-radius:3px;
	}


#frontpage .login input {
	width:95%;
	}
			
.login h3 {
	display: none;
	}

.login label {
	width:30%;
	display:inline-block;
	}
	
	
	
.error {
	text-align:center;
	color: #c22;
	}

#frontpage .topbar {
	float:right;
	padding-right:2em;
	margin-bottom:0.5em;
}

#frontpage .topbar ul li {
	display:block;
	float:left;
	clear: none;
	margin-top:0.3em;
	}

#frontpage .login li a {
	padding-left:4em;
	}

#frontpage .login {
	padding-bottom:0em;
	margin-top:0em;
	font-size:1em;
	background: #dd9;
	margin-right:1em;
	padding-left:0.8em;
	padding-right:0.8em;
	padding-top:0em;
	float:left;
	position:relative;
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	background:#ece693;
}

#frontpage .login h3 {
	display:block;
	text-align: right;
	padding:0.3em;
	margin:0px;
	xbackground: #dd9;
	font-size:1em;
	
	}

#frontpage .login ul {
	position:absolute;
	display: none;
	width: 16em;
	min-width:220px;
	background:#dd9;
	padding:0.5em;
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	top:-0em;
	left:-10em;
}
#frontpage .login label {
	display:none;
}

#frontpage .topbar .login:hover ul {
	display: block;
	}

#modalcomplaint {
	position:fixed;
	top:0px;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.8);
	}

#warning {
	position: relative;
	top:20%;
	width:60%;
	max-width:500px;
	background: #fff;
	margin-left: auto;
	margin-right: auto;
	padding: 2em;
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	font-size:1.4em;
	text-align:center;
	}

#warning .donebtn {
	display:inline-block;
	}

.possibles {
	font-size: 1.4em;
	}

.paypalholder {
	text-align:center;
	margin:1em;
	padding:1em;
	}

#activatepage .paypalholder {
text-align: center;
	font-size:1.4em;
	display: inline-block;
	width: 6.4em;
	min-width:160px;
	padding:20px;
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	box-shadow: 2px 2px 5px #888;
	background: #e8e8e8;
	vertical-align:top;
	min-height:5.5em;
	}
	
#activatepage .paypalholder input {
	width:auto;
	
	}
#activatepage .paypalholder:hover {
	xbackground: rgba(0,0,0,0.2);
	border-color: #c91;
	box-shadow: 2px 2px 15px #D92;
	}

#subscribe {
	background: #fff;
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	margin-top:2em;
	padding:1em;
	font-size:1.4em;
	text-align:center;
	}
#subscribe li {
	list-style:none;
	}

#livepage .login {
	max-width:25%;
	margin-right:4em;
	font-size:1em;
	float:left;
	}
	

#modalcontact input[type='submit'] {
	padding:0.2em;
	margin:0;
	}
#contactform input:hover, #contactform textarea:hover {
	box-shadow: 0px 0px 6px rgba(45, 67, 194, 0.5);
	}

#optbox {
	float: right;
	xmargin-top:7em;
	margin-right:0.1em;
	margin-bottom:2em;
	}
	
#optbox img {
	height:24px;
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	border: 1px solid #bbb;
	background:#eee;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
	padding:4px;
	}
	
@media ( max-width: 400px) {
	#optbox { clear:both; margin-top:1em; margin-right:1em; }
}

.boxes {
	width: 100%;
	text-align: center;
	}
.boxes li {
	display:inline-block;
	padding-top:16px;
	margin: 10px;
	margin-left:3%;
	margin-right:3%;
	width:24%;
	border:1px solid #888;
	border-radius:12px;
	-moz-border-radius: 12px;
	-webkit-border: 12px;
	text-align:center;
	color:#fff;
	font-size:larger;
	box-shadow: 0px 3px 0px rgba(0,0,0,0.5), 1px 3px 2px rgba(0,0,0,0.8);
	box-shadow: 1px 3px 2px rgba(0,0,0,0.3);
	vertical-align:top;
	min-height:3em;
	min-width:110px;
	padding-top:1.6em;
	
	}
.appstyle .boxes li {
	padding-top:1em;
	padding-bottom:0.8em;
}

.boxes a {
	color: #fff;
	}
.boxes li:hover {
	box-shadow: 1px 3px 3px rgba(0,0,0,0.6);
	}

.boxes li:hover a {
	text-shadow: 0px 0px 4px rgba(0,0,0,0.6);
	}	
	
#box1 {
	margin-left:0;
	margin-right:0;
	background: #149CC8;
	background: linear-gradient(to bottom, #999 0%,#226 8%, #149CC8 100%);
background: -moz-linear-gradient(top, #999 0%, #226 8%, #149CC8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(8%,#226), color-stop(100%, #149CC8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999 0%, #226 8%, #149CC8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999 0%, #226 8%, #149CC8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999 0%, #226 8%, #149CC8 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#149CC8',GradientType=0 ); /* IE6-9 */

}

#box2 {
	margin-left:9%;
	margin-right:9%;
	background: #F57979;
	background: linear-gradient(to bottom, #999 0%,#722 8%, #F57979 100%);
background: -moz-linear-gradient(top, #999 0%, #722 8%, #F57979 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(8%,#722), color-stop(100%, #F57979)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999 0%, #722 8%, #F57979 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999 0%, #722 8%, #F57979 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999 0%, #722 8%, #F57979 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#F57979',GradientType=0 ); /* IE6-9 */
	}
	
#box3 {
	margin-right:0;
	margin-left:0;
	background: #D1D079;
	background: linear-gradient(to bottom, #999 0%,#663 8%, #ece693 100%);
background: -moz-linear-gradient(top, #999 0%,#663 8%, #ece693 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(8%,#663), color-stop(100%,#ece693)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999 0%,#663 8%, #ece693 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999 0%,#663 8%, #ece693 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999 0%,#663 8%, #ece693 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#ece693',GradientType=0 ); /* IE6-9 */
	}
	
#boxapp {
	background:#149CC8;
	margin-top:16%;
	width:18em;
	max-width:70%;

	background: linear-gradient(to bottom, #5AC5F8 0%,#2E7BB4 4%, #2596d4 92%, #37ACD2 100%);
	
background: -moz-linear-gradient(top, #5AC5F8 0%, #2E7BB4 4%,#2596d4 92%, #37ACD2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5AC5F8), color-stop(4%,#2E7BB4), color-stop(92%, #2596d4), color-stop(100%, #37ACD2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5AC5F8 0%, #2E7BB4 4%, #2596d4 92%, #37ACD2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5AC5F8 0%, #2E7BB4 4%,#2596d4 92%, #37ACD2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5AC5F8 0%, #2E7BB4 4%, #2596d4 92%, #37ACD2 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5AC5F8', endColorstr='#2596d4',GradientType=0 ); /* IE6-9 */
	}

#boxapp a {
	text-shadow: 0px 0px 0px rgba(0,0,0,0.3);
	}

#mypagebtn, #skipbtn {
	margin-top:2em;
	padding: 4px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 6em;
	background: #ddd;
	border-radius:16px;
	-moz-border-radius: 16px;
	-webkit-border: 16px;
	border: 1px solid #bbb;
	box-shadow: 1px 2px 4px rgba(0,0,0,0.5);
	}

#mypagebtn:hover {
	background: #bbb;
	}
	
#skipbtn {
	border-radius:6px;
	-moz-border-radius: 6px;
	-webkit-border: 6px;
	border: 1px solid #bbb;
	box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	float:right; 
	margin:0px;
	background:#d44;
	margin-left:3px;
	margin-right:3px;
	}
#skipbtn a {
	color:#fff;
	}
#skipbtn:hover {
	box-shadow: 2px 2px 3px rgba(0,0,0,0.7);
	background:#ffc1c1;
	}
	
.counter {
	float:right;
	font-size:0.8em;
	font-style: oblique;
	color:#333;
	padding:0.3em;
	}
#contactform .msghgt {
	height:10em;
	}

.message {
	margin-bottom:2em;
	margin-right:auto;
	margin-left:auto;
	padding:1em;
	border:1px solid #bbb;
	xfloat:left;
	border-radius:6px;
	width:60%;
	min-width:320px;
	background: #eef;
	clear:both;
	}

#pglist {
	float:right;
}
#pglist li {
	display: inline-block;
	padding:0.3em;
	}
.msgsent img {
	padding:0.3em;
	height:3em;
	float:right
	}
.replybox {
	width:96%;
	min-width:280px;
	margin-top:1em;
	}
.replybox textarea {
	width:98%;
	height:6em;
	padding:0.5em;
	}
.replybox textarea:hover {
	box-shadow: 0px 0px 6px rgba(45, 67, 194, 0.5);
	}
.replybox input[type=submit] {
	padding:0.3em;
	margin:0;
	float:right;
	}
.msghead {
	padding-bottom:0.5em;
	border-bottom: 1px solid #ccc;
	text-align:right;
	font-size: smaller;
	}
.msghead img {
	height:1.5em;
	padding-left:0.5em;
	}
.msgaction {
	padding-top:1em;
	padding-bottom:0.5em;
	margin-bottom:1em;
	}
.msgbody {
	padding:1em;
	}
.replies {
	border:1px solid #ccc;
	padding:0.5em;
	margin:1em;
	background:#fff;
	border-radius:6px;
	}

.justnow {
	background: #ffd;
	border-color: #aaa;
}

#howpage, #aboutpage {
	padding:2em;
	padding-top:0em;
	background: rgba(255,255,255,0.9);
	border-radius:12px;
	}

#frontpage, #aboutuspage, #howitworkspage {	
	background-image: url('../stock/pexels-photo-58625_sz.jpg');
}

#frontpage.appstyle {
	background: none;
	}

#howpage {
	xbackground:#fdd;
	}
#aboutpage li, #howpage li {
	list-style-type: square;
	margin-left:2em;
	}
#aboutpage h1 {
	text-shadow:none;
	xtext-shadow: 0px 0px 1px rgba(40,40,40,1), 0px 0px 1px rgba(0,40,0,1), 0px 1px 1px rgba(80,80,80,1), 0px 0px 50px rgba(255,255,255,0.9), 0px 0px 10px rgba(255,255,255,0.2);
	color: #aaaa66;
	xletter-spacing:0.11em;
	font-size:1.5em;
	}
#howpage h1 {
	text-shadow:none;
	xtext-shadow: 0px 0px 1px rgba(80,60,60,1), 0px 0px 1px rgba(10,10,10,0.5), 0px 1px 1px rgba(0,0,0,0.8), 0px 0px 50px rgba(255,255,255,0.9), 0px 0px 10px rgba(255,255,255,0.2);
	color: #f87272;
	xletter-spacing:0.1em;
	font-size:1.5em;
	}
#howpage .FAQ, #aboutpage ul {
	margin-left:1em;
	margin-right:2em;
	}
#howpage .FAQ li {
	list-style: circle;
	margin-left:1em;
	}
#howpage li, #aboutpage li {
	padding-bottom: 0.5em;
	}

#promobox {
	font-size:0.7em;
	padding-bottom:3px;
	}
#promobox input[type=text] {
	width:12em;
	margin:0px;
	padding:0.2em;
	box-shadow:2px 2px 2px rgba(80,80,80,0.8);
	}
#promobox:hover {
	background: rgba(224,154,32,0.2);
}
#promobox input[type=submit] {
	margin:0px;
	padding:0px;
	float: none;
	}
#invoices {
	max-width:800px;
	width:100%;
	margin-top:2em;
	}
#invoices td {
	padding:0.3em;
	}
#hist_list {
	position:absolute;
	background: rgba(255,255,255,1);
	padding:0.3em;
	margin-left:0.6em;
	border:1px solid #eef;
	cursor:pointer;
	}
#hist_list li {
	font-size:0.7em;
	padding:0.2em;
	padding-right:2em;
	color:#888;
	}
#hist_list li:hover {
	background: #ddd;
	}
#phonebox {
	display:inline-block;
	position:relative;
	max-width:80%;
	xtext-align:left;
	width:20em;
	padding-top:0.3em;
	text-align: left;
	}
.offer {
	color:#038;
	}
#sharing {
	position:fixed;
	bottom:0px;
	right:6px;
	z-index:99;
	}
#sharing img {
	margin:2px;
	}
#language select {
	xfont-size:0.7em;
	padding:0.3em;
	}
	
@media (max-width:600px) {
	#phonebox { text-align:center; }
	#phonebox input { margin-bottom:0.3em; }
	#frontpage .headerright { padding-top:1em; padding-bottom:2em; }
	}