/*
#########################################
		NaToll - Styleguide
#########################################

01 - Hauptformatierungen
02 – Seitenlayout (Seite, Navigation, Content, Leftcol, Rightcol usw.)
03 - Schriftangaben
04 - Text definitions
05 - Link definitions
06 - Image definitions
07 - Formular definitions
08 - Special AJAX definitions
09 - Table definitions

#########################################
*/


/*
****************************************
01 - Hauptformatierungen
****************************************
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:101%;
}

/*
****************************************
02 - Seitenlayout
****************************************
*/

#wrapper {
	margin: 1em auto;
	width:52em;
	background-color:#fff;
	}
	
#page {
	border:1px solid #E50404;
	}
	
#head {
	height:10em;
	background:url(/images/grill.jpg) top right;
	background-repeat:no-repeat;
	margin-bottom:0;
	padding-bottom:0;
	}

#head .logo {
	margin-top:1.6em;
	margin-left:0.6em;
	border:0;
	}

#hnavi {
	background-color:#E50404;
	height:1.6em;
	margin-top:0;
	color:#fff;
	font-weight:bold;
	padding-left:1em;
	padding-top:0.5em;
	}
	
#hnavi ul {
	padding:0;
	margin:0;
	}
	
#hnavi li {
	display:inline;
	padding-right:2em;
	width:4em;
	}
	
#hnavi li a {
	color:#fff;
	padding:0.3em;
	padding-bottom:0;
	margin:0;
	text-decoration:none;
	}

#hnavi li a:hover {
	border-bottom: 4px solid #007225;
	padding:0.3em;
	padding-bottom:0;
	margin:0;
	text-decoration:none;
	}


#content {
	padding-left:1em;
	margin-top:0;
	float:left;
	width:540px;
	}

#content h2 {
	margin-top:1em;
	}

#content a {
	color:#E50404;
	font-weight:bold;
	text-decoration:none;
	}


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


#leftcol {
	width:237px;
	float:right;
	margin-top:20px;
	}

.grbox { 
	background: #007225;
	margin-left:8px;
	width:215px;
	margin-bottom:20px;
	}

.redbox {
	background:#E50404;
	margin-left:8px;
	width:215px;
	margin-bottom:20px;
	color:#fff;
	}
	
.grbox h2, 
.redbox h2, 
.box p {
	margin: 0 10px;
	}
.grbox h2,
.redbox h2 {
	font-size:1.2em; 
	text-align:center;
	padding-top:0.3em;
	color:#ffffff; 
	}

.redbox ul {
	list-style-image:url(../images/pfeil_weiss.gif);
	margin: 0 10px;
	}

.redbox li {
	margin-top:10px;
	}

.grbox img,
.redbox img {
	margin-left:25px;
	margin-top:20px;
	}	

.grbox p,
.redbox p {
	margin-left:25px;
	}

.grbox a,
.redbox a {
	color:#fff;
	font-size:0.9em;
	font-weight:bold;
	}
	
.grbox .top, 
.grbox .bottom,
.redbox .top, 
.redbox .bottom {
	display:block;
	background: #fff;
	}
.grbox .top b,
.grbox .bottom b {
  display:block;
  height: 1px; 
  overflow: hidden; 
  background: #007225;
}

.redbox .top b,
.redbox .bottom b {
  display:block;
  height: 1px; 
  overflow: hidden; 
  background:#E50404;
}

.grbox .r1,
.redbox .r1 {
	margin: 0 5px;
	}
.grbox .r2,
.redbox .r2 {
	margin: 0 3px;
	}
.grbox .r3,
.redbox .r3 {
	margin: 0 2px;
	}
.grbox .top .r4, 
.grbox .bottom .r4,
.redbox .top .r4, 
.redbox .bottom .r4 {
	margin: 0 1px;
	height: 2px;
}



#foot {
	margin:0;
	padding:0;
	background: url(/images/born_to_grill.gif) top right;
	background-repeat:no-repeat;
	height:70px;
	color:#fff;
	}

#foot p {
	padding-top:45px;
	padding-left:20px;
	height:70px;
	text-decoration:none;
	font-size:0.8em;
	}

#foot a {
	color:#fff;
	font-weight:bold;
	}


.skip {
	position: absolute;
    left: -3000px;
    top: -3000px;
    width: 0;
    height: 0;
    overflow: hidden;
    display: inline;
	}

ul.pfeil {
	list-style-image:url(../images/pfeil.gif);
	width:100%;  /* room for 3 columns */
	}

ul.pfeil li {
  float: left;
  width: 50%;  /* accommodate the widest item */
  padding-bottom:10px;
}

/* stop the floating after the list */
br
{
  clear: left;
}
/* separate the list from what follows it */
div.spalten
{
  margin-bottom: 1em;
}

.bigred {
	color:#E50404;
	font-size:120%;
	text-align:center;
	}

th {
	text-align:left;
	}
td {
	width:12em;
	}
.produktliste h3 {
	color:#E50404;
	}