/* CSS Document */
/*Here are some basic rules to remember when doing the stylesheet:
1) When defining the margin or padding, you can list each side out as margin-top, right, left, or bottom and padding-top, right, left, or bottom. The other way to list it is simpley put margin: top right bottom left or padding: top right bottom left. Remember that if you list one side as pixels or percentage you should list all sides in the same way.
2) By listing the font-size as pixels then it won't be changeable by the individual user.
3) The lower the definition is on the stylesheet the more importance it is given. This is particularly important with subtag elements that change the same tag. This happens with the anchor tag with link, visited, hover and active. The most important thing is that the hover tag is listed below the visited tag, otherwise the hover element may not work correctly in all browsers.
4) http://www.meyerweb.com/eric/css/references/index.html, this is a good location to find a reference list for both CSS1 and CSS2.
5) All colors need to be listed using hexidecimal numbers for the colors. 
6) If you want to make a section to describe multiple tags, you need to put a comma inbetween them. For example: ul, dl, ol, then place the brackets and put the description in there.
7) If you want to describe tags within tags, such as anchor tags within paragraphs, then you list them in order for outside in. For example: p a { insert descriptors here}.*/
/* Tag Attributes (define the tags in the documents)*/
/*The body tag will define everything basically shown on the page, this defines the font used on every page, the background color, and by putting the center for the text-align, makes all of the content centered*/
body{
	font-family:Helvetica, Verdana, Arial, sans-serif;
	background: #939c97;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
/*By defining the font-size in pixels the individual cannot change the size through their browser*/
/*Define the paragraph elements*/
p {
	font-size: 13px;
	line-height: 14px;
}

ul li {
	font-size: 13px;
	line-height: 14px;
}


td {
	font-size: 13px;
	line-height: 16px;
}

th {
	font-size: 13px;
	line-height: 16px;
}

/*Define the header1 elements*/
h1 {
	font-size: 18px;
	font-weight: bold;/*Also can be number 0-900, increments of 100*/
	color: #23784a;
	border-bottom: 3px solid #599173;
}

/*Define the header2 elements*/
h2 {
	text-align: left;
	color: #599173;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 3px solid #23784a;
	padding-top: 15px;
}
/*Define teh header3 elements*/
h3 {
	font-weight: bold;
	font-size: 14px;
	padding-top:5px;
	padding-bottom:0px;
	margin-bottom:-5px;
	color: #599173;
}

#rightCol h3 {
	font-weight: bold;
	font-size: 14px;
	padding-top:5px;
	padding-bottom:0px;
	margin-bottom:-5px;
	color: #fff;
}
/*Define teh header4 elements*/
h4 {
	font-weight: bold;
	font-size: 12px;
	padding-top:5px;
	color: #599173;
}
/*define anchor tags*/
a:link{
	color: #199553;
	text-decoration: none;
}
/*Define anchor tags during their visited state, this is after someone has clicked the link*/
a:visited{
	color: #199553;
	text-decoration: none;
}
/*define anchor tags during the hover state, this is when someone rolls over the link*/
a:hover {
	color:#23784a;
	text-decoration:underline;
}
/*define anchor tags during the active state, this is as someone clicks on the link*/
a:active{
	color: #000000;
	text-decoration: none;
}
/*define the ordered, unordered and definition lists tags*/
ol, ul, dl {
	font-size: 12px;
	line-height: 16px;
}

/*Nested Tag Attributes when you  have a link within a paragraph for example*/
/*defines the image within an anchor tag*/
a img{
	border: none;
}
/*this is the anchor within a pargraph element*/
p a:link{
	text-decoration: none;
}


/*Classes (can appear multiple times on a html page)*/
/*Any main navigation that is not the main 5 navigation*/
/*These override the anchor tags listed above, and define the link, visited, and hover state*/
.right{
	float: right;
}
/*This is for an image that is nested in a paragraph floating to the right to give a padding around it for the text to wrap around and makes it easier to read*/
img.right{
padding-left: 5px;
padding-bottom: 50px;
}

.left{
	float: left;
}
/*This is for the position of the searcch bar that appears in the header*/
.search{
	margin-left: 635px;
}

/*This is for the UDM Menu*/
.udm{
	margin-bottom: 10px;
}

.clear{
	float: clear;
}

/*ID's (only appear once on a page)*/
/*Top of Page*/
/*Container div holds everything together*/
#container{
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	width: 1000px;
	background: url(/images/header.jpg) no-repeat;
}
/*This is for the navigataion, the maintext and the rightCol*/
#content{
	background: url(/images/contentbg.gif) repeat-y;
	width: 1000px;
}

/*This defines the area where all of the information goes*/
#mainText{
	 width: 800px;
	 margin-left: 173px;
	 padding: 2px;
	 padding-right: 27px;
	 z-index: 0;
}


