/*! normalize.css 2011-11-04T15:38 UTC - http://github.com/necolas/normalize.css */

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying 'audio' without controls
 */

audio:not([controls]) {
    display: none;
}

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */

[hidden] {
    display: none;
}


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Keeps page centred in all browsers regardless of content height
 * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html {
    font-size: 100%; /* 1 */
    overflow-y: scroll; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    -ms-text-size-adjust: 100%; /* 3 */
	background-color:#FFF;
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */

body {
    padding:14px;
	margin:0;
	background:#fff url(../images/corner-shadow-bg.jpg) left top no-repeat;
}

/* 
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */

body,
button,
input,
select,
textarea {
	font-family:'Droid Sans', Arial, Helvetica, sans-serif;
	color:#797e81;
	color:#3a3f41;
}

@font-face {
    font-family: 'GaramondPremrProCaptRegular';
    src: url('font/garamondpremrpro-capt-webfont.eot');
    src: url('font/garamondpremrpro-capt-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/garamondpremrpro-capt-webfont.woff') format('woff'),
         url('font/garamondpremrpro-capt-webfont.ttf') format('truetype'),
         url('font/garamondpremrpro-capt-webfont.svg#GaramondPremrProCaptRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* =============================================================================
   Links
   ========================================================================== */

a{
	color:#0086ce;
	text-decoration:none;
}
/*
 * Addresses outline displayed oddly in Chrome
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */

a:active {
	color:#0086ce;
    outline: 0;
}
a:hover {
	color:#ceb300;
    outline: 0;
}

/* =============================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a {
	color:#3a3f41;
	text-decoration:none;
	font-weight:700;
}

h3{
	text-transform:uppercase;
	text-decoration:none;
	color:#898c8d;
	font-size:9px;
	font-weight:400;
	letter-spacing:0.3em;
}
h3 span{
	text-transform:uppercase;
	text-decoration:none;
	color:#0086ce;
	padding:0 5px 0 0;
}

/*
 * Neutralise smaller font-size in 'section' and 'article' in FF4+, Chrome, S5
 */

h1 {
    font-size: 2em;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/

b, 
strong { 
    font-weight: bold; 
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */

pre,
code,
kbd,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */

/* 1 */

q {
    quotes: none;
}

/* 2 */

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* =============================================================================
   Lists
   ========================================================================== */

ul,
ol {
    margin: 0;
    padding: 0;
	list-style:none;
}

dd {
    margin: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9 
 */

svg:not(:root) {
    overflow: hidden;
}


/* =============================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */

figure {
    margin: 0;
}


/* =============================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE6/7
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding
 */

fieldset {
    border:none;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects alignment displayed oddly in IE6/7
 */

legend {
    border: 0; /* 1 */
    *margin-left: -7px; /* 2 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */

button,
input {
    line-height: normal; /* 1 */
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */

button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding that is displayed in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}


/* =============================================================================
   Tables
   ========================================================================== */

/* 
 * Remove most spacing between table cells
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; clear:both; }

/* 
 * Semantic
 */

.blue {
	color:#3c5a98;
}
.caps {
	text-transform:uppercase;
}
.date{
	font-size:9px;
	margin:0;
}
img.left{
	float:left;
}
img.right{
	float:right;
}
.dotted{
	position:relative;
}
.dotted span {
  	display: none;
}
.no-touch .dotted:hover span {
  	background: url(../images/hover-dots.png) repeat;
  	position: absolute;
  	display: block;
  	width: 100%;
  	height: 100%;
	top:0;
	left:0;
}



/* =============================================================================
   VELVET DIGITAL PAPER STYLES
   ========================================================================== */

/* 
 * ###   LAYOUT   ###
 */
html,body { min-height: 100%; }
.bg-wrap {
	min-height: 100%;
    margin:0;
	padding:74px 90px;
	background-color:#f1efef;
}
#wrapper {
	width:100%;
	min-width:780px;
	margin:0;
	position:relative;
}
.corner-bg {
	position:absolute;
	width:41px;
	height:41px;
	top:14px;
	left:14px;
	background: url(../images/corner-border.jpg) left top no-repeat;
}
#header { 
	width:100%;
	min-width:780px;
	height:140px;
	margin:0 0 50px 0;
	padding:0;
	position:relative;
}
#content { 
	width:100%;
	min-width:780px;
	margin:0;
	padding:0;
	position:relative;
}
#social {
	margin:62px 0 0 0;
}
#social p{
	padding:20px 0 0 25px;
}

/* 
 * 	HEADER 
 ======================
 */

#logo { 
	width:117px;
	height:62px;
	position:relative;
	float:right;
	text-align:right;
	padding:9px 0;
}
#logo img{
}

/* 
 * 	Search 
 */
#searchbox { 
	width:180px;
	position: absolute;
	right:0;
	top:-35px;
	float:right;
	background-color:#FFF;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.2); 
}
#searchbox input { 
	width:100px;
	height:14px;
	padding:3px 5px;
	background:none;
	border:0 none;
	float:left;
	font-size:11px;
}
#searchbox input:focus {
	outline:none;
}
#searchbox input[type="submit"], #searchbox input#submit {
	width:23px;
	height:16px;
	text-align:center;
	border:none;
	background:url(../images/search-icon.png) center 3px no-repeat;
}
#searchbox input[type="submit"]:hover, #searchbox input#submit:hover {
	background:url(../images/search-icon.png) center -27px no-repeat;
}


