/*
 * CSJOHNSON
 *
 * BLUE: 283D6C
 * RED: B7022B
 * YELLOW: FFFF33
 * Menu Font: Arial
 * Yellow: Arial Black
 *
 */

/* *********************** NEARLY ALL PAGES ***************************** */

.screenKill {
	display: none
}
body {
	margin: 0;
	padding: 15px 0;
	font: 80%/1.2 Arial, Helvetica, sans-serif;
	color: #000;
	/* background-color: #fff; */
	background-image: url(/images/backgrounds/bg1.jpg);background-color:#283D6C;
}
#fade_back {
position:absolute;top:0px;z-index:-10;width:100%;height:600px;background-image:url(/images/backgrounds/bg.jpg);background-color:#283D6C;
}
#pageContainer {
	width: 760px;
	padding: 5px;
	background-color: #fff;
}
#pageheadline, .pageHeadLineTable {
	margin-bottom:15px;
}
#menubar {
	background-color:#283D6C;
	width:150px;
}
#footer {
	text-align: center;
	background-color:#283D6C;
	padding:5px 0 5px 0;
	margin-top:5px;
}
.blueLineWmarg {
	background-color: #283D6C;
	color: #283D6C;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: 1px;
	line-height: 1px;
	margin-right:50px;
	height: 2px;
}
.heading_red_medium {
	font-size:10pt;
	font-weight:bold;
	color:#B7022B;
}
.heading_red_large_nowrap {
	font-size:14pt;
	font-weight:bold;
	color:#B7022B;
	white-space:nowrap;
}
.heading_red_large {
	font-size:14pt;
	font-weight:bold;
	color:#B7022B;
}
.heading_red_large a {
	text-decoration: none;
}
.heading_red_large a:link, .heading_red_large a:visited, .heading_red_large a:focus {
	color: #B7022B;
}
.heading_red_large a:hover {
	color: #FFFF33;
}
.heading_yellow_large {
	font-size:14pt;
	font-weight:bold;
	color:#FFFF33;
}
.heading_yellow_large a {
	text-decoration: none;
}
.heading_yellow_large a:link, .heading_yellow_large a:visited, .heading_yellow_large a:focus {
	color: #FFFF33;
}
.heading_yellow_large a:hover {
	color: #B7022B;
}
.heading_yellow_medium {
	font-size:10pt;
	font-weight:bold;
	color:#FFFF33;
}
.heading_yellow_medium a {
	text-decoration: none;
}
.heading_yellow_medium a:link, .heading_yellow_medium a:visited, .heading_yellow_medium a:focus {
	color: #FFFF33;
}
.heading_yellow_medium a:hover {
	color: #B7022B;
}
.heading_white_medium {
	font-size:11pt;
	font-weight:bold;
	color:#FFFFFF;
}
.heading_white_medium a {
	text-decoration: none;
}
.heading_white_medium a:link, .heading_white_medium a:visited, .heading_white_medium a:focus {
	color: #FFFFFF;
}
.heading_white_medium a:hover {
	color: #B7022B;
}
.heading_white_medium_small {
	font-size:8pt;
	font-weight:bold;
	color:#FFFFFF;
}
.heading_white_medium_small a {
	text-decoration: none;
}
.heading_white_medium_small a:link, .heading_white_medium_small a:visited, .heading_white_medium_small a:focus {
	color: #FFFFFF;
}
.heading_white_medium_small a:hover {
	color: #B7022B;
}
/* ******************* HOME PAGE ONLY ********************* */

.home_pics a {
	display:block;
	border:2px solid #283D6C;
}
.home_pics a:link, .home_pics a:visited, .home_pics a:focus {
	border:2px solid #283D6C;
}
.home_pics a:hover {
	border:2px solid #B7022B;
}
/* ******************* Photo Gallery Only ********************* */

.photos {
	/* contains all photos */
	margin:0;
	/* Next 2 are for accidental wide pictures */
	width:550px;
	/* overflow:hidden; */
}
.photos div {
	text-align:center;
	margin-top:30px;
}
.photos img {
	display:block;
	margin:auto;
}
.photos div div {
	text-align:left;
	margin:0;
}
.photos div div div {
	color:#b7022b;
}
/* ******************* Products Marine ********************* */

