/***************************************************
 ***************************************************
 **  INSTITUTE CHI WORLDS _ CSS FOR SCREEN OUTPUT **
 ***************************************************
 ***************************************************/

/*****************************
 * general document settings *
 *****************************/

* {
    margin: 0;
    padding: 0;
}

body {
    background: url(../images/body-bg.png);
    font-family: Verdana;
    font-size: 0.75em;
    color: #000000;
}

/*******************
 * general classes *
 *******************/

div.clearAll {
    clear: both;
    height: 0px;
    font-size: 0px;
}

div.clearRight {
    clear: right;
    height: 0px;
    font-size: 0px;
}

div.clearLeft {
    clear: left;
    height: 0px;
    font-size: 0px;
}

/***********************************
 * the following wraps all content *
 ***********************************/

div#wrapper {
    margin: 10px auto 5px auto;
}

/*******************
 *    mainpage     *
 *******************/

div.mainpage {
    width: 678px;
    background: url(../../portal/images/shine-top.png) center top no-repeat;
    padding-top: 9px;
    margin-top: 20px !important;
}

div.mainpage div#mainpageInner {
    background: url(../../portal/images/shine-lr.png) center repeat-y;
    padding: 10px 9px 0px 8px;
}

div.mainpage div#mainpageContent {
    background: url(../../portal/images/header.png) center top no-repeat;
    height: 490px;
    position: relative;
}

div.mainpage div#mainpageContent h1,
div.mainpage div#mainpageContent h2,
div.mainpage div#mainpageContent h3 {
    display: none;
}

div.mainpage div#mainpageContent ul#mainpageNavigation {
    padding-top: 170px;
    list-style-type: none;
    margin-left: 54px;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li {
    width: 174px;
    height: 174px;
    overflow: hidden;
    float: left;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li a {
    width: 174px;
    height: 174px;
    display: block;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li a span {
    position: absolute;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li#shiatsu {

}

div.mainpage div#mainpageContent ul#mainpageNavigation li#taiji,
div.mainpage div#mainpageContent ul#mainpageNavigation li#qigong {
    margin-left: 15px;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li#shiatsu a {
    background: url(../../portal/images/shiatsu.png) center no-repeat;
    color: #208AD6;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li#shiatsu a span {
    right: 95px;
    bottom: 5px;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li#taiji a {
    background: url(../../portal/images/taiji.png) center no-repeat;
    color: #427A13;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li#taiji a span {
    right: 95px;
    top: 4px;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li#qigong a {
    background: url(../../portal/images/qigong.png) center no-repeat;
    color: #F59200;
}

div.mainpage div#mainpageContent ul#mainpageNavigation li#qigong a span {
    left: 95px;
    bottom: 5px;
}

div.mainpage div#mainpageServices {
    color: #666666;
    text-align: center;
    font-size: 11px;
    padding-top: 18px;
}

div.mainpage div#mainpageBottom {
    background-color: #E0DFDF;
    height: 25px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 661px;
}

div.mainpage div#mainpageBottom a#aboutus {
    color: #666666;
    font-size: 1.3em;
    font-weight: 500;
    text-decoration: none;
    position: absolute;
    right: 20px;
    bottom: 18px;
}

div.mainpage div#mainpageBottom a#imprint {
    color: #FFFFFF;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    left: 55px;
    bottom: 4px;
}

div.mainpage div#mainpageBottomShine {
    background: url(../../portal/images/shine-bottom.png) center top no-repeat;
    height: 9px;
    overflow: hidden;
}

/*******************
 * content general *
 *******************/

div.content {
    width: 1000px;
    background-color: #DFDFDF;
    padding-bottom: 5px;
    position: relative;
}

div.content div#header {
    background: url(../images/header.png) center top no-repeat;
    height: 90px;
    overflow: hidden;
    position: relative;
}

div.content div#header h1,
div.content div#header h2 {
    display: none;
}

div.content div#header a#clickableHead {
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    width: 155px;
    height: 75px;
}

/*******************
 *   navigation    *
 *******************/

