/* CSS Document styles for inner pages  */
/* Keep footer at bottom of window - the settings in THIS css work when there NOT MUCH text in the document.
   It COMPLETELY BREAKS if there is too much text!

  IMPORTANT!!    To use this for shortText documents, change the documents thus:
  	1. Change link to style sheet from "layout" to "layout-shortText.css"
	2. The footer div must be OUTSIDE any other divs, like this
	
			<div id="document"
				<div id="container"
				   (all other divs)
				</div> end container
			</div> end document
			<div id="footer"
			</div> end footer
	
	3. Add   class-"clearfix"   to the container div.
	4. Remove the Shadow div
	5. Remove the Clearfooter div
   
*/
   
@import url("searchform.css");   

/* ZERO MARGINS 
--------------------------------------------------------*/
html, body, p, img, h1, h2, h3, h4, ul, ol, li { margin: 0; padding: 0; border: 0;}

html, body, #document { height: 100%; }

body > #document { height: auto; min-height: 100%; }

* html #document { height: 100%;
	width: 100%;/* box model hack for ie5.+*/
	w\idth:100%; }
/* force scrollbars vertically; ie7 doesn't need this, ff does */
HTML {
   overflow-y: scroll;
   overflow: -moz-scrollbars-vertical;
}
 
/* LAYOUT
--------------------------------------------------------------------------- */
/* put images in, center layout */
body { text-align: center; min-width: 800px; background-color: #Ffffff; font-family: Verdana, Arial, Helvetica, sans-serif;	
	background-image: url(../images/shadow.png); background-position: 50%; background-repeat: repeat-y; 
	}

/* this defines the document, which holds all other divs (except footer) */
#document { 
	min-height: 100%; 
	width: 100%; 
	/*margin: auto; */
	position: relative; 
	text-align: left; 
	} 
/* this contains everything except the footer */
#container { 
	padding-bottom: 60px;  /*  this must match height of footer  */
	margin-right: auto;
	margin-left: auto;
	width: 700px; text-align: left; background-color: #Ffffff;} 

/* div to hold large pictures */
#center { clear: both; text-align: center; padding: 0}

/* HEADER 
--------------------------------------------------------------------------------- */
#header { padding: 20px 0 0 0; height: 50px; background-color: #Ffffff; } 
#header .strapline { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: #999999; text-align: right; display: block;	}	
#header .logo {	float: left; }

/* search form in header
------------------------------------------------------------- */
input.txt {   /*text for searchstring field*/
	color: #769c27; border: 1px solid #769c27; font-family: "Courier New", Courier, monospace; font-size: 8pt;
	padding: 0 0 2px 3px; width: 100px;
	}
input.btn {   /*text for GO button*/
	color: #769c27;	font-size: 7pt; font-weight: bold;
	border-right: 1px solid #769c27; border-bottom: 1px solid #769c27; background-color: #afd865;
	padding: 0 5px 0 4px; width: 28px; margin-left: 5px;
	}	
label.label { /*text for 'search'*/
	color: #666666; font-size: 9pt; padding-right: 5px;
	}
	
/* HEADER LINKS
---------------------------------------------------------- */	
#header a { text-decoration: none;}
#header a:link { color: #666666;}
#header a:visited { color: #999999;}
#header a:hover, #header a:focus { color: #afd865; outline: 0;}	

/* banana -- first deviation from 'home.css'--no NEWS div or styles; 
   also banana size is different on inner pages
-------------------------------------------------------------------------------*/
#banana { margin: 30px 0 25px 0; clear: both; overflow: hidden;	} 


/* BODY  -- this will be for the right column
------------------------------------------------------------- */
#body {
	width: 490px;     /* 490 - 420 = 70*/
	float: right;
	margin: 0 0 20px 0;
	}
#body .heading {
	background-image: url(../images/background_heading.jpg); height: 33px;
	background-repeat: repeat-x;
	background-color: #769c27;
	color:#FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	letter-spacing: 0.25em;
	padding: 8px 0 1px 1em;
	margin-bottom: 12px;
	}
#body p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 10pt;  /* - this is larger than on home page */
	line-height: 1.5;
	margin-bottom: 12px;
	width: 420px;
	padding-left: 1em;
	}

#body ul {
	padding: 0 0 0 1em; margin: 0;
	list-style: none;
	font-size: 10pt;
	color: #666666;
	line-height: 1.5;
	margin-bottom: 12pt;
	}
#body ul li {
	background: url(../images/bullet_green.gif) no-repeat 0 5pt;
	padding-left: 1.5em;
	padding-bottom: 5px;
	line-height: 2em;
	width: 420px;
	}

#body ol {
	padding: 0 70px 0 1em;
	margin: 0 0 0 2em;
	font-size: 10pt;
	color: #666666;
	line-height: 1.5;
	margin-bottom: 12pt;
	list-style-type: decimal;
	}
#body ol li {
	padding-bottom: 10px;
	}
