/* CSS Document */

/* Don't add left/right padding or borders to items with defined width*/

/* GLOBAL STYLES */
* {margin:0;padding:0;} /* remove margin and padding from all elements. */

body{ /* base text style*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #FFFFFF;
	font-size: 80%;
} 

h2 {text-transform:uppercase;}

h2,h3 {/*font-family:'Trebuchet MS', 'Lucida Sans Unicode', Verdana, Arial, sans-serif;*/
		margin-top:18px;
		clear:both;
		color:#807059;
/*		color:#BF9060;*/	
		font-weight:bold;
		font-family:Georgia, 'Times New Roman', Times, serif
}

p {margin-top: 6px;}

address {font-style:normal; margin-top:20px;}

#moreinfo blockquote {margin: 50px 10px 0px 30px; color: #707070; font-style: italic;}
#moreinfo cite {display:block; margin: 0 10px 20px 30px; color: #303030; font-style:normal;}

span.bold{font-weight:bold;}

/* following used for some images */
.rightalign {
	float:right;
	display:inline; /* kludge for IE double margin float bug see CSS Mastery p178 */
	margin: 20px 10px 5px 5px;
}

li{list-style:inside square;}

a{
	text-decoration:none;
	font-weight: bold;
	color: #527DFF;
	font-variant: small-caps;
} 

a:hover {color: #000000; text-decoration:underline;}

/* main header */
#header {
	width: 720px;
	position:relative;
	background-image: url(images/main_hdr.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 21px;  /* applied to #header instead of h1, IE browser discrepancies */

}
#header h1 {
	height:46px;
	width:280px;
	margin-left: 228px;
	position: relative;	/* for image replacement below */
}

/* gilder levin image replacement see CSS mastery p65*/
#header h1 span {
	background-image: url(images/fmeng-text.jpg);
	background-repeat: no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;	
	}

/* minimise h1 and h2 text to prevent overflow since being replaced by images */
#header h1, #header cite {overflow:hidden; font-size:40%}

/* Real text quotation*/
#header cite {
	width: 551px;
	height: 24px;
	margin-left: 90px;
	position: relative; /* for image replacement below */
	display: block;
}

/* gilder levin image replacement see CSS mastery p65*/
#header cite span {
	background-image: url(images/cite-text.jpg);
	background-repeat: no-repeat;
	position: absolute;
	height: 100%;
	width: 100%;	
}
/* end of main header */
/* section headers */


	
#footer{
	height: 14px;
	background-color: #7BBADE;
}
#content,#sidenav{
	margin-bottom: 10px;
}

#content p {text-align: justify; margin-right: 50px;}

/* main site border and bg colour */
#container {background-color:#FFFFFF; background-image:url(images/container-bk-img.gif); background-repeat:repeat-y;}

.box {
	width: 140px;
	background-color: #f2edcd;
	background-image: url(images/sidebar_bottom5.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	margin-top: 17px;
	margin-left: 30px;
}
.box h4{
	padding: 15px 5px 0px;
	color: #807059;
	background-color: #dddac6;
	background-image: url(images/sidebar_top5.gif);
	background-repeat: no-repeat;
	background-position: left top;
	font-family:Georgia, 'Times New Roman', Times, serif
}

.box p{
	padding: 0px 5px 5px;
	color: #807059;
}

/* DEFAULT 2 COLUMN LAYOUT */
body{text-align:center;} 
#container{width:720px;margin:0 auto;text-align:left;}
#content{float:right;width:500px;}
#moreinfo{float:left;width:170px;}
#sidenav{float:left;clear:left;width:170px;}
#footer{clear:both;width:100%;}

/* MAIN NAVIGATION */
#main_nav{
	height:26px;
	width:720px;		/* covers whole container width */
	position:relative;	/* so li's can be absolutely positioned*/
	background-color: transparent;
	background-image: url(images/menubar3.gif);	/* double stacked main image */
	background-repeat: no-repeat;
	background-position: left top;
	margin-top:140px;
}
#main_nav li{
list-style:none;
position:absolute;
top:0;		/* li absolutely positioned at top of ul */
}
#main_nav li,#main_nav a{
height:26px;	/* set heights same as ul */
display:block; /* li and a items are independent of siblings since absolutely positioned wrt ul */
}

#main_nav a{
text-indent:-5000px;	/* hide text */
/* hack to hide from IE5Mac   \*/
overflow: hidden;
/* end hack */
}

#home{left:50px;width:57px;}		/* absolute li positioning corresponds to bg graphic */
#gates{left:147px;width:63px;}
#garagedoors{left:247px;width:135px;}
#industrial{left:423px;width:106px;}
#contact{left:571px;width:111px;}

/* current page + hover state */
body#homepage #home, #home a:hover{
background:transparent url(images/menubar3.gif) -50px -26px;}

body#gateoperatorspage #gates, body#gatespage #gates, body#accesscontrolpage #gates, #gates a:hover{
background:transparent url(images/menubar3.gif) -147px -26px;}

