/**************************************/
/*** main styles for the page       ***/
/**************************************/

html {
	height: 100%; /*needed for background shadow*/
	overflow-y: scroll;
}

body {
	text-align: center;
	margin: 0px;
	font-family: arial;
	height: 100%; /*needed for background shadow */
	font-size: 10pt;
}

a {
	color: #000000;
	text-decoration: underline;
}

img { border-style: none;}

/* needed to clear the floats of left and right column, to fill the shadow background */
.clearer {
	clear: both;
	visibility: hidden;
}
#background {
	background-image: url('images/achtergrond/schaduwmiddentrans.png');
	position: relative;
	text-align: left;
	margin: 0px auto;
	width: 903px;
	background-repeat: repeat-y;
	min-height: 100%; /*needed for background shadow, if used only height, if pages is bigger than browser screen the shadow background is not repeated from that point */
	/*height: 100%;*/
}

.container { height: 100%; }

#columnleft {
	margin-top: 60px;
	margin-left: 50px;
	width: 251px;
	float: left;
}
#bodymenuleft {
	width: 251px;
	margin-top: 50px;
	/*float: left;*/
}

#bodymenuleft ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

#bodymenuleft li {
	color: #ffffff;
	background-repeat: no-repeat;
	padding: 0px;
	margin: 0px;
	height: 17px;
	margin-bottom: 2px;
}
#bodymenuleft li a { /* absolute and height needed for correct size and position of link */
	position: absolute;
	height: 17px;
	width: 249px;
}

#columnright {
	margin-top: 60px;
	margin-right: 50px;
	width: 497px;
	float: right;
}

#headermenuleft {
	margin-top: 10px;
	float: left;
}
#headermenuleft img {
	visibility:hidden;
}
#headermenuleft a { /* absolute and height needed for correct size and position of link */
	position: absolute;
	height: 17px;
	width: 157px;
}
#headermenuleft div {
	height: 17px;
	width: 157px;
	background-repeat: no-repeat;
}

#headermenuright {
	margin-top: 10px;
	margin-right: 3px;
	float: right;
	font-size: 8pt;
}
#headermenuright  a{
	text-decoration: none;
}

#bodycontent {
	width: 495px;
	margin-top: 20px; /* was 40px minus 20px for always next h3 margin-top*/
	float: right;
}

body.fotos #bodycontent img, p.fotos img { /* margin and rounded border for foto's*/
	margin: 4px;
	/*border: 1px solid black;*/
	-moz-border-radius: 10px; /* gecko, mozzila; not necessary anymore in new firefox 4, see https://developer.mozilla.org/en/css/-moz-border-radius*/
	-webkit-border-radius: 10px; /* webkit: chrome, safari*/
	border-radius: 10px;
}

h3 {
	text-decoration: bold;
	font-size: 12pt;
	margin-top: 20px;
	margin-bottom: 5px;
}

table.prijslijst tr.comment td{
	font-size: 10px;
	font-style: italic;
	padding-top: 5px;
}

table.prijslijst tr.kop1 td{
	font-weight: bold;
	padding-top: 10px;
}

table.prijslijst tr.kop0 td{
	font-weight: bold;
	padding-top: 20px;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	border-bottom-color: white;
}

/************* end ********************/


/**************************************/
/*** dynamic styles for buttons etc ***/
/**************************************/

/* repeated logo background, depends on page which colour */
body {background-image: url('images/achtergrond/bg0.png')} /* if class is not known */
body.index {background-image: url('images/achtergrond/bg0.png')}
body.jafra {background-image: url('images/achtergrond/bg1.png')}
body.workshops {background-image: url('images/achtergrond/bg2.png')}
body.drgrandel {background-image: url('images/achtergrond/bg3.png')}
body.makeup {background-image: url('images/achtergrond/bg4.png')}
body.specialisaties {background-image: url('images/achtergrond/bg5.png')}
body.lichaamenmassages {background-image: url('images/achtergrond/bg6.png')}
body.peeling {background-image: url('images/achtergrond/bg7.png')}
body.kapsalon {background-image: url('images/achtergrond/bg8.png')}
body.prijslijst {background-image: url('images/achtergrond/bg9.png')}
body.contact {background-image: url('images/achtergrond/bg10.png')}
body.fotos {background-image: url('images/achtergrond/bg11.png')}
body.philoderm {background-image: url('images/achtergrond/bg12.png')}

