/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Prospatek Website Style Sheet 2008
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

/* Defaults
------------------------------------------- */
* { margin: 0; padding: 0; }

body {
	color: #333333;
	background: #3e2206 url(std_pgbodyback.jpg) center top repeat-x;	
	text-align: center;
	margin: 5px 10px;
}

div#thePage {
	width: 814px;
	margin-left: auto;  margin-right: auto;
}

td, th, div, p, ul {
	color: #333333;
	font-family: "Trebuchet MS", verdana,arial,helvetica,sans-serif;
	font-size: 12px;
	font-weight: normal;
/*	line-height: 1.6em; */
	vertical-align:top;
}


ul {
	margin-left: 15px;
	padding-left: 15px;
}

li {
	text-align: left;
	margin-left: 5px;
	padding-left: 0px;
} 

a { color: #951d40; text-decoration: underline; }
a:visited { color: #951d40; }
a:hover { color:#0a0bc2; }
a:active { color:#0a0bc2; }

form { margin: 0; padding: 0; }

div.clearboth {
	clear:both;
}

img {
	padding:0px;
	margin:0px;
	display:block;
	border:none;
}

#preload { height: 0; overflow: hidden; }

/* --- End Defaults --- */

/* --- Images  ---*/

div.imgcontleft {
	float:left;
	padding:10px;
}
div.imgcontright {
	float:right;
	padding:10px;
}

div.imgcontcenter {
	text-align:center;
	padding:10px;	
	width:100%;
	border: 1px solid green;
}

div.imageblock {
	padding:0px;
	margin-left:auto;
	margin-right:auto;
}

.w125 {width:125px;}
.w145 {width:125px;}
.w150 {width:150px;}
.w170 {width:150px;}
.w175 {width:175px;}
.w195 {width:175px;}
.w200 {width:200px;}
.w220 {width:200px;}
.w225 {width:225px;}
.w250 {width:250px;}
.w270 {width:250px;}
.w275 {width:275px;}
.w300 {width:300px;}

img.imgcenter {
	margin-left: auto;
	margin-right: auto;
	display:block;
	padding:0px;
}

img.imgright {
	float: right;
	padding:5px;
}

img.imgleft {
	float: left;
}

div.imgcaption {
	width: 100%;
	margin-top:0px;
}

div.imgcaption, div.imgcaption p {
	color: #009;
	background-color: #eeeeee;
	font-size: 11px;
	font-weight: normal;
	padding: 2px 0px 2px 0px;
	text-align:center;
}

div.imgcaption a {  text-decoration: underline; }
div.imgcaption a:visited {  }
div.imgcaption a:hover { }
div.imgcaption a:active { }

/* --- End Images ---*/

/* --- Logo Panel  ---*/

#toplogopanel {
	background-color: transparent;
	text-align: left;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	border:none;
	font-size: 0px;	
}



/* --- Slogan Panel ---*/

#dsloganpanel {

	color: #000000;
	background: #ff8800;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	padding: 1em 0em 1em 0em;
	border-top: 0px solid #000000;
	border-left: 0px solid #000000;
	border-right: 0px solid #000000;
}

/* --- End Slogan Panel ---*/

/* --- Top Nav Panel ---*/
#topnavpanel { 
	width:100%;
	height:30px;
	color: #ffffff;
	background: #00ffff url(std_topnavback.jpg) center top no-repeat;
	text-align: left;
	padding: 0px 0px 0px 0px;
	border:none;
}

#topnavpanel #tntext{ 
	width:190px;
	float:left;
	font-size: 16px;
	font-weight:bold;
	color: #000000;
	text-align: center;
	margin-top:15px;
	padding: 0px;
}

#topnavpanel ul {
	width:70%;
	float:right;
	font-size: 11px;
	font-weight: normal;
	color: #f5f5f5;
	text-align: right;
	padding: 4px 10px 0px 0px;
	/* Use top/bottom padding to adjust the overall height of the bar */
}

#topnavpanel ul li {
	display: inline;
	list-style-type: none;
	margin-left: 0px; /* Small negative value shifts each nav link left; on mouseovers, can help line up borders and cover left gap  */
}

#topnavpanel ul li a {
	color: #f5f5f5;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
	padding: 4px 5px 0px 5px;	
}
#topnavpanel ul li a:visited { color: #f5f5f5; }
#topnavpanel ul li a:hover {
	color: #ff7f00;
		/* Use top nav background image: /assets/sty_topnavhoverback.jpg */
	background: transparent;
	text-decoration: none;
	padding: 4px 5px 0px 5px;	
}
#topnavpanel ul li a:active { color:#ff7f00; }

