/**
 * Layout.css - Global styles
 * 
 * @author  Webstores <info at webstores dot nl>
 *          Copyright (c) Webstores internet totaalbureau <http://www.webstores.nl/>
 */

/* General */

body {
	margin: 0;
	padding: 0;
	background: #ECF3FA url(../img/achtergrond.jpg) top center repeat-x;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	color: #666;
}

a {
	color: #1D8FD5;
}

a:hover {
	color: #333;
}

blockquote {
	margin: 10px 30px;
}

h1, h2, h3, h4, h5, h6 {
	color: #007931;
}

h1 {
	margin: 0 0 20px;
	font-size: 24px;
}

h2 {
	margin: 0 0 10px;
	font-size: 18px;
}

h3 {
	margin: 0 0 8px;
	font-size: 18px;
}

h4 {
	margin: 0 0 6px;
	font-size: 16px;
}

h5 {
	margin: 0 0 4px;
	font-size: 14px;
}

h6 {
	margin: 0 0 2px;
	font-size: 12px;
}

img {
	border: 0;
}

ol, ul {
	margin: 0 0 20px;
	padding: 0 0 0 30px;
	line-height: 160%;
}

p {
	margin: 0 0 20px;
	line-height: 160%;
}


/* Table styles */

table {
	margin: 10px 0 20px;
	width: 100%;
}

td {
	padding: 8px;
	border-bottom: 1px solid #DDD;
}

th, thead td {
	padding: 8px;
	background-color: #DDD;
	border-bottom: 1px solid #9E9E9E;
	font-weight: bold;
	text-align: left;
}


/* Form styles */

form ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

form li {
	margin: 0 0 10px;
}

form li.indent {
	padding-left: 150px;
}

form li.last {
	margin: 0;
}

fieldset {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}

legend {
	display: none;
}

input.text {
	margin-right: 2px;
	padding: 4px;
	border: 1px solid #CCC;
	font: 11px Arial, Helvetica, sans-serif;
	vertical-align: middle;
}

input.extra-small {
	width: 40px;
}

input.small {
	width: 60px;
}

input.medium {
	width: 125px;
}

input.large {
	width: 200px;
}

input.extra-large {
	width: 275px;
}

input.focus {
	color: #333 !important;
}

input.toggle-value { color:#999;}

input.wsv-error,
textarea.wsv-error {
	border-color: #CC0000;
}

label.indent {
	display: -moz-inline-box;
	display: inline-block;
	width: 150px;
}

textarea {
	padding: 4px;
	width: 275px;
	height: 150px;
	border: 1px solid #CCC;
	font: 11px Arial, Helvetica, sans-serif;
	vertical-align: top;
}


/**
 * GENERAL CLASSES
 * ----------------------------------------
 */

.accent {
	color: #999;
}

.intro {
	font-size: 14px;
}

.date {
	font-size:10px;
	color: #007931;
}

.date.detail {
	margin-bottom: 10px;
}

.caps {
	text-transform:uppercase;
}

.hidden {
	visibility: hidden;
}

.icon {
	text-transform:uppercase;
	padding-right:14px;
	text-decoration:none;
	background:url(../img/arrow-sprite.png) 100% -94px no-repeat;
	color:#007931;
}

a.icon:hover {
	color:#4CA16E;
	background-position: 100% -44px;
}

/* Button stijlen */

a.button {
	display:inline-block;
	padding-left:10px;
	background:url(../img/button-sprite.png) 0 0 no-repeat;
	text-decoration:none;
	color:white;
}

.button-inner {
	height:30px;
	line-height:30px;
	display:block;
	background:url(../img/button-sprite.png) 100% 0 no-repeat;
	padding-right:30px;
}

a.button:hover {	background-position: 0 -30px; color:#007931;}
.button:hover .button-inner { background-position: 100% -30px; }
a.button.blue {	background-position: 0 -60px; }
.button.blue .button-inner { background-position: 100% -60px; }
a.button.blue:hover {	background-position: 0 -90px; color:#9FC0E5;}
.button.blue:hover .button-inner { background-position: 100% -90px; }
a.button.reversed {	background-position: 0 -120px; padding-left:30px; }
.button.reversed .button-inner { background-position: 100% -120px; padding-right:10px; }
a.button.reversed:hover { background-position: 0 -150px; color:#007931; }
.button.reversed:hover .button-inner { background-position: 100% -150px; }

a.button.stretch { display:block; }

/**
 * LAYOUT ELEMENTS
 * ----------------------------------------
 */

#wrapper {
	margin: 45px auto 0;
	width: 990px;
}

#header {
	position:relative;
	height: 180px;
	z-index:300;
}

#main {
	width: 100%;
	background:#F5F9FC url(../img/sidebar-shadow.png) 241px 0 no-repeat;
}

#content-wide {
	width:740px;
	background-color:white;
	overflow:hidden;
}

