/* CSS FOR THE LEFORS ISD SITE */

/* * * * * * GENERAL STUFF * * * * * */

body {
 margin: 0;
 padding: 0;
 font: 80%/1.2 Arial, Helvetica, sans-serif;
 color: #000;                
 background-color: #ffa500;
}

ol {
 margin: 0 0 0 10px;
 padding: 0 0 0 10px;
}
ol li { margin: 3px;}

#header { padding: 25px 0 35px 0; }

#header a:link, #header a:visited, #header a:active, #header a:hover {
 color: #000;
 text-decoration: none;
 font-weight: bold;
 font-size: 250%
}

#frame_header a:link, #frame_header a:visited, #frame_header a:active, #frame_header a:hover {
 color: #000;
 text-decoration: none;
 font-weight: bold;
 font-size: 220%
}

/* Why display: block? Anchors are born with display: inline. We need a box, not lines of text. */
.back_button, .back_button:link, .back_button:visited, .back_button:active {
 position: absolute;
 left: 0;
 display: block;
 padding: 4px;
 margin: 5px;
 width: 8.5em;        /* Holds it apart for Gecko, bug allows it to write beyond the end of the box. */
 white-space: nowrap; /* Lets IE push it apart, bug calculates width incorrectly. */
 text-decoration: none;
 border: 1px #000 solid;
 color:#000;
 background-color:#eee;
}

/* Gray background upon hover */
.back_button:hover { background-color:#ddd; }


/* * * * * * INDEX PAGE * * * * * */

/* Styles flyouts and school picture have in common. */
.flyouts div, .flyouts img {
 position: absolute;
 top: 1px;
 /* right: 0px; */
 left: 15em;
}

/*
Styles for flyouts only.
Real width is 450px. (Add 10px padding to each side of 430px.)
Real height is 252px. (Add 10px padding to top and bottom of 232px.)
*/
.flyouts div {
 display: none;
 padding: 10px;
 width: 430px;
 height: 232px;
 border: solid #000 1px;
}

/* Used in flyout title. Automatically pushes down the text beneath it. */
.flyouts h3 {
 margin: 0 0 .8em 0;
 font-size: 100%;
}

/* * * * * * MENU BUTTONS * * * * * */

/* Why display: block? Anchors are born with display: inline. We need a box, not lines of text. */
.menu_button, .menu_button:link, .menu_button:visited, .menu_button:active {
 display: block;
 padding: 6px;
 margin: 1px;    /* A little space so they don't cover each other's borders */ 
 width: 7.6em;
 text-decoration: none;
 text-align: left;
 color: #000;
 border-width: 1px;
 border-style: solid;
 border-color: #ffa500;
 background-color:#ffa500;
 font-size: 140%;
}

/* Make gray background with blue border upon hover. */
.menu_button:hover { background-color:#eee; border-color: #000; }


/* * * * * * * * * * CONTACT US * * * * * * * * * */

/*
I made listing a class instead of an id so you can make more than one listing on this page.
You could slap in students, divide the list up into subjects like Math, English, etc...
*/
.listing {
 text-align: left;
}

.listing a, .listing a:link, .listing a:visited, listing a:active {
 display: block;
 font: 130%/1.2 'Courier New', monospace;
 text-decoration: none;
 width: 35em;
 padding: .3em .3em .3em .6em;
 margin: 1px 0 1px 3em;
 color: #000;
 background-color: #ffa500;
 border-style: solid;
 border-width: 1px;
 border-color: #ffa500;
}

/*
Notice how we change border color, not border style. With border style equal to none, you have no border.
IE puts the border around the outside, so in IE changing border style also changes size.
The list becomes 'fluid', which is a really cool effect if you want it.
In a commercial application, I would use a hack to fix IE and use border style.
This is because we can't legally set the border color to transparent and it will show in printing. 
*/
.listing a:hover { 
 background-color:#eee;
 border-color: #000;   
}

/* * * * * * * * * * * * * SCHOOL REPORTS * * * * * * * * * * */

#gov_list {
 list-style-type: none;
 text-align:left;
 white-space: nowrap;
}

#gov_list li { padding: 10px; }

#gov_list li a { font-size: 150%; font-weight: bold; }