/* John Masefield High School
  Base Stylesheet */

html *{  /* master reset trick */
 border: none;
 margin: 0px;
 padding: 0px;
}
body{
 font-size: 0.7em;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
 padding-bottom: 12px;
 padding-top: 12px;
}

p {
	font-size: 1.0em;
	margin: 6px 16px 15px 0;
}

h1{
 color: #2B5BB6;
 font-size: large;
 margin-bottom:15px;
}
h2{
 color: #2B5BB6;
 font-size: medium;
 padding-top: 1%;
}
h3{
 color: #000;
 font-size: small;
 padding-top: 1%;
}
a {
 text-decoration: underline;
 color:#2B5BB6 ;
}
a:link{
 color: #2B5BB6;
}
a:visited{
 color: #2B5BB6;
}
a:hover{
 text-decoration: underline;
 color: #A52A2A ;
}
a:active{
 color: #A52A2A; 
}
ul{
 margin-left: 32px;
}
em{
 font-family: Verdana, Arial, sans-serif;
 font-style: italic;
 font-weight: bold;
 color: #444;
}
acronym{
 border-bottom: 1px dotted #666;
 cursor: hand;
}
.imgright{
 border: 1px solid #2B5BB6;
 margin: 12px 0 0 12px;
 float: right;
}
/* *** Page Structure Styles ******************** */
#pageBG {
 margin: 12px auto;
 width: 762px;
 background-color: #FFF;
}
/* non-IE only */
body>#pageBG{
 padding: 1px;
 margin: 6px auto;
}
#pageEnvelope{
 margin: 12px; 
 border: 1px solid #2B5BB6;
}
#pageHeader{
 background: url(../images/headerBG.jpg) #1F3773 no-repeat left top;
 height: 117px;
 border-bottom: 1px solid #2B5BB6;
}
#pageHeader img{
 margin-left: 12px;
}
#barMenu { /* :-)*/
 height: 20px;
 background-color:#FFCF01;
 margin-top: 2px;
 margin-bottom: 2px;
}
#barMenu ul{
 margin-top: 2px;
 margin-left:220px;
 padding-right: 6px;
 border-left: 1px solid #FFF;
}
#barMenu li{
 list-style-type: none;
 display: inline;
 border-right: 1px solid #FFF;
}
#barMenu li a{
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bold;
 color: #1F3773;
 text-decoration: none;
 padding: 0px 8px;
}
#barMenu li a:hover{
 color: #FFF;
 text-decoration: underline;
}
#pageWrap{
 background: url(../images/menuBG.jpg) #FFF repeat-y 2px top;
 border-top: 2px solid #1F3773;
}
/* IE only */
* html #pageWrap{
 background-position: 4px top; 
}
#navMenuWrap {
 background: url(../images/menuTOP.jpg) #FFF no-repeat left top;
 float: left;
 position: relative;
 margin-top: -41px;
 margin-left: 2px;
 text-align: left;
 width: 200px;
}
#navMenu{
 background: url(../images/menuBG.jpg) #FFF repeat-y left top;
}
#navMenu ul {
 border-top: #EDEDED 1px solid;
 list-style-type: none;
 text-align: left;
 margin-left: 10px;
 width: 180px;
}
#navMenu li{
 border-bottom: #EDEDED 1px solid;
}
#navMenu li a {
 color: #444;
 background-color: #FFF;
 letter-spacing: 0.1em;
 display: block;
 padding: 7px 4px 7px 12px;
 margin: 0px;
 text-decoration: none;
 width: 165px;
}
#navMenu li a:link{
 text-decoration: none;
}
#navMenu li a visited{
 text-decoration: none;
}
#navMenu li a:active{
 text-decoration: none;
}
#navMenu li a:hover {
 text-decoration: underline;
 color: #2B5BB6;
 background-color: #EDEDED;
}
#navMenu li a.selected{
 background-color: #EEEEFF;
}

/* *** Search Styles ************************** */
#search{
 padding-top: 24px;
 padding-bottom: 12px;
}
#search h2, #navMenu h2{
 color: #2B5BB6;
 font-size: 1.2em;
 letter-spacing: 0.2em;
 font-weight: normal;
 padding-left: 16px;
 margin-bottom: 6px;
}
#ajaxSearch_input {
 border: #1F3773 1px solid;
 color: #666;
 margin-left: 16px;
 padding: 3px 1px 3px 2px; 
 width: 140px;
 font-size: x-small;
}
#ajaxSearch_submit {
 color: #1F3773;
 background: #FFCF01;
 padding: 3px;
 font-size: x-small;
}
.ajaxSearch_highlight {
 background: #FFE780;
}