.redbox {
	display:block;
	border:2px solid #283D6C;
}
.redbox:link, .redbox:visited, .redbox:focus {
	border:2px solid #283D6C;
}
.redbox:hover {
	border:2px solid #B7022B;
}
/* ******************* CONTACT US ONLY ********************* */

.form_contact_input, .form_contact_textarea {
	width:350px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
.form_contact_input {
	height:16px;
}
.form_contact_textarea {
	height:90px;
}
/* ********************** REPS ONLY ************************ */

/*
 * WARNING! SOME OF CSS IS IN NOSCRIPT TAG IN PAGE!
 */

#areacontainer {
	position:relative;
	height:280px;
}
#areacontainer div {
	display:none;
	position:absolute;
	left:95px;
}
/* *********************** MENUBAR ************************* */

.mb_backtotop {
	position:relative;
	text-align:left;
	width: 100%; /* For IE6 */
}
.mb_backtotop div {
	position:absolute;
	top:0;
	left:-140px
}
/* *********************** MAIN MENU *********************** */

/*
 NOTE: green behind buttons is handled in the table holding the menu, not here!
 ALTERNATE  CSS FOR HORIZONTAL MENU: This is slightly more complicated :).
 See the Vertical menu CSS for comments and instructions.
 IE SOMETIMES NEEDS "clear: both" IN STATEMENT FOLLOWING THESE MENUS
 
  
 */


#mainmenuHolder {
	font-size: 105%;
	font-weight: bold;
	color: #FFF;
	background-color: #283D6C; /* In case of leaks in WinIE5 */
	height:26px; /* Needed for Firefox and Safari to hold <div> open and stop right-hand gap. */
}
/* Keep menu on top */
#listMenuRoot {
	position: relative;
	width: 100%; /* stop IE vanishing bug */
	z-index: 10;
}
/* All  UL tags */
.menulist, .menulist ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
/* All  submenus - hidden by default, positioned down from parent */
.menulist ul {
	visibility: hidden;
	position: absolute;
	top: 26px; /* 28px; */
	left: -1px;
	/* width: 85px; irrelevent, overridden by id's below */
 text-align: left;
}
/* Second  and third etc. level submenus - position across from parent instead */
.menulist ul ul {
	top: -1px;/* left: 90px; irrelevent, overridden by id's below */
}
/* All  menu items ('li' tags). These are the horizontal styles with borders/overlapping */
.menulist li {
	float: left;
	position: relative;
	background: #283D6C; /* Top menu items have green background until image loads. */
	/* border: 1px solid #000; */
 margin-right: -1px;/* width: 111px; irrelevent, overridden by id's below */
}
/* All items below the top have gray background. */
.menulist li li {
	background: #BCE; /* was EEE */
	border: 1px solid #283D6C;
}
.menudivider {
	width:3px;
	padding:5px 0 5px 0;
}
/* Marv - Overrides */
.menulist li#topPro {
	width: 235px;
	text-align:right;
}
.menulist ul#subPro {
	left: 121px;
	width: 100px;
}
.menulist li#topCat {
	width: 80px;
}
.menulist ul#subCat {
	width: 175px;
}
.menulist li#topShows {
	width: 65px;
}
/* .menulist li#topNews { width: 55px; }  */
.menulist li#topFAQ {
	width: 40px;
}
.menulist ul#subFAQ {
	width: 240px;
}
/* .menulist li#topReps { width: 130px; } */
.menulist li#topLinks {
	width: 55px;
}
.menulist ul#subLinks {
	width: 110px;
}
.menulist li#topAbout {
	width: 85px;
}
.menulist ul#subAbout {
	width: 200px;
}
.menulist li#topCon {
	width: 191px;
	text-align:left;
}
.menulist ul#subCon {
	width: 175px;
}
/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
	float: none;
	margin-right: 0;
	margin-bottom: -1px;
}
/*
 Links inside the menu
 Must use 0 padding on sides if width = 100%
 Width 100% stretches Win/IE's 'a' to fit the 'li'
 Use &nbsp; for side padding
*/
.menulist a {
	display: block;
	padding: 5px 0 5px 0;
	color: #FFF; /* was FFF */
	/* background-image: url(pumpsImages/bkgnds/main_menu_button_bkgnd.jpg); */
 text-decoration: none;/* width: 100%; */
}
/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
	color: yellow; /* #00875D; */
	/* background-color: #FFF; */
 background-image: none;
}
.menulist a.highlighted {
	color: yellow; /* #00875D; */
	/* background-color: #FFF; */
 background-image: none;
}
/*
 Marv - links inside of submenus
 Background image on headers anchor only
*/
.menulist ul a {
	color: #283D6C;
	background-image: none;
}
.menulist ul a:hover, .menulist ul a.highlighted:hover, .menulist ul a:focus {
	color: #283D6C;
	/* #00875D; */
	background-color: #EEF;
	background-image: none;
}
.menulist ul a.highlighted {
	color: #283D6C; /* #00875D; */
	background-color: #EEF;
	background-image: none;
}
/* Only style submenu indicators within submenus. */
.menulist a .subind {
	display:  none;
}
.menulist ul a .subind {
	display:  block;
	float: right;
}
/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
	float: left;
}
.menulist ul a {
	float: none;
}
/* \*/
.menulist a {
	float: none;
}
/* */


