/**
 * Title: Vo-Ho
 * Description: This stylesheet defines the default layout of vo-ho.nl
 * Copyright: Pronamic
 * Company: Pronamic
 * Author: Remco Tolsma, Karel-Jan Tolsma
 * Version: 1.0
 */

body {
	color: #444;

	font: 80%/1.5 Arial, Helvetica, sans-serif;

	margin: 10px 0 0 0;
}

/**
 * Global
 */
p {
	margin: 0 0 15px 0;
}

img {
	border: 0;
}

form {
	margin: 0;
}

strong {
	font-size: 14px;
}

/**
 * Anchors
 */
a {
	color: #1757b1;

	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.view-more-link {
	background: url("view-more.gif") no-repeat left;

	font-size: 14px;
	font-weight: bold;

	padding: 1px 0 1px 25px;
}

/**
 * Headings
 */
h1, h2, h3, h4 {
	font-weight: normal;

	margin: 0 0 10px 0;
	padding: 0;

	line-height: 100%;
}

h2 {
	color: #1757B1;

	font-size: 30px;
}

h3 {
	color: #4A8800;

	font-size: 24px;
}

h4 {
	font-size: 18px;
}

/**
 * Table
 */
table {
	border-collapse: collapse;

	color: #0A0A0A;

	width: 100%;
}

thead {
	background: #EFF1F0;
}

th, 
td {
	padding: 10px;

	text-align: left;
}

/**
 * Other
 */
hr {
	display: none;
}

.clear {
	clear: both;
}

/**
 * Form
 */
input, 
textarea, 
select {
	border: 1px solid #CDCDCD;

	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;

	padding: 5px;
}

input:hover, 
textarea:hover,
select:hover {
	border-color: #1757B1;
}

input.text:focus, 
textarea:focus.
select:focus {
	border-color: #333;
}

form .required-indicator {
	color: #F00;
}

form .field {
	clear: left;

	margin: 1em 0;
}

form label {
	cursor: pointer;
}

#core form label { 
	display: block;

	float: left;

	padding: 6px 0;

	width: 12.5em;
}

form .form-actions,
form .error {
	margin-left: 12.5em;

	color: #d20000;
}

/* Fieldset */
fieldset {
	border: 1px solid #D7D7D7;

	margin: 1em 0;
	padding: 0 20px;
}

legend {
	color: #1757b1;

	font-size: 14px;
	font-weight: bold;

	margin: 0;
	padding: 0;
}

/**
 * Newsletter Form
 */
#bottom form label { 
	display: block;

	float: left;

	width: 6em;
}

#bottom form .field {
	margin: 1em 0;
}

#bottom form label {
	width: 8em;
}

#bottom form .form-actions {
	margin-left: 8em;
}

/**
 * Container
 */
.container {
	margin: 0 auto;

	width: 955px;
}

/**
 * Name
 */
#name {
	float: left;

	margin: 10px 0;
}

#name a {
	background: url("logo.gif") no-repeat center center;

	display: block;

	width: 248px;
	height: 80px;

	overflow: hidden;

	text-indent: -1000em;
}

/**
 * Site assistent
 */
#site-assistent {
	float: right;

	margin-top: 65px;
}

/**
 * Login
 */
#login {
	clear: right;
	float: right;
}

/**
 * Menu
 */
#menu {
	background: url("menu/back.gif") no-repeat;

	margin: 0 -20px 10px -28px;

	padding: 0 50px;

	width: 903px;
	height: 68px;
}

#menu ul {
	float: left;

	list-style: none;

	margin: 0;
	padding: 21px 0;
}

#menu li {
	float: left;

	padding: 5px 14px;

	border-right: 1px solid #3870bd;
}

#menu a {
	background-repeat: no-repeat;

	color: #FFF;

	display: block;

	height: 16px;
}

#menu a span {
	display: none;
}

#menu-item-home { width: 41px; background-image: url("menu/home.gif"); }
#menu-item-over { width: 83px; background-image: url("menu/over.gif"); }
#menu-item-onderwijs { width: 70px; background-image: url("menu/onderwijs.gif"); }
#menu-item-activiteiten { width: 80px; background-image: url("menu/activiteiten.gif"); }
#menu-item-voor-leerlingen { width: 106px; background-image: url("menu/voor-leerlingen.gif"); }
#menu-item-lob { width: 25px; background-image: url("menu/lob.gif"); }
#menu-item-vakken { width: 49px; background-image: url("menu/vakken.gif"); }
#menu-item-decanendag { width: 84px; background-image: url("menu/decanendag.gif"); }
#menu-item-contact { width: 56px; background-image: url("menu/contact.gif"); }
#menu-item-steunpunten { width: 89px; background-image: url("menu/steunpunten.gif"); }
#menu-item-bijeenkomsten { width: 167px; background-image: url("menu/netwerk-bijeenkomsten.gif"); }
#menu-item-nieuwsbrief { width: 86px; background-image: url("menu/nieuwsbrief.gif"); }
#menu-item-bestanden { width: 71px; background-image: url("menu/bestanden.gif"); }