div.content div#header ul#navigation {
    list-style-type: none;
    height: 30px;
    position: absolute;
    left: 22px;
    top: 60px;
    width: 978px;
    background: transparent url(../images/navi-base.png) left top no-repeat;
}

div.content div#header ul#navigation li {
    height: 30px;
    float: left;
    position: relative;
    overflow: hidden;
    text-align: center;
}

div.content div#header ul#navigation li a {
    font-size: 1.1em;
    text-decoration: none;
    font-weight: bold;
}

div.content div#header ul#navigation li.active {
    background-position: left top;
    background-repeat: no-repeat;
}

div.content div#header ul#navigation li.active a {
    font-weight: bold;
}

/* navitem news */

div.content div#header ul#navigation li#news {
    left: 138px;
    width: 147px;
}

div.content div#header ul#navigation li#news a {
    color: #FFFFFF;
    font-weight: normal;
}

div.content div#header ul#navigation li#news.active {
    background-image: url(../images/navi-newsdates-active.png);
}

div.content div#header ul#navigation li#news a:hover,
div.content div#header ul#navigation li#news.active a {
    color: #3E3D3D;
    font-weight: normal;
}

/* navitem shiatsu */

div.content div#header ul#navigation li#shiatsu {
    left: 139px;
    width: 94px;
}

div.content div#header ul#navigation li#shiatsu a {
    color: #FFFFFF;
    font-weight: bold;
}

div.content div#header ul#navigation li#shiatsu.active {
    background-image: url(../images/navi-shiatsu-active.png);
}

div.content div#header ul#navigation li#shiatsu a:hover,
div.content div#header ul#navigation li#shiatsu.active a {
    color: #1533B0;
    font-weight: bold;
}

/* navitem taiji */

div.content div#header ul#navigation li#taiji {
    left: 140px;
    width: 76px;
}

div.content div#header ul#navigation li#taiji a {
    color: #FFFFFF;
    font-weight: bold;
}

div.content div#header ul#navigation li#taiji.active {
    background-image: url(../images/navi-taiji-active.png);
}

div.content div#header ul#navigation li#taiji a:hover,
div.content div#header ul#navigation li#taiji.active a {
    color: #387107;
    font-weight: bold;
}

/* navitem qigong */

div.content div#header ul#navigation li#qigong {
    left: 141px;
    width: 89px;
}

div.content div#header ul#navigation li#qigong a {
    color: #FFFFFF;
    font-weight: bold;
}

div.content div#header ul#navigation li#qigong.active {
    background-image: url(../images/navi-qigong-active.png);
}

div.content div#header ul#navigation li#qigong a:hover,
div.content div#header ul#navigation li#qigong.active a {
    color: #A75B07;
    font-weight: bold;
}

/* navitem vortraege */

div.content div#header ul#navigation li#vortraege {
    left: 142px;
    width: 106px;
}

div.content div#header ul#navigation li#vortraege a {
    color: #FFFFFF;
    font-weight: normal;
}

div.content div#header ul#navigation li#vortraege.active {
    background-image: url(../images/navi-vortraege-active.png);
}

div.content div#header ul#navigation li#vortraege a:hover,
div.content div#header ul#navigation li#vortraege.active a {
    color: #3E3D3D;
    font-weight: normal;
}

/* navitem imprint */

div.content div#header ul#navigation li#imprint {
    left: 143px;
    width: 206px;
}

div.content div#header ul#navigation li#imprint a {
    color: #FFFFFF;
    font-weight: normal;
}

div.content div#header ul#navigation li#imprint.active {
    background-image: url(../images/navi-imprint-active.png);
}

div.content div#header ul#navigation li#imprint a:hover,
div.content div#header ul#navigation li#imprint.active a {
    color: #3E3D3D;
    font-weight: normal;
}

/* navitem aboutus */

div.content div#header ul#navigation li#aboutus {
    left: 144px;
    width: 115px;
}

div.content div#header ul#navigation li#aboutus a {
    color: #FFFFFF;
    font-weight: normal;
}

div.content div#header ul#navigation li#aboutus.active {
    background-image: url(../images/navi-aboutus-active.png);
}

