/* @group Body */

* {
  padding: 0;
  margin: 0;
  border: 0;
}

body {
  font-family: "lucida grande","lucida sans",arial,verdana,sans-serif;
  font-size: 62.5%;
  text-align: left;
  background-color: #fff;
  color: #333;
  /*padding: 27px 5px 0 30px;*/
  padding: 27px 30px 30px;
}

/* HTML5 fix */
header, nav, section, article, footer {
  display: block;
}

#main_wrapper {
  font-size: 1.5em;
}

/* @end */

/* @group Default */

h1 {
  white-space: nowrap;
  font-size: 1.4em;
  font-weight: normal;
  letter-spacing: -1px;
  padding-right: 15px;
}

p {
  padding-top: 1em;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: #333 !important;
}

ul {
  padding: 0.5em 0 0 2em;
}

.hide {
  display: none;
}

.show {
  display: block;
}

/* @end */

/* @group Header */

header {
}

header h1 small {
  color: #ccc;
  font-size: 0.5em;
  font-style: italic;
  letter-spacing: 0;
  text-transform: lowercase;
  white-space: nowrap;
}

header .splash {
  margin: 12px -30px 0 -30px;
  border-top:  1px solid #888;
  border-bottom:  1px solid #888;
}

header .splash img {
  vertical-align: bottom;
}

/* @end */

/* @group Navigation */

nav {
  clear: both;
  margin-top: 10px;
  margin-bottom: 100px;
}

nav ul {
  padding: 0;
}

nav ul li {
  float: left;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  padding: 0 15px 0 0;
  letter-spacing: -1px;
  text-transform: lowercase;
}

nav ul li,
nav ul li a,
nav ul li.selected ul li a {
  color: #ccc;
}

nav ul li.selected a,
nav ul li ul li.selected a {
  color: #333;
}

nav ul li ul {
  display: none;
  position: absolute;
  padding-bottom: 0.5em;
}

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  clear: both;
  padding: 0;
  font-size: 0.8em;
  letter-spacing: 0;
}

nav ul li ul li a {
  display: block;
  padding: 0.2em 0 0 0;
}

nav ul li ul li img {
  margin-top: -2px;
  margin-bottom: -3px;
}

nav ul li ul li span {
  display: none;
}

nav ul li ul li:hover span {
  display: inline;
}

/* @end */

/* @group Content */

#content {
  clear: both;
  font-size: 0.8em;
  overflow: hidden;
  /*padding-left: 15px;*/
  margin-left: -25px;
  margin-right: -25px;
  margin-bottom: -10px;
}

#content h2,
#content h3 {
  font-size: 1.2em;
  font-weight: normal;
  letter-spacing: -1px;
  color: #333;
}

#content .area h2 {
  display: none;
  padding: 1.5em 0 0.2em 0;
}
#content .area > h2.first-child {}

#content .area h3 {
  padding: 1.2em 0 0.2em 0;
}
#content .area > h3:first-child {
  padding: 0 0 0.5em 0;
}

#content p {
  padding: 0.5em 0 0 0;
}

#content p.subtext {
  font-size: 0.8em;
  padding-top: 1em;
}
  
#content p.subtext,
#content p.subtext a { 
  color: #999;
}

#content p.subtext span.tag {
  /*font-family: verdana, helvetica, arial, sans-serif;*/
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 3px 4px 2px 4px;
  margin-right: 2px;
  
  /*  background-color: #ccc;*/
  background-color: #000;
  opacity: 0.2;
  color: white;
}

#content img {
  /*border: 1px solid #ccc;
  border-left: 0;
  border-right: 0;*/
  border-bottom: 1px solid #ccc;
  vertical-align: bottom;
  -moz-box-shadow: 0 2px 5px hsla(0,0%,0%,.1);
  -webkit-box-shadow: 0 2px 10px hsla(0,0%,0%,.1);
  ibox-shadow: 0 2px 10px hsla(0,0%,0%,.1);
}

#content .area {
  float: left;
  width: 300px;
  /*padding: 30px 25px 0 25px;*/
  /*padding: 30px 15px 0 15px;*/
  padding: 15px 25px;
}

#content .more {
  clear:  both;
}

/* @group Photography */

#content.photos {
  overflow: visible;
}

/* @group Photos */

#content.photos .area {
  width: auto;
  height: auto;
  white-space: nowrap;
}

#content.photos .area .photo {
  display: inline;
  position: relative;
  overflow: hidden;
  width: auto;
  height: 500px;
  /*border: 1px solid #000;*/
}

#content.photos .area .photo + .photo {
  margin-left: 20px;
}

#content.photos .area .photo .description {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  color: #000;
  opacity: 0.6;
}

#content.photos .area .photo:hover .description {
  display: block;
}

#content.photos .area .photo .description h2 {
  display: block;
  padding: 8px 8px 0;
}

#content.photos .area .photo .description p {
  padding: 8px;
}

/* @end */

/* @end */

/* @group Projects */

/* @group Coding */

#content.coding .area {
  min-height: 200px;
}

/* @end */

/* @group Webdesign */

#content.webdesign .border {
  display: block;
  overflow: hidden;
  line-height: 0;
}

#content.webdesign .border img {
  /*border: 0;*/
  /*margin: -1px 0 0 0;*/
}

/*#content.webdesign .area img {
  opacity: 0.9;
}

#content.webdesign .area:hover img {
  opacity: 1.0;
}*/

#content.webdesign p.subtext {
  /*margin-top: -2px;*/
  padding-top: 6px;
}

#content.webdesign p.subtext span {
  border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;

  /*-webkit-border-radius: 0;
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius: 0;
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;*/

  padding-top: 6px;
}

#content.webdesign img {
  width:  300px;
  height: 200px;
}

/* @end */

/* @end */

/* @group Imprint */

#content.imprint h3 {
  letter-spacing: 0;
}

#content.imprint h2 {
  display: none;
}

#content.imprint .subtext {
  padding-top: 30px;
} 

#content.imprint .details a {
  text-decoration: underline;
  color: inherit;
}

#content.imprint .details {
  clear: both;
}

#content.imprint .details .area {
  font-size: 0.8em;
  float: left;
  width: 300px;
  /*padding: 60px 30px 0 0;*/
  padding-top: 30px;
  text-align: justify;
}

/* @end */

/* @end */