/*
Theme Name: SYLABUS
Theme URI: http://reneopitz.net/
Description: Sylabus - ein Möbel entsteht.
Version: 1.0
Author: Rene Opitz
Author URI: http://reneopitz.net/
*/

/* struktur */
html {
  padding: 0;
  margin: 0;
  }
body {
  position: relative;
  padding: 0;
  margin: 0;
  background: #CCCCCC url('grafiken/bgbody.jpg') top right;
  color: #333333;
  font-size: 62.5%; /* Resets 1em to 10px */
  font-family: 'Helvetica', 'Arial', Verdana, Sans-Serif;
  text-align: center;
  z-index: 0;
  }
#bgstreifen {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 730px;
  padding: 0;
  margin: 0;
  background: transparent url('grafiken/bgstreifen.jpg') bottom right repeat-x;
  z-index: 1;
  }
#bgbild {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 760px;
  height: 400px;
  padding: 0;
  margin: 0;
  background: transparent url('grafiken/bgbild.jpg') bottom right no-repeat;
  z-index: 2;
  }
#center {
  position: relative;
  width: 900px;
  padding: 0;
  margin: 0 auto;
  z-index: 3;
  }
#logo {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 290px;
  height: 80px;
  padding: 0;
  margin: 0;
  z-index: 5;
  }
#bubble {
  position: absolute;
  top: 30px;
  left: 340px;
  width: 320px;
  height: 80px;
  padding: 0;
  margin: 0;
  z-index: 5;
  }
/* menu */
#menu {
  position: absolute;
  top: 110px;
  left: 50px;
  width: 290px;
  height: 30px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 5;
  }
#menu li {
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
  }
#menu li a#philosophie {
  position: relative;
  top: 0;
  display: block;
  width: 135px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: transparent url('grafiken/philosophie.png') top left no-repeat;
  outline: none;
  z-index: 6;
  }
#menu li a#moebel {
  position: relative;
  top: 0;
  display: block;
  width: 70px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: transparent url('grafiken/moebel.png') top left no-repeat;
  outline: none;
  z-index: 6;
  }
#menu li a#kontakt {
  position: relative;
  top: 0;
  display: block;
  width: 85px;
  height: 30px;
  margin: 0;
  padding: 0;
  background: transparent url('grafiken/kontakt.png') top left no-repeat;
  outline: none;
  z-index: 6;
  }
#menu li a#philosophie:active, #menu li a#philosophie:hover, #menu li a#moebel:active, #menu li a#moebel:hover, #menu li a#kontakt:active, #menu li a#kontakt:hover { background-position: bottom left; }
.active { background-position: bottom left !important; }
/* schrift */
h1, h2, h3 {
  font-family: 'Helvetica', 'Arial', Verdana, Sans-Serif;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #333333;
  padding: 0 0 10px 0;
  margin: 0;
  }
h1, h2, h3 { font-size: 1em; }
p {
  font-size: 1.1em;
  line-height: 1.4em;
  text-align: left;
  color: #333333;
  padding: 0 0 20px 0;
  margin: 0;
  }
small { font-size: 0.9em; }
blockquote {
  margin: 0;
  padding: 0;
  color: #666666;
  font-style: italic;  
  }
/* links */
a.none {
  display: inline-block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  border: 0 none;
  }
a.link:link, a.link:visited {
  margin: 0;
  padding: 0 9px 0 2px;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  color: #FFFFFF;
  background: #333333 url('grafiken/raus1.gif') no-repeat scroll right center;
  }
a.link:hover, a.link:active {
  margin: 0;
  padding: 0 9px 0 2px;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  color: #333333;
  background: #EEEEEE url('grafiken/raus2.gif') no-repeat scroll right center;
 }
a.bild:link, a.bild:visited {
  display: inline-block;
  margin: 0;
  padding: 1px 9px 9px 1px;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  border: 0 none;
  background: transparent url('grafiken/bild1.png') 0 0 no-repeat;
  }
a.bild:hover, a.bild:active {
  display: inline-block;
  margin: 0;
  padding: 1px 9px 9px 1px;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  border: 0 none;
  background: transparent url('grafiken/bild1.png') 0 0 no-repeat;
  }
a.bildg:link, a.bildg:visited {
  display: inline-block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  border: 0 none;
  background: transparent url('grafiken/bild2.png') 0 0 no-repeat;
  }
a.bildg:hover, a.bildg:active {
  display: inline-block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  border: 0 none;
  background: transparent url('grafiken/bild2.png') 0 0 no-repeat;
  }

a.bild img, a.bildg img {
  float: left;
  margin: 0 10px 10px 0;
  padding: 6px 6px 24px;
  border-color: #F3F3F3 #FFFFFF #FFFFFF #F3F3F3;
  border-style: solid;
  border-width: 1px;
  background-color: #FFFFFF;
  }

