/* Vrijwel alle kleuren (voorgrond, achtergrond en randen) in dit bestand zijn
   enkel bedoeld als indicatie/standaard waarde. De daadwerkelijke kleuren worden
   via kleuren.css geregeld middels "Admin - Kleuren en achtergrond afbeelding (pi)
   aanpassen".
*/

/* **** */
body {
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:14px;
background:url(../img/bg-body.jpg) 50% 50% repeat white;
}

table td {
line-height:18px;
}
/* TODO: class "tabel" uit html verwijderen */

td.r {
text-align:right;
}

a {
text-decoration:none;
color:black;
}

a img {
border:none;
}

/* snelbestellenlijst.php */
td.logintabelgedaan {
background-color:green;
}

/* **** */
/* FUTURE: vertical-align van img's controleren en indien mogelijk een class voor maken */

#clear, .clear {
clear:both;
}
/* TODO: #clear/id="clear" verwijderen als alles omgezet is naar classes */

.hidden {
display:none;
}

.imageniettegroot {
max-width:100px;
max-height:100px;
}

.pointer {
cursor:pointer;
}

.pointer:hover {
text-decoration:underline;
}

.pointer img {
vertical-align:text-bottom;
}

.hover,
.hoverklein {
margin:0 0 0 3px;
padding:3px;
width:160px;
z-index:99;
background-color:gainsboro;
border:1px solid dimgray;
}

.hoverklein {
width:200px; /* XXX .hoverklein is dus groter dan .hover! */
}

.hover img,
.hoverklein img {
vertical-align:top;
}

.del {
font-weight:bold;
text-decoration:none;
color:red; /* niet in kleuren.css! */
}

.titel { /* FUTURE: vervangen door <hx> (h1 of h2 of ...) */
margin-bottom:5px;
font-size:12px;
font-weight:bold;
}



/* **** */
input[type=button],
input[type=submit],
input[type=text],
input[type=password],
select,
textarea {
vertical-align:bottom;
}

input[type=button],
input[type=submit] {
border:1px solid black;
font-size:11px;
}

input[type=button],
input[type=submit],
select {
height:18px;
}

input[type=text],
input[type=password],
select,
textarea {
width:180px; /* default, kan per form/veld aangepast worden */
border:1px solid dimgray;
font-size:12px;
}

input[type=text],
input[type=password] {
height:14px;
}


.formfout,
input[type=button].formfout,
input[type=submit].formfout,
input[type=text].formfout,
input[type=password].formfout {
background-color:yellow; /* niet in kleuren.css! */
color:red; /* niet in kleuren.css! */
}

select {
width:182px; /* default, kan per form/veld aangepast worden */
}

textarea {
height:180px; /* default, kan per form/veld aangepast worden */
}

input.bestelaantal {
width:20px;
}


/* form.labeled wordt gebruikt in registreerpi.php */
/* FUTURE: ook elders toepassen, zoals bijv. in admin */
form.labeled h2 {
padding-left:5px;
font-size:11px;
}

form.labeled label {
margin-bottom:10px;
padding-left:8px;
width:200px;
float:left;
}



/* **** */
#container {
margin:20px auto 20px auto;
width:960px;
}

#container > div {
float:left;
}



/* **** */
#container #links { /* linkerkolom */
margin:0 2px 0 0; /* anders valt de floated #midden kolom over de borders heen */
width:210px;
}

#container #links > div {
padding:3px;
width:204px;
height:15px; /* standaard hoogte voor één regel, kan individueel aangepast worden */
background-color:gainsboro;
border:0 solid dimgray;
border-width:1px 1px 0 1px;
}


/* ---- */
#container #links #header {
padding-top:59px;
height:87px; /* hoogte zonder padding */
height:31px;
position:relative;
background:url(../img/logo.png) 2px 40% no-repeat gainsboro;
}

#container #links #header:hover { /* .pointer ongedaan maken */
text-decoration:none;
}

#container #links #header span.txt {
width:120px;
height:93px;
position:absolute;
top:0;
left:90px;
overflow:hidden;
background-color:white;
color:black;
}

#container #links #header span.txt span {
width:110px;
position:absolute;
top:0;
left:6px;
font-size:11px;
font-style:italic;
font-weight:bold;
}

#container #links #header span.txt span.mb { /* Mani Bhadra B.V. */
top:6px;
}

#container #links #header span.txt span.pi { /* Phoenix Import */
top:21px;
}

#container #links #header span.txt span.blurb { /* "vrije tekst" */
top:44px;
}


/* ---- */
#container #links #inloggen {
position:relative;
}

#container #links #inloggen span {
font-weight:bold;
}

#container #links #inloggen span.formfout { /* foutmelding */
padding:2px 5px;
}

