/* 
Title: 		Hazard Alert Styles
Author:		Jason Westerlund (jaywest) for WorkSafeBC
Contact:	creative@jaywest.com
Updated:	November 12, 2009
Updated to swap Hazard Alert image for the WorkSafe Bulletin image by S. King.
*/

/* This document should contain all pure and valid css rules. 
All hacks required to compensate for IE bugs are maintained in ie.css */

@import url("reset.css");

body {font-family: Tahoma, Verdana, Arial, sans-serif;}
a {color: #316092; text-decoration: none; border-bottom: 1px solid #ccc; padding: 1px 2px 0 2px;}
a:hover {background-color: #316092; color: #fff;}
a.img, a.img:hover {background: none; border: none; padding: 0;}

/* hide the dotted system borders being generated for A tags */
a:active {outline:none;}
:focus {-moz-outline-style:none;}



/* @group Layout
------------------------------------------------------------------------- */

html {text-align:center;} /* center the page layout for Win/IE */

#header {
width: 100%;
background: #333 url("../img/bg_header.png") 0 0 repeat-x;
padding: 0 0 20px 0;
}
#header_inner {
text-align: left; /* compensate for the Win/IE centering above */
width: 820px;
margin: 0 auto;  /*center the layout*/ 
overflow: hidden;
position: relative;
}
#content {
text-align: left; /* compensate for the Win/IE centering above */
width: 820px;
margin: 15px auto 10px auto;  /*center the layout*/ 
overflow: hidden;
position: relative;
}
#content_left {
width: 400px;
float: left;
margin: 10px 10px 0 0;
}
#content_right {
width: 400px;
float: right;
margin: 10px 0 0 10px;
}

#table {
font-size: 12px; line-height: 1.5em; margin: .5em 0 1em 0;
text-align: left; /* compensate for the Win/IE centering above */
width: 400px;
float: right;
margin: 0px 0 0 0px;
}

#large_image {
text-align: left; /* compensate for the Win/IE centering above */
width: 820px;
margin: 0 auto 20px auto;  /*center the layout*/ 
}
#footer {
text-align: left; /* compensate for the Win/IE centering above */
width: 820px;
margin: 0 auto 20px auto;  /*center the layout*/ 
}

/* @end */



/* @group #header
------------------------------------------------------------------------- */

#header h2 { /* WorkSafe Bulletin title */ 
text-indent: -9999px; /* hide the text */
width: 606px; /* width of replacement image */
height: 125px; /* height of replacement image */
background: url("../img/worksafe_bulletin.png") 0 0 no-repeat !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/worksafe_bulletin.png',sizingMethod='crop');
background: none;
position: absolute;
top: 0;
left: 0;
}
#header h3 { /* WorkSafeBC logo */ 
text-indent: -9999px; /* hide the text */
width: 171px; /* width of replacement image */
height: 47px; /* height of replacement image */
background: url("../img/worksafebc_logo.png") 0 0 no-repeat !important;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/worksafebc_logo.png',sizingMethod='crop');
background: none;
position: absolute;
top: 30px;
right: 0;
}
#header h1 {
font-size: 36px;
line-height: 1.1em;
font-weight: normal;
color: #fff;
margin: 160px 0 30px 0;
}

#header h4 {
color: #999;
font-size: 17px;
line-height: 1.2em;
margin: 0 0 8px 0;
font-weight: normal;
}
#header a {
padding: 1px 2px;
margin: 0;
border-bottom: 1px solid #666;
color: #999;
}
#header p  { 
font-size: 12px;
margin: 10px 0 0 0;
color: #666;
}

#header a:hover {
color: #fff;
background-color: #000;
border-bottom: 1px solid #000;
}
#header a.pdf {
background: transparent url("../img/pdf.gif") 0 50% no-repeat;
padding-left: 20px;
border: none;
}
#header a.download {
background: transparent url("../img/download_icon.png") 0 50% no-repeat;
padding-left: 20px;
border: none;
}
#header a.pdf:hover,
#header a.download:hover {
background-color: #000;
border: none;
}