#sidebar {
	margin-right: 10px;
	width: 240px;
	position:relative;
}

#content {
	margin-right: 10px;
	padding: 20px 10px 0px 20px;
	width: 460px;
}

#mediabar {
	width: 230px;
	padding: 10px 0;
}

#footer {
	padding: 0 15px 0 270px;
	height: 40px;
	color: #4CA16E;
	font-size:10px;
}

.column {
	float: left;
}

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


/**
 * HEADER ELEMENTS
 * ----------------------------------------
 */

#logo {
	display: block;
	width: 250px;
	height: 180px;
}

#logo img {
	display: block;
}

#header-copy {
	width: 740px;
}

#page-visual img {
	display:block;
}

/**
 * CONTENT WIDE ELEMENTS
 * ----------------------------------------
 */

/* Homepage Visual */

#homepage-visuals {
	width:490px;
	height:280px;
	position:relative;
	overflow:hidden;
}

#homepage-visuals .items {
	width:9999px;
	position:absolute;
}

#homepage-visuals img {
	display:block;
	float:left;
}

#homepage-intro {
	width:210px;
	height:240px;
	padding:20px;
	background:#A0C1E6;
}

#homepage-intro h1,
#homepage-intro p,
#homepage-intro a { color:white; }

#homepage-intro h1 { text-transform:uppercase; margin-bottom:12px; }
#homepage-intro a.icon { background-position: 100% -194px; }
#homepage-intro a.icon:hover { text-decoration: underline; }

/* Homepage Tabs */

div.homepage {
	background:url(../img/homepage-bg.png);
}

#homepage-tab-wrap {
	width: 490px;
}

#homepage-tabs  {
	margin:0;
	padding:0;
	height:40px;
	list-style:none;
}

#homepage-tabs  li {
	float:left;
}

#homepage-tabs a {
	display:block;
	width:225px;
	height: 40px;
	line-height:40px;
	padding-left:20px;
	color:#4CA16E;
	text-transform:uppercase;
	text-decoration:none;
	font-size:14px;
	
}

	#homepage-tabs a {
		outline:none;
	} 
	
	#homepage-tabs .left a { background:url(../img/homepage-tabs-sprite.png) 100% -40px no-repeat; }
	#homepage-tabs .right a { background:url(../img/homepage-tabs-sprite.png) 0 0 no-repeat; }

#homepage-tabs .selected a {
	position:relative;
	color:#007931;
	background:none;
	margin-top:-3px;
	border-top:3px solid #A0C1E6;
}

/*#homepage-panes {
	width: 100%;
	overflow:hidden;
}*/

#homepage-panes div {
	padding:20px;
	position:relative;
}

/*#left-tab { background: url(../img/visuals/gezelschapsdieren.jpg) 100% 100% no-repeat; }*/
#left-tab { background: url(../img/visuals/gezelschapsdieren2.jpg) 210px 40px no-repeat; }
#right-tab { background: url(../img/visuals/landbouwhuisdieren.jpg) 280px 0px no-repeat; }

#homepage-panes a.button {
	position:absolute;
	bottom:10px;
	right:10px;
	z-index:10;
}

#homepage-panes p {margin-bottom: 10px; margin-right:225px;}
#homepage-panes ul { list-style:none; padding:6px 0 0;margin:0; background: url(../img/yes.gif) 0 0 no-repeat;margin-right:225px;}
#homepage-panes ul li {background: url(../img/bullet.gif) 5px 10px no-repeat; padding-left:20px;}

/* Homepage Accordion */

#homepage-accordion {
	background: url(../img/homepage-accordion-bg.png) 0 0 no-repeat;
	padding:10px;
	min-height:180px;
}

#accordion {
	width: 230px;
}

#accordion a.head {
	display:block;
	height:30px;
	background:url(../img/accordion-sprite.png) 0 -30px no-repeat;
	color:#4CA16E;
	line-height:30px;
	text-decoration:none; 
	padding-left:20px;
	margin: 0 0 4px;
}

#accordion a.head:hover {
	background-position: 0 -60px; color:white;
}

#accordion a.head.ui-state-active {
	background-position:0 0 ;
	color:#fff;
	margin: 0;
}

#accordion div {
	padding:14px 0 4px;
	margin: 0 0 4px;
	font-size:10px;
	color:#007931; 
	background: #E5F1EA url(../img/accordion-sprite.png) -230px 100% no-repeat;
}
	#accordion div.route {padding:0; }
	#accordion div.last {margin-bottom:0;}

#accordion p {
	margin: 0 20px 10px;
}

#accordion p a {
	color:#007931;
	text-decoration:none;
}

#accordion p a:hover {text-decoration:underline;}

