body
{
font-family: trebuchet ms, verdana, arial, tahoma;
font-size: 80%; color: #000;
background-color: #FFF;
line-height: 200%;
margin-top: 0px;
background: #ffffff url(images/hinter.jpg) top center  no-repeat;
}

#border
{

        border-left:2px dashed #902048;
         border-right:4px dashed #902048;
          border-top:2px dashed #902048;
           border-bottom:4px dashed #902048;

width: 800px;
background-color: #FFF;
background:url() no-repeat;
margin: 0 auto;
}


 table, td {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #000;
    border: none;
}

table td {
    vertical-align: top;
}







#header
{
height: 180px;
width:800px;
margin-left:-1px;
background-image:url(images/header.jpg);
}

* html #header { margin-left: 0; }






#content
{
padding: 0.5em 1em;
max-width: 820px;
background-color: #FFFFFF;
}

* html #content {height:1%}
* > html #content {height:auto}

#container
{

width: 800px;
margin: 0px auto;
background-color: #ffffff;
border: 0px solid #669900;
}

.splitright {
background: #ffffff url(images/menu.gif) top center no-repeat;
    border-bottom:3px dashed #000;
width: 20%;
float: right;

text-align: center;
}

.splitleft {
  background: #f2ece0 url(images/divbg.gif) repeat-x;
      border-right:1px dashed #000;
width: 72%;
float: left;

text-align: justify;
   padding-left:12px;
    padding-right:12px;
     padding-bottom:12px;

}









 /* rechtes Menue */

#introduction{
        float:right;
        width:168px;
        height: 260px;
         display: block;
      text-decoration: none;
           padding: 2px 2px 2px 2px;
        background: url(images/transpOrange.png);
            margin: 1px;
        line-height:1.5em;
        color:#000CFF;
        font-size:1.0em;
        font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
        letter-spacing:0.1px;
}

#introduction ul, #introduction li {
 height: 20px;
   width: 160px;
text-align:center;
        list-style: none;
        margin: 1px;
       padding: 2px 2px 2px 2px;
}

#introduction a {
       color: #161FD3;
background-Color: #F3D0CC;

    width: 160px;
font-style: bold;
  font-size:1.0em;
   line-height:1.2em;
   font-family: trebuchet ms,Times New Roman, Times, sans-serif;
text-decoration: none;
   padding: 2px 2px 2px 2px;
}


#introduction a:hover, a:active{
   color: #B8311B;
background-color: #fff;
   }




 #introduction h3{
        text-align: center;
        position:static;
}










#portalNaviContainer {
    height: 20px;
    width: auto;
    border-bottom: 1px solid #cc0000;
    padding: 3px 0 3px 0;
}

#mainContentContainer {
    text-align: left;
}

#footerContainer {
    width: auto;
    border-top: 1px solid #cc0000;
    height: 15px;
    padding: 2px;
}

#footerContainer a {
    color: #3b3b3b;
    text-decoration: none;
}

#mainNaviContainer {
    width: 130px;
    float: left;
    padding-top: 33px;
}

#pNaviContainer {
    float: right;
}

#contentContainer {
    border-left: 1px solid #a5a5a5;
    float: right;
    width: 700px;
    padding: 30px 20px 0 25px;
}

.contentSpacer {
    border: none;
    height: 15px;
}



/* ~~~~~~~~~ footer ~~~~~~~~~ */
#footer
{
            width: 761px;
        text-align: center;
        height: 25px;
        background-color: #EFCDB6;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #cc0000;
        margin-top: 50px;
        margin-right: 15px;
        margin-bottom: 0;
     text-align: center;
        padding-top: 0;
        padding-right: 20px;
        padding-bottom: 0;
        padding-left: 20px;
        clear: both;

}


#footer a:link, a:visited{
        color:#301ABD;
}

#footer a:hover, a:active{
        color:#cc0000;
}




a:active,
a:visited,
a:link                                    { color: #301ABD; text-decoration: none; }

a:hover                                        { color: #cc0000; text-decoration: none; }










/* ~~~~~~~~~ PROPS FOR THE MENU GO OUT TO EXPLODING-BOY.COM ~~~~~~~~~ */

    #topmenu {
        position: relative;
        top: 7px;
        left: 10px;
        width: 80%;
        font-size:100%;
          text-align: left;
        margin: 0;
        line-height:normal;
        height: 41px;
      }
    #topmenu ul {
      text-align: center;
          margin:0;
          padding:0px 0px 0 2px;
          list-style:none;
      }
    #topmenu li {
      text-align: center;
      display:inline;
      margin:0;
      padding:0;
      }
    #topmenu a {
      float:left;
      background:url(images/menuleft.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
   






    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #topmenu a span {float:none;}
    /* End IE5-Mac hack */
    #topmenu a:hover span {
      color:#cc0000;
      }
    #topmenu a:hover {
      background-position:0% -42px;
      }
    #topmenu a:hover span {
      background-position:100% -42px;

 }


   #calendarOverlay {
        position: absolute;
        width: 200px;
        z-index: 1000;
}


