/*Basic Divs and dimensions*/
/*taken from http://www.boutell.com/newfaq/creating/threecolumnlayout.html*/

body 
{
	margin: 0 auto 0 auto;
	font-family:Corbel, Arial, Sans-Serif;
	width: 1000px;
    background-color:white;

}

/*Header with logo, text, tagcloud and login box*/
.heading 
{
    text-align: left;
    width: 1000px;
    height: 200px;
    position: fixed;
    background-color: White;
    padding-bottom: 20px;
    z-index: 26;
}

.login
{
    position: absolute;
    right: 0;
    top:0;
    padding: 2px;
    background-color: #CCCCCC;
    font-size: smaller;
    margin-top: 10px;
    width: 140px;
}

.logo
{
    position: absolute;
    left: 0;
    top:0;
    margin-top: 10px;
}

.logo h2
{
    position: relative;
    margin-top: 80px;
    width: 460px;
}

.tagCloud
{
    position: absolute;
    top:0;
    left: 470px;
    width: 320px;
    margin-top: 10px;
}

/*Footer contents*/
.footer {
  padding-top: 20px;
  clear: both;
}

/*Navigation Section in footer*/
#navigation
{

}

#navigation ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#navigation li
{
	float:right;
	margin:0px 6px 0px 0;
	list-style:none;
}

#navigation a:link, #navigation a:visited
{

}

#navigation a:hover
{

}

/*Main container for everything*/
.container
{
    padding-top: 220px;   
}

.divMain  /*just a general div with padding*/
{
    padding: 10px;
}

/*Basic settings*/
h1, h2, h3, h4
{
    margin:0;
    padding: 0;
    text-align:left;
    text-decoration:none;    
}

h1
{
    font-size: 200%;
    /*background-image: url(../images/circleFriends.jpg);
    background-repeat: no-repeat;
    background-position: 10px 0px;*/
    padding:15px 10px 0px 0px;
     

}

h2
{
        padding:10px 0px 0px 0px; 
}

p+h2
{
    margin-top:20px; 
    font-size:0.8em; 
    padding:0; 
}

h3
{
    margin-top:15px; 
    font-size:0.7em; 
    padding:0; 
}

h4
{
    margin-top:15px; 
    font-size:0.7em; 
    padding:0; 
}    

p, p+ul {
    text-align:justify;
    margin:0;
    margin-bottom: 5px; 
    padding-top:5px; 
    font-size:14px;
    text-indent: 0;
}

   
a {
  font-weight:bold;
  text-decoration:none;
}
a:link {
  color:#B64926;
}
a:visited {
  color:#FFB03B;
}
a:hover, a:active {
  color:#8E2800;
}

.clear
{
    clear: both;
}

