/* this is a comment */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #2.2- (Fluid-Fixed)</title>
<style type="text/css">
* { margin: 0; padding: 0; }

body {
		 background: #000000;
		 color: #faebd7;
		 font:  normal 13px Arial, Helvetica, Geneva, "sans serif";
		 padding-right: 20px;
		 padding-left: 20px;
		 }
		 
a:link {color:  #0000FF ;}
a:visited {color:  #CF1337 ;}
a:hover {background-color: #2A8DB8 ;}
a:active {color: #0000FF;}

/*a:link {color: #33ccff;}
a:visited {color: #bdb76b;}
a:hover {color: #ffffff;}
a:active {color: #33ccff;}*/

/*  set fonts using ems
The answer is to specify type in ems. 
If you’re unfamiliar with the unit, an em is roughly the width of a lowercase em in a font, and using a browser’s default internal stylesheet, 
an em is roughly equivalent to 16 pixels. Set the font size attribute in the body tag to 62.5 per cent like this:
body { font-size: 62.5% }
This makes one em roughly ten pixels (16 x 62.5% = 10). Now you can equate pixel sizes to ems. For example, type that is set in 12 pixels 
could be expressed as 1.2em; 9 pixels becomes 0.9em and so on. What’s more, both the designer and user are happy.
*/

/* ======= start maxdesigns example http://css.maxdesign.com.au/floatutorial/tutorial0809.htm ========*/

#container
{
width: 100%;
margin: 10px auto;
background-color: #fff;
color: #333;
/*border: 1px solid gray;*/
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #217091;
border-bottom: 1px solid gray;
}

#top h1
{
padding: .2em;
margin: 0;
}
/* 
#leftnav
{
float: left;
width: 67%;
margin: 0;
padding: 1em;
}
*/

#mainpageheadings
{
width: 90%;
padding: .3em;
/*text-transform:uppercase; */
/*letter-spacing:.2em; */
font: normal bold 200%;
font-size:  25px;
background-color: #CCCCCC; 
/*background-color: #217091; */
border-bottom: 1px solid gray;
}

#mainpagerightheadings
{
width: 160px;
padding: .3em;
/*text-transform:uppercase; */
/*letter-spacing:.2em; */
font-weight: bold;
font-size:  14px;
background-color: #d3d3d3; 
text-align:center;
margin-bottom: 0px;
/*background-color: #217091; */
border-top: 2px dotted #069;
border-bottom: 2px dotted #069;
}

#contentcolumn {
		float:left;
		width:75%;
		/*margin-right: 250px; just took out */
		background:#fff;
		border-right:1px solid gray;
		/*border-bottom:2px solid #000; */
		padding: 0 10px 15px 15px;
		
		/*word-wrap: break-word;  fix for long text breaking sidebar float in IE */
    /*overflow: hidden;     fix for long non-text content breaking IE sidebar float */
		/*padding: 1em;*/
		/*margin:0px;*/
		/*clear: both;*/
		}

	#rightcolumn {
		/*float: right; */
		position:absolute;
		right: 0;
		width: 165px;
		/*height: 100%; */
		left: 78%;
		background:#fff;
		border:1px inset solid blue;
		/*border-bottom:2px solid #000; */
		margin-right:0px;
		margin-top:0;
		padding: 5px 5px;
		margin-right: 10px;
		
		word-wrap: break-word;  fix for long text breaking sidebar float in IE 
    /*overflow: hidden;     fix for long non-text content breaking IE sidebar float */
		/*padding: 1em;*/
		/*max-width: 36em; */
		}

#content

{
float: left;
width: 70%
/*margin-left: 67%;*/
border-left: 1px solid gray;
padding: 1em;
/*max-width: 50em;*/
/*added below*/
right:0;
}

#rightnav

{
float: right;
/*position: relative;*/
margin-right: 5px;
border-right: 1px solid gray;
padding: 1em;
width: 8em;
right:0;
}


#footer
{
/*clear both pushes down all the content*/
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #fff;
border-top: 1px solid gray;
}

#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
#rightnav h2 { margin: 0 0 .5em 0; }

/* ======= end maxdesigns example ======= */



#leftPhoto {
position: absolute;
left: 0;
/*float: left:*/
width: 250px;
margin-left: 150px;
/*margin-top: 0;*/
margin-right: 1.75em;
border-right: 5px white;
padding-top: 1em;
/*padding-bottom: 20px;*/
}

#rightInfo {
position: absolute;
padding-top: 0em;
margin: 0 2em 0 200px;
/*padding-left: 2em;*/
/*margin-top: 0;*/
}



