* { margin: 0; padding: 0; }
img, abbr { border: 0; }

a {
	color: #572c81;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	color: #5c5c62;
	font-size: 1.5em;
}
h2 {
	margin: 1em 0 0.5em 0;
	font-size: 1.25em;
}
p {
	margin: 0.75em 0;
	text-align: justify;
}
ul {
	margin: 0 0 0 20px; padding: 0;
}
li {
	margin: 0; padding: 0;
}

body {
	margin: 50px 10px;
	background-color: #f8f8f8;
	font-family: "Arial", "Sans-Serif";
	font-size: /*0.8em*/12px;
}

#main-frame {
	position: relative;
	z-index: 2;
}
#frame, #footer {
	/*width: 728px;*/
	width: 550px;
}
#frame {
	clear: both;
	/*min-height: 340px;*/
	margin: 0 auto;
	background-color: #ffffff;
	background-repeat: no-repeat;
	background-position: bottom right;
	border: 1px solid #888888;
}
	#frame.home {
		/*background-image: url("img/frame-bg.jpg");*/
	}
		#frame.home #content {
			/*margin-right: 340px;*/
		}
	#frame.services {
		background-image: url("img/frame-bg2.jpg");
	}
	#frame.references {
		background-image: none;
	}
		#frame.references img.screenshot {
			border: 1px solid #000000;;
		}
	#frame.contact {
		background-image: url("img/business_card.jpg");
	}

#nav {
	float: right;
	margin: 18px 10px 13px 10px;
	font-weight: bold;
	font-size: 1.1em;
}
#sub-nav {
	float: right;
	margin: 0 10px;
}
	#nav li, #sub-nav li {
		display: inline;
		margin: 0 3px;
		padding: 3px 3px 3px 2px;
		list-style-type: none;
	}
	#nav span {
		color: #5c5c62;
		margin-right: 2px;
	}
	#sub-nav .current, #sub-nav a:hover {
		border-bottom: 1px solid #572c81;
	}
	#nav a, #sub-nav a {
		color: #000000;
	}
	#nav a:hover, #sub-nav a {
		text-decoration: none;
	}
	#nav li:hover, #nav .current {
		border-bottom: 3px solid #572c81;
	}
	#nav li:hover, #nav .current, #nav .current a {
		color: #572c81;
	}
	#nav>li:hover, #nav>.current, #nav>.current a  {
		color: #000000;
	}

#logo {
	float: left;
	/*margin: 20px 20px 0 20px;*/
	margin: 20px 20px 0 30px;
}
#e {
	position: fixed;
	bottom: 0; right: 0;
	z-index: 1;
}
#content {
	clear: both;
	margin: 40px 70px;
}
	#content .teasing {
		margin-bottom: 30px;
		color: #5c5c62;
		font-size: 1.25em;
		font-weight: bold;
		text-align: justify;
	}
	#content div.box {
		float: left;
		width: 140px; height: 100px;
		margin: 5px;
		padding: 5px;
		border: 1px solid #888888;
		-moz-border-radius: 7px;
		text-align: center;
		vertical-align: middle !important;
	}
	#content div.box img {
		vertical-align: middle;
	}
	#content span.definition {
		border-bottom: 1px dotted #5c5c62;
	}
	#content div.screenshots {
		float: right;
		margin: 20px 0 0 40px;
	}
	#content div.screenshots a:hover {
		text-decoration: none;
	}
	#content div.screenshot {
		width: 270px; height: 200px;
		overflow: auto;
		padding: 0;
		border: 1px solid #888888;
	}
	#content ul.screenshot {
		list-style: none;
	}
	#content ul.screenshot li {
		margin: 3px 0;
	}

#footer {
	clear: both;
	margin: 0 auto;
	color: #888888;
	font-size: 0.9em;
}
	#footer .left {
		float: left;
		display: inline;
	}
	#footer .right {
		float: right;
		display: inline;
	}
	#footer a {
		color: #5c5c62;
	}

.logo-green {
	color: #572c81;
}
.logo-gray {
	color: #5c5c62;
}

/* Fix to be compatible with IE */
@media screen
{
	#frame>#logo {
		margin-bottom: 40px;
	}
}