/*
 * Copyright by Oliver Musebrink (www.olivermusebrink.de)
 */


/*
 * HTML
 */
html
{
  width:  100%;
  height: 100%;
}


/*
 * Body
 */
body
{
  width:            100%;
  height:           100%;
  background-color: #ffffff;
}


/*
 * Header
 */
#header
{
  margin:  0px;
  padding: 0px;
  width:   100%;
  height:  90px;
}

#header .wrapper
{
  margin:  0px auto 0px auto;
  padding: 0px 50px 0px 50px;
  width:   720px;
  height:  90px;
}


/*
 * Logo
 */
#logo
{
  margin:              50px 20px 20px 20px;
  padding:             0px;
  width:               20px;
  height:              20px;
  float:               left;
  display:             block;
  background-image:    url("../images/logo-m.png");
  background-position: center center;
  background-repeat:   no-repeat;
}


/*
 * Menu
 */
#menu
{
  margin:  58px 20px auto 0px;
  padding: 0px;
  float:   right;
}

#menu li
{
  margin:          0px;
  padding:         0px 0px 0px 10px;
  float:           right;
  list-style-type: none;
  font-family:     Verdana, Arial, sans-serif;
  font-size:       10px;
  font-style:      normal;
  font-weight:     normal;
  line-height:     16px;
  text-decoration: none;
  text-transform:  none;
  color:           #000000;
}

#menu a
{
display: block;
  text-decoration: none;
  text-transform:  none;
  color:           #000000;
  opacity:         0.4;
  -moz-opacity:    0.4;                /* Firefox 1.6 and bofore */
  filter:          alpha(opacity=40);  /* IE */
}

#menu a.selected
{
  text-decoration: none;
  text-transform:  none;
  color:           #000000;
  opacity:         0.66;
  -moz-opacity:    0.66;               /* Firefox 1.6 and bofore */
  filter:          alpha(opacity=66);  /* IE */
}


/*
 * Content
 */
#content
{
  margin:           0px;
  padding:          0px;
  width:            100%;
  font-family:      Verdana, Arial, sans-serif;
  font-size:        10px;
  font-style:       normal;
  font-weight:      normal;
  line-height:      16px;
  text-decoration:  none;
  text-transform:   none;
  color:            #999999;
}

#columns
{
  margin:  0px auto 0px auto;
  padding: 0px;
  width:   720px;
}

#columns .left
{
  margin:  0px;
  padding: 0px 20px 0px 20px;
  width:   330px;
  float:   left;
}

#columns .right
{
  margin:  0px;
  padding: 0px 20px 0px 0px;
  width:   330px;
  float:   left;
}

#content .clear
{
  clear: both;
}

.content h1
{
  color:       #666666;
  font-weight: bold;
}

.content a
{
  border-width:    0px 0px 1px 0px;
  border-style:    dotted;
  border-color:    #dddddd;
  color:           #999999;
  text-decoration: none;
}

.content a:hover
{
  border-width:    0px 0px 1px 0px;
  border-style:    dotted;
  border-color:    #dddddd;
  color:           #666666;
  text-decoration: none;
}

.content li
{
  margin:              0px 0px 16px 16px;
  list-style-type:     disc;
  list-style-position: outside;
}

.content label
{
  margin:         0px;
  padding:        0px 0px 2px 0px;
  display:        block;
  text-align:     left;
  vertical-align: top;
}

.content input,
.content textarea,
.content button
{
  margin:           0px 0px 5px 0px;
  padding:          2px 4px 2px 4px;
  border-width:     1px;
  border-style:     solid;
  border-color:     #eeeeee;
  font-family:      Verdana, Arial, sans-serif;
  font-size:        10px;
  font-style:       normal;
  font-weight:      normal;
  line-height:      16px;
  text-decoration:  none;
  text-transform:   none;
  color:            #999999;
  background-color: #ffffff;
}

.content button:hover
{
  color:            #666666;
  background-color: #ffffff;
}

