/****************************************************************************

atelier 124 - main stylesheet 
v.1 - May 2009 - domenica lucifora - kontakt@deeluxe.de


TABLE OF CONTENTS
-----------------

	- reset styles
	- base
	- grid
	- elements
		- general
		- contactform
		- vcard
		- slider
		- error
	- navigation
		- main
		- portfolio
		- slider
		- footer
	- fontsizes
	- helpers
	
	
COLOR DEFINITION
----------------

	Curry (border), error				#d7cf00
	Red/Pink (highlights, logo)			#b5113e
	light grey (background)				#e6e6e6
	Grey (navigation)					#b1b3b4
	Middlegray (slider)					#868889
	Middlegray (cites)					#919191
	Darkgrey (text)						#1a171b


*****************************************************************************/

/* import */

@import url(jquery.lightbox-0.5.css);


/* --- RESET - ERIC MEYER --- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a img { border: none; }
a { outline: none; text-decoration: none; }
legend, caption { display: none; }
em { font-style: italic; }

/* --- BASE --- */

body, html { height: 100%; }
body {
	background: #e6e6e6;
	color: #1a171b;
	font: 12px Arial, Helvetica, sans-serif;
	line-height: 140%;
	text-align: center;
}

a { color: #1a171b; }

/* --- GRID --- */

div.grid-content {
	background: #fff;
	border: 3px solid #d7cf00;
	border-top: 0;
	margin: 0 auto;
	text-align: left;
	width: 63em;
}
div.grid-head {
	height: 120px;
	position: relative;
}
div.grid-footer {
	background: #d7cf00;
	color: #fff;
	display: block;
	float: right;
	margin-top: 30px;
	padding-top: 5px;
	text-align: right;
	width: 100%;
}
div.accessibility {
	display: none;
}

/* --- ELEMENTS --- */

/* - general - */

h1.logo {
	background: url(../images/layout/bg_logo.png) no-repeat left top;
	display: block;
	float: left;
	height: 141px;
	left: -50px;
	position: absolute;
	text-indent: -8000px;
	width: 150px;
}
		h1.logo a {
			display: block;
			height: 141px;
			width: 150px;
		}
h2.claim {
	font-weight: 700;
	margin-top: 100px;
	padding: 0 0 0 175px;
	text-transform: uppercase;
}
		h2.claim span {
			display: block;
			font-weight: 400;
			margin-bottom: 13px;
		}
h2,
h3,
h4,
h5,
h6 {
	margin: 10px 0;
	padding-left: 175px;
}
h4,
h5 {
	font-weight: 700;
}
h6 {
	font-style: italic;
}
blockquote {
	border-left: 3px solid #b5113e;
	color: #919191;
	font-style: italic;
	margin: 5px 0 20px 175px;
	padding: 0 25px 0 20px;
}
		blockquote p {
			margin: 0;
			padding: 0 !important;
		}
p {
		padding: 0 50px 10px 175px;
}

/* wraps some special markup for the portfolio */

div.portfolio {
	color: #868889;
}
	div.portfolio ul {
	margin: 0 45px 1em 175px;
	padding: 0;
}
		div.portfolio li {
			border-right: 1px solid #868889;
			float: left;
			list-style: none;
			margin: 0 5px 2px 0;
			padding-right: 5px;
		}
ul {
	padding: 6px 50px 12px 192px;
}
.portfolio a {
	color: #868889;
	text-decoration: none;
}
		a:hover {
			color: #b5113e;
		}


/* - contact - */

form {
	background: #b1b3b4;
	padding: 20px 20px 20px 175px;
}

input, textarea {
	background: #ededed;
	border: 1px solid #b5113e;
	margin: 0 0 5px 0;
	width: 537px;
}
		textarea {
			height: 120px;
		}
		input:focus, textarea:focus {
			background: #fff;
			border: 1px solid #b5113e;
		}
		input.zemSubmit {
			background: #b5113e;
			color: #fff;
			float: right;
			font-weight: 700;
			margin-right: 21px;
			padding: 3px;
			width: 206px;
		}
label {

}

/* - vcard - */

div.vcard {
	display: inline;
}


/* - slider - */

div.slider {
	background: #868889;
	clear: both;
	height: 210px;
	margin-top: 3em;
	overflow: auto;
	position: relative;
	width: 63em;
	z-index: 2;
}
		.slider ul {
			margin: 0;
			padding: 0;
			position: relative;
			z-index: 1;
			width: 20000px;
		}
		.slider ul li {
			float: left;
			height: 210px;
			list-style: none;
			padding-left: 15px;
			width: 63em;
		}
				.slider ul li img {
					float: left;
					margin: 15px 15px 15px 0;
				}
		.slider h2 {
			color: #fff;
			margin: 15px 20px 5px 0;
			padding-left: 0;
		}
		.slider p {
			color: #fff;
			margin: 3px 5px 5px 0;
			padding-left: 0;
		}
		


/* - error message - */

h3.error-status,
p.error-msg {
	color: #b5113e;
}

/* --- NAVIGATION --- */

/* - main - */

ul.navigation-main {
	float: right;
	padding: 0;
	width: 58%;
}
		.navigation-main li {
			float: left;
			list-style: none;
			margin: 5.3em 0 0 28px;
		}
				.navigation-main li.current a {
					background: #b5113e;
				}
				.navigation-main li a {
					background: #b1b3b4;
					color: #fff;
					display: block;
					padding: 10px 0 0 10px; /* give ie6 1px padding bottom for not showing a thin line */
					height: 5em;
					text-decoration: none;
					width: 7.4em;
				}
						.navigation-main li a:hover {
							background: #868889;
							color: #fff;
						}


/* - portfolio - */

ul.list-subnavigation {
	margin: 0 45px 1em 175px;
	padding: 0;
}
		.list-subnavigation li {
			border-right: 1px solid #b5113e;
			float: left;
			list-style: none;
			margin: 0 5px 2px 0;
		}
				.list-subnavigation li a {
					color: #1a171b;
					padding: 0 5px 0 0;
					text-decoration: none;
				}
						.list-subnavigation a:hover {
							color: #b5113e;
						}


/* slidernavigation */

ul.list-slidernavigation {
	margin: 10px;
	padding: 0;
}
		.list-slidernavigation li {
			display: block;
			list-style: none;
			height: 15px;
			text-indent: -8000px;
			width: 13px;
		}
		li.forward {
			float: right;
		}
		li.backward {
			float: left;
		}
				li.forward a {
					background: url(../images/layout/btn_arrowright.gif) no-repeat left top;
					display: block;
					height: 15px;
					width: 13px;
				}
						li.forward a:hover {
							background: url(../images/layout/btn_arrowright_ov.gif) no-repeat left top;
						}
				li.backward a {
					background: url(../images/layout/btn_arrowleft.gif) no-repeat left top;
					display: block;
					height: 15px;
					width: 13px;
				}
						li.backward a:hover {
							background: url(../images/layout/btn_arrowleft_ov.gif) no-repeat left top;
						}


/* - footer - */

.grid-footer a {
	color: #fff;
}
		.grid-footer a:hover {
			text-decoration: underline;
		}



/* --- FONTSIZES --- */

.slider h2,
h3.error-status 						{ font-size: 1.6em; }
h2,
h3										{ font-size: 1.2em; }
.navigation-main a,
h4										{ font-size: 1.1em; }
p,
h5,
h6										{ font-size: 1em; }
h2.claim span							{ font-size: .9em; }


/* --- HELPER --- */

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