/* =INITIAL MASS RESET
v2.1, by Faruk Ates - www.kurafire.net 
Addendum by Robert Nyman - www.robertnyman.com */ 
/* Neutralize styling: 
Elements we want to clean out entirely: */ 
form, fieldset { 
margin: 0; 
padding: 0; 
font: 100%/120% Verdana, Arial, Helvetica, sans-serif; 
} 
/* Neutralize styling: 
Elements with a vertical margin: */ 
h1, h2, h3, h4, h5, h6, p, pre, 
blockquote, ul, ol, dl, address { 
margin: 1em 0; 
padding: 0;
color: #737373; 
} 
/* Apply left margin: 
Only to the few elements that need it: */ 
li, dd, blockquote { 
margin-left: 2em; 
} 
/* Miscellaneous conveniences: */ 
form label { 
cursor: pointer; 
} 
fieldset { 
border: none; 
} 
/* Form field text-scaling */ 
input, select, textarea { 
font-size: 100%; 
} 

/* == SITEWIDE LINKS == */


a:link {
	color: #737373;
	text-decoration:underline;
}
a:visited {
	color: #737373;
	text-decoration:underline;
}
a:hover {
	color: #82a367;
	text-decoration:underline;
}
a:active {
	color: #737373;
	text-decoration:underline;
}

/* == PAGE LAYOUT TAGS == */

@charset "utf-8";

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #99a4a4;
	height: 100%;
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #737373;
}

html {
	background-color: #99a4a4;
	height: 100%;
	margin: 0 0 1px 0; /* extra 1px on bottom added to the 100% height ensures scrollbars on all pages in Firefox to prevent 'jump' */
}

/* Default Paragraph and headers */
P {
	font-family:Arial, Helvetica, sans-serif;	
	font-size:13px;
	line-height:16px;
	font-weight:400;
	color: #737373;
}
ol {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:400;
	color: #737373;
}	
H3 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	font-weight:bold;
	color: #737373;
}
dl {
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	font-weight:400;
	color: #737373;
}	


.twoColFixLtHdr #container {
	position: relative; 
	width: 850px;
	height: 600px;
	background-color: #FFFFFF;
	margin: 25px auto 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	/*  border: solid 1px #FFFFFF;  tag disabled */
} 
.twoColFixLtHdr #container_about { /*custom for about page to enable a grey background on the left side */
	position: relative; 
	width: 850px; 
	height: auto; 
	background-color: #b9bebd;
	margin: 25px auto 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	/*  border: solid 1px #FFFFFF;  tag disabled */
} 
.twoColFixLtHdr #container_contact { /*custom for contact page to enable a green background on the left side */
	position: relative; 
	width: 850px;  
	background-color: #b3c8a1;
	margin: 25px auto 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	/*  border: solid 1px #FFFFFF;  tag disabled */
} 
.twoColFixLtHdr #container_talks { /*custom for talks page to enable a grey background on the left side */
	position: relative; 
	width: 850px;  
	background-color: #b9bebd; 
	margin: 25px auto 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	/*  border: solid 1px #FFFFFF;  tag disabled */
} 
.twoColFixLtHdr #container_products { /*custom for about page to enable a grey background on the left side */
	position: relative; 
	width: 850px; 
	background-color: #b9bebd;
	margin: 25px auto 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	/*  border: solid 1px #FFFFFF;  tag disabled */
} 
/* == PAGE HEADER LAYOUT == */

.twoColFixLtHdr #header { 
	background: #FFFFFF; 
	padding: 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
.twoColFixLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	border-bottom: 2px solid white;
}
.twoColFixLtHdr #header h2 { /* blue */
	margin: 0;
	border-bottom:solid 2px white;
	background: #afc6d0;
}
.twoColFixLtHdr #header h3 { /* green */
	margin: 0;
	background: #b3c8a1;
}
.twoColFixLtHdr #header h4 { /* grey */
	margin: 0;
	background: #b9bebd;
}

/* HEADER: Navigation */

#headerlinks {/* styles the list of top buttons */
	width: 850px;
	border-bottom: solid 2px white;
}
#headerlinks ul,#headerlinks li {  /* clears out the list element so we can use it to layout the buttons */
	padding:0;
	margin:0;
	list-style:none;
}
#headerlinks li { /* floats the list left so we can keep everything inline, while still using block level elements */
	float:left;
}
#headerlinks a {
	display:block;
}
#ex_home {/* image swap css for Main site logo. This CSS allows us to have a text tag for the links, overlapped completely by the image, which is the background for the span tag contained within this tag. Text link will show up for search engines, disabled users. */
	position:relative; 
	padding:0; 
	overflow:hidden; 
	width:376px; 
	height:93px;
	display:block;
}
#ex_home span { /* this is where the image for the nav button is called from */
	position:absolute; 
	margin:0; 
	left:0; 
	top:0; 
	background:#fff url(images/willard_logo.gif) no-repeat;
	width: 376px;
	height:93px;
}
#ex_aboutbob {/* image swap css for ABOUT logo. */
	position:relative; 
	padding:0; 
	overflow:hidden; 
	width:95px; 
	height:93px;
	display:block;
}
#ex_aboutbob span { 
	position:absolute; 
	margin:0; 
	left:0; 
	top:0; 
	background:#fff url(images/logo_about.gif) no-repeat;
	width: 95px;
	height:93px;
}
#ex_aboutbob span:hover {
	background:#fff url(images/logo_about.gif) no-repeat -95px 0;
}

