/********************************************************************
 *	Box Properties
 */

	body { margin-left : 0px; margin-top : 0px; margin-bottom : 0px; margin-right : 0px; margin-width: 0px; margin-height: 0px; }
	img { border: 0px; }
	img.o { vertical-align: middle; }
	table, tr, td { padding: 0px; }
	.indent { margin-left : 4px; }


/********************************************************************
 *	Colors
 */


	body { background-color: white; }
	body, td, dl, ul, li {color: black; }
	h1, h2, h3, h4  { color: black; }



/********************************************************************
 *	Fonts
 */


	body, td, th, input, button, select, option, textarea {
		font-family: Verdana, Arial, Helvetica;
		font-size: 11px;
	}
	.small, .small code { font-size: 90%}

	h2,h3,h4 { font-family: Verdana, Arial, Helvetica; }

	h1 { font-size: 210%; }
	h2 { font-size: 170%; }
	h3 { font-size: 140%; }
	h4 { font-size: 110%; }

	em { color: #CC0000; font-style: normal; font-size: 10px; font-weight: bold; }



/********************************************************************
 *	Hyperlink Styles
 */

	a { text-decoration: none; color: #000000; }
	a:link, a:visited { }
	a:active, a:hover { text-decoration: underline; }


/********************************************************************
 *	Forms & Form Controls Styles
 */

	/*
	 *  NOTE: The classes .field and .button are automatically appended to generated
	 *  HTML <input> elements by the <xx:input> and <xx:button> tags.
	 */


	form { margin: 0px; }

	input.field, textarea, select, option
	{
		font-family: Verdana, Arial, helvetica;

		margin: 1px;
		padding: 0px 1px;
		vertical-align: top;
		background: white;
		color: black;
	}

	input, input.field, input.button, button { vertical-align: middle; }
	button img { vertical-align: absmiddle; }

.mikro
{
    COLOR: #000000;    
    FONT-SIZE: 7pt;
    FONT-FAMILY: Verdana, Arial, Helvetica;
}

.mikro1
{
    COLOR: #000000;    
    FONT-SIZE: 9pt;
    FONT-FAMILY: Verdana, Arial, Helvetica;
}

.mikro2
{
    COLOR: #000000;    
    FONT-SIZE: 10pt;
    FONT-FAMILY: Verdana, Arial, Helvetica;
}

.headline2
{
    COLOR: #000000;
    FONT-SIZE: 11pt;
    FONT-WEIGHT: bold;
    FONT-FAMILY: Verdana, Arial, Helvetica;
}

.b2blinksoben1
{
    COLOR: #000000;    
    FONT-SIZE: 8pt;
    FONT-FAMILY: Verdana, Arial, Helvetica;
	 
}

.b2blinksoben2
{
    COLOR: #000000;    
    FONT-SIZE: 10pt;
    FONT-FAMILY: Verdana, Arial, Helvetica;
	 font-weight: bold;
}

.even-row { background-color: #f7f7f7;}
.odd-row { background-color: #EFEEEE;}
.odd-row .xxxx { background-color: #FFFFFF;} 
.even-row .xxxx { background-color: #FFFFFF;} 


.navigator
{
	height: 20;
	vertical-align: bottom;
}


/********************************************************************
 *	Dummy Feld
 */

.dummy { height: 100%; width: 130px;}
 
.oben { background-image: url(images/themes/gruen/index-oben.gif); }
.unten { background-image: url(images/themes/gruen/index-unten.gif); }
.mitte { background-color: #F7F9F6; }

/********************************************************************
 *	Aspects & Widgets
 */

	/*
	 *  NOTE: This section primarily defines styles, that are automatically used by
	 *  the Paragon Tag Library and Widgets.
	 */


	/*
	 * Form Control Styles -- The classes .aspect-label and .aspect-label2 are
	 * automatically added to an aspect's or form control's label by the <xx:label>,
	 * <xx:out>,
	 * <xx:input>, <xx:checkbox>, <xx:radio> and <xx:select> tags.
	 */

	.aspect-label, .aspect-label2 {
		font-family: Verdana, Arial, Helvetica; font-size: 11px;
		text-align: right;
		color: black;
		padding: 0px 5px 0px 0px;
	}
	.aspect-label2 { font-weight: normal; }


	/*
	 * Error Styles --  The class .aspect-error is automatically added to the error
	 * messages generated by the <xx:errors> and <xx:error> tags as well as the form
	 * controls. In case of <xx:errors> and <xx:error>, the printed error messages
	 * are enclosed in a <div class="aspect-error">. Additionally, the form controls
	 * (<xx:input>, <xx:checkbox>, <xx:radio> and <xx:select>) enclose the rendered
	 * HTML element in a <span class="aspect-error"> in order to indicate an error in
	 * this control. Finally, the labels of aspects with errors are enclosed in a
	 * combination of <span class="aspect-label"><span class="aspect-error">; the
	 * contextual selector span.aspect-label .aspect-error can be used to specify the
	 * applicable style.
	 */
	div.aspect-error, div.aspect-error p, div.aspect-error td, div.aspect-error ul, div.aspect-error li { color: red; }
	span.aspect-error input.field { background: red; }
	.portal-content span.aspect-error input.field { background: red; }

	div.aspect-error { margin-bottom: 5px; margin-top: 3px; font-size: 11px; font-weight: bold; }
	/* alternativ roter rahmen: span.aspect-error { border: 3px solid red; }*/
	span.aspect-label .aspect-error, span.aspect-label2 .aspect-error { color: red; border: 0px; }


	/*
	 * Mandatory Fields --  The class .mandatory is automatically added to form
	 * controls marked as mandatory. The form controls <xx:input>, <xx:checkbox>,
	 * <xx:radio> and <xx:select>) enclose the rendered HTML element in a
	 * <span class="mandatory"> in order to indicate that a value must be entered.
	 * The definitions below can be used to specify the applicable style.
	 */
	span.mandatory input.field, span.mandatory textarea, span.mandatory select, span.mandatory option {
		background: #ffddbb;
	}

	/*
	 * Tree Widget -- The following classes are automatically added to a rendered
	 * tree by the <xx:tree> tag and its sub tags. A tree is enclosed in an HTML
	 * <table class="tree"> element. Each node/row in the tree is rendered in an HTML
	 * <tr class="tree-node"> element in case of the selected node this expands to
	 * <tr class="tree-node selected-node">. Note the use of contextual selectors in
	 * the style definitions below for specifically defining the styles of images and
	 * hyperlinks within a tree.
	 */
	.tree { xwidth: 100%; }
	.tree-node td { vertical-align: middle; font-size: 12px; padding: 0px 4px 0px 2px; }
	.tree-node img { vertical-align: middle; border: none; }
	.tree-node span { vertical-align: middle; }


	/*
	 * Table Widgets -- The following classes are automatically added to a rendered
	 * table widgets by the <xx:table> tag and its sub tags.
	 */
	th.header {}
	td.even-row {}
	td.odd-row {}
	td.row-selector {}
	th.row-selector {}


/********************************************************************
 *	Uebergreifende Styles
 */

	.headline-big { font-size: 16px; font-weight: bold; }
	.headline-small { font-size: 12px; line-height: 130%; }
	.headline-shop { font-size: 16px;}
	.headline-shop-small { font-size: 11px; line-height: 130%; }

	.btnlink .btncontent a { color: #000000; font-size: 10px; text-decoration: underline; }
	.btnlink .btncontent a:hover { color: #000000; font-size: 10px; text-decoration: none; }
	.btnlink .btncontent a:link, a:visited { }
	
	.btnlink .open { background-image: url(images/themes/gruen/btn_open.gif); }
	.btnlink2 .open { background-image: url(images/themes/gruen/btn_open2.gif); }
	.btnlink .close { width: 18px; background-image: url(images/themes/gruen/btn_close.gif); }
    .btnlink2 .close { width: 18px; background-image: url(images/themes/gruen/btn_close2.gif); }

	.warenkorb { color: #0000cc; }
/********************************************************************
 *	Banner: Rameder Logo und Link Leiste
 */

	.portal-banner { }
	.portal-banner td { font-size: 12px; vertical-align:bottom; text-align: right; }
	.portal-banner a { text-decoration: none; color: black; }
	.portal-banner a:link, .portal-banner a:visited { }
	.portal-banner a:active, .portal-banner a:hover { text-decoration: underline; }


/********************************************************************
 *	Menubar: Reiter mit Shop Kategorien
 */

	.portal-menubar { }
	.reiter .label, .reiter .label-selected { text-align: center;}
	.reiter .label-selected { color: #FFFFFF;}
	.reiter .label { background-image:url(images/themes/gruen/bgreiter.gif); }
	.reiter .label-selected { background-image:url(images/themes/gruen/bgreiter-selected.gif); }
	
	.reiter .links, .reiter .rechts { width: 10px; height: 32; }
    .reiter .links { background-image:url(images/themes/gruen/menuelinks.gif); }
    .reiter .rechts { background-image:url(images/themes/gruen/menuerechts.gif); }
    .reiter .links-selected { background-image:url(images/themes/gruen/menuelinks-selected.gif);  }
    .reiter .rechts-selected { background-image:url(images/themes/gruen/menuerechts-selected.gif); }

	.reiter a { text-decoration: none; color: white; }
	.reiter .label a { color: black; }

	.reiter .level1 { vertical-align: bottom; }
    .reiter .level1 { background-image:url(images/themes/gruen/header.gif); }

	.reiter .level1 .label a { color: #000000; font-size: 11px; text-decoration: none;}
	.reiter .level1 .label a:hover { color: #003399; font-size: 11px; text-decoration: none;}
	.reiter .level1 .label a:link, a:visited { }

	.reiter .level1 .label .color1 a:hover { color: #378518;}
	.reiter .level1 .label .color2 a:hover { color: #184E85;} 
	.reiter .level1 .label .color3 a:hover { color: #852118;}
	.reiter .level1 .label .color4 a:hover { color: #857218;}

    .reiter .level2 { vertical-align: bottom; font-size: 11px; }
    .reiter .level2 { color: white; background-color: #378518; }
	.reiter .level2 a { color: #FFFFFF; font-size: 10px; text-transform: uppercase; text-decoration: none;  }
	.reiter .level2 a:hover { color: #BBE4AC; font-size: 10px; text-decoration: none;}
	.reiter .level2 a:link, a:visited { }
	
    .reiter .level3a { background-image:url(images/themes/gruen/bgreiter-ecke.gif); }
    .reiter .level3b { background-image:url(images/themes/gruen/bgreiter-selected.gif); }


/********************************************************************
 *	Index: Fahrzeugsuche, Laenderauswahl, Menu
 */

	.portal-index { vertical-align: top; }
	.portal-index .oben { background-image: url(images/themes/gruen/index-oben.gif); }
	.portal-index .unten { background-image: url(images/themes/gruen/index-unten.gif); }
	.portal-index .mitte { background-color: #F7F9F6; }

	.portal-index .menu { background-color: #F7F9F6; }
	.portal-index .menu td { text-align: left; }

	/* achtung: tiefere (=genauere) Schachtelung bringt Netscape 4.7 durcheinander */

	.menu-level1 a { color: #388513; font-size: 11px; text-decoration: none; text-transform: uppercase; font-weight: bold;}
	.menu-level1 a:hover { color: #000000; font-size: 11px; text-decoration: none; text-transform: uppercase; font-weight: bold;}
	.menu-level1 a:link, a:visited { }	
	
	
	.menu-level2 a { color: #000000; font-size: 11px; text-decoration: none;}
	.menu-level2 a:hover { color: #388513; font-size: 11px; text-decoration: none;}
	.menu-level2 a:link, a:visited { }
	

	.land { font-size: 11px; }	
	.schluesselnummer { font-size: 9px; }	

/********************************************************************
 *	Index: Crossselling rechte Menueleiste
 */

	.portal-cross { vertical-align: top; }
	.portal-cross .oben { background-image: url(images/themes/gruen/cross-oben.gif); }
	.portal-cross .mitte { background-color: #F7F9F6; }
	.portal-cross .em { color: #CC0000; font-style: normal; font-size: 11px; font-weight: bold; }
	.portal-cross div { color: #000000; font-style: normal; font-size: 10px;}
	.portalcrossfzg { color: #8B8A8A; font-style: normal; font-size: 9px;}

/********************************************************************
 *	User Info: Aktueller Benutzer & Basket
 */

	.portal-infobox { vertical-align: top; }
	.portal-infobox td { vertical-align: top; }
	.portal-infobox .mitte { background-color: #F7F9F6; }

/********************************************************************
 *	Content Area
 */
	.portal-content .headline {
		font-weight: bold;
		background-color: #EEF2EE;
		vertical-align: center;
		font-size: 11px;
	}

	.portal-content .sehrgross { color: #000000; font-size: 13px; }
	.portal-content .fahrzeugwahl { color: #000000; font-size: 12px; }
	.portal-content .schritt { color: #CFB06D; font-size: 12px; font-weight: bold; }
	.portal-content .farbe { color: #669933; font-size: 12px; font-weight: bold; }
	.portal-content .sehrklein { color: #000000; font-size: 10px; }
	.portal-content .preis { color: #000000; font-size: 16px; font-weight: bold;}
	.portal-content .red { color: #CC0000; font-size: 11px;}

	.portal-content .gross { color: #000000; font-size: 13px; }
	.portal-content .grossgruen { color: #378518; font-size: 13px; }

	.portal-content .klein a { font-size: 11px; text-decoration: underline; }
	.portal-content .klein a:hover { font-size: 11px; text-decoration: none; }
	.portal-content .klein a:link, a:visited { }		
	
	
	.portal-content .gross a { color: #000000; font-size: 12px; text-decoration: none; }
	.portal-content .gross a:hover { color: #000000; font-size: 12px; text-decoration: underline; }
	.portal-content .gross a:link, a:visited { }	

	.portal-content .gross_underline a { color: #000000; font-size: 12px; text-decoration: underline; }
	.portal-content .gross_underline a:hover { color: #000000; font-size: 12px; text-decoration: none; }
	.portal-content .gross_underline a:link, a:visited { }		
	
	
	.portal-content .sehrgross a { color: #000000; font-size: 13px; text-decoration: underline; }
	.portal-content .sehrgross a:hover { color: #000000; font-size: 13px; text-decoration: none; }
	.portal-content .sehrgross a:link, a:visited { }		
	
	
	.portal-content .hellgrau { background-color: #f7f7f7;}
	.portal-content .dunkelgrau { background-color: #EFEEEE;}
	.portal-content .gruen { color: #009933;}
	.portal-content .rot { color: #fb0200;}
	.portal-content .beige { color: #ceb56b;}
	.portal-content .dunkelgruen { color: #378518;}


	.portal-content .ampel-green  { background-color: #009900;}
	.portal-content .ampel-yellow { background-color: #ffff33;}
	.portal-content .ampel-red 	  { background-color: #ff0000;}


	
	.portal-content .gelb a { color: #CFB06D; font-size: 12px; text-decoration: none; }
	.portal-content .gelb a:hover { color: #CFB06D; font-size: 12px; text-decoration: underline; }
	.portal-content .gelb a:link, a:visited { }	
	
	
	
/********************************************************************
 *	Styles for splash screens.
 */

	div#splash {
		position: absolute;  visibility: visible;  z-index: 1;
		top: 20%; left: 20%;
		width: 60%;
		x-border: 1px outset;
		color: #000000;
		background-color: #dddddd;
	}
	div#splash p {
		margin: 14px 20px;
	}
	div#splash h4 {
		background-color: #ffc444;
		color: #333333; font-size: 119%;
		padding: 4px 7px;
		font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
		border-bottom: 1px solid white;
	}

	div#splash .footer {
		border-top: 1px solid white;
		text-align: right;
		background-color: #bbbbbb;
		padding: 1px 7px 4px;
	}

	div#splash button {
		font: bold 11px Verdana, Geneva, Arial, helvetica;
		color: #333377;
	}