#header #title {
float: left;
width: 240px;
}
#header #feature {
float: right;
width: 545px;
margin: 110px 0 0 0;
}
#header #illustration {
float: right;
width: 500px;
margin: 110px 0 0 0;
font-size: 12px;
padding-left: 50px; 
}
#header.none #title {
width:  100%;
}
#header.none h1 {
font-size: 32px;
line-height: 1.1em;
font-weight: normal;
color: #fff;
margin: 160px 0 30px 0;
}


/* @end */




/* @group Video */

#header #video_frame {
position: relative;
}
#header #video {
width:545px;
height:455px; /* 455 */ 
}
#video_shade {
background-color: #595959;
width: 545px;
height: 47px;
z-index: 99;
position: absolute;
top: 0;
border-bottom: 3px solid #fff;
}

.hide {display: none;}

/* @end */







/* @group Photos */

/* root element for scrollable */ 
div.scrollable { 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
     /* vertical scrollers have typically larger height than width */ 
    height: 323px; 
    width: 100px; 
	float: right;
}
/* root element for scrollable items */ 
div.scrollable div.items { 
    position:absolute; 
     /* this time we have very large space for the height */ 
    height:20000em; 
}
div.scrollable div.items img { 
    margin: 0 0 7px 0;
}


/* styling for the image wrapper  */ 
#image_wrap { 
    /* dimensions */ 
    width: 430px; 
    height: 323px; 
    /*margin:15px 0 15px 40px; 
    padding:15px 0;*/ 
    margin: 0;
    padding: 0;

    /* centered */ 
    /* text-align:center;*/ 
 
    /* some "skinning" */ 
    /*//background-color:#c00; 
    //border:2px solid #fff; 
    //outline:1px solid #ddd; 
    //-moz-ouline-radius:4px;*/ 
    float: left;
    border: none;
}

/* @end */





/* @group Typography
------------------------------------------------------------------------- */

#content p, #content li, #content dd {font-size: 12px; line-height: 1.5em; margin: .5em 0 1em 0;}
#content strong {font-weight: bold;}
#content em {font-style: italic;}

#content ul {margin: 0 0 10px 15px;}
#content li {margin: 0 0 10px 15px; list-style: disc outside; line-height: 16px;}

#content blockquote {font-size: 12px; line-height: 1.5em; margin: 0 0 10px 15px;}
#content blockquote ul {font-size: 12px; line-height: 1.5em; margin: 0 0 20px 15px;}

#content ol {margin: 0 0 10px 0;}
#content ol li {margin: 0 0 10px 0; list-style: decimal; line-height: 16px;}
#content ol li p {margin: 0 0 6px 0;}

#content dl {margin: 0 0 12px 0;}
#content dt {margin: 20px 0 2px 0; font-weight: bold;}
#content dd {margin: 0 0 6px 0;}

#content h2 {font-size: 20px; line-height: 1.2em; color: #25486C; margin: 20px 0 10px 0;}
#content h3 {font-size: 16px; line-height: 1.2em; margin: 16px 0 10px 0;}
#content h4 {font-size: 12px; line-height: 1.2em; text-transform: uppercase; font-weight: bold; letter-spacing: 0.08em;}

/* @end */


/* @group #more_info
------------------------------------------------------------------------- */

#more_info {
background: transparent url("../img/bg_more_info.png") 0 0 no-repeat;
width: 360px; /* 400px minus padding */ 
padding: 20px;
margin: 20px 0 0 0;
}
#more_info a {font-weight: bold; border: none; padding: 0;}
#more_info img {margin: 0 10px;}

/* @end */





/* @group #footer
------------------------------------------------------------------------- */

#footer {
border-top: 1px solid #999;
padding-top: 10px;
}
#footer a {color: #666;}

/* @end */



#content a.addthis_button {
position: absolute;
top: 0;
right: 0;
padding: 0;
border: none;
}
#content a.addthis_button:hover {background: none;}