

/******************************************

Copyright Notice: Parts of these notes are

(c) Owen Briggs @ www.thenoodleincident.com

(for the font css file) (c) Big John @

www.positioniseverything.net and (c) Paul

O'Brien @ www.pmob.co.uk, all of whom

contributed significantly to the design of

the css and html code.

All other content is (c) ClevaTreva Designs

******************************************/

/***XXXXXXXXXXXXXXX Primary layout rules XXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX



To change many of the widths/heights requires that other certain values must

also be changed at the same time. For this reason, beside these critical

attributes (or nearby if comment hacks do not allow) are comments with the

calculations as to how to adjust them.



These guidance comments start with /*** and end with ***/



/***

You can delete these if you want, but do not delete MAC Hack comments (see

below).



To change the width of the entire layout, adjust the columns that make up the

total, remembering the borders. Remember, even one small mistake will degrade

or even break the layout, so be very careful!



For spacing within the cols, it's best to apply margins on content elements

inserted into the cols, because padding directly on those col elements will

change their widths, breaking the layout.



Certain hiding hacks have been used extensively in this layout, so here is a

quick explanation of them.



The Safari escape tab hack:

***************************



 (used on wrapper, and the 3 backgrounds for Moz

and Opera).



Puts an escape in front of a valid number in the style name to replace a

letter in that name, e.g. \65 is an e. A tab is then inserted (not a space).

The purpose of this hack is to hide some code from Safari. Unfortunately,

some other browsers (like IE) see it for what it should be (but NOT Safari),

and so we must undo the code for those browsers by other hacks.



The Tan hack:

*************



* html .anyelement {rules read only by IE/Win and IE/Mac}



The MAC hack:

*************



(first the active comment you are reading now must be

closed...) ***/



/* \*/



/* */



/***...Back in comment mode now. Anything between those two comment lines

will be hidden from IE/Mac. Don't use any comments within this hack or it will

close prematurely and IE/Mac will begin reading before it should.



The above two hacks are combined so as to feed rules only to IE/Win.



The Holly Hack:

***************



Proper use of backslash escape characters inside property names used in the

Holly hack can further segregate rules to be read by only IE6 from rules for

IE5.x/Win.



These hiding hacks, along with several other fixes, make possible this formerly

impossible layout. It is highly unlikely that new browsers will have any

problem with these valid hiding hacks, and we will have to wait for Microsoft

to release IE7.



If enabled in the PageMaker, the 100% height in the html and body styles makes

the design full height. It also breaks Moz because you should use min-height,

but that doesn't work! Note

how these 100% heights are hidden from IE Mac with

the MAC Hack, otherwise they break it.



XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXXX ***/

html,body{

  margin:0; /*** Do NOT set anything other than a left margin for the page

as this will break the design ***/

  padding:0;

  border:0;

/* \*/

  height:100%;

/* Last height declaration hidden from Mac IE 5.x */

background-color: transparent;  

	background-image: url(../templates/ikrebs-bg2.jpg);

	background-repeat: repeat;

}

body{

	background-color: transparent;  

	background-image: url(../templates/ikrebs-bg2.jpg);

	background-repeat: repeat;

	color: #ced9fc;

	min-width: 962px; /*** This is needed for moz. Otherwise, the header and footer will

slide off the left side of the page if the screen width is narrower than the design.

Not seen by IE. Left Col + Right Col + Center Col + Both Inner Borders + Both Outer Borders ***/

	text-align: center; /*** IE/Win (not IE/MAC) alignment of page ***/	

}

.clear{

  clear:both;

/*** these next attributes are designed to keep the div

height to 0 pixels high, critical for Safari and Netscape 7 ***/

  height:1px;

  overflow:hidden;

  line-height:1%;

  font-size:0px;

  margin-bottom:-1px;

}

* html .clear{height:auto;margin-bottom:0} /*** stops IE browsers from displaying

the clear div/br in the page, as these are for Moz/Opera and

Safari only. If IE 5.x Win DID display these, the page is too high ***/

