/***********************************************************************************************************************
DOCUMENT: style/format.css
DEVELOPED BY: Ryan Stemkoski
COMPANY: Zipline Interactive
EMAIL: ryan@gozipline.com
PHONE: 509-321-2849
DATE: 2/26/2009
DESCRIPTION: This document contains the structural formatting files for the Lyn-Tron Inc. website.
************************************************************************************************************************/

body {
	margin: 0px;
	background-color: #016BAD;
	background-image: url(/images/site_background.jpg);
	background-position: top;
	background-repeat: repeat-x;
	}
		
.left{ 
	float: left;
	}

.right {
	float: right;
	}
	

	
	
	
/***********************************************************************************************************************
GENERIC HTML TABLE SPECIFIC STYLES
************************************************************************************************************************/	
#TableWrapper {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

table {
		border-width: 1px;
		border-style: solid;
		border-color: #B7B7B7;
		background-color: white;
		border-collapse: collapse;
	}
	
table.NoStyle {
	border-width: 0px;
	border-style: none;
	border-color: #FFFFFF;
	background-color: transparent;
	border-collapse: collapse;
	}
	
		th {
		margin: 0px;
		padding: 5px;
		border-width:1px;
		border-style: solid;
		border-color: #B7B7B7;
		}
		th.NoStyle {
		margin: 0px;
		padding: 0px;
		border-width:0px;
		border-style: none;
		border-color: #FFFFFF;
		}
		
			tr {
			border-width:1px;
			border-style: solid;
			border-color: #B7B7B7;
			margin-top: 0px;
			margin-right: 0px;
			margin-bottom: 0px;
			margin-left: 0px;
			padding-top: 0px;
			padding-right: 5px;
			padding-bottom: 0px;
			padding-left: 5px;
			}
			tr.NoStyle {
			border-width:0px;
			border-style: none;
			border-color: #FFFFFF;
			}
			
			
			tr.plateMatrix:hover td{
				color:white;
				background:#4D7DB3;
			}
			
		
				td {
				  border-width:1px;
				  border-style: solid;
				  border-color: #B7B7B7;
				  margin-top: 0px;
				  margin-right: 0px;
				  margin-bottom: 0px;
				  margin-left: 0px;
				  padding-top: 5px;
				  padding-right: 5px;
				  padding-bottom: 5px;
				  padding-left: 5px;
				  color: #000;
				}
				td.NoStyle {
				  border-width:0px;
				  border-style: none;
				  border-color: #FFFFFF;
				  margin-top: 0px;
				  margin-right: 0px;
				  margin-bottom: 0px;
				  margin-left: 0px;
				  padding-top: 0px;
				  padding-right: 5px;
				  padding-bottom: 0px;
				  padding-left: 5px;
				}
				
				.EmailTD {
				  border-width:0px;
				  border-style:none;
				  border-color: #B7B7B7;
				  margin-top: 0px;
				  margin-right: 0px;
				  margin-bottom: 0px;
				  margin-left: 0px;
				  padding-top: 1px;
				  padding-right: 1px;
				  padding-bottom: 1px;
				  padding-left: 1px;
				  text-align:left;
				}
				.EmailTR {
				  border-width:0px;
				  border-style:none;
				  border-color: #B7B7B7;
				  margin-top: 0px;
				  margin-right: 0px;
				  margin-bottom: 0px;
				  margin-left: 0px;
				  padding-top: 1px;
				  padding-right: 1px;
				  padding-bottom: 1px;
				  padding-left: 1px;
				}
		
					.RowEven {
					  background-color: #FFFFFF;
					  border: 1px 1px 1px 1px;
					  padding-top: 5px;
    				  padding-right: 5px;
				      padding-bottom: 5px;
					  padding-left: 5px;
					  }
							
							.RowOdd {
							 background-color: #F5F5F5;
							 border: 1px 1px 1px 1px;
							 padding-top: 5px;
							 padding-right: 5px;
							 padding-bottom: 5px;
							 padding-left: 5px;
							 }
							 
								.Metric {
								color:#000099;
								font-weight:bold;
								}
					.CatEven {
						background-color:#FFFFFF;
					}
					
						.CatOdd {
							background-color:#F5F5F5;
						}
						
							.CatOver {
								background-color:#989BA9;
								color:white;
							}


