/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*  These are rules I am playing with or testing and will be moved to a section when I decide they are permanent */
/*                                                                                                               */                                                                                                              */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */

.asp-menu-control
{}







/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*              This section is for the major containg divs and associated background images                     */
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */


/*Rules for the background image for the site.*/
				/*NOTE*/
				/*
					I wanted to have the content expand sideways as the user made the window narrower or wider.
					I also liked the pages where the content stays in the center of the window when contracted.
					I tried to combine these and after many hours the light came on and it dawned on me...
					these are two completely opposite behaviors and they can not be mixed.
					To have expanding content width will have to change.
					To have the content stay centered in the window and have the margins grow the width needs to stay the same.
					These ideas don't mix.
					I decided I like the look of the fixed width and centered on the page best.
				*/
				/*END NOTE*/
				
/*This sits above the div_background-grafic_mid and will hold the grafic that completes the top of the image for the content area grafic*/								
#div_background-grafic_top 
	{
		width:1062px; /*This needs to be the same as the div_background-grafic_mid*/
		height:55px;  /*This is the height of the image that it uses*/
		background-image:url('images/skin_brushed-metal/BG-Skin-BrushedMetal-PlateTop.gif');
		margin:0 auto; /*Set same as div_background-grafic_mid so they line up the same.*/	
		text-align: center;  /*  This was added when the addthis button was inserted so the button was in the center.*/
	}
		
	
/*Contains the image for the content section back ground*/
#div_background-grafic_mid 
	{
		width:1062px;  /* 1062px is the width of my background images, which allows for 950px content area.*/
		margin:0 auto; /* Top and bottom margins set to 0px then right and left margins set to auto allow content to center.*/
		background-image:url('images/skin_brushed-metal/BG-Skin-BrushedMetal-PlateMid.gif');		
		background-repeat:repeat-y;
	}


				/*  This div is nested inside the div_background-graffic_mid and contains all the page content,*/ 
				/*  Excpet for the page header which sits above the baground graffics*/
				/*  This sets the maximum width and margins for everything inside the content area in one shot.*/ 
				#div_container-contnet 
					{
						width:950px; /*This is the width I have chosen as my content area.  It lines up with images for backgrounds etc.  It should not be changed*/
						margin-left:56px; /*this keeps the content from interfering with the border area of the grafics*/
						margin-top:0px;   /*This needed to be added to get rid of the black line at the top.*/
					}


/*This sits below the div_background-grafic_mid and will hold the grafic that completes the bottom of the image for the content area grafic*/
#div_background-grafic_bot 
	{
		width:1062px; /*This needs to be the same as the div_background-grafic_mid*/
		height:157px;  /*This is the height of the image that it uses*/
		margin:0 auto; /*Set same as div_background-grafic_mid so they line up the same.*/
		background-image:url('images/skin_brushed-metal/BG-Skin-BrushedMetal-PlateBot.gif');
	}	







/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                                This section is for the header section of the page                             */
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */


#img_bg_header_logo /*the image used for the logo is 750px wide*/
	{
		margin-right:0px;	/*the content area is limited to 950px wide.  The logo and 2 links (contact and home) total widths is 900px leaving 50px of space*/
		margin-left:0px;	/*rather than set margins on the links it is easier to do it once on the logo*/
	}	
	

#img_bg_header_link-home /*the image used for the home link is 75px wide*/
	{
		margin:0px;
		border:none;
	}	

	
#img_bg_header_link-contact /*the image used for the contact link is 75px wide*/

	{
		margin:0px;
		border:none;
	}	
	

