@import url(jquery.lightbox.css);
@import url(jScrollPane.css);
@import url(jquery.tooltip.css);
/*******************************************************************************
Base StyleSheet

version:  1.0
author:   Frieder Rosenfelder
email:    info@medienmogul.com
website:  http://www.medienmogul.com
------------------------------------------------------------------------------*/

* {
  margin: 0;
  padding: 0;
}
p {
  margin-bottom: 1em;
}
body {
  /*background: #c3c3c3 url(../images/body_bg.gif) repeat-y center top;*/
  font-family: Calibri, Verdana, Arial, Helvetica;
  text-align: center; /* IE 5.x und 6 */
}
object, a { 
  outline:none; 
} /* wegen Firefox 3 Bug (Rahmen um akives swfObject) */
/* falls Calibri nicht installiert */
.notCalibri {
  font-size: 0.8em;
}
p {
  line-height: 150%;
  margin-bottom: 1em;
}
#pageMenu {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 89;
}
#pageMenu a {
  text-decoration: none;
}
#pageMenu img {
  vertical-align: top;
}
#mainWrapper, #mainWrapperHome {
  margin: 0 auto !important;
  /*width: 1090px;*/
  width: 1007px;
  text-align: left;
  position: relative;
}
#mainWrapperHome {
  margin-top: 28px !important;
  width: 760px;
}
#logo {
  margin: 14px 0 0 0;
}
#wrapper {
  /*margin-left: 93px;*/
  margin-left: 10px;
}
#nav, .content, .scrollContainer {
  /*width: 715px;*/
  width: 744px;
}
#nav {
  margin-top: 24px;
  height: 50px;
}
#container {
	float:left;
	/*height: 516px; /* synchronisieren mit img #theMask und javascript.js ln43 */
	width: 957px;
	overflow: hidden;
	position: relative;
}
.banner {
  margin-top: 33px;
}
#subPageWrapper {
	width: 4500px;
}
.subPage {
  display: inline;
  float: left;
  width: 858px;
}
#maskLink {
  position: absolute; 
  /*left: 921px;*/
  left: 838px; 
  top: 176px; /* #logo-top + #logo height + #nav top + #nav height*/
  z-index: 3;
}
.scrollContainer {
  position: relative; 
  /*height: 347px; 
  overflow-y: auto; */
}
/*******************************************************************************
 Farben Headlines
------------------------------------------------------------------------------*/
.productions_parent { color: #827780; }
.projects_parent { color: #c8ac80; }
.calendar { color: #a8bd64; }
.about { color: #9b928a; }
.contact { color: #d67d71; }
.links { color: #71aed7; }
.news { color: #e3c01d; }
/*******************************************************************************
 Hyperlinks
------------------------------------------------------------------------------*/
a.internal, a.internal:hover, a.external, a.external:hover, a.mail, a.mail:hover {
  text-decoration: none;
  /*padding-right: 1.1em;*/  
}
a.internal, a.external, a.mail {
  /*background: url(../images/hyperlink_0.gif) no-repeat right top;*/
}
a.internal:hover, a.external:hover, a.mail:hover {
  /*background: url(../images/hyperlink_1.gif) no-repeat right top;*/
  /*border-bottom: 1px solid #ccc;*/
}
/*******************************************************************************
 Typographie
------------------------------------------------------------------------------*/
/* alle dunkelblauen Elemente */
a, a.theLink, .pic a, #pageMenu {
  color: #00a7a2;
}
a .thumbnail {
  border: 1px solid #ccc;
}
a:hover .thumbnail {
  border: 1px solid #1e5f89;
}
/* Cambria */
h1, .pic a {
  font-family: Cambria, Baskerville, "Times New Roman";
}
h1 {
  font-size: 2.1em;
  font-weight: normal;
  color: #a4a4a4;
  margin-bottom: 20px;
}
.notCalibri h1 {
  font-size: 2.4em;
}
h2 {
  font-size: 1.5em;
  font-weight: normal;
  color: #a4a4a4;
}
h3 {
  font-size: 1.2em;
  font-weight: normal;
  color: #666;
}
small, .small {
  font-size: 0.8em;
  color: #606060;
}
/* Hyperlinks horizontale Navigation */
a.theLink {
  font-size: 1.3em;
  text-decoration: none;
}
a.theLink:hover {
  color: #006d6a;
}
a.disabled, a.disabled:hover {
  color: #ccc;
}
blockquote {
  background: transparent url(../images/quote.gif) no-repeat scroll left top;
  border-left: 0 none !important;
  padding-top: .3em;
  padding-left: .7em;
}
/*******************************************************************************
 Listen
------------------------------------------------------------------------------*/
ul {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
}
ul li {
  background: transparent url(../images/list_style_image.gif) no-repeat scroll 0 7px;
  color: #444;
  margin-bottom: 0.2em;
  padding-left: 15px;
}
/*******************************************************************************
 Tooltips
------------------------------------------------------------------------------*/
/*
a.tooltip {
  position: relative;
}
a.tooltip span {
  display: none;
  font-variant: normal;
  font-size: 82%;
  white-space: nowrap;
}
a.tooltip:hover span {
  display: block; 
  position: absolute;
  top: 1em;
  left: 2em;
  padding: 0 0.4em !important;
  border: 1px solid #ccc689;
  background-color: #fff8ab;
  color: #1c1b13;
}
*/
/*******************************************************************************
 Bilder
------------------------------------------------------------------------------*/
.left {
  float: left;
  margin: 0 1em 0 0;
}
.picsLeft {
  float: left;  
  display: inline; 
  width: 420px;
}
.picsRight {
   float: right; 
   display: inline;
   width: 280px;
}
.picsLeft .pic, .picsRight .pic {
  margin-bottom: 9px;
}
.pic a {
  position: absolute;
  background: url(../images/picNum.png) no-repeat;
  width: 44px;
  height: 44px;
  padding: 4px 0 0 11px;
  display: block;
  text-decoration: none;
  font-size: 1.3em;
}
/* Thumbnails */
.thumbnail {
  float: left;
  margin-bottom: 15px;
}
.tnRight {
  margin-right: 15px;
}
/*******************************************************************************
 Termine
------------------------------------------------------------------------------*/
/* Breite readmore / h scrollbar verhindern */
.tabTermine {
  margin-bottom: 2em;
}
.tabTermine p {
  line-height: 100%;
  margin-bottom: 0.5em;
}
.tabTermine th, .tabTermine td, .readmore, .divWithRule {
  padding: 0.4em 1em 1em 0.1em;
}
.tabTermine a, .tabTermine a:hover {
  background-image: none;
  padding-left: 0px;
}
.tabTermine th {
  text-align: left;
  background-color: #a4c392;
  color: white;
  padding: 0.6em 1em 0.9em 0.1em;
  display: none;
}
.tabTermine td, .readmore, .hr, .divWithRule {
  vertical-align: top;
  border-bottom: 2px solid #eee;
  /*background-color: #f2f2f2;
  border-top: 4px solid white;
  padding: 7px 0.3em 1.2em 0.3em;
  color: #777;*/
}
.hr {
  padding-top: 0.5em;
}
.tabTermine .key {
  /*font-weight: bold;
  font-variant: small-caps;*/
}
.tabTermine .year {
  /*background-color: #a4c392;*/
}
.tabTermine .year h2 {
}
.tabTermine .date {
  /*background-color: #f2f2f2;
  width: 235px;*/
}
.tabTermine .year, .tabTermine .date {
  /*padding: 9px 0 13px 0.6em  !important;*/
}
/* Abstand Bilder News */
.divWithRule img {
  padding-top: 6px;
}
/*******************************************************************************
 Workshops
------------------------------------------------------------------------------*/
.readmore {
  color: #aaa;
  cursor: pointer;
  display: block;
  width: 96%;
  line-height: 150%;
}
.readmore.blue, .readmore.blueHover, .readmore.blue h3, .readmore.blueHover h3 {
  color: #1e5f89 !important;
}
.hide {
  display: none;
}
/*******************************************************************************
 Homepage
------------------------------------------------------------------------------*/
#hpLogo {
  position: absolute;
  left: 275px;
  top: 165px;
}
#hpProductions {
  position: absolute;
  left: 200px;
  top: 57px;
}
#hpProjects {
  position: absolute;
  left: 423px;
  top: 87px;
}
#hpNews {
  position: absolute;
  left: 562px;
  top: 186px;
}
#hpCalendar {
  position: absolute;
  left: 484px;
  top: 295px;
}
#hpAbout {
  position: absolute;
  left: 218px;
  top: 314px;
}
#hpContact {
  position: absolute;
  left: 50px;
  top: 255px;
}
#hpLinks {
  position: absolute;
  left: 0;
  top: 153px;
}