html, body { 
  margin: 0; 
  padding: 0; 
}
a:hover{
	color: blue;
}
li b{
font-size: 1.2em;
}
body { 
  color: #333; 
  font: 12px Helvetica, Arial, sans-serif; 
  line-height: 18px; 
}
#footer	{ background: #222; border-bottom: 2px solid #999; clear: both; width: 100%; color:#ccc;}
h2 { 
  color: #333; 
}
a {
  color: black; 
  text-decoration: none;
}
p { 
  margin: 0 0 18px; 
}
#nav {
  background-color: #222;
}

#nav_wrapper {
  margin: 0 auto;
  text-align: left;
}

#nav ul{
   list-style-type: none;
   padding: 0;
   margin: 0;
   position: relative;
}

#nav ul li{
  display: inline-block;
}

#nav ul li:hover{
  background-color: #333;
}

#nav ul li img{
  vertical-align:middle;
  padding-left:5px;
  border:none;
}

#nav ul li a,visited{
  color: #ccc;
  display: block;
  padding-right: 20px;
  padding-left: 20px;
  padding-top: 12px;
  padding-bottom: 10px;
  text-decoration:none;
}

#nav ul li a:hover{
  color:#ccc;
  text-decoration:none;
}

#nav ul li:hover ul{
  display:block;
}

#nav ul ul{
  display:none;
  position:absolute;
  background-color:#333;
  border:5px solid #222;
  border-top:0;
  margin-left:-5px;
  min-width:200px;
}

#nav ul ul li{
  display:block;
}

#nav ul ul li a,visited {
color:#ccc;
 }
 
#nav ul ul li a:hover {
color:#099;

 }
 
@media (min-width: 700px){
#wrapper		{ float: left; width: 100%; margin-left: -33%; }
		
		/* Header */
#header { 
  background: #fff; 
  border-bottom: 2px solid #ddd; 
  }
#header img {
  margin-left: auto;
  margin-right: auto; 
  display:block;
  }

		
		/* Content Style */
#choice ul	{ padding: 0 18px 9px; }
#extra			{ border-bottom: 1px solid #ccc; padding-right: 18px; }
#extra small	{ font-size: 11px; line-height: 18px; }
#content p, #extra p { padding-right: 18px; }
		
		/* Content Positioning and Size */
#choice		{ float: right; width: 30%;}
#content 	{ margin-left: 34.3%;}
#extra			{ float: right; clear: right; width: 30%; }		/* Footer */
#footer			{ background: #222; border-bottom: 2px solid #999; clear: both; width: 100%; }
#footer a		{ color: #eee; }
#footer	p		{ color: #ccc; margin: 0; padding: 0 18px 10px; }
#footer ul		{ border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }

}

/************************************Jason's Extra Code***************************/
#corrugated, #corr_text, #tile, #tile_text, #box, #box_text, #vent, #vent_text, #clear, #clear_text{margin-left:10%;}
#main_cladding {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px){
#corrugated{
	margin-left: 73%;
	margin-right: 1%;
	position: relative;
	margin-bottom:2%;
}
#corr_text{
	margin-left: 38%;
	width: 35%;
	position: absolute;
	margin-bottom:2%;
	z-index: -1;
}

#tile, #box, #vent, #clear{
margin-left: 73%;
margin-right: 3%;
position: relative;
margin-bottom:2%;
margin-top:3%;
}
#tile_text, #box_text, #vented_text, #clear_text{
	margin-left: 38%;
	margin-right: 3%;
	padding: 0%;
	width: 35%;
	position: absolute;
	margin-bottom:2%;
	margin-top:3%;
}
}
/**********************************************************Attempt @media screen********************************/
@media (max-width: 1024px) {
	#choice, #extra{
		width:auto;
		margin-bottom: 5%;
		margin-top: 5%;
		padding-left:10%;
		clear:both;
		float: left;
	}	
}

/***********************************Purlins***************/
#purr_text, #purlin1, #purlin2, #purlin3{margin-left:10%;}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px) {
#purr_text, #purlin2{
	margin-left: 36%;
	padding: 0%;
	width: 35%;
	position: absolute;
	margin-bottom:30px;
	z-index: -1;
}

#purlin1, #purlin3{
margin-left: 72%;
padding:0%;
position: relative;
margin-bottom:20px;
}

}
/********************************Steel******************/
#main{text-align:center;margin-left:30%;}
#services_text,#steel_box_text,#steel_box, #angle, #piping, #piping_text, #flats, #flats_text, 
#solid_round, #solid_round_text, #bright, #bright_text,
#solid_square, #solid_square_text, #plate,#plate_text, #rsj, #rsj_text, 
#mesh, #mesh_text, #channel, #channel_text, #reinforcing, #reinforcing_text, #angle_text, #carousel{margin-left:10%;}
@media (min-width: 700px){
#main{text-align:center;margin-left:30%;}
#services_text, #steel_box_text, #angle_text, #piping_text, #flats_text, #solid_round_text, 
#solid_square_text, #plate_text, #rsj_text, #mesh_text, #channel_text, #reinforcing_text, #bright_text{
	padding: 0%;
	position: absolute;
	z-index: -1;
	margin-left: 40%;
	width: 30%;
	margin-bottom:5%;
}

