@charset "UTF-8";
/*
Theme Name: twoGiants
Theme URI: http://www.two-giants.com/
Description: My personal Wordpress Theme <a href="http://www.two-giants.com">twoGiants</a>.
Version: v 2.0 beta
Author: Stanislav Jakuschevskij
Author URI: http://www.two-giants.com/
Tags: grey, custom header, fixed width, one column, big footer

	twoGiants v2
	 http://www.two-giants.com

	This theme was designed and built by Stanislav Jakuschevskij,
	whose blog you will find at http://www.two-giants.com/
*/

/*------------------------------------FONTS------------------------------------*/
@font-face
{
  font-family: "Asenine";
  src: url("fonts/asenine.ttf") format("truetype");
}

@font-face
{
  font-family: "Existence";
  src: url("fonts/existence.ttf") format("truetype");
}

/*------------------------------------GLOBAL------------------------------------*/
html, 
body, 
div,
form,
ul,
ol,
li,
input,
img 
{
  border: 0px;
  margin: 0px; 
  padding: 0px;
}

/*------------------------------------TAGS------------------------------------*/
body
{
  height: 100%;
  width: 100%;
  background-color: #808080;
  /*IE-HACK*/
  text-align: center;
  text-shadow: 0 1px 1px #000000;
  margin: 0px;
  padding: 0px;
}

ul
{
  list-style: none;
  padding: 0px;
}

ul li
{
  margin: 3px 0px;
}

input,
textarea
{
  outline: none;
  border: none;
}

h2
{
  color: #CCCCCC;
  font-family: Asenine, Existence, ‘Century Gothic’, AppleGothic, sans-serif;
  font-size: 25px;
  font-weight: normal;
  letter-spacing: 1px;
  text-decoration: none;
  margin: 10px 0px 4px;
  padding: 0px;
  /*text-shadow: #000000 0px 1px 2px;*/
}

/*------------------------------------MAIN ID'S & CLASSES------------------------------------*/
#main_wrapper
{
  /*
   * muss wegen IE6 unten padding setzen, da margin 
   * nicht akzeptiert wird
   */
  height: 100%;
  margin: 10px auto 0px;
  padding: 0px 0px 10px;
}

  .width_hack
  {
    width: 1061px;
    margin: 0px auto;
  }
  
    .sub_wrapper
    {
      width: 830px;
      margin: 0px auto;
      text-align: left;
      position: relative;
      z-index: 1;
    }
        
  #bg
  {
    height: 685px;
    width: 1061px;
    background-image: url("images/ornaments_bg.gif");
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
    margin: -645px auto 0px;
  }

  .clr_flt
  {
    clear: both;
  }

/*------------------------------------HEADER------------------------------------*/
#header_top
{
  height: 48px;
  background-image: url("images/header_top_shadow.png");
  background-repeat: no-repeat;
}

#header_bg,
#footer_bg
{
  background-image: url("images/header_box_bg.png");
  background-repeat: no-repeat;
  padding: 0px 14px;
}

  #header_box,
  #footer_box
  {
    /*
     * wegen IE7 von 85px auf 83px gekuerzt
     * komischer Bug
     */
    height: 83px;
    border: solid thin #666666;
  }
  
  #header_box
  {
    background-image: url("images/logo.png");
    background-repeat: no-repeat;
    background-position: 93% center;
  }
    #header_box ul.navi_pure
    {
      margin: 33px 0px 0px 20px; 
    }

/*------------------------------------NAVIGATION------------------------------------*/
ul.navi_pure
{
  font-family: Asenine, Existence, ‘Century Gothic’, AppleGothic, sans-serif;
  font-size: 17px;
  float: left;
  letter-spacing: 1px;
  list-style-type: none;
  margin: 30px 0px 0px;
  text-shadow: #000000 0px 2px 2px;
  /*text-shadwo: 1px 1px 0px #848484, -1px -1px 0px #595959; */
}

  li.nav_pure
  {
    float: left;
    margin: 0px 20px 0px 0px;
  }
    li.nav_pure a.selected_pure
    {
      color: #FFE11A;
    }
  
    li.nav_pure a
    {
      color: #B3B3B3;
      text-decoration: none;
    }
    
    li.nav_pure a:HOVER
    {
      color: #FFE11A;
    }

