/*
 *   LINKOTHEEK
 *
 *   Stylesheet voor scherm en projectie
 *   /styles/screen.css
 *
 *   vizi | vorm geven aan inhoud
 *
 *   V0.1 - 27/12/2007 - Jeroen Visser
 *   v0.2 - 05/01/2007 - Jeroen Visser
 *   v0.3 - 23/04/2008 - Jeroen Visser
 *   v0.4 - 11/06/2008 - Jeroen Visser
 *
 ************************************************************/



/*  SCHONE START
-------------------------------------------- */
body, h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, li, img, 
table, tr, th, td, 
form, fieldset, legend, button, 
div, object { margin:0;padding:0;border:0;list-style:none;font:normal 100%/1.5em helvetica,arial,sans-serif;text-align:left;vertical-align:top;}
input, select, textarea, button {font:normal 100% helvetica,arial,sans-serif;}
table, td, th { border-collapse: collapse; }



/*  MAIN TYPOGRAPHY
-------------------------------------------- */
body
{
	background: url(/images/bg-body.gif);
	font-size: 13px;
}

h1
{
	padding: .6em 0 .2em;
	color: #410;
	font-size: 200%;
	font-weight: bold;
	line-height: 1;
	letter-spacing: -1px;
}

h2
{
	padding: .6em 0 .2em;
	color: #632;
	font-size: 150%;
	font-weight: bold;
	line-height: 1;
	letter-spacing: -1px;
}

h2 span
{
	font-size: 66.67%;
	font-weight: normal;
	letter-spacing: 0;
	line-height: .8;
}

h2 a, h2 a:link
{
	color: #632;
}

h2 a:hover, h2 a:focus
{
	color: #854;
}

p
{
}
.lead p
{
	font-size: 120%;
}

a, a:link
{
	color: #805;
}

a:hover, a:focus
{
	color: #926;
}

table
{
	width: 100%;
	margin: 10px 0 10px -10px;
	border-collapse: collapse;
}
th
{
	padding: .6em 10px .2em;
	background: #887 url(/images/lijn-vet.gif) no-repeat top left;
	color: #FFF;
	font-weight: bold;
}
th.last
{
	background-position: top right;
}
td
{
	padding: .2em 10px;
}
tr.last td
{
	background: url(/images/lijn-dun.gif) no-repeat bottom left;
}
tr.last td.last
{
	background-position: bottom right;
}



/*  MAIN LAYOUT
-------------------------------------------- */
#canvas
{
	padding: 30px 200px 15px 0;
	max-width: 800px;
	background: #FFF url(/images/bg-canvas.gif) no-repeat top right;
}

#main
{
	position: relative;
	padding: 20px 0 0 10px;
	background: #EED url(/images/bg-corner-topright.gif) no-repeat top right;
}

#main h2
{
	margin-bottom: .1em;
}

#main h2 .rss
{
	display: block;
	position: absolute;
	right: 10px;
	top: 10px;
}



/*  HEADER - LOGO & SEARCH
-------------------------------------------- */
#header
{
	position: relative;
	padding: 0 78px 10px 20px;
	background: #EED url(/images/bg-header.gif) no-repeat bottom right;
}

#header .logo
{
	position: absolute;
	left: 100%;
	bottom: -16px;
	z-index: 10;
	margin-left: -71px;
}

#header h1
{
	position: absolute;
	left: -10000px;
}

#header h2
{
	margin-bottom: .1em;
	line-height: 1.2;
}

#header form
{
	display: block;
	padding: 0 0 .5em 0;
	background: url(/images/bg-corner-topright.gif) no-repeat top right;
}

#header form p
{
	float: left;
	width: 70%;
}

#header form p label
{
	float: left;
	margin-top: .2em;
	margin-right: 1.8em;
}

#header fieldset:after
{
	content: " ";
	display: block;
	height: 0;
	clear: left;
	color: #EED;
	visibility: hidden;
}

#header form #q
{
	width: 100%;
}

#header form #q-submit
{
	margin-left: 10px;
}



/*  BLOCK & CONTENTBLOCK
    Provides clearance for floats, plus
    rounded corner or bottom-aligned 
    thin stripe if wanted
-------------------------------------------- */
.block,
.contentblock
{
	margin-top 15px;
	padding-bottom: 5px;
	padding-right: 10px;
	background: url(/images/bg-corner-bottomright.gif) no-repeat bottom right;
}
.contentblock
{
	min-height: 40em;
	padding: 0 20px 25px 10px;
}

.blockline
{
	background: url(/images/lijn-dun-block.gif) no-repeat bottom right;
}

.block:after,
.blockline:after
{
	content: " ";
	display: block;
	height: 0;
	clear: left;
	color: #EED;
	visibility: hidden;
}



/*  GENERAL CONTENT
-------------------------------------------- */
.contentblock p
{
	max-width: 50em;
}
.contentblock .lead p
{
	max-width: 40em;
}


/*  NEWS
-------------------------------------------- */
#news
{
	width: 42.5%;
	float: left;
}

