body, html {height: 100%;}
body { background-color: #363a3f; }

#outer {height: 100%; overflow: visible;} /* or without overflow */
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */


#outer { width: 100%; }
#middle {  }
#inner { background: transparent url('../images/inner_background.png') repeat-x 50% 50%; }

#users_list img .selected { opacity: 1 }

#content { width: 960px; height: 570px; margin: 0 auto; position: relative; }

	#content .action { position: absolute; bottom: 20px; z-index: 30; }
		#content .action.download { left: 0; }
		#content .action.buy { right: 0; }

		#content .action a { display: block; position: relative; width: 200px; height: 100px; margin: 0; padding: 0; text-decoration: none; }

			#content .action a .icon, #content .action a .spotlight, #content .action a .ref, #content .action a .text, #content .action a .subtext { position: absolute; }
			#content .action a .text { font-size: 18px; color: #fff; bottom: 45px; }
			#content .action a .subtext { font-size: 12px; color: #82858a; bottom: 30px; }
			#content .action a .spotlight { bottom: 15px; width: 103px; height: 24px; overflow: hidden; z-index: 10; }
			#content .action a .icon { bottom: 23px; z-index: 200; }
			#content .action a .ref { bottom: 5px; z-index: 100; }

			#content .action.download a .spotlight { left: 3px; }
			#content .action.buy a .spotlight { right: 0px; }

			#content .action.download a .icon { left: 20px  }
			#content .action.buy a .icon { right: 15px; }

			#content .action.download a .ref { left: 20px; }
			#content .action.buy a .ref { right: 15px; }

			#content .action.download a .text { left: 90px; }
			#content .action.buy a .text { right: 100px; }

			#content .action.download a .subtext { left: 90px; }
			#content .action.buy a .subtext { right: 100px; }

			#content .action a:hover .icon { bottom: 26px; }
			#content .action a:hover .ref { bottom: 2px; }
			#content .action a:hover .text { }
			#content .action a:hover .subtext { }

			#content .action.download a:hover .subtext { color: #ccff99; }
			#content .action.buy a:hover .subtext { color: #66ccff; }

	#content .popup { position: absolute; z-index: 50; width: 184px; height: 56px; padding: 14px 17px 24px 17px; background: transparent url('../images/bubble.png') no-repeat left top; }

		#content .popup div.content { color: #b2bac0; font-size: 11px; line-height: 14px; font-weight: bold; }

			#content .popup div.content a:link,#content .popup div.content a:hover,#content .popup div.content a:visited { color: #fff; font-size: 12px; text-decoration: none; line-height: 16px; height: auto; margin:0; padding:0; display:inline; }
				#content .popup div.content a:hover { text-decoration: underline; }
			#content .popup div.content a span { padding-left: 5px; color: #b2bac0; }

			#content .popup div.content a.version { color: #b4f360; font-size: 11px; line-height: 14px; }
				#content .popup div.content a.version:hover { text-decoration: underline; }

#title { height: 73px; }
	#title .name, #title .slide { display: block; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; font-size: 40px; line-height: 40px; }
	#title .name { float: left; color: #fff; font-weight: bold; cursor: pointer; width: 140px; background: transparent url('../images/springy-logo.png') no-repeat left top; text-indent: -2000px; }
	#title .version { float: left; color: #73767b; font-size: 12px; margin: 18px 0 0 5px; }
	#title .slide { float: right; color: #97b9d5; letter-spacing: -2px; margin-right:20px; font-size: 30px; }

#menu { width: 278px; height: 145px; position: absolute; bottom: 38px; left: 341px; }

#menu_content { width: 278px; height: 145px; position: relative; }
	#menu_content .pos { position: absolute; width: 98px; height: 145px; cursor: pointer; }

		#menu_content #pos_1 { left: 0px; top: 11px; z-index: 10; width: 60px; height: 86px; filter:alpha(opacity=30);-moz-opacity:.30;opacity:.30; }
		#menu_content #pos_2 { left: 30px; top: 5px; z-index: 20; width: 80px; height: 114px; filter:alpha(opacity=65);-moz-opacity:.65;opacity:.65; }
		#menu_content #pos_3 { left: 90px; top: 0; z-index: 30; width: 98px; height: 145px; filter:alpha(opacity=100);-moz-opacity:1;opacity:1; }
		#menu_content #pos_4 { left: 168px; top: 5px; z-index: 20; width: 80px; height: 114px; filter:alpha(opacity=65);-moz-opacity:.65;opacity:.65; }
		#menu_content #pos_5 { left: 218px; top: 11px; z-index: 10; width: 60px; height: 86px; filter:alpha(opacity=30);-moz-opacity:.30;opacity:.30; }

		#menu_content #tooltip { display: none; position: absolute; left: 0; top: 110px; z-index: 300; width: 278px; height: 20px; font-size: 14px; line-height: 14px; font-weight: normal; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; text-align: center; }


#footer { width: 100%; position: absolute; bottom: 0; left: 0; }
	#footer ul, #footer span { float: left; color: #717377; margin: 3px; padding: 0; font-size: 11px; }
	#footer span { float: right; margin: 6px 15px; }
		#footer li { float: left; margin: 3px 0; padding: 0 0 0 10px; list-style: none; }
			#footer li a:link, #footer li a:hover, #footer li a:visited { padding: 3px; color: #acadaf; text-decoration: none; }
			#footer li a:hover { color: #fff; }

#slides { width: 960px; height: 465px; position: relative; overflow: hidden; }

	#slides .grad_left, #slides .grad_right { width: 18px; height: 465px; position: absolute; top: 0; }
	#slides .grad_left { left: 0; }
	#slides .grad_right { right: 0; }

	#slides .slide { width: 960px; height: 465px; position: absolute; top: 0; left: 0; display: none; }
		#slides .slide .wrapper { width: 100%; position: relative; }

			#slides .slide .wrapper .col-2 { float: left; width: 440px; padding: 0 20px; }
			#slides .slide .wrapper h1 { margin: 0; padding: 0; font-size: 18px; line-height: 18px; font-weight: normal; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; }
			#slides .slide .wrapper p, #slides .slide .wrapper li { margin: 0; padding: 0; font-size: 13px; line-height: 18px; color: #c6d5e2; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; list-style: none; }

			#slides .slide#slide_1 .wrapper { }
				#slides .slide#slide_1 .wrapper h1 { margin: 10px 3px; }
				#slides .slide#slide_1 .wrapper p { margin: 5px 3px; }

			#slides .slide#slide_2 .wrapper { margin-top: 15px; }
				#slides .slide#slide_2 .wrapper h1 { margin: 10px 0; }
				#slides .slide#slide_2 .wrapper p { margin: 5px 0; }

				#slides .slide#slide_2 .wrapper .fade { position:absolute; top:308px; right:30px; width:201px; height:80px; overflow: hidden; }
				#slides .slide#slide_2 .wrapper .fade img { display: none; }

			#slides .slide#slide_3 { display: block; }
			#slides .slide#slide_3 .wrapper { }
				#slides .slide#slide_3 .wrapper ul { position: absolute; top: 0; left: 0; margin: 55px 0 0 10px; padding: 0; }
				#slides .slide#slide_3 .wrapper li { margin: 0; padding: 0 0 6px 20px; font-weight: lighter; font-size: 24px; line-height: 32px; background: transparent url('../images/slides/bullet.gif') no-repeat left 12px; cursor: pointer; }
				#slides .slide#slide_3 .wrapper li.selected { color: #fff; background-image: url('../images/slides/bullet_selected.gif'); }
				#slides .slide#slide_3 .wrapper .screenshot { position: absolute; top: 15px; right: 20px; }

			#slides .slide#slide_4 .wrapper { }
				#slides .slide#slide_4 .wrapper .text { position: absolute; top: 20px; left: 0; }
				#slides .slide#slide_4 .wrapper h1 { margin: 45px 0 10px 20px; width: 480px; }
				#slides .slide#slide_4 .wrapper p { margin: 5px 0 5px 20px; width: 480px; }
				#slides .slide#slide_4 .wrapper .screen { position: absolute; top: 20px; right: 40px; }
				#slides .slide#slide_4 .wrapper .quote { position: absolute; top: 60px; right: 60px; width: 175px; font-size: 16px; line-height: 22px; color: #fff; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; text-align: center; }

			#slides .slide#slide_5 .wrapper { margin-top: 50px; }
				#slides .slide#slide_5 .wrapper h1 { margin: 10px 20px; }
				#slides .slide#slide_5 .wrapper p { margin: 5px 0; }

				#slides .slide#slide_5 .wrapper li { padding-left: 20px; background: transparent url('../images/slides/list_bullet.gif') no-repeat 5px 6px; }