.offscreen{
	position:absolute;
	left:-10000px;
}

html,body{
	margin:0;
	font-size:100%;	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

body
{
background-color: #314d6b;
color: #d0d0d0;

	}




div
{	
/*
border:thin black solid; 



*/


/*position:static;  seems better than relative - menu now appears over all div borders and contents */
}



.CurvedCornersStandard{
	-moz-border-radius:12px;	/* moz curve */
	-webkit-border-radius: 12px;
}

.picturePanel{
	border:1px solid black;
}

.sf_searchBox
{
	float:right;
	}
.sf_searchBox label	
{
	margin:0 5px;
	}	
.sf_searchBox .sf_searchSubmit	
{
	margin-left:5px;
	}

/*
fonts


Taking into account several font surveys on the Internet, the following fonts consistently make the list of the top 10 "safest" fonts to use:

   1. Verdana
   2. Arial
   3. Arial Black
   4. Comic Sans MS
   5. Courier New
   6. Georgia
   7. Times New Roman
   8. Trebuchet MS
   9. Century Gothic
  10. Impact 
  
  Apparently Safe List:
  http://www.balkhis.com/web-designs-resources/browser-safe-fonts-for-all-operating-system/
  
  Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS, cursive
Courier New, Courier New, Courier, monospace
Georgia, Georgia, serif
Impact, Impact, Charcoal, sans-serif
Lucida Console, Monaco, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua, Palatino, serif
Tahoma, Geneva, sans-serif
Times New Roman, Times, serif
Trebuchet MS, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol, Symbol)
Webdings, Webdings (Webdings, Webdings)
Wingdings, Zapf Dingbats (Wingdings, Zapf Dingbats)
MS Sans Serif, Geneva, sans-serif
MS Serif, New York, serif
  
  
  */

  /******* Fonts in use *********

FONTS:
General Page Text:  						Verdana, Arial, Helvetica, sans-serif;	
Headers:										"Times New Roman", Georgia, Times, Serif;
Masthead/Spotlights/Promotional:		Calibri, Arial, Helvetica, sans-serif;

Need al css for Mac to ensure fonts look good
********/
  
  
a:link,
a:visited {
	color: #d0d0d0;
	text-decoration:none;
}
a:focus,
a:active,
a:hover{
/*	color: #00ae01;*/
color: #9eda29;
text-decoration:underline;
}  



h1{

color: #9eda29;
/*
color: #9eda29;
*/
/*
color:white;*/

font: normal bold 1.8em/1em "Times New Roman", Georgia, Times, Serif;
 

/*
border-bottom: dotted #e87418 thin;
*/


 

margin-top:0em;
padding-top:0em;

margin-bottom:0.5em;
padding-bottom:0.5em;

text-align:left;

}
h2 {
color: #68aafb;
font-size:1.5em;

font-weight: 300;
 
padding: 0.2em 0;
margin: 0.2em 0;

margin-bottom:0;
padding-bottom: 0;

	/* font-family: Georgia; nice , a bit like time new roman */
	font-family: "Times New Roman", Georgia, Times, Serif;
	text-align:left;
}
p{
 margin-top:0.7em;
}
h3 {
color: #9eda29;
font-size:1.6em;
	font-family: "Times New Roman", Georgia, Times, Serif;
font-weight: normal;
letter-spacing: 0.02em;
padding: 0.2em 0;
margin: 0.2em 0;
 text-align:left;
}

h4 {
color: #e87418;
/*
color: #9eda29;
*/
font-size:1.2em;
	font-family: Calibri, Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 0.02em;
padding: 0.2em 0;
margin: 0.2em 0;
margin-bottom:0;
padding-bottom:0;
text-align:left;
}







/******** Template *****/






	
	
#containerOuter{	/* all except outer cols*/
	position:relative !Important;	/* Being relative means that the masthead is positioned relative to this div. I.E. top0px: isthe top of this div */ 
	
		
		background: url(/assets/images/topRow_hubble.jpg) no-repeat center top;
	/*

	background: url(/assets/images/topRow_a_second_look.jpg) no-repeat center top;
	*/
	/*	background: url(/assets/images/topRow_hs-2003-28-a.jpg) no-repeat center top;
	
	background: url(/assets/images/topRow_hubble_main_mirror.jpg) no-repeat center top;	
		
background: url(/assets/images/topRow_outwiththeold.jpg) no-repeat center top;

	background: url(/assets/images/topRow_hubble_main_mirror.jpg) no-repeat center top;
	*/	/**/
	margin:auto; 
	width:900px;	
	
	}



