/* uvd stylesheet v1
Patrick Hamann 2009 */

/* ---- Reset styles based on http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@font-face {
    font-family: 'Museo500';
    src: url('../fonts/Museo500-Regular-webfont.eot');
    src: url('../fonts/Museo500-Regular-webfont.eot?iefix') format('eot'),
         url('../fonts/Museo500-Regular-webfont.woff') format('woff'),
         url('../fonts/Museo500-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Museo500-Regular-webfont.svg#webfontQF7qPaga') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*  Basic page structure and typography */

body {
    margin: 0 auto;
    position: relative;
    background-color: #40164E;
    background-image: url('../img/bg.png');
    background-position:top center;
    background-repeat:repeat-x;
	color: #ffffff;
	font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Helvetica,Arial,sans-serif;
    font-size: 0.75em;
    line-height:18px;  /*1.286; */ 
	text-align: center;
	overflow: auto;
}

.section {
	clear:both;
	position: relative;
	margin:auto;
	width:940px;  /* 68.57em; */ 
	padding: 0px 10px 0px 10px ;
	margin-bottom:20px; 
	overflow:auto;
}

.contents {
	text-align: left;
	margin: 0 auto;
	position: relative;
	clear: both;
	overflow: hidden;
}


h1, h2, h4 { 
    font-family: 'Museo500';
	border-bottom:1px solid #E90E8B;
	margin-bottom: 10px;
	font-weight: normal;
}

h1 { 
	font-size:36px; 
	float:left;
	width:940px;
	padding-top: 10px;
	height:30px;
	display:inline;
	color:#FFF9DC;
	}

h2 { 
	font-size:21px;
	color:#FFF9DC;
	padding-bottom: 8px;
}

h2 a { color:#FFF9DC; text-decoration: underline; }
h2 a:hover, h2 a:visited { color:#ffffff; text-decoration:none; }

h4 { color: #FFF9DC; }

p { /*font-size:0.9em;*/ margin-bottom: 18px;}

a:link,
a:visited,
a:focus,
a:active { color:#ffff80; text-decoration:none; }

a:hover {text-decoration:underline;}


/* ---- Header ----*/

#header {
	margin-bottom:0px;
	overflow: visible;
	display: block;
	width: 940px;
	height: 142px;
}

#header .contents { float: left;  }

.home #header, .blog #header { margin-bottom:20px;}

#clientlogin {
	float:right;
	height:27px;
	min-width:60px;
	background:url('../img/login_left.gif') no-repeat;
	overflow: visible;
}

#clientlogin ul {
	background:url('../img/login_right.gif') no-repeat right top;
	padding:6px 10px 2px 10px;
}

#clientlogin li { float: left; margin-left: 10px;}

#clientlogin ul li a { font-size:0.8em; color:#fff; }

#header .contents { overflow:visible; }

li.social a {
	text-indent: -9999px;
	display: block;
	width: 16px;
	height: 16px;
} 

li.social a { background: url('../img/socialicons.png'); }

li.social a.twitter { background-position: 0 16px;}
/* li.social a.twitter:hover { background-position: 0 16px;}  */

li.social a.delicious { background-position: 32px 16px;}
/* li.social a.delicious:hover { background-position: 32px 16px;}  */

li.social a.rss { background-position: 16px 16px;}
/* li.social a.rss:hover { background-position: 16px 16px;}  */

/* div#header div.contents { overflow: visible; } */

span#twitter {
	position: absolute;
	top:34px;
	right:68px;
	background: url('../img/socialnotes.png');
	background-position: 0 0;
	width:136px;
	height:18px;
	display:none;
}

span#delicious {
	position: absolute;
	top:30px;
	right: -18px;
	background: url('../img/socialnotes.png');
	background-position: 0px -18px;
	width:121px;
	height:29px;
	display:none;
}

span#rss {
	position: absolute;
	top:30px;
	right:-140px;
	background: url('../img/socialnotes.png');
	background-position: 0px -47px;
	width:161px;
	height:20px;
	display:none;
}

#logo {
	float:left;
	width:90px; /* 6.42em; */
	height:90px; /* 6.42em; */
	margin-left:1em;
}

/*---- Nav ----*/

#nav {
	float:left;
	clear:left;
	display:inline;
	width:940px;
	height:50px;
	border-top:1px solid #E90E8B;
	border-bottom:1px solid #E90E8B;
}

#nav li {
	float:left;
	height:50px;
	display:inline; 
/*	position:relative;*/
}

#nav li a {
    display: block;
    text-indent: -9999px;
    height:50px;
    background-image: url('../img/nav4.png');
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
}

#nav li.home, #nav li.home a { width:90px; }

#nav li.home a,
#nav li.home a:link,
#nav li.home a:visited {
    background-position: 0 0;
}
#nav li.home a:hover,
#nav li.home a:focus,
#nav li.home a:active {
	background-position: 0 -50px;
}
.home #nav li.home a,
.home #nav li.home a:link,
.home #nav li.home a:visited,
.home #nav li.home a:hover, 
.home #nav li.home a:focus,
.home #nav li.home a:active {
	background-position: 0 -100px;
} 

#nav li.about-us, #nav li.about-us a { width:120px;}

