/* STLYE SHEET FOR iRAP Road Safety Toolkit
http://www.irap.net/toolkit/

Created by INVOLVED. - involved.com.au (10 October 2009)
jordan@involved.com.au 

ToC
1. Defaults
2. Structure
3. Navigation
4. Fonts
5. Links
6. Side Column Boxes
7. Tab Boxes
8. Footers
9. Search Page
10. Feature Boxes

*/  

/* CONSTANTS
	Medium grey (search): #6c6c6c
	Medium grey (side boxs): #666
	Dark grey (text): #292929
	Light Grey (footer): #707070
	White (Category title): #fff
	Yellow (Page title): #ffd200
*/



/* ***** 1. Defaults ***** */

body {
	behavior: url("js/csshover3.htc"); /* IE6 :hover fix */
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	color: #292929;
	background: url(../images/bg_tile.gif) repeat-x top left;
}

.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.bold { font-weight: bold; }

.divider { 
	clear: both; 
	height: 1px; 
	background: url(../images/divider-greyHoriz.gif) center repeat-x; 
	padding: 10px 0px; 
}

html, body, #wrapper { height: 100%; }

/* ***** 2. Structure ***** */
#wrapper{
	width: 950px;
	margin: 0px auto;
	position: relative;
	height: auto; 
	min-height: 100%;
}

#innerWrapper { padding-bottom: 140px; }

#headerWrapper {
	margin: 0px auto;
	height: 370px;
	width: 950px;
}

	#headerWrapper .logo {
		width: 130px;
		height: 50px;
		float: left;
		position: relative;
		top: 35px;
	}

#navContainer { /*** see navigation.css ***/ }

#header {
	height: 240px;
	background: url(../images/header_home.jpg) no-repeat top left;
	position: relative;
	top: 130px;
}

	#header.home 		{ background: url(../images/header/header_home.jpg) no-repeat top left; }
	#header.crashtype 	{ background: url(../images/header/header_crashtypes.jpg) no-repeat top left; }
	#header.roaduser 	{ background: url(../images/header/header_roadusers.jpg) no-repeat top left; }
	#header.treatment_people 	{ background: url(../images/header/header_saferpeople.jpg) no-repeat top left; }
	#header.treatment_vehicles 	{ background: url(../images/header/header_safervehicles.jpg) no-repeat top left; }
	#header.treatment_roads 	{ background: url(../images/header/header_saferroads.jpg) no-repeat top left; }
	#header.governance 	{ background: url(../images/header/header_home.jpg) no-repeat top left; }
	#header.about 		{ background: url(../images/header/header_about.jpg) no-repeat top left; }
	#header.search 		{ background: url(../images/header/header_search.jpg) no-repeat top left; }
	#header.admin 		{ background: url(../images/header/header_admin.jpg) no-repeat top left; }
	#header.login 		{ background: url(../images/header/header_admin.jpg) no-repeat top left; }
	#header.logout 		{ background: url(../images/header/header_admin.jpg) no-repeat top left; }
	#header.casestudies 		{ background: url(../images/header/header_casestudies.jpg) no-repeat top left; }
	#header.casestudy 		{ background: url(../images/header/header_casestudies.jpg) no-repeat top left; }
	#header.management 		{ background: url(../images/header/header_management.jpg) no-repeat top left; }

#titleBar {
	height: 50px;
	position: relative;
	top: 185px;
	background: url(../images/titleBar.png) top left no-repeat;
}

ul#breadcrumbs {
	float: left;
	width: 650px;
	padding: 15px 0px 0px 17px;
}

	ul#breadcrumbs li {
		display: inline;
		padding: 0px 13px 0px 3px;
		background: url(../images/breadcrumb_divider.gif) right no-repeat;
	}

#search_form { float: right; height: 50px; }

	#searchField { 
		width: 195px; 
		height: 20px;
		position: relative;
		bottom: 20px;
		right: 10px;
		padding: 1px 2px;	
	}
	#searchBtn { width: 48px; height: 50px; }

#contentWrapper {
	padding: 20px 0px;
}

#content {
	width: 637px;
	float: left;
	margin-left: 20px;
	display: inline;
}

#logoBar { padding: 20px 0px; }
#logoBar .paddingLR { padding: 0px 85px 0px 90px; }

#sideColumn {
	width: 270px;
	float: right;	
	clear: right;
	display: inline;
}

