@font-face { font-family: 'Minion Pro'; src: url('fonts/minion_pro.eot'); src: url('fonts/minion_pro.eot?#iefix') format('embedded-opentype'), url('fonts/minion_pro.svg#Minion Pro') format('svg'), url('fonts/minion_pro.woff') format('woff'), url('fonts/minion_pro.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Nunito Light'; src: url('fonts/nunito-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Museo Sans'; src: url('fonts/MuseoSans_500-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-regular-webfont.woff') format('woff'), url('fonts/montserrat-regular-webfont.svg#Montserrat') format('svg'); font-weight: normal; font-style: normal;}

html, body {
	height: 100%; 
	margin:0;
	padding:0;
}
head{
	margin:0;
	padding:0;
}
/* 00b2b0 = new green */
/* 00a2b2 = old green */
/* defaults */

h1 {
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 22px;
	font-weight: bold;
	color: #000000;
}
	
h2 {
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #000000;
}

h3 { /*blue-green title*/
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #00b2b0;
}

h4 { /*purple title*/
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #6d57a1;
}


h5 {  /* blue or purple title (DONT CHANGE THIS LOL) */
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 20px;
	font-weight: normal;
	color:white;
}


p {
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 14px;
}

ul {
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 14px;
}		

/* dunno if needed ?*/
a{
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* all the stuff */

#wrapper { display: block; margin:0px auto; position:relative; min-height: 100%;}



#header { 
		/*border: 1px solid #0f0;*/
		height: 202px; /* 148 logo container + 54 top bar */
		background: transparent;
}

#logo-container{ width:1024; height: 148px; margin:0px auto; display:block; /*border: 1px solid #f00;*/}

#logo {
		float:left;
		z-index:1; /*so it sits in front of topbar*/
		position:absolute;
		/* height and width are not changed*/
		/*border: 1px solid #f00;*/
		margin:0px 0px 0px 0px;
}
/* 	logo colour: #6d57a1
	old colour: #9a80a5
*/

#site-title{
	z-index:5;
	position: absolute;
	margin-top: 63px;
	margin-left: 240px;
	border-bottom: 2px solid #ffcb02;
}
#construction{
	z-index:5;
	position: absolute;
	color:red;
	margin-top: 95px;
	margin-left: 240px;
}

/* SEARCH & SEARCH RESULTS*/
#search-form{
	float: right;
	position:relative;
	/*border: 1px solid #f00;*/
	margin-right: 20px;
	margin-top: 33px;
}
/* also contact form button */
#searchsubmit, #cntctfrm_contact_form [type=submit]{
	padding:4px 10px; 
	background:#6d57a1;
	color:white;
	font-size: 13px;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: bold;
	cursor:pointer;
	font-weight: bold;
	border: 0;
}
#searchsubmit:hover, #cntctfrm_contact_form [type=submit]:hover{background:#b49ce9;}

#search-heading{margin-top:35px;}
.search-result a{
	text-decoration:none; 
	color:#00b2b0;
	display: block;
	margin:10px;
	padding:20px;
}
.search-result {position: relative;}
.search-result:hover a{background: #00b2b0; color:#ffffff;}
.search-result:hover h3{color:#ffffff;}
.search-nav{width:100%; position:absolute; text-align:center; bottom:0px; margin-top:30px;}

#headercontact{ float:right; position: relative; margin-right:-175px; margin-top:80px; font-size:14px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
#headercontact a{ width:100%; text-decoration: none; display: block; color:black;}


#topmenu-bar{ /*border: 1px solid #f00;*/ width:100%; background-color: #00b2b0; display:block; height: 54px; /*margin-top:146px;*/}
#topmenu-container{ /*border: 1px solid #00f;*/ width:1024; margin:0 auto; height: 54px; background-color: #00b2b0;}



/*DA NEW MENU*/

#topmenu{ 
	list-style:none;
	font-weight:bold;
	margin: 0; padding: 0;
	/* Clear floats */
	float:right;
	width:100%;
	/* Bring the nav above everything else--uncomment if needed.*/
	position:relative;
	}
	
.mainmenu{z-index:100;}
	
#topmenu li{
	/*margin-right:10px;*/
	position:relative;
	}

.mainmenu li{ float:right;}

#topmenu a{
	padding: 16px 20px;
	height:22px;
	display:block;
	text-decoration:none;
	color: white;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 13px;
	font-weight: bold;
	border-left: 1px solid #80d1d9;
	border-right: 1px solid #005159;
	}

#topmenu a:hover {
	color: #ffffff; 
	background: #80d1d9; 
	border-left: 1px solid #dff3f5;
	}
	