.ImageWrapper {
	margin: 15px;
}
/***********************************************************************************************************************
STANDARD TEMPLATE FORMATTING FUNCTIONS REQUIRED FOR ALL PAGES
************************************************************************************************************************/	
#wrapper {
	width: 947px;
	margin-left: auto;
	margin-right: auto;
	}
	
	#site {
		width: 907px;
		float: left;
		padding: 0px 0px 20px 0px;
		}
		
		#header {
			width: 907px;
			height: 74px;
			float: left;
			background-image: url(/images/header_background.jpg);
			background-position: top left;
			background-repeat: no-repeat;
			}
			
			#logo {
				width: 321px;
				float: left;
				padding: 10px 100px 0px 24px;
				}
				
			#headerContainer {
				width: 462px;
				float: left;
				}
			
				#headerPhone {
					width: 442px;
					float: left;
					padding: 5px 20px 0px 0px;
					}
				
				#headerLogin {	
					width: 430px;
					float: left;
					padding: 5px 0px 0px 32px;
					}
					
				#headerLoginOptions {	
					 float:right; 
					 padding:3px 25px 0px 0px; 
					 color:white;
					}
			
					.formHeaderUsername {
						width: 160px;
						float: left;
						font-size: 10px;
						font-family: Arial, Helvetica, sans-serif;
						padding: 2px;
						border: 0px solid #FFFFFF;
						margin: 0px 5px 0px 0px;
						}
						
						#formUser {
							background-image: url(/images/username_background.jpg);
							background-position: top left;
							background-repeat: no-repeat;
							}
						
					.formHeaderPassword {
						width: 160px;
						float: left;
						font-size: 10px;
						font-family: Arial, Helvetica, sans-serif;
						padding: 2px;
						border: 0px solid #FFFFFF;
						margin: 0px 5px 0px 0px;
						}
						
						#formPass {
							background-image: url(/images/password_background.jpg);
							background-position: top left;
							background-repeat: no-repeat;
							}
						
					.formHeaderButton  {
						float: left;
						}
			
			
		#navigation {
			width: 907px;
			float: left;
			}
		
			#navigationSearch {
				width: 230px;
				float: left;
				padding: 20px 0px 0px 24px;
				}
				
				.searchField {
					width: 150px;
					float: left;
					font-size: 10px;
					font-family: Arial, Helvetica, sans-serif;
					padding: 2px;
					border: 0px solid #FFFFFF;
					margin: 0px 5px 0px 0px;
					}
				
				.searchButton {
					float: left;
					}
					
					
#footer {
	width: 867px;
	height: 75px;
	float: left;
	padding: 0px 20px 0px 20px;
	background-image: url(/images/index_footer_background.jpg);
	background-position: top left;
	background-repeat: repeat-x;
	}
	
	#footerContent {
		width: 867px;
		float: left;
		border-top: 1px solid #90BBD5;
		padding: 10px 0px 0px 0px;
		}

	#footerContentInterior {
		width: 867px;
		float: left;
		padding: 10px 0px 0px 0px;
		}
		
		
		
		
#EmailWrapper {
	width: 588px;
	margin-left: auto;
	margin-right: auto;
	}	
	
	#EmailSite {
		width: 522px;
		float: left;
		}
		
		#EmailHeader {
			width: 522px;
			height: 74px;
			float: left;
			}
			
			#EmailTitle {
				width: 522px;
				float: left;
				}
				
					#EmailContent {
					  width: 522px;
					  float: left;
					  background-image:url(../../images/Email/Content.gif);
					  background-repeat:no-repeat;
					  min-height:260px;
					  }
					  
					  .TextBox {
						  width:350px;
					  }
					  
					  	.TextBoxError {
							background: #f8dbdb;
							border-color: #e77776;
						}
		
		
/***********************************************************************************************************************
INTERIOR TEMPLATE STYLES
************************************************************************************************************************/	
#content {
	width: 907px;
	min-height: 400px;
	float: left;
	background-color: #FFFFFF;
	background-image: url(/images/interior_background.jpg);
	background-position: top left;
	background-repeat: repeat-y;
	}
	
	#leftColumn {
		width: 238px;
		float: left;
		}
		
		#sidenavTitle {	
			width: 218px;
			float: left;
			padding: 25px 10px 10px 10px;
			border-bottom: 1px solid #B2B2B2;
			}
			
		.sidenavOff {
			width: 218px;
			float: left;
			padding: 8px 10px 8px 10px;
			background-color: #F2F2F2;
			background-image: url(/images/sidenav_off.jpg);
			background-position: bottom left;
			background-repeat: repeat-x;
			}

		.sidenavOver {
			width: 218px;
			float: left;
			padding: 8px 10px 8px 10px;
			background-color: #B7B7B7;
			background-image: url(/images/sidenav_over.jpg);
			background-position: bottom left;
			background-repeat: repeat-x;
			}

		.sidenavOn {
			width: 218px;
			float: left;
			padding: 8px 10px 8px 10px;
			background-color: #B7B7B7;
			background-image: url(/images/sidenav_on.jpg);
			background-position: bottom left;
			background-repeat: repeat-x;
			}
	
			.sidenav2Off, .sidenav2Over, .sidenav2On {
				width: 203px;
				float: left;
				padding: 5px 10px 5px 25px;
				background-color: #D5D5D5;
				border-bottom: 1px solid #E7E7E7;
				}
	
	#rightColumn {	
		width: 629px;
		float: left;
		padding: 20px;
		}
					