/* 
 * 	Top info 
 */
#top-info {
	position:relative;
	font-size:11px;
	margin:0 150px 0 0;
}
#top-info .column1, #top-info .column2, #top-info .column3{
	float:left;
}
#top-info .column1{
	width:250px;
	padding:0 40px 0 0;
}
#top-info .column2{
	width:175px;
	padding:0 19px 0 0; /*40px*/
}
#top-info .column2 a{
}
#top-info .column2 a:hover{
}
#top-info .column3 {
	width: 146px;
}
#top-info .column3 a{
	display:block;
}
#top-info .column3 h3 {
	margin-bottom: 14px;
}
#top-info h3{
}
#top-info p{
	margin:0;
	padding:0 0 0 25px;
	line-height:140%;
}
#top-info a{
	text-decoration:none;
}


/* 
 * 	CONTENT 
 ======================
 */
.content-wrap {
	position:relative;
	padding:0 0 46px;
	/*border-bottom:2px solid #3a3f41;*/
	/*background:url(../images/blue-dotted-line.png) left top repeat-x;*/
}
.viewport {
	position:relative;
	padding:0;
	margin:0;
	width:100%;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	height:460px;
	min-width:780px;
	overflow-x:auto;
	overflow-y:hidden;
}
.overview {
	position: absolute;
	top:0;
	left:0;
	padding:0;
	margin:0;
	width:3200px;
}

#top-info .column3 ul {
	display: block;
	padding:0 0 0 10px;
}
#top-info .column3 ul li {
	float: left;
}

#info-box a:hover {
	color: #78bade;
}

#info-box .fullText {
	display: none;
	padding-top: 20px;
}
#info-box .fullText,
#info-box .fullText p {
	font-weight: normal;
	font-size: 12px;
	line-height: 17px;
	font-family: 'Droid Sans',Arial,Helvetica,sans-serif;
}
#info-box .fullText ul {
	margin:5px 25px;
}
#info-box .fullText li {
	margin:3px 0;
	background: url(../images/list-image-square.jpg) left center no-repeat;
	padding:0 0 0 12px;
}


a.icon_fb {
	margin: 0 15px;
	width: 8px;
	height: 16px;
	display: block;
	overflow: hidden;
	background:url(../images/velvetdp_FB.png) 0 0 no-repeat;
	text-indent: -9999px;
}
a.icon_fb:hover {
	background:url(../images/velvetdp_FB_rollover.png) 0 0 no-repeat;
}
a.icon_twitter {
	margin: 0 15px;
	width: 21px;
	height: 16px;
	display: block;
	overflow: hidden;
	background:url(../images/velvetdp_twitter.png) 0 0 no-repeat;
	text-indent: -9999px;
}
a.icon_twitter:hover {
	background:url(../images/velvetdp_twitter_rollover.png) 0 0 no-repeat;
}
a.icon_vimeo {
	margin: 0 15px;
	width: 17px;
	height: 16px;
	display: block;
	overflow: hidden;
	background:url(../images/velvetdp_vimeo.png) 0 0 no-repeat;
	text-indent: -9999px;
}
a.icon_vimeo:hover {
	background:url(../images/velvetdp_vimeo_rollover.png) 0 0 no-repeat;
}

/* 
 * 	Main navigation, accordion headings
 */