#ex_contact {/* image swap css for CONTACT logo. */
	position:relative; 
	padding:0; 
	overflow:hidden; 
	width:95px; 
	height:93px;
	display:block;
}
#ex_contact span { 
	position:absolute; 
	margin:0; 
	left:0; 
	top:0; 
	background:#fff url(images/logo_contact.gif) no-repeat;
	width: 95px;
	height:93px;
}
#ex_contact span:hover {
	background:#fff url(images/logo_contact.gif) no-repeat -95px 0;
}
#ex_talks {/* image swap css for TALKS logo. */
	position:relative; 
	padding:0; 
	overflow:hidden; 
	width:95px; 
	height:93px;
	display:block;
}
#ex_talks span { 
	position:absolute; 
	margin:0; 
	left:0; 
	top:0; 
	background:#fff url(images/logo_talks.gif) no-repeat;
	width: 95px;
	height:93px;
}
#ex_talks span:hover {
	background:#fff url(images/logo_talks.gif) no-repeat -95px 0;
}
#ex_books {/* image swap css for BOOKS, SPREADSHEETS DVDs and SLIDES logo. */
	position:relative; 
	padding:0; 
	overflow:hidden; 
	width:189px; 
	height:93px;
	display:block;
}
#ex_books span { 
	position:absolute; 
	margin:0; 
	left:0; 
	top:0; 
	background:url(images/logo_books.gif) no-repeat;
	width: 189px;
	height:93px;
}
#ex_books span:hover {
	background:#fff url(images/logo_books.gif) no-repeat -189px 0;
}
/* NOTE: Other rollovers are contained in rollovers.css stylesheet, called from where needed */

/* == PAGE SIDEBAR LAYOUT == */

.twoColFixLtHdr #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 205px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 0px;
}
.twoColFixLtHdr #sidebar1 h1 {
	margin: 0; 
	padding: 2px 0 0 0; 
}
.twoColFixLtHdr #sidebar_about {
	float: left; /* this is the grey sidebar on the about page */
	width: 245px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 0px;
}
.twoColFixLtHdr #sidebar_about h1 {
	margin: 0; 
	padding: 20px 0 0 20px; 
}
.twoColFixLtHdr #sidebar_contact {
	float: left; /* this is the left sidebar, blue and green */
	width: 376px; 
	padding: 0px;
}
.twoColFixLtHdr #sidebar_contact h1 {
	margin: 0; 
	padding: 2px 0 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size:18px;
	color:#FFFFFF;
}
.twoColFixLtHdr #sidebar_contact p {
	font-size:15px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: 0.5px;
	text-transform:uppercase;
	color:#FFFFFF;
	}
.twoColFixLtHdr #sidebar_talks {
	float: left; /* this is the grey sidebar on the about page (shows page background colour) */
	width: 245px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	padding: 0px;
}
.twoColFixLtHdr #sidebar_talks h1 {
	margin: 0; 
	padding: 20px 0 0 20px; 
}
/* == PAGE CENTRE LAYOUT == */

.twoColFixLtHdr #mainContent { 
	margin: 0 0 0 50px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	text-align: center;
	padding: 0 80px 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 
.twoColFixLtHdr #mainContent p { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align:center;
	color:#737373
}

.twoColFixLtHdr #mainContent_about {
	margin: 0 0 0 245px; /* the left margin on this div element creates the grey column down the left side of the page */
	padding: 10px 80px 10px 20px; 
	background-color:#FFFFFF;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
} 
.twoColFixLtHdr #mainContent_contact { 
	margin: 0 0 0 376px; /* larger left margin here for the blue & green boxes */
	padding: 90px 80px 70px 10px; /* padding at left & right margin */
	background-color:#FFFFFF; /* white background for main page area */
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;		
	color: #737373;
} 
.twoColFixLtHdr 