#fullheightcontainer{

  top:-10px; /*** Lift the container up by the value of the bottom

margin of the page. Makes the page 100% less xx px high ***/

  margin-left:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/

  margin-right:auto; /*** Mozilla/Opera/Mac IE 5.x alignment of page ***/

  text-align:left; /*** IE Win re-alignment of page if page is centered ***/

  position:relative; /*** Needed for IE, othewise header and footer aren't contained

directly above and below the body ***/

  width:962px; /*** Needed for Moz/Opera to keep page from sliding to left side of

page when it calculates auto margins above. Can't use min-width. Note that putting

width in #fullheightcontainer shows it to IE and causes problems, so IE needs a hack

to remove this width. Left Col + Right Col + Center Col + Both Inner Border + Both Outer Borders ***/

/* \*/

  

/* Last height declaration hidden from Mac IE 5.x */

/*** Needed for Moz to give full height design if page content is

too small to fill the page ***/

}

#wrapper{

	min-height: 100%; /*** moz uses this to make full height design. As this #wrapper

is inside the #fullheightcontainer which is 100% height, moz will not inherit heights

further into the design inside this container, which you should be able to do with

use of the min-height style. Instead, Mozilla ignores the height:100% or

min-height:100% from this point inwards to the center of the design - a nasty bug.

If you change this to height:100% moz won't expand the design if content grows.

Aaaghhh. I pulled my hair out over this for days. ***/

	/* \*/

	height: 100%;

	border-right: 1px solid blue; /*** Sets the external right side border. ***/

	border-left: 1px solid blue; /*** Sets the external left side border. ***/

}

#wrapp\65        r{ /*** for Opera and Moz (and some others will see it, but NOT Safari) ***/

  height:auto; /*** For moz to stop it fixing height to 100% ***/

}

/* \*/

* html #wrapper{

  height:100%;
}

/* Last style with height declaration hidden from Mac IE 5.x */

/*** Fixes height for IE, back to full height,

from esc tab hack moz min-height solution ***/

#outer{
   z-index: 1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/
   position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
   background: #121b1b; /* \*/
   height: 100%;
}

/*** Static fixes ***/



/*** a Note on the Holly hack: if IE/Win shows bugs it's a good idea to apply the height:1%

     hack to different elements and see if that fixes the problem. Sometimes it may be

     necessary to use "position: relative;" on certain elements, but it's hard to tell in

     advance which elements will need such fixes. ***/

/*** This is a STATIC fix for IE5/Win at the largest text size setting. ***/

/*** All the IE fixes that are inside seperate "Mac-hacks" may be grouped within

     just one Mac-hack for convenience if desired. However, each fix must come

     later than the rule it is fixing or the fix itself will be overridden. ***/

/*** clearheader heights are made from header height + borders +

any sidebar box height, less any sidebar intrusion.

Similar calcs for footers. ***/

#container-center{

	padding: 10px;

}

#clearheadercenter{

  height:133px; /*** needed to make room for header in center column ***/

  overflow:hidden;

}

#clearfootercenter{

  height:52px; /*** needed to make room for footer in center column ***/

  overflow:hidden;

}

#footer{

  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/

  position:absolute;

  clear: both;

  width:962px; /*** Set to Left Col + Right Col + Center Col + Both Inner Borders +

Both External Borders ***/

  height:62px; /*** = Bottom Margin + One Outer Border + body to footer divider depth +

subfooter1 height + any other subfooter heights ***/

  overflow:hidden;

  margin-top:-52px; /*** negative height ***/

}

#subfooter1{
	background: #aaaaaa; /*** Background Color of Sub-footer #1 ***/
	text-align: center;
	margin: 0 1px; /*** Margin to show left and right External Borders - all sub-headers and sub-footers ***/
	height: 50px; /*** sub-footer row height ***/
}

