body {/*media*/
	background-color:#d50505;
	font-family:    helvetica, arial, sans-serif;
	/*color: 			#270046;*/ 
  	color: 			#ffffff;
	margin:			10px auto;
	padding:		1%;
	text-align:     center;
	max-width:		1000px;
}
.blank{
	background-color: 	white;
	color:				black;
	max-width:			1300px;
	
}

@media screen and (max-width: 480px){
		body {	
		font-size:      medium;
		max-width: 		100%;
		min-width:		0px;
		}

}

@media screen and (min-width: 481px) and (max-width: 1000px) {
		body {	
		font-size:      medium;
		
		}
}

@media screen and (min-width: 1001px) {
		body { 	
		font-size:      small;
		}
}

@media all and (monochrome){
		body{	
		background-color:	transparent;
		}
}

img{
	max-width: 		100%;
    width : 		auto;
    height: 		auto; 
}

#photo{

	max-height:		315px;
	border-color:	black;
	border:			3px solid black;
	border-radius:	10px;
	overflow:		hide;
	background-color:	black;

}

video{
	max-width: 		100%;
    width : 		auto;
    height: 		auto;	
}


#allcontent{
	max-width: 800px;
}

@media screen and (max-width: 480px){
	#allcontent{
		margin:	3%;
	}
}

@media screen and (min-width: 481px) and (max-width: 1000px) {
}	

#content{
	background:		white;
	border:			solid;
	border-radius:	10px;
	color: 			#270046;
	padding:		5%;
}

@media screen and (max-width: 480px){
	#content{
		padding:	3%;
	}
}

@media screen and (min-width: 481px) and (max-width: 1000px) {
		#content{
			padding:	2%
		}
}	
	
	
div{
	margin: 25px auto;
}

section{
	margin: 25px auto;

}

@media screen and (max-width: 480px){
		form{	
		margin-left: 	auto;
		margin-right: 	auto;
	}
}

h3{
	font-size:		1.5em;
}

h5{
	font-size:		1em;
}

/*Navigation Menu Start*/

nav ul {
	margin: 			10px;
	list-style-type:	 none;
	padding: 			5px;
}

nav ul li {/*media*/
	display: 			inline-block;
	padding: 			.5em; /*spacing between elements*/
	margin:				1px;
}
.dropdown-menu {
  position: relative;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  background-color: #d50505;
}

.menulink {
	position: relative;
	display: inline-block;
	background-color: #d50505;
	color:	#ffffff;
	padding: 16px;
	font-size: 1.5em;
	border: none;
	font-weight: 		bold;
}

.menulink a {	
	color:	#ffffff;
	text-decoration:	none;
}

.menulink a:visited{
	color:	#ffffff;
}

.menulink a:hover{
	color:	grey;	
}

.dropdown-button {
	position: relative;
	display: inline-block;
	background-color: #d50505;
	color:	#ffffff;
	padding: 16px;
	font-size: 1.5em;
	border: none;
	font-weight: 		bold;
}

.dropdown-button:hover{
	color:  grey;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: white;
	white-space: nowrap;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	margin: 0;
}


.dropdown-button a {
	
	color:	#ffffff;
	text-decoration:	none;
}

.dropdown-button a:visited{
	color:  #270046;
}

.dropdown-content a {
  font-size: .8em;
  color: #270046;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-button:hover .dropdown-content {display: block;}

.dropdown-button:hover .dropdown-button {background-color: #ddd;}

.dropdown-content a:hover {background-color: #ddd;}


a.menubutton:link, a.menubutton:visited{
	color:				#ffffff;
	font-size:			1em; /*Text height*/
	font-weight: 		bold;
	padding:			.2em; 
	border-bottom:		none;
	border:				2px solid;
	border-radius:		5px;
	text-decoration:	none;
	text-align:			center;
}

a.menubutton:hover{
	color:				grey;	
}

.menuicon{
	width:				35px;
	height:				5px;
	background-color:	black;
	margin:				6px	0;
	display:			block;
}



@media screen and (min-width: 1000px){
		#largescreen{
		display:	block;
		margin: 	2px;
		padding: 	5px;			
		
		}
		#smallscreen{display:	none;}
}


@media screen and (max-width: 999px){
		#largescreen{display:	none;}
		
		#smallscreen {			
			text-align:		center;
			margin:			auto;	
		}
		
		#smallscreen .tablecell{
		margin:		10px;
		}
		
		nav ul li {	
		display: 		block;

		margin:			5px;
		}
		a.menubutton:link, a.menubutton:visited{
		font-size:			1.2em; /*Text height*/
		display:			block;
		width:				225px;
		margin:				auto;
	
		}
}



