/****************
      LAYOUT
 ****************/

	body {
		padding: 0px;
		margin: 0px;	
		background-color: #ffffff;
		font-family: Arial, Verdana, sans-serif;
		font-size: 12px;
	}
	
	/* enforce border-to-border box measurement */
	div {
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	
	form {
		padding: 0px;
		margin: 0px;
	}
	
	ul {
		display: inline;
		margin-left: 0px;
	}

	li {
		margin-left: 10px;
	}
	ul.service {
		display: block;
		margin: auto;
	}
	li.service {
		margin-left: 20px;
		line-height: 200%;
	}
	
	#page {
		margin: 0px;
		margin-left: 0px;
		margin-right: auto;
		padding: 0px;
		min-width: 760px;
		/* IE Dynamic Expression to set the width, as IE doesn't support min-width */
	    width: expression(document.body.clientWidth < 800 ? "780px" : "100%" );
	}
	
	#header {
		padding: 0;
		margin-bottom: 0;
		background-color: #ffffff;
	}
	
	#header #logo {
		width: 232px;
		float: left;		
	}
	
	#header #image {
		background-image: url('images/bg-top.gif');
		text-align: right;		
	}
	
	#header #toolbar {
		background-image: url('images/bg-welcome.gif');
		width: 100%;
		height: 20px;
		color: #ffffff;
		font-family: Verdana;
		font-size: 10px;
		font-weight: bold;
	}
	#header #toolbar p {
		margin: 4px 0px 0px 10px;	
	}
	#header #toolbar a {
		color: #ffffff;
	}
	
	#content {
		padding: 10px;
		margin-left: 180px;
		background-color: #ffffff;
		height: 1%;
	}
	
	#content3col {
		padding: 10px;
		margin-left: 180px;
		margin-right: 180px;
		background-color: #ffffff;
		height: 1%;
	}

	#nav {
		float: left;
		width: 180px;
		\width: 180px;
		w\idth: 180px;
		margin: 0;
		margin-right: 0;
		padding: 0;
		background-color: #ffffff;
	}
	
	#navRight {
		float: right;
		width: 180px;
		\width: 180px;
		w\idth: 180px;
		margin: 0;
		margin-left: 0;
		padding: 0;
		background-color: #ffffff;
	}
	
	#footer {
		clear: both;
		padding: 3px 8px 3px 8px;
		margin-top: 0;
		background-color: #57166c;
		color: #ffffff;
		text-align: right;
		font-size: 11px;
		font-weight: bold;
	}
	#footer a {
		color: #ffffff;
	}
	

	
	div.panel, td.panel {
		background-color: #f9e088;
		border: 1px solid #57166c;
		padding: 5px;
	}

	div.insetPanelHeader {
		background-color: #f9e088;	
		border: 1px solid #57166c;
		padding: 5px;
		margin: 0px 0px 0px 10px;
		width: 525px;
	}

	div.insetPanel {
		border: 1px solid #57166c;
		border-width: 0px 1px 1px 1px;
		padding: 10px;
		margin: 0px 0px 20px 10px;
		width: 515px;
	}
	
	div.childCategories {
		line-height: 180%;
	}
	
	div.pad10, td.pad10, td.insetTD {
		padding: 10px;
	}
	
	div.insetBoxHeader {
		background-color: #57166c;
		color: #ffffff;
		text-align: center;
		font-size: 11px;
		font-weight: bold;
		padding: 2px 0px 2px 0px;
	}
	
	div.insetBox {
		background-color: #f9e088;
		border: 1px solid #57166c;
		padding: 10px;
		text-align: center;
		font-size: 11px;
	}
	
	div.alertBoxHeader {
		background-color: #ff0000;
		color: #ffffff;
		text-align: center;
		font-size: 12px;
		font-weight: bold;
		padding: 3px 0px 3px 0px;
	}
	
	div.alertBox {
		background-color: #ffffff;
		border: 1px solid #ff0000;
		padding: 10px;
		font-size: 12px;
	}
	
	hr {
		color: #85a5ff;
		height: 1px;
	}
	
	a img {
		border: 0;
	}
	
	a {
		color: #4d1360;
	}


/****************
   NAV BUTTONS
 ****************/
 
	#navMenu
	{	
		margin-bottom: 2em;
	}
	
	/* create a button look for links */
	#navMenu a, .nav a:visited {
		background-color: #57166c;
		border-top: #8d31aa solid 1px;
		border-right: #808080 solid 1px;
		border-bottom: #808080 solid 1px;
		color: #ffffff;
		font-family: Verdana, Helvetica, Arial, sans-serif;
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 1px;
		padding: 4px 0px 4px 8px;
		text-decoration: none;
		width: 170px;
		display: block;
	}
	
	#navMenu  a:hover {
		background-color: #f9e088;
		color: #000000;
	}
	
	/* depress effect on click */
	#navMenu  a:active, .nav a:focus {
		border-top: #003399 solid 1px;
		border-right: #666666 solid 1px;
		border-bottom: #666666 solid 1px;
		letter-spacing: 1px;
	}

	
	
/****************
   FORM LAYOUT
 ****************/
	.formPanel {
		background-color: #f9e088;
		border: 1px solid #57166c;
		margin: 0px 00px 10px 0px;
		padding: 5px;
	}
	
	.formErrorPanel {
		background-color: #f9e088;
		background-image: url('/vision/images/icon-form-warning.gif');
		background-repeat: no-repeat;
		border: 1px solid #57166c;
		margin: 10px 0px 10px 0px;
		font-family: Arial, Verdana, sans-serif;
		font-size: 12px;
		padding: 10px 0px 10px 35px;
	}
	
	.formLegend {
		font-size: 16px;
		font-weight: bold;
		color: #38280a;
	}
	
	.formCaption {
		font-weight: bold;
		margin-left: 10px;
	}
	.formCaption2 {
		margin-left: 10px;
	}

	.formPanel input, .panel input {
		margin-left: 10px;
	}

	input.small {
		margin: 0px;
		padding: 0px;
		font-family: Arial, Verdana, sans-serif;
		font-size: 10px;
	}
	
	.formPanel.p.last {
		margin-bottom: 10px;
	}
	
/****************
   TEXT STYLES
 ****************/
	h1 {
		padding: 0;
		margin: 0;
		font-size: 18px;
		font-weight: bold;
		color: #57166c;
	}
	h2 {
		padding: 0;
		margin: 0;
		margin-top: 12px;
		font-size: 14px;
		font-weight: bold;
		color: #57166c;
	}
	.h2em {
		font-size: 18px;
	}
	span.free {
		color: #ff0000;
		font-weight: bold;
	}
	
	
/****************
 PRODUCTS LAYOUT
 ****************/
	td.productImage {
		padding: 10px;
	}
	
	td.cartItem {
		padding: 3px;
	}