
<!-- 

/*Fix to even out differently rendered spacing of elements for all browsers. You will have to set spacing for elements as needed… i.e. <p>. this also This also makes it possible to give divs left and right auto margins in order to center in all browsers.*/ 
* { 
margin: 0px; 
padding: 0px; 
} 
body { 
background: #ffffff url(../img/bggif.gif) top center repeat-x; 
line-height:16px;
color:#686868;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

/*No Text Align Needed to center container div for IE if you use the * rule listed above.*/ 
} 

/* Gave both headers different names to easily differentiate the two. Also made them IDs instead of classes because they are only used once on each page. I took them out of the container and gave them auto margins for centering on the page and a clear both value.*/ 
#top_header { 
height:120px; 
width:840px; 
margin-left:auto; 
margin-right:auto; 
color:white; 
clear:both; 
} 
#top_header h1 { 
/*There are many ways to style h tags. I do it this way so I don’t have to remember witch one is the style I need. This way I know that the h1 tag in this div looks like this and the h1 tag in the other div looks like that. but others have the own preferences.*/ 
} 
#sub_header { 
height:80px; 
width:840px; 
margin-left:auto; 
margin-right:auto; 

clear:both; 
} 
#sub_header h1{ 
/*There are many ways to style h tags. I do it this way so I don’t have to remember witch one is the style I need ("was it the h1, h2 or h4?"). This way I know that the h1 tag in this div looks like this and the h1 tag in the other div looks like that. but others have the own preferences.*/ 
} 


#slideshow { 
width:838px; 
margin-left:auto; 
margin-right:auto; 
clear:both; 
border: 1px solid #cccccc;
} 

#profileheader { 
margin-left:auto; 
margin-right:auto; 
clear:both; 
border: 0px solid #cccccc;
}

#slideshowfull { 
margin-left:auto; 
margin-right:auto; 
clear:both; 
border: 0px solid #cccccc;
}

#simpleheader { 
height:250px; 
width:838px; 
margin-left:auto; 
margin-right:auto; 
clear:both; 
border: 1px solid #cccccc;
}

#projectheader { 
height:150px; 
width:838px; 
margin-left:auto; 
margin-right:auto; 
clear:both; 
border: 1px solid #cccccc;
}

#projectslide { 
height:250px; 
width:838px; 
margin-left:auto; 
margin-right:auto; 
clear:both; 
border: 1px solid #cccccc;
} 


/*Used to hold all basic_row containers*/ 
#container { 
width: 840px; 
margin-left: auto; 
margin-right: auto; 
background:#ffffff; 
} 

/*Used to hold the different column floats*/ 
.basic_row { 
clear: both; 
} 

.single_col { 
float: left; 
background:#ffffff; 
}
/*Depending on what you want to do you can style these anyway you want as long as their combined width stays with in that 840px range. Don’t forget to account for padding, margins and borders. Either create one class and use it twice (or thrice) or create a style for each individual column (cell really) as you did. I did an example of both for the two column rows.*/ 
.two_col { 
float: left; 
background:#4F41AE; 
width:420px; 
height:200px; 
} 
.two_col_left 
{ 
float: left; 
background:#ffffff; 
width:690px; 
} 
.two_col_right 
{ 
float: left; 
background:#ffffff; 
width:150px; 
}

.contact-left 
{ 
float: left; 
background:#ffffff; 
width:420px; 

} 
.contact-right 
{ 
float: left; 
background:#ffffff; 
width:420px; 

} 

 
.leftcolumn 
{ 
float: left; 
background:#ffffff; 
width:585px; 
} 
.rightcolumn 
{ 
float: left; 
background:#ffffff; 
width:255px; 
} 


/*Used to clear all floats on in a row. Noticed it is placed before the closing tag of the basic_row div.*/ 
.clear_float { 
font-size: 0px; 
line-height: 0px; 
clear: both; 
} 

/*Footer is set up the same as the header. but will be placed under the container div*/ 
#footer { 
color:white; 
clear:both; 

height: 75px; 
width: 840px; 
margin-right: auto; 
margin-left: auto; 
} 
--> 
img.headerimage {float:left; border:0px solid #cccccc;margin:0px;}
img.footerimage {float:left; border:0px solid #cccccc;margin:0px;}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
}

table.projectlist {width:100%;}
table.projectlist td {border:1px dashed #cccccc;padding: 5px; height: 85px;}
table.projectlist td.imagelink {border:1px dashed #cccccc;padding: 5px; height: 85px; width: 210px;}
img.projectlink {float:left; border:0px solid #cccccc;margin:0px; padding: 0px;}


#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#navcontainer li { margin:2px; }

#navcontainer a
{
display: block;
color: #fff;
background-color: #9b9b9b;
padding: 10px;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #cccccc;
color: #FFF;
}