.bottomtopmargin{

	background-color: transparent;

	background-image: url(../templates/ikrebs-bg2.jpg);

	background-repeat: repeat;

	width: 962px;

	overflow: hidden; /*** Set to Left Col + Right Col + Center Col + Both Inner Borders +

Both External Borders ***/

}

#header{

  z-index:1; /*** Critical value for Moz/Opera Background Column colors fudge to work ***/

  position:absolute;

  top:0px;
  background-color: transparent;

  width:962px; /*** Set to Left Col (not if left sidebar fully intrudes into header or left sidebar is off)

+ Right Col (not if right sidebar fully intrudes into header or right sidebar is off) + Center Col + Both Inner

Borders (not if any sidebar intrudes into header or footer, or Inner Borders are off) + Both External Borders

(not if external borders are off) ***/

  height:133px; /*** = Top Margin + One Outer Border + header to body divider depth +

subheader1 height + any other subheader heights ***/

  overflow:hidden;



}

.outer_horiz_border, .sb_outer_horiz_border{

	background: blue;

	height: 1px;

	overflow: hidden;

	font-size: 0px;

}

#subheader1{
	background: transparent; /*** Background Color of Sub-header #1 ***/
	background-image: url(../../templates/header-ik.png);
	background-position: left;
	background-repeat: no-repeat;
	color: #0506fc;
	font-size: 20px;
	text-align: right;
	vertical-align: middle;
	margin: 0 0 0 1px; /*** Margin to show left and right External Borders - all sub-headers and sub-footers ***/
	height: 99px; /*** sub-header row height ***/
}
.headertitel{
	font-family: Arial, Helvetica, sans-serif;
	color: #0506fc;
	padding: 42px 5px 0 0;
	font-size: 16px;
	font-weight: bolder;
	text-align: center;
}


#subheader2{

  background:#121b1b; /*** Background Color of Sub-header #2 ***/

  text-align:center;

  margin:0 1px; /*** Margin to show left and right External Borders - all sub-headers and sub-footers ***/

  height:1px; /*** sub-header row height ***/

}

#topmargin{

  height:20px; /*** top margin height ***/

}

#headergap{

	height: 10px; /*** Header Gap (gap between header and body) ***/

	background-color: transparent;  

	background-image: url(../templates/ikrebs-bg2.jpg);

	background-repeat: repeat;

	overflow: hidden;

}

#gfx_bg_middle{

  top:0px;

  position:absolute;

  height:100%;

  overflow:hidden;

  width:960px; /*** = Center Col Width ***/

  margin-left:0; /*** = Left Col Width ***/

  background:#121b1b; /*** Set background color for center column for Mozilla & Opera ***/

}

* html #gfx_bg_middle{

  display:none; /*** Hides the moz fix from IE ***/

}

 /*** The contents of this file were (ostensibly) written by Owen Briggs

@ www.thenoodleincident.com, and any Copyright rests with him. No

credit for the work that has gone into researching the use of font

sizes and styles rests with ClevaTreva Designs. 100% Kudos to Owen.

This is an EDITED version of the original! You will want to play with

these settings to make your own style for fonts and color other

bits. ***/

/*** my einstellungen***/

#container-center{

	padding: 10px;

	color: #121b1b;

	background-color: #f6f6f6

}

.pan_nav{

	text-align: right;

	font-size: 0.9em;

	clear: both;

	padding-top: inherit;

}

.nav-horiz{

	text-align: center;

}

#content{

	overflow: auto;

}

.teaser-temp {
color: #121b1b;

	border-bottom: medium solid #0606fc;

	border-right: thin solid blue;

	border-top: thin solid blue;

	border-left: medium solid #0606fc;

	background-color: #dfecfd;

	padding: 4px 10px 10px 10px;

}

.teaser-temp h3 a, .teaser-temp h3 a:focus, .teaser-temp h3 a:hover, .teaser-temp h3 a:active {
color: white;
	padding: 4px;
	display: block;
	background: transparent url(../templates/teaserh3-farbverlauf.png) repeat-y;
}