#topSpacer
{
	height:345px;
	width:100%;
	

	background-position: 72px 15px;
	background-repeat: no-repeat;
	background-image: url(/assets/images/i_do_it_logo.png) !important;
	background-image: url(/assets/images/i_do_it_logo.gif);					/* ie6 png fix */	
	
	
	}


	
#contentArea
{
	/*border:1px solid green;*/

	}

#topNav{
	Position:absolute;
	top:308px;
	left:88px;
	/*border:1px solid green;*/
}

	
	
	

#contentArea{	
	position:relative;
}

#contentArea .leftColContent{
	 
	
	position:relative;
	
	/*can't use small side image as it repeats along all y-axis and goes up too high 
		background: transparent url(/assets/images/leftWhiteLine.jpg);  
	
	
	background-repeat:repeat-y;
	background-position: 69px 230px;*/
	

	
	background: transparent url(/assets/images/leftWhiteLineLong.gif); 	
	background-position: 69px 210px;  
	background-repeat:no-repeat;
	
	

}
#contentArea .leftColContent .rightColContent
{
	position:relative;
	/*border:1px solid green;*/
	background: transparent url(/assets/images/rightWhiteLineLong.gif) repeat-y right; 
	background-position: 810px 210px;
	background-repeat:no-repeat;
}
#contentArea .leftColContent .rightColContent .divContent   /*middle pic  if you want */
{
	
position:relative;			
	padding:1px 100px;
	min-height:250px;
	
		font-size:0.8em;	
	
	/* col divider */
	/*background: transparent url(/assets/images/dividerMid.png) no-repeat 480px top; */
	
}

#contentArea .leftColContent .rightColContent .divContent .dividerTop
{
position:absolute;;
top:-6px;
left:480px;

	width:6px;
	height:7px;/*
background: transparent url(/assets/images/dividerTop.png) no-repeat left top;  
*/
/*border:1px solid green;*/
}

#contentArea .bottom   /*middle pic  if you want */
{		
	position:relative;
	height:34px;						/* height of top corners */
	margin:0px 0px;						/* width of top corner images */
	background: transparent url(/assets/images/bottomWhiteLine.gif); 
	background-repeat: no-repeat;
	background-position: 69px 0px;
}


#leftContent{
	position: relative;
	
	text-align:justify;
	
	/*border:1px solid red;
	*/
	
	/*
	
	border-right: 2px double white;
	
	*/
/*	padding-right:15px;			 spspace between 2 cols when using divider*/
		
	float:left;
	width:400px;
}
.rightContentCol{
	position: relative;
	
	/*border:1px solid green;
	
 */
	
	
	
/*	padding-left:20px;*/
	
	float:right;
	width:280px;
}














#footer {


	padding-left:90px;
	padding-right:90px;
	 
	
	text-align:right;
	font-size:0.7em;
	/*letter-spacing:0.1em;*/
	font-weight:bold;
	/*color: #282828;*/
	
	 
padding-top:2em;
	 
	
	 

}

#footer .copyright{
	display: inline;
	float:left;
	margin:0;
	padding:0;
}

#footer a{
	text-decoration:none;
}


	
	
	
	
	
	
	
	




.floatHelper{
	clear:both; 	/*this makes the outer container expaned to hold the floating content divs*/
	
	height:0px;	
	padding:0px;
	margin:0px;	
	line-height:0px; /* needed for IE6 */
	
/*	border:1px solid red;*/
	
}




/* how to set style on all anchors that have title attribute 
 a[title] { color : #f00; }
*/
/****************** Menu Layout - Size and Border are on the list Item rather than the anchor. ***********************************/










/********************* Extras **********************/
a.noDecoration{
text-decoration:none;		
}

.largeText{
	font-size:120%;
}







/* Addition for SiteFinity. Fixes editor incompatibility with my image page background. */
/*
.sf_wrapper 
{
	z-index:2 !important;	
	}
	
	
	
	*/








/* menu */
.IdoITTopNavRadMenu a.rmLink{
	cursor:pointer !important;	
}


.RadMenu_Black .rmLink.selectedItem
{
	color: #9eda29;
	background-position: 0pt -72px  !important;
	
}



/* template image text */ 
#templateImageInfo
{
	position:absolute;
	top:275px;
	right:100px;
	background-color:black;	
	font-size:0.8em; 
	padding:1px 8px;
	padding-bottom:3px;
	font-family: Calibri, Arial;
	
	-moz-border-radius:8px;	/* moz curve */
	-webkit-border-radius: 8px;


}


#templateImageInfo a{
	text-decoration:none;

}

#templateImageInfo a:link,
#templateImageInfo a:visited{
	color: #9eda29;
}
	
#templateImageInfo a:hover{
	color: #e87418;
}