@charset "utf-8";
/* CSS Document for PepijnOomen.nl - screen version */
/* Copyright 2009 PepijnOomen.nl. All rights reserved */

* {
margin: 0;
padding: 0;
}

html, body {
position: relative;
background: #fff;
}

.clear {
clear: both;
}

#container {
position: relative;
width: 900px;
margin: 0 auto;
}

#header {
position: relative;
height: 160px;
width: 900px;
margin: 0 auto;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
}

#nav {
position: relative;
float: right;
margin: -5px 0 10px 0;
tex-align: right;
list-style: none;
}

#nav li {
position: relative;
margin: 0 0 0 20px;
float: left;
}

#nav li a:link,
#nav li a:visited,
#nav li a:active {
position: relative;
display: block;
text-decoration: none;
color: #111;
font-family: Trebuchet MS, Arial;
font-size: 1.3em;
font-weight: bold;
}

#nav li a:hover {
color: #76B900;
}

#nav ul {
Z-index: 100;
position: absolute;
display: none;
margin: 0 -15px;
padding: 0 0 10px 0;
list-style: none;
background: #fff;
}

#nav li:hover ul {
display: block;
}

#nav ul li {
margin: 0 0 0 0;
padding: 5px 15px;
}

#nav ul li a:link,
#nav ul li a:visited,
#nav ul li a:active {
position: relative;
display: block;
text-decoration: none;
color: #76B900;
font-family: Trebuchet MS, Arial;
font-size: 0.7em;
}

#nav ul li a:hover {
color: #FD001B;
}

#main {
clear: both;
position: relative;
width: 900px;
margin: 0 0 0 0;
}

#left {
position: relative;
float: left;
width: 200px;
margin: 0 0 0 0;
}

#left h2 {
position: relative;
display: block;
color: #fff;
font-family: Trebuchet MS, Arial;
font-size: 1em;
padding: 0.3em 0.5em;
background: #FD001B;
}

#left h3 {
position: relative;
color: #fff;
font-family: Trebuchet MS, Arial;
font-size: 1em;
padding: 0.3em 0.5em;
background: #76B900;
}

#left #thema1,
#left #thema2,
#left #thema3,
#left #thema4 {
position: relative;
width: 200px;
margin: 20px 0 0 0;
}

#content {
position: relative;
float: left;
width: 450px;
margin: 0 0 0 25px;
}

#content h1 {
position: relative;
display: block;
color: #fff;
font-family: Trebuchet MS, Arial;
font-size: 1em;
margin: 0 0 20px 0;
padding: 0.3em 0.5em;
background: #76B900;
}

#content p {
position: relative;
font-family: Trebuchet MS, Arial;
font-size: 0.9em;
line-height: 1.5em;
color: #111;
margin: 0 0 20px 0;
}

#content a:link,
#content a:visited,
#content a:active {
text-decoration: none;
color: #FD001B;
}

#content a:hover {
text-decoration: underline;
}

#content ul,
#content ol {
list-style-position: inside;
position: relative;
font-family: Trebuchet MS, Arial;
font-size: 0.9em;
line-height: 1.5em;
color: #111;
margin: 0 0 20px 0;
}

#content img {
position: relative;
float: left;
margin: 0 15px 20px 0;
}

#content blockquote {
position: relative;
font-style: italic;
margin-left: 20px;
}

#content table {
position: relative;
width: 100%;
border: 0;
font-family: Trebuchet MS, Arial;
font-size: 0.9em;
line-height: 1.5em;
color: #111;
margin: 0 0 20px 0;
}

#content table .chrono {
vertical-align: top;
width: 90px;
}

#right {
position: relative;
float: right;
width: 200px;
margin: 0 0 0 0;
}

#right #foto {
position: relative;
height: 127px;
width: 200px;
margin: 0 0 20px 0;
background-image: url(../images/pepijnoomen.jpg);
background-repeat: no-repeat;
}

#right #sidenav {
list-style: none;
margin: 0 0 1em 0;
}

