/* body */

body {
	background: #FFF;
	font-family: Arial;
	font-size: 11px;
 	font-weight: normal;
	text-align: left;
	margin: auto;
	color: #000;
}

#top {
	background-image: url(gfx/top.jpg);
	height: 75px;
	position: relative;
	margin: auto;
	width: 971px;
	z-index: 2;
}

#left {
	background-image: url(gfx/left.jpg);
	float: left;
	height: 597px;
	margin: auto;
	width: 76px;
}

#right {
	width: 98px;
	height: 597px;
	margin: auto;
	background-image: url(gfx/right.jpg);
	float: right;
}

#bottom {
	background-image: url(gfx/bottom.jpg);
	height: 87px;
	position: relative;
	margin: auto;
	width: 971px;
	z-index: 2;
}

#center {
	height: 597px;
	margin: auto;
	width: 971px;
}

/* homescreen, menu, and nav bars */

#homescreen {
	background-image: url(gfx/bwbridge.jpg);
	background-repeat: no-repeat;
	color: #FFF;
	float: left;
	height: 597px;
	position: relative;
	margin: auto;
	width: 797px;	
}

#homescreen a:visited, a:link, a:hover, a:active {
	color: #fff;
	text-decoration: none;
}

#menubar {
	width: 793;
	height: 15px;
	font-size: 11px;
 	font-weight: normal;
	text-align: left;
	background: rgba(0, 0, 0, 0.5);
	padding: 3px 2px 2px 2px;
	z-index: 2;
}

.msg {
	background: rgba(0, 0, 0, 0.5);	
	bottom: 60px;
	float: right;
/*	height: 65px;*/
	right: 5px;
	position: absolute;
	display:none;
	width: 350px;
	z-index: 1;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.msg:hover {
	background: rgba(0, 0, 0, 0.9);
/*	cursor:pointer;	*/
}

.msg-content {	
	font-size: 12px;
/* 	font-weight: relative; */
	padding: 4px 2px;
	text-align: left;
}

.msg-content a:active, .msg-content a:hover {
	color: #fff;
	text-decoration: underline;
}

#twitter-logo {
	background-image: url(gfx/twitter_white.png);
	float: left;
	height: 48px;
	position: relative;
	width: 48px;
}

#navbar {
	height: 50px;
	width: 100%;
	position: absolute;
	bottom: 0px;
	background: rgba(0, 0, 0, 0.4);
	z-index: 2;
}

#navbar #home-button {
	height: 50px;
	width: 50px;
	background-image: url(gfx/home.png);
	background-repeat: no-repeat;
	background-position: center;	
	margin: auto;
}

#navbar #home-button:hover {
	cursor: pointer;
	background-image: url(gfx/home_glow.png);
}


/* styling for the animated app card */
#app {
	bottom: -70px;
	font-size: 13px;
	height: 150px;
	left: 298px;
	margin: auto;
	position: absolute;
	visibility: hidden;
	width: 200px;
	z-index: 1;
}

.app-light {
	background: #ebf2e0;
	color: #000;
}

.app-dark {
	background: #222;
	color: #fff;	
}

.app-dark a:link {
	color: #fff;
	text-decoration: none;
}

.app-dark a:active, .app-dark a:hover {
	color: #fff;
	text-decoration: underline;
}

.app-dark a:visited {
	color: #777;
	text-decoration: none;
}

.app-small {
	/* 
	background-image: url(gfx/view-refresh.png);
	background-repeat: no-repeat;
	background-position: center;
	*/
	-moz-border-radius: 8px;
	border-radius: 8px;
}

#spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	height: 100px;
	width: 100px;
	text-indent: 250px;
	white-space: nowrap;
	overflow: hidden;

	background-color: #fff;
	-webkit-mask-image: url(gfx/spinner.png);
	-webkit-animation-name: spinnerRotate;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	-moz-mask-image: url(gfx/spinner.png);
	-moz-animation-name: spinnerRotateMoz;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
}

@-webkit-keyframes spinnerRotate {
	from {
		-webkit-transform:rotate(0deg);
	}
	to {
		-webkit-transform:rotate(360deg);
	}
}

@-moz-keyframes spinnerRotateMoz {
	from {
		-moz-transform:rotate(0deg);
	}
	to {
		-moz-transform:rotate(360deg);
	}
}

.app-close {
}

/* content styling */
.content {
	overflow: hidden;
	padding: 10px 20px;
/*	position: relative;	*/
}

/* styling for the app styles in the homescreen */
.app-item {
	height: auto;
	width: auto;
	margin: 20px 25px 20px 25px;
	float: left;
	text-align: center;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.app-item img {
	display: inline;
}

.app-item:hover {
	background: rgba(0, 0, 0, 0.4);
	cursor:pointer;	
}

.app-info {
	font-size: 12px;
	text-align: center;
 	font-weight: normal;
	width: 100px;
	text-shadow: 0.1em 0.1em 0.2em black;
}

/*
.app-info a:active, .app-dark a:hover {
	color: #fff;
	text-decoration: none;
}
*/


/* styling for the app styles in the homescreen */
.photo-preview {
	background-repeat: no-repeat;
	background-position: center;	
	height: 120px;
	width: 100px;
	margin: 20px 25px 20px 25px;
	float: left;
	position: relative;
	display: block;
}

.photo-preview p {
	width: 100px;
	position: absolute;
	top: 90%;
}

.photo-preview img {
	display: inline; 
}

.photo-preview:hover {
	cursor: pointer;
}

.app-item img {
	display: inline;
}

.title {
	border-bottom: 1px solid #AAA;
	height: 40px;
	margin: 0px 0px 10px 0px;
	padding: 2px 2px;
	text-align: center;
}

.title h1 {
	font-size: 20px;
 	font-weight: normal;
	text-shadow: 0.1em 0.1em 0.2em black;
}

.about-left {
	background-image: url(gfx/avatar.jpg);
	background-repeat: no-repeat;
	/*background-position: 50% 50%;*/
	float: left;
	height: 200px;
	width: 200px;
	position: relative;
}

.about-right {
	height: 200px;
	float: right;
	padding: 10px 10px;
	position: relative;
	width: 537px;
}

.about-bottom {
	clear: both;
	height: 250px;
	padding: 10px 0px;
	position: relative;
}

#imprint {
	left: -10px;
	overflow: hidden;
	position: relative;
	text-align: center;
}

#imprint a:link {
	color: #000;
	text-decoration: none;
}

#imprint a:visited {
	color: #777;
	text-decoration: none;
}

#imprint a:active, #imprint a:hover {
	color: #000;
	text-decoration: underline;
}

/* Photography */
/*
#image-container {
	background: #234;
	height: 200px;
	width: 200px;
}
*/

.image-container {
	border: 5px solid #fff;
	height: 150px;
	float:left;
	margin: 0px 16px 16px 0px;
	overflow: hidden;
	position: relative;
	width: 225px;
}