/* ---------------------
	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: Verdana, sans-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;
}