div.content div#header ul#navigation li#aboutus a:hover,
div.content div#header ul#navigation li#aboutus.active a {
    color: #3E3D3D;
    font-weight: normal;
}

/*******************
 *   subheader     *
 *******************/

div.content div#subheader {
    background-position: left top;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    height: 136px;
    overflow: hidden;
}

/*******************
 *  main wrapper   *
 *******************/

div.content div#mainWrapper {
    margin-top: 10px;
    padding-bottom: 0px;
    background-position: left;
    background-repeat: repeat-y;
}

* html div#mainWrapper {
    height: 1%;
}

div.content div.news {
    background-image: url(../images/content-bg-imprint.png);
}

div.content div.shiatsu {
    background-image: url(../images/content-bg-shiatsu.png);
}

div.content div.taiji {
    background-image: url(../images/content-bg-taiji.png);
}

div.content div.qigong {
    background-image: url(../images/content-bg-qigong.png);
}

div.content div.vortraege {
    background-image: url(../images/news-detail-content-bg-presentation.png);
}

div.content div.imprint {
    background-image: url(../images/content-bg-imprint.png);
}

div.content div.aboutus {
    background-image: url(../images/content-bg-imprint.png);
}

div.content div.shiatsudates {
    background-image: url(../images/news-detail-content-bg-shiatsu.png);
}

div.content div.taijidates {
    background-image: url(../images/news-detail-content-bg-taiji.png);
}

div.content div.qigongdates {
    background-image: url(../images/news-detail-content-bg-qigong.png);
}

div.content div.presentationdates {
    background-image: url(../images/news-detail-content-bg-presentation.png);
}

/*******************
 *  subnavigation  *
 *******************/

div.content div#mainWrapper div#subnavigation {
    width: 193px;
    float: left;
    overflow: hidden;
    position: relative;
}

div.content div#mainWrapper div#subnavigation ul {
    list-style-type: none;
    margin-top: 30px;
    margin-bottom: 55px;
}

div.content div#mainWrapper div#subnavigation ul li {
    margin: 0px 0px 15px 33px;
    overflow: hidden;
    position: relative;
}

* html div.content div#mainWrapper div#subnavigation ul li {
    margin-bottom: 3px;
    line-height: 12px;
}

div.content div#mainWrapper div#subnavigation ul li a {
    color: #646464;
    text-decoration: none;
    font-weight: bold;
    font-size: 10px;
    display: block;
    background-color: #EAEAEA;
    border: 1px solid #646464;
    overflow: hidden;
    position: relative;
    margin-right: 7px;
}

div.content div#mainWrapper div#subnavigation ul li.active a {
    background: url(../images/subnavi-active.png) right center no-repeat;
    margin-right: 0px;
    padding-right: 7px;
}

div.content div#mainWrapper div#subnavigation ul li.active a,
div.content div#mainWrapper div#subnavigation ul li a:hover,
div.content div#mainWrapper div#subnavigation ul li a:active {
    color: #FFFFFF;
    background-color: #646464;
    border: 1px solid #EAEAEA;
}

div.content div#mainWrapper div#subnavigation ul li.active a {
    border-right: 0px;
}

div.content div#mainWrapper div#subnavigation ul li a span {
    padding: 1px 4px;
    display: block;
}

div.content div#mainWrapper div#subnavigation ul li a.arrow span {
    padding: 1px 4px 1px 16px;
    background: url(../images/subnavi-arrow.png) 4px 5px no-repeat;
}

div.content div#mainWrapper div#subnavigation ul li.active a.arrow span,
div.content div#mainWrapper div#subnavigation ul li a.arrow:hover span,
div.content div#mainWrapper div#subnavigation ul li a.arrow:active span {
    background-image: url(../images/subnavi-arrow-oa.png);
}

/*******************
 *  inner content  *
 *******************/

div.content div#mainWrapper div#content {
    padding: 25px 60px 0px 255px;
    color: #000000;                             /** Textfarbe p (zur Sicherheit) **/
}

div.content div#mainWrapper div#content h3 {
    font-size: 1.4em;
    color: #FFFFFF;                             /** Textfarbe h3 (Standard) **/
    margin-bottom: 20px;                        /** Absatz h3 **/
    font-weight: normal;
}

