/* Global styles */

body, body * {
margin : 0;
padding : 0;
font-family : Helvetica, Arial, Tahoma, sans-serif;
}

body {
background : url(img/bg_sidebar.gif) repeat-y;
font-size : 80%;
}

p, li {
line-height : 150%;
}

#header {
height : 100px;
background : #fff;
width : 769px;
border-bottom : 1px solid #000;
border-right : 1px solid #000;
}

#content {
width : 549px;
border-right : 1px solid #000;
padding-left : 220px;
background : url(img/accent_bott.gif) no-repeat 0 bottom;
padding-bottom : 40px;
padding-top : .75em;
}

#keypeople, #keyingin, #keyresources {
margin-bottom : 3em;
}

#footer {
position : relative;
width : 770px;
background : #fff;
border-top : 1px solid #000;
padding-bottom : 30px;
}

p {
margin-bottom : 1em;
}

/* Header area */

#osuext {
margin : 4px;
}

#logo4h {
position : absolute;
top : 18px;
left : 105px;
}

#titleheader {
position : absolute;
left : 221px;
top : 15px;
}

/* Footer area */
#address {
position : absolute;
top : 5px;
left : 5px;
}

#phone {
position : absolute;
top : 5px;
right : 5px;
}

/* Navigation */

#nav {
position : absolute;
top : 121px;
left : 4px;
width : 200px;
}

#nav h2 {
background : url(img/nav_head_keys.gif) no-repeat 5px 0;
padding-top : 51px;
}

#nav ul, #nav ul li {
list-style : none;
}

#nav li {
margin-bottom : 15px;
}

#nav li a {
display : block;
height : 0 !important;
overflow : hidden;
padding-top : 31px;
}

#nav li a:hover, #hp li a.step1, #step2 li a.step2, #step3 li a.step3, #step4 li a.step4, #step5 li a.step5, #step6 li a.step6, #step7 li a.step7, #step8 li a.step8 {
background-position : 0 -31px;
}

a.osu {
display : block;
height : 0 !important;
overflow : hidden;
padding-top : 19px;
background : url(img/link_osu_4h_home.gif) no-repeat;
margin-left : 15px;
}

a.osu:hover {
background-position : 0 -19px;
}

a.step1 {
background : url(img/link_step1.gif) no-repeat;
}

a.step2 {
background : url(img/link_step2.gif) no-repeat;
}

a.step3 {
background : url(img/link_step3.gif) no-repeat;
}

a.step4 {
background : url(img/link_step4.gif) no-repeat;
}

a.step5 {
background : url(img/link_step5.gif) no-repeat;
}

a.step6 {
background : url(img/link_step6.gif) no-repeat;
}

a.step7 {
background : url(img/link_step7.gif) no-repeat;
}

a.step8 {
background : url(img/link_step8.gif) no-repeat;
}

/* Headings */

h1 {
margin-bottom : .3em;
height : 0 !important;
overflow : hidden;
}

body#hp h1 {
padding-top : 44px;
background : url(img/h1_step1.gif) no-repeat;
margin-left : 100px;
}

body#step2 h1 {
padding-top : 24px;
background : url(img/h1_getting_started.gif) no-repeat 50% 0;
}

body#step3 h1 {
padding-top : 44px;
background : url(img/h1_nuts_bolts.gif) no-repeat 50% 0;
}

body#step4 h1 {
padding-top : 24px;
background : url(img/h1_conducting_meetings.gif) no-repeat 50% 0;
}

body#step5 h1 {
padding-top : 24px;
background : url(img/h1_planning_program.gif) no-repeat 50% 0;
}

body#step6 h1 {
padding-top : 49px;
background : url(img/h1_ages_stages.gif) no-repeat 50% 0;
}

body#step7 h1 {
padding-top : 48px;
background : url(img/h1_making_learning_fun.gif) no-repeat 50% 0;
}

body#step8 h1 {
padding-top : 48px;
background : url(img/h1_developing_assets.gif) no-repeat 50% 0;
}


h2, h3 {
height : 0 !important;
overflow : hidden;
padding-top : 24px;
margin-bottom : 10px;
}

h4 {
margin : 10px 0;
}

#column1 h2 {
background : url(img/h2_why_key.gif) no-repeat;
}

#column2 h2 {
background : url(img/h2_keys_understanding.gif) no-repeat;
}

#keypeople h3 {
background : url(img/h3_key_people.gif) no-repeat;
}

#keyingin h2 {
background : url(img/h2_keying_in.gif) no-repeat;
}

#keyresources h2 {
background : url(img/h2_key_resources.gif) no-repeat;
}

#safety h2 {
background : url(img/h2_words_safety.gif) no-repeat;
}

#moretips h2 {
background : url(img/h2_more_tips.gif) no-repeat;
}

#teachingoutlines h2 {
background : url(img/h2_teaching_outlines.gif) no-repeat;
}

#teachingoutlines ol {
margin-left : 25px;
margin-bottom : 1em;
}

#teachingoutlines li {
margin-bottom : .75em;
}

#youngchildren, #schoolage, #highschool {
margin-bottom : 3em;
}

#youngchildren h2 {
background : url(img/h2_young_children.gif) no-repeat;
padding-top : 45px;
}