/*dropdown*/

#topmenu ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	/*border: 1px solid #f00*/
	}


#topmenu ul li{
	margin-left:-40px;
	float:none;
}
#topmenu ul a{
	padding: 16px 20px;
	height:15px;
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#topmenu li:hover ul{ /* Display the dropdown on hover */
	background: #00b2b0;
	left:0; /* Bring back on-screen when needed */ 
}
#topmenu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	text-decoration:none;
	color: white;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 13px;
	font-weight: bold;
	border-left: 1px solid #80d1d9;
	border-right: 1px solid #005159;
}
#topmenu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
	border-top: 1px solid #005159;
}
#topmenu li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background: #80d1d9; 
	border-left: 1px solid #dff3f5;
}

/* PROJECT FILTERS */
#projectmenu-container{ /*border: 1px solid #00f;*/ width:1024; margin:0 auto; margin-top:20px; /*background-color: #00b2b0;*/}
#projectmenu {
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	border: 5px solid #00b2b0;

}
#projectmenu ul{ list-style:none; margin: 0; padding: 0;}
#projectmenu table{width:100%;}
#projectmenu td{vertical-align: top; padding:5px 30px;}

#projecttable{padding:10px}
#projecttable a{text-decoration:none; color:black;font-weight:normal}
#projecttable a:hover{color:#00b2b0;}
#projecttable a:visited{color:#6d57a1;}
#projecttable a:visited:hover{color:#00b2b0;} /*visited links deserve hover too!*/

#shower-div{/*border-top: 5px solid #00b2b0;*/float:right;}
#shower{background-color:#00b2b0;border: none; color: white;font-weight: bold; cursor:pointer; padding:8px 14px 8px 14px;font-size:15px;}

/* PROJECT RESULTS*/
#proj-head{background:#6d57a1; display:inline-block; padding:8px;padding-left:20px;padding-right:20px;color:white;margin-bottom:0px;margin-top:0;}

#project-wrapper{margin-bottom:30px;border:1px solid #00b2b0;	border-collapse: collapse;}
#pitems{vertical-align: top; border-right:1px solid #00b2b0; width:30%;padding:0}
#projs{vertical-align: top;padding:0;border:1px solid #00b2b0}