/***********************************************************************************************************************
INDEX / HOME SPECIFIC STYLES
************************************************************************************************************************/	
#presentation {
	width: 907px;
	height: 257px;
	float: left;
	background-image: url(/images/flash_background.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	}
	
	#presentationHolder {
		width: 518px;
		height: 257px;
		float: left;
		}
		
	#presentationNavigation {
		width: 389px;
		float: left;
		}
		
		.presentationButton {
			width: 389px;
			float: left;
			cursor: pointer;
			}
			
			.presentationFlash {
				width: 185px;
				float: left;
				}
			
			.prsentationText {
				width: 333px;
				float: left;
				}
				
				.presentationImage {
					width: 333px;
					float: left;
					padding: 20px 0px 0px 0px;
					color:#555555;
					font-family:Arial, Helvetica, sans-serif;
					font-size:23px;
					font-weight:bold;
					margin-bottom:10px;
					}

#indexBoxes {
	width: 907px;
	float: left;
	background-image: url(/images/index_content_background.jpg);
	background-position: bottom left;
	background-repeat: repeat-x;
	padding: 0px 0px 10px 0px;
	}

	#lookup1, #lookup2, #lookup3, #lookup4 {
		cursor: pointer;
		}

	#indexBoxesRow1 {
		width: 907px;
		float: left;
		padding: 0px 0px 20px 0px;
		}
		
		#loginboxSwitch {
			width: 481px;
			float: left;
			padding-left: 8px;
			}
			
			#loginSwitchTop {
				width: 481px;
				float: left;
				}
				
			#loginSwitchBottom {
				width: 481px;
				float: left;
				}
				
				#loginContent {
					width: 445px;
					height: 85px;
					float: left;
					background-color: #D1D0CC;
					background-image: url(/images/loginbox_background.jpg);
					background-position: top left;
					background-repeat: repeat-x;
					padding: 10px;
					}
					
					#loginLeftColumn {
						width: 300px;
						float: left;
						}
						
						.loginFormTitle {
							width: 300px;
							float: left;
							padding: 0px 0px 2px 0px;
							}
						
						.loginFormField {
							width: 300px;
							float: left;
							padding: 0px 0px 10px 0px;
							}
							
							.loginFormSelect {
								width: 260px;
								float: left;
								font-size: 11px;
								border: 1px solid #9F9F9F;
								}
								
							.loginFormItem {
								width: 180px;
								padding: 1px;
								float: left;
								float: left;
								border: 1px solid #9F9F9F;
								margin-right: 8px;
								}

							.loginFormItemUsername {
								width: 260px;
								padding: 1px;
								float: left;
								float: left;
								border: 1px solid #9F9F9F;
								margin-right: 8px;
								}
					
					#loginRightColumn {
						width: 134px;
						float: left;
						border-left: 1px dashed #004480;
						padding: 0px 0px 0px 10px;
						}
					
		
		.featureTitle {
			margin: 0px 0px 5px 0px;
			}
				
		#feature1 {
			width: 165px;
			float: left;
			padding: 20px 10px 0px 20px;
			}
			
		#feature2 {
			width: 220px;
			float: left;
			padding: 5px 0px 0px 0px;
			}
			
			#feature2Content {
				width: 170px;
				min-height: 117px;
				float: left;
				background-color: #D1D0CC;
				background-image: url(/images/featureset_background.jpg);
				background-position: top left;
				background-repeat: repeat-x;
				padding: 18px 10px 10px 10px;
				}
				
	#indexBoxesRow2 {
		width: 867px;
		float: left;
		padding: 5px 20px 5px 20px;
		background-image: url(/images/index_bottom_background.gif);
		background-position: top left;
		background-repeat: repeat-y;
		}
		
		#indexContent {
			width: 573px;
			float: left;
			color:white;
			font-family:Arial, Helvetica, sans-serif;
			font-size:20px;			
			}
			
			.indexContentColumn {
				width: 266px;
				float: left;
				padding: 12px 20px 0px 0px;
				}
			
		#indexBlog {
			width: 273px;
			float: left;
			padding: 0px 0px 0px 20px;
			}
			
			#indexBlogEntries {
				width: 273px;
				float: left;
				padding: 12px 0px 0px 0px;
				}
				