@media screen and (max-width: 320px){
		nav ul {
		margin: 			2px;
		list-style-type:	 none;
		padding: 			5px;
		}

		a.menubutton:link, a.menubutton:visited{
		font-size:			1.1em;/*Text height*/
		margin:				auto;
		}
}
	
p{
	text-align:			left;
	}

blockquote{
	font-style:		italic;
	text-align:		left;
	}


@media screen and (max-width: 480px){	
		textarea{/*media*/
		box-sizing:		border-box;
		width:			100%;
		}	
}
	
#phone{
	text-decoration:	none;
	line-height:		2em;
	font-size:			2em;
}


#mtalogo,#yesnetworklogo,#esysdslogo{/*media*/
	margin:			20px;
	}


@media screen and (max-width: 480px){	
		#mtalogo,#yesnetworklogo,#esysdslogo{
		margin:			20px;
		max-width: 		75%;
		width : 		auto;
		height: 		auto;
		}	
}

	



@media screen and (max-width: 480px){/*media*/
		#map{
		position:		relative;
		padding-bottom:	75%;/* This is the aspect ratio*/
		height:			0;
		overflow:		hidden;
		}
	
		#map iframe{
		position:	absolute;
		top:		0;
		left:		0;
		width:		100% !important;
		height:		100% !important;
		}
}


@media screen and (max-width: 1000px) and (min-width: 481px) {
		#map{
		position:		relative;
		padding-bottom:	75%;/* This is the aspect ratio*/
		height:			0;
		overflow:		hidden;
		}
	
		#map iframe{
		position:	absolute;
		top:		0;
		left:		0;
		width:		100% !important;
		height:		100% !important;
		}
}


#location{
	max-width:	480px;
	}

#workshop h4 {
	text-align:		center;
}



.thankyou{
	font-size: 		1.5em;
	}

.space{
	color:			transparent;
}

.textleft{
	text-align:		left;
}
.textcenter{
	text-align: center;
	}
	
	
.textright{
	text-align:		right;
}

.form{
	display:		table-cell;
	margin:			5px;
	font-size: 		100%;
	float:			left;
	max-width:		95%;
}

.asterix{
	color:			#d50505;
	
}

.error{
	color:			#d50505;
	max-width:		440px;
	margin-left:	auto;
	margin-right:	auto;

}

.clearleft{
	clear:	left;
	}

.hide{
	display:		none;
}
	
.tablecontainer{
	display:			table;
}
	
.tablerow{
	display:			table-row;
	}
	
.tablecell{
	display:			table-cell;
	display:			inline-block;
	vertical-align:		top;

	}



#servicing .tablecell{
	width: 				200px;
}
#workshop .tablecell{
	width: 				225px;
}

#wof{
	margin:				0 auto;
}

#wof .tablecell{
	width:				250px;
	margin:				0 0 0 30px;
}
#wof ul{
		padding:			0px;
}
#wof li{
	list-style-type:	none;
}


#wofad{
	margin:				0 auto;
}

#wofad .tablecell{
	width:				200px;
	margin:				0 0 0 50px;
}
#wofad ul{
		padding:			0px;
}
#wofad li{
	list-style-type:	none;
}

#celltyre{
	margin:				0 auto;
}

#celltyre .tablecell{
	width:				100px;
	margin:				0 auto;
}
#celltyre ul{
		padding:			0px 25px 0px 25px;
}
#celltyre li{
	list-style-type:	none;
}



#ourpeople .tablecell{
	width:				200px;
	margin: 			20px 40px;
}
.servicespage{
	padding:	0px;
}
	
.servicespage li {
	display:			inline-block;
	text-align:			center;
	text-decoration:	none;

}
#contact{
	max-width:			440px;
	margin-left:		auto;
	margin-right:		auto;
}

/*
Change log
191228
200113
*/