/* 
   Spawn Studios CSS
   v1.0
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

*{
	margin: 0;
	padding: 0;
}

body{
	
	font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif;
	background-color: #121315;
}

a{
	text-decoration: none;
	outline-color: invert;
	outline-style: none;
	border: none;
}

a img{
	border: none;
}

div#page_wrap{
	width: 960px;
	height: 1460px;
	margin: 0 auto;
	background: url(images/background.png) no-repeat;
}

div#header{
	font-size: 12px;
	}
	div#header div.title{
		background: url(images/header.png) no-repeat;
		background-position: center;
		position: relative;
		top: 35px;
		height: 83px;
	}
	
div#main_navi{
	float: left;
	margin-top: 50px;
	height: 80px;
	width: 960px;
	}
	div#main_navi div.appstore{
		float: left;
		list-style-type: none;
		height:100%;
		width:100%;
		}
		div#main_navi div.appstore div.applink{
			width:186px;
			height:61px;
			top:40px;
			left:80px;
			display: block;
			position: relative;
			}
			div#main_navi div.appstore div.applink a{
				display:block;
				width:186px;
				height:61px;
				background: url(images/app_store_badge_2.png) no-repeat;
				}
			div#main_navi div.appstore div.applink a:hover img {
				visibility:hidden;
			}
			
			div#main_navi ul.right li.app_store a:hover{
				color: #ff5a00;
				}
/* END div#header */

div#main{
	width: 500px;
	height: 620px;
	float: right;
	background: url(images/main_bg.png);
	border: 2px solid #1f2223;
	color: #ccc;
	line-height: 22px;
	display: inline;/* fix double margin */
	margin: 0px 135px 0px 0px;
	}
	div#main div.post{
		background: url(images/text.png) no-repeat;
		margin-left: 27px;
		margin-top: 50px;
		margin-bottom: 30px;
		height: 100%;
		}
		
		div#main div.post div.link_1{
			height: 24px;
			width: 136px;
			left: 309px;
			top: 377px;
			display: block;
			position: relative;
			}
			
		div#main div.post div.link_1 a {
			display:block;
			width:136px; 
			height:24px; 
			background:url("images/buy_2.png") left top no-repeat;
			}
			
		div#main div.post div.link_1 a:hover img {
			visibility:hidden;
			}
			
		div#main div.post div.link_2{
			height: 24px;
			width: 136px;
			left: 295px;
			top: 394px;
			display: block;
			position: relative;
			}
			
		div#main div.post div.link_2 a {
			display:block;
			width:136px; 
			height:19px; 
			background:url("images/free_2.png") left top no-repeat;
			}
			
		div#main div.post div.link_2 a:hover img {
			visibility:hidden;
			}

/* END div#main */

div#footer{
	color: #666;
	font-size: 12px;
	background: url(images/footer_bg.gif) repeat-x;
	}
	div#footer div.footer_wrapper{
		width: 960px;
		margin: 0 auto;
		padding: 18px 0;
		position: relative;
		}
		div#footer div.footer_wrapper a{
			color: #ccc;
			text-decoration: none;
			}
		div#footer div.footer_wrapper a:hover{
			color: #fff;
			}
/* END div#footer */

div#sidebar_01{
	width: 316px;
	height: 520px;
	float: left;
	margin-top: 30px;
	margin-bottom: 0px;
	background: url(images/screenshot_01.png) no-repeat;
	background-position: center;
	position: relative;
}
/* END div#sidebar_01 */

div#sidebar_02{
	width: 316px;
	height: 520px;
	float: left;
	margin-top: 0px;
	margin-bottom: 30px;
	background: url(images/screenshot_02.png) no-repeat;
	background-position: center;
	position: relative;
}
/* END div#sidebar_02 */

div#sidebar_03{
	width: 316px;
	height: 520px;
	float: right;
	margin-top: 30px;
	margin-bottom: 30px;
	background: url(images/screenshot_03.png) no-repeat;
	background-position: center;
	position: relative;
}
/* END div#sidebar_03 */

div#sidebar_mag_logo{
	width: 175px;
	height: 226px;
	float: left;
	margin-left: 76px;
	margin-top: 68px;
	margin-bottom: 0px;
	background: url(images/magnetrox_logo.png) no-repeat;
	background-position: center;
	position: relative;
}
/* END div#sidebar_mag_logo */


div#sidebar_spawn_logo{
	width: 175px;
	height: 143px;
	float: left;
	margin-left: 10px;
	margin-top: 180px;
	margin-bottom: 0px;
	left: -255px;
	background: url(images/spawn_logo.png) no-repeat;
	background-position: center;
	position: relative;
}
/* END div#sidebar_spawn_logo */