@charset "utf-8";
/* .css for Patrick Sharp IT-117 */

/* --TODO clean up this file */

/* 

	For those of you who are reading the source :) This is a CLASS. It's in a RULE format
	Here is the format for a RULE:
	
	SELECTOR {
		PROPERTY: VALUE;
	}
	
	Each one of SELECTOR, PROPERTY or VALUE can be 1 or more values.
	
	All of this information can be found on the w3.org and other sites. 
	
*/

.hiddentext { /* for the AAA accessability test */
	display:none;
}

/* for XHTML Strict compliance */
.float_left {
	float:left;
}
.float_right {
	float:right;
}

.text_right {
	text-align:right;
}

.text_left {
	text-align:left;
}

.text_center {
	text-align:center;
}

body {
	font-family: Arial, Verdana, sans-serif;
	margin:0;
	padding:0;
	height:100%;
	background-color:#666;
}

/*  
	For the specs in Unit 5 (apply background color to career.htm)
*/
body.career  {
	background-color:#669; /* ccc cc9 */
}

body.picture {
	background-image:url('form-bk.jpg');
	background-repeat:no-repeat;
	background-attachment:fixed;	
}

/*
 Main content box. Width set to percentage to force a word wrap effect
*/ 

#content_box {
	position:absolute;
	left:90px;
	top:70px;
	/* 
	I did a percentage here because that will force word wrap 
	and the word-wrap:breakword is CSS 3, not CSS 2.1
	*/
	width:85%;
	/* word-wrap:break-word;  CSS 3 */
	z-index:2;
}

#footer_box {
	font-size:10px;
	height: 50px; /* 15 + (1 for each) + 2 */
	width: 80px;
	position: fixed;
	bottom: 0px;
	z-index: 4; 
	display:block;
}

#header_box {
	position:absolute;
	left:0px;
	height:90px;
	width:100%;
	z-index:5;
	text-align:center;
	font-family: Arial, Verdana, sans-serif;
	color: #036; /* #066; */
	font-style:italic;	
}

#menu_box {
	font-size:12px;
	background-color:#036; /* 066 */ 
	position:fixed;
	left:0px;
	top:2px;
	width:68px;
	height:auto; 
	z-index:9999;
	border-width:2px;
	border-style:solid;
	border-color:#036; /* 066 */
}

/* 

Additional formatting on the anchor on the menu box

*/

/* This is an example of a DESCENDANT SELECTOR (the a after #menu_box) and a PSEUDO-CLASS SELECTOR (a:visited) */
#menu_box a, #menu_box a:visited {
  position:relative;
  text-decoration:none; 
  text-align:center; 
  background-color:#996; /* 9ab */
  color:#333; 
  display:block; 
  width:5em;  /* Controls the width of the "button" */
  border:1px solid #fff;
  border-color:#def #678 #345 #cde;
  padding:0.25em;
/*  margin:0.5em auto; */
}
  
/* This creates the animation when you mouse over a link */
#menu_box a:hover {
  top:1px;
  left:1px;
  color:#fff;
  border-color:#345 #cde #def #678;
}
  
#menu_box a:active,
#menu_box a:focus {
  background-color:#cc9; /* 9ca */ 
  border-color:#678 #345 #cde #def;  
}

#menu_box a.active { /* A new class called active, because Google Chrome and Safari don't do Active state */
  top:1px;
  left:1px;
  background-color:#cc9; /* 9ca */ 
  border-color:#678 #345 #cde #def;  
}
/*

Additional anchor and table formatting that does not have anything to do with the menu.
These definitions are here for the links page table.
This will make the ENTIRE cell region of the table column clickable. The only difference between this and the 
menu_box anchor css is that I don't have a width specified for this. Also, I don't have the active state set for this.
It's not working as I expected it to in the menu, so no need to add to the mix of confusion

Yes, I like clickable buttons :)
*/

.link_cell {
	white-space: nowrap;
	padding: 0px;
	background-color:#ffc; /* 9ab */
	font-size:11px;
}

.link_cell a {
  position:relative;
  text-decoration:none; 
  background-color:#ffc; /* 9ab */
  color:#333; 
  display:block; 
  border:1px solid #ccc;
  border-color:#def #678 #345 #cde;
  padding:0.5em; 
}

.link_cell a:visited {
  position:relative;
  background-color:#ffc; /* 9ab */
  color:#333; 
  display:block; 
  border:1px solid #fff;
  border-color:#def #678 #345 #cde;
  padding:0.5em; 
}

.link_cell a:hover {
  top:1px;
  left:1px;
  border-color:#345 #cde #def #678;
}

/* Experimental */ 
.link_cell2 {
	white-space: nowrap;
	padding: 0px;
	background-color:#036; 
	font-size:11px;
	color:white;
}

.link_cell2 a {
  position:relative;
  text-decoration:none; 
  color:white; 
  display:block; 
  border:2px solid #000;
  border-style:ridge ridge groove groove;
  padding:0.5em; 
}

.link_cell2 a:visited {
  position:relative;
  color:white; 
  display:block; 
  border:2px solid #000;
  border-style:ridge ridge groove groove;
  padding:0.5em; 
}

.link_cell2 a:hover {
  top:1px;
  left:1px;
  border-style:groove groove ridge ridge;
}

/* xhtml strict deprecates the border property */
.no_border_img {
	border-style:none;
	border:0;
	margin:0; 	
	padding:0;
}

/* Alignment modifiers to standard settings */
/*
  These are CLASS definitions for the STANDARD IDENTIFIERS (like h1 and h2)
*/
table.center {
	width:86%;
	margin-left:7%;
	margin-right:7%;
}