/*------------------------------------CONTENT------------------------------------*/
#shadow_wrapper
{
  background-image: url("images/shadow_bg.png");
  background-repeat: repeat-y;
  padding: 0px 14px;
}

#banner_box
{
  height: 390px;
  background-image: url("images/banner.jpg");
  background-position: center;
  border: solid thin #666666;
  border-top: none;
}

#content_box, 
#imp_content_box,
#mdl_content_box
{
  border-left: solid thin #666666;
  border-right: solid thin #666666;
  padding: 20px 20px;
}

  .post
  {
    margin: 0px 0px 40px;
  }
    
    .heading,
    .heading2,
    .heading a
    {
      color: #FFE11A;
      font-family: Asenine, Existence, ‘Century Gothic’, AppleGothic, sans-serif;
      font-size: 29px;
      letter-spacing: 1px;
      text-decoration: none;
      /*text-shadow: #000000 0px 1px 2px;*/
    }
    
    .wrapper
    {
      border-top: solid thin #666666;
      color: #B3B3B3;
      font-family: Tahoma, Trebuchet, Arial, sans-serif;
      font-size: 12px;
      margin: 10px 0px 0px;
    }
    
      .wrapper a,
      .box_wrapper a
      {
        color: #FFE11A;
        text-decoration: none;
      }
      
      .meta1
      {
        width: 100px;
        float: left;
        margin: 10px 0px 0px;
      }
      
      .main
      {
        width: 640px;
        margin: 10px 0px 0px 110px;
      }
      
        .img_wrap
        {
          width: 636px;
          border: 1px solid #B3B3B3;
          background-color: #666666;
          margin: 0 auto 10px;
        }
        
        .img_wrap img
        {
          /*height: 300px;*/
          width: 612px;
          border: solid thin #B3B3B3;
          display: block;
          text-align: center;
          margin: 10px auto;
        }
        
        /*fuer den IE6*/
        .main p
        {
          margin-top: 0px;
        }
        
        .read_more
        {
          height: 16px;
          width: 86px;
          background-image: url("images/more.gif");
          background-position: right center;
          background-repeat: no-repeat;
          margin: 10px 0px 0px;
        }

