html, body { 
	font-family: 'Cantarell', Helvetica, Arial, sans-serif;
	background: white;
	padding: 0;
	margin: 0;
	font-size: 88%;
}
h1, h2, h3, p, div, span {
    padding: 0;
	margin: 0;
}

h1 {
    text-align: center;
    font-size: 3.6em;
    font-family: 'Reenie Beanie', serif;
    padding-bottom: 10px;
}
h2.h2padding { padding-top: 15px; padding-bottom: 5px; }

.body1 h1 { border-bottom: 1px dotted #cc0066; /* pink */ }
.body2 h1 { border-bottom: 1px dotted #33a852; /* green */ }
.body3 h1 { border-bottom: 1px dotted #3db1a0; /* turquoise */ }
.body4 h1 { border-bottom: 1px dotted #0680e7; /* blue - 186fd9 - 5f36be */ }
.body5 h1 { border-bottom: 1px dotted #e88729; /* orange */ }
.body6 h1 { border-bottom: 1px dotted #7e39a6; /* purple - 6c1e71 */ }

.center { text-align: center; }
.clear { clear: both; }
.active { font-weight: bold; }
.small { font-size: 0.6em; }
.right { text-align: right; }

.body1 #footer { background: #cc0066; /* pink */ }
.body2 #footer { background: #33a852; /* green */ }
.body3 #footer { background: #3db1a0; /* turquoise */ }
.body4 #footer { background: #0680e7; /* blue - 186fd9 - 5f36be */ }
.body5 #footer { background: #e88729; /* orange */ }
.body6 #footer { background: #7e39a6; /* purple - 6c1e71 */ }

.body1 a { color: #cc0066; text-decoration: none;  /* pink */ }
.body2 a { color: #33a852; text-decoration: none;  /* green */ }
.body3 a { color: #3db1a0; text-decoration: none;  /* turquoise */ }
.body4 a { color: #0680e7; text-decoration: none; /* blue - 186fd9 - 5f36be */ }
.body5 a { color: #e88729; text-decoration: none;  /* orange */ }
.body6 a { color: #7e39a6; text-decoration: none;  /* purple - 6c1e71 */ }

#body {
   min-height:100%;
   height:100%;
   position:relative;
   overflow: hidden;
}

#container {
  float:left;
  width:100%;
  background:black;
  position:relative;
  right:69%;
  min-height: 518px;
}

#container2 {
  float:left;
  width:100%;
  background:white;
  position:relative;
  right:0;
  padding-bottom: 150px;   /* Height of the footer */
}

#navigation {
	background: black;
	color: white;
	float: left;
	margin-bottom: 15px;
	width: 31%;
	text-align: right;
	
  position:relative;
  left:69%;
  overflow:hidden;
}

#navigation .inner {
	padding: 25px;
	width: 70%;
	position: relative;
	left: 18%;
}

#navigation .icons { 
  margin: 0px -10px 0px 0px;
  overflow: hidden;
  padding: 25px 0px 0px 71px; 
}
#navigation .icons li { float: left; list-style-type: none; margin-right: 5px; }
#navigation .icons a { color: black; }

#navigation .nav {
    list-style-type: none;
    text-align: left;
    padding-top: 10px;
    padding-left: 21%;
}

#navigation .subnav {
    list-style-type: none;
    text-align: left;
    padding-left: 15px;
}

#content {
	width: 56%;
	float:left;
	padding: 30px;

	position:relative;
    left:69%;
    overflow:hidden;
}

#navigation h2 { 
  font-family: 'Cantarell', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  color: white;
}

#navigation .tagline {
  font-family: 'Reenie Beanie', serif;
  font-size: 1.8em;
  color: white;
}

#footer {
	height: 150px;
	width: 100%;
	position:absolute;
  bottom:0;
}

#footer a { color: white; }
#footer p { text-align: center; width: 100%; padding-bottom: 10px; }
#footer p.top { padding-top: 50px; }

/** Achievements **/

.achievements {
    width: 350px;
    float: left;
    padding-right: 30px;
}

.achievement {
    background: #E7E7E7;
    border-radius: 0.5em 0.5em;
    -moz-border-radius: 0.5em 0.5em;
    margin: 1em 0px;
    overflow: hidden;
    padding: 0.5em;
}