#nav li.about-us a,
#nav li.about-us a:link,
#nav li.about-us a:visited {
    background-position: -90px 0;
}
#nav li.about-us a:hover,
#nav li.about-us a:focus,
#nav li.about-us a:active {
	background-position: -90px -50px;
}
.about-us #nav li.about-us a,
.about-us #nav li.about-us a:link,
.about-us #nav li.about-us a:visited,
.about-us #nav li.about-us a:hover, 
.about-us #nav li.about-us a:focus,
.about-us #nav li.about-us a:active {
	background-position: -90px -100px;
} 


#nav li.work, #nav li.work a { width:83px; }

#nav li.work a,
#nav li.work a:link,
#nav li.work a:visited {
    background-position: -210px 0;
}
#nav li.work a:hover,
#nav li.work a:focus,
#nav li.work a:active {
	background-position: -210px -50px;
}
.work #nav li.work a,
.work #nav li.work a:link,
.work #nav li.work a:visited,
.work #nav li.work a:hover, 
.work #nav li.work a:focus,
.work #nav li.work a:active {
	background-position: -210px -100px;
}

#nav li.services, #nav li.services a { width:114px; }

#nav li.services a,
#nav li.services a:link,
#nav li.services a:visited {
    background-position: -293px 0;
}
#nav li.services a:hover,
#nav li.services a:focus,
#nav li.services a:active {
	background-position: -293px -50px;
}
.services #nav li.services a,
.services #nav li.services a:link,
.services #nav li.services a:visited,
.services #nav li.services a:hover, 
.services #nav li.services a:focus,
.services #nav li.services a:active {
	background-position: -293px -100px;
}



#nav li.case-studies, #nav li.case-studies a { width:145px; } 

#nav li.case-studies a,
#nav li.case-studies a:link,
#nav li.case-studies a:visited {
    background-position: -404px 0;
}
#nav li.case-studies a:hover,
#nav li.case-studies a:focus,
#nav li.case-studies a:active {
	background-position: -404px -50px;
}
.case-studies #nav li.case-studies a,
.case-studies #nav li.case-studies a:link,
.case-studies #nav li.case-studies a:visited,
.case-studies #nav li.case-studies a:hover, 
.case-studies #nav li.case-studies a:focus,
.case-studies #nav li.case-studies a:active {
	background-position: -404px -100px;
}

#nav li.blog, #nav li.blog a { width:83px; }

#nav li.blog a,
#nav li.blog a:link,
#nav li.blog a:visited {
    background-position: -404px 0;
}
#nav li.blog a:hover,
#nav li.blog a:focus,
#nav li.blog a:active {
	background-position: -404px -50px;
}
.blog #nav li.blog a,
.blog #nav li.blog a:link,
.blog #nav li.blog a:visited,
.blog #nav li.blog a:hover, 
.blog #nav li.blog a:focus,
.blog #nav li.blog a:active {
	background-position: -404px -100px;
}

#nav li.contact, #nav li.contact a { width:109px; }

#nav li.contact a,
#nav li.contact a:link,
#nav li.contact a:visited {
    background-position: -481px 0;
}
#nav li.contact a:hover,
#nav li.contact a:focus,
#nav li.contact a:active {
	background-position: -481px -50px;
}
.contact-us #nav li.contact a,
.contact-us #nav li.contact a:link,
.contact-us #nav li.contact a:visited,
.contact-us #nav li.contact a:hover, 
.contact-us #nav li.contact a:focus,
.contact-us #nav li.contact a:active {
	background-position: -481px -100px;
}

#nav li.labs, #nav li.labs a { width:90px; float:right; }

#nav li.labs a,
#nav li.labs a:link,
#nav li.labs a:visited {
    background-position: -650px 0;
}
#nav li.labs a:hover,
#nav li.labs a:focus,
#nav li.labs a:active {
	background-position: -650px -50px;
}
.labs #nav li.labs a,
.labs #nav li.labs a:link,
.labs #nav li.labs a:visited,
.labs #nav li.labs a:hover, 
.labs #nav li.labs a:focus,
.labs #nav li.labs a:active {
	background-position: -650px -100px;
}

/* ---- Breadcrumb ----*/
ul#breadcrumb {
	float:left;
	display:inline;
	width:940px;
	height:30px;
	margin-bottom:10px;
	background:url('../img/trans10.png');
}

ul#breadcrumb:hover { background:url('../img/trans15.png'); }

ul#breadcrumb li {
	float:left;
	height:23px;
	padding:7px 20px 0px 10px;
	background:url('../img/breadcrumb.png') right no-repeat;
}


/* ---- Home Page ----*/

#herobanner { margin-bottom:10px; }

.home .section {
	margin-bottom:10px;
}


#aboutus {
	float:left;
	width: 620px;
}

#services {
	float:left;
	width: 300px;
	margin-left: 20px;
}

 #services ul li {clear:left; } 

ul#tags { text-align:center; /*  width: 300px; height: 300px; display:block; position: relative; */ }



/*
#services ul li a {
	display:block;
	padding:0px 0px 20px 30px;
	background-position:left top;
	background-repeat: no-repeat;
	color: #ffff80;	
	text-decoration: none;
}

*/

#services ul li.collaborative a {background-image: url('../img/icons/collaborative_20.png');}
#services ul li.webdesign a { background-image:url('../img/icons/design_20.png');}
#services ul li.interfaces a { background-image: url('../img/icons/interfaces_20.png')}
#services ul li.tidy-code a {background-image: url('../img/icons/code_20.png');}
#services ul li.ria a { background-image:url('../img/icons/ria_20.png');}



