/*
    CSS framework for the CSM homepage

    This CSS can't live alone. Include stiles in the following sequence:
        - main.css              --> define the style framework
        - <colordefXXX.css>     --> select colors
        - <index.css>           --> define styles for a specific page (you might use a <style> section
									in the page header as well, but only if there are only a few styles
									to (re-) define
*/

/* --- body is the mother of all elements, so we set all global styles here --- */

body, table {
    font-family: Arial,Sans-Serif,Helvetica;
    font-size: 9pt;
	color: black;
}

body {
    margin-top: 2px;
	text-align: center;			/* IE needs this to do the right thing with #frame auto-margins */
}


/* ------------------------------------------------------------------------- */
/* --- We need some DIVs to set the locations for banner, content and misc. area  */
/* Since these DIVs exist exactly once per page, we use IDs instead of classes */

div {	text-align: left; }

#frame {				/* this one is the container for #logo, #content and #misc */
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	width: 1026px;
	text-align: left;			/* inherits to all embedded DIVs */
}


#logo {					/* left column */
	float:left;
	width: 85px;
    height: 900px;
	margin: 0;
	padding:0;
    background: rgb(46, 49, 146);
}


#abstand {					/* left column */
	float:left;
	width: 85px;
    height: 900px;
	margin: 0;
	padding:0;
    background: rgb(255, 255, 255);
}




#content {				/* this is 'it': content goes here */
	float: left;
    width: 752px;
	margin:  0 12px 0 12px;
	padding: 0  0   0  0;
}

#misc {					/* right column for some navigation/info-items */
	float:left;
    width: 150px;
	margin: 0;
	padding:0;
}



  #footer
            {
                float: left;
                width: 62em;
                margin-left: 0em;
                border-top: 0.05em solid #C4CFD9; 
                list-style: none;
            }
            
 #footer li
                {
                    float: left;
                    margin: 0.4em 7em 2em 0;
                    line-height: 1.1em;
                }
                
               
    #footer li
        {
         line-height: 1.25em;
         
     }
   #footer li a                    
        {
                        
                        text-decoration: none;
                         color: #010101;
                        
                    }


/* ------------------------------------------------------------------------- */
/* --- The page heading with logo etc. */

img {
	border: 0;
}

img#tri-only {					/* this is the yellow triangle in the #logo DIV. It's highlander element (only one!) */
	position: relative;
	top: 70px;
}

img#csmlab {					/* this is the graph with "CSM GmbH xxxx" in th top of #content DIV */
	margin: 16px 0 20px 0;
}

div#topbar {					/* this is the box with some CSM devices on the main page */
	margin: 0 0 16px 0;
	padding: 0;
	height: 67px;
	/* background-image: url("../images/bar2.jpg"); */     /* t.b.d. in local style definition */
	background-position: left center;
	background-repeat: no-repeat;
    text-align: center;
    /* vertical-align: middle; 	this does not work */
    font-weight: bold;
    font-size: 14pt;
}

div#csmlogo {					/* this is the CSM logo in the right #misc DIV.  It's highlander element (only one!) */
	height: 90px;
	width: 150px;
	background-image: url("../images/csmlogo.gif");
	background-position: center 10px;
	background-repeat: no-repeat;
}


/* ------------------------------------------------------------------------- */
/* --- DIVs for special purposes --- */

div.boxhl {						/* the headline for a box */
    margin: 0;
    padding: 0pt;
    color: white;
    font-weight: bold;
    Font-Size: 12px;
    text-align: center;
	/* colordefXX.css should define either background-color or background-image */
	background-position: center;
	background-repeat: repeat;
}


div.box {						/* the box itself */
    border: 1px solid;
    padding: 4px;
    margin-bottom: 1em;
    height: auto;
    width: auto;
}

div.boxcl {						/*  */
    border: 1px solid;
    padding: 4px;
    margin-bottom: 1px;
    height: auto;
    width: auto;
}

div.boxcp {						/*  */
    border: 1px solid;
    padding: 4px;
    margin-bottom: 0;
    height: auto;
    width: auto;
}

div.boxcx {						/* Search-Box */
    border: 1px solid;
    padding: 4px;
    padding-top:14px;
    margin-bottom: 1px;
    height: 3em;
    width: auto;
}




/* --- these only preserve space. Put a 1x1px-image inside, otherwise some browsers will ignore it --- */
div.vspace8     { height: 8px;  }
div.vspace16    { height: 16px; }
div.vspace32    { height: 32px; }



/* ------------------------------------------------------------------------- */
/* --- Simple formats --- */

p {
    margin:  0px 0px 8px 0px;
	padding: 0px 4px 0px 4px;
}


address {						/* this is used for the (C) notice at the end of the pages */
	color: lightgray;
	font-size: 8pt;
}