/*This is the tooltip approach offered by Stu - http://www.cssplay.co.uk/menu/tool_links*/
.hov table {position:absolute; border:0; border-collapse:collapse; left:0;}
.hov a {color:#000; text-decoration:none;}
.hov b {display:none; font-weight:normal;}
.hov:hover {position:relative; z-index:100;}
.hov a:hover,
.hov:hover a
{border:0; text-decoration:none; position:relative;}
.hov:hover b, 
.hov a:hover b
{display:block; visibility:visible; position:absolute; left:-300px; top:1em; background:#ffc; cursor:pointer;     -moz-border-radius: 1ex;
    -webkit-border-radius: 1ex; border:1px solid #888; padding:5px 10px;}
.hov b a {white-space:nowrap; color:#000; text-decoration:none; background:transparent; display:inline;}
.hov b a:hover {text-decoration:underline;}



.strong
{
    font-weight: bold;
    font-size: larger;
}

.hiddenfield
{
    visibility: hidden;
}

.inputBox
{
    border:#66CCDD solid 1px;
    padding: 4px;
    font-family: Comic Sans MS;
    font-size: 14px;
    background-color: #EEEEEE;
    -moz-border-radius: 1ex;
    -webkit-border-radius: 1ex;
}

.date
{
    padding-bottom: 10px;
}

blockquote p {
  font-style:italic;
  text-indent:0;
  white-space:pre-line;
  margin-left:0;
  margin-right:0;
}

input.txt
{

}

input.btn
{

}

textarea
{

}

/* Image alignment */
.floatleft {
  float:left;
  margin:20px 8px 3px 0;
}
.floatright {
  float:right;
  margin:3px 0 3px 8px;
}
.imgcentered {
  margin:3px auto;
  display:block;
}
.floatleft, .floatright, .imgcentered {
  font-weight:bold;
  text-align:center;
  padding: 2px;
  border:#B64926 solid 2px;
}
.floatleft img, .floatright img {
  display: block;
}

.rightFloat
{
    float: right;
}


/*Font sizes and styles in the text*/
.smallText
{
    font-size: small;
}

a:link, a:visited
{
    color: #993300;
    text-decoration: none;
}   

.textColour1
{
    font-size:inherit;
    color:Maroon;
}

.padding
{
    padding:  0px 10px 0px 10px;
}

/*  for rounding the div corners - uses CurvyCorners scripts*/
/*  Just need to include the class "rounded"                    */
.rounded
{
    -moz-border-radius: 1ex;
    -webkit-border-radius: 1ex;
    border: solid 1px gray;
}

/*for master Home page*/
.left 
{

  float: left;
  width: 410px;
  margin-left: 0px;
}

/*middle needs width declared for IE and Avant*/
.middle 
{
  margin-left: 420px;
  margin-right: 180px;
  width: 400px;
}

.right 
{

  float: right;
  width: 165px;
}

/*for master page with two column layout - MasterSingle - narrow right column*/

.centre
{
    float: left;
    width: 800px;
    margin: auto;
}

.centreText
{
    width: 700px;
    margin: auto;
}


/*for master page with wider right hand column - used on stories pages*/
.rightWider 
{
  float: right;
  width: 320px;
}

.centreWider
{
    float: left;
    width: 60%;
    margin: auto;
}

.centreTextWider
{
    
    margin: auto;
}

#leftContent
{
	background-color: ;
	padding: 4px;
}

.rightContent input
{

}

/* For the Create Story section*/
.editor textarea
{
    width: 360px;
    height: 200px;
    margin-top: 10px;
    border:#66CCDD solid 1px;
    padding: 4px;
    font-family: Comic Sans MS;
      font-size: 14px;
    background-color: #EEEEEE;
    -moz-border-radius: 1ex;
    -webkit-border-radius: 1ex;
  
}

.editorBeemieShow
{
    width: 370px;
    margin-top: 10px;
    border:#66CCDD solid 1px;
    padding: 4px;
}

.editorNarrow
{

}

.editorNarrow textarea
{

}

/*For the Read Story section*/
.scrollAreaRead {
    height: 500px;
    width: 380px;
    background-color: Transparent;
    overflow: auto;
    padding-bottom: 20px;
    padding-right: 10px;
 
}

.scrollAreaWrite {
    height: 420px;
    width: 385px;
    background-color: Transparent;
    overflow: auto;
}

.scrollAreaWrite table td
{
    font-size: 10px;
    color: Navy;
}

/*Forms - of different sizes*/
.formWrapperSmall input
{
    font-size:x-small;
  
}

.leftFormSmall
{

}

.rightFormSmall
{

}

#flashPlayerWrapper
{
    margin-top: 10px;
    font-size: small;
    color: Red;
}

#flashPlayerPlayer
{
    width: 100px;
}

#flashPlayerText
{
    width: 150px;
    float: left;
    margin-bottom: 5px;
}

/*Normal sized forms styled here*/
.formWrapperNormal
{
    width: 30em;

}

.leftFormNormal
{
    float: left;
    clear: both;
    width: 15em;
    margin-bottom: 0.2em;
}

.rightFormNormal
{
    float: right;
    width: 14em;
    margin-bottom: 0.2em;
}
  
/*Blog areas section*/
.blogTitle h1
{
    font-size: medium;
}

.blogHeader
{
    
}

.blogEntries
{
    padding: 3px;
}    

.entry a
{
    visibility:hidden;
    background-color:Transparent;
    text-decoration: none;
    border:0;
    padding: 0; 
}

.entry .entryTitle a
{
    visibility: visible;
    color: green;
    text-decoration: none;
    width: 150px;
}

.blogEntries .blogTitle
{
    visibility: hidden;
}

.blogHeader object
{
    visibility: hidden;
}

.entry entryTitle h3
{
    font-size: medium;
    color: #002A8B;
    visibility: visible;
    text-decoration: none;
}

.entryBody
{
    margin-top: -20px;
    font-size: small;
}

.entryBody p
{
    color: Navy;
    text-align:left; 
    line-height: 14px;   
}
h3 a:link,.entry a:hover,.entry a:visited
{
    text-decoration: none;
} 

.entryFooter
{
    font-size:x-small;
    color: Gray;
    margin-bottom: 5px;
}

/***********
Video Player settings here*/
#videoPlayer
{
     border: solid 2px gray;
}

.testWidth
{ 
    width: 100px;
}

/*Story text for the main story section*/
.storyText
{
    padding: 5px;
    -moz-border-radius: 2ex;
    -webkit-border-radius: 2ex;
    margin-bottom: 3px;
    margin-top: 5px;
}

/*used in the ratings sections - the five star useless ektron feature*/
.commentSmall
{
    font-size:small;
    color: Gray;
    padding-bottom: 1em;
}

.commentAuthor
{
        font-size:small;
    color: Gray;
    padding-top: 1em;
}

.commentContent
{
    font-size: medium;
    color: #993300;
    padding-bottom: 1em;
}

.commentWrapper
{
    border: solid 1px;
    background-color: #E8E8E8;
    padding: 1em;
}

element.style
{
    position: relative;
}

#[[ekkey]]Popup_Msg span
{
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}


/*****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.

Copyright 2006 – 2008 Mark Wubben, <http://novemberborn.net/>

Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.

This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/

@media screen {
  .sIFR-flash {
    visibility: visible !important;
  }
  
  .sIFR-replaced, .sIFR-ignore {

  }
  
  .sIFR-alternate {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    overflow: hidden;
  }
  
  .sIFR-replaced div.sIFR-fixfocus {
    margin: 0pt; 
    padding: 0pt; 
    overflow: auto; 
    letter-spacing: 0px; 
    float: none;
  }
}

@media print {
  .sIFR-flash {
    display    : none !important;
    height     : 0;
    width      : 0;
    position   : absolute;
    overflow   : hidden;
  }
  
  .sIFR-alternate {
    visibility : visible !important;
    display    : block   !important;
    position   : static  !important;
    left       : auto    !important;
    top        : auto    !important;
    width      : auto    !important;
    height     : auto    !important;
  }
}

/*
Place CSS rules for to-be-replaced elements here. Prefix by .sIFR-active
so they only apply if sIFR is active. Make sure to limit the CSS to the screen
media type, in order not to have the printed text come out weird.
*/
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */
}


/*begin tag cloud : generated by TagCrowd.com Feel free to modify as long 
as you keep this notice. This code and its rendered image are released under 
the Creative Commons Attribution-Noncommercial 3.0 
Unported License. http://creativecommons.org/licenses/by-nc/3.0/ 
For commercial use licensing, visit http://tagcrowd.com/licensing.html */

.tagCloud rounded
{
    width:30%;
    float: right;
    margin-top: 2em;
}

#htmltagcloud
{
     font-family:'lucida grande',trebuchet,'trebuchet ms',verdana,arial,helvetica,sans-serif;
     line-height:1.5em;
     word-spacing:normal;
     letter-spacing:normal;
     text-decoration:none;
     text-transform:none;
     text-align:center;
     text-indent:0ex;
     margin-bottom: 1em;
     padding: 1em;
}

#htmltagcloud a:link
{
    text-decoration:none;
}

#htmltagcloud a:visited
{
    text-decoration:none;
}

#htmltagcloud a:hover
{
    text-decoration:none;
    color:white;
    background-color:#05f;
}

#htmltagcloud a:active
{
    text-decoration:none;
    color:white;
    background-color:#03d;
}
span.tagcloud0
{
    font-size:0.6em;
    padding:0em;
    color:#ACC1F3;
    z-index:10;
    position:relative;
}
span.tagcloud0 a
{
    text-decoration:none;
     color:#395CAE;
}
span.tagcloud1
{
    font-size:0.65em;
    padding:0em;
    color:#cc0066;
    z-index:9;
    position:relative;
}
span.tagcloud1 a
{
    text-decoration:none;
    color:#cc0066;
}
span.tagcloud2
{
    font-size:0.75em;
    padding:0em;
    color:#395CAE;
    z-index:8;
    position:relative;
}
span.tagcloud2 a
{
    text-decoration:none;
    color:#395CAE;
}
span.tagcloud3
{
    font-size:0.85em;
    padding:0em;
    color:#395CAE;
    z-index:7;
    position:relative;
}
span.tagcloud3 a
{
    text-decoration:none;
    color:#395CAE;
}
span.tagcloud4
{
    font-size:0.9em;
    padding:0em;
    color:#395CAE;
    z-index:6;
    position:relative;
}
span.tagcloud4 a
{
    text-decoration:none;
    color:#395CAE;
}
span.tagcloud5
{
    font-size:0.95em;
    padding:0em;
    color:#006600;
    z-index:5;
    position:relative;
}
span.tagcloud5 a
{
    text-decoration:none;
    color:#006600;
}
span.tagcloud6
{
    font-size:1em;
    padding:0em;
    color:#395CAE;
    z-index:4;
    position:relative;
}
span.tagcloud6 a
{
    text-decoration:none;
    color:#395CAE;
}
span.tagcloud7
{
    font-size:1.05em;
    padding:0em;
    color:#395CAE;
    z-index:3;
    position:relative;
}
span.tagcloud7 a
{
    text-decoration:none;
    color:#395CAE;
}
span.tagcloud8
{
    font-size:1.1em;
    padding:0em;
    color:#264CA2;
    z-index:2;
    position:relative;
}
span.tagcloud8 a
{
    text-decoration:none;
    color:#264CA2;
}
span.tagcloud9
{
    font-size:1.15em;
    padding:0em;
    color:#ff3300;
    z-index:1;
    position:relative;
}
span.tagcloud9 a
{
    text-decoration:none;
    color:#ff3300;
}
span.tagcloud10
{
    font-size:1.2em;
    padding:0em;
    color:#cc0000;
    z-index:0;
    position:relative;
}
span.tagcloud10 a
{
    text-decoration:none;
    color:#cc0000;
}
span.freq
{
    font-size:10pt !important;
    color:#bbb;
}

/*These are the styles that hide and style some of the elements*/
/*of the Ektron profile stuff on MyProfile.aspx*/
/* hide many of the custom user properties in the profile*/
#ek_forumprop_label, #ek_dvforumprop, #ek_userlanguage_label, #ek_dvuserlanguage, #ek_dv3_label, 
#ek_dv3_hiddenData, #ek_dv34_label, #ek_dv34_hiddenData, 
#ek_dv36_label, #ek_dv36_hiddenData, #ek_dv38_label, #ek_dv38_hiddenData
{
    height: 0;
    display: none;
    visibility:hidden;
}


#ek_dv1_hiddenData
{
    margin-left: 20px;
    width: 300px;
}

#ek_dv1_hiddenData input
{
    margin-right:  10px;
}

#ek_dv1_label
{
    width: 74px;
}

#ek_dv1_hiddenData .important
{
    display: none;
}

/*Stu's snazzy border styles*/

.xsnazzy p, .zsnazzy p
{
    margin:0;
}

.xsnazzy {
background: transparent; 
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}

.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #444;
border-right:1px solid #444;

}
.xb1 {
margin:0 5px; 
background:#444;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;

}

.xboxcontent {
display:block; 
border:0 solid #444; 
border-width:0 1px; 
height:auto;

}

* html .xboxcontent {
height:1px;
}

.color_a {
background:#c9ba65;
color:#fff;
padding-left: 20px;
}
.color_b {
background:orange; 
color:#000;
}
.color_c {
background: #66CCDD ; 
color: #fff;
}
.color_d {
background:yellow; 
color:#000;
}

.color_a .sIFR-flash , .color_b .sIFR-flash, .color_c .sIFR-flash, .color_d .sIFR-flash
{
    visibility: visible !important;
    margin-left: 10px;
}

/*Stu's Krazy Korners - mainly for shadow and raised effects*/
#krazy_container {display:block; margin:25px; position:relative; background:#bcb; padding:50px 0;}
#krazy_container h2 {margin-bottom:1em;}
#krazy_container h3 {clear:both; margin-top:4em;}

/* Inset 3D Raised */
.raised {background: transparent; width:40%; margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block;  background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}



/* Inset 3D Curved */
.inset {background: transparent; width:40%; margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}


.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}

