*{
    margin:0px;
    padding:0px;
    list-style:none;
    outline:none}

html, body {
    height: 100%;
    margin: 0px;}

body{	        
    background: #278c00;
    font-family:georgia,helvetica,serif;
    font-size: 18px;
    /*letter-spacing:-1px;*/
    color:#363636;
    width:3000px;
    position:absolute;
    top:0px;
    left:0px;
    bottom:0px;
    overflow-x: hidden;
    /*background:#fff url(../img/background.png) no-repeat bottom left;*/}

#logo{
    text-indent: -9999px;
    background: url(../img/metro-logo.png) no-repeat bottom left; 
    height: 90px;
    width: 298px;}

/*main navigation*/
.sidebar{    
    width:200px;
    height:300px;
    background: none;    
    position:fixed;
    font-size:20px;
    top:25px;    
    left:35px;
    color:#fff;    
    z-index: 1000;}

.sidebar ul.nav{
	list-style:none;
	margin-top:25px;
	display: none;
	width: 300px;
}
	
.sidebar ul.nav li a{
	color:#363636;
	text-decoration: none;
	display:block;
	background-color:#fff;
	float:left;
	clear:left;
	margin-bottom:1px;
	font-size:20px;
	width: 222px;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 8px;
}
.sidebar ul.nav li a:hover{
	color:#ffffff;
	background-color:#ff6902;
	text-decoration: none;
	display:block;

	float:left;
	clear:left;
	margin-bottom:1px;
	font-size:20px;
	width: 222px;
	padding-top: 6px;
	padding-right: 8px;
	padding-bottom: 6px;
	padding-left: 8px;
}	
.sidebar ul.nav li a.current{
   background-color:#ff6902;
    color: #ffffff;}

.sidebar a{
    color: #fff;}
	
.sidebar a:visited{
    color: #fff;}
	
.sidebar a:active{
    color: #fff;}	

h1{font-size: 26px;}

/* initial setup pre loading */
#what-we-do-panel{
    /*display:none;*/
}

#loading-screen{
    position: fixed;
    height:100%;
    width:100%;
    z-index: 2000;
    background: #0090B5;
}

#loading-logo{
	position:fixed;
	top:25px;
	left:35px;
	text-indent: -9999px;
	height: 100px;
	width: 298px;
	background-repeat: no-repeat;
	background-position: left bottom;
}

#pre-loader{
    position: fixed;
    left: 340px;
    top: 20px;
}

#loading-text{
    position: fixed;
    left: 35px;
    top: 100px;
}

#loading-text p{
    color: #ffffff;
}

/*panel backgrounds*/
#what-we-do-panel-inner{
    height:100%;
    background:#0090B5 url(../img/bg-panel-1.jpg) no-repeat left bottom;
    background-size: 100% auto;}

#product-panel-inner{
    height:100%;
    background:#0090B5 url(../img/bg-panel-2.jpg) no-repeat left bottom;
    background-size: 100% auto;}

#case-study-panel-inner{
    height:100%;
    background:#0090B5 url(../img/bg-panel-3.jpg) no-repeat left bottom;
    background-size: 100% auto;}

#download-panel-inner{
    height:100%;
    background:#0090B5 url(../img/bg-panel-4.jpg) no-repeat left bottom;
    background-size: 100% auto;}

#blog-cont-panel-inner{
    height:100%;
    background:#0090B5 url(../img/bg-panel-5.jpg) no-repeat left bottom;}


/************** COMMON PANEL RULES - OVERIDE BELOW ********************/
.content-container{
	/*display: none;*/
    position:absolute;
	top:50%;/*20px padding-right added to columns and header in panels*/
	margin-top:-350px;
	width: 690px;
	height: auto;
	background: url(../img/panel-background.png) repeat bottom left;
	z-index: 1000;
	-webkit-border-radius:8px;
	-border-radius:8px;
	-moz-border-radius:8px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 3px;
	padding-bottom: 20px;
	padding-left: 20px;
	height:520px;
}

.content-container h2.title{
	font-weight:normal;
	font-size:20px;
	letter-spacing:0px;
	color:#FFFFFF;
	position:relative; left:-32px; top:0px;
	background:url(../img/title-tab-what-we-do.png) no-repeat 0 0;
	height:43px;
	padding:7px 0 0 30px;
	margin:0 0 5px 0}

