/* 
    Document   : eijkman
    Created on : Mar 25, 2012, 9:02:41 PM
    Author     : Eijkman.com Websites ltd
    Description:
        Purpose of the stylesheet follows.
*/
body {
	font-family:'trebuchet ms', arial, sans-serif;
	font-size:14px;
	color:#666;
	line-height:130%;
	background-color:#d8dfef;
}
#header {
	position:relative;
	z-index:1;
}
#header padding {
	padding:4.3em 2.8em 0 2.15em;
	
}
#header h1 {
	height:3.0em;
	position:relative;
	background-color:#7b8fb9;
	padding:2.15em 0 0.45em 0;
}
#header hgroup {
	position:relative;
	z-index:1;
}
#header h1 span {
	max-width:890px;
	margin:0 auto;
	display:block;
	position:relative;
	font-family:'gill sans', tahoma, sans-serif;
	font-size:3em;
	line-height:100%;
	color:#193476;
	font-weight:bold;
	font-weight:normal;
	text-indent:-10000px;
	text-transform:uppercase;
	background:transparent url(../portfolio-images/eijkman-dot-com-websites-ltd.png) 2px 0 no-repeat;
}
#header h2 {
	height:23px;
	width:100%;
	position:relative;
	background-color:#98a7c6;
	padding:10px 0 13px 0;
}
#header h2 span {
	display:block;
	position:relative;
	max-width:890px;
	margin:0 auto;
	font-family:'trebuchet ms', arial, sans-serif;
	font-size:23px;
	line-height:23px;
	color:#5870a3;
	font-weight:bold;
	font-weight:normal;
	padding-left:1px;
}

/* --- menu --- */

#header div#nav {
	position:relative;
	xheight:3.2em;
	border-top:1px solid #fff;
	background-color:#98a7c6;
	-moz-box-shadow: 1px 0px 3px #666;
	-webkit-box-shadow: 1px 0px 3px #666;
	box-shadow: 1px 0px 3px #666;
	z-index:0;
}
#header .nav {
	display:block;
	position:relative;
	max-width:960px;
	margin:0 auto;
	text-align:center;
	min-height:48px;
}
#header #nav span.arrow  {
	color:#f5f8fe;
	font-size:64px;
	line-height:48px;
	width:40px;
	display:block;
	float:left;
	font-family:arial, sans-serif;
	margin:-0.1em 0 0.05em 0;
	font-weight:normal;
}
.ie7 #header #nav span.arrow  {
	margin-top:-5px;
}
#header #nav span.arrow.right {
	float:right;
}
#header #nav div.center {
	display:inline;
	text-align:center;
	max-width:880px;
	padding-top:0.7em;
	width:auto;
}

#header #nav ul.group {
	display:inline-block;
	padding:0;
	width:auto;
	margin:0 auto;
}
#header #nav ul.group.first {
	padding:0.7em 0 0 0;
}

html.ie6 #header #nav ul.group {
	display:inline; /* untested*/
}
html.ie7 #header #nav ul.group {
	display:inline; /* untested*/
}

.clearFloat {
	clear:both;
}
#header #nav li.category {
	padding:10px 0 10px 15px;
	line-height:22px;
	font-size:22px;
	color:#000033;
	font-family:'times new roman', times, serif;
	text-decoration:none;
	cursor:default;
	text-align:center;
	display:inline;
	white-space:nowrap;
	list-style-type: none;
}	
#header #nav li.category#A {
	padding-left:0;
}
#header #nav li.category span.dot {
	color:#f5f8fe;
	font-family:'times new roman', times, serif;
	font-size:64px;
	line-height:30px;
	padding-left:15px;
	text-align:center;
	vertical-align:text-top;
}

	
#header #nav li.category.disabled {
	color:#d8dfef;
	cursor:pointer;
}
#header #nav li.category.disabled:hover span {
	text-decoration:underline;
}
#header #nav li.category:hover span.dot  {
	text-decoration:none;
}
.ie8 #header #nav li.category span.dot  {
	display:inline-block;
}
/* --- content --- */