/* content */
#verlaufoben {
  position: absolute;
  top: 160px;
  left: 62px;
  width: 600px;
  height: 30px;
  background: transparent url('grafiken/verlauf_oben.png') 0 0 no-repeat;
  overflow: hidden;
  z-index: 20;  
  }
#verlaufunten {
  position: absolute;
  top: 530px;
  left: 62px;
  width: 600px;
  height: 30px;
  background: transparent url('grafiken/verlauf_unten.png') 0 0 no-repeat;
  overflow: hidden;
  z-index: 20;  
  }
#contentbg {
  position: absolute;
  top: 160px;
  left: 50px;
  width: 620px;
  height: 410px;
  padding: 0;
  margin: 0;
  background: transparent url('grafiken/contentbg.png') 0 0 no-repeat;
  z-index: 10;
  }
#contentwrapper {
  position: absolute;
  top: 160px;
  left: 80px;
  width: 650px;
  height: 400px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 14;
  }
#content {
  float: left;
  width: 650px;
  height: 400px;
  padding: 0;
  margin: 0;
  overflow: auto;
  z-index: 15;
  }
.jScrollPaneContainer {
  position: relative;
  width: 650px;
  padding: 0;
  margin: 0;
  text-align: left;
  overflow: hidden;
  z-index: 13;
  }
.jScrollPaneTrack {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
  height: 100%;
  background: transparent url('grafiken/bgscroll.png') 0 0;
  }
.jScrollPaneDrag {
  position: absolute;
  width: 34px !important;
  background-color: #FFFFFF;
  cursor: pointer;
  overflow: hidden;
  }
a.jScrollArrowUp, a.jScrollArrowDown {
  display: block;
  position: absolute;
  z-index: 1;
  right: 0;
  text-indent: -2000px;
  overflow: hidden;
  height: 34px;
  }
a.jScrollArrowUp { top: 0; background: transparent url('grafiken/up.png') top left no-repeat; }
a.jScrollArrowDown { height: 44px; bottom: 0; background: transparent url('grafiken/down.png') top left no-repeat; }

#text {
  width: 560px;
  padding: 30px 0;
  margin: 0;
  }
.left {
  float: left;
  width: 270px;
  padding: 0 20px 20px 0;
  margin: 0;
 }
.right {
  float: left;
  width: 270px;
  padding: 0 0 20px 0;
  margin: 0;
  }
.all {
  float: left;
  width: 560px;
  padding: 0 0 20px 0;
  margin: 0;
  }

/* formularfeld */
#formular {
  float: left;
  width: 270px;
  padding: 0;
  margin: 0;
  }
.inputfeld, .textfeld {
  width: 258px;
  height: 20px;
  padding: 8px 5px 0 5px;
  margin: 0 0 10px 0;
  font-family: 'Helvetica', 'Arial', Verdana, Sans-Serif;
  font-size: 10px;
  color: #CCCCCC;
  border-left: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
  border-right: 1px solid #F9F9F9;
  border-bottom: 1px solid #F9F9F9;
  }
.textfeld { height: 180px; }
.inputfeld:hover, .textfeld:hover {
  color: #666666;
  border: 1px solid #666666;
  }
.senden {
  display: block;
  width: 80px;
  height: 30px;
  padding: 0 0 2px 0;
  font-family: 'Helvetica', 'Arial', Verdana, Sans-Serif;
  font-size: 10px;
  text-align: center;
  text-decoration: none;
  line-height: 30px;
  cursor: pointer;
  color: #FFFFFF;
  background-color: #333333;
  border: 0 none;
  }
.senden:hover {
  color: #333333;
  background-color: #EEEEEE;
  }
#teaser, #elffachteaser, #strichcodeteaser, #elliteaser, #streifenteaser, #bankteaser, #zwoelffachteaser, #sechshochzweiteaser { 
	width:270px;
	height:280px;
	overflow:hidden; 
  display: inline-block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  outline: none;
  text-decoration: none;
  border: 0 none;
  background: transparent url('grafiken/bild2.png') 0 0 no-repeat;
  }
#teaser { margin-bottom: 10px; }
#teaser img, #elffachteaser img, #strichcodeteaser img, #elliteaser img, #streifenteaser img, #bankteaser img, #zwoelffachteaser img, #sechshochzweiteaser img { 
  float: left;
  width: 236px;
  height: 236px;
  margin: 1px 10px 10px 1px;
  padding: 6px 6px 24px;
  border-color: #F3F3F3 #FFFFFF #FFFFFF #F3F3F3;
  border-style: solid;
  border-width: 1px;
  background-color: #FFFFFF;
  }