div.content div#mainWrapper div#content h4 {
    font-weight: bold;
    font-size: 1em;
    color: #FFFFFF;
    margin-bottom: 7px;
}

div.content div#mainWrapper.imprint div#content h3,
div.content div#mainWrapper.vortraege div#content h3,
div.content div#mainWrapper.aboutus div#content h3,
div.content div#mainWrapper.news div#content h3,
div.content div#mainWrapper.imprint div#content h4,
div.content div#mainWrapper.vortraege div#content h4,
div.content div#mainWrapper.aboutus div#content h4,
div.content div#mainWrapper.news div#content h4 {
    color: #000000;                             /** Textfarbe h3 (Impressum, Vortraege, Über uns, News) **/
}

div.content div#mainWrapper div#content h3.index {
    text-align: center;
}

div.content div#mainWrapper div#content p {
    font-weight: bold;
    margin-bottom: 1em;                         /** Absatz p **/
    color: #000000;                             /** Textfarbe p **/
}

div.content div#mainWrapper div#content ul li {
    margin-left: 20px;
    margin-bottom: 0px;
    font-weight: bold;
}

div.content div#mainWrapper div#content a:link,
div.content div#mainWrapper div#content a:visited {
    color: #FFFFFF;
    text-decoration: underline;
}

div.content div#mainWrapper div#content a:hover,
div.content div#mainWrapper div#content a:active {
    color: #FFFFFF;
    text-decoration: none;
}

div.content div#mainWrapper.imprint div#content a,
div.content div#mainWrapper.aboutus div#content a,
div.content div#mainWrapper.news div#content a {
    color: #999999;
}

div.content div#mainWrapper div#content img {
    border: 0px;
}

div.content div#mainWrapper div#content img.imageLeft {
    float: left;
    margin: 0px 0px 0px 0px;                             /** Bilder Umrandungen oben-rechts-unten-links **/
    position: relative;
}

div.content div#mainWrapper div#content img.imageRight {
    float: right;
    margin: 0px 0px 0px 0px;
    position: relative;
}

div.content div#mainWrapper div#content div.imageIndex {
    margin: 40px auto;
    text-align: center;
}

/** news overview **/

div.content div#mainWrapper div#content div#newsOverview {
    margin: -23px -40px 0px -60px;
    padding-bottom: 2px;
    overflow: hidden;
}

div.content div#mainWrapper div#content div#newsOverview div#newsOverviewTop {
    background: url(../images/news-overview-top-bg.png) left repeat-y;
    margin-bottom: 8px;
}

div.content div#mainWrapper div#content div#newsOverview div#newsOverviewTop div#commonNews {

}

div.content div#mainWrapper div#content div#newsOverview div#newsOverviewTop div#shiatsuNews {
    background: url(../images/news-overview-shiatsu-bg.png) left top no-repeat;
}

div.content div#mainWrapper div#content div#newsOverview div#newsOverviewBottom {
    background: url(../images/news-overview-bottom-bg.png) left repeat-y;
}

div.content div#mainWrapper div#content div#newsOverview div#newsOverviewBottom div#taijiNews {
    background: url(../images/news-overview-taiji-bg.png) left top no-repeat;
}

div.content div#mainWrapper div#content div#newsOverview div#newsOverviewBottom div#qigongNews {
    background: url(../images/news-overview-qigong-bg.png) left top no-repeat;
}

div.content div#mainWrapper div#content div#newsOverview div.newsWorldLeft {
    width: 387px;
    float: left;
}

div.content div#mainWrapper div#content div#newsOverview div.newsWorldRight {
    width: 387px;
    float: right;
}

div.content div#mainWrapper div#content div#newsOverview div.newsContent {
    margin: 20px 15px 3px 22px;
}

div.content div#mainWrapper div#content div#newsOverview div.newsContent h3 {
    font-size: 14px;
    font-weight: bold;
}

div.content div#mainWrapper div#content div#newsOverview div.newsContent p {
    font-size: 10px;
    font-weight: bold;
}

/** news detail **/

