/* -------------------------------------------------------------- 

  Theme Name: Manilla
  Theme URI: 
  Description: Portfolio Theme
  Author: Christian Niklas
  Author URI: http://christian-niklas.de
  Version: 0.1
  Tags: 
  General comments/License Statement if any.

-------------------------------------------------------------- */


@font-face {
  font-family: 'Graublau Web';
  src: local('Graublau Web Regular'), local('Graublau Web'), url('fonts/GraublauWeb.otf') format('opentype');
}

@font-face {
  font-family: 'Graublau Web Bold';
  font-weight: bold;
  src: local('Graublau Web Bold'), url('fonts/GraublauWebBold.otf') format('opentype');
}


@media screen, projection {
  
  /* Reset
  --------------------------------------------------------------------------------------- */
  * { margin: 0; padding: 0; }
  
  
  /* Globals und Typo
  --------------------------------------------------------------------------------------- */
  html { font-size: 75%; }
  
  html > body { font-size: 12px; }
  
  body {
    color: #1e1a19;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
  }
  
  a:link, 
  a:visited {
    color: #1e1a19;
  }
  
  a:hover { text-decoration: underline; }
  
  a:focus { background-color: #ccc; }
  
  a:active { color: #1e1a19; }
  
  a:hover, a:active { outline: none; }
  
  p { line-height: 1.5; margin: 0 0 1.5em; }
  
  h1 {
    font-family: 'Graublau Web Bold', Arial, Helvetica, sans-serif;
    font-size: 2em;
    line-height: 0.75;
    margin: 0 0 0.75em;
  }
  
  h2 { 
    color: #fab600;
    font-family: 'Graublau Web', Arial, Helvetica, sans-serif;
    font-size: 1.667em;
    line-height: .9;
    margin: 0 0 .9em;
  }
  
  h3 { 
    color: #fab600;
    font-family: 'Graublau Web', Arial, Helvetica, sans-serif;
    font-size: 1.333em;
    line-height: 1.125;
    margin: 1.688em 0 0.563em;
    /*text-transform: uppercase;*/
  }
  
  h4 { font-size: 1.083em; line-height: 1.38; margin: 2.08em 0 0.69em; }
  
  img, a img { border: none; }
  
  abbr, acronym { border-bottom: 1px dotted #666; cursor: help; }
  
  table { border-collapse: collapse; line-height: 1.5; }
  
  
  /* Ausrichtung / Sichtbarkeit von Elementen
  --------------------------------------------------------------------------------------- */
  .alignleft { float: left; }
  
  .alignright { float: right; }
  
  .clear { clear: both; }
  
  .clearfix:after {
    content: '.';
    clear: both;
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
  }
  * html .clearfix { height: 1%; }
  *+html .clearfix { min-height: 1px; }
  
  .hidden { left: -999em; position: absolute; top: -999em; }
  
  .hidden_text { text-indent: -999em; }
  
  .invisible { visibility: hidden; }
  
  
  /* Layoutelemente
  --------------------------------------------------------------------------------------- */
  #header, 
  #navigation, 
  #slider, 
  #content, 
  #footer {
    clear: both;
    margin: 0 auto;
    width: 960px;
  }
  
  #header { height: 44px; padding: 24px 0 20px; }
  
  #navigation { background: #fff url(images/panel-top.gif) no-repeat left bottom; padding: 0 0 5px; }
  
  #slider {
    background: #1e1a19 url(images/panel-bottom.gif) no-repeat left bottom;
    padding: 4em 50px;
    position: relative;
    width: 860px;
  }
  
  #footer { 
    border-top: 1px solid #bababa;
    margin: 0 auto;
    padding: 1.5em 0 0;
    width: 910px;
  }
  
  
  /* Header
  --------------------------------------------------------------------------------------- */
  #header h1 { float: left; padding: 0 11px 0 0; }
  
  #header h1 a {
    background: url(images/blog-title.png) no-repeat transparent;
    color: #38362f;
    display: block;
    height: 44px;
    outline: none;
    text-indent: -999em;
    text-decoration: none;
    width: 344px;
  }
  
  #header p.description {
    background: url(images/blog-title.png) no-repeat -355px 0 transparent;
    color: #c1c1c1;
    float: left;
    height: 44px;
    text-indent: -999em;
    width: 263px;
  }
  
  
  /* Navigation
  --------------------------------------------------------------------------------------- */
  #navigation { list-style: none; }
  
  #navigation li { float: left; }
  
  #navigation li a {
    background: #000 url(images/main-navi_bg.png) no-repeat 0 -50px;
    color: #fff;
    display: block;
    font-weight: bold;
    height: 20px;
    padding: 5px 0 0;
    text-align: center;
    text-decoration: none;
    width: 106px;
  }
  
  #navigation li.current_page_item a { background-position: 0 0 !important; }
  
  #navigation li.current_page_item + li a { background-position: 0 -75px; }
  
  #navigation li:first-child a { background-position: 0 -25px; }
  
  #navigation li#last-child a { padding: 5px 22px 0 0; }
  
  #navigation li a:hover { text-decoration: underline; }
  
  
  #content #projectNav { list-style: none; padding: 0; }
  
  #projectNav li { float: right; }
  
  #projectNav li.nextPostLink { float: left; }
  
  
  /* Slider
  --------------------------------------------------------------------------------------- */
  #slider img.scrollButtons { cursor: pointer; position: absolute; top: 47%; }
  
  #slider img.scrollButtons.left { left: -26px; }
  
  #slider img.scrollButtons.right { right: -26px; }
  
  
  #slider .scroll { overflow: hidden; position: relative; width: 860px; }
  
  #slider .panel {
    float: left; /* s. coda-slider.js */
    padding: 0 1px 0 0;
    position: relative;
    width: 859px;
  }
  
  #slider .info {
    color: #fff;
    float: right;
    width: 270px;
  }
  
  #slider .info a { color: #fff; }
  
  #slider .info dl, 
  #slider .info p {
    font-size: 1.167em;
    line-height: 1.286;
    margin:0 0 1.286em;
  }
  
  #slider .info  dt { float: left; font-weight: bold; padding-right: 0.5em; }
  
  #slider ul.more {
    clear: right;
    float: right;
    list-style: none;
    width: 270px;
  }
  
  #slider ul.more li { display: inline; padding-right: 1em; }
  
  #slider ul.more li:first-child {}
  
  #slider ul.more a { color: #8d8d8d; }
  
  #slider .screenshot {
    left: 0;
    position: absolute;
    /*right: 1px;*/
    top: 0;
  }
  
  #slider .screenshot img.new { position: absolute; top: 150px; right: 0; }
  
  #slider .screenshot a {
    background: #fff url(images/stick_bg.png) no-repeat;
    display: block;
    height: 197px;
    text-align: center;
    width: 540px;
  }
  
  
  /* Content
  --------------------------------------------------------------------------------------- */
  #content {}
  
  #content > h2 {
    background: #1e1a19 url(images/panel-bottom.gif) no-repeat left bottom;
    color: #fff;
    margin: 0;
    padding: .9em 50px;
  }
  
  * html h2#ie6-fix-1 {
    background: #1e1a19 url(images/panel-bottom.gif) no-repeat left bottom;
    color: #fff;
    margin: 0;
    padding: .9em 50px;
  }
  
  #leftCol, 
  #centerCol, 
  #rightCol {
    padding: 3em 25px 0;
    width: 270px;
  }
  
  #leftCol h2, 
  #centerCol h2, 
  #rightCol h2 {
    margin: 0 0 .25em;
  }
  
  #content small.subheadline {
    border-bottom: 1px solid #bababa;
    color: #8d8d8d;
    display: block;
    font-size: 1em;
    line-height: 1;
    margin: 0.25em 0 1.25em;
    padding: 0 0 1.5em;
  }
  
  #content ul { line-height: 1.5; margin: 0 0 1.5em; padding-left: 1.083em; }
  
  #content dl { line-height: 1.5; margin: 0 0 1.5em; }
  
  #content a[href^="http://"] { /*background: transparent url(images/link_extern.gif) no-repeat;*/ }
  
  #content p.postmetadata { clear: left; padding: 0 25px; }
  
  
  #entry { padding: 3em 25px 0; width: 590px; }
  
  #entry li small { color: #8d8d8d; font-size: 1em; }
  
  #entry img.screenshot_klein { border: 1px solid #bababa; float: left; margin: 0 1.5em 1.5em 0; }
  
  #entry a:hover img.screenshot_klein { /*border: 1px solid #000;*/ }
  
  
  .post p { text-align: justify; }
  
  
  /* Sidebar
  --------------------------------------------------------------------------------------- */
  #sidebar { padding: 3em 25px 0; width: 270px; }
  
  #sidebar dt { float: left; font-weight: bold; padding-right: 0.5em; }
  
  #sidebar h3:first-child { margin-top: 0; }
  
  * html h3#ie6-fix-2 { margin-top: 0; }
  
  
  /* Kontaktformular (PXS Mail Plugin)
  --------------------------------------------------------------------------------------- */
  form dl, dl.labels { margin: 0.5em 0 0; font-size: 100%; }
  
  form dt, dl.labels dt {
    color: #555;
    float: left;
    font-weight: 400;
    margin-bottom: 0.8em;
    position: relative;
    text-align: right;
    width: 7em;
  }
  
  form dd, dl.labels dd {
    color: #555;
    font-size: 100%;
    font-style :normal;
    margin-left: 7.5em;
    margin-bottom: 0.8em;
    padding-left: 0.5em;
    text-align: left;
  }
  
  form dd.submit, dl.labels dd.submit  { margin-top: 2em }
  
  .error_msg { color: #f15922; font-weight: bold; }
  
  div.error_msg { margin: 0 0 1.5em; }
  
  .pxs_css_spamcheck { display: none !important; }
  
  form dd small { color: #8d8d8d; line-height: 1; }
  
  input[type="text"], 
  textarea { 
    border: 1px solid #bababa;
    color: #555;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 1em;
    line-height: 1.5;
    padding: 2px;
    width: 270px;
  }
  
  input[type="text"]:focus, 
  textarea:focus {
    border-color: #000;
  }
  
  textarea { height: 15em; overflow: auto; }
  
  input[type="submit"] {
    background-color: #000;
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    outline: none;
    padding: 4px 0;
    width: 106px;
  }
  
}


@media print {
  
  * { background: #fff; color: #000; }
  
  html { font: 100%/1.5 georgia, serif; }
  
  #navigation, 
  #slider, 
  #projectNav, 
  #content form { display: none; }
  
}