/* CSS Document */
img {
padding: 0px;
margin: 0;
behavior: url("pngbehavior.htc");
}
/*fonts */
h1 {
font-size: 140%;
font-weight: bold;
color: #036;
background-color: transparent;
padding: 5px 0 5px 5px;
margin: 0 0 10px 0;
}
h2 {
font-size: 1.5em;
font-weight: bold;
width: 697px;
color: #000;
background-color: transparent;
padding: 5px 0 0 0;
margin: 0;
}
h2.heading-back  {
font-size: 1.5em;
font-weight: bold;
color: #000;
width: 789px;
padding: 5px 10px;
margin: 0 0 0px 0;
background: transparent url(../images/h2-flash-game-back.gif) top left no-repeat;
}
h2.back  {
width: auto;
padding: 5px 10px;
background-color: #b34800;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
h2.tempPage  {
font-size: 1.5em;
font-weight: bold;
color: #000;
width: 520px;
padding: 5px 0 5px 20px;
margin: 0 0 0px 0;
background: transparent url(../images/headings/tempPageH2.gif) top left no-repeat;
}
#content-inner .flash-game h2 {
padding: 5px 10px;
}
.welcome-inner h2  {
font-size: 1.5em;
font-weight: bold;
color: #000;
width: 190px;
padding: 5px 0px 0 0;
margin: 0;
}
h3 {
font-size: 1.3em;
font-weight: bold;
color: #036;
background-color: transparent;
padding: 10px 0 5px 0px;
margin: 0;
}
.container-safe h3 {
color: #ffcaa6;
background-color: transparent;
}
h4 {
font-size: 105%;
font-weight: bold;
color: #ffcaa6;
background-color: transparent;
padding: 10px 0 5px 5px;
margin: 0;
text-align: left;
}
h5 {
font-size: 100%;
margin: 5px 0 0 0;
padding: 0px 0 0px 5px;
color: #000;
background: transparent;
}
p {
font-size: 1.2em;
line-height: 1.5em;
color: #000;
background-color: transparent;
padding: 8px 0px 8px 0px;
margin: 0;
}
.container-right .image-container p.backColour  {
background-color: #b75311;
font-size: 1em;
font-weight: bold;
padding: 5px;
margin: 5px 0;
line-height: 1.2em;
color: #000;
}
.container-safe p {
color: #fff;
}
#footer p {
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 10px 20px 10px 20px;
color: #fff;
background-color: #b75311;
}

#content-inner ul {
font-size: 1em;
padding-top: 0px;
padding-bottom: 5px;
margin-top: 0;
margin-bottom: 15px;
color: #000;
}
#content-inner ol {
font-size: 1em;
padding-top: 0px;
padding-bottom: 5px;
margin-top: 0;
margin-bottom: 15px;
color: #000;
}
#content-inner li {
padding: 5px 0px;
margin: 0;
}
#content-inner ul.puzzles {
font-size: 1em;
padding-top: 0px;
padding-bottom: 5px;
margin-top: 0;
margin-bottom: 20px;
color: #000;
width: 700px;
list-style: none;
}
#content-inner ul.puzzles li.odd {
float: left;
width: 349px;
text-align: left;
}
#content-inner ul.puzzles li.even {
float: right;
width: 349px;
text-align: left;
}

#content-inner .flash-game ul.puzzles img {
float: left;
padding-right: 10px;
}
#content-inner .flash-game ul.puzzles li.odd d1, #content-inner .flash-game ul.puzzles li.even d1 {
float: right;
width: 200px;
text-align: left;
margin: 0;
padding: 0;
}
#content-inner .flash-game ul.puzzles li.odd d1 dt, #content-inner .flash-game ul.puzzles li.even d1 dt{
/*font-weight: bold;
font-size: 3em;
padding: 0;
margin: 0;*/
}


/*form*/
form {
padding: 5px 20px;
margin: 0;
}
/*tables*/
table {
width: 100%;
cellpadding: 5px;
cellspacing: 5px;
padding-top: 30px;
border-top: 1px dotted #006a3f;
margin: 10px 0px 10px 0px;
}
td {
background-color: #fff;
color: #036;
font-size: 90%;
font-weight: bold;
}


/*classes*/
.off-left {
position: absolute;
left: -999px;
width: 100px;
}
.floatleft {
float: left;
padding: 0 10px 5px 0px;
}
.floatright {
float: right;
padding: 0 0 5px 10px; 
}
.clearall {
clear: both;
}
.small {
font-size: 85%;
padding-top: 30px 
}
.hidden {
display: none;
}
p.highlight {
font-size: 0.8em;
font-weight: bold;
text-align: left;
padding-left: 45px;
color: #000;
}
#content-inner .container {
position: relative;
width: 662px;
padding: 0 20px 5px 15px;
margin: 0 0 20px 0;
background: transparent url(../images/container-back.png) left bottom no-repeat;
}
#content-inner .container-safe {
position: relative;
width: 490px;
padding: 0px 15px;
margin: 0 0 20px 0px;
background: transparent url(../images/container-back-feel-safe.png) left bottom no-repeat;
}
#content-inner .container-right {
float: right;
width: 250px;
padding-top: 0px;
margin: 0px 0px 20px 20px;
}
.image-container {
padding: 0 10px 10px 10px;
}
#content-inner .container-in-right {
width: 234px;
padding: 30px 8px 8px 8px;
margin-top: 8px;
background: transparent url(../images/flash-holder.png) left bottom no-repeat;
}
#content-inner .container-bullying {
position: relative;
width: 674px;
padding: 0 100px 5px 15px;
margin: 0 0 20px 0;
background: transparent url(../images/container-back.png) left bottom no-repeat;
}
#content-inner .container-out-about-content {
width: 789px;
padding: 0 15px 5px 15px;
margin: 0 0 20px 0;
background: transparent url(../images/container-back-out.png) left bottom no-repeat;
}
#content-inner .flash-game {
width: 789px;
padding: 10px 0 30px 0;
margin: 0 0 60px 0;
text-align: left;
background: transparent url(../images/container-back-out.png) left bottom no-repeat;
}
#content-inner .welcome {
width: 200px;
float: right;
padding: 0px 0 30px 0;
margin: 0 0 60px 0;

}
#content-inner .welcome .welcome-inner {
padding: 0px 5px;
margin: 0;
background: transparent url(../images/welcome-back.png) left bottom no-repeat;
}

#content #content-inner .flash-logo {
width: 600px;
float: left;
padding: 0;
margin: 0;

}
#content-inner .welcome .welcome-inner {
padding: 0px 5px;
margin: 0;
background: transparent url(../images/welcome-back.png) left bottom no-repeat;
}


/*placement of illustrations*/
.container-illustration {
position: absolute;
bottom: 30px;
right: 0px;
z-index: 600;
}
.container-school {
position: absolute;
bottom: 30px;
left: -50px;
z-index: 600;
}
.skateboarder {
position: absolute;
bottom: 40px;
left: 0px;
z-index: 600;
}

.rich-smash {
position: absolute;
bottom: 150px;
right: -350px;
z-index: 600;
}

/*content navigation*/
a img {
border: none;
}

#content-inner a, #footer a,{
font-size: 90%;
line-height: 120%;
padding: 0 0 10px 0px;
margin: 0;
color: #333;
background-color: transparent;
text-decoration: underline;
}
#content-inner a:link, #content-inner a:visited, #footer a:link, #footer a:visited {
color: #333;
background-color: transparent;
}
#content-inner a:hover, #content-inner a:active, #footer a:hover, #footer a:active{
color: #000;
background-color: transparent;
text-decoration: none;
}