#services ul li a:hover, #services ul li a:focus { 
	text-decoration: underline;
	color:#EC008C;
}

#featuredwork { margin-bottom:10px; overflow: visible;}

.featuredCarousel {
	width:940px;
	position:relative;
  }
  
.featuredCarousel .wrapper {
  width: 940px;
  overflow: auto;
  min-height: 288px;
}

.featuredCarousel .wrapper ul {
  width: 9999px;
}

.arrow {
  display: block;
  height: 35px;
  width: 35px;
  background: url('../img/featured/arrows.png') no-repeat 0 0;
  text-indent: -999px;
  position: absolute;
  top: 270px;
  cursor: pointer;
}
 
.forward {
  background-position: -35px 0;
  right:35px;
}

.back {
  background-position: 0 0;
  right: 75px;
}

li.feature {
	display:block;
	float:left;
	width:930px;
	height:310px; 
	padding:5px;
	background:url('../img/trans15.png');
} 

/*li.feature .image {
	float:left;
	width:570px;
	height:315px;
	display:block;
	background-image:url('../img/case-studies-img.png');
	background-repeat:no-repeat;
}
*/

li.feature img {
	display:block;
	float:left;
}

li.feature .featureinfo {
	float:left;
	margin-left:-380px;
	width:340px;
	height:290px;
	padding:20px 0px 0px 40px;
}

.featureinfo h3, .featureinfo h3 a {
	color:#B9E3E8;
	text-decoration:none;
}

.feature info h3 a:hover {
 	color:#ffffff;
 	text-decoration:underline;
}

.feature info h3 a:visited {
	color:#ffffff;
	text-decoration:underline;
} 




 li.feature h3 { 
/* 	float:left;*/
	margin-bottom:10px;
 	font-size:1.714285em; /* 24px */
 	color:#B9E3E8;
 	}
 	
 li.feature p { 
/* 	float:left; */
 	display:block;
 	width:270px;
 	}

/*---- About Us Page ----*/

div.copy { 
	float:left;
	display:inline;
	background: url('../img/trans15.png'); padding:20px 14px 2px 14px; 
}

#what-we-like {
	float:left;
	display:inline;
	width:700px;
	margin-bottom:20px;
}

#what-we-like .article {
	width:700px; 
	float:left;
	display:inline;
	margin-top:20px;
	background-position: 0 50%;
	background-repeat: no-repeat;
	}

#collaborate { background-image:url('../img/icons/1.png'); }
#design_solutions { background-image: url('../img/icons/2.png'); }
#build_interfaces { background-image: url('../img/icons/3.png'); }
#tidy_code { background-image: url('../img/icons/4.png'); }
#rich_interactive_experiences { background-image: url('../img/icons/5.png'); }

/*body.about-us p {text-align: justify;}  */

#what-we-like h2, #what-we-like .image, #what-we-like p, #what-we-like blockquote  { float:left; display:inline;}
#what-we-like h2 { width:560px; margin-left:140px; margin-bottom:5px;}
#what-we-like p {  width:560px; margin:10px 0px 5px 140px; display:inline;}

#what-we-like .alt .image { float:right; margin:0px 0px 0px 20px; }
#what-we-like blockquote {
	background:url('../img/quote.png');
	width:460px;
	margin:10px 0px 5px 140px; 
	display:inline;
	padding:10px 10px 10px 80px;
}


body.about-us #aside {
	width:220px;
	float:left;
	margin-left:20px;
	margin-top:20px;
}

body.about-us #aside ul li { float:left; clear:left; margin-bottom:10px;}

ul#environment li div.image{
	float:left;
	display:inline;
	width:60px;
	height:68px;
	background:url('../img/about-us-icon-img.png');
}

ul#environment li p {
	float:left;
	display:inline;
	width:150px;
	font-size:10px;
	margin-left:10px;
}

.person {
	float:left;
	width:220px;
	margin:20px 20px 0px 0px;
}

.person a { color:#FFFF80; }
.person a:hover {  color:#E90E8B;  }

.person img { float:left; margin: 0px 10px 0px 0px; border: 1px #FFFFFF solid; padding:3px; }
.person p { float:left; }

#patrick {margin-right: 0px;}

#who-we-are h2 { 
	clear:left; 
	float:left;  
	display:inline;
	width:940px;
	
 } 

/*---- 	Work Page ----*/

.work .copy { margin-bottom:20px; }

#project-nav {
	float:left:;
	display:inline;
	width:940px;
	height:50px;
	display:block;
	margin-top:20px;
}

#project-nav li {
	width:188px;
	height:50px;
	float:left;
	z-index:10;
	display:block;
	background-image:url('../img/work_nav2.gif');
	background-position:0px 50px;
}

#project-nav li:hover { background-position:0px 100px;}
#project-nav li.selected { 
	background-position:0px 0px;
	z-index:11;	
}

#project-nav li a, #project-nav li.selected a {
	width:143px;
	height:35px;
	padding:15px 0px 0px 45px;
	display:block;
	color:#ffffff;
	font-size:1.2em;
/*	text-shadow: 1px 1px 1px #000;*/
	text-decoration:none;
	background-position:18px 14px;
	background-repeat:no-repeat;
}

