/* Add your own custom css to this file. You may wish to use css !important calls to override css from the template css files.
----------------------------------------------------------- */


   
   

/* BEN HURN - Product Table formatting
----------------------------------------------------------- */

table.ProductTable {
width:100%;
border: 1px solid grey;
font-size: 12px;
}

table.ProductTable tr:first-child td {
background-color: #444444;
color: #ffffff
}

table.ProductTable td:first-child {
padding-left: 10px;
font-weight: bold;
}


table.ProductTable tr:nth-child(odd) td {
margin: 0 5px 0 5px;
line-height: 19px;
}

table.ProductTable tr:nth-child(even) td {
margin: 0 5px 0 5px;
background-color: #DDDDDD;
line-height: 19px;
}

/* BEN HURN - VIDEO EDIT
----------------------------------------------------------- */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*  CUSTOM STYLES */


.productheader {
  color:#019dda;
  font-weight:bolder;
  text-transform: uppercase;
  font-size:100%;
}

#timeline_feed1.sboard .sb-content {
 border: none !important;
padding: 0px !important;
background-color: #fff !important;

}
#s5_pos_top_row2_3 .module_round_box {
padding: 0px !important;
border: none !important;

/*  RESPONSIVE DIVS */


/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col { 
		margin: 1% 0 1% 0%;
	}
}

/*  END RESPONSIVE DIVS */

/*  GRID OF FOUR   ============================================================================= */


	.span_1_of_4 {
		width: 25%; 
		margin-left:0px !important;
	}
	.span_2_of_4 {
		width: 25%; 
		margin-left:0px !important;
	}
	.span_3_of_4 {
		width: 25%;
		margin-left:0px !important;
	}
	.span_4_of_4 {
		width: 25%;
		margin-left:0px !important;
	}




/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_1_of_4 {
		width: 50%; 
		margin-left:0px !important;
	}
	.span_2_of_4 {
		width: 50%; 
		margin-left:0px !important;
	}
	.span_3_of_4 {
		width: 50%;
		margin-left:0px !important;
	}
	.span_4_of_4 {
		width: 50%;
		margin-left:0px !important;
	}
}


/*  GRID OF SIX   ============================================================================= */

	
.span_1_of_6 {
	width: 16%; 
	margin-left:0px !important;
}

.span_2_of_6 {
	width: 16%; 
	margin-left:0px !important;
}

.span_3_of_6 {
	width: 16%; 
	margin-left:0px !important;
}
	
.span_4_of_6 {
	width: 16%; 
	margin-left:0px !important;
}

.span_5_of_6 {
	width: 16%; 
	margin-left:0px !important;
}

.span_6_of_6 {
	width: 16%; 
	margin-left:0px !important;
}



/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_1_of_6 {
	width: 50%; 
	margin-left:0px !important;
}

.span_2_of_6 {
	width: 50%; 
	margin-left:0px !important;
}

.span_3_of_6 {
	width: 50%; 
	margin-left:0px !important;
}
	
.span_4_of_6 {
	width: 50%; 
	margin-left:0px !important;
}

.span_5_of_6 {
	width: 50%; 
	margin-left:0px !important;
}

.span_6_of_6 {
	width: 50%; 
	margin-left:0px !important;
}
}



   

/*  GRID OF THREE   ============================================================================= */

	
.span_3_of_3 {
	width: 33%; 
	margin-left:0px !important;
}

.span_2_of_3 {
	width: 33%; 
	margin-left:0px !important;
}

.span_1_of_3 {
	width: 33%; 
	margin-left:0px !important;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_3_of_3 {
		width: 100%; 
		margin-left:0px !important;
	}
	.span_2_of_3 {
		width: 100%; 
		margin-left:0px !important;
	}
	.span_1_of_3 {
		width: 100%;
		margin-left:0px !important;
	}
}


/*  GRID OF TWO   ============================================================================= */


.span_2_of_2_half {
	width: 48%;
}

.span_1_of_2_half  {
	width: 48%;
}

.span_2_of_2 {
	width: 56%;
}