div.content div#mainWrapper div#content div.newsDetail {
    margin: -25px -60px 0px -62px;
    overflow: hidden;
}

div.content div#mainWrapper div#content div.newsDetailContent {
    padding: 90px 60px 0px 60px;
}

div.content div#mainWrapper div#content div.newsDetailShiatsu {
    background: url(../images/news-detail-shiatsu.png) left top no-repeat;
}

div.content div#mainWrapper div#content div.newsDetailTaiji {
    background: url(../images/news-detail-taiji.png) left top no-repeat;
}

div.content div#mainWrapper div#content div.newsDetailQigong {
    background: url(../images/news-detail-qigong.png) left top no-repeat;
}

div.content div#mainWrapper div#content div.newsDetailPresentation {
    background: url(../images/news-detail-presentation.png) left top no-repeat;
}

/** NEWS HACKS FOR INTERNET EXPLORER **/

div.content div#mainWrapper.news div#content {
    padding: 2px 20px 0px 195px;
    /*position: relative;*/
}

div.content div#mainWrapper.shiatsudates div#content {
    padding: 0px 0px 0px 193px;
}

div.content div#mainWrapper div#content div#newsOverview {
    margin: 0px;
    overflow: hidden;
}

div.content div#mainWrapper div#content div#newsOverview div#newsOverviewTop,
div.content div#mainWrapper div#content div#newsOverview div#newsOverviewBottom,
div.content div#mainWrapper div#content div#newsOverview div.newsWorldLeft,
div.content div#mainWrapper div#content div#newsOverview div.newsWorldRight {
    overflow: hidden;
}

* html div.content div#mainWrapper div#content div#newsOverview div#newsOverviewTop,
* html div.content div#mainWrapper div#content div#newsOverview div#newsOverviewBottom {
    overflow: visible;
    height: 1px;
}

div.content div#mainWrapper div#content div.newsDetail {
    margin: 0px;
    overflow: hidden;
}

/** END OF NEWS HACKS **/

/** taiji principles **/

div.content div#mainWrapper.taijiprinciples div#content {
    padding: 0px 2px 0px 194px;
}

div.content div#mainWrapper div#content div#taijiPrinciples {
    /*margin: -25px -25px 0px -62px;*/
    background: url(../images/taiji_prinzipien_bambus.png) left top no-repeat;
    overflow: hidden;
    height: 513px;
}

div.content div#mainWrapper div#content div#taijiPrinciplesContent {
    padding: 25px 0px 0px 120px;
}

div.content div#mainWrapper div#content div#taijiPrinciplesContent h4 {
    padding-left: 20px;
}

div.content div#mainWrapper div#content div#taijiPrinciplesContent a:link,
div.content div#mainWrapper div#content div#taijiPrinciplesContent a:visited {
    color: #000000;
    text-decoration: none;
}

div.content div#mainWrapper div#content div#taijiPrinciplesContent a:hover,
div.content div#mainWrapper div#content div#taijiPrinciplesContent a:active {
    color: #000000;
    text-decoration: underline;
}

div.content div#mainWrapper div#content div#taijiPrinciplesContent h3 a.h3link {
    color: #FFFFFF;                             /** Textfarbe h3 (Link Prinzipien Taijiquan) **/
    text-decoration: none;
}

div.content div#mainWrapper div#content div#taijiPrinciplesContent ul li {
    margin-bottom: 7px;
}

div.content div#mainWrapper div#content div#taijiPrinciplesContent div#taijiPrinciplesDefinitionContainer {
    float: right;
    width: 326px;
    height: 415px;
    overflow: auto;
}

div.content div#mainWrapper div#content div#taijiPrinciplesContent div#taijiPrinciplesDefinition {
    width: 306px;
    height: 397px;
}

/** taiji masters **/

div.content div#mainWrapper div#content div#taijiMasters {
    margin: 0px -61px 0px -61px;
    overflow: hidden;
}

* html div.content div#mainWrapper div#content div#taijiMasters {
    margin: 0px -60px 0px -61px;
}

div.content div#mainWrapper div#content div#taijiMasters div.taijiMastersGeneration {
    padding: 3px;
}

