@charset "UTF-8"; /* CSS Document */ @charset "UTF-8"; /* The Element */ /* By etting the margin and padding of the element to zero all browsers assume a similar display with regard to these properties. The text-align property is used to center the body content in IE browers. The alignment of the text-proper is achieved in the #container subdivision. */ body { margin: 0; padding: 0; text-align: center; background: #444; font-family: sans-serif; font-size:1em; color: #000; } /* The #container DIV */ /* This DIV centers centers the page's content and provides it with flexible left and right margins. This centering is achieved by assigning a predetermined width to the DIV and then setting the DIV's left and right margin properties to [auto]. The value 0 of the margin property refers to the top and bottom margins. The background color assigned to this DIV becomes the color of the center panel -- namely, the #mainContent DIV. The text-align property of this DIV overrides the text-align property for the element itself. Setting the font-size of the DIV will have a similar indeterminant effect. */ #sidebar1 { float: left; width: 11em; /* since this element is floated, a width must be given */ background: #000; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 0; /* top and bottom padding create visual space within this div */ } /* The KIUSAU Emblem */ /*The display property insures that the imgages will be treated as block as opposed to inline elements. The text-align property and the horizontal value (auto) of the margin property work together to insure that the images are centered horizontally within the sidebar. The vertical value (4em) of the margin property insures that the images are vertically spaced. */ #sidebar1 div.emblem { display:block; margin: 4em auto; text-align:right; color:#fff; } /* Linkage for emblem */ #sidebar1 #leftSidebarTop #kiu a:link, #sidebar1 #leftSidebarTop #sau a:link { border: 2px solid #000; } #sidebar1 #leftSidebarTop #kiu a:link img, #sidebar1 #leftSidebarTop #sau a:link img { border: 2px solid #000; } #sidebar1 #leftSidebarTop #kiu a:visited, #sidebar1 #leftSidebarTop #sau a:visited { border: 2px solid #000; } #sidebar1 #leftSidebarTop #kiu a:visited img, #sidebar1 #leftSidebarTop #sau a:visited img { border: 2px solid #000; } #sidebar1 #leftSidebarTop #kiu a:hover, #sidebar1 #leftSidebarTop #sau a:hover { border: 2px solid #000; } #sidebar1 #leftSidebarTop #kiu a:hover img, #sidebar1 #leftSidebarTop #sau a:hover img { border: 2px solid #fff; } #sidebar1 #leftSidebarTop #kiu a:active, #sidebar1 #leftSidebarTop #sau a:active { border: 2px solid #000; } #sidebar1 #leftSidebarTop #kiu a:active img, #sidebar1 #leftSidebarTop #sau a:active img { border: 2px solid #f00; } /* The Bottom
Element of the Left Sidebar */ /* The color property sets the color of the text. */ #sidebar1 #leftSidebarBottom { text-align:right; color:#fff; } /* Headings for Bottom-Left Sidebar */ #sidebar1 #leftSidebarBottom h3 { font-family: serif, Georgia; } /* Linkage for the Bottom
Element of the Left Sidebar */ a.left_sidebar:link { color:#ff0; text-decoration:none; } a.left_sidebar:visited { color:#999; } a.left_sidebar:hover { color:#f00; } /* The #sidebar2 Div */ /* This
element contains two additional
elements: one for the top of the right sidebar and one for the bottom. It is built essentially the same as the left sidebar. Because the right sidebar is a floated element its width must be assigned. Once again, the background color will only extend as far as there appears content, and the padding is assigend to the content and not the
element itself in order to insure consistency across browsers. The vertical (top and bottom) value of the padding property provide vertical spacing between the vertically adjacent
elements and the window's edge.*/ #sidebar2 { float: right; width: 14em; background: #879e5a; color:#222; padding: 15px 0; text-align:left; font-size:0.9em; } #sidebar2 h3 { color:#fff; } /* Linkage for the Right Sidebar
Elements */ a.right_sidebar:link { color:#fc9edc; text-decoration:none; } a.right_sidebar:visited { color:#f25e3a; } a.right_sidebar:hover { color:#879e5a; } /* Text Padding for the Left and Right Sidebars and Their Respective Divisions. */ #sidebar1 h3, #sidebar1 p, #sidebar2 h3, #sidebar2 p { margin-left: 10px; margin-right: 10px; } /* The #mainContent
Element */ /* Notice that the width of left and right sidebar
elements are smaller than the values of the left and right margins of the #mainContent
In other words the left-floated sidebar fills the left margin of the #mainContent
and the right-floated sidebar fills the right-margin of the #mainContent
. Thus, the space between the #mainContent and #sidebar1
elements is created with the margin property of the #mainContent
. No matter how much content the #sidebar1
contains, the column space will remain. If the left-margin property is removed the text of the #mainContent
will fill the #sidebar1 space when the content in #sidebar1
ends. */ #mainContent { margin: 0 12em; } /* The #mainFrame iFrame */ #mainFrame { position:fixed; top:4em; margin: 0 auto; border:none; color:#fff; overflow:auto; } /* The Special
Element */ /* The .clearfloat class should be placed on a div or break element and should be the final element before the close of the #container
-- namely, that contains the full set of floated elements. */ .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } /* Miscellaneous classes for reuse */ .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px; } .fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; } /* Additional NOTES */ /* Tips for mainContent: 1. If you give this #mainContent div a font-size value different than the #sidebar1 div, the margins of the #mainContent div will be based on its font-size and the width of the #sidebar1 div will be based on its font-size. You may wish to adjust the values of these divs. 2. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur. */