#accordion {
	margin:0;
}
#accordion h2{
	font-family: 'GaramondPremrProCaptRegular';
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:0.3em;
	font-size:35px;
	height:46px;
	padding:0 10px 0 25px;
	margin:0 0 29px;
	position:relative;
}
#accordion h2:hover{
	/*background:url(../images/bg-menu-thumbs.jpg) left bottom repeat-x;*/
}
#accordion h2 a{
	color:#3a3f41;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:bottom;
	width:100%;
	padding:17px 0 0 0;
	/*-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	transition: all 300ms linear;*/
}
#accordion h2:hover a {
	color:#0086CE; /*#fff;*/
}
#accordion h2.active:hover a {
	color:#3a3f41;
}
#accordion h2.active:hover {
	background:none;
}
#accordion h2 a:focus{
	outline:none;
}
#accordion h2.active {
	/*border-top:2px solid #3a3f41;*/
	margin-bottom:0;
	
}
#accordion h2.active a,
#accordion h2.active a:hover {
color: #0086CE;
}
#accordion h2 span{
	display:none;
	width:46px;
	height:46px;
	padding:0;
	position: absolute;
	right:0;
	top:1px;
	background:url(../images/sprite.png) 0 0 no-repeat;
}
#accordion h2 span:hover{
	background:url(../images/sprite.png) 0 -50px no-repeat;
}
#accordion h2.active span{
	display:block;
}
#accordion h2.active:hover span{
}


/* 
 * 	Text box with different info
 *  -----------------------------
 */
#info-box{
	margin:0 0 50px 0;
	position:relative;
}
#info-box p {
	margin:0;
	width:645px;
	padding:0 0 0 25px;
	line-height:100%;
	font-weight:normal;
	font-size:39px;
	font-family: 'GaramondPremrProCaptRegular';
}
#info-box .toggleFull {
	color: #3A3F41;
}
#info-box .toggleFull:hover {
	color: #0086CE; 
}
#info-box .toggleArrow {
	margin:0 0 0 10px;
	font-size:0;
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:21px;
	height:46px;
	outline:none;
	line-height:0;
	vertical-align: top;
	text-indent:-999em;
	background:url(../images/sprite.png) -12px -569px no-repeat; /* -10px */
}
#info-box .toggleFull:hover .toggleArrow {
	background:url(../images/sprite.png) -12px -619px no-repeat;
}
#info-box .toggleFull.open .toggleArrow {
	background:url(../images/sprite.png) -12px -469px no-repeat;
}
#info-box .toggleFull.open:hover .toggleArrow {
	background:url(../images/sprite.png) -12px -519px no-repeat;
}
#info-box b {
}

/* 
 * 	Project preview containers
 *  ----------------------------
 */
.project-preview {
	width:390px;
	text-align:left;
	position:relative;
	float:left;
}
.scrollWrap .project-preview { float: none; padding-bottom: 15px; }

.project-preview .project-numbers,
.project-details .project-numbers {
	margin:0 0 1px 0;
	padding:0;
}
.project-preview .project-numbers em,
.project-details .project-numbers em {
	margin:0 10px 0 0;
	padding:0;
	font-family:'Droid Sans';
	font-weight:400;
	color:#fff;
	background-color:#0086ce;
	font-style:normal;
	font-size:10px;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	position:relative;
	width:14px;
	height:14px;
	text-align:center;
}
.project-preview .project-numbers span,
.project-details .project-numbers span {
	padding:0;
	color:#a4a4a4;
	font-style:normal;
	font-size:10px;
	letter-spacing:0.1em;
}

.project-preview .preview-image{
	position:relative;
}
.project-preview .preview-image a.play{
	position: absolute;
	left:50%;
	top:50%;
	margin:-50px 0 0 -50px;
}

.project-preview .preview-top .dotted {
	float:left;
}
.project-preview .preview-top h3{
	font-size:20px;
	text-transform: none;
	font-weight:700;
	margin:20px 0 1px 0;
	color:#0086ce;
	padding:0;
	letter-spacing:0;
	font-style:normal;
}
.project-preview .preview-top a.dotted{
	text-decoration:none;
	padding:0;
}
.project-preview .preview-top a:hover h3{
	color:#000;
}
.project-preview .preview-top span{
	font-size:10px;
	margin:0;
	padding:0;
	text-transform:uppercase;
	color:#a4a4a4;
	letter-spacing:0.1em;
}
.project-preview .preview-info{
	padding:0 30px 0 0;
	color:#797e81;
	clear:both;
}
.project-preview .preview-info p{
	font-size:12px;
	margin:15px 0;
	padding:0;
	height:46px;
	overflow:hidden;
}
.scrollWrap .project-preview .preview-info p {
	height: auto;
}
.project-preview .preview-info a{
	font-size:11px;
	color:#a4a4a4;
	display:block;
	text-decoration:underline;
}
.project-preview .preview-info a:hover{
	color:#0086ce;
}

