﻿/*******************************************************************************

    All Out Catering Screen CSS
    v1.0
    Author: K Wilson
    (c) Tripsis (www.tripsis.co.uk)

********************************************************************************
    Base
*******************************************************************************/
body {
	background: #333 url(../images/css/mainbg.gif) repeat 0 0;
	font: 76%/1.5 Arial, Verdana, Tahoma, sans-serif;
	color: #8c8c8c;
}

textarea { font: 76%/1.5 Arial, Verdana, Tahoma, sans-serif; }

a { text-decoration: none; color: #455560; }
a:hover { text-decoration: underline; background: #ffd; }

.singleline { line-height: 1; }

#container {
	background: #fff url(../images/css/otherlogos.gif) no-repeat 518px 48px;
	/*width: 762px;*/
	width: 64em;
	margin: 0 auto;
	/*margin-bottom: 32px; */
	margin-bottom: 2.8em;
	position: relative;
	max-width: 100%;
}

#main {
	background: #ededed;
	/*padding: 12px; */
	padding: 1em;
}

p#breadcrumbs,
div#footer {
	text-transform: lowercase;
	/*padding: 0 6px;*/
	padding: 0 0.5em;
	/*line-height: 36px;*/
	line-height: 3em;
	
}


#content {
	background: #fff;
	/*padding: 24px 16px;*/
	padding: 2em 1.4em;
}

#columnholder {
	float: left;
	/*width: 738px;*/
	width: 62em;
	background: #fff url(../images/css/contentsep.png) 14em 0 repeat-y;
}

#content,
#columnholder {
	/*margin-bottom: 12px;*/
	margin-bottom: 1em;
}
	
	#columnholder #subnav,
	#columnholder #content {
		/*padding: 24px 16px;*/
		padding: 2em 1.4em;
		float: left;
	}

	#columnholder #subnav {
		width: 11em;
		margin-right: 1em;
	}
	
	#columnholder #content {
		width: 44.2em;
		margin-bottom: 0;
	}
	
	
/*******************************************************************************
    Accessibility
*******************************************************************************/
:focus { outline: #455560 solid 2px; }

p.skiplink {
	position: absolute;
	top: 3px;
	right: 3em;
	font-size: 0.9em;
	text-transform: lowercase;
}


/*******************************************************************************
    Header
*******************************************************************************/
#header {
	padding: 30px 34px 22px 34px;
}


/*******************************************************************************
    Main Navigation
*******************************************************************************/
div#nav {
	float: left;
	overflow: hidden;
}

div#nav ul {
	float: left;
	border-bottom: solid 0.6em #d7d7d7;
}

	div#nav ul li {		
		float: left;
		margin-right: 0.4em;
		width: 8.5em;
	}
	
		div#nav ul li a {
			display: block;
			background: #d7d7d7;
			line-height: normal;
			padding: 0.4em 0.6em;
			color: #4f5e69;
			text-decoration: none;
			text-transform: lowercase;
			margin-bottom: 0.4em;
		}
		
		div#nav ul li a:hover { background: #cfcfcf; }

	div#nav ul li:last-child,
	div#nav ul li.last-child {
		margin-right: 0;
	}
			

/* Section Styles */
div#nav ul.home { border-bottom-color: #455560; }
div#nav ul.home li.home,
div#nav ul.home li.home a { background: #455560; color: #fff; }
div#feature.home { background-color: #455560; background-image: url(../images/features/home.jpg); }

div#nav ul.about { border-bottom-color: #455560; }
div#nav ul.about li.home,
div#nav ul.about li.home a { background: #455560; color: #fff; }
div#feature.about { background-color: #455560; background-image: url(../images/features/about.jpg); }

div#nav ul.whatwedo { border-bottom-color: #5f3844; }
div#nav ul.whatwedo li.whatwedo,
div#nav ul.whatwedo li.whatwedo a { background: #5f3844; color: #fff; }
div#feature.whatwedo { background-color: #5f3844; background-image: url(../images/features/whatwedo.jpg); }

div#nav ul.testimonials { border-bottom-color: #587b7c; }
div#nav ul.testimonials li.testimonials,
div#nav ul.testimonials li.testimonials a { background: #587b7c; color: #fff; }
div#feature.testimonials { background-color: #587b7c; background-image: url(../images/features/testimonials.jpg); }

div#nav ul.testimonials { border-bottom-color: #7c5c51; }
div#nav ul.testimonials li.testimonials,
div#nav ul.testimonials li.testimonials a { background: #7c5c51; color: #fff; }
div#feature.testimonials { background-color: #7c5c51; background-image: url(../images/features/testimonials.jpg); }

div#nav ul.news { border-bottom-color: #778e1d; }
div#nav ul.news li.news,
div#nav ul.news li.news a { background: #778e1d; color: #fff; }
div#feature.news { background-color: #778e1d; background-image: url(../images/features/news.jpg); }

div#nav ul.news { border-bottom-color: #87b200; }
div#nav ul.news li.news,
div#nav ul.news li.news a { background: #87b200; color: #fff; }
div#feature.news { background-color: #87b200; background-image: url(../images/features/news.jpg); }

div#nav ul.shop { border-bottom-color: #adc6b9; }
div#nav ul.shop li.shop,
div#nav ul.shop li.shop a { background: #adc6b9; color: #fff; }
div#feature.shop { background-color: #adc6b9; background-image: url(../images/features/shop.jpg); }