.teaserimagecaption {

	padding-top: 10px;

	color: #edf1fc;

}




.content_nav{

	text-align: right;

}

.footer_nav {
	background-color: #aaaaaa;
	text-align: center;
	padding: 6px;
	font-size: 100%;
	margin-left: 1px;
}

    .footer_nav a:link {

text-align: center;

font-size: 100%;

margin-left: 1px;

   }

     .footer_nav a:visited {

    font-size: 100%;

   text-align: center;

}

 .footer_nav a:hover {

     

 font-size: 100%;

    }

   .footer_nav a:active {

    font-size: 100%;

    }

   .footer_copy {
	color: #edf1fc;
	background-color: #aaaaaa;
	text-align: center;
	font-size: 90%;
	margin-left: 1px;
}

 .footer_copy a:link {

   text-align: center;

   margin-left: 1px;

}

 .footer_copy a:visited {

   text-align: center;

   margin-left: 1px;

}

 .footer_copy a:hover {

   text-align: center;

	 margin-left: 1px;

}

 .footer_copy a:active {

   text-align: center;

   margin-left: 1px;



}

.phpwcmsSearchResult {

	margin: 15px 0 15px 0;

}

.phpwcmsSearchResult h3 {

	margin: 10px 0 1px 0;

	font-size: 12px;

	font-weight: bold;

}

.phpwcmsSearchResult p {

	margin: 0;

}

.phpwcmsSearchResult em.highlight, em.highlight {
	background-color: yellow;
	font-style: inherit;
}



/*** my einstellungen_ende***/

body {

        font-family: verdana, arial, helvetica, sans-serif;

        font-size:100.1%; /*** Don't change this setting. Make all other

font-sizes in % (preferred) or ems ***/

        color:#d9c0ff;

		  background: transparent;

		  background-image: url(../../templates/ikrebs-bg2.jpg);

		  background-position: center;

        }

a, a:link, a:visited, a:active, a:focus  {
	text-decoration: none;
	font-weight: bold;
	outline: none;
	color: white;
}

a:visited {

        }

a:active {

        }

a:hover {

        text-decoration: underline;

        }

strong, b {

        font-weight: bold;

        }

hr {

	margin: 0; /* fixes xhtml N6 bug where the hr sits to the left*/

	color: #4682b4; /* for ie */

	background-color: transparent; /* for everyone else */

	height: 1px;

	font-size: 0px;

}

p {

        font-size: 100%;

        line-height: 1.1em;

        margin-top: 0em;

        margin-bottom: 0em;

        }

td {

        font-size: 100%;

        }

hr {

        margin-top: 1.0em;

        margin-bottom: 1.0em;

        }

img {

	border: 0;

	padding: 0 10px 0 0;

}


.imgDIVinTextLeft {
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
	padding: 0;
}
.imgDIVinTextRight {
	float: right;
	margin-top: 16px;
	margin-left: 5px;
	margin-bottom: 5px;
	padding: 0;
} 
.imgDIVtopLeft { 
	margin:8px 10px 5px 20px; 
	padding:0px; 
	border:0; 
} 
.imgDIVtopCenter { 
	margin:8px -50% 5px -50%; 
	padding:0px; 
	border:0; 
}

.imgDIVblockImgLeft { 
	margin-right: 10px;
}
.imgDIVblockImgRight {
	margin-left: 10px; 
} 

.phpwcmsImgListRight {
	text-align: right;
	margin: 0;
	padding: 0;
}
.phpwcmsImgListLeft {
	text-align: right;
	margin: 0;
	padding: 0;
}

.teaser-temp a {
	color: navy;
}

.pan_nav a{
	color: navy;
}
.phpwcmsSearchResult a {
	color: navy;
}
.content a, #container-center a {
	color: navy;
}
.teaser-temp h3 a {
	color: white;
}