/* Global */
html {
	overflow-y:				scroll;
}
body {
	background:				#600d0d url("/src/img/background.jpg") no-repeat fixed center top;
	font:					12px "Lucida Grande", "Arial", sans-serif;
}

#content {
	width:					820px;
	min-height:				500px;
	margin:					10px auto 10px auto;
}

#footer {
	color:					#eeeeee;
	font:					9px "Monaco", "Courier", monospace;
	text-align:				center;
	text-shadow:			#444444 0px 2px 2px;
}

#footer a {
	color:					#eeeeee;
	border-bottom:			none;
	text-decoration:		none;
}

.caption {
	color:					#cccccc;
	font:					italic 11px "Lucida Grande", "Arial", sans-serif;
}

h1, h2, h3, h4, h5 {
	text-shadow:			0px 1px 2px rgba(0, 0, 0, 0.2);
	font-weight:			normal;
}

h1							{ font-size: x-large;	}
h2							{ font-size: large;		}
h3							{ font-size: medium;	}
h4							{ font-size: small;		}
h5							{ font-size: x-small;	}
h6							{ font-size: xx-small;	}

a {
	color:					#0088CC;
	border-bottom:			none;
	text-decoration:		none;
}

a:visited {
	color:					#0077AA;
}

a:hover {
	border-bottom:			1px solid;
}

a img {
	border:					none;
}

a.plain {
	border-bottom:			none;
}





/* Navigation */
#nav {
	width:					820px;
	height:					45px;
	margin-top:				20px;
	margin-bottom:			10px;
}

#nav_bar {
	float:					right;
	padding-right:			15px;
}

#nav a						{
	display:				-moz-inline-stack;
	display:				inline-block;
	height:					45px;
	border-bottom:			none;
	background:				url("/src/img/button_navigation.png") no-repeat;
}

#nav a#apps					{ background-position: 0px   0px;		width:78px;		}
#nav a#apps:hover			{ background-position: 0px -45px;						}
#nav a#apps.selected		{ background-position: 0px -90px;						}

#nav a#projects				{ background-position: -78px   0px;		width:90px;		}
#nav a#projects:hover		{ background-position: -78px -45px;						}
#nav a#projects.selected	{ background-position: -78px -90px;						}

#nav a#support				{ background-position: -168px   0px;	width: 86px;	}
#nav a#support:hover		{ background-position: -168px -45px;					}
#nav a#support.selected		{ background-position: -168px -90px;					}

#nav a#dev					{ background-position: -254px   0px;	width: 78px;	}
#nav a#dev:hover			{ background-position: -254px -45px;					}
#nav a#dev.selected			{ background-position: -254px -90px;					}





/* Menu */
#menu {
	margin:					0px;
	padding:				0px;
	width:					140px;
	font-size:				11px;
	line-height:			17px;
	list-style-type:		none;
}

#menu .subtitle {
    margin-top:				10px;
	font-weight:			bold;
	color:					#222222;
}

#menu a {
	color:					#444444;
	text-decoration:		none;
	border-bottom:			none;
}

#menu li a:hover,
#menu li a:active {
	border-bottom:			1px dotted;
	text-decoration:		none;
}





/* Page */
#page_strap_frame {
	width:					820px;
	height:					215px;
}

#page_strap_content {
	width:					820px;
	height:					215px;
}

#page_body {
	background:				url("/src/img/page_body.png") repeat-y;
	width:					820px;
	min-height:				190px;
}

#page_content {
	padding:				5px 40px; 
}

#page_footer {
	background:				url("/src/img/page_footer.png");
	width:					820px;
	height:					30px;
	margin-top:				-1px;
}





/* Tables */
table.icons {
	border-spacing:			40px 5px;
}

table.icons td {
	vertical-align:			top;
	text-align:				center;
	width:					128px;
}

table.icons img {
	width:					128px;
	height:					128px;
}

table.badges {
	margin:					40px auto 20px auto;
	width:					80%;
}

table.list_header {
	background:				#ddddff;
	font-weight:			bold;
	line-height:			200%;
	margin:					20px 10px 0px 10px;
	padding-left:			10px;
	width:					95%;

	-moz-border-radius-topright:			5px;
	-moz-border-radius-topleft:				5px;

	-webkit-border-top-right-radius:		5px;
	-webkit-border-top-left-radius:			5px;
}