.teachContent
{
    margin-bottom:10px;
}

/*MESSAGES EMAIL SYSTEM*/
/*Basic front page and info page*/
#messHeader, #messMain, #messFooter, #messLeft, #messRight
{
    font-family:  Calibri, Comic Sans MS, Sans-Serif;
    font-size: 16px;
    padding: 10px;
    margin: 5px;
}

#messHeader input, #messMain input, #messFooter input, #messLeft input, #messRight input, #mailBody input, #mailBody textarea
{
    font-family: Calibri, Comic Sans MS, Sans-Serif;
    font-size: 16px;
}

#messHeader p, #messMain p, #messFooter p, #messLeft p, #messRight p
{
    font-family: Calibri, Comic Sans MS, Sans-Serif;
    font-size: 16px;
    text-align:left;
}

#messHeader
{
    text-align: left;
    height: 100px;
    background-color: #66CCFF;
    -moz-border-radius: 2ex;
    -webkit-border-radius: 2ex;
    margin-top: 20px;

}

#messWrapper
{

}

#messMain
{

    background-color: Silver;
    padding: 20px;
    -moz-border-radius: 2ex;
    -webkit-border-radius: 2ex;
}

#messFooter
{

    padding-top: 20px;
    clear: both;
}

#messLeft
{
    width: 150px;
    float: left;
    margin-top: 0;
    background-color: #66CCFF;
    -moz-border-radius: 2ex;
    -webkit-border-radius: 2ex;
}

