/* -----------------------------------
			
		 TheJohnnyShow.com
	 ~ screen.css stylesheet ~
		  
   ----------------------------------- */

* { padding: 0; margin: 0; } /* kill all whitespace */

body {
	line-height: 1; /* http://www.meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/ */
	font-size: x-small; /* for IE5/Win */
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;	/* for standards based browsers */
	font-family: "Trebuchet MS", Arial, Verdana, sans-serif;
	background: #620c0c url(/images/bkgd-red.png) 0 0;
	color: #000;
}

html>body {
	font-size: small; 	/* for Opera */
}

/* -----------------------------------
			 General Styles
   ----------------------------------- */
   
img,
a img,
form fieldset { border: none; }
form legend { display: none; }
ul { list-style: none; }
a { color: #101e38; }
a:hover { color: #1149a1; }
p { margin-bottom: 15px; line-height: 140%; }

/* -----------------------------------
		   Container Styles
   ----------------------------------- */

#container {
	width: 950px;
	padding-top: 20px;
	margin: 0 auto;
	position: relative;
	background: url(/images/bkgd-content.png) no-repeat top right;
}

#header-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 295px;
	height: 1020px;
	z-index: 110;
	background: url(/images/header-left.png) 0 0;
	text-indent: -9000px;
}

#bkgd-ribbon {
	position: absolute;
	width: 270px;
	height: 100%;
	z-index: 100;
	background: url(/images/bkgd-left.png) repeat-y 0 0;
}

/* -----------------------------------
		    Content Styles
   ----------------------------------- */

h2 {
	font: lighter 1.3em/1.3em Georgia, Times, serif;
	color: #620c0c;
}

#content-form {
	position: relative;
	z-index: 50;
	width: 315px;
	margin-bottom: -140px;
	padding: 100px 15px 5px 270px;
	border: 7px solid #ddd5d8;
}

.form-yes 		{ background: #fff url(/images/signup.gif) no-repeat 263px 11px; }
.form-thankyou 	{ background: #fff url(/images/thankyou.gif) no-repeat 263px 11px; }
.form-friends 	{ background: #fff url(/images/friends.gif) no-repeat 263px 11px; }

#content-form form { padding-left: 35px; }
#content-form form label { width: 28%; float: left; }
#content-form form label span { font: bold italic 1.2em Georgia,Times,serif; }
#content-form form input,
#content-form form select { width: 70%; float: left; margin-bottom: 10px; }
#content-form form textarea { width: 98%; height: 50px; float: left; margin-bottom: 10px; }
#content-form form input#submit { width: 89px; height: 25px; float: right; margin-right: 3%; }
#content-form form input#submit-friends { width: 98px; height: 25px; float: right; margin-right: 3%; }
#content-form form br { clear: both; }

#content {
	width: 610px;
	padding: 20px 20px 20px 290px;
	border: 15px solid #ddd5d8;
	background-color: #fff;
}

#find-johnny {
	float: right;
	width: 280px;
	margin-bottom: 50px;
}

#find-johnny a img { margin-top: 15px; }

#flickr {
	float: right;
	width: 110px;
}
#news {
	float: left;
	width: 495px;
}

span.date {
	display: block;
	font: lighter 0.9em/1.5em Georgia, Times, serif;
	color: #252525;
	margin-bottom: 10px;
}


form#friends fieldset { margin-bottom: 20px; }
form#friends label { font-weight: bold; }
legend.h2 {
	display: block;
	margin-bottom: 10px;
	font-size: 1.6em; 
	font-family: Georgia, Times, serif;
	color: #620c0c;
}

#friends table tbody td { 
	padding-bottom: 5px; 
}

.col1 {
	width: 10%;
	text-align: center;
	font-family: Georgia, Times, serif;
	font-size: 1.2em;
	font-style: italic;
	color: #620c0c;
}

#friends table input {
	width: 190px;
	margin: 0 20px;
}

textarea#body { 
	width: 85%; 
	height: 120px; 
}

input#Submit {  
	margin-left: 415px;
}

#download {
	float: right;
	width: 300px;
	padding: 5px;
	margin: 0 0 15px 15px;
	border: 3px solid #ddd5d8;
}

img.google-chart {
	display: block;
	margin-bottom: 15px;
}
p.google-chart-caption {
	text-align: center;
	color: #aeaeae;
	font-family: Verdana, Arial, sans-serif;
	font-size: 85%;
}

p.supporter {
	float: left;
	width: 49%;
	margin-bottom: 10px;
}
p.supporter em { font-weight: bold; }

/* -----------------------------------
		    Footer Styles
   ----------------------------------- */

#footer {
	width: 680px;
	padding: 20px 0px 0px 270px;
	font: 0.85em/130% Verdana, Arial, sans-serif;
	color: #feebeb;
}
#footer a { color: #feebeb; }
$footer a:hover { color: #fff; }
#footer p { margin-bottom: 5px; }

/* -----------------------------------
			 Miscellaneous
   ----------------------------------- */

.clear-left 	{ clear: left; }
.clear-right 	{ clear: right; }
.clear-both 	{ clear: both; }
.left 			{ float: left; }
.right			{ float: right; }
.block			{ display: block; }
.none			{ display: none; }
.strong			{ font-weight: bold; }
.no-background 	{ background-image: none; }
.ampersand		{ font-family: "Baskerville", "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-style: italic; }

/* ----------------------------------------------------------------------------
						Clearfix Easy Clearing of Floats

			http://www.positioniseverything.net/easyclearing.html
   ---------------------------------------------------------------------------- */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */