/* overide and reset the browser default margins and padding for several elements as advised to by
Couturier (n.d) */
* {
	margin: 0;
	padding: 0;	
}

/*Remove the default border applied to images. Advised by and code demonstrated by Couturier (n.d)*/
img {
	border: none;
	margin: 0;
	padding: 0;	
	
}

/*removes bullet points from list elements in navigation units and other lists*/
li {
	list-style-type: none;
}

/* specify the font to be used throughout the entire document. Verdana is fist choice - if uavailable
 arial will be used and that is unavailable a font will be chosen by the browser from the generic
 font family sans-serif  (w3schools) */
body {
	background-color: #f0f0f0;
	color: #2b0713;
	font: 12px 'Lucida Grande',Arial,Helvetica,sans-serif;
}

/*removes the default underlining of anchor text. Sets the font size and color to apply globally*/
a:link, a:visited, a:active {
	text-decoration: none;
	color: #85a252;
	font-size: 12px;
	border: none;
}


#container {
	width: 75%;
	max-width: 925px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: 401624;
	background: #F0F0F0;
	border-left: 1px solid #443D3B;
	border-right: 1px solid #443D3B;
	
}

header{
	background: black;
}

#product{
	
	width: 300px;
	float: left;
	
}

#thumbs, h2, p{

	text-align: left;
	margin-bottom: 10px;
	
}




/*hide class of elements from regular screen*/
#logo240 {
display: none;
}

/*the footer uses these - part of legacy design*/
.col300, .col600{
width: 300px;
margin-top: 30px;
margin-left: 10px;
margin-right: 10px;
float: left;
}

/*elements having this class will occupy a width equivalent to 8 columns in the grid or 620px */
.col600 {
width: 620px;
}

/* The height has been set to 200px to prevent the header from collapsing in as all the elements
it contains have been floated*/
#header {
	

	margin-top: 40px;
	text-align: left;
	
	background: #000;
}

#header div{
	display: inline-block;
  text-align: left;
}


#logo1 img{
	max-width: 100%;
	height: auto;
	width: auto;
	margin-left: 10px;

}
	
tagline{
	

}

/* Our tagline has been carefully thought-out and designed in the hope that it will garner consumer
confidence. left margin used to leave some space between logo*/
#tagline  img {
margin-left: 70px;
margin-right: 120px;


}

#contact-details ul{
	
		margin-bottom: 60px;

}

/* We have decided to use and unordered list with li elements to contain the 2 pieces of contact information*/
#contact-details ul li {
display: block;
color: #aaa;
//height: 40px;
background: black;
font-size: 24px;
}

/* float iphone icon to left of contact info*/
#contact-details ul li img {


}

/* The contact details are one of the most important elements on this page. A large font size has
been used and nicely contrasting green colour*/
#contact-details p {
font-size: 24px;

color: #85a252;   /*green*/
}

/* email adress forced to stand out with use of large font size and shiny silver text against dark
background */
#contact-details a{
font-size: 20px;

color: #aaa;
}

#global{
	text-align:right;
}

#global ul{
	margin-right:2px;
}

#global ul li{
	display: inline-block;
	color: #631E35;
	text-align: center;
border-left: 1px solid #473F3D;
border-right: 1px solid #473F3D;
padding: 0;
margin-left: 1px;
margin-top: 5px;
padding-left: 4px;
padding-right: 4px;
	
}

#global ul li a{
	
	color: #9F8A91;
	font-size: 14px;
	
}

/* decorative border and background added to navigation unit */
#navigation {
clear: left;
text-align: left;
background: #2D2928;

padding-bottom: 5px;
}

/* position on far right hand side of page and leave small margin so that each li element aligns
to the grid*/
#navigation ul {


}

/* the display has been set to "inline-block" so as not to have to rely on padding and margins
to make each li element the correct size. Width 150px used that allows the entire nav unit to 
neatly span across eight columns. Decorative left and right borders for each li element added.
There is a small gap between each which is part of a bug but enhances the design here*/
#navigation ul li {
display: inline-block;
width: 146px;
height: 42px;
text-align: center;
border-left: 1px solid #473F3D;
border-right: 1px solid #473F3D;
padding: 0;
margin-left: 3px;
margin-top: 5px;
background: #3F3836; /*grey*/
}

/* text underlined for decorative affect. The padding is to position the anchor text*/
#navigation ul li a {
display: block; 
text-decoration: underline; 
padding: 10px; 
color:  #85a252;
font-size: 12px;

}

/* a:hover used to change text color to green and background color to a slighly lighter shade of
grey on mouse over. The change in background is very subtle*/
#navigation ul li a:hover {
color: #aaa; /* light grey */
background: #443D3B; /* grey-brown*/
}






/* Floats have been used extensively in this design, it was therefore necessary to set a height on
the outer most containers so that background and other decoration could be applied*/
#content {

text-align: center;
padding-top: 20px;
padding-left: 10px;

}

#content img {
border: 5px solid #ddd;
}

/* Stylish Gothic font used in uppercase and a font-weight not quite as heavy as bold. Used to style
headings*/
h1, h3{
font-family: Century Gothic, Apple Gothic, sans-serif; 
text-transform: uppercase; 
font-weight: 700; 
font-size: 22px; 
padding: 0 3px 8px; 
border-bottom: 1px solid #ddd;
margin: 0 15px 10px 0; 
color: #383331; /* very light grey */
text-align: left;
}

/* Set the size of text for headings slightly larger than paragraph text*/
h3 {
font-size: 14px;
}

/* a gradient background image has been used behind the introduction to provide decorative effect*/
#intro {
background-image: url('../images/mauve-background-fill.jpg');
background-repeat: no-repeat;
}

/* add small amount of space between paragraphs to provide readability */
#intro p{
margin-bottom: 8px;
}



/* Divs positioned in the middle column of the grid and decorative gradient background added behind
 text. Offset text from left margin by 4 columns to provide some white space. Clear: left is make
 sure no other element comes before*/
#specifications{
	text-align: left;
	margin-top: 20px;
	display: inline;
}

#specifications ul{
	float: left;
	margin-bottom: 20px;
}

#specifications ul li{
	margin-right: 30px;
}



/* installation div moved up underneath specifications for aesthetic reasons. Decorative backhground
gradient added*/
#installation{
	text-align: left;
	margin-top: 20px;
}

/*Add some space between the the two text sections*/
#installation ul{
margin-top: 20px;
}

/* Style Engineering specifications sub heading including underline*/
#installation strong {
font-size: 12px;
color: #383331;
font-family: Century Gothic, Apple Gothic, sans-serif; 
text-transform: uppercase; 
font-weight: 700; 
padding-top: 20px;
border-bottom: 1px solid #DDD;
margin-top: 20px;
}

.vid{
	text-align: left;
	margin-bottom: 30px;

}

/* decorative borders and subtle background image added to footer*/
#footer {
clear: left;
height: 300px;

background: #000;

}

#hire_equipment h4{
font-size: 16px;
margin-bottom: 10px;
}

/*Pust row of images down so that bottom lines up with bottom of flash banner*/
#hire_equipment  ul {
margin-bottom: 30px;
}

/*decorative bullets added to list items. List items sized and position using padding and margins
instead of block level methods */
#hire_equipment  ul li{
display: inline;
margin-right: 10px;
padding-left: 15px;
color: #9F8A91;
background-image:url('../images/bullet-maroon.gif');
background-repeat: no-repeat;
background-position: left center;
height: 14px;
font-size: 16px;

}

/* Contact information repeated at bottom of page using the same colour as at the top to help it
stand out*/
#contact p{
font-size: 18px;
color: #85a252;
}

/* Large text used for telephone number as it is the most important element on the page*/
#telephone  {
font-size: 32px;
margin-top: 20px;
margin-left: 80px;
margin-bottom: 65px;
}

/* Links are repeated at the bottom of the page instead of having a separate page for a sitemap*/
#hire_equipment a, #sitemap a {
color: #85a252;
font-size: 18px;
text-decoration: underline;
}

#sitemap ul {
padding-top: 10px;
}

#sitemap ul li {
display: inline;
padding-left: 10px;
}




#copyright {
 padding-bottom: 30px;
 margin-top: 20px;
}

/***************************************************************************************************

PHOTO GALLERY PAGE

***************************************************************************************************/

/* Offset the gallery from left page by 2 columns*/
#gallery {
margin-top: 80px;
margin-left: 40px;
background: #E0D1D6;
margin-bottom: 0px;
margin-right: 10px;
height: 805px;
padding-left:15px;

}

#gallery h3 {
margin-left: 170px;

}

#gallery img {
border-style: none;
}

/* create container for vertical column of 6 thumbnails each 140px wide. Padding is placed at top
of column to force thumbnails down and line up with main display*/
#gallery #thumbs {
padding-top: 27px;
float: left;
width: 128px;
vertical-align: top; 

}

/* create small amount of space between each thumbnail for aesthetic reasons*/
#gallery #thumbs  img{
margin-top: 5px; 
}

/* There were some difficulties getting the bottom of the display div (main image area) to line
up with the bottom of the row of thumbnails. Ended up having to use relative positioning and width
and height dimensions. 20px left margin to leave space between thumbnails and large photo */
#display {
position: relative;
float: left;
width: 100px;
height: 760px;
//margin-left: 20px;
margin-bottom: 50px;


}

/* Absolute positioning needed to get the image to sit on the bottom of the display container*/
#display img {
position: absolute;
bottom: 0;
padding-bottom: 15px;

}



/* Once again, absolute positioning used to place text caption under large image*/
#caption {

	font-size: 18px;
	margin-bottom: 40px;
}

#display p{
//	margin-left: 200px;
}

/***************************************************************************************************

CONTACT FORM

***************************************************************************************************/
#mandatory {
color: red;
font-size: 10px;
}

#query {
padding-top: 20px;
padding-left:10%;
padding-right:10%;
}

#query p , #query ul {
font-family: 'Lucida Grande',Arial,Helvetica,sans-serif;
font-size: 16px;
color: #9f5169;

margin-bottom: 20px;
}

#query ul li{
	text-align: left;
}

#query em{
color: #401624;
}



#query form {
width: 100%;

color: #2b0713;
font-family: 'Lucida Grande',Arial,Helvetica,sans-serif;
}



fieldset input {
	width: 80%;



}

fieldset label{
	display: inline-block;
	width: 90px;
}

#query form p {
font-size: 12px;
color: #2b0713;
font-family: 'Lucida Grande',Arial,Helvetica,sans-serif;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 5px;
margin-bottom: 0px;

}

legend {
font-size: 14px;
font-weight: 600px;
color: #85a252;
padding-bottom: 10px;
}

fieldset {

width: 100%;
margin-bottom: 20px;
padding-bottom: 10px;
}

.error {
position: relative;
left: 140px;
color: red;
font-size: 9px;
}

textarea {

}

#confirm{
	
	margin-top: 20px;
	height: 600px;
	padding-left: 20px;
}

#confirm p{
	
	font-family: 'Lucida Grande',Arial,Helvetica,sans-serif;
font-size: 16px;
color: #9f5169;
}



/***************************************************************************************************

ABOUT US

***************************************************************************************************/

#about {
margin-left: 330px;
}

#about p, #about img {
margin-top: 20px;
}


@media only screen and (max-width: 834px) {	
	#container{
	
	width: 100%;
	
	}
	
	#aerial{
		max-width: 290px;
		height: auto;
		width: auto;
	}
	
	#header{
	
		text-align: center;
	}
	
	#logo1, #tagline{
	
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 360px) {	
	#container{
	
	width: 100%;
	
	}
	
	#aerial{
		max-width: 290px;
		height: auto;
		width: auto;
	}
	
	#header{
	
		text-align: center;
	}
	
	#logo1, #tagline{
	
		margin-bottom: 20px;
	}
	
	#navigation ul, #thumbs{
		text-align: center;
	
	}
	
	#navigation ul li{
		width: 156px;
		margin-left: 1px;
	}
	
	#content{
		padding-left: 30px;
		padding-right: 30px;
	}
	
	#global{
		text-align: center;
	}
	
	.vid iframe{
	
	
	}
	
	
	

}

@media only screen and (max-width: 320px) {	
	#container{
	
	width: 100%;
	
	}
	
	#aerial{
		max-width: 290px;
		height: auto;
		width: auto;
	}
	
	#header{
	
		text-align: center;
	}
	
	#logo1, #tagline{
	
		margin-bottom: 20px;
	}
	
	#navigation ul, #thumbs{
		text-align: center;
	
	}
	
	#navigation ul li{
		width: 146px;
		margin-left: 1px;
	}
	
	#content{
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#global{
		text-align: center;
	}
	
	
	

}