/*------------------------------------FOOTER------------------------------------*/
#big_footer
{
  height: 406px;
  min-width: 1200px;
  background-image: url("images/big_footer_bg.png");
  background-repeat: repeat-x;
  position: relative;
  z-index: 2;
  margin: -20px 0px;
}

  /*
   * Brauche den Hack um min-width im IE5/6 realisieren zu können
   * zusaetlich muss ich negativen margin verwenden, weil sonst das
   * div im IE eine Höhe bestimmte Mindesthöhe hat, egal wie gering
   * ich height waehle
   */
  #min_width_hack
  {
    height: 19px;
    width: 1200px;
    visibility: hidden;
    margin: 0px 0px -19px;
  }

  .box_wrapper
  {
    width: 1100px;
    color: #B3B3B3;
    font-family: Tahoma, Trebuchet, Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    margin: 30px auto 0px;
  }
    
    .box_wrapper p
    {
      width: 210px;
      margin: 10px 0px 0px;
      padding: 0px;
    }
  
    #box_1,
    #box_2,
    #box_3,
    #box_4
    {
      display: inline; /*IE double margin hack*/
      float: left;
      text-align: left;
      margin: 0px 0px;
    }
    
    #box_2,
    #box_3
    {
      width: 270px;
      margin: 0px 15px
    }
    
      .heading2
      {
        color: #E6E6E6;
        padding: 10px 0px 10px 0px;
        text-align: left;
      }
    
    #box_1
    {
      width: 215px;
      margin: 0px 45px 0px 0px;
    }
      .img_wrap_sml
      {
        width: 210px;
        border: solid thin #B3B3B3;
        background-color: #666666;
        margin: 5px 0px 0px;
      }
      
      .img_wrap_sml img
      {
        height: 157px;
        width: 186px;
        border: solid thin #B3B3B3;
        display: block;
        text-align: center;
        margin: 10px auto;
      }
      
    #box_4
    {
      width: 200px;
      text-align: center;
      margin: 0px 0px 0px 40px;
    }
      /*
       * das ist ein Workaround für den Hindergrund von Formularen
       * die Formulargröße sollte immer dem Kinderelement gegeben
       * werden(s.u.) => Browsersafe!
       *
       */
      .tf1_help
      {
        background-image: url("images/tf1_bg.png");
        background-repeat: no-repeat;
        margin: 5px 0px;
      }
      
        .tf1,
        .ta1
        {
          height: 14px;
          width: 190px;
          background-color: transparent;
          border: none;
          color: #B3B3B3;
          font-family: Tahoma, Trebuchet, Arial, sans-serif;
          font-style: italic;
          font-size: 11px;
          margin: 3px 5px;
        }
      
      .ta1_help
      {
        
        background-image: url("images/ta1_bg.png");
        background-repeat: no-repeat;
        margin: 5px 0px;
      }
      
        .ta1
        {
          height: 94px;
          width: 190px;
          overflow: auto;
        }
      
      .b1_bg
      {
        height: 69px;
        width: 104px;
        background-image: url("images/b1_bg.png");
        margin: 0px auto;
      }
      
        .b1
        {
          height: 46px;
          width: 93px;
          background-image: url("images/b1.png");
          background-color: transparent;
          margin: 10px 0px 0px 10px;
        }

  .social
  {
    width: 291px;
    float: right;
    margin: 20px 0px 0px;
  }
  
    img.tw
    {
      height: 19px;
      width: 88px;
    }
    
    img.yt
    {
      height: 26px;
      width: 62px;
      position: relative;
      top: 4px;
      margin: 0px 20px;
    }
    
    img.fb
    {
      height: 20px;
      width: 93px;
    }

#footer_box
{
  border-top: none;
}

  a.wp
  {
    height: 40px;
    width: 40px;
    background-image: url("images/wp_logo4.png");
    background-repeat: no-repeat;
    display: block;
    float: left;
    outline: none;
    margin: 25px 0px 0px 15px;
  }
  
  a.wp:HOVER
  {
    background-image: url("images/wp_logo4_y2.png");
  }
  
  #footer_box p
  {
    width: 265px;
    color: #999999;
    font-family: Tahoma, Trebuchet, Arial, sans-serif;
    font-size: 10px;
    float: right;
    text-align: right;
    padding: 35px 20px 0px 0px;
    margin: 0px;
  }
  
    a.impressum,
    a.lnk2
    {
      color: #999999;
      text-decoration: none;
      font-style: italic;
    }

#footer_bottom
{
  height: 13px;
  background-image: url("images/footer_bottom_shadow.png");
  background-repeat: no-repeat;
}