#carousel, #steel_box, #angle, #piping, #flats, #solid_round,
#solid_square, #plate, #rsj, #mesh, #channel, #reinforcing, #bright{
	margin-left: 73%;
	padding:0%;
	position: relative;
	margin-bottom:6%;
	margin-top:2%;
	clear:right;
}
	
}
/********************************Flashing******************/
#flashing, #flashing_text{margin-left:10%;}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px) {
#flashing_text{
	margin-left: 38%;
	padding: 0%;
	width: 35%;
	position: absolute;
	margin-bottom:20px;
	z-index: -1;
}

#flashing{
	margin-left: 72%;
	padding:0%;
	position: relative;
	margin-bottom:20px;
}	

}
/********************************Timber******************/
#timber, #timber_text{margin-left:10%;}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px){
#timber_text{
	margin-left: 38%;
	padding: 0%;
	width: 30%;
	position: absolute;
	margin-bottom:20px;
	z-index: -1;
}

#timber{
	margin-left: 70%;
	padding:0%;
	position: relative;
	margin-bottom:20px;
}	

}
/********************************Aluminium******************/
#aluminium, #aluminium_text{margin-left:10%;}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px){
#aluminium_text{
	margin-left: 38%;
	padding: 0%;
	width: 30%;
	position: absolute;
	margin-bottom:20px;
	z-index: -1;
}

#aluminium{
	margin-left: 70%;
	padding:0%;
	position: relative;
	margin-bottom:20px;
}	

}
/*******************************Sheds******************/
#shed, #shed_text{margin-left:10%;}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px){
#shed_text{
	margin-left: 35%;
	padding: 0%;
	width: 35%;
	position: absolute;
	margin-bottom:5%;
	z-index: -1;
}

#shed{
	margin-left: 75%;
	padding:0%;
	position: relative;
	margin-bottom:22%;
}	

}
/*******************************Equipment Hardware******************/
#big_shed, #equipment_text, #blank_text, #extra_image{margin-left:10%;}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px){
#equipment_text, #blank_text{
	margin-left: 42%;
	padding: 0%;
	width: 35%;
	position: absolute;
	margin-bottom:20px;
	z-index: -1;
}

#big_shed, #extra_image{
	margin-left: 70%;
	padding:0%;
	position: relative;
	margin-bottom:1%;
}	

}
/******************************Services******************/
#welding_text, #welding{
	margin-left:10%; 
	padding-top: 4%;
	margin-top: -7%;
}
 #cutting_text1, #cutting2, #folding_text1, #folding1, #punching_text1, #punching1
{
	margin-left:10%; 
	margin-top:1%;
	margin-bottom:1%;
	padding-bottom: 1%; 
	padding-top: 1%;
}
#galvanising1, #galvanising_text
{
	margin-left:10%; 
	margin-bottom:2%;
	padding-bottom: 2%;
}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px){
#services_text, #welding_text,#cutting_text1,#folding_text1, #punching_text1, #galvanising_text{
	margin-left: 40%;
	padding: 0%;
	width: 30%;
	position: absolute;
	margin-bottom:5%;
	z-index: -1;
}

#carousel, #welding, #cutting2,
#folding1,#punching1, #galvanising1{
	margin-left: 72%;
	padding:0%;
	position: relative;
	margin-bottom:10%;
	clear:right;
}
#footer{margin-top:5%;}

}
/******************************Contact******************/
#contact, #contact_details, #map-canvas, #enquiry{margin-left:10%;}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px){
#contact, #contact_details{
	margin-left: 35%;
	padding: 0%;
	width: 30%;
	position: absolute;
	margin-bottom:7.5%;margin-top: 2%;
	z-index: -1;
}

#map-canvas, #enquiry{
	margin-left: 74%;
	width: 22%;
	margin-right:2%;
	position: relative;
	margin-bottom:7.5%;
	margin-top: 2%;
	clear:both;
}

}
/******************************Door Gear*****************************/
#main{text-align:center;margin-left:10px;}
#door_gear, #door_gear_text{margin-left:10%;}
#main {text-align:center; margin-left:30%;}
#description{text-align:center; padding-left:12%;}
@media (min-width: 700px){
#door_gear_text{
	margin-left: 42%;
	padding: 0%;
	width: 30%;
	position: absolute;
	margin-bottom:20px;
	z-index: -1;
}

#door_gear{
	margin-left: 70%;
	padding:0%;
	position: relative;
	margin-bottom:1%;
}	

}
/*******************************Index******************/
#main{text-align:center;margin-left:10px;}
#shed1,#extra_content,#content, #shed2{margin-left:10%;}
@media (min-width: 700px){
#main{text-align:center;margin-left:30%;}
#shed1, #extra_content{
	margin-left: 35%;
	padding: 0%;
	width: 30%;
	position: absolute;
	margin-bottom:8%;
	z-index: -1;
}

#content, #shed2{
	margin-left: 72%;
	padding:0%;
	position: relative;
	margin-bottom:4%;
}	
}