.content-container .content{
    width:100%;
    height:334px;}

.content-panel-container .content-panel header{
	margin-bottom:15px;
	width:100%}


.three .home-slider{
    overflow:hidden;
}
.content-panel-container .content-panel header h3.smaller{
    font-size: 19px;
}
.content-panel-container .content-panel header h3{
	letter-spacing:0px;
	font-size:20px;
	line-height:26px;
	font-weight:normal;
	padding-right:20px;}

.content-panel-container .content-panel header h3 a{
	color:#363636;
	text-decoration:none}

.content-panel-container .content-panel header h3 em{ 
	font-style:normal;
	color:#FF0000}

/**************INNER CONTENT PANEL RULES ********************/
/*WITH NAVIGATION*/
.content.has-nav .content-panel-container/*col-span = 3*/{
	width:517px;
	float:left;
    position: relative;}

/*NO NAVIGATION*/
.content .content-panel-container/*col-span = 4*/{
	width:690px;
	float:left;
    position: relative;}

/*Panel Navigation rules*/	
.content-panel-nav{
    float:left;
    width: 152px;/*-20px for padding*/
	padding-right:20px;}

.content-panel-nav ul li a{
	font-size:16px;
	letter-spacing:normal;
	display:block;
	padding:0 0 10px 0; margin:0 0 10px 0;
	border-bottom:1px solid #D1CECE;
	color:#363636;
	text-decoration:none;}

.content-panel{
	width: 100%;
	/*height: 350px;*/
	position: absolute;
	left: -9999px;
	display:block;}
	
/*COLUMN WIDTHS - 690px / 4 = 172px 1column width*/
.content-panel .col{
	float:left;
	padding:0 20px 0 0px}

.content-panel .one.col{ width:152px;/*-20px for padding*/}

.content-panel .two.col{ width: 325px;/*-20px for padding*/}

.content-panel .three.col{ width: 497px;/*-20px for padding*/}

.content-panel .four.col{ width: 670px;/*-20px for padding*/}

/*COLUMN FONT RULES*/
.content-panel .col p{
	font:12px/19px Arial, Helvetica, sans-serif;
	letter-spacing:normal;
	margin-bottom:12px;}

.content-panel .col blockquote{
	font:18px/24px Georgia, "Times New Roman", Times, serif;
	padding-left:10px;
	border-left:1px solid #FF0000;
	margin-bottom:12px;}
	
ul li{
	margin-bottom:5px;
	font-size:14px;
	width: 300px;
}

.content-panel .col ul li a{
	font-size:14px;
	color:#333333}	

/*PANEL FOOTER*/
.content-container .content-footer ul li{
    display:inline;
	width:184px;
	position:relative;}

.content-container .content-footer ul li a{
	font-size:20px;
	display:block;
	width:144px;
	color:#FFFFFF;
	text-decoration:none;
	height:28px;}

/*next*/
.content-container .content-footer ul li.right a{
	background:url(../img/next-tab.png) no-repeat 0 0;	
	padding:20px 0 5px 40px;}

.content-container .content-footer ul li.right{right:-12px;}

/*prev*/
.content-container .content-footer ul li.left a{
	background:url(../img/prev-tab.png) no-repeat 0 0;
	text-align:right;
	padding:20px 40px 5px 0px;}
	
.content-container .content-footer ul li.left{left:-32px;}

#hidden-content{
    display:none;}

.section{
    margin:0px;
    bottom:0px;
    width:2000px;
    float:left;
    height:100%;
    min-height: 460px;
    min-width: 1000px;
    z-index: 10;}

.left{ float:left;}

.right{ float:right;}

/*LATEST NEWS PANEL*/
#blog-container .content-panel:first-child{
	left:0}

#blog-container .posted-on, #blog-container .posted-on a{
	color:#666666}
	
#blog-container .post .entry-content .more-link{
	font:16px/16px Georgia, "Times New Roman", Times, serif;
	display:block;
	margin-top:20px;
	color:#D71400}	

.content-panel .post .entry-content .posted-on, .content-panel .post .entry-content .posted-on a {
	color:#666666;
	margin-top:-5px}

/********SECTION COLOUR OVERIDES*********/

