/*
-----------------------------------------------
Facebook Blocker extension mini-site
author: dan rubin
edited: 2012-06-04
----------------------------------------------- */

@import url("reset.css");

body {
	background:#6481ad url(images/bg-header.png) repeat-x;
	margin:0;
	text-align:center;
	font-family:"Univers LT W01 57 Condensed","Helvetica Neue",helvetica,arial,sans-serif;
	color:#fff;
}
a {
	color:#fff;
	text-decoration:none;
}
img {
	display:block;
}
#wrapper {
	position:relative;
	background:url(images/glow.png) no-repeat 30px 300px;
	margin:0 auto;
	width:940px;
	text-align:left;
	text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#header {
	position:relative;
	height:300px;
}

#logo {
	position:absolute;
	left:260px;
	top:73px;
	width:517px;
	height:202px;
	text-indent:-9999px;
	background:url(images/logo.png) no-repeat;
}
#logo em {
	position:absolute;
	left:17px;
	top:112px;
	width:92px;
	text-indent:0;
	text-align:right;
	font-style:normal;
	font-weight:normal;
	font-size:12px;
}
#strapline {
	position:absolute;
	left:700px;
	bottom:26px;
	width:215px;
	font-size:18px;
}
#twitter {
	position:absolute;
	left:694px;
	top:0;
	font-size:12px;
}
#twitter a {
	display:block;
	background:url(images/icon-twitter.png) no-repeat 6px 8px;
	padding:10px 6px 5px 20px;
	background-color:rgba(0,0,0,.1);
	-webkit-border-bottom-right-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-bottomleft:3px;
	border-bottom-right-radius:3px;
	border-bottom-left-radius:3px;
}
#twitter a:hover,
#twitter a:active {
	background-color:rgba(0,0,0,.2);
	background-position:6px 12px;
	padding-top:14px;
}

#webgraph {
	position:absolute;
	left:280px;
	top:8px;
	margin:-2px -6px;
	padding:2px 6px;
	padding-right:2px;
	background-color:rgba(0,0,0,0);
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
	border-radius:3px;
}
#webgraph:hover {
	background-color:rgba(0,0,0,.15);
	cursor:pointer;
}
#webgraph a {
	font-size:11px;
}
#webgraph a strong {
	display:block;
	margin-top:2px;
	width:91px;
	height:18px;
	text-indent:-9999px;
	background:url(images/logo-webgraph.png) no-repeat;
}

#donate {
    position: absolute;
    left: 383px;
    top: 2px;
    opacity: .9;
}
#donate:hover {
    opacity: 1;
}


/* download links */
#download {
	position:absolute;
	left:68px;/* should be 70px, but hey, box model. */
	top:240px;
	font-size:18px;
}
#download strong {
	display:block;
	font-weight:normal;
	font-size:48px;
	letter-spacing:-1px;
	margin-left:-2px;
	white-space:nowrap;
}
#download strong span {
	/* plus sign spacing */
	margin-left:3px;
}
#download em {
	display:block;
	font-size:14px;
	font-style:normal;
}
#download li a {
	position:relative;
	display:block;
	width:260px;
	margin-bottom:10px;
	padding:20px;
	color:rgba(255,255,255,.9);
	background-color:rgba(35,73,131,.7);
	
	border:1px solid rgba(0,0,0,.13);
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	
	-webkit-box-shadow:
		0 0 10px rgba(255,255,255,0),
		inset 0 1px 0px rgba(255,255,255,.18);
	-moz-box-shadow:
		0 0 10px rgba(255,255,255,0),
		inset 0 1px 0px rgba(255,255,255,.18);
	box-shadow:
		0 0 10px rgba(255,255,255,0),
		inset 0 1px 0px rgba(255,255,255,.18);
}
#download li a:hover {
	color:rgba(255,255,255,1);
	background-color:rgba(35,73,131,.85);
	-webkit-box-shadow:
		0 0 10px rgba(255,255,255,.4),
		inset 0 1px 0px rgba(255,255,255,.18);
	-moz-box-shadow:
		0 0 10px rgba(255,255,255,.4),
		inset 0 1px 0px rgba(255,255,255,.18);
	box-shadow:
		0 0 10px rgba(255,255,255,.4),
		inset 0 1px 0px rgba(255,255,255,.18);
}
#download li a img {
	position:absolute;
	top:9%;
	height:85%;
	opacity:.9;
}
#download li.safari a img {
	right:15px;
	max-width:114px;
	max-height:127px;
}
#download li.chrome a img {
	right:12px;
	max-width:120px;
	max-height:116px;
}
#download li.firefox a img {
	right:10px;
	max-width:128px;
	max-height:128px;
}
#download li.opera a img {
	right:10px;
	max-width:100px;
	max-height:100px;
}
#download li a:hover img {
	opacity:1;
}
#download li.chrome strong { font-size:46px; }
#download li.opera strong { margin-bottom:5px; }


#primary {
	width:300px;
	margin-left:400px;
	padding-top:12px;
	padding-bottom:12px;
}
#secondary {
	position:absolute;
	right:60px;
	top:312px;
	width:160px;
}
#primary a {
	margin:0 -3px -1px;
	padding:0 3px 1px;
    -webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	background-color:rgba(255,255,255,0);
}
#primary a:hover {
	background-color:rgba(255,255,255,.2);
}
#misc a {
    border-bottom:1px solid rgba(255,255,255,0);
}
#misc a:hover {
    border-color:rgba(255,255,255,.2);
}
#footer {
	width:480px;
	margin-left:400px;
	padding-top:6px;
	padding-bottom:18px;
	border-top:1px solid rgba(255,255,255,.2);
}


/* screenshots */
#screenshots {
	margin-bottom:18px;
}
#screenshots li {
	margin-bottom:5px;
}
#screenshots a {
	display:block;
	background-color:rgba(255,255,255,.2);
	padding:10px;
/*			padding:5px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;*/
}
#screenshots a:hover {
	background-color:rgba(255,255,255,.4);
}
/*#screenshots a img {
			-webkit-border-radius:7px;
			-moz-border-radius:7px;
			border-radius:7px;
		}*/



/* text styles */
h2 {
	margin-left:-1px;
	margin-bottom:5px;
	font-size:18px;
	font-weight:normal;
	letter-spacing:-1px;
}
#secondary h2 {
	margin-bottom:7px;
	margin-left:9px;
}
#primary p {
	margin-bottom:1.1em;
	font-size:14px;
	line-height:17px;
}
#misc li {
	margin-left:10px;
	margin-bottom:6px;
	font-size:12px;
	line-height:14px;
}
#footer p {
	font-size:11px;
	line-height:14px;
	color:rgba(255,255,255,.7);
	text-shadow:0 1px 0 rgba(0,0,0,.15);
}


/* css transitions */
#twitter a,
#webgraph,
#donate,
#download li a,
#download li a img,
#screenshots a,
#primary a,
#secondary a {
	-webkit-transition-property:
		background-color,
		background-position,
		-webkit-box-shadow,
		color,
		border,
		opacity,
		padding;
	-webkit-transition-duration:.250s;
	
	-moz-transition-property:
		background-color,
		background-position,
		-moz-box-shadow,
		color,
		border,
		opacity,
		padding;
	-moz-transition-duration:.250s;
	
	-o-transition-property:
		background-color,
		background-position,
		box-shadow,
		color,
		border,
		opacity,
		padding;
	-o-transition-duration:.250s;
	
	transition-property:
		background-color,
		background-position,
		box-shadow,
		color,
		border,
		opacity,
		padding;
	transition-duration:.250s;
}