#mainText img{
	padding: 5px;
}

/*Defines an area over the title to link to the home*/
a#title{
	position: absolute;
	text-decoration: none;
	text-align: left;
	top:15px;
	right:108px;
	width: 900px;
	height: 30px;
}

a#title span {
	visibility: hidden;
}

/*This defines the sitemap list items so that they are larger and more spread out making it easier to read*/
#sitemap li{
	font-weight: bold;
	margin-top: 5px;
}

/*This defines the header elements including the home, contact, sitemap navigation as well as the search bar*/
#header{
	text-align: left;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: bold;
	height: 103px;
	padding-top: 50px;
	padding-left: 40px;
}

#header a{
	color:#FFFFFF;
	text-decoration: none;
	margin-right: 5px;
}

#header a:hover{
	text-decoration: underline;
}

/*This defines the right column of the page it is where the flash piece appears as well as images or any text elements that appear on that far right hand side with a green backdground*/
#rightCol{
	float:right;
	width: 330px;
	padding-left:  10px;
	padding-bottom: 10px;
	background: #3a9866;
	/*background: #599173;*/
}
/* Fix IE. Hide from IE Mac \*/
html>body #rightCol{
	width: 330px;
}
#rightColwhite{
	float:right;
	width: 330px;
	padding-left:  10px;
	padding-bottom: 10px;
	
	/*background: #599173;*/
}

/*End*/

#rightCol a{
	color: #ffffff;
}

#rightCol a:hover{
	color: #23784a;
}

/*Left Hand Column and a few items for the dropdown menu that cannot be defined in the udm-custom.js*/
#leftCol{
	float:left;
	background: url(/images/contentbg.gif);
	text-align: left;
	/*margin-right: 10px;*/
	padding-top: 10px;
	font-weight: normal;
	
}


#leftCol ul li{
	margin-top: 20px;
}

#leftCol ul.subnav li{
	margin-top: 0px;
}

#leftCol ul li a:hover{
	text-decoration: underline;
}

/*Defines the elements for the footer of the page*/
#footer{
	text-align: center;
	width: 480px;
	margin-top: 60px;
	margin-bottom: 20px;
	margin-left: 173px;
}

#footer p{
	font-size: 10px;
	height: 50px;
}

/*Defines the position of the logo at the bottom of the page*/
#logo{
	position: absolute;
	float: right;
	width: 300px;
	right: 20px;
	bottom: 0px;
}

#quicklinks{
	position: absolute;
	left: 10px;
	top: 460px;
}

/* Fix IE. Hide from IE Mac \*/
html>body #quicklinks{
	position: absolute;
	left: 10px;
	top: 460px;
}
/*End*/

.white{
	color:white;
}

.yellow{
	color:yellow;
}

.rightnav {
	color:#FFF;
	font-size: 16pt;
}


.bigger {
	font-size: 14px;
	line-height: 16px;
}

.small {
	font-size: 9px;
	
}

.highlight {
	width: 300px;
	
}

table.grey td {
		border: .5px dashed #CCC;
		
      }
      
.lego {
	font-family:comic sans ms;
	font-size: 20px;
	font-style: bold italic;
	color: red;
	margin-top:0;
}

.legocaptions {
	font-family:comic sans ms;
	font-size: 18px;
	font-style: bold italic;
	color: red;
	margin-top:0;
	line-height:120%
}

.legoblue {
	font-family:comic sans ms;
	font-size: 20px;
	font-style: bold italic;
	color: blue;
	margin-top:0;
}

.legoyellow {
	font-family:comic sans ms;
	font-size: 20px;
	font-style: bold italic;
	color: yellow;
	margin-top:0;
}

.box1 {
	background: url(/images/yellowbg.jpg) repeat-x top;
	}
	
.box2 {
	background: url(/images/greenbg.jpg) repeat-x top;
	
	}
	
.box3 {
	background: url(/images/redbg.jpg) repeat-x top;
	
	}
	
.box4 {
	background: url(/images/bluebg.jpg) repeat-x top;

	}
	
.bluehighlight {
	font-family:comic sans ms;
	font-size: 14px;
	font-style: bold italic;
	color: blue;
	
}

.black {
	
	color: black;
	
}

.enlarge {width: 250px;}
.enlarge img {display: block;} 

.imgA1 { position:absolute; top: 25px; left: 25px; z-index: 1; }
.imgB1 { position:absolute; top: 75px; left: 80px; z-index: 3; } 

span#float{display:inline-table;float:left;width:152px;height:218px;font:0px/0px serif;background:url(/images/enlarge.png)}
head:first-child+body span#float{width:auto;height:auto}
span#float:before{content:url(/images/enlarge.png)}

#pipe a {
	color:#000000;
	font-size:9pt;
	
#pipe .pipesDescription {
	color:#111111;
	font-size:9pt;
}