#pageContent{
 margin-left: 208px;
 width: 524px;
}
#contentBody{
 padding: 12px 12px 32px 22px;
}
#contentBody a{
 text-decoration: underline;
}
#pageBtm{
 background: url(../images/menuBTM.jpg) transparent no-repeat 62px center; 
}
#contentFooter{
 margin-left: 208px;
 margin-right: 6px;
 padding: 8px 12px 8px 22px;
 font-size: x-small;
 color: #666;
 border-top: 1px solid #B9D1F8;
}
#pageFooter{
 border-top: 1px solid #1F3773;
 background-color: #1F3773;
}
#footerBar{
 padding-left: 228px;
 color: #FFF;
 background-color: transparent;
 line-height: 0.9em;
 padding-top: 12px;
 padding-bottom: 12px;
 border-top: 6px solid #FFCF01;
}
#footerBar p{
	margin: 15px 0 0;
}

#footerBar a:link, #pageFooter a:visited {
 color: #FFF;
 text-decoration: none;
}
#footerBar a:hover, #footerBar a:active {
 color: #FFCF01;
 text-decoration: underline;
}
/* *** Content Styles ************************* */
#masthead{
 background-color: #EEEEFF;
 border-bottom: 1px solid #B9D1F8;
 margin-right: 6px;
 margin-top: 3px;
 padding: 18px 12px 24px 22px;
}
#masthead h2#tagline{
 background: url(../images/taglineBG.jpg) transparent no-repeat left 2px;
 color: #2B5BB6;
 margin: 2px 6px;
 padding-left: 42px;
 line-height: 32px;
}
#masthead img{
 float: right;
 margin: 6px;
 border: 1px solid #1F3773;
}
#masthead a{
 background: url(../images/linkBullet_Blue.jpg) transparent no-repeat left 5px;
 padding-left: 18px;
}
.imgWrapper{
 margin-top: 12px;
}
.imgWrapper img{
 border: 1px solid #1F3773;
}
.imgWrapper .imgCaption{
 font-size: xx-small;
 font-style: italic;
 letter-spacing: 1px;
}

/* CMS News Article */
.newsArticle{
 background: url(../images/linkBullet_Yellow.jpg) transparent no-repeat left 6px;
 padding-left: 18px;
}
.newsArticle a{
 font-size: small;
 font-weight: bold;
}
.newsArticle p a{
 font-weight: normal;
 font-size: 1em;
}
/* CMS News Article ends */

.newsItem{
 background: url(../images/linkBullet_Yellow.jpg) transparent no-repeat left 6px;
 padding-left: 18px;
}
.newsItem a{
 font-size: small;
 font-weight: bold;
}
.newsItem p a{
 font-weight: normal;
 font-size: 1em;
}

.subItem{
 background: url(../images/linkBullet_Yellow.jpg) transparent no-repeat left 8px;
 padding-left: 18px;
 margin: 12px 0px;
}
.subItem a{
 font-size: medium;
 font-weight: bold;
}
.docItem{
 background: url(../images/linkBullet_Blue.jpg) transparent no-repeat left 6px;
 padding-left: 18px;
 margin: 12px 0px;
}
.docItem h3 {
 color: #2B5BB6;
 padding-top: 0;
}
.docItem a{
 font-size: small;
 font-weight: bold;
}
.docItem p{
 margin: 0px;
}
.docItem .docSpec{
 color: #999;
}
table{
 width: 100%;
 border-collapse: collapse;
 border: 1px solid #B9D1F8;
}
th {
 background-color: #EEF;
 color: #000;
 text-align: left;
 border: 1px solid #B9D1F8;
 vertical-align: top;
 font-weight: bold;
 padding: 4px;
}
td{
 border-bottom: 1px solid #B9D1F8;
 padding: 4px;
/* text-align: left; */
 vertical-align: top;
}
caption{
 text-align: left;
 font-size: small;
 font-weight: bold;
 padding: 4px;
}
.appointment{
 margin: 12px 0px;
}
.appointment table{
 width: 95%;
 border-collapse: collapse;
 border: 1px solid #B9D1F8;
}
.appointment th{
 width: 20%;
}
.appointment td{
 width: 80%;
}
.appointment caption{
 color: #2B5BB6;
 background-color: #EEF;
 border: 1px solid #B9D1F8;
}
.contact{
 margin: 12px 0px;
}
.contact table{
 width: 80%;
 border-collapse: collapse;
 border: 1px solid #B9D1F8;
 vertical-align: top;
}
.contact th{
 width: 20%;
}
.contact td{
 width: 80%;
}
.contact caption{
 color: #1F3773;
}
#events table{
 width: 100%;
 border: 1px solid #B9D1F8;
}
#events th{
 width: 20%;
 background-color: #DDD;
 color: #000;
 text-align: left;
 border: 1px solid #B9D1F8;
 vertical-align: top;
 font-weight: normal;
 padding: 4px;
 font-size: 11px;
}
#events th span{
 font-weight: bold;
 font-size: 16px;
 color: #1F3773;
}
#events td{
 width: 80%;
 border-bottom: 1px solid #B9D1F8;
 padding: 4px;
 text-align: left;
 vertical-align: top;
}
#events td.eventTitle{
 background-color: #EEF; 
}
#events caption{
 text-align: left;
 font-size: x-small;
 font-weight: bold;
 color: #1F3773;
 padding: 2px;
}
#events{
 border-right: 1px solid #1F3773;
 width: 334px;
}
#calendarWrap{
 border: 1px solid #1F3773;
 height: 100%;
 min-height: 100%;
}
#calendarCTRL{
 float: right;
 width: 150px;
}
.calendar{
 background-color: #FFF;
 border-collapse: collapse;
 font-family: Arial, sans-serif;
 font-size: 9px;
 width: 150px;
 border: none;
}
.calendar * {
 border: none;
 padding: 1px;
 margin: 0px;
 text-align: center;
}
.calendar .selectedDay{
 background-color: #2A5BB6;
 color: #FFF;
}
.calendar .todayDay{
 border: 1px solid red;

}
a.external{
 padding-right: 11px;
 height: 1.0em;
 background: url(../images/icoExternal.gif) no-repeat top right;
}
#pageFooter a.external{
 background: url(../images/icoExternalFFF.gif) no-repeat top right;
 padding-right: 11px;
}
#pageFooter a.external:link, #pageFooter a.external:visited {
 text-decoration: none;
}
#pageFooter a.external:hover, #pageFooter a.external:active {
 text-decoration: underline;
}