div.content div#mainWrapper div#content div#taijiMasters div.taijiMastersGeneration div {
    float: left;
    font-size: 10px;
    font-weight: bold;
    color: #000000;
}

div.content div#mainWrapper div#content div#taijiMasters div.taijiMastersGeneration div span.white {
    color: #FFFFFF;
}

div.content div#mainWrapper div#content div#taijiMasters div.taijiMastersGeneration div span.green {
    color: #344923;
}

div.content div#mainWrapper div#content div#taijiMasters div.taijiMastersGeneration div.clearAll {
    float: none;
    font-size: 0px;
    clear: none;
}

div.content div#mainWrapper div#content div#taijiMasters div.taijiMastersGeneration div.generationGlowName {
    float: right;
    width: 160px;
}

div.content div#mainWrapper div#content div#taijiMasters div.taijiMastersGeneration div.taiiMasterPic {
    width: 85px;
    text-align: center;
}



/** contact form **/

* html div.content div#mainWrapper div#content div#contactForm {
    height: 300px;
}

div.content div#mainWrapper div#content div#contactForm div#contactFormInfo {
    color: #FF0000;
    font-weight: bold;
    margin-bottom: 10px;
}

div.content div#mainWrapper div#content div#contactForm div.contactFormLeft {
    width: 360px;
    float: left;
}

div.content div#mainWrapper div#content div#contactForm div.contactFormLeftSubmit {
    width: 420px;
    float: left;
    color: #646464;
    font-weight: bold;
    margin-bottom: 20px;
}

div.content div#mainWrapper div#content div#contactForm div.contactFormRight {
    width: 300px;
    float: left;
}

div.content div#mainWrapper div#content div#contactForm div.contactFormRightReset {
    text-align: right;
    width: 230px;
    margin-bottom: 20px;
}

div.content div#mainWrapper div#content div#contactForm div#contactFormRightHint {
    font-weight: bold;
    margin-bottom: 10px;
}

div.content div#mainWrapper div#content div#contactForm label {
    display: block;
    width: 110px;
    margin: 0px 10px 10px 0px;
    float: left;
    font-weight: bold;
    line-height: 20px;
}

div.content div#mainWrapper div#content div#contactForm input.text {
    width: 170px;
    margin: 0px 0px 10px 0px;
    float: left;
    color: #646464;
}

div.content div#mainWrapper div#content div#contactForm select {
    width: 190px;
    margin: 0px 0px 10px 0px;
    float: left;
    color: #646464;
}

div.content div#mainWrapper div#content div#contactForm textarea {
    width: 230px;
    height: 100px;
    margin: 0px 0px 10px 0px;
    float: left;
    color: #646464;
}

div.content div#mainWrapper div#content div#contactForm input.text,
div.content div#mainWrapper div#content div#contactForm select,
div.content div#mainWrapper div#content div#contactForm textarea {
    background-color: #EAEAEA;
    border: 1px solid #646464;
}

div.content div#mainWrapper div#content div#contactForm div.contactFormLeftSubmit input,
div.content div#mainWrapper div#content div#contactForm div.contactFormRightReset input {
    font-weight: bold;
    width: auto;
    overflow: visible;
}

div.content div#mainWrapper div#content div#contactForm div.contactFormLeftSubmit input {
    margin-left: 120px;
}

/** two-column for aboutus **/

div.content div.twoColumnFirstColumn {
    width: 47%;
    float: left;
    padding-right: 15px;
    position: relative;
}

div.content div.twoColumnSecondColumn {
    width: 47%;
    float: left;
    padding-left: 15px;
    position: relative;
}

/*******************
 *     footer      *
 *******************/

div.content div#stqLogo {
    width: 170px;
    height: 55px;
    overflow: hidden;
    position: absolute;
    left: 0px;
    bottom: 0px;
    background: url(../images/stq-logo.png) left top no-repeat;
}

div.content div#stqLogo a {
    display: block;
    width: 170px;
    height: 55px;
}

div#imprintSubFooter {
    width: 1000px;
    margin: 0px auto 10px auto;
    text-align: right;
}

div#imprintSubFooter a {
    color: #FFFFFF;
    text-decoration: none;

}