/* Custom stylesheet for Berlin's Catering
 * site developed in Silverstripe by Dieter Orens
 * for GPMD http://www.gpmd.co.uk/
 * @author name <dieter@dio5.com>
 * @author website http://www.dio5.com/portfolio/
 * --------------------------------------------------------------- */

html{
	background:#a72534;
}

body {
	background:#a72534; 
	font:13px Arial, Helvetica, sans-serif;
	color:#333;
}

.container{
	width:894px;
	margin:0 auto;
	position:relative;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}


/* HEADER
 * --------------------------------------------------------------- */

#Header{
	background:#eed99b url(../images/bg_top_130.gif) no-repeat 50% top;
	height:130px;
}

#Header h1{
	display:block;
	position:absolute;
	font:bold 36px Arial, Helvetica, sans-serif;
	text-transform:lowercase;
	color:#9d172c;
	top:20px;
	left:76px;
}

#Header h1 span{
	color:#aca592;
}

#SkipLinks{
	display:block;
	position:absolute;
	top:0;
	left:10px;
	color:#ecd797;
	width:100%;
}

#SkipLinks:focus, #SkipLinks:hover{
	color:#000;
}

#DirektKontakt{
	position:absolute;
	top:20px;
	right:0;
	font-size:20px;
	text-align:right;
	text-transform:lowercase;
}

#DirektKontakt strong{
	display:block;
}



/* NAV
 * --------------------------------------------------------------- */

.nav a{
	color:#eed99b;
}
.nav li.current a, .nav li.section a, .nav a:hover, .nav a:focus{
	color:#ffffff;
}

/* Main NAV
 * ----------------------- */

#Main.nav{
	position:absolute;
	right:0;
	top:90px;
	height:40px;
	overflow:hidden;
}

#Main.nav li{
	float:left;
	margin:0 0 0 1px;
}

#Main.nav a{
	float:left;
	display:block;
	position:relative;
	background:url(../images/menu_l.gif) no-repeat left bottom;
	font:18px Arial, Helvetica, sans-serif;
	text-decoration:none;
}

#Main.nav a span{
	float:left;
	display:block;
	background:url(../images/menu_m.gif) repeat-x left bottom;
	height:40px;
	margin:0 0 0 9px;
	padding:0 9px 0 0;
	line-height:40px;
	cursor:pointer;
}

#Main.nav a.last span{
	background:url(../images/menu_r.gif) no-repeat right bottom;
	margin:0;
	padding:0;
}

#Main.nav a.last span span{
	background:url(../images/menu_m.gif) repeat-x left bottom;
	height:40px;
	margin:0 9px;
	padding:0;
}

#Main.nav li.current a, #Main.nav li.section a{
 	color:#a72534;
 	background:url(../images/menu_l_current.gif) no-repeat left bottom;
}

#Main.nav li.current a span, #Main.nav li.section a span{
	background:#fff;
}

#Main.nav li.current a.last span, #Main.nav li.section a.last span{
	background:url(../images/menu_r_current.gif) no-repeat right bottom;
}

#Main.nav li.current a.last span span, #Main.nav li.section a.last span span{
	background:#fff;
}

/* Sub NAV
 * ----------------------- */

#Sub.nav{
	margin:0 0 20px;
}

#Sub.nav li{
	margin:0 0 2px;
}

#Sub.nav a{
	text-decoration:none;
	background:#a72534;
	display:block;
	min-height:16px;
	padding:4px;
	font-weight:bold;
}

#Sub.nav a.first{
	background:#a72534 url(../images/submenu_top_right.gif) no-repeat right top;
}
#Sub.nav a.last{
	background:#a72534 url(../images/submenu_bottom_right.gif) no-repeat right bottom;
}

/* CONTENT
 * --------------------------------------------------------------- */

#Content{
	background:#a72534 url(../images/bg_bottom.gif) no-repeat 50% top;
	min-height:1024px;
}
#Content .container{
	background:#fff;
}

#Content .container .container{
	background:transparent url(../images/white_grad.png) repeat-x left bottom;
	padding:20px 0 220px;
	border-bottom:8px solid #851d29;
}

#MainContent{
	width:620px;
	margin:0 0 0 253px;
}

/* GALLERIE
 * --------------------------------------------------------------- */

#Content ul.gallery{
	overflow:hidden;
	position:relative;
	margin:0;
}

#Content .gallery li{
	float:left;
	list-style:none;
	margin:0 12px 12px 0;
}

.gallery li a{
	border:3px solid #ffd3d8;
	display:block;
}

.gallery li a:hover{
	border:3px solid #a72534;
}

.gallery li a img{
	display:block;
	border:1px solid #fff;
}

/* ASIDE
 * --------------------------------------------------------------- */

.aside{
	width:220px;
	padding:0 10px;
	float:left;
}

.box{
	background:#a72534 url(../images/submenu_bottom_right.gif) no-repeat right bottom;
	color:#fff;
	margin:0 0 20px;
	padding:0 0 8px;
}

.box h2{
	color:#eed99b;
	font-weight:bold;
	background:#a72534 url(../images/submenu_top_right.gif) no-repeat right top;
	padding:3px 4px;
}

.box form{
	padding:3px 4px 3px 24px;
}

/* FORMS
 * --------------------------------------------------------------- */

div.field{
	margin:0 0 12px;
}

legend{
	display:none;
}

input.text{
	width:240px;
	padding:3px;
	border:1px solid #999;
}

.aside input.text{
	width:160px;
	padding:2px 1px;	
	border:none;
	margin:0 0 2px;
}

textarea{
	width:360px;
	padding:3px;
	border:1px solid #999;
}

input.text:focus, textarea:focus{
	background-color:#ffffcc;
}

#Content .bad, #Content .required{
	color:#851d29;
}

input.action{
	padding:2px 5px;
}

.aside input.action{
	padding:1px 3px;
	margin:8px 0 0;
	font-size:11px;
}

/* FOOTER
 * --------------------------------------------------------------- */

#Content #Footer{
	background:none;
	color:#fff;
	text-align:right;
	font-size:11px;
	padding:3px 0;
}

#Content #Footer a{
	color:#fff;
}

/* GENERIC STUFF
 * --------------------------------------------------------------- */

 strong{
 	font-weight:bold;
 }
 
 em{
 	font-style:italic;
 }