#map-form fieldset {
	padding:10px;
	margin:0;
}

#map-form label {
	display:block;
	margin-bottom:10px;
}

#map-form input {
	display:inline-block;
}

#map-form #map-zipnum {
	width: 28px;
}

#map-form #map-zipchar {
	width:18px;
}

#map-form button {
	background:none;
	border:none;
	padding-right:10px;
	background:url(../img/arrow-sprite.png) 100% -94px no-repeat;
	color:#007931;
	font-family:arial, helvetica, sans-serif;
}

#map-form button:hover {
	cursor:pointer;
}

#accordion div#newsletter-header {
	background:none;
}

p#newsletter-header {
	margin:0 10px 10px;
}

#newsletter-form {
	padding-left:12px;
}

#newsletter-form li.indent {
	padding-left: 65px;
}

#newsletter-form label.indent {
	width: 65px;
}

#newsletter-form button {
	background:none;
	border:none;
	padding-right:10px;
	background:url(../img/arrow-sprite.png) 100% -94px no-repeat;
	color:#007931;
	font-family:arial, helvetica, sans-serif;
}

#newsletter-form button:hover {
	cursor:pointer;
}

/**
 * CONTENT ELEMENTS
 * ----------------------------------------
 */

.article {
	margin: 0 0 20px;
	padding: 0 0 20px;
	width: 100%;
	overflow: hidden;
	border-bottom:1px solid #E5F1EA;
}

.article-thumb {
	display: block;
	float: left;
	margin: 25px 20px 0 0;
	width: 100px;
	height: 100px;
}

.article-thumb img {
	display: block;
}

.article-body {
	float: left;
	width: 340px;
}

.article-body .date,
.article-body h2 {
	margin: 0 0 5px;
}

.article-body p {
	margin: 0 0 10px;
}

.article-body h2 a { text-decoration: none; color:#007931;}

/* Toolbar */

.toolbar {
	margin: 0 0 20px;
	text-align:right;
	height:40px;
	width:100%;
	overflow:hidden;
}

/* Related */

.related h3 { margin:0 0 15px; }

.related ul {
	list-style:none;
	margin:0 0 20px;
	padding:0;
}

.related ul a {
	display:block;
	text-decoration:none;
	line-height:100%;
	padding: 8px 0;
}

.related ul a .date,
.related ul a .title,
.related ul a .icon {
	font-size:12px;
	display:inline-block;
}

.related ul a .date { width: 120px; font-size:10px; color:#666;}
.related ul a .title { width: 230px; color:#007931;}
.related ul a .icon { width: 80px; text-align:right; }

.related ul a:hover .date,
.related ul a:hover .title { color:#4CA16E; }
.related ul a:hover .icon { color:#4CA16E; background-position: 100% -44px; }

/* Pagination */

.pagination {
	width: 450px;
	height:30px;
	padding:10px;
	background:url(../img/pagination-bg.png) no-repeat;
	margin-bottom:20px;
}

.pagination div {
	width: 100px;
	float:left;
	line-height:30px;
}

.pagination .next-link { text-align:right; }

.pagination ol {
	width: 250px;
	float:left;
	list-style:none;
	margin:0;padding:0;
	text-align:center;
}

.pagination li {
	display:inline;
}

.pagination li a {
	display:inline-block;
	width: 30px;
	height:30px;
	line-height:30px;
	text-decoration:none;
	background:url(../img/pagination-ol-sprite.png) 0 0 no-repeat;
	color:white;
}

.pagination li a:hover,
.pagination li.selected a {
	background-position: 0 -30px;
	color:#007931;
}

/* Medewerker details */

ul#medewerker-details {
	list-style:none;
	margin:0 0 20px;
	padding:0;
	line-height:30px;
}

#medewerker-details li span.indent {
	display:inline-block;
	font-size:10px;
	width: 70px;
}

#medewerker-details a {
	font-weight:bold;
	text-decoration:none;
	color:#007931;
}

#medewerker-details a:hover {color:#666;}

/* Sitemap */

#sitemap {
	margin: 0 0 20px;
	padding: 0 0 0 20px;
	font-size: 12px;
	line-height: 200%;
	list-style: none;
}

#sitemap li {
	font-weight: bold;
}

#sitemap ul {
	margin: 0 0 10px 10px;
	padding: 0 0 0 10px;
	border-left: 1px solid #CCC;
	line-height: 200%;
	list-style: none;
}

#sitemap ul li {
	font-weight: normal;
}

#sitemap a {
	text-decoration: none;
	color:#007931;
}

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

/**
 * SIDEBAR ELEMENTS
 * ----------------------------------------
 */

#sidebar .block {
	margin: 0 10px 10px 0;
	padding-top:10px;
	background:#E5F1EA url(../img/sidebar-block-sprite.png) 0 0 no-repeat;
}