img.misc {						/* This can be used to indent pictures in the #misc DIV */
	position: relative;
	left: 16px;
	border: 0;
}


ul {
	margin: 4px 0 4px 0;
    padding: 0 0 0 2em;				/* this preserves space from the border */
       
}


/* --- Link-Lists */

    /* this one uses a special bullet image */
ul.angle {
    margin:  0 0 0 16px;			/* this makes room for the image ...*/
    padding: 0 0 0 4px;				/* this preserves space from the border */
    list-style-image:url("../images/triangle_small.gif");
}

ul.angle2 {
    margin:  0 0 0 16px;			/* this makes room for the image ...*/
    padding: 0 0 0 4px;				/* this preserves space from the border */
    list-style-image:url("../images/triangle_small_blue.gif");
}

ul.angle3 {
    margin:  0 0 0 16px;			/* this makes room for the image ...*/
    padding: 0 0 0 4px;				/* this preserves space from the border */
    list-style-image:url("../images/triangle_small_red.gif");
}

ul.angle4 {
    margin:  0 0 0 16px;			/* this makes room for the image ...*/
    padding: 0 0 0 4px;				/* this preserves space from the border */
    list-style-image:url("../images/triangle_small_green.gif");
}


ul.list {
    margin:  0 0 0 16px;			/* this makes room for the image ...*/
    padding: 0 0 0 8px;				/* this preserves space from the border */
    list-style-image:url("../images/triangle_small_blank.gif");
}



li {
    margin: 0 0 4px 0;    
}

/* ------------------------------------------------------------------------- */

table	{
	border: 0;
	text-align: left;
	vertical-align: center;
}

td {
	padding: 0 8px 0 0px;
}

/* ------------------------------------------------------------------------- */
/* --- Fixed sizes and margins for the headings */

h1		{ font-size: 120%; padding: 0px 4px 0px 4px; margin:18pt 0em 8pt 0em; }
h2		{ font-size: 110%; padding: 0px 4px 0px 4px; margin: 9pt 0em 4pt 0em; }
h3		{ font-size: 100%; padding: 0px 4px 0px 4px; margin: 4pt 0em 2pt 0em; font-weight: bold; }
h4		{ font-size: 100%; padding: 0px 4px 0px 4px; margin: 2pt 0em 2pt 0em; font-style: italic; }
h5		{ font-size: 100%; padding: 0px 4px 0px 4px; margin: 2pt 0em 2pt 0em; font-style: italic; }




/* ------------------------------------------------------------------------- */
/* --- Anchors */

/* Standard */
a					{ text-decoration:underline; }
a:link 				{  }
a:visited 			{  }
a:active 			{  }
a:hover 			{ font-weight: bold;  }
a:focus 			{ font-weight: bold;  }

/* special navigation areas */
a.nav				{ color: black; text-decoration:none; }
a.nav:link 			{ color: black;  }
a.nav:visited 		{ color: black;  }
a.nav:active 		{ color: black;  }
a.nav:hover 		{ color: black; font-weight: normal; border-bottom: 1px solid; }
a.nav:focus 		{ color: black; font-weight: normal; border-bottom: 1px solid; }


/* ------------------------------------------------------------------------- */
/* --- the horizontal navigation bars within pages */

div.navbar	{							/* the bar itself which may include .. */
	margin-bottom: 16px;
}

div.navl {								/* Navigation items */
	float: left;
	background-image: url("../images/triangle_small.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding: 0px 0px 1px 12px;			/* leave 12px room for the triangle on the left */
	margin:  0px 8px 0px 6px;
	width: 18em;
}


div.nav2 {								/* Navigation items version 2 */
	float: left;
	background-image: url("../images/triangle_small.gif");
	background-repeat: no-repeat;
	background-position: left center;
	padding: 0px 0px 1px 12px;			/* leave 12px room for the triangle on the left */
	margin:  0px 8px 0px 6px;
	width: 25em;
}



/* ------------------------------------------------------------------------- */
/* --- Product boxes. */
/* Image should float left with text at its  right side --- */
/* sounds simple, but ...  */

/* for floating images (o.k.: block elements) */

.left	{ float: left; }
.right	{ float: right; }

/* need an element to clear the float. Otherwise a floating image would break the */
/* surrounding DIV if there isn't enough text to match the image height */

div.clear {
	height: 1px;		/*  IE draws this as a 1EM box instead of 1px if we do not insert a 1px image */
	clear: both;
}


div.db {
	float: right;
	height:102px; 				/* same height as the product pictures on the left side */
	width:8em;
	text-align:center;
}


/* ------------------------------------------------------------------------- */
/* ---                            experimental                           --- */
/* ------------------------------------------------------------------------- */