#container #links #inloggen div.pop { /* wordt bij laden van de pagina verborgen */
padding:20px 2px 5px 2px; /* ruimte boven voor de sluitknop */
width:198px;
position:absolute;
top:22px;
left:2px;
text-align:center;
background-color:gainsboro;
border:2px outset silver;
z-index:10;
}

#container #links #inloggen div.pop span#sluitlogin {
padding:5px;
position:absolute;
top:0;
right:0;
cursor:pointer;
color:red;
}

#container #links #inloggen div.pop form {
margin:0 0 15px 0;
}

#container #links #inloggen div.pop input[type=text],
#container #links #inloggen div.pop input[type=password] {
margin-bottom:4px;
width:180px;
}

#container #links #inloggen div.pop input[type=submit],
#container #links #inloggen div.pop input[type=button] {
width:170px;
margin-bottom:2px;
}


/* ---- */
#container #links #mandje {
height:35px;
}

#container #links #mandje div {
margin-bottom:3px;
}

#container #links #mandje img {
margin-left:1px;
vertical-align:text-bottom;
}


/* ---- */
#container #links #zoek {
/* hoogte wordt dynamisch door javascript aangepast wanneer er gezocht wordt */
height:19px;
overflow:hidden;
}

#container #links #zoek img {
vertical-align:text-bottom;
}

#container #links #zoek input#zoekopdracht {
width:122px;
}

#container #links #zoek input#zoekknop {
width:50px;
}

#container #links #zoek #zoekresultaat { /* wordt door JS aangemaakt */
height:100px;
position:relative;
overflow:auto;
}

#container #links #zoek #zoekresultaat #zoekresultaat_sluiten { /* wordt door JS aangemaakt */
padding:3px;
position:absolute;
right:0;
top:0;
cursor:pointer;
color:red;
}

#container #links #zoek #zoekresultaat h1 {
font-weight:normal;
font-size:1em;
border-bottom:1px dashed black;
}


#container #links div#zoekresultaat div.zoekresultaat0 {
background-color:white;
color:black;
}

#container #links div#zoekresultaat div.zoekresultaat1 {
background-color:black;
color:white;
}


/* ---- */
#container #links #speccats {
height:45px;
height:60px;
}

#container #links #speccats div {
margin-bottom:1px;
}

#container #links #speccats div.new {
font-weight:bold;
}

#container #links #speccats div.special { }
#container #links #speccats div.bestsellers { }


/* ---- */
#container #links #cats {
height:726px; /* verticaal scrollen bij 1280x1024 */
height:507px;
overflow:auto;
}

#container #cats #categorie_lijst div { }

#container #cats #categorie_lijst div.folder {
background-color:#cccccc;
}

#container #cats #categorie_lijst span.foldee div {
padding-left:15px;
background-color:#cccccc;
}



/* **** */
#container #midden {
width:740px;
}

#container #midden > div,
#container #midden #top_container > div {
background-color:gainsboro;
border:0 solid dimgray;
border-width:1px 1px 0 0;
}

#container #midden #top_container {
position:relative;
border:none; /* al ingesteld op ingesloten divs */
}

#container #midden #top_container > div {
width:739px;
}

#container #midden #top_container #topscroller {
width:578px;
height:130px;
border-right-width:1px;
}

#container #midden #top_container #topscrollertwee {
padding:0;
height:30px;
}

#container #midden #top_container #topscrollertwee table td {
line-height:30px; /* ongedaan maken van standaard */
}

#container #midden #top_container #topscrollertwee .tab {
font-size:22px;
}


#container #midden #top_container #eenterug {
padding-top:2px;
height:19px;
}

#container #midden #top_container #eenterug img {
margin-left:5px;
vertical-align:text-top;
}

#container #midden #top_container #video {
margin:0;
width:160px;
height:128px;
/* rechts van de andere elementen in #top_container plaatsen */
position:absolute;
top:0;
right:0;
}


/* ---- */
#container #midden #main {
padding:5px 3px;
width:733px;
height:742px; /* verticaal scrollen van <body> bij 1280x1024 */
height:570px;
position:relative;
overflow:auto;
}


/* ---- */
#container #midden #main span.categorie_bladeren {
margin:15px 0;
height:30px;
display:block;
float:right;
font-size:12px;
}

#container #midden #main span.huidigepagina {
text-decoration:underline overline;
}

#container #midden #main #categorie_kop { /* container voor categorie kop, afbeelding en omschrijving */
margin:0 0 10px 0;
padding:5px;
font-size:12px;
}

#container #midden #main #categorie_kop img.imageniettegroot {
margin:5px 0 5px 5px;
float:right;
}

#container #midden #main #categorie_kop span.categorie_bladeren {
margin:0;
}

#container #midden #product_lijst { /* omvatter voor de productblokken */
margin:0 auto;
width:700px;
position:relative;
}