h1.center {
	text-align:center;
}

h1.header_font {
	font-family: Arial, Verdana, sans-serif;
	color: #036; /* 066 */ 
	font-style:italic;
}

h2.center {
	font-family: Arial, Verdana, sans-serif;
}

h2.header_font {
	font-family: Arial, Verdana, sans-serif;
	color: #ccf; /* cff 9cf 960 */ 
	font-style:italic;
}

p.center{
	text-align:center;
}

p.menu_font {
	font-family: Arial, Verdana, sans-serif;
	color: #fff;
/* 	font-style:italic; */
	letter-spacing:5px;
	font-weight:bold
}

p.menu_disabled {
	text-decoration:line-through;
}

p.menu_heading {
	font-size:11px;
}

a {
	border: none;
	color: #c30;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	text-decoration: underline;
	font-weight: bold;
}

a.imageAnchor:hover {
    border:none;
}

td.footer_font {
	font-weight: bold;
	font-style: italic;
	font-size: 12px;
}

td.desc_font {
	font-weight: bold;
/*	font-style: italic; */
	font-size: 11px;
}

td.category_font {
	font-weight: bold;
	font-size: 11px;
}

td.right_align {
	text-align:right;
}

td.center {
	text-align:center;
}	

caption.header_font {
	font-family: Arial, Verdana, sans-serif;
	color: #cc6; /* cff 9cf */ 
	font-style: italic;
	font-weight: bold;
	font-size:24px;
}

/* Past here is experimental and may be removed */
/* 
  Well, if you made it here :) be prepared. Things are about to get a little choppy on the understanding 
  My intention is to use the container_box as a holder for my sitemap. I'd like to pop this image up on top of 
  the screen when the user mouses over my sitemap link (at the bottom of the menu) 
  
  The goal is to do this entirely in .CSS, so here we go!
  
  I'll try and keep everything commented so that those of you that want, may follow along
  
 */
 
 /* The container_box. This contains a single object, and that is our image. Nothing special about it at all
 
 */
 
 /* Takes up the entire render space */
#container_box {
	min-height:100%;
	min-width:100%;
	position:relative;
	z-index:9997;
}

/* 

This is going to be tied into our anchor tag because that is what triggers it to display. It
will be set up with very minimum of settings. We are wanting to make sure the default 
position is off the screen. The Height and Width are set to 1 pixel, but you can notice a black dot if you 
are watching for it. This will affect the image only, not the anchor. We don't wanna mess with that !

*/

#container_box a.a_pop .sitemap_pop {
	/* Very tiny image */
	width: 1px;
	height: 1px;
	/* Placed just off the screen */
	left: -1px;
	top: -1px;
	border: 0px;
	position: absolute;
}

/* 

we need to make a subclass here, because we don't want the default action of the anchors to be popping up this sitemap
lets call it a_pop for anchor pop. 

*/

/* On hover, set the actual image size and position somewhere nice */
#container_box a.a_pop:hover .sitemap_pop { 
	width: 720px;
	height: 253px;
	border: 0px;
	left: 100px;
	top: 10px;
	position: absolute;
	display:block;
	z-index:9998;
}

/*
	We can redefine anything inside of the form tags. 
	Since I don't want to change the default form elements,
	because I may have more than one form, I'll make a class for the contact page.
*/
form.test1 *
{
	margin: 0px;
	padding: 3px;
}
	
form.test1
{
/*	background-color:#996; */ /* cc9 */
/*	background-image: url('form-bk.jpg'); */
	background-image: url('sand-bk.gif');
	border: none;
	border-top: 5px groove;
	border-bottom: 5px ridge;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 10px;
	padding-bottom: 10px;
}

form.test1 fieldset
{
	border: none;
	border-top: 1px solid;
}	

table.picture_tab td {
	text-align:center;
}	

/* for stuff on the sandbox page */

/* This is kind of like my menu div, but I'm using images instead of color changes and 
position movements. 

Redefine the normal states (you could put a longer image in, and make a separate state for the
visited Pseudo-Selector) */
#butt_menu a.button,
#butt_menu a.button:visited {
	background: url('_button1_.gif') 0 0 no-repeat;
	display:block;  /* Forces new line before and after */
	/* width + padding = 100px, which is 1/3 the length of the button image. In other words, we only 
	show part of the image for the different anchor states. */
	width:75px;
	padding:5px 0 0 25px;
	color:white;
}
   
#butt_menu a.button:hover {
	/* This sets the beginning of the image, 100 pixels to the left of the display area. The display size is still
	100 pixels (width 75 plus padding 25) so since the image is actuall longer than this, it displays the left over parts
	like so:
	
	0-100, 101-200, 201-300           <-- my image
	^1/3	^2/3	^3/3
		  |viewable|
	*/
	background-position: -100px 0;
	text-decoration:none;
}

/* for whatever reason, most browsers sometimes do not use active, or if they do, it's too late to see it.
Almost all of the other browsers support focus, except for Opera and Google Chrome (that I know of so far)
*/
#butt_menu a.button:active,
#butt_menu a.button:focus {
	background-position: -200px 0;
	outline: none; 
}

.sand, .sand td, .sand  th
{
	background-image:url('cross-bk3.gif');
	vertical-align:top;
}

/* To emulate hover tooltips like of the sites with flyout definitions on key words in the text */
a.tooltip span {
	display:none;
	padding:2px;
	margin:4px;
	width:auto;
	font-weight: normal;
	text-decoration:underline;
	color:#000;
}

a.tooltip:hover span {
	display:inline;
	position:absolute;
	background:#ffffff;
	border:1px dashed;
	text-decoration:none;
}