body{color: #61606E; background: url(../images/bg.jpg) repeat;}

.hidden {display: none !important;}
img {border: none;}
li {margin-bottom: 10px;}
ul.plain {list-style: none;}
blockquote{padding: 3px; margin: 0.5em; font-size: 0.8em;}
div.hr {border-top: 1px solid #d0d3d6; margin: 7px 0;}
div.invisiblesep {clear: both; padding: 10px;}
div.clear{clear: both; height: 20px;}

table.table {border-collapse: collapse; width: auto !important;}
table.table thead tr td{font-weight: bold; padding: 3px; border-bottom: 1px solid #000;}
table.table tbody tr td{padding: 3px;}
table.table tr td{padding-right: 10px !important;}
table.noborder {border: none !important;}
table.noborder td{border: none !important;}

p.fail{border: 1px solid #D39F92; background-color: #A61300; color: #FFF;}
p.success{border: 1px solid #8EC8A2; background-color: #007C21; color: #FFF;}
p.warning a{color: white;}
p.warning {padding: 4px;}

strong.blue{color: #007DC3;}

code {display: block; background-color: #FFF; padding: 10px 10px 10px 10px; margin-bottom: 14px; border:1px solid; border-color:#D7D7D7 #FFFFFF #FFFFFF #D7D7D7; background:#FAFAFA}

/* Containers */
#content_container {background: url(../images/container_bg.jpg) repeat-y;}

/* Masthead */
#masthead {position: relative; background: url(../images/container_top.jpg) repeat-x; height: 110px; padding: 40px 30px 0 30px;  z-index: 100}
#masthead #logo {position: absolute; top: 27px; left: 17px; cursor: pointer;}

#masttestimonials {position: absolute; top: 56px; right: 15px; text-align: right; font-size: 1.8em; color: #c8cbd0; font-style: italic; font-family: Georgia;}

#telnum{position: absolute; top: 37px; right: 35px; color: #015EAB; font-size: 1.8em; font-weight: bold; letter-spacing: -0.1em; }

#tenyearsbadge {background: url(../images/tenyearsbadge-new.png) no-repeat; width: 415px; height: 45px; position: absolute; top: -10px; left: 204px;}
#tenyearsbadge a {display: block; width: 415px; height: 45px;}

/* Page Headers */
h1.homepage{display: none;}
h2.subheading {color: #848896; border-bottom: 1px solid #d0d3d6; font-size: 1em; line-height: 1em; text-transform: uppercase; font-weight: normal; letter-spacing: 0.1em; padding-bottom: 3px; margin-top: 0;}
#headerimg{width: 1000px; height: 80px;}
div.homecontainer #headerimg{height: 262px;}
div.homecontainer h1, div.homecontainer p{display: none}

/* Bottom Content - Used on homepage and web software */
#bottomContent {padding: 10px 30px 20px 80px;}
#bottomContent #left {width: 550px; float: left;}
#bottomContent #right {width: 300px; float: right; position: relative;}
#bottomContent #right h2 {width:100%}

#bottomContent h3{font-weight: bold; color: #2D3A5D; margin-bottom: 0; margin-top: 0; font-size: 1.1em;}
#bottomContent h3 a{font-weight: bold; color: #2D3A5D;}

.photostream {background: #b7b7b7; margin-right: 28px !important; padding: 3px;}
.photostreamlast {background: #b7b7b7; margin-right: 0 !important; padding: 3px;}

/* Content */
#content ul li, #content ol li {margin:0; line-height: 20px !important}
#content ul, #content ol {margin-bottom: 1.5em; margin-left: 20px;}
#content h2{width: auto;}

.tab {position: absolute; top: 25px; left: -7px;}

.indexcontainer.bottom {min-height: 300px; _height: 300px;}

#bottomContent h2.subheading#tweets{margin-top: 0; position: relative;}
#bottomContent h2.subheading#tweets span{text-transform: none; letter-spacing: normal; position: absolute; right: 0; font-size: 0.8em;}

#bottomContent #twitimage{float: right !important; margin: 5px 0 10px 20px; }
#bottomContent p.tweet{font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 1.15em !important; line-height: 1.4em; color: #616571; padding-left: 20px;  background: url(../images/blockquote.jpg) no-repeat top left; word-wrap:break-word !important; margin-bottom: 0.75em !important; width: auto;}
#bottomContent p.tweet span{color: #0f1941; font-size: 1.3em;}

#bottomContent p.info{margin-top: -0.8em; font-size: 0.9em; color: #8A8A92}

#bottomContent h2.subheading#affiliations{margin-top: 48px; position: relative;}
#affiliationlogos {position: relative; height: 130px;}
#affiliationlogos #ukwda {position: absolute; top: 0; left: 0;}
#affiliationlogos #wwdcnobox {position: absolute; top: 0; right: 0;}
#affiliationlogos #fsb {position: absolute; bottom: 0; left: 0;}
#affiliationlogos #linkedin {position: absolute; bottom: 15px; right: 0;}
div.indexcontainer  #bottomContent #right p{margin-bottom: 0;}
div.indexcontainer  #bottomContent{padding-bottom: 0;}
div.indexcontainer  div.clear{height: 2px;}

#bottomContent #left h2{margin-top: 0;}

/* Home page slider */
.indexcontainer.projects {background: transparent url(../images/projects_bg.jpg) no-repeat bottom left; min-height: 290px; _height: 290px; position: relative; margin-top: 40px; _margin-top: 0;}

#previous {width: 29px; height: 80px; display: block; position: absolute; top: 110px; left: 60px; z-index: 1000;}
#next {width: 29px; height: 80px; display: block; position: absolute; top: 110px; right: 35px;}

#latestProjects {width: 850px; height: 290px; overflow: hidden; position: relative; padding: 16px 0 0 0; margin: 0 0 0 90px;}
#latestProjects .project {height: 270px; position: absolute; bottom: 0; margin: 0; left: 880px; width: 880px;}
#latestProjects .project img {position: absolute; top: 0; width: 550px; height: 240px; margin-left: 10px;}
#latestProjects .project div {margin: 2px 0 0 570px; height: 230px; width: 260px; padding-top: 10px;}
#latestProjects .project div h3{font-size: 1.4em; color: #111B50; font-weight: bold; line-height: 1.2em; margin-top: 0; letter-spacing: -0.05em; text-shadow: #888 1px 2px 2px; margin-bottom: 10px;}
#latestProjects .project div p{font-size: 1em;}
#latestProjects .project div p a{position: absolute; bottom: 70px; right: 250px;}
#latestProjects .project div p a img{height: 32px; width: 120px;}
#latestProjects #project1{left: 0px;}

/**************************************************************************************************************************/

#container.sectionedtemplate h1{font-size: 2em; border-bottom: none; line-height: 1em; margin-bottom: 0;}
#container.sectionedtemplate h2{font-size: 1.3em; color: #B41819; border-bottom: 1px solid #D0D1D6; font-style: italic; margin-top: 0; padding-bottom: 5px; font-weight: normal;}

#sectionrightcolumn ul.boxlinks{list-style-type: none; font-family: Arial, Verdana;}
#sectionrightcolumn ul.boxlinks li{width: 458px; height: 102px; position: relative; padding: 0 !important; margin: 0; }
#sectionrightcolumn ul.boxlinks li h3{margin: 0 !important; padding: 0 !important;}
#sectionrightcolumn ul.boxlinks li h3 a{color: #111B3E; text-transform: lowercase; position: absolute; top: 24px; font-size: 1.2em; left: 51px; letter-spacing: -0.05em}
#sectionrightcolumn ul.boxlinks li p{position: absolute; top: 48px; left: 51px; font-weight: bold; line-height: 1.2em; width: 295px; letter-spacing: 0.01em}
#sectionrightcolumn ul.boxlinks li p a{color: #656B7C; }
#sectionrightcolumn ul.boxlinks li a, #sectionrightcolumn ul.boxlinks li a:hover{text-decoration: none;}

#latestProjects.mini{height:220px; padding: 0; width: 900px; margin-left: 50px;}
#latestProjects.mini .project {width: 300px; height: 200px; margin: 0; text-align: center; left: 900px;}
#latestProjects.mini .project img {width: 268px; height: 184px; position: relative; margin: 0;}
#latestProjects.mini #project1{left: 0px;}
#latestProjects.mini #project2{left: 300px;}
#latestProjects.mini #project3{left: 600px;}

#sectionedtemplateslider_snippet #latestProjects.mini{height:220px; padding: 0; width: 865px; margin-left: 30px;}
#sectionedtemplateslider_snippet #latestProjects.mini .project {width: 288px; height: 200px; margin: 0; text-align: center; left: 865px;}
#sectionedtemplateslider_snippet #latestProjects.mini .project img {width: 240px; height: 165px; position: relative; margin: 0;}
#sectionedtemplateslider_snippet #latestProjects.mini #project1{left: 0px;}
#sectionedtemplateslider_snippet #latestProjects.mini #project2{left: 288px;}
#sectionedtemplateslider_snippet #latestProjects.mini #project3{left: 576px;}

#sectionedtemplateslider #previous {left: 20px !important; top: 70px !important;}
#sectionedtemplateslider #next {top: 70px !important; right: 20px !important; position: absolute;}

#sectionedtemplateslider_snippet #previous {left: 0px !important; top: 70px !important;}
#sectionedtemplateslider_snippet #next {top: 70px !important; right: 0px !important; position: absolute;}

#container.ourproducts{margin-bottom: 0; min-height: 755px; _height: 755px;}
#container.contact{margin-bottom: 0; min-height: 950px; _height: 950px;}
.webdesign {min-height: 780px; _height: 780px !important; background: url(../images/products_large_bg.jpg) bottom no-repeat !important;}
.websoftware {min-height: 780px; _height: 780px  !important; background: url(../images/products_large_bg.jpg) bottom no-repeat !important;}
.aboutus{margin-bottom: 0; min-height: 780px; _height: 780px!important; background: url(../images/products_large_bg.jpg) bottom no-repeat;}
#sectionedtemplateslider.aboutus{text-align: center;}
#sectionedtemplateslider.aboutus img{margin: -5px auto 20px auto}


/**************************************************************************************************************************/
#content_portfolio h2{margin-top: 0; margin-left: 5px;}

#content_portfolio #portfoliooverviewholder{position: relative;}
#content_portfolio #portfoliooverviewholder h2{margin-bottom: 0; padding: 0; line-height: 0; clear: both; height: 30px;}
#content_portfolio div.portfoliocategory{border-top: 1px solid #B3B7BA; padding: 25px 0; clear: both; margin: 0;}
#content_portfolio h2.active{position: absolute; left: 160px; top: 0px;}
#content_portfolio div.portfoliocategory.active{position: absolute; left: 0px; top: 30px;}
#content_portfolio #portcatdivwebdesign{border-top-color: #0089C8;}
#content_portfolio #portcatdivwebsoftware{border-top-color: #B3171B;}

#content_portfolio #portfoliooverviewholder .portfolio_item {width: 461px; float: left; clear: left;}
#content_portfolio #portfoliooverviewholder .portfolio_item.even {margin-left: 24px; clear: none;}
#content_portfolio #portfoliooverviewholder .portfolio_item h2{margin: 6px 10px 6px 10px; font-size: 1.5em; border-bottom: none; height: auto; line-height: 1.2em; }
#content_portfolio #portfoliooverviewholder .portfolio_item h2 a{color: #0D1B42;}
#content_portfolio #portfoliooverviewholder .portfolio_item p{margin: 0 10px 30px 10px; color: #5D6474}
#content_portfolio #portfoliooverviewholder h2 { margin-left: 0;}

#portfolio_left{width: 706px; margin: 20px 0 0 0;}
#portfolio_left h3, #portfolio_left p{margin-left: 5px;}
#portfolio_right{position: absolute; top: 80px; right: 30px; width: 216px;}
#portfolio_right ul {list-style-type: none; margin-left: 0;}
#portfolio_right ul li {margin-bottom: 24px;}
#portfolio_right ul li img{float: none !important; margin: 0 !important;}

#content_portfolio h1 a{position: absolute; right: 30px; top: 30px; font-size: 0.6em;}

div.portfolio_item_thin{background: url(../images/team_seperator.jpg) no-repeat bottom; padding-bottom: 20px; min-height: 185px; _height: 185px;}
div.portfolio_item_thin img{float: right; margin: 0; *margin-top: 20px;}
div.portfolio_item_thin p{width: auto !important;}
div.portfolio_item_thin h2{width: auto !important;}

#testimonial {width: 420px; border-top: 1px solid #d0d3d6; float: left;}
#testimonial h3 {margin: 20px 0 10px 0; text-transform: uppercase; color: #848896; font-size: 1.1em; letter-spacing: 0.1em; font-weight: normal;}
#testimonial p {color: #007dc3; padding: 0 0 0 30px;}
#testimonial a{text-align: center; margin: 0 auto; display: block;}

#testimonial blockquote p{color: #61606E; margin: 0 0 10px 10px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 1.65em !important; line-height: 1.4em; background: url(../images/blockquote.jpg) no-repeat; padding: 0 10px 0 25px !important;}
#testimonial blockquote span {color: #0f1941; font-size: 1.3em;}
.ourclients {float: left; margin-right: 30px;}
.ourclients li {width: 170px}

#whatwedid {background: url(../images/whatwedid.jpg) no-repeat; width: 246px; height: 287px; float: right; position: relative;}
#whatwedid ul {margin: 45px 10px 0 20px; list-style-image: url(../images/sidebar_bullet.jpg); list-style-position:inside; padding: 0;}
#whatwedid ul li {border-bottom: 1px solid #D6D6D6; margin: 5px 0; padding: 0 0 5px 0; color: #232850; font-size: 1em; line-height: 1em; letter-spacing: -0.05em; width: 210px;}

#whatwedo {background: url(../images/whatwedo.jpg) no-repeat; width: 246px; height: 287px; float: left; position: relative; margin: 10px 20px 10px 0;}
#whatwedo ul {margin: 45px 10px 0 20px; list-style-image: url(../images/sidebar_bullet.jpg); list-style-position:inside; padding: 0;}
#whatwedo ul li {border-bottom: 1px solid #D6D6D6; margin: 5px 0; padding: 0 0 5px 0; color: #232850; font-size: 1em; line-height: 1em; letter-spacing: -0.05em; width: 210px;}
/**************************************************************************************************************************/

#comments {border-top: 1px solid #D0D3D6; border-bottom: 1px solid #D0D3D6; margin-bottom: 20px; padding: 20px 0 25px 0; background: url(../images/comments_bg.jpg) repeat-y;}
.comment{padding: 10px;}
.comment.odd {background: #e0e2e4;}
.comment img {padding: 4px; background: #b7b7b7; float: left; margin-right: 10px;}
.avatar {float: left; width: 230px;}

.comment h3 {font-weight: bold;}
.comment h3 span {font-size: 0.7em; font-weight: normal;}

#addComment {width: 700px;}
#addComment label {width: 100px; display: block; margin-right: 10px; color: #30395b; font-weight: bold; float: left;}
#addComment input[type=text] {border: 1px solid #cdd2d8; margin-bottom: 10px; margin-right: 200px; padding: 5px; width: 280px; float: left;}
#addComment textarea {width: 568px; float: left;}
#addComment .submit {margin-top: 30px; margin-left: 110px;}

div.info{position: relative; margin-bottom: 1em;}
#addthis {position: absolute; top: 0; right: 120px;}
#tweet {position: absolute; top: 0; right: 0px;}

span#blogrankinglink {position:absolute; right:30px;}

.bloglistitem{position: relative; border-bottom: 1px solid #D0D3D6; margin: 5px 0 25px 0;}
.bloglistitem h2{margin-bottom: 15px; font-size: 1.4em; margin-top: 0; width: auto;}
.bloglistitem #retweet {position: absolute; top: 0px; right: 10px;}
.bloglistitem img.blog_teamimage, img.blog_teamimage {float: left; margin: 2px 20px 20px 0}
.bloglistitem div.clear{clear: both;}

/* Paging */
ul.paging {width: 100%; list-style-type: none; margin: 0 !important; padding: 10px 0; margin-bottom: 10px !important}
ul.paging li {display: inline; }
ul.paging li a {font-size: 0.8em; border-right: 1px solid #EEE; text-align: center; padding: 2px 10px }
ul.paging li a:hover, ul.paging li a.selected {font-weight: bold; font-size: 1.2em;}
ul.paging li a.nextpage {border: none;}

/* Image Styles */
#content div.imagebox{position: relative; text-align: center;}
#content div.imagebox p{clear: both;}
#content div.LEFT{float: left; margin-right: 1em;margin-top: 1em;margin-bottom: 1em;}
#content div.RIGHT{float: right; margin-left: 1em; margin-top: 0.5em; margin-bottom: 1em;}
#content div.centre{text-align: center; display: block; margin: 10px auto;}
#content div.inline {display: inline; margin: 0 20px 0 0;}

#content img.LEFT{float: left; margin-right: 1em;margin-top:1em;margin-bottom:1em;}
#content img.RIGHT{float: right; margin-left: 1em; margin-top:1em; margin-bottom:1em;}
#content img.centre{text-align: center; display: block; margin: 10px auto;}
#content img.inline {display: inline; margin: 0 20px 0 0;}

#websitereview {margin-top: -5px;}

/* Team Styles */
#member_container {position: relative; width: 700px;}
.member {width: 700px; padding-top: 15px; clear: both; padding-bottom: 70px;}
.member.active{position: absolute; top: 0;}
.description {margin-left: 250px; margin-bottom: 20px; min-height: 260px;}
a.email_btn {background: url(../images/email_btn.jpg) no-repeat; width: 120px; height: 34px; display: block; color: #fff; font-weight: bold; text-align: center; line-height: 34px; float: left;}

#team_sep {background: url(../images/team_seperator.jpg) no-repeat 80px 10px; width: 100%; height: 32px; margin: 20px auto 0 auto; clear: left}

#teamlinks{list-style-type: none; margin: 0 !important; padding: 0; height: 120px;}
#teamlinks li{float: left; margin-right: 8px !important;}
.memberavatar{position: absolute;}

#teamtabouter {position: absolute; top: 10px; right: 0px; width: 270px; height: 710px; z-index: 1200 !important; overflow: hidden; display: none;}
#teamtabinner {position: absolute; top: 0; width: 240px; padding-left: 10px; background: url(../images/teamtabbg.png) repeat; z-index: 1200; text-align: center;}
#teamtabinner ul {list-style-type: none; float: left;}
#teamtabinner ul.listleft {margin-right: 10px; margin-left: 7px;}
#teamtabinner ul li {padding: 4px;}
#teamtabborder {position: absolute; top: 410px; left: 20px;}
#teamtabbottom {background: url(../images/teamtabbgbottom.png) no-repeat; position: absolute; bottom: -30px; left: 0; width: 250px; height: 30px; z-index: 12000;}
#teamtab {position: absolute; top: 10px; right: -30px; background: #101743 url(../images/teamtab.jpg) no-repeat; width: 30px; height: 123px; z-index: 1000; cursor: pointer;}


/* Blog Styles */
#rightmenublog {margin-top: 30px; position: relative; left: 30px;}
#rightmenublog h3 {clear: both; font-size: 1.2em; margin-top: 0; margin-bottom: 10px;}

/* Contact Styles */
#mapcanvas {width: 440px; height: 285px; position: absolute; right: -460px; top: 30px;}
#streetclose {position: absolute; right: -460px; top: 355px;}

#timeline {background-color: #f4f4f4; border: 8px solid #fff; width: 445px; position: absolute; top: 0px; left: 300px;}
#timeline img.title {position: absolute; top: -9px; left: 10px;}
#timeline .date {width: 415px; background: url(../images/timeline_gradient.png) no-repeat 0 bottom; text-align: left; padding: 20px;}
#timeline .date.first {padding-top: 30px;}
#timeline .date .dateinfo {width: 200px; float: right;}
#timeline .date.alt .dateinfo {float: left;}
#timeline .date img{margin:0 20px 0 0; float:left;}
#timeline .date.alt img{margin:0 20px 0 20px; float: right;}
#timeline .date h3 {color: #b4171c}
#timeline .date p {color: #30395c;}
#timeline .date hr {border: none; background-color: #d6d9dc; margin-bottom: 10px; height: 1px; width: 200px;}
#timeline .clear {height: 0;}

/* Footer */
#footer {background: #12204D url(../images/footer_bg.jpg) no-repeat bottom left; height: auto; color: #6B6F7B; position: relative; clear: both; padding-bottom: 10px;}
#footer a {color: #5d6474;}
#footer a:hover {text-decoration: underline;}
#footer p {line-height: 1.6em;}
#footer p span{color: #888D93;}

/* Sitemap */
ul#sitemap li{margin-top: 0.5em; list-style-type: none;}
ul#sitemap li.level0{font-size: 1.4em;}
ul#sitemap li.level1{font-size: 1em; margin-left: 20px;}
ul#sitemap li.level2{font-size: 1em; margin-left: 40px;}
ul#sitemap li.level3{font-size: 1em; margin-left: 60px;}

/* Cross fade slideshow */
#container.landing{margin-bottom: 0;}
#container.landing #content{min-height: 490px !important;}

#crossfadeslideshow {position: relative; height: 200px; width: 1000px; border: 1px solid #005DAA; border-width: 1px 0 0 0;}
#crossfadeslideshow img{position: absolute; top: 0; left: 0;}

#container.landing #sectionrightcolumn{position: absolute; top: 370px; right: 20px; width: 460px; }
#container.landing #sectionrightcolumn ul.boxlinks{list-style-type: none; font-family: Arial, Verdana; width: }
#container.landing #sectionrightcolumn ul.boxlinks li{width: 215px; height: 102px; position: relative; padding: 0 !important; margin: 5px 15px 5px 0; overflow: hidden; float: left;}
#container.landing #sectionrightcolumn ul.boxlinks li h3{margin: 0 !important; padding: 0 !important;}
#container.landing #sectionrightcolumn ul.boxlinks li h3 a{color: #111B3E; text-transform: lowercase; position: absolute; top: 24px; font-size: 1.2em; left: 51px; letter-spacing: -0.05em}
#container.landing #sectionrightcolumn ul.boxlinks li p{position: absolute; top: 48px; left: 51px; font-weight: bold; line-height: 1.2em; width: 150px; letter-spacing: 0.01em}
#container.landing #sectionrightcolumn ul.boxlinks li p a{color: #656B7C; }
#container.landing #sectionrightcolumn ul.boxlinks li a, #sectionrightcolumn ul.boxlinks li a:hover{text-decoration: none;}

#container.landing #sectionrightcolumn img{margin-top: 20px;}

#container.landing #sectionrightcolumn ul.boxlinks li{cursor: pointer;}
#container.landing #sectionrightcolumn ul.boxlinks li h3 a{left: 18px}
#container.landing #sectionrightcolumn ul.boxlinks li p{left: 18px}

#container.landing #sectionrightcolumn ul.boxlinks h3.casesensitive a{text-transform: none;}

div.codeexample{white-space: pre; background-color: white; margin: 1em 0; padding: 0 0 2em 0}


/* Cookie styles */
#masthead #showcookiepreferencelink{color: #FFFFFF; cursor: pointer; position: absolute; right: 0; top: -22px;}

#cookiesoverview{background-color: #A00; position: fixed; width: 100%; bottom: 0; z-index: 10000; display: none; height: 55px; overflow: none; }
#cookiescontent{color: white; width: 980px; margin: 0 auto; padding: 10px 0 0 0;}
#morecookieinfo {margin: 0 !important; height: 210px;}
#cookiesoverview h2{color: white; width: 100%; margin: 0;}
#cookiesoverview p{color: white; width: 100%; margin: 0;}
#cookiesoverview #morecookieinfo p{margin: 10px 0;}
#cookiesoverview a{color: white; text-decoration: underline;}

#morecookieinfo {column-count: 3; column-gap: 35px; -moz-column-count: 3; -moz-column-gap: 35px; margin-top: 20px;}