/************************************************** /!!!!!!!!!!!!, /!!!!!!!!, /!!!!!!!!, !/!!!////////!!\ /!!///////!!\ /!!///////!!\ !/!!! !/!!! /!!! !/!!! /!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! /!!!' !/!!! /!!!' !/!!! /!!!' !/!!!!!!!!!!!/ '!/!!!!!!!!!!/ '!/!!!!!!!!!!/ !/////////// '7///////// '7///////// /!!!!!!!!, /!!. /!!, /!!!!!!!!!!, /!!/////////; !/!!! !/!!! /!!!////////!!\ /!!! !/!!! !/!!! !/!!! !/!!! !/!!! /!!!!!!\ !/!!! !/!!! !/!!!!!!!!!!/!!! !/!!! !/!!!!!! !/!!! !/!!! !/!!!////////!!! !/!!! '//!!!! !/!!! !/!!! !/!!! !/!!! !/!!!, '/!!!' !/!!! !/!!! !/!!! !/!!! '!/!!!!!!!!!!/ !/!!!!!!!!!/ !/!!!. !/!!!. '7///////// !///////// !/// !/// /!!!!!!!!!!, /!!!!!!!!!!, /!!!!!!!!!!!!, /!!!////////!!\ /!!!////////!!\ !/!!!////////!!\ !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!!!!!!!!!/!!! !/!!!!!!!!!!/!!! !/!!! !/!!! !/!!!////////!!! !/!!!//////!!!/ !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! !/!!! /!!!' !/!!!. !/!!!. !/!!!. !/!!!. !/!!!!!!!!!!!/ !/// !/// !/// !/// !/////////// /!!!!! /!!! /!!!!!!!!!!!!!\ /!!!!!!!!!!!!!\ !/!!!!!! !/!!! !/!!!////////// !//////!!!///// !/!!!/!!! !/!!! !/!!! !/!!! !/!!!//!!! !/!!! !/!!!!!!!!!!!!!\ !/!!! !/!!!!//!!!!/!!! !/!!!////////// !/!!! !/!!! !//!!!/!!! !/!!! !/!!! !/!!! !//!!!!!! !/!!! !/!!! /!!!. !/!!! !/!!!!!!. !/!!!!!!!!!!!!!\ !/!!!. !/// !/// !///// !////////////// !//*/ /******************************************************************************************* project: doogvaard(land) file: psx70.css date: 09/09/2008 edited: 16/11/2008 author: Enriko Mástrjbán, alps republic copyright: (c) 2004-2008 by doogvaard.net all rights reserved **************************************************/ /************************************************** project-colors------------------------------------: background-body-----------------------------#c8e4cc background-head-----------------------------#c0ddc3 background-sheets---------------------------#fcfcfc background-navigation-thingies--------------#191616 font-color----------------------------------#272525 border-abbr---------------------------------#999 font-color-navigation-----------------------#fff font-color-navigation-hover-----------------#c8e4cc font-color-navigation-now-------------------#322929 background-hover-image-div-opac-------------#f06 background-hover-text-quotation-------------#dad8d8 background-hover-text-quotation-span--------#edebeb font-color-caption-image-red----------------#ca0f4d font-color-caption-text-blue----------------#008ee9----and-unused-nice-dark-blue----#060081- font-color-text-quotation-dark-blue---------#0a55c6 font-color-text-link-is-niet-nieuw-blue-----#0a55c6----and-unused----#007ee9 lowject-colors------------------------------------: basic-blue----------------------------------#0040ee basic-red-----------------------------------#f02 basic-violet--------------------------------#551a8b **************************************************/ /********** the basics ***************************/ html[xmlns^="http"] { overflow-y: scroll; } * { margin: 0; padding: 0; } *:focus { outline:none; } html { font-size: 125%; } body { background: #c8e4cc/* url(bg-body.jpg) top left repeat-x fixed */; color: #272525; font: 400 normal 50%/1.5 courier,"helvetica neue",helvetica,"microsoft sans serif",sans-serif; } html,body,a,abbr,acronym,fieldset,hr,img { border: none; outline: none; } abbr,acronym { border-bottom: .1em dotted #999; cursor: help; } em { font-weight: 400; font-style: italic; } ins,a { text-decoration: none; } del { text-decoration: line-through; } strong { font-weight: 700; } h1,h2,h3,h4,h5,h6,p { font-size: 1em; } /********** end basics ***************************/ /********** the site-structure-rulers ************/ #conk { background: #c0ddc3; height: .4em; left: 0; opacity: 0.98; position: fixed; top: 0; width: 100%; z-index: 98; } /* --------------------------------------------> */ #beam { left: 86.9em; position: fixed; top: 2.3em; width: 5.6em; z-index: 97; } #beam a,#beam a:link,#beam a:visited { background: #191616; color: #fff; height: 7.1em; display: block; margin: 0; opacity: 0.18; overflow: hidden; position: relative; /* <- CAUSE OF OPERA */ text-align: center; text-decoration: none; width: 5.6em; } #beam a:focus, #beam a:hover,#beam a:active { color: #c8e4cc; opacity: 0.98; } #beam a[title~=KNOKKEN] { margin-top: .3em; } #beam a:first-child { margin-top: 0; } #beam a em { font-size: 3em; font-family: arial; /* <- CAUSE OF FIREFOX */ font-style: normal; /* REST & BELOW FOR POSITIONING -> */ display: inherit; margin-top: .6em; } #beam a:first-child em { margin-top: .167em; } /* --------------------------------------------> */ #foot { background: #191616; bottom: 0; height: 3.9em; left: 0; opacity: 0.18; position: fixed; width: 100%; z-index: 99; } p:hover#foot { opacity: 0.98; } #foot a { height: 3.9em; display: block; float: left; margin: 0 .3em 0 0; overflow: hidden; padding-left: 3.3em; padding-top: .6em; text-decoration: none; width: 24.3em; } #foot a:first-child { margin-left: 3.2em; padding-bottom: 2em; } #foot a[title~=BEGINSCHERM] { width: 30.2em; } /* ----------------------------------show-grid-> */ #foot a#now { background: #c8e4cc; } /* --------------------------------------------> */ p:hover#foot a,p:hover#foot a#now { background: #191616; } /* --------------------------------------------> */ p:hover#foot a[title~=IS] em:after { content: " Is Niet Nieuw"; } p:hover#foot a[title~=ECHT] em:after { content: " Echt"; } p:hover#foot a[title~=BEGINSCHERM] em:after{ content: " Land"; } /* --------------------------------------------> */ #foot a em, #foot a:link em,#foot a:visited em { color: #fff; font-style: normal; font-size: 1.8em; } /* ----------------------------------show-grid-> */ #foot a#now em, #foot a:link#now em,#foot a:visited#now em { color: #191616; } /* --------------------------------------------> */ p:hover#foot a em, p:hover#foot a#now em { color: #322929; } p:hover#foot a:focus em, p:hover#foot a:hover em, p:hover#foot a:active em { color: #c8e4cc; } p:hover#foot a:focus#now em, p:hover#foot a:hover#now em, p:hover#foot a:active#now em { color: #322929; } /* --------------------------------------------> */ #foot a#now[title~=IS] em:after { content: " Is Niet Nieuw"; } #foot a#now[title~=ECHT] em:after { content: " Echt"; } #foot a#now[title~=BEGINSCHERM] em:after { content: " Land"; } /* --------------------------------------------> */ /* p:hover#foot a:focus[title~=IS] em:after, p:hover#foot a:hover[title~=IS] em:after, p:hover#foot a:active[title~=IS] em:after { content: " Is Niet Nieuw"; } p:hover#foot a:focus[title~=ECHT] em:after, p:hover#foot a:hover[title~=ECHT] em:after, p:hover#foot a:active[title~=ECHT] em:after { content: " Echt"; } p:hover#foot a:focus[title~=BEGINSCHERM] em:after, p:hover#foot a:hover[title~=BEGINSCHERM] em:after, p:hover#foot a:active[title~=BEGINSCHERM] em:after { content: " Land"; } */ /* --------------------------------------------> */ p:hover#foot a:focus#now em:after, p:hover#foot a:hover#now em:after, p:hover#foot a:active#now em:after { content: " Huidige Blad"; } /********** end site-structure-rulers ************/ /********** the static-grid **********************/ #main { margin: 0 1.5em 0 3.2em; padding-bottom: 4.2em; /* <- CAUSE OF FIREFOX */ width: 89.6em; } /* --------------------------------------------> */ .nieuw#main { color: #1d1a1a; margin: 2.6em 3.2em 5.9em; width: auto; } .nieuw p { font: 400 normal 12.8em/.89 helvetica,"microsoft sans serif",sans-serif; letter-spacing: -.063em; text-transform: uppercase; } .nieuw a,.nieuw a:link, .nieuw a:visited, .nieuw a:focus,.nieuw a:hover { color: #0a55c6; } /* .nieuw a:hover { color: #0040ee; } */ .nieuw a:active { color: #ca0f4d; } /* --------------------------------------------> */ .siteName, .emptySiteName, .sheet { float: left; height: 33.5em; margin: .4em .3em -.1em 0; position: relative; width: 27.6em; } /* ------------------------ a fully typed sheet> */ img.siteName { background: #191616; } div.siteName { background: #edebeb; height: auto; min-height: 40.7em; width: 33.5em; } div.emptySiteName { background: none; } #red { background: #ca0f4d; } #blu { background: #008ee9; } /* --------------------------------------------> */ div.siteName p { margin: 1.4em 1.8em 0; }/* <--------------------------------------------Grey-Big-Square-Text:About (currently offline) */ div.siteName p + p { margin: 0 1.8em 1.8em; }/* <--------------------------------------------Grey-Big-Square-Text:About (currently offline) */ div.siteName p a,div.siteName p a:link { color: #272525; text-decoration: underline; }/* <-----------------------Grey-Big-Square-Text:About (currently offline) */ div.siteName p a:visited { text-decoration: line-through; }/* <------------------------------------Grey-Big-Square-Text:About (currently offline) */ div.siteName p a:focus, div.siteName p a:hover, div.siteName p a:active { text-decoration: none; }/* <--------------------------------------------Grey-Big-Square-Text:About (currently offline) */ /* --------------------------------------------> */ div.siteName p span { font-size: 1.2em; }/* <-------------------------------------------------Grey-Big-Square-Text:About (currently offline) */ div.siteName p span span#must { font-size: .833em; font-family: "american typewriter",courier; }/* <----Grey-Big-Square-Text:About (currently offline) */ /********** end static-grid **********************/ /********** the dynamic-grid *********************/ .sheet { background: #fcfcfc; display: inline; /* <- CAUSE OF IE */ overflow: hidden; } /* --------------------------------------------> */ .sheet > p > a, .image > p > a img, .image > p > a > span { height: 24.7em; position: absolute; width: 24em; } .sheet > p > a { margin: 1.9em 1.8em 0; } .image > p > a > span { display: block; position: relative; } /* --------------------------------------------> */ .text p > a { background: #008ee9; color: #0a55c6; overflow: hidden; } .text p > a strong { display: block; margin: 1.7em .6em 3.9em 2.1em; } .text p > a span { font: 400 normal 2.2em/1.091 georgia,serif; line-height: 1.091em; /* <- CAUSE OF OPERA one more line-height */ } /* --------------------------------------------> */ .text.tiny p > a strong { margin-right: .9em; } .text.tiny p > a span { font: 400 normal 2em/1.1 georgia,serif; line-height: 1.1em; } /* --------------------------------------------> */ .text p > a span:before { content: "\201C"; } .text p > a span:after { content: "\201D"; } /* --------------------------------------------> */ .sheet > p a:visited { text-decoration: none; } /* --------------------------------------------> */ .image > p > a > span { background: #f06; opacity: 0.68; } .image > p > a:focus > span, .image > p > a:hover > span, .image > p > a:active > span { display: none; } /* --------------------------------------------> */ .text p > a:focus, .text p > a:hover, .text p > a:active { background: #dad8d8; color: #272525; } .text p > a:focus span, .text p > a:hover span, .text p > a:active span { background: #edebeb; text-decoration: none; } /* --------------------------------------------> */ /* .text.tiny p > a:focus span, .text.tiny p > a:hover span, .text.tiny p > a:active span { background: none; } */ /* --------------------------------------------> */ .caption { background: transparent url(blank.gif) top left repeat; /* <- CAUSE OF OPERA & IE to expand sensitive area */ bottom: 10.2em; margin-left: 1.8em; position: absolute; width: 24em; } .caption cite > a { background: transparent url(blank.gif) top left repeat; /* <- CAUSE OF OPERA & IE to expand sensitive link-area */ height: 3.3em; overflow: hidden; position: absolute; width: 24em; } /* --------------------------------------------> */ .caption cite > span, .caption cite > a span, .caption cite > a:link span { background: #191616; color: #ca0f4d; /* display: block; */ /* CAUSE OF IE not with padding or else */ font-size: 1.2em; font-style: normal; font-weight: 400; margin-left: 1.25em; max-width: 16.5em; opacity: 0.48; overflow: hidden; padding: 0 .5em; position: relative; white-space: nowrap; } /* --------------------------------------------> */ .caption cite > span { display: block; width: 2.333em; } .caption cite > a span, .caption cite > a:link span { /* padding: .167em .5em; */ padding: .167em .5em .333em; } /* --------------------------------------------> */ .caption cite > a span, .caption cite > a:link span { border-top: .071em solid #191616; /* <- CAUSE OF OPERA & FIREFOX to solve margin between 'via:' & 'link-text' */ } /* ------------------------ quote blue styleeee> */ .text .caption cite > span, .text .caption cite > a span, .text .caption cite > a:link span { color: #008ee9; } /* --------------------------------------------> */ .caption cite > a:visited span:after { content: " \2714"; } /* --------------------------------------------> */ .caption cite > a:focus span, .caption cite > a:hover span, .caption cite > a:active span { background: #edebeb; border-color: #edebeb; /* <- CAUSE OF OPERA & FIREFOX to solve margin between 'via:' & 'link-text' */ color: #272525!important; opacity: 0.88; } /********** end dynamic-grid *********************/ /********** the dynamic-pages ********************/ /* missing... */ /********** end dynamic-pages ********************/ /********** the vanish-clean *********************/ .cleanup { clear: both; } /********** end vanish-clean *********************/ /********** the warning **************************/ .warning { background: #ca0f4d; /* background: #fe3200; border-bottom: .3em solid #ff4; border-right: .3em solid #ff4; */ height: 33.5em; left: 3.2em; position: fixed; top: .4em; width: 27.6em; z-index: 100; } .warning span { border-bottom: 1em solid #ff4; color: #ff4; display: block; font-style: normal; font-size: 1.8em; margin: 0 1.833em 0 1.833em; padding: .833em 0 .833em; } .warning span em { font-style: normal; font-weight: 700; letter-spacing: .056em; text-transform: uppercase; } .warning span a,.warning span a:link { color: #ff4; text-decoration: underline; } .warning span a:visited { text-decoration: line-through; } .warning span a:focus, .warning span a:hover, .warning span a:active { text-decoration: none; } .ie { z-index: 101; } /* ---------------------perfect-letterspace----> */ .js span em:before { content: ''; margin-left: .056em; } .js span em:after { content: ''; margin-right: .056em; } /********** end warning **************************/