/*  This banner div contains things that are at the top of the page in the banner area.    */
/*  Things like the site logo, navigaqtion or advertising (if I ever add advertising) etc. */
/*  This div sits above the background image divs for the content area.*/
#div_banner
	{
	width: 950px;
	text-align: center; /*aligned to center screen at all times.*/;
	margin: 5px auto 10px auto;
}

		/*  The banner-logo div is a sub div inside the banner div.   */
		/*  It holds the logo portion of the banner.                  */
			#div_banner-logo
				{
	margin-top: 0px;
}
		
		/*  The banner-nav div is a sub div inside the banner div.   */
		/*  It holds the navigation portion of the banner.           */
			#div_banner-navigation
				{
					background-image:url('images/skin_brushed-metal/Nav-Bar.png');
					width:942px;
					height:52px;
				}
			
		/*  This is for the div that has the content for within the navigation banner*/		
			#div_banner-navigation-content
				{
	 				position:relative;
					top:11px;
				}

/* The secondary banner sits below the main banner to contain usefull widgets. */ 
/* The same style rules are applied to keep it consistent. */	
#div_banner-sec 
	{
	text-align: center; /*The header and nav divs are text aligned center so these are at ceter screen all the time.*/;
	margin: 0px;
}









/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                                This section is for general - global CSS rules                                 */
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */


/*This div will only show for IE6 users. */      
/*A bit of Java Code at the top of the page will turn the display property to Block if IE6 is detected.*/
/*This code is kept for reference but is no longer in use*/
#div_ie6note 
	{
	 	display:none;
	 	background-color:#6699FF;
	 	padding:20px;
	 	margin:20px 20px 100px 20px;
	}

/*This code is kept for reference but is no longer in use*/
/*This code was used in conjunction with the above div_ie6note rule */	
#list_ie6_inst
	{
		display:none;
	}
	

body{
	margin: 5px;
	background: #000000;
	background-attachment: scroll;
	background-repeat: repeat;
}



#div_google
	{
		text-align:center;
		background-color:white;
	}
	
	
#div_content-footer
	{
}


/*  This dive is used to contain the navigation located in the content area of the page. */	
/*  This will eventually be eliminated by moving navigation to the top above the background graphic divs for the content.*/
#div_contnet-nav
	{
		text-align:center; /*The header and nav divs are text aligned center so these are at center screen all the time.*/
		margin:0 auto;

	}
	
	

	
	
a img {border: none; } /*Makes all images that are used as links to not show a border*/

/*  These are rules for links in the content area navigation area.  */
/*  These will be eliminated as well when the navigation is moved up top.*/
.img_nav-link
	{
		border:none;
		margin:8px 20px
	}
	
.img_bordered
	{
		border:25px black solid;
	}

.img_bordered_float-right
	{
		border:20px black solid;
		float:right;
	}
	
	.img_bordered_float-left
	{
		border:20px black solid;
		float:left;
	}
	
	
							     /*The following rules are to set up images with thier own captions and be able to float them right or left.*/
							     /*Other methods have proven problematic, this works great!*/
							     /*When adding images to a page of text simlpy place the img tag inside a div tag with two classes assigned to it.*/
							     /*A class of picture to give background and border styles to the div and a class of eitehr right or left to float it in a direction.*/
							     /*After adding an image on the page EW will add a width style to the img tag.  Use the same width for the div, so the color behind the caption is the correct width*/
							     /*Below is a sample of how and image would be added.*/
							     /*
							     <div class="picture left" style="width:276px;"> 
							     <img src="picture.gif" width="276" height="120" alt="Alt text goes here." /> 
							     <br />
							     Image Caption goes here. 
							     </div>
							     */
							     	/*This adds background and border etc to the div*/
							     	/*A div can not be placed inside a paragraph.*/
							     	/*In some cases I will want to have the pic in a paragraph and have text wrap around it.*/
							     	/*In this case use a span rather than a div.*/
							    	.picture { 
							   		background-color: #F9F9F9; 
									border: 1px solid #CCCCCC; 
									padding: 3px;
									font: 11px/1.4em Arial, sans-serif; 
									} 
									
									/*This applies styles to the img tags that reside in the div with a class of picture.*/
									.picture img { 
									border: 1px solid #CCCCCC; 
									vertical-align:middle; 
									margin-bottom: 3px; 
									} 
									
									.right { 
									margin: 0.5em 0pt 0.5em 0.8em; 
									float:right; 
									} 
									
									.left { 
									margin: 0.5em 0.8em 0.5em 0; 
									float:left; 
									}





