@import url(blankcanvas.css);
	
	html {height:100%}
	body {font:1em/1.15em arial,sans-serif; color:#202020;margin-bottom:2em}
	
	iframe {display:block;height:0;}
	
/* accesslinks */

	#accesslinks { position: absolute; left: 0; top: 0em; display: block; width: 20em; }
	#accesslinks li { position: absolute; top: 0em; display: block; left: 0; text-align: center; width: 20em; }
	#accesslinks li a { position: absolute; top: -10em; z-index: 999; }
	#accesslinks li a { 
		display: block; line-height: 2em; font-weight: bold;
		position: relative; color: #FFFFFF; font-size: 0.75em; 
	}
	#accesslinks li a:focus, #access li a:active { background: #000000;  top: 0em; text-decoration: none; }
	
/* ir */

	.ir { position: relative; display: block; }
	a.ir { cursor: pointer; }
	.ir span { 
		width: 100%; height: 100%; display: block; position: absolute;
		top: 0; left: 0; background-repeat: no-repeat;
	}

@media screen {
	
	.content {width:940px;margin:0 auto}
	#home #middle .content {overflow:hidden;}
	
	#top {margin-bottom:20px;height:100px;background: #00a0c9 url(../images/home_bg.jpg) no-repeat center -400px}
	#home #top {height:400px; background:#00a0c9 url(../images/home_bg.jpg) no-repeat center top}
	
	#links {float:right;padding-top:13px}
	#links li {display:inline}
	#links a {height:40px;width:117px;padding-left:44px;color:#202020;text-decoration:none;font-size:0.8em;line-height:40px;display:inline-block}
	#links a:hover, #links a:active {text-decoration:underline}
	#links #exit {background:url(../images/buttons.gif) no-repeat 0 0}
	#links #cover {background:url(../images/buttons.gif) no-repeat 0 -40px}
	
	#title {float:left;width:260px}
	#title h1 {color:#202020;font-size:2em;line-height:1.4em;text-transform:lowercase;margin-top:10px;text-decoration:none}
	#title h1 a {color:#202020;text-transform:lowercase;text-decoration:none}
	#title h1 span {color:#fff}
	
	#nav {clear:right;float:right;font-size:1.1em;margin-top:12px;text-align:right;width:600px;line-height:1.2em}
	#nav li {display:inline;margin-left:12px}
	#nav a, #nav em {color:#fff;text-decoration:none;font-weight:bold;text-shadow: 1px 1px 3px #000}
	#nav em {font-style:normal;}
	#nav em, #nav a:hover, #nav a:active {color:#202020;text-shadow:1px 1px 3px #777}
	
	/* home */
	#intro {clear:right;float:right;width:330px;padding-top:70px;font-size:1.5em;line-height:1em}
	#intro h2 {margin-bottom:0.8em;width:90%}
	#intro .tv_ad {font-size:15px;line-height:15px;padding-top:44px;text-indent:29px;height:100%;margin-left:-10px;float:left}
	#intro .tv_ad span {width:210px;height:80px;background:url(../images/tv_ad_button.png) no-repeat}
	
	#top .content {position:relative}
	#home .noscript {font-size:0.6em;line-height:1;padding:30px 0 0 200px;}
	#home #movie {display:none;width:507px;position:absolute;top:64px;left:0;padding:38px;background:url(../images/movie_border.png) no-repeat; z-index:1;}
	#home #movie #close {width:28px;height:28px !important;position:absolute !important;top:28px;right:28px;background:url(../images/movie_close.png) no-repeat; cursor:pointer;z-index:2}
	
	.small {clear:both;font-size:0.6em;padding-top:18px;width:100%}
	.small a {text-decoration:none;color:#202020;}
	.small a:hover {text-decoration:underline;}
	
	#middle {overflow:visible}
	.box {width:180px;float:left;background: url(../images/box_bg.gif) repeat-x;margin-right:20px;padding:20px;position:relative;height:200px}
	#box-1 {width: 420px}
	#box-3 {margin-right:0}
	
	#middle .box h3 {font-size:1.6em;color:#009dc5; line-height:1em;margin:0 0 0.6em 0}
	#middle .box p {font-size:0.9em;width:auto;margin:0}
	
	#box-1 p {font-size:1.2em;}
	#box-1 strong {font-size:1.3em;line-height:1.4em;}
	#box-1 p span {font-size:0.9em;}
	
	#box-1 #breathingspace {width:200px;float:left}
	#box-1 #samaritans {width:200px;float:right}
	
	#box-3 p {font-size:1.1em;line-height:1.3em}
	#box-3 strong {font-size:1.25em}
	#box-3 p span {font-size:1.25em}
	
	.box .ir {font-size:15px;line-height:15px;padding:25px 0 0 5px;margin-top:0.5em;position:absolute;bottom:0;height:35px}
	#box-1 #breathingspace .ir span {height:60px;width:206px;background:url(../images/buttons.gif) no-repeat 0 -80px}
	#box-1 #samaritans .ir span {height:60px;width:206px;background:url(../images/buttons.gif) no-repeat 0 -140px}
	#box-2 .ir span {height:60px;width:192px;background:url(../images/buttons.gif) no-repeat 0 -200px}
	
	#bottom {margin-top:2em;font-size:0.8em;font-weight:bold;line-height:1.25em;}
	#bottom .content {background: url(../images/footer_rule.gif) repeat-x 0 0;padding-top:2em;position:relative}
	#bottom a {color:#202020;text-decoration:none}
	#bottom li span {color:#009dc5}
	#bottom a.logo {position:absolute;bottom:0;right:0}
	
	/*the other pages*/
	
	#middle h2 {color:#009dc5;font-size:2.5em;line-height:1em;margin-bottom:0.3em;}
	#middle a.external {color:#009dc5;background:url(../images/link_arrow.gif) no-repeat left 0.36em; padding-left:10px;text-decoration:none;font-size:1.4em;font-weight:bold;line-height:1.2em}
	#middle a.external:hover, #middle a.external:active {text-decoration:underline}
	#middle p, 
	#middle ul,
	#middle	ol {width:520px; margin:1em 0;font-size:0.9em}
	#worried #middle p, 
	#worried #middle ul, 
	#worried #middle #book {width:490px}
	#worried #help p,
	#worried #help ul,
	#worried #book p {width:auto}
	#middle ul {list-style-type:disc}
	#middle li {margin-left:1.65em}
	#middle a {color:#000}
	#middle .stronger {font-size:1.25em}
	
	#breathing_space #middle .content {background:url(../images/breathing_space.jpg) no-repeat right 0;left:25px;padding-right:50px;position:relative;
	min-height:323px;height:auto !important; height:323px}
	
	#samaritans #middle .content {background:url(../images/samaritans.jpg) no-repeat right 0;left:25px;padding-right:50px;position:relative;
	min-height:323px;height:auto !important; height:323px}
	
	#worried #middle .content {background:url(../images/worried.jpg) no-repeat right bottom;left:25px;padding-right:50px;position:relative;
	min-height:323px;height:auto !important; height:323px;padding-bottom:50px;margin-bottom:-50px}
	#worried #bottom {position:relative;z-index:1}
	
	#container {position:relative}
	#worried #help {position:absolute;top:0;right:0;width:400px;padding:10px;background:#f0f8fb}
	#worried #help a {color:#009dc5;text-decoration:none}
	#worried #help a:hover, #worried #help a:active {text-decoration:underline}
	
	#worried #book {position:relative;margin:10px}
	#worried #book .img {float:left;position:relative;top:-15px;}
	#worried #book div {padding:1px 1em;background:#f0f8fb}
	#worried #book a {font-size:1em;display:table !important;display:inline-block}
	
	#middle ol {list-style-type:decimal}
	#middle h3 {margin:1.3em 0}
	#middle h4 {font-size:0.9em;margin:1em 0}
	
	#transcript #movie {position:absolute;top:0;right:0;}
}