.content input
{
  width: 200px;
}

.content textarea
{
  width: 330px;
}


/*
 * Slideshow
 */
#slideshow
{
  margin:   0px auto 0px auto;
  padding:  0px;
  width:    820px;
  height:   570px;
  position: relative;
}


/*
 * Buttons
 */
#button-previous
{
  margin:              0px;
  padding:             0px;
  width:               50px;
  height:              480px;
  float:               left;
  background-image:    url("../images/button-previous.png");
  background-position: center center;
  background-repeat:   no-repeat;
  opacity:             0.0;
  -moz-opacity:        0.0;               /* Firefox 1.6 and bofore */
  filter:              alpha(opacity=0);  /* IE */
}

#button-next
{
  margin:              0px;
  padding:             0px;
  width:               50px;
  height:              480px;
  float:               right;
  background-image:    url("../images/button-next.png");
  background-position: center center;
  background-repeat:   no-repeat;
  opacity:             0.0;
  -moz-opacity:        0.0;               /* Firefox 1.6 and bofore */
  filter:              alpha(opacity=0);  /* IE */
}


/*
 * Navigation
 */
#navigation
{
  position: absolute;
  top:      0px;
  left:     50px;
  width:    720px;
  height:   480px;
  z-index:  10;
}

#navigation-previous
{
  display:          block;
  float:            left;
  z-index:          100;
  width:            50%;
  height:           100%;
  background-image: url("data:image/gif;base64,AAAA"); /* Trick IE and Opera into showing it */
}

#navigation-next
{
  display:          block;
  float:            right;
  z-index:          100;
  width:            50%;
  height:           100%;
  background-image: url("data:image/gif;base64,AAAA"); /* Trick IE and Opera into showing it */
}


/*
 * Showcase
 */
#showcase
{
  margin:   0px;
  padding:  0px;
  width:    720px;
  height:   570px;
  overflow: hidden;
  position: relative;
}

#showcase ul
{
  margin:  0px;
  padding: 0px;
  height:  570px;
}

#showcase ul.portfolio
{
  width: 7920px;
}

#showcase ul.projects
{
  width: 5760px;
}

#showcase li
{
  margin:          0px;
  padding:         0px;
  width:           720px;
  height:          570px;
  float:           left;
  list-style-type: none;
}

#showcase .image-container
{
  margin:              0px;
  padding:             0px;
  width:               720px;
  height:              480px;
  text-align:          center;
  background-image:    url("../images/loader.gif");
  background-position: center center;
  background-repeat:   no-repeat;
}

#showcase .image
{
  margin:  0px;
  padding: 0px;
  display: none;
}

#showcase .info
{
  margin:  0px;
  padding: 20px;
  width:   680px;
}


/*
 * Contact form
 */
#contact-form .submit
{
}

#contact-form .reset
{
}

#contact-form div.error
{
  margin:           0px 0px 8px 0px;
  padding:          0px;
  font-family:      Verdana, Arial, sans-serif;
  font-size:        10px;
  font-style:       italic;
  font-weight:      normal;
  line-height:      16px;
  text-decoration:  none;
  text-transform:   none;
  color:            #cc0000;
  background-color: #ffffff;
}

#contact-form input.error,
#contact-form textarea.error
{
}


/*
 * Error page
 */
#error
{
  margin:   0px auto 0px auto;
  padding:  0px;
  width:    720px;
  height:   570px;
  overflow: hidden;
  position: relative;
}

#error .image-container
{
  margin:              0px;
  padding:             0px;
  width:               720px;
  height:              480px;
  text-align:          center;
  background-image:    url("../images/loading-animation.gif");
  background-position: center center;
  background-repeat:   no-repeat;
}

#error .image
{
  margin:  0px;
  padding: 0px;
  display: none;
}

#error .info
{
  margin:  0px;
  padding: 20px 20px 0px 20px;
  width:   680px;
}