/**** Ok, as far as notes, the background is beige, and the header was fully 
assembled and absolute positioned,  The same with the three columns, contain 
everything,  stacked from top to bottom, absolute positioned.  The template 
title is absolute positioned, seperately, so I could overlay across the page 
columns.  Drop me an email for minor bugs.  Tested in free Editor Nvu and in 
DW, in IE and in Firefox. Validates xhtml and Css.  ******/

/*****   IMPORTANT NOTE: The basics are here, the canvas, images, colors, coding.  
Still may want or need to recode some of it, to fit your own technique.  Due to cross-
browser compatibility issues with liquid designs; which are somewhat different to work 
wit, I use no left or right pad/margin, at all, on outer divs, but instead nest two divs, 
like sticking a 3 inch box into a 4 inch box, to give you a 1/2 inch margin.  The outer 
at nearly full width, leave a few percent for play, style content centered, "margin:0 auto; and 
text-align:center;" and then insert an inner div, at 90 percent width (100 if needed), 
centered or floated, and a little pad to the inner div, if needed, .  The inner gets all 
styles, border, color, whatever.  This provides a fake or faux left/right pad/margin, as 
needed, by adjusting width percentage. You could also float the outer left, and the inner 
right, to give you the same outcome, as I did in my A12 template's left column.  *******/    





/***** CSS Document ******/

/** CSS REFERENCE CARD
http://www.w3schools.com/css/css_reference.asp  ***/


/**  The main trick to doing liquid width layouts, 
is that you cannot have pad/margin/border on 100%
wide divs.  They must be on width:auto divs.  To do 
this, must 100% it's outer, and style the inner.  **/

/***********  default font-size:12px, use 100% for that  ********/
/*****  90%=11px, 80% in forms, 85% otherwise roughs 10 to 10.5px, a minimum  *****/
/******  NOTEs: DW wont view all docs properly, try browsers first, before modification  *******/
/****  divs must float left for dw to view border, most pages must be 100% wide to view proper ********/
/*********  to center page is confusing, when float left is necessary  ************/
/**** trick for "center with float left" is float left 100% wide w/body margin sides 5% or more *****/
/**** Above not a 100% fix for dw view, borders still flakey *****/
/*****  another trick to keep position going, is only float what needs floating  *********/
/*****  try add or remove <br> in end of empty divs, or remove float, make dw view properly *******/
/*****  NOTE: The <strong> tag &/or no clear float at base, made link repeat at base of page  *****/
/**** The trick hack to stop hover jumpy links, is to put every section into a div, classed seperate  ****/
/******  any div that has a specified margin/pad can't have links without containers  *****/
/******  another hack, is to classify all links, so that they don't margin/pad jumpy  *****/
/*****  the divs containing links can't have set width and margin/pad alterations, or theyll be jumpy  *******/
/**** Hack: Removed width to stop jumpy hover-links, setting pad-margin made it width:auto  *****/
/**** Jumpy Links solved with px instead of % on pad/margin  ****/
/****  Rows of divs must be in wrappers, to wrap correctly, so they don't hang when wrapping"  ***/




/***  Height to "li a" works to allow full width 
         links when width:100% is not an option; 
		 and seems to force divs to hold contents, 
		 when float is not an option.  Height needs 
		 accuracy, or problematic with Firefox ****/
/****  FLOAT:LEFT WAS NEVER USED IN MANY HORIZONTAL ULs  *****/

/********  Not Blocked/Floated  **********/
/****  Appears that inner divs go against prior divs, but which ones?  *********/
/****  Deleting all unnecessary div borders resolved doublewide dw blowout  *****/
/*****  divs out of order, caused absolute columns to vanish  ******/
/***  absolute positioning, use left (never right dimension) fixes layering problem ******/
/**** bodycontainer floated left caused doublewide blowout  ******/


/****   VERY IMPORTANT NOTE  ****/
/****   
   KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE CANVAS_WRAP DIV, TO 
   KEEP ALL ABSOLUTE POSITIONED WORK BOXES VISIBLE IN Nvu and Dreamweaver 
   Editors.  IT's JUST A Z-INDEX RELATED FIX FOR WYSIWYG HTML EDITORS.
   VERY IMPORTANT NOTE  ****/