/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html .menulist ul li {
	float: left;
	width: 100%;
}
* html .menulist ul li {
	float: left;
	height: 1%;
}
* html .menulist ul a {
	height: 1%;
}
/* End Hacks */


/* **************************  VERTICAL FREESTYLE MENU LAYOUT ************************** */

#barmainmenuHolder hr {
	width:85%;
	padding:0;
	margin:0;
}
#barmainmenuHolder {
	font-size:11pt;
	font-weight:bold;
	color:#FFFFFF;
	background-color: #283D6C; /* In case of leaks in WinIE5 */
}
/* All <ul> tags in the menu including the first level */
.barmenulist, .barmenulist ul {
	margin: 0;
	padding: 0;
	width: 130px;
	list-style: none;
}
/*
 Submenus (<ul> tags) are hidden and absolutely positioned across from their parent.
 They don't *have* to touch their parent menus, but is' a good idea as CSS-only fallback
 mode requires menus to touch/overlap (when JS is disabled in the browser).
*/
.barmenulist ul {
	/* display: none; */
 visibility:hidden;
	position: absolute;
	top: -1px;
	left: 128px;
}
/*
 All menu items (<li> tags) are relatively positioned to correctly offset their submenus.
 They have borders that are slightly overlaid on one another to avoid doubling up.
*/
.barmenulist li {
	position: relative;
	border: 1px solid #283D6C;
	background: #283D6C;
	margin-bottom: -1px;
}
/* All items below the top have gray background. */
.barmenulist li li {
	background: #BCE; /* was EEE */
	border: 1px solid #283D6C;
}
.barmenulist ul>li:last-child {
	margin-bottom: 1px; /* Mozilla fix */
}
/* Links inside the menu */
.barmenulist a {
	display: block;
	padding: 6px;
	color: #FFF;
	text-decoration: none;
}
/*
 Lit items: 'hover' is mouseover, 'highlighted' are parent items to visible menus.
*/
.barmenulist a:hover, .barmenulist a.highlighted:hover, .barmenulist a:focus {
	color: #B7022B;/* background-color: #A64; */
}
.barmenulist a.highlighted {
	color: #B7022B;/* background-color: #C86; */
}
/*
 Marv - links inside of submenus
 Background image on headers anchor only
*/
.barmenulist ul a {
	padding: 3px;
	color: #283D6C;
	background-image: none;
}
.barmenulist ul a:hover, .barmenulist ul a.highlighted:hover, .barmenulist ul a:focus {
	color: #283D6C;
	; /* #00875D; */
	background-color: #EEF;
	background-image: none;
}
.barmenulist ul a.highlighted {
	color: #283D6C; /* #00875D; */
	background-color: #EEF;
	background-image: none;
}
/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/


/* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */
.barmenulist a .subind {
	float: right;
}
/*
 * IE hacks are in iehacks.css to get by the css validator.
 */

/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html .barmenulist li {
	float: left;
	width: 100%;
}
* html .barmenulist li {
	float: left;
	height: 1%;
}
* html .barmenulist a {
	height: 1%;
}
/* End Hacks */