/* --- End Top Nav Panel ---*/


/* --- Main Body Table includes centre and side panels ---*/
table#mainbody { 
    margin-top: 0px;
    width: 814px;
	padding: 0px 0px 0px 0px;
	border-collapse: collapse;
	border-right: 0px solid #dddddd;
	border-left: 0px solid #dddddd;
	margin-left: auto;  margin-right: auto;
}

/* --- End Main Panel ---*/

/* --- Main Content Panel ---*/

div#pageTop {
	width:100%;
	padding-top:5px;
	padding-bottom:5px;
}

#datestamp {
	color: #8c4200;
	background-color: transparent;
	font-family: verdana, sans-serif;
	font-size: 9px;
	font-weight: normal;
	text-align: right;
	padding: 0 10px;
	float:right;
	width:35%;
}

#prodbrdcrumb {
	color: #951d40;
	font-family: verdana, sans-serif;	
	font-size:9px;
	float:left;
	margin-bottom: 5px;
	width:60%;
}

td#maincontent {
	width: auto;
	text-align: left;
	padding: 10px 10px 10px 10px;
/*
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
*/
	color: black;
	background: #f5f5f5;
	font-family: verdana,arial,helvetica,sans-serif;
	line-height: 140%;
}


#maincontent a {  text-decoration: underline; }
#maincontent a:visited {  }
#maincontent a:hover { }
#maincontent a:active {  }

td#maincontent p, td#maincontent td p {
	margin-top: 0em;
	padding-bottom: 1px;
    margin-bottom: 1em;
}

div#pageMainBody {
	padding-top: 0em;
	margin-top: 0em;
}

  

/* --- End Main Content Panel ---*/

/* --- Main Forms (appearing in Main Content Panels) ---*/

form#contact { width: 350px; }

form.mainForm {
	color: #666699;
	background: #fff;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	border: 1px solid #dddddd;
	margin: 1em 0px 1em 0px;
}

form.mainForm div.formTitle {
	color: #951d40;
	background: #dadce6;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
/*	border-bottom: 1px solid #bbb; */
	padding: .25em 1em .25em 1em;
	margin: 2px 2px 2px 2px;
}

form.mainForm div.formNotes {
	color: #CC0000;
	background: #f7f7f7;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
	padding: .3em .3em .3em .3em;
	margin: 4px 5px 0px 5px;
}

form.mainForm div.formBody {
	text-align: left;
	padding: 1em 1em 1em 1em;
}

form.mainForm div.fieldItem {
	color: #555555;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	padding: .2em 0px .2em 0px;
}

form.mainForm input.formBtn {
	color: #005b00;
	background: #f7f7f7;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 1em;
	font-weight: normal;
	border-top: 1px solid #ccc;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	border-left: 1px solid #ccc;
}

form.mainForm input.formBtnL {
	float:left;
}

form.mainForm input.formBtnR {
	float:right;
}

form.mainForm div.formBtn {
	margin: 1em 0px 0px 0px;
	width:100%;
}

/* --- End Main Forms (appearing in Main Content Panels) ---*/

/* Alert Messages
------------------------------------------- */
div.alertContainer { text-align: center; } /* For aligning the msge box in IE */

div.erroralertmsge {
	width: 80%;
	color: red;
	background-color: #fff;
	font-family: sans-serif;
	font-size: 10pt;
	font-weight: normal;
	text-align: left;
	border-top: 1px solid red;
	border-right: 1px solid red;
	border-bottom: 1px solid red;
	border-left: 1px solid red;
	padding: 5px 5px 5px 5px;
	margin: 1em;
	
	margin-left: auto; margin-right: auto;
	
}

div.erroralertmsge ul{
	color: red;
	background-color: #fff;
	font-family: sans-serif;
	font-size: 10pt;
	font-weight: normal;
	text-align: left;
}

div.erroralertheadline {
	color: #fff;
	background-color: red;
	font-family: sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-align: center;
	padding: 5px 0px 5px 0px;
	margin-bottom: .5em;
}

div.successalertmsge {
	width: 80%;
	color: #33CC33;
	background-color: #fff;
	font-family: sans-serif;
	font-size: 10pt;
	font-weight: normal;
	text-align: left;
	border-top: 1px solid #33CC33;
	border-right: 1px solid #33CC33;
	border-bottom: 1px solid #33CC33;
	border-left: 1px solid #33CC33;
	padding: 5px 5px 5px 5px;
	margin: 1em;
	
	margin-left: auto; margin-right: auto;
	
}

div.successalertheadline {
	color: #fff;
	background-color: #33CC33;
	font-family: sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-align: center;
	padding: 5px 0px 5px 0px;
	margin-bottom: .5em;
}