/*  This rule was to give the top hr tag a margin of 0 px.  the default margin was causing a black space that broke up my background graffics*/
/*  the space happens in IE8, fire fox and some phone web browsers.*/
#hr_top
{ margin:0px;}


/*The last paragraph in the footer was causeing a space in the iphone.  So I set the the bottom margin to 0px. */
#p_last-in-footer  
	{
		margin-bottom:0px;
}

/*The footer at the bottom of the page was getting mixed up in the floats I set in pages above it.*/
/*Clearing the float fromt hta page is not possible since the hr is part of the master.*/
#hr_footer
{
	clear:both
}





/*Top header for every page, usually an h1*/
.h_general_main_title
	{
	color: #00286E;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
}


.img_link-borderless
	{
	border:none;
	}


.p_general 
	{
	margin-left: 40px;	
	}
	
.p_general-indent
	{
	margin-left: 80px;	
	}






/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                             This section is for rules on the Home Page default.aspx                           */
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */


 #img_home-page_medallion
  {
  	float:right;
  	margin-right:215px;
  	margin-top:10px;
  }











	
	
	
	
	

	

	
	
	



	
	


	
	
	







		
/*These rules are for the layout of the general table used on the site*/
/*for reference see the table used in the canyoneering rating system of the main page for canyoneering*/
/* ******************************************************************************************* */
/* ******************************************************************************************* */
/*Using the table tools from expression web makes manipulating the tables fairly easy.*/
/*Using the tools apply styles and add that to the style sheet for that page.*/
/*Trying to move those styles to the external style sheet prooves madening especialy when tweeking the table.*/
/*The general rules set on this style sheet are the general rules I want followed to make all tables somewhat consistent*/
/*Other modifications to teh tables will be left in the style sheet on that page.*/
/* ******************************************************************************************* */


	.table_general{
	margin-left:40px;
	border:thin black solid;
	border-collapse:collapse; /*The border-spacing property woud be nice but only works on I.E for mac.*/
	}
	
	/*This style will apply to any caption element that falls within a table with the class of table_general*/
	table.table_general caption{
	font-weight:bold;
	}
	
	/*This style will apply to any td element that falls within a table with the class of table_general*/
	table.table_general td{
	padding:5px;
	border:thin black solid;
	}
		
	.img_table_full{
		margin-left:65px;  /*when a picture is used for a chart and is 880px wide (largest I want),*/
						       /*this will indent it a little.  set its class to this rule.*/
						       /*Remember the total page width is only 950 px.  Indent plus image width should not exceeed this*/
}
	
			
/*If the table requires only one header within it the color rules for Color Sub Section A will be applied */
/*by assigning the appropriate class to the table rows.  */
/*If more than one sectiion is required with a header, the second set will use the color rules for Color Sub Section B.*/
/*The rules will be applied by assigning the appropriate calss to the table rows*/
/*If multiple sections are needed the color rules for sub section A and subsection B will be alternated.*/
/*See the table for Canyone Rating System for an example.*/