#youngchildren ul, #schoolage ul, #highschool ul {
margin-left : 20px;
margin-bottom : 2em;
}

#schoolage h2 {
background : url(img/h2_school_age.gif) no-repeat;
padding-top : 45px;
}

#highschool h2 {
background : url(img/h2_high_school.gif) no-repeat;
padding-top : 45px;
}

h4#externalassets {
height : 0 !important;
overflow : hidden;
background : url(img/h4_external_assets.gif) no-repeat;
padding-top : 18px;
}

h4#internalassets {
height : 0 !important;
overflow : hidden;
background : url(img/h4_internal_assets.gif) no-repeat;
padding-top : 18px;
}

/* Content */

#sectionintro {
padding : 0 55px;
text-align : center;
font-size : 110%;
font-style : italic;
font-weight : bold;
margin-bottom : 1em;
}

#column1, #column2 {
width : 240px;
float : left;
margin-bottom : 3em;
}

#step2 #column1, #step2 #column2, #step3 #column1, #step3 #column2, #step4 #column1, #step4 #column2, #step5 #column1, #step5 #column2, #step6 #column1 {
float : none;
width : 520px;
}

#step2 #column2 h4, #step3 #column2 h4 {
margin-bottom : .75em;
}

#step2 #column2 ul, #step3 #column2 ul {
margin-left : 10px;
}

#step2 #column2 ul li ul, #step2 #column2 ul li p, #step3 #column2 ul li ul, #step3 #column2 ul li p, #safety ul , #safety ul li, #moretips ul, #moretips ul li {
margin-left : 10px;
}

#column1 {
margin-right : 28px;
}

#column2 {
margin-right : 20px;
}

#column1 ul, #column1 ul li {
list-style : none;
}

#column2 ul, #column2 ul li {
list-style : none;
}

#column1 li, #column2 li, #safety li, #moretips li {
margin-bottom : .75em;
}

#column1 ol {
margin-left : 30px;
}

#safety, #moretips {
margin-bottom : 3em;
}

#developmentalassets {
clear : both;
width : 530px;
margin-bottom : 3em;
}

#developmentalassets h4 {
margin-top : 2em;
}

#developmentalassets ol {
margin-left : 20px;
}

#developmentalassets li {
margin-bottom : .75em;
}

#keypeople {
clear : both;
width : 530px;
background : url(img/holding_key.gif) no-repeat 300px 0;
padding-top : 20px;
}

#keyingin {
width : 530px;
background : url(img/key.gif) no-repeat 105px 5px;
padding-top : 20px;
}

#keyingin div {
margin-bottom : 1em;
}

#keyingin ol {
margin-left : 35px;
margin-right : 55px;
margin-bottom : 2em;
}

#keyingin label {
font-weight : bold;
}

#keyingin textarea, #keyingin input {
margin-top : 5px;
}

#worksheet {
padding : 5px;
}

#worksheet li {
margin-bottom : .75em;
}

.title {
font-weight : bold;
}

.hook {
font-weight : bold;
}


/* Forms */

/* -- global */

#contactinfo {
padding : 5px;
margin-bottom : 15px;
}

#contactinfo legend {
color : #363;
font-weight : bold;
}

#contactinfo table {
width : 100%;
background : #efe;
}

#contactinfo th {
text-align : right;
width : 105px;
padding : 3px;
}

/* -- home page */
#hp #keyingin select {
margin-right : 5px;
}

#hp #keyingin li {
margin-bottom : 1em;
}

#hp #keyingin label {
}

.wordlist {
color : #900;
font-weight : bold;
text-align : center;
margin : 10px 50px;
}

/* Key Resources */

#keyresources ul, #keyresources li {
list-style : none;
}

#keyresources li {
margin-left : 10px;
margin-bottom : .75em;
}


/* Accents */

#carryingkey {
position : relative;
height : 110px;
}

#carryingkey img {
position : absolute;
top : 25px;
left : 170px;
}

#number {
position : absolute;
top : 5px;
left : 380px;
width : 36px;
height : 0 !important;
padding-top : 45px;
overflow : hidden;
}

body#hp #number {
background : url(img/num1.gif) no-repeat;
}

body#step2 #number {
background : url(img/num2.gif) no-repeat;
}

body#step3 #number {
background : url(img/num3.gif) no-repeat;
}

body#step4 #number {
background : url(img/num4.gif) no-repeat;
}

body#step5 #number {
background : url(img/num5.gif) no-repeat;
}

body#step6 #number {
background : url(img/num6.gif) no-repeat;
}

body#step7 #number {
background : url(img/num7.gif) no-repeat;
}

body#step8 #number {
background : url(img/num8.gif) no-repeat;
}

.print, .printTextarea {
display : none;
}

#btt {
text-align : right;
margin-right : 30px;
font-weight : bold;
}

a {
color : #900;
}

a:hover {
color : #f00;
}

#copyright {
text-align : center;
margin : 10px 30px;
font-size : 80%;
}

#da {
text-align : center;
font-size : 80%;
}

#footernav {
margin-bottom : 20px;
padding-top : 80px;
text-align : center;
font-size : 90%;
line-height : 160%;
}

#footernav a {
margin : 0 5px;
}