/*  BASE SETTINGS  */

html {
	background-image:url('../images/steel_band_deep.jpg');
	overflow-y: scroll;

}

body {
	margin:0;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }


/* xxxx  DIV IDs  xxxx */

#wrapper {
	width:100%;
}


/* Cookie alert message box */
.alert {
	position: fixed;
	width: 100%;
	padding: 25px 40px 10px 40px;
	color: #FFFFFF;
	font-size: 13px;
	background-color: rgba(190,3,30,0.8);/*rgba(38,38,152,0.8) rgba(190,3,30,0.8);  #BE031E;*/
	bottom: 0; /*margin-top: -40px;*/;
	opacity: 1;
	transition: opacity 0.6s;
/* 600ms to fade out */z-index: 1000;
}

.alert a {
	color:#FFFFFF;
}

.alert a:hover {
	color:#8282E0;
}


/* The close button */
.closebtn {
    margin:0 0 25px 25px;
    color: #FFFFFF;
    font-weight: bold;
    float: right;
    font-size: 25px;
    line-height: 10px;
    cursor: pointer;
    transition: 1s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
    color:#8282E0;
    transition: 0s;

} 




#navband {
	width:100%;
}


#row7h, #row10h, #row15h, #row20h, #row25h, #row40h, #row45, #row50,, #rowslider {
	float:left;
	clear:both;
	width:100%;
	background-color:none;		
	}

#row7h {height:7vh;}
#row10h {height:10vh;}
#row15h {height:15vh;}
#row20h {height:20vh;}
#row25h {height:25vh;}
#row40h {height:40vh;}
#row45h {height:45vh;}
#row50h {height:50vh;}
#rowslider {height:35vh}


#fixed {
	width:100%;
	position:fixed;
	top:0;	
	z-index:100;
}

/* ------ Variable depth content -----*/
#rowcontent {
	display:table;
	float:left;
	clear:both;
	width:100%;
	background-color:none;		
	}

#rowcontent.top {
	margin-top:10vh;
}

#content12, #content25, #content50  {
	display:table-cell;
	vertical-align: top;
	/*padding:30px;*/
	background-image:url('../images/steel_band_deep.jpg');
	border: 1px solid #555;
	z-index:5;
}

#content12 {width:12.5%;}
#content25 {width:25%; background-image:url('../images/steel_band_blue.jpg');}
#content50 {width:50%;}


#content25.grey {width:25%; background-image:url('../images/steel_band_deep.jpg');}


.white {
	padding:20px 30px !important;
	background-image:none !important;
	background-color:#ffffff;
	box-shadow:3px 3px 7px 3px #555 inset; /* none|h-shadow v-shadow blur spread color |inset|initial|inherit;  */
}

/* ------ BASE band -----*/
#rowbase {
	display:table;
	float:left;
	clear:both;
	width:100%;
	background-color:none;		
	}


#base12, #base25, #base50  {
	display:table-cell;
	vertical-align: top;
	padding:30px;
	background-image:url('../images/slat4.jpg');
	border: 1px solid #555;
	z-index:5;
}

#base12 {width:12.5%;}
#base25 {width:25%;}
#base50 {width:50%;}


#rowslide {
	display:table;
	float:left;
	clear:both;
	width:100%;
	background-color:none;		
	}

#slider75 {
	width:75%;
	display:table-cell;
	padding:0;
	z-index:5;
}

#linkbox {
	position:fixed;
	right:0;
	top:30%;
	margin-right:0px;
	max-width:100px;
	padding:2px;
	background-color:#2D3099;
	border:2px solid white;
	border-style:groove;
	border-radius:10px;
	z-index:100;

}




/*----CONTENT BOXES----*/

#side1, #sideL, #sideR, #box1, #box2, #box3, #box4, #box6, #box1-2, #menubox4 {
	float:left;
	background-image:url('../images/steel_band_deep.jpg');
	border: 1px solid #555;
	z-index:5;
	}

#sideL {width: 12.5%; height:100%;} 

#sideR {width: 12.5%; height:100%;}   /* background-size:100% 100%;}  */