/***  Colors Used In the Original Template:
#92847B: Taupe Body Background 
#5c5c5c: Canvas Left Column Dark Gray: 
#FFFFFF: White Center/Right Canvas 
#372F2C: Darkest Black Rose Left Header
#736B68: Lighter Taupe Rose, Right Header
#7F7F7F: Medium Gray, Left Nav Hover and Header Title Gray
#336699: Blue Links, Center Column
#B48181: Mauve Links and Mauve H2 Margin
#A99D61: Gold, Header Text and left/top/base Links
****/


* {}

body {
margin: 0 auto; 
padding: 0; 
background-color: #92847B;
font-size:.70em;
font-family:verdana, arial, helvetica, sans-serif;
}

p {}

img {margin: 0; padding: 0; border:0;}


/* The background-image's for the .wrap below are for preloading 
all the page's images, just add your own images to the pattern */  
/***  Preload media  ***/
.wrap {
	background-image: url("media/arrowblack_left.gif");
	background-image: url("media/arrowwhite_left.gif");
	background-image: url("media/dualarrowgold.gif");
	background-image: url("media/brush.gif");
	background-image: url("media/camera1.jpg");
	background-image: url("media/camera2.jpg");
	background-image: url("media/camera3.jpg");
	background-image: url("media/ebay.gif");
	background-image: url("media/shadow_leftontaupe.jpg");
	background-image: url("media/shadow_rightontaupe.jpg");
	background-repeat: no-repeat;
	background-position: -5000px -5000px;}
/**** end preload images ****/

/***  Here's another CSS image preload trick: 
/***  PRELOAD IMAGES AGAIN, BY PUTTING IMAGES 
IN THIS CLASS,  AT THE BASE OF THE HTML  *******/
.hiddenpic {display:none;}
/**** end preload images ****/

/****  HEADER STARTS  ******/
/****  NOTES ON DIV-CAKE HEADER BOXES: THIS 
HEADER HAS 4 ROWS OF 4 DIVS, IN A WRAPPER. 
A VERY DIFFICULT TASK, IS TO MAKE THEM COOPERATE,
TO MAKE THEM ALL FLOAT AND OBEY WIDTH AND HEIGHT.
WELL, THE RESOLUTION HERE, FOR THE RECORD, WAS NOT 
TO FLOAT ANY DIVS WHICH HAVE PADDING, AND NOT TO FLOAT
ROW CONTAINERS.  IN ORDER TO ACCOMPLISH THIS, IN THIS 
CASE, HAD TO PUT THE IMAGES ON THE INNER-MOST DIVS, 
TO ILLIMINATE PADDING COMPLETELY.
****/

.wrap {
margin: 0; 
padding: 0; 
}

/**** VERY IMPORTANT NOTE
   KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE MAIN WRAP DIV, AND BE 
   SURE TO SET THE Z-INDEX STACK ORDER; TO KEEP ALL ABSOLUTE POSITIONED 
   WORK BOXES VISIBLE IN Nvu and Dreamweaver Editors.  IT's JUST A FIX 
   FOR WYSIWYG HTML EDITORS.   ****/

.absolute_title {
position:absolute;
left:5%;
top:44px;
margin: 0; 
padding: 0; 
width:90%;
border:0px solid #FFFFFF;
z-index:650;
font-size:2.5em;
text-indent:19.6%;
color:#FFFFFF;
font-weight:bold;}

.header_outer {
/****  For Positioning Header and for shadow_left image  *****/
position:absolute;
display:block;
margin: 0; 
padding: 0; 
left:5%;
top:2px;
width:90.1%;
background: transparent url("media/shadow_leftontaupe.jpg") repeat-y left top;
text-align:center;
color:#FFFFFF;
z-index:600;
}


.header_inner {
/****  For shadow_right image and 4 rows in header  *****/
display:block;
float:left;
margin: 0; 
padding: 0; 
width:100%;
background: transparent url("media/shadow_rightontaupe.jpg") repeat-y right top;
text-align:center;
color:#FFFFFF;
}

.rowone {
display:block;
margin: 0; 
padding: 0; 
height:10px;
width:auto;
background-color:#5C5C5C;
text-align:center;
color:#FFFFFF;
line-height:5px;}