#news h2
{
	position: relative;
	margin-right: 20px;
	padding: .4em 10px 0;
	background: url(/images/lijn-vet.gif) no-repeat top right;
}

#news ul
{
	margin-top: -5px;
	padding-top: 9px;
	border-right: 20px solid #EED;
	background: url(/images/lijn-dun.gif) no-repeat top right;
}

#news li, #news li a
{
	background: url(/images/lijn-dun.gif) no-repeat bottom right;
}

#news li a
{
	display: block;
	padding: 3px 10px 4px;
	text-decoration: none;
}

#news li a:hover, #news li a:focus
{
	background: url(/images/lijn-mid.gif) no-repeat bottom right;
}



/*  CATEGORIES: TAGCLOUD
-------------------------------------------- */
#categories
{
	width: 100%;
}

.home #categories
{
	width: 57.5%;
	float: left;
}

#categories h2
{
	position: relative;
	margin-right: 20px;
	padding: .4em 0 0 10px;
	background: url(/images/lijn-vet.gif) no-repeat top right;
}

#categories ul
{
	margin-top: -5px;
	margin-right: 20px;
	padding: 13px 0 0 10px;
	background: url(/images/lijn-dun.gif) no-repeat top right;
}

#categories li
{
	display: inline;
	line-height: 1.5em;
	vertical-align: baseline;
}

#categories li a, #categories li a:link
{
	text-decoration: none;
	font-size: 90%;
}

#categories li a:hover, #categories li a:focus
{
	background: #FFF;
}

#categories .m  { background-color: #F5F5EB; font-size: 110%; }
#categories .l  { background-color: #F8F8F1; font-size: 120%; }
#categories .xl { background-color: #FCFCF8; font-size: 140%; }



/*  SPONSORED LINKS: GOOGLE
-------------------------------------------- */
#sponsored
{
	margin: 15px 20px 15px 0;
	background: #F7F7EE url(/images/bg-corner-bottomright-sponsored.gif) no-repeat bottom right;
}

.contentblock #sponsored
{
	margin: 15px 0 15px -10px;
}

#sponsored h2
{
	margin: 0;
	padding: .4em 10px .2em;
	background: #AA9 url(/images/lijn-vet-sponsored.gif) no-repeat top right;
	color: #FFF;
}

#sponsored h2 a
{
	color: #FFF;
}

#sponsored #ggl-container
{
	padding-top: 4px;
	background: url(/images/bg-corner-bottomright-sponsored-h2.gif) no-repeat top right;
}





/*  COLUMNS: CATEGORIES & LINKS
-------------------------------------------- */
.column
{
	width: 33.3%;
	float: left;
}
.cat
{
	position: relative;
	margin-bottom: 15px;
	padding: 0 10px 3px 0;
	background: url(/images/lijn-dun-cat.gif) no-repeat bottom right;
}
.category .cat
{
	background: none;
}
.cat h2
{
	padding: .4em 10px .2em;
	background: url(/images/lijn-vet.gif) no-repeat top right;
}

.cat ul
{
}

.cat li
{
	padding: 1px 10px;
}

.cat li a
{
	text-decoration: none;
}

.cat a.result-popup img
{
	vertical-align: baseline;
}



/*  Labels */
.cat li span, .cat li strong
{
	font-size: 85%;
}

.cat li strong
{
	text-transform: uppercase;
}

.nieuw
{
	color: #009;
}

.tip
{
	color: #333;
}

.gratis
{
	color: #390;
}



/*  CAT: ADSL
-------------------------------------------- */
#adsl
{
	margin-right: 10px;
	background: url(/images/bg-cat-special.gif);
}

#adsl .cat
{
	padding: 0 0 3px 0;
	background: url(/images/lijn-dun.gif) no-repeat bottom right;
}

#adsl form
{
	padding: 0 10px 10px;
}

#adsl p
{
	color: #410;
	font-size: 85%;
	line-height: 1.4em;
}

#adsl fieldset
{
	float: left;
	padding-top: .5em;
}

#adsl fieldset p
{
	display: block;
	float: left;
	margin-right: 1em;
}

#adsl label
{
	display: block;
	font-weight: bold;
}

#adsl-pc-cijfers  { width: 4.6em; }
#adsl-pc-letters  { width: 2.3em; }
#adsl-huisnr      { width: 3.6em; }

#adsl-submit
{
	margin-top: 1.6em;
}



/*  CATS: FOLDABLES
-------------------------------------------- */
.cat h2.foldover
{
	color: #410;
	cursor: pointer;
}
.cat h2 span.fold-icon
{
	display: block;
	width: 15px;
	height: 10px;
	position: absolute;
	bottom: 2px;
	right: 12px;
	background-color: #AFAFA3;
	background-image: url(/images/bg-icon-foldout.gif);
	background-repeat: no-repeat;
	background-position: 0 0;
}
.foldout h2 span.fold-icon
{
	background-image: url(/images/bg-icon-foldin.gif);
}
.cat h2.foldover span.fold-icon
{
	background-color: #410;
}