/*     If the table has permanent information in it and will not be changed occasionally.....*/
/*       and if the style of the table will not shange frequently............................*/
/*       I have decided to do my tables using M.S. Excel then convert them to a picture.     */
/*       The picture can then be placed on the page.  This may not work if the data or format*/
/*       needs to be frequently changed.                                                     */
/*     I came to this descision after finding it a nightmare to play with styles and get the */
/*       table looking the wya I want.  EW does some unpridictable things when playing with  */
/*       merging and spliting cells among other stuff.  undoing the mistakes is frustrating. */
/*     Some styles for tables like border-spacing only wrk in some versions of some browsers.*/
/*       Using Excel then converting to a picture ensures the table looks the sae every time.*/


	/*Color sub section A*/
	/*These color rules can be placed in tr or td elements as needed*/
	.td_general_color-a_head{
	background-color:#5684B1;
	text-align:center;
	font-weight:bold;
	}
	
	.td_general_color-a{
	background-color:#99ADC1;
	}
	
	/*Color sub section B*/
	/*These color rules can be placed in tr or td elements as needed*/
		.td_general_color-b_head{
	background-color:#408B8B;
	text-align:center;
	font-weight:bold;
	border:13px black solid;
	}
	
	.td_general_color-b{
	background-color:#99C1C1;
	}

	





	
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                           These rules are for the main (top) page of an activity                              */	
/*       i.e. the main canyoneering page or the main back pack page or the main random thoughts page etc.        */
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */

	
/*These is for the div tags that enclose icons there is a top layer div and a bottom layer div */
/*The top layer will contain the icon and text to go with it, while the bottom layer will be nested outsie the top layer and serve as a background for the top layer*/
/*Both layers need to be floated so they will resize and wrap around what is in them.*/
	.div_activity-entry_icon_top-layer{
		width:275px; /*This sets the desired width so they all look the same.*/
		float:left;
		background-color:#85AECF;
		border:2px black solid;		
		padding:5px;
		margin:0px;
		
		position:relative; /*This sets the poition to relative then moves the top layer a few pixels up and left to expose a little of the bottom layer for a shadow effect.*/
		top:-3px;
		left:-3px;
		
		text-align:center; /*This gets the images and text inside the divs to center align*/
	}
	
	.div_activity-entry_icon_bot-layer{
		float:left;
		background-color:#4E669E;
		clear:both; /*this clears the float of the div before it so the divs will not try to line up horizontaly and stack vert instead.*/
		margin:20px 75px;  /*first number is top and bottom margins and second nuber is right left margins.*/
	}
	
	
	
	.a_no-show{
		
	}
	
	



/*This sets properties for images that designate sections on the top entry pages for activities.*/	
	.img_page-intro-section-pic{
		float:left;
		margin-right:15px;
	}



/*The h tag (usually an h2) for the major sections of the main page for an activity.*/
	.h_activity-entry_major-section{
	margin-top: 40px;
	margin-bottom: 0px;
	background-color: #999999;
	padding-bottom: 3px;
	padding-left: 3px;
}

