/* 
 ----------------------------------------------------------------------------
  Copyright Benj Arriola 2007.
  Benj Arriola's Default CSS File

  Please check for cross-browser compatibility prior to making changes
  MINIMUM BROWSER CHECK :: IE5.x/IE6/Firefox/Safari

  CSS Document - layout.css
 ---------------------------------------------------------------------------- 
*/



/* undo some default styling of common (X)HTML browsers
 * ------------------------------------------------------------------------- */

/* No list-markers by default - must redefine bullets w/ bg graphics */
ul,ol { list-style:none; }
/* Avoid browser default inconsistent heading font-sizes and pre/code */
h1,h2,h3,h4,h5,h6,pre,code,td { font-size:1em; }
/* Remove inconsistent (among browsers) default padding or margin */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td,script,hr { margin:0; padding:0; }
/* prevent blue linked image borders */
a img,:link img,:visited img,fieldset { border:none; }



/* global elements
 * ------------------------------------------------------------------------- */

/* ----- type selectors ----- */ 
body { 
	background: #007b9f url(../images/allpages/background.jpg) repeat-x top ;
	text-align: center; 
	font: 12px/18px "Trebuchet MS", Arial, Helvetica, sans-serif; 
	color: #000; 
	}

p, ul, ol, dl, pre, blockquote	{ margin-bottom:10px; }

blockquote { 
	margin-left: 10px; 
	margin-right: 10px; 
	}

h1,h2,h3 { margin-bottom:8px; }

h1	{ font-size:1.5em; color:#000; }
h2	{ font-size:1.3em; color:#000; }
h3	{ font-size:1.1em; color:#000; }

h1 span, h2 span, h3 span	{ display:none; }

a:link,a:visited { color:#FF6400; text-decoration:underline; }
a:hover,a:active { color:#026698; text-decoration:none; }

/* ----- classes ----- */

div.clear {
	clear:both;
	width:100%;
	height:.01em; 
	overflow:hidden; 
	}

p.top {
	background: url(../images/allpages/toparrow.jpg) no-repeat 360px;
	text-align:right;
	display:block;
	} 
	
img.img-left {
	float:left; 
	margin: 2px 10px 10px 0; 
	}
	
img.img-right { 
	float: right; 
	margin: 0px 10px 10px 0px;
	}

/* framework
 * ------------------------------------------------------------------------- */

#wrap { 
	background: url(../images/allpages/wrap.jpg); 
	width:740px; 
	margin:0 auto;
	text-align:left; 
	}
	
#masthead {
	position:relative;
	background: url(../images/allpages/masthead.jpg) ;
	height: 101px;
	}
	#masthead span {
		display:none;
		}
	#masthead a#mast-01 {
		position:absolute;
		margin: 3px 0 0 42px;
		width: 188px;
		height: 98px;
		}
	#masthead a#mast-02 {
		position:absolute;
		margin: 59px 0 0 337px;
		width: 359px;
		height: 27px;
		}

#header-graphic {
	background: url(../images/allpages/header-graphic.jpg) no-repeat top right;
	height: 120px;
	}
	body#index #header-graphic {
		height: 195px;
		}
	 #header-graphic p {
		display: none;
		}
#header-flash {
	height:0px;
	}

#main-left {
	background: url(../images/allpages/mainleft.jpg) no-repeat top left;
	width: 740px;
	}
#main-right {
	background: url(../images/allpages/mainright.jpg) no-repeat top right;
	width: 740px;
	}

#column-left { 
	width: 519px; 
	float:left; 
	}
	#column-left h1 span,#column-left h2 span {
		display: none;
		}
	#column-left h1 {
		background: url(../images/titles/index.jpg) no-repeat top left;
		height: 22px;
		margin: 22px 0 13px 52px;
		}

		body#products #column-left h1 {
			background: url(../images/titles/products.jpg) no-repeat top left;
			}
		body#about #column-left h1 {
			background: url(../images/titles/about.jpg) no-repeat top left;
			}
		body#contact #column-left h1 {
			background: url(../images/titles/contact.jpg) no-repeat top left;
			}
		body#promo #column-left h1 {
			background: url(../images/titles/promos.jpg) no-repeat top left;
			}
		body#sitemap #column-left h1 {
			background: url(../images/titles/sitemap.jpg) no-repeat top left;
			}

	#column-left h2#subtitle {
		background: url(../images/subtitles/subtitles.jpg) no-repeat top left;
		height: 20px;
		margin: 22px 0 13px 52px;
		}
	#column-left h3 {
		color: #006A97;
		margin: 0px 20px 13px 52px;
		}
	#column-left p {
		margin: 0px 20px 13px 52px;
		}
	#column-left ul {
		margin: 0px 20px 13px 52px;
		}
		#column-left ul li {
			background: url(../images/allpages/bullet.jpg) no-repeat left;
			padding-left: 20px;
			margin: 0 0 3px 15px;
			}
	#column-left ul.li-2col li {
		float: left;
		width: 185px;
		}
	#column-left blockquote {
			background: url(../images/allpages/quote-open.jpg) no-repeat top left;
			padding-left: 30px;
			margin: 0px 40px 13px 52px;
		}
		#column-left blockquote div {
			background: url(../images/allpages/quote-close.jpg) no-repeat bottom right;
			padding-right: 20px;
			font-style: italic;
		}
  
