/*style3.css

  Created 10/29/05 for http://r-dub.us and its associated sites.

  Stealing ideas from this css file is fine, since that's how I got most of my ideas! :p~~

*/



body, body.beta	{background: #999; color: #444; margin: 0 auto; padding: 0; min-width: 640px; width: 80%; border: .5px solid #369; border-top: 0;}

body.beta {background: url(pics/betapage.jpg) no-repeat top left fixed #999;}



/*Page-wide link behavior: may be overridden for navigation, sidebar, etc.*/

a			{text-decoration: none;}

a span		{display: none;}

a:link		{color: #69c; background: transparent;}

a:visited	{color: #69c; background: transparent;}

a:hover		{color: #fff; background: #369; border-bottom: 1px dashed #69c; font-weight: bold; font-style: italic;}

a:active	{color: #000; background: #369;}



h1, h1.cosmix	{width: 100%; overflow: hidden; height: 150px; text-indent: -4000px; margin: 0; border-bottom: 0;}

h1		{background: url('pics/top2.jpg') #eee repeat-x top left; }

h1.cosmix		{background: url('pics/top2.jpg') #eee repeat-x top left;}

h2	{background: transparent; color: #369; display: block; font: 150% Georgia, Times, serif; font-weight: normal; font-style: normal; text-align: center; margin: 0 ;padding-top: .2em; border-top: 1px solid #369; line-height: 80%;}

h2 span {font: 50% Georgia, Times, serif; font-weight: normal; font-style: normal; font-variant: small-caps;}

h2 span.rss	{font: 8pt Arial, Helvetica, sans-serif; font-weight: bold; background-color: #FE7B05; color: #FFF; border: 1px outset; padding-left: 2px; padding-right: 2px;}

h3,h4	{background: transparent; color: #666; font: 90% Georgia, Times, serif; font-weight: bold; border-bottom: 1px solid #369; text-align: center; width: 40%; margin-left: 30%; margin-top: 0; margin-bottom: 0; clear: both;}

h4		{width: 80%; margin: .3em 10%;}

h4 a	{font-variant: small-caps;}

h5, h6		{display: inline; color: #369; font: 80% Georgia, Times, serif; font-weight: bold; border-left: 2px solid #369; border-right: 2px solid #369; padding: .2em; margin: .3em;}

h6		{font: 70% Georgia, Times, serif; font-weight: normal; border-left: 1px solid #369; border-bottom: 1px solid #369; border-right: 0; clear: both;}

* html h3 {margin-left: 0;} /*hack for IE to get it to center the h3 element */

* html h4 {margin-left: 5%;}

.nevershow  {display: none;} /*for navigation elements for non-css enabled browsers only */

.clear		{clear: both;}

#content, #contentends	{margin: 0; padding: 0; background: url(pics/maintop.jpg) #eee no-repeat top left;}

#contentends	{background: #eee;}

* html #content	{height: 1%;}

p.body, p.first, p.update, div.vdesc p		{font: 90% Georgia, Times, serif; color: #333; margin: 0; padding: .2em 5em; line-height: 1.3;}

p.body		{text-indent: 1em;}

p.update	{color: #036; background: #fff;font: 80% Arial, Helvetica, sans-serif; padding: .2em; text-indent: 0; margin: .5em; width: 90%; border: 1px solid #369; text-align: center;}

p.update:first-letter	{font-size: 100%; font-weight: bold; background: #369; color: #fff; border: 1px solid #69c;}

div.vdesc {display:block; height: 80px; width: 90%; overflow: auto; border: 1px solid #69c; background: url(pics/cvbkgd.jpg) #fefefe no-repeat top left; margin-bottom: 2em;}

div.vdesc p {padding: .2em 2em .2em 5em;}

object.vid {margin: 0 auto; text-align: center;}

.valid		{padding: 0 0 0 .2em; margin: 0;}

.valid a.one {text-indent: -3000px; background: url(pics/onelt.png) no-repeat top left; display: block; width: 100px; height: 140px;}

.valid a.one:hover {background: url(pics/one.png) no-repeat top left;}

.valid a img	{border: 0; margin: .5em 0; padding-left: .3em;}

.valid a:hover 	{background: #eee; border: 0;}

p.first:first-letter	{font-size: 150%; font-weight: normal; background: #369; color: #fff; padding: 0 .1em 0 .1em; border: 1px solid #69c;}

p.body em	{font-style: italic;}

/*MAINLARGE div is used on full-sized snap pages. There's no left-hand navigation present */

.mainlarge	{text-align: center; border: 0; margin: 0 .2em; background: transparent; overflow: hidden;}

.mainlarge img {border: 1px solid #369; padding: .3em; background: #bbb; margin: .3em 0;} 

.mainlarge p {border-left: 0;}

.mainlarge p.caption, .main p.caption {font: 75% Arial, Helvetica, sans-serif; background: transparent; color: #369; padding: 0 5em; margin: 0 0 .5em 0;}



.main, #lhnav	{overflow: hidden; display: inline-block;  float: left;}

/*MAIN div is used on the majority of the pages. There's a left-hand navigation bar present */

.main	{width: 79%; margin-left: 20%;  display: inline; background: transparent; padding: 1em 0; text-align: left; }

.main p.body, .main p.first	{padding: .2em 1em 1em .2em; text-align: justify; margin: 0;}

.main img	{border: 0; padding: 0; margin: .1em;}

.main img.nocaption	{float: right; margin: 0 -1px 0 .5em; border: 1px solid #369; background: #ccc; padding: .3em; border-right: 0; padding-right: 0;}

.main ul	{padding-left: 1em;}

.main ul ul	{padding-left: 2em;}

.main ul ul ul {padding-left: 3em;}



#lhnav	{width: 18%; margin-left: -99%; display: inline; background: transparent;}

#lhnav ul	{list-style-type: none; margin: 0; padding: 1em 0 0 0;}

#lhnav li	{display: block; text-align: left;}

#lhnav li a {display: block; width: 100%; font: 90% Georgia, Times, serif; font-variant: small-caps; font-weight: normal; padding: .3em 0 .3em .3em; border-left: 3px solid #9cf;color: #69c; margin: 0;}

#lhnav li a.jump	{color: #fff; background: #369;}

#lhnav li a.there	{color: #ccc;}

#lhnav li a:hover	{background: #9cf; color: #369; border-left: 3px solid #369; border-bottom: 0; font-weight: bold;}

* html #lhnav li a:hover {width: 100%;}

#lhnav li a:active	{color: #ccc;}









/*IPIC is pictures on the index pages. Includes a spot for the caption. WIDTH IS CALCULATED ON THE INDEX PAGE! there's just a holder width in here...*/

.ipic	{background: #ccc; float: left; margin: 3em; width: 1px; border: 1px solid #369; text-align: center;}

.ipic		{margin: 0 .3em 0 0;}

.ipic img	{border: 0; padding: .2em;}

.ipic p	{font: 70% Arial, Helvetica, sans-serif; text-align: center; margin: .2em; padding: 0;}





.new	{background: #ccc; color: #000;}

.endnew {background: transparent; color: rgb(204,25,27);}

.linkcol {background: transparent; color: #69c;}

img.header	{float: right; border: 0; padding: .1em;}



/*Picture Layer and Thumb layer*/

.piclayer	{border:0; margin: 1em 1em 2em 1em; padding: 0 0 1em 0; clear: both; width: 100%;}

.piclayer p.body	{margin-right: 2em;}

.piclayer h4	{font: 70% Georgia, Times, serif; font-weight: bold; text-align: left; color: #000; border-left: 1px solid #369; border-bottom: 1px solid #369; margin: 1em 2em 1em 0; padding-left: .2em;}

.thumb110	{width: 110px; height: 130px; float: left; border: 1px solid #369; margin: .2em; text-align: center;}

.thumb110 p	{font: 70% Arial, Helvetica, serif; text-align: center; color: #369; margin: 4px;}

.thumb110 a img	{width: 100px; height: 100px; border: 0; padding: 2px;}

.thumb110 a	{border: 0;position: absolute; width: 100px; height: 100px; display: block;}

* html .thumb110 a {margin-left: -52px;}

.thumb110 a:hover	{z-index: 400; width: 125px; height: 100px;}

.thumb110 a:hover img	{position: absolute; width: 150px; height: 150px; left: -25px; top: -25px; border: 10px solid #369; border-bottom: 75px solid #369; margin: 0; padding: 0;}

.thumb110 a:hover span	{font: 70% Arial, Helvetica, sans-serif; position: absolute; top: 140px; z-index: 500; display: block; }

* html .thumb110 a:hover span {margin-left: -60px;}

.thumbfull {width: 98%; border: 0; border-bottom: 1px solid #69c; margin: .2em 0 .75em 0; text-align: left; clear: both; overflow: auto; padding: .1em .1em .3em .1em;}

.thumbfull p {font: 80% Georgia, Times, serif; text-align: left; color: #000; margin: 4px;}

.thumbfull img	{float: right; display: block; margin: .1em; padding-bottom: .1em; border: 0;}

.thumbfull a.nocom	{float: left; display: block; margin: 0; padding: .1em 0; height: 151px; border: 0;}

.thumbfull a.nocom:hover	{background: transparent;}

.thumbfull a.nocom img	{float: none;}



.iends, .usends, .shends, .iendshead, .usendshead, .shendshead, .ackhead, .scends, .schead	{margin: .2em; padding: 0; color: #000; width: 90%;}

.iends, .iendshead {background: url(pics/iback.jpg) #fff no-repeat top left; clear: both;}

.usends, .usendshead {background: url(pics/usback.jpg) #fff no-repeat top left;}

.shends, .shendshead {background: url(pics/shback.jpg) #fff no-repeat top left;}

.scends, .schead {background: url(pics/scback.jpg) #fff no-repeat top left;}

.ackhead {background: url(pics/ackback.jpg) #fff no-repeat top left;}

/*.iends p, .usends p, .shends p {font: 70% Arial, Helvetica, sans-serif; padding: .2em 0 0 6em; text-align: left; display: block; height: 25px; }*/

.iends a, .usends a, .shends a , .iends span.no, .usends span.no, .shends span.no, .scends a, .scends span.no {font: 150% Arial, Helvetica, sans-serif; font-weight: bold; margin: 0 0 0 60px; padding: .1em .5em 0 0; display: block; float: left; width: 1.5em;}

.iends a:hover, .usends a:hover, .shends a:hover, .scends a:hover {background: transparent; color: rgb(204,25,27); border: 0; font-style: normal;}

.iends a:active, .usends a:active, .shends a:active, .scends a:active {background: transparent; color: rgb(204,25,27); border: 0; font-style: normal;}

.iends a.new, .usends a.new, .shends a.new, .scends a.new {color: rgb(204,25,27);}

.iends a.new:hover, .usends a.new:hover, .shends a.new:hover, .scends a.new:hover{color: #369; background: transparent; font-style: normal;}

.iends dt, .usends dt, .shends dt, .schead dt, .iendshead dt, .usendshead dt, .shendshead dt, .ackhead dt, .scends dt, .schead dt {font: 80% Arial, Helvetica, sans-serif; font-weight: bold; margin-left: 4em;}

.iends dd, .usends dd, .shends dd, .iendshead dd, .usendshead dd, .shendshead dd, .ackhead dd, .scends dd, .schead dd {font: 70% Arial, Helvetica, sans-serif; margin-left: 7.5em;}

.iendshead a, .usendshead a, .shendshead a, .ackhead a, .schead a  {font: 130% Arial, Helvetica, sans-serif; font-variant: small-caps; font-weight: bold; display: block; float: left; width: 3em; margin: 0 0 0 60px;}

.iendshead a:hover, .usendshead a:hover, .shendshead a:hover, .ackhead a:hover, .schead a:hover {color: rgb(204,25,27); background: transparent; border: 0; font-style: normal;}

.itembody	{margin: 0; height: 0; visibility: hidden; display: none;}

.guide {display: block; float: right; width: 50%; border: 1px solid #369; margin: 0 0 .3em .3em;}

.guide p.top {margin: 0; text-indent: 0; display: block; width: 100%; color: #fff; background: #369; text-align: center; font-variant: small-caps; font-weight: bold;}

.guide p {margin: 0; text-indent: 0; text-align: center;}

/*The control box for the Google Map on the end pages*/

.maptab {

		width: 680px;

		overflow: hidden;

		margin: .3em auto;

		background: transparent;

		color: #000;

		border: 1px solid #369;

		background: rgb(242,239,233);

	}

	.maptab ul {

		margin: 0;

		padding: 0;

		list-style-type: none;

		width: 20%;

		text-align: right;

		float: left;

		border-right: 2px solid #369;

	}

	.maptab li {

		display: inline;

	}

	.maptab li p {

		font: 70% Arial, Helvetica, sans-serif;

		background: #ddd;

		color: #369;

		font-variant: small-caps;



		text-align: center;

		margin: 0; padding: 0 .1em;.

	}

	.maptab li a.map {

		background: transparent;

		display: block;

		width: 98%;

		font-weight: bold;

		font-variant: small-caps;

		padding: .1em .2em .2em 0;



	}

	.maptab li a.map:hover {

		background: #369;

		color: #fff;

		border-bottom: none;

		font-style: normal;

		

	}

	.maptab li a.map:active {

		background: #369;

		color: #fff;

		border-right: 2px solid #fff;

		border-bottom: none;

		font-style: normal;

		}

	#mapinfo {

		margin: 0;

		text-align: center;

		padding: 0 .3em;

	}

	#mapinfo p {

		font: 80% Georgia, Times, serif;

		padding: 0 .3em;

		font-weight: normal;

	}

	#mapinfo p span.no {

		font-style: italic;

		background: #369;

		color: #fff;

	}

/*Next/prev page navigation  */

.pagenav	{clear: both; margin-top: 2em; padding-top: 2em;}



.pagenav ul	{list-style-type: none; margin: 0 0 3em 0; padding: 0;}

.pagenav ul li	{float: left; margin: 0;}

.pagenav ul li a	{padding: 0 .3em;}



/*Top of page site navigation link setup. HTML CODE: <ul>, <li>*/

#sitenav	{background: transparent;}

#sitenav ul	{list-style-type: none; position: absolute; top: .2em;  z-index: 100; margin: 0; padding: 0;}



#sitenav li	{display: inline; float: left; white-space: nowrap; border-top: 2px solid #c00; }

#sitenav li a	{font: 80% Georgia, Times, serif; color: #eee; display: block;  text-align: center; padding: .3em 1.5em .3em 1.5em; margin: 0; font-weight: bold;}

#sitenav li a:link	{font-weight: bold;}

#sitenav li a:hover	{color: #fff; background: #369; border-bottom: 0; font-weight: bold;}

#sitenav li a:active {font-weight: bold;}



/*Bottom of page disclaimer section*/

#disclaim	{clear: both; border-top: 1px solid #369; margin: 0; padding-top: .3em; background: #eee; overflow: hidden; display: inline-block;}

#disclaim p	{font: 75% Georgia, Times, serif; text-align: justify; background: transparent; color: #999; margin: 0 6em; padding-bottom: 1em;}

#disclaim p em {font-style: italic; font-weight: bold;}



/*Fixed page navigation bubble for COSMIX section */

#fixover	{position: absolute; top: 25px; right: 1%; width: 45px; z-index: 700; padding: 0; text-align: left; }

body > div#fixover {position: fixed; min-height: 70px;}

#fixover a.close	{color: #a00;}

#fixover a.close:hover	{color: #fff; border: 0; font-style: normal;}



/* 3-D style raised boxes. Courtesy http://cssplay.co.uk. Stu Nicholls is the man!*/

.threed {background: transparent; width: 200px; float: right; margin: .3em 0 0 .3em;}

.threed h1, .raised p {margin:0 10px;}

.threed h1 {font-size:2em; color:#fff;}

.threed p {padding-bottom:0.5em;}





.threed .b1, .threed .b2, .threed .b3, .threed .b4, .threed .b1b, .threed .b2b, .threed .b3b, .threed .b4b {display:block; overflow:hidden; font-size:1px;}

.threed .b1, .threed .b2, .threed .b3, .threed .b1b, .threed .b2b, .threed .b3b {height:1px;}

.threed .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}

.threed .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}

.threed .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}

.threed .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}

.threed .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}

.threed .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}





.threed .b1 {margin:0 5px; background:#fff;}

.threed .b2, .threed .b2b {margin:0 3px; border-width:0 2px;}

.threed .b3, .threed .b3b {margin:0 2px;}

.threed .b4, .threed .b4b {height:2px; margin:0 1px;}

.threed .b1b {margin:0 5px; background:#999;}

.threed .boxcontent {display:block;  background:#ccc; border-left:1px solid #fff; border-right:1px solid #999; padding: 0.3em .6em;}

.threed .boxcontent h3.box {width: 100%; border-bottom: 1px solid #369; background: #ccc; font: 110% Georgia, Times, serif; font-weight: bold; text-align: center; color: #333; font-variant: small-caps;margin: 0; padding: 0; line-height: .5em;}

.threed .boxcontent h3.box span {background: #ccc; padding: .2em;}

.threed .boxcontent h5.box {width: 100%; display: block; border: 0; font: 60% Arial, Helvetica, sans-serif; font-variant: small-caps; margin:0; padding: 0; text-align: center; color: #fff; background: #369; margin-bottom: .1em;}

.threed .boxcontent ul	{list-style-type: none; margin: 0; padding: 0;}

.threed .boxcontent li	{width: 100%; text-align: center; margin: 0;}

.threed .boxcontent li a	{display: block; font: 80% Georgia, Times, serif; font-variant: small-caps; background: transparent; color: #369;}

.threed .boxcontent li a:hover	{color: #fff; background: #369; border: 0;}

.threed .boxcontent p {font: 70% Georgia, Times, Serif; text-align: right; border-right: 1px solid #369; margin: 1em .2em; padding-right: .2em;}

.threed .boxcontent p span.date {font: 80% Arial, Helvetica, sans-serif; display: block; width: 100%;}

.threed .boxcontent p.codep	{font: 8px Courier, monospace;border: 0; text-align: left; margin: 0;}



/*Caption popups on COSMIX pages. Popup css and code all courtesy http://cssplay.co.uk. What can I say? The man does great work! :) */

.balloon {

	font-family: Georgia, Times, serif;

	width: 90%;

	height: 1px;

	margin: 0;

	}

.balloon ul {

	padding: 0;

	margin: 0;

	border: 0;

	list-style-type: none;

	}

.balloon ul li {

	float: left;

	margin: 5px;

	width: 155px;

	height: 156px;

	border: 1px solid #369;

	text-align: center;

	}

.balloon ul li a, .balloon ul li a:visited {

	display: block;

	text-decoration: none;

	color: #000;

	background: #fff;

	border: 0;

	}

.balloon ul li a:hover {

	border: 0;

	color: #eee;

}

.balloon ul li a img, .balloon ul li a:visited img {

	border: 0;

	}

.balloon ul li dl {

	visibility: hidden;

	position: absolute;

	}

table {

	margin: -2px;

	border: 0;

	padding: 0;

	border-collapse: collapse;

	font-size: 1em;

}

.balloon dl {

	width: 200px;

	padding: 0 0 20px 0;

	background: transparent url(pics/bottom.gif) no-repeat bottom left;

	height: auto;

}

.balloon dt {

	margin: 0;

	padding: 5px;

	font-size: 80%;

	font-weight: bold;

	color: #fff;

	background: transparent url(pics/top.gif) no-repeat top left;

	text-align: center;

	}

.balloon dd {

	margin: 0; 

	padding: 5px 15px;

	color: #000;

	font-size: 70%;

	border: 1px solid #000;

	border-width: 0 1px;

	background: #fff url(pics/cbkgd.jpg) no-repeat bottom right;

	}

.balloon dd p {

	padding: 0;

	margin: 10px 0; 

	line-height: 1em;

	font: 90% Arial, Helvetica, sans-serif;

	text-align: left;

	text-indent: .8em;

	}

/*Non-IE browsers and IE 7 understand the following rules. IE browsers (6 and lower) look at ieballoon.css for their information */

.balloon ul li:hover {

	color: #000;

	position: relative;

}

.balloon ul li:hover dl {

	visibility: visible;

	top: 130px;

	left: 40px;

}

.balloon ul li:hover dl em {

	display: block;

	position: absolute;

	left: 40px;

	top: -35px;

	width: 36px;

	height: 36px;

	background: transparent url(pics/pointer.gif);

}

.balloon ul li:hover dl a {

	color: #69c;

	background: transparent;

	text-decoration: none;

	display: inline;

}

.balloon ul li:hover dl a:hover {

	text-decoration: underline;

	color: #fff;

	background: #369;

}