/***********************************************************************************************************************
STANDARD FORM STYLES
************************************************************************************************************************/	
.formWrapper {
	width: 627px;
	float: left;
	border: 1px solid #B2B2B2;
	}
	
	.formHeader {
		width: 607px;
		float: left;
		background-color: #F2F2F2;
		background-image: url(/images/search_header_background.jpg);
		background-position: bottom left;
		background-repeat: repeat-x;
		padding: 5px 10px 5px 10px;
		}
	
	.formContent {
		width: 607px;
		float: left;
		padding: 5px 10px 5px 10px;
		}
		
		.formText {
			width: 587px;
			float: left;
			padding: 3px 0px 3px 0px;
			}
			
		.formField {
			width: 587px;
			float: left;
			padding: 0px 0px 8px 0px;
			}
			
			.smallField {
				width: 150px;
				font-size: 11px;
				float: left;
				border: 1px solid #B2B2B2;
				margin-right: 5px;
				padding: 1px;
				}

			.mediumField {
				width: 300px;
				font-size: 11px;
				float: left;
				border: 1px solid #B2B2B2;
				margin-right: 5px;
				padding: 1px;
				}

			.largeField {
				width: 450px;
				float: left;
				font-size: 11px;
				border: 1px solid #B2B2B2;
				margin-right: 5px;
				padding: 1px;
				}
				
.Error{
	margin-bottom: 20px;
	background-color: #f8dbdb;
	border: 1px solid #e77776;
}
  .Error ul{
	  list-style: square;
	  padding: 5px;
	  font-size: 11px;
	  color: #e46c6e;
  }
	.Error ul li{
		list-style-position: inside;
		line-height: 1.6em;
	}
	  .Error ul li strong{
		  color: #e46c6d;
	  }

.Valid{
	margin-bottom: 20px;
	background-color: #c9e5f6;
	border: 1px solid #0011ff;	
}
	.Valid strong{
		padding-left: 5px;	
	}
	.Valid ul{
		list-style: square;
	    padding: 5px;
	    font-size: 11px;
    	color: #044772;
	}
		.Valid ul li {
			list-style-position: inside;
			line-height: 1.6em;
		}
			.Valid ul li strong {
				color: #a8e46c;	
			}
/***********************************************************************************************************************
CATALOG SPECIFIC STYLES
************************************************************************************************************************/	
#catalogWrapper {
	width: 100%;
	float: left;
	}

	.catalogItem {	
		width: 887px;
		display: inline-block;
		background: #FFFFFF;
		padding: 0px 10px 3px 10px;
		border-bottom: 1px solid #B1AFAF;
		cursor: pointer;
		}
	
	.catalogDescription {	
		width: 887px;
		float: left;
		padding: 10px;
		background-color:#F9F9F9;
		background-image: url(/images/catalog_description_background.jpg);
		background-repeat: repeat-x;
		background-position: top;
		border-bottom: 1px solid #B1AFAF;
		display:none;
		}
		
		.catalogDescriptionTop {
			width: 875px;
			float: left;
			}

			.closeButton {
				float: right;
				cursor: pointer;
				}
				
		.catalogDescriptionBottom {
			width: 875px;
			float: left;
			padding: 0px 0px 10px 0px;
			}
			
			.catalogColumn {
				width: 275px;
				float: left;
				padding: 10px 0px 0px 100px;
				}
				
				
		.tableHeader {
			border-bottom: 1px solid #B2B2B2;
			padding: 2px 5px 2px 5px;
			}
			
		.tableRow {
			border-bottom: 1px solid #C5C5C5;
			padding: 2px 5px 2px 5px;
			}

		.catalogButton {
			width: 35px;
			text-align: center;
			background-color: #0079C2;
			padding: 2px;
			}
	#photoBar{
		margin:20px;
		text-align:center;
		height:96px;
		overflow:hidden;
	}
	#results{
		width:500px;
		margin-left: auto;
		margin-right: auto;
		text-align:center;
	}
.blueHover{
	background-color:#CCC;
}
.whiteHover{	
background:white;
}
.blueHover:hover{
	color:white;
	background:#4D7DB3;
}
.whiteHover:hover{
	color:white;
	border:#4D7DB3
}
.blueHover:hover td {
	color:white;
	background:#4D7DB3;
}
.whiteHover:hover td {
	color:white;
	background:#4D7DB3;
}
.blueHover:hover td a{
	color:white;
	background:#4D7DB3;
}
.whiteHover:hover td a{
	color:white;
	background:#4D7DB3;
}
.hand{
	cursor:pointer;
}
.album:hover{
	background:lightblue;
	cursor:pointer;
}
.album {
	border:none;
}
#catalog_summary{
	margin:10px;
	padding:0px 25px 5px 25px;
	border:#B7B7B7 solid 1px;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	float:left;
	width:835px;
}
	#qty_avail{
		float:right;
	}
	#comp_part_id{
		float:left;
	}
	#whatnow{		
		height:auto;
		display:none;
		float:left;
		width:100%;
		padding:5px;
	}
		#freewheel{
			width:300px;
			float:left;
		}
		#options{
		float:right;
		width:500px;
		font-size:12px;
		}