/* for last item in list, gives more space below line */
.li { margin:0 0 0.85em 0; } 

	
h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; }
h1 { font-size: 1em; color:#333333;  margin-bottom: 0.75em; }
h2 { font-size: 0.9em; color: #666666; margin-bottom: 0.75em; margin-top: 1.5em;}
h3 { font-size: 0.9em; color: #999999; margin-bottom: 0.75em; }


/* BODY & FOOTER LINKS 
----------------------------------------------------------- */
#body a, #footer a { text-decoration: none;}
#body a:link, #footer a:link { color: #769c27;}
#body a:visited, #footer a:visited { color: #999999; border-bottom: 1px dashed #999999;}
#body a:hover, #footer a:hover,
#body a:focus, #footer a:focus { color: #afd865; border-bottom: 1px dashed #afd865; outline: 0;}	

/* WIDEBODY -- div to hold tables. must be after the menu/body divs 
---------------------------------------------------------------------------- */
#widebody { clear: both; text-align: left; padding: 0}	
#widebody p {font-size:10pt; line-height: 1.5; margin-bottom: 12px;}



/* MENU  -- left column -- also see p7menu.css
------------------------------------------------------------- */
#menu {
	width: 185px;
	margin-right: 25px;
	float: left; 
	}

#menu p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; }
#menu a { text-decoration: none; color: #666666; }
#menu p a:visited, #menu p a:hover { color: #d7ecb2;}

#menu ul {
	padding: 0; margin: 0;
	list-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt; font-weight: bold;
	color: #356630;
	}
#menu li {
	padding-bottom: 5px;
	}
#menu li a:link,
#menu li a:visited {
	text-decoration: none;
	color: #356630;
	}
#menu li a:hover,
#menu li a:focus {
	color: #afd865;
	outline: 0;
	}

/*for submenu*/
#menu ul ul {
	list-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt; font-weight: normal;
	}
#menu ul ul li { 
	padding-bottom: 5px;
	}
#menu ul ul a:link,            
#menu ul ul a:visited {
	text-decoration: none;
	color: #356630;	
	}
#menu ul ul a:hover {
	color: #afd865;
	outline: 0;
	}

/* SPECIALS
--------------------------------------------------------------- */
.clearit { clear: both; width: 100%; }
code {font-size: 10pt;}
.red {color: #FF0000;}
.spaceright { padding-right: 10px;}
.spacebottom { padding-bottom: 10px; }
.indent { padding-left: 10px; margin-left: 10px;}
.bigindent { padding-left: 225px; }
/* ask Joe answer page */
.a { color: #ddb71c; font-weight: bold; font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 150%; padding-right: 15px;}
.quote { font-family:Georgia, "Times New Roman", Times, serif; color:#356630; letter-spacing: 0.05em;}
/* --- superscript --- */
.sup { line-height: 0;}
/* --- dates on PR archive page --- */
.gray { color: #CCCCCC;} 



/* NO PRINT elements
-----------------------------------------------------------*/
/* I don't actually have a class defined. I just add 'noprint' to the class of an element that I don't want to print. Then in the print.css, .noprint is set to display:none, so those items don't print. */
.noprint { }

/* HIDE elements 
---------------------------------------------------------- */
/* for form's hidden field, to trap spambots. This hides element so user doesn't see it, but a spam bot would, and would put info in the field. In that case, the formmail script should throw it away */
.hide { display: none; }



/* TABLE on support/equipment.html and gs827/specifications .html
-------------------------------------------------------------------------- */
table {font-family: Verdana, Arial, Helvetica, sans-serif; color: #666666; font-size: 10pt;}
table.equip  {
	border-collapse:collapse;
	width: 100%;
	border: 1px solid #DBBD46; 
	}
/* table header*/
.equip th {background-color: #E4CF78; font-weight:bold; text-transform:uppercase; text-align:left;}

/* spacing for th & td; doesn't work to put the padding in the table */
.equip th, .equip td { padding: 0.5em 0.5em; }

/* works only in FF */
.equip col { border-right: 1px dashed #E4CF78;}

/* put some lines under each cell */
.equip td {border-bottom: 1px solid #E4CF78;}

/* subhead rows */
.sub {background-color: #F0E4B7; font-style:italic; text-align: left;}

/* center*/
.center {text-align: center; }

/* for images in the cells in the table with class equip, hopefully, center them. Nope, neither worked when applied as class to the img tag. Phooey. Using the above .center tag on the td DOES work.
img.equip {display:block; margin-left:auto; margin-right: auto; }
img.equip {display:table-cell; text-align:center;}*/


/* FORMS
------------------------------------------------------------------------ */
#body form {
	border: 1px solid #d9d3aa;
	padding: 15px 0 0 15px;
	}
#body form.login {
	background-color: #f8f0d4;
	width: 190px;
	}
form, label, select, input {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	color: #000000;}
.dropdown {border:solid 1px #999999;} /*works in FF, not in IE6*/
label {font-size:1em; }
select#country {font-size:9px; }
.searchLabel { color: #999999; font-size: 9px;}
.radioText { color: #999999; font-size: 9px; position:absolute; padding-top:3px;}
.white { color:#FFFFFF; border: 0 none #FFFFFF;} /*to try to make radio button invisible*/
.imgButton { vertical-align: middle; }


/* floats and borders */
.floatRight { float: right; padding-left: 10px; }
.floatLeft { float: left; padding-right: 10px; }

.rightimage { float: right; padding: 5px; border: 1px solid #999999; margin: 5px 0 5px 10px;
	}
.leftimage { float: left; padding: 5px;	border: 1px solid #999999; margin: 5px 10px 5px 0;
	}
/* non-floated images, borders */
img.border { margin: 10px; padding: 10px;	border: 1px solid #999999; min-height: 1px;
	}
/* non-floated images, tight borders */
img.borderTight {
	margin: 0 7px;
	padding: 2px;
	border: 1px solid #999999;
	}


/*FOOTER 
------------------------------------------------------------ */
#footer { 
	position: relative;
	margin-top: -65px; /* this is height plus the 5px border */
	height: 60px;
	width: 100%; 
	border-bottom: solid 5px #afd865;
	}	
#footer p { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 8pt; color: #666666; 
	text-align: center; 
	padding: 0 0 5px 0;
	}
/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */