/* ---------------------

	Title: JM Industries - Main screen stylesheet

	Filename: screen.css

	Author: One Pica Inc, Boston MA

	

	Table of Contents:

		Section Title (Searchstring)			Description

		

		General Styles(=General):				Set font sizes, Page backgrounds, etc

		Master #container Styles(=Master):		Placing, sizing, styling the main container

		Branding Styles(=Branding):				Logos, taglines, branding info

		Navigation Styles(=Nav):				The navigation bar; internal and external

		Content Styles(=Content):				The main content of the page

		Multi-Column Styles(=Multicol):			The cases where the content needs to be in multiple columns

		Credit/Footer Styles(=Footer):			The footer

		Universal Styles(=Uni):					Classes and elements that apply throughout ('clear', 'blue', etc)

	

	Common Color Table:

		White:									#FFFFFF;

		Background Blue:						#EFEFFF;

	

	Thanks To:

		CSS structure/commenting: 				http://www.huddletogether.com/2006/02/16/practical-web-development-tips/

		Markup Structure:						http://www.stuffandnonsense.co.uk/archives/whats_in_a_name_pt2.html

---------------------- */



/* =General

---------------------- 

	General Styles applied to 'normalize' things

	Notes:

		EM styling generally following (http://www.clagnut.com/blog/348/) from this point 10px=1em, 11px=1.1em, etc

---------------------- */

html

{

	padding: 0;

	margin: 0;

	font-size: 100%; /* ensures font consistency across browsers */

	height: 100%;

}

body

{
	padding: 0;
	margin: 0;
	font-size: 62.5%; /* correct value for IE6 */
	line-height: 1.5;
	background: #fff url(../images/bg/hdr_bg_wide1.gif) 50% 47px no-repeat;
	text-align: center; /* fix IE5 bug that doesn't honor margin auto */
	font-family: "Times New Roman", Times, serif;
	color: #666666;
	height: 100%;
}

html > body

{

	font-size: 10px; /* correct value for non-IE6 browsers */

}

p

{

	padding: 0;

	margin: 0 0 1em 0;

}



INPUT, SELECT, TH, TD

{

	font-size: 1em;

}

H1

{

	font-size: 2em;

}

/* displayed at 24px */

H2

{

	font-size: 1.5em;

	color: #415e7c;

}

/* displayed at 18px */

H3

{

	font-size: 1.25em;

}

/* displayed at 15px */

H4

{

	font-size: 1em;

}

/* displayed at 12px */



img, a img

{

	border: none;

}



/* =Master

---------------------- 

	Master Container

	Notes:

		margin: 0px auto; centers the container horizontally except in IE5, which is fixed in the body tag

---------------------- */

#container

{

	position: relative;

	margin: 0px auto;

	padding: 0;

	width: 950px;

	font-size: 1.2em; /* displayed at 12px */

	text-align: left; /* unfix all other browsers from the IE fix in the body tag above */

}



#header

{

	background: #7591b3 url(../images/bg/nav_bg_tl.gif) 0 0 no-repeat;

	clear: right;

	margin: 6px 0 1.5em 0;

}

#header-inner

{

	background: transparent url(../images/bg/nav_bg_tr.gif) right 0 no-repeat;

	padding: 27px 0 0 0;

}





/* =Branding

----------------------

	Branding styles: Usually the logo and tagline

	Notes:

		Image replacement: Usually Phark Method (http://www.mezzoblue.com/tests/revised-image-replacement/)

---------------------- */

#branding

{

}

#branding-logo

{

	cursor: pointer;

	width: 98.5%;

	height: 85px;

	height: 85px !important; /* Set dimensions once here, and use 100% for all dimensions in both rules below */

}

#branding-logo h1

{

	text-indent: -5000px;

	overflow: hidden;

	background-image: url(../images/branding/logo.jpg);

	background-repeat: no-repeat;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0; /* Neutralize h1's default behavior */

}

#branding-logo h1 a

{

	display: block;

	width: 100%;

	height: 100%;

}



/* Skip link(s), finalization pending */

#skiplink a

{

	position: absolute;

	top: -1000px;

	left: -2000px;

}



#skiplink a:focus, #skiplink a:active

{

	position: absolute;

	margin: 0;

	top: 0;

	left: 0;

	display: block;

	padding: 0;

	background: #000;

	color: #fff;

	font-weight: bold;

}



#skiplink a:hover

{

}