#messRight
{

    margin-left: 180px;
    text-align: left;
    background-color: #66CCFF;
    -moz-border-radius: 2ex;
    -webkit-border-radius: 2ex;
}

#messLeft ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#messLeft li
{
	margin:30px 6px 0px 0;
	list-style:none;
}

#mailHeader
{
    width: 578px;
    background-image: url(images/barback.gif) repeat-y;
    border-top: solid 1px #6F9DD9;
    border-right: solid 1px #6F9DD9;
    border-left: solid 1px #6F9DD9;
    margin-bottom: 5px;
}

#mailBody
{
    border: solid 1px #6F9DD9;
    background-color:#BEDAFE;
    padding: 5px;
}


.largeButtons ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;

}

.largeButtons li
{
	float:left;
	margin:6px;
	width: 120px;
	height: 70px;
	list-style:none;
	background-color: ButtonFace;
	padding: 10px;
	border: ridge 1px gray;
	border-bottom-style:outset;
	border-left-style: outset;
	-moz-border-radius: 1ex;
    -webkit-border-radius: 1ex;
}



.largerButtons
{
	margin:6px;
	width: 440px;
	height: 25px;
	text-align:left;
	background-color: ButtonFace;
	padding: 10px;
	border: ridge 1px gray;
	border-bottom-style:outset;
	border-left-style: outset;
	-moz-border-radius: 1ex;
    -webkit-border-radius: 1ex;
}

