body {
  background: #fff;
  font:13px arial,sans-serif;
  margin:0;
}

.wrapper {
  width:900px;
  overflow:hidden;
  margin:auto;
  background:#FFF url('images/design/bg.gif') repeat-y;
}

.banner {
  background:#F4C430;
  padding:10px;
  text-align:center;
  font-weight:bold;
}

.nav {
  width:150px;
  float:left;
  background:#2e66e8 url('images/design/nav_bg.jpg');
  color:#fff;
  padding:14px;
}

.nav img {
  border:2px solid #000;
}

.nav p {
  font-size:smaller;
}

.nav a {
  color:#FFF;
}

.nav a:visited {
  color:#FFF;
}

.nav ul {
  width:100%;
  float:left;
  padding: 0;
  margin: 0;
}
.nav ul li {
  background: #00C;
  font-weight:bold;
}
.nav ul a {
  color: #FFF;
  text-decoration:none;
}
.nav ul li:hover{
  background: #009;
}
.nav ul li {
  text-align:center;
  padding:0.6em 0;
  list-style-type: none;
  margin:0 0 14px;
}
.nav a.on li {
  background: #FFF;
  color: #00D;
}
.nav .on:hover {
  background:#FFF;
}

.page {
  float:left;
  width:690px;
}

.contents {
  padding:0 0 0 10px;
}

h1 {
  font-size: 2.2em;
  margin:0.6em 0 0.3em;
}

h2,h3 {
  margin:1em 0 0;
}

h3 {
  font-size: 1.0em;
}

p, ul {
  margin:0.5em 0 1.5em;
}

.padding {
  float:left; 
  height:50%; 
  margin-bottom:-106px;
}

.middle {
  clear:both; 
  height:212px; 
  position:relative;
}

a img {
  border:none;
}

p, li {
  line-height: 1.6em;
}

a {
  color: #000;
}
a:visited {
  color: #000;
}
a:hover {
  color: #999;
  text-decoration:none;
}

.pdf-download {
  float:right;
  background:#009;
  margin:0;
  padding:10px;
  color:#FFF;
  font-weight:bold;
}

.pdf-download:hover {
	background:#00E;
	text-decoration:underline;
}

.right {
  float:right;
}
.left {
  float:left;
}
.clear {
  clear: both;
}

.content {
  margin:20px 0 40px;
  overflow:hidden;
}

.content p {
  float:left;
  width:325px;
  text-align:center;
  margin:20px 30px 0 0;
}

.contact-details {
  overflow:hidden;
}

.contact-details p {
  float:left;
  width:158px;
  text-align:center;
  margin:20px 16px 0 0;
}

.last {
  margin-right:0 !important;
}

.contact-details img {
  padding:0 0 10px 0;
}

.project {
  clear:both;
  margin:30px 0;
}

.project .quote {
  margin-left:30px;
  margin-right:270px;
  margin-bottom:15px;
  font-style:italic;
  font-size:1.2em;
}

.project .source {
  font-style:normal;
  font-weight:bold;
}

.project .gallery {
  width:240px;
  text-align:center;
  position:relative;
  margin:0 0 20px 0;
}
.project .gallery .change {
  width:120px;
  height:210px;
  cursor:pointer;
  z-index:10;
  position:absolute;
}
.gallery .prev {
  float:left;
  background:no-repeat left;
}
.gallery .next {
  float:left;
  background:no-repeat right;
  left:120px;
}
.project .gallery img {
  background:#fff url('images/projects/frame.gif') no-repeat;
  padding:5px;
  margin:0 15px;
  /*z-index:-10;*/
  position:relative;
}

.spacer {
  float:left;
}
.spacer._70 {
  width:70px;
}

.footer {
  float:left;
  border-top:#009 1px solid;
  background:#EEF;
  width:100%;
  padding:10px;
  margin:40px 0 0;
}

.footer p {
  font-size:0.9em;
  float:left;
  margin:0 105px 0 0;
  font-weight:bold;
}

@media screen and (max-device-width: 480px) {
	body {
		font-size:250%;
	}
	.wrapper {
		width:100%;
		background:#FFF;
	}
	.nav {
		width:100%;
		background:#99A;
	}
	.nav img {
		float:left;
		margin-right:20px;
		width:270px;
		height:270px;
	}
	.nav .navText {
		float:left;
		overflow:hidden;
	}
	.nav .navText h1 {
		float:left;
		margin:0;
		clear:both;
	}
	.nav .navText p {
		float:left;
		width:675px;
		clear:both;
		margin:0;
	}
	.nav ul {
		width:100%;
		margin-top:25px;
	}
	.nav ul a {
		float:left;
		width:30%;
		margin-right:35px;
	}
	.page {
		width:100%;
	}
	.contents {
		padding:0 20px;
		width:95%;
	}
	.content img {
		width:430px;
		height:400px;
	}
	.content {
		width:100%;
	}
	.content p {
		width:49%;
		margin:0;
	}
	.contact-details p {
		width:440px;
		padding:0 0 40px;
	}
	.contact-details p.github {
		clear:left;
	}
	.pdf-download {
		padding:30px;
	}
	h3 {
		font-size:80%;
	}
	.spacer._120 {
		font-size:180%;
	}
	.project {
		width:100%;
	}
}