/* 
 * 	PORTFOLIO
 *  ###########################
 */
#portfolio {
	border-top:none;
	padding:0;
}
.one-cat {
	background:url(../images/blue-dotted-line.png) left top repeat-x;
	padding:8px 0 8px 75px;
	/*height:540px;*/
}
.one-cat.closed {
	height:50px;
}
.one-cat.closed .viewport {
	height:0;
}
.submenu {
	position:relative;
	top:2px;
	padding:0;
	right:0;
	float:right;
	height:46px;
	width:93px;
}
.submenu li {
	float:left;
	padding:0;
	width:46px;
	height:46px;
	margin:0;
	font-size:0;
	line-height:0;
	text-indent:-9999px;
	border-left:1px solid #f1efef;
}
.submenu li:first-child {
	border-left:0 none;
}
.submenu li a {
	float:left;
	width:100%;
	height:100%;
}
.submenu li a:focus {
	outline:none;
}
.submenu li.thumbs-view a {
	background:url(../images/portfolio-submenu-icons.png) left top no-repeat;
}
.submenu li.list-view a {
	background:url(../images/portfolio-submenu-icons.png) -112px top no-repeat;
}
.submenu li.thumbs-view.active a {
	background:url(../images/portfolio-submenu-icons.png) -56px top no-repeat;
}
.submenu li.list-view.active a {
	background:url(../images/portfolio-submenu-icons.png) -168px top no-repeat;
}
.submenu li.thumbs-view:hover a {
	background:url(../images/portfolio-submenu-icons.png) -224px top no-repeat;
}
.submenu li.list-view:hover a {
	background:url(../images/portfolio-submenu-icons.png) -280px top no-repeat;
}

.cat-name {
	width:100%;
	margin:15px 0 15px -50px;
	padding:0 50px 0 0;
	height:18px;
	background:url(../images/dashed-lines-bg.png) left top repeat-x;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	position:relative;
	text-align:left;
}
.cat-name p{
	text-align:center;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	position:relative;
	font-size:10px;
	padding:3px 0 3px 20px;
	margin:0;
	color:#0086ce;
	cursor: pointer;
}
.cat-name p em{
	position:absolute;
	top:50%;
	left:0;
	width:16px;
	height:16px;
	margin:-8px 0 0 0;
	background: url(../images/sprite.png) 0 -242px no-repeat;
}
.cat-name p em:hover{
	cursor:pointer;
}
.one-cat.closed p em {
	background: url(../images/sprite.png) 0 -282px no-repeat;
}
.cat-name p span{
	padding:0 0 0 5px;
	color:#797e81;
}

/* 
 * 	LIST VIEW
 *  ------------------------------
 */
#list-view {
	padding:94px 0 23px 25px;
}
.list-header{
	height:20px;
	margin:0 0 5px;
	padding:0 0 0 50px;
}
.header-inner{
	min-width:695px;
	max-width:816px;
}
.list-header p,
.list-header a{
	float:left;
	position:relative;
	font-weight:700;
	margin:0;
	padding:4px 0 0 0;
	color:#0086CE;
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:0.2em;
}
.list-header span {
	width:10px;
	height:8px;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	margin:0;
}
.list-header p.asc span { background:url(../images/sprite.png) 0 -400px no-repeat; }
.list-header p.desc span { background:url(../images/sprite.png) 0 -419px no-repeat; }
.list-header p:hover{
	cursor:pointer;
}
.list-header .client, .project-header .client {
	width:25.529%;
}
.list-header .name, .project-header .name {
	width:29.137%;
}
.list-header .type, .project-header .type {
	width:13.725%;
}
.list-header .award, .project-header .award {
	width:15.054%;
	text-align: center;
}
.project-header .award img {
	margin-right: 10px;
}
.list-header .date, .project-header .date {
	width:13.358%;
}
.list-header .url, .project-header .url {
	width:2.690%;
}

