﻿/**
 * Blue Steel.
 * A design created for the new Queensland Government WebCentre.
 */
@media screen,projection,tv,handheld {
	#header {
		position: relative;
		/*background: #6b7279 url(./../../images/cru/header-bg.jpg) left top no-repeat;*/
		/* background option 1*/
		/*background-color: #00a79d;
		background: linear-gradient(#CCFFFF, #00a79d); */
		
		/*background option 2 */
		background-color: #fff; 
		
		/*background option 3 
		background-color: #fff;
		background: linear-gradient(#fff, #fff 65%, rgba(0,167,157,0), rgba(0,167,157,1)); */
		
		color: #000;
	}
	#header .box-sizing {
		/*background: transparent url(./../../images/cru/agency-branding.png) left bottom no-repeat;*/
	}
    #header #qg-coa
    {
        margin-left: 20%;
    }
	#header #qg-coa img
	{
		height: 71px;
		width: 361px;
        margin-top: 5px;
	}
    #header .print-version 
    {
        display: none;
    }
	#nav-site {
		background: #00a79d;
		color: #000;
	}
    #nav-site .qg-drop-down
    {
        margin-left: 20%;
    }
	#nav-site a {
		font-weight: bold;
	}
	
	#header a,
	#header a:link,
	#header a:visited,
	#nav-site a,
	#nav-site a:link,
	#nav-site a:visited {
		color: #000;
	}
	
	.aside .box-sizing {
		background: #eef1f5;
	}
	.article .box-sizing {
		background: #fff;
		border: 1px solid #eef1f5;
	}
	
	
	#nav-site li {
		border-left: 1px solid #5a6066;
		padding: .3em .1em 0;
	}
	
	#nav-site li a {
		padding: .3em 1em .6em;
	}
	
	#tools li,
	#breadcrumbs li,
	#footer-contents li {
		background: transparent url(./../../images/cru/separator.png) left center no-repeat;
	}
	
	#tools li:first-child,
	#nav-site li:first-child,
	#breadcrumbs li:first-child,
	#footer-contents li:first-child {
		background: none;
		border: none;
	}
	
	#breadcrumbs li {
		padding-left: 10px;
		background: transparent url(./../../images/cru/breadcrumb.png) left center no-repeat;
	}



/* page-container, content, column backgrounds */
	/*body
	{
		background-color: #00a79d;
	}*/
	#page-container {
		background-color: #fff;
		background-position: center top;
		background-repeat: repeat-y;
		color: #716558;
		padding-top: 0;
		padding-bottom: 0;
	}
	#page-container h1 {
		color: #000;
	}
	#document-properties {
		margin: 0;
	}	
	#breadcrumbs,
	.article,
	#document-properties,
	#post-page-options {
		margin-top: 0;
		margin-bottom: 0;
	}
	#breadcrumbs ol,
	.article .box-sizing,
	#document-properties .box-sizing,
	#post-page-options ul,
	#page-feedback form {
		border: none;
		background: #fff;
	}
	#breadcrumbs ol {
		padding-top: 1.5em;
	}
	/*#post-page-options ul.qg-drop-down {
		padding-bottom: 1em;
	}
	#post-page-options li:hover ul,
	#post-page-options li.hover ul {
		left: -.2em;
	}*/
	#pre-page-options,
	#post-page-options
	{
		display: none;
	}
	.aside .box-sizing {
		margin-top: 0;
		margin-bottom: 0;
	}
	.sectioned-tabular h3
	{
		border-bottom: 1px solid #716558;
	}

    /*Contact form specific styles*/
    .cruContact
    {
        margin: 1em 0;
        border: none;
    }
    .field,
    .radioField,
    .submit
    {
        clear: both;
        position: relative;
        margin: 0.5em 0 0 0.5em;
    }
    .radioField .input
    {
        padding: 0.5em 0;
    }
    .field label
    {
        float: left;
        width: 15em;
        color: #000;
    }
    .radioField label
    {
        padding: 0 0.5em;
        color: #000;
    }
    .field input
    {
        width: 30em;
        color: #000;
    }
    .field textarea
    {
        width: 30em;
        color: #000;
        font-family: Verdana,Helvetica,Arial,sans-serif;
        font-size: 1.04em;
        line-height: 1.5;
    }
    .radioText
    {
        padding: 0.5em 0;
        color: #000;
    }
    .cruContact abbr
    {
        color: red;
    }
    .submit input
    {
        padding: 0.5em 1.2em;
        font-weight: bold;
        color: #000;
        background-color: #00a79d;
        border-radius: 5px;
    }
    .refCheck
    {
        position:absolute;
        left:-99999em;
        top: -99999em;
    }
    .input .alert
    {
        color: red;
    }