#footerFloating {
	width:  950px;
	height: 55px;
	background: url(../images/footer-bg_top.gif) top left no-repeat;
	padding-top: 4px;
}


#footerBar {
	position: relative;
	margin-top: -140px; /* negative value of footer height */
	height: 140px;
	clear: both;
	background: url(../images/footer_bar.gif) bottom repeat-x;
}


/* ***** 3. Navigation ***** */

/*see naviatgion.css*/



/* ***** 4. Fonts ***** */

p, #content li 	{ font-size:13px; color:#292929; line-height:19px; font-weight:normal; padding-top:10px;}
h1 				{ font-size:20px; color:#292929; line-height:24px; font-weight:normal; padding-bottom:10px; }
h2 				{ font-size:18px; color:#292929; line-height:18px; font-weight:normal; padding-top:10px;}
h3 				{ font-size:18px; color:#004a28; line-height:13px; font-weight:normal; padding-bottom:10px;  }
h4 				{ font-size:13px; color:#292929; line-height:16px; font-weight:bold; padding-top:5px; }

#searchField { color: #6c6c6c; font-size: 15px; }

ul#breadcrumbs li { color: #FFF;  font-size: 20px; /*line-height: 22px;*/ }
ul#breadcrumbs li.activePage { color: #ffd200; font-size: 20px; font-weight: bold; background: none; }

#content ul { list-style-type: disc; margin: 5px; list-style-position: inside; list-style-image: url(../images/bullet.png); }
#content li { line-height: 19px; margin: 0px; padding: 0px;}

#sideColumn,
#sideColumn p { color: #666; line-height: 17px; font-size: 12px; font-weight: normal; padding-top: 5px; }
#sideColumn strong { color: #333333; }

.techRef { font-size: 11px !important; }

.tabBox div, 
.tabBox div li, 
.tabBox div li p { font-size: 12px !important; }

.tabBox div ul { text-indent: -0px; margin-left: 10px; padding-left: 10px; }

.tabBox 		{ font-size:13px; color:#292929; line-height:19px; font-weight:normal; }
.tabBox dl 		{ font-size: 11px; color: #555; }
.tabBox dl a	{ color:#004a28 !important; }

#content ul { list-style-type: disc; margin: 5px; list-style-position: outside; list-style-image: url(../images/bullet.png); }

.featureBox p { font-size: 12px; }
.featureBox h3 { padding-bottom: 15px; }
.featureBox.grey h3 { color: #292929; }

#searchResults h2 { font-weight: bold; padding: 0px; }

#footerFloating p,
#footerFloating a { color: #707070; padding: 0px 5px; font-size: 11px; }




/* ***** 5. Links ***** */
/* make sure of correct order: link, visited, hover and active*/

a:link { color: #008046; }
a:visited { color: #008046; }
a:hover { color: #666; }
a:active { color: #666; }

.subnav a:link, .subnav a:visited { color: #292929; }
.subnav a:hover { color: #666; }

ul#breadcrumbs li a { color: #FFF; text-decoration: none; }
ul#breadcrumbs li a:hover { text-decoration: underline; }

#sideColumn a:link, 
#sideColumn a:visited {
	color: #008046;
	line-height: 17px;
	font-size: 11px;
	text-decoration: none;
}
#sideColumn a:hover { color: #999999; text-decoration: none;}

/* #sideColumn a:visited { color: #004a28; line-height: 17px; font-size: 12px; text-decoration: none;  } */

.sideColBoxGrey .inner a {	line-height: 24px !important;}

a.moreLink {
	font-size: 12px;
	color: #004a28 !important; 
	font-weight: bold; 
	line-height: 17px !important;
	text-decoration: none; 
	padding-right: 10px; 
	float: right;	
	clear: both;
	background: url(../images/bulletArrow_green.png) top right no-repeat; 
}
	a.moreLink.grey { color: #292929 !important; background: url(../images/bulletArrow_grey.png) top right no-repeat; }

a.moreLink:hover { filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity: 0.60; opacity: 0.60; }

.tabBox .tabs li a,
.tabBox .tabs li a:hover { color: #555; }
.tabBox .tabs li a.selected,
.tabBox .tabs li a.selected:hover { font-weight: bold; color: #555; }

.tabBox div dt { font-weight: bold;  }




/* ***** 6. Side Column Boxes ***** */

.sideColBox {
	width: 270px;
	background: url(../images/sideBox_btm.gif) bottom left no-repeat;
	margin-bottom: 20px;
}

	.sideColBox .inner {
		background: url(../images/sideBox_top.gif) top left no-repeat;
		min-height: 95px;
		height: auto !important;
		height: 95px;
		padding: 12px 12px 5px 12px;
	}
	
	.paddingBtm, 
	.techRef { padding-bottom: 12px !important; }
	
	.sideColBox ul.dividedList li {	border-top: none; background: url(../images/divider-greenHoriz.gif) top repeat-x; padding: 5px 0px; }
	.sideColBox ul.dividedList li:first-child {	border-top: #96bcab solid 1px; background: none !important; margin-top: 5px; }
	.sideColBox ul.dividedList ul li { list-style-type: disc; list-style-position: outside; margin-left: 15px; border: none !important; background: none !important; padding: 2px 0px; }
	
	.sideColBox dl { padding-top: 2px; overflow: auto; }
	.sideColBox dl dt { width: 40%; float: left;  padding: 2px 0px; }
	.sideColBox dl dd { width: 59%; float: right; font-weight: bold; padding: 2px 0px; color: #555555; }	

	/* Stay Informed box*/
	#sidebox_stayInformed .inner { background: url(../images/sideBox_top-stayInformed.gif) top left no-repeat !important; }
	#sidebox_stayInformed p { clear: both; padding-right: 100px; }

	/* LogosBox */
	#sideColLogos		{ background: url(../images/sideBox_logos.gif); width: 270px; height: 50px; position: relative; margin-bottom: 20px; }
	#sideColLogos span 	{ display: none; }
	#sideColLogos a		{ display: inline-block; height: 50px; position: relative; float: left; }
	#sideColLogos a.logo-irap { width: 65px; left: 12px; }
	#sideColLogos a.logo-gtkp { width: 55px; left: 20px; }
	#sideColLogos a.logo-worldbank { width: 105px; left: 28px; }
	
	/* Related Images box */
	#carousel {
		height: 78px;
		overflow: hidden;
	}
	ul#carousel li {
		display: inline-block;
		padding: 1px;
		width: 70px;
		height: 70px;
		border: #d0d0d0 1px solid;
	}
	ul#carousel li {
		display: inline-block;
		padding: 1px;
		width: 70px;
		height: 70px;
		border: #d0d0d0 1px solid; 
		margin-right: 5px;
	}

.sideColBoxGrey {
	width: 270px;
	background: url(../images/sideBoxGrey_btm.gif) bottom left no-repeat;
	margin-bottom: 20px;
}

	.sideColBoxGrey .inner {
		background: url(../images/sideBoxGrey_top.gif) top left no-repeat;
		min-height: 24px;
		height: auto !important;
		height: 24px;
		padding: 5px 32px 5px 12px;
		text-align: right;	
	}



/* ***** 7. Tab Boxes ***** */
.tabBox { width: 636px; margin-top: 30px; background: url(../images/tabs/tabs_bg-Top.gif) left repeat-y; margin-bottom: 20px; }
.tabBox ul.tabs { margin: 0px !important; background: url(../images/tabs/tabs_divider-bg.gif) top repeat-x; height: 50px; }

.tabBox .tabs li { list-style: none; float: left; padding-left: 3px !important; } 
.tabBox .tabs li a { display: block; width: 210px; height: 50px; line-height: 48px; text-decoration: none !important; text-align: center; }
.tabBox .tabs li a:hover { background-position: left -50px !important; }
.tabBox .tabs li a.selected { background-position: left bottom !important; cursor: default; }
 
.tabBox .tabs li.tabLeft { padding: 0px !important; }
.tabBox .tabs li.tabLeft a   { background: url(../images/tabs/tabs-left.gif) top left no-repeat; }
.tabBox .tabs li.tabMiddle a { background: url(../images/tabs/tabs-middle.gif) top left no-repeat; }
.tabBox .tabs li.tabRight a  { background: url(../images/tabs/tabs-right.gif) top left no-repeat; }
  
.tabBox div {
	padding: 10px 10px 12px 10px;
	min-height: 214px;
	height: auto !important;
	height: 214px;
	clear: left;
	background: url(../images/tabs/tabs_bg-Btm.gif) bottom left no-repeat;
}

.tabBox div a { color: #000; }

.tabBox div dl { height: 30px; line-height: 30px; padding: 0px 12px; }
.tabBox div dl.stripe {
	background-color: #E5E5E5;
}
.tabBox div dt { float: left; width: 255px; clear: both; font-weight: bold;  }
.tabBox div dd { width: 165px; float: left; }




.tabBox2 {  }
.tabBox2 ul.tabs { }

.tabBox2 .tabs li { list-style: none; float: left; padding-left: 2px !important; } 
.tabBox2 .tabs li a { font-size: 12px; font-weight: bold; display: block; width: 257px; margin-top: 0px; height: 48px; line-height: 53px; text-decoration: none !important; text-align: center; }
.tabBox2 .tabs li a:hover { background-position: left -53px !important; }
.tabBox2 .tabs li a.selected { background-position: left -106px !important; cursor: default; }
 
.tabBox2 .tabs li.tabLeft { padding: 0px !important; margin-left: 2px; }
.tabBox2 .tabs li.tabLeft a   { background: url(../images/tabs/tabs-treatments.gif); background-position: left 0px; background-repeat: no-repeat; }
.tabBox2 .tabs li.tabMiddle a { background: url(../images/tabs/tabs-treatments.gif); background-position: left 0px; background-repeat: no-repeat; }
.tabBox2 .tabs li.tabRight a  { background: url(../images/tabs/tabs-treatments.gif); background-position: left 0px; background-repeat: no-repeat; }


.tabBox2 .sublinksLeft {
	width: 257px;
	float: left;
	margin-left: 2px;
}
.tabBox2 .sublinksMiddle {
	width: 257px;
	float: left;
	margin-left: 2px;
}
.tabBox2 .sublinksRight {
	width: 257px;
	float: left;
	margin-left: 2px;
}


/* ***** 8. Footers ***** */

	#footerFloating .inner { 
		background: url(../images/footer-bg_btm.gif) bottom left no-repeat;
		min-height: 55px;
		height: auto !important;
		height: 55px;
		float: left;
		width: 100%;
	}
		
	#footerFloating .logo { float: left; 
		width: 70px; 
		padding-left: 10px; 
		position: relative; 
		top: 10px; 
	}
	
	#footerFloating .left { 
		text-align: left; 
		float: left; 
		width: 450px; 
		padding: 0px 10px; 
		height: 50px;
	}
	
	#footerFloating .right { 
		text-align: right; 
		float: right; 
		width: 450px; 
		padding: 0px 10px; 
		height: 50px;
	}
	
	#footerFloating .right a {
		padding: 0px;
	}
	
	#footerFloating .left p, #footerFloating .right p {
		line-height: 50px;
		height: 50px;
	}

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* ***** 9. Search Page ***** */

#searchResults .divider {  
	position: relative;
	left: -20px;
	width: 655px;
	padding: 15px 0px ;
}

.greenBox {
	width:  655px;
	background: url(../images/greenBox_top.gif) top left no-repeat;
	padding-top: 4px;
	margin-top: 20px;
	position: relative;
	left: -20px
}
	.greenBox .inner {
		background: url(../images/greenBox_btm.gif) bottom left no-repeat;
		min-height: 20px;
		height: auto !important;
		height: 20px;
		float: left;
		width: 615px;
		padding: 6px 20px 10px 20px;
		margin-bottom: 10px;
	}

	.greenBox.pagination { text-align: right; margin-top: 5px !important; }

	.greenBox .inner p { padding: 0px !important; line-height: 20px; }




/* ***** 10. Feature Box ***** */

#featureBoxWrapper {
	position: relative;
	left: -20px;
	width: 655px;
}

.featureBox {
	width: 320px;
	margin-top: 20px;
	min-height: 180px;
	height: auto !important;
	height: 180px;
	float: left;
	display: inline;
}
	.featureBox .inner {
		float: left;
		width: 190px;
		min-height: 140px;
		height: auto !important;
		height: 140px;
		padding: 12px 10px 15px 120px;
	}
	
.featureBox.grey { background: url(../images/featureBoxGrey_btm.gif) bottom left no-repeat; }	
.featureBox.green { background: url(../images/featureBoxGreen_btm.gif) bottom left no-repeat; }

.featureBox.grey .inner { background: url(../images/featureBoxGrey_top.gif) top left no-repeat; }
.featureBox.green .inner { background: url(../images/featureBoxGreen_top.gif) top left no-repeat; }

.featureBox.right { float: right; }

.featureBox .moreLink {
	padding-bottom: 7px;
	margin-right: 10px;
	float: right;
	display: inline;
}


#printHeader {
	display: none;	
}
#tabBoxPrint {
	display: none;
}