/*
Theme Name: TuffEngineering
Author: the YourDiameter team
Description: Theme for Tuff Engineering
*/

body{
	background-color:#D7D7D7;
}

a{
	text-decoration:none;
	color:#1C1C1C;
}

//ul{
//	list-style-type:none;
//}
	

#header{
	background-color:#1A1A1A;
	padding:20px;
}

#logo{
	position:absolute;
	padding:60px 0px 10px 60px;
	transform: scale(1.2);
}

#headContact{
	float:right;
	padding:20px;
	text-align:right;
	color:#FD0000;
}

#headContact img{
	float:right;
	padding:10px;
	width:30px;
	height:30px;
}

#navBar ul{
	clear:both;
	background-color:#ECECEC;
	padding:2px;
	text-align:right;
	padding-right:30px;
}

#navBar ul li{
	display:inline;
}

#navBar ul li a{
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:center;
	padding:3px 10px 3px 10px;
	color:#0C0C0C;
	font-size:20px;
	border-right-style:dotted;
	border-width:1px;
	transition:all 0.6s;
}

#navBar ul li:last-child a{
	border-right-style:hidden;
}

#navBar ul li a:hover{
	background-color:#C1C1C1;
	color:#0C0C0C;
}

#banner{
	clear:both;
	background:url("http://tuffengineering.com.au/wp-content/uploads/2017/06/banner.jpg") no-repeat;
	background-position:center;
	background-size:cover;
	text-align:center;
	min-height:700px;
	width:100%;
}

#bannerText{
	padding-top:20%;
	color:#FFFFFF;
	font-size:20px;
}

#small-panel{
	position:absolute;
	margin-top:-25%;
	margin-left:10%;
}

.panel{
	float:left;
	width:20%;
	margin:2%;
}

.panel img{
	width:100%;
}

.panel-head, .panel-text{
	background-color:red;
	padding:10px;
	text-align:center;
	color:#FFFFFF;
	font-weight:bold;
}

.panel-head{
	border-radius:20px 20px 0px 0px;
	font-size:20px;
	background-color:#070915;
}

.panel-text{
	min-height:140px;
	border-radius:0px 0px 20px 20px;
	font-size:15px;
}

.panel-text .button{
	min-height:15px;
	border-radius:10px 10px 10px 10px;
	padding:10px;
	background-color:#EFEFEF;
	color:#070915;
	font-size:15px;
}

#pageContent{
	clear:both;
	display:inline;
	width:100%;
	margin-top:100px;
}

#contentText{
	float:left;
	width:45%;
	padding-top:5%;
	padding-left:10%;
	min-height:300px;
	font-size:20px;
	text-align:justify;
}

#contentText h2{
	border-bottom-style:groove;
	border-width:1px;
	border-color:#CECECE;
}

#contentText .redText{
	color:#B80083;
}

#postContent{
	width:100%;
	margin-top:100px;
}

#postContent #contentText p{
	float:left;
	width:50%;
	margin-top:0px;
	padding-top:0px;
}

.postImage{
	float:left;
	width:40%;
	padding-top:15px;
}

#postContent .button{
	float:right;
	min-height:15px;
	border-radius:10px 10px 10px 10px;
	padding:10px;
	background-color:#F81111;
	color:#070915;
	font-size:15px;
	font-weight:bold;
}

#sidebar{
	float:left;
	width:35%;
	padding:5%;
	min-height:300px;
}

#sidebar.page-id-10{
	float:right;
margin-top:-100%;
}

#sidebar ul{
	text-align:left;
	padding:30px;
}

#sidebar ul li{
	display:block;
	padding:10px 0px 10px 10px;
	background-color:#E3E3E3;
	margin:3px;
}

#sidebar ul li img{
    vertical-align: middle;
	padding:10px;
	height:30px;
	width:30px;
}

#sidebar ul li a{
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:center;
	padding:5px 0px 5px 5px;
	margin-left:5px;
	color:#0C0C0C;
	font-size:17px;
	transition:all 0.6s;
}

#sidebar ul li a:hover{
	margin-left:10px;
	background-color:#C1C1C1;
	color:#0C0C0C;
}

#contentInfo{
	display:inline;
	width:100%;
}

#location{
	float:left;
	width:50%;
	padding:30px;
	margin-left:5%;
	min-height:300px;
}

#contact{
	float:left;
	width:30%;
	margin-top:5%;
	padding:2%;
	min-height:300px;
	text-align:center;
	background-color:#E3E3E3;
	font-size:20px;
}

#footer{
	clear:both;
	width:100%;
	padding:15px 0px 20px 0px;
	text-align:center;
	background-color:#1C1C1C;
	color:#8E8E8E;
}

@media only screen and (max-width:1050px) {
	#logo{
		position:relative;
		text-align:center;
		padding:0px;
		margin:0px;
	}

	#headContact{
		float:none;
		display:block;
		text-align:center;
		width:100%;
	}

	#small-panel{
		position:relative;
		display:block;
		width:100%;
		margin:0px;
		padding:0px;
	}

	.panel{
		clear:both;
		display:block;
		width:100%;
		margin:0px;
		padding:0px;
	}

	#contentText, #sidebar, #location, #contact{
		float:none;
		display:block;
		width:100%;
		padding:0px;
		margin:0px;
	}

	#sidebar.page-id-10{
		position:relative;
	}

	iframe{
		width:100%;
	}

	#contentText{
		text-align:left;
	}

	#contentText.page-id-10{
		text-align:center;
	}

	.postImage{
		float:none;
		display:block;
		width:100%;
		text-align:center;
	}

	#postContent #contentText p{
		float:none;
		width:100%;
		margin:0px;
		padding:0px;
	}
}