#column-right { 
	width: 191px; 
	float:left; 
	}
	#column-right p { 
		margin: 10px 15px 0 10px;
		}

#bottom {
	background: url(../images/allpages/bottom.jpg);
	height: 83px;
	}

#footer { 
	width:740px; 
	margin:10px auto; 
	text-align:center;
	background: #007b9f;
	}

	#footer p {
		color:#fff;
		}
	
	#footer a:link, #footer a:visited {
		color:#fff;
		}
	
	#footer a:hover, #footer a:active {
		color:#FE9833;
		text-decoration: none;
		}
	
	#footer li {
		padding: 0 5px 0 7px;
		display: inline;
		border-left: 1px solid #fff;
		line-height: px;
		}
	
		#footer li.first { border: none; }

	

/* horozontal Nav
 * ------------------------------------------------------------------------- */

#nav { 
	background: url(../images/allpages/nav.jpg); 
	width: 740px; 
	height: 45px; 
	margin-bottom:0; 
	}

#nav span { display: none; } 

#nav li, #nav a { height: 45px; display: block; }

#nav li { float: left; list-style: none; _display: inline; }

#nav-01 { width: 108px; margin-left: 30px;}
#nav-02 { width: 123px;}
#nav-03 { width: 95px;}
#nav-04 { width: 111px;}

#nav-01 a:hover {background:url("../images/allpages/nav.jpg") -30px -45px no-repeat;}
#nav-02 a:hover {background:url("../images/allpages/nav.jpg") -138px -45px no-repeat;}
#nav-03 a:hover {background:url("../images/allpages/nav.jpg") -261px -45px no-repeat;}
#nav-04 a:hover {background:url("../images/allpages/nav.jpg") -356px -45px no-repeat;}

body#index    #nav-01 a {background:url("../images/allpages/nav.jpg") -30px -45px no-repeat;}
body#products #nav-02 a {background:url("../images/allpages/nav.jpg") -138px -45px no-repeat;}
body#about    #nav-03 a {background:url("../images/allpages/nav.jpg") -261px -45px no-repeat;}
body#contact  #nav-04 a {background:url("../images/allpages/nav.jpg") -356px -45px no-repeat;}

/* Son of Suckerfish: Horizontal Sprite Nav
 * ------------------------------------------------------------------------- */
/*
#nav li ul {
	position: absolute;
	left: -9999px;
	background-color: #720000;	// Background color of drop down nav - add more styles (i.e. background image) if you want 
	}

#nav li ul li { 
	height: 20px; 				// Height of each drop down nav item 
	border:1px solid orange;
	border-top:none;
	}	

#nav li ul li a {
	width: 100%;
	height: 20px;				// Height of each drop down nav item, should match above 
	line-height: 20px;			// Height of each drop down nav item again, should match above 
	}

#nav li ul li a span {
	display: block;
	padding-left: 5px;
	}

// Drop down link styles 
#nav a:link, #nav a:visited, #nav a:hover, #nav a:active {
	font-size: 11px;
	color: #FFFFFF;
	text-decoration: none;
	}

#nav li:hover ul, #nav li.sfhover ul	{ left: auto; }

// Hover styles for drop down items 
#nav-03 ul a:hover, #nav-04 ul a:hover { 
	background-image: none;
	background-color: #AA0000; 
	}

// width of drop down nav - choose width that allows items to display on one line 
#nav-03 ul, #nav-03 li { width: 260px; }		
#nav-04 ul, #nav-04 li { width: 90px; }

//only if bodyid is used
body#products #nav-02 ul li a, body#about #nav-03 ul li a { background: #E67817; }
body#products #nav-02 ul li a:hover, body#about #nav-03 ul li a:hover  { background: #1785E7; }
*/


/* Vertical Sprite Nav
 * ------------------------------------------------------------------------- */

#nav2 {
	background: url(../images/allpages/sidenav.jpg) top left no-repeat;					
	width: 174px;
	height: 203px;
	margin: 6px 0 0 8px;
	}

#nav2 li span { display: none; }

#nav2 li {
	float: left;
	list-style: none;
	}

#nav2 li, #nav2 a { 
	height: 63px;
	display: block;
	}

#nav2-01 { margin-top: 0px; width: 174px; }

#nav2-02, #nav2-03 { margin-top: 7px; width: 174px; }

#nav2-01 a:hover { background:url("../images/allpages/sidenav.jpg") -174px  -0px no-repeat; }
#nav2-02 a:hover { background:url("../images/allpages/sidenav.jpg") -174px  -70px no-repeat; }
#nav2-03 a:hover { background:url("../images/allpages/sidenav.jpg") -174px  -140px no-repeat; }



/* Contact Form
 * ------------------------------------------------------------------------- */

#contact-main {
	width: 410px;
	margin: 0 0 0 60px;
}

#contact-main dl {
	margin: 0 0 0 5px;
}
body #contact-main p{
	margin: 0 0 0 5px;
}
#contact-main dl br {
	clear: both;
}

#contact-main dt {
	float: left;
	width: 180px;
	line-height: 18px;
	text-align: right;
}
#contact-main dd {
	margin: 0 0 5px 190px;
	text-align: left;
}
#contact-main dd input, #contact-main dd select, #contact-main dd textarea {
	width:200px;
}
#contact-main dd input.radio {
	width:13px;
	margin-left: 10px;
	border: none;
}
#contact-main dl dd input.submit-contact-main { width: 60px; }
