/* ------------------------------------------------------------------------
	Copyright 2008 - The Open Partnership
------------------------------------------------------------------------ */

html { font-family: arial, verdana; color: #666666; }
html, body { margin: 0px; padding: 0px; background:#ededed;}
a img { border: 0px; }
img.left { float: left; margin-right: 15px; margin-bottom: 10px; }
img.right { float: right; margin-left: 15px; margin-bottom: 10px; }
img.centre { display: block; margin-left: auto; margin-right: auto; }
table.centre { margin-left: auto; margin-right: auto; }
h3.left { float: left; margin-right: 15px; }
p.left { float: left; margin-right: 15px; }
.clear { clear:both; }

/* ------------------------------------------------------------------------
	flashwrapper and htmlwrapper element ids
	This htmlwrapper element contains all of the HTML website content, but it is all overwritten by a flash embed object that replaces the flashwrapper if the user has flash plugin installed
------------------------------------------------------------------------ */
#flashwrapper { height:100%; width:100%; outline:none; }
#htmlwrapper { background:transparent url('/images/html_background.jpg') top center no-repeat; background-attachment:fixed; height:100%; width:100%; padding:25px 0px; margin:0px; }

/* ------------------------------------------------------------------------
	Container
------------------------------------------------------------------------ */
#container { position: relative; margin: 0px auto; padding-left: 5px; padding-bottom: 5px; width: 984px; border: 2px solid #888888; background-color: white; }
#container a { /* text-decoration: none; border-bottom: 1px solid #666666; */ color: #666666; }
#container a:hover { /* border-bottom-color: #00ADEF; */ color: #00ADEF; }

/* ------------------------------------------------------------------------
	Header
------------------------------------------------------------------------ */
#header { margin: 10px 0px 10px 5px; width: 977px; height: 45px; }
#header p { padding: 0px; margin: 0px; font-size: 9pt; }
#header #logo { float: left; padding-right: 20px; }
#header #company { float: left; margin-top: 8px; border-left: 1px solid #00ADEF; padding: 0px 20px; }
#header #company h1 { float: left; padding: 0px; margin: 0px; font-size: 9pt; font-weight: normal; color: black; }
#header #address { float: left; margin-top: 8px; border-left: 1px solid #00ADEF; padding: 0px 20px; }
#header #contact { float: left; margin-top: 8px; border-left: 1px solid #00ADEF; padding: 0px 20px; }
#header #contact span { color: #00ADEF; } #header #contact p { /* line-height: 9pt; */ }
#header #contact img { position: relative; top: 4px; left: -1px; }
#header #login { float: left; margin-top: 8px; border-left: 1px solid #00ADEF; padding: 0px 20px; }
#header #vacancies { float: left; margin-top: 8px; border-left: 1px solid #00ADEF; padding: 0px 20px; }

/* ------------------------------------------------------------------------
	Menu
------------------------------------------------------------------------ */
#menu { width: 969px; height: 40px; margin-left: 5px; background: url('/images/html_menuback.gif') left bottom no-repeat; }
ul#menuholder { width: 955px; height: 40px; padding: 0px; margin: 0px; padding-left: 24px; }
ul#menuholder li { display: block; float: left; padding: 0px; margin: 0px; /*background: url('menu/openlogo.png') left center no-repeat;*/}
ul#menuholder li a { display: block; padding: 10px; margin: 0px; outline: 0px; background-position: left top; background-repeat: no-repeat; height: 40px; color:#ffffff; text-decoration:none; }
/*
ul#menuholder li a span { display: none; }
ul#menuholder li#home a { width: 105px; background-image: url('menu/newbuttons/home.gif'); }
ul#menuholder li#news a { width: 106px; background-image: url('menu/newbuttons/news.gif'); }
ul#menuholder li#portfolio a { width: 115px; background-image: url('menu/newbuttons/portfolio.gif'); }
ul#menuholder li#contact a { width: 169px; background-image: url('menu/newbuttons/contact.gif'); }
ul#menuholder li#who a { width: 149px; background-image: url('menu/newbuttons/who.gif'); }
ul#menuholder li#how a { width: 159px; background-image: url('menu/newbuttons/how.gif'); }
ul#menuholder li#latest a { width: 118px; background-image: url('menu/newbuttons/latest.gif'); }
ul#menuholder li a:hover { background-position: left bottom; }
ul#menuholder li.selected a { background-position: left bottom; }
*/

ul#menuholder li ul { display: none; }

/* ------------------------------------------------------------------------
	Content holder and smooth border
------------------------------------------------------------------------ */
#content { width: 959px; margin-left: 5px; background: white url('/images/html_outerborder-vertical.gif') left top repeat-y; padding: 5px 10px; padding-top: 20px; }
#content h2 { color: #00ADEF; font-size: 21pt; font-weight: lighter; }
#content h2:first-child { margin-top: 0px; padding-top: 0px; /* margin-bottom: 0px; padding-bottom: 0px; */ }
#content h3 { color: #00ADEF; font-size: 17pt; font-weight: lighter; }
#content h3:first-child { margin-top: 0px; padding-top: 0px; }
#content p { font-size: 10pt; }
#content .intro { font-size: 14pt; }
#content a.hidden { display: none; }

#openextra4 { width: 979px; height: 9px; margin-left: 5px; margin-bottom: 5px; background: white url('/images/html_outerborder-bottom.gif') left top no-repeat; }

/* ------------------------------------------------------------------------
	Generic Columns
------------------------------------------------------------------------ */
.columncontainer { width: 910px; clear: both; overflow: auto; padding: 2px 10px; margin-left: 10px; }
.columncontainer .column { float: left; margin-right: 25px; text-align: left; }
.columncontainer #columnfront { float: left; text-align: left; width: 910px; }
.columncontainer #columnfront a { float: left; background-position: left top; background-repeat: no-repeat; height: 290px; }
/*
.columncontainer #columnfront a#news { background-image: url('frontpage/news.gif'); width: 297px; } .columncontainer #columnfront a:hover#news { background-image: url('frontpage/news-photos-hover.jpg'); }
.columncontainer #columnfront a#portfolio { background-image: url('frontpage/portfolio-grey.jpg'); width: 312px; } .columncontainer #columnfront a:hover#portfolio { background-image: url('frontpage/portfolio-colour.jpg'); }
.columncontainer #columnfront a#weareopen { background-image: url('frontpage/weareopen.gif'); width: 301px; } .columncontainer #columnfront a:hover#weareopen { background-image: url('frontpage/weareopen.gif'); }
*/

.columncontainer #columnfront a { float:left; }
.columncontainer #columnfront a#news { background-image: url('../images/frontpage/news.gif'); margin:70px 20px 0px 0px; padding:80px 20px 0px 20px; width: 180px; height:91px; font-size:12px; } 
.columncontainer #columnfront a#news:hover { color:#666666; }
.columncontainer #columnfront a#news_photo1 { padding:0px 0px 0px 0px; height:100px; }
.columncontainer #columnfront a#news_photo2 { padding:40px 0px 0px 0px; height:100px; }
.columncontainer #columnfront a.news_photos img { width:130px; display:inline; margin:2px; border:1px solid #cccccc; background:#ffffff; padding:3px 3px 20px 3px; }

.columncontainer .columnthird { width: 260px; margin-bottom: 10px; }
.columncontainer .columnhalf { width: 440px; margin-bottom: 10px; }
.columncontainer .columnwhole { width: 100%; margin-right: 0px; margin-bottom: 10px; }
.columncontainer .columnwholethin { width: 100%; margin-right: 0px; }

.columncontainer .right { margin-right: 0px; }
.columncontainer .column .first { padding-top: 0px; margin-top: 0px; }
.columncontainer .column .last { padding-bottom: 0px; margin-bottom: 0px; }

.columncontainer .gallery { position: relative; z-index: 50; }

/* ------------------------------------------------------------------------
	Custom Pages
------------------------------------------------------------------------ */


/*#htmlwrapper.portfoliopage { background: white url('backgrounds/background_4.jpg') top center no-repeat; background-attachment: fixed; }*/
#htmlwrapper.portfoliopage .columncontainer p { font-size: 11pt; }
#portfoliotext {  }
#portfoliotext h2 { font-size: 24pt; padding-bottom: 0px; margin-bottom: 0px; }
#portfoliotext p { font-size: 11pt; }
#portfolioclients { width: 850px; height: 388px; margin-left: auto; margin-right: auto; }
#portfolioclients a { display: block; width: 200px; height: 140px; float: left; margin-right: 10px; margin-bottom: 10px; background: url('portfolio/blank.gif') center center no-repeat; text-align: center; vertical-align: middle; }
/* #portfolioclients a:hover { background-image: url('portfolio/blank-hover.gif'); }	*/
#portfolioclients a span { display: none; }

#staffmembers { float: right; width: 350px; }
#staffmembers a { position: relative; display: block; width: 105px; height: 145px; float: left; margin-right: 10px; margin-bottom: 10px; background: url('/images/html_card-cyan-small.gif') center center no-repeat; text-align: center; vertical-align: middle; padding: 0px; }
#staffmembers a.alt { background-image: url('/images/html_card-yellowg-small.gif'); }
#staffmembers a img { position: absolute; top: 4px; left: 3px; width: 96px; height: 126px; }
#aboutustext { padding-left: 0px; float: left; width: 460px; }
#aboutustext h2 { font-size: 30pt; padding: 0px; margin: 0px; margin-bottom: 7px; }
#aboutustext h3 { font-size: 14pt; font-weight: bold; padding: 0px; margin: 0px; }
#aboutustext h3.alt { color: black; }
#aboutustext.alt h3 { color: #bdcf3b; }
#aboutustext.alt h3.alt { color: black; }
#staffpreviews { float: left; margin-left: 30px; width: 400px; height: 260px; padding-bottom: 15px; padding-top: 10px; }
#staffpreviews img { float: left; margin-right: 15px; padding: 10px 15px 39px 7px; background: url('/images/html_card-cyan-large.gif') center center no-repeat; }
#staffpreviews img.photo {  }
#staffpreviews img.stats {  }
#staffpreviews.alt img { background: url('/images/html_card-yellowg-large.gif') center center no-repeat; }

/*#wrapper.contactpage { background: white url('backgrounds/background_2.jpg') top center no-repeat; background-attachment: fixed; }*/
form#contactus { position: relative; float: left; margin: 0px 25px 25px 25px; width: 376px; height: 473px; background: url('contactus/formback.jpg') left top no-repeat; }
form#contactus input#firstname { position: absolute; top: 116px; left: 48px; width: 171px; }
form#contactus input#email { position: absolute; top: 161px; left: 48px; width: 171px; }
form#contactus input#phone { position: absolute; top: 206px; left: 48px; width: 171px; }
form#contactus textarea#message { position: absolute; top: 251px; left: 48px; width: 171px; height: 135px; }
form#contactus input#reset { position: absolute; top: 402px; left: 102px; }
form#contactus input#send { position: absolute; top: 402px; left: 167px; }
div#contactinfo { margin-top: 50px; width: 360px; float: left; padding-left: 50px;  }
div#contactinfo h2 { font-size: 24pt; padding-bottom: 0px; margin-bottom: 0px; }
div#contactinfo p { font-size: 13pt; }
div#contactinfo span { color: #00ADEF; }
div#contactinfo img#unique { position: relative; top: 4px; }

/*htmlwrapper.howpage { background: white url('backgrounds/background_1.jpg') top center no-repeat; background-attachment: fixed; }*/
htmlwrapper.howpage #content { padding-left: 0px; padding-top: 0px; }
htmlwrapper.howpage .columncontainer { position: relative; padding-left: 0px; margin-left: 0px; padding-top: 0px; background: url('how/coffee.jpg') top left no-repeat; }
#howcoffee {  }
#howcoffee h2 { font-size: 17pt; padding-bottom: 0px; margin-bottom: 0px; }
#howcoffee #servings { float: right; margin-left: 5px; margin-bottom: 10px; background: url('how/servings.jpg') -12px 0px no-repeat; width: 223px; height: 244px; }
#jobscard { position:relative; }
#jobscard a { position:absolute; top:-80px; right:60px; }
#jobscard img { border:none; }

/*#htmlwrapper.latestpage { background: white url('backgrounds/background_5.jpg') top center no-repeat; background-attachment: fixed; }*/
#latesttext { float:left; width: 400px; margin: 0px; padding: 10px 0px 10px 20px; }
#latesttext h2 { font-size: 30pt; padding-bottom: 0px; margin-bottom: 0px; }
.latestimage { float:left; padding:0px 0px 10px 10px; }
.latestimage img { border:none; }


/*
#htmlwrapper.latestpage .columncontainer { position: relative; background: url('latest/background.jpg') top center no-repeat; }
wrapper.latestpage .columncontainer a span { display: none; }
wrapper.latestpage .columncontainer a#mtic { position: absolute; top: 174px; left: 30px; width: 384px; height: 252px; }
wrapper.latestpage .columncontainer a#mtic:hover { background: url('latest/mtic-lines.gif') center center no-repeat; }
wrapper.latestpage .columncontainer a#conker { position: absolute; top: 8px; right: 34px; width: 340px; height: 223px; }
wrapper.latestpage .columncontainer a#conker:hover { background: url('latest/conker-lines.gif') center center no-repeat; }
*/

/*#htmlwrapper.newspage { background: white url('backgrounds/background_2.jpg') top center no-repeat; background-attachment: fixed; }*/
/*#htmlwrapper.newspage .columncontainer { background: url('news/backpic.jpg') top right no-repeat; min-height: 500px; }*/
#htmlwrapper.newspage .blank { background-image: none; }
#newsfront { float: left; width: 350px; padding-top: 300px; margin-left: 0px; background-position: top left; background-repeat: no-repeat; }
#newsfront h2 { font-size: 36px; padding: 0px; margin: 0px; }
#newsfront.preview { padding-top: 0px; width: 300px; margin-right: 300px; margin-bottom: 20px; }

#newsselect { width: 300px; height: 260px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px;  }
#newsselect a { position: relative; float: left; width: 100px; height: 100px; margin-right: 20px; margin-bottom: 20px; background: url('news/polaroid.gif') center center no-repeat; }
#newsselect a img { position: relative; top: 3px; left: 3px; }

#newsimages { float: left; width: 550px; margin-left: 10px; position: relative; }
#newsimages a { position: relative; float: left; width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px; background: url('news/polaroid.gif') center center no-repeat; }
#newsimages a img { position: relative; top: 3px; left: 3px; }

/* ------------------------------------------------------------------------
	News Page
------------------------------------------------------------------------ */

#news_holder { padding:10px 30px 10px 20px; }

/* ------------------------------------------------------------------------
	Accordion
------------------------------------------------------------------------ */

#accordion {  }
#accordion .toggler { padding:3px 10px; margin:0px; background:#666666; color:#ffffff; cursor:pointer; font-size:18px; border-top:2px solid #ffffff; }
#accordion .element { background:#eeeeee; }
#accordion .el_inner { padding:20px 10px; }
#accordion .el_inner img { border:5px solid #ffffff; width:200px; height:170px; margin:10px 10px 0px 0px;  }

/* ------------------------------------------------------------------------
	Client List
------------------------------------------------------------------------ */

#clientlist { color:#00ADEF; margin:0px 0px 20px 0px; padding:0px 0px 0px 15px; }
#clientlist li { padding:2px 0px; margin:0px; }
#clientlist li span { color:#666666; }

/* ------------------------------------------------------------------------
	Footer and Copyright
------------------------------------------------------------------------ */
#upgrade_message {font-size:12px; text-align:center; padding:15px 0px 10px 0px; margin:20px 30px 0px 20px; border-top:1px solid #999999;}
#footer { width: 886px; margin: 0px auto 25px auto; }
#footer p { margin: 0px; padding-top: 2px; text-align: center; font-size: 9pt; }