#project-nav li.selected a { cursor: default;}

#project-nav li.featured a { background-image:url('../img/icons/featured_20.png');}
#project-nav li.webapplications a { background-image:url('../img/icons/ria_20.png');}
#project-nav li.webdesign a { background-image:url('../img/icons/design_20.png');}
#project-nav li.flash a { background-image:url('../img/icons/flash_20.jpg');}


#filters {
	float:left;
	width:188px;
	height:50px;
	display:block;
	background-image:url('../img/work_nav.gif');
	background-position:0px -100px;
}

#filters span {
	float:left;
	margin:15px 0px 0px 10px;
}

#filters select {
	float:left;
	width:100px;
	margin:15px 0px 0px 10px;
}

#projects a.link { 
	margin-left:20px;
	float:left;
	clear:right; 
}

#projects { 
	position:relative;
	float: left;
	width:960px;
	margin-top:20px;
	margin-left:-20px;
}

.project {
	position:relative;
	float:left;
	width:460px;
	height:140px;
	margin-bottom:20px;
	margin-left:20px;
	display:block;
	overflow:hidden;
}

.projectinfo {
	width:330px;
	height:140px;
	position:absolute;
	top:0px;
	right:0px;
/*	margin-right:-340px;*/
	padding-left:10px;
	background:url('../img/trans70.png');
}

.projectinfo h3, .projectinfo h3 a, .projectinfo h3 a:visited {
	font-family: 'Museo500';
	color: #B9E3E8;
	text-decoration:none;
	text-shadow: 1px 1px 0px #333;
}

.projectinfo h3 a:hover {
	color:#ffffff;
	text-decoration:none;
}

h3.header_backlink, h3.header_backlink a {
	font-family: 'Museo500';
	color: #B9E3E8;
	text-decoration:none;
}

h3.header_backlink a:hover, h3.header_backlink a:visited {
	color:#ffffff;
	text-decoration:underline;
}

.project h3 { 
	float:left;
	margin: 8px 0px 0px 0px;
	font-size:20px;
	font-weight:normal;
}
.project h3 a {	
	font-size: 22px;
	color: #B9E3E8;
	text-decoration:none;
}

.project h3 a:hover { text-decoration:underline;}

.project p {
	display:block;
	float:left;
	clear:left;
	width:300px;
	height:74px;
	font-size:10px;
	margin-bottom:2px;
}

.project span { clear:left; float:left; 	font-size:10px;}
.project ul.tags { 
	float:left; 
	display:inline;
	width:300px;
}
.project ul.tags li {
	float:left;
	margin-left:6px;
	font-size:10px;
}

.project ul.tags li a {
	text-decoration:none;
	color:#FFFF80;
}

.project ul.tags li a:hover { text-decoration:underline; }


/*---- Project  ----*/
#project {
	display:block;
	float:left;
	width:940px; 
	margin-bottom:20px;
} 

#project-info {
	padding:14px 0px 20px 00px;
	width:250px;
	float:left;
}

#project-info h3 {
	float:left;
	clear:left;
	font-weight:normal;
	color: #B9E3E8; 
}

#project-info p {
	float:left;
	clear:left;
	margin-bottom:5px;
}

#project-info p a {
	float:none;
	clear:none;
}


#project-info p#description { 
	margin-bottom:18px;
	font-size:1.1em;
}
	

#project-info a {
	clear:left;
	float:left;
	color: #FFFF80;

}

#project-info a[rel=external] {margin-bottom: 5px;}

#project-info ul { 
	width:220px;
	clear:left; 
	float:left; 
	display:inline; 
	margin-bottom:5px; 
}

#project-info ul li { float:left; display:inline; margin-right:6px; }

#imagery {
	display:block;
	height:320px;
	float:left;
	margin-left:10px;
	padding:14px 10px 20px 10px;
	background:url('../img/trans15.png');
}

#project #images {
	float:left;
	width:542px;
	padding:14px 14px 0px 14px;
	display:block;
	background:url('../img/project.png') no-repeat;
	overflow:auto;
}

#project #images object {
	margin:0 auto;
}

p.caption {
	padding-top:20px;
	text-align:center;
	margin-bottom:0px;
}

/*.image { position:absolute; top:20; left:200;}*/

#thumbnails {
	float:left;
	width:71px;
	margin-right:10px;
}

#thumbnails li {
	width:51px;
	height:51px;
	padding:10px;
	background-image:url('../img/project-thumbnail.png');
}

#more-projects {
	float:left;
	width:920px;
	height:105px;
	display:block;
	background-image:url('../img/trans15.png');
	padding:10px 20px 10px 10px;
}

#more-projects li {
	float:left;
	margin-right:10px;
}

#more-projects p {
	margin:14px 0px 0px 14px;
	padding-bottom:0px;
}

/*---- services ----*/

.services .service {
	float:left;
	display:inline;
	width:940px;
	min-height:140px;
	margin-bottom:20px;
}

.services .copy {
	margin-bottom:20px;	
}

.service h2 {
	float:left;
	display:inline;
	text-align:left;
	width:680px;
	margin-left:240px;
}

.service p {
	text-align:left;
	float:left;
	display:inline;
	width:700px;
	margin:0px 0px 0px 240px;
}

#flash.service {
	background:url('../img/icons/flash.png') left no-repeat;
	background-position:40px 50%;
}