/*COMMENTS*/
.comment_box
{
  width: 758px;
  background-color: #333333;
  border: 1px solid #666666;
  font-family: Tahoma, Trebuchet, Arial, sans-serif;
  font-size: 12px;
  text-align: center;
  margin: 30px auto 0px;
}

  .comment_box_header
  {
    border-bottom: 1px solid #666666;
    color: #FFE11A;
    font-family: Asenine, Existence, ‘Century Gothic’, AppleGothic, sans-serif;
    font-size: 29px;
    letter-spacing: 1px;
    text-align: left;
    padding: 15px;
    /*text-shadow: #000000 0px 1px 2px;*/
  }
    
  .comment
  {
    width: 732px;
    background-color: #3D3D3D;
    /*border: 1px solid #666666;*/
    text-align: left;
    margin: 15px auto 0px;
  }
  
    .comment_header
    {
      height: 30px;
      background-image: url("images/single_round_top.gif");
      background-position: top;
      background-repeat: no-repeat;
      background-color: #666666;
      color: #B3B3B3;
    }
    
      .comment_header span
      {
        display: block;
        padding: 7px 0px 0px 10px;
      }
      
      .comment_header a
      {
        color: #FFE11A;
        text-transform: uppercase;
        text-decoration: none;
      }
    
    .help_border_wrapper
    {
      border: 1px solid #666666;
      margin: 0px;
      padding: 10px 0px;
    }
    
      .avatar
      {
        height: 60px;
        width: 60px;
        border: 1px solid #666666;
        float: left;
        margin: 0px 10px;
        padding: 1px;
      }
      
      .comment p
      {
        margin: 0px 10px;
        color: #B3B3B3;
      }
    
  .comment_form_wrapper
  {
    width: 734px;
    margin: 15px auto;
  }
  
    .tf2_wrapper
    {
      width: 200px;
      float: left;
      margin: 0px 15px 0px 0px;
    }
    
      .tf2_help
      {
        background-image: url("images/single_tf2_bg.png");
        background-repeat: no-repeat;
        margin: 0px 0px 15px;
      }
      
        .tf2,
        .ta2
        {
          height: 14px;
          width: 190px;
          background-color: transparent;
          border: none;
          color: #B3B3B3;
          font-family: Tahoma, Trebuchet, Arial, sans-serif;
          font-style: italic;
          font-size: 11px;
          margin: 3px 5px;
        }
      
      .b2_bg
      {
        height: 69px;
        width: 104px;
        background-image: url("images/single_b2_bg.png");
        margin: 0px auto;
      }
      
        .b2
        {
          height: 46px;
          width: 93px;
          background-image: url("images/single_b2.png");
          background-color: transparent;
          outline: none;
          margin: 10px 0px 0px 10px;
        }
        
      .ta2_help
      {
        
        background-image: url("images/single_ta2_bg.png");
        background-repeat: no-repeat;
        float: left;
        margin: 0px 0px;
      }
      
        .ta2
        {
          height: 174px;
          width: 505px;
          overflow: auto;
        }

/*------------------------------------IMPRESSUM------------------------------------*/
#imp_banner_box
{
  height: 390px;
  background-image: url("images/impressum2.jpg");
  background-position: center;
  border: solid thin #666666;
  border-top: none;
}

#imp_content_box .heading
{
  /*text-align: center;*/
  border-bottom: 1px solid #666666;
  margin: 0px 0px 10px;
  padding: 0px 0px 10px;
}

/*#imp_content_box h2
{
  color: #FFE11A;
  font-family: Asenine;
  font-weight: normal;
  letter-spacing: 1px;
  margin: 0px;
}*/

#imp_content_box p
{
  color: #B3B3B3;
  font-family: Tahoma, Trebuchet, Arial, sans-serif;
  font-size: 12px;
  margin: 5px 0px 15px;
}

#imp_content_box a
{
  color: #FFE11A;
  text-decoration: none;
}

/*------------------------------------MODEL------------------------------------*/
#mdl_banner_box
{
  height: 390px;
  background-image: url("images/mdl_banner.jpg");
  background-position: center;
  border: solid thin #666666;
  border-top: none;
}

#mdl_content_box
{
  text-align: left;
  padding: 20px 31px;
}

  #photo_wrapper,
  #video_wrapper
  {
    margin: 0px 0px 30px;
  }
  
    #photo_header,
    #video_header
    {
      background-position: center right;
      background-repeat: no-repeat;
      border-bottom: 1px solid #666666;
      color: #FFE11A;
      font-family: Asenine, Existence, ‘Century Gothic’, AppleGothic, sans-serif;
      font-size: 29px;
      letter-spacing: 1px;
      /*text-shadow: #000000 0px 1px 2px;*/
      padding: 15px 0px 15px;
    }
    
    #photo_header
    {
      background-image: url("images/photocamera.png");
    }
    
    #video_header
    {
      background-image: url("images/videocamera.png");
    }
    
    .image_wrapper
    {
      float: left;
      position: relative;
      margin: 30px 0px 0px 30px;
    }
   
    .left_border_image
    {
      margin: 30px 0px 0px 0px;
    }
    
      .image_wrapper a, 
      .image_wrapper a:visited, 
      .image_wrapper a:hover
      {
        height: 82px;
        width: 162px;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 2;
      }
      
        .image_wrapper a img
        {
          height: 80px;
          width: 160px;
          border: 1px solid #B3B3B3;
        }
      
      .image_wrapper img.shadow
      {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
      }
