﻿/***************************** CSS Reset *****************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*********************************************************************/


/* FFFFFF is white, 000000 is black.*/
/* Margins and padding: top, right, bottom, left. */


/* Tag styles used in site. */
html	{overflow:scroll;} /* This prevents the 'page shift' problem when long pages require the scrollbar. It sets the vertical scrollbar to be visible all the time. */
body	{background-color:#EEEEEE; font-size:16px; font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;}

/* Color, Max width (120 * 8 = 960; iPad max width = 980), Top/bottom margin = 0 and center within left/right margins. */
#wrapper		{background-color:#FFFFFF; width:960px; margin:0px auto;} 

/* The clear property specifies which sides of an element where other floating elements are not allowed. */
#titlebar		{background-color:#000000; color:#FFFFFF; width:100%; height:30px; clear:both;}
#titlebar p		{text-align:center; font-weight:bold; font-size:12px; padding:9px 0px 9px 0px;}

/* The header div contains the logo div and the social media div. */
/* The overflow property specifies what happens if content overflows an element's box. */
#header			{background-color:#FFFFFF; width:100%; overflow:hidden;}
#logo			{padding:15px 0px 15px 10px; float:left;}

#socialmedia			{float:right;}
#socialmedia p			{color:#000000; font-size:11px; padding:5px 10px 5px 0px;}
#socialmedia ul li		{display:inline; list-style-type:none;}
#socialmedia img		{width:24px; height:24px;}

/* Set the background color of the entire menu bar. */
#topnavmenu			{background-color:#FFFFCC; width:100%; float:left; clear:both;}
/* Parent-level unordered list: Set position, z-index so that the menu will overlap above the next div, and alignment. */
#topnavmenu ul		{position:relative; z-index:2; text-align:center;}
/* Unordered list items: Inline and float left make the list items horizontal, width sets the max width of each list item, */
/*  height sets a nice height for each list item, and list-style-type turns off the bullet dots of each list item. */
#topnavmenu ul li	{display:inline; width:120px; height:30px; list-style-type:none; float:left;}
/* Carefully adjust the spacing (width and height) of each hyperlink, get rid of the hyperlink underline (text-decorartion), */
/*  change the background color, add some padding (indent) to the left of each list item. */
#topnavmenu ul li a	{background-color:#FFFFCC; display:block; width:120px; line-height:30px; text-decoration:none;}
/* Handle the reaction of the menu links. */
#topnavmenu ul li a:link		{background-color:#FFFFCC;}
#topnavmenu ul li a:visited		{background-color:#FFFFCC;}
#topnavmenu ul li a:hover		{background-color:#FFFF99;}
#topnavmenu ul li a:active		{background-color:#FFFFCC;}
#topnavmenu ul li a:focus		{background-color:#FFFFCC;}
/* Child-level alignment. */
#topnavmenu ul li ul	{text-align:left;}
/* Child-level hyperlink alignment. */
#topnavmenu ul li ul a	{width:115px; padding-left:5px;}
/* Child-level , hidden, when parent-level not being hovered over. */
#topnavmenu ul li ul		{visibility:hidden;}
/* Child-level , visible, when parent-level is being hovered over. */
#topnavmenu ul li:hover ul	{visibility:visible;}

#slider					{background-color:#FFFFFF; width:100%; height:220px; padding:10px 0px 0px 0px; float:left;}
#leftsliderform			{width:340px; height:200px;}
#leftslidercontrol		{background-color:#FFFFFF; width:340px; height:200px; padding:10px 0px 10px 0px; float:left;}
#centerimageslider		{background-color:#FFFFFF; width:280px; height:180px; padding:10px 0px 10px 0px; float:left; position:relative;}
#centerimageslidertext	{background-color:transparent; width:280px; height:20px; padding-bottom:10px; float:left;
						 position:absolute; left:350px; top:335px; z-index:1; color:#000000; font-size:12px;}
#leftsliderform			{width:340px; height:200px;}
#rightslidercontrol		{background-color:#FFFFFF; width:340px; height:200px; padding:10px 0px 10px 0px; float:left;}

/* The 4 slider control buttons are initially hidden in order to handle the case of users having Javascript being disabled. */
#sliderprevbtn			{background-color:transparent; border-color:transparent; font-style:italic; cursor:pointer;
						 width:80px; height:20px; margin:75px 0px 0px 255px; visibility:hidden;}
#slidernextbtn			{background-color:transparent; border-color:transparent; font-style:italic; cursor:pointer;
						 width:50px; height:20px; margin:75px 260px 0px 0px; visibility:hidden;}
#sliderstopbtn			{background-color:transparent; border-color:transparent; font-style:italic; cursor:pointer;
						 width:50px; height:20px; margin:45px 260px 0px 0px; visibility:hidden;}
#sliderstartbtn			{background-color:transparent; border-color:transparent; font-style:italic; cursor:pointer;
						 width:50px; height:20px; margin:0px 260px 0px 0px; visibility:hidden;}

#subslider				{background-color:#000000; color:#FFFFFF; width:100%; height:30px; overflow:hidden;}
#subslider p			{text-align:center; font-weight:bold; font-size:12px; padding:9px 0px 9px 0px;}