#webapp.service {
	background:url('../img/icons/webapp.png') left no-repeat;
	background-position:40px 50%;
}

#webdesign.service {
	background:url('../img/icons/webdesign.png') left no-repeat;
	background-position:40px 50%;
}


.services h2 {
/*	padding-left:24px;*/
	background-position: 0 4px;
	background-repeat:no-repeat;	
}

/*h2.webdesign { background-image:url('../img/icons/design_20.png');}
h2.webapplications { background-image:url('../img/icons/ria_20.png');}
h2.flash { background-image:url('../img/icons/flash_20.jpg');}*/


/*---- case-studies ----*/
.case-study {
	float:left;
	width:460px;
/*	height:331px;*/
	margin-bottom:20px;
	padding-bottom:10px;
	background-image:url('../img/trans15.png');
	background-repeat: repeat;	
}

/*.case-studies .section .contents:first-child*/ #test {
	margin-right:20px;
}

.case-study h3 { 
	font-family: 'Museo500';
	display:inline;
	float:left;
	margin: 10px 0px 0px 10px;
	color: #B9E3E8;
	font-size:24px; 
}

.case-study h3 a  {
	display:inline;
	font-size: 24px;
	color: #B9E3E8;
	text-decoration:none;	
}

.case-study h3 a:hover { color:#ffffff; text-decoration:underline;} 
.case-study h3 a:visited { color:#ffffff; text-decoration:none;} 

.case-study p {
	float:left;
	clear:left;
	width:440px;
	margin-left:10px;
}

.case-study span {
	clear:left;
	float:left;
	margin-left:10px;
	color: #B9E3E8;
	font-size:12px;
}

.case-study ul { float:left;}
.case-study ul li {
	font-size:12px;
	float:left; 
	margin-left:8px; 
	color:#FFFF80;
}
 
.case-study .image {
	float:left;
	width:440px;
	height:242px;
	display:block;
	margin:0px 0px 0px 6px;
	background-image:url('../img/case-studies-img2.png');
	background-repeat:no-repeat;
}

.case-study img {
	display:block;
	float:left;
	margin:12px 0px 0px 12px;
	
}

/*---- case-study ----*/


#casestudy-nav {
	position:relative;
	float:left;
	width:220px;
	z-index:10;
	margin-top:10px;
	padding-bottom:10px;
}

#casestudy-nav li {
	position:relative;
	z-index:11; 
	float:left;
	width:220px;
	height:100px;
	border-right: 1px solid #E90E8B;
}

#casestudy-nav li a:hover {
	color:#FFFF80;
	padding-left:62px;
	background-position:22px 36px;
}

#casestudy-nav li a, #casestudy-nav li.selected a {
	width:158px;
	height:58px;
	padding:42px 0px 0px 62px;
	display:block;
	color:#ffffff;
	font-size:18px;
	text-shadow: 1px 1px 1px #000;
	text-decoration:none;
	background-position:22px 36px;
	background-repeat:no-repeat;
}

#casestudy-nav li.selected a { cursor: default;}

#casestudy-nav li.analysis a {background-image:url('../img/icons/analysis_32.png');}
#casestudy-nav li.design a {background-image:url('../img/icons/design_32.png');}
#casestudy-nav li.implementation a {background-image:url('../img/icons/implementation_32.png'); }
#casestudy-nav li.testing a {background-image:url('../img/icons/testing_32.png');}
#casestudy-nav li.release a {background-image:url('../img/icons/release_32.png');}


#casestudy-nav li.analysis {
	background-image:url('../img/case-study-nav-top.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	border-bottom:1px solid #000000;
}


#casestudy-nav li.design,
#casestudy-nav li.implementation,
#casestudy-nav li.testing {
	background-image:url('../img/case-study-nav.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	border-bottom:1px solid #000000;
	border-top:1px solid #777777;
}

#casestudy-nav li.release {
	background-image:url('../img/case-study-nav-bottom.png');
	background-repeat:no-repeat;
	background-position:0px 0px;
	border-top:1px solid #777777;
}

#casestudy-nav li:hover {
	background-position: 0px -100px;
}

#casestudy-nav li.selected {
	z-index:100; 
	background-image:none;
	background-color:transparent;
	border:1px solid #E90E8B;
	border-right:none;
	-moz-border-radius-topleft:10px; 
	-webkit-border-top-left-radius:10px;
	-moz-border-radius-bottomleft:10px; 
	-webkit-border-bottom-left-radius:10px;
	-moz-box-shadow: -4px 2px 5px #111;
	-webkit-box-shadow: -4px 2px 5px #111;
}

.case-studies .copy { margin-bottom:20px;}

#casestudy {
	float:left;
	position:relative;
	width:700px;
	height:500px;
	overflow: auto;
	padding-left:20px;		
}

#casestudy .contents {
	position:relative;

}

#casestudy .contents .article {
	padding: 0px 20px 20px 20px;
	height: 480px;
	width: 680px; 
}

#casestudy .contents .article p { float:left;}

#casestudy .contents .article .imageleft {
	float:left;
	width:200px;
	height:170px;
	background:url('../img/case-study-img.png') no-repeat;
	padding:10px;
	margin-right:14px;
	margin-bottom:10px;
}