#menu a.active, 
#menu a:hover {
	background-position: bottom left;
}

/**
 * Main
 */
#main {
	background: url("main.gif") repeat-y;

	margin-bottom: 15px;
}

/**
 * Core
 */
#core { 
	float: right;

	position: relative;

	width: 630px;
}

#home {
	min-height: 330px;
	width: 375px;
}

/**
 * Articles
 */
.article {
	background-color: #eff1f0;

	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;

	float: left;

	min-height: 140px;

	padding: 10px;
	margin-right: 20px;

	width: 285px;
}

.article.last {
	margin: 0;
}

.article h4 {
	margin-bottom: 0;
}

.article h4 a {
	color: #000;

	font-size: 14px;
	font-weight: bold;
}

.article p {
	margin: 10px 0;
}

.article p.date {
	color: #999;

	font-size: 11px;

	margin: 0;
}

/**
 * Hook
 */
 #hook {
	background: url("image.png") no-repeat;

	position: absolute;
	top: -43px;
	right: -30px;

	width: 284px;
	height: 383px;
 }

/**
 * Intro
 */
#intro {
	background: url("over-ons.jpg") no-repeat;

	padding: 10px 20px 0 220px;
	margin-bottom: 15px;

	min-height: 160px;
}

/** 
 * Extra
 */
#extra {
	float: left;

	width: 289px;
}

#extra h3 {
	font-size: 30px;
}

#extra h4 {
	color: #4a8800;

	font-size: 24px;
}

/**
 * Twitter
 */
a#twitter {
	background: url("twitter.gif");

	display: block;

	margin-top: 10px;

	overflow: hidden;

	text-indent: -10000px;

	width: 289px;
	height: 50px;
}

/**
 * Submenu
 */
.section {
	background-color: #EFF1F0;

	padding: 0 15px 5px 15px;
}

.section ul {
	margin: 0 0 15px 0;
	padding: 0;

	list-style-type: none;
}

.section li {
	background: url("arrow.gif") no-repeat 0 14px;

	border-bottom: 1px solid #DCDDDC;

	padding: 8px 10px;
}

.section li.inactive {
	color: #b2b2b2;
}

.section li span {
	display: block;
}

.section li a.active {
	font-weight: bold;
}

.section-top {
	background: url("section-top.gif") no-repeat;

	width: 289px;
	height: 10px;
}

.section-bottom {
	background: url("section-bottom.gif") no-repeat;

	width: 289px;
	height: 10px;
}

/**
 * Item
 */
.item {
	margin: 10px 0;
}

/**
 * Wegwijsdag
 */
 #categories {
	margin-bottom: 20px; 
 }
 
#categories .category {
	display: block;

	float: left; 

	margin-right: 10px; 

	overflow: hidden;

	width: 145px; 
	height: 200px;

	text-indent: -10000px;
}

#categories .category-3 { background: url('workshops-categories/category-3.gif'); }
#categories .category-4 { background: url('workshops-categories/category-4.gif'); }
#categories .category-5 { background: url('workshops-categories/category-5.gif'); }
#categories .category-6 { background: url('workshops-categories/category-6.gif'); }

#categories .category.active, 
#categories .category:hover {
	background-position: bottom;
}

#categories .category.last {
	margin: 0;
}

/* Workshop */
.workshop {
	border-bottom: 1px solid #E0E4E1;

	margin-bottom: 1em;
}

/**
 * News
 */
#news {
	border-top: 1px solid #d7d7d7;

	margin-bottom: 15px;
	padding-top: 10px;
}

#news img {
	margin: 5px 0;
}

#news h3 {
	margin: 0;
}

#news h3 a { color: #4A8800; }
#news h3 a:hover { color: #1757B1; text-decoration: none; }

#news .col {
	float: left;

	width: 305px;

	margin-right: 20px;
}

#news .col.last {
	margin: 0;
}

/**
 * Bottom
 */
#bottom-wrap {
	background: #E0E4E1;

	padding: 15px 0;
}

#bottom {
	background: url("bottom.gif") repeat-y;
}

#bottom .col {
	float: left;

	width: 305px;
	
	margin-right: 20px;
}

#bottom .col.last {
	margin: 0;
}

#bottom ul {
	list-style: none;

	margin: 0 0 10px 0;
	padding: 0;
}

#bottom ul li {
	background: url("arrow.gif") no-repeat 0 50%;

	display: block;

	padding: 2px 0 2px 10px;
}

/* Newsletter */
#bottom label {
	display: block;

	margin-bottom: 10px;
}

#bottom h4.newsletter {
	background: url("newsletter-icon.gif") no-repeat;

	padding: 8px 0 8px 45px;
}

/**
 * Foot
 */
#foot {
	color: #9E9E9E;

	padding: 10px 0;
}

/* Copyright */
#copyright {
	float: left;
}

/* Pronamic */
#pronamic {
	float: right;
}