body#garagedoorspage #garagedoors, #garagedoors a:hover{
background:transparent url(images/menubar3.gif) -247px -26px;}

body#industrialpage #industrial, #industrial a:hover{
background:transparent url(images/menubar3.gif) -423px -26px;}

body#contactpage #contact, #contact a:hover{
background:transparent url(images/menubar3.gif) -571px -26px;}

/* end of main navigation */
/* sidenav list styling */
#sidenav li {
	margin: 5px 0 5px 20px;
	padding-left:20px;
	background:url(images/nav-bullet.gif) no-repeat 0% 50%;
	list-style-type:none;
}

#sidenav h4 {
background-image:url(images/submenu_bg.jpg); background-repeat:no-repeat; margin: 50px 0px 7px 20px; padding-left: 30px; color:#16747c;
}

#sidenav {margin-top:50px;}

/* END OF GLOBAL STYLES*/

/* HOMEPAGE SPECIFIC STYLES */
/* homepage content */
#homepage #content li {	text-align:justify;	margin: 17px 50px 0px 2px;}
/* end homepage content */
/* homepage moreinfo and sidenav */
#homepage #sidenav {margin-top:5px;}
#homepage #moreinfo blockquote {margin-top:25px;}
/* end of homepage specific styles */

/* GATE OPERATORS AND ACCESS CONTROL AND INDUSTRIAL PAGE SPECIFIC STYLES*/
/* layout */
#gateoperatorspage #sidenav, #gateoperatorspage #moreinfo, #accesscontrolpage #sidenav, #accesscontrolpage #moreinfo, #industrialpage #sidenav, #industrialpage #moreinfo {float:left; width:200px;}

#gateoperatorspage #content, #accesscontrolpage #content, #industrialpage #content {float:right; width:490px;}
/* content */
#gateoperatorspage #content ul, #accesscontrolpage #content ul {margin: 5px;}
#gateoperatorspage #content img, #accesscontrolpage #content img, #industrialpage #content img {float:right; margin: 0 25px 5px 15px;}
#accesscontrolpage #content h3, #industrialpage #content h3 {clear:both;}
#accesscontrolpage #content img, #industrialpage #content img{margin-bottom:25px;}
/* end of content */
/* moreinfo and sidenav */
#gateoperatorspage #sidenav,#accesscontrolpage #sidenav {margin-bottom: 50px;}
/* end of gateoperators and access control page specific styles */


/* GATES PAGE SPECIFIC STYLES */
/* gate operators layout */
#gatespage #sidenav, #gatespage #moreinfo{float:left; width:200px;}
/* gateoperators content */
/* common styling for all galleries */

/* needed for IE to make :active state work first time */
/*#gatespage a, #gatespage a:visited {color:#000;} */

/* CONTACT PAGE SPECIFIC STYLES*/
/* info page content  */
#contactpage #sidenav {margin-top: 0px;}
/* end of contact page specific styles */


#gatespage a.gallery, #gatespage a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}

#gatespage a.slidea {background:url(images/thumb10.jpg);}
#gatespage a.slideb {background:url(images/thumb15.jpg);}
#gatespage a.slidec {background:url(images/thumb70.jpg);}
#gatespage a.slided {background:url(images/thumb_gtes10.jpg);}
#gatespage a.slidee {background:url(images/thumb39.jpg);}
#gatespage a.slidef {background:url(images/thumb7.jpg);}
#gatespage a.slideg {background:url(images/thumb19b.jpg);}
#gatespage a.slideh {background:url(images/thumb16.jpg);}
#gatespage a.slidei {background:url(images/thumb42.jpg);}
#gatespage a.slidej {background:url(images/thumb3.jpg);}
#gatespage a.gallery em, #gatespage a.gallery span {display:none;}
#gatespage a.gallery:hover {border:1px solid #ff0000;}

/* styling for TOP gallery */
#gatespage #container_top {
	position:relative;
	width:425px;
	height:429px;
	border:1px solid #a49188;
	margin:10px 0;
	background-color: #ffffff;
}
#gatespage #container_top img {border:0;}
#gatespage #container_top .thumbs {position:absolute; left:0; top:0;}
#gatespage #container_top a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:110px; left:5px; padding:5px; font-style:italic; color:#807059;  z-index:100;}
#gatespage #container_top a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#gatespage #container_top a.gallery:active, #gatespage #container_top a.gallery:focus {border:1px solid #000;}
#gatespage #container_top a.gallery:active em, #gatespage #container_top a.gallery:focus em {display:block; position:absolute; width:400px; height:250px; top:160px; left:6px; padding:6px; color:#000; border:1px solid #3d330f; z-index:50;}
#gatespage #container_top h1 {clear:both; margin:0; padding-top:200px; text-align:center; font-family: georgia, 'times new roman', serif; font-size:3em; font-weight:normal; color:#807059;}
#gatespage #container_top h1 em {font-size:0.6em; color:#000;}

/* end of gates page specific styles */