/* ~~~~~~~~~ Headings ~~~~~~~~~ */
h1
{
font-size: 120%;
color: #BD4C1A;
}

h3{
        color:#5B8FBE;
        font-family:geneva,arial,sans-serif;
        font-weight:normal;
        text-transform:uppercase;
        word-spacing:4px;
        letter-spacing:3px;
        font-size:0.8em;
        font-weight:bold;
        padding:0 2px;
        margin:0;
}

/*~~~~~~~~~~~styles~~~~~~~~~~~~~~~*/

.style4 {font-size: 16px}
.style5 {
        font-size: 12px;
        color: #000;



        .fuss1 {
position: relative;
left: 200px;
top: 30%;
}






/** F O R M S **/

#contentContainer form label {
    display: block;
    float: left;
    width: 30%;
    height: 20px;
    padding: 2px 0 0 0;
}

#contentContainer form br {
    clear: both;
}

.inputText, .inputTextShort, .inputDate {
    background-image: url(images/forms_input_back.png);
    background-repeat: repeat-x;
    padding: 2px 0 3px 4px;
    margin: 0 3px 0 0;
    display: block;
    float: left;
    width: 200px;
    border: 1px solid #c2c2c2;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #737373;
}

.inputTextarea, .inputTextareaLarge {
    background-image: url(images/forms_input_back.png);
    background-repeat: repeat-x;
    padding: 1px 0 0 4px;
    margin: 0 3px 0 0;
    display: block;
    float: left;
    width: 200px;
    height: 90px;
    border: 1px solid #c2c2c2;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #737373;
}

.inputTextareaLarge {
    width: 400px;
    height: 150px;



.inputText:focus, .inputTextShort:focus, .inputTextarea:focus, .inputDropdown:focus, .inputDate:focus {
    color: #000000;
}

.button, .buttonShort {
    background-image: url(images/forms_button_back.png);
    background-repeat: repeat-x;
    background-position: left center;
    padding: 2px 0 3px 15px;
    margin: 8px 0 0 0;
    display: block;
    float: left;
    width: 182px;
    border: 1px solid #c2c2c2;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #737373;
    text-align: left;
    cursor: pointer;
}

.button:hover, .buttonShort:hover, .button:focus, .buttonShort:focus {
    color: #cc0000;
}

/* L I S T S */
.portalList {
    width: 100%;
    padding: 0;
    border: none;
}

.portalListRow1 {
    height: 22px;
    background-color: #f0f0f0;
}

.portalListRow1:hover, .portalListRow1:hover td {
    background-color: #DFDFDF;
    color: #000000;
}

.portalListRow1 td{
    vertical-align: middle;
}

.portalListRow1 .image {
    padding-left: 2px;
    padding-right: 3px;
}

.portalListRow1 .title {
    width: 100%;
    padding-left: 2px;
    padding-right: 5px;
}

.portalListRow1 .center {
    white-space: nowrap;
    padding-right: 5px;
}

.portalListRow1 .actions {
    white-space: nowrap;
    vertical-align: middle;
    text-align: right;
}

.portalListRow2 {
    height: 22px;
}
.portalListRow2 .description {
    vertical-align: middle;
    text-align: left;
    padding-left: 2px;
}

.portalListRow1 .actions img {
    margin-right: 2px;
}

.portalListRow1 .rating, .portalListRow2 .rating {
    white-space: nowrap;
}

/* T O O L T I P */
.kajonaTooltip {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 10px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #00e800;
    padding: 4px;
    max-width: 200px;
    -webkit-box-shadow: 2px 2px 5px -3px #000000;
    -moz-box-shadow: 2px 2px 5px -3px #000000;
    box-shadow: 2px 2px 5px -3px #000000;
}


/* E L E M E N T  P A R A G R A P H */
.element_paragraph_image {
    float: right;
    margin: 0 0px 10px 10px;
}

/* E L E M E N T  I M A G E */
.element_image {
    margin-bottom: 10px;
}

/* E L E M E N T  T A G T O */
.element_tagto {
    font-size: 12px;
}

/* E L E M E N T  L A N G U A G E S W I T C H */
#languageSwitchContainer {
    float: left;
}

