/* 
    Document   : joyellis.css
    Created on : 05. Sept 2007, 17:28
    Author     : mumpe
    Description:
        Purpose of the stylesheet follows.
*/
* {
	margin:0pt;
	padding:0pt;
}

html {
	height:100%;
}

* html body {
	height:100%;
}

body, .startpage
{
    width: 100%;
    height: 100%;
	xfont: 100% "Myriad Pro", Verdana, Arial, sans-serif;
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 0; 
	padding: 0;
	text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */

}
body a {
	border-bottom:0px;
}

#weiter {
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:0.2em;
	position:relative;
	float:right;
	margin-top:520px;
	padding-left:20px;
	padding-right:40px;
	width:100px;
	height:20px;
	color:#ffffff;	
}

#weiter a {
	text-decoration:none;
	color:#FFFFFF;
	font-size:17px;
}

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

#spacer, #page, #st_page {
	margin:0pt;
	padding:0pt;
	position:absolute;	
}

#spacer {
	height:100%;
	min-height:594px;
	min-width:988px;
	width:100%;
}

#page, #st_page {
	border:0px solid #CCCCCC;
	margin:-295px 0pt 0pt -490px;
	min-height:590px;
	width:980px;
	padding:0pt;
	left:50%;
	top:50%;
	text-align:left;
	font-size:12px;
}
#st_page {
    background: url(../images/joyellis_web01.jpg) no-repeat center;
}

* html #st_page, * html #page {
	height:594px; /* IE6 */
}

#page {	    background: url(../images/joyellis_bg2.jpg) no-repeat center; }

#content {
	position:relative;
	float:left;
	height:415px;
	margin:10px 0 0 45px;
	padding-left:35px; /* nur für safari - wird später aufgehoben */
	width:505px;
	padding-right:10px;
	list-style:none;
	overflow:auto;	
	line-height:17px;
	border:1px solid #669933;
}

* html #content {
	margin-left:20px; /*für IE6 */
}
#content.shop {
	width:875px;
	margin-left:40px;
	border:0;

}
* html #content.shop { /*für IE6 */
	margin-left:20px;
}

#content.shop iframe {
	border:0px;
	height:410px;
}

#sidebar {
	position:relative;
	float:left;
	width:350px; /* um padding-wert mehr oder weniger */
	height:415px;
	margin:10px 0 0 15px;
}
* html #sidebar { width:350px;}

#sidebar div {valign:bottom; padding-right:0px}
#sidebar div img { margin:0px 6px 0px 0; border:0;}

p {
	font-size:12px;
	line-height:17px;
}
#content ul li {
	font-size:12px;
	line-height:17px;
	margin-bottom:12px;
	list-style-type:none;
}

h1 {
	font-size:15px;
	color:#669933;
	font-weight:bold;
	margin:10px 0 10px 0;
}
h1 img {
	margin-right:5px;
}
a {
	text-decoration:none;
	color:#000000;
}
a:hover {
	text-decoration:underline;
}

#header {
	position:relative;
	float:left;
	height:81px;
	text-align:center;
	width:900px;
	margin: 4px 0 0 41px;

}

* html #header {
	margin-left:21px;
}
/*******************************/
/********* MENU ****************/
/*******************************/

#menu {
   position:relative;
   float:left;
   height:17px;
   margin: 8px 0 0 45px;
   width:885px;
   border-bottom:5px solid #669933;
   text-align:left;
   list-style:none;
}
* html #menu {
	margin-left:20px;
}
* html #menu li {
	padding-bottom:2px;
}
#menu ul, #footer ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}
#menu li, #footer li {
	float:left;
}
#menu li {border:1px solid #669933; margin-right:3px;border-bottom:0px;}

#menu li.active {
	color:#669933;
	background:#669933;
}

* html #menu li, * html #menu li.active { 
	border-bottom:0px solid;padding-bottom:4px;padding-top:2px;}

* html #menu li.active a:hover {color:#fff;}

#menu li.active a { color:#fff;
}

#footer li.active a {
	color:#669933;
	border-bottom:4px solid #669933;}
	
#menu ul img {
	padding-left:5px;
}
* html #menu ul img {
	padding-left:0px;
}

#menu a {
	color:#333333;
	xfont-family:"Myriad Pro", Verdana, Arial, sans-serif;
	font-family:Verdana, Arial, Helvetica,sans-serif;
	font-size:12px;
	line-height:16px;
	letter-spacing:0.1em;
	padding:0pt 10px;
	padding-bottom:2px;
	text-decoration:none;
	text-align:left;
}

#menu a:hover, #footer a:hover {
	text-decoration:none;
	color:#669933;
}

#submenu {
	position:relative;
	float:right;
	height:19px;
	width:174px;
	margin-top:0px;
}
#submenu a {color:#fff; border-right:0;}
#submenu a:hover {xbackground:#669933; color:#fff;border-bottom:0;xborder-top:1px solid #fff;}
#submenu li.active {border-bottom:0;background:#669933;color:#fff;}

* html #submenu li.active {
	border-bottom:0px solid #fff;
	
}
/***************************************/

#footer li.last a, #menu li.last a {
	border-right:0pt none;
}

#footer a {
 	border-right:1px solid #666666;
	color:#666666;
	font-size:11px;
	line-height:11px;
	padding:0pt 10px;
	text-decoration:none;
	text-align:right;
}

#footer {
	color:#666666;
	position:relative;
	float:right;
	width:900px;
	text-align:right;
	margin-top:16px;
	padding:0 35px 0 30px;
}
.left {
	float:left;
	width700px;
	margin-right:0px;
	font-size:11px;
}
.right { float:right;
	width:195px;
}
#startfooter {
	margin-top:560px;
	padding-left:50px;
	color:#666666;
	font-size:11px;}

#EmailForm {
	padding-left:0px;
	}

#cfTitel, #cfVorname, #cfNachname, #cfAnschrift, #cfPLZ, #cfTel, #cfEmail, #cfFax {
	background:#FFFFFF url(../images/input-bg.gif) repeat-x scroll left top;
	border:1px solid #669933;
	color:#666666;
	display:inline;
	float:left;
	height:17px;
	font-size:12px;
	margin:2px 88px 3px 0pt;
	padding:3px 15px 0px 5px;
	vertical-align:middle;
	width:230px;
}

#cfMessage {
	border:1px solid #669933;
	float:left;
	margin:5px 0px 5px 0pt;
	width:250px;
}

#cfContact {
	background-color:#669933;
	border:medium none;
	color:#FFFFFF;
	cursor:pointer;
	display:inline;
	float:left;
	height:20px;
	line-height:22px;
	margin:10px 0pt 20px 0px;
	vertical-align:middle;
	width:80px;
}
#fieldset {
	border:0px solid #000000;
	width:255px;
	padding-left:10px;
}
#fieldset p {
	color:#666666;
	font-size:11px;
	font-style:italic;
	line-height:13px;
}
#content { 
	padding-left:10px;#
}
#content {
	padding-left:10px;
}
// # after semicolon - safari hack - wird von safari nicht interpretiert.