@charset "utf-8";
/* Let Someone Know CSS Document | HSE | Site built by Bluebloc (www.bluebloc.com) */

/* @group Global 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,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

/* @end */

body {
font: 12px/1.5 Arial, Verdana, Helvetica, sans-serif;
background:#fff; 
color:#7c7c7c;}

a, a:link, a:visited {color:#30a1d6; text-decoration:none;}
a:hover, a:active {text-decoration:underline;color:#e75021;}	

div.clear {clear: both;}
div.left {float:left;width:50%;text-align:left;padding-top:20px;}
div.right {float:right;width:50%;text-align:right;padding-top:20px;}
img {border:none;}

/* ---------------------------------------------------------------------------- HEADER
--------------------------------------------------------------------------------------*/
#header {width:930px;height:60px;margin:0 auto;}

#header h1.logo {text-indent:-9999px;}
#header h1.logo a {background: url(../i/logo.gif) no-repeat;display:block;float:left;width:246px;height:60px;}	
#header h1.logo a:hover {background: url(../i/logo.gif) 0px -65px no-repeat;}
#header form {float:right;margin-right:10px;}
#header p {margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;}
#header p a, #header p a:link  {color:#9e9e9e; text-decoration:none;}
#header p a:hover, #header p a:active  {color:#9e9e9e; text-decoration:underline;}


/* Add EE Conditional to display correct #nav css based on segment_2 */
/*#nav {background: url(../i/nav-01.gif) top center no-repeat;width:930px;height:72px;padding-top:10px;}*
#nav {background: url(../i/nav-02.gif) top center no-repeat;width:930px;height:75px;padding:0px;margin:0 auto;} 

#nav ul#main-nav {width:930px;margin: 0px 0 0 30px;padding-top:7px;}
#nav ul#main-nav li {display:inline;padding-right:15px;}
#nav ul#main-nav li a, #nav ul#main-nav li a:link, #nav ul#main-nav li a:visited {color:#FFF; text-decoration:none;text-transform:uppercase;font-size:11px;font-weight:bold;font-family:Arial, Verdana, Helvetica, sans-serif;}
#nav ul#main-nav li a:hover, #nav ul#main-nav li a:active, #nav ul#main-nav li a.current {color:#000;}

#nav ul#sub-nav {margin: 14px 0 0 90px;padding:0;}
#nav ul#sub-nav li {display:inline;padding:0px 20px 0 0;}
#nav ul#sub-nav li a, #nav ul#sub-nav li a:link, #nav ul#sub-nav li a:visited {color:#7d7d7d; text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:bold;font-family:Arial, Verdana, Helvetica, sans-serif;}
#nav ul#sub-nav li a:hover, #nav ul#sub-nav li a:active, #nav ul#sub-nav li a.current {color:#9c3a99;}
/* ---------------------------------------------------------------------------- MAIN PAGE CONTENT (Wrap-01)
--------------------------------------------------------------------------------------*/
#wrap-01 {background: url(../i/background-jason.jpg) top center no-repeat;width:960px;height:540px;margin:0px auto 0 auto;}

body#actionDiary #wrap-01 {background: url(../i/background-jason.jpg) top center no-repeat;width:960px;height:100%;margin:0px auto 0 auto;}

#myFlash {width:960px;margin:0 auto;}

#myFlash #enclose {width:100%;background: url(../i/background-jason.jpg) -8 0 no-repeat;margin:-0px 0 0 20px;z-index:1001;height:100%; }
#myFlash #content {float:left;width:550px;height:100%;background: url(../i/page-top1.png) top center no-repeat;}
#myFlash #content #bottom {width:550px;height:100%;background:url(../i/page-bottom.png) bottom center no-repeat;}
#myFlash #content #bottom .gutter {padding: 50px 55px 10px 75px;}

#myFlash #right-column {/*float:right;*/width:304px;margin:0 auto;}

#myFlash #right-column .gutter {padding: 30px 40px 0 0;}


body#video-page #enclose {width:650px; margin:0 auto;z-index:1001;height:100%;background: url(../i/page_video.png) top center no-repeat;padding:80px 0 0 90px; }

/* ---------------------------------------------------------------------------- EXAPNDING MAIN PAGE CONTENT (Wrap-02 - 3 column)
--------------------------------------------------------------------------------------*/
#wrap-02aa {background:url(../i/wrap-02aa.png) top center repeat;width:960px;height:100%;margin:0 auto;}
#wrap-02a {background:url(../i/background-03.jpg) top center no-repeat;width:960px;height:100%;margin:-6px auto 0 auto;}



#wrap-02a #enclose {width:765px;float:left;margin-top:-0px;}
#wrap-02a #content {float:right;width:550px;height:100%;background:url(../i/page-top.png) top center no-repeat;margin-right:10px;}
#wrap-02a #content #bottom {width:550px;height:100%;background:url(../i/page-bottom.png) bottom center no-repeat;}
#wrap-02a #content #bottom .gutter {padding: 55px 45px 50px 75px;}

#wrap-02a #left-column {float:left;width:195px;}
#wrap-02a #left-column .gutter {padding:60px 0 0 10px;}

#wrap-02a #right-column {width:175px; float:right;}
#wrap-02a #right-column .gutter {padding:30px 0 0 0px;}
/* ---------------------------------------------------------------------------- MAIN PAGE CONTENT (Wrap-03 - 2 column)
--------------------------------------------------------------------------------------*/
#wrap-03a {background:url(../i/wrap-02aa.png) top center repeat;width:930px;height:100%;margin:0 auto;}
#wrap-03 {background: url(../i/background-03.jpg) top center no-repeat;width:930px;height:100%;margin:-0px auto 0 auto;}

#wrap-03 #enclose {width:100%;margin:-0px 0 0 20px; }
#wrap-03 #content {float:left;width:550px;height:100%;background: url(../i/page-top.png) top center no-repeat;}
#wrap-03 #content #bottom {width:550px;height:100%;background:url(../i/page-bottom.png) bottom center no-repeat;}
#wrap-03 #content #bottom .gutter {padding: 50px 55px 10px 75px;}

#wrap-03 #right-column {/*float:right;*/width:304px;margin:0 auto;}

#wrap-03 #right-column .gutter {padding: 30px 40px 0 0;}

/* ---------------------------------------------------------------------------- RIGHT Column EXTRAS (Common)
--------------------------------------------------------------------------------------*/
h6.h6_friend {text-indent:-9999px;}
h6.h6_friend a {background: url(../i/h6_friend.png) no-repeat;display:block;float:left;width:176px;height:198px;}	
h6.h6_friend a:hover {background: url(../i/h6_friend.png) 0px 0px no-repeat;}

h6.defence {text-indent:-9999px;}
h6.defence a {background: url(../i/h6_defence.png) no-repeat;display:block;float:left;width:176px;height:198px;}	
h6.defence a:hover {background: url(../i/h6_defence.png) 0px 0px no-repeat;}

h6.action_diary {text-indent:-9999px;}
h6.action_diary a {background: url(../i/action_diary.png) no-repeat;display:block;float:left;width:176px;height:171px;}	
h6.action_diary a:hover {background: url(../i/action_diary.png) 0px 0px no-repeat;}

h6.tvad {text-indent:-9999px;}
h6.tvad a {background: url(../i/watch-tvad.png) no-repeat;display:block;float:left;width:176px;height:131px;}	
h6.tvad a:hover {background: url(../i/watch-tvad.png) 0px 0px no-repeat;}

h6.need_help {text-indent:-9999px;}
h6.need_help a {background: url(../i/h6_need_help.png) no-repeat;display:block;float:left;width:180px;height:152px;}	
h6.need_help a:hover {background: url(../i/h6_need_help.png) 0px 0px no-repeat;}

h6.help2 {text-indent:-9999px;}
h6.help2 a {background: url(../i/h6_help2.png) no-repeat;display:block;float:left;width:181px;height:177px;}	
h6.help2 a:hover {background: url(../i/h6_help2.png) 0px 0px no-repeat;}

h6.lift {text-indent:-9999px;}
h6.lift a {background: url(../i/h6_lift.png) no-repeat;display:block;float:left;width:181px;height:177px;}	
h6.lift a:hover {background: url(../i/h6_lift.png) 0px 0px no-repeat;}

h6.common_problems {text-indent:-9999px;}
h6.common_problems a {background: url(../i/h6_common_problems.png) no-repeat;display:block;float:left;width:188px;height:177px;}	
h6.common_problems a:hover {background: url(../i/h6_common_problems.png) 0px 0px no-repeat;}

h6.bullying1 {text-indent:-9999px;}
h6.bullying1 a {background: url(../i/h6_bullying1.png) no-repeat;display:block;float:left;width:188px;height:177px;}	
h6.bullying1 a:hover {background: url(../i/h6_bullying1.png) 0px 0px no-repeat;}

h6.bullying2 {text-indent:-9999px;}
h6.bullying2 a {background: url(../i/h6_bullying2.png) no-repeat;display:block;float:left;width:176px;height:137px;}	
h6.bullying2 a:hover {background: url(../i/h6_bullying2.png) 0px 0px no-repeat;}

h6.appearance {text-indent:-9999px;}
h6.appearance a {background: url(../i/h6_appearance.png) no-repeat;display:block;float:left;width:183px;height:170px;}	
h6.appearance a:hover {background: url(../i/h6_appearance.png) 0px 0px no-repeat;}

h6.school {text-indent:-9999px;}
h6.school a {background: url(../i/h6_school.png) no-repeat;display:block;float:left;width:192px;height:176px;}	
h6.school a:hover {background: url(../i/h6_school.png) 0px 0px no-repeat;}

h6.family1 {text-indent:-9999px;}
h6.family1 a {background: url(../i/h6_family1.png) no-repeat;display:block;float:left;width:178px;height:140px;}	
h6.family1 a:hover {background: url(../i/h6_family1.png) 0px 0px no-repeat;}

h6.family2 {text-indent:-9999px;}
h6.family2 a {background: url(../i/h6_family2.png) no-repeat;display:block;float:left;width:188px;height:177px;}	
h6.family2 a:hover {background: url(../i/h6_family2.png) 0px 0px no-repeat;}

h6.bereavement1 {text-indent:-9999px;}
h6.bereavement1 a {background: url(../i/h6_bereavement1.png) no-repeat;display:block;float:left;width:181px;height:164px;}	
h6.bereavement1 a:hover {background: url(../i/h6_bereavement1.png) 0px 0px no-repeat;}

h6.bereavement2 {text-indent:-9999px;}
h6.bereavement2 a {background: url(../i/h6_bereavement2.png) no-repeat;display:block;float:left;width:188px;height:177px;}	
h6.bereavement2 a:hover {background: url(../i/h6_bereavement2.png) 0px 0px no-repeat;}

h6.peer {text-indent:-9999px;}
h6.peer a {background: url(../i/h6_peer.png) no-repeat;display:block;float:left;width:181px;height:164px;}	
h6.peer a:hover {background: url(../i/h6_peer.png) 0px 0px no-repeat;}

h6.relationships {text-indent:-9999px;}
h6.relationships a {background: url(../i/h6_relationships.png) no-repeat;display:block;float:left;width:181px;height:145px;}	
h6.relationships a:hover {background: url(../i/h6_relationships.png) 0px 0px no-repeat;}

h6.isolation {text-indent:-9999px;}
h6.isolation a {background: url(../i/h6_isolation.png) no-repeat;display:block;float:left;width:191px;height:176px;}	
h6.isolation a:hover {background: url(../i/h6_isolation.png) 0px 0px no-repeat;}

h6.drugs {text-indent:-9999px;}
h6.drugs a {background: url(../i/drugs-01.png) no-repeat;display:block;float:left;width:176px;height:137px;}	
h6.drugs a:hover {background: url(../i/drugs-01.png) 0px 0px no-repeat;}

h6.drugs1 {text-indent:-9999px;}
h6.drugs1 a {background: url(../i/drugs-02.png) no-repeat;display:block;float:left;width:188px;height:177px;}	
h6.drugs1 a:hover {background: url(../i/drugs-02.png) 0px 0px no-repeat;}

h6.bebo {text-indent:-9999px;}
h6.bebo a {background: url(../i/h6_bebo.png) no-repeat;display:block;float:left;width:195px;height:119px;}	
h6.bebo a:hover {background: url(../i/h6_bebo.png) 0px 0px no-repeat;}

div.quiz {width:268px;background:url(../i/quiz_bottom.png) bottom center no-repeat;}
h4#q-title {display:block;width:264px;height:248px;background:url(../i/quiz_defence1.png) top center no-repeat;text-indent:-99999px;}
div.quiz .gutter2 {padding:10px 10px 170px 10px;}

div.poll {width:176px;background:url(../i/poll_bottom.png) bottom center no-repeat;clear:both;}
h4.polls {display:block;width:176px;height:46px;background:url(../i/poll_top.png) top center no-repeat;text-indent:-99999px;}
div.poll .gutter3 {padding:0px 10px 100px 10px;}
/* ---------------------------------------------------------------------------- FOOTER
--------------------------------------------------------------------------------------*/
#footer {width:930px;margin:0 auto;clear:both;}

#footer_left {width:370px;float:left; margin-top:10px;}

#footer_right {width:550px;float:right;}

#footer h6.hse {text-indent:-9999px;}
#footer h6.hse a {background: url(../i/hse.gif) no-repeat;display:block;float:left;width:148px;height:39px;margin-top:5px;}	
#footer h6.ymh {text-indent:-9999px;}
#footer h6.ymh a {background: url(../i/ymh.gif) no-repeat;display:block;float:left;width:200px;height:23px;margin:0px 0px 0 10px;}	

#footer p {text-align:right;color:#8c8c8c;padding:-5px 15px 0 0;font-size:10px; font-family:Arial, Helvetica, sans-serif;}

/* ---------------------------------------------------------------------------- TYPOGRAPHY
--------------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 {padding-bottom:10px;font-family:"Comic Sans MS", Arial, Verdana, Helvetica, sans-serif;color:#2e3191;}

h2, h2.title {font-size:21px;color:#2e3191;text-transform:uppercase;}
h3 {
	margin-bottom: 4px;
	font-size: 18px; 
	font-weight:bold;
}

h4 {

font-weight:normal;
	font-size: 14px; 
	
}

h5, h6 {
	margin-bottom: 5px;
	font-size: 110%; 
}

p {font: 12px/1.5 "Comic Sans MS", Arial, Verdana, Helvetica, sans-serif;padding-bottom:15px;}

#content .gutter em { font-style:italic;line-height:1.5em;}
#content .gutter strong, #content .gutter p.date {font-weight:bold;}

#content .gutter blockquote, #content .gutter blockquote p {line-height:1.5em;}
#content .gutter ul,#content .gutter ol {margin-bottom:15px;padding-left:20px;font: 12px/1.5 "Comic Sans MS", Arial, Verdana, Helvetica, sans-serif;}
#content .gutter ul li {list-style-type:disc;line-height:1.5em;}
#content .gutter ol li {list-style-type:decimal;line-height:1.5em;font-size:10px;}

#content .gutter img.problem {float:right; margin: 0 0 10px 10px;}




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

/* FORM: PRESENTATION */
form {color:#333;font: 12px/1.5 "Comic Sans MS", Arial, Verdana, Helvetica, sans-serif;}
fieldset {border:1px solid #999;}
fieldset fieldset {border:none;}
fieldset fieldset legend {}
legend {}
.textfield input, .file input, .dropdown select, .textarea textarea, div input.innertextfield {color:#000; border:1px solid #999; background:#ececec;}
.textfield input:hover, .file input:hover, .dropdown select:hover, .textarea textarea:hover, div input.innertextfield:hover {border-color:orange;}
.textfield input:focus, .file input:focus, .dropdown select:focus, .textarea textarea:focus, div input.innertextfield:hover {border-color:#333;}
.textfield input:active, .file input:active, .dropdown select:active, .textarea textarea:active, div input.innertextfield:active {border-color:#333;}
.textfield input:focus:hover, .file input:focus:hover, .dropdown select:focus:hover, .textarea textarea:focus:hover, div input.innertextfield:focus:hover {border-color:orange;}
.checkbox input, .radio input {border:none; background:transparent;}
button {cursor:pointer; border:1px solid #666; background:#666; color:#fff;}
button:hover {border-color:#000; color:orange;}
optgroup {}
option {}

/* FORM: LAYOUT */
form {}
fieldset {margin-bottom:3em; padding:10px;}
fieldset fieldset {padding:0;}
legend {margin-bottom:1em;}
.textfield, .textarea, .file, .dropdown, .radio, .checkbox, .buttons, fieldset fieldset {margin-bottom:1em;}
.textfield input, .file input, .dropdown select, .textarea textarea, input.innertextfield {padding:2px 5px;}
.textfield input, .file input, .dropdown select, .textarea textarea {width:250px;}
textarea {height:6em;}
.textfield input, .file input, .dropdown select, .textarea textarea {display:block; margin:0.1em 0 0 0;}
.checkbox input, .radio input {margin-right:5px;}
div input.innertextfield {display:inline; margin-right:0;}
.buttons {}
button {padding:4px;}
optgroup {}
option {padding:1px 3px;}



/*****************************************************************************
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;
    margin: 0;
    padding: 0;
  }
  
  .sIFR-replaced, .sIFR-ignore {
    visibility: visible !important;
  }
  
  .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.
*/
<![CDATA[
    /*****************************************************************************
    These styles should be at the bottom of `sifr.css`. Make sure that they're
    only applied for the screen media type!
    *****************************************************************************/
    
    .sIFR-active h1,
    .sIFR-active h2.title,
    .sIFR-active h3,
    .sIFR-active h4.side,
    .sIFR-active h4.side2,
    .sIFR-active h4.orange,
    .sIFR-active h5#pullquote {
      visibility: hidden;
      font-family: Verdana;
    }

    .sIFR-active h1 {
      padding-bottom: 0;
    }

    .sIFR-active h2.title {
	color:#2e3191;
      display: block;
	  text-transform:uppercase;
    }

    .sIFR-active h3 {

    }

    .sIFR-active h4.orange {


    }

    .sIFR-active h5#pullquote {

    }
  ]]>
@media screen {
  /* Example:
  .sIFR-active h1 {
    font-family: Verdana;
    visibility: hidden;
  }
  */

}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}