#container #midden #product_lijst h3.blok { /* kop boven nieuw/alle blokken */
margin-top:40px;
clear:both;
text-align:center;
font-size:16px;
}

#container #midden #product_lijst hr.blok { /* regel tussen nieuw/alle blokken */
margin:30px;
}

#container #midden #product_lijst > div { /* productblok */
margin:0 2px 2px 0;
padding:0;
/* zie ook: /config.php - $aantalproducten_perrij */
width:110px; /* 6 naast elkaar */
width:170px; /* 4 naast elkaar */
width:135px; /* 5 naast elkaar */
height:180px;
float:left;
position:relative;
text-align:center;
background-position:98% 98%;
background-repeat:no-repeat;
border:1px solid dimgray;
}

/* afwijkende achtergrond voor productblok */
#container #midden #product_lijst > div.nieuw        { background-image:url(../img/nieuw.png); }
#container #midden #product_lijst > div.special      { /* voorlopig niet meer van toepassing */ }
#container #midden #product_lijst > div.nieuwspecial { /* voorlopig niet meer van toepassing */ }

#container #midden #product_lijst > div a { /* "open in nieuw venster link" */
position:absolute;
top:1px;
right:1px;
}

#container #midden #product_lijst > div img {
margin-top:5px;
}

#container #midden #product_lijst > div h1, /* artikelcode */
#container #midden #product_lijst > div h2, /* prijs(/zen) */
#container #midden #product_lijst > div h6 { /* bestelknop */
margin:0;
width:100%;
height:20px;
position:absolute;
left:0;
bottom:0;
font-size:12px;
}

#container #midden #product_lijst > div h1 {
bottom:45px;
}

#container #midden #product_lijst > div h2 {
bottom:25px;
}

#container #midden #product_lijst > div h2 span { /* de "van" in de "van-voor"-prijs */
font-size:10px;
text-decoration:line-through;
}

#container #midden #product_lijst > div h6 {
font-weight:normal;
bottom:8px;
}

#container #midden #product_lijst > div h6 img {
vertical-align:text-bottom;
}

/* staffelprijzen indicatie */
#container #midden #product_lijst > div h6 span.staffel {
font-size:16pt;
font-weight:bold;
line-height:25px;
}
/* XXX was maar tijdelijk
#container #midden #product_lijst > div strong {
position:absolute;
left:1px;
top:1px;
}
*/




/* ---- */
/* product detail - staat in #container #midden (zie: artikelen.php) */
#artikel_detail {
padding:10px;
}

#artikel_detail hr {
margin:10px 0;
}

#artikel_detail h1,  /* artikelnaam */
#artikel_detail h2 { /* artikelcode */
margin:0 0 5px 0;
padding:0;
}

#artikel_detail h1 {
font-size:12pt;
}

#artikel_detail h2 {
margin-top:10px;
font-size:8pt;
}

#artikel_detail #afbeelding_of_video {
padding-left:10px;
float:right;
}

#artikel_detail h3,     /* enkele prijs */
#artikel_detail table { /* staffelprijzen */
margin:20px 0;
padding:0;
font-size:11pt;
border:none;
border-collapse:collapse;
}

#artikel_detail table {
font-size:11pt;
font-weight:normal;
border:0 solid #aaa;
border-width:0 0 0 1px;
}

#artikel_detail th,
#artikel_detail td {
padding:2px 5px 2px 5px;
border:0 solid #aaa;
border-width:0 1px 0 0;
}

#artikel_detail td.r {
text-align:right;
}

#artikel_detail td.bold {
font-weight:bold;
}

#artikel_detail td.nob {
border:none;
}

#artikel_detail td.empty {
padding-left:0;
padding-right:0;
}

#artikel_detail p { /* omschrijving */
margin:0;
}

#artikel_detail dl { /* eigenschappen lijst */
margin:0;
padding:0;
}

#artikel_detail dl dt {
width:85px;
float:left;
}

#artikel_detail dl dd {
margin-left:90px;
}


#artikel_detail ul { /* categorie lijst */
margin:0;
padding:0 0 0 15px;
}



/* **** */
#container #voet {
padding:5px 0;
width:950px;
background-color:gainsboro;
border:1px solid dimgray;
}

#container #voet div.goeddoel {
text-align:center;
font-weight:bold;
font-size:1.2em;
line-height:25px;
}

#container #voet div.kolom {
width:240px;
float:left;
}

#container #voet div.betaalsites { /* eigenlijk div.kolom.betaalsites */
width:215px;
text-align:center;
}

#container #voet div.betaalsites a img {
margin:1px 5px;
}



/* **** */
a#sitemap {
display:none; /* is alleen maar voor zoekmachines bedoeld */
}