/*The top most h tag (usually an h2) for the major sections of the main page for an activity.*/

	.h_activity-entry_major-section_top-one{
		margin-left:180px; /*This moves the header over so it starts over the text and not in the picture since the image is floated */
		margin-top:5px;/*The top most h tag needed to be the same as the rest except with a top margin of 0px to keep things compressed higher on the page.*/
		margin-bottom:0px;
		background-color:#999999;
		padding-bottom:3px;
		padding-left:3px;	
	}





	
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                           These styles are for trip report listing pages                                      */	
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
	
	.div_tr-listing {
		padding: 7px;
		margin:10px;
		margin-left: 40px;
		border: 3px blue solid;
	}
	
	.h_tr-listing {
		margin:1px
	}
	
	.p_tr-listing {
		margin-left: 40px;
	}
	
					/*  These styles are for the regional information sections on teh trip report listing page */
							.div_tr-listing-region_info {
								padding: 7px;
								margin-left: 220px;
								margin-right:30px;
								border:3px black solid;
								background-color:#999999;
							}
							
							.h_tr-listing-region_info{
								margin-bottom:0px;
								margin-top:0px;
							}
							
							.p_tr-listing-region_info {
								margin-top:0px;
								margin-bottom:13px;	
								margin-left: 50px;
								margin-right: 10px;								
							}
							
							.p_tr-listing-region_info2 {
								margin-top:0px;
								margin-bottom:0px;	
								text-align:right;	
							}
							
								
							/*Specifying a class or an id for a tags in the regional area seemed to have intermitent problems in IE8*/
							/*This descendant style seems to work well*/
							/*This rule states that any a tag inside of a div with a class of div_tr-listing-region_info will use these rules*/
							div.div_tr-listing-region_info a {
								font-family:Trebuchet MS;
								    font:small-caption;
								    color:blue;
								    margin:10px;
								    border:2px  solid;
								    border-color:#F1F3F5 #DCE1E7 #DCE1E7 #F1F3F5;
								    background-color:#E2E6EB;
								    padding:1px 6px;
																}




	
	
	.h_tr-list-rating{
		margin-left:400px;
    }
	
		
	.span_tr-list-link	/*On the trip report listing pages there are links to the trip report and pictures for a trip*/
						/*The inline-block property was used so these could work like a block (the br tag sets the text below the pic)*/
						/*But the spas function inline with eachother so they can occupy the same line */
						/*The inline-block property only works for elements that naturaly have an inline property by default.*/
						/*That is why a span was used instead of a div*/
	{
		display:inline-block;
		text-align:center;
		margin-left: 0px;
		margin-right:70px;  /*offsets it from the pic links*/
		
	}
	
	.span_tr-pic-link	
	{
		display:inline-block;
		text-align:center;
		margin-left: 0px; 
		margin-right:15px;  /*spaces the various tr picture links from eachother if there are multiples*/
		
	}
	
	
		
	
	/*The next two classes (span_tr-map-icon  and  span_tr-map-links)  work together in one paragraph*/
	/*These space the map icon span from the map link span by setting inline block for both then setting text align and margins.*/
	
	.span_tr-map-icon	
	{
		display:inline-block;
		text-align:center;
		margin-left: 0px; 
		margin-right:40px;
		
	}
	
	
	.span_tr-map-links
	{
		display:inline-block;
		text-align:left;
		margin-left: 10px;
		vertical-align:top;  /*Gets the text to start from the top of the span rather than align to teh bottom.*/
		
	}





/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                           These styles are for individual trip report pages                                   */	
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */

		
	
	.h_Canyoneer-TR_Cannyon-name-rate-loc{
	text-align:center;
	
	}
	
	
	.div_tr-waypoint{
		padding: 7px;
		margin:12px;
		margin-left: 100px;
		border: 3px blue solid;
	}
	
	
	
	/*The new waypoint display meathod uses these CSS rules.  After all pages are updeated I will delete the rules for (.p_tr-waypoint-1 and .p_tr-waypoint-2) */
	.p_tr-waypoint{
		text-indent:-30px;
		margin:0px;
		margin-left:80px;
		margin-top:4px;
		margin-bottom:12px;
		padding-top:2px;
	}
	
				/*Note that this will not show in the design view of EW but will show when viewed in a browser*/		
	p.p_tr-waypoint:first-line{
		font-weight:bold;
		text-decoration:underline;
	}
	
	
	
	/*This is for the occasionally used indented tr waypoints.  these are used wen dividing sections into groups of way points like to sections of approach waypoints.  */
	/*See Imlay Canyon Trip Report as an example.*/
	.p_tr-waypoint-indent{
		text-indent:-30px;
		margin:0px;
		margin-left:130px;
		margin-top:4px;
		margin-bottom:12px;
		padding-top:2px;
	}
	
					/*Note that this will not show in the design view of EW but will show when viewed in a browser*/		
	p.p_tr-waypoint-indent:first-line{
		font-weight:bold;
		text-decoration:underline;
	}

	/*The new waypoint display meathod uses these CSS rules.  After all pages are updeated I will delete the rules for (.p_tr-waypoint-1 and .p_tr-waypoint-2) */	
	
	


	
	.p_tr-waypoint-1{
		margin:0px;
		padding-bottom:2px;
		font-weight:bold;
	
	}
	
	.p_tr-waypoint-2{
		margin:0px;
		margin-left:80px;
		margin-top:4px;
		margin-bottom:8px;
		padding-top:2px;
	
	}
	
	
	
	/*not sure if this is used will need to look around before deleteing this*/
	.p_tripreport_waypoint {
		padding: 7px;
		margin-left: 100px;
		border: 3px blue solid;
	}

	/*Styling of the paragraphs that contain trip report maps pics and text*/
	.indent_tripreport_map {
		margin-left: 100px;
		margin-bottom:40px;
	}

	/*Styling of the map images on trip report pages.*/
	.img_tr_map {
		border:15px black solid;
	}

	/*Changes the images in the route description portion of the tr pages.*/
	.img_tr_desc { 
		border:15px black solid; 
		  
	}



