/*
 * Urbana School District 116
 * CSS 
 * built by Grosser, OJC Technologies
 * 4/2005
 */


/*
 * This file will throw several errors in the validator at w3c.org
 * All errors derive from two deliberate uses:
 *
 *    _height
 *    filter:...
 *
 * The first is the "underscore" hack, which hides content from IE
 * It actually is arguably valid CSS lexicography, but does not validate
 * regardless.  The second is the only way to get IE to properly render
 * alpha transparency in 24-bit PNG's.  It also does not validate.  
 *
 * The various parse errors listed on a validate all derive from these
 * lines and should be considered as unharmful.
 */


body {
    margin:0;
    padding:0;
    text-align:center;
    font-size:11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

img { border:none; }

a:link { color:#0A4086; }
a:visited { color:#0A4086; }
a:hover { color:#0663CC; }


/* need some special link coloring for the transparent boxes */

.news a:link { color:#EEF5FD; }
.news a:visited { color:#E7EEF8; }
.news a:hover { color:#FDD8C7; }

.feature a:link { color:#FFF6D9; }
.feature a:visited{ color:#E9DFC1; }
.feature a:hover{ color:#E8EEFF; }

.content a:link { color:#EEF5FD; }
.content a:visited { color:#E7EEF8; }
.content a:hover { color:#FDD8C7; }

.emergency a:link { color:#FFF6D9; }
.emergency a:visited{ color:#E9DFC1; }
.emergency a:hover{ color:#E8EEFF; }

#footer a:link { color:#0A4086; }
#footer a:visited{ color:#0A4086; }
#footer a:hover{ color:#0663CC; }

.nounderscore { text-decoration:none }


/* same basic styling so that things look consistent */

ul, ol {
    padding-left:30px;
    margin:0;
    line-height:1.4em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    margin-bottom:10px;
}

h1 { 
    color:#FFF;
    font-size: 1.5em; 
    font-weight: bold;
    text-transform: uppercase;
}

h2 {
    color:#FFF;
    font-size: 1.3em; 
}

h3 {
    color:#FFF;
    margin: 0;
    border:0px solid #000;
    padding:0;
    font-size:1.2em;
    font-weight:bold;
    }

h4 { 
    font-size: 1.1em; 
    color:#FFF;
}

h5 { 
    color:#FFF;
    font-size: .9em; 
}

p {
    font-size: 1em;
    line-height:1.6em;
    margin: 10px 0;
}

#news p {
    margin: 10px 0 15px;
}


#container {
    top:0;
    width:750px;
    margin: 0 auto;
    text-align:left;
    position:relative;
    border-color:#7F7F7F;
    border-style:solid;
    border-width: 0 1px 1px;
    /*
    background: url(../images/backgrounds/rotate.php);
    */
}

#secondarycontainer {
    top:0;
    width:750px;
    margin: 0 auto;
    text-align:left;
    position:relative;
    border-color:#7F7F7F;
    border-style:solid;
    border-width: 0 1px 1px;
    background: url(../images/secondary-background.jpg) no-repeat;
    background-color: #0A4086;
}

#header {
    margin:0px 30px 0px 30px;
    padding-top:5px;
    border:0px solid #0F0; 
}

#centerwrap {
    margin:0px 30px 0px 30px;
    border:1px solid #0F0; 
    padding:0;
    display:block;
}

.outstandingheader {
	height: 29px;
    float:right;
	margin: -26px 0 0 150px;
    background-image: url(../images/outstanding.gif);
    background-image/**/: none;

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/outstanding.png');
    border:0px solid #0F0;

    width:540px; 
    voice-family: "\"}\""; 
    voice-family: inherit;
    width:520px; 
}

.outstandingheader[class] {
    margin-left:150px;
    margin-top:-26px;
    padding:10px;
    padding-bottom:0;
    margin-bottom:-20px;
    background: url(../images/outstanding.png) no-repeat;
    border:0px solid #0F0;
    display:block;
}
    

.emergency {
    border: 0px solid #000;
    float:right;
    margin-top:78px;
    margin-left:-95px;
    padding:10px;
    margin-bottom:8px;

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/transparent-red-25.png', sizingMethod='scale');

    /*\*//*/
    /*\*//*/
    background-color:#E11133;
    /**/
    background-color:#E11133;
    background-color/**/:none;

    /* had to add these two declarations here for ie5win */
    color:#FFF;
    font-weight: bold;

    width:540px; 
    voice-family: "\"}\""; 
    voice-family: inherit;
    width:520px; 
}

form {
    margin:0;
    padding:0;
}

.emergency[class] {
    float:right;
    background:url(../images/transparent-red-25.png) repeat;
    margin-top:78px;
    margin-left:-95px;
    margin-bottom: 8px;
    padding:10px;
    width:520px;
}

.emergency p {
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    font-size:1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height:1.6em;
    margin: 0;
}


/* 
 *  24-bit alpha transparency in PNG's is busted in IE, so we use their
 *  proprietary DirectX filter to achieve it in that browser only...
 */

.logofront {
    height:130px;
    width:174px;
    background-image: url(../images/usd-logo-front.gif);
    background-image/**/: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/usd-logo-front.png', sizingMethod='scale');
    border:0px solid #0F0; 
    margin-top:5px;
    float:left;
    position:relative;

    /*
     *  hide next line from everything except ie5mac 
     *  because it can handle transp PNG's but can't see next block 
     *  more info on the ie5mac bandpass filter: 
     *  http://www.l-c-n.com/IE5tests/hiding/#anhid 
     */

    /*\*//*/
    background:url(../images/usd-logo-front.png) no-repeat;
    /**/
}


/* 
 *  ...then using a CSS selector that IE can't recognize because it 
 *  doesn't support the spec, we feed something different to FF/Moz/etc.
 */

.logofront[class] {
    position:relative;
    height:130px;
    width:174px;
    background:url(../images/usd-logo-front.png) no-repeat;
    border:0px solid #0F0; 
    margin-top:5px;
    float:left;
    position:relative;
}

.logocontent {
    height:130px;
    width:174px;
    background-image: url(../images/usd-logo-secondary.gif);
    background-image/**/: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/usd-logo-secondary.png', sizingMethod='scale');
    border:0px solid #0F0;
    margin-top:5px;
    float:left;
    position:relative;

    /*
     *  hide next line from everything except ie5mac
     *  because it can handle transp PNG's but can't see next block
     *  more info on the ie5mac bandpass filter:
     *  http://www.l-c-n.com/IE5tests/hiding/#anhid
     */

    /*\*//*/
    background:url(../img/usd-logo-secondary.png) no-repeat;
    /**/
}


/*
 *  ...then using a CSS selector that IE can't recognize because it
 *  doesn't support the spec, we feed something different to FF/Moz/etc.
 */

.logocontent[class] {
    position:relative;
    height:130px;
    width:174px;
    background:url(../images/usd-logo-secondary.png) no-repeat;
    border:0px solid #0F0;
    margin-top:5px;
    float:left;
}


.nav ul {
    color: #444;
    margin:7px 0;
    list-style: none;
    line-height: 1.9em;
    font-size:1em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    border:0px solid #0F0; 
    padding:0;
}

.nav a { text-decoration:none; }
.nav a:hover { text-decoration:underline; }



.nav {
/*
    width:100px;
    */
    float:left;
    padding:15px;
    text-align:right;
    margin:10px 10px 10px 30px;
    display:inline;
    min-height:370px;
    height: auto;
    _height:370px; 
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../images/links-trans-25.png', sizingMethod='scale');
    /*\*//*/
    background-color: #D8CA50;
    /**/
    background-color: #D8CA50;
    background-color/**/: none; 
    border:0px solid #0F0; 

    width:130px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    width:100px;

}

.nav[class] {
    width:100px;
    float:left;
    padding:15px;
    text-align:right;
    margin:10px 10px 10px 30px;
    display:inline;
    min-height:370px;
    height: auto;
    _height:370px;
    background-color: #D8CA50;
    background:url(../images/links-trans-25.png) repeat;
    border:0px solid #0F0; 
}

/* fixes an IE6 bug that breaks links on top of the transparent PNG */
/* --will it never end?? */
.nav * { position:relative; }
.feature * { position:relative; }
.news * { position:relative; }
.content * { position:relative; }
.emergency * { position:relative; }
.newfooter * { position:relative; }

.quicklink {
    margin:5px 0;
    font-size:1.2em;
    width:100px;
}

.news {
    float:left;
    padding:15px;
    margin:10px;
    display:inline;

    /* this filter makes the PNG transparency work for ie5.5+ */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/news-trans-25.png', sizingMethod='scale');

    /* the filter doesn't work for ie5mac, so ... */

    /*\*//*/
    background-color: #67D6E9;
    /**/

    /* nor does it work for ie5win, so ... */
    /* first statement seen by ie5, second only by ie5.5 and 6 */

    background-color: #67D6E9;
    background-color/**/:none;

    /* 
     * IE5 box model hack ... first we set the wrong width that buggy IE5
     * wants, then we use the box model hack to hide the last width line
     * from IE5 browsers, and finally we set the correct width for the
     * rest of the browser world.
     */

    width:260px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    width:230px;

}

/* and finally, a class for the rest of the (non-IE) world */

.news[class] {
    float:left;
    background-color: #67D6E9;
    background:url(../images/news-trans-25.png) repeat;
    padding:15px;
    margin:10px;
    display:inline;
    width:230px;
}

.feature {
    width:230px;
    float:left;
    padding:15px;
    margin:10px 0px 10px 10px;
    min-height:250px;
    height: auto;
    _height:250px; /* fixing the IE min-height bug */
    display:inline;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/feature-trans-25.png', sizingMethod='scale');

    /* the filter doesn't work for ie5mac, so ... */

    /*\*//*/
    background-color: #B56C40;
    /**/

    /* nor does it work for ie5win, so ... */
    /* first statement seen by ie5, second only by ie5.5 and 6 */

    background-color: #B56C40;
    background-color/**/: none;

    width:260px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    width:230px;
}

.feature[class] {
    width:230px;
    float:left;
    padding:15px;
    margin:10px 0px 10px 10px;
    min-height:250px;
    height: auto;
    _height:250px; /* fixing the IE min-height bug */
    display:inline;
    background:url(../images/feature-trans-25.png) repeat;
}

    /* the following added by Christine Schwenk, USD, 5-8-06 to create white box for homepage footer */

.newfooter {
    width:700px;
    float:left;
    margin:10px 10px 10px 30px;
    height: 70px;
    display:inline;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/newfooter-trans-75.png', sizingMethod='scale');

    /* the filter doesn't work for ie5mac, so ... */

    /*\*//*/
    background-color: #ffffff;
    /**/

    /* nor does it work for ie5win, so ... */
    /* first statement seen by ie5, second only by ie5.5 and 6 */

    background-color: #ffffff;
    background-color/**/: none;

    width:720px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    width:680px;
}

.newfooter[class] {
    width:700px;
    float:left;
    margin:10px 10px 10px 30px;
    height: 70px;
    display:inline;
    background:url(../images/newfooter-trans-75.png) repeat;
}

    /* end of items added by Christine Schwenk, USD, 5-8-06 to create white box for homepage footer */

.content {
    float:left;
    padding:15px;
    padding-right:35px;
    padding-left:20px;
    margin:10px 26px 10px 10px;
    min-height:370px;
    height: auto;
    _height:370px; /* fixing the IE min-height bug */
    display:inline;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/content-trans-25.png', sizingMethod='scale'); 


    /* nor does it work for ie5win, so ... */
    /* first statement seen by ie5, second only by ie5.5 and 6 */

    background-color: #C0A781;
    background-color/**/: none;

    /* the filter doesn't work for ie5mac, so ... */

    /*\*//*/
    background-color: #C0A781;
    width:475px;
    display:block;
    position:relative;
    /**/

    /* why 535 and not 521?  Got me, ask IE5 and 5.5 win... */

    width:535px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width:485px;


}

.content[class] {
    width:485px;
    float:left;
    padding:15px;
    padding-right:35px;
    padding-left:20px;
    margin:10px 0px 10px 10px;
    min-height:370px;
    height: auto;
    _height:370px; /* fixing the IE min-height bug */
    display:inline;
    background:url(../images/content-trans-25.png) repeat;
}

/* the content_nonav were added by John Morrow - they are simply
   copies of the content classes with a wider content area to use
   in pages that have no lhs nav menu */    
.content_nonav {
    float:left;
    padding:15px;
    padding-right:35px;
    padding-left:20px;
    margin:10px 26px 10px 10px;
    min-height:370px;
    height: auto;
    _height:370px; /* fixing the IE min-height bug */
    display:inline;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/content-trans-25.png', sizingMethod='scale'); 


    /* nor does it work for ie5win, so ... */
    /* first statement seen by ie5, second only by ie5.5 and 6 */

    background-color: #C0A781;
    background-color/**/: none;

    /* the filter doesn't work for ie5mac, so ... */

    /*\*//*/
    background-color: #C0A781;
    width:575px;
    display:block;
    position:relative;
    /**/

    /* why 535 and not 521?  Got me, ask IE5 and 5.5 win... */

    width:635px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width:585px;

}

.content_nonav[class] {
    width:585px;
    float:left;
    padding:15px;
    padding-right:35px;
    padding-left:20px;
    margin:10px 0px 10px 10px;
    min-height:370px;
    height: auto;
    _height:370px; /* fixing the IE min-height bug */
    display:inline;
    background:url(../images/content-trans-25.png) repeat;
}

/* End of stuff added by John Morrow */

/* Footer color changed #FFF to #0A4086 by Christine Schwenk to make visible */

#footer {
    padding: 10px 10px 10px;
    text-align:center;
    color: #0A4086;
    font-family: Verdana, Arial, sans-serif;
    clear:both;
}

#footer p {
    font-size: .9em;
    line-height: 1.2em;
}

.footersecondary {
    padding: 0px 30px 10px;
    margin: 0;
    text-align:right;
    color: #FFF;
    font-family: Verdana, Arial, sans-serif;
    clear:both;
}

.footersecondary p {
    font-size: .9em;
    line-height: 1.2em;
}

.headersecondary {
    padding: 0px 0px 10px;
    margin-top:10px;
    text-align:right;
    float:right;
    color: #FFF;
    font-family: Verdana, Arial, sans-serif;
}

.headersecondary p {
    font-size: .9em;
    line-height: 1.2em;
}

/* intended for images on the features panel of the front page *?
/* should be max of 225 pix wide! */

.photoframe {
  padding:0px;
  margin:10px 0 0px;
  border:1px solid #333;
}


/* intended for right-justified photos on secondary pages */

.photoframecontent {
  float:right;
  padding:0px;
  margin:10px 0 10px 10px;
  border:1px solid #333;
}

hr {
    text-align:inherit;
    width: 75%;
    height:1px;
    color: #eee;
    background-color: #eee;
    border: none;
    margin-right:0;
}

div.feature_image {
    padding:0px;
    margin: 0px;

    width: 225px;
}

p.indent {
    text-indent: 25px;
}



/* calendar */
#calendar-grid td, #calendar-grid th {
  font-size: .7em;
}