#sidebar .block-inner {
	background:#E5F1EA url(../img/sidebar-block-sprite.png) -230px 100% no-repeat;
	width:200px;
	padding-bottom:10px;
	padding: 0 10px 10px 20px;
}

#sidebar h3 { font-size:14px;}
#sidebar .block h3 {  text-transform:uppercase; }

#sidebar .block p {
	font-size:10px;
	margin-bottom:12px;
}

#sidebar #medewerker {
	padding:0;
	height:70px;
	display:block;
	background:url(../img/medewerker-bg.png) 0 0 no-repeat;
	text-decoration:none;
}


#sidebar #medewerker img {
	display:block;
	float:left;
	width: 80px;
}

#sidebar #medewerker .details {
	width: 134px;
	padding: 8px;
	float:left;
}

#sidebar #medewerker h3 {
	text-transform:none;
	margin-bottom:5px;
}
/*#sidebar a#medewerker:hover h3 { color:#4CA16E; }*/

#sidebar a#medewerker p {
	font-size:10px;
	color:#666666;
}

#sidebar #news {
	margin: 0 10px 10px 20px;
	font-size:10px;
	width:210px;
}

#sidebar #news a img { display:block; clear:both; border:0; margin-bottom:7px;}
#sidebar #news h3 {float:left; line-height:40px; margin:0; text-transform:uppercase;}
#sidebar #news h2 {  font-size:14px;margin-bottom:7px;}
#sidebar #news h2 a { text-decoration:none; color:#007931; }
#sidebar #news h2 a:hover { color:#4CA16E;}
#sidebar #news p {margin-bottom:7px;}
#sidebar #news .more-news {float:right; margin-top:14px; }
#sidebar #news .icon {padding-top:1px;}


/* Menu */

#menu h3 { padding:20px 0 0 20px;}

#menu ul,
#menu .block-inner {
	list-style:none;
	padding:0 0 5px;
	margin:0;
	width: 230px;
	line-height:100%;
}

#menu li a {
	display:block;
	padding: 9px 10px 9px 20px;
	color:#007931;
	text-decoration:none;
	background: url(../img/arrow-sprite.png) 215px -88px no-repeat;
}

#menu li a:hover { color:#666; background-position: 215px -288px; background-color:#fff;}

#menu li.selected {
	border-top:1px solid #CCE4D6;
	border-bottom:1px solid #CCE4D6;
	background:white;
}

#menu li.selected a {  background-position: 215px -238px;}

#menu .selected ul { padding:0; font-size:10px;}
#menu .selected ul li {background:url(../img/bullet-666.gif) 21px 12px no-repeat;}
#menu .selected ul li:hover {background-position: 21px -38px;}
#menu .selected ul li a {color:#666;padding-left:34px; background-position: 215px -288px; }
#menu .selected ul li a:hover {background-color:transparent; background-position: 215px -88px; color:#007931;}
#menu .selected ul li.selected a {padding-left:34px; background-position: 215px -288px; font-weight:bold;}
#menu .selected ul li.selected {border:0;}

/**
 * MEDIABAR ELEMENTS
 * ----------------------------------------
 */

#mediabar .block {
	margin: 0 0 10px 0;
	padding-top:15px;
	background:#E5F1EA url(../img/mediabar-block-sprite.png) 0 0 no-repeat;
}

#mediabar .block-inner {
	background:#E5F1EA url(../img/mediabar-block-sprite.png) -230px 100% no-repeat;
	padding-bottom:10px;
	padding: 0 10px 5px 20px;
}

#mediabar .block h3 { text-transform:uppercase; font-size:14px; margin-bottom:5px;}
#mediabar .block p { font-size:10px; margin-bottom:10px; }
#mediabar .block a {color:#007931;}
#mediabar .block a:hover {color:#666;}

a.photo,
.photo img {
	display:block;
	border:0;text-decoration:none;
}

.photo {
	position: relative;
	margin-bottom:10px;
}

.photo .zoom {
	position:absolute;
	bottom:10px;
	right:10px;
	text-indent:-999px;
	overflow:hidden;
	display:block;
	width:30px;
	height:30px;
	background:url(../img/zoom-sprite.png) 0 0 no-repeat;
}

a.photo:hover .zoom { background-position: 0 -30px; }

/**
 * FOOTER ELEMENTS
 * ----------------------------------------
 */

#footer p {
	float: left;
	margin: 0;
	line-height: 40px;
}


/* Service navigation */

#service-navigation {
	float: right;
	margin: 0;
	padding: 0;
	list-style: none;
}

#service-navigation li {
	display: inline;
	line-height: 40px;
}

#service-navigation li a {
	text-decoration: none;
	color: #4CA16E;
}

#service-navigation li a:hover {
	color: #007931;
}