#branding-tagline

{

	width: 0;

	height: 0; /* See branding-logo above */

	margin: 0;

	padding: 0;

}

#branding-tagline h2

{

	text-indent: -5000px;

	overflow: hidden;

	background: -;

	width: 100%;

	height: 0px;

	margin: 0;

	padding: 0;

	line-height: 1;

}

#branding-info

{

}



/* =Nav

----------------------

	Navigation styles

	Notes:

		Navigation belongs in an UL tag with <ul><li><a></a></li></ul> as the markup scheme.

		Keep each of the below #elements as divs, and put the UL inside them

		If there's a Left-Hand navigation, use #nav-section, give it a width & float it left

---------------------- */



#nav

{

}

#nav-main

{

}

#nav-section

{

}

#nav-external

{

}



#search-input button

{

	background-color: #7791b4;

	color: #ffffff;

	border: 1px solid #314d72;

	font-size: 75%;

	margin-left: 5px;

	margin-right: 5px;

}

#search

{

	background: transparent;

	float: right;

	display: inline;

	width: 35%;

	text-align: right;

	margin: 0.2em 8px 0 0;

}



/* =Content

----------------------

	Main Content styles

	Notes:

		font-size: 1em makes the text 10px but expandable in IE

		Remember: The font is inherited, so some math will be necessary to size children up or down correctly

---------------------- */

#content

{

	margin: 20px 0px 20px 0px;

}

#content-main-homepage

{

	font-size: 1em;

	background: #ddd url(../images/bg/content_rc_tl.gif) 0 0 no-repeat;

	color: #333333;

}



/* Rounded corners & formatting for homepage */

#content-mainhome-inner1

{

	background: url(../images/bg/content_rc_tr.gif) right top no-repeat;

}

#content-mainhome-inner2

{

	background: transparent url(../images/bg/content_rc_bl.gif) 0 bottom no-repeat;

}

#content-mainhome-inner3

{

	background: transparent url(../images/bg/content_rc_br.gif) right bottom no-repeat;

	padding: 10px 20px 20px 20px;

}



/* Homepage image */

.floatleft

{

	float: left;

	margin: 0 10px 5px 0;

}





#content-main

{

	font-size: 1em;

	background-color: #ffffff;

	color: #333333;

	height: 100%;

}



#content-news

{

}



#content div.fullColumn

{

}



/* =Multicol

----------------------

	Multi-Column Content styles

	Notes:

		This is ONLY for content text. Navigation that goes on the left as a "column" is part of #nav-section

		If you need "pixel-perfect", you'll have to stop using percentages and use actual pixels

---------------------- */

#content div.twoColumnLayout

{

	width: 47%;

	float: left;

	display: inline; /* Fix IE double-margin bug, Fx ignores it */

	clear: none;

}

#content div.twoColumnHomeLeft

{

	margin-right: 5% !important;

	margin-right: 3%;

	width: 600px;

}



#content div.twoColumnHomeRight

{

	width: 263px;

}



#content div.twoColumnLeft

{

	margin-right: 20px !important;

	margin-right: 20px;

	width: 265px;

	background-color: #ddd;

}



#content div.twoColumnRight

{

	width: 610px;

}



/* Rounded corners & formatting for leftnav */

#leftnav

{

	background: #ddd url(../images/bg/content_rc_tl.gif) 0 0 no-repeat;

}

#leftnav-inner1

{

	background: url(../images/bg/content_rc_tr.gif) right top no-repeat;

}

#leftnav-inner2

{

	background: transparent url(../images/bg/content_rc_bl.gif) 0 bottom no-repeat;

}

#leftnav-inner3

{

	background: transparent url(../images/bg/content_rc_br.gif) right bottom no-repeat;

	padding: 10px 20px 20px 20px;

	xheight: 500px;

}





/* Essentially, portlets */

#content div .portlet

{

	background-color: #fff;

	border: 1px solid #c1c1c1;

	margin: 10px 0 20px;

}



#content div div .portlethead

{

	color: #415e7c;

	padding-left: 20px;

	padding-right: 20px;

	padding-top: 0px;

	border-bottom: 1px solid #709bd0;

}



#content div div .portletbody

{

	padding: 5px 20px 10px 20px;

}



#content div.threeColumnLayout

{

	width: 30%;

	float: left;

	display: inline; /* Fix IE double-margin bug, Fx ignores it */

	clear: none;

}

#content div.threeColumnLeft

