/*---- reference
Dark Blue = #002649; Light Blue = #4a79a4; all else = #666;
----*/
/*---- RESET ----*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

/* remember to define focus styles! */

:focus {outline: 0;}

/* tables still need 'cellspacing="0"' in the markup */

table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote {padding: 5px 40px 10px 40px; font-size: 1.1em;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
ul {list-style-type: none;}
ul.disc {list-style-type: disc; margin-left: 30px; color: #666;}


/*---- GLOBAL ----*/

body {font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-size: 62.5%; background: url('../images/bodybg.png') 0 0 repeat-x;}
body.index {background: url('../images/bodybgIndex.png') 0 0 repeat-x;}
.wrapper {margin: 0px auto;}
.clear {clear: both;}
.red {border: 1px solid red;}
.pink {background: pink;}
em {font-style: italic;}
strong {font-weight: bold;}
.center {text-align: center;}
.floatRight {float: right;}
.floatLeft {float: left;}

/*---- TYPOGRAPHY ----*/

p {font-size: 1.2em; margin-bottom: 1em; color: #666;}
a:link, a:visited {text-decoration: none; color: #4a79a4; font-weight: bold;}
a:hover, a:active {color: #002649;}
h2 {font-size: 1.4em; margin: 1.2em 0 1em 0; color: #002649;}
h4 {text-transform: uppercase; font-size: 1.1em; font-weight: bold; color: #4a79a4; margin-bottom: 7px;}

/*---- IMAGES ----*/

img.floatRight {margin: 0 5px 10px 10px; padding: 2px; border: 1px solid #666;}
img.floatLeft {margin: 10px 5px; padding: 2px;}
img.highlightLeft {border: 1px solid #666; margin: 0 10px 10px 0; padding: 2px; float: left; width: 175px;}
img.highlightRight {border: 1px solid #666; margin: 0 5px 10px 10px; padding: 2px; float: right; width: 175px;}

/*---- HEADER ----*/

#header {height: 70px; background: url('../images/navbg.png') 10px left repeat-x;}
#headerIndex {height: 70px; background: #fff;}
h3.logo, h3.logoIndex {height: 70px; width: 220px; position: relative; font-size: .5em; color: #002649; float: right; margin-top: 0;}
h3.logo a, h3.logoIndex a {display: block;}
h3.logo a span {height: 70px; width: 220px; position: absolute; top: 0; left: 0; background: url('../images/sprite.png') -10px -80px no-repeat;}
h3.logoIndex a span {height: 70px; width: 220px; position: absolute; top: 0; left: 0; background: url('../images/sprite.png') -10px -10px no-repeat;}

/*---- INDEX FEATURE NAV ----*/

#indexFeature {height: 340px;}

#nav {width: 120px; height: 220px; background: transparent url('../images/navbg.png') 10px left no-repeat;}
#navIndex {width: 120px; height: 220px; background: transparent url('../images/navbgIndex.png') 10px left no-repeat;}
#nav ul, #navIndex ul {list-style-type: none; height: 220px;}
#nav li, #navIndex li {height: 24px; width: 110px; position: relative; font-size: .5em;}
#nav li a, #navIndex li a {display: block;}
#nav li span, #navIndex li span {height: 24px; width: 110px; position: absolute;}
#nav li.tall, #nav li.tall span, #navIndex li.tall, #navIndex li.tall span {height: 38px;}

span.homeIndex {background: url('../images/sprite.png') -10px -180px no-repeat;}
span.homeIndexOn:hover, span.homeIndexOn {background: url('../images/sprite.png') -120px -180px no-repeat;}
span.home {background: url('../images/sprite.png') -10px -400px no-repeat;}
span.home:hover, span.homeOn {background: url('../images/sprite.png') -120px -400px no-repeat;}

span.aboutIndex {background: url('../images/sprite.png') -10px -204px no-repeat;}
span.aboutIndex:hover, span.aboutIndexOn {background: url('../images/sprite.png') -120px -204px no-repeat;}
span.about {background: url('../images/sprite.png') -10px -424px no-repeat;}
span.about:hover, span.aboutOn {background: url('../images/sprite.png') -120px -424px no-repeat;}

span.adaptIndex {background: url('../images/sprite.png') -10px -228px no-repeat;}
span.adaptIndex:hover, span.adaptIndexOn {background: url('../images/sprite.png') -120px -228px no-repeat;}
span.adapt {background: url('../images/sprite.png') -10px -448px no-repeat;}
span.adapt:hover, span.adaptOn {background: url('../images/sprite.png') -120px -448px no-repeat;}

span.testimonyIndex {background: url('../images/sprite.png') -10px -252px no-repeat;}
span.testimonyIndex:hover, span.testimonyIndexOn {background: url('../images/sprite.png') -120px -252px no-repeat;}
span.testimony {background: url('../images/sprite.png') -10px -472px no-repeat;}
span.testimony:hover, span.testimonyOn {background: url('../images/sprite.png') -120px -472px no-repeat;}

span.educatorIndex {background: url('../images/sprite.png') -10px -290px no-repeat;}
span.educatorIndex:hover, span.educatorIndexOn {background: url('../images/sprite.png') -120px -290px no-repeat;}
span.educator {background: url('../images/sprite.png') -10px -510px no-repeat;}
span.educator:hover, span.educatorOn {background: url('../images/sprite.png') -120px -510px no-repeat;}

span.linksIndex {background: url('../images/sprite.png') -10px -328px no-repeat;}
span.linksIndex:hover, span.linksIndexOn {background: url('../images/sprite.png') -120px -328px no-repeat;}
span.links {background: url('../images/sprite.png') -10px -548px no-repeat;}
span.links:hover, span.linksOn {background: url('../images/sprite.png') -120px -548px no-repeat;}

span.newsIndex {background: url('../images/sprite.png') -10px -352px no-repeat;}
span.newsIndex:hover, span.newsIndexOn {background: url('../images/sprite.png') -120px -352px no-repeat;}
span.news {background: url('../images/sprite.png') -10px -572px no-repeat;}
span.news:hover, span.newsOn {background: url('../images/sprite.png') -120px -572px no-repeat;}

/*---- INDEX FEATURE SLIDER STYLING ----*/

div#featureSliderContent {width:300px; margin: 20px 40px 0 25px; color: #fff;}
div#featureSliderContent p {color: #fff;}
div#featureSliderContent h1 {font-size: .5em; color: #4a79a4; height: 20px; width: 240px; position: relative;}
div#featureSliderContent h1 span {height: 20px; width: 240px; position: absolute; top: 0; left: 0;}
div#featureSliderContent h1 span.testimony {background: url('../images/sprite.png') -230px -400px no-repeat;}
div#featureSliderContent h1 span.lesson {background: url('../images/sprite.png') -230px -445px no-repeat;}
div#featureSliderContent h2 {font-size: 1.5em; font-weight: bold; margin: 2px 0 15px 0; color: #fff;} 
div#featureSliderContent h3 {font-size: .5em; color#4a79a4; height: 20px; width: 120px; position: relative;}
div#featureSliderContent h3 span {height: 20px; width: 120px; position: absolute; top: 0; left: 0;}
div#featureSliderContent h3 span.description {background: url('../images/sprite.png') -230px -425px no-repeat;}
div#featureSliderContent a:hover, div#featureSliderContent a:active {color: #fff;}

div#featureSliderImage img {width: 310px; border: 15px solid #fff; margin-top: 40px;}

/*---- INDEX EXTRAS ----*/

#indexExtra {margin-top: 20px;}
#indexExtraLeft {padding-right: 10px;}
#indexExtraRight {padding-right: 10px;}
#indexCalendar {padding-left: 50px;}


/*---- MIDDLE CONTENT ----*/

div#middleContent {margin: 20px 10px 20px 10px; padding-right: 15px; border-right: 1px dotted #ccc; }
.firstLine {color: #4a79a4; text-transform: uppercase;}

ul.lesson {font-size: 1.2em; margin-left: 20px; margin-bottom: 15px; color: #666; list-style-type: disc;}
ul.lesson li {margin-bottom: 7px;}
ul.lesson li a {text-decoration: underline;}

ul.bios {font-size: 1.2em; float: left; width: 150px; margin-right: 20px;}
ul.bios li {margin-bottom: 7px;}

ul.links {font-size: 1.2em; margin-right: 30px;}
ul.links li {margin-bottom: 7px;}

ol {font-size: 1.2em; margin-left: 30px; margin-bottom: 20px; color: #666;}
ol ol {font-size: 1em; margin-top: 10px; list-style-type: lower-alpha;}
ol li {margin-bottom: 5px;}

p.download {text-align: center;}
p.download a {text-decoration: underline; color: #002649;}
p.download a:hover {color: #4a79a4;}

.notes {font-size: .9em;}
.notes a {color: #4a79a4; text-decoration: underline;}

/*---- SIDEBAR ----*/

div#sideBar {margin-top: -10px; text-align: right; padding-right: 0; margin-left: 10px; _margin-left: 0px;}
div#sideBar h1 {margin-top: 30px;}
div#sideBar p {width: 100%; margin-left: 15px;}

div#sideBar ul {margin-bottom: 10px; font-size: 1.2em; margin-right: -15px; _margin-right: 0;}
div#sideBar ul li, div #sideBar ul li a:hover {margin-bottom: 4px; color: #4a79a4;}
div#sideBar ul li a {color: #002649;}

/*---- TITLES ----*/

h1 {height: 24px; width: 230px; position: relative; font-size: .5em; color: #002649; margin-bottom: 7px; display: block;}
h1 span {height: 24px; width: 230px; position: absolute; top: 0; left: 0; display: block;}
h1.wide, h1.wide span {width: 540px;}
h1.tall, h1.tall span {height: 44px;}
h1 span.about {background: url('../images/sprite.png') -230px -10px no-repeat;}
h1 span.latestNews {background: url('../images/sprite.png') -230px -35px no-repeat;}
h1 span.calendar {background: url('../images/sprite.png') -230px -60px no-repeat;}
h1 span.aboutShoah {background: url('../images/sprite.png') -230px -110px no-repeat;}
h1 span.aboutInitiative {background: url('../images/sprite.png') -230px -10px no-repeat;}
h1 span.aboutCALS {background: url('../images/sprite.png') -230px -155px no-repeat;}
h1 span.calendarRight {background: url('../images/sprite.png') -230px -335px no-repeat; width: 255px; _width: 240px;}
h1 span.newsRight {background: url('../images/sprite.png') -230px -310px no-repeat; width: 255px; _width: 240px;}
h1 span.linksRight {background: url('../images/sprite.png') -230px -360px no-repeat; width: 255px; _width: 240px;}
h1 span.adapt {background: url('../images/sprite.png') -230px -285px no-repeat;}
h1 span.testimonyBios {background: url('../images/sprite.png') -230px -180px no-repeat;}
h1 span.educatorResources {background: url('../images/sprite.png') -230px -210px no-repeat;}
h1 span.links {background: url('../images/sprite.png') -230px -85px no-repeat;}

/*---- FOOTER ----*/
.push {height: 150px;}
#footer {height: 150px; background: #fff;}
#footer h3 {height: 30px; width: 90px; position: relative; font-size: .5em; color: #002649; float: left; margin: 0 10px 0 0;}
#footer h3 a {display: block;}
#footer h3 a span {height: 30px; width: 90px; position: absolute; top: 0; left: 0; background: url('../images/sprite.png') -10px -150px no-repeat;}
#footerContent {padding-top: 10px;}
#footerContent p {color: #4a79a4; font-size: 1em; letter-spacing: 1px; padding-top: 10px;}
#footerSponsors {}
#footerSponsors img {float: left; margin: 5px 0 0 5px;}


/*---- FORMS ----*/

fieldset {margin: 20px 0; padding: 1em 0; border: 1px solid #ccc; background: #e6e6e6;} 
fieldset div#entry {margin: 0 0 10px 20px; float: left;}
fieldset div.top {margin-top: 15px;}
div#entry p {color: #000;}
legend {font-size: 1.4em; line-height: 1.4em; color: #4a79a4; font-weight: bold;}
label {display: block; font-size: 1.2em; line-height: 1.2em; margin-bottom: 5px;} 
.school {width: 500px; height: 1.5em;}
.address {width: 500px; height: 1.5em;}
.email {width: 320px; height: 1.5em;}
.text {width: 150px; height: 1.5em;} 
.radio {width: auto; margin-right: 2em;} 
textarea {width: 500px;}