.project-list {
	padding:0 0 0 50px;
}
.project-item {
}
.project-header {
	padding:5px 0;
	margin:13px 0;
	border-top:1px solid #F1EFEF;
	border-bottom:1px solid #F1EFEF;
	font-size:11px;
	position:relative;
}
.project-header p,
.project-header a{
	float:left;
	position:relative;
	margin:0;
	font-size:11px;
	color:#797e81;
	min-height: 2px;
}
.project-header .client{
	text-transform:uppercase;
	color:#3a3f41;
}
.project-header .date{
}
.project-header .url span{
	display:block;
	background: url(../images/icon-web.png) no-repeat center top;
	width:5px;
	height:10px;
	margin:2px auto 0;
}
.project-header .url:hover span {
	background-position:center bottom;
}
.project-header:hover {
	cursor:pointer;
	border-top:1px solid #158fd1;
	border-bottom:1px solid #158fd1;
}
.project-header:hover p {
	color:#797e81;
}
.project-header:hover .client {
	color:#0086ce;
}
.no-touch .project-header:hover .sml-thumb {
	display:block;
}

.project-header .sml-thumb{
	display:none;
	position:absolute;
	z-index:10;
	top:0;
	left:-76px;
	width:68px;
	height:55px;
	padding:0 4px 0 0;
	text-align:left;
	background:url(../images/sml-thumb-arrow.png) right 8px no-repeat;
}
.project-header .sml-thumb img{
	border:1px solid #0086ce;
}

/**
 * Buttons
 */
.button.close {}

/**
 * Project category
 */