#side1 {width: 12.5%; height:100%;} 

#box1 {width: 12.5%; height:100%;}   /* background-size:100% 100%;}  */

#box2 {width: 25%;	height:100%; background-image:url('../images/steel_band_blue.jpg');}   /*  background-size:50% 100%;} */

#box3 {width: 37.5%; height:100%;}   /*  background-size:33.33% 100%;} */

#box4 {width: 50%;	height:100%;}   /*  background-size:25% 100%;} */

#box6 {width: 75%;	height:100%;}   /*  background-size:25% 100%;} */

#box1-2 {width: 12.5%;	height:100%;}   /*  background-size:100% 100%;} */

#box4.text {
	padding:15px 0 0 30px;	
}

#menubox4 {width: 50%;	height:100%; position:fixed}

#picbox1 {
	float:left;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
	width: 33.33%; 
	height:100%;
	z-index:3;
	}   

/*----BLANK BOXES----*/

#side1b, #box1b, #box2b, #box3b, #box4b, #box6b, #box8b, #box1-2b {
	float:left;
	background-color:#5C5C5C;
	border: 1px solid #555;
	box-shadow:3px 3px 7px 3px #333 inset; /* none|h-shadow v-shadow blur spread color |inset|initial|inherit;  */
	z-index:5;
	}

#side1b {width: 12.5%; height:100%;}
 
#box1b {width: 12.5%; height:100%;}

#box2b {width: 25%; height:100%;}

#box3b {width: 37.5%; height:100%;}

#box4b {width: 50%; height:100%;}

#box6b {width: 75%; height:100%}

#box8b {width: 100%; height:100%;}

#box1-2b {width: 12.5%; height:100%;}

#box4links {width: 37.5%; height:100%;}

#slider {margin-left:12.5%; width:75%; height:auto; border:0;}

#box4links {
	float:left;
	background-color:#5C5C5C;
	border: 0px solid #555;
	z-index:3;
	}

/*----SLATTED BOXES----*/

#slatside1, #slat1, #slat2, #slat3, #slat4, #slat6, #slat8, #slat1-2, #slider6 {
	float:left;
	background-image:url('../images/slat3.jpg');
	border: 1px solid #555;
	box-shadow:0px 5px 10px 1px #333 inset; /* none|h-shadow v-shadow blur spread color |inset|initial|inherit;  */
	z-index:3;
	}

#slatside1 {width: 12.5%; height:100%;}

#slat1 {width: 12.5%; height:100%;}

#slat2 {width: 25%; height:100%;}

#slat3 {width: 37.5%; height:100%;}

#slat4 {width: 50%; height:100%;}

#slat6 {width: 75%; height:100%}

#slat8 {width: 100%; height:100%;}

#slat1-2 {width: 12.5%; height:100%;}

#slider6 {width: 75%; height:100%}


#map {
	width: 100%;
	height:400px;
	z-index:100;
}




/* -----TEXT STYLES  -------- */

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	line-height:1;
	color:#555555;
}

.bodytext {
	font-size:1em;
	line-height:1.4;
	padding:0.5% 30px;	
}

.bodytext a {
	font-weight: normal;
	color: #262698;
	text-decoration:underline;
}

.bodytext a:hover {
	font-weight: normal;
	background-color:#262698;
	color:#FFFFFF;
}

.bodytext ul {
	padding-left:20px;
	font-size:1em;
	line-height:1.5;
	text-indent:-15px;  /* creates a hanging indent for long bullets  */
    list-style: none; /* Remove list bullets */
}

/*.bodytext li { 
	text-indent:0px;
    padding:0 30px 0 0px; 
}*/

.bodytext li:before {
    content: "•"; /* Insert content that looks like bullets */   
    padding-right: 5px; /* Distance between bullet and first letter  */
    text-indent:0px;
    color:  #262698; /* APL dk blue #262698 - mid blue #3332CB  */
}

.bodytextwhite {
	color:#FFFFFF;
	font-size:1em;
	line-height:1.4;
	padding:0.5% 30px;	
}