/* END Alert Messages  */


/* --- Right Border Panel ---*/

#leftborderpanel {
	color: #000000;
	background: #cccccc;
	width: 7px;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;	
}

/* --- End Right Border Panel ---*/


/* --- Left Nav Panel ---*/

#leftnavpanel {
	color: #000000;
	background: #cccccc url(std_lnavcatback.jpg) top left repeat-y;
	width: 180px;
	font-family: verdana,arial,helvetica,sans-serif;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	border-right: 0px solid #dddddd;	
}

div.leftNavCatBlock {
/*	
padding: 0px 0px 0px 8px;
*/
	width:180px;
	margin:0px;
	padding-left:0px;
}

div.leftNavCatHead { 
	color: #951d40;
	background: #ffffff url(std_lnavcathead.jpg) left top no-repeat;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	padding: 7px 10px 7px 0px;
}

div.leftNavCatContent {
	color: #000000;
	background: transparent;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	padding: 3px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

div.leftNavCatContent a.nav {
	display: block;
	color: #002a64;
	background: transparent url(std_lnavcatlinkback.jpg) center center no-repeat;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
	text-align: center;
	padding: 10px 1em 10px 1em;
	margin: 0px 0px;

}
div.leftNavCatContent a.nav:visited { color: #002a64; }
div.leftNavCatContent a.nav:hover {
	color: #ff7f00;
	font-weight: normal;
	background: transparent url(std_lnavcatlinkhoverback.jpg) center center no-repeat;
	text-decoration: none;
	padding: 10px 1em 10px 1em;
}

div.leftNavCatContent a.nav:active { color: #ff7f00; }

div.leftNavCatFoot { 
	background: transparent url(/assets/sty_lnavcatfootback.gif) left top repeat-x;
	font-size: 0px;
	height: 3px;
}



/* --- End Left Nav Panel ---*/


/* --- Right Border Panel ---*/

#rightborderpanel {
	color: #000000;
	background: #cccccc;
	width: 7px;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 0px;	
}

/* --- End Right Border Panel ---*/

/* --- Right Nav Panel ---*/
#rightnavpanel {
	color: #000000;
	background: #ffffff;
	width: 170px;
	font-family: verdana,arial,helvetica,sans-serif;
	padding: 0px 7px 0px 7px;
	margin:0px 0px 0px 0px;	
	border-left: 1px solid #dddddd;	
}

div.rightNavCatBlock {
/*	
padding: 0px 0px 0px 8px;
*/
	width:170px;
	margin:0px;
	padding-right:0px;
}

div.rightNavCatHead {
	color: #000000;
	background: #ffffff url(std_lnavcathead.jpg) left top repeat-x;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	padding: 7px 0px 7px 0px;
}

div.rightNavCatContent {
	color: #000000;
	background: transparent;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	padding: 3px 0px 0px 0px;
	margin: 0px 0px 0px 0px;	
}

div.rightNavCatContent a.nav {
	display: block;
	color: #000000;
	background: #ffffff url(std_lnavcatlinkback.jpg) left center no-repeat;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
	text-align: left;
	padding: 6px 1em 6px 1em;
	margin: 0px 0px;
}
div.rightNavCatContent a.nav:visited { color: #000000; }
div.rightNavCatContent a.nav:hover {
	color: #E15B28;
	font-weight: normal;
	background: #ffffff url(sty_lnavcatlinkhoverback.jpg)  left center no-repeat;
	text-decoration: none;
	padding: 6px 1em 6px 1em;
}
div.rightNavCatContent a.nav:active { color: #000000; }

div.rightNavCatFoot { 
	background: transparent url(/assets/sty_lnavcatfootback.gif) left top repeat-x;
	font-size: 0px;
	height: 3px;
}

form.rightNav { 
	color: #555;
	background-color: #ffffff;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	text-align: center;
	padding: 5px 2px 0px 2px;
}

form.rightNav input {
	font-family: verdana;
	font-size: 11px;
	margin: 1px 0px;
}

form.rightNav .btn {
	color: #000066;
	background-color: #f7f7f7;
	font-family: verdana,arial,helvetica,sans-serif;
	font-size: 11px;
	font-weight: normal;
	margin: 1px 0px;
	padding: 2px;
}
/* --- End Right Nav Panel ---*/



/* --- Bottom Nav Panel ---*/
#botnavpanel { 
	height:35px;
	color: #444444;
	background: #ffffff url(std_botnavback.jpg) center top no-repeat;
	text-align: right;
	margin: 0px;
	padding:0px;
	border-right: 0px solid #dddddd;
	border-left: 0px solid #dddddd;
}

#botnavpanel ul {
	color: #951d40;
	font-size: 9px;
	font-weight: normal;
	text-align: right;
	margin: 0px 0px;
	/* Use top/bottom padding to adjust the overall height of the bar */
	padding: 5px 10px 0px 0px;
}

#botnavpanel ul li {
	display: inline;
	list-style-type: none;
	margin-left: 0px; /* Small negative value shifts each nav link left; on mouseovers, can help line up borders and cover left gap  */
}