.span_1_of_2 {
	width: 40%;
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_2_of_2, .span_1_of_2_half {
		width: 100%; 
		margin-left:0px !important; 
	}
	.span_1_of_2, .span_2_of_2_half {
		width: 100%; 
		margin-left:0px !important; 
	}
}


/*  GRID OF TWO THIRDS   ============================================================================= */

	
.span_1_and_2_of_3 {
	width: 66%; 
	margin-left:0px !important;
}

.span_3_and_3_of_3 {
	width: 33%; 
	margin-left:0px !important;
}




/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.span_1_and_2_of_3 {
		width: 100%; 
		margin-left:0px !important;
	}
	.span_3_and_3_of_3 {
		width: 100%; 
		margin-left:0px !important;
	}

}



/*  OTHER CUSTOM CSS =================================================================== */


.latestnews-gray li {   
   background: url('dotpoint.jpg') 0 4px no-repeat!important;
   padding-left:20px;
   }
   
 color:  
.webform_step {
	width:244px !important;
}

.aw-widget-content {
 border:0px !important;
 background: none !important;
 
}

.aw-widget-current-inner .aw-widget-content {
border:0px !important;
color:#000 !important;
}

.aw-current-weather-inner {
color:#123;
}

.aw-temperature-today {
color:#123;
}

.aw-toggle {
display:none;
}

.navigation-container-custom {
top: -36px !important;
}

.webform_step {
width:100% !important;
}


/* Heading and hex dot points  ============================= */

.pageHeading {
    font-family: Habibi;
    font-weight: 900;
    line-height: 20pt;
    font-size: 13pt;
    color: #3e538e !important;
    padding-bottom: 20px;
    }
    
.dotpoint li {   
   background: url('dotpoint.jpg') 0 4px no-repeat!important;
   padding-left:20px;
   list-style-type: none;
   }

}




/*  RESPONSIVE DIV SWAP FOR MOBILE OR FULLSCREEN  ============================================================================= */

@media screen and (min-width:0px) and (max-width: 50000px){
.show_pc_only{
display:none !important;
}
}
@media screen and (min-width:0px) and (max-width: 50000px){
.show_mobile_only {
display:none !important;
}
}

@media screen and (min-width:0px) and (max-width: 580px){
.show_mobile_only {
display:inline !important;
}
}
@media screen and (min-width:580px) and (max-width: 50000px){
.show_pc_only {
display:inline !important;
}
}

/*  REMOVE PADDING ON RIGHT MENU FOR MOBILES  ============================================================================= */


@media screen and (max-width: 580px){
.module_round_box, .module_round_box-outline1, .module_round_box-outline2 {
padding:0px !important;
}

  
#s5_center_area1 .module_round_box_outer {
margin-right:0px;
margin-left:0px;
  
}
#div.s5_accordion_menu_element li a, .s5_am_inner_li .separator span {
font-size: 1.2em !important;
line-height: 2em !important;    
  }
  
#s5_accordion_menu h3 {  
font-size: 1.2em !important;
font-weight: 600 !important;
}
}


/* Module Headers for front page highlights  ============================= */

.imageName543 {
background-image: url("module-header-handyhints.gif");
height:55px;
background-repeat: no-repeat;
padding-bottom: 5px;
}

.imageName528 {
background-image: url("module-header-happening.gif");
height:55px;
background-repeat: no-repeat;
padding-bottom: 5px;
}

@media only screen and (max-width: 480px) {

.imageName528 {
background-image: url("module-header-happening-small.gif");
height:55px;
background-repeat: no-repeat;
padding-bottom: 5px;
}
}



/*  SHOW ONLY ON MOBILE DEVICES =================================================================== */

.mobileShow { display: none !important;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){ .mobileShow { display: inline !important;}}
   
   
   /*  HIDE ONLY ON MOBILE DEVICES */
   
.mobileHide { display: inline !important;}
   /* Smartphone Portrait and Landscape */
   @media only screen
   and (min-device-width : 320px)
   and (max-device-width : 480px){  .mobileHide { display: none !important;}}
   


/*  REMOVE SIDE PADDING AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	#s5_component_wrap_inner {
	padding-left: 0px!important; 
	padding-right: 0px!important; 
	}

}


/*  HIDE EXTRA TABLE STUFF */

.hiddentd {
	display:none; 
	}