body {
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
	background: #ccc url(/bg.png);
	margin:0;
	padding: 0;
	text-transform: uppercase;
	color: #fff;
}

h1 {
	font-size: 40px;
}

h1:first-child,
h2:first-child {
	margin-top: 0;
}

#twitter-cta,
#phrase,
#options,
footer {
	text-shadow: 1px 1px 1px #222;
}

#twitter-cta a,
#tweet-this {
	text-shadow: none;
}

#twitter-cta a,
#inputs,
#tweet-this,
div.select,
.select ol,
#search-results,
nav a,
#help {
	-moz-box-shadow: 2px 2px 4px #222;
	-webkit-box-shadow: 2px 2px 4px #222;
	box-shadow: 2px 2px 4px #222;
}

#start {
	font-size: 200%;
	width: 250px;
	padding: 5px;
	margin: 0;
	border: none;
	text-align: center;
	border-radius: 4px;
	background: #ddd;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	text-transform: uppercase;
}

#start:focus,
#start:hover {
	background: #fff;
}

header {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 4;
	width: 300px;
	padding: 0 10px 10px 10px;

	border-radius: 0 0 20px 20px;
	-moz-border-radius: 0 0 20px 20px;
	-webkit-border-bottom-radius: 20px;
}

#inputs,
#search-results {
	width: 260px;
	padding: 10px 10px 14px 10px;
	background: #000;
	-moz-border-radius: 0px 0px 12px 12px;
	-webkit-border-bottom-left-radius: 12px;
	-webkit-border-bottom-right-radius: 12px;
	border-radius: 0px 0px 12px 12px;
	color: #fff;
	position: relative;
}

#search-results {
	clear: both;
	
	display: none;
	margin: 0;
	text-transform: none;

	padding-bottom: 10px;

	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

#search-results h2 {
	margin: 0 0 5px 0;
}

#search-results a,
#search-results a:visited {
	color: #fff;
}

#search-results .result {
	display: block;
	padding: 5px;
	margin: 5px 0 0 0;
	background: #111;
	
	text-transform: none;

	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#search-results .result:first-child {
	margin-top: 0;
}

#search-results .result .title {
	font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}

#search-results .result .url {
	font-size: 80%;
	display:block;
	text-align: right;
	color: #555;
}

header h1,
header h2 {
	text-align: center;
}

header h1 {
	margin: 0;
	font-size:40px;
	display: block;
}

header h1 .arrow {
	font-size: 300%;
	font-weight: bold;
	position: relative;
	top: -25px;
}

header h1 a,
header h1 a:visited {
	text-decoration: none;
	color: #fff;
	display: block;
}

#form {
	width: auto;
}

.random-link {
	margin: 0px 3px;
	display: block;
	float: left;
	padding: 5px;
	width: 70px;
	outline: none;

	font-size: 13px;
	color: #222;
	background: #ddd;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	
	text-align: center;
	text-decoration: none;
	line-height: 1em;
}

.random-link:hover {
	background: #fff;
	color:#000;
}

#canvas {
	position: absolute;
	top: 100px;
	left: 320px;
	width: 500px;
	overflow: visible;
	z-index: 1;
}

#twitter-cta,
footer {
	display: none;
	font-size: 80%;
	z-index: 3;
}

#twitter-cta {
	text-align: center;
	line-height: 1.3em;
}

#options {
	position:fixed;
	top: 0px;
	left: 320px;
	margin: 0;
	padding: 10px 0px;
	z-index: 3;
	font-size: 85%;
}

#options h3 {
	display: inline-block;
	width: 5em;
	margin: 0;
}

#share {
	display: none;
	margin-top: 8px;
}

#twitter-cta {
	padding: 15px;
	margin: 0;
	width: 260px;
}

#twitter-link,
#twitter-link:visited,
#share a,
#share a:visited{
	color: #222;
	text-decoration: none;
	padding: 5px 7px;
	background: #ddd;
	margin: 0 3px;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#share #tweet-this,
#share #tweet-this:visited {
	padding: 3px 5px;
}

#twitter-link:hover,
#share a:hover{
	background: #fff;
	color:#000;
}

footer {
	position: fixed;
	padding: 10px 20px;
	bottom: 0px;
	right: 10px;
	z-index: 2;
	color: #ddd;
}

footer p {
	margin: 0;
}

footer a,
footer a:visited {
	color: #ddd;
}

section {
	display: block;
}

nav {
	padding: 10px;
	border-radius: 0 0 0 20px;
	-moz-border-radius: 0 0 0 20px;
	-webkit-border-bottom-left-radius: 20px;
	top:0;
	right:0;

	font-size: 80%;
}

#home-link {
	font-family: "Courier New";
	font-weight: bold;
	font-style: italic;
	display: none;
}

#help,
nav {
	position: fixed;
	z-index: 2;
}

#options>div .select {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	color: #222;
	padding: 0px 6px;
	margin: 0 5px;
	cursor: pointer;
	display: inline-block;
	position: relative;
	text-shadow: none;
	line-height: 23px;
	height: 23px;
}

#options>div .select.hover {
	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}

#options>div .select ol {
	position: absolute;
	top: 1.9em;
	left: 0px;
	background: #eee;
	margin: 0;
	padding: 5px 0;
	font-family: Helvetica, Arial;
	font-size: 12px;
	width: 160px;
	text-transform: none;
	display: none;
	line-height: normal;

	border-radius: 0 5px 5px 5px;
	-moz-border-radius: 0 5px 5px 5px;
	-webkit-border-radius: 0 5px 5px 5px;
}

#options>div .select li {
	list-style-type: none;
	margin: 0;
	padding: 8px 10px;
}

#options>div .select li:hover {
	background: #fff;
}

#options>div .select li.set {
	cursor: default;
	background: #ddd;
	
}

#primary-locale {
	background: #cef;
}

#secondary-locale {
	background: #fdd;
}

nav a,
nav a:visited,
#help a#help-close,
#help a#help-close:visited {
	width:30px;
	height: 30px;
	line-height: 30px;
	display: block;
	float: right;
	margin-left: 5px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	font-size: 26px;
	outline: none;
	font-family: Gill, Helvetica, Arial, sans-serif;
	font-weight: bold;

	background: #ddd;
	color: #222;

	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

#help a#help-close,
#help a#help-close:visited {
	position: absolute;
	top: 5px;
	right: 5px;
}

nav a:hover,
#help a#help-close:hover {
	background: #fff;
	color: #000;
}


#help {
	width: 550px;
	padding: 20px;
	display: none;
	top: 5px;
	right: 5px;
	margin: 0;
	z-index: 10;
	font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
	text-transform: none;

	background: #000;
	color: #fff;

	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
}

#help a,
#help a:visited {
	color:#fff;
}

#phrase {
	margin: 0;	
}

.credit {
	font-size: 80%;
}

/* float clearing for IE6 */
* html #inputs,
* html nav {
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html #inputs,
*+html nav {
  min-height: 1%;
}

/* float clearing for everyone else */
#inputs:after,
nav:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}