/*WHAT WE DO SECTION*/
.what-we-do h2.title{background:url(../img/title-tab-what-we-do.png) no-repeat 0 0;}
.what-we-do .content-panel-nav ul li a:hover{color:#FF6902}
.what-we-do .content-panel-nav ul li a.inner-current{color:#FF6902}
#what-we-do-container header h3 em{color:#FF6902}
#what-we-do-container .content-panel .col blockquote{border-left-color:#FF6902}

/*PRODUCTS SECTION*/
.products h2.title{background:url(../img/title-tab-products.png) no-repeat 0 0;}
.products .content-panel-nav ul li a:hover{color:#e21e85}
.products .content-panel-nav ul li a.inner-current{color:#e21e85}
#products-container header h3 em{color:#e21e85}
#products-container .content-panel .col blockquote{border-left-color:#e21e85}

/*CASE STUDIES SECTION*/
.case-studies h2.title{background:url(../img/title-tab-case-studies.png) no-repeat 0 0;}
.case-studies .content-panel-nav ul li a:hover{color:#00baa6}
.case-studies .content-panel-nav ul li a.inner-current{color:#00baa6}
#case-studies-container header h3 em{color:#00baa6}
#case-studies-container .content-panel .col blockquote{border-left-color:#00baa6}
#case-studies-container .coda-nav-right{ float:right; margin-right:200px}
#case-studies-container .three.col .coda-nav-right{ margin-right:170px}

/*LATEST NEWS SECTION*/
.blog h2.title{background:url(../img/title-tab-latest-news.png) no-repeat 0 0;}
.blog .content-panel-nav ul li a:hover{color:#D71400}
.blog .content-panel-nav ul li a.inner-current{color:#D71400}
#blog-container header h3 em{color:#D71400}
#blog-container .content-panel .col blockquote{border-left-color:#D71400}

/*DOWNLOADS SECTION*/
.downloads h2.title{background:url(../img/title-tab-downloads.png) no-repeat 0 0;}
.downloads .content-panel-nav ul li a:hover{color:#7c15f0}
.downloads .content-panel-nav ul li a.inner-current{color:#7c15f0}
#downloads-container header h3 em{color:#7c15f0}
#downloads-container .content-panel .col blockquote{border-left-color:#7c15f0}

#outer-container{
    width: 8000px;
    min-height:100%;    
    background-image: url(../img/background.html);
    background-position: left bottom;
    background-repeat: no-repeat;}

/*COMMON ANIMATION STYLE*/
.bottom-anim{
	z-index:100;
	width:100%;
	height:100%;
	position:relative}

/*BIRDS PANEL 4*/
#bottom-anim-download-panel .bird2{
	position:absolute; right:0; top:0}

/*FOOTER*/
footer{ 
	position: fixed;
	bottom:25px;
	left:35px;
	z-index:10000}
	
footer p, footer a{ color:#FFFFFF; font:12px Arial, Helvetica, sans-serif; text-decoration:none}
footer a:hover{ text-decoration:underline}
.one.col ul li {
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
list-style-type: square;
list-style-position: outside;
line-height: 18px;
margin-left: 16px;
}

.sidebar .cookie-popup{
	background:#222;
	overflow:hidden;
	position:relative;
	width:160px;
	height:25px;
	left:-35px;
	top:15px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.sidebar .cookie-popup:hover{
	background:#222;
	overflow:hidden;
	position:relative;
	width:160px;
	height:400px;
	left:-35px;
	top:15px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	cursor:pointer;
}
.sidebar .cookie-popup .title{
	font:20px/28px Arial, Helvetica, sans-serif;
	color:#FFF;
	margin:0 0 10px 0
}
.sidebar .cookie-popup p{ color:#CCC; font:12px/18px Arial, Helvetica, sans-serif; margin-bottom:10px}
.sidebar .cookie-popup a{ float:left; padding:5px 10px; margin-bottom:5px; cursor:pointer; display:block; font-weight:bold; color:#FFFFFF; text-decoration:none; background-color:#666; border-bottom:1px solid #222; font:bold 12px Arial, Helvetica, sans-serif}
.sidebar .cookie-popup .close{border-bottom:1px solid #000; background-color:#FFF; color:#333; margin-right:10px;}
.sidebar .cookie-popup.hide{ display:none;}