/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                           This section deals with the Trip Reports Picture Pages                              */	
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */

/* Indents the paragraphs holding TR pics so it is not right on the edge of the page.   */
	p.TRpics {
		margin-left:20px
	}
	
/* Puts borders around pics only in the p tags holding TR pics (class="TRpics").   */
/* this is a descendant tag and will apply to any img tag in the p tag with the class of TRpics */
/* even if that img tag is nested in another tag in the p tag.*/
	p.TRpics img { 
		border:15px black solid; 
		  
	}
		


/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                           This section deals with text inputs used mainly in forms                            */	
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */

	
/*	I want all text areas for input on things like forms to have these rules
	Things that should be given this class are TextBoxes, TesxtAreas etc.
*/ 
	
	/*The background color for some fields will be modified by
		the google toolbar if the tool bar has the autofill option enabled
		There seems to be no easy solution.  Each solution has drawbacks.
		This is something to keep in mind when noting some of the fields
		are colored differntly.  
	*/	
	/*Only fields with names Google recognizes as candidates for autofill will be colored.
		I am avoiding the autofill option by naming fields odd names.  
		Update that was a LOT of trouble and made things incoherent.
		I have had to succumb and just make my field colors
		the same as the google highlighted ones so it is not even noticed.
		So far this is the only thing I have found I do not like what Google has done.
	*/
.TextInput
	{
		background: #FFFF99 
	}
	
	



	
	
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                           This section deals with luke_main page.                                             */	
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */

/* The elements on the luke_main page should only be   */
/* 900 px wide.  									   */
/* The body of all pages has been limited to 950 px.   */
/* 900 px is what I will aim for when setting up the   */
/* luke_main page content.                      	   */
/* Including margins, borders and padding!!            */

