body {
background-image:url('bgtile.png');
background-repeat:repeat;
font-weight:900;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;



}
a {
color:black;
}
header {
width:800px;
height:100px;

margin-left:auto;
margin-right:auto;
margin-bottom:20px;
text-align:center;

}
header h1 {
	margin:0;
	padding:0;
	font-size:70px;
	padding-top:12px;
}
header a {
	text-decoration:none;
	color:black;
}
header img {
	max-width:100px;
	max-height:100px;
	float:left;
}
#main {
background-color:#e4e4e7;
width:1200px;
padding-top:10px;
margin-left:auto;
margin-right:auto;
box-shadow: 0px 0px 15px #888888;
border-radius:5px;
padding-bottom:35px;
margin-bottom:25px;
overflow:hidden;

}
#upweb {
background-color:blue;
width: 80%;
margin-left:auto;
margin-right:auto;
height:400px;

}
#upfile {
background-color:green;
width: 80%;
margin-left:auto;
margin-right:auto;
height:400px;
}
footer {
width:1200px;
margin-left:auto;
margin-right:auto;
height:50px;
background-color:grey;
text-align:center;
}
.urlinput {
width:550px;
height:25px;
border-radius:6px;
padding-left:10px;
}
.gobutton {
width:80px;
font-weight:bold;
margin-left:12px;
font-size:18px;
height:35px;
border-radius:6px;
border:1px solid #65cc00;
cursor:pointer;
margin-top:2px;

background: -moz-linear-gradient(#b2ff66, #63c800);
	background: -webkit-linear-gradient(#b2ff66, #63c800);
	background: -o-linear-gradient(#b2ff66, #63c800);
	background: linear-gradient(#b2ff66, #63c800);
}
.gobutton:hover{
background: -moz-linear-gradient(#63c800, #b2ff66);
	background: -webkit-linear-gradient(#63c800, #b2ff66);
	background: -o-linear-gradient(#63c800, #b2ff66);
	background: linear-gradient(#63c800, #b2ff66);
}

#simplicity {
background-color:#d9d9dd;

width:32%;
height:330px;
float:left;
margin-left:18px;
margin-right:5px;
margin-bottom:10px;
text-align:center;
border-radius:8px;
border:1px solid #c3c3c3;
background: url('Circle.png'), -moz-linear-gradient(#fff, #999);
	background: url('Circle.png'), -webkit-linear-gradient(#fff, #999);
	background: url('Circle.png'), -o-linear-gradient(#fff, #999);
	background: url('Circle.png'), linear-gradient(#fff, #999);
}
#compressionratio {
background-color:#d9d9dd;


width:32%;
height:330px;
float:left;
margin-right:5px;
margin-right:5px;
text-align:center;
border-radius:8px;
border:1px solid #c3c3c3;
background: url('Circle.png'), -moz-linear-gradient(#fff, #999);
	background: url('Circle.png'), -webkit-linear-gradient(#fff, #999);
	background: url('Circle.png'), -o-linear-gradient(#fff, #999);
	background: url('Circle.png'), linear-gradient(#fff, #999);
} 
#efficiency {
background-color:#d9d9dd;
width:32%;
height:330px;
float:left;
margin-right:5px;
margin-right:5px;
text-align:center;
border-radius:8px;
border:1px solid #c3c3c3;
background: url('Circle.png'), -moz-linear-gradient(#fff, #999);
	background: url('Circle.png'), -webkit-linear-gradient(#fff, #999);
	background: url('Circle.png'), -o-linear-gradient(#fff, #999);
	background: url('Circle.png'), linear-gradient(#fff, #999);
}
#modules {
background-color:#8c8c90;
width:80%;
height:40px;
margin-right:auto;
margin-left:auto;
clear:both;
margin-top:10px;
margin-bottom:20px;
border-radius:8px;
text-align:center;
font-size:22px;
background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	background: linear-gradient(#fff, #999);
}
#modulest {
	z-index:20;
	position:absolute;
	margin:0;
	width:1000px;
	text-align:center;
}
.indexmodules {
background-color:#8c8c90;
width:80%;
height:40px;
margin-right:auto;
margin-left:auto;
clear:both;
margin-top:10px;
margin-bottom:20px;
border-radius:8px;
text-align:center;
font-size:22px;
background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	background: linear-gradient(#fff, #999);
}
.indexmodules p {
	width:170px;
}
.indexmodules form {
	float:left;
	padding:0;
	margin:0;
	margin-left:10px;
}
.indexmodulest {
	float:left;
	padding:0;
	margin:0;
	margin-left:90px;
}
#timeremaining {
background-color:gold;
width:25%;
height:40px;
margin-right:auto;
margin-left:auto;
clear:left;
border-radius:8px;
text-align:center;
font-size:20px;
}
.share {
width:15%;
height:35px;
margin-right:auto;
margin-left:50px;
float:left;
border-radius:8px;
text-align:center;
font-size:20px;
background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	background: linear-gradient(#fff, #999);
}
.share p {
margin:0;
padding:0;
}
.firstshare {
	margin-left:400px;
	margin-bottom:20px;
}
#social {
clear:both;
margin-top:10px;
width:100%;
height:200px;
width: 80%;
margin-left: auto;
margin-right: auto;
border-radius:5px;
padding:5px;
background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	background: linear-gradient(#fff, #999);
}
#social h2 {
	text-align:center;
	margin:0;
	padding:0;

}

#socialleft {
	margin-left:10px;
	float:left;
	width:48%;
	margin-right:10px;
}
#socialright {
	float:left;
	width:48%;
	margin-right:10px;
}
.mobileresult {
	display:none;
}
#simplicitycanvas {
	width:100%;
	height:240px;
	background-image:url('simplicitymeter.png');
	background-repeat: no-repeat;
	background-position: center;
}
#efficiencycanvas {
	width:100%;
	height:240px;
	background-image:url('efficiencymeter.png');
	background-repeat: no-repeat;
  background-position: center;
}
#compressioncanvas {
	width:100%;
	height:240px;
	background-image:url('ratio.png');
	background-repeat: no-repeat;
  background-position: center;
}
#socialcanvas {
	z-index:10;
	width:100%;
	height:60px;
	position:relative;
}

.modalDialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 500px;
	word-wrap:break-word;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	background: linear-gradient(#fff, #999);
}
.modalDialog h3 {
	margin:0;
	margin-top:10px;
	font-size:140%;
}

.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; }

h2 {
	font-size:30px;
	margin:0;
	padding:0;
}
.smallquery{
	font-size:80%;
	font-style:italic;
}
.weissmanscoreresult{
	font-size:180%;
}
.sociallinks {
	margin-top:15px;
}
.sociallinks a{
	margin-right:20px;
}
.copyfooter {
	font-size:80%;
}
footer a:hover {
	color:#4c4c4c;
}
.symbol {
	font-size:75%;
}
.allprivate {
	text-align:center;
}
.allprivate h2 {
	text-align:center;
}
.leftbar {
	padding-top:20px;
	padding-left:20px;
	text-align:left;
	width:30%;
	height:400px;
	float:left;
	margin-left:15px;
	font-size:25px;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
	background: linear-gradient(#fff, #999);
	border-radius:7px;
}
.share img{
	margin-top:3px;
}
p#indexmodulest {
	margin-top:4px;
}
.invalidinput{
	border:2px solid red;
}