#content				{background-color:#FFFFFF; width:760px; margin:10px 10px 10px 10px; float:left;}
#content h1				{color:#000000; font-size:26px; font-weight:bold; border-bottom :1px #000000 solid; padding:0px 0px 5px 0px;}
#content h2				{color:#000000; font-size:20px; font-weight:bold; text-align:center; padding:0px 0px 5px 0px;}
#content h3				{color:#000000; font-size:16px; font-weight:normal; text-decoration:underline; padding:0px 0px 5px 0px;}
#content h4				{text-align:right; padding:0px 10px 0px 0px;}
#content p				{color:#000000; line-height:120%; padding:0px 0px 10px 0px;}
#content img			{background-color:#FFFFFF; margin:0px 0px 0px 45px;}
#content ul				{font-size:16px; padding:0px 0px 10px 15px;}
#content ul li			{color:#000000; list-style:disc outside; padding:5px 0px 0px 0px;}
#contenttitle			{width:100%; float:left;}
#contentdata			{background-color:#FFFFCC; width:624px; margin:10px 10px 10px 10px; float:left;}
#contentpictures		{width:96px; margin:10px 10px 10px 10px; float:left;}
#contentpictures img	{border:1px #000000 solid; margin:0px 0px 15px 0px;} /* Space out the images and use a border. */

/* Above-picture 'captions' on Home and Products pages.*/
#contentpictures h1		{font-size:12px; font-weight:normal; font-style:italic; border-bottom:0px; padding:0px 0px 5px 0px;}
/* Picture column header, above expandable pictures. */
#contentpictures h2		{font-size:12px; font-weight:normal; font-style:italic; text-align:left; padding:0px 0px 15px 0px;}
/* Picture column footer, below expandable pictures.*/
#contentpictures h3		{font-size:12px; font-weight:normal; font-style:italic; padding:0px 0px 0px 0px;}

#listcolumn1			{width:50%; float:left;}
#listcolumn2			{width:50%; float:left;}

#swiffycontainer		{width: 300px; height: 60px; margin:10px 0px 0px 0px;}

#email					{background-color:#FFFFCC; width:312px; padding:0px 0px 10px 0px; float:left;}
#telephone				{background-color:#FFFFCC; width:312px; padding:0px 0px 10px 0px; float:left;}
#postaladdress			{background-color:#FFFFCC; width:624px; padding:0px 0px 10px 0px; float:left;}
#postaladdress ul li	{list-style-type:none; padding:0px 0px 0px 0px;}
#feedbackformcontrol	{background-color:#FFFFCC; width:624px; padding:0px 0px 10px 0px; float:left;}

/* Tag style used in the feedback form. Note: the next single line should effect labels on the entire site.*/
label					{border:0px; margin:0px 0px 0px 45px; height:20px; text-align:left; position:relative;}

#feedbackform			{text-align:left; border:1px #000000 solid; margin:0px 20px 20px 20px; padding:20px;}
#name					{width:410px; height:20px; margin:0px 0px 10px 45px;}
#fromemailaddress		{width:410px; height:20px; margin:0px 0px 10px 45px;}
#subject				{width:410px; height:20px; margin:0px 0px 10px 45px;}
#message				{width:410px; height:150px; margin:0px 0px 10px 45px;}
#captcha				{background-color:#FFEEEE; width:410px; height:20px; margin:0px 0px 10px 45px;}
#submitbtn				{width:80px; height:30px; margin-left:230px;}
#nameerrormsg, #fromemailaddresserrormsg, #subjecterrormsg, #messageerrormsg, #captchaerrormsg
						{font-weight:normal; font-style:italic; color:#FF0000; margin:0px 0px 0px 3px; visibility:hidden;}
#captchatitle			{font-weight:bold;}
#captchaimg				{position:absolute; left:325px; top:-4px; z-index:3;}

#loginformcontrol		{background-color:#FFFFCC; width:624px; padding:0px 0px 10px 0px; float:left;}
#loginform				{text-align:left; border:1px #000000 solid; margin:0px 20px 20px 20px; padding:20px;}
#username				{width:410px; height:20px; margin:0px 0px 10px 45px;}
#password				{width:410px; height:20px; margin:0px 0px 10px 45px;}
#loginbtn				{width:80px; height:30px; margin-left:230px;}

#rightsidebar			{background-color:#FFFFFF; width:160px; height:215px; margin:10px 10px 10px 10px; overflow:auto; float:left;}
#rightsidebar h2		{color:#000000; font-size:14px; font-weight:bold; border-bottom:1px #000000 solid; padding:0px 0px 5px 0px;}
#rssnewsfeed p			{font-size:10px; font-weight:normal; font-style:italic; padding:1px 0px 0px 5px;}
#rssnewsfeed ul			{background-color:#EEEEEE; padding:0px 0px 0px 2px;}
#rssnewsfeed ul li		{font-size:12px; list-style-type:disc; margin:0px 0px 0px 15px; padding:5px 0px 0px 0px;}

#footer				{background-color:#000000; color:#FFFFFF; width:100%; height:30px; clear:both;}
#footer p			{font-size:10px; text-align:center; font-weight:normal; padding-top:10px;}
#footer ul li		{font-size:10px; text-align:center; font-weight:normal; padding-top:10px; display:inline;
					 width:320px; list-style-type:none; float:left;}
#footer ul li a		{text-decoration:none;}

/*
#footer					{background-color:#000000; color:#FFFFFF; width:100%; clear:both;}
#footer p				{font-size:10px; text-align:center; font-weight:normal; padding:10px 0px 10px 0px;}
*/

/* FFFFFF is white, 000000 is black. */
/* Margins and padding: top, right, bottom, left. */