.bodytextwhite a {
	color:#FFFFFF;
	text-decoration:none;		
}

.bodytextwhite a:hover {
	color: #C0C0C0;
}




.bodytextwhite ul {
	font-size:1em;
	line-height:1.5;
	text-indent:-17px;  /* creates a hanging indent for long bullets  */
    list-style: none; /* Remove list bullets */
}

/*.bodytext li { 
	text-indent:0px;
    padding:0 30px 0 0px; 
}*/

.bodytextwhite li:before {
    content: "•"; /* Insert content that looks like bullets */   
    padding-right: 12px; /* Distance between bullet and first letter  */
    text-indent:0px;
    color:  #FFFFFF; /* APL dk blue #262698 - mid blue #3332CB  */
}

#linktitle {
	height:40px;
	margin-bottom:10px;
}




.link { 
	font-size:1em;
	line-height:0.9;
	font-weight:bold;
	color:#f00;		
	padding:0 0 10px 0;
	margin:0;
}

/* .link a {
	font-weight: normal;
	color: #262698;
	text-decoration:underline;
}

.link a:hover {
	font-weight: normal;
	background-color:#262698;
	color:#FFFFFF;
}

*/


.intro  {
	font-size:1.1em;
	line-height:1.4;	
	font-weight:bold;		
}

.h1 {
	font-size:1.6em;
	line-height:1.2;
	font-weight:bold;
	color: #262698;		
	margin-bottom:-10px;
	padding:0;
}

.h2 {
	font-size:1.2em;
	line-height:1.2;
	font-weight:bold;
	padding:0;
}

.h2 ul {
	padding-left:50px;
}

.headtitle {
	font-size:2em;
	line-height:1;
	color: #262698;
	font-weight:bold;
	text-transform:uppercase;
	padding:20px 0 0 0;
	margin:0;
	}


.coname {
	font-size:1.5em;
	line-height:1.2;
	font-weight:bold;
	padding:0;
	margin:20px 0 0 0;
	color:#FFFFFF;
			
}

.address {
	font-size:0.85em;
	line-height:1.5;
	color:#FFFFFF;		
}


.address a {
	font-size:1em;
	line-height:1.5;
	text-decoration:none;	
	color:#FFFFFF;		
}

.address a:hover {
	font-size: 1em;
	line-height: 1.5;
	color: #FFFFCC;
}


.centre {
	font-size:1.1em;
	line-height:1.2;
	text-align:center;
	font-weight:bold;
	color: #f00;
	text-decoration:none;		
	margin-bottom:-10px;
	padding:0 0 50px 0;
}

/*-- Socila Media Links --*/

#smbox {
	position:fixed;
	right:0;
	top:15%;
	margin-right:0px;
	max-width:50px;
	padding:0 0 5px 0;
	background-color:transparent;
	border:0px solid white;
	border-style:groove;
	border-radius:10px;
	z-index:21;

}


img.smicon {
	float:left;
	position:relative;	
	padding:5px 5px;	
}




/* ---ICONS ----*/


#iconbox {
	float:left;
	display:inline;
	margin:20px 0% 5px 0%;
	width:16.66%;
	text-align:center;
}

#iconbox a {
	font-size:0.9em;
	line-height:1.2;
	color:#555555;
	text-decoration:none;	
	background-color:transparent;	
}


#iconbox a:hover {
	color:#BE031E;
	text-decoration:none;		
}


img.icon {
	opacity: 1;
	width:100%;
	position: relative;
	padding:2%;
}

img.icon:hover {
	opacity: 0.3;
}


/* ----TABLE ----*/

table {
    border-collapse: collapse;
}

td {
	text-align: left;
	padding: 15px;
    vertical-align: middle;
}




/* ---ACCORDIAN ---*/

button.accordion {
	background-image:url('../images/steel_band_deep.jpg');
	border: 1px solid #555;
	color: #444;
	cursor: pointer;
	padding:20px 30px 10px 30px;
	width: 50%;
	margin-left:12.5%;
	text-align: left;
	outline: none;
	font-size:1.2em;
	line-height:1.2;
	color:#555555;
	transition: depth 0.9s;
}