table.list {
	background:				#eeeeff;
	background:				-webkit-gradient(linear, left top, left bottom, from(#eeeeff), to(#fcfcff));
	margin:					0px 10px 0px 10px;
	padding-left:			10px;
	width:					95%;

	-moz-border-radius-bottomright:			5px;
	-moz-border-radius-bottomleft:			5px;

	-webkit-border-bottom-right-radius:		5px;
	-webkit-border-bottom-left-radius:		5px;
}

table.list th {
	font-weight:			normal;
	text-align:				left;
	width:					150px;
}





/* Info block */
div.info_block {
	display:				inline-block;
	margin:					32px 16px 16px 16px;
	vertical-align:			text-top;
	width:					210px;
}

a.info_title {
	border:					none;
	color:					#000000;
	font:					24px "Lucida Grande", "Arial", sans-serif;
	line-height:			60px;
	text-align:				left;
}

div.info_text {
	font:					14px "Lucida Grande", "Arial", sans-serif;
	color:					#444444;
	text-align:				left;
}

img.info_title {
	float:					left;
	margin-right:			16px;
	vertical-align:			middle;
	width:					64px;
	height:					auto;
}

img.info_app64 {
	-moz-border-radius:		10px;
	-webkit-border-radius:	10px;
	border-radius:			10px;
	
	-moz-box-shadow:		0px 2px 8px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:		0px 2px 8px rgba(0, 0, 0, 0.15);
	box-shadow:				0px 2px 8px rgba(0, 0, 0, 0.15);
}





/* Boxes */
.box {
	-moz-border-radius:		5px;
	-webkit-border-radius:	5px;
}

.box_image {
	border:					1px solid #888888;
}

.box_button {
	text-align:				center;
	margin:					24px;
}

.box_code_yellow {
	-moz-border-radius:		5px;
	-webkit-border-radius:	5px;
	font-family:			monospace;
	white-space:			pre;
	font-size:				12px;
	border:					1px solid #bbbbbb;
	padding:				10px;
	background:				#ffffe0;
	background:				-webkit-gradient(linear, left top, right top, from(#fffff0), to(#fffffd));
}

.box_licence {
	-moz-border-radius:		5px;
	-webkit-border-radius:	5px;
	font-family:			monospace;
	font-size:				12px;
	background-color:		#eeeeff;
	border:					1px solid #bbbbbb;
	padding:				10px;
	background:				-webkit-gradient(linear, left top, right top, from(#eeeeff), to(#fefeff));
}





/* Layout */
.centered {
	margin:					0px auto;
	text-align:				center;
	width:					100%;
}

.padding20 {
	padding:				20px;
}

.width450 {
	width:					450px;
	height:					auto;
}





/* Buttons */
a.button {
	display:				inline-block;
	height:					23px;
	padding:				0 0 0 3px;
	font-size:				11px;
	font-weight:			bold;
	color:					#333333;
	text-shadow:			1px 1px 0 rgba(255, 255, 255, 0.9); 
	background:				url('/src/img/button_thin_cell.png') 0 0 no-repeat;
	white-space:			nowrap;
	border:					none;
	overflow:				visible;
	cursor:					pointer;
	text-decoration:		none;
}

a.button>span {
	display:				block;
	height:					23px;
	padding:				0 10px 0 8px;
	line-height:			23px;
	background:				url('/src/img/button_thin_cell.png') 100% 0 no-repeat;
}

a.button:hover,
a.button:focus {
	color:					#ffffff;
	text-decoration:		none;
	text-shadow:			-1px -1px 0 rgba(0, 0, 0, 0.3);
	background-position:	0 -30px;
}
a.button:hover>span,
a.button:focus>span {
	background-position:	100% -30px;
}

a.button:active {
	background-position:	0 -60px;
}

a.button:active>span {
	background-position:	100% -60px;
}


a.icon_download .icon,
a.icon_github   .icon {
	float:					left;
	margin-left:			-4px;
	width:					18px;
	height:					22px;
	background:				url('/src/img/button_thin_icons.png') 0 0 no-repeat;
}


a.icon_download .icon {
	background-position:	-0px 0;
}

a.icon_download:hover .icon,
a.icon_download:focus .icon {
	background-position:	-0px -25px;
}


a.icon_github .icon {
	background-position:	-20px 0;
}

a.icon_github:hover .icon,
a.icon_github:focus .icon {
	background-position:	-20px -25px;
}





/* Springboard */
.springboard {
	display:		block;
}


.iphone_horiz {
	position:		relative;
	width:			430px;
	height:			280px;
	background:		url("/src/img/iphone_horiz_frame.png") no-repeat;
} 

.iphone_horiz_app {
	position:		absolute;
	top:			44px;
	left:			95px;
}

.iphone_horiz_app img {
	display:		none;
	width:			240px;
	height:			160px;
}


.iphone_vert {
	position:		relative;
	width:			250px;
	height:			450px;
	background:		url("/src/img/iphone_vert_frame.png") no-repeat;
}

.iphone_vert_app {
	position:		absolute;
	top:			92px;
	left:			45px;
}

.iphone_vert_app img {
	display:		none;
	width:			160px;
	height:			240px;
}