#thumbs-view { padding: 94px 0 46px; }
.projectCategory { padding: 0 0 0 25px; /*margin-top: -1px;*/  }
	
	.projectCategory .categoryHeader { margin-bottom: 1px; background: #dfe0e3; }
	.projectCategory.closed .categoryHeader { background: #0086ce; }
	.projectCategory .categoryHeader:hover { background: #CEB300; }
		.projectCategory .categoryHeader a {
			color: #0086CE;/*#0086CE;*/line-height:23px; outline:none; height:23px; display: block; padding:0 0 0 46px; font-size:10px;
			font-weight:normal; text-transform:none; text-transform:uppercase;
		}
		.projectCategory.closed .categoryHeader a, .projectCategory .categoryHeader:hover a {
			color: #fff;
		}
		.projectCategory h3 {
			padding:0; position:relative; margin:0; line-height:23px; height:23px;/*color:#797e81;*/color: #fff; font-weight:normal;
			/*border-top: 1px dashed #cecece; border-bottom: 1px dashed #cecece;*/
		}
		.projectCategory .categoryHeader h3 em {
			height:9px; width:10px; display: block; position:absolute; left:50%; top:50%; margin:-4px 0 0 -5px; background: url(../images/sprite.png) no-repeat 0 -400px; 
		}
		.projectCategory.closed .categoryHeader h3 em { background-position:-25px -420px; }
		.projectCategory.closed .categoryContent { display: none; }
		
	.projectCategory .categoryContent {padding:46px 0 46px 25px; position: relative;}
		
		.projectPager {height:46px; font-size:10px; color:#0086ce; line-height:13px; position: absolute; top:0; right:0; }
			.projectPager li {display: none; float:left; padding: 0 1px 0 0;}
			.projectPager li.active {position:relative; display:block; width:46px; text-align:center;}
			
			.projectPager a:link,
			.projectPager a:visited {display:block; width:25px; height:13px; background:#0086ce; outline:none;}
			.projectPager a.active:link,
			.projectPager a.active:visited,
			.projectPager a:hover {background:#d7c340;}
			.projectPager a.close:link,
			.projectPager a.close:visited { width:46px; height:46px; display: block; background: url(../images/sprite.png) no-repeat 0 -200px; }
			.projectPager a.close:hover { background-position:0 -250px; }
		
		.projectCategory .fullProjects {margin-left:21px;  }
			.projectCategory .fullProjects .close { position: absolute; left: -10px; }
			
		.projectCategory .projectList {margin-left:21px;}
			.projectList td { vertical-align: top; padding-right: 1px; }
		


/**
 * Project thumb
 */
.projectThumb {width: 389px; }
	.projectThumb a.dotted {display:block;}
	.projectThumb img {display:block;}
	.projectThumb h3 { margin: 21px 0 0 0; font-size: 11px; color:#3A3F41; font-weight:700; letter-spacing:0.2em; }
	.projectThumb h4 { margin:0 90px 0 0; font-size: 28px; line-height:100%; color:#3A3F41; font-family: 'GaramondPremrProCaptRegular'; font-weight:normal; }
	.projectThumb dl,
	.projectDetails dl { margin: 23px 0 0 0; font-size: 11px; letter-spacing: 0.1em;}
	.projectThumb dl { margin-top:3px; }
	.projectThumb dl a,
	.projectDetails dl a { text-decoration: underline; }
	.projectThumb dl a:hover,
	.projectDetails dl a:hover { text-decoration: none; }
	.projectThumb dt,
	.projectDetails dt {display:none;}
	.projectThumb dd,
	.projectDetails dd { display: block; margin: 0 0 2px; }
	.projectThumb dd.type,
	.projectDetails dd.type { margin: 0 0 25px; color:#a4a4a4;  font-size: 10px; text-transform: uppercase; }
	.projectThumb dd.award,
	.projectDetails dd.award { color: #ceb300; padding-left:17px; font-weight:700; letter-spacing:0; background: url(../images/icon-award.png) no-repeat 0 2px; }
	.projectDetails dd.award_1, .projectDetails dd.award_4, .projectThumb dd.award_1, .projectThumb dd.award_4 { color:#ceb300; }
	.projectDetails dd.award_2, .projectDetails dd.award_5, .projectThumb dd.award_2, .projectThumb dd.award_5 { color:#405d6f; }
	.projectDetails dd.award_3, .projectDetails dd.award_6, .projectThumb dd.award_3, .projectThumb dd.award_6 { color:#b46347; }
	.projectDetails dd.award_1, .projectThumb dd.award_1 { background: url(../images/award_1.png) no-repeat 0 2px; }
	.projectDetails dd.award_2, .projectThumb dd.award_2 { background: url(../images/award_2.png) no-repeat 0 2px; }
	.projectDetails dd.award_3, .projectThumb dd.award_3 { background: url(../images/award_3.png) no-repeat 0 2px; }
	.projectDetails dd.award_4, .projectThumb dd.award_4 { background: url(../images/award_4.png) no-repeat 0 2px; }
	.projectDetails dd.award_5, .projectThumb dd.award_5 { background: url(../images/award_5.png) no-repeat 0 2px; }
	.projectDetails dd.award_6, .projectThumb dd.award_6 { background: url(../images/award_6.png) no-repeat 0 2px; }
	.projectDetails dd.web a { margin:23px 0 25px; display:block; }
	.projectThumb dd.web,
	.projectDetails dd.web { padding-left: 17px; background: url(../images/icon-web.png) no-repeat 2px 2px; margin: 23px 0 25px; }
	.projectDetails dd.web:hover { background-position:2px -18px; }

/**
 * Project detail view
 */
.projectDetails {position: relative;}
	.projectDetails .projectTeam { float: right; width: 110px; font-weight:700; height: 270px; padding: 11px 24px; color:#797e81; overflow: hidden; margin: 0 1px 0 0; background: #dfe0e3; font-size: 12px;  line-height: 14px; }
		.projectDetails .projectTeam p { margin-bottom: 11px; }
		.projectDetails .projectTeam em { font-style: normal; font-weight:normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;}
	.projectDetails .projectImages { position: relative; }
	.projectDetails .projectImages img { margin-right: 1px; }
	.projectDetails h4 { margin:35px 0 5px 0; font-size: 28px; font-weight:normal; font-family: 'GaramondPremrProCaptRegular'; }
	.projectDetails small {  margin: 0 0 20px; color:#a4a4a4;  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
	.projectDetails .projectContent { width: 548px; padding: 6px 0 1px 0; font-size: 12px; line-height: 17px; }


/*  ## Detailed project view ##  
	---------------------------
*/
.project-details {
	display:none;
}
.project-details {
	display: block;
}
.project-item.opened {
	border-bottom:1px solid #158fd1;
	padding:0 0 20px 0;
}
.project-item.opened .project-header {
	border-top:1px solid #158fd1;
	padding:9px 0;
}
.project-item.opened .project-header:hover {
	cursor:auto;
	border-top:1px solid #158fd1;
	border-bottom:1px solid #F1EFEF;
}
.project-item.opened .project-header:hover .sml-thumb {
	display:none;
}
.project-item.opened .project-header p,
.project-item.opened .project-header .url{
	display:none;
}
.project-item.opened .project-header p.client{
	display:block;
	color:#3A3F41;
	font-weight:700;
	letter-spacing:0.2em;
}
.project-header a.close{
	display:none;
}
.project-item.opened .project-header a.close {
	width:46px;
	height:46px;
	display:block;
	position:absolute;
	right:0;
	top:0;
	margin:0;
	font-size:0;
	line-height:0;
	text-indent:-9999px;
	background:url(../images/sprite.png) 0 -100px no-repeat;
}
.project-item.opened .project-header a.close:hover {
	background:url(../images/sprite.png) 0 -150px no-repeat;
}

.project-details .date{
}
.project-details .gallery-wrap {
	padding:0 0 0 161px;
	position:relative;
	height:292px;
}
.project-details .gallery-wrap .viewport {
	height:292px;
	margin:0 0 0 -3px;
}
.project-details .gallery-wrap .scrollWrap {
	position:relative;
	padding:0;
	margin:0;
	width:100%;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	min-width:780px;
	height:292px;
	margin:0 0 0 -3px;
}
.project-details .gallery-wrap .scrollWrap .slides {
	height: auto; 
}
.project-details .gallery-wrap .scrollWrap .slides td div { padding-right: 1px; }
.project-details .project-team{
	width:113px;
	height:252px;
	vertical-align:middle;
	padding:20px 23px;
	background-color:#0086ce;
	font-size:12px;
	color:#fff;
}
.projectFull { position: relative; z-index: 15; background: #F1EFEF; top: 4px; }
.projectFull .project-details .project-team {
	position: absolute; left: 0;
}
.one-cat td { vertical-align: top; }
.dragdealer { 
	overflow: hidden;
}
.projectFull .project-details .gallery-wrap { padding-left: 0; position: relative; }
.projectFull .project-details .dragdealer {
	position: relative;
	margin-left: 160px;
	overflow: hidden;
}
#content .dragdealer .handle,
.no-touch #content .dragdealer .handle:hover,
.no-touch #content .dragdealer .handle:active,
.dragdealer .projectThumb a.dotted,
.no-touch .dragdealer .projectThumb a.dotted:hover  {
	cursor: url(http://paper.velvet.ee/a/css/drag_hand_48.cur), move;
}
.one-cat .projectList { position: relative; z-index: 10; }
.scrollWrap .project-details .project-team {
	margin: 0 1px 0 0; display: block;	
}
.scrollWrap .project-details .project-image {
	height: 292px;
	padding-right: 1px;
}
	.scrollWrap .project-details .project-image img {display:block;}
.project-gallery img{
	margin:0 1px 0 0;
	float:left;
}
.project-team .member{
	margin:0;
	padding:13px 0 0 0;
}
.project-team .member:first-child{
	padding:0;
}
.project-team .member p{
	margin:0;
	padding:0;
	line-height:105%;
}
.project-team .member em,
.project-team em {
	color:#85bcd9;
	font-size:10px;
	text-transform:uppercase;
	font-style:normal;
	letter-spacing:0.2em;
}

.project-text {
	padding-bottom: 20px;
}
.project-text h3 {
	font-size:20px;
	text-transform: none;
	font-weight:700;
	margin:20px 0 1px 0;
	color:#0086ce;
	padding:0;
	letter-spacing:0;
	font-style:normal;
}
.project-text span {
	font-size:10px;
	margin:0;
	padding:0;
	color:#a4a4a4;
	letter-spacing:0.1em;
	text-transform:uppercase;
	display:block;
}
.project-text .column {
	font-size:12px;
	line-height:140%;
	width:325px;
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:top;
	margin:0 45px 0 0;
	clear: right;
}
.project-text .column:first-child {
}
.project-text .column p{
}
.project-text .column b{
	letter-spacing:0.2em;
	font-weight:normal;
	text-transform:uppercase;
}
.project-text a.url {
	display:block;
	color:#a4a4a4;
	text-decoration:underline;
	font-size:11px;
}
.project-text a.url:hover{
	color:#0086ce;
}

/*
*	SERVICES
*	---------------
*/

#services.content-wrap{
	padding:36px 25px;
}
#services .column1, #services .column2, #services .column3{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:top;
	width:240px;
	margin:10px 15px 0 0;
	font-size:12px;
	line-height: 17px;
}
#services h3{
	margin:0 0 10px 0;
	letter-spacing:0.2em;
	font-size:11px;
	color:#3A3F41;
	text-transform: uppercase;
	font-family:'Droid Sans';
	font-weight:700;
}
#services ul{
	margin:0 0 0 -12px;
}
#services li{
	margin:3px 0;
	background: url(../images/list-image-square.jpg) left center no-repeat;
	padding:0 0 0 12px;
}
#services .column2{
}
#services .column3{
	margin:10px 0 0 5px;
}

/* 
 * 	TEAM
 *  ----------------------------
 */

.one-team{
	padding:46px 0 0 75px;
	margin:0;
	/* height:450px; */
	position:relative;
}
.one-team td { vertical-align: top; }
.one-team .pager{
}
.one-team .viewport{
	height:450px;
}
.team-name{
	margin:0; 
	padding:0 0 0 50px;
	left:-50px;
	width:100%;
	position:relative;
	height:23px;
	line-height:23px;
	background: #dfe0e3;
}

.team-name p{
	text-transform:uppercase;
	letter-spacing:0.2em;
	font-style:normal;
	margin:0;
	font-size:10px;
	color:#3A3F41;
	font-weight:700;
	letter-spacing:0.2em;
}
.team-member {
	width:390px;
	text-align:left;
	position:relative;
	float:left;
	margin:23px 0 0 0;
}
.scrollWrap .team-member { float: none; }

.team-member .member-info{
	margin:0;
	padding:0;
}
.team-member .member-info .name{
	margin:0 0 13px 0;
	padding:0;
}
.team-member .member-info .name h3{
	color: #3A3F41;
    font-family: 'GaramondPremrProCaptRegular';
    font-size: 28px;
    font-style: normal;
    letter-spacing: 0;
    margin: 20px 0 1px;
    padding: 0;
    text-transform: none;
}
.team-member .member-info .name span{
	color: #A4A4A4;
    display: block;
    font-size: 10px;
    letter-spacing: 0.1em;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
.team-member .photo{
	position:relative;
}
.team-member .member-info p{
	font-size:12px;
	margin:0;
	color:#797e81;
	padding:0 0 2px 0;
	line-height:130%;
}
.team-member .member-info a{
	color:#0086CE;
}
.team-member .member-info a:hover{
	color:#ceb300;
}


/* scroll.css */
.scrollWrap table.slides { height: 100%; overflow: hidden; position: relative; /*background: #FF0000;*/ }
	.scrollWrap .slides tr td { /*width: 300px; height: 250px; min-height: 100%;*/ vertical-align: top; text-align: left; }
	/*.scrollWrap tr td:nth-child(even) { background-color: #99CC99; }
	.scrollWrap tr td:nth-child(odd) { background-color: #33CCFF; }*/
	.scrollWrap .slides tr td .view { overflow: hidden; position: relative; width: 390px; min-width: 390px; }
	.unselectable {
		-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

.scrollWrap { border: none; position: relative; overflow: hidden; /*left: 30px; right: 0px;*/ height: 250px; }
	.scroller { width: 100%; position: relative; overflow-y: hidden; overflow-x: auto; height: 150%; }
	
	.scrollBar { height: 10px; width: 100%; background: #0086ce; position: absolute; left: 0px; bottom: 0px; z-index: 120; }
		.scrollHandle { position: absolute; height: 10px; background: #ffffff; max-width: 100%; z-index: 19; /*max-width: 70px;*/ min-width: 15px;  
			/*-webkit-transition: width 250ms ease-in-out;*/
		}
		.scrollMarker { position: absolute; width: 0px; height: 10px; background: #ad5221; max-width: 100%; z-index: 18; }
		
	/*.scrollWrap tr td div.marked { width: 900px; height: 600px; }*/
	
	.scrollWrap tr td .opened {   position: relative; top: 0px; z-index: 10; display: none; background: #F1EFEF; }
	.scrollWrap tr td .regular {  opacity: 1; z-index: 5; position: relative; -webkit-transition: opacity 500ms ease-in-out; }
	
	.scrollWrap.project-open tr td .regular { 
	   opacity: 0.5; filter: alpha(opacity=50);
		}
	.scrollWrap.project-open tr td .regular:hover { opacity: 1; }