/*Furthur help with margins provided by Todd Barchok:

I took a look at your site, and managed to figure
out what the problem was.  I've attached a .css file that'll work.
The problem was that, since you were using percentages for the various
div widths, while they added up to 100%, IE doesn't seem to include
padding as part of that.  The attached file may not add up to 100%,
but it works (granted, I only tested it on IE7, which I have installed
on this PC, but it should work for IE6/5.  In fact, I just tested it,
and it seems to work).  Another thing to note, is the layout doesn't
work to well on 800x600 resolution in IE.

Also min/max-width/height doesn't work on IE6/5, and possibly IE7, so
it's best to avoid using those whenever possible (even though it's a
pain in the ass)
*/

/* Andrea Keane's work denoted by initials ajk */

/* ------------------------ BODY --------------------------------- */
body {
background-color: black;
color:#CCFFCC;
font-size:26px;
/* Per J0n0's suggestion body margins have been reduced to zero. */
margin:0;
height:100%;        /* for I.E. scroll to work */
overflow-y:auto;    /* for I.E. scroll to work */ 
} 
* html #thePage { width:98.4%; } /* for I.E. scroll to work */

/* ------------------------ HEADERS --------------------------------- */
h2 {
color:#CCFFFF;
text-align: center;
}

/* ------------------------ HORIZONTAL BREAKS --------------------- */
hr {color:#00CC99}

/* ------------------------ TEXT AREAS ------------------------- */
p, ol, href, li {
margin-left: 15px;
font-family:Helvetica, Arial, sans-serif;
} 

.white{color:white;}

/* ------------------------ IMAGES ---------------------------------------------- */

img.halfwidth {
/* http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-width_percent */
max-width: 50%;
margin: auto;
}

/* This class could be added to any object, not just images. */
.center{text-align:center;}

.right{float:right;}
.left{float:left;}

img.halfheight {
height: 50%;
}

/* ajk- added to fix image sizing on humor pages. */
.topRandom
{
border:none;
padding:10px 0px 10px 10px;
width:300px;
}

img.width300{
width:300px;
}

img.legs {
height: 450px;
width: 240px;
}

img.pennrelays{height:450px; width:300px;}

/* ------------------------ LINKS --------------------------- */
/* http://www.w3schools.com/css/tryit.asp?filename=trycss_link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!! */
a:link {color:#33FFCC}
a:visited {color:#33CCCC}
a:hover {color:#00FFCC}
a:active {color:blue}

/* ---------------------- TABLES AND CELLS --------------------------- */
table
{
max-width: 100%;
max-height: 100%;
/* http://www.w3schools.com/css/css_border.asp */
border-style: solid;
}

table.invis {
border:0;
}

td{
vertical-align:top
}

.cell
{
padding: .5cm;
vertical-align: top;
text-align: left
}

.bicell
{
padding: .5cm;
width: 50%;
max-height: 100%;
vertical-align: top;
text-align: left;
overflow: scroll;
}

/* ------------------------ DIVISIONS ----------------------------- */
/* http://www.w3schools.com/css/tryit.asp?filename=trycss_float3 */
div.ads
{
float:right;
width:15%;
/* Margin modifiers in order: top, right, bottom, left 
http://www.w3schools.com/css/css_margin.asp */
margin:0 0 15px 20px; 
/* Padding is the area between the edge of the "container" and the text
or image within it. */
padding:15px;
border:1px;
border-bottom-style:solid;
border-color:black;
text-align:center;
background-color:#F5DEB3; /* Background color "wheat". http://www.w3schools.com/html/html_colornames.asp */
clear:both;
}

/* The main division can contain the left and right side divisions. */
div.main
{
clear:both;
text-align:left;
background:black;
width:100%;
}

div.content
{
text-align:inherit;
padding:15px;
width:80%;
margin-left:13%;
}

div.wall
{
border:2px solid GREEN;
width:85%;
margin-left:5%;
padding-left:5%;
padding-right:5%;
}

div.navigation 
{
font-size:22px;
/* http://www.w3schools.com/css/css_positioning.asp
This keeps the left division in the same spot regardless of scrolling. */
position:fixed;
left: 0px;
top: 0px;
width:14%;
padding:5px;
background-color:#330066;
/* http://www.w3schools.com/css/css_border.asp */
border:0;
/* http://www.w3schools.com/css/pr_pos_overflow.asp */
overflow:auto;
/*Extend to the bottom of the page*/
bottom:0;
}

* html div.left { position:absolute; } /* ajk- for I.E. fixed menu to work */

/* ajk-
FIXED MENU:

PROBLEM:  In I.E. the menu remains at the top of the document instead of
at the top of each screen.  The reason is that I.E. does not recognize the
property 'display:fixed;'.

SOLUTION: You need a little 'hack' for I.E. to simulate the action
'display:fixed'.  You set up the entire page as one div ('thePage') except
for the fixed menu and use 'scrolling:auto;' which results in everything
being scrolled except for the fixed menu which is positioned absolutely in
the left corner.  First you define the fixed section as fixed and then
over-ride it with 'display:absolute' for I.E. (using: * html ).  Also you
need a conditional css change placed in the html head section to hide the
scroll bar that is normally seen on the screen and only show the scroll
bar for 'thePage' section.

RESOURCE: FROM: http://www.cssplay.co.uk/layouts/fixed.html
 - The above page explains it a lot better than I can.
*/

/* --------------------------- PRINTER FRIENDLY: ------------------------
ajk-
PROBLEM: You cannot print your pages.  When you try to do it you only get
one page (example:Starcraft write-up).

SOLUTION: Print only the 'content' part of the page.  Use specific css for
media print to only 'display' the 'content' div.

You can do this by placing the following into your linkpages.css:
*/
@media print {
.header { display: none; }
.rightside { display: none; }
.footer { display: none; }
div.left {display:none;}
}