.project-result h3{color:#00b2b0;}
.project-result { padding: 10px; }
.project-result:hover{background: #00b2b0;}
.project-result:hover h3{color:#ffffff;}

.project-description {padding:7px 20px;padding-bottom:20px;text-decoration: none;color:black;display:block;}
.project-description:hover {color:white;background-color:#00b2b0 !important ;} /* overrides inline style */
.project-description:hover > h3{color:white;}
.project-description:hover > .clickhere{color:white;}
.project-description .clickhere{color:#00b2b0;font-weight: bold;float:right;margin:0;margin-top:-15px;}

#project-hider{float:right;background:none;border:none;color:#00b2b0;padding:6px;padding-bottom:4px;padding-top:4px;font-weight:bold;font-size:16px;}
#project-hider:hover{background:#00b2b0;color:white;}

/*PAGINATION*/
.project-nav{width:100%; text-align:center;padding-bottom:5px;}

.page-numbers{text-decoration:none; color:black}
.page-numbers:hover{color:#00b2b0}
.dots:hover{color:black;}
.current{background:#6d57a1;color:white;font-weight:bold;padding:1px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
.current:hover{color:white;}

/* PROJECTS */
#project-text{margin:20px;}
#project-text ul{ padding: 0;}
#project-cat-table{width:100%}
#project-cat-table td{ vertical-align: top; padding:3px 14px;}
#backbutton{float:right; background-color: transparent;text-decoration: underline;border: none;color: blue;cursor: pointer;}


/* SECTIONY STUFF */
#banner-container {
	display:block;
	padding: 0;
	margin: 0;
	width:100%;
	height: 300px;
	position:relative;
}
.metaslider{
	width: 1024px;
}

/*
#bannerimage {
	padding:0;
	margin-top:0px;
	margin-left:-512px;
	left:50%;
	display: block;
	width: 1024px;
	position:absolute;
	background-repeat:no-repeat;
}
*/

#bodywrapper{
		 display: block;
		 position:relative; /* makes position:absolute's inside it  work good */
		 overflow: auto; /* makes it resize to accomodate elements inside */
		 margin:0px auto;
		 width: 1024px;
}

.sectionbar{ /*coloured bars at the top of page sections*/
	height: 50px;
	padding-top: 1px; /* i have no idea why i need this ??*/
	}
.sectionbar h5{ margin-left: 20px; margin-top:11px;} /* adjust headings */
.sectionbar a{ text-decoration:none; color:white;}

.purplebar{ background: #6d57a1;}
.bluebar{ background: #00b2b0;}

.leftgr1{ /*golden ratio left small*/
	width: 388px;
	float: left;
	}
.rightgr2{ /*golden ratio right big*/
	width: 636px;
	float: right;
	}
.left13{ /*1:3 left small*/
	width: 341px;
	float: left;
	}
.right23{ /*2:3 right big*/
	width: 683px;
	float: right;
	}
.left14{ /*1:4 left small*/
	width: 256px;
	float: left;
	}
.right34{ /*3:4 right big*/
	width: 768px;
	float: right;
	}
	
.bluesection a{ /* quickie needs fixing up!!!!!!!!!!!!!!!!!!!!!!*/
    text-decoration: none;
    color: white;
	}
	
#whatdo{ /* what we do div*/
	width: 636px;
	height:200px;
	float: right;
	display: block;
	}

.tableleft{ width: 225px;}
.tableright{ width: 330px;}

/*Who we are styling...*/
/*about us page*/
.leftgr1 #aboutusimage { width:235px; margin:45px;}
/*sidebar*/
.whobar ul{ list-style-type:none; margin: 10; padding: 0; text-align:center}
.whobar ul li{   display:inline-block; width:70%;}
.whobar ul li a{ width:100%; display:block; margin-top:15px; padding-top:15px; padding-bottom:15px; text-decoration:none; color:white; background:#00b2b0;}
.whobar ul li a:hover{ background: #80d1d9; }
#foobar ul li{ width:90%;}

/*our team page*/
.teampage{ margin-top:20px; margin-bottom:20px;}
.teampage p{ margin-bottom:25px;}
.teampage ul{ list-style-type:none; margin: 0; padding: 0; text-align:center}
.teampage ul li{ margin: 0px; display:inline-block;}
.teampage ul li a{ width:100%; display:block;}
.teampage ul li a:hover{ background:#00b2b0;}
.teamimage{ width:100px; height:140px;}
/* bio pages */
.left13 #bioimage { width:235px; margin:45px;}
.teambio{ margin:20px; line-height: 18px; }

.bio{ display:none;}
.bio h5{ text-align:center;}
.biotext{ margin: 20px; padding: 15px; background:#ffffff;}
.teampage .biotext ul{list-style-type:disc; text-align: left;margin-left:20px;}
.teampage .biotext li{ padding-left: 5px;display:list-item;}
.biotitle{ padding-left:20px; vertical-align: top;padding-top:20px;}
.biotitle h5{margin-top:10px;}


#footnoter {list-style-type:none;}
#footnoter li {color:#333333;}

	
#sidebar { width: 300px; /* rest of banner taken up by sidebar*/  float: right; margin: auto 5px; line-height:200%}

#sidebar ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
#sidebar li a{
	padding: 6px 6px;
	margin: 20px 6px;
	text-decoration:none;
	color: black;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size: 13px;
	font-weight: bold;}
#sidebar ul li a:hover {color: #ffffff; background: #83729a;}

#quotation {margin-top: 50px; font-size: 12px;}


#contactbar { width: 23%;  float: right; margin: 0px; margin-top:-175px; }

#delimiter { clear: both; height:10px; overflow:auto;
	padding-bottom: 170px;} /*same height as footer*/


#footer-container{
		position: relative;
		margin-top: -170px; /* negative value of footer height */
		height: 170px;
		clear:both;
		/*bottom:0;
		position:absolute;
		height: 100px;*/
		width:100%;
		background:#00b2b0;
		color:white;
		text-decoration:none;
		font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		font-size: 12px;
}

/* contact form */
#cntctfrm_contact_form{
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-size:14px;
}
.required {color:red;}

/* footer */
#footer{ width:1024; margin:0px auto; display:block; position:relative; line-height: 200%}

#footercontact{ margin-top:20px; margin-left:15px; width:30%; float:left; font-size:14px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
#footercontact a{ width:100%; text-decoration: none; display: block; margin: 0; position: relative; color:white;}

#copyright{ width:100%; display: block; margin-top: 120px; position: absolute; color:white; text-decoration: none; font-size:10px; text-align:center; line-height:120%;}
#copyright a{ color:white; /*text-decoration: none;*/}
#copyright a:hover{ color:#6d57a1; }



.title { font-size: 11pt; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }


/*highlight search plugin requirement*/
.hilite { background-color:ff0000/*#83729a*/;}

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

/*"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;*/