/* footer */
	#footer {
		background: #00a79d;
		color: #000;
		padding-bottom: 5%;
		background: linear-gradient(#00a79d, #fff 70%)
	}
	#fat-footer {
		background: #3a4249;
		padding-top: .7em;
		padding-bottom: .7em;
		margin: 0;
	}
	#fat-footer .section {
		background: #31373e;
		padding-bottom: 1em;
		min-height: 20em;
	}
	#fat-footer .section * {
		margin: 0 1em;
	}
	#fat-footer .section * * {
		margin: 0;
	}
	/*
	#fat-footer h2 {
		position: static;
		color: #fff;
	}
	*/
	#footer a,
	#footer a:link,
	#footer a:visited {
		color: #000;
	}
	
	
	
/* Site navigation */
	#nav-site ul ul {
		background: #fff;
		border: solid #3a4249;
		border-width: 2px;
		margin: 0 -2px -2px -2px;
	}
	#nav-site ul ul li {
		background: none;
		border: none;
	}
	
	#nav-site ul li ul {
		top: 2.2em;
	}
	
	
	#nav-site a:hover,
	#nav-site a:focus,
	#nav-site .single a:hover,
	#nav-site .single a:focus {
		background: #fff;
		color: #3a4249;
	}
	/*
	#nav-site li a.open,
	#nav-site li a.open:hover,
	#nav-site li a.open:focus {
		background: #fff;
		color: #3a4249;
	}
	*/
	#nav-site li a:hover {
		/*background: #efefef;*/
	}
	#nav-site ul ul li a:hover {
		/*background: #ddd;*/
	}
	
	
	#nav-site ul li:hover a,
	#nav-site ul li:hover a:link,
	#nav-site ul li:hover a:hover,
	#nav-site ul li:hover a:visited,
	#nav-site ul li.hover a,
	#nav-site ul li.hover a:link,
	#nav-site ul li.hover a:hover,
	#nav-site ul li.hover a:visited,
	#nav-site ul li a.open,
	#nav-site ul li a.open:link,
	#nav-site ul li a.open:hover,
	#nav-site ul li a.open:visited {
		color: #3a4249;
		background: #fff;
	}
	
	
	#nav-site ul li:hover ul,
	#nav-site ul li.hover ul {
		left: 1px;
	}
	
	#nav-site ul li:hover ul.right-edge,
	#nav-site ul li.hover ul.right-edge {
		right: 1px;
	}
	
	

/* Section navigation */
	#nav-section .box-sizing {
		background: #fff;
	}
	#nav-section ul {
		list-style-type: square;
	}
	
/* Page options */
	.page-options ul ul,
	#post-page-options ul ul {
		background: #efefef;
	}
	.page-options ul ul li a:hover {
		background: #ddd;
	}
	
/* Asides */
	.aside .box-sizing {
		background: #fff;
	}

/* Page feedback */
	#page-feedback form {
		
	}
}

@media (min-width: 43em) /* CONSIDER CHANGING TO 63em SO "TABLE" COLLAPSES EARLIER DUE TO EXTRA CONTENT */
{
	#nav-section
	{
		width: 20%;
	}
	#content-container
	{
		width: 80%;
	}
	.article, #document-properties, #post-page-options, #page-feedback
	{
		width: 77%;
	}
	/*tabluar visual layout for the recommendations page */
	.sectioned-tabular
	{
		position: relative;
		width: 100%;
        background-color: #D6D4D4; /* DBB */
	}
    /* This fix is to properly display the background colour from the parent div to the bottom of all child divs - DBB */
    .sectioned-tabular::after
    {
        clear:both;
        content:"";
        display:table;
	}
	.sectioned-tabular h2
	{
		clear: both;
		text-align: center;
		width: 100%;
		background-color: #00a79d;
		color: #000;
		padding: 0.5em 0;
		/*margin: 0.1em;*/
        margin: 0;
        border-top: 2px solid #FFF;
	}
	.sectioned-row
	{
		position: relative;
		width: 100%;
		clear: both;
		margin: 0;
		/*padding: 0.1em 0 0 0;*/
        padding: 2px 0 0 0; /* DBB */
        background-color: #FFF;
	}
	.sectioned-tabular h3
	{
		display: table-cell;
		float: left;
		height: 100%;
		width: 20%;
		background-color: #D6D4D4;
		color: #000;
		margin: 0;
		padding: 0.5em 0;
		text-align: center;
		border-bottom: none;
	}
	.sectioned-tabular ul
	{
		position: relative;
		float: left;
		width: 20%;
		background-color: #D6D4D4;
		color: #000;
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
		padding: 0.1em 0 0 1.1em; /* DBB */
	}
	.sectioned-tabular ul li
	{
		margin: 0.1em;
	}
    .sectioned-tabular ul.goal
    {
        float: right;
        width: 55%;
        color: #000;
        margin-top: 0;
        margin-bottom: 0;
    }
    .sectioned-tabular ul.goal ul {
        list-style-type: lower-alpha;
        width: auto;
        padding-left: 1.5em;
    }
    .sectioned-tabular ul.goal ul ul {
        list-style-type: lower-roman;
    }
}

@media print
{
    #header #qg-coa img
	{
		display: none;
	}
    #header .print-version 
    {
        display: inline;
    }
}