#casestudy .contents .article .imageright {
	float:right;
	width:210px;
	height:170px;
	background:url('../img/case-study-img.png') no-repeat;
	padding:5px;
	margin-left:10px;
	margin-bottom:10px;
}

#casestudy .contents .article h3 {
	font-family: 'Museo500';
	color:#B9E3E8;
	font-size:28px;
	text-shadow: 1px 1px 1px #000;
	margin-bottom:10px;
}

#casestudy .contents .article h5 {
	clear:left;
	color:#fef8db;
	font-size:19px;
	margin-bottom:10px;
	font-weight:normal;
}

/*---- contact-us ----*/

#map {
	float:right;
	width:599px;
	height:222px;
	padding:14px;
	display:block;
 	background-image:url('../img/contact-us-map.png');
	background-repeat:no-repeat;	
}

#map_canvas {
	width:599px;
	height:200px;
}

.vcard {float:left;}



/*---- Jobs -----*/

.jobs .contents > ul {
	list-style: disc;
	margin: 20px 0px 20px 40px;
}


.jobs h3 { color: #FFFF80; }

/*---- New Services -----*/

.services ul#services,
.home ul#services  {
	float: left;
	clear: left;
	list-style: none;
	margin: 0px;
}

.services ul#services { width: 940px; }
.home ul#services { width: 300px; }

.services ul#services > li, 
.home ul#services li {
	float: left;
	margin-bottom: 20px;
	overflow: hidden; 
}

.services ul#services > li {
	width: 460px;
	height: 141px;
}

.home ul#services li{
	width: 300px;
	height: auto;
	margin-bottom: 10px;	
}

.services ul#services > li > a,
.home ul#services > li > a {
	float: left;
	display: block;
	color: #fff; 
	background-image: url('../img/services_sprite.png');
}

.services ul#services > li > a {
	width: 460px;
	height: 40px;
}

.services ul#services li ul {
	float: left;
	clear: left;
	display: block;
	width: 460px;
	height: 100px; 
	background-image: url('../img/services_sprite.png');
}

.home ul#services > li > a {
	width: 260px;
	height: 26px;
	padding: 4px 0px 0px 40px;
	text-decoration: none;
	color: #FFFF80;
}

.services ul#services > li:hover a { background-position-y: -140px;  text-decoration: none; }
.home ul#services li > a:hover { background-position-y: -312px;  text-decoration: underline; }

.services ul#services li#website-design,
.services ul#services li#web-applications { margin-right: 20px;}

.services ul#services li#website-design > a { background-position: 0 0;}
.services ul#services li#website-design:hover a { background-position: 0 -141px;}
.services ul#services li#website-design > ul { background-position: 0 -40px;}
.services ul#services li#website-design:hover ul { background-position: 0px -181px;}
.home ul#services li#website-design > a { background-position: -120px -282px;}
.home ul#services li#website-design > a:hover { background-position: -120px -312px;}

.services ul#services li#going-mobile a { background-position: -460px 0;}
.services ul#services li#going-mobile:hover a { background-position: -460px -141px;}
.services ul#services li#going-mobile ul { background-position: -460px -40px;}
.services ul#services li#going-mobile:hover ul { background-position: -460px -181px;}
.home ul#services li#going-mobile > a { background-position: -466px -282px;}
.home ul#services li#going-mobile > a:hover { background-position: -466px -312px;}

.services ul#services li#web-applications a { background-position: -920px 0;}
.services ul#services li#web-applications:hover a { background-position: -920px -141px;}
.services ul#services li#web-applications ul { background-position: -920px -40px;}
.services ul#services li#web-applications:hover ul { background-position: -920px -181px;}
.home ul#services li#web-applications > a { background-position: -920px -282px;}
.home ul#services li#web-applications > a:hover { background-position: -920px -312px;}

.services ul#services li#social a { background-position: -1380px 0;}
.services ul#services li#social a:hover { background-position: -1380px -141px;}

.services ul#services li#alternative-interfaces-and-applications a { background-position: -1140px -342px;}
.services ul#services li#alternative-interfaces-and-applications:hover a { background-position: -1140px -483px;}
.services ul#services li#alternative-interfaces-and-applications ul { background-position: -1140px -382px;}
.services ul#services li#alternative-interfaces-and-applications:hover ul { background-position: -1140px -523px;}
.home ul#services li#alternative-interfaces-and-applications > a { background-position: -1398px -282px;}
.home ul#services li#alternative-interfaces-and-applications > a:hover { background-position: -1398px -312px;}


.ui-accordion .ui-accordion-header {
	cursor: pointer;
	position: relative;
	zoom:1; 
}

.ui-accordion .ui-accordion-content {
	float: left;
	clear: left;
	overflow: auto;
	position: relative;
	zoom:1;
}	

.home ul#services li li a {
	font-size: 0.833em;
	padding: 0px 0px 0px 50px;
	color: #fff;
}

.home ul#services li li a:hover { color: #EC008C; }


.services ul#services ul {
	float: left;
	width: 440px;
	height: 90px;
	padding: 5px 10px;
	margin: 0px;
	text-align: left;
	list-style: none;
}

.services ul#services ul li {
	float: left;
	clear: left;
	width: auto;
	height: auto;
}


.services ul#services h2,  
#category-articles .article h3 {
	float: left;
	width: 415px;
	height: 28px;
	border: none;
	margin: 0px;
	padding: 12px 0px 0px 45px;
	text-align: left;	
}