/* I will be using floats to get things where I want   */
/* them.  Using floats can make the layout flow        */
/* unpredictable if widths are not set for floated     */
/* objects.  widths will be set to use all horizontal  */
/* space I decide will be available for the object.    */
/* The objects will then stack vertically like block   */
/* objects.                                            */

	/* The div#lukescorner containes what I want to be the top portion of the page */
	/* It contains 3 elements.  h1, AdRotator and a paragraph holding links.       */
	div#lukescorner{
		width:864px; margin:5px; padding:10px; border:3px;
			/*the width, margin, padding and border add to 900px*/	
	}
	
		h1#lukescorner_header{
			float:right;  /*I want the header and the paragraph with links to the Right*/
			width:587px; margin:5px; padding:5px; border:3px;
				/*Since
					The AdRotator is floated left and has an over all width of 251px*/
				/*And
					The div that is containing them allows an internal width of 864px*/
				/*I am left with 
					864px (internal width in div) - 251px (overall width of AdRotator.
					= 613px*/
				/*The overall width of my header must be 613px so there are no 
					flow problems resulting from the floats*/
			
		}
		
		#AdRotator_luke_lukepics {
			float:left;  /*I want the AdRotator to the Left*/
			width:225px; margin:5px; padding:5px; border:3px blue solid;
				/*The width is set to 225 because all my pics will be set to that width*/
				/*the width, margin, padding and border add to 251px*/
			
		}
		
		
		#AdRotator_luke_jokes {
			margin:10px; padding:5px; border:2px blue solid;
				/*The internal width of the div that this adrototor is in (div#lukewhatnew_sidebar)
				is 299 but no wdth for this rotator is set since it is the only item
				in the div and should be allowed to expand to fit the div.
				Allowing the rotator to expand will also help when I decide to 
				resize the containing div.  No resizing of this rotator will be needed.*/
			
		}



		.p_jokes{
		margin-left: 4px; text-align:left;

		}
		
		
		p#lukescorner_linksparagraph{
			float:right;  /*I want the header and the paragraph with links to the Right*/
			width:587px; margin:5px; padding:5px; border:3px;
				/*The width of this paragraph has been set up the same way as the 
					header was and for teh same reasons.*/
				/*I want the headred to sit above this paragraph so I have assigned
					the same width to each so they will act as blocks.*/
				/*Floating them got them right and left as desired but messed
					up the block like flow the elements once had so the widths
					are set to occupy all horzontal space I want then to take up.
					That makes them stack vertically.*/
		}
	
	/*The lukewelcome div contains what I want below the lukescorner div.*/
	div#lukewelcome	{
		width:864px; margin:5px; padding:10px; border:3px;
			/*The width of the welcome div is set to match the lukes_corner div.
					That way they line up properly*/
		}
	
	/*The lukewhatnew div contains what I want for the remainder of the page
		this is the section that will continue to grow as time goes by.*/
	/*The lukewhatnew div contains 2 other dives, the contet of whats new
		and a side bar that I havent figured out what it will be for yet.*/
	div#lukewhatnew{
		width:864px; margin:5px; padding:10px; border:3px;
			/*The width of the lukewhatnew div is set to match the lukes_corner div.
					That way they line up properly*/
	}

				div#lukewhatnew_content{
					width:838px; margin:5px; padding:5px; border:3px #E0E0E0 ridge;
						/*I want the over all width of the lukewhatnew_content div
							to fit inside the lukewhatnew div which has an internal
							width of 864px.  So the width plus borders, padding and 
							margins should add up to this.
							
							The overall width of the lukewhatnew_content div is 538px
							the width of this div and the lukewhatnew_sidebar div 
							need to add up to the internal width of the lukewhatnew div
							which is 864px*/
				}
				
				
				
				div#lukewhatnew_sidebar{
					float:right; /*I want the side bar on the right.
									since it is floated right it will be taken
									out of the normal flow of things and no longer
									act as a block element.  
									The lukewhatnew_content div will now wrap around 
									this section*/
					width:299px; margin:5px; padding:5px; border:3px #E0E0E0 ridge;
						/*The overall width of the lukewhatnew_sidebar div is 350px
							this just seems like a good width to display various content
							while giving enough room for the whats new blog.
							THe total width is width plus borders, margins and padding*/

				}
				
										



/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                           This section deals with contact page.                                               */	
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */

	div#contact_mailform{
		width:864px; margin:5px; padding:10px; border:3px;
			/*The width of the contact_mailform div is set to 900px wide to fill the page.*/
	}
	
	#tbx_LastName{
		width:200px;
	}
	
	
	#tbx_FirstName{
		width:200px;
	}
	
	
	#tbx_EmailAddress{
		width:200px;
	}
	
	
	#tbx_Subject{
		width:200px;
	}
	
	
	#ddl_Topic{
		width:200px;
	}
	
	
	#tbx_MessageSent{
		width:450px; height:125px
	}




	#tbx_EmailMessage{
		width:450px; height:125px
	}






/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
/*                                                                                                               */
/*                           This section deals with the Random Thoughts Pages                                   */	
/*                                                                                                               */
/*  XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  */
	
/*this is the style for the h1 headers at the top of        */
/*the random thoughts page and sub pages		            */
	
/*This is for sub headers of an h4 size on the random toughts page */	
.h_random_listing
	{
	margin-left: 60px;	
	}
	
/*This is for the paragraphs under the sub headers for papers on the random thoughts page*/
.p_random_papers
	{
	padding: 7px;
	margin-left: 100px;
	border: 3px blue solid;
}