/* CSS Document 
Back Grey = #5c5c66
*/

html, body{
	margin: 0px 0px 0px 0px;
	background: #5c5c66 url(http://images.mets.co.uk/layout/main_back_gradient.jpg) repeat-x top left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
        text-align: justify;
}

* html body{
	background-image: none;

}

div#mainBackgroundImage{
	margin: 0px 0px 0px 0px;
	min-height:600px;
	background-image:url(http://images.mets.co.uk/layout/main_back_image.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}
* html div#mainBackgroundImage{
	background-image:url(http://images.mets.co.uk/layout/main_back_image_ie.jpg);
	height: 600px;
}
div#mainBackgroundImage div#shadowWrapper{
	margin: 0px auto 0px auto;
	width: 752px;
        border-left: 1px solid #444444;
	border-right: 1px solid #444444;
        border-bottom: 1px solid #444444;
        padding-bottom: 1px;
        background: #333333; /*333333 / 444444 */
	/*background: transparent url(http://images.mets.co.uk/layout/main_content_w_shadows.png) repeat-y top left;*/
}
* html div#mainBackgroundImage div#shadowWrapper{
	
	
}
div#mainBackgroundImage div#shadowWrapper div#page{
	margin: 0px 1px 0px 1px;
	width: 750px;
	min-height:400px;
        padding: 0px 0px 50px 0px;
	overflow:hidden;
	background: #FFFFFF url(http://images.mets.co.uk/layout/cables.jpg) no-repeat bottom left;
}
* html div#mainBackgroundImage div#shadowWrapper div#page{
	
	
}
div#mainBackgroundImage div#shadowWrapper div#page div#header{
	width: 750px;
	height: 150px;
        overflow: hidden;
        
	background: #FFFFFF url(http://images.mets.co.uk/layout/header_image.jpg) no-repeat top left;
        
}
div#mainBackgroundImage div#shadowWrapper div#page div#header div#headerContents{
	width: 750px;
        height: 150px;
        position: absolute;
        top: 0px;
        margin: 0px 0px 0px 0px;
        /*border: 1px solid green;*/
}

div#mainBackgroundImage div#shadowWrapper div#page div#header div#headerContents div#flashHolder{
	float: left;

        margin: 10px 0px 0px 0px;
}

/*
<div id="topMenu">
    <ul>
        <li><a href="$link.setAction('/profile')" title="Profile">Profile</a></li>
        <li><a href="$link.setAction('/accredidation')" title="Accredidation">Accredidation</a></li>
        <li><a href="$link.setAction('/contact')" title="Contact">Contact</a></li>
    </ul>
</div>
*/

div#topMenu{
    float: right;
}
div#topMenu ul{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

div#topMenu ul li{
    float: left;
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
div#topMenu li a,div#topMenu li a:visited{
    display: block;
    height: 18px;
    padding: 5px 4px 1px 4px;
    margin: 0px 8px 0px 8px;
    font-weight: bold;
    color: #FFFFFF;
    font-size: 12px;
}
* html div#topMenu li a,div#topMenu li a:visited{
    float: left;
    margin: 0px 5px 0px 5px;
}
div#topMenu li a:hover,div#topMenu li a:active{
    color: #5e88b6;
}
* html div#mainBackgroundImage div#shadowWrapper div#header{
	width: 750px;
        
}


div#menubar {
    position: relative;
    height: 58px;
    background: transparent url(http://images.mets.co.uk/menu/backing.jpg) repeat-x top left;
    margin: -48px 0px 0px 0px;
}

div#menubar div#services{
    height: 58px;
    width: 74px;
    float: left;
    background: transparent url(http://images.mets.co.uk/menu/services.jpg) no-repeat top left;
    margin: 0px 0px 0px 0px;
}
div#menubar ul{
    float: left;
    width: 630px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 58px;
}
div#menubar li{
    list-style: none;
    float: left;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 100;
    color: #555555;
}

div#menubar li a,div#menubar li a:visited{
    display: block;

    height: 18px;
    padding: 5px 4px 1px 4px;
    margin: 0px 9px 0px 9px;
    font-weight: bold;
    color: #4a4a4a;
    font-size: 12px;
    
}
* html div#menubar li a,div#menubar li a:visited{
    float: left;
    margin: 0px 4px 0px 4px;
    padding: 5px 5px 1px 5px;
}
div#menubar li a:hover,div#menubar li a:active{
    color: #5e88b6;
    
}





div#mainBackgroundImage div#shadowWrapper div#page div#content{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	width: 730px;
	padding: 0px 10px 0px 10px;
	color: #666666;
        
}
div#leftContent{
    float: left;
    width: 150px;
    overflow: hidden;
}
div#midContentNoLeft{
    float: left;
    width: 510px;

    margin: 0px 10px 0px 10px;
}
	
div#midContent{
    float: left;
    width: 360px;

    margin: 0px 10px 0px 10px;
}


div#rightContent{
    float: left;
    width: 200px;
    overflow: hidden;
}
div#leftContent img.leftImage{
    margin: 0px 0px 16px 0px;
    
    overflow: hidden;
    
}
div#rightContent img.rightImage{
    margin: 0px 25px 16px 25px;
    width: 150px;
    overflow: hidden;
  
}
div#rightContent ul{
    margin: 0px 10px 0px 10px;
    padding: 0px 0px 0px 0px;
    
}
div#rightContent li{
    color: #1d5898;
    text-align: left;
    font-size: 12px;
    margin: 4px 0px 4px 15px;
    padding: 0px 0px 0px 0px;
}

div#baseText{
    width: 750px;
    margin: 0px auto 0px auto;
}
div#contact{
    text-align: center; 
	font-size: 10px;
        color: #DDDDDD;
}

div#footer{
        text-align: center;
        vertical-align: baseline;
        font-size: 10px;
        color: #DDDDDD;
}
div#footer a, div#footer a:visited{
    text-decoration: none;
    color: #DDDDDD;
}
div#footer a:hover, div#footer a:active{
    text-decoration: none;
    color: #5e88b6;
}

div#flashlogo{
        padding: 5px 5px 5px 5px;
}