button.accordion.active, button.accordion:hover {
	background-image:url('../images/steel_band_midgrey.jpg');
}


button.accordion:after {
    content: '\25BC';
	color:#262698;
    font-size:1.5em;
    font-weight: bold;
    float: right;
    margin-left:5px;
}

button.accordion.active:after {
    content: "\25B2";
}


div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}


#accordholder {
	width:100%;
    padding:0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-out;
}

#middle {
	width:100%; 
	display:table; 
	background-color:blue; 
	padding:0px;
}



/*-----ENQUIRY FORM ------*/

#aplform {
	width:50%;
	padding:0 0 20px 0;
	background-image:none;
}

.formbox {
	float: left;
	width: 100%;
	text-align: left;
}

.formrow {
	padding-top: 2px;
	text-align: left;
}

.formlabel {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 10pt;
	text-decoration: none;
	color: #666666;
	padding: 5px 0;
	float: left;
	text-align: left;
	width: 150px;  /*  =====Change for IE7 ===*/
}


.formtitle {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 1.7em;
	line-height: 1.2;
	font-weight:bold;
	color: #262698;
	text-decoration: none;
	padding: 0px 25px 0px 0px;
	border-top: 0px dotted #3D94CF;

}

.smallformtext {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1;
	color: #666666;
	text-decoration: none;
	padding-right: 30px;
	padding-left: 0px;
	margin-bottom: 10px;
}

.smallformtext a{
	color: #333;
	text-decoration: none;
}


/* hide the field so real users cant fill it in*/
#website  { 
	display:none; 
}


/* ----IMAGES ----- */

img.linkicon {
	float:left;
	margin:5px 10px 20px 0;
	
	
}

img.ph100 {
	float:left;
	width:100%;
	overflow:hidden;
}

img.ph80 {
	width:80%;
	margin:20px 0 0 0;
	overflow:hidden;
}

img.ph50 {
	width:50%;
	margin:20px 0 0 0;
	overflow:hidden;
}

img.ph30 {
	width:30%;
	margin:20px 0 0 0;
	overflow:hidden;
}


img.cc_logo {
	display:block;
	float:left;
	max-width:150px;
	margin: 0 20px;
	}




img.phleft {
	float:left;
	width:100%;
	overflow:hidden;
}

img.phinline {
	float:left;
	padding:5px 20px 10px 0;
	z-index:3;
}

img.diagram {
	float:left;
	width:90%;
	overflow:hidden;
	padding:20px 0;
}

img.profile {
	float:left;
	width:100%;
	max-width:700px;
	overflow:hidden;
}


img.corner {
	float:left;
	width:90%;
	max-width:400px;
	overflow:hidden;
	padding-bottom:20px;
}

img.slider {
	width:100%;
	overflow:hidden;
	border:none;
}

img.box1 {
	float:left;
	width:100%;
	overflow:hidden;
}

img.box25 {
	float:left;
	width:100%;
	overflow:hidden;
}

img.lglogo {
	width:60%;
	display: block;
    margin: 20px auto;
    overflow:hidden;
}


img.smlogo {
	display:none;
	}

img.aplfull {
	display:inline;
	width:50%;
	margin:0 0 0 0px;
	padding:0;
	overflow:hidden;
}


img.cladlogos {
	float:left;
	width:90%;
	margin:20px;
	display: block;
    overflow:hidden;

}


img.cladlogoslarge {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	margin-top:20px;
	margin-bottom:25px;	
	width:90%;
	max-width:300px;
    overflow:hidden;

}


img.baselogo {
	width:70%;
	display: block;
    margin: 10px auto;
    overflow:hidden;
}

img.aplyrs {
  	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: 40%;
}




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

body {
	font-size:13px;
	line-height:1;
}
}