#mainContent_talks {  /*fixed height - change if you add or delete GIF images in header */
	height: 650px;


	margin: 0 0 0 245px; /* the left margin on this div element creates the blue column down the left side of the page */
	padding: 10px 80px 10px 20px; 
	background-color:#FFFFFF;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
} 
.twoColFixLtHdr #mainContent_talks_var { /* variable height */
	margin: 0 0 0 245px; /* the left margin on this div element creates the blue column down the left side of the page */
	padding: 10px 80px 10px 20px; 
	background-color:#FFFFFF;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
} 
.twoColFixLtHdr #mainContent_talks_var h1 { /* wide grey elements */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: bold; 
	padding: 5px;
	letter-spacing: 0.5px;
	background-color: #b9bebd;
	color: #FFFFFF;
}
.twoColFixLtHdr #mainContent_products {
	margin: 0 0 0 245px; /* the left margin on this div element creates the grey column down the left side of the page */
	padding: 10px 80px 10px 20px; 
	background-color:#FFFFFF;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
} 
.twoColFixLtHdr #mainContent_products h2 {
	font-family: Helvetica, Arial, sans-serif;
	font-size:17px;
	font-weight: normal;
	color:#82a367 ;
	margin-bottom: -10px;
}
.twoColFixLtHdr #mainContent_products ul {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 16px;
	font-weight: normal;
}
.twoColFixLtHdr #mainContent_products li {
	padding: 2px;
}
.twoColFixLtHdr #mainContent_products_trailer {
	margin: 0 0 0 245px; /* the left margin on this div element creates the grey column down the left side of the page */
	padding: 30px 80px 10px 75px; 
	background-color:#FFFFFF;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
} 
#mainContent_talks ul {
	padding:0;
	margin:1em 0 0 0;
	list-style-image: none;
	list-style-type: square;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#737373;
}
#mainContent_talks li {
	padding:3px;
}
#mainContent_talks ol {
	padding:0;
	margin:0 15px 0 15px;
	list-style-image: none;
	list-style-type: decimal;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#737373;
}

/* THREE-COLUMN LAYOUT FOR BOOKS, SPREADSHEETS, DVDS AND SLIDES PAGES */

/* Tips for absolutely positioned sidebars:
1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire.
2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. So, the footer will have to be absolutely positioned on this page or it will not appear. t*/

#column1 {
	position: absolute;
	top: 129px;
	left: 0px;
	width: 283px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0 0px; /* padding keeps the content of the div away from the edges */
}
#column2 {
	position: absolute;
	top: 129px;
	left: 283px;
	width: 281px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0 2px; /* padding keeps the content of the div away from the edges */
}
#column3 {
	position: absolute;
	top: 129px;
	left: 566px;
	width: 282px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #FFFFFF; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 0 0 0 2px; /* padding keeps the content of the div away from the edges */
}
.greenbox { /* this class is used to produce the book cover boxes on the product page */
	height: 167px;
	background-color: #b3c8a1;
	padding:10px 0 5px 0;
	vertical-align: middle;
	margin: 2px 0 0 0;
}
.greybox { /* this class is used to produce the text boxes on the product page */
	height: 80px;
	margin: 0;
	background-color: #b9bebd;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	font-style: normal;
	color: #FFFFFF;
	padding: 5px 10px;
	vertical-align: middle; 
}
.bluebox a:link {
	color: #FFFFFF;
}
.bluebox a:visited {
	color: #FFFFFF;
}
.bluebox a:hover {
	color: #85a6ba;
}
a:active {
	color: #85a6ba ;
}

.productlist {
	padding:0;
	margin:10px 5px 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

/* == PAGE FOOTER LAYOUT == */

.twoColFixLtHdr #footer { 
	padding: 0 10px 0 5px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#99a4a4; 
} 
.twoColFixLtHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color:#737373;
	padding: 5px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Absolutely positioned footer for products main page */
.twoColFixLtHdr #footer_products { 
	position: absolute;
	top: 660px;
	padding: 0 10px 0 5px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#99a4a4; 
} 
.twoColFixLtHdr #footer_products p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color:#737373;
	padding: 5px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* == FORM LAYOUT == */

label { /* blue form labels */
	display:inline;
	width:auto;
	padding: 4px;
	margin:0px;
	font-weight:bold;
	text-transform:uppercase;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
	background-color: #afc6d0;
	background-position: center center;
}
input {
	width: 15em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 1em 0 0 0;
	padding: 4px;
}
input[type=radio],
input[type=submit],
input[type=image],
input[type=checkbox],
input[type=reset] { /* ensure that buttons are all auto width instead of the styled 'input' width */
width: auto;
}
#submit {
	width:auto;
}
#reset {
	width:auto;
}
textarea {
	width: 30em;
	height: 12em;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	margin: 1em 0 0 0;
	padding: 4px;
}
legend {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
}

/* == MISCELLANEOUS LAYOUT == */


.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.clearfix:after { /* this is another float clearing tag, including the IE specific Mac fix below it */
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
/* End hide from IE-mac */

.bluebackground {
	background: #afc6d0;
	padding: 0;
	border-bottom: 2px solid #FFFFFF;
}
.greenbackground {
	background: #b3c8a1;
	padding: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: white;
}

/* == FONT RELATED == */


.nomargins {
	margin: 0;
}
.smallmargins {
	margin-top: -9px;
}
.large {
	font-size:24px;
	font-weight: bold;
}
.medium {
	font-size:18px;
	font-weight: bold;
}
.small {
	font-size:10px;
}
.emphasis {
	font-weight:bold;
	text-transform:uppercase;
	color:#869E72;
}
.centerimage {
	text-align:center;
	margin: 0px;
	padding: 0px;
}
.error {
	font-size:12px;
	color: red;
}