.avatar {
    float: left;
    padding-left: 5px;
}
.avatar img { margin-left: 54px; margin-top: -42px; }
.avatar h2 { margin-bottom: 10px; }
.avatar p, .avatar h2 { padding-left: 5px; padding-bottom: 8px; }

.avatar h3 { padding-left: 5px;  }

.achievement img, .achievement h3 { padding-bottom: 10px; padding-left: 2px; }
.achievement img, .achievement .desc, .achievement .foot { float: left; padding-bottom: 5px; }
.achievement .desc, .achievement .foot {
    width: 260px;
    padding-left: 8px;
    vertical-align: top;
}
.achievement .foot { font-size: 0.9em; padding-top: 3px; }

/** Portfolio **/
.portfolio_top .vertical { margin: 0; overflow: hidden; padding: 20px 0 0 100px; }
.portfolio_top .second { margin-top: -35px; }
.portfolio_top .vertical li { float: left; list-style-type: disc; margin-right: 26px; }
.portfolio_top .vertical .first { list-style-type: none; }
.portfolio_top { padding-bottom: 10px; }

.portfolio {
    width: 705px;
    float: left;
    padding-right: 30px;
}
.item {
margin: 1em 0px;
overflow: hidden;
padding: 0.5em;
}
.item .images { width: 160px; float: left; }

.item .desc ul { 
  margin-top: -10px;
  padding-left: 25px;
}
.item .desc h3 { padding: 0 0 10px 0; }
.item .images img { padding-bottom: 10px; padding-left: 2px; }
.item .desc, .item .foot { float: left; padding-bottom: 5px; }
.item .desc, .item .foot {
    width: 511px;
    padding-left: 8px;
    vertical-align: top;
    line-height: 1.6em;
}
.item .foot { font-size: 0.9em; padding-top: 3px; }

.item .large {
    width: 675px;
}
.item .large_image {
border-radius: 1em 1em;
-moz-border-radius: 1em 1em;
height: 100px;
width: 675px;
}
.item .large_image { text-indent: -9999px; }
.item .large_image a { width: 675px; height: 100px; display: block; }
.item h2.item_large, .item h3.item_large { padding: 10px 7px; }
.item h2 .tagline { font-size: 0.7em; }
.item .images a { color: white; }