.mediumButtons ul
{
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.mediumButtons li
{
	float:left;
	margin:6px;
	width: 265px;
	height: 100px;
	list-style:none;
	background-color: ButtonFace;
	padding: 10px;
	border: ridge 1px gray;
	border-bottom-style:outset;
	border-left-style: outset;
	-moz-border-radius: 1ex;
    -webkit-border-radius: 1ex;
}

.tchComment
{
    font-size: 14px;
}



.linkbtn a:link
{
    font-family: Comic Sans MS;
    color: Red;
}

/*for read popups on teacher email page*/

a.info 
{
    z-index: 24; 
    color: #000; 
    position: relative; 
    text-decoration: none;
}
a.info:hover 
{
    z-index: 25; 
    background-color: #CCC;
    color:#000;
}
a.info span 
{
    display: none
}
a.info:hover span 
{ 
    display: block; 
    left: 50px; 
    width: 600px; 
    color: #000; 
    border-bottom-style:outset;
    border-left-style: outset;
    -moz-border-radius: 1ex;
    -webkit-border-radius: 1ex;
    position: absolute; 
    background-color: #D2D8E0; 
    text-align: left;
    padding:3px;
}

/*Image gallery for thumbnails etc.*/
#gallery {width:728px; height:620px; padding:10px; border:1px solid #333; background: #CCCCCC; position:relative; margin-bottom:20px;}
#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:620px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:black; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
 
#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:hover b {position:absolute; left:-548px; top:0; width:548px; height:620px; text-align:center; background:#CCCCCC; z-index:20;}
#gallery ul li a:hover span {display:block; color:black; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:13px; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
 
#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-548px; top:0; width:548px; height:620px; text-align:center; background:#CCCCCC; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:black; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

.spacer
{
    margin-bottom: 20px;
}

#greetingTeacher
{
    font-weight: bold;
}