div#nav ul.contact { border-bottom-color: #b1953a; }
div#nav ul.contact li.contact,
div#nav ul.contact li.contact a { background: #b1953a; color: #fff; }
div#feature.contact { background-color: #b1953a; background-image: url(../images/features/contact.jpg); }

div#nav ul.links { border-bottom-color: #597a7b; }
div#nav ul.links li.links,
div#nav ul.links li.links a { background: #597a7b; color: #fff; }
div#feature.links { background-color: #597a7b; background-image: url(../images/features/links.jpg); }


/*******************************************************************************
    Features
*******************************************************************************/
div#feature {
	height: 214px;
	background: #fff;
	padding-left: 516px;
	background-position: 0 0;
	background-repeat: no-repeat;
	margin-bottom: 16px;
}

	div#feature p {
		font-size: 1.3em;
		padding: 64px 20px;
		text-transform: lowercase;
		color: #fff;
	}


/*******************************************************************************
    Sub-Nav
*******************************************************************************/
#subnav ul {
}

#subnav ul li {
	margin-bottom: 0.6em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #efefef;
}

	#subnav ul li a {
		text-transform: lowercase;
		font-size: 1.1em;
		color: #8c8c8c;
		font-weight: bold;
		line-height: normal;
		display: block;
	}

	#subnav ul li.selected a {
		color: #455560;
	}

/*******************************************************************************
    Main Content
*******************************************************************************/
h1 { font-size: 1.4em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.1em; }

h1, h2, h3, h4 {
	font-weight: normal;
	color: #455560;
	line-height: normal;
	text-transform: lowercase;
}

#content h1,
#content p,
#content ul,
#content ol,
#content table {
	margin-bottom: 1em;
}

#content ul li {
	list-style-type: disc;
	margin-left: 1.4em;
}

/*******************************************************************************
    Listings
*******************************************************************************/
#contentholder.listing {
	background-color: Transparent;
	padding: 0;
}

#listing h1 {
	background: #fff;
	padding: 0.5em;
	margin-bottom: 1em;
}

#listing .item {
	position: relative;
	background: #fff;
	padding: 2em 0.5em;
	margin-bottom: 1em;
	background-repeat: no-repeat;
	background-position: 0.5em 50%;
}

	#listing h2,
	#listing p {
		padding-left: 200px;
	}

		#listing .testimonial h2,
		#listing .testimonial p {
			padding: 1em 2.5em;
			margin: 0 2.5em;
		}
		
		#listing .testimonial p {
			text-align: right;
			font-style: italic;
		}
		
		#listing .testimonial blockquote {
			background: url(../images/css/quoteopen.png) no-repeat 0 1em;
			margin: 0 5em;
		}
		
		#listing .testimonial blockquote p {
			text-align: left;
			font-style: normal;
			font-size: 1.1em;
			padding-bottom: 0;
			margin: 0;
			background: url(../images/css/quoteclose.png) no-repeat 100% 100%;
		}


/*******************************************************************************
    News
*******************************************************************************/
#contentholder.news {
	background-color: Transparent;
	padding: 0;
}

	#contentholder.news h1 {
		display: none;
	}

		div.newssection {
			background: #fff;
			padding: 1em;
			margin-bottom: 1em;
			clear: both;
		}
		
		#contentholder.news div.newssection:last-child,
		#contentholder.news div.last-child {
			margin-bottom: 0;
		}
		
			div.newssection h2 {
				float: left;
			}
			
			div.newssection p {
				clear: both;
			}
			
			div.newssection div.newsitem {
				margin-left: 210px;
				padding-bottom: 16px;
				margin-bottom: 16px;
				border-bottom: solid 1px #8c8c8c;
			}
			
			div.newssection div.last-child,
			div.newssection div.newsitem:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}


/*******************************************************************************
    Forms
*******************************************************************************/
fieldset label {
	clear: both;
	float: left;
	padding: 0.5em;
	padding-left: 0;
}

fieldset {
	margin-bottom: 2em;
}

	fieldset legend {
		font-weight: bold;
	}

fieldset span.field {
	float: left;
	width: 10em;
}

fieldset span.value {
	float: left;
	width: 28em;
}

	fieldset span.value input,
	fieldset span.value textarea {
		width: 90%;
		padding: 3px 6px;
		font-size: 1em;
	}
	
	fieldset span.value input:focus,
	fieldset span.value textarea:focus {
		background: #ffc;
	}
	
	fieldset span.value textarea {
		height: 8em;
	}
	
	fieldset span.value .auto input,
	fieldset span.value input.auto {
		width: auto;
	}
	
		fieldset span.value .auto label {
			float: none;
		}

fieldset .submit {
	display: block;
	clear: both;
	padding: 0.5em;
	padding-left: 10em;
}


/*******************************************************************************
    Footer
*******************************************************************************/
div#footer {
	line-height: normal;
	margin-top: 1em;
	clear: both;
}

	div#footer ul {
		position: relative;
	}

		div#footer ul li {
			display: inline;
			margin-right: 2em;
		}
		
		div#footer ul li.design {
			position: absolute;
			margin-right: 0;
			top: -10px;
			right: 0;
		}
		
			div#footer ul li.design a {
				line-height: 3em;
				padding-right: 60px;
				display: block;
				background: url(../images/css/tripsislogo.png) no-repeat 100% 4px;
				height: 3em;
				line-height: 36px;
				color: #bbbdbf;
			}
		
			div#footer ul li.design span.tripsis {
				text-indent: 1000px;
				display: none;
			}