@media only screen and ( max-width: 1280px ) 
	{
	
	/*#rowslider {height:auto;}*/
		
	.alert {
	padding: 15px 40px 10px 40px;
	}

	#side1, #sideL, #slideR, #side1b, #slatside1, #content12, #base12 {
		display:none;
	}
	
	#box1 {width: 16.666%;}  
	#box2 {width: 33.333%;}   
	#box3 {width: 50%;}   
	#box4 {width: 66.666%;}   
	#box4 {width: 66.666%;} 	
	#slat2 {width: 33.333%;}
	#slat4 {width: 66.666%;} 
	#slider6 {width: 100%; height:auto;} 
	#slat6 {width: 100%;} 
	#box6b {width: 100%;  height:auto; border:0; box-shadow:none;} 
	#box1-2 {width: 16.666%;} 	
	#picbox1 {width: 33.333%;}
	#content25, #content25.grey {width: 33.333%;}
	#content50 {width: 66.666%;}
	#menubox4 {width: 66.666%;} 
	
	img.slider {width:100%;}

	.headtitle {
	font-size:1.8em;	
	}

	button.accordion {
	width: 66.666%;
	margin-left:0;
	}
	
}


@media only screen and ( max-width: 960px ) 
	{
	.headtitle {
	font-size:1.5em;	
	}

#iconbox {
	margin:20px 0% 5px 0%;
	width:20%;

	}


	#iconbox a {
	font-size:0.85em;
		
}




}


@media only screen and ( max-width: 800px ) 
	{
	
	#row10h, #row15h, #row20h, #row25h, #row40h, #row45h, #row50h, #rowslider, #rowcontent, #slat4, #base12 {
	clear:both;
	height:auto;
	}
	
	#box1, #box2, #box3, #box4, #box6, #box6b, #box1-2, #content25, #content25.grey, #content50, #menubox4, #slat4, #base25, #base50 {
	
	float:left;
	clear:both;
	height:auto;
	}

	#box1 {width: 16.666%;}  
	#box2 {width: 100%;}   
	#box3 {width: 100%;}   
	#box4 {width: 100%;}
	#box6 {width: 100%;} 
	#box1-2 {width: 16.666%;} 	
	#slat2 {width: 100%;}
	#slat4 {width: 100%; text-align:center;} 
	#picbox1 {width: 33.333%;}
	#content25, #content25.grey {width: 100%;}
	#content50 {width: 100%;}
	#base25 {width: 100%;}
	#base50 {width: 100%; text-align:center;} 
	
	#menubox4 {width: 100%;}


/* #smbox {
	float:left;
	position:relative;	
	margin:-20px 0 20px 0;
	height:45px;
	width:300px;
	background-color:transparent;
	border:0px;
	max-width:none;
	padding:0 0;
}


img.smicon {
	padding:0px 3px;


}
*/


#smbox {
	position:fixed;
	right:0;
	top:15%;
	margin-right:0px;
	max-width:50px;
	padding:0 0 5px 0;
	background-color:transparent;
	border:0px solid white;
	border-style:groove;
	border-radius:10px;
	z-index:21;

}


img.smicon {
	float:left;
	position:relative;	
	padding:5px 5px;	
}




	/* img.lglogo {display:none;} */
	
img.lglogo {
	width:40%;
	float:left;
	display: block;
    margin: 20px 30px;
    overflow:hidden;
	}


img.cladlogoslarge {
	display: block;
  	margin-left: auto;
  	margin-right: auto;
	margin-top:20px;
	margin-bottom:25px;
	width:40%;
	max-width:300px;
    overflow:hidden;

	}

	img.smlogo {
	float:right;
	display:block;
	height:7vh;
	margin:10px 20px 10px 0px;
	overflow:hidden;
	}
	
	img.ph50 {
	width:33%;
	}
	
	img.aplfull {
	width:90%;
	margin:0 auto;
}
	img.baselogo {
	width:50%;
    margin: 0 auto;

}
	button.accordion {
	width: 100%;;
	}

.link { 
	font-size:9px;
	line-height:9px;
}


#linktitle {
	margin-left:5px;
	margin-right:5px;
}






#linkbox {
	position:fixed;
	top:auto;
	bottom:10%;
}

/*#iconbox {
	display:none;

	}*/

.headtitle {
	margin-top:15%;
}



}