/*
	## Cascading stylesheet written by Simon Tsui
	## Copyright © 2009. All rights reserved
	## Reproduction in part or whole of the cascading stylesheet and background images without permission is prohibited
	## http://www.simontsui.net/legal/
*/

/* = = = The usual HTML structure = = = */

	body { margin: 0; padding: 0; font: 12px tahoma, verdana, helvetica, sans-serif; letter-spacing: 1px; text-align: center; background-color: #fff; }
	html { margin: 0; padding: 0; overflow: auto; }

	#JumpTo { position: absolute; left: -999em; }
	#Container { text-align: left; margin: 0 auto; background: #fff; color: #000; }
	#Header { text-align: center; background: url(../files/images/stnet_banner.png) center no-repeat; height: 60px; }
		#Header a { text-decoration: none; width: 450px; height: 60px; display: block; margin: 0 auto; }
	#InlineMenu {}
	#Content { }
	#Menu { line-height: 1em; }
	#AlternateMenu {}
	#Footer { clear: both; width: 98%; text-align: center; margin: 0; padding: 1%; }

/* = = = Somewhat more specific divs within #content = = = */

	/* two column layout */
	.twoCol {}
	.main { width: 71%; padding: 2% 1%; }
	.side { width: 25%; padding: 2% 1%; }

	/* three column layout */
	.threeCenter { width: 46%; position: relative; left: 25%; float: left; padding: 2%; }
	.threeLeft { width: 22%; position: relative; right: 50%; float: left; padding: 2% 1%; }
	.threeRight { width: 22%; float: right; padding: 2% 1%; }

	/* If you need a four column layout, you'd be better off with three columns, and splitting the main content column in two*/


	/* Classes for making columns to act as pseudo tables */
	.two { width: 48%; float: left; }			/* two columns */
	.three { width: 32%; float: left; }			/* three columns */
	.four { width: 24%; float: left; }		/* four columns */


	/* catch-all divs, useful for most situations */
	.padCol { padding-left: 15px; }
	.padLeft { padding-left: 15px; }
	.padRight { padding-right: 10px; }
	.clear { clear: both; }
	div.hr { height: 1px; background: #ccc; clear: both; }
	div.hr hr { display: none; }
	.capslock { text-transform: uppercase; }
	.capitalize {text-transform: capitalize; }
	.caption { font-size: 11px; color: #666; text-align: center !important; }


	/* float classes, useful for anything */
	.left { float: left; }
	.right { float: right; }
	.center { margin: 0 auto; }

	/*lists prepared */
	ul.square { list-style-type: square; }
	ul.none { list-style-type: none; }
	ul li { margin: 5px 0; }
	li.pdf { list-style-type: none; background: #fff url('../files/images/icon.small-pdf.gif') no-repeat top left; margin-left: -25px !important; padding-left: 25px !important; height: 17px; }

	/* link decorations */
	a, a:link, a:visited, a:active { color: #369; }
	a:hover, a.active:hover { color: #696; text-decoration: none; }
	a.active { text-transform: uppercase; text-decoration: none; font-weight: bold; color: #000; }
	a img { border: 0; }

	/* border decorations */
	.borderTop { border-top: 1px solid #ccc; }
	.borderBottom { border-bottom: 1px solid #ccc; }
	.borderLeft { border-left: 1px solid #ccc; }
	.borderRight { border-right: 1px solid #ccc; }
	.borderHorizontal { border-width: 1px 0; border-style: solid; border-color: #ccc; }
	.borderVertical { border-width: 0 1px; border-style: solid; border-color: #ccc; }

	/* miscellaneous styles */
	dl dt { font-weight: bold; }
	.hidden {visibility: hidden;}
	ul li { margin-top: 15px; margin-bottom: 15px; }

/* = = = Specific Page Styles = = = */

	/* House */
	#House #Content { position: relative; margin: 0 auto; width: 1000px; height: 650px; background: url('/files/images/house/background.png') no-repeat top right; overflow: hidden;}
	#House li { margin: 10px; }
	#House #simon { display: block; position: absolute; left: 260px; top: 541px; width: 40px; height: 96px; }
	#House #tv { display block; width: 79px; height: 95px; position: relative; top: 306px; left: 311px; background: url('/files/images/house/sttv.gif') no-repeat; cursor: pointer; z-index: 3; }
	#House #tv .box, #House #tv #image, #House #cards #topcard,	#House #faucet #on, #House #freezer .open, #House #freezer .box, #House #movies .box, #House #movies #rack, #House #fridge .open, #House #fridge .box, #House #books #fall, #House #books .box, #House #computer .box, #House #jukebox .box {display: none; }
	#House #tv:hover { display: block; width: 79px; height: 95px; background: none; z-index:3; }
	#House #tv:hover .box { display: block; position: relative; top: -309px; right:312px; width: 226px; padding: 10px; background-color: #fff; color: #000; }
	#House #movies { display block; width: 51px; height: 92px; position: absolute; top: 318px; left: 469px; cursor: pointer; z-index: 3; }
	#House #movies:hover #rack { display: block; width: 51px; height: 92px; background: url('/files/images/house/dvd_rack.png') no-repeat; z-index:3; }
	#House #movies:hover .box { display: block; position: relative; top: -410px; right: 469px; width: 226px; padding: 10px; background-color: #fff; color: #000; }
	#House #freezer { display: block; position: absolute; top: 392px; right: 268px; width: 53px; height: 40px; cursor: pointer; z-index:3; }
	#House #freezer:hover .open { display: block; position: relative; top: -10px; left: 1px; width: 95px; height: 75px; z-index:3; background: url('/files/images/house/freezer.png') no-repeat; }
	#House #freezer:hover .box { display: block; position: relative; top: -467px; right:679px; width:226px; padding: 10px; background-color: #fff; color: #000; }
	#House #fridge { display: block; position: absolute; top: 432px; right: 268px; width: 53px; height: 57px; cursor: pointer; z-index:3; }
	#House #fridge:hover .open { display: block; position: relative; top: -12px; left: 2px; width: 68px; height: 80px; z-index:3; background: url('/files/images/house/fridge.png') no-repeat; }
	#House #fridge:hover .box { display: block; position: relative; top: -512px; right:679px; width:226px; padding: 10px; background-color: #fff; color: #000; }
	#House #faucet { display: block; position: absolute; top: 481px; right: 176px; width: 10px; height: 22px; z-index:3; }
	#House #faucet:hover #on { display: block; position: relative; top: 7px; right: 25px; width: 19px; height: 25px; z-index:3; background: url('/files/images/house/anime_sink.gif') no-repeat; }
	#House #time { display: block; position: absolute; top: 370px; right: 204px; width: 12px; height: 9px; background: url('/files/images/house/anime_time.gif') no-repeat; z-index:3; }
	#House #time:hover { background: url('/files/images/house/stove_time.png') no-repeat; }
	#House #fire { display: block; position: absolute; top: 376px; right: 164px; width: 20px; height: 13px; z-index:3; }
	#House #fire:hover { background: url('/files/images/house/anime_stove.gif') no-repeat; }
	#House #books { display block; width: 89px; height: 121px; position: absolute; top: 182px; left: 444px; background: url('/files/images/house/book.png') no-repeat; cursor: pointer; z-index: 2; }
	#House #books:hover { background-image: none; }
	#House #books:hover #fall { display: block; position: relative; top: 0; right: 0; width: 89px; height: 121px; background: url('/files/images/house/anime_book2.gif') no-repeat; z-index:3; }
	#House #books:hover .box { display: block; position: relative; top: -303px; right:444px; width: 226px; padding: 10px; background-color: #fff; color: #000; }
	#House #computer { display block; width: 33px; height: 60px; position: absolute; top: 149px; right: 398px; cursor: pointer; z-index: 2; }
	#House #computer:hover { background: url('/files/images/house/laptop_bsod.png') no-repeat 2px 21px; z-index: 3; }
	#House #computer:hover .box { display: block; position: relative; top: -149px; right:550px; width: 530px; height: 200px; padding: 10px; background-color: #fff; color: #000; z-index: 3; }
	#House #mouse { display: block; position: absolute; top: 184px; right: 386px; width: 12px; height: 12px; z-index:2; }
	#House #spinny { display: block; position: absolute; top: 222px; right: 347px; width: 50px; height: 75px; z-index:2; background: url('/files/images/house/chair.png') no-repeat; }
	#House #spinny:hover { background: url('/files/images/house/anime_spinny.gif') no-repeat; }
	#House #darts { display: block; position: absolute; top: 150px; width: 44px; height: 56px; right: 279px; z-index:2; } 
	#House #darts:hover { width: 98px; height: 56px; background: url('/files/images/house/anime_darts.gif') no-repeat; }
	#House #jukebox { display: block; width: 56px; height: 79px; position: absolute; left: 343px; top: 101px; z-index:2; }
	#House #jukebox:hover { cursor: pointer; background: url('/files/images/house/anime_jukebox.gif') no-repeat; }
	#House #jukebox:hover .box { display: block; position: relative; top: -101px; left:-343px; width: 226px; padding: 10px; background-color: #fff; color: #000; }

/* Index */
	#Index #Content { width: 1000px; height: 650px; margin: 0 auto; position: relative; }
	#Index .box h2 {text-align: center; }
	#Index #house { display: block; width: 227px; height: 214px; position: absolute; left: 362px; top: 0; z-index: 4; }
	#Index #house a { display: block; width: 227px; height: 214px; position: absolute; left: 0; top: 0; z-index: 5; }
	#Index #house .box, #Index #busstop .box, #Index #mailbox .box, #Index #mailtruck .box { display: none; }
	#Index #house:hover .box { display: block; position: relative; top: 0px; left:30px; width: 150px; padding: 10px; background-color: #fff; color: #000; }
	#Index #busstop { display: block; width: 34px; height: 113px; position: absolute; left: 545px; top: 493px; z-index: 3; }
	#Index #busstop:hover .box { display: block; position: relative; top: 0; left: 54px; width: 150px; padding: 10px; background-color: #fff; color: #000; }
	#Index #mailbox { display: block; width: 30px; height: 41px; position: absolute; left: 93px; top: 68px; z-index: 4; }
	#Index #mailbox a { display: block; width: 30px; height: 41px; position: absolute; left: 0; top: 0; z-index: 5; }
	#Index #mailbox:hover .box { display: block; position: relative; top: 50px; right: 60px; width: 150px; padding: 10px; background-color: #fff; color: #000; }

	#Index #nyt { display: block; width: 31px; height: 42px; position: absolute; left: 850px; top: 415px; z-index: 4; }
	#Index #onion { display: block; width: 31px; height: 41px; position: absolute; left: 884px; top: 400px; z-index: 4; }
	#Index #ateazns { display: block; width: 31px; height: 40px; position: absolute; left: 608px; top: 326px; z-index: 4; }
	#Index #aam { display: block; width: 31px; height: 40px; position: absolute; left: 642px; top: 309px; z-index: 4; }
	#Index #bcb { display: block; width: 31px; height: 41px; position: absolute; left: 676px; top: 291px; z-index: 4; }
	#Index #disg { display: block; width: 31px; height: 40px; position: absolute; left: 827px; top: 507px; z-index: 4; }
	#Index #nv { display: block; width: 31px; height: 40px; position: absolute; left: 860px; top: 527px; z-index: 4; }
	#Index #yom { display: block; width: 31px; height: 40px; position: absolute; left: 894px; top: 540px; z-index: 4; }

	/* Portfolio */
	#Portfolio #Content>p+h3 { padding-top: 50px; border-top: 1px solid #666; }