.services ul#services p,
#category-articles .article p {
	float: left;
	width: 440px;
	height: 90px;
	padding: 5px 10px;
	text-align: left;
}


.services ul#categories {
	width: 230px;
	float: left;
	list-style: none;
	margin: 10px 10px 20px 0px;
}

.services ul#categories li {
	float: left;
	clear: left;
	width: 230px;
	margin-bottom: 2px;
	position: relative;
	overflow: visible;
}

.services ul#categories li > a {
	float: left;
	clear: left;
	width: 210px;
	height: 30px;
	border-right: 5px solid transparent; 
	background: url('../img/trans10.png') repeat;
	color: #fff;
	padding: 10px 0px 0px 10px;
}

.services ul#categories li.active > a,
.services ul#categories li > a:hover  {
	text-decoration: none;
	background-image: url('../img/trans15.png');
	border-left: 5px solid #e81b90;
}

.services ul#categories li.active a { width: 215px; }

.services div.desc {
	display: none;
	float:left;
	width: 675px;
	padding: 15px 15px 5px 15px;
	margin:10px 0px 0px -5px;
	min-height: 190px;
	background-image: url('../img/trans15.png');
} 

.services  div.desc.active { display: block; }


.services div.desc p { margin-bottom: 8px; }

.services div#category-info {
	width: 940px;
	float: left;
	clear: left;
	margin: 0px 0px 20px 0px;
	height: 40px;
/* 	border-top: 1px solid #e81b90; */
	border-bottom: 1px solid #e81b90;
}

.services div#category-info h2 {
	width: 700px;
	height: 30px;
	padding-top: 10px;
	float: left;
	border: none;
	margin: 0px;
}


.services form#filter {
	display: none;
	width: 240px;
	height: 35px;
	float: left;
	padding-top:5px;
}

.services form#filter label {
	width: auto;
	float: right;
	height: 35px;
}

.services form#filter span { float: left; margin-top: 5px; }

.services form#filter button {
	float: right;
	width: 30px;
	height: 30px;
	display: block;
	margin: 0px 0px 0px 10px;
	border: none;
	background-color: transparent;
	text-indent: -999em; 
	background-image: url('../img/services_sprite.png');
	cursor: pointer;
}

form#filter button#all {background-position: -90px -282px; }
form#filter button#labs { background-position:0px -282px; }
form#filter button#blog { background-position: -30px -282px; }
form#filter button#projects { background-position: -60px -282px;}

form#filter button#labs:hover,
form#filter button#labs.active,
form#filter button#blog:hover,
form#filter button#blog.active,
form#filter button#projects:hover,
form#filter button#projects.active,
form#filter button#all:hover,
form#filter button#all.active { background-position-y: -312px; }

#category-articles {
	width: 960px;
	float: left;
	clear: left;
}

#category-articles .article {
	display: block;
	float: left;
	height: 140px;
	width: 460px;
	margin: 0px 20px 20px 0px;
}

#category-articles.no-js .article { display: none; }

#category-articles.no-js .article.active { display: block; }

#category-articles .article a {
	float: left;
	height: 140px;
	width: 460px;
	display: block;
	background-image: url('../img/services_sprite.png');
	color: #fff;
}

#category-articles .article a:hover { text-decoration: none; }

#category-articles .article.project,
#category-articles .article.project a {
	position: relative;
	width: 220px;
	overflow: hidden;
}

#category-articles .blog a { background-position: 0px -342px; }
#category-articles .labs a { background-position: -460px -342px; }


#category-articles .article.project a {
	background-position: -920px -342px;
}

#category-articles .article a:hover { background-position-y: -483px;} 


#category-articles .article.project img {
	float: left;
	height: 100px;
	margin-bottom: 1px;
}

#category-articles .article.project h3  {
	float: left;
	width: 175px;
	height: 28px;
	border: none;
	margin: 0px;
	padding: 12px 0px 0px 45px;
	text-align: left;
	font-size: 	1em;
	font-weight: bold;
}

#category-articles .article.project a p.desc {
	position: absolute;
	width: 210px;
	height: 90px;
	padding: 5px;
	background: url('../img/trans70.png') repeat;
	color: #fff;
	display: none;
	font-size: 0.75em;
	margin: 0px;
	top:0;
	left:0;
}

#category-articles .article.project a:hover p.desc { display: block; }


.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}


/*---- login form -----*/

#loginform {
	width:100%;
/*	padding:20px 0px 20px 0px;*/
	background:#2f3738;
	display:none;
	text-align: left;
}

#loginform form {
	width:700px; 
	height:20px;
	padding: 20px 0px 20px 0px ;
	margin:auto;
}

#loginform label { margin-right:5px;}

#loginform input { margin-right:20px; }

input.login:focus { background-color:#fff8dd;}



/*---- footer ----*/

#footer {
	width:100%;
	background:#32303c;
/*	background-image:url('../img/footer_bg.jpg');	*/
	overflow:auto;
/*	font-size:0.8em;*/
}

#footer .section {
	width:960px; 
	padding-top:30px;
	padding-right:0px;
	padding-left:10px;
}

#footer .column {
	width:300px;	
	float:left;
	position:relative;
	margin-right: 20px;
	text-align:left;
}

#footer .column h2 {height:34px; padding-bottom: 0px;}