#nerv
{ margin-top:6px; }
#nerv a:link, #nerv a:visited, #nerv a:active
{ text-decoration:none; font:10px Arial,Helvetica,Sans-Serif; color:#b1b3b6; }
#nerv a:hover
{ color:#ed0c8d; }

/* *** Misc Styles *************************** */

#breadcrumb{
 background-color: #FFF;
 font-size: x-small;
 color: #999;
 margin-bottom: 12px;
}
#breadcrumb a {
 text-decoration: underline;
 color:#999 ;
}
#breadcrumb a:hover{
 color: #2B5BB6;
}
#breadcrumb a:active{
 color: #2B5BB6; 
}
p.toTop{
 background: url(../images/icoTop.gif) no-repeat top right;
 width: 6.5em;
 margin-top: 12px;
 padding: 6px 8px 3px 0px;
}
p.printMe{
 background: url(../images/icoPrint.gif) no-repeat top left;
 margin-top: 12px;
 padding: 6px 0px 6px 32px;
}
.clearFloat{
 clear: both;
 display: block;
 float: none;
 font-size: 1px;
 height: 1px;
 line-height: 1px;
 overflow: hidden;
}
.getAcrobat{
  color:#666;
  margin-top: 12px;
  padding: 15px 0px;
  width: 80%;
}
.getAcrobat img {
   min-height: 31px;
   height: 31px;
   float: left; 
   border: none;
   padding: 0px 4px 4px 4px;
} 
.hidden {
 height: 1px! important;
 left: -6000px! important;
 position: absolute! important;
 top: -6000px! important;
 width: 1px! important;
}
.editablebox {
 border: 1px dashed #ff0000;
 padding:2px;
}

/* ------- menu ------- */
#menu1, #menu1 ul {padding:0; margin:0; list-style:none;}
#menu1 li { float:left; margin:0; padding:0;}
#menu1 a { display:block; margin:0; padding:0;}

/* initial submenu position */
#menu1 li ul { position:absolute;  left:-999em; margin:0; border:1px solid #ededed;}

/* submenu style */
#menu1 li ul li {  border-right:1px solid #ededed;}
#menu1 li ul .first { margin:0;  padding-top:7px; }
#menu1 li ul .last { padding-bottom:10px; }
#menu1 li ul li a { color:#000; text-decoration:none; padding: 7px 4px 7px 12px;}
#menu1 li ul a:hover { background: #ededed; }

/* following allows four drop-down levels */
#menu1 li:hover ul ul,
#menu1 li:hover ul ul ul,
#menu1 li:hover ul ul ul ul,
#menu1 li.sfhover ul ul,
#menu1 li.sfhover ul ul ul,
#menu1 li.sfhover ul ul ul ul { left:-999em; }

#menu1 li:hover ul,
#menu1 li li:hover ul,
#menu1 li li li:hover ul,
#menu1 li li li li:hover ul,
#menu1 li.sfhover ul,
#menu1 li li.sfhover ul,
#menu1 li li li.sfhover ul,
#menu1 li li li li.sfhover ul { left:auto; margin-left:157px; margin-top:-31px;}