/* logo in left column above menu, depends on page which colour */
#columnleft div:first-child {background-image: url('images/fotos/0.png'); height: 65px; width: 251px}
/*#columnleft div.index {background-image: url('images/fotos/0.png'); height: 65px; width: 251px}
#columnleft div.jafra {background-image: url('images/fotos/1.png'); height: 65px; width: 251px}
#columnleft div.workshops {background-image: url('images/fotos/2.png'); height: 65px; width: 251px}
#columnleft div.drgrandel {background-image: url('images/fotos/3.png'); height: 65px; width: 251px}
#columnleft div.makeup {background-image: url('images/fotos/4.png'); height: 65px; width: 251px}
#columnleft div.specialisaties {background-image: url('images/fotos/5.png'); height: 65px; width: 251px}
#columnleft div.lichaamenmassages {background-image: url('images/fotos/6.png'); height: 65px; width: 251px}
#columnleft div.peeling {background-image: url('images/fotos/7.png'); height: 65px; width: 251px}
#columnleft div.kapsalon {background-image: url('images/fotos/8.png'); height: 65px; width: 251px}
#columnleft div.prijslijst {background-image: url('images/fotos/9.png'); height: 65px; width: 251px}
#columnleft div.contact {background-image: url('images/fotos/10.png'); height: 65px; width: 251px}
#columnleft div.fotos {background-image: url('images/fotos/11.png'); height: 65px; width: 251px}
#columnleft div.philoderm {background-image: url('images/fotos/12.png'); height: 65px; width: 251px}*/

/* logo block in right column above submenu's, depends on page which colour */
/*#columnright div:first-child {background-image: url('images/balken/b0.png'); height: 46px; width: 495px}*/
#columnright div.index {background-image: url('images/balken/b0.png'); height: 46px; width: 495px}
#columnright div.jafra {background-image: url('images/balken/b1.png'); height: 46px; width: 495px}
#columnright div.workshops {background-image: url('images/balken/b2.png'); height: 46px; width: 495px}
#columnright div.drgrandel {background-image: url('images/balken/b3.png'); height: 46px; width: 495px}
#columnright div.makeup {background-image: url('images/balken/b4.png'); height: 46px; width: 495px}
#columnright div.specialisaties {background-image: url('images/balken/b5.png'); height: 46px; width: 495px}
#columnright div.lichaamenmassages {background-image: url('images/balken/b6.png'); height: 46px; width: 495px}
#columnright div.peeling {background-image: url('images/balken/b7.png'); height: 46px; width: 495px}
#columnright div.kapsalon {background-image: url('images/balken/b8.png'); height: 46px; width: 495px}
#columnright div.prijslijst {background-image: url('images/balken/b9.png'); height: 46px; width: 495px}
#columnright div.contact {background-image: url('images/balken/b10.png'); height: 46px; width: 495px}
#columnright div.fotos {background-image: url('images/balken/b11.png'); height: 46px; width: 495px}
#columnright div.philoderm {background-image: url('images/balken/b12.png'); height: 46px; width: 495px}

/* logo block in right column webshop link above submenu's, depends on page which colour */
#columnright div.index a {background-image: url('images/winkelwagen/b0w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.jafra a {background-image: url('images/winkelwagen/b1w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.workshops a {background-image: url('images/winkelwagen/b2w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.drgrandel a {background-image: url('images/winkelwagen/b3w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.makeup a {background-image: url('images/winkelwagen/b4w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.specialisaties a {background-image: url('images/winkelwagen/b5w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.lichaamenmassages a {background-image: url('images/winkelwagen/b6w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.peeling a {background-image: url('images/winkelwagen/b7w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.kapsalon a {background-image: url('images/winkelwagen/b8w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.prijslijst a {background-image: url('images/winkelwagen/b9w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.contact a {background-image: url('images/winkelwagen/b10w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.fotos a {background-image: url('images/winkelwagen/b11w.png'); height: 46px; width: 43px; display: block; float: right}
#columnright div.philoderm a {background-image: url('images/winkelwagen/b12w.png'); height: 46px; width: 43px; display: block; float: right}


/* submenu links are dynamically generated based on the anchor links in the content, names have to match these styles for the correct link button */
#headermenuleft div.homewelkom {background-image: url('images/subknoppen/0a.png')}
#headermenuleft div.homenieuws {background-image: url('images/subknoppen/0b.png')}
#headermenuleft div.homepersoonachterdesalon {background-image: url('images/subknoppen/0c.png')}
#headermenuleft div.homemedewerkers {background-image: url('images/subknoppen/0d.png')}
#headermenuleft div.homelookgoodfeelbetter {background-image: url('images/subknoppen/0e.png')}
#headermenuleft div.homeanbos {background-image: url('images/subknoppen/0f.png')}

#headermenuleft div.jafraalgemeen {background-image: url('images/subknoppen/1a.png')}
#headermenuleft div.jafraproducten {background-image: url('images/subknoppen/1b.png')}
#headermenuleft div.jafrajafraconsulente {background-image: url('images/subknoppen/1c.png')}