/*
.both {
position: relative;
		top: 45em;
    border-style: solid;
		border-width: thin;
		border-color: gray;
		border-style: groove;
		width=100%;
		margin-bottom: 25px;
		  padding: 10px;
  }
	/*
	/*
.lleft{
/*		float: left;*/
/*		position: absolute;
		left:1%;
		width: 370px;
		top: 15em;
    border-style: solid;
    border-color:red;
 }
.rright{
		position: absolute;
    left: 400px; 
		top: 15em;
		text-align: justify;
    border-style: solid;
    padding: 10px;
		border-color:green;
  }
 */ 

 		
/*
.both {
    border-style: none;
		width=100%;
		margin-bottom: 25px;
  }
	
.right{
		float: right; 
    left: 0px;
    border-style: none;
    padding: 10px;
		border-color:green;
  }
  
.left{
		float: left;
    width: 250px;
    border-style: none;
    border-color:red;
 }
*/

/*
p{
		text-align: justify;
		
  }*/
 
	 
h1 {
	 color: white;
	/* text-decoration: underline;*/
	 font-size:  25px;
	 padding-top: 2em;
	 padding-bottom: .2em;
	 padding-left: .4em;
	 margin: 0;
	/* background: navy url(banner_new.jpg) repeat-y right;*/
	/* TAKING THIS BACKGROUND NAVY OUT 11/1/07. MADE TOURQUISE BORDER.  ===== */
	/* background: navy  repeat-y right;*/
	 }

		 
h2 {
	 color: #217091;
	 text-decoration: underline;
	 font-size: bold 27px;
	 padding-top: 5px;
	 }
	 
h3 {
	 color: #217091;
	 text-decoration: underline;
	 font-size: 20px;
	 padding-top: 14px;
	 margin-bottom: 5px;
	 } 
	 
h4 {
	 color: #217091;
	 text-decoration: underline;
	 font-size: 14px;
	 padding-top: 14px;
	 } 
	
	/* for right menu on mainpage */ 
h5 {
	 color: #000033;
	 text-decoration: underline;
	 font-size: 13px;
	 padding-top: 1px;
	 } 
	 
#tagline p {
	color: White;
	 font-style: italic;
	  font:  13px;
	 border-top: 3px solid #33ABDE;
	 border-bottom: 3px solid #33ABDE;
	 padding-top: .2em;
	 padding-bottom: .2em;
	 padding-left: .8em;
	 margin: 0;
	 background:  #2A8DB8;
	 }  
	 
	 
blockquote {
	padding: 15px;
	border-style: none;
	border-color: yellow;
	font-style: italic; 
  }
	 
img {
		float: left;
		margin: 10px;
   /* border:2px solid #fff; */ 
		vertical-align: top;
	/*	clear: both;*/
		}

img.logo {
    float: none;
/*		display: block; */
		clear: both;
		border-style: none;
    margin-left: auto;
    margin-right: auto;
		vertical-align: bottom;
		}
		
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: #217091;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: #217091;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #144470;
color: #fff;
}
	
#subscribe
{
align: right;
padding: 0;
border: 0;
margin-top: 0;
margin-bottom: 0;
}

#subscribe img
{
float: right;
padding: 0;
border: 0;
margin-top: 4px;
margin-bottom: 0;

}

/*unordered lists for travel pages- museum links*/
	#button {
	width: 12em;
	float: right;
	border-right: 1px solid #000;
	hspace=6 vspace=5;
	padding: 0 0 1em 0;
	margin-bottom: 1em;
	font-family: 'Trebuchet MS', 'Lucida Grande',
	  Verdana, Lucida, Geneva, Helvetica, 
	  Arial, sans-serif;
	background-color: #90bade;
	color: #333;
	}
	#button ul {
		list-style: none;
		margin: 0;
		padding: 0;
		border: none;
		}
		
	#button li {
		border-bottom: 1px solid #90bade;
		margin: 0;
		}
	
	#button li a {
		display: block;
		padding: 5px 5px 5px 0.5em;
		border-left: 10px solid #1958b7;
		border-right: 10px solid #508fc4;
		background-color: #2175bc;
		color: #fff;
		text-decoration: none;
		width: 100%;
		}

	html>body #button li a {
		width: auto;
		}

	#button li a:hover {
		border-left: 10px solid #1c64d1;
		border-right: 10px solid #5ba3e0;
		background-color: #2586d7;
		color: #fff;
		}
		
		</head>
		</body>
		</html>