{

	margin-right: 4% !important; /* IE/Fx fix, IE views 3% the same way Fx does 4% */

	margin-right: 3%;

}

#content div.threeColumnMiddle

{

	margin-right: 4% !important; /* IE/Fx fix, IE views 3% the same way Fx does 4% */

	margin-right: 3%;

}

#content div.threeColumnRight

{

	margin-right: 0;

}





/* =Footer

----------------------

	Credit/footer styles: Usually the copyright/company info

	Notes:

---------------------- */

#siteinfo

{

	font-size: .9em;

	background: transparent url(../images/bg/hdr_bg_wide1.gif) 50% 0 no-repeat;

}

#siteinfo-inner

{

	width: 935px;

	margin: 0 auto;

	text-align: left;

	padding: 8px 0 6px 15px;

	background: transparent url(../images/bg/footer_bg_tl.gif) 0 0 no-repeat;

}



#siteinfo a

{

	color: #666666;

}



#siteinfo-legal

{

	float: left;

	width: 45%;

}

#siteinfo-credits

{

}

#siteinfo-accessibility

{

}

#siteinfo-links

{

	float: right;

	width: 45%;

	text-align: right;

}



/* =Uni

----------------------

	Universal styles: Styles that apply to elements found throughout the site

	Notes:

		The best example of this is the "clear" div

---------------------- */

.clear

{

	clear: left;

}

.clearboth

{

	clear: both;

}



/* 

Accessible image-replacement with rollovers for inline/nav links

(IE requires DOM script to make the hover work)

----------------------

Gilder/Levin method, requires empty span & images must be 100% opaque.

http://www.mezzoblue.com/tests/revised-image-replacement/ 

Combined with CSS Sprites double-image rollover technique.

http://alistapart.com/articles/sprites/

Also Suckerfish Dropdowns Javascript fix.

http://alistapart.com/articles/suckerfish/

*/



li.img-rep

{

	display: block;

	margin: 0;

	padding: 0;

	position: relative;

	height: 30px;

	width: 100px;

}

.img-rep span

{

	display: block;

	background: transparent url(../images/bg/test_btn1.gif) left top no-repeat;

	position: absolute;

	width: 100%;

	height: 100%;

}

.img-rep span:hover, .img-rep span.over

{

	background: transparent url(../images/bg/test_btn1.gif) left -30px no-repeat;

	width: 100%;

	height: 100%;

}









b.rtop, b.rbottom

{

	display: block;

	background: #FFF;

}

b.rtop b, b.rbottom b

{

	display: block;

	height: 1px;

	overflow: hidden;

	background: #dddddd;

}

b.r1

{

	margin: 0 5px;

}

b.r2

{

	margin: 0 3px;

}

b.r3

{

	margin: 0 2px;

}

b.rtop b.r4, b.rbottom b.r4

{

	margin: 0 1px;

	height: 2px;

}





.pageheader

{

	width: 100%;

	display: block;

	color: #415e7c;

	padding-right: 20px;

	padding-top: 0px;

	border-bottom: 1px solid #709bd0;

}





.machinelisting

{

	display: block;

	list-style: none;

	width: 500px;

	border-top: 1px solid #709bd0;

	padding: 20px;

	float: left;

}



.first

{

	border-top: none;

}



.machinetitle

{

	font-weight: bold;

	color: #333333;

}



.machinelisting:hover

{

	background-color: #DDDDDD;

}



.machinelisting img

{

	float: right;

}



.machinelisting a

{

	cursor: pointer;

	text-decoration: none;

	width: 100%;

	color: #666666;

	display: block;

}



.machinelisting a:visited

{

	color: inherit;

}



.machinelisting a:hover

{

}



.machinelisting a p

{

	float: left;

	vertical-align: middle;

	width: 400px;

}



#imagecontainer

{

	padding-top: 30px;

	border-top: 1px solid #709bd0;

	clear: both;

}



#linkscontainer

{

	border-top: 1px solid #709bd0;

	padding-top: 10px;

}



#linkscontainer li

{

	float: left;

	list-style-type: none;

	padding-left: 10px;

	padding-right: 10px;

}


/* =Newsletter

----------------------

	Notes: Content added by Daniel Scanlan to fix spacing errors in the constant contact newsletter.

---------------------- */

.topSpace

{

	margin-top: 98px !important ;
	
}

.rightSpace

{

	margin-right: 10px !important ;
	
}