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


/*
 * HTML
 */
html
{
  margin:  0px;
  padding: 0px;
  width:   100%;
  height:  100%;
}


/*
 * Body
 */
body
{
  margin:           0px;
  padding:          0px;
  width:            100%;
  height:           100%;
  background-color: #191919;
}


/*
 * Clear
 */
.clear
{
  clear: both;
}


/*
 * Splash page
 */
#splash-page
{
  position: relative;
  margin:   -75px auto 0px auto;
  padding:  0px;
  width:    100%;
  top:      50%;
}

#knipsdings
{
  margin:              0px auto 0px auto;
  padding:             0px;
  display:             block;
  width:               598px;
  height:              95px;
  background-image:    url("../images/knipsdings.png");
  background-position: center center;
  background-repeat:   no-repeat;
}


/*
 * Menu
 */
#menu
{
  margin:   0px;
  padding:  60px 40px 40px 40px;
  position: fixed;
  top:      0px;
  left:     0px;
  z-index:  1100;
  width:    120px;
}

#menu ul
{
  margin:  10px 0px 0px 0px;
  padding: 0px;
}

#menu li
{
  margin:          0px;
  padding:         0px;
  list-style-type: none;
}

#menu li a
{
  margin:          0px;
  padding:         9px 20px 9px 20px;
  display:         block;
  width:           80px;
  font-family:     Verdana, Arial, sans-serif;
  font-size:       12px;
  font-style:      normal;
  font-weight:     normal;
  line-height:     12px;
  text-decoration: none;
  text-transform:  uppercase;
  color:           #999999;
}

#menu li a:hover
{
  color: #f56101;
}

#menu li a.selected
{
  color: #f56101;
}

#menu-underlay
{
  margin:           0px;
  padding:          0px;
  position:         fixed;
  top:              0px;
  left:             0px;
  z-index:          1000;
  width:            200px;
  height:           100%;
  background-color: #191919;
  opacity:          0.8;
  -moz-opacity:     0.8;                /* Firefox 1.6 and bofore */
  -khtml-opacity:   0.8;                /* Safari 1.x */
  filter:           alpha(opacity=80);  /* IE */
}


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


/*
 * Facebook like button
 */
#facebook-like-button
{
  margin:   0px;
  padding:  40px 60px 60px 60px;
  position: fixed;
  bottom:   0px;
  left:     0px;
  z-index:  900;
  width:    80px;
  height:   24px;
}


/*
 * Category list
 */
#category-list
{
  margin:  0px;
  padding: 0px;
  width:   120px;
}


/*
 * Image browser
 */
#image-browser
{
  margin:  0px;
  padding: 60px 40px 60px 200px;
}


/*
 * Browse thumbnails
 */
#browse-thumbnails
{
  margin:  -10px;
  padding: 0px;
}

#browse-thumbnails li
{
  margin:              0px;
  padding:             10px;
  float:               left;
  width:               120px;
  height:              120px;
  list-style-type:     none;
  list-style-image:    none;
  background-image:    url("../images/ajax-loader-thumbnail.gif");
  background-position: center center;
  background-repeat:   no-repeat;
}

#browse-thumbnails div.thumbnail
{
  margin:           0px;
  padding:          0px;
  display:          none;
  background-color: #f56101;
}

#browse-thumbnails img
{
  opacity:        1.0;
  -moz-opacity:   1.0;                 /* Firefox 1.6 and bofore */
  -khtml-opacity: 1.0;                 /* Safari 1.x */
  filter:         alpha(opacity=100);  /* IE */
}


/*
 * Content
 */
#content
{
  margin:  0px;
  padding: 217px 200px 60px 200px;
}

#columns
{
  margin:  0px;
  padding: 0px;
  width:   740px;
}

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

#columns .right
{
  margin:  0px;
  padding: 0px;
  float:   right;
  width:   350px;
}


/*
 * Typography
 */