#botnavpanel ul li a {
	color: #951d40;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 9px;
	font-weight: normal;
	text-decoration: none;
	padding: 3px 5px 3px 5px;
}
#botnavpanel ul li a:visited { color: #951d40; }
#botnavpanel ul li a:hover {
	color: #000000;
	text-decoration: none;
	padding: 3px 5px 3px 5px;
}
#botnavpanel ul li a:active { color:#444444; }
/* --- End Bottom Nav Panel ---*/



/* --- Footer Panel ---*/
#footerpanel {
	height:75px;
	color: #777777;
	background: url(std_footback.gif) center bottom no-repeat;
	text-align: right;
	padding: 0px 20px 0px 0px;
	border-right: 0px solid #dddddd;
	border-left: 0px solid #dddddd;
}

#footerpanel p{
	color: #777777;
	font-size: 9px;
	padding: 12px 0px;
	margin:0px;
}

#footerpanel a {  }
#footerpanel a:visited {  }
#footerpanel a:hover { color:#777777; }
#footerpanel a:active { color:#777777;}
/* --- End Footer Panel ---*/



/* ------------ Web Pages in Page Category Index Page --------------*/
table.pagetable td { 
	border: solid #555555 0px;
	border-bottom-width: 0px;
	width:100%;
	padding:0px;
}

.pagetableitem {
	background-color: transparent;
	font-size: 11px;
	padding: 5px;
}
.tablepagetitle {
	font-size: 13px;
}
a.tablepagetitle, a.tablepagetitle:visited {
	font-weight: bold;
}
a.tablepagetitle:hover {
	font-weight: bold;
}
a.tablepagetitle:active {
	font-weight: bold;
}
/* ------------ End Web Pages in Page Category Index Page --------------*/



/* ------------ CSS Gallery Start  --------------*/

table.cssgallerytable td{
       background: transparent;
}
      
/* cssgallery specific.
   This version adapted to have a background image to start off
   can center the gallery using padding auto  */	

ul.cssgallery, ul.cssgallery li{
		margin:0;
		padding:0;
		margin-left:auto;
		margin-right:auto;
		}
		
/* set height and width of main and tn images in ul  */				
	ul.cssgallery{
		width:500px;
		height:390px;
		position:relative;
		}

	ul.cssgallery#other{
		height:475px;
		}
						
/* set top margin of li, this is where main image goes
   It is normally difference between tn height and total height
   use margin-bottom for tn at top
   ue margin-top for tn at bottom */													
	ul.cssgallery li{
		float:left;
		display:inline;
		margin-bottom:334px;
		padding-right: 1px;
		}	
	ul.cssgallery#other li{
		margin-bottom:377px;
		}	

/* set height of tn images in ul, the browser will resize down to this in proportion  */		
	ul.cssgallery a img.tn{
		height:50px;
		}
/* all spans in teh gallery are not displayed initially
   this is also a fix for IE6, as cant specify img in span on hover  */					
	ul.cssgallery a span{
		display:none;
		}

/* the background span, this set behind other elements and set to display.
   in the html, the same image reference needs only to be in 
   the first li in the ul.  On hover, this image is overlayed by the main span */				

	ul.cssgallery a span.bg {
		position:absolute;
		width:inherit;
		float:left;
		top:56px;
		left:0px;
		display:block;
		}			
	ul.cssgallery#other a span.bg {
		top:94px;
		}			

/* this is the main hover, setting the contents to the front, and no background.
   The order of these 2 statements is crucial for IE6  */	
	ul.cssgallery a:hover {
		z-index:100;
		background:none;
	}					
						
/* the main span, this overlays the existing diaplayed image on hover
   the white background is needed where an image is smaller than the first image  */	
	ul.cssgallery a:hover span {
		position:absolute;
		height:334px;
		float:left;
		top:56px;
		left:0px;
		display:block;
		background:#ffffff;
	}
	ul.cssgallery#other a:hover span {
		height:377px;
		top:94px;
	}

/* ------------ CSS Gallery End  --------------*/

div#navCatContent3 img{
	margin:auto; 	
}
div#navCatContent3{
	text-align:center;
}