#headermenuleft div.workshopsalgemeen {background-image: url('images/subknoppen/2a.png')}
#headermenuleft div.workshopsskincare12 {background-image: url('images/subknoppen/2b.png')}
#headermenuleft div.workshopswellnessbodycare {background-image: url('images/subknoppen/2c.png')}
#headermenuleft div.workshopsmakeupdagavond {background-image: url('images/subknoppen/2d.png')}
#headermenuleft div.workshopshairstyling {background-image: url('images/subknoppen/2e.png')}

#headermenuleft div.drgrandelalgemeen {background-image: url('images/subknoppen/3a.png')}
#headermenuleft div.drgrandelbehandelingen {background-image: url('images/subknoppen/3b.png')}

#headermenuleft div.makeupalgemeen {background-image: url('images/subknoppen/4a.png')}
#headermenuleft div.makeuppermanentemakeup {background-image: url('images/subknoppen/4b.png')}
#headermenuleft div.makeupbeautytatoegage {background-image: url('images/subknoppen/4c.png')}

#headermenuleft div.specialisatiespedicure {background-image: url('images/subknoppen/5a.png')}
#headermenuleft div.specialisatieshuidverzorgingman {background-image: url('images/subknoppen/5b.png')}
#headermenuleft div.specialisatiesacnebehandeling {background-image: url('images/subknoppen/5c.png')}
#headermenuleft div.specialisatiesaromatherapie {background-image: url('images/subknoppen/5d.png')}
#headermenuleft div.specialisatiesdonkerehuid {background-image: url('images/subknoppen/5e.png')}
#headermenuleft div.specialisatiesouderehuid {background-image: url('images/subknoppen/5f.png')}
#headermenuleft div.specialisatiesmanicure {background-image: url('images/subknoppen/5g.png')}

#headermenuleft div.lichaamenmassageslichaamsbehandeling {background-image: url('images/subknoppen/6a.png')}
#headermenuleft div.lichaamenmassagesvoetreflexzonemassage {background-image: url('images/subknoppen/6b.png')}
#headermenuleft div.lichaamenmassageshotstonemassage {background-image: url('images/subknoppen/6c.png')}
#headermenuleft div.lichaamenmassageswellnessbehandeling {background-image: url('images/subknoppen/6d.png')}

#headermenuleft div.peelingmechanischepeeling {background-image: url('images/subknoppen/7a.png')}
#headermenuleft div.peelingchemischepeeling {background-image: url('images/subknoppen/7b.png')}

#headermenuleft div.kapsalonalgemeen {background-image: url('images/subknoppen/8a.png')}
#headermenuleft div.kapsalonartego {background-image: url('images/subknoppen/8b.png')}

#headermenuleft div.prijslijstsalon {background-image: url('images/subknoppen/9a.png')}
#headermenuleft div.prijslijstkapsalon {background-image: url('images/subknoppen/9b.png')}
#headermenuleft div.prijslijstpeeling {background-image: url('images/subknoppen/9c.png')}
#headermenuleft div.prijslijstaanbiedingen {background-image: url('images/subknoppen/9d.png')}

#headermenuleft div.contactopeningstijden {background-image: url('images/subknoppen/10b.png')}
#headermenuleft div.contactroutebeschrijving {background-image: url('images/subknoppen/10c.png')}
#headermenuleft div.contactafspraakmaken {background-image: url('images/subknoppen/10a.png')}
#headermenuleft div.contactlinks {background-image: url('images/subknoppen/10d.png')}

#headermenuleft div.philodermover {background-image: url('images/subknoppen/12a.png')}


/* menu links are based on page name, this has to match these styles */
/* #bodymenuleft li.index {display: none} possible to leave pages out of navigation*/
#bodymenuleft li.webshop {background-image: url('images/knoppen/k13.png')}
#bodymenuleft li.jafra {background-image: url('images/knoppen/k1.png')}
#bodymenuleft li.workshops {background-image: url('images/knoppen/k2.png')}
#bodymenuleft li.drgrandel {background-image: url('images/knoppen/k3.png')}
#bodymenuleft li.makeup {background-image: url('images/knoppen/k4.png')}
#bodymenuleft li.specialisaties {background-image: url('images/knoppen/k5.png')}
#bodymenuleft li.lichaamenmassages {background-image: url('images/knoppen/k6.png')}
#bodymenuleft li.peeling {background-image: url('images/knoppen/k7.png')}
#bodymenuleft li.kapsalon {background-image: url('images/knoppen/k8.png')}
#bodymenuleft li.philoderm {background-image: url('images/knoppen/k12.png')}
#bodymenuleft li.afspraakmaken {background-image: url('images/knoppen/k14.png')}

/************* end ********************/