html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/** Basic html-elements **/
html,body {	height: 100%; }

body { 
	font: normal 0.625em/1em "Lucida Grande","Lucida Sans", sans-serif;
	/*background: #EDE9DD url(images/cirkels.png) 50% -20px no-repeat;*/
	background: #eeeeee url(images/cirkels.png) 50% -20px no-repeat;
}

body.grid {
	background: white url(grid.png) 50% 0 repeat-y
}
ol, ul { list-style: none }

p {
	font-size: 1.1em;
	line-height: 1.5;
	margin-bottom: 0.5em;
	padding: 6px;
}

h1 { 
	float: left;
	font-size: 4.4em;
	font-family: Helvetica,Arial,"Bitstream Vera Sans",sans-serif;
	line-height: 2;
	letter-spacing: -2px;
	text-shadow: white 2px 1px 0;
}
h1 a:link,
h1 a:visited {
	text-decoration: none;
	color: black;
}
h1 a:hover { color: #594e7a; }
h2 { 
	font-family: Helvetica,Arial,"Bitstream Vera Sans",sans-serif;
	letter-spacing: -2px;
	font-size: 2.8em;
	line-height: 1
}
h3 { 
	font-size: 1.6em;
	line-height: 1
}
a:link,
a:visited { color: blue }
a:hover { color: #594e7a; }

/* Navigation 
   thumbnail images: 126x84px
*/
nav {
	margin-top: 2em;
}

ul#nav {
	position: absolute;
	margin-top: -23px;
	margin-left: 276px;
	}
ul#nav li {
	font-size: 1.4em;
	float: left;
	margin-left: 8px;
}

#nav a {
	display: block;
	width: 134px;
	color: #5e5e5e;
	text-decoration: none;
	padding: 6px 0;
	text-indent: 4px;
}
a#nav-industrial-design.selected { height: 13px }
a#nav-web-design.selected { height: 17px }
a#nav-other.selected { height: 23px }
a#nav-contact.selected { height: 29px }

#nav a:hover { background-color: #333333; color: white }
a#nav-web-design:hover,
a#nav-web-design.selected,
#menu-web-design,
.web-design #meta h2 { 
	color: white;
	background-color: #ff4872;
}
a#nav-industrial-design:hover,
a#nav-industrial-design.selected,
#menu-industrial-design,
.industrial-design #meta h2 {	
	color: white;
	background-color: #674343;
}
a#nav-other:hover,
a#nav-other.selected,
#menu-other,
.other #meta h2 { 
	color: white;
	background-color: black
}
a#nav-contact:hover,
a#nav-contact.selected,
#menu-contact { 
	background-color: #d7d4cd }
#menu-contact p {
	color: black !important;
}
.menu {	min-height: 6px; }
.menu>div {
	display: none;
}
.menu li {
	float:left;
	padding-top: 5px;
	margin-left: 0;
}
.menu-block {
	display: block;
	width: 124px;
	padding: 98px 6px 4px 4px;
	margin-right: 8px;
	margin-bottom: 6px;
	min-height: 80px;
}
.menu-block-wide {
	display: block;
	width: 270px;
	padding: 98px 6px 4px 4px;
	margin-right: 8px;
	margin-bottom: 6px;
	min-height: 80px;
}
a.menu-block {
	color: white;
	text-decoration: none;
}
.menu li a {
	background: transparent url(images/sprite-thumbnails.png) 0 0 no-repeat;
}

.menu li a:hover {
	background-color: #594e7a;/*#666666;*/
}
.menu p {
	padding: 0;
	font-size: 0.975em;
	color: #eeeeee;
}
#nav-contact.menu p {
	color: #333;
}
.menu.selected>div {
	display: block;
}
/*sprites*/
#camera { background-position: 4px 4px }
#omeo { background-position: -130px 4px }
#irisbox { background-position: -264px 4px }
#objectplus { background-position: -398px 4px }
#fseries { background-position: -532px 4px }
#debestekoffie { background-position: -666px 4px }
#studiojspr { background-position: -800px 4px }
#fraai{ background-position: -934px 4px }
#hematology { background-position: -1068px 4px }
#jonosh { background-position: -1202px 4px }
#freeman { background-position: -1336px 4px }
#finger { background-position: -1470px 4px }
#buynewstuff { background-position: -1604px 4px }
#photography { background-position: -1738px 4px }
#wellens {  background-position: -1872px 4px; margin-right: 0 }

/* Layout 
columns: 134px
gutter: 8px
inset: 4px

*/
header, nav, #main, #footer {
	display: block;
	width: 844px;
	margin: 0 auto;
	clear: both;
	padding-top: 1em;
}
#main {
}
nav { padding-top: 2em; }
#meta {
	float: left;
	width: 276px;
	margin-right: 6px;
	background-color: white;
	border: 1px solid #ddd;
}
#meta h2 {
	padding: 4px;
}
#meta ul {
	padding: 6px;
}
#meta ul li {
	font-size: 1.1em;
	line-height: 1.5;
	display: block;
}
#content {
	margin-left: 284px;
	border: solid 1px #ddd;
	background-color: white;
}
#tagline { margin-bottom: 2em;}
#tagline p {
	font-size: 1.2em;
	color: #999;
	margin-left: 568px;
	font-style: italic;
}

/* Footer */
footer {
	padding-top: 120px;
	display: block;
	background: transparent url(images/footer.png) 0 0 repeat-x;
	clear: both;
	color: #ccc;
}
#footer {
	background: transparent url(images/cirkel.png) 100% 0 no-repeat; }
.services li {
	display: inline;
}
.clear { clear: both; }