.rowone_left {
display:block;
float:left;
margin: 0; 
padding: 0; 
width:24.35%;
height:10px;
background: transparent url("media/shadow_leftontaupe.jpg") repeat-y left top;
text-align:center;
line-height:5px;
color:#000000;
}
.rowone_right {
display:block;
float:right;
margin: 0; 
padding: 0; 
width:75.53%;
height:10px;
background: #FFFFFF url("media/shadow_rightontaupe.jpg") repeat-y right top;
text-align:center;
line-height:5px;
color:#000000;
}

.rowtwo {
display:block;
margin: 0; 
padding: 0; 
width:auto;
height:5px;
background:#372F2C;
text-align:center;
color:#FFFFFF;
line-height:3px;
}

.rowtwo_left {
display:block;
float:left;
margin: 0; 
padding: 0; 
width:24.35%;
height:5px;
background: transparent url("media/shadow_leftontaupe.jpg") repeat-y left top;
text-align:center;
color:#FFFFFF;
line-height:3px;
}

.rowtwo_right {
display:block;
float:right;
margin: 0; 
padding: 0; 
width:75.55%;
height:5px;
background: #736B68 url("media/shadow_rightontaupe.jpg") repeat-y right top;
text-align:center;
color:#FFFFFF;
line-height:3px;
}

.rowthree {
display:block;
margin: 0; 
padding: 0; 
height:80px;
width:auto;
background: #000000 url("media/brush.gif") 50% 0%;
text-align:center;
color:#FFFFFF;
}

.rowthree_left {
display:block;
float:left;
margin: 0; 
padding: 0; 
width:24.4%;
height:80px;
background: #000000 url("media/shadow_leftontaupe.jpg") repeat-y left top;
text-align:center;
color:#FFFFFF;
}

.rowthree_right {
display:block;
float:right;
margin: 0; 
padding: 0; 
width:75.4%;
height:80px;
background: TRANSPARENT url("media/shadow_rightontaupe.jpg") repeat-y right top;
text-align:center;
color:#FFFFFF;
}


.rowfour {
display:block;
margin: 0; 
padding: 0; 
height:15px;
background:#372F2C;
text-align:center;
color:#FFFFFF;
}

.rowfour_left {
float:left;
margin: 0; 
padding: 0; 
width:24%;
height:15px;
background: transparent url("media/shadow_leftontaupe.jpg") repeat-y left top;
text-align:center;
color:#FFFFFF;
font-weight:normal;
}

.rowfour_right {
float:right;
margin: 0; 
padding: 0; 
width:75.6%;
height:15px;
background: #736B68 url("media/shadow_rightontaupe.jpg") repeat-y right top;
text-align:center;
color:#FFFFFF;
font-weight:normal;
}

/****  HEADER ENDS ******/
/****  LEFT COLUMN BEGINS ******/

.left_column {
position:absolute;
left:5%;
top: 110px;
width:22%;
margin: 0 auto;
padding: 0;
background: #5C5C5C url("media/shadow_leftontaupe.jpg") repeat-y;
border:0px solid #eaeaea;
text-align:center;
color:#000000;
z-index:500;
 content: "chapter\A hoofdstuk\A chapitre";

}



/****  Center Column Begins   ****************/

.center_column {
display:block;
position:absolute;
top:110px;
left:27%;
margin:0;
padding:0;
width:68%;
background: #FFFFFF url("media/shadow_rightontaupe.jpg") repeat-y right;
text-align:left;
color:#000000;
z-index:400;}

/**** To fix jumpy hover links, had to remove padding percentage, 
and used pixels of padding instead.   *********/

/***** Adding overflow:auto to div boxes 
will add auto scrollbar functionality if needed.  ******/

.main_content {
display:block;
float:left;
margin: 0; 
margin-top:15px;
margin-bottom:5px;
padding: 0; 
padding-left:9px;
width:68%;
border: 0px solid #ffcc33;
color:#000000;
text-align:left;
}


.bodylinks_menu {
display:block;
float:left;
margin:4px 0px; 
padding:4px 0px;
width:100%;
border-bottom: 1px dashed #666666;
}