div.content {
	clear:both;
	max-width:890px;
	top:-10px;
	display:block;
	margin:0 auto;
	position:relative;
	z-index:0;
	background-color:#fff;
	-moz-box-shadow:1px 2px 4px #999;
	-webkit-box-shadow:1px 2px 4px #999;
	box-shadow:1px 0 4px #999;
	border:1px solid #d0d0d0;
	padding:60px 40px 0 30px;
	min-height:800px;
}
div.content div.leftAlign {
	float:left;
	position:relative;
	width:68.54%;
	max-width:610px;
	margin-right:4.25em;
}
div.content .section {
	width:100%;
	max-width:610px;
}
div.content h2 {
	font-family:'times new roman', times, serif;
	font-size:280%;
	line-height:100%;
	color:#193476;
	font-variant:small-caps;
	font-weight:normal;
	padding: 0.35em 0;
}
div.content h2 span {
	white-space:nowrap;
}
div.content div.hgroup, div.content h2.hgroup {
	display:block;
	margin:0 0 0.63em 0;
	border-bottom:2px solid #193476;
	zoom:1;
}
div.content div.hgroup {
	margin-bottom:0.7em;
}
div.content .hgroup h2 {
	position:relative;
	float:left;
	line-height:1.25em;
	margin-left:0.25em;
}
div.content .hgroup h2 a {
	text-decoration:none;
	color:#193476;
}

div.content .article ul.categories {
	float:right;
	margin:0;
	padding:0 0.35em 0.35em 0;
}
div.content ul.categories li {
	position:relative;
	float:left;
	width:44px;
	height:44px;
	margin-right:5px;
	background:transparent url(../portfolio-images/work-categories.png) 0 0 no-repeat;
	text-align:center;
	list-style:none;
}
div.content ul.categories li.agency{background-position:-44px 0;}
div.content ul.categories li.client-side{background-position:-88px 0;}
div.content ul.categories li.server-side{background-position:-132px 0;}
div.content ul.categories li.design{background-position:-176px 0;}
div.content ul.categories li.web{background-position:-220px 0;}
div.content ul.categories li.print{background-position:-264px 0;}

div.content ul.categories li span {
	font-size:2.15em;
	line-height:150%;
	color:#193476;
	font-family:'gill sans', tahoma, sans-serif;
	text-indent:-10000px;
	display:block;
}

div.content .article p.date {
	font-family:'times new roman', times, serif;
	text-align:right;
	font-weight:bold;
	margin:0 0.7em 0.35em 0;
	padding:0;
}

div.content .article {
	display:block;
	position:relative;
	margin-bottom:4.25em;
}

div.content .article p, div.content .article ul {
	margin:0 0 1em 0;
	padding:0 2.8em 0 0.7em;
}
div.content .article div.dl {
	margin:0 0 1em 0;
	padding:0 2.8em 0 0.7em;
}
div.content .article dl {
	margin:0;
	padding:0;
	display: grid;
	grid-template-columns: 1fr 100%;
}
div.content .article dt { /* for iOS*/
	font-size:140% !important;
	line-height:0.75em;
	width:4.0em;
	float:left;
	display: block;
	margin:0 0 0 0;
	vertical-align:top;
	clear:left;
}
.ie7 div.content .article dt {
	margin-top:-6px;
	padding-bottom:5px;
}
div.content .article dt span { /* for iOS*/
	font-size:14px !important;
	line-height:18px;
}
div.content .article dd {
	/* RE IE position:relative;*/
	max-width:470px;
	font-size:1em !important;
	padding:0;
	line-height:1.3em;
	color:#666;
	vertical-align: top;
}
div.content .article a{
	color:#4a6197;
	text-decoration: underline;
}
div.content .article a:hover {
	color:#000;
}

div.content .article img {
	border:1px solid #d5dbe8;
	padding:0.6em;
	margin-left:0.35em;
	max-width:590px;
	width:97%;
}

/* --- sidebar --- */
.ie7 div.content #aside {
	margin-right:16px
}
div.content #aside {
	width:22.47%;
	max-width:200px;
	min-width:151px;
	position:absolute;
	right:2em;
}

div.content #aside p {
	padding-right:10px;
}
div.content #aside ul{
	padding-left:0;
	width:190px
}
div.content #aside li {
	list-style-type: disc;
	margin-bottom:2px;
	height:19px;
	list-style-position:inside;
	padding:0 2px 0 10px;
	line-height:14px;
	padding-top:3px;
	color:#5870a3;
	cursor:pointer;
}
div.content #aside li.selected {
	background-color:#f0f0f0;
	color:#000033;
}

html.ie6 div.content #aside li, html.ie7 div.content #aside li {
	list-style-position:outside;
}