/*

The height of a box (.main, for instance) is calculated by:
top margin + top border + top padding + height + bottom padding + bottom border + bottom margin.

The width is similar, except with left/right instead of top/bottom and width instead of height.

float: left; means the box tries to move itself as far left as possible.
clear: left; means the box refuses to have any other boxes to its left - so basically, it moves down until it can move all the way to the left border.

*/


body
{
margin: 10px;
background-color: #ffffff;
background-image: url("images/swim_bg.png");
background-repeat: no-repeat;
background-position: top left;
color: #101010;
font-size: 12pt;
font-family: verdana, arial, helvetica, sanserif, san-serif;
}

/* these next two classes are just containers for the top section & the bottom section of the page, to keep them from collapsing when the page is drastically resized. doesn't work in IE.  */

.container
{
/* done by table properties in the appropriate templates/ file
border: 0px;
padding: 0px;
width: 95%;
*/
}

.bglogo
{
width: 150px;
height: 100px;
border: 0px;
}

.top_title
{
/* done by table properties in the appropriate templates/ file
height: 100px;
min-width: 600px;
margin-left: 8px;
*/
padding: 10px;
background-color: #EEEEEE;
border: 2px solid #CCCCCC;
opacity: .85;
}

.left
{
/* done by table properties in the appropriate templates/ file
margin-top: 4px;
margin-left: 0px;
width: 150px;
padding: 5px;
*/
padding: 5px;
vertical-align: top;
background-color: #EEEEEE;
border: 2px solid #CCCCCC;
opacity: .85;
}

.main
{
/* done by table properties in the appropriate templates/ file
min-width: 596px;
min-height: 340px;
margin-top: 4px;
margin-left: 4px;
*/
padding: 5px;
vertical-align: top;
border: 2px solid #CCCCCC;
background-color: #EEEEEE;
}

.wiki
{
margin-top: 4px;
margin-left: 4px;
padding: 5px;
align: center;
vertical-align: middle;
border: 2px solid #CCCCCC;
background-color: #EEEEEE;
}


/* used by search pages, messages, etc., that don't need the left navigation bar. */
.alt_main
{
/* done by table properties in the appropriate templates/ file
margin-top: 4px;
margin-left: 4px;
min-width: 794px;
padding: 5px;
*/
vertical-align: top;
border: 2px solid #CCCCCC;
background-color: #EEEEEE;
}

.footer
{
padding: 10px;
font-size: 12pt;
color: #888;
/*text-align: center;*/
}

/* These describe the colors & decoration of links (whether they're underlined or not) */

a:link
{
color: #2020D0;
text-decoration: none;
}
a:visited
{
color: #0000B0;
text-decoration: none;
}
a:active
{
color: #D02020;
text-decoration: underline;
}
a:hover
{
color: #D020D0;
text-decoration: underline;
}

/* These change the appearance of the search box & button. */

.search_textentry
{
position: relative;
border: 1px solid #000000;
/*background: #9e9fda;*/
width: 128px;
height: 20px;
font-size: 12px;
}

.search_button
{

margin-top: 2px;
border: 1px solid #000000;
/*background: #7c7db8;
width: 128px;
height: 20px;*/
font-size: 12px;
font-weight: bold;
}