.typography
{
  font-family:     Verdana, Arial, sans-serif;
  font-size:       12px;
  font-style:      normal;
  font-weight:     normal;
  line-height:     18px;
  text-align:      left;
  text-decoration: none;
  text-transform:  none;
  color:           #999999;
}

.typography p
{
  margin:  0px;
  padding: 0px;
}

.typography h1
{
  color:          #f56101;
  font-weight:    normal;
  text-transform: uppercase;
}

.typography h2
{
  color:          #f56101;
  font-weight:    normal;
}

.typography a
{
  margin:          -3px;
  padding:         3px;
  color:           #f56101;
  text-decoration: none;
}

.typography a:hover
{
  color:           #f56101;
  text-decoration: underline;
}

.typography li
{
  margin:              0px 0px 0px 18px;
  padding:             0px;
  list-style-type:     disc;
  list-style-position: outside;
}

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

.typography input,
.typography textarea
{
  margin:           0px 0px 6px 0px;
  padding:          2px 4px 2px 4px;
  border-width:     1px;
  border-style:     solid;
  border-color:     #222222;
  font-family:      Verdana, Arial, sans-serif;
  font-size:        12px;
  font-style:       normal;
  font-weight:      normal;
  line-height:      18px;
  text-decoration:  none;
  text-transform:   none;
  color:            #f56101;
  background-color: #191919;
}

.typography input
{
  width: 200px;
}

.typography textarea
{
  width: 350px;
}

.typography button
{
  margin:           0px 2px 18px 0px;
  padding:          2px 4px 2px 4px;
  border-width:     1px;
  border-style:     solid;
  border-color:     #222222;
  font-family:      Verdana, Arial, sans-serif;
  font-size:        12px;
  font-style:       normal;
  font-weight:      normal;
  line-height:      18px;
  text-decoration:  none;
  text-transform:   none;
  color:            #999999;
  background-color: #191919;
}

.typography button:hover
{
  border-width:     1px;
  border-style:     solid;
  border-color:     #f56101;
  color:            #191919;
  background-color: #f56101;
}


/*
 * Contact form
 */
#contact-form
{
  margin:  0px;
  padding: 0px;
  width:   350px;
}

#contact-form .submit
{
}

#contact-form .reset
{
}

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

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

.hint
{
  margin:          0px 0px 9px 0px;
  padding:         0px;
  font-family:     Verdana, Arial, sans-serif;
  font-size:       10px;
  font-style:      italic;
  font-weight:     normal;
  line-height:     15px;
  text-decoration: none;
  text-transform:  none;
  color:           #444444;
}


/*
 * Image
 */
#image-wrapper
{
  margin:  0px;
  padding: 60px 200px 60px 200px;
}

#image-container
{
  margin:              0px auto 0px auto;
  padding:             0px;
  position:            relative;
  text-align:          center;
  background-image:    url("../images/ajax-loader-image.gif");
  background-position: center center;
  background-repeat:   no-repeat;
}

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

#image-navigation
{
  position: absolute;
  top:      0;
  left:     0;
  height:   100%;
  width:    100%;
  z-index:  10;
}


#image-button-previous
{
  display:             block;
  float:               left;
  z-index:             100;
  width:               50%;
  height:              100%;
  background-image:    url("../images/image-button-previous.png");
  background-position: left center;
  background-repeat:   no-repeat;
  opacity:             0.0;
  -moz-opacity:        0.0;               /* Firefox 1.6 and bofore */
  -khtml-opacity:      0.0;               /* Safari 1.x */
  filter:              alpha(opacity=0);  /* IE */
}

#image-button-next
{
  display:             block;
  float:               right;
  z-index:             100;
  width:               50%;
  height:              100%;
  background-image:    url("../images/image-button-next.png");
  background-position: right center;
  background-repeat:   no-repeat;
  opacity:             0.0;
  -moz-opacity:        0.0;               /* Firefox 1.6 and bofore */
  -khtml-opacity:      0.0;               /* Safari 1.x */
  filter:              alpha(opacity=0);  /* IE */
}