/*------------------------------------PROJECTS------------------------------------*/
div.project_wrapper
{
  width: 760px;
  /*border-bottom: solid thin #666666;*/
  text-align: left;
  margin: 0 auto;
  padding: 0;
}

  div.project_heading
  {
    color: #FFE11A;
    font-family: Asenine, Existence, ‘Century Gothic’, AppleGothic, sans-serif;
    font-size: 29px;
    letter-spacing: 1px;
    /*text-shadow: #000000 0px 1px 2px;*/
    margin: 0 0 20px;
  }
  
  img.project_img
  {
    height: 200px;
    width: 400px;
    background-color: #BEDB39;
    border: solid thin #666666;
    float: left;
    margin: 0 15px 30px 0;
  }
  
  ul.project_descr
  {
    color: #CCCCCC;
    font-family: Tahoma, Trebuchet, Arial, sans-serif;
    font-size: 12px;
    list-style: none;
    overflow: hidden;
  }
    ul.project_descr li
    { 
      display: inline;
    }
    
    ul.project_descr li a
    {
      display: block;
      margin: 0 0 20px;
    }

      ul.project_descr li span
      {
        color: #999999;
        font-style: italic; 
      }
      
/*------------------------------------ABOUT------------------------------------*/
div#abt_banner_box
{
  height: 390px;
  background-image: url("images/about_bg.jpg");
  background-position: center;
  border: solid thin #666666;
  border-top: none;
}

div#about_wrapper
{
  width: 800px;
  height: 704px;
  position: relative;
  margin: 0 auto -63px;
}
  div#about_cross
  {
    width: 834px;
    height: 697px;
    background-image: url("images/about_cross.png");
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: -20px;
    left: -17px;
  }
  
  div#about_container1
  {
    display: none;
  }
  
  div.about_container2
  {
    width: 800px;
    display: none;
    padding: 40px 0 0 0;
    margin: 0 0 0 10px;
  }
    div.about_details
    {
      width: 365px;
      height: 470px;
      float: left;
    }
      
      div.about_details p
      {
        color: #ffffff;
        font-family: Consolas, Courier, ‘Andale Mono WT’, ‘Andale Mono’, ‘Lucida Console’, ‘Lucida Sans Typewriter’, ‘DejaVu Sans Mono’, ‘Bitstream Vera Sans Mono’, ‘Liberation Mono’, ‘Nimbus Mono L’, Monaco, ‘Courier New’, monospace;
        font-size: 12px;
        float: left;
        /*text-shadow: #000000 0px 1px 2px;*/
        text-align: right;
        margin: 0 0 0 90px;
      }
      
      div.about_details p.right_part
      {
        text-align: left;
        margin: 0;
      }
      
    div.about_container2 .left_part
    {
      margin: 0 50px 0 0;
    }
  
    div.about_part
    {
      width: 200px;
      color: #FFFFFF;
      font-family: Asenine, Existence, ‘Century Gothic’, AppleGothic, sans-serif;
      float: left;
      letter-spacing: 1px;
      /*text-shadow: #000000 0px 1px 2px;*/
    }
      
      div#about_container1 .left_part
      {
        margin: 0 0 0 40px;
      }
      
      img.about_twoGiants
      {
        float: left;
        margin: 48px 111px 0 100px;
      }
    
      div.about_part h1
      {
        font-size: 120px;
        font-weight: normal;
        margin: 0;
        padding: 0;
      }
      
      div.about_part h5
      {
        font-size: 40px;
        font-weight: normal;
        margin: -15px 0 0;
        padding: 0;
      }
      
      div.about_part span
      {
        color: #FFE11A;
      }