#languageSwitchContainer a {
    color: #3b3b3b;
    text-decoration: none;
    text-transform: uppercase;
}

#languageSwitchContainer a:hover {
    text-decoration: underline;
}

/* N E W S */
.newsList {
        margin-bottom: 10px;
}
.newsListHeader {
    background-color: #f0f0f0;
}
.newsListTitle {
    float: left;
    background-image: url(images/news_button_31.gif);
    background-repeat: no-repeat;
    text-indent: 15px;
}
.newsListTitle h2 {
    font-size: 11px;
    font-weight: bold;
    margin: 0px;
}
.newsListMore {
    float: right;
}
.newsListTeaser {
    background-color: #32b059;
}
.newsListTeaser div {
    margin-left: 10px;
    background-color: #ffffff;
    padding-left: 5px;
}
.newsDetail, .newsDetail p {
}
.newsDetail h2 {
    font-weight: bold;
}
.newsTeaser {
    margin-top: 20px;
    font-style: italic;
}
.newsDetail img {
    margin: 5px;
}

/* Template: demo_bloglike.tpl */
.newsListBlog {
    margin-bottom: 8px;
}
.newsListBlog p {
    padding: 0;
    margin: 0;
}

/* S E A R C H */
.searchHighlight {
    background-color: #EDD2A0;
}

/* F A Q S */
.faqCategory {
    padding-bottom: 20px;
}

.faqCategory .faqCategoryTitle {
    font-style: italic;
}

.faqCategory .faqCategoryTitle h3 {
    padding: 0px;
    margin: 0px;
    padding-bottom: 2px;
}

.faqFaq {
    border: 1px solid #f0f0f0;
    margin-bottom: 2px;
}

.faqFaq .faqFaqAnswer {
    margin: 2px;
}

.faqFaq .faqFaqQuestion {
    background-color: #f0f0f0;
}






/* P O S T A C O M M E N T */
#postaCommentForm {

 border-left:2px dashed #902048;
         border-right:4px dashed #902048;
          border-top:2px dashed #902048;
           border-bottom:4px dashed #902048;
        display: inline;
    margin-bottom: 5px;
}

.pacComment {
    border: 1px solid #cccccc;
    margin-bottom: 5px;
}

.pacHeader {
    background-color: #f0f0f0;
}

.pacName {
    float: left;
    padding: 1px 1px 0 1px;
}

.pacDate {
    float: right;
    padding: 1px 1px 0 1px;
}

.pacSubject {
    float: left;
    padding: 0 1px 1px 1px;
}

.pacText {
  float: left ;
    padding: 1px;
}

.pacRating {
    float: right;
    padding: 1px 1px 0 1px;
}

/* G U E S T B O O K */
.guestbook .posts table {
    width: 100%;
    margin-bottom: 10px;
}

/* G A L L E R Y */
.picstrip .currentPic {
        margin: 0 2px 0 2px;
}

.picstrip .currentPic img {
        border: 3px solid #a5a5a5;
}


/* R A T I N G   B A R (http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/) */
.inline-rating-bar {
        display: -moz-inline-block;
        display: -moz-inline-box;
        display: inline-block;

}

.rating-icon,
.rating-icon a:hover,
.rating-icon a:active,
.rating-icon a:focus,
.rating-icon .current-rating{
        background: url(images/rating_icons.png) left -1000px repeat-x;
}
.rating-icon{
        position: relative;
        width: 65px;
        height: 13px;
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 0;
        background-position: left top;
}
.rating-icon li{
        display: inline;
}
.rating-icon a,
.rating-icon .current-rating{
        position: absolute;
        top: 0;
        left: 0;
        text-indent: -1000em;
        height: 13px;
        line-height: 13px;
        outline: none;
        overflow: hidden;
        border: none;
}
.rating-icon a:hover,
.rating-icon a:active,
.rating-icon a:focus{
        background-position: left bottom;
}
.rating-icon a.icon-1{
        width: 20%;
        z-index: 6;
}
.rating-icon a.icon-2{
        width: 40%;
        z-index: 5;
}
.rating-icon a.icon-3{
        width: 60%;
        z-index: 4;
}
.rating-icon a.icon-4{
        width: 80%;
        z-index: 3;
}
.rating-icon a.icon-5{
        width: 100%;
        z-index: 2;
}
.rating-icon .current-rating{
        z-index: 1;
        background-position: left center;
}





















#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 370px; /*Margin for content column. Should be (RightColumnWidth + LeftColumnWidth)*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set left margin to -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column in pixels*/
margin-left: -660px; /*Set right margin to -(MainContainerWidth - LeftColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}