.body1 .item .large_image { border: 2px solid #cc0066; /* pink */ }
.body2 .item .large_image { border: 2px solid #33a852; /* green */ }
.body3 .item .large_image { border: 2px solid #3db1a0; /* turquoise */ }
.body4 .item .large_image { border: 2px solid #0680e7; /* blue - 186fd9 - 5f36be */ }
.body5 .item .large_image { border: 2px solid #e88729; /* orange */ }
.body6 .item .large_image { border: 2px solid #7e39a6; /* purple - 6c1e71 */ }

.item { margin-bottom: 20px; padding-bottom: 20px; margin-right: 14px; }

.body1 .item { border-bottom: 1px dotted #cc0066; /* pink */ }
.body2 .item { border-bottom: 1px dotted #33a852; /* green */ }
.body3 .item { border-bottom: 1px dotted #3db1a0; /* turquoise */ }
.body4 .item { border-bottom: 1px dotted #0680e7; /* blue - 186fd9 - 5f36be */ }
.body5 .item { border-bottom: 1px dotted #e88729; /* orange */ }
.body6 .item { border-bottom: 1px dotted #7e39a6; /* purple - 6c1e71 */ }

/** CV **/

.cv .tagline { text-align: center; padding-bottom: 20px; }
.cv .small { margin-top: -10px; text-align: right; }
.cv h2 { padding-bottom: 15px; padding-top: 15px; }
.cv h3 { padding-bottom: 10px; padding-top: 5px; }
.cv p, .cv li { line-height: 1.6em; }
.cv ul { margin-top: 0; padding-bottom: 10px; margin-left: 30px; padding-left: 0; }
.cv p { padding-bottom: 10px; }

.recommendations .item { position: relative; }
.recommendations .item p.quote { padding: 10px; font-size: 1.1em; }
.recommendations .item p.small { margin-top: 15px; }
.recommendations .item .left_q { left: -3px; top: -18px; }
.recommendations .item .right_q { bottom: 30px; right: 5px; }

/** Index **/

.contact p { padding-left: 10px; }
.contact .icons { margin: 0; overflow: hidden; padding: 25px 0 0 65px; }
.contact .icons li { display:block; list-style-type: none; margin-right: 5px; clear:both; }
.contact .icons a.img { color: white; float: left; }
.contact .icons a.txt { float: left; height: 32px; padding-top: 5px; padding-left: 5px; }

.me div { float: left; padding-bottom: 10px;  }
.me .image { width: 220px; padding-left: 2px; }
.me .text { width: 440px; padding-right: 15px; font-size: 1.2em; line-height: 1.6em; }
.me .text p { padding-bottom: 10px; }
.rotate { 
    -webkit-transform: rotate(2deg);
  	-moz-transform: rotate(2deg);
}

.stuff, .me { overflow: hidden; }

.stuff .flickr { float: left; width: 260px; padding-bottom: 15px; }
.stuff .tweets, .stuff .gowalla { float: left; width: 405px; }
.stuff .xbox, .stuff .work { float: left; width:  325px; }
.stuff .long { float: left; width: 98%; padding-top: 25px; }

.stuff .xbox .achievements { padding-right: 0; width: 325px; }
.stuff .xbox .achievements .achievement .desc, .stuff .xbox .achievements .achievement .foot {
    width: 238px;
}

.stuff .work ul { list-style-type: none; padding-left: 20px; }
.stuff .work .item .large_image { height: 105px; width: 305px; text-indent: 0; }
.stuff .work .item .large_image a { display: inline; width: auto; height: auto; }
.stuff .work .item { border: 0; margin-top: 8px; margin-bottom: 0; padding-bottom: 11px; margin-left: 0; padding-left: 0; }

.stuff .tweets .tweet { position: relative; padding: 10px; margin-top: 0; width: 90% }

.stuff .long .tweet {
  border-radius: 1em 1em;
  -moz-border-radius: 1em 1em;
  padding: 10px 20px;
  font-size: 1em;
}
.body1 .stuff .long .tweet { border: 2px dotted #cc0066; /* pink */ }
.body2 .stuff .long .tweet { border: 2px dotted #33a852; /* green */ }
.body3 .stuff .long .tweet { border: 2px dotted #3db1a0; /* turquoise */ }
.body4 .stuff .long .tweet { border: 2px dotted #0680e7; /* blue - 186fd9 - 5f36be */ }
.body5 .stuff .long .tweet { border: 2px dotted #e88729; /* orange */ }
.body6 .stuff .long .tweet { border: 2px dotted #7e39a6; /* purple - 6c1e71 */ }

.stuff .tweets .tweet p { padding-bottom: 5px; line-height: 1.4em; padding-left: 10px; }
.stuff .tweets .tweet p.small, .stuff .gowalla .location p.small { text-align:right; padding-top: 15px; }
.left_q, .right_q { 
    color: grey; 
    position: absolute;  
    font-size: 5em; 
    font-family: 'Reenie Beanie', serif;
}

.stuff .tweets, .stuff .gowalla { font-size: 1.3em; } 
.stuff .tweets .item { font-size: 0.2em; }
.stuff .tweets .left_q { left: -5px; top: -20px; }
.stuff .tweets .right_q { right: -5px; bottom: 10px; }
.stuff .long .left_q { left: 5px; top: -15px; }
.stuff .long .right_q { right: 5px; bottom: 5px; }

.stuff .gowalla .location { overflow: hidden; position: relative;  width: 95%; }
.stuff .gowalla .location p.small { width: 67%; }
.stuff .gowalla .location p { width: 70%; }
.stuff .flickr a { color: white; }
.stuff .gowalla .location img, .stuff .gowalla .location p { float: left; }
.stuff .tweets .item { margin-bottom: 15px; padding-bottom: 0; margin-top: 0; padding-top: 0; }
.stuff .gowalla .location img { padding-right: 15px; }
.stuff .gowalla .location p { padding-top: 15px; }