/* berne_style.css - bernescale.com style sheet */
/* This is the main-primary style for entire site */
/* See also Imported style for each page */
		a:link { 
			color: #000000;
		}
		a:visited { 
			color: #006699;
		}
		a:hover, a:active
		{
			color: #fff;
			background-color: #CCCCCC;
		}
		.nextbutton a:link, .nextbutton a:visited
		{
			display: block;
			padding: .1em .1em;
			background-color: #03F;
			color: #fff;
			border: 1px solid #006;
			width: 10em;
			text-decoration: none;
			text-align: center;
		}
		.nextbutton a:hover, .nextbutton a:active
		{
			background-color: #fff;
			color: #036;
		}
		a[href ="#Top"]
		{
			color: #333333;
			background-color: #CCCCCC;
		}
		h1
		{
			padding: 0;
			font-size: 125%;
		}
		h3
		{
			font-size: 1.6em;
			font-weight: bold;
			letter-spacing: .1em;
		}
		div#top-left		
		{
			position: relative;
			top: 0px; left: 0px;
			width: 168px;
			height: 16px;
		}
		body
		{
			margin: 0;
			border: 0px;
			padding: 0;
			font-size: 95%;
			font-family: sans-serif, serif, "trebuchet MS";
			background-image:  url("gradients/gradientlightgreyhorz.png");
			background-repeat: repeat-y;
		}
		div#bannerleft
		{
			float: left;
			width: 170px;
			height: 138px;
			margin: 0px;
			border: 0px solid #000;
			padding: 0;
			overflow: hidden;
			color: #CCCCCC; /*light gray*/
			background-color: #8495f2;
			background-image: url("gradients/bernelogogradient140.png");
			background-position:center;
			background-repeat: no-repeat; 
		}
		div#bannermid
		{
			height: 138px;
			margin: 0px;
			margin-left: 170px;
			margin-right: 0px;
			border: 0px;
			padding: 0px;
			color: #fff;
			background-color: #44F; /*blue*/
			background-position: left;
			background-repeat: repeat-x;
			background-image: url("bscbuildingbanner650x138.jpg");
		}
		div#bannerright
		{
			float: right;
			width: 180px;
			height: 138px;
			margin: 0px;
			border: 0px;
			padding: 0;
			color: #fff;
			background-color: #44F;
			background-position: right;
			background-image:   url("pagebits/right_col_base.jpg");
			background-repeat: repeat-y;
			border-bottom: 2px solid #FF9966; 
		}
		div#bannerall
		{
		}
		div#bannerall h1
		{
			font-size: 2.2em;
			font-weight: normal;
		}
		div#bannerleftfloat
		{
			position: absolute;
			left: 0px;
			top: 0px;
		}
	  	 * html div#bannerleft
		{
	    width: 160px; /* for IE5 and IE6 in quirks mode */
	    w\idth: 170px; /* for IE6 in standards mode */
		}
		
		div#bannermid h1
		{
			color: #333333;
			margin: 20px;
			padding: 0;
			text-align: center;
			overflow: hidden;
		}
	  	 * html div#bannerright
		{
	    width: 180px; /* for IE5 and IE6 in quirks mode */
	    w\idth: 180px; /* for IE6 in standards mode */
		}
		div#bannerrightfloat
		{
			position: relative;
			right: -12px;
			top: 10px;
			color:#FF9966;
			font-size: .9em;
			font-weight: normal;
			line-height: .7em;
			margin-top: 25px;
		}
		div#banner h1
		{
			margin: 0;
			padding: .3em .2em .3em .5em;
			font-size: 2.2em;
			font-weight: normal;
		}
		div#container
		{
			background-image:  url("pagebits/nav_col_base12.jpg");
			background-repeat: repeat-y;
		}
		div#container2
		{
			background-image:   url("pagebits/right_col_base.jpg");
			background-position: right;
			background-repeat: repeat-y;
		}
		div#navigation
		{
			float: left;
			width: 150px;
			padding-top: 1em;
		}
		div#navigation ul
		{
			list-style-type: none;
			padding: 0;
			margin: 0;
			font-weight: bold;
			font-size: .8em;
		}
		div#navigation ul li
		{
		margin-top: 4px;
		margin-left: 10px;
		}
		div#navigation ul li a
		{
			display: block;
			width: 120px;
			padding: 3px 5px 3px 10px;
			text-decoration: none;
			color: #111;
			/*background-image:  url("pagebits/nav_base.jpg");*/
			background-repeat: repeat-y;
		}
		div#navigation ul li a:hover
		{
			color: #fff;
			background-color: #ccc;
			/*background-image:  url("pagebits/nav_base2.jpg"); */
			background-repeat: repeat-y;
		}
		div#mailspace
		{
			position: absolute;
			left: 20px;
			top: 410px;
		}
		div#lowleftfloat
		{
			position: absolute;
			left: 10px;
			top: 445px;
		}
		div#more
		{
			float: right;
			width: 160px;
			margin: 0;
			padding: 1em 8px 0 6px;
			color: #eee;
		}
		div#more h3
		{
			margin-top: 0;
			margin-right: 4px;
			font-size: 1.2em;
			padding: .3em .1em .3em .1em; /* top left bottom right */
			background-image:   url("pagebits/right_base.jpg");
			background-position: right;
			background-repeat: repeat-y;
			color: #eee;
		}
		div#more a:link
		{
			text-decoration: none;
			color: #fff;
			background-color: none;/*#222;*/
		}
		div#more a:hover
		{
			color: #DDD;
			background-color: #777; /*  pink! #FF00FF; */
			/*background-image:   url("pagebits/right_base.jpg");
			background-position: center;
			background-repeat: no-repeat;
			background-color: #999; */
		}
		div#rightcell /* the inverse block (similar to nav buttons) that can hold a title (h3 right column) */
		{
			float: right;
			width: 160px;
			margin: 0;
			padding: 1em 0px 0 0; /* T, L, B, R space within block */
		}
		div#rightcell h3
		{
			margin-top: 0;
			padding: .2em;
		}
		div#lowrightfloat
		{
			float: left;
			width: 110px;
			margin: .8em 0em 0em 0em;
		}
		div#content /* main center cell forces content in-between sides by using margins > side widths*/
		{
			/*background-image:  url("gradients/gradientlightgreyhorz.png"); */
			background-position: center;
			background-repeat: repeat-y;
			margin-left: 180px;
			margin-right: 190px;
			line-height: 110%;
			font-weight: 500;
		}
	/*I think this is not used anywhere*/
		div#contentbox
		{
			overflow: hidden;
		}
		div#content h2
		{
			font-size: 2em;
			line-height: 110%;
			margin: 0;
			font-weight: normal;
			padding: .2em .3em .1em 0em; /* top left bottom right */
		}
	/*The stuff below puts all the product image+text items in a floating layout*/
		div#prodcontainer 
		{
			float: left; 
			width: auto;
  			border: 2px solid #833; /*was 1px dashed*/
			padding: 5px;
			margin-top: 5px;
			margin-left: 5px;
			margin-right: 5px;
			margin-bottom: 5px;
  		}
		div.float {
  			float: left;
			width: auto;
			padding: 0;
			margin: 5px;
  			border: 1px solid;
			background-color: transparent; /* #F0EADD; */
			display: inline;
  		}
		div.float p {
			text-align: center;
			padding: 0;
			margin: 5px;
   		}

		div.float h1 {
			margin: 5px;
		}

		  /*the spacer is needed as 'content'.  When you float an
		 element with CSS, it no longer takes up any space and the background
		  and border show up above the images instead of surrounding them. We need
		 to put some content other than the floated DIVs into the container DIV. Like a spacer DIV */
  		div.spacer { 
		clear: both;
  		}		
		div#topcleardiv
		{
			clear: both;
			height: -1em; /* why? don't know, but IE and Moz handle differently so this works */
		}
		div.clearer
		{
			clear: left;
			line-height: 0; /* explained at http://www.complexspiral.com/publications/containing-floats/ */
			height: 0;
		}


		div#footcleardiv
		{
			clear: both;
			height: 1em;
		}
		div#footer
		{
			clear: both;
			padding: .5em 1em;
			border-top: 1px solid #999;
			text-align: right;
			color: #333333;
		}
		div#footer ul
		{
			padding: 0;
			margin: 0;
			list-style-type: none;
			font-size: .8em;
			text-align: center;
		}
		div#footer li
		{
			display: inline;
			margin-right: 2em;
		}