li.article h3 { clear:left; font-size: 1em;}
 
li.article h3 a {
	font-weight:normal;
	color: #B9E3E8;
	text-decoration:none;
}

#footer .column h2.feed { 
	width:270px;
	float:left;
}

#footer .column a.feed {
	float:left;
	width:30px;
	height:34px;
	border-bottom:1px solid #E90E8B;
	text-indent:-9999px;
}

#footer .column a.rss { background:url('../img/icons/rss.png'); }
#footer .column a.delicious { background:url('../img/icons/delicious.png'); }
#footer .column a.flickr { background:url('../img/icons/flickr.png'); }
#footer .column a.twitter { background:url('../img/icons/twitter.png'); }

p#tweet { float: left; clear: left; }

#footer .column h3 a:hover {text-decoration:underline;}

ul#blog li.article p {font-size: 12px; !important }

ul#blog li.article p a { 
	color:#FFFF80; 
	text-decoration: none;
}

a.more {color:#FFFF80;}

ul#blog li.article a:hover { text-decoration:underline;}

ul#delicious {margin-bottom:20px;}

ul#delicious h3 { margin-bottom:10px;}


ul#flickr li {
	width:95px;
	float:left;
	padding-right:5px;
}

ul#flickr li a { padding:4px 4px 0px 4px; display:block; border:1px solid #32303c;}
ul#flickr li a:hover { border: 1px solid #B9E3E8; }

.adr p {margin:0px; }
.vcard p a {color: #FFFF80}
p.vcard-download {margin-top:10px;}

/*#footer { overflow:auto;}
#footer .section {
	background: url('../img/footer.jpg');
	margin-bottom:0px;
} */

#footer .section {margin-bottom:5px;}

#footer .section ol {
	width:400px;
	float:left;
	clear:left;
	display:block;
	margin-top:18px;
	margin-bottom:5px;
	text-align: left;
}

#footer .section ol li {
	float:left;
	display:inline;
	margin-right:10px;
}

#footer .section ol li a,
#footer .section ol li a:link,
#footer .section ol li a:visited,
#footer .section ol li a:active {
	font-size:10px;
	color:#ffffff;
	font-weight:normal;
	text-decoration: none;
}

#footer .section ol li a:hover,
#footer .section ol li a:focus { 
	text-decoration: underline;
} 

#footer span#copyright {
	float:right;
/*	clear:left;*/
	font-size:10px;
	margin-top:18px;
}



/*---- admin ----*/

.admin input.username, .admin input.password, 
.admin input.login {
	float:left;
	clear:left;
	margin-bottom:10px;
}

.admin {
	text-align:left;
}

.admin .button {
	background: #222 url(/images/alert-overlay.png) repeat-x;
	display: inline-block;
	padding: 8px 14px 9px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

.button .magenta { background-color: #a9014b; }

#list h2 {
	float:left;
	clear:left;
	width:460px;
	margin-top:10px;
}

#list {clear:left;}

#list .project {
	width:450px;
	height:20px;
	margin:0px;
	float:left;
	clear:left;
	padding:5px;
}

#list .project:hover {
	background:url('../img/trans15.png');
}

h3.admin-project {
	text-align:left;
	font-size:1.2em;
	width:360px;
	float:left;
	display:inline;
	margin:0px;
}

a.edit, a.delete { float:left; margin-left:5px;} 
a.new { 
	float:left; 
	clear:right; 
	font-size:1.2em;
	margin-bottom:20px;
	margin-right:10px;

}
	

.admin a.edit { 
	font-size:1.2em; 
	margin-right:10px;
}

#new_project p {
	float:left;
}

#new_project label{
	float:left;
	clear:left;
	width:220px;
	margin-right:20px;
	font-size:1.1em;
	font-weight:bold;
	text-align:right;
}

#new_project input, #new_project textarea  {
	float:left;
	margin-bottom:20px;
	width:460px;
}

#new_project span.checkbox_label{
	width:100px;
	float:left;
}


#new_project input[type="checkbox"] {
	float:left;
	width:40px;
	margin-bottom:20px;
}

#new_project input[type="radio"] {
	float:left;
	width:20px;
}


#new_project span.checkbox_label{
	width:100px;
	float:left;
}

#new_project select {
	float:left;
	width:220px;
	margin-bottom:20px;
}

#new_project h3 {
	float:left;
	width:700px;
	margin-left:240px;
}

#new_project h2 {
	width:940px;
	float:left;	
}

#new_project span {
	float:left;
	width:220px;
	margin-left:10px;
	font-size:0.9em;
	color:#FFFF80;
}

#new_project span.error { color:#cc0000; }

#new_project input#submit {
	clear:left;
	width:140px;
	margin-left:240px;
}

/* ----- 404 ----- */

.fourohfour p { 
	text-align:left; 
	font-size:1.2em;
	line-height:1.4em;
}

.fourohfour p strong {
	font-size:1.4em;
	font-weight:bold;
	color:#FDFDAC;
}

#blackholelogo {
	width:100%;
	margin:0px;
	padding:0px;
	line-height:0;
}

#blackhole {
	width:100%;
	background:url('../img/blackhole_bg.jpg') repeat-x;
		margin:0px;
	padding:0px;
	line-height:0;
}

#blackholelogo img, #blackhole img {
	margin:auto;
	margin:0px;
	padding:0px;
}