/*  NAVIGATION
-------------------------------------------- */
#navigation
{
	width: 200px;
	position: absolute;
	left: 100%;
	top: 40px;
	z-index: 30;
}

#navigation h2, #navigation hr
{
	position: absolute;
	top: -100000px;
	height: 0;
}

#navigation li
{
	width: 175px;
	padding: 0 10px 8px 15px;
	line-height: 1.1em;
}

#navigation li.new-nav-section
{
	margin-top: 1.2em;
}

#navigation li.sel
{
	padding-bottom: 18px;
	background: url(/images/lijn-nav.gif) no-repeat bottom left;
}

#navigation a
{
	font-size: 90%;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}

#navigation a:hover, #navigation a:focus
{
	color: #410;
}

#navigation li.sel a
{
	color: #410;
}

/*  FOOTER
-------------------------------------------- */
#footer
{
	position: relative;
	padding: 10px 78px 0 20px;
	background: #EED url(/images/bg-footer.gif) no-repeat top right;
}

#footer h2, #footer hr
{
	position: absolute;
	top: -100000px;
	height: 0;
}

#footer .logo
{
	width: 177px;
	height: 71px;
	position: absolute;
	left: 100%;
	top: 7px;
	margin-left: -71px;
	background: url(/images/logo-linkotheek-footer.gif) no-repeat;
}

#footer p
{
	clear: left;
	padding: .5em 0 1em;
	background: url(/images/bg-corner-bottomright.gif) no-repeat bottom right;
	color: #663322;
	font-size: 90%;
}

#footer li
{
	display: block;
	float: left;
	margin-right: 2em;
	padding: .2em 0;
}

#footer li.new-nav-section
{
	clear: left;
}

#footer li a
{
	font-size: 85%;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
}

#footer li a:hover, #footer li a:focus
{
	color: #410;
}



/*  MAIN ADVERTISING
-------------------------------------------- */
#ad-main
{
	position: absolute;
	top: 15px;
	left: 20px;
}



/*  PAGING
    Navigation for search results & cats
-------------------------------------------- */
.paging
{
	position: relative;
	margin-top: 10px;
	padding-left: 50%;
	background: url(/images/lijn-mid.gif) no-repeat bottom right;
}
.paging:after
{
	content: " ";
	display: block;
	height: 0;
	clear: left;
	color: #EED;
	visibility: hidden;
}
.paging p
{
	position: absolute;
	left: 10px;
	top: 0;
	color: #663322;
}
.paging ul
{
	display: block;
	float: left;
	padding-left: 5px;
	background: #eeeedd;
}
.paging li
{
	display: block;
	float: left;
	position: relative;
	margin: 0 5px 0 0;
	padding: 0;
	background: url(/images/bg-corner-paging-topright.gif) no-repeat top right;
}
.paging li.sel,
.paging li.ellipsis
{
	background: none;
}
.paging li.sel strong,
.paging li.ellipsis strong
{
	background: none;
}
.paging li strong,
.paging li a
{
	display: block;
	position: relative;
	top: 1px;
	left: -1px;
	margin: 0;
	padding: 1px 8px 0;
	background: url(/images/bg-corner-paging-bottomleft.gif) no-repeat bottom left;
	color: #663322;
	overflow: hidden;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;
}
.paging li a:hover
{
	background: url(/images/bg-corner-paging-bottomleft-hover.gif) no-repeat bottom left;
}
.paging li.prev strong,
.paging li.prev a,
.paging li.next strong,
.paging li.next a
{
	padding: 0 8px 1px;
}
.paging li.prev strong span,
.paging li.prev a span,
.paging li.next strong span,
.paging li.next a span
{
	display: block;
	/*
	width: .7em;
	height: 1.5em;
	*/
	font-size: 100%;
}
.paging li.prev a span
{
	background: url(/images/pijl-paging-prev.gif) no-repeat 50% 50%;
}
.paging li.prev strong span
{
	background: url(/images/pijl-paging-prev-white.gif) no-repeat 50% 50%;
}
.paging li.next a span
{
	background: url(/images/pijl-paging-next.gif) no-repeat 50% 50%;
}
.paging li.next strong span
{
	background: url(/images/pijl-paging-next-white.gif) no-repeat 50% 50%;
}
.paging li span span
{
	position: absolute;
	top: -100000px;
}

/*  SEARCH AND CATEGORY RESULTS
    Content blocks for search results & cats
-------------------------------------------- */
.result
{
	padding: 5px 15% 5px 10px;
	background: url(/images/lijn-dun.gif) no-repeat bottom right;
}
.result h3
{
	color: #663322;
	font-size: 150%;
	font-weight: bold;
	line-height: 1.25;
}
.result h3 a
{
	font-size: 80%;
	text-decoration: none;
}
.result h3 strong
{
	font-size: 65%;
	text-transform: uppercase;
}
.result h3 a:hover,
.result h3 a:focus
{
	text-decoration: underline;
}