/******   Start right_column  *********/
/******  Very Important  ************/
/******  Keep the RIGHT_COLUMN div (html code) inside 
of the center column div, to keep the z-index (visibility) 
working in WYSIWYG EDITORS Nvu and Dreamweaver.
   Very Important  ^^^^^^^^   ************/
/******   Start right_column  *********/

.right_column {
position:absolute;
display:block;
top:15px;
left:72%;
margin: 0; 
padding: 0; 
padding-left:5px;
width:25%;
background-color: transparent;
border-left:1px dashed #999999;
text-align:left;
z-index:300;}

.headlines {
margin: 0;
padding:5px 0;
}

.footer {
	display:block;
	clear:both;
	margin:0 auto;
	margin-top:10px;
	padding: 0; 
	border-top:1px dashed #cccccc;
	width:90%;
	color: #000000;
	text-align:center;
}

.sidebox_a, .sidebox_b, .sidebox_c, .sidebox_d, .sidebox_e, .sidebox_f {
display:block;margin:0 auto;margin-top:15px;padding: 0;height:70px;width:75%;
border:1px solid #7f7f7f;color:#ffffff;}

.sidebox_a {background: transparent url("media/camera1.jpg") no-repeat center;}
.sidebox_b {background: transparent url("media/camera2.jpg") no-repeat center;}
.sidebox_c {background: transparent url("media/camera3.jpg") no-repeat center;}
.sidebox_d {background-color: transparent;}
.sidebox_e {background-color: #7F7F7F; border:1px solid black;}
.sidebox_f {height:135px;background: transparent url("media/ebay.gif") no-repeat center;
}

/*****  Start Menu Styles  *******/

/****  IMPORTANT NOTE ON LINKS:  ******/
/****  TO SAVE TIME AND ENERGY, THE LEFT TOP NAV MENU WILL BE WHITE,
ALL LINKS ON WHITE BACKGROUND AREA WILL BE BLUE, AND EVERYTHING ESLE GOLD 
#FFFFFF: White Center/Right Canvas 
#336699: Blue Links, Center Column
#B48181: Mauve Links and Mauve H2 Margin
#A99D61: Gold, Header Text and left/top/base Links  *****/
 

/****  "topmenu" HORIZONTAL  ****/
.topmenu {margin: 0; padding: 0; width:100%;}
ul.topmenu {margin: 0; padding: 0;padding-bottom:2px; list-style: none;text-align: center; }
ul.topmenu li {margin: 0; padding: 0;display:inline; width:25%; }
/****  "topmenu" horizontal menu link styles  "GOLD LINKS WITH BLUE ON HOVER   ****/
ul.topmenu li a:link, ul.topmenu a:visited {color:#A99D61;  font-weight:normal; text-decoration:underline;}
ul.topmenu li a:hover, ul.topmenu a:active  {color:#336699;  font-weight:normal;background-color: #cccccc;text-decoration:underline;  }

/****  LEFT SMALL BOXES: LINK STYLES: GOLD LINKS WITH BLUE ON HOVER  *****/
.sidebox_a a:link, .sidebox_a a:visited,
.sidebox_b a:link, .sidebox_b a:visited,
.sidebox_c a:link, .sidebox_c a:visited,
.sidebox_d a:link, .sidebox_d a:visited,
.sidebox_e a:link, .sidebox_e a:visited,
.sidebox_f a:link, .sidebox_f a:visited {
color:#A99D61;font-weight:normal;text-decoration:underline;}

.sidebox_a a:hover, .sidebox_a a:active,
.sidebox_b a:hover, .sidebox_b a:active,
.sidebox_c a:hover, .sidebox_c a:active,
.sidebox_d a:hover, .sidebox_d a:active,
.sidebox_e a:hover, .sidebox_e a:active, 
.sidebox_f a:hover, .sidebox_f a:active {
color:#336699;font-weight:normal;text-decoration:underline;background-color: #eaeaea;font-weight:normal;}

/****  Page Link Styles (NOT MENU LINKS)  BLUE LINKS WITH PINK ON HOVER   *****/
a:link, a:visited {width:100%;color:#336699;font-weight:normal;text-decoration:underline;}
a:hover, a:active {width:100%;color:#B48181;font-weight:normal; background-color:#eaeaea;text-decoration:underline;}

/***  bodylinks_column: Body columned menus  ***/
.bodylinks_column {display:block;float:left; margin:0 auto;  padding:0; width:100%; text-align:center;}
ul.bodylinks_column {display:block; float:left; margin:0; padding:0; display:block; width:49.5%;}
ul.bodylinks_column li {margin:0; padding:0; list-style: none;}
/****  bodylinks_column Link/hover Styles  ****/
ul.bodylinks_column a:link, .bodylinks_column a:visited {color:#336699;font-weight:normal; text-decoration:underline;background: url("media/dualarrowgold.gif") no-repeat top left; padding-left: 15px;}
ul.bodylinks_column a:hover, .bodylinks_column a:active {color:#B48181;font-weight:normal;text-decoration:underline;background: transparent url("media/dualarrowgold.gif") bottom left no-repeat;}



/***  submain left nav LIST STYLES  ***/
/***  9px padding-left is for spacing away from left dropshadow. Did 
 width:auto, except on nav ul li, which is 100%, to force cross-browser compatibility   ***/
.submain_nav {display:block;clear:both;margin:0 auto; margin-top:20px; padding:0; 
padding-left:9px; width:auto; text-align:center;text-indent:0px;}
.submain_nav ul {display:block;clear:both;margin:0; padding:0;
width:auto; height:auto;text-align:left;text-indent:0px;}
.submain_nav ul li {
display:block; width:100%;margin:0; padding:3px 0px 0px 0px;list-style: none; 
border-bottom: 1px solid #7f7f7f; text-indent:2px;}
.submain_nav ul li a {/** border-right: 4px ridge #6498ca; **/ width:auto;}
/****  featuredservices_nav LINK STYLES  ****/
.submain_nav ul li a:link, .submain_nav ul li a:visited {
display:block; width:99%;padding: 3px 0px;

font-size:10px;font-family:verdana;text-decoration:none; color:#FFFFFF;
border-right: 0px ridge #372F2C;font-weight:normal;}
.submain_nav ul li a:hover, .submain_nav ul li a:active {
display:block; width:99%;padding: 3px 0px; 
background: #666666 url("media/duoarrowsleft_blackandwhite.gif") no-repeat right 4px; 
font-size:10px;font-family:verdana;text-decoration:underline;color:#ffffff;
border-right: 0px ridge #736B68;}

/* the following 3 rules are for indented submenu items, if applicable  ***/
.submain_nav ul ul li {line-height: 10px;border-bottom: 0px solid #c2bbaf;}
.submain_nav ul ul li a:link,  .submain_nav ul ul li a:visited {
color:#ffffff; text-indent:8px;font-weight:normal; border:0;color:#cccccc;}
.submain_nav ul ul li a:hover, .submain_nav ul ul li a:active {
color:#ffffff; width:100%; text-decoration:underline; }
/***  Rules for active current topic and subtopic  ***/
.current_topic {}
.current_subtopic {background: url("media/duoarrowsleft_blackandwhite.gif") no-repeat right -16px;}
/***  ************  ***/




/****  "basemenu" HORIZONTAL   ****/
.basemenu {display:block;width:auto;margin: 0; padding: 0; }
ul.basemenu {display:block;margin: 0; padding: 0; list-style: none; text-align: center;}
ul.basemenu li {display:inline; margin: 0; padding: 0; width:25%;}
/****  "basemenu" menu link styles  BLUE LINKS, WITH PINK ON HOVER  ****/
ul.basemenu li a:link, ul.basemenu li a:visited {color:#336699;font-weight:normal;text-decoration:underline;}
ul.basemenu li a:hover, ul.basemenu li a:active  {color:#B48181;font-weight:normal;background-color: #eaeaea;font-weight:normal;text-decoration:underline;}

/****  Start Text Styles  *****/

h1 {
	margin:0; 
	padding:0;
	border-bottom: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	border-right: 20px solid #B48181;
	color: #336699;
	font-size: 1.5em;
	font-weight:normal;
}
	
h2 {
	   

	margin:0; 
	padding:0;
	border-bottom: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	border-right: 20px solid #B48181;
	color: #A99D61;
	font-size: 1.5em;
	font-weight:normal;
}	

h3 {
	margin:0; 
	padding:0;
	color: #336699;
	font-size: 1.5em;
	font-weight:normal;
}