#right #sidenav h3 {
position: relative;
color: #fff;
font-family: Trebuchet MS, Arial;
font-size: 1em;
padding: 0.3em 0.5em;
background: #76B900;
}

#right #sidenav li {
margin: 0 0 0.5em 0;
}

#right #sidenav li a:link,
#right #sidenav li a:visited,
#right #sidenav li a:active {
font-family: Trebuchet MS, Arial;
font-size: 0.7em;
color: #111;
text-decoration: none;
}

#right #sidenav li a:hover {
text-decoration: underline;
}

#right #sidenav ul {
list-style: none;
margin: 0.5em 0 0 20px;
}

#right #weblog {
position: relative;
width: 200px;
margin: 0 0 0 0;
background: #ccc;
}

#right #weblog h3 {
position: relative;
color: #fff;
font-family: Trebuchet MS, Arial;
font-size: 1em;
padding: 0.3em 0.5em;
background: #FD001B;
}

#right #weblog ul.rss-items {
list-style: none;
padding: 0.5em 0.5em 0.5em 0;
background: #fff;
}

#right #weblog ul.rss-items li.rss-item {
margin: 0 0 0.5em 0;
}

#right #weblog ul.rss-items li.rss-item a:link,
#right #weblog ul.rss-items li.rss-item a:visited,
#right #weblog ul.rss-items li.rss-item a:active {
font-family: Trebuchet MS, Arial;
font-size: 0.7em;
color: #111;
text-decoration: none;
}

#right #weblog ul.rss-items li.rss-item a:hover {
text-decoration: underline;
}

#right #netwerk {
position: relative;
width: 200px;
}

#right #netwerk h3 {
position: relative;
color: #fff;
font-family: Trebuchet MS, Arial;
font-size: 1em;
padding: 0.3em 0.5em;
margin: 0 0 20px 0;
background: #76B900;
}

#right #icons {
position: relative;
height: 40px;
width: 200px;
}

#right #icons #facebook {
position: relative;
float: left;
height: 40px;
width: 40px;
margin: 0 13px 0 0;
background-image: url(../images/facebook.jpg);
background-repeat: no-repeat;
}

#right #icons #facebook a:link,
#right #icons #facebook a:visited,
#right #icons #facebook a:active,
#right #icons #facebook a:hover {
position: relative;
height: 40px;
width: 40px;
display: block;
border: 0;

}

#right #icons #linkedin {
position: relative;
float: left;
height: 40px;
width: 40px;
margin: 0 13px 0 0;
background-image: url(../images/linkedin.jpg);
background-repeat: no-repeat;
}

#right #icons #linkedin a:link,
#right #icons #linkedin a:visited,
#right #icons #linkedin a:active,
#right #icons #linkedin a:hover {
position: relative;
height: 40px;
width: 40px;
display: block;
border: 0;
}

#right #icons #hyves {
position: relative;
float: left;
height: 40px;
width: 40px;
margin: 0 13px 0 0;
background-image: url(../images/hyves.jpg);
background-repeat: no-repeat;
}

#right #icons #hyves a:link,
#right #icons #hyves a:visited,
#right #icons #hyves a:active,
#right #icons #hyves a:hover {
position: relative;
height: 40px;
width: 40px;
display: block;
border: 0;
}

#right #icons #blogger {
position: relative;
float: right;
height: 40px;
width: 40px;
margin: 0 0 0 0;
background-image: url(../images/blogger.jpg);
background-repeat: no-repeat;
}

#right #icons #blogger a:link,
#right #icons #blogger a:visited,
#right #icons #blogger a:active,
#right #icons #blogger a:hover {
position: relative;
height: 40px;
width: 40px;
display: block;
border: 0;
}

#footer {
clear: both;
position: relative;
width: 450px;
margin: 0 auto;
background: #76B900;
}

#footer p {
position: relative;
padding: 1em;
text-align: center;
font-family: Trebuchet MS, Arial;
font-size: 0.7em;
color: #fff;
}

#footer a